finish edit chat

change/@acedatacloud-nexior-844d84c0-8975-4ee8-a722-0aa345d61351.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "add edit chat",
+  "packageName": "@acedatacloud/nexior",
+  "email": "1348977728@qq.com",
+  "dependentChangeType": "patch"
+}

src/components/chat/Message.vue

@@ -109,10 +109,6 @@ export default defineComponent({
     ElInput
   },
   props: {
-    question: {
-      type: String,
-      required: true
-    },
     message: {
       type: Object as () => IChatMessage,
       required: true
@@ -122,7 +118,7 @@ export default defineComponent({
       required: true
     }
   },
-  emits: ['stop', 'update:question', 'submit'],
+  emits: ['stop', 'update:messages', 'edit'],
   data(): IData {
     return {
       copied: false,
@@ -160,20 +156,12 @@ export default defineComponent({
       return this.message.role === ROLE_ASSISTANT && this.message.error?.code === ERROR_CODE_USED_UP;
     }
   },
-  watch: {
-    questionValue(val: string) {
-      this.$emit('update:question', val);
-    },
-    question(val: string) {
-      if (val !== this.questionValue) {
-        this.questionValue = val;
-      }
-    }
-  },
+  watch: {},
   methods: {
     startEditing() {
       this.isEditing = true;
       this.questionValue = this.message.content as string;
+      console.debug('start to get answer', this.message);
     },
     cancelEdit() {
       this.isEditing = false;
@@ -184,10 +172,7 @@ export default defineComponent({
       this.onSubmit();
     },
     onSubmit() {
-      if (!this.question) {
-        return;
-      }
-      this.$emit('submit');
+      this.$emit('edit', this.message, this.questionValue);
     },
     onCopy() {
       copy(this.message.content!.toString(), {

src/models/chat.ts

@@ -46,13 +46,13 @@ export interface IChatMessage {
 }
 
 export interface IChatConversation {
-  id: string;
-  messages: IChatMessage[];
+  id?: string;
+  messages?: IChatMessage[];
   title?: string;
   deleting?: boolean;
   editing?: boolean;
   new?: boolean;
-  updated_at: number;
+  updated_at?: number;
 }
 
 export interface IChatConversationOptions {

src/pages/chat/Conversation.vue

@@ -16,11 +16,13 @@
             v-for="(message, messageIndex) in messages"
             :key="messageIndex"
             :message="message"
+            :messages="messages"
             :question="question"
             :application="application"
             class="message"
             @update:question="question = $event"
-            @submit="onSubmit"
+            @update:messages="messages = $event"
+            @edit="onEdit"
           />
         </div>
       </div>
@@ -157,6 +159,80 @@ export default defineComponent({
       this.question = question;
       this.onSubmit();
     },
+    async onEdit(targetMessage: IChatMessage, questionValue: string) {
+      // 1. Clear the following message
+      const targetIndex = this.messages.findIndex((message) => message === targetMessage);
+      if (targetIndex !== -1) {
+        this.messages = this.messages.slice(0, targetIndex);
+      }
+      this.question = questionValue;
+      // 2. Update the messages
+      const token = this.credential?.token;
+      // reset question and references
+      if (!token) {
+        console.error('no token or endpoint or question');
+        this.messages.push({
+          error: {
+            code: ERROR_CODE_NOT_APPLIED
+          },
+          role: ROLE_ASSISTANT,
+          state: IChatMessageState.FAILED
+        });
+        return;
+      }
+      let conversationId = this.conversationId;
+      chatOperator
+        .updateConversation(
+          {
+            id: this.conversationId,
+            messages: this.messages
+          },
+          {
+            token
+          }
+        )
+        .then(async () => {
+          await this.$store.dispatch('chat/setConversation', {
+            id: conversationId,
+            messages: this.messages
+          });
+          // 3. Send edited questions
+
+          this.messages.push({
+            content: this.question,
+            role: ROLE_USER
+          });
+          console.debug('onEdit', this.question);
+          await this.onFetchAnswer();
+        })
+        .catch((error) => {
+          if (this.messages && this.messages.length > 0) {
+            this.messages[this.messages.length - 1].state = IChatMessageState.FAILED;
+          }
+          console.error(error);
+          if (axios.isCancel(error)) {
+            this.messages[this.messages.length - 1].error = {
+              code: ERROR_CODE_CANCELED
+            };
+          } else if (error?.response?.data) {
+            let data = error?.response?.data;
+            if (isJSONString(data)) {
+              data = JSON.parse(data);
+            }
+            console.debug('error', data);
+            if (this.messages && this.messages.length > 0) {
+              this.messages[this.messages.length - 1].error = data.error;
+            }
+          } else {
+            if (this.messages && this.messages.length > 0) {
+              this.messages[this.messages.length - 1].error = {
+                code: ERROR_CODE_UNKNOWN
+              };
+            }
+          }
+          this.answering = false;
+        });
+    },
     async onCreateNewConversation() {
       await this.$router.push({
         name: ROUTE_CHAT_CONVERSATION_NEW
@@ -194,6 +270,7 @@ export default defineComponent({
       console.debug('onSubmit', this.question, this.references);
       await this.onFetchAnswer();
     },
+    // Swipe the message to the bottom
     async onScrollDown() {
       setTimeout(() => {
         const container = document.querySelector('.dialogue') as HTMLDivElement;
@@ -203,6 +280,7 @@ export default defineComponent({
         container.scrollTop = container?.scrollHeight;
       }, 0);
     },
+    // Get answers to questions
     async onFetchAnswer() {
       const token = this.credential?.token;
       const question = this.question;