@blueking/ai-blueking 0.1.7 → 0.2.0-beta.10

package/README.md

@@ -17,13 +17,13 @@ npm i @blueking/ai-blueking
     :messages="messages"
     @clear="handleClear"
     @send="handleSend"
+    @stop="handleStop"
   />
 </template>
 
 <script lang="ts" setup>
   import { ref } from 'vue';
-  import AIBlueking from '@blueking/ai-blueking';
-  import { ChatHelper } from '@blueking/ai-blueking/dist/chat-helper';
+  import AIBlueking, { ChatHelper, RoleType, MessageStatus } from '@blueking/ai-blueking';
   import '@blueking/ai-blueking/dist/vue3/style.css';
 
   const loading = ref(false);
@@ -33,20 +33,20 @@ npm i @blueking/ai-blueking
   const handleStart = (id: number | string) => {
     loading.value = true;
     messages.value.push({
-      role: 'assistant',
+      role: RoleType.Assistant,
       content: '内容正在生成中...',
-      status: 'loading',
+      status: MessageStatus.Loading,
     });
   };
 
   // 接收消息
   const handleReceiveMessage = (message: string, id: number | string) => {
     const currentMessage = messages.value.at(-1);
-    if (currentMessage.status === 'loading') {
+    if (currentMessage.status === MessageStatus.Loading) {
       // 如果是loading状态，直接覆盖
       currentMessage.content = message;
-      currentMessage.status = 'success';
-    } else if (currentMessage.status === 'success') {
+      currentMessage.status = MessageStatus.Success;
+    } else if (currentMessage.status === MessageStatus.Success) {
       // 如果是后续消息，就追加消息
       currentMessage.content += message;
     }
@@ -57,13 +57,14 @@ npm i @blueking/ai-blueking
     loading.value = false;
     const currentMessage = messages.value.at(-1);
     // loading 情况下终止
-    if (currentMessage.status === 'loading') {
+    if (currentMessage.status === MessageStatus.Loading) {
       currentMessage.content = '聊天内容已中断';
+      currentMessage.status = MessageStatus.Error;
     }
   };
 
   // 错误处理
-  const handleError = (message: string, code: string, id: number | string) => {
+  const handleError = (message: string, code: string | number, id: number | string) => {
     if (message.includes('user authentication failed')) {
       // 未登录，跳转登录
       const loginUrl = new URL(process.env.BK_LOGIN_URL);
@@ -72,13 +73,12 @@ npm i @blueking/ai-blueking
     } else {
       // 处理错误消息
       const currentMessage = messages.value.at(-1);
-      currentMessage.status = 'error';
+      currentMessage.status = MessageStatus.Error;
       currentMessage.content = message;
       loading.value = false;
     }
   };
 
-  // 需要将 <网关名> 替换成插件部署后生成的网关名
   const prefix = process.env.BK_API_URL_TMPL.replace('{api_name}', '<网关名>').replace('http', 'https');
   const chatHelper = new ChatHelper(
     `${prefix}/prod/bk_plugin/plugin_api/assistant/`,
@@ -113,6 +113,11 @@ npm i @blueking/ai-blueking
       1,
     );
   };
+
+  // 暂停聊天
+  const handleStop = () => {
+    chatHelper.stop(1);
+  };
 </script>
 ```
 
@@ -120,63 +125,67 @@ npm i @blueking/ai-blueking
 
 ```vue
 <template>
-  <div class="app">
-    <AIBlueking
-      :background="background"
-      :head-background="headBackground"
-      :loading="loading"
-      :messages="messages"
-      :position-limit="positionLimit"
-      :prompts="prompts"
-      :size-limit="sizeLimit"
-      :start-position="startPosition"
-      @choose-prompt="handleChoosePrompt"
-      @clear="handleClear"
-      @close="handleClose"
-      @send="handleSend"
-      @scroll="handleScroll"
-    />
-  </div>
+  <AIBlueking
+    :background="background"
+    :head-background="headBackground"
+    :loading="loading"
+    :messages="messages"
+    :position-limit="positionLimit"
+    :prompts="prompts"
+    :scroll-loading="scrollLoading"
+    :scroll-loading-end="scrollLoadingEnd"
+    :size-limit="sizeLimit"
+    :start-position="startPosition"
+    @choose-prompt="handleChoosePrompt"
+    @clear="handleClear"
+    @close="handleClose"
+    @scroll-load="handleScrollLoad"
+    @send="handleSend"
+    @stop="handleStop"
+  />
 </template>
 <script setup lang="ts">
   import { ref } from 'vue';
 
-  import AIBlueking from '@blueking/ai-blueking';
+  import AIBlueking, { type IPrompt, type IMessage, RoleType, MessageStatus } from '@blueking/ai-blueking';
+
   import '@blueking/ai-blueking/dist/vue3/style.css';
 
-  // 展示的消息
-  const messages = [
-    {
-      content: '你好呀',
-      role: 'assistant',
-    },
+  // 展示的消息，其中 time 可以不传
+  const messages = ref<IMessage[]>([
     {
       content: '1+1=?',
-      role: 'user',
+      time: '2023-08-12 10:28',
+      role: RoleType.User,
     },
     {
       content: '1+1=3',
-      role: 'assistant',
-      status: 'error',
+      time: '2024-08-07 14:29',
+      role: RoleType.Assistant,
+      status: MessageStatus.Error,
     },
     {
       content: '不对',
-      role: 'user',
+      time: '2024-08-12 09:29',
+      role: RoleType.User,
     },
     {
       content: '1+1=2',
-      role: 'assistant',
-      status: 'loading',
+      time: '2024-08-12 09:31',
+      role: RoleType.Assistant,
+      status: MessageStatus.Loading,
     },
     {
       content: '对了',
-      role: 'user',
+      time: '2024-08-13 10:20',
+      role: RoleType.User,
     },
     {
       content: '好的，任务已完成',
-      role: 'assistant',
+      time: '2024-08-13 10:23',
+      role: RoleType.Assistant,
     },
-  ];
+  ]);
   // 内置 prompt
   const prompts = [
     {
@@ -214,6 +223,9 @@ npm i @blueking/ai-blueking
     left: window.innerWidth - 400,
     right: 0,
   };
+  // 向上滚动加载
+  const scrollLoading = ref(false);
+  const scrollLoadingEnd = ref(false);
 
   const handleClear = () => {
     console.log('trigger clear');
@@ -223,15 +235,39 @@ npm i @blueking/ai-blueking
     console.log('trigger send', val);
   };
 
-  const handleScroll = (event: Event) => {
-    console.log('trigger scroll', event);
+  const handleStop = () => {
+    console.log('trigger stop');
+  };
+
+  const handleScrollLoad = () => {
+    scrollLoading.value = true;
+    setTimeout(() => {
+      // 模拟异步请求
+      messages.value.unshift(
+        ...[
+          {
+            content: '1+1=?',
+            time: '2023-08-12 9:28',
+            role: RoleType.User,
+          },
+          {
+            content: '2',
+            time: '2023-08-12 9:30',
+            role: RoleType.Assistant,
+          },
+        ],
+      );
+      // 设置状态
+      scrollLoading.value = false;
+      scrollLoadingEnd.value = true;
+    }, 1000);
   };
 
   const handleClose = () => {
     console.log('trigger close');
   };
 
-  const handleChoosePrompt = prompt => {
+  const handleChoosePrompt = (prompt: IPrompt) => {
     console.log('choose prompt', prompt);
   };
 </script>
@@ -247,23 +283,22 @@ npm i @blueking/bkui-library
 
 ```vue
 <template>
-  <div class="app">
-    <AIBlueking
-      :background="background"
-      :head-background="headBackground"
-      :loading="loading"
-      :messages="messages"
-      :position-limit="positionLimit"
-      :prompts="prompts"
-      :size-limit="sizeLimit"
-      :start-position="startPosition"
-      @choose-prompt="handleChoosePrompt"
-      @clear="handleClear"
-      @close="handleClose"
-      @send="handleSend"
-      @scroll="handleScroll"
-    />
-  </div>
+  <AIBlueking
+    :background="background"
+    :head-background="headBackground"
+    :loading="loading"
+    :messages="messages"
+    :position-limit="positionLimit"
+    :prompts="prompts"
+    :size-limit="sizeLimit"
+    :start-position="startPosition"
+    @choose-prompt="handleChoosePrompt"
+    @clear="handleClear"
+    @close="handleClose"
+    @send="handleSend"
+    @scroll="handleScroll"
+    @stop="handleStop"
+  />
 </template>
 <script lang="ts">
   import { ref } from 'vue';
@@ -356,6 +391,9 @@ npm i @blueking/bkui-library
       handleScroll(event: Event) {
         console.log('trigger scroll', event);
       },
+      handleStop() {
+        console.log('trigger stop');
+      },
     },
   };
 </script>

package/dist/ai-blueking.vue.d.ts

@@ -10,12 +10,15 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<{
     startPosition?: IStartPosition | undefined;
     userPhoto?: string | undefined;
     logo?: string | undefined;
+    scrollLoading?: boolean | undefined;
+    scrollLoadingEnd?: boolean | undefined;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => void;
+    stop: () => void;
     clear: () => void;
+    "scroll-load": () => void;
     send: (val: string) => void;
     "choose-prompt": (prompt: IPrompt) => void;
-    scroll: (data: Event) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
     messages: IMessage[];
     prompts?: IPrompt[] | undefined;
@@ -27,11 +30,14 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<{
     startPosition?: IStartPosition | undefined;
     userPhoto?: string | undefined;
     logo?: string | undefined;
+    scrollLoading?: boolean | undefined;
+    scrollLoadingEnd?: boolean | undefined;
 }>>> & {
-    onScroll?: ((data: Event) => any) | undefined;
     "onChoose-prompt"?: ((prompt: IPrompt) => any) | undefined;
     onClear?: (() => any) | undefined;
+    onStop?: (() => any) | undefined;
     onSend?: ((val: string) => any) | undefined;
+    "onScroll-load"?: (() => any) | undefined;
     onClose?: (() => any) | undefined;
 }, {}, {}>;
 export default _default;

package/dist/components/render-content.vue.d.ts

@@ -5,26 +5,35 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     loading?: boolean | undefined;
     background?: string | undefined;
     userPhoto?: string | undefined;
+    scrollLoading?: boolean | undefined;
+    scrollLoadingEnd?: boolean | undefined;
 }>, {
     background: string;
+    scrollLoadingEnd: boolean;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     send: (userInput: string) => void;
     "choose-prompt": (prompt: IPrompt) => void;
-    scroll: (data: Event) => void;
+    stop: () => void;
+    "scroll-load": () => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
     messages: IMessage[];
     prompts?: IPrompt[] | undefined;
     loading?: boolean | undefined;
     background?: string | undefined;
     userPhoto?: string | undefined;
+    scrollLoading?: boolean | undefined;
+    scrollLoadingEnd?: boolean | undefined;
 }>, {
     background: string;
+    scrollLoadingEnd: boolean;
 }>>> & {
-    onScroll?: ((data: Event) => any) | undefined;
     "onChoose-prompt"?: ((prompt: IPrompt) => any) | undefined;
+    onStop?: (() => any) | undefined;
     onSend?: ((userInput: string) => any) | undefined;
+    "onScroll-load"?: (() => any) | undefined;
 }, {
     background: string;
+    scrollLoadingEnd: boolean;
 }, {}>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {

package/dist/components/render-stop.vue.d.ts

@@ -1,2 +1,19 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<{
+    isShow?: boolean | undefined;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    stop: () => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
+    isShow?: boolean | undefined;
+}>>> & {
+    onStop?: (() => any) | undefined;
+}, {}, {}>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/components/render-time.vue.d.ts

@@ -0,0 +1,16 @@
+import type { IMessage } from '../types';
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<{
+    message: IMessage;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
+    message: IMessage;
+}>>>, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/lang/index.d.ts

@@ -9,5 +9,18 @@ export declare const langData: {
     readonly 发送: "Send";
     readonly '\u60A8\u53EF\u4EE5\u952E\u5165 \u201C/\u201D \u67E5\u770B\u66F4\u591APrompt': "You can type \"/\" to see more Prompts";
     readonly 请输入: "Please input";
+    readonly 返回最新: "Scroll to bottom";
+    readonly 终止生成: "Stop";
+    readonly 向上滚动加载更多记录: "Scroll up to load more records";
+    readonly 日: "sunday";
+    readonly 一: "monday";
+    readonly 二: "tuesday";
+    readonly 三: "wednesday";
+    readonly 四: "thursday";
+    readonly 五: "friday";
+    readonly 六: "saturday";
+    readonly 昨天: "yesterday";
+    readonly 本周: "this week";
+    readonly 上周: "last week";
 };
-export declare const t: (key: keyof typeof langData) => "BK GPT" | "shrink down" | "expand upward" | "Empty chat records" | "close" | "The content is being executed, please enter it again after the execution is completed." | "Send" | "You can type \"/\" to see more Prompts" | "Please input" | "小鲸" | "向下收缩" | "向上扩展" | "清空聊天记录" | "关闭" | "内容正在执行中，请执行完成后再输入" | "发送" | "您可以键入 “/” 查看更多Prompt" | "请输入";
+export declare const t: (key: keyof typeof langData) => "BK GPT" | "shrink down" | "expand upward" | "Empty chat records" | "close" | "The content is being executed, please enter it again after the execution is completed." | "Send" | "You can type \"/\" to see more Prompts" | "Please input" | "Scroll to bottom" | "Stop" | "Scroll up to load more records" | "sunday" | "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday" | "yesterday" | "this week" | "last week" | "小鲸" | "向下收缩" | "向上扩展" | "清空聊天记录" | "关闭" | "内容正在执行中，请执行完成后再输入" | "发送" | "您可以键入 “/” 查看更多Prompt" | "请输入" | "返回最新" | "终止生成" | "向上滚动加载更多记录" | "日" | "一" | "二" | "三" | "四" | "五" | "六" | "昨天" | "本周" | "上周";

package/dist/types/enum.d.ts

@@ -7,3 +7,8 @@ export declare enum RoleType {
     System = "system",
     User = "user"
 }
+export declare enum MessageStatus {
+    Error = "error",
+    Loading = "loading",
+    Success = "success"
+}

package/dist/types/index.d.ts

@@ -1,6 +1,7 @@
-import { RoleType } from './enum';
+import { RoleType, MessageStatus } from './enum';
 export interface IMessage extends IChatHistory {
-    status?: 'error' | 'loading' | 'success';
+    status?: MessageStatus;
+    time?: number | string;
 }
 export interface IPrompt {
     id: number | string;

package/dist/util/index.d.ts

@@ -9,3 +9,10 @@ export declare const getCookieByName: (name: string) => string;
  * @returns
  */
 export declare const isJSON: (str: string) => boolean;
+/**
+ * 节流，每隔一段时间执行
+ * @param {*} fn 需要执行的函数
+ * @param {*} delay 延迟时间，默认200
+ * @returns
+ */
+export declare const throttle: <T>(fn: (t: T) => void, delay?: number) => (t: T) => false | undefined;