@blueking/ai-ui-sdk 0.0.13 → 0.0.15-beta.1

package/README.md

@@ -0,0 +1,290 @@
+# @blueking/ai-ui-sdk
+
+蓝鲸 AI UI SDK 是一个用于快速构建 AI 聊天界面的 Vue 3 组件库。该 SDK 提供了一系列易用的 Hooks 和工具，帮助开发者轻松集成 AI 对话、内容总结、样式管理等功能。
+
+## 安装
+
+```bash
+npm install @blueking/ai-ui-sdk
+# 或
+yarn add @blueking/ai-ui-sdk
+```
+
+## 主要功能
+
+### 1. 聊天功能 (useChat)
+
+`useChat` Hook 提供完整的聊天会话管理能力，包括发送消息、接收回复、管理会话状态等功能。
+
+#### 基本用法
+
+```typescript
+import { useChat } from '@blueking/ai-ui-sdk';
+
+const {
+  currentSession,       // 当前会话信息
+  sessionContents,      // 会话内容列表
+  sendChat,             // 发送消息方法
+  stopChat,             // 停止生成方法
+  setCurrentSession,    // 设置当前会话
+  currentSessionLoading,// 当前会话加载状态
+  reGenerateChat,       // 重新生成回复
+  reSendChat,           // 重新发送消息
+  deleteChat,           // 删除消息
+} = useChat({
+  // 可选回调函数
+  handleStart: (sessionCode, sessionContent) => {
+    // 开始生成回复时的回调
+  },
+  handleText: (sessionCode, sessionContent) => {
+    // 接收到文本时的回调
+  },
+  handleEnd: (sessionCode, sessionContent) => {
+    // 生成完成时的回调
+  },
+  // 请求配置
+  requestOptions: {
+    url: 'https://your-api-endpoint.com',
+    headers: { /* 自定义请求头 */ }
+  }
+});
+
+// 设置当前会话
+setCurrentSession({
+  sessionCode: 'session-1',
+  sessionName: 'My Chat',
+  model: 'gpt-3.5',
+});
+
+// 发送消息
+sendChat({
+  message: '你好，AI 助手',
+  cite: '可选的引用内容',
+});
+
+// 停止生成回复
+stopChat('session-1');
+```
+
+### 2. 内容总结 (useSummary)
+
+`useSummary` Hook 提供文本内容自动总结功能。
+
+```typescript
+import { useSummary } from '@blueking/ai-ui-sdk';
+
+const { summary } = useSummary({
+  handleStart: () => {
+    // 开始总结时的回调
+  },
+  handleEnd: (summaryText) => {
+    // 总结完成时的回调，返回总结文本
+  },
+  handleError: (message, code) => {
+    // 出错时的回调
+  }
+});
+
+// 使用总结功能
+summary({
+  content: '需要总结的长文本内容...',
+  url: 'https://your-summary-api.com',
+  headers: { /* 自定义请求头 */ },
+  model: 'gpt-3.5', // 可选的模型指定
+});
+```
+
+### 3. 点击代理 (useClickProxy)
+
+`useClickProxy` Hook 提供全局点击事件代理，用于处理代码块展开/收起、全屏显示、复制代码、下载文件等功能。
+
+```typescript
+import { useClickProxy } from '@blueking/ai-ui-sdk';
+
+// 在组件挂载前添加全局点击代理，卸载前自动移除
+useClickProxy();
+```
+
+### 4. 样式管理 (useStyle)
+
+`useStyle` Hook 用于引入和管理 SDK 所需的全局样式。在应用入口处调用一次即可。
+
+```typescript
+import { useStyle } from '@blueking/ai-ui-sdk';
+
+// 引入全局样式
+useStyle();
+```
+
+## 类型定义
+
+SDK 提供了丰富的类型定义，以支持 TypeScript 开发。
+
+### 会话类型
+
+```typescript
+// 会话信息
+interface ISession {
+  sessionCode: string;     // 会话编码
+  sessionName: string;     // 会话名称
+  model: string;           // 使用的模型
+  roleInfo?: {             // 角色信息（可选）
+    collectionId: number;
+    collectionName: string;
+    content: ISessionPrompt[];
+    variables: any[];
+  };
+}
+
+// 会话内容
+interface ISessionContent {
+  id?: number;             // 内容ID
+  role: SessionContentRole;// 角色类型
+  content: string;         // 内容文本
+  status?: SessionContentStatus; // 状态
+  sessionCode: string;     // 所属会话编码
+  cite?: string;           // 引用内容
+  time?: string;           // 时间戳
+}
+
+// 快捷方式
+interface ShortCut {
+  label: string;           // 显示文本
+  key: string;             // 唯一标识
+  prompt: string;          // 提示词模板
+  icon?: string;           // 图标（可选）
+}
+```
+
+### 枚举值
+
+```typescript
+// 会话内容角色
+enum SessionContentRole {
+  Ai = 'ai',               // AI 回复
+  User = 'user',           // 用户消息
+  System = 'system',       // 系统消息
+  // ... 更多角色类型
+}
+
+// 会话内容状态
+enum SessionContentStatus {
+  Fail = 'fail',           // 失败
+  Loading = 'loading',     // 加载中
+  Success = 'success',     // 成功
+}
+```
+
+## 完整示例
+
+下面是一个完整的使用示例，展示了如何在 Vue 3 组件中集成 SDK：
+
+```vue
+<template>
+  <div class="chat-container">
+    <!-- 消息列表 -->
+    <div class="message-list">
+      <div v-for="message in sessionContents" :key="message.id" class="message">
+        <div class="avatar">
+          {{ message.role === 'user' ? '👤' : '🤖' }}
+        </div>
+        <div class="content">{{ message.content }}</div>
+      </div>
+    </div>
+    
+    <!-- 输入框 -->
+    <div class="input-area">
+      <input 
+        v-model="inputMessage" 
+        @keyup.enter="handleSend"
+        placeholder="请输入消息..."
+      />
+      <button @click="handleSend" :disabled="currentSessionLoading">
+        {{ currentSessionLoading ? '生成中...' : '发送' }}
+      </button>
+      <button v-if="currentSessionLoading" @click="handleStop">停止</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useChat, useStyle, useClickProxy } from '@blueking/ai-ui-sdk';
+
+// 引入全局样式
+useStyle();
+
+// 添加点击代理
+useClickProxy();
+
+// 初始化聊天功能
+const {
+  currentSession,
+  sessionContents,
+  sendChat,
+  stopChat,
+  setCurrentSession,
+  currentSessionLoading,
+} = useChat({
+  handleStart: () => {
+    console.log('开始生成回复');
+  },
+  handleEnd: () => {
+    console.log('回复生成完成');
+  },
+  requestOptions: {
+    url: 'https://your-chat-api.com',
+  }
+});
+
+// 设置当前会话
+setCurrentSession({
+  sessionCode: 'session-' + Date.now(),
+  sessionName: '新对话',
+  model: 'gpt-3.5',
+});
+
+const inputMessage = ref('');
+
+// 发送消息
+const handleSend = () => {
+  if (!inputMessage.value.trim()) return;
+  
+  sendChat({
+    message: inputMessage.value,
+  });
+  
+  inputMessage.value = '';
+};
+
+// 停止生成
+const handleStop = () => {
+  if (currentSession.value?.sessionCode) {
+    stopChat(currentSession.value.sessionCode);
+  }
+};
+</script>
+```
+
+## 注意事项
+
+1. 确保在应用中只调用一次 `useStyle()` 以避免样式重复注入
+2. `useClickProxy()` 应在组件挂载前调用，会自动在组件卸载时移除事件监听
+3. 发送消息前必须通过 `setCurrentSession()` 设置当前会话
+4. 所有网络请求需要在 `requestOptions` 中配置正确的 API 地址
+
+## 高级功能
+
+SDK 还提供了以下高级功能：
+
+- 支持引用上下文进行提问
+- 支持快捷操作菜单配置
+- 支持代码块的展开/收起、全屏显示、复制、下载
+- 支持响应内容的重新生成和删除
+- 支持会话内容的自动滚动
+
+## 版本兼容性
+
+- 需要 Vue 3.x
+- TypeScript 4.x 或更高版本
+- 现代浏览器（Chrome, Firefox, Safari, Edge）

