Chat 设计文档

使用建议

对话/AI 聊天组件（严格对齐 Semi Chat）：DOM 对齐 Semi 结构 .cd-chat > -inner > -content > -container；消息流（Avatar 头像/标题/内容 MarkdownRender/操作区 Button+具名图标）+ 输入区（-inputBox > -inner > -clearButton + -container(-upload/-inputArea TextArea/-sendButton)）+ 提示区（-hints > -hint-item）。头像用本库 Avatar，操作/发送/上传/清除/回到底部/停止用本库 Button + 具名图标（copy=IconCopyStroked/like=IconLikeThumb·IconThumbUpStroked/reset=IconRedoStroked/delete=IconDeleteStroked/backBottom=IconChevronDown/stop=IconDisc/send=IconArrowUp旋转/upload=IconChainStroked/clear=IconDeleteStroked，对齐 Semi 非手写 svg）。loading 三点 flashing 动画。tokens 镜像 Semi variables.scss（~115 个）。框架无关逻辑在 @chenzy-design/core（buildSendContent/appendDivider/toggleLike/toggleDislike/resetLastMessage/shouldShowBackBottom/resolveEnableUpload/shouldSendOnEnter）。受控/非受控 chats，变换经 onChatsChange 回传。align(leftRight/leftAlign)、mode(bubble/noBubble/userBubble)、sendHotKey(enter/shift+enter)、enableUpload 三态、拖拽 dropArea。消息流 role=log/aria-live=polite；滚动出现回到底部悬浮按钮（SHOW_SCROLL_GAP=100）。ref 方法 resetMessage/scrollToBottom(animation)/clearContext/sendMessage。自定义渲染走 Svelte snippet（renderInputArea/renderChatBoxAvatar/Title/Content/Action/renderFullChatBox/renderHintBox/renderDivider）。

Accessibility

ARIA role：log

• 消息流容器 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

设计变量