import{_ as i,o as a,c as t,a4 as e}from"./chunks/framework.Cre9sSJa.js";const E=JSON.parse('{"title":"SDK 模块 (chat-helper)","description":"","frontmatter":{},"headers":[],"relativePath":"api/chat-helper/sdk.md","filePath":"api/chat-helper/sdk.md"}'),n={name:"api/chat-helper/sdk.md"};function h(l,s,d,p,k,r){return a(),t("div",null,[...s[0]||(s[0]=[e(`<h1 id="sdk-模块-chat-helper" tabindex="-1">SDK 模块 (chat-helper) <a class="header-anchor" href="#sdk-模块-chat-helper" aria-label="Permalink to &quot;SDK 模块 (chat-helper)&quot;">​</a></h1><p><code>@blueking/chat-helper</code> 是 AI 小鲸的业务 SDK 层，提供与后端 API 通信、状态管理、流式协议处理等核心能力。</p><h2 id="usechathelper" tabindex="-1">useChatHelper() <a class="header-anchor" href="#usechathelper" aria-label="Permalink to &quot;useChatHelper()&quot;">​</a></h2><p>SDK 的入口函数，创建并返回一个包含 Agent、Session、Message 三大模块的 chatHelper 实例。</p><h3 id="参数" tabindex="-1">参数 <a class="header-anchor" href="#参数" aria-label="Permalink to &quot;参数&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useChatHelper</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> IUseChatHelperOptions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> IChatHelper</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><table tabindex="0"><thead><tr><th>参数</th><th>类型</th><th>说明</th></tr></thead><tbody><tr><td><code>options</code></td><td><code>IUseChatHelperOptions</code></td><td>配置选项（可选）</td></tr></tbody></table><h4 id="iusechathelperoptions" tabindex="-1">IUseChatHelperOptions <a class="header-anchor" href="#iusechathelperoptions" aria-label="Permalink to &quot;IUseChatHelperOptions&quot;">​</a></h4><table tabindex="0"><thead><tr><th>属性</th><th>类型</th><th>说明</th></tr></thead><tbody><tr><td><code>requestData</code></td><td><code>{ urlPrefix, headers, data }</code></td><td>请求配置</td></tr><tr><td><code>requestData.urlPrefix</code></td><td><code>string</code></td><td>API 地址前缀</td></tr><tr><td><code>requestData.headers</code></td><td><code>MaybeRequestValue&lt;Record&lt;string, string&gt;&gt;</code></td><td>自定义请求头（对象 / 函数 / <code>ref</code> / <code>computed</code>）</td></tr><tr><td><code>requestData.data</code></td><td><code>MaybeRequestValue&lt;Record&lt;string, unknown&gt;&gt;</code></td><td>附加数据（GET 等 → query，POST 等 → body）</td></tr><tr><td><code>protocol</code></td><td><code>AGUIProtocol</code></td><td>自定义协议实例（可选）</td></tr><tr><td><code>interceptors</code></td><td><code>object</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>agent</code></td><td><code>AgentModule</code></td><td>Agent 模块</td></tr><tr><td><code>session</code></td><td><code>SessionModule</code></td><td>Session 模块</td></tr><tr><td><code>message</code></td><td><code>MessageModule</code></td><td>Message 模块</td></tr><tr><td><code>http</code></td><td><code>HttpClient</code></td><td>HTTP 客户端实例</td></tr><tr><td><code>reset</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><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><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;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { computed, 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>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> token</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;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getToken</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: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">computed</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ({ Authorization: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">\`Bearer \${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">token</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}\`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> })),</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ({ app_id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;my-app&#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;">// 使用各模块</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">await</span><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:#D73A49;--shiki-dark:#F97583;">await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> chatHelper.session.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getSessions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span></code></pre></div><h2 id="agent-模块" tabindex="-1">Agent 模块 <a class="header-anchor" href="#agent-模块" aria-label="Permalink to &quot;Agent 模块&quot;">​</a></h2><p>Agent 模块负责与 AI Agent 交互，包括获取 Agent 信息和发起聊天。</p><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>info</code></td><td><code>Ref&lt;IAgentInfo | null&gt;</code></td><td>Agent 信息</td></tr><tr><td><code>isInfoLoading</code></td><td><code>Ref&lt;boolean&gt;</code></td><td>是否正在加载 Agent 信息</td></tr><tr><td><code>isChatting</code></td><td><code>Ref&lt;boolean&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>getAgentInfo</code></td><td><code>() =&gt; Promise&lt;IAgentInfo&gt;</code></td><td>获取 Agent 信息</td></tr><tr><td><code>chat</code></td><td><code>(input, sessionCode, url?, config?) =&gt; Promise&lt;void&gt;</code></td><td>发起聊天</td></tr><tr><td><code>stopChat</code></td><td><code>(sessionCode: string) =&gt; void</code></td><td>停止当前聊天</td></tr><tr><td><code>resumeStreamingChat</code></td><td><code>(sessionCode: string) =&gt; Promise&lt;void&gt;</code></td><td>恢复流式聊天</td></tr><tr><td><code>resendMessage</code></td><td><code>(id, sessionCode, content?, url?, config?) =&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><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">agent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> chatHelper;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 获取 Agent 信息</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> info</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> 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;">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;Agent 名称:&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, info.agentName);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 发起聊天</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> agent.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">chat</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;">&#39;session-123&#39;</span><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;">// 监听聊天状态</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">watch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(agent.isChatting, (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">chatting</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</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;">(chatting </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;正在回复...&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</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:#6A737D;--shiki-dark:#6A737D;">// 停止聊天</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">agent.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">stopChat</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;session-123&#39;</span><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;">// 重发消息</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> agent.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">resendMessage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;msg-456&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;session-123&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h2 id="session-模块" tabindex="-1">Session 模块 <a class="header-anchor" href="#session-模块" aria-label="Permalink to &quot;Session 模块&quot;">​</a></h2><p>Session 模块管理会话的完整生命周期。</p><h3 id="响应式属性-1" tabindex="-1">响应式属性 <a class="header-anchor" href="#响应式属性-1" 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>list</code></td><td><code>Ref&lt;ISession[]&gt;</code></td><td>会话列表</td></tr><tr><td><code>current</code></td><td><code>Ref&lt;ISession | null&gt;</code></td><td>当前会话</td></tr><tr><td><code>isListLoading</code></td><td><code>Ref&lt;boolean&gt;</code></td><td>是否正在加载会话列表</td></tr><tr><td><code>isDeleteLoading</code></td><td><code>Ref&lt;boolean&gt;</code></td><td>是否正在删除会话</td></tr><tr><td><code>isBatchDeleteLoading</code></td><td><code>Ref&lt;boolean&gt;</code></td><td>是否正在批量删除</td></tr></tbody></table><h3 id="方法-1" tabindex="-1">方法 <a class="header-anchor" href="#方法-1" 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>getSessions</code></td><td><code>() =&gt; Promise&lt;ISession[]&gt;</code></td><td>获取会话列表</td></tr><tr><td><code>chooseSession</code></td><td><code>(code: string, options?) =&gt; Promise&lt;void&gt;</code></td><td>选择并切换会话</td></tr><tr><td><code>createSession</code></td><td><code>(session: Partial&lt;ISession&gt;, options?) =&gt; Promise&lt;ISession&gt;</code></td><td>创建新会话</td></tr><tr><td><code>updateSession</code></td><td><code>(session: Partial&lt;ISession&gt;) =&gt; Promise&lt;void&gt;</code></td><td>更新会话信息</td></tr><tr><td><code>deleteSession</code></td><td><code>(code: string) =&gt; Promise&lt;void&gt;</code></td><td>删除会话</td></tr><tr><td><code>batchDeleteSessions</code></td><td><code>(codes: string[]) =&gt; Promise&lt;void&gt;</code></td><td>批量删除会话</td></tr><tr><td><code>renameSession</code></td><td><code>(code: string) =&gt; Promise&lt;void&gt;</code></td><td>重命名会话</td></tr><tr><td><code>getSessionFeedbackReasons</code></td><td><code>(rate: string) =&gt; Promise&lt;string[]&gt;</code></td><td>获取反馈原因列表</td></tr><tr><td><code>postSessionFeedback</code></td><td><code>(params: object) =&gt; Promise&lt;void&gt;</code></td><td>提交反馈</td></tr><tr><td><code>uploadFile</code></td><td><code>(code: string, file: File) =&gt; Promise&lt;void&gt;</code></td><td>上传文件到会话</td></tr></tbody></table><h3 id="用法示例-1" tabindex="-1">用法示例 <a class="header-anchor" href="#用法示例-1" aria-label="Permalink to &quot;用法示例&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">session</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> chatHelper;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 获取会话列表</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> sessions</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> session.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getSessions</span><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;">// 创建新会话</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> newSession</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> session.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createSession</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  sessionName: </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:#6A737D;--shiki-dark:#6A737D;">// 切换会话</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> session.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">chooseSession</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;session-abc-123&#39;</span><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;">// 删除会话</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> session.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">deleteSession</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;session-abc-123&#39;</span><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;">// 重命名</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> session.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">renameSession</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;session-abc-123&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><h2 id="message-模块" tabindex="-1">Message 模块 <a class="header-anchor" href="#message-模块" aria-label="Permalink to &quot;Message 模块&quot;">​</a></h2><p>Message 模块管理当前会话的消息列表。</p><h3 id="响应式属性-2" tabindex="-1">响应式属性 <a class="header-anchor" href="#响应式属性-2" 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>list</code></td><td><code>Ref&lt;IMessage[]&gt;</code></td><td>消息列表</td></tr><tr><td><code>isListLoading</code></td><td><code>Ref&lt;boolean&gt;</code></td><td>是否正在加载消息列表</td></tr><tr><td><code>isDeleteLoading</code></td><td><code>Ref&lt;boolean&gt;</code></td><td>是否正在删除消息</td></tr></tbody></table><h3 id="方法-2" tabindex="-1">方法 <a class="header-anchor" href="#方法-2" 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>getMessages</code></td><td><code>(code: string) =&gt; Promise&lt;IMessage[]&gt;</code></td><td>获取指定会话的消息列表</td></tr><tr><td><code>plusMessage</code></td><td><code>(msg: IMessage) =&gt; void</code></td><td>添加消息到列表</td></tr><tr><td><code>createAndPlusMessage</code></td><td><code>(msg: Partial&lt;IMessage&gt;) =&gt; IMessage</code></td><td>创建消息并添加到列表</td></tr><tr><td><code>modifyMessage</code></td><td><code>(msg: Partial&lt;IMessage&gt;) =&gt; void</code></td><td>修改消息</td></tr><tr><td><code>deleteMessages</code></td><td><code>(msgs: IMessage[]) =&gt; Promise&lt;void&gt;</code></td><td>删除消息</td></tr><tr><td><code>shareMessages</code></td><td><code>(code, msgs, expiredAt?) =&gt; Promise&lt;{ shareUrl: string }&gt;</code></td><td>分享消息</td></tr><tr><td><code>getCurrentLoadingMessage</code></td><td><code>() =&gt; IMessage | undefined</code></td><td>获取当前正在加载的消息</td></tr><tr><td><code>getMessageByMessageId</code></td><td><code>(id: string) =&gt; IMessage | undefined</code></td><td>根据 ID 获取消息</td></tr></tbody></table><h3 id="用法示例-2" tabindex="-1">用法示例 <a class="header-anchor" href="#用法示例-2" aria-label="Permalink to &quot;用法示例&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">message</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> chatHelper;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 获取消息列表</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> messages</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> message.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getMessages</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;session-123&#39;</span><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;">// 手动添加消息</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">message.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">plusMessage</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;msg-1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  role: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;user&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  content: </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:#6A737D;--shiki-dark:#6A737D;">// 删除消息</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> message.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">deleteMessages</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([targetMessage]);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 分享消息</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">shareUrl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> message.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">shareMessages</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;session-123&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, selectedMessages);</span></span></code></pre></div><h2 id="aguiprotocol" tabindex="-1">AGUIProtocol <a class="header-anchor" href="#aguiprotocol" aria-label="Permalink to &quot;AGUIProtocol&quot;">​</a></h2><p>AG-UI 协议处理器，负责解析流式响应中的事件并将其转换为消息更新。</p><h3 id="构造函数钩子" tabindex="-1">构造函数钩子 <a class="header-anchor" href="#构造函数钩子" aria-label="Permalink to &quot;构造函数钩子&quot;">​</a></h3><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> protocol</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> AGUIProtocol</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  onStart</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  onMessage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">event</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> AGUIEvent</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  onDone</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  onError</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">error</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><table tabindex="0"><thead><tr><th>钩子</th><th>说明</th></tr></thead><tbody><tr><td><code>onStart</code></td><td>流式连接建立时触发</td></tr><tr><td><code>onMessage</code></td><td>收到每个事件时触发</td></tr><tr><td><code>onDone</code></td><td>流式传输完成时触发</td></tr><tr><td><code>onError</code></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-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</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;">protocol.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">injectMessageModule</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(messageModule);</span></span></code></pre></div><blockquote><p><strong>重要</strong>：在原子模式下使用 AGUIProtocol 时，必须调用 <code>injectMessageModule</code> 注入 Message 模块，否则协议处理器无法更新消息列表。</p></blockquote><h3 id="ag-ui-事件类型" tabindex="-1">AG-UI 事件类型 <a class="header-anchor" href="#ag-ui-事件类型" aria-label="Permalink to &quot;AG-UI 事件类型&quot;">​</a></h3><table tabindex="0"><thead><tr><th>事件类型</th><th>说明</th></tr></thead><tbody><tr><td><code>TextMessageStart</code></td><td>文本消息开始</td></tr><tr><td><code>TextMessageChunk</code></td><td>文本消息分块（流式文本片段）</td></tr><tr><td><code>TextMessageEnd</code></td><td>文本消息结束</td></tr><tr><td><code>ThinkingStart</code></td><td>思考/推理开始</td></tr><tr><td><code>ThinkingEnd</code></td><td>思考/推理结束</td></tr><tr><td><code>ToolCallStart</code></td><td>工具调用开始</td></tr><tr><td><code>ToolCallArgs</code></td><td>工具调用参数</td></tr><tr><td><code>ToolCallResult</code></td><td>工具调用结果</td></tr><tr><td><code>ToolCallEnd</code></td><td>工具调用结束</td></tr><tr><td><code>RunError</code></td><td>运行错误</td></tr><tr><td><code>MessagesSnapshot</code></td><td>消息快照（全量消息同步）</td></tr></tbody></table><h3 id="自定义协议扩展" tabindex="-1">自定义协议扩展 <a class="header-anchor" href="#自定义协议扩展" aria-label="Permalink to &quot;自定义协议扩展&quot;">​</a></h3><p>你可以继承 <code>AGUIProtocol</code> 来实现自定义的协议处理逻辑：</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { AGUIProtocol } </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;">class</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MyProtocol</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> extends</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> AGUIProtocol</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  constructor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    super</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">      onStart</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</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:#6F42C1;--shiki-dark:#B392F0;">      onMessage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">event</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">        // 自定义事件处理</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">        if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (event.type </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;TextMessageChunk&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">          this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">handleTextChunk</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(event);</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 style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">      onDone</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</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:#6F42C1;--shiki-dark:#B392F0;">      onError</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</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;">error</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;">, error);</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 style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  handleTextChunk</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">event</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    // 自定义文本块处理逻辑</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;">// 使用自定义协议</span></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: { 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;">  protocol: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MyProtocol</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(),</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h2 id="状态映射" tabindex="-1">状态映射 <a class="header-anchor" href="#状态映射" aria-label="Permalink to &quot;状态映射&quot;">​</a></h2><p><code>chat-helper</code> 的状态可以映射为 <code>chat-x</code> UI 组件所需的状态值：</p><table tabindex="0"><thead><tr><th>chat-helper 状态</th><th>chat-x 状态</th><th>说明</th></tr></thead><tbody><tr><td><code>agent.isChatting === true</code></td><td><code>MessageStatus.Streaming</code></td><td>流式输出中</td></tr><tr><td><code>agent.isChatting === false</code></td><td><code>MessageStatus.Complete</code></td><td>输出完成</td></tr><tr><td>聊天出错</td><td><code>MessageStatus.Error</code></td><td>发生错误</td></tr><tr><td>用户停止生成</td><td><code>MessageStatus.Stop</code></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-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { computed } </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;"> { 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 style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { MessageStatus } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@blueking/chat-x&#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>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> messageStatus</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> computed</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (chatHelper.agent.isChatting.value) {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> MessageStatus.Streaming;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> MessageStatus.Complete;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><p>将该 <code>messageStatus</code> 传入 <code>ChatInput</code> 和 <code>MessageContainer</code> 组件即可实现状态联动。</p>`,56)])])}const g=i(n,[["render",h]]);export{E as __pageData,g as default};
