AI Elements
用于 AI 对话界面的会话与消息基础组件。
AI Elements
对话列表
宿主已经维护消息数组，只需要统一的对话排版时使用 TxAiConversation。
AI Conversation
示例加载中...
交互契约
messages渲染前会被过滤：空content会被隐藏，除非status是pending或streaming。markdown默认是true，消息正文会交给TxMarkdownView渲染。showAvatar开启头像列；未提供message.avatar时显示角色/名称首字母。pending或streaming且内容为空的消息会显示内置输入中指示器。TxAiConversation使用aria-live="polite"，追加消息时不会抢焦点。
API
AiElementMessage
| 字段 | 类型 | 默认值 | 说明 |
|---|---|---|---|
id | string | 必填 | 消息稳定 key。 |
role | 'user' | 'assistant' | 'system' | 'tool' | 必填 | 视觉和语义角色。 |
content | string | 必填 | 消息文本或 Markdown 源。 |
createdAt | number | string | Date | - | 宿主可选时间戳。 |
name | string | - | 显示名称；默认回退为 You / AI / Tool / System。 |
avatar | string | - | 开启头像时使用的图片 URL。 |
status | 'pending' | 'streaming' | 'complete' | 'error' | - | 消息生命周期状态。 |
TxAiConversation Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
messages | AiElementMessage[] | 必填 | 对话数据；空 content 会被过滤，除非消息处于 pending 或 streaming。 |
markdown | boolean | true | 使用 TxMarkdownView 渲染消息正文。 |
compact | boolean | false | 使用更紧凑的消息间距。 |
emptyText | string | 'No messages yet' | 过滤后没有可渲染消息时显示的内置空状态文案。 |
showAvatar | boolean | false | 为所有渲染消息显示头像列。 |
TxAiMessage Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
message | AiElementMessage | 必填 | 单条消息数据。 |
markdown | boolean | true | 使用 TxMarkdownView 渲染正文；设为 false 时保留纯文本换行。 |
compact | boolean | false | 使用紧凑行密度和更小头像尺寸。 |
showAvatar | boolean | false | 为当前消息开启头像。 |
Events
TxAiConversation 与 TxAiMessage 不派发组件事件。请在宿主对话 store 中更新状态，再把新的 messages 数组传回 TxAiConversation。
Slots
TxAiConversation
| 插槽名 | Props | 说明 |
|---|---|---|
empty | - | 替换消息过滤后的内置空状态段落。 |
TxAiMessage
| 插槽名 | Props | 说明 |
|---|---|---|
default | { message } | 替换消息正文区域；适合工具卡片、附件或自定义渲染器。 |
avatar | { message } | showAvatar 开启时替换头像图片或回退内容。 |
最佳实践
- 在宿主维护 provider 流式状态，再映射到
status。 - 使用对话存储里的稳定消息 id，不要使用数组下标。
- 助手输出建议保持 Markdown 开启；不可信 Markdown 应在数据边界做清洗或归一化。
- 工具卡片或附件建议用
default插槽，不要把自定义 HTML 塞进content。
审阅说明
- 组件源码:
packages/tuffex/packages/components/src/ai-elements/src/TxAiConversation.vue确认消息过滤、polite live region、empty插槽和子消息透传。 - 组件源码:
packages/tuffex/packages/components/src/ai-elements/src/TxAiMessage.vue确认角色标签、状态标签、Markdown/纯文本渲染、输入中指示器以及default/avatar插槽。 - 类型契约:
packages/tuffex/packages/components/src/ai-elements/src/types.ts定义AiElementMessage、AiConversationProps和AiMessageProps。 - 实测覆盖: Coverage: 当前没有专用的
ai-elements组件单测；apps/nexus/test/docs/tuffex-component-docs-coverage.test.ts会验证本页具备中英文文档，并确保AiElementsAiConversationDemo仍注册到存在的 Vue 示例。 - 导出入口:
packages/tuffex/packages/components/src/ai-elements/index.ts导出可安装的AiConversation、AiMessage、TxAiConversation和TxAiMessage。
Source
查看源码
packages/tuffex/packages/components/src/ai-elements/index.ts