TinyRobot Sender：构建卓越的AI聊天输入体验

 复制代码

输入组件为何如此关键

在AI聊天应用中，输入框是用户与人工智能之间最核心的交互界面。一个优秀的输入组件，不仅仅是文本的“容器”，更是用户意图与AI能力之间的桥梁。无论底层模型多么强大，如果用户无法精准、高效地表达自己的想法，整个AI体验都会大打折扣。

传统的 或 </code> 已经难以满足现代AI应用的复杂需求。用户需要：</p> <ul> <li><strong>结构化输入</strong>：通过模板快速构建复杂的Prompt</li> <li><strong>智能联想</strong>：输入时自动提示相关话题或产品</li> <li><strong>@提及</strong>：快速引用预设角色或上下文</li> <li><strong>语音输入</strong>：解放双手，自然表达</li> <li><strong>文件上传</strong>：将图片、文档等作为对话上下文</li> </ul> <p>TinyRobot Sender 正是为此而生 —— 它是一个高度可组合、可扩展的AI聊天输入组件，基于Tiptap富文本编辑器构建，提供企业级的输入体验。</p> <hr> <h3>快速上手</h3> <h4>1. 基本用法：模式切换</h4> <p>Sender 支持单行 (<code>single</code>) 和多行 (<code>multiple</code>) 两种输入模式。单行模式下，内容超出宽度时会自动切换为多行，无需用户手动调整。</p> <pre> 复制代码<code class="hljs language-vue code-block-extension-codeShowNum" lang="vue"><script setup lang="ts"> import { ref } from 'vue' import { TrSender } from '@opentiny/tiny-robot'const content = ref('') const mode = ref<'single' | 'multiple'>('single')const handleSubmit = (text: string) => { console.log('提交内容:', text) content.value = '' } </script><template> <p> <p style="display: flex; gap: 12px; margin-bottom: 16px;"> <button :style="{ background: mode === 'single' ? '#1476ff' : '#f0f0f0', color: mode === 'single' ? '#fff' : '#333' }" @click="mode = 'single'" > 单行模式 </button> <button :style="{ background: mode === 'multiple' ? '#1476ff' : '#f0f0f0', color: mode === 'multiple' ? '#fff' : '#333' }" @click="mode = 'multiple'" > 多行模式 </button> </p> <TrSender v-model="content" :mode="mode" placeholder="请输入消息..." :max-length="200" show-word-limit clearable @submit="handleSubmit" /> </p> </template> </code></pre> <p><strong>核心 Props 说明</strong>：</p><table><thead><tr><th>属性</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td><code>modelValue</code> / <code>v-model</code></td><td>输入框内容绑定</td><td><code>string</code></td><td><code>''</code></td></tr><tr><td><code>mode</code></td><td>输入模式</td><td><code>'single' | 'multiple'</code></td><td><code>'single'</code></td></tr><tr><td><code>disabled</code></td><td>是否禁用</td><td><code>boolean</code></td><td><code>false</code></td></tr><tr><td><code>loading</code></td><td>加载状态（显示停止按钮）</td><td><code>boolean</code></td><td><code>false</code></td></tr><tr><td><code>maxLength</code></td><td>最大输入长度</td><td><code>number</code></td><td><code>Infinity</code></td></tr><tr><td><code>showWordLimit</code></td><td>显示字数统计</td><td><code>boolean</code></td><td><code>false</code></td></tr><tr><td><code>size</code></td><td>组件尺寸</td><td><code>'normal' | 'small'</code></td><td><code>'normal'</code></td></tr></tbody></table> <hr> <h3>扩展架构：可插拔的功能增强</h3> <p>Sender 的核心设计理念是<strong>可插拔的扩展架构</strong>。通过 <code>extensions</code> prop，你可以按需组合 Template、Mention、Suggestion 等功能扩展，每个扩展互相独立、自由组合。</p> <pre> 复制代码<code class="hljs language-typescript code-block-extension-codeShowNum" lang="typescript"><span class="hljs-comment">// 扩展就是普通的数组元素</span> <span class="hljs-keyword">const extensions = [</span> <span class="hljs-title class_">TrSender.<span class="hljs-title function_">template</span>(templateData),</span> <span class="hljs-title class_">TrSender.<span class="hljs-title function_">mention</span>(mentionItems),</span> <span class="hljs-title class_">TrSender.<span class="hljs-title function_">suggestion</span>(suggestionItems, { <span class="hljs-attr">filterFn</span>: customFilter })</span> ]<span class="hljs-comment">// 通过 props 传入</span> <<span class="hljs-title class_">TrSender :extensions=<span class="hljs-string">"extensions"</span> /></span> </code></pre> <p>提供两种集成方式：</p> <ul> <li><strong>便捷函数（推荐）</strong>：<code>TrSender.template()</code>、<code>TrSender.mention()</code>、<code>TrSender.suggestion()</code>，用于简单场景</li> <li><strong>标准配置</strong>：<code>TrSender.Mention.configure({...})</code>，用于复杂配置（如自定义 onSelect 回调、filterFn 等）</li> </ul> <h4>2. Template 扩展：结构化 Prompt 模板</h4> <p>Template 扩展让用户通过预设模板快速填写结构化 Prompt。支持 <code>text</code>（固定文本）、<code>block</code>（可编辑字段）、<code>select</code>（下拉选择器）三种节点类型。</p> <pre> 复制代码<code class="hljs language-vue code-block-extension-codeShowNum" lang="vue"><script setup lang="ts"> import { ref } from 'vue' import { Button } from '@opentiny/vue' import { TrSender } from '@opentiny/tiny-robot' import type { TemplateItem, StructuredData } from '@opentiny/tiny-robot'const content = ref('') const templateData = ref<TemplateItem[]>([])// 便捷函数：传入响应式 ref，数据变化时自动同步编辑器 const extensions = [TrSender.template(templateData)]const setTemplate = () => { templateData.value = [ { type: 'text', content: '请帮我写一份关于' }, { type: 'block', content: '人工智能' }, { type: 'text', content: '的' }, { type: 'block', content: '技术报告' }, { type: 'text', content: '，字数要求' }, { type: 'block', content: '3000字' }, { type: 'text', content: '，风格要求' }, { type: 'select', placeholder: '选择风格', content: '', options: [ { label: '正式学术', value: 'formal_academic' }, { label: '通俗易懂', value: 'easy_reading' }, { label: '技术深度', value: 'technical_deep' }, ] }, { type: 'text', content: '。' }, ] }const handleSubmit = (text: string, data?: StructuredData) => { console.log('纯文本:', text) // data 结构： // [ // { type: 'text', content: '请帮我写一份关于' }, // { type: 'block', content: '人工智能' }, // { type: 'text', content: '的技术报告...' } // ] } </script><template> <p style="display: flex; flex-direction: column; gap: 16px;"> <Button size="small" @click="setTemplate">插入 Prompt 模板</Button> <TrSender v-model="content" :extensions="extensions" mode="multiple" placeholder="点击按钮插入模板..." :max-length="500" show-word-limit clearable @submit="handleSubmit" /> </p> </template> </code></pre> <p>Template 通过响应式 ref 机制，当 <code>templateData.value</code> 发生变化时，编辑器内容会自动更新，光标也会自动聚焦到第一个可编辑字段，无需手动调用任何方法。</p> <h4>3. Mention 扩展：@提及功能</h4> <p>Mention 扩展实现了类似社交平台的 @提及功能。输入触发字符（默认 <code>@</code>）会弹出选择列表，支持键盘导航（↑↓）和搜索过滤。</p> <pre> 复制代码<code class="hljs language-vue code-block-extension-codeShowNum" lang="vue"><script setup lang="ts"> import { ref } from 'vue' import { TrSender } from '@opentiny/tiny-robot' import type { MentionItem, StructuredData } from '@opentiny/tiny-robot'const content = ref('')const assistants: MentionItem[] = [ { label: '代码助手', value: 'you_are_a_coding_expert' }, { label: '文案大师', value: 'you_are_a_copywriter' }, { label: '数据分析师', value: 'you_are_a_data_analyst' }, { label: '翻译专家', value: 'you_are_a_translator' }, ]// 便捷函数：默认触发字符为 @ const extensions = [TrSender.mention(assistants, '@')]// 也可以自定义触发字符，如用 # 替代 @ // const extensions = [TrSender.mention(hashtags, '#')]const handleSubmit = (text: string, data?: StructuredData) => { // text: "帮我分析 @代码助手 返回的代码" // data: [ // { type: 'text', content: '帮我分析 ' }, // { type: 'mention', content: '代码助手', value: 'you_are_a_coding_expert' }, // { type: 'text', content: ' 返回的代码' } // ] // 提取所有提及的助手 const mentions = data?.filter(item => item.type === 'mention') || [] const assistantIds = mentions.map(m => m.value) console.log('提及的助手:', assistantIds) } </script><template> <p style="display: flex; flex-direction: column; gap: 16px;"> <p style="color: #666; font-size: 14px; margin: 0;"> 输入 <code>@</code> 触发提及选择，支持键盘导航和搜索过滤 </p> <TrSender v-model="content" :extensions="extensions" placeholder="输入 @ 选择助手..." mode="multiple" :max-length="500" show-word-limit clearable @submit="handleSubmit" /> </p> </template> </code></pre> <p>Mention 扩展支持三个配置项：</p><table><thead><tr><th>配置项</th><th>类型</th><th>默认值</th><th>说明</th></tr></thead><tbody><tr><td><code>items</code></td><td><code>MentionItem[] | Ref<MentionItem[]></code></td><td><code>[]</code></td><td>提及项列表，支持响应式 ref</td></tr><tr><td><code>char</code></td><td><code>string</code></td><td><code>'@'</code></td><td>触发字符</td></tr><tr><td><code>allowSpaces</code></td><td><code>boolean</code></td><td><code>false</code></td><td>是否允许触发字符后输入空格</td></tr></tbody></table> <h4>4. Suggestion 扩展：智能联想与自定义过滤</h4> <p>Suggestion 扩展提供智能输入联想功能。用户输入时自动弹出建议列表，支持键盘导航和 Tab 自动补全。</p> <pre> 复制代码<code class="hljs language-vue code-block-extension-codeShowNum" lang="vue"><script setup lang="ts"> import { ref, computed } from 'vue' import { TrSender } from '@opentiny/tiny-robot' import type { SenderSuggestionItem } from '@opentiny/tiny-robot'const input = ref('')const suggestions: SenderSuggestionItem[] = [ { content: 'ECS-云服务器卡顿排查' }, { content: 'ECS-备份弹性云服务器' }, { content: 'ECS-实例无法启动处理' }, { content: 'CDN-权限管理配置指南' }, { content: 'CDN-缓存刷新问题排查' }, { content: 'OSS-存储桶访问控制' }, ]// 标准配置：使用自定义 filterFn 实现按分类前缀匹配 const extensions = computed(() => [ TrSender.Suggestion.configure({ items: suggestions, // 自定义过滤逻辑 filterFn: (items: SenderSuggestionItem[], query: string) => { if (!query) return [] const lowerQuery = query.toLowerCase() // 按 - 前面的分类标签匹配 return items.filter((item) => { const category = item.content.split('-')[0].toLowerCase() return category.startsWith(lowerQuery) }) }, showAutoComplete: true, popupWidth: 500, onSelect: (item) => { console.log('选中建议:', item.content) }, }), ]) </script><template> <p style="display: flex; flex-direction: column; gap: 16px;"> <p style="color: #666; font-size: 14px; margin: 0;"> 输入 ECS、CDN 或 OSS 查看分类联想，Tab 键快速补全 </p> <TrSender v-model="input" :extensions="extensions" placeholder="输入 ECS 或 CDN 查看建议..." @submit="(text) => console.log('提交:', text)" /> </p> </template> </code></pre> <p>Suggestion 配置项详解：</p><table><thead><tr><th>配置项</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td><code>items</code></td><td>建议项列表</td><td><code>SenderSuggestionItem[]</code></td><td><code>[]</code></td></tr><tr><td><code>filterFn</code></td><td>自定义过滤函数，不传则不过滤</td><td><code>(items, query) => items</code></td><td><code>undefined</code></td></tr><tr><td><code>showAutoComplete</code></td><td>显示灰色补全提示</td><td><code>boolean</code></td><td><code>true</code></td></tr><tr><td><code>activeSuggestionKeys</code></td><td>激活建议的按键</td><td><code>string[]</code></td><td><code>['Enter']</code></td></tr><tr><td><code>popupWidth</code></td><td>弹窗宽度（支持数字/百分比）</td><td><code>number | string</code></td><td><code>400</code></td></tr><tr><td><code>onSelect</code></td><td>选中回调，返回 false 阻止默认回填</td><td><code>(item) => void | false</code></td><td>-</td></tr></tbody></table> <h4>5. VoiceButton：语音输入</h4> <p>VoiceButton 是一个独立的语音输入按钮组件，通过 <code>footer</code> 或 <code>footer-right</code> 插槽集成到 Sender 中。它同时支持浏览器内置的 Web Speech API 和自定义第三方语音识别服务。</p> <pre> 复制代码<code class="hljs language-vue code-block-extension-codeShowNum" lang="vue"><script setup lang="ts"> import { ref } from 'vue' import { TrSender, VoiceButton } from '@opentiny/tiny-robot'const content = ref('') const voiceMode = ref<'mixed' | 'continuous'>('mixed')const handleSubmit = (text: string) => { console.log('提交内容:', text) content.value = '' } </script><template> <p style="display: flex; flex-direction: column; gap: 16px;"> <p style="display: flex; gap: 12px; align-items: center;"> <span>语音模式：</span> <label><input type="radio" v-model="voiceMode" value="mixed" /> 混合输入</label> <label><input type="radio" v-model="voiceMode" value="continuous" /> 连续识别</label> </p> <p style="color: #666; font-size: 13px; margin: 0;"> {{ voiceMode === 'mixed' ? '识别结果追加到输入框，可继续编辑修改' : '持续识别并自动替换内容，适合长段语音输入' }} </p> <!-- VoiceButton 通过 key 在模式切换时重新实例化 --> <TrSender :key="voiceMode" v-model="content" mode="multiple" @submit="handleSubmit" > <template #footer-right> <VoiceButton :speech-config="voiceMode === 'mixed' ? { autoReplace: false, interimResults: true } : { autoReplace: true, continuous: true }" tooltip="语音输入" @speech-final="(transcript) => { content += transcript }" /> </template> </TrSender> </p> </template> </code></pre> <p>VoiceButton 核心配置：</p><table><thead><tr><th>属性</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td><code>speechConfig.autoReplace</code></td><td>是否自动替换内容（false 则追加）</td><td><code>boolean</code></td><td><code>true</code></td></tr><tr><td><code>speechConfig.continuous</code></td><td>是否持续识别</td><td><code>boolean</code></td><td><code>false</code></td></tr><tr><td><code>speechConfig.interimResults</code></td><td>是否返回中间结果</td><td><code>boolean</code></td><td><code>false</code></td></tr><tr><td><code>speechConfig.lang</code></td><td>识别语言</td><td><code>string</code></td><td>浏览器默认语言</td></tr><tr><td><code>autoInsert</code></td><td>是否自动插入识别结果到编辑器</td><td><code>boolean</code></td><td><code>true</code></td></tr></tbody></table> <p>如需集成阿里云、百度、Azure 等第三方语音服务，通过 <code>speechConfig.customHandler</code> 传入自定义处理器即可。</p> <h4>6. UploadButton：文件上传</h4> <p>UploadButton 允许用户上传文件（图片、文档等）作为对话的上下文输入，支持文件类型过滤、大小限制和数量限制。</p> <pre> 复制代码<code class="hljs language-vue code-block-extension-codeShowNum" lang="vue"><script setup lang="ts"> import { ref } from 'vue' import { TrSender, UploadButton } from '@opentiny/tiny-robot'const content = ref('') const uploadedFiles = ref<File[]>([])const handleSubmit = (text: string) => { console.log('提交文本:', text) console.log('附带文件:', uploadedFiles.value) content.value = '' uploadedFiles.value = [] }const handleFilesSelected = (files: File[]) => { uploadedFiles.value = files // 可以在这里做上传逻辑或直接作为附件信息 } </script><template> <p style="display: flex; flex-direction: column; gap: 16px;"> <TrSender v-model="content" mode="multiple" placeholder="输入问题，或上传相关文件..." clearable @submit="handleSubmit" > <template #footer-right> <UploadButton accept="image/*,.pdf,.doc,.docx" :multiple="true" :max-size="10" :max-count="5" tooltip="上传文件（最多5个，每个≤10MB）" tooltip-placement="top" @select="handleFilesSelected" /> </template> </TrSender> <p v-if="uploadedFiles.length" style="font-size: 13px; color: #666;"> 已选择：{{ uploadedFiles.map(f => f.name).join(', ') }} </p> </p> </template> </code></pre> <p>UploadButton 核心配置：</p><table><thead><tr><th>属性</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td><code>accept</code></td><td>接受的 MIME 类型</td><td><code>string</code></td><td><code>'*'</code></td></tr><tr><td><code>multiple</code></td><td>是否支持多选</td><td><code>boolean</code></td><td><code>false</code></td></tr><tr><td><code>maxSize</code></td><td>文件大小限制（MB）</td><td><code>number</code></td><td>-</td></tr><tr><td><code>maxCount</code></td><td>最大文件数量</td><td><code>number</code></td><td>-</td></tr><tr><td><code>tooltip</code></td><td>悬停提示文本</td><td><code>string</code></td><td>-</td></tr></tbody></table> <h4>7. 自定义插槽：灵活布局</h4> <p>Sender 提供多个插槽位置以支持灵活的布局扩展：</p><table><thead><tr><th>插槽</th><th>位置</th><th>作用域</th><th>典型用途</th></tr></thead><tbody><tr><td><code>header</code></td><td>输入框上方</td><td>-</td><td>标题、提示信息</td></tr><tr><td><code>prefix</code></td><td>输入框内部左侧</td><td>-</td><td>AI 图标、模型选择</td></tr><tr><td><code>content</code></td><td>编辑器内容区域</td><td><code>{ editor }</code></td><td>完全自定义编辑器内容</td></tr><tr><td><code>actions-inline</code></td><td>单行模式操作区</td><td>-</td><td>单行模式下的操作按钮</td></tr><tr><td><code>footer</code></td><td>底部左侧</td><td><code>{ editor, hasContent, disabled, loading }</code></td><td>增强功能按钮</td></tr><tr><td><code>footer-right</code></td><td>底部右侧</td><td>-</td><td>上传、语音按钮</td></tr></tbody></table> <pre> 复制代码<code class="hljs language-vue code-block-extension-codeShowNum" lang="vue"><script setup lang="ts"> import { ref } from 'vue' import { TrSender, UploadButton, VoiceButton } from '@opentiny/tiny-robot'const content = ref('') const deepThinking = ref(false)const handleSubmit = (text: string) => { console.log('提交:', text, deepThinking.value ? '(深度思考模式)' : '') content.value = '' } </script><template> <TrSender v-model="content" placeholder="输入你的问题..." mode="multiple" clearable @submit="handleSubmit" > <!-- 顶部标题 --> <template #header> <p style="text-align: center; font-weight: 700; padding: 8px 0;"> AI 智能助手 </p> </template> <!-- 输入框前缀图标 --> <template #prefix> <span style="font-size: 22px; margin-right: 8px;"></span> </template> <!-- 底部左侧功能按钮 --> <template #footer="{ editor, hasContent }"> <button :style="{ padding: '4px 12px', borderRadius: '16px', border: '1px solid #e0e0e0', background: deepThinking ? '#1476ff' : 'transparent', color: deepThinking ? '#fff' : '#666', cursor: 'pointer', fontSize: '13px' }" @click="deepThinking = !deepThinking" > {{ deepThinking ? ' 深度思考' : ' 深度思考' }} </button> <span v-if="hasContent" style="font-size: 12px; color: #999; margin-left: 8px;"> 已输入 {{ content.length }} 字 </span> </template> <!-- 底部右侧功能按钮 --> <template #footer-right> <UploadButton accept="image/*" tooltip="上传图片" tooltip-placement="top" @select="(files) => console.log('选择文件:', files)" /> <VoiceButton :speech-config="{ autoReplace: false, interimResults: true }" tooltip="语音输入" tooltip-placement="top" /> </template> </TrSender> </template> </code></pre> <h4>8. submitType：灵活控制提交流程</h4> <p>不同的应用场景需要不同的提交方式。Sender 通过 <code>submitType</code> 属性提供三种方式：</p> <pre> 复制代码<code class="hljs language-vue code-block-extension-codeShowNum" lang="vue"><script setup lang="ts"> import { ref } from 'vue' import { TrSender } from '@opentiny/tiny-robot'const content = ref('') const submitType = ref<'enter' | 'ctrlEnter' | 'shiftEnter'>('ctrlEnter')const handleSubmit = (text: string) => { console.log('提交:', text) content.value = '' } </script><template> <p style="display: flex; flex-direction: column; gap: 16px;"> <p style="display: flex; gap: 16px; align-items: center;"> <span>提交方式：</span> <label><input type="radio" v-model="submitType" value="enter" /> Enter 提交</label> <label><input type="radio" v-model="submitType" value="ctrlEnter" /> Ctrl+Enter 提交</label> <label><input type="radio" v-model="submitType" value="shiftEnter" /> Shift+Enter 提交</label> </p> <TrSender v-model="content" :submit-type="submitType" placeholder="输入内容后使用对应快捷键提交..." @submit="handleSubmit" /> </p> </template> </code></pre> <p><strong>快捷键行为对照表</strong>：</p><table><thead><tr><th>submitType</th><th>提交快捷键</th><th>换行快捷键</th></tr></thead><tbody><tr><td><code>enter</code></td><td>Enter</td><td>Ctrl+Enter / Shift+Enter</td></tr><tr><td><code>ctrlEnter</code></td><td>Ctrl+Enter</td><td>Enter</td></tr><tr><td><code>shiftEnter</code></td><td>Shift+Enter</td><td>Enter</td></tr></tbody></table><hr> <h3>结构化数据：读懂用户的意图</h3> <p>Sender 的 <code>submit</code> 事件不仅返回纯文本，当使用了 Template 或 Mention 扩展时，还会返回结构化的 <code>data</code> 参数，让你能够精确提取用户的意图。</p> <pre> 复制代码<code class="hljs language-typescript code-block-extension-codeShowNum" lang="typescript"><span class="hljs-comment">// submit 事件签名</span> <span class="hljs-meta">@submit=<span class="hljs-string">"(text: string, data?: StructuredData) => { ... }"</span></span> </code></pre> <h4>Mention 结构化数据</h4> <pre> 复制代码<code class="hljs language-typescript code-block-extension-codeShowNum" lang="typescript"><span class="hljs-keyword">const <span class="hljs-title function_">handleSubmit</span> = (<span class="hljs-params">text: <span class="hljs-built_in">string</span>, data?: StructuredData</span>) => {</span> <span class="hljs-comment">// 用户输入: "帮我分析 @代码助手 的代码质量"</span> <span class="hljs-comment">// text: "帮我分析 @代码助手 的代码质量"</span> <span class="hljs-comment">// data: [</span> <span class="hljs-comment">// { type: 'text', content: '帮我分析 ' },</span> <span class="hljs-comment">// { type: 'mention', content: '代码助手', value: 'you_are_a_coding_expert' },</span> <span class="hljs-comment">// { type: 'text', content: ' 的代码质量' }</span> <span class="hljs-comment">// ]</span> <span class="hljs-comment">// 提取提及的助手 ID 列表</span> <span class="hljs-keyword">const mentions = data?.<span class="hljs-title function_">filter</span>(<span class="hljs-function"><span class="hljs-params">item</span> =></span> item.<span class="hljs-property">type</span> === <span class="hljs-string">'mention'</span>) || []</span> <span class="hljs-keyword">const assistantIds = mentions.<span class="hljs-title function_">map</span>(<span class="hljs-function"><span class="hljs-params">item</span> =></span> item.<span class="hljs-property">value</span>)</span> <span class="hljs-comment">// 自定义 Slack 风格格式</span> <span class="hljs-keyword">const customText = data?.<span class="hljs-title function_">map</span>(<span class="hljs-function"><span class="hljs-params">item</span> =></span></span> item.<span class="hljs-property">type === <span class="hljs-string">'mention'</span> ? <span class="hljs-string">`<@<span class="hljs-subst">${item.value}</span>>`</span> : item.<span class="hljs-property">content</span></span> ).<span class="hljs-title function_">join(<span class="hljs-string">''</span>)</span> } </code></pre> <h4>Template 结构化数据</h4> <pre> 复制代码<code class="hljs language-typescript code-block-extension-codeShowNum" lang="typescript"><span class="hljs-keyword">const <span class="hljs-title function_">handleSubmit</span> = (<span class="hljs-params">text: <span class="hljs-built_in">string</span>, data?: StructuredData</span>) => {</span> <span class="hljs-comment">// 用户通过模板输入后提交</span> <span class="hljs-comment">// text: "请帮我写一份关于人工智能的技术报告，字数要求3000字"</span> <span class="hljs-comment">// data: [</span> <span class="hljs-comment">// { type: 'text', content: '请帮我写一份关于' },</span> <span class="hljs-comment">// { type: 'block', content: '人工智能' },</span> <span class="hljs-comment">// { type: 'text', content: '的技术报告...' }</span> <span class="hljs-comment">// ]</span> <span class="hljs-comment">// 提取所有可编辑块的值</span> <span class="hljs-keyword">const blocks = data?.<span class="hljs-title function_">filter</span>(<span class="hljs-function"><span class="hljs-params">item</span> =></span> item.<span class="hljs-property">type</span> === <span class="hljs-string">'block'</span>) || []</span> <span class="hljs-keyword">const blockValues = blocks.<span class="hljs-title function_">map</span>(<span class="hljs-function"><span class="hljs-params">b</span> =></span> b.<span class="hljs-property">content</span>)</span> } </code></pre> <p>这种结构化设计让你可以轻松实现：</p> <ul> <li>将 @提及转换为自定义协议格式</li> <li>提取模板中的关键填充字段</li> <li>构建更丰富的 AI 请求上下文</li> </ul> <hr> <h3>v0.4 升级与 SenderCompat 迁移</h3> <p>Sender 在 v0.4 版本进行了重大重构，底层从传统 textarea 升级为基于 Tiptap 的富文本编辑器，带来了更强大的扩展能力和更灵活的插槽系统。</p> <h4>如果你的项目正在使用 v0.3.x</h4> <p>TinyRobot 提供了 <code>SenderCompat</code> 兼容组件作为过渡方案，只需修改一行导入：</p> <pre> 复制代码<code class="hljs language-typescript code-block-extension-codeShowNum" lang="typescript"><span class="hljs-comment">// 旧代码 (v0.3.x)</span> <span class="hljs-keyword">import { <span class="hljs-title class_">TrSender</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'@opentiny/tiny-robot'</span></span><span class="hljs-comment">// 使用 SenderCompat 快速迁移</span> <span class="hljs-keyword">import { <span class="hljs-title class_">TrSenderCompat</span> <span class="hljs-keyword">as</span> <span class="hljs-title class_">TrSender</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'@opentiny/tiny-robot'</span></span> </code></pre> <p><strong>推荐的迁移路径</strong>：</p> <pre> 复制代码<code class="hljs code-block-extension-codeShowNum">v0.3.x Sender → SenderCompat（快速迁移，改导入即可）→ v0.4 Sender（按需完全升级） </code></pre> <h4>v0.4 主要变更一览</h4><table><thead><tr><th>变更类型</th><th>v0.3.x</th><th>v0.4</th><th>说明</th></tr></thead><tbody><tr><td>语音输入</td><td><code>allow-speech</code> prop</td><td><code>VoiceButton</code> 独立组件</td><td>组件化设计，通过插槽集成</td></tr><tr><td>文件上传</td><td><code>allow-files</code> + <code>button-group</code></td><td><code>UploadButton</code> 独立组件</td><td>扁平化配置，更灵活</td></tr><tr><td>智能联想</td><td><code>suggestions</code> prop</td><td><code>Suggestion</code> 扩展</td><td>通过 extensions 接入</td></tr><tr><td>@提及</td><td>-</td><td><code>Mention</code> 扩展</td><td>v0.4 新增功能</td></tr><tr><td>模板填充</td><td><code>v-model:templateData</code></td><td><code>Template</code> 扩展</td><td>响应式 ref 驱动</td></tr><tr><td>主题</td><td><code>theme</code> prop</td><td><code>ThemeProvider</code> 包裹</td><td>全局继承，所有子组件自动生效</td></tr><tr><td>模板类型名</td><td><code>type: 'template'</code></td><td><code>type: 'block'</code></td><td>类型名称变更，需手动适配</td></tr></tbody></table> <h4>完全升级到 v0.4</h4> <p>如果你准备完全升级到 v0.4，下面是一个典型的迁移对照：</p> <pre> 复制代码<code class="hljs language-vue code-block-extension-codeShowNum" lang="vue"><!-- v0.3.x 写法 --> <template> <TrSender v-model="content" :allow-speech="true" :speech="{ lang: 'zh-CN' }" :allow-files="true" :button-group="{ file: { accept: 'image/*' } }" :suggestions="filteredSuggestions" @speech-end="onSpeechEnd" @files-selected="onFilesSelected" /> </template><!-- v0.4 写法 --> <template> <TrSender v-model="content" :extensions="extensions" > <template #footer-right> <UploadButton accept="image/*" @select="onFilesSelected" /> <VoiceButton :speech-config="{ lang: 'zh-CN' }" @speech-final="onSpeechEnd" /> </template> </TrSender> </template><script setup lang="ts"> import { ref } from 'vue' import { TrSender, UploadButton, VoiceButton } from '@opentiny/tiny-robot'const content = ref('')const extensions = [ TrSender.Suggestion.configure({ items: [], filterFn: myFilter }), ]const onFilesSelected = (files: File[]) => { /* ... */ } const onSpeechEnd = (transcript: string) => { /* ... */ } </script> </code></pre> <hr> <h3>事件与方法速查</h3> <h4>事件</h4><table><thead><tr><th>事件名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td><code>update:modelValue</code></td><td>内容更新</td><td><code>(value: string)</code></td></tr><tr><td><code>submit</code></td><td>提交内容</td><td><code>(text: string, data?: StructuredData)</code></td></tr><tr><td><code>cancel</code></td><td>取消操作（loading 状态下点击停止）</td><td><code>()</code></td></tr><tr><td><code>clear</code></td><td>清空内容</td><td><code>()</code></td></tr><tr><td><code>focus</code></td><td>获得焦点</td><td><code>(event: FocusEvent)</code></td></tr><tr><td><code>blur</code></td><td>失去焦点</td><td><code>(event: FocusEvent)</code></td></tr><tr><td><code>input</code></td><td>输入变化</td><td><code>(value: string)</code></td></tr></tbody></table> <h4>方法（通过 ref 调用）</h4><table><thead><tr><th>方法</th><th>说明</th><th>参数</th></tr></thead><tbody><tr><td><code>focus()</code></td><td>使输入框获取焦点</td><td>-</td></tr><tr><td><code>blur()</code></td><td>使输入框失去焦点</td><td>-</td></tr><tr><td><code>clear()</code></td><td>清空输入内容</td><td>-</td></tr><tr><td><code>submit()</code></td><td>手动触发提交</td><td>-</td></tr><tr><td><code>setContent(content)</code></td><td>设置编辑器内容</td><td><code>(content: string)</code></td></tr><tr><td><code>getContent()</code></td><td>获取编辑器内容</td><td>- 返回 <code>string</code></td></tr><tr><td><code>cancel()</code></td><td>手动触发取消</td><td>-</td></tr></tbody></table> <hr> <h3>总结</h3> <p>TinyRobot Sender 通过以下设计原则，为 AI 聊天应用提供了企业级的输入体验：</p> <ol> <li><strong>可组合</strong>：各功能通过独立的扩展或组件实现，按需引入</li> <li><strong>响应式</strong>：扩展配置支持 Vue ref，数据变化自动同步 UI</li> <li><strong>结构化</strong>：submit 事件返回文本 + 结构化数据，精准传达用户意图</li> <li><strong>可插拔</strong>：Template、Mention、Suggestion 三大扩展独立运作，互不干扰</li> <li><strong>渐进迁移</strong>：通过 SenderCompat 兼容组件，平滑从 v0.3.x 升级</li> </ol> <p>无论是构建一个简单的 AI 问答输入框，还是打造复杂的企业级 Copilot 交互界面，Sender 都能胜任。</p></div> <div class="article-source">来源：https://juejin.cn/post/7649985520412688430</div> <div class="article-tags"> <a href="/search/?q=Robot" title="Robot">Robot</a> </div> <div class="article-switch"> <a class="article-switch__item" href="https://m.youleyou.com/wenzhang/3023464.html" title="个人网站HTML代码无法打开的常见原因与解决方法"><span>上一篇</span><strong>个人网站HTML代码无法打开的常见原因与解决方法</strong></a> <a class="article-switch__item" href="https://m.youleyou.com/wenzhang/3027332.html" title="TinyRobot Bubble组件打造灵活强大的AI对话气泡"><span>下一篇</span><strong>TinyRobot Bubble组件打造灵活强大的AI对话气泡</strong></a> </div> <div class="article-disclaimer">本站内容用于信息整理与展示，如有侵权或内容问题请及时联系处理。</div> </section> <section class="section"> <div class="section-head"><div><h3>相关推荐</h3><p>补充同频道和同主题内容，方便继续浏览更多相关内容。</p></div></div> <div class="related-links"> <a href="https://m.youleyou.com/wenzhang/3053301.html" title="TinyRobot输入区组件设计原理与实现深度解析">TinyRobot输入区组件设计原理与实现深度解析</a> <a href="https://m.youleyou.com/wenzhang/3027347.html" title="TinyRobot SuggestionPills紧凑型建议按钮组组件新版功能特性解析">TinyRobot SuggestionPills紧凑型建议按钮组组件新版功能特性解析</a> <a href="https://m.youleyou.com/wenzhang/3027344.html" title="TinyRobot智能建议弹出框组件使用方法">TinyRobot智能建议弹出框组件使用方法</a> <a href="https://m.youleyou.com/wenzhang/3027343.html" title="TinyRobot AI对话组件库全组件使用教程">TinyRobot AI对话组件库全组件使用教程</a> <a href="https://m.youleyou.com/wenzhang/3027333.html" title="用TinyRobot组件打造AI助手贴心欢迎页">用TinyRobot组件打造AI助手贴心欢迎页</a> <a href="https://m.youleyou.com/wenzhang/3027332.html" title="TinyRobot Bubble组件打造灵活强大的AI对话气泡">TinyRobot Bubble组件打造灵活强大的AI对话气泡</a> </div> </section> <section class="section"> <div class="section-head"><div><h3>同类最新</h3><p>继续查看同栏目最近更新的文章。</p></div><a href="/wzlist/djzx" title="更多">更多</a></div> <div class="feed"> <a class="feed-card" href="https://m.youleyou.com/wenzhang/3094373.html" title="checked表单属性与CSS变量实现换肤原理"> <img class="feed-card__thumb" src="https://static.youleyou.com//uploadfile/2026/0702/fcc1197aa2e8c3a8dc2410adec27b16c.webp" alt="checked表单属性与CSS变量实现换肤原理" /> <div class="feed-card__body"><span class="feed-card__meta">前端开发 · 2026-07-02</span><h4>checked表单属性与CSS变量实现换肤原理</h4><p>先聊一个有意思的现象：不需要编写任何 JavaScript，仅靠一个 :checked 伪类，就能驱动整个主题切换系统。听起来很神奇，但原理其实并不复杂——核心在于，:checked 是浏览器原生状态的实时镜像，而不是 JS 模拟出来的开关。 用户点击 ，或者用键盘空格键选中它，状态更新的那一刻，C</p></div> </a> <a class="feed-card" href="https://m.youleyou.com/wenzhang/3094372.html" title="HTML meta标签页面定时跳转实现"> <img class="feed-card__thumb" src="https://static.youleyou.com//uploadfile/2026/0702/5151fbd707f381140a5486506cc83233.webp" alt="HTML meta标签页面定时跳转实现" /> <div class="feed-card__body"><span class="feed-card__meta">前端开发 · 2026-07-02</span><h4>HTML meta标签页面定时跳转实现</h4><p>说到前端开发中最简洁的页面跳转方式，meta http-equiv= "refresh " 绝对算得上一个经典方案。不过别看它结构简单，格式上稍有疏忽，页面就可能原地卡死，或者直接跳到一个错误地址。下面把几个最容易踩坑的细节彻底讲清楚，帮你避开这些常见陷阱。 使用 http-equiv= "refresh</p></div> </a> <a class="feed-card" href="https://m.youleyou.com/wenzhang/3094370.html" title="Cypress跨测试用例状态传递的不推荐但可选方案"> <img class="feed-card__thumb" src="https://static.youleyou.com//uploadfile/2026/0702/0e4afed1ded4e7092ca626037ffb99fb.webp" alt="Cypress跨测试用例状态传递的不推荐但可选方案" /> <div class="feed-card__body"><span class="feed-card__meta">前端开发 · 2026-07-02</span><h4>Cypress跨测试用例状态传递的不推荐但可选方案</h4><p>Cypress 默认的设计哲学很干脆：每个测试用例都必须是独立小王国，谁也不靠谁。这意味着 it() 执行前，浏览器上下文会被“一键还原”——页面状态、LocalStorage、Cookies 统统清空，强制维护测试隔离。这一规则让很多新手头疼：明明前一个测试已经创建了员工，后一个测试怎么就没法直接</p></div> </a> <a class="feed-card" href="https://m.youleyou.com/wenzhang/3094369.html" title="全面深度解析HTML主体main标签唯一性原则与使用规范"> <img class="feed-card__thumb" src="https://static.youleyou.com//uploadfile/2026/0702/9100693c75372be54bfe12e46a3c35f6.webp" alt="全面深度解析HTML主体main标签唯一性原则与使用规范" /> <div class="feed-card__body"><span class="feed-card__meta">前端开发 · 2026-07-02</span><h4>全面深度解析HTML主体main标签唯一性原则与使用规范</h4><p>在进行前端无障碍审计时，不少开发者会遇到一个奇怪的场景：浏览器不报错，但Lighthouse却直接标红“duplicate-main”。这其实是语义层与渲染层之间的根本差异。 为什么浏览器不报错但 Lighthouse 直接标红 duplicate-main 关键原因就在于：`main` 是语义锚点</p></div> </a> <a class="feed-card" href="https://m.youleyou.com/wenzhang/3094368.html" title="HTML main标签在文档结构中的唯一性详解"> <img class="feed-card__thumb" src="https://static.youleyou.com//uploadfile/2026/0702/9c78e49e4dda745840d0f6e75fdce678.webp" alt="HTML main标签在文档结构中的唯一性详解" /> <div class="feed-card__body"><span class="feed-card__meta">前端开发 · 2026-07-02</span><h4>HTML main标签在文档结构中的唯一性详解</h4><p>先做一个快速检测：打开你最近开发的一个页面，按下 Ctrl+F 搜索 。如果搜索结果里出现2个以上，那这篇文章建议你认真读完。 本期要聊的主题，是HTML标签中一个看似简单、实际极易踩坑的核心知识点：main标签的唯一性。很多开发者知道这个标签的存在，但真正写到项目里，尤其是用了React、Vue这</p></div> </a> </div> </section> </main> <footer class="footer"> <div class="footer__card"> <strong>游乐游手机版</strong> <span>提供科技资讯、软件教程、专题内容、热词解释和热点整理等移动端内容入口。</span> <div class="footer__links"> <a href="/">首页</a> <a href="/wzlist/keji">科技资讯</a> <a href="/wzlist/terms/">AI热词</a> <a href="/wzlist/ainews">AI热点</a> </div> <div class="footer__meta"> <p>本站内容用于信息整理与展示，如有侵权或内容问题请及时联系处理。</p> <p>联系邮箱：youleyoucom@outlook.com</p> </div> </div> </footer> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?c32ac38c19e064eb1c81c2a84384de83"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> </body> </html>