import{_ as d,o as e,c as a,a4 as s}from"./chunks/framework.Cre9sSJa.js";const k=JSON.parse('{"title":"AIBlueking 组件","description":"","frontmatter":{},"headers":[],"relativePath":"api/ai-blueking/aiblueking.md","filePath":"api/ai-blueking/aiblueking.md"}'),i={name:"api/ai-blueking/aiblueking.md"};function o(h,t,n,r,l,c){return e(),a("div",null,[...t[0]||(t[0]=[s(`<h1 id="aiblueking-组件" tabindex="-1">AIBlueking 组件 <a class="header-anchor" href="#aiblueking-组件" aria-label="Permalink to &quot;AIBlueking 组件&quot;">​</a></h1><p><code>AIBlueking</code> 是 AI 小鲸的顶层业务组件，在 <code>ChatBot</code> 基础上封装了完整的面板功能，包括弹窗模式、拖拽、缩放、会话管理侧边栏、悬浮球等能力。适用于 SaaS 平台快速集成 AI 助手场景。</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#mountaiblueking"><code>mountAIBlueking</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:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">AIBlueking</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;aiRef&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;/api/ai&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    enable-popup</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    draggable</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:#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:#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;"> { AIBlueking } </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;"> aiRef</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;"> AIBlueking&gt;&gt;();</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 通过 ref 控制显示/隐藏</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> openAI</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  aiRef.value?.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">show</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><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>title</code></td><td><code>string</code></td><td><code>&#39;&#39;</code></td><td>组件标题，显示在 Header 区域</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>requestOptions</code></td><td><code>MaybeRefOrGetter&lt;IRequestOptions&gt;</code></td><td><code>{}</code></td><td>请求配置（<code>headers</code> / <code>data</code> 支持对象、函数、<code>ref</code>、<code>computed</code>）</td></tr><tr><td><code>extCls</code></td><td><code>string</code></td><td><code>&#39;&#39;</code></td><td>额外 CSS 类名</td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>—</td><td>输入框占位文本</td></tr><tr><td><code>helloText</code></td><td><code>string</code></td><td><code>&#39;你好，我是小鲸&#39;</code></td><td>欢迎语</td></tr><tr><td><code>prompts</code></td><td><code>string[]</code></td><td><code>[]</code></td><td>预设提示词（<code>/</code> 触发）</td></tr><tr><td><code>resources</code></td><td><code>IAiSlashMenuItem[]</code></td><td><code>[]</code></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>enablePopup</code></td><td><code>boolean</code></td><td><code>true</code></td><td>是否启用文本选中弹窗（AiSelection）</td></tr><tr><td><code>draggable</code></td><td><code>boolean</code></td><td><code>true</code></td><td>是否可拖拽</td></tr><tr><td><code>enableChatSession</code></td><td><code>boolean</code></td><td><code>true</code></td><td>是否启用多会话（显示会话管理侧边栏）</td></tr><tr><td><code>hideHeader</code></td><td><code>boolean</code></td><td><code>false</code></td><td>是否隐藏头部栏</td></tr><tr><td><code>hideNimbus</code></td><td><code>boolean</code></td><td><code>false</code></td><td>是否隐藏悬浮球</td></tr><tr><td><code>hideDefaultTrigger</code></td><td><code>boolean</code></td><td><code>false</code></td><td>是否隐藏默认触发器</td></tr><tr><td><code>disabledInput</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>teleportTo</code></td><td><code>string</code></td><td><code>&#39;body&#39;</code></td><td>渲染目标（CSS 选择器）</td></tr><tr><td><code>defaultWidth</code></td><td><code>number</code></td><td><code>400</code></td><td>默认宽度（px）</td></tr><tr><td><code>defaultHeight</code></td><td><code>number</code></td><td>—</td><td>默认高度（px）</td></tr><tr><td><code>defaultLeft</code></td><td><code>number</code></td><td>—</td><td>默认左偏移（px），不传则自动计算</td></tr><tr><td><code>defaultTop</code></td><td><code>number</code></td><td><code>0</code></td><td>默认上偏移（px）</td></tr><tr><td><code>maxWidth</code></td><td><code>number | string</code></td><td><code>1000</code></td><td>最大宽度</td></tr><tr><td><code>miniPadding</code></td><td><code>number</code></td><td><code>0</code></td><td>最小边距（px）</td></tr><tr><td><code>defaultChatInputPosition</code></td><td><code>&#39;bottom&#39; | undefined</code></td><td>—</td><td>默认聊天输入框位置</td></tr></tbody></table><h3 id="nimbus-配置" tabindex="-1">Nimbus 配置 <a class="header-anchor" href="#nimbus-配置" aria-label="Permalink to &quot;Nimbus 配置&quot;">​</a></h3><table tabindex="0"><thead><tr><th>属性</th><th>类型</th><th>默认值</th><th>说明</th></tr></thead><tbody><tr><td><code>nimbusSize</code></td><td><code>&#39;large&#39; | &#39;normal&#39; | &#39;small&#39;</code></td><td><code>&#39;normal&#39;</code></td><td>悬浮球大小</td></tr><tr><td><code>defaultMinimize</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>shortcuts</code></td><td><code>IShortcut[]</code></td><td><code>[]</code></td><td>快捷指令列表</td></tr><tr><td><code>shortcutLimit</code></td><td><code>number</code></td><td><code>3</code></td><td>快捷指令显示上限（同时控制 AiSelection 最大展示数量）</td></tr><tr><td><code>shortcutFilter</code></td><td><code>(shortcut: IShortcut, selectedText: string) =&gt; boolean</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>initialSessionCode</code></td><td><code>string</code></td><td><code>&#39;&#39;</code></td><td>初始会话编码</td></tr><tr><td><code>autoSwitchToInitialSession</code></td><td><code>boolean</code></td><td><code>false</code></td><td>是否自动切换到初始会话</td></tr><tr><td><code>loadRecentSessionOnMount</code></td><td><code>boolean</code></td><td><code>true</code></td><td>挂载时是否加载最近会话</td></tr></tbody></table><h3 id="header-图标控制" tabindex="-1">Header 图标控制 <a class="header-anchor" href="#header-图标控制" aria-label="Permalink to &quot;Header 图标控制&quot;">​</a></h3><table tabindex="0"><thead><tr><th>属性</th><th>类型</th><th>默认值</th><th>说明</th></tr></thead><tbody><tr><td><code>showHistoryIcon</code></td><td><code>boolean</code></td><td><code>true</code></td><td>是否显示历史记录图标</td></tr><tr><td><code>showNewChatIcon</code></td><td><code>boolean</code></td><td><code>true</code></td><td>是否显示新建会话图标</td></tr><tr><td><code>showCompressionIcon</code></td><td><code>boolean</code></td><td><code>true</code></td><td>是否显示压缩图标</td></tr><tr><td><code>showMoreIcon</code></td><td><code>boolean</code></td><td><code>true</code></td><td>是否显示更多图标</td></tr><tr><td><code>dropdownMenuConfig</code></td><td><code>DropdownMenuConfig</code></td><td><code>{ showRename: true, showAutoGenerate: true, showShare: true }</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>beforeNimbusClick</code></td><td><code>() =&gt; boolean | Promise&lt;boolean | void&gt; | void</code></td><td>—</td><td>Nimbus 点击前钩子函数，返回 <code>false</code> 阻止默认 showPanel 行为</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>与 <a href="__DOCS_BASE__/api/ai-blueking/chatbot.html#side-render-customization">ChatBot</a> 相同，透传至内层 <code>ChatBot</code>（<strong>≥ v2.1.4-beta.7</strong>）：<code>getSideRenderComponent</code>、<code>getSideTabRenderComponent</code>、<code>onCustomTabChange</code>。详见 <a href="__DOCS_BASE__/guide/core-features/side-render-customization.html">侧栏 Tab 自定义渲染</a>。</p><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>show</code></td><td>—</td><td>面板显示</td></tr><tr><td><code>close</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>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></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>快捷指令点击，<code>source</code> 为 <code>&#39;main&#39;</code> 或 <code>&#39;popup&#39;</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></tr></thead><tbody><tr><td><code>session-initialized</code></td><td><code>({ openingRemark, predefinedQuestions })</code></td><td>会话初始化完成</td></tr><tr><td><code>new-chat</code></td><td>—</td><td>新建会话</td></tr><tr><td><code>new-chat-created</code></td><td><code>({ sessionCode, sessionName?, createdAt? })</code></td><td>新会话创建完成</td></tr><tr><td><code>history-click</code></td><td><code>(event: Event)</code></td><td>历史记录点击</td></tr><tr><td><code>auto-generate-name</code></td><td>—</td><td>自动生成名称</td></tr><tr><td><code>rename</code></td><td><code>(newName: string)</code></td><td>重命名</td></tr><tr><td><code>share</code></td><td>—</td><td>分享</td></tr><tr><td><code>help-click</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>dragging</code></td><td><code>(position: PositionAndSize)</code></td><td>拖拽中</td></tr><tr><td><code>resizing</code></td><td><code>(position: PositionAndSize)</code></td><td>缩放中</td></tr><tr><td><code>drag-stop</code></td><td><code>(position: PositionAndSize)</code></td><td>拖拽结束</td></tr><tr><td><code>resize-stop</code></td><td><code>(position: PositionAndSize)</code></td><td>缩放结束</td></tr></tbody></table><blockquote><p><code>PositionAndSize</code> 类型：<code>{ x: number; y: number; width: number; height: number }</code></p></blockquote><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>transfer-messages</code></td><td><code>({ messageIds: string[] })</code></td><td>转移消息（用于跨面板传递）</td></tr><tr><td><code>share-messages</code></td><td><code>({ messageIds: string[] })</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>sdk-error</code></td><td><code>({ apiName, code, data, message })</code></td><td>SDK 层错误</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>show</code></td><td><code>(sessionCode?: string, options?: { isTemporary?: boolean }) =&gt; Promise&lt;void&gt;</code></td><td>显示面板；Promise 在 <code>sessionList</code> 就绪后 resolve（<code>loadRecentSessionOnMount</code> 时含当前会话初始化）。面板立即显示，可 <code>await</code> 后再读 <code>getChatHelper()?.session</code>。失败 reject 并触发 <code>sdk-error</code>（<code>apiName: &#39;init&#39;</code>）</td></tr><tr><td><code>hide</code></td><td><code>() =&gt; void</code></td><td>隐藏面板</td></tr><tr><td><code>handleShow</code></td><td><code>(sessionCode?: string) =&gt; Promise&lt;void&gt;</code></td><td>显示面板（内部方法，等同于 <code>show</code>）</td></tr><tr><td><code>handleClose</code></td><td><code>() =&gt; void</code></td><td>关闭面板（内部方法，等同于 <code>hide</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></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>addNewSession</code></td><td><code>(options?: CreateSessionOptions) =&gt; Promise&lt;void&gt;</code></td><td>新建会话</td></tr><tr><td><code>switchToSession</code></td><td><code>(sessionCode: string) =&gt; Promise&lt;void&gt;</code></td><td>切换到指定会话</td></tr><tr><td><code>updateSessionName</code></td><td><code>(sessionCode: string, newName: 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>updatePosition</code></td><td><code>(x: number, y: number) =&gt; void</code></td><td>更新面板位置</td></tr><tr><td><code>updateSize</code></td><td><code>(w: number, h: number) =&gt; void</code></td><td>更新面板尺寸</td></tr><tr><td><code>updatePositionAndSize</code></td><td><code>(x: number, y: number, w: number, h: number) =&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></tbody></table><h2 id="弹窗模式" tabindex="-1">弹窗模式 <a class="header-anchor" href="#弹窗模式" aria-label="Permalink to &quot;弹窗模式&quot;">​</a></h2><p>启用 <code>enablePopup</code> 后，面板将以弹窗形式渲染，配合 <code>draggable</code> 可实现自由拖拽定位。</p><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;">AIBlueking</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;aiRef&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;/api/ai&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    enable-popup</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    draggable</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">default-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">420</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;">default-height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">600</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;">default-left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</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;">default-top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    teleport-to</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;body&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></code></pre></div><h3 id="弹窗相关-props-说明" tabindex="-1">弹窗相关 Props 说明 <a class="header-anchor" href="#弹窗相关-props-说明" aria-label="Permalink to &quot;弹窗相关 Props 说明&quot;">​</a></h3><table tabindex="0"><thead><tr><th>属性</th><th>说明</th></tr></thead><tbody><tr><td><code>enablePopup</code></td><td>启用弹窗模式，面板脱离文档流</td></tr><tr><td><code>draggable</code></td><td>允许用户拖拽移动面板</td></tr><tr><td><code>teleportTo</code></td><td>将面板渲染到指定 DOM 节点下</td></tr><tr><td><code>defaultWidth</code> / <code>defaultHeight</code></td><td>面板初始尺寸</td></tr><tr><td><code>defaultLeft</code> / <code>defaultTop</code></td><td>面板初始位置</td></tr><tr><td><code>miniPadding</code></td><td>面板距离视口边缘的最小距离</td></tr><tr><td><code>hideNimbus</code></td><td>隐藏悬浮球入口，需通过 <code>ref.show()</code> 控制显隐</td></tr></tbody></table><h2 id="会话管理-1" tabindex="-1">会话管理 <a class="header-anchor" href="#会话管理-1" aria-label="Permalink to &quot;会话管理&quot;">​</a></h2><p>设置 <code>enableChatSession</code> 后，面板左侧将显示会话列表侧边栏，支持：</p><ul><li>新建会话</li><li>切换会话</li><li>重命名会话</li><li>删除会话 / 批量删除</li></ul><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;">AIBlueking</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:#6F42C1;--shiki-dark:#B392F0;"> enable-chat-session</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></code></pre></div><h2 id="与-chatbot-的关系" tabindex="-1">与 ChatBot 的关系 <a class="header-anchor" href="#与-chatbot-的关系" aria-label="Permalink to &quot;与 ChatBot 的关系&quot;">​</a></h2><p><code>AIBlueking</code> 内部使用了 <code>ChatBot</code> 组件，并在其基础上增加了以下能力：</p><table tabindex="0"><thead><tr><th>能力</th><th>ChatBot</th><th>AIBlueking</th></tr></thead><tbody><tr><td>核心聊天功能</td><td>✅</td><td>✅</td></tr><tr><td>弹窗模式</td><td>❌</td><td>✅</td></tr><tr><td>拖拽 / 缩放</td><td>❌</td><td>✅</td></tr><tr><td>悬浮球入口</td><td>❌</td><td>✅</td></tr><tr><td>会话管理侧边栏</td><td>❌</td><td>✅</td></tr><tr><td>Teleport 渲染</td><td>❌</td><td>✅</td></tr><tr><td>文本选中弹窗</td><td>❌</td><td>✅</td></tr></tbody></table><p>如果你只需要嵌入一个聊天区域，推荐使用更轻量的 <a href="./chatbot.html">ChatBot</a> 组件。</p>`,66)])])}const b=d(i,[["render",o]]);export{k as __pageData,b as default};
