import{_ as i,o as t,c as a,a4 as n}from"./chunks/framework.Cre9sSJa.js";const o=JSON.parse('{"title":"ChatBot 页面嵌入模式","description":"","frontmatter":{},"headers":[],"relativePath":"guide/integration-modes/chatbot-embedded.md","filePath":"guide/integration-modes/chatbot-embedded.md"}'),e={name:"guide/integration-modes/chatbot-embedded.md"};function h(d,s,l,k,p,r){return t(),a("div",null,[...s[0]||(s[0]=[n(`<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 小鲸的核心聊天组件，支持独立使用，将聊天窗口直接嵌入到页面的指定区域，无需浮球、拖拽或面板容器即可快速集成 AI 对话能力。</p><div class="tip custom-block"><p class="custom-block-title">AIDev 自动加载</p><p>组件初始化时会自动通过 <code>agent/info</code> 接口加载 Agent 配置（快捷指令、提示词、欢迎语等），<strong>无需手动传入</strong>。你只需要提供 AIDev 平台发布后的 URL。</p></div><h2 id="适用场景" tabindex="-1">适用场景 <a class="header-anchor" href="#适用场景" aria-label="Permalink to &quot;适用场景&quot;">​</a></h2><ul><li><strong>页面主内容</strong>：将聊天窗口作为页面的核心功能区域。</li><li><strong>侧边栏聊天</strong>：嵌入到页面侧边栏，提供辅助对话能力。</li><li><strong>自定义会话列表</strong>：结合外部会话列表组件，构建完整的聊天页面（参见 <a href="__DOCS_BASE__/guide/advanced-usage/external-session-list.html">自定义会话列表</a>）。</li><li><strong>弹窗/卡片内</strong>：在弹窗、卡片等容器中集成对话能力。</li></ul><h2 id="快速开始" tabindex="-1">快速开始 <a class="header-anchor" href="#快速开始" aria-label="Permalink to &quot;快速开始&quot;">​</a></h2><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-EjUi9" id="tab-GCBEHO4" checked><label data-title="Vue 3" for="tab-GCBEHO4">Vue 3</label><input type="radio" name="group-EjUi9" id="tab-6qQjWJt"><label data-title="Vue 2" for="tab-6qQjWJt">Vue 2</label></div><div class="blocks"><div class="language-vue vp-adaptive-theme active"><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;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;width: 600px; height: 800px;&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;">ChatBot</span></span>
<span class="line"><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>
<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;https://your-aidev-url.com/api/&quot;</span></span>
<span class="line"><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;requestOptions&quot;</span></span>
<span class="line"><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;handleSendMessage&quot;</span></span>
<span class="line"><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;">&quot;handleError&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;">div</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:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</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 style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ChatBotExpose } </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;">ChatBotExpose</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;();</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:#6F42C1;--shiki-dark:#B392F0;">  headers</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:#6F42C1;--shiki-dark:#B392F0;">getToken</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">()</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:#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:#6F42C1;--shiki-dark:#B392F0;"> handleSendMessage</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">message</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</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;"> 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:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> handleError</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</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:#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>
<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:#6F42C1;--shiki-dark:#B392F0;"> externalSend</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</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;"> chatBotRef.value?.</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;Hello&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> switchSession</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">code</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</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;"> chatBotRef.value?.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">switchSession</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(code);</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:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;width: 600px; height: 800px;&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;">ChatBot</span></span>
<span class="line"><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>
<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;https://your-aidev-url.com/api/&quot;</span></span>
<span class="line"><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;requestOptions&quot;</span></span>
<span class="line"><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;handleSendMessage&quot;</span></span>
<span class="line"><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;">&quot;handleError&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;">div</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:#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;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  components: { ChatBot },</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>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">    return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      requestOptions: {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">        headers</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:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getToken</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">()</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:#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 style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  methods: {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    handleSendMessage</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 style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    handleError</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>
<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:#6A737D;--shiki-dark:#6A737D;">    // 外部控制</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    externalSend</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;">.$refs.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;Hello&#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;">    switchSession</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">code</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;">.$refs.chatBotRef.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">switchSession</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(code);</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 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></div><h2 id="props-参考" tabindex="-1">Props 参考 <a class="header-anchor" href="#props-参考" aria-label="Permalink to &quot;Props 参考&quot;">​</a></h2><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>—</td><td><strong>必填</strong>。后端 API 地址（来自 AIDev 平台）</td></tr><tr><td><code>autoLoad</code></td><td><code>boolean</code></td><td><code>true</code></td><td>是否在挂载时自动加载 Agent 信息和会话列表</td></tr><tr><td><code>sessionCode</code></td><td><code>string</code></td><td>—</td><td>指定初始会话 Code，传入后自动切换到该会话</td></tr><tr><td><code>shortcuts</code></td><td><code>Shortcut[]</code></td><td><code>[]</code></td><td>快捷指令列表（通常由 AIDev 后台配置自动加载，此 prop 用于覆盖或补充）</td></tr><tr><td><code>shortcutLimit</code></td><td><code>number</code></td><td><code>6</code></td><td>欢迎页快捷指令最大展示数量</td></tr><tr><td><code>resources</code></td><td><code>Resource[]</code></td><td><code>[]</code></td><td>资源列表，用于上下文增强</td></tr><tr><td><code>prompts</code></td><td><code>Prompt[]</code></td><td><code>[]</code></td><td>预设 Prompt 列表</td></tr><tr><td><code>helloText</code></td><td><code>string</code></td><td>—</td><td>欢迎语文本，不传则使用 Agent 默认欢迎语</td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>—</td><td>输入框占位文本</td></tr><tr><td><code>height</code></td><td><code>string | number</code></td><td><code>&#39;100%&#39;</code></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>requestOptions</code></td><td><code>RequestOptions</code></td><td>—</td><td>请求配置，支持自定义 headers、超时等</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><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>开始接收 AI 响应时触发</td></tr><tr><td><code>receive-text</code></td><td><code>(text: string)</code></td><td>接收到流式文本片段时触发</td></tr><tr><td><code>receive-end</code></td><td>—</td><td>AI 响应接收完成时触发</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>session-switched</code></td><td><code>(sessionCode: string)</code></td><td>会话切换完成时触发</td></tr><tr><td><code>shortcut-click</code></td><td><code>(shortcut: Shortcut)</code></td><td>用户点击快捷指令时触发</td></tr><tr><td><code>agent-info-loaded</code></td><td><code>(agentInfo: AgentInfo)</code></td><td>Agent 信息加载完成时触发</td></tr><tr><td><code>feedback</code></td><td><code>(type: &#39;like&#39; | &#39;unlike&#39;, messageId: string)</code></td><td>用户对消息进行反馈时触发</td></tr><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><h2 id="expose-方法" tabindex="-1">Expose 方法 <a class="header-anchor" href="#expose-方法" aria-label="Permalink to &quot;Expose 方法&quot;">​</a></h2><p>通过 <code>ref</code> 获取组件实例后，可调用以下方法进行外部控制：</p><table tabindex="0"><thead><tr><th>方法 / 属性</th><th>类型</th><th>说明</th></tr></thead><tbody><tr><td><code>sendMessage(text)</code></td><td><code>(text: 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>switchSession(code)</code></td><td><code>(code: string) =&gt; Promise&lt;void&gt;</code></td><td>切换到指定会话</td></tr><tr><td><code>setCiteText(text)</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><tr><td><code>selectShortcut(shortcut, selectedText?)</code></td><td><code>(shortcut: IShortcut, selectedText?: string) =&gt; void</code></td><td>选择快捷指令并显示表单</td></tr><tr><td><code>sendShortcut(shortcut, selectedText?)</code></td><td><code>(shortcut: IShortcut, selectedText?: string) =&gt; Promise&lt;void&gt;</code></td><td>直接发送快捷指令（跳过表单）</td></tr><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><tr><td><code>getChatHelper()</code></td><td><code>() =&gt; IChatHelper | null</code></td><td>获取内部 <code>chatHelper</code> 实例，用于高级操作</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><h2 id="独立模式-vs-集成模式" tabindex="-1">独立模式 vs 集成模式 <a class="header-anchor" href="#独立模式-vs-集成模式" aria-label="Permalink to &quot;独立模式 vs 集成模式&quot;">​</a></h2><p><code>ChatBot</code> 根据是否传入 <code>chatHelper</code> prop 自动切换运行模式：</p><table tabindex="0"><thead><tr><th>对比项</th><th>独立模式（无 chatHelper）</th><th>集成模式（传入 chatHelper）</th></tr></thead><tbody><tr><td><strong>chatHelper 来源</strong></td><td>ChatBot 内部自动创建</td><td>由父组件（如 AIBlueking）传入</td></tr><tr><td><strong>生命周期管理</strong></td><td>ChatBot 自行管理创建和销毁</td><td>由父组件管理，ChatBot 仅使用</td></tr><tr><td><strong>会话管理</strong></td><td>ChatBot 独立管理</td><td>与父组件共享同一 chatHelper，会话状态同步</td></tr><tr><td><strong>适用场景</strong></td><td>独立嵌入、简单集成</td><td>作为 AIBlueking 内部子组件使用</td></tr><tr><td><strong>初始化流程</strong></td><td>自动执行 getAgentInfo → getSessions → 选择会话</td><td>跳过初始化，复用已有状态</td></tr><tr><td><strong>使用方式</strong></td><td>直接使用 <code>&lt;ChatBot url=&quot;...&quot; /&gt;</code></td><td>通常不需要直接使用，由 AIBlueking 内部组装</td></tr></tbody></table><blockquote><p><strong>提示</strong>：大多数场景下推荐使用独立模式。仅在需要多个组件共享同一对话状态时，才考虑集成模式。</p></blockquote>`,18)])])}const g=i(e,[["render",h]]);export{o as __pageData,g as default};
