fit chat stop (#117)

AceDataCloud · Aug 17, 2024 · 31cd892 · 31cd892
1 parent d3d46b5
commit 31cd892
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 7 deletions.
diff --git a/change/@acedatacloud-nexior-5c49200e-bbf8-47cd-bf15-0dae2df64510.json b/change/@acedatacloud-nexior-5c49200e-bbf8-47cd-bf15-0dae2df64510.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "add chat stop",
+  "packageName": "@acedatacloud/nexior",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/src/components/chat/InputBox.vue b/src/components/chat/InputBox.vue
@@ -23,6 +23,7 @@
       </el-tooltip>
     </el-upload>
     <span
+      v-show="!disabled"
       :class="{
         btn: true,
         'btn-send': true,
@@ -32,6 +33,17 @@
     >
       <font-awesome-icon icon="fa-solid fa-location-arrow" class="icon icon-send" />
     </span>
+    <span
+      v-show="disabled"
+      :class="{
+        btn: true,
+        'btn-stop': true,
+        disabled: !disabled
+      }"
+      @click="onStop"
+    >
+      <font-awesome-icon icon="fa-solid fa-stop-circle" class="icon icon-stop" />
+    </span>
     <!-- add this textarea -->
     <textarea
       ref="textarea"
@@ -80,7 +92,7 @@ export default defineComponent({
       required: true
     }
   },
-  emits: ['update:question', 'update:references', 'submit'],
+  emits: ['update:question', 'update:references', 'submit', 'stop'],
   data() {
     return {
       inputHeight: '35px', //add inputHeight
@@ -143,6 +155,9 @@ export default defineComponent({
       }
       this.$emit('submit');
     },
+    onStop() {
+      this.$emit('stop');
+    },
     onExceed() {
       ElMessage.warning(this.$t('chat.message.uploadReferencesExceed'));
     },
@@ -246,6 +261,19 @@ textarea.input:focus {
         color: var(--el-text-color-primary);
       }
     }
+    &.btn-stop {
+      right: 15px; // Adjust position if needed
+      &.disabled {
+        .icon-stop {
+          color: var(--el-text-color-disabled);
+        }
+        cursor: not-allowed;
+      }
+      .icon-stop {
+        font-size: 16px;
+        color: var(--el-text-color-primary);
+      }
+    }
   }
 }
 

diff --git a/src/components/chat/Message.vue b/src/components/chat/Message.vue
@@ -56,14 +56,17 @@
       </div>
       <div class="operations">
         <copy-to-clipboard
-          v-if="!Array.isArray(message.content) && message.state === messageState.FINISHED"
+          v-if="
+            !Array.isArray(message.content) &&
+            (message.state === messageState.FINISHED || message.state === messageState.FAILED)
+          "
           :content="message.content!"
           class="btn-copy"
         />
         <restart-to-generate
           v-if="
             !Array.isArray(message.content) &&
-            message.state === messageState.FINISHED &&
+            (message.state === messageState.FINISHED || message.state === messageState.FAILED) &&
             message.role === 'assistant' &&
             message === messages[messages.length - 1]
           "
@@ -99,6 +102,7 @@ import {
   ERROR_CODE_TOO_MANY_REQUESTS,
   ERROR_CODE_UNKNOWN,
   ERROR_CODE_USED_UP,
+  ERROR_CODE_CANCELED,
   ROLE_ASSISTANT
 } from '@/constants';
 import { ROUTE_CONSOLE_APPLICATION_EXTRA } from '@/router';
