fix bugs

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);
     }
   }
 });

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) {

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: {

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) {

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';

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,

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';