如何引入
import { Chat } from '@chenzy-design/svelte'; 基础对话
chats + roleConfig，onMessageSend 里追加用户与助手消息。
消息状态
status 支持 loading / incomplete / complete / error。
提示区
hints 提供快捷提问，点击触发 onHintClick。
API 参考
Chat
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|
chats | 消息列表；传入即受控，否则内部维护 | Message[] | undefined |
roleConfig | 角色元数据（名称/头像/色），按 message.role 取 | RoleConfig | undefined |
align | 布局对齐（左右分列 / 全左对齐） | 'leftRight'|'leftAlign' | 'leftRight' |
mode | 气泡模式 | 'bubble'|'noBubble'|'userBubble' | 'bubble' |
sendHotKey | 发送快捷键 | 'enter'|'shift+enter' | 'enter' |
showClearContext | 是否展示清除上下文按钮 | boolean | false |
showStopGenerate | 是否展示停止生成按钮 | boolean | false |
hints | 提示项列表（点击追加为一条 user 消息） | string[] | undefined |
enableUpload | 上传能力（true/false 或 {pasteUpload,dragUpload,clickUpload} 三态） | boolean|EnableUploadProps | true |
uploadProps | 透传内部 Upload 的 props | UploadProps | undefined |
markdownRenderProps | 透传消息内容 MarkdownRender 的 props | MarkdownRenderProps | undefined |
placeholder | 输入框占位（缺省走 locale Chat.placeholder） | string | undefined |
topSlot | 顶部插槽 | Snippet | undefined |
bottomSlot | 底部插槽（列表与输入区之间） | Snippet | undefined |
class | 根类名透传 | string | '' |
style | 根内联样式 | string | undefined |
onChatsChange | chats 变化回调（受控父级据此更新） | (chats: Message[]) => void | undefined |
onMessageSend | 发送消息回调 | (content: string, attachment: UploadFileItem[]) => void | undefined |
onInputChange | 输入变化回调 | (props: { value: string; attachment: UploadFileItem[] }) => void | undefined |
onClear | 清除上下文回调 | () => void | undefined |
onHintClick | 点击提示项回调 | (hint: string) => void | undefined |
onStopGenerator | 停止生成回调 | () => void | undefined |
onMessageCopy | 复制消息回调 | (message: Message) => void | undefined |
onMessageDelete | 删除消息回调 | (message: Message) => void | undefined |
onMessageReset | 重生成消息回调 | (message: Message) => void | undefined |
onMessageGoodFeedback | 点赞回调 | (message: Message) => void | undefined |
onMessageBadFeedback | 点踩回调 | (message: Message) => void | undefined |
renderInputArea | 自定义整块输入区 | Snippet<[RenderInputAreaProps]> | undefined |
renderChatBoxAvatar | 自定义消息头像 | Snippet<[RenderAvatarProps]> | undefined |
renderChatBoxTitle | 自定义消息标题 | Snippet<[RenderTitleProps]> | undefined |
renderChatBoxContent | 自定义消息内容 | Snippet<[RenderContentProps]> | undefined |
renderChatBoxAction | 自定义消息操作区 | Snippet<[RenderActionProps]> | undefined |
renderFullChatBox | 自定义整条消息（提供拆分节点） | Snippet<[RenderFullChatBoxProps]> | undefined |
renderHintBox | 自定义单个提示项 | Snippet<[RenderHintBoxProps]> | undefined |
renderDivider | 自定义清除上下文分割线 | Snippet<[Message]> | undefined |
Events
| 事件 | 载荷 | 说明 |
|---|
onChatsChange | — | 消息列表变化 |
onMessageSend | — | 发送消息 |
onInputChange | — | 输入内容/附件变化 |
onClear | — | 清除上下文 |
onHintClick | — | 点击提示项 |
onStopGenerator | — | 停止生成 |
onMessageCopy | — | 复制消息 |
onMessageDelete | — | 删除消息 |
onMessageReset | — | 重生成消息 |
onMessageGoodFeedback | — | 点赞 |
onMessageBadFeedback | — | 点踩 |
Slots
| 名称 | 说明 |
|---|
topSlot | 顶部插槽 |
bottomSlot | 列表与输入区之间插槽 |
renderInputArea | 自定义整块输入区 |
renderChatBoxAvatar | 自定义头像 |
renderChatBoxTitle | 自定义标题 |
renderChatBoxContent | 自定义内容 |
renderChatBoxAction | 自定义操作区 |
renderFullChatBox | 自定义整条消息 |
renderHintBox | 自定义提示项 |
renderDivider | 自定义分割线 |
Methods
| 属性 | 类型 | 说明 |
|---|
resetMessage | — | 将最后一条消息重置为 loading（对齐 Semi resetMessage） |
scrollToBottom | — | 滚动到底部；animation=true 带缓动 |
clearContext | — | 清除上下文（末尾追加 divider） |
sendMessage | — | 以文本 + 附件发送一条消息 |
Accessibility
| ARIA role | log |
| 键盘交互 | EnterShift+Enter |
- 消息流容器 role=log / aria-live=polite / aria-label 走 locale Chat.messageList，新消息被屏幕阅读器播报
- 输入区 textarea，Enter/Shift+Enter 由 sendHotKey + core.shouldSendOnEnter 判定（组合输入 isComposing 时不发送）
- 发送/上传/清除/复制/删除/重生成/赞/踩 均为原生 <button>，aria-label 走 locale；赞/踩 aria-pressed 反映激活态
- 回到底部悬浮按钮为原生 <button>，滚动距底 > SHOW_SCROLL_GAP(100) 时出现，aria-label=Chat.backToBottom
- 发送按钮 disabled 对齐 Semi getDisableSend：无文本且无附件 / 附件有未 success / 显式 disableSend
设计变量
| 变量 | 默认值 | 用法 |
|---|
--cd-chat-motion-duration | var(--cd-motion-duration-fast) | 返回底部显隐 / 悬浮过渡时长 |