import{_ as t,o as i,c as a,a4 as e}from"./chunks/framework.Cre9sSJa.js";const E=JSON.parse('{"title":"ChatBot 组件","description":"","frontmatter":{},"headers":[],"relativePath":"api/ai-blueking/chatbot.md","filePath":"api/ai-blueking/chatbot.md"}'),h={name:"api/ai-blueking/chatbot.md"};function d(n,s,l,k,p,r){return i(),a("div",null,[...s[0]||(s[0]=[e(`<h1 id="chatbot-组件" tabindex="-1">ChatBot 组件 <a class="header-anchor" href="#chatbot-组件" aria-label="Permalink to &quot;ChatBot 组件&quot;">​</a></h1><p><code>ChatBot</code> 是 AI 小鲸的核心聊天组件，提供输入框、消息列表、快捷指令等完整的聊天交互能力。它支持<strong>独立模式</strong>和<strong>集成模式</strong>两种使用方式。</p><div class="info custom-block"><p class="custom-block-title">非 Vue 宿主</p><p>宿主无 Vue 时，请使用 v2.1.4-beta.8+ 的 <a href="__DOCS_BASE__/api/ai-blueking/standalone.html#mountchatbot"><code>mountChatBot</code></a>（<code>@blueking/ai-blueking/standalone</code>），见 <a href="__DOCS_BASE__/guide/integration-modes/standalone-bundle.html">Standalone 集成指南</a>。</p></div><h2 id="基本用法" tabindex="-1">基本用法 <a class="header-anchor" href="#基本用法" aria-label="Permalink to &quot;基本用法&quot;">​</a></h2><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  &lt;!-- 独立模式：只需传入 url --&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ChatBot</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> url</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/api/ai&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">shortcuts</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">shortcuts</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ChatBot } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@blueking/ai-blueking&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  &lt;!-- 集成模式：传入外部 chatHelper --&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ChatBot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">chat-helper</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">chatHelper</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ChatBot } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@blueking/ai-blueking&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { useChatHelper } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@blueking/chat-helper&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> chatHelper</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useChatHelper</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ requestData: { urlPrefix: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/api/ai&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } });</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="props" tabindex="-1">Props <a class="header-anchor" href="#props" aria-label="Permalink to &quot;Props&quot;">​</a></h2><h3 id="基础配置" tabindex="-1">基础配置 <a class="header-anchor" href="#基础配置" aria-label="Permalink to &quot;基础配置&quot;">​</a></h3><table tabindex="0"><thead><tr><th>属性</th><th>类型</th><th>默认值</th><th>说明</th></tr></thead><tbody><tr><td><code>url</code></td><td><code>string</code></td><td><code>&#39;&#39;</code></td><td>API 地址（独立模式必填）</td></tr><tr><td><code>chatHelper</code></td><td><code>IChatHelper</code></td><td>—</td><td>外部 chatHelper（集成模式传入，与 <code>url</code> 二选一）</td></tr><tr><td><code>requestOptions</code></td><td><code>MaybeRefOrGetter&lt;IRequestOptions&gt;</code></td><td>—</td><td>请求配置（仅独立模式；<code>headers</code> / <code>data</code> 支持对象、函数、<code>ref</code>、<code>computed</code>）</td></tr></tbody></table><h3 id="会话配置" tabindex="-1">会话配置 <a class="header-anchor" href="#会话配置" aria-label="Permalink to &quot;会话配置&quot;">​</a></h3><table tabindex="0"><thead><tr><th>属性</th><th>类型</th><th>默认值</th><th>说明</th></tr></thead><tbody><tr><td><code>autoLoad</code></td><td><code>boolean</code></td><td><code>true</code></td><td>是否自动加载最近会话</td></tr><tr><td><code>sessionCode</code></td><td><code>string</code></td><td>—</td><td>指定初始会话编码</td></tr></tbody></table><h3 id="快捷方式与资源" tabindex="-1">快捷方式与资源 <a class="header-anchor" href="#快捷方式与资源" aria-label="Permalink to &quot;快捷方式与资源&quot;">​</a></h3><table tabindex="0"><thead><tr><th>属性</th><th>类型</th><th>默认值</th><th>说明</th></tr></thead><tbody><tr><td><code>shortcuts</code></td><td><code>IShortcut[]</code></td><td><code>[]</code></td><td>快捷指令列表</td></tr><tr><td><code>resources</code></td><td><code>IAiSlashMenuItem[]</code></td><td><code>[]</code></td><td>资源列表（<code>@</code> 触发）</td></tr><tr><td><code>prompts</code></td><td><code>string[]</code></td><td>—</td><td>预设提示词（<code>/</code> 触发）</td></tr></tbody></table><h3 id="界面配置" tabindex="-1">界面配置 <a class="header-anchor" href="#界面配置" aria-label="Permalink to &quot;界面配置&quot;">​</a></h3><table tabindex="0"><thead><tr><th>属性</th><th>类型</th><th>默认值</th><th>说明</th></tr></thead><tbody><tr><td><code>helloText</code></td><td><code>string</code></td><td>—</td><td>欢迎语</td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>—</td><td>输入框占位符</td></tr><tr><td><code>renderMode</code></td><td><code>RenderMode</code></td><td><code>&#39;chat&#39;</code></td><td>渲染模式：<code>chat</code>（默认）、<code>share</code>（分享）、<code>test</code>（测试）</td></tr><tr><td><code>height</code></td><td><code>string | number</code></td><td>—</td><td>容器高度</td></tr><tr><td><code>maxWidth</code></td><td><code>string | number</code></td><td>—</td><td>最大宽度</td></tr><tr><td><code>extCls</code></td><td><code>string</code></td><td>—</td><td>额外 CSS 类名</td></tr><tr><td><code>placement</code></td><td><code>&#39;left&#39; | &#39;right&#39;</code></td><td><code>&#39;left&#39;</code></td><td>执行情况侧面板位置</td></tr></tbody></table><h3 id="分享与选择" tabindex="-1">分享与选择 <a class="header-anchor" href="#分享与选择" aria-label="Permalink to &quot;分享与选择&quot;">​</a></h3><table tabindex="0"><thead><tr><th>属性</th><th>类型</th><th>默认值</th><th>说明</th></tr></thead><tbody><tr><td><code>enableSelection</code></td><td><code>boolean</code></td><td><code>false</code></td><td>是否启用多选模式（分享用）</td></tr><tr><td><code>shareLoading</code></td><td><code>boolean</code></td><td><code>false</code></td><td>分享加载状态</td></tr></tbody></table><h3 id="高级配置" tabindex="-1">高级配置 <a class="header-anchor" href="#高级配置" aria-label="Permalink to &quot;高级配置&quot;">​</a></h3><table tabindex="0"><thead><tr><th>属性</th><th>类型</th><th>默认值</th><th>说明</th></tr></thead><tbody><tr><td><code>messageToolsTippyOptions</code></td><td><code>MessageToolsTippyOptions</code></td><td>—</td><td>消息工具栏 Tippy 配置（如 <code>appendTo</code>，用于控制弹窗挂载位置和层级）</td></tr><tr><td><code>resizeProps</code></td><td><code>{ disabled?, initialDivide?, max?, min? }</code></td><td>—</td><td>ResizeLayout 配置（执行情况侧面板拖拽）</td></tr></tbody></table><h3 id="side-render-customization" tabindex="-1">侧栏自定义渲染 <a class="header-anchor" href="#side-render-customization" aria-label="Permalink to &quot;侧栏自定义渲染 {#side-render-customization}&quot;">​</a></h3><p>透传 <code>ChatContainer</code> 侧栏能力，用于 FlowAgent 节点详情等自定义 Tab。用法见 <a href="__DOCS_BASE__/guide/core-features/side-render-customization.html">侧栏 Tab 自定义渲染</a>。</p><table tabindex="0"><thead><tr><th>属性</th><th>类型</th><th>默认值</th><th>说明</th></tr></thead><tbody><tr><td><code>getSideRenderComponent</code></td><td><code>GetSideRenderComponent</code></td><td>—</td><td><code>(h, props) =&gt; VNode | undefined</code>。返回 VNode 时作为侧栏内容根；返回 <code>undefined</code> 时使用 <code>addCustomTab</code> 的 <code>data.component</code></td></tr><tr><td><code>getSideTabRenderComponent</code></td><td><code>GetSideTabRenderComponent</code></td><td>—</td><td><code>(h, tab, { removeCustomTab }) =&gt; VNode | undefined</code>。自定义 Tab 标签；未返回时使用默认图标 + 文案 + 关闭按钮</td></tr><tr><td><code>onCustomTabChange</code></td><td><code>OnCustomTabChange</code></td><td>—</td><td><code>(tab) =&gt; Promise&lt;unknown&gt;</code>。Tab 切换时拉取详情并写入 <code>data.props</code>；<strong>未传</strong>且为 Flow 节点 Tab（含 <code>task_id</code>、<code>node_id</code>）时，使用内置 <code>getFlowAgentTaskNodeInfo</code></td></tr></tbody></table><h2 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h2><h3 id="消息事件" tabindex="-1">消息事件 <a class="header-anchor" href="#消息事件" aria-label="Permalink to &quot;消息事件&quot;">​</a></h3><table tabindex="0"><thead><tr><th>事件名</th><th>参数</th><th>说明</th></tr></thead><tbody><tr><td><code>send-message</code></td><td><code>(message: string)</code></td><td>用户发送消息</td></tr><tr><td><code>receive-start</code></td><td>—</td><td>流式响应开始（仅独立模式）</td></tr><tr><td><code>receive-text</code></td><td>—</td><td>流式接收文本（仅独立模式）</td></tr><tr><td><code>receive-end</code></td><td>—</td><td>流式响应结束（仅独立模式）</td></tr><tr><td><code>stop</code></td><td>—</td><td>用户停止生成</td></tr><tr><td><code>error</code></td><td><code>(error: Error)</code></td><td>发生错误</td></tr><tr><td><code>feedback</code></td><td><code>(tool, message, reasonList, otherReason)</code></td><td>反馈提交成功</td></tr></tbody></table><h3 id="会话事件" tabindex="-1">会话事件 <a class="header-anchor" href="#会话事件" aria-label="Permalink to &quot;会话事件&quot;">​</a></h3><table tabindex="0"><thead><tr><th>事件名</th><th>参数</th><th>说明</th></tr></thead><tbody><tr><td><code>session-switched</code></td><td><code>(session: ISession | null)</code></td><td>会话切换完成</td></tr><tr><td><code>agent-info-loaded</code></td><td><code>(chatHelper: IChatHelper)</code></td><td>Agent 信息加载完成（仅独立模式）</td></tr></tbody></table><h3 id="快捷方式事件" tabindex="-1">快捷方式事件 <a class="header-anchor" href="#快捷方式事件" aria-label="Permalink to &quot;快捷方式事件&quot;">​</a></h3><table tabindex="0"><thead><tr><th>事件名</th><th>参数</th><th>说明</th></tr></thead><tbody><tr><td><code>shortcut-click</code></td><td><code>({ shortcut, source })</code></td><td>快捷指令点击</td></tr></tbody></table><h3 id="分享事件" tabindex="-1">分享事件 <a class="header-anchor" href="#分享事件" aria-label="Permalink to &quot;分享事件&quot;">​</a></h3><table tabindex="0"><thead><tr><th>事件名</th><th>参数</th><th>说明</th></tr></thead><tbody><tr><td><code>confirm-share</code></td><td><code>(messages: Message[])</code></td><td>确认分享</td></tr><tr><td><code>cancel-share</code></td><td>—</td><td>取消分享</td></tr><tr><td><code>request-share</code></td><td>—</td><td>请求进入分享模式</td></tr></tbody></table><h3 id="执行情况事件" tabindex="-1">执行情况事件 <a class="header-anchor" href="#执行情况事件" aria-label="Permalink to &quot;执行情况事件&quot;">​</a></h3><table tabindex="0"><thead><tr><th>事件名</th><th>参数</th><th>说明</th></tr></thead><tbody><tr><td><code>execution-panel-change</code></td><td><code>(isCollapse: boolean)</code></td><td>执行情况面板展开/折叠</td></tr></tbody></table><h2 id="expose-方法" tabindex="-1">Expose 方法 <a class="header-anchor" href="#expose-方法" aria-label="Permalink to &quot;Expose 方法&quot;">​</a></h2><h3 id="消息操作" tabindex="-1">消息操作 <a class="header-anchor" href="#消息操作" aria-label="Permalink to &quot;消息操作&quot;">​</a></h3><table tabindex="0"><thead><tr><th>方法</th><th>类型</th><th>说明</th></tr></thead><tbody><tr><td><code>sendMessage</code></td><td><code>(message: string) =&gt; Promise&lt;void&gt;</code></td><td>编程式发送消息</td></tr><tr><td><code>stopGeneration</code></td><td><code>() =&gt; void</code></td><td>停止当前生成</td></tr><tr><td><code>setCiteText</code></td><td><code>(text: string) =&gt; void</code></td><td>设置引用文本</td></tr><tr><td><code>focusInput</code></td><td><code>() =&gt; void</code></td><td>聚焦输入框</td></tr></tbody></table><h3 id="快捷方式操作" tabindex="-1">快捷方式操作 <a class="header-anchor" href="#快捷方式操作" aria-label="Permalink to &quot;快捷方式操作&quot;">​</a></h3><table tabindex="0"><thead><tr><th>方法</th><th>类型</th><th>说明</th></tr></thead><tbody><tr><td><code>selectShortcut</code></td><td><code>(shortcut: IShortcut, selectedText?: string) =&gt; void</code></td><td>选择快捷指令并显示表单，不会自动提交</td></tr><tr><td><code>sendShortcut</code></td><td><code>(shortcut: IShortcut, selectedText?: string) =&gt; Promise&lt;void&gt;</code></td><td>直接发送快捷指令（跳过表单）</td></tr></tbody></table><h3 id="会话操作" tabindex="-1">会话操作 <a class="header-anchor" href="#会话操作" aria-label="Permalink to &quot;会话操作&quot;">​</a></h3><table tabindex="0"><thead><tr><th>方法</th><th>类型</th><th>说明</th></tr></thead><tbody><tr><td><code>switchSession</code></td><td><code>(sessionCode: string) =&gt; Promise&lt;void&gt;</code></td><td>切换到指定会话</td></tr></tbody></table><h3 id="分享操作" tabindex="-1">分享操作 <a class="header-anchor" href="#分享操作" aria-label="Permalink to &quot;分享操作&quot;">​</a></h3><table tabindex="0"><thead><tr><th>方法</th><th>类型</th><th>说明</th></tr></thead><tbody><tr><td><code>enterShareMode</code></td><td><code>() =&gt; void</code></td><td>进入分享选择模式</td></tr><tr><td><code>exitShareMode</code></td><td><code>() =&gt; void</code></td><td>退出分享选择模式</td></tr></tbody></table><h3 id="其他" tabindex="-1">其他 <a class="header-anchor" href="#其他" aria-label="Permalink to &quot;其他&quot;">​</a></h3><table tabindex="0"><thead><tr><th>方法/属性</th><th>类型</th><th>说明</th></tr></thead><tbody><tr><td><code>getChatHelper</code></td><td><code>() =&gt; IChatHelper | null</code></td><td>获取内部 chatHelper 实例</td></tr><tr><td><code>messages</code></td><td><code>ComputedRef&lt;Message[]&gt;</code></td><td>当前消息列表（只读）</td></tr><tr><td><code>currentSession</code></td><td><code>Ref&lt;ISession | null&gt;</code></td><td>当前会话（响应式）</td></tr><tr><td><code>isGenerating</code></td><td><code>Ref&lt;boolean&gt;</code></td><td>是否正在生成（响应式）</td></tr></tbody></table><h3 id="使用-expose" tabindex="-1">使用 Expose <a class="header-anchor" href="#使用-expose" aria-label="Permalink to &quot;使用 Expose&quot;">​</a></h3><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ChatBot</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;chatbotRef&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> url</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/api/ai&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">chatbotRef?.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">sendMessage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;你好&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;发送&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ref } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ChatBot } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@blueking/ai-blueking&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> chatbotRef</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">InstanceType</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">typeof</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ChatBot&gt;&gt;();</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="两种模式对比" tabindex="-1">两种模式对比 <a class="header-anchor" href="#两种模式对比" aria-label="Permalink to &quot;两种模式对比&quot;">​</a></h2><table tabindex="0"><thead><tr><th>特性</th><th>独立模式</th><th>集成模式</th></tr></thead><tbody><tr><td>初始化方式</td><td>传入 <code>url</code>，组件内部创建 <code>chatHelper</code></td><td>传入外部 <code>chatHelper</code> 实例</td></tr><tr><td>适用场景</td><td>快速接入，无需外部状态管理</td><td>需要与外部逻辑共享数据/状态</td></tr><tr><td>流式事件</td><td>✅ 触发 <code>receive-start/text/end</code></td><td>❌ 由外部 <code>chatHelper</code> 自行处理</td></tr><tr><td><code>requestOptions</code></td><td>✅ 生效</td><td>❌ 不生效（由外部配置）</td></tr><tr><td>Agent 信息加载</td><td>自动加载，触发 <code>agent-info-loaded</code></td><td>由外部控制</td></tr><tr><td>数据控制权</td><td>组件内部管理</td><td>外部完全控制</td></tr></tbody></table><h3 id="独立模式示例" tabindex="-1">独立模式示例 <a class="header-anchor" href="#独立模式示例" aria-label="Permalink to &quot;独立模式示例&quot;">​</a></h3><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ChatBot</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    url</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;/api/ai&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">shortcuts</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">shortcuts</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">request-options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">requestOptions</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    hello-text</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;你好，我是 AI 小鲸！&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;输入你的问题...&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">send-message</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">onSend</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">receive-end</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">onReceiveEnd</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  /&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ChatBot } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@blueking/ai-blueking&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> shortcuts</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  { id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;explain&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;解释代码&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;code&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, description: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;解释选中的代码&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> requestOptions</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  headers: { </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;X-Custom-Header&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;value&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  data: { extra: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;params&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onSend</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">message</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;用户发送:&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, message);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onReceiveEnd</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;回复完成&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="集成模式示例" tabindex="-1">集成模式示例 <a class="header-anchor" href="#集成模式示例" aria-label="Permalink to &quot;集成模式示例&quot;">​</a></h3><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ChatBot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">chat-helper</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">chatHelper</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">shortcuts</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">shortcuts</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ChatBot } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@blueking/ai-blueking&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { useChatHelper } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@blueking/chat-helper&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> chatHelper</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useChatHelper</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  requestData: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    urlPrefix: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/api/ai&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    headers: { Authorization: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Bearer xxx&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 外部可以直接操作 chatHelper</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">chatHelper.agent.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getAgentInfo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div>`,52)])])}const c=t(h,[["render",d]]);export{E as __pageData,c as default};
