ai-chat-bot-interface 1.5.3 → 1.5.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ai-chat-bot-interface",
   "private": false,
-  "version": "1.5.3",
+  "version": "1.5.5",
   "type": "module",
   "main": "index.js",
   "description": "A AI chat bot interface. (private)",

package/src/App.vue

@@ -5,8 +5,8 @@ import ChatUi from './ChatUi.vue';
 <template>
   <div style="width: 100vw; height: 100vh">
     <chat-ui
-      bot-id="55555"
-      token="pat_888888888888"
+      bot-id="5555"
+      token="pat_888888"
       uid="262598"
       :def-msg="{ placeholder: '发消息...' }"
       :show-header="true"

package/src/ChatUi.vue

@@ -146,6 +146,7 @@
         :token="token"
         :tag-list="tagList"
         :def-msg="finalDefMsg"
+        :is-req="isReq"
         @send="chatConv"
         @tag="handleTagSel"
         @call="handleCall"
@@ -187,6 +188,7 @@ const chatOptions = computed(() => {
 });
 const conversationId = ref('');
 const isAnswering = ref(false);
+const isReq = ref('00');
 const historyList = ref([]);
 
 const msgObj = {
@@ -370,6 +372,7 @@ const createConv = async () => {
 };*/
 
 const chatConv = async (data) => {
+  isReq.value = '01';
   let isInCode = Array.isArray(data); //  data.hasOwnProperty('text') && data.hasOwnProperty('code');
   const botId = props.botId;
   if (!(!isAnswering.value && (inputText.value || isInCode))) {
@@ -426,6 +429,7 @@ const chatConv = async (data) => {
     }
   });
   historyList.value.push(uObj);
+  isReq.value = '02'
   const res = await fetch(
       `https://api.coze.cn/v3/chat?conversation_id=${conversationId.value}`,
       {
@@ -460,6 +464,7 @@ const chatConv = async (data) => {
         cache: 'default', // 默认缓存策略
       },
   );
+  isReq.value = '03';
   historyList.value.push({
     conversation_id: '',
     bot_id: '',
@@ -481,6 +486,7 @@ const chatConv = async (data) => {
     if (done) {
       console.log('Stream has ended.');
       isAnswering.value = false;
+      isReq.value = '00';
       historyList.value[idx].status = 'ended';
       scrollToEnd();
       break;
@@ -500,6 +506,7 @@ const chatConv = async (data) => {
         const strObj = JSON.parse(str);
         console.log('Received:', strObj);
         isAnswering.value = true;
+        isReq.value = '04';
         if (!historyList.value[idx].bot_id && strObj.bot_id) {
           historyList.value[idx].bot_id = strObj.bot_id;
         }

package/src/components/OperateModule.vue

@@ -61,7 +61,11 @@
           />
           <div class="btn_group">
             <div class="btn" @click.stop="sendMsg">
-              <send-icon :style="{ color: textValue ? '#039938' : '#ccc' }" />
+              <send-icon v-if="isReq === '00'" :style="{ color: textValue ? '#039938' : '#ccc' }" />
+              <send-loading-icon v-else
+                                 :bg="loadingBtnInfo.bg"
+                                 :color="loadingBtnInfo.color"
+              />
             </div>
           </div>
         </div>
@@ -113,6 +117,7 @@ import AddIcon from './icons/addIcon.vue';
 import CloseBorderIcon from './icons/closeBorderIcon.vue';
 import CloseIcon from './icons/CloseIcon.vue';
 import NewChat from './icons/newChat.vue';
+import SendLoadingIcon from "./icons/sendLoadingIcon.vue";
 const pdfIcon = 'https://prodstatic.weis1606.cn/api/smartFood/icon/pdf_icon.png';
 const extraList = [
   // { name: '相機', icon: CameraIcon, type: 'camera' },
@@ -147,6 +152,10 @@ const props = defineProps({
     type: Object,
     required: true,
   },
+  isReq:{
+    type: String,
+    default: '00'
+  }
 });
 const Emits = defineEmits(['update:modelValue', 'send', 'tag', 'call']);
 
@@ -166,6 +175,26 @@ watch(
   },
 );
 
+/*
+* 00： 初始值；
+* 01: 已传达；
+* 02: 已发送；
+* 03：已接收；
+* 04: 读取中；
+* */
+const loadingBtnInfo = computed(() => {
+  switch (props.isReq) {
+    case '01':
+        return { bg: '#fff', color: '#ccc'};
+    case '02':
+      return { bg: '#666', color: '#CDEBD7'};
+    case '03':
+      return { bg: '#ccc', color: '#fff'};
+    case '04':
+      return { bg: '#E5F4EB', color: '#fff'};
+  }
+})
+
 const textValue = computed({
   get: () => {
     return props.modelValue;

package/src/components/icons/sendLoadingIcon.vue

@@ -0,0 +1,35 @@
+<script setup>
+const props = defineProps({
+  color: {
+    type: String,
+    default: '#000'
+  },
+  bg: {
+    type: String,
+    default: '#039938'
+  }
+})
+</script>
+<template>
+
+  <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+       xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em">
+    <circle cx="512" cy="512" r="512" :fill='bg'/>
+    <path :fill="color" d="M512.042667 213.333333v74.666667a224 224 0 1 1-195.626667 114.773333l-65.194667-36.394666A298.666667 298.666667 0 1 0 512.042667 213.333333z"
+    >
+      <animateTransform
+          attributeName="transform"
+          type="rotate"
+          from="0 512 512"
+          to="360 512 512"
+          dur="1.5s"
+          repeatCount="indefinite"
+          fill="freeze"
+      />
+    </path>
+  </svg>
+</template>
+
+<style scoped>
+
+</style>