@blueking/ai-ui-sdk 0.0.4 → 0.0.5

package/README.md

@@ -17,6 +17,9 @@ npm install @blueking/ai-ui-sdk
 - **思考过程可视化**：展示 AI 的思考过程和推理步骤
 - **内容总结**：快速对对话内容进行摘要总结
 - **统一样式**：提供一致的 UI 样式和图标
+- **可拖拽和缩放的聊天窗口**：支持自定义位置和大小的聊天界面
+- **快捷指令功能**：支持预设的快捷操作和自定义指令
+- **多语言支持**：内置国际化支持
 
 ## 使用指南
 
@@ -28,35 +31,33 @@ import { useStyle, useChat, useClickProxy } from '@blueking/ai-ui-sdk';
 // 引入样式和图标
 useStyle();
 
-// 设置全局点击代理事件（用于处理折叠/展开、复制等操作）
+// 设置全局点击代理事件
 useClickProxy();
 
 // 初始化聊天
 const {
   currentSession,
   sessionContents,
-  chat,
+  sendChat,
   stopChat,
-  setCurrentSession
+  setCurrentSession,
+  currentSessionLoading,
+  reGenerateChat,
+  reSendChat,
+  deleteChat,
 } = useChat({
-  handleStart: (sessionCode, sessionContent) => {
-    console.log('聊天开始', sessionCode);
-  },
-  handleText: (sessionCode, sessionContent) => {
-    console.log('收到文本消息', sessionContent.content);
-  },
-  handleReferenceDoc: (sessionCode, sessionContent) => {
-    console.log('收到引用资料');
+  handleStart: () => {
+    console.log('聊天开始');
   },
-  handleThink: (sessionCode, sessionContent) => {
-    console.log('AI 思考过程');
+  handleText: () => {
+    console.log('收到文本消息');
   },
-  handleEnd: (sessionCode, sessionContent) => {
+  handleEnd: () => {
     console.log('聊天结束');
   },
-  handleError: (sessionCode, sessionContent, code) => {
-    console.error('聊天出错', sessionContent.content, code);
-  }
+  requestOptions: {
+    url: 'your-api-endpoint',
+  },
 });
 ```
 
@@ -64,265 +65,197 @@ const {
 
 ```typescript
 // 设置当前会话
-setCurrentSession({
-  sessionCode: 'session_123',
-  sessionName: '新的对话',
-  model: 'your-ai-model-id'
+const session: ISession = {
+  sessionCode: '1',
+  sessionName: 'test',
+  model: '',
+};
+setCurrentSession(session);
+
+// 发送聊天消息
+sendChat({
+  message: '你的问题',
+  cite: '选中的文本', // 可选，引用的文本内容
 });
 
-// 发送聊天请求
-chat({
-  sessionCode: 'session_123',
-  url: 'https://your-ai-api-endpoint.com/chat',
-  data: {
-    // 可添加额外参数
-    prompts: [...],
-    temperature: 0.7
+// 使用快捷指令发送消息
+sendChat({
+  message: '快捷指令标签',
+  cite: '选中的文本',
+  shortcut: {
+    label: '快捷指令名称',
+    key: 'shortcut-key',
+    prompt: '预设的提示模板',
+    icon: '图标', // 可选
   },
-  headers: {
-    'Authorization': 'Bearer your-api-token'
-  }
 });
 
 // 停止正在进行的聊天
-stopChat('session_123');
+stopChat(session.sessionCode);
 ```
 
-### 使用内容总结功能
-
-```typescript
-import { useSummary } from '@blueking/ai-ui-sdk';
-
-const { summary } = useSummary({
-  handleStart: () => {
-    console.log('开始生成摘要');
-  },
-  handleEnd: (text) => {
-    console.log('摘要生成完成:', text);
-  },
-  handleError: (message, code) => {
-    console.error('摘要生成失败:', message, code);
-  }
-});
+### 完整的聊天界面示例
 
-// 生成摘要
-summary({
-  content: '需要总结的长文本内容...',
-  url: 'https://your-ai-api-endpoint.com/summary',
-  headers: {
-    'Authorization': 'Bearer your-api-token'
-  },
-  model: 'your-ai-model-id' // 可选
-});
+```vue
+<template>
+  <div class="ai-blueking-wrapper">
+    <vue-draggable-resizable
+      v-if="isShow"
+      :active="isShow"
+      :draggable="true"
+      :h="height"
+      :min-height="minHeight"
+      :min-width="minWidth"
+      :parent="true"
+      :prevent-deactivation="true"
+      :resizable="true"
+      :w="width"
+      :x="left"
+      :y="top"
+      class-name="ai-blueking-container-wrapper"
+      drag-handle=".drag-handle"
+      @dragging="handleDragging"
+      @resizing="handleResizing"
+    >
+      <div class="ai-blueking-container">
+        <!-- 聊天界面内容 -->
+        <div class="content-wrapper">
+          <div class="message-wrapper">
+            <render-message
+              v-for="(message, index) in sessionContents"
+              :key="message.id"
+              :message="message"
+              :index="index"
+              @delete="handleDelete"
+              @regenerate="handleRegenerate"
+              @resend="handleResend"
+            />
+          </div>
+          
+          <div class="chat-input-container">
+            <ChatInputBox
+              v-model="inputMessage"
+              :loading="currentSessionLoading"
+              :shortcuts="shortcuts"
+              @send="handleSendMessage"
+              @shortcut-click="handleShortcutClick"
+              @stop="handleStop"
+            />
+          </div>
+        </div>
+      </div>
+    </vue-draggable-resizable>
+  </div>
+</template>
 ```
 
-## 组件说明
-
-### 会话内容展示
-
-SDK 可以将 AI 回复渲染为包含以下元素的富文本内容：
-
-1. **引用资料**：显示 AI 回答中引用的文档
-   ```html
-   <section class="knowledge-head click-close">
-     找到 X 篇资料参考
-     <i class="ai-ui-sdk-icon icon-angle-up"></i>
-   </section>
-   <ul class="knowledge-body">
-     <!-- 引用资料列表 -->
-   </ul>
-   ```
-
-2. **思考过程**：展示 AI 的思考过程
-   ```html
-   <section class="think-head click-close">
-     <i class="ai-ui-sdk-icon icon-sikao"></i>思考中...
-     <i class="ai-ui-sdk-icon icon-angle-up"></i>
-   </section>
-   <section class="think-body">
-     <!-- 思考内容 -->
-   </section>
-   ```
-
-## 开发者指南
-
-### 架构概览
-
-SDK 主要由以下模块组成：
+### 快捷指令配置
 
-- **核心 hooks**：
-  - `useChat`: 管理聊天功能
-  - `useSummary`: 处理内容总结
-  - `useReferenceDoc`: 处理引用资料展示
-  - `useThink`: 处理思考过程展示
-  - `useClickProxy`: 处理点击事件代理
-  - `useStyle`: 加载样式和图标
+```typescript
+// 默认快捷指令示例
+const DEFAULT_SHORTCUTS: ShortCut[] = [
+  {
+    label: '解释代码',
+    key: 'explain-code',
+    prompt: '请解释以下代码的功能：{ SELECTED_TEXT }',
+    icon: 'code-icon',
+  },
+  // 更多快捷指令...
+];
 
-- **工具类**：
-  - `ChatHelper`: 处理与 AI 服务的通信
-  - `type-transform`: 处理类型转换
+// 在组件中使用
+const props = defineProps<{
+  shortcuts?: ShortCut[];
+}>();
+```
 
-### 自定义聊天流程
+## 类型定义
 
-可以通过覆盖 `useChat` 的回调函数来自定义聊天流程的各个环节：
+### 会话类型
 
 ```typescript
-const {
-  chat,
-  // 其他方法...
-} = useChat({
-  // 开始时的处理
-  handleStart: (sessionCode, sessionContent) => {
-    // 自定义实现
-  },
-  
-  // 接收文本时的处理
-  handleText: (sessionCode, sessionContent) => {
-    // 自定义实现
-  },
-  
-  // 接收引用资料时的处理
-  handleReferenceDoc: (sessionCode, sessionContent) => {
-    // 自定义实现
-  },
-  
-  // 接收思考过程时的处理
-  handleThink: (sessionCode, sessionContent) => {
-    // 自定义实现
-  },
-  
-  // 结束时的处理
-  handleEnd: (sessionCode, sessionContent) => {
-    // 自定义实现
-  },
-  
-  // 出错时的处理
-  handleError: (sessionCode, sessionContent, code) => {
-    // 自定义实现
-  }
-});
+interface ISession {
+  sessionCode: string;
+  sessionName: string;
+  model: string;
+  roleInfo?: {
+    collectionId: number;
+    collectionName: string;
+    content: ISessionPrompt[];
+    variables: any[];
+  };
+}
 ```
 
-### 会话内容状态管理
-
-SDK 使用 Vue 3 的响应式系统管理会话内容状态：
+### 聊天内容类型
 
 ```typescript
-const {
-  currentSession,       // 当前会话
-  sessionContents,      // 当前会话内容
-  sessionContentsMap,   // 所有会话内容的映射
-  sessionLoadingMap,    // 会话加载状态的映射
-  prompts,              // 计算得到的所有提示
-  // 其他方法...
-} = useChat();
+interface ISessionContent {
+  id?: number;
+  role: SessionContentRole;
+  content: string;
+  status?: SessionContentStatus;
+  sessionCode: string;
+  cite?: string;
+  time?: string;
+}
 ```
 
-### 后端流式响应格式
-
-SDK 期望后端返回的流式响应格式如下：
+### 快捷指令类型
 
+```typescript
+interface ShortCut {
+  label: string;
+  key: string;
+  prompt: string;
+  icon?: string;
+}
 ```
-data: {"event":"text","content":"文本内容","cover":false}
-
-data: {"event":"reference_doc","documents":[{"metadata":{"file_path":"文件路径","path":"路径","preview_path":"预览路径"}}]}
 
-data: {"event":"think","content":"思考内容","cover":false,"elapsed_time":1000}
+## 高级功能
 
-data: {"event":"done"}
+### 消息重发和重新生成
 
-data: {"event":"error","message":"错误信息","code":"错误码"}
+```typescript
+// 重新生成 AI 回复
+const handleRegenerate = (index: number) => {
+  reGenerateChat(index);
+};
+
+// 重新发送用户消息
+const handleResend = (index: number, value: { message: string; cite: string }) => {
+  reSendChat(index, value);
+};
 ```
 
-## 示例应用
-
-以下是一个简单的 AI 聊天应用示例：
-
-```vue
-<template>
-  <div class="chat-container">
-    <div class="chat-messages" ref="messagesRef">
-      <div v-for="message in sessionContents" :key="message.id" 
-           :class="['message', message.role]">
-        <div v-if="message.role === 'user'" class="user-message">
-          {{ message.content }}
-        </div>
-        <div v-else-if="message.role === 'ai'" class="ai-message"
-             v-html="message.content"></div>
-      </div>
-    </div>
-    
-    <div class="chat-input">
-      <input v-model="inputMessage" @keyup.enter="sendMessage" 
-             placeholder="输入您的问题..."/>
-      <button @click="sendMessage">发送</button>
-    </div>
-  </div>
-</template>
+### 消息删除
 
-<script setup>
-import { ref, onMounted } from 'vue';
-import { useStyle, useChat, useClickProxy, SessionContentRole } from '@blueking/ai-ui-sdk';
+```typescript
+const handleDelete = (index: number) => {
+  deleteChat(index);
+};
+```
 
-useStyle();
-useClickProxy();
+## 样式定制
 
-const inputMessage = ref('');
-const messagesRef = ref(null);
+SDK 提供了基础的样式和主题支持，你可以通过覆盖 CSS 变量来自定义界面外观：
 
-const {
-  sessionContents,
-  chat,
-  setCurrentSession,
-  plusSessionContent
-} = useChat();
+```scss
+.ai-blueking-container {
+  // 自定义样式
+}
 
-// 设置当前会话
-onMounted(() => {
-  setCurrentSession({
-    sessionCode: 'demo_session',
-    sessionName: '演示对话',
-    model: 'your-model-id'
-  });
-});
+.message-wrapper {
+  // 消息列表样式
+}
 
-// 发送消息
-const sendMessage = () => {
-  if (!inputMessage.value.trim()) return;
-  
-  // 添加用户消息
-  plusSessionContent('demo_session', {
-    sessionCode: 'demo_session',
-    role: SessionContentRole.User,
-    content: inputMessage.value
-  });
-  
-  // 发送聊天请求
-  chat({
-    sessionCode: 'demo_session',
-    url: 'https://your-api-endpoint/chat',
-    data: {
-      model: 'your-model-id',
-      message: inputMessage.value
-    }
-  });
-  
-  // 清空输入框
-  inputMessage.value = '';
+.chat-input-container {
+  // 输入框样式
 }
-</script>
 ```
 
-## API 参考
-
-请参考源代码中的类型定义获取完整 API 参考。
-
 ## 注意事项
 
-- SDK 依赖 Vue 3 和 bkui-vue，请确保项目中已安装这些依赖
-- 确保 AI 服务支持流式响应格式
-- 处理复杂的 markdown 或代码展示时，建议使用专门的渲染库
-
-## 许可证
+- SDK 依赖 Vue 3，请确保项目中已安装
+- 建议使用 TypeScript 以获得更好的类型提示
 
-ISC

package/dist/hooks/use-chat.d.ts

@@ -1,4 +1,4 @@
-import type { ISessionContent, ISession, ISessionPrompt, ChatCallbacks } from '../types/type.ts';
+import type { ISessionContent, ISession, ISessionPrompt, ChatCallbacks, BasicChatContent, ShortcutChatContent } from '../types/type.ts';
 import { SessionContentRole, SessionContentStatus } from '../types/enum';
 type SessionContentsMap = {
     [key: string]: ISessionContent[];
@@ -49,10 +49,7 @@ export declare const useChat: <T extends ISession = ISession>({ handleStart, han
         url: string;
         headers?: Record<string, string>;
     }) => void;
-    sendChat: (content: {
-        message: string;
-        cite?: string;
-    }, callback?: () => void) => void;
+    sendChat: (content: BasicChatContent | ShortcutChatContent, callback?: () => void) => void;
     stopChat: (sessionCode: string) => void;
     plusSessionContent: (sessionCode: string, sessionContent: ISessionContent) => void;
     updateSessionContent: (sessionContent: ISessionContent) => void;
@@ -70,5 +67,6 @@ export declare const useChat: <T extends ISession = ISession>({ handleStart, han
         message: string;
         cite?: string;
     }, callback?: () => void) => void;
+    deleteChat: (index: number) => void;
 };
 export {};

package/dist/main.js

@@ -243,6 +243,6 @@ url(${m}) format("embedded-opentype");
       &~ .knowledge-head {
         margin-bottom: 8px;
       }
-    }`;(A=document.createElement("style")).textContent=e,document.head.appendChild(A)},t=()=>{A&&(A.remove(),A=null)};(0,a.onBeforeMount)(()=>{e()}),(0,a.onBeforeUnmount)(()=>{t()})};function f(A,e,t,n,i,o,l){try{var s=A[o](l),a=s.value}catch(A){t(A);return}s.done?e(a):Promise.resolve(a).then(n,i)}function Q(A){return function(){var e=this,t=arguments;return new Promise(function(n,i){var o=A.apply(e,t);function l(A){f(o,n,i,l,s,"next",A)}function s(A){f(o,n,i,l,s,"throw",A)}l(void 0)})}}function w(A,e,t){return e in A?Object.defineProperty(A,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):A[e]=t,A}class b{stream({sessionCode:A,url:e,headers:t,data:n}){var i=this;return Q(function*(){var o,l;yield null===(o=i.handleStart)||void 0===o?void 0:o.call(i,A);let s=new AbortController;i.controllerMap[A]=s,fetch(e,{method:"post",signal:s.signal,headers:function(A){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter(function(A){return Object.getOwnPropertyDescriptor(t,A).enumerable}))),n.forEach(function(e){w(A,e,t[e])})}return A}({"Content-Type":"application/json"},t),mode:"cors",credentials:"include",body:JSON.stringify(n)}).then((l=Q(function*(e){let t=e.body.pipeThrough(new window.TextDecoderStream).getReader(),n="";for(;;)try{let{value:o,done:l}=yield t.read();if(!e.ok){i.handleError(A,o||e.statusText,e.status);break}if(l){i.handleEnd(A);break}(n+o.toString()).split("\n").forEach(t=>{let o=t.replace("data:","").trim();if(d(o)){var l,s;let{event:t,content:a,cover:r,documents:d,result:c,code:u,elapsed_time:B,message:g}=JSON.parse(o);if(!1===c||200!==e.status){i.handleError(A,g||"模型调用失败",u);return}switch(t){case"text":i.handleText(A,a,r);break;case"reference_doc":null===(l=i.handleReferenceDoc)||void 0===l||l.call(i,A,d,r);break;case"think":null===(s=i.handleThink)||void 0===s||s.call(i,A,a,r,B);break;case"done":i.handleEnd(A,r?a:"");break;case"error":i.handleError(A,g||"模型调用失败",u)}n=""}else o&&(n=o)})}catch(e){(null==e?void 0:e.code)!==20&&i.handleError(A,`模型调用失败：${e.message}`,e.code);break}}),function(A){return l.apply(this,arguments)}))})()}stop(A){var e,t;return null===(t=this.controllerMap[A])||void 0===t||null===(e=t.abort)||void 0===e||e.call(t),this.handleEnd(A)}constructor({handleStart:A,handleText:e,handleReferenceDoc:t,handleThink:n,handleEnd:i,handleError:o}){w(this,"handleStart",void 0),w(this,"handleText",void 0),w(this,"handleReferenceDoc",void 0),w(this,"handleThink",void 0),w(this,"handleEnd",void 0),w(this,"handleError",void 0),w(this,"controllerMap",void 0),this.handleStart=A,this.handleText=e,this.handleReferenceDoc=t,this.handleThink=n,this.handleEnd=i,this.handleError=o,this.controllerMap={}}}let k=({handleStart:A,handleText:i,handleReferenceDoc:o,handleThink:l,handleEnd:r,handleError:d,requestOptions:c}={})=>{let u="内容正在生成中...",h=(0,a.ref)(),v=(0,a.ref)({}),f=(0,a.ref)([]),Q={},w=(0,a.computed)(()=>{let A=[];for(let n=f.value.length-1;n>=0;n--){let i=f.value[n],o=n+1,l=f.value[o];for(;l&&![t.Ai,t.TokenExpired,t.ImageNotSupported,t.Pause,t.Guide].includes(l.role);)o+=1,l=f.value[o];if(i.role===t.System)break;i.status===e.Fail||(null==l?void 0:l.status)===e.Fail&&[t.User,t.UserImage].includes(i.role)||[t.Time,t.System].includes(i.role)||A.unshift(i)}return A}),k=(0,a.computed)(()=>{var A;let e=null===(A=h.value)||void 0===A?void 0:A.sessionCode;return!!e&&v.value[e]}),C=(0,a.computed)(()=>{var A,e,n;let i=[],o=[],l=[],a=f.value.findLastIndex(A=>A.role===t.System&&["已启用角色","已启用模型"].some(e=>A.content.includes(e))),r=0;null===(n=h.value)||void 0===n||null===(e=n.roleInfo)||void 0===e||null===(A=e.content)||void 0===A||A.forEach(A=>{let e=f.value[a+1+r],n=f.value[a+2+r];if((null==e?void 0:e.content)===A.content&&e.role!==t.System&&(i.push(s(e)),r+=1,(null==e?void 0:e.role)===t.Pause)){for(;n&&n.role===t.System;)r+=1,n=f.value[a+1+r];for(;n&&[t.User,t.UserImage].includes(n.role);)i.push(s(n)),r+=1,n=f.value[a+1+r]}}),o.push(...w.value.map(s));let d=A=>{let e=!0;for(let n=A;n<i.length;n++){var t;i[n].content!==(null===(t=o[n-A])||void 0===t?void 0:t.content)&&(e=!1)}return e};for(let A=0;A<i.length;A++){let e=i[A];if(d(A))break;l.push(e)}return l.push(...o),l.forEach(A=>{A.content=m(A.content),A.content=g(A.content)}),l}),y=new b({handleStart:R,handleText:function(A,t,n){let o=I(A);if(o.content===u)o.content=t;else{if(o.status!==e.Loading)return;o.content=n?t:o.content+t}return null==i?void 0:i(A,o)},handleReferenceDoc:function(A,e,t){let n=I(A),i=B(e);return n.content=t?i:n.content+i,null==o?void 0:o(A,n)},handleThink:function(A,e,t,n){let i=I(A);return i.content=p(i.content,e,t,n),null==l?void 0:l(A,i)},handleEnd:function(A,t){let n=I(A);if(n.status===e.Loading)return v.value[A]=!1,t&&(n.content=t),n.status=e.Success,null==r?void 0:r(A,n);(n.content===u||E(n.content))&&D(A,"聊天内容已中断")},handleError:D});function I(A){var e,t;return(null===(e=h.value)||void 0===e?void 0:e.sessionCode)===A?f.value.at(-1):null===(t=Q[A])||void 0===t?void 0:t.at(-1)}function G(A){var e;return(null===(e=h.value)||void 0===e?void 0:e.sessionCode)===A?f.value:Q[A]}function x(A,e){G(A).push(e)}function Y(A,e,n){var i;let o=(null===(i=h.value)||void 0===i?void 0:i.sessionCode)===A?f.value:Q[A],l=[];return e.forEach(A=>{let e=o.findIndex(e=>e.id===A);if(e>-1){let i=o[e-1],s=o[e+1],a=o[e+2];if(o.splice(e,1),l.push(A),[t.Hidden].includes(null==i?void 0:i.role)){let A=o.findIndex(A=>A.id===i.id);o.splice(A,1),l.push(i.id)}if((null==s?void 0:s.role)===t.Ai||n&&[t.Ai,t.Guide,t.TokenExpired,t.ImageNotSupported,t.Pause].includes(null==s?void 0:s.role)){let A=o.findIndex(A=>A.id===s.id);o.splice(A,1),l.push(s.id)}if([t.Guide].includes(null==a?void 0:a.role)&&n){let A=o.findIndex(A=>A.id===a.id);o.splice(A,1),l.push(a.id)}}}),l}function R(n){v.value[n]=!0;let i={sessionCode:n,role:t.Ai,status:e.Loading,content:u};return x(n,i),null==A?void 0:A(n,i)}function D(A,i,o){let l=I(A);return l.status=e.Fail,l.content=i,v.value[A]=!1,o===n.TokenExpired&&(l.content="抱歉，您的剩余 Token 不足，无法返回回答内容，请先清空当前会话（上下文仍会作为历史记录保留)）",l.role=t.TokenExpired),o===n.ImageNotSupported&&(l.content="抱歉，当前模型不支持图片内容解析",l.role=t.ImageNotSupported),null==d?void 0:d(A,l,o)}function F(A,n){var i,o,l;if(!(null===(i=h.value)||void 0===i?void 0:i.sessionCode)||!(null==c?void 0:c.url)||k.value)return;let{message:s,cite:a}=A;f.value.push({sessionCode:null===(o=h.value)||void 0===o?void 0:o.sessionCode,content:s,role:t.User,status:e.Success,cite:a});let r=a?`${s}: "${a}"`:s;y.stream({sessionCode:null===(l=h.value)||void 0===l?void 0:l.sessionCode,url:c.url,headers:null==c?void 0:c.headers,data:{inputs:{chat_history:C.value.slice(0,C.value.length-1),input:r}}}),null==n||n()}return{currentSession:h,sessionContents:f,sessionContentsMap:Q,sessionLoadingMap:v,prompts:C,currentSessionLoading:k,chat:function({sessionCode:A,data:e,url:t,headers:n}){y.stream({sessionCode:A,url:t,data:e,headers:n||(null==c?void 0:c.headers)})},sendChat:F,stopChat:function(A){y.stop(A)},plusSessionContent:x,updateSessionContent:function(A){var e;let t=((null===(e=h.value)||void 0===e?void 0:e.sessionCode)===A.sessionCode?f.value:Q[A.sessionCode]).find(e=>+(e.id||0)==+(A.id||0));t&&Object.assign(t,A)},getSessionContentById:function(A,e){return G(e).find(e=>e.id===A)},getLastSessionContentBySessionCode:I,getSessionContentsBySessionCode:G,setCurrentSession:function(A){h.value=A,(null==A?void 0:A.sessionCode)&&(Q[A.sessionCode]||(Q[A.sessionCode]=[]),f.value=Q[A.sessionCode])},setSessionContents:function(A){h.value&&(Q[h.value.sessionCode]=A,f.value=A)},deleteSessionContent:function(A,e){return Y(A,[e],!0)},deleteSessionContents:function(A,e){return Y(A,e,!1)},handleStartChat:R,handleErrorChat:D,reGenerateChat:function(A){if(f.value[A].role!==t.Ai)return;let e=f.value[A-1].content,n=f.value[A-1].cite;f.value.splice(A-1,2),F({message:e,cite:n})},reSendChat:function(A,{message:e,cite:n},i){f.value[A].role===t.User&&(f.value.splice(A,f.value.length-A),F({message:e,cite:n},i))}}},C=({handleStart:e,handleEnd:t,handleError:n}={})=>{let i="",o=new b({handleStart:()=>(i="",null==e?void 0:e()),handleText:(A,e,t)=>{t||"正在思考..."===i?i=e:i+=e},handleEnd:()=>("无话可说"===i&&(i=""),null==t?void 0:t(i)),handleError:(A,e,t)=>null==n?void 0:n(e,t)});return{summary:({content:e,url:t,headers:n,model:i})=>{let l=m(g(e)),s=[{role:A.User,content:`你是一个总结大师，请帮助我对下面这段话进行总结。要求总结精炼，不超过 15 个字！且末尾没有标点符号！请注意：如果你无法总结，请回复“无话可说”！
+    }`;(A=document.createElement("style")).textContent=e,document.head.appendChild(A)},t=()=>{A&&(A.remove(),A=null)};(0,a.onBeforeMount)(()=>{e()}),(0,a.onBeforeUnmount)(()=>{t()})};function f(A,e,t,n,i,o,l){try{var s=A[o](l),a=s.value}catch(A){t(A);return}s.done?e(a):Promise.resolve(a).then(n,i)}function Q(A){return function(){var e=this,t=arguments;return new Promise(function(n,i){var o=A.apply(e,t);function l(A){f(o,n,i,l,s,"next",A)}function s(A){f(o,n,i,l,s,"throw",A)}l(void 0)})}}function w(A,e,t){return e in A?Object.defineProperty(A,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):A[e]=t,A}class b{stream({sessionCode:A,url:e,headers:t,data:n}){var i=this;return Q(function*(){var o,l;yield null===(o=i.handleStart)||void 0===o?void 0:o.call(i,A);let s=new AbortController;i.controllerMap[A]=s,fetch(e,{method:"post",signal:s.signal,headers:function(A){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter(function(A){return Object.getOwnPropertyDescriptor(t,A).enumerable}))),n.forEach(function(e){w(A,e,t[e])})}return A}({"Content-Type":"application/json"},t),mode:"cors",credentials:"include",body:JSON.stringify(n)}).then((l=Q(function*(e){let t=e.body.pipeThrough(new window.TextDecoderStream).getReader(),n="";for(;;)try{let{value:o,done:l}=yield t.read();if(!e.ok){i.handleError(A,o||e.statusText,e.status);break}if(l){i.handleEnd(A);break}(n+o.toString()).split("\n").forEach(t=>{let o=t.replace("data:","").trim();if(d(o)){var l,s;let{event:t,content:a,cover:r,documents:d,result:c,code:u,elapsed_time:B,message:g}=JSON.parse(o);if(!1===c||200!==e.status){i.handleError(A,g||"模型调用失败",u);return}switch(t){case"text":i.handleText(A,a,r);break;case"reference_doc":null===(l=i.handleReferenceDoc)||void 0===l||l.call(i,A,d,r);break;case"think":null===(s=i.handleThink)||void 0===s||s.call(i,A,a,r,B);break;case"done":i.handleEnd(A,r?a:"");break;case"error":i.handleError(A,g||"模型调用失败",u)}n=""}else o&&(n=o)})}catch(e){(null==e?void 0:e.code)!==20&&i.handleError(A,`模型调用失败：${e.message}`,e.code);break}}),function(A){return l.apply(this,arguments)}))})()}stop(A){var e,t;return null===(t=this.controllerMap[A])||void 0===t||null===(e=t.abort)||void 0===e||e.call(t),this.handleEnd(A)}constructor({handleStart:A,handleText:e,handleReferenceDoc:t,handleThink:n,handleEnd:i,handleError:o}){w(this,"handleStart",void 0),w(this,"handleText",void 0),w(this,"handleReferenceDoc",void 0),w(this,"handleThink",void 0),w(this,"handleEnd",void 0),w(this,"handleError",void 0),w(this,"controllerMap",void 0),this.handleStart=A,this.handleText=e,this.handleReferenceDoc=t,this.handleThink=n,this.handleEnd=i,this.handleError=o,this.controllerMap={}}}let k=({handleStart:A,handleText:i,handleReferenceDoc:o,handleThink:l,handleEnd:r,handleError:d,requestOptions:c}={})=>{let u="内容正在生成中...",h=(0,a.ref)(),v=(0,a.ref)({}),f=(0,a.ref)([]),Q={},w=(0,a.computed)(()=>{let A=[];for(let n=f.value.length-1;n>=0;n--){let i=f.value[n],o=n+1,l=f.value[o];for(;l&&![t.Ai,t.TokenExpired,t.ImageNotSupported,t.Pause,t.Guide].includes(l.role);)o+=1,l=f.value[o];if(i.role===t.System)break;i.status===e.Fail||(null==l?void 0:l.status)===e.Fail&&[t.User,t.UserImage].includes(i.role)||[t.Time,t.System].includes(i.role)||A.unshift(i)}return A}),k=(0,a.computed)(()=>{var A;let e=null===(A=h.value)||void 0===A?void 0:A.sessionCode;return!!e&&v.value[e]}),C=(0,a.computed)(()=>{var A,e,n;let i=[],o=[],l=[],a=f.value.findLastIndex(A=>A.role===t.System&&["已启用角色","已启用模型"].some(e=>A.content.includes(e))),r=0;null===(n=h.value)||void 0===n||null===(e=n.roleInfo)||void 0===e||null===(A=e.content)||void 0===A||A.forEach(A=>{let e=f.value[a+1+r],n=f.value[a+2+r];if((null==e?void 0:e.content)===A.content&&e.role!==t.System&&(i.push(s(e)),r+=1,(null==e?void 0:e.role)===t.Pause)){for(;n&&n.role===t.System;)r+=1,n=f.value[a+1+r];for(;n&&[t.User,t.UserImage].includes(n.role);)i.push(s(n)),r+=1,n=f.value[a+1+r]}}),o.push(...w.value.map(s));let d=A=>{let e=!0;for(let n=A;n<i.length;n++){var t;i[n].content!==(null===(t=o[n-A])||void 0===t?void 0:t.content)&&(e=!1)}return e};for(let A=0;A<i.length;A++){let e=i[A];if(d(A))break;l.push(e)}return l.push(...o),l.forEach(A=>{A.content=m(A.content),A.content=g(A.content)}),l}),y=new b({handleStart:R,handleText:function(A,t,n){let o=I(A);if(o.content===u)o.content=t;else{if(o.status!==e.Loading)return;o.content=n?t:o.content+t}return null==i?void 0:i(A,o)},handleReferenceDoc:function(A,e,t){let n=I(A),i=B(e);return n.content=t?i:n.content+i,null==o?void 0:o(A,n)},handleThink:function(A,e,t,n){let i=I(A);return i.content=p(i.content,e,t,n),null==l?void 0:l(A,i)},handleEnd:function(A,t){let n=I(A);if(n.status===e.Loading)return v.value[A]=!1,t&&(n.content=t),n.status=e.Success,null==r?void 0:r(A,n);(n.content===u||E(n.content))&&D(A,"聊天内容已中断")},handleError:D});function I(A){var e,t;return(null===(e=h.value)||void 0===e?void 0:e.sessionCode)===A?f.value.at(-1):null===(t=Q[A])||void 0===t?void 0:t.at(-1)}function G(A){var e;return(null===(e=h.value)||void 0===e?void 0:e.sessionCode)===A?f.value:Q[A]}function x(A,e){G(A).push(e)}function Y(A,e,n){var i;let o=(null===(i=h.value)||void 0===i?void 0:i.sessionCode)===A?f.value:Q[A],l=[];return e.forEach(A=>{let e=o.findIndex(e=>e.id===A);if(e>-1){let i=o[e-1],s=o[e+1],a=o[e+2];if(o.splice(e,1),l.push(A),[t.Hidden].includes(null==i?void 0:i.role)){let A=o.findIndex(A=>A.id===i.id);o.splice(A,1),l.push(i.id)}if((null==s?void 0:s.role)===t.Ai||n&&[t.Ai,t.Guide,t.TokenExpired,t.ImageNotSupported,t.Pause].includes(null==s?void 0:s.role)){let A=o.findIndex(A=>A.id===s.id);o.splice(A,1),l.push(s.id)}if([t.Guide].includes(null==a?void 0:a.role)&&n){let A=o.findIndex(A=>A.id===a.id);o.splice(A,1),l.push(a.id)}}}),l}function R(n){v.value[n]=!0;let i={sessionCode:n,role:t.Ai,status:e.Loading,content:u};return x(n,i),null==A?void 0:A(n,i)}function D(A,i,o){let l=I(A);return l.status=e.Fail,l.content=i,v.value[A]=!1,o===n.TokenExpired&&(l.content="抱歉，您的剩余 Token 不足，无法返回回答内容，请先清空当前会话（上下文仍会作为历史记录保留)）",l.role=t.TokenExpired),o===n.ImageNotSupported&&(l.content="抱歉，当前模型不支持图片内容解析",l.role=t.ImageNotSupported),null==d?void 0:d(A,l,o)}function F(A,n){var i,o,l;if(!(null===(i=h.value)||void 0===i?void 0:i.sessionCode)||!(null==c?void 0:c.url)||k.value)return;let{message:s,cite:a,shortcut:r}=A,d="";d=r?r.prompt.replace("{ SELECTED_TEXT }",a):a?`${s}: "${a}"`:s,f.value.push({sessionCode:null===(o=h.value)||void 0===o?void 0:o.sessionCode,content:s,role:t.User,status:e.Success,cite:a}),y.stream({sessionCode:null===(l=h.value)||void 0===l?void 0:l.sessionCode,url:c.url,headers:null==c?void 0:c.headers,data:{inputs:{chat_history:C.value.slice(0,C.value.length-1),input:d}}}),null==n||n()}return{currentSession:h,sessionContents:f,sessionContentsMap:Q,sessionLoadingMap:v,prompts:C,currentSessionLoading:k,chat:function({sessionCode:A,data:e,url:t,headers:n}){y.stream({sessionCode:A,url:t,data:e,headers:n||(null==c?void 0:c.headers)})},sendChat:F,stopChat:function(A){y.stop(A)},plusSessionContent:x,updateSessionContent:function(A){var e;let t=((null===(e=h.value)||void 0===e?void 0:e.sessionCode)===A.sessionCode?f.value:Q[A.sessionCode]).find(e=>+(e.id||0)==+(A.id||0));t&&Object.assign(t,A)},getSessionContentById:function(A,e){return G(e).find(e=>e.id===A)},getLastSessionContentBySessionCode:I,getSessionContentsBySessionCode:G,setCurrentSession:function(A){h.value=A,(null==A?void 0:A.sessionCode)&&(Q[A.sessionCode]||(Q[A.sessionCode]=[]),f.value=Q[A.sessionCode])},setSessionContents:function(A){h.value&&(Q[h.value.sessionCode]=A,f.value=A)},deleteSessionContent:function(A,e){return Y(A,[e],!0)},deleteSessionContents:function(A,e){return Y(A,e,!1)},handleStartChat:R,handleErrorChat:D,reGenerateChat:function(A){if(f.value[A].role!==t.Ai)return;let e=f.value[A-1].content,n=f.value[A-1].cite;f.value.splice(A-1,2),F({message:e,cite:n})},reSendChat:function(A,{message:e,cite:n},i){f.value[A].role===t.User&&(f.value.splice(A,f.value.length-A),F({message:e,cite:n},i))},deleteChat:function(A){if(f.value[A].role===t.User){f.value.splice(A,2);return}f.value.splice(A-1,2)}}},C=({handleStart:e,handleEnd:t,handleError:n}={})=>{let i="",o=new b({handleStart:()=>(i="",null==e?void 0:e()),handleText:(A,e,t)=>{t||"正在思考..."===i?i=e:i+=e},handleEnd:()=>("无话可说"===i&&(i=""),null==t?void 0:t(i)),handleError:(A,e,t)=>null==n?void 0:n(e,t)});return{summary:({content:e,url:t,headers:n,model:i})=>{let l=m(g(e)),s=[{role:A.User,content:`你是一个总结大师，请帮助我对下面这段话进行总结。要求总结精炼，不超过 15 个字！且末尾没有标点符号！请注意：如果你无法总结，请回复“无话可说”！
 文字如下：
 ${l}`}];o.stream({sessionCode:"summary",url:t,data:{prompts:s,model:i},headers:n})}}},y=()=>{i(86),i(84),h(),v()},I=l.default;if("undefined"!=typeof window){let{currentScript:A}=window.document,e=A&&A.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);e&&(i.p=e[1])}})(),o})());

package/dist/types/type.d.ts

@@ -58,3 +58,19 @@ export interface SummaryCallbacks {
     handleEnd?: (text: string) => void;
     handleError?: (message: string, code?: string) => void;
 }
+export type BasicChatContent = {
+    message: string;
+    cite?: string;
+    shortcut?: never;
+};
+export type ShortcutChatContent = {
+    message: string;
+    cite: string;
+    shortcut: ShortCut;
+};
+export interface ShortCut {
+    label: string;
+    key: string;
+    prompt: string;
+    icon?: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blueking/ai-ui-sdk",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "蓝鲸AI UI SDK",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",