@blueking/ai-blueking 0.1.0 → 0.1.1-beta.2

package/README.md

@@ -1,14 +1,100 @@
-## AI 小鲸业务组件
+# AI 小鲸使用指南
 
-#### 安装
+## 安装
 
 ```bash
 npm i @blueking/ai-blueking
 ```
 
-#### 使用
+## stream 模式
 
-- vue3框架下使用
+不同框架，组件引入方式不同，具体可参考下面的的例子。这里使用 vue3 项目为例，来展示 stream 模式交互：
+
+```vue
+<template>
+  <AIBlueking
+    :loading="loading"
+    :messages="messages"
+    @clear="handleClear"
+    @send="handleSend"
+  />
+</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 '@blueking/ai-blueking/dist/vue3/style.css';
+
+  const loading = ref(false);
+  const messages = ref([]);
+
+  // 聊天开始
+  const handleStart = (id: number | string) => {
+    loading.value = true;
+    messages.value.push({
+      role: 'assistant',
+      content: '内容正在生成中...',
+      status: 'loading',
+    });
+  };
+
+  // 接收消息
+  const handleReceiveMessage = (message: string, id: number | string) => {
+    const currentMessage = messages.value.at(-1);
+    if (currentMessage.status === 'loading') {
+      // 如果是loading状态，直接覆盖
+      currentMessage.content = message;
+      currentMessage.status = 'success';
+    } else if (currentMessage.status === 'success') {
+      // 如果是后续消息，就追加消息
+      currentMessage.content += message;
+    }
+  };
+
+  // 聊天结束
+  const handleEnd = (id: number | string) => {
+    loading.value = false;
+    const currentMessage = messages.value.at(-1);
+    // loading 情况下终止
+    if (currentMessage.status === 'loading') {
+      currentMessage.content = '聊天内容已中断';
+    }
+  };
+
+  // 错误处理
+  const handleError = (message: string, code: string, id: number | string) => {
+    const currentMessage = messages.value.at(-1);
+    currentMessage.status = 'fail';
+    currentMessage.content = message;
+    loading.value = false;
+  };
+
+  const chatHelper = new ChatHelper('<接口地址>', handleStart, handleReceiveMessage, handleEnd, handleError);
+
+  // 清空消息
+  const handleClear = () => {
+    messages.value = [];
+  };
+
+  // 发送消息
+  const handleSend = (message: string) => {
+    // 添加一条消息
+    messages.value.push({
+      role: 'user',
+      content: message,
+    });
+    // ai 消息，id是唯一标识当前流，调用 chatHelper.stop 的时候需要传入
+    chatHelper.stream({
+      id: 1,
+      input: message,
+      chatHistory: messages.value,
+    });
+  };
+</script>
+```
+
+## vue3 项目内使用（非 stream 模式）
 
 ```vue
 <template>
@@ -40,33 +126,33 @@ npm i @blueking/ai-blueking
   const messages = [
     {
       content: '你好呀',
-      type: 'ai',
+      role: 'assistant',
     },
     {
       content: '1+1=?',
-      type: 'user',
+      role: 'user',
     },
     {
       content: '1+1=3',
-      type: 'ai',
+      role: 'assistant',
       status: 'error',
     },
     {
       content: '不对',
-      type: 'user',
+      role: 'user',
     },
     {
       content: '1+1=2',
-      type: 'ai',
+      role: 'assistant',
       status: 'loading',
     },
     {
       content: '对了',
-      type: 'user',
+      role: 'user',
     },
     {
       content: '好的，任务已完成',
-      type: 'ai',
+      role: 'assistant',
     },
   ];
   // 内置 prompt
@@ -129,9 +215,9 @@ npm i @blueking/ai-blueking
 </script>
 ```
 
-- vue2框架下使用
+## vue2 项目内使用（非 stream 模式）
 
-vue2 下，需要安装npm包，里面是vue3资源
+vue2 下，需要安装 npm 包，里面是 vue3 资源
 
 ```bash
 npm i @blueking/bkui-library
@@ -157,45 +243,48 @@ npm i @blueking/bkui-library
     />
   </div>
 </template>
-<script setup lang="ts">
+<script lang="ts">
   import { ref } from 'vue';
 
   import AIBlueking from '@blueking/ai-blueking/vue2';
   import '@blueking/ai-blueking/dist/vue2/style.css';
 
   export default {
+    components: {
+      AIBlueking,
+    },
     data() {
       return {
         messages: [
           {
             content: '你好呀',
-            type: 'ai',
+            role: 'assistant',
           },
           {
             content: '1+1=?',
-            type: 'user',
+            role: 'user',
           },
           {
             content: '1+1=3',
-            type: 'ai',
+            role: 'assistant',
             status: 'error',
           },
           {
             content: '不对',
-            type: 'user',
+            role: 'user',
           },
           {
             content: '1+1=2',
-            type: 'ai',
+            role: 'assistant',
             status: 'loading',
           },
           {
             content: '对了',
-            type: 'user',
+            role: 'user',
           },
           {
             content: '好的，任务已完成',
-            type: 'ai',
+            role: 'assistant',
           },
         ],
         prompts: [
@@ -229,7 +318,7 @@ npm i @blueking/bkui-library
         },
       };
     },
-    method: {
+    methods: {
       handleClear() {
         console.log('trigger clear');
       },