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

package/README.md

@@ -17,6 +17,7 @@ npm i @blueking/ai-blueking
     :messages="messages"
     @clear="handleClear"
     @send="handleSend"
+    @stop="handleStop"
   />
 </template>
 
@@ -113,6 +114,11 @@ npm i @blueking/ai-blueking
       1,
     );
   };
+
+  // 暂停聊天
+  const handleStop = () => {
+    chatHelper.stop(1);
+  };
 </script>
 ```
 
@@ -120,63 +126,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 } 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',
+      time: '2024-08-07 14:29',
+      role: RoleType.Assistant,
       status: 'error',
     },
     {
       content: '不对',
-      role: 'user',
+      time: '2024-08-12 09:29',
+      role: RoleType.User,
     },
     {
       content: '1+1=2',
-      role: 'assistant',
+      time: '2024-08-12 09:31',
+      role: RoleType.Assistant,
       status: '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 +224,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 +236,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 +284,21 @@ 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"
+  />
 </template>
 <script lang="ts">
   import { ref } from 'vue';

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/index.d.ts

@@ -1,6 +1,7 @@
 import { RoleType } from './enum';
 export interface IMessage extends IChatHistory {
     status?: 'error' | 'loading' | 'success';
+    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;