package/dist/common/chart-helper.d.ts

@@ -1,4 +1,4 @@
-import type { Document } from '../types/type';
+import type { Document } from '../types/session';
 type HandleStart = (sessionCode: string) => any;
 type HandleText = (sessionCode: string, message: string, cover?: boolean) => void;
 type HandleReferenceDoc = (sessionCode: string, documents: Document[], cover?: boolean) => void;

package/dist/common/chart-helper.js

@@ -0,0 +1,173 @@
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+import { isJSON } from './util.js';
+export class ChatHelper {
+    stream({ sessionCode, url, headers, data }) {
+        var _this = this;
+        return _async_to_generator(function*() {
+            var _this_handleStart, _this1;
+            // 开始
+            yield (_this_handleStart = (_this1 = _this).handleStart) === null || _this_handleStart === void 0 ? void 0 : _this_handleStart.call(_this1, sessionCode);
+            // 记录 controller
+            const controller = new AbortController();
+            _this.controllerMap[sessionCode] = controller;
+            // 发送请求
+            fetch(url, {
+                method: 'post',
+                signal: controller.signal,
+                headers: _object_spread({
+                    'Content-Type': 'application/json'
+                }, headers),
+                mode: 'cors',
+                credentials: 'include',
+                body: JSON.stringify(data)
+            }).then(function() {
+                var _ref = _async_to_generator(function*(response) {
+                    const reader = response.body.pipeThrough(new window.TextDecoderStream()).getReader();
+                    // 临时存储数据
+                    let temp = '';
+                    while(true){
+                        try {
+                            const { value, done } = yield reader.read();
+                            // 接口异常处理
+                            if (!response.ok) {
+                                let message = value || response.statusText;
+                                try {
+                                    const json = JSON.parse(message);
+                                    message = json.message || json.error.message || message;
+                                } catch (error) {
+                                    console.error(error.message || error);
+                                }
+                                _this.handleError(sessionCode, message, response.status);
+                                break;
+                            }
+                            // 接口完成
+                            if (done) {
+                                _this.handleEnd(sessionCode);
+                                break;
+                            }
+                            const values = (temp + value.toString()).split('\n');
+                            values.forEach((value)=>{
+                                const item = value.replace('data:', '').trim();
+                                if (isJSON(item)) {
+                                    const { event, content, cover, documents, result, code, elapsed_time, message } = JSON.parse(item);
+                                    // 业务错误处理
+                                    if (result === false || response.status !== 200) {
+                                        _this.handleError(sessionCode, message || '模型调用失败', code);
+                                        return;
+                                    }
+                                    switch(event){
+                                        case 'text':
+                                            _this.handleText(sessionCode, content, cover);
+                                            break;
+                                        case 'reference_doc':
+                                            var _this_handleReferenceDoc, _this1;
+                                            (_this_handleReferenceDoc = (_this1 = _this).handleReferenceDoc) === null || _this_handleReferenceDoc === void 0 ? void 0 : _this_handleReferenceDoc.call(_this1, sessionCode, documents, cover);
+                                            break;
+                                        case 'think':
+                                            var _this_handleThink, _this2;
+                                            (_this_handleThink = (_this2 = _this).handleThink) === null || _this_handleThink === void 0 ? void 0 : _this_handleThink.call(_this2, sessionCode, content, cover, elapsed_time);
+                                            break;
+                                        case 'done':
+                                            _this.handleEnd(sessionCode, cover ? content : '');
+                                            break;
+                                        case 'error':
+                                            _this.handleError(sessionCode, message || '模型调用失败', code);
+                                            break;
+                                    }
+                                    temp = '';
+                                } else if (item) {
+                                    temp = item;
+                                }
+                            });
+                        } catch (error) {
+                            if ((error === null || error === void 0 ? void 0 : error.code) !== 20) {
+                                _this.handleError(sessionCode, `模型调用失败：${error.message}`, error.code);
+                            }
+                            break;
+                        }
+                    }
+                });
+                return function(response) {
+                    return _ref.apply(this, arguments);
+                };
+            }());
+        })();
+    }
+    stop(sessionCode) {
+        var _this_controllerMap_sessionCode_abort, _this_controllerMap_sessionCode;
+        (_this_controllerMap_sessionCode = this.controllerMap[sessionCode]) === null || _this_controllerMap_sessionCode === void 0 ? void 0 : (_this_controllerMap_sessionCode_abort = _this_controllerMap_sessionCode.abort) === null || _this_controllerMap_sessionCode_abort === void 0 ? void 0 : _this_controllerMap_sessionCode_abort.call(_this_controllerMap_sessionCode);
+        return this.handleEnd(sessionCode);
+    }
+    constructor({ handleStart, handleText, handleReferenceDoc, handleThink, handleEnd, handleError }){
+        _define_property(this, "handleStart", void 0);
+        _define_property(this, "handleText", void 0);
+        _define_property(this, "handleReferenceDoc", void 0);
+        _define_property(this, "handleThink", void 0);
+        _define_property(this, "handleEnd", void 0);
+        _define_property(this, "handleError", void 0);
+        _define_property(this, "controllerMap", void 0);
+        this.handleStart = handleStart;
+        this.handleText = handleText;
+        this.handleReferenceDoc = handleReferenceDoc;
+        this.handleThink = handleThink;
+        this.handleEnd = handleEnd;
+        this.handleError = handleError;
+        this.controllerMap = {};
+    }
+}

