# AI聊天界面组件 ## 目的定义 2024-2025 年人工智能集成热潮中人工智能/人类对话界面的新兴标准。该技能利用与 Claude 一起构建的元知识来为流式用户体验、上下文管理和多模式交互建立明确的模式。由于行业缺乏既定模式，这提供了其他人遵循的参考实施。 ## 何时使用在以下情况下激活该技能： * 构建ChatGPT风格的对话界面 * 创建人工智能助手、副驾驶或聊天机器人 * 使用 Markdown 实现流式文本响应 * 管理对话上下文和令牌限制 * 处理多模式输入（文本、图像、文件、语音） * 处理人工智能特有的错误（幻觉、拒绝、限制） * 添加反馈机制（点赞、再生、编辑） * 实现会话分支或线程 * 可视化工具/函数调用 ## 快速入门 50行以内的最小AI聊天界面：从 'ai/react' 导入 { useChat } ；导出函数 MinimalAIChat() { const { 消息、输入、handleInputChange、handleSubmit、isLoading、停止 } = useChat(); 返回（

{messages.map(m => (

{m.content}

))} {isLoading &&

AI 正在思考...

}

）； } 有关流式 Markdown 的完整实现，请参阅“examples/basic-chat.tsx”。 ## 核心组件 ### 消息显示通过流支持构建用户、AI 和系统消息气泡： // 用户消息

{message.content}

{formatTime(message.timestamp)}

// 带流媒体的AI消息

{message.content} {message.isStreaming && ▊}

// 系统消息

<图标类型=“信息”/> {消息.内容}

有关 Markdown 渲染、代码块和格式详细信息，请参阅“references/message-components.md”。 ### 输入组件通过附件和语音创建丰富的输入体验：

### 响应控制 AI 响应的基本控制：

