add responding

ZhiShuYun · Oct 1, 2023 · 50e2da1 · 50e2da1
1 parent 814e6b5
commit 50e2da1
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 49 deletions.
diff --git a/src/components/chat/Message.vue b/src/components/chat/Message.vue
@@ -88,6 +88,7 @@ export default defineComponent({
   .content {
     border-radius: 10px;
     padding: 8px 15px;
+    max-width: 800px;
     // background-color: aqua;
   }
 }

diff --git a/src/pages/chat/Conversation.vue b/src/pages/chat/Conversation.vue
@@ -27,14 +27,16 @@ import {
   IChatResponse,
   API_ID_CHATGPT,
   applicationOperator,
-  IApplication
+  IApplication,
+  IChatMessageState
 } from '@/operators';
 import InputBox from '@/components/chat/InputBox.vue';
 import ModelSelector from '@/components/chat/ModelSelector.vue';
 import { chatOperator } from '@/operators';
 import { ERROR_CODE_CANCELED, ERROR_CODE_UNKNOWN } from '@/constants/errorCode';
 import axios from 'axios';
 import ApiStatus from '@/components/common/ApiStatus.vue';
+import { ROUTE_CHAT_CONVERSATION } from '@/router';
 
 export interface IData {
   messages: IChatMessage[];
@@ -61,48 +63,7 @@ export default defineComponent({
       initializing: false,
       applied: undefined,
       application: undefined,
-      messages: [
-        {
-          role: ROLE_USER,
-          content: 'hello'
-        },
-        {
-          role: ROLE_ASSISTANT,
-          content: '## ok \n\n hello, how can I assist you? \n ```python\nprint("hello")\n```'
-        },
-        {
-          role: ROLE_USER,
-          content: 'hello'
-        },
-        {
-          role: ROLE_ASSISTANT,
-          content: '## ok \n\n hello, how can I assist you? \n ```python\nprint("hello")\n```'
-        },
-        {
-          role: ROLE_USER,
-          content: 'hello'
-        },
-        {
-          role: ROLE_ASSISTANT,
-          content: '## ok \n\n hello, how can I assist you? \n ```python\nprint("hello")\n```'
-        },
-        {
-          role: ROLE_USER,
-          content: 'hello'
-        },
-        {
-          role: ROLE_ASSISTANT,
-          content: '## ok \n\n hello, how can I assist you? \n ```python\nprint("hello")\n```'
-        },
-        {
-          role: ROLE_USER,
-          content: 'hello'
-        },
-        {
-          role: ROLE_ASSISTANT,
-          content: '## ok \n\n hello, how can I assist you? \n ```python\nprint("hello")\n```'
-        }
-      ]
+      messages: []
     };
   },
   computed: {
@@ -111,6 +72,7 @@ export default defineComponent({
     }
   },
   mounted() {
+    console.log('mounted');
     this.onLoadModel();
   },
   methods: {
@@ -133,18 +95,23 @@ export default defineComponent({
         role: ROLE_USER
       });
       this.question = '';
+
       await this.onFetchAnswer();
     },
     async onFetchAnswer() {
       const token = this.application?.credential?.token;
       const endpoint = this.application?.api?.endpoint;
       const question = this.messages[this.messages.length - 1].content;
-      console.log('q', question);
       if (!token || !endpoint || !question) {
         console.error('no token or endpoint or question');
         return;
       }
-      console.log('token', token);
+      this.messages.push({
+        content: '',
+        role: ROLE_ASSISTANT,
+        state: IChatMessageState.PENDING
+      });
+      // request server to get answer
       chatOperator
         .request(
           {
@@ -156,13 +123,24 @@ export default defineComponent({
             token,
             endpoint,
             stream: (response: IChatResponse) => {
-              console.log('response', response);
+              this.messages[this.messages.length - 1].content = response.answer;
+              if (!this.conversationId) {
+                this.$router.push({
+                  name: ROUTE_CHAT_CONVERSATION,
+                  params: {
+                    id: response.conversation_id
+                  }
+                });
+              }
             }
           }
         )
+        .then(() => {
+          this.messages[this.messages.length - 1].state = IChatMessageState.FINISHED;
+        })
         .catch((error) => {
           if (this.messages && this.messages.length > 0) {
-            this.messages[this.messages.length - 1].state = ChatMessageState.FAILED;
+            this.messages[this.messages.length - 1].state = IChatMessageState.FAILED;
           }
           if (axios.isCancel(error)) {
             this.messages[this.messages.length - 1].error = {
@@ -181,7 +159,6 @@ export default defineComponent({
             }
           }
         });
-      // console.log('this.response', response);
     }
   }
 });
@@ -200,6 +177,11 @@ export default defineComponent({
     width: 100%;
     overflow-y: scroll;
     padding: 15px 0;
+    .messages {
+      .message {
+        margin-bottom: 15px;
+      }
+    }
   }
   .bottom {
     width: 100%;

diff --git a/src/router/chat.ts b/src/router/chat.ts
@@ -1,4 +1,10 @@
-import { ROUTE_AUTH_CALLBACK, ROUTE_AUTH_LOGIN, ROUTE_CHAT_CONVERSATION, ROUTE_CHAT_INDEX } from './constants';
+import {
+  ROUTE_AUTH_CALLBACK,
+  ROUTE_AUTH_LOGIN,
+  ROUTE_CHAT_CONVERSATION,
+  ROUTE_CHAT_CONVERSATION_NEW,
+  ROUTE_CHAT_INDEX
+} from './constants';
 
 export default {
   path: '/chat',
@@ -9,6 +15,11 @@ export default {
       name: ROUTE_CHAT_INDEX,
       component: () => import('@/pages/chat/Index.vue')
     },
+    {
+      path: 'conversation',
+      name: ROUTE_CHAT_CONVERSATION_NEW,
+      component: () => import('@/pages/chat/Conversation.vue')
+    },
     {
       path: 'conversation/:id',
       name: ROUTE_CHAT_CONVERSATION,

diff --git a/src/router/constants.ts b/src/router/constants.ts
@@ -5,6 +5,7 @@ export const ROUTE_AUTH_CALLBACK = 'auth-callback';
 
 export const ROUTE_CHAT_INDEX = 'chat-index';
 export const ROUTE_CHAT_CONVERSATION = 'chat-conversation';
+export const ROUTE_CHAT_CONVERSATION_NEW = 'chat-conversation-new';
 
 export const ROUTE_PAINT_INDEX = 'paint-index';
 export const ROUTE_PAINT_HISTORY = 'paint-history';