聊天 API · Needless UI

导入

import-chat.ts

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

NuiChat

对话与输入框，合为一体。

选择器: nui-chat

NuiChat: 属性
名称	类型	默认值	说明
`session`输入	`NuiChatSession`		要显示的对话。
`assistant`输入	`string`	`'Assistant'`	助手的名称，用在屏幕阅读器读到的标题中。
`headingLevel`输入	`number`	`3`	每条消息标题的级别，这些标题仅对屏幕阅读器可见。回复中的标题再低一级。
`announce`输入	`'reply' \| 'notice' \| 'off'`	`'reply'`	回复完成时屏幕阅读器播报的内容：全部内容、简短通知或不播报。
`images`输入	`boolean`	`false`	显示回复中的图片；否则以图片的文字链接到图片。
`value`双向绑定	`string`	`''`	正在输入的文本。
`placeholder`输入	`string`		输入框为空时显示的提示。
`suggestions`输入	`string[]`	`[]`	点击即可发送的提示词，在第一条消息发出前显示。
`sendOn`输入	`'enter' \| 'mod+enter'`	`'enter'`	按 Enter 发送，还是按 Ctrl 或 ⌘ + Enter 发送。
`disabled`输入	`boolean`	`false`	禁止输入框发送消息。
`attach`输入	`boolean`	`false`	接收文件：选择、粘贴或拖放均可。
`accept`输入	`string`	`''`	可接收的文件类型，写法同 `<input type="file">`。
`maxFiles`输入	`number`	`10`	一条消息最多可附带的文件数。
`maxSize`输入	`number`	`20_000_000`	可接收的最大文件大小，单位为字节。
`labels`输入	`NuiChatLabelsInput`		聊天组件显示或播报的所有文本，供翻译使用。
`rated`输出	`{ message, rating }`		发出用户评价的回复及其评价；撤回评价时为 `null`。
`focus`方法	`() => void`		让文本框获得焦点。
`scrollToEnd`方法	`(behavior?) => void`		滚动到最新消息，并持续跟随。

NuiChatSession

不含任何 DOM 的对话本身。在组件中通过 respond、messages 和 id 选项创建。

NuiChatSession: 属性
名称	类型	说明
`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

一条消息。parent 相同的消息互为版本。

NuiChatMessage: 属性
名称	类型	说明
`id, parent`属性	`string, string \| null`	消息的 key，以及它所接续的那条消息。
`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]

NuiChatToolTemplate: 属性
名称	类型	默认值	说明
`nuiChatTool`输入	`string`		工具名称。不指定时，绘制所有未被其他模板指定的调用。

NuiChatThread

单独的对话区域，用于你自己的布局。接收 nui-chat 中与对话相关的输入属性。

选择器: nui-chat-thread

NuiChatComposer

单独的输入框。接收 nui-chat 中与撰写消息相关的输入属性。

选择器: nui-chat-composer

NuiServerEvent

nuiEventStream 为每个事件产出的对象。nuiTextStream 读取纯文本，nuiJsonStream 读取 JSON Lines；三者都接收 fetch 的响应。

NuiServerEvent: 属性
名称	类型	默认值	说明
`event`属性	`string`	`'message'`	事件名称。
`data`属性	`string`		拼接后的 data 行。
`id`属性	`string`		流最后发送的 id。

NuiChatError

在 respond 中抛出它，即可显示其消息。其他错误只显示通用消息，因此不会泄露内部信息。