From 14541a41458209fc7e195d6c523032d35cd84c46 Mon Sep 17 00:00:00 2001
From: Germey <cqc@cuiqingcai.com>
Date: Sat, 30 Dec 2023 23:06:20 +0800
Subject: [PATCH] fix bugs

---
 src/components/chat/ModelSelector.vue | 71 ++++++++++-----------
 src/components/chat/SidePanel.vue     |  7 +-
 src/components/common/Navigator.vue   |  3 +-
 src/pages/chat/Conversation.vue       | 92 ++++++++++++++++-----------
 src/pages/midjourney/History.vue      | 13 +---
 src/router/chat.ts                    |  7 +-
 src/router/constants.ts               |  1 +
 src/store/chat/actions.ts             | 20 ++++++
 src/store/chat/models.ts              |  3 +-
 src/store/chat/mutations.ts           |  7 +-
 src/store/chat/persist.ts             |  2 +-
 src/store/chat/state.ts               |  2 +
 12 files changed, 134 insertions(+), 94 deletions(-)

diff --git a/src/components/chat/ModelSelector.vue b/src/components/chat/ModelSelector.vue
index f4f61f6..0dbd7a8 100644
--- a/src/components/chat/ModelSelector.vue
+++ b/src/components/chat/ModelSelector.vue
@@ -4,7 +4,7 @@
       <el-button :class="{ group: true, active: group.value === activeGroup }" @click="onSwitchGroup(group)">
         <font-awesome-icon :icon="group.icon" :class="'icon ' + group.value" />
         <span v-if="group.value === activeGroup">
-          {{ value.displayName }}
+          {{ model.displayName }}
         </span>
         <span v-else>
           {{ group.label }}
@@ -14,13 +14,13 @@
       <template #dropdown>
         <el-dropdown-menu class="menu">
           <el-dropdown-item
-            v-for="(model, modelIndex) in group.options"
-            :key="modelIndex"
-            :command="model"
+            v-for="(groupModel, groupModelIndex) in group.options"
+            :key="groupModelIndex"
+            :command="groupModel"
             class="option"
           >
             <font-awesome-icon :icon="group.icon" :class="'icon ' + group.value" />
-            {{ model.displayName }}
+            {{ groupModel.displayName }}
           </el-dropdown-item>
         </el-dropdown-menu>
       </template>
@@ -41,6 +41,21 @@ import {
 } from '@/operators/chat/constants';
 import { IChatModel } from '@/operators';
 
