Needless UI

コンポーネント

チャット

モデルと対話できます。応答のストリーミング、ツール、バージョン、ファイルに対応します。

インポート

import-chat.ts
import { NuiChat, NuiChatSession, nuiEventStream } from '@needless-ui/angular/chat';

NuiChat

会話と入力欄をひとまとめにしたもの。

セレクター
nui-chat
名前型デフォルト説明
session入力NuiChatSession表示する会話。
assistant入力string'Assistant'アシスタントの名前。スクリーンリーダーが読み上げる見出しに使われます。
headingLevel入力number3スクリーンリーダーにだけ表示される、各メッセージの見出しのレベル。応答内の見出しはその1つ下になります。
announce入力'reply' | 'notice' | 'off''reply'応答の完了時にスクリーンリーダーが読み上げる内容：全文、短い通知、なしのいずれか。
images入力booleanfalse応答内の画像を表示します。オフのときは、画像のテキストが画像へのリンクになります。
value双方向string''入力中のテキスト。
placeholder入力string空の入力欄に表示するヒント。
suggestions入力string[][]クリックで送信できるプロンプト。最初のメッセージまで表示されます。
sendOn入力'enter' | 'mod+enter''enter'Enter と、Ctrl または ⌘ + Enter のどちらで送信するか。
disabled入力booleanfalse入力欄から送信できないようにします。
attach入力booleanfalseファイルを受け付けます。選択、貼り付け、ドロップに対応します。
accept入力string''受け付けるファイルの種類。<input type="file"> と同じ形式です。
maxFiles入力number101つのメッセージに添付できるファイルの数。
maxSize入力number20_000_000受け付ける最大のファイルサイズ（バイト単位）。
labels入力NuiChatLabelsInputチャットが表示または読み上げるすべてのテキスト。翻訳に使います。
rated出力{ message, rating }ユーザーが評価した応答を、評価とともに出力します。評価が取り消されたときは null です。
focusメソッド() => voidテキストフィールドにフォーカスします。
scrollToEndメソッド(behavior?) => void最新のメッセージまでスクロールし、以降も追従します。

NuiChatSession

DOM を持たない会話そのもの。コンポーネント内で、respond、messages、id オプションを指定して作成します。

名前型デフォルト説明
respondプロパティ(request) => NuiChatReplyアプリ側で実装する関数。request.messages への応答を書き、request.signal が中断されたら停止します。
messagesプロパティSignal<NuiChatMessage[]>画面上の会話。
allプロパティSignal<NuiChatMessage[]>すべてのバージョンのすべてのメッセージ。保存して、messages として渡し直せます。
busyプロパティSignal<boolean>応答を受信中かどうか。
sendメソッド(text, files?) => Promise<void>メッセージを送信し、応答を求めます。
stopメソッド() => void応答を停止します。それまでに書かれた内容は残ります。
retryメソッド(message?) => Promise<void>もう一度尋ねます。新しい応答は、元の応答と並ぶ別のバージョンになります。
editメソッド(message, text) => Promise<void>ユーザーのメッセージの新しいバージョンを送信します。
versionsメソッド(message) => NuiChatMessage[]メッセージのすべてのバージョン。古い順に並びます。
showメソッド(message) => void会話をこのバージョンに切り替えます。
rateメソッド(message, 'up' | 'down' | null) => void応答に対するユーザーの評価を記録します。
remove, load, clearメソッド(…) => voidメッセージとそれ以降の削除、会話の置き換え、最初からのやり直しを行います。

NuiChatMessage

1つのメッセージ。parent が同じメッセージは、互いのバージョンです。

名前型デフォルト説明
id, parentプロパティstring, string | nullメッセージのキーと、その前のメッセージのキー。
roleプロパティ'user' | 'assistant'誰が書いたか。
textプロパティstringアシスタントからは Markdown、ユーザーからはプレーンテキスト。
statusプロパティ'pending' | 'streaming' | 'done' | 'stopped' | 'error'応答の進み具合。待機中から完了まで。
reasoningプロパティstringモデルが回答の前に考えた内容。
toolsプロパティNuiChatTool[]呼び出したツールと、その状態、入力、出力。
sourcesプロパティ{ url, title? }[]参照したページ。
attachmentsプロパティNuiChatAttachment[]一緒に送信されたファイル。
ratingプロパティ'up' | 'down' | nullユーザーの評価。
dataプロパティunknownモデル名など、メッセージと一緒に保持するその他の情報。

NuiChatToolTemplate

天気のカードなど、ツール呼び出しを描画します。コンテキストには呼び出しとそのメッセージが入っています。

セレクター
ng-template[nuiChatTool]
名前型デフォルト説明
nuiChatTool入力stringツールの名前。省略すると、ほかのどのテンプレートも指定していない呼び出しをすべて描画します。

NuiChatThread

独自のレイアウト向けの、会話部分だけのコンポーネント。nui-chat の入力のうち、会話に関わるものを受け取ります。

セレクター
nui-chat-thread

NuiChatComposer

入力欄だけのコンポーネント。nui-chat の入力のうち、メッセージの作成に関わるものを受け取ります。

セレクター
nui-chat-composer

NuiServerEvent

nuiEventStream がイベントごとに返す値。nuiTextStream はプレーンテキストを、nuiJsonStream は JSON Lines を読み取ります。3つとも fetch のレスポンスを受け取ります。

名前型デフォルト説明
eventプロパティstring'message'イベントの名前。
dataプロパティstringdata 行を連結したもの。
idプロパティstringストリームが最後に送った id。

NuiChatError

respond からスローすると、そのメッセージが表示されます。ほかのエラーでは汎用のメッセージが表示されるため、内部の情報は漏れません。