@@ -168,6 +172,8 @@ export default defineComponent({
           return this.$t('chat.message.errorContentTooLarge');
         case ERROR_CODE_NOT_APPLIED:
           return this.$t('chat.message.errorNotApplied');
+        case ERROR_CODE_CANCELED:
+          return undefined; // 不显示错误框
         case ERROR_CODE_UNKNOWN:
         default:
           return this.$t('chat.message.errorUnknown');

diff --git a/src/models/chat.ts b/src/models/chat.ts
@@ -58,6 +58,7 @@ export interface IChatConversation {
 export interface IChatConversationOptions {
   stream?: (response: IChatConversationResponse) => void;
   token: string;
+  signal?: AbortController['signal'];
 }
 
 export interface IChatConversationRequest {

diff --git a/src/operators/chat.ts b/src/operators/chat.ts
@@ -21,6 +21,7 @@ class ChatOperator {
         'content-type': 'application/json'
       },
       baseURL: BASE_URL_API,
+      signal: options.signal,
       responseType: 'stream',
       onDownloadProgress: ({ event }: AxiosProgressEvent) => {
         const response = event.target.response;
@@ -134,7 +135,8 @@ class ChatOperator {
           authorization: `Bearer ${options.token}`,
           'x-record-exempt': 'true'
         },
-        baseURL: BASE_URL_API
+        baseURL: BASE_URL_API,
+        signal: options.signal
       }
     );
   }

diff --git a/src/pages/chat/Conversation.vue b/src/pages/chat/Conversation.vue
@@ -35,6 +35,7 @@
           @update:question="question = $event"
           @update:references="references = $event"
           @submit="onSubmit"
+          @stop="onStop"
         />
       </div>
     </template>
@@ -64,6 +65,7 @@ export interface IData {
   references: string[];
   answering: boolean;
   messages: IChatMessage[];
+  canceler: AbortController | undefined;
 }
 
 export default defineComponent({
@@ -82,6 +84,7 @@ export default defineComponent({
       question: '',
       references: [],
       answering: false,
+      canceler: undefined,
       messages:
         this.$store.state.chat.conversations?.find(
           (conversation: IChatConversation) => conversation.id === this.$route.params.id?.toString()
@@ -161,6 +164,12 @@ export default defineComponent({
       this.question = question;
       this.onSubmit();
     },
+    async onStop() {
+      if (this.canceler) {
+        this.canceler.abort();
+        this.answering = false; // 更新状态
+      }
+    },
     async onRestart(targetMessage: IChatMessage) {
       // 1. Clear the following message
       const targetIndex = this.messages.findIndex((message) => message === targetMessage);
@@ -190,6 +199,7 @@ export default defineComponent({
         return;
       }
       let conversationId = this.conversationId;
+      this.canceler = new AbortController();
       chatOperator
         .updateConversation(
           {
@@ -198,7 +208,8 @@ export default defineComponent({
             messages: update_messages
           },
           {
-            token
+            token,
+            signal: this.canceler.signal
           }
         )
         .then(async () => {
@@ -392,6 +403,7 @@ export default defineComponent({
       this.onScrollDown();
       // request server to get answer
       this.answering = true;
+      this.canceler = new AbortController();
       chatOperator
         .chatConversation(
           {
@@ -412,7 +424,8 @@ export default defineComponent({
               };
               conversationId = response?.id;
               this.onScrollDown();
-            }
+            },
+            signal: this.canceler.signal
           }
         )
         .then(async () => {
@@ -422,7 +435,6 @@ export default defineComponent({
             id: conversationId,
             messages: this.messages
           });
-          console.log('messages', JSON.stringify(this.messages));
           this.answering = false;
           if (!this.conversationId) {
             await this.$router.push({

diff --git a/src/plugins/font-awesome.ts b/src/plugins/font-awesome.ts
@@ -10,6 +10,7 @@ import {
 } from '@fortawesome/free-regular-svg-icons';
 import { faDiscord as faBrandsDiscord, faWeixin as faBrandsWeixin } from '@fortawesome/free-brands-svg-icons';
 import {
+  faStopCircle as faSolidStopCircle,
   faPlayCircle as faSolidPlayCircle,
   faDownload as faSolidDownload,
   faFilm as faSolidFilm,
@@ -76,6 +77,7 @@ import {
   faAngleDown as faSolidAngleDown
 } from '@fortawesome/free-solid-svg-icons';
 // add icons
+library.add(faSolidStopCircle);
 library.add(faSolidPlayCircle);
 library.add(faSolidFilm);
 library.add(faSolidMusic);