+const GROUPS = [
+  {
+    label: '3.5',
+    value: 'base',
+    icon: 'fa-solid fa-bolt',
+    options: [CHAT_MODEL_CHATGPT, CHAT_MODEL_CHATGPT_16K, CHAT_MODEL_CHATGPT_BROWSING]
+  },
+  {
+    label: '4.0',
+    value: 'plus',
+    icon: 'fa-solid fa-wand-magic-sparkles',
+    options: [CHAT_MODEL_CHATGPT4, CHAT_MODEL_CHATGPT4_BROWSING]
+  }
+];
+
 export default defineComponent({
   name: 'ModelSelector',
   components: {
@@ -49,38 +64,23 @@ export default defineComponent({
     ElDropdownItem,
     FontAwesomeIcon
   },
-  props: {
-    modelValue: {
-      type: Object as () => IChatModel,
-      required: true
-    }
-  },
   emits: ['update:modelValue', 'select'],
   data() {
+    // find active group according to model
+    const model = this.$store.state.chat.model;
+    const activeGroup = GROUPS.find((group) => {
+      return group.options.find((option: IChatModel) => {
+        return option.name === model.name;
+      });
+    })?.value;
     return {
-      value: this.modelValue,
-      activeGroup: 'base',
-      groups: [
-        {
-          label: '3.5',
-          value: 'base',
-          icon: 'fa-solid fa-bolt',
-          options: [CHAT_MODEL_CHATGPT, CHAT_MODEL_CHATGPT_16K, CHAT_MODEL_CHATGPT_BROWSING]
-        },
-        {
-          label: '4.0',
-          value: 'plus',
-          icon: 'fa-solid fa-wand-magic-sparkles',
-          options: [CHAT_MODEL_CHATGPT4, CHAT_MODEL_CHATGPT4_BROWSING]
-        }
-      ]
+      activeGroup,
+      groups: GROUPS
     };
   },
-  watch: {
-    modelValue(val) {
-      if (val !== this.value) {
-        this.value = val;
-      }
+  computed: {
+    model() {
+      return this.$store.state.chat.model;
     }
   },
   methods: {
@@ -90,16 +90,15 @@ export default defineComponent({
       }
       this.activeGroup = group.value;
       const options = group.options;
+      // by default select first option
       if (options && options.length > 0) {
-        this.value = options[0];
-        this.$emit('update:modelValue', options[0]);
         this.$emit('select', options[0]);
+        this.$store.dispatch('chat/setModel', options[0]);
       }
     },
     onCommandChange(command: IChatModel) {
-      this.value = command;
-      this.$emit('update:modelValue', command);
       this.$emit('select', command);
+      this.$store.dispatch('chat/setModel', command);
     }
   }
 });
diff --git a/src/components/chat/SidePanel.vue b/src/components/chat/SidePanel.vue
index 0fe88c6..28503eb 100644
--- a/src/components/chat/SidePanel.vue
+++ b/src/components/chat/SidePanel.vue
@@ -68,7 +68,7 @@
 import { defineComponent } from 'vue';
 import { ElSkeleton, ElInput } from 'element-plus';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { ROUTE_CHAT_CONVERSATION } from '@/router/constants';
+import { ROUTE_CHAT_CONVERSATION, ROUTE_CHAT_CONVERSATION_NEW } from '@/router/constants';
 import { chatOperator } from '@/operators';
 import { IChatConversation } from '@/operators/chat/models';
 import { Status } from '@/store/common/models';
@@ -97,10 +97,7 @@ export default defineComponent({
   methods: {
     async onNewConversation() {
       this.$router.push({
-        name: ROUTE_CHAT_CONVERSATION,
-        params: {
-          id: uuid()
-        }
+        name: ROUTE_CHAT_CONVERSATION_NEW
       });
     },
     async onConfirm(conversation: IChatConversation) {
diff --git a/src/components/common/Navigator.vue b/src/components/common/Navigator.vue
index 69bf02c..1fe5c8c 100644
--- a/src/components/common/Navigator.vue
+++ b/src/components/common/Navigator.vue
@@ -31,6 +31,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import {
   ROUTE_AUTH_LOGIN,
   ROUTE_CHAT_CONVERSATION,
+  ROUTE_CHAT_CONVERSATION_NEW,
   ROUTE_CHAT_INDEX,
   ROUTE_MIDJOURNEY_HISTORY,
   ROUTE_MIDJOURNEY_INDEX
@@ -50,7 +51,7 @@ export default defineComponent({
             name: ROUTE_CHAT_INDEX
           },
           icon: 'fa-regular fa-comment',
-          routes: [ROUTE_CHAT_INDEX, ROUTE_CHAT_CONVERSATION]
+          routes: [ROUTE_CHAT_INDEX, ROUTE_CHAT_CONVERSATION, ROUTE_CHAT_CONVERSATION_NEW]
         },
         {
           route: {
diff --git a/src/pages/chat/Conversation.vue b/src/pages/chat/Conversation.vue
index ecb200e..19a780f 100644
--- a/src/pages/chat/Conversation.vue
+++ b/src/pages/chat/Conversation.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <model-selector v-model="model" class="model-selector" @select="onSelectModel" />
+    <model-selector class="model-selector" />
     <api-status
       :initializing="initializing"
       :application="application"
@@ -27,24 +27,24 @@ import {
   ROLE_ASSISTANT,
   ROLE_USER,
   IChatModel,
-  CHAT_MODEL_CHATGPT,
   IApplication,
   IChatMessageState,
   IChatAskResponse,
   chatOperator,
-  IChatConversation
+  IChatConversation,
+  IChatMessage
 } from '@/operators';
 import InputBox from '@/components/chat/InputBox.vue';
 import ModelSelector from '@/components/chat/ModelSelector.vue';
 import { ERROR_CODE_CANCELED, ERROR_CODE_UNKNOWN } from '@/constants/errorCode';
 import ApiStatus from '@/components/common/ApiStatus.vue';
-import { ROUTE_CHAT_CONVERSATION } from '@/router';
+import { ROUTE_CHAT_CONVERSATION, ROUTE_CHAT_CONVERSATION_NEW } from '@/router';
 import { Status } from '@/store/common/models';
-import { v4 as uuid } from 'uuid';
+import { log } from '@/utils/log';
 
 export interface IData {
-  model: IChatModel;
   question: '';
+  messages: IChatMessage[];
 }
 
 export default defineComponent({
@@ -57,15 +57,16 @@ export default defineComponent({
   },
   data(): IData {
     return {
-      model: CHAT_MODEL_CHATGPT,
-      question: ''
+      question: '',
+      messages:
+        this.$store.state.chat.conversations?.find(
+          (conversation: IChatConversation) => conversation.id === this.$route.params.id?.toString()
+        )?.messages || []
     };
   },
   computed: {
-    messages() {
-      return this.$store.state.chat.conversations?.find(
-        (conversation: IChatConversation) => conversation.id === this.$route.params.id?.toString()
-      )?.messages;
+    model() {
+      return this.$store.state.chat.model;
     },
     conversationId(): string | undefined {
       return this.$route.params.id?.toString();
@@ -89,38 +90,31 @@ export default defineComponent({
     }
   },
   watch: {
-    conversationId() {
-      if (!this.conversation) {
-        this.onCreateNewConversation(this.conversationId);
+    model(val: IChatModel) {
+      if (val) {
+        this.onModelChanged();
+      }
+    },
+    conversationId(val: string) {
+      if (!val) {
+        this.messages = [];
+      } else {
+        this.messages =
+          this.conversations?.find((conversation: IChatConversation) => conversation.id === val)?.messages || [];
+        this.onScrollDown();
       }
     }
   },
   mounted() {
-    if (!this.conversation) {
-      this.onCreateNewConversation(this.conversationId);
-    }
+    this.onScrollDown();
   },
   methods: {
-    async onCreateNewConversation(id?: string) {
-      const newConversationId = id || uuid();
+    async onCreateNewConversation() {
       await this.$router.push({
-        name: ROUTE_CHAT_CONVERSATION,
-        params: {
-          id: newConversationId
-        }
+        name: ROUTE_CHAT_CONVERSATION_NEW
       });
-      const conversations = this.conversations;
-      console.log('this.store', this.$store);
-      await this.$store.dispatch('chat/setConversations', [
-        {
-          id: newConversationId,
-          messages: [],
-          new: true
-        },
-        ...conversations
-      ]);
     },
-    async onSelectModel() {
+    async onModelChanged() {
       await this.onCreateNewConversation();
       await this.$store.dispatch('chat/getApplications');
     },
@@ -132,6 +126,12 @@ export default defineComponent({
       this.question = '';
       await this.onFetchAnswer();
     },
+    async onScrollDown() {
+      setTimeout(() => {
+        const container = document.querySelector('.dialogue') as HTMLDivElement;
+        container.scrollTop = container.scrollHeight;
+      }, 0);
+    },
     async onFetchAnswer() {
       const token = this.application?.credential?.token;
       const endpoint = this.application?.api?.endpoint;
@@ -141,11 +141,13 @@ export default defineComponent({
         console.error('no token or endpoint or question');
         return;
       }
+      let conversationId = this.conversationId;
       this.messages.push({
         content: '',
         role: ROLE_ASSISTANT,
         state: IChatMessageState.PENDING
       });
+      this.onScrollDown();
       // request server to get answer
       chatOperator
         .askQuestion(
@@ -164,12 +166,28 @@ export default defineComponent({
                 content: response.answer,
                 state: IChatMessageState.ANSWERING
               };
+              conversationId = response.conversation_id;
+              this.onScrollDown();
             }
           }
         )
-        .then(() => {
+        .then(async () => {
+          log(this.onFetchAnswer, 'finished fetch answer');
           this.messages[this.messages.length - 1].state = IChatMessageState.FINISHED;
-          this.$store.dispatch('chat/getConversations');
+          await this.$store.dispatch('chat/setConversation', {
+            id: conversationId,
+            messages: this.messages
+          });
+          if (!this.conversationId) {
+            await this.$router.push({
+              name: ROUTE_CHAT_CONVERSATION,
+              params: {
+                id: conversationId
+              }
+            });
+          }
+          this.onScrollDown();
+          await this.$store.dispatch('chat/getConversations');
         })
         .catch((error) => {
           if (this.messages && this.messages.length > 0) {
diff --git a/src/pages/midjourney/History.vue b/src/pages/midjourney/History.vue
index e504ac2..220ea35 100644
--- a/src/pages/midjourney/History.vue
+++ b/src/pages/midjourney/History.vue
@@ -4,7 +4,7 @@
       <preset-panel />
     </div>
     <div class="main">
-      <channel-selector class="mb-4" @select="onSelectChannel" />
+      <channel-selector class="mb-4" />
       <api-status
         :initializing="initializing"
         :application="application"
@@ -27,16 +27,7 @@ import PresetPanel from '@/components/midjourney/PresetPanel.vue';
 import { ElMessage, ElButton } from 'element-plus';
 import ChannelSelector from '@/components/midjourney/ChannelSelector.vue';
 import ApiStatus from '@/components/common/ApiStatus.vue';
-import {
-  IMidjourneyChannel,
-  MidjourneyImagineAction,
-  IMidjourneyPreset,
-  MIDJOURNEY_CHANNEL_FAST,
-  midjourneyOperator,
-  IMidjourneyImagineTask,
-  IMidjourneyImagineRequest,
-  IApplication
-} from '@/operators';
+import { MidjourneyImagineAction, midjourneyOperator, IMidjourneyImagineRequest, IApplication } from '@/operators';
 import TaskFullList from '@/components/midjourney/tasks/TaskFullList.vue';
 import { ROUTE_MIDJOURNEY_INDEX } from '@/router';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
diff --git a/src/router/chat.ts b/src/router/chat.ts
index 1b2c4aa..2612877 100644
--- a/src/router/chat.ts
+++ b/src/router/chat.ts
@@ -1,4 +1,4 @@
-import { ROUTE_CHAT_CONVERSATION, ROUTE_CHAT_INDEX } from './constants';
+import { ROUTE_CHAT_CONVERSATION, ROUTE_CHAT_CONVERSATION_NEW, ROUTE_CHAT_INDEX } from './constants';
 
 export default {
   path: '/chat',
@@ -9,6 +9,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
index 7788b94..ac19e82 100644
--- 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_MIDJOURNEY_INDEX = 'midjourney-index';
 export const ROUTE_MIDJOURNEY_HISTORY = 'midjourney-history';
diff --git a/src/store/chat/actions.ts b/src/store/chat/actions.ts
index 4656f06..c1d0e17 100644
--- a/src/store/chat/actions.ts
+++ b/src/store/chat/actions.ts
@@ -6,6 +6,7 @@ import {
   CHAT_MODEL_CHATGPT_BROWSING,
   IApplication,
   IChatConversation,
+  IChatModel,
   apiUsageOperator,
   applicationOperator,
   chatOperator
@@ -15,6 +16,10 @@ import { ActionContext } from 'vuex';
 import { log } from '@/utils/log';
 import { IChatState } from './models';
 
+export const setModel = async ({ commit }: any, payload: IChatModel): Promise<void> => {
+  commit('setModel', payload);
+};
+
 export const setApplications = async ({ commit }: any, payload: IApplication[]): Promise<void> => {
   commit('setApplications', payload);
 };
@@ -24,6 +29,19 @@ export const setConversations = async ({ commit }: any, payload: IChatConversati
   commit('setConversations', payload);
 };
 
+export const setConversation = async ({ commit, state }: any, payload: IChatConversation): Promise<void> => {
+  log(setConversation, 'set conversation', payload);
+  const conversations = state.conversations;
+  const index = conversations.findIndex((conversation: IChatConversation) => conversation.id === payload.id);
+  if (index > -1) {
+    conversations[index] = payload;
+  } else {
+    conversations.push(payload);
+  }
+  commit('setConversations', conversations);
+  log(setConversation, 'set conversation success', conversations);
+};
+
 export const getApplications = async ({
   commit,
   rootState
@@ -76,7 +94,9 @@ export const getConversations = async ({
 };
 
 export default {
+  setModel,
   setApplications,
+  setConversation,
   setConversations,
   getApplications,
   getConversations
diff --git a/src/store/chat/models.ts b/src/store/chat/models.ts
index 6905ba3..e8c3c57 100644
--- a/src/store/chat/models.ts
+++ b/src/store/chat/models.ts
@@ -1,7 +1,8 @@
-import { IApplication, IChatConversation } from '@/operators';
+import { IApplication, IChatConversation, IChatModel } from '@/operators';
 import { Status } from '../common/models';
 
 export interface IChatState {
+  model: IChatModel;
   applications: IApplication[] | undefined;
   getApplicationsStatus: Status | undefined;
   conversations: IChatConversation[] | undefined;
diff --git a/src/store/chat/mutations.ts b/src/store/chat/mutations.ts
index 460b024..20e347d 100644
--- a/src/store/chat/mutations.ts
+++ b/src/store/chat/mutations.ts
@@ -1,7 +1,11 @@
-import { IApplication, IChatConversation } from '@/operators';
+import { IApplication, IChatConversation, IChatModel } from '@/operators';
 import { IChatState } from './models';
 import { Status } from '../common/models';
 
+export const setModel = (state: IChatState, payload: IChatModel): void => {
+  state.model = payload;
+};
+
 export const setApplications = (state: IChatState, payload: IApplication[]): void => {
   state.applications = payload;
 };
@@ -19,6 +23,7 @@ export const setGetConversationsStatus = (state: IChatState, payload: Status): v
 };
 
 export default {
+  setModel,
   setApplications,
   setGetApplicationsStatus,
   setConversations,
diff --git a/src/store/chat/persist.ts b/src/store/chat/persist.ts
index 8684893..e6d7228 100644
--- a/src/store/chat/persist.ts
+++ b/src/store/chat/persist.ts
@@ -1 +1 @@
-export default ['chat.applications', 'chat.conversations'];
+export default ['chat.applications', 'chat.conversations', 'chat.model'];
diff --git a/src/store/chat/state.ts b/src/store/chat/state.ts
index e3f6899..6666f31 100644
--- a/src/store/chat/state.ts
+++ b/src/store/chat/state.ts
@@ -1,7 +1,9 @@
+import { CHAT_MODEL_CHATGPT } from '@/operators';
 import { IChatState } from './models';
 
 export default (): IChatState => {
   return {
+    model: CHAT_MODEL_CHATGPT,
     applications: undefined,
     getApplicationsStatus: undefined,
     conversations: undefined,