import{_ as a,o as i,c as n,a4 as e}from"./chunks/framework.Cre9sSJa.js";const t="/__DOCS_BASE__/images/api/package-decision-tree.png",l="/__DOCS_BASE__/images/api/package-dependencies.png",E=JSON.parse('{"title":"API 概览","description":"","frontmatter":{},"headers":[],"relativePath":"api/overview.md","filePath":"api/overview.md"}'),h={name:"api/overview.md"};function p(k,s,d,r,o,c){return i(),n("div",null,[...s[0]||(s[0]=[e('<h1 id="api-概览" tabindex="-1">API 概览 <a class="header-anchor" href="#api-概览" aria-label="Permalink to &quot;API 概览&quot;">​</a></h1><p>本文档提供 AI 小鲸 v2.0 所有包的 API 总览，帮助你快速了解各模块的职责与导出内容。</p><h2 id="包一览" tabindex="-1">包一览 <a class="header-anchor" href="#包一览" aria-label="Permalink to &quot;包一览&quot;">​</a></h2><table tabindex="0"><thead><tr><th>包名</th><th>用途</th><th>关键导出</th></tr></thead><tbody><tr><td><code>@blueking/ai-blueking</code></td><td>业务组件层</td><td><code>AIBlueking</code>、<code>ChatBot</code>、Managers</td></tr><tr><td><code>@blueking/ai-blueking/standalone</code></td><td>非 Vue 宿主（v2.1.4-beta.8+）</td><td><code>mountAIBlueking</code>、<code>mountChatBot</code>、内联 Vue 3</td></tr><tr><td><code>@blueking/chat-x</code></td><td>纯 UI 组件</td><td><code>ChatInput</code>、<code>MessageContainer</code>、<code>MessageRender</code></td></tr><tr><td><code>@blueking/chat-helper</code></td><td>业务 SDK</td><td><code>useChatHelper</code>、<code>AGUIProtocol</code></td></tr></tbody></table><h2 id="我该用哪个包" tabindex="-1">我该用哪个包？ <a class="header-anchor" href="#我该用哪个包" aria-label="Permalink to &quot;我该用哪个包？&quot;">​</a></h2><p>根据你的场景，按照以下决策树选择合适的包：</p><p><img src="'+t+`" alt="包选择决策树"></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>SaaS 平台快速接入</td><td><code>AIBlueking</code></td><td>开箱即用，含弹窗、拖拽、会话管理等完整功能</td></tr><tr><td>嵌入已有页面的聊天窗口</td><td><code>ChatBot</code></td><td>轻量级，仅包含核心聊天功能</td></tr><tr><td>宿主无 Vue（React、纯 HTML 等）</td><td><code>@blueking/ai-blueking/standalone</code></td><td><code>mountAIBlueking</code> / <code>mountChatBot</code>，见 <a href="__DOCS_BASE__/guide/integration-modes/standalone-bundle.html">Standalone 指南</a></td></tr><tr><td>自定义聊天界面</td><td><code>chat-x</code> + <code>chat-helper</code></td><td>最大灵活性，自由组合 UI 组件与业务逻辑</td></tr></tbody></table><h2 id="导入参考" tabindex="-1">导入参考 <a class="header-anchor" href="#导入参考" aria-label="Permalink to &quot;导入参考&quot;">​</a></h2><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:#6A737D;--shiki-dark:#6A737D;">// ========================</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// @blueking/ai-blueking</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ========================</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 主组件（Vue 3 宿主）</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { AIBlueking, 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:#6A737D;--shiki-dark:#6A737D;">// 样式引入（按 Vue 版本选择）</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@blueking/ai-blueking/dist/vue3/style.css&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;  </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Vue 3</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// import &#39;@blueking/ai-blueking/dist/vue2/style.css&#39;;</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // Vue 2</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 非 Vue 宿主（v2.1.4-beta.8+）</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// import { mountAIBlueking } from &#39;@blueking/ai-blueking/standalone&#39;;</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// import &#39;@blueking/ai-blueking/dist/standalone/style.css&#39;;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Composables</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { useChatBootstrap } </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:#6A737D;--shiki-dark:#6A737D;">// Managers（业务管理器）</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ComponentManager,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ChatBusinessManager,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  SessionBusinessManager,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ShortcutManager,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  UIStateManager,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">} </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:#6A737D;--shiki-dark:#6A737D;">// ========================</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// @blueking/chat-x</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ========================</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// UI 组件</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ChatInput,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  MessageContainer,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  MessageRender,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ShortcutRender,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  AiSelection,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">} </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:#6A737D;--shiki-dark:#6A737D;">// ========================</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// @blueking/chat-helper</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ========================</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// SDK</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { useChatHelper, 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></code></pre></div><h2 id="包依赖关系" tabindex="-1">包依赖关系 <a class="header-anchor" href="#包依赖关系" aria-label="Permalink to &quot;包依赖关系&quot;">​</a></h2><p><img src="`+l+'" alt="包依赖关系"></p><ul><li><strong>ai-blueking</strong> 是最上层的业务组件包，内部依赖 <code>chat-x</code> 和 <code>chat-helper</code>。</li><li><strong>chat-x</strong> 是纯 UI 层，不包含任何业务逻辑，可独立使用。</li><li><strong>chat-helper</strong> 是纯业务 SDK 层，负责与后端通信、状态管理，不包含任何 UI。</li></ul><h2 id="快速链接" tabindex="-1">快速链接 <a class="header-anchor" href="#快速链接" aria-label="Permalink to &quot;快速链接&quot;">​</a></h2><ul><li><a href="./ai-blueking/chatbot.html">ChatBot 组件</a></li><li><a href="./ai-blueking/aiblueking.html">AIBlueking 组件</a></li><li><a href="./ai-blueking/managers.html">业务管理器</a></li><li><a href="./ai-blueking/types.html">类型定义 (ai-blueking)</a></li><li><a href="./chat-x/components.html">UI 组件 (chat-x)</a></li><li><a href="./chat-x/types.html">类型定义 (chat-x)</a></li><li><a href="./chat-helper/sdk.html">SDK 模块 (chat-helper)</a></li><li><a href="./chat-helper/types.html">类型定义 (chat-helper)</a></li></ul>',16)])])}const u=a(h,[["render",p]]);export{E as __pageData,u as default};