package/dist/common/util.d.ts

@@ -1,9 +1,30 @@
+/**
+* 节流，每隔一段时间执行
+* @param {*} fn 需要执行的函数
+* @param {*} delay 延迟时间，默认200
+* @returns
+*/
+export declare const throttle: <T1, T2, R>(fn: (p1?: T1, p2?: T2) => R, delay?: number) => (p1?: T1, p2?: T2) => false | undefined;
 /**
  * 判断是否是 JSON 字符串
  * @param str 字符串
  * @returns 是否是 JSON 字符串
  */
 export declare const isJSON: (str: string) => boolean;
+/**
+ * 检查是不是 object 类型
+ * @param item
+ * @returns {boolean}
+ */
+export declare function isObject(item: any): boolean;
+/**
+ * 深度合并多个对象
+ * @param objectArray 待合并列表
+ * @returns {object} 合并后的对象
+ */
+export declare function deepMerge(...objectArray: object[]): any;
+export declare const mergeStringWithoutLeadingSlash: (str1?: string, str2?: string) => string;
+export declare const mergeStringWithoutLastSlash: (str1?: string, str2?: string) => string;
 /**
  * 响应时间格式化
  * @param val 待格式化时间，xxms

package/dist/common/util.js

@@ -0,0 +1,143 @@
+import { Message } from 'bkui-vue';
+/**
+* 节流，每隔一段时间执行
+* @param {*} fn 需要执行的函数
+* @param {*} delay 延迟时间，默认200
+* @returns
+*/ export const throttle = (fn, delay = 200)=>{
+    let valid = true;
+    return function(p1, p2) {
+        if (!valid) {
+            return false;
+        }
+        valid = false;
+        setTimeout(()=>{
+            fn(p1, p2);
+            valid = true;
+        }, delay);
+    };
+};
+/**
+ * 判断是否是 JSON 字符串
+ * @param str 字符串
+ * @returns 是否是 JSON 字符串
+ */ export const isJSON = (str)=>{
+    try {
+        JSON.parse(str);
+        return true;
+    } catch (e) {
+        return false;
+    }
+};
+/**
+ * 检查是不是 object 类型
+ * @param item
+ * @returns {boolean}
+ */ export function isObject(item) {
+    return Object.prototype.toString.apply(item) === '[object Object]';
+}
+/**
+ * 深度合并多个对象
+ * @param objectArray 待合并列表
+ * @returns {object} 合并后的对象
+ */ export function deepMerge(...objectArray) {
+    return objectArray.reduce((acc, obj)=>{
+        Object.keys(obj || {}).forEach((key)=>{
+            const pVal = acc[key];
+            const oVal = obj[key];
+            if (isObject(pVal) && isObject(oVal)) {
+                acc[key] = deepMerge(pVal, oVal);
+            } else {
+                acc[key] = oVal;
+            }
+        });
+        return acc;
+    }, {});
+}
+// 合并字符串，如果是 / 开头就去掉它
+export const mergeStringWithoutLeadingSlash = (str1 = '', str2 = '')=>{
+    const result = `${str1}/${str2}`;
+    if (result.startsWith('/')) {
+        return result.slice(1);
+    }
+    return result;
+};
+// 合并字符串，如果是 / 结尾就去掉它
+export const mergeStringWithoutLastSlash = (str1 = '', str2 = '')=>{
+    const result = `${str1}/${str2}`;
+    if (result.endsWith('/')) {
+        return result.slice(0, -1);
+    }
+    return result;
+};
+/**
+ * 响应时间格式化
+ * @param val 待格式化时间，xxms
+ * @returns 格式化后的时间,xx小时xx分钟xx秒
+ */ export function durationFormatter(val) {
+    const hours = Math.floor(val / 3600000);
+    const minutes = Math.floor(val % 3600000 / 60000);
+    const seconds = Math.floor(val % 60000 / 1000);
+    const milliseconds = val % 1000;
+    const parts = [];
+    if (hours > 0) {
+        parts.push(`${hours}h`);
+    }
+    if (minutes > 0) {
+        parts.push(`${minutes}min`);
+    }
+    if (seconds > 0) {
+        parts.push(`${seconds}s`);
+    }
+    if (milliseconds > 0) {
+        parts.push(`${milliseconds.toFixed(2)}ms`);
+    }
+    return parts.join(' ');
+}
+/**
+ * 前端下载文件
+ * @param {*} source 文件内容
+ * @param {*} filename 文件名
+ */ export function handleDownLoad(source, filename = 'ai.txt') {
+    const downloadEl = document.createElement('a');
+    const blob = new Blob([
+        source
+    ]);
+    downloadEl.download = filename;
+    downloadEl.href = URL.createObjectURL(blob);
+    downloadEl.style.display = 'none';
+    document.body.appendChild(downloadEl);
+    downloadEl.click();
+    document.body.removeChild(downloadEl);
+}
+export const handleCopy = (text)=>{
+    const textarea = document.createElement('textarea');
+    textarea.value = text;
+    document.body.appendChild(textarea);
+    textarea.select();
+    document.execCommand('copy');
+    Message({
+        theme: 'success',
+        message: '复制成功'
+    });
+    document.body.removeChild(textarea);
+};
+/**
+ * 处理提示词模板,替换模板中的变量
+ * @param prompt 提示词模板
+ * @param selectedText 选中的文本
+ * @returns 处理后的提示词
+ */ export const processPromptTemplate = (prompt, selectedText)=>{
+    return prompt.replace(/\{\{\s*SELECTED_TEXT\s*\}\}/g, selectedText || '');
+};
+/**
+ * 获取全屏的父元素
+ * @param target 全屏按钮
+ * @returns 全屏的父元素
+ */ export const getFullScreenWrap = (target)=>{
+    let parentElement = target.parentElement;
+    while(parentElement && !(parentElement === null || parentElement === void 0 ? void 0 : parentElement.classList.contains('full-screen-wrap'))){
+        parentElement = parentElement === null || parentElement === void 0 ? void 0 : parentElement.parentElement;
+    }
+    return parentElement;
+};