{正在流式传输 && (

### 反馈机制收集用户反馈以改进 AI 响应：

<按钮 onClick={() => sendFeedback('积极')} aria-label="良好反应" className={反馈==='积极'？ '已选择'：''} > <大拇指向上图标/> <按钮 onClick={() => sendFeedback('否定')} aria-label="不良反应" className={反馈==='负面'？ '已选择'：''} >

## 流媒体和实时用户体验 AI 响应的渐进式渲染需要特殊处理： // 使用 Streamdown 进行 AI 流式传输（处理不完整的 markdown）从 '@vercel/streamdown' 导入 { Streamdown }； // 自动滚动管理使用效果（（）=> { 如果（shouldAutoScroll（））{ messagesEndRef.current?.scrollIntoView({ 行为: '平滑' }); } }, [消息]); // 智能自动滚动启发式函数shouldAutoScroll() { 常量阈值 = 100； // 距底部的像素 const isNearBottom = 容器.scrollHeight - 容器.scrollTop - 容器.clientHeight < 阈值； const userNotReading = !hasUserScrolledUp && !isTextSelected; 返回 isNearBottom && userNotReading; } 有关完整的流模式、自动滚动行为和停止生成，请参阅“references/streaming-ux.md”。 ## 上下文管理向用户明确传达代币限制： // 友好的token显示 function TokenIndicator({ 使用, 总计 }) { const 百分比 =（已使用/总计）* 100； const 剩余 = 总计 - 已使用；返回（

{百分比> 80 ？ `⚠️ 剩余约 ${Math.floor(remaining / 250)} 条消息` : `${Math.floor(remaining / 250)} 页对话剩余内容`}

）； } 有关摘要策略、对话分支和组织，请参阅“references/context-management.md”。 ## 多模式支持处理图像、文件和语音输入： // 带预览的图片上传函数 ImageUpload({ onUpload }) { 返回（

<输入类型=“文件” 接受=“图像/*” onChange={handleFileSelect} 多个隐藏的 ref={文件输入引用} /> {previews.map(预览 => ( 上传预览

))}

）； } 有关完整的多模式模式（包括语音和屏幕共享），请参阅“references/multi-modal.md”。 ## 错误处理优雅地处理 AI 特定的错误： // 拒绝处理 if (response.type === '拒绝') { 返回（

<图标类型=“信息”/>

我无法帮助满足该请求。

<详情> <摘要>为什么？

{响应.原因}

尝试提问：{response.suggestion}

）； } // 限制通信速率 if (error.code === 'RATE_LIMIT') { 返回（

请等待 {error.retryAfter} 秒

）； } 有关全面的错误模式，请参阅“references/error-handling.md”。 ## 工具使用可视化显示 AI 何时使用工具或功能：函数 ToolUsage({ 工具 }) { 返回（

<图标类型={工具.type} /> {工具.名称} {tool.status === '正在运行' && }

{tool.status === '完成' && ( <详情>

查看详情

{JSON.stringify(tool.result, null, 2)}

)}

）； } 有关函数调用、代码执行和 Web 搜索模式，请参阅“references/tool-usage.md”。 ## 实施指南 ### 推荐堆栈主要图书馆（2025 年 11 月验证）： # 核心AI聊天功能 npm install ai @ai-sdk/react @ai-sdk/openai # 流式 Markdown 渲染 npm 安装@vercel/streamdown # 语法高亮 npm 安装react-syntax-highlighter # LLM 输出的安全性 npm 安装 dompurify ### 性能优化对于流畅的流媒体至关重要： // 记忆消息渲染 const MemoizedMessage = memo(消息, (上一个, 下一个) => prev.content === next.content && prev.isStreaming === next.isStreaming ）； // 去抖流更新 const debouncedUpdate = useMemo( () => 去抖(updateMessage, 50), [] ）； // 长时间对话的虚拟滚动从“react-window”导入{VariableSizeList}；有关详细的性能模式，请参阅“references/streaming-ux.md”。 ### 安全考虑始终清理 AI 输出：从 'dompurify' 导入 DOMPurify；函数 SafeAIContent({ 内容 }) { const sanitized = DOMPurify.sanitize(内容, { ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'code', 'pre', 'blockquote', 'ul', 'ol', 'li'], ALLOWED_ATTR：['类'] }); 返回{sanitized}; } ### 辅助功能确保人工智能聊天可供所有人使用： // 屏幕阅读器的 ARIA 活动区域

{messages.map(msg => (

{消息.内容} ))}

// 加载公告

{正在加载？ “人工智能正在响应”：“”}

有关完整的可访问性模式，请参阅“references/accessibility.md”。 ## 捆绑资源 ### 脚本（无令牌执行） * 运行 `scripts/parse_stream.js` 来解析流媒体期间不完整的 markdown * 运行“scripts/calculate_tokens.py”来估计令牌使用情况和上下文限制 * 运行 `scripts/format_messages.js` 以格式化消息历史记录以供导出 ### 参考文献（渐进式披露） * `references/streaming-patterns.md` \- 完整的流式用户体验模式 * `references/context-management.md` \- 令牌限制和对话策略 * `references/multimodal-input.md` \- 图像、文件和语音处理 * `references/feedback-loops.md` \- 用户反馈和 RLHF 模式 * `references/error-handling.md` \- AI 特定的错误场景 * `references/tool-usage.md` \- 可视化函数调用和工具使用 * `references/accessibility-chat.md` \- 屏幕阅读器和键盘支持 * `references/library-guide.md` \- 详细的库文档 * `references/performance-optimization.md` \- 流性能模式 ### 示例 * `examples/basic-chat.tsx` \- 最小 ChatGPT 风格的界面 * `examples/streaming-chat.tsx` \- 具有记忆功能的高级流媒体 * `examples/multimodal-chat.tsx` \- 图像和文件上传 * `examples/code-assistant.tsx` \- IDE 风格的代码副驾驶 * `examples/tool-calling-chat.tsx` \- 函数调用可视化 ### 资产 * `assets/system-prompts.json` \- 针对不同用例的精选提示 * `assets/message-templates.json` \- 预构建的消息组件 * `assets/error-messages.json` \- 用户友好的错误消息 * `assets/themes.json` \- 浅色、深色和高对比度主题 ## 设计代币集成所有视觉样式都使用设计令牌系统： /* 消息气泡使用设计标记 */ .message.user { 背景： var(--message-user-bg, var(--color-primary)); 颜色：var（--消息用户文本，var（--颜色-白色））；填充： var(--message-padding, var(--spacing-md)); 边框半径： var(--message-border-radius, var(--radius-lg)); } .message.ai { 背景：var(--message-ai-bg, var(--color-gray-100)); 颜色：var(--message-ai-text, var(--color-text-primary)); } 有关完整的主题系统，请参阅“技能/设计令牌/”。 ## 关键创新该技能为以下方面提供了业界首创的解决方案： * **记忆化流渲染** \- 性能提升 10-50 倍 * **智能自动滚动** \- 用户活动感知滚动 * **令牌隐喻** \- 用户友好的上下文通信 * **不完整的降价处理** \- 优雅的部分渲染 * **RLHF 模式** \- 有效的反馈收集 * **对话分支** \- 非线性对话树 * **多模式集成** \- 无缝文件/图像/语音处理 * **辅助功能优先** \- 内置屏幕阅读器支持 ## 战略重要性这是最关键的技能，因为： 1. **完美时机** \- 每个应用程序都添加人工智能（2024-2025 年繁荣） 2. **不存在标准** \- 定义模式的机会 3. **元优势** \- 与 Claude 一起构建 = 深入的用户体验知识 4. **独特的挑战** \- 流媒体、背景、幻觉都是全新的 5. **参考实现** \- 可以成为其他人遵循的标准掌握这项技能来引领人工智能界面革命。

构建爱聊

包含技能