[Web] Support ChatGPT multi-information recording

core/datacap-web/console-fe/src/model/User.ts

@@ -11,6 +11,12 @@ export class UserQuestion
   type: string;
 }
 
+export class UserQuestionItem
+{
+  content: string;
+  isSelf: boolean;
+}
+
 export class ThirdConfigure
 {
   token = '';

core/datacap-web/console-fe/src/views/pages/profile/ProfileChatGPT.vue

@@ -12,9 +12,23 @@
       <div>
         <Layout>
           <Content style="padding: 24px 50px;">
-            <Input v-model="userQuestionResponse" :disabled="!userInfo?.thirdConfigure?.chatgpt?.token" type="textarea" :rows="10"/>
+            <div ref="scrollDiv" style="height: 300px; max-height: 300px; overflow: auto; background-color: #f5f7f9">
+              <List item-layout="vertical">
+                <ListItem v-for="item in userQuestionItems" :key="item">
+                  <ListItemMeta :description="item.content">
+                    <template #title>
+                      {{ item.isSelf ? username : 'ChatGPT'}}
+                    </template>
+                    <template #avatar>
+                      <Avatar v-if="item.isSelf" icon="ios-person"></Avatar>
+                      <Avatar v-else icon="md-ionitron" style="background-color: #87d068;"></Avatar>
+                    </template>
+                  </ListItemMeta>
+                </ListItem>
+              </List>
+            </div>
           </Content>
-          <Footer>
+          <Footer style="background-color: #FFFFFF;">
             <Row>
               <Col span="20">
                 <Input v-model="userQuestion.question" :disabled="!userInfo?.thirdConfigure?.chatgpt?.token" type="textarea" :autosize="{minRows: 2,maxRows: 5}"/>
@@ -50,15 +64,23 @@
 <script lang="ts">
 import {defineComponent} from 'vue';
 import UserService from "@/services/UserService";
-import {ThirdConfigure, User, UserQuestion} from '@/model/User';
+import {ThirdConfigure, User, UserQuestion, UserQuestionItem} from '@/model/User';
+import Common from "@/common/Common";
+import {AuthResponse} from "@/model/AuthResponse";
 
 const userQuestion = new UserQuestion();
 userQuestion.type = 'ChatGPT';
 export default defineComponent({
   setup()
   {
+    let username;
+    const authUser = JSON.parse(localStorage.getItem(Common.token) || '{}') as AuthResponse;
+    if (authUser) {
+      username = authUser.username;
+    }
     return {
-      userQuestion
+      userQuestion,
+      username
     }
   },
   created()
@@ -72,12 +94,13 @@ export default defineComponent({
       visibleModel: false,
       startChatLoading: false,
       userInfo: null as User,
-      userQuestionResponse: null
+      userQuestionItems: null as UserQuestionItem[]
     }
   },
   methods: {
     handlerInitialize()
     {
+      this.userQuestionItems = [];
       this.loading = true;
       UserService.getInfo()
         .then(response => {
@@ -118,11 +141,20 @@ export default defineComponent({
     },
     handlerStartChat()
     {
+      const question = new UserQuestionItem();
+      question.content = this.userQuestion.question;
+      question.isSelf = true;
+      this.userQuestionItems.push(question);
+      this.handlerGoBottom();
       this.startChatLoading = true;
       UserService.startChat(this.userQuestion)
         .then(response => {
           if (response.status) {
-            this.userQuestionResponse = response.data;
+            const answer = new UserQuestionItem();
+            answer.content = response.data.toString();
+            answer.isSelf = false;
+            this.userQuestionItems.push(answer);
+            this.handlerGoBottom();
           }
           else {
             this.$Message.error(response.message);
@@ -131,6 +163,13 @@ export default defineComponent({
         .finally(() => {
           this.startChatLoading = false;
         });
+    },
+    handlerGoBottom()
+    {
+      let scrollElem = this.$refs.scrollDiv;
+      setTimeout(() => {
+        scrollElem.scrollTo({top: scrollElem.scrollHeight, behavior: 'smooth'});
+      }, 0);
     }
   }
 });