Update deepseek experience (#174)

Co-authored-by: AceDataCloud <office@acedata.cloud>

change/@acedatacloud-nexior-f3bb8d6f-429e-4a03-b676-358e49a10f30.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "update deepseek experience",
+  "packageName": "@acedatacloud/nexior",
+  "email": "office@acedata.cloud",
+  "dependentChangeType": "patch"
+}

package.json

@@ -105,7 +105,7 @@
     "prettier": "^2.6.2",
     "rollup-plugin-string": "^3.0.0",
     "sass": "^1.38.1",
-    "tailwindcss": "^3.4.0",
+    "tailwindcss": "^2.2.8",
     "typescript": "^4.9.5",
     "vite": "^2.9.16",
     "vite-bundle-visualizer": "1.0",

src/assets/base.scss

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

src/assets/css/tailwind.css

@@ -1,2 +1,3 @@
+@tailwind base;
 @tailwind components;
 @tailwind utilities;

src/components/chat/InputBox.vue

@@ -1,35 +1,43 @@
 <template>
   <div class="input-box">
-    <el-upload
-      v-model:file-list="fileList"
-      :class="{
-        upload: true,
-        disabled: !canUpload
-      }"
-      :disabled="!canUpload"
-      name="file"
-      :show-file-list="true"
-      :limit="10"
-      :multiple="false"
-      :action="uploadUrl"
-      :on-exceed="onExceed"
-      :on-error="onError"
-      :headers="headers"
-    >
-      <el-tooltip class="box-item" effect="dark" :content="$t('chat.message.uploadFile')" placement="bottom">
-        <span class="btn btn-upload">
-          <font-awesome-icon icon="fa-solid fa-plus" class="icon icon-attachment" />
-        </span>
-      </el-tooltip>
-    </el-upload>
-    <span :class="{ btn: true, 'btn-search': true, active: search, disabled: !canSearch }" @click="search = !search">
-      <font-awesome-icon icon="fa-solid fa-globe" class="icon icon-search" />
-      {{ $t('chat.button.search') }}
-    </span>
-    <span :class="{ btn: true, 'btn-reason': true, active: reason, disabled: !canReason }" @click="reason = !reason">
-      <font-awesome-icon icon="fa-regular fa-lightbulb" class="icon icon-reason" />
-      {{ $t('chat.button.thinkDeeper') }}
-    </span>
+    <div class="tools">
+      <el-upload
+        v-model:file-list="fileList"
+        :class="{
+          upload: true,
+          disabled: !_isUploadEnabled
+        }"
+        :disabled="!_isUploadEnabled"
+        name="file"
+        :show-file-list="true"
+        :limit="10"
+        :multiple="false"
+        :action="uploadUrl"
+        :on-exceed="onExceed"
+        :on-error="onError"
+        :headers="headers"
+      >
+        <el-tooltip class="box-item" effect="dark" :content="$t('chat.message.uploadFile')" placement="bottom">
+          <span :class="{ btn: true, 'btn-upload': true, disabled: !_isUploadEnabled }">
+            <font-awesome-icon icon="fa-solid fa-plus" class="icon icon-attachment" />
+          </span>
+        </el-tooltip>
+      </el-upload>
+      <span
+        :class="{ btn: true, 'btn-search': true, active: _isSearchActive, disabled: !isSearchEnabled }"
+        @click="_isSearchActive = !_isSearchActive"
+      >
+        <font-awesome-icon icon="fa-solid fa-globe" class="icon icon-search" />
+        {{ $t('chat.button.search') }}
+      </span>
+      <span
+        :class="{ btn: true, 'btn-reason': true, active: _isReasonActive, disabled: !isReasonEnabled }"
+        @click="_isReasonActive = !_isReasonActive"
+      >
+        <font-awesome-icon icon="fa-regular fa-lightbulb" class="icon icon-reason" />
+        {{ $t('chat.button.thinkDeeper') }}
+      </span>
+    </div>
     <span
       v-show="!disabled"
       :class="{
@@ -72,6 +80,7 @@ import { ElMessage, ElTooltip, ElUpload } from 'element-plus';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { IChatModel } from '@/models';
 import { getBaseUrlPlatform } from '@/utils';
+import { CHAT_MODEL_GROUP_DEEPSEEK } from '@/constants';
 
 export default defineComponent({
   name: 'InputBox',
@@ -94,20 +103,60 @@ export default defineComponent({
     question: {
       type: String,
       required: true
+    },
+    isSearchEnabled: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    isReasonEnabled: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    isUploadEnabled: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    isSearchActive: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    isReasonActive: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
-  emits: ['update:question', 'update:references', 'submit', 'stop', 'update:search', 'update:reason'],
+  emits: [
+    'update:question',
+    'update:references',
+    'submit',
+    'stop',
+    'update:isSearchActive',
+    'update:isReasonActive',
+    'update:isUploadEnabled',
+    'update:isSearchEnabled',
+    'update:isReasonEnabled'
+  ],
   data() {
     return {
       inputHeight: '35px', //add inputHeight
       questionValue: this.question,
       fileList: [],
-      search: false,
-      reason: false,
+      // eslint-disable-next-line vue/no-reserved-keys
+      _isSearchActive: this.isSearchActive,
+      // eslint-disable-next-line vue/no-reserved-keys
+      _isReasonActive: this.isReasonActive,
       uploadUrl: getBaseUrlPlatform() + '/api/v1/files/'
     };
   },
   computed: {
+    modelGroup() {
+      return this.$store.state.chat.modelGroup;
+    },
     headers() {
       return {
         Authorization: `Bearer ${this.$store.state.token.access}`
@@ -117,14 +166,14 @@ export default defineComponent({
       // @ts-ignore
       return this.fileList.map((file: UploadFile) => file?.response?.file_url);
     },
-    canUpload() {
-      return !this.search && !this.reason;
+    _isUploadEnabled() {
+      return !this._isSearchActive && !this._isReasonActive && this.modelGroup.name !== CHAT_MODEL_GROUP_DEEPSEEK.name;
     },
-    canSearch() {
-      return !this.reason && !this.urls.length;
+    _isSearchEnabled() {
+      return !this._isReasonActive && !this.urls.length;
     },
-    canReason() {
-      return !this.search && !this.urls.length;
+    _isReasonEnabled() {
+      return !this._isSearchActive && !this.urls.length;
     },
     model(): IChatModel {
       return this.$store.state.chat.model;
@@ -134,11 +183,20 @@ export default defineComponent({
     urls(val) {
       this.$emit('update:references', val);
     },
-    search(val: boolean) {
-      this.$emit('update:search', val);
+    _isUploadEnabled(val: boolean) {
+      this.$emit('update:isUploadEnabled', val);
     },
-    reason(val: boolean) {
-      this.$emit('update:reason', val);
+    _isSearchEnabled(val: boolean) {
+      this.$emit('update:isSearchEnabled', val);
+    },
+    _isReasonEnabled(val: boolean) {
+      this.$emit('update:isReasonEnabled', val);
+    },
+    _isSearchActive(val: boolean) {
+      this.$emit('update:isSearchActive', val);
+    },
+    _isReasonActive(val: boolean) {
+      this.$emit('update:isReasonActive', val);
     },
     questionValue(val: string) {
       this.$emit('update:question', val);
@@ -148,6 +206,16 @@ export default defineComponent({
         this.questionValue = val;
       }
     },
+    isReasonActive(val: boolean) {
+      if (val !== this._isReasonActive) {
+        this._isReasonActive = val;
+      }
+    },
+    isSearchActive(val: boolean) {
+      if (val !== this._isSearchActive) {
+        this._isSearchActive = val;
+      }
+    },
     references(val: string[]) {
       if (val.length === 0) {
         this.fileList = [];
@@ -241,8 +309,10 @@ textarea.input:focus {
     &.disabled {
       .btn-upload {
         cursor: not-allowed;
+        pointer-events: none;
+        color: var(--el-text-color-disabled) !important;
         .icon-attachment {
-          color: var(--el-text-color-disabled);
+          color: var(--el-text-color-disabled) !important;
         }
       }
     }
@@ -255,88 +325,82 @@ textarea.input:focus {
     font-size: 16px;
     margin-bottom: 50px;
   }
-  .btn {
-    display: block;
-    z-index: 100;
-    cursor: pointer;
-    border: 1px solid var(--el-border-color-lighter);
-    width: fit-content;
+  .tools {
+    position: absolute;
+    left: 15px;
+    bottom: 15px;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    .btn {
+      display: block;
+      margin-right: 10px;
+      z-index: 100;
+      cursor: pointer;
+      border: 1px solid var(--el-border-color-lighter);
+      width: fit-content;
+      height: 36px;
+      line-height: 36px;
+      user-select: none;
+      &.disabled {
+        cursor: not-allowed;
+        pointer-events: none;
+        color: var(--el-text-color-disabled) !important;
+      }
+      &.btn-upload {
+        border-radius: 50%;
+        width: 36px;
+        text-align: center;
+        color: var(--el-text-color-secondary);
+        .icon-attachment {
+          font-size: 16px;
+          color: var(--el-text-color-primary);
+        }
+      }
+      &.btn-search {
+        color: var(--el-text-color-primary);
+        border-radius: 20px;
+        padding: 0 10px;
+        font-size: 16px;
+        &.active {
+          border: 1px solid var(--el-color-primary);
+          color: var(--el-color-primary);
+        }
+        .icon-search {
+          font-size: 16px;
+        }
+      }
+      &.btn-reason {
+        color: var(--el-text-color-primary);
+        border-radius: 20px;
+        padding: 0 10px;
+        font-size: 16px;
+        &.active {
+          border: 1px solid var(--el-color-primary);
+          color: var(--el-color-primary);
+        }
+        .icon-reason {
+          font-size: 16px;
+        }
+      }
+    }
+  }
+  .btn-send,
+  .btn-stop {
     position: absolute;
     bottom: 15px;
+    right: 15px;
+    border-radius: 50%;
+    width: 36px;
     height: 36px;
     line-height: 36px;
-    user-select: none;
+    text-align: center;
+    background-color: var(--el-color-black);
+    color: var(--el-color-white);
+    font-size: 16px;
     &.disabled {
+      display: none;
       cursor: not-allowed;
-      pointer-events: none;
-      color: var(--el-text-color-disabled) !important;
-    }
-    &.btn-upload {
-      left: 15px;
-      border-radius: 50%;
-      width: 36px;
-      text-align: center;
-      color: var(--el-text-color-secondary);
-      .icon-attachment {
-        font-size: 16px;
-        color: var(--el-text-color-primary);
-      }
-    }
-    &.btn-search {
-      left: 60px;
-      color: var(--el-text-color-primary);
-      border-radius: 20px;
-      padding: 0 10px;
-      font-size: 16px;
-      &.active {
-        border: 1px solid var(--el-color-primary);
-        color: var(--el-color-primary);
-      }
-      .icon-search {
-        font-size: 16px;
-      }
-    }
-    &.btn-reason {
-      left: 145px;
-      color: var(--el-text-color-primary);
-      border-radius: 20px;
-      padding: 0 10px;
-      font-size: 16px;
-      &.active {
-        border: 1px solid var(--el-color-primary);
-        color: var(--el-color-primary);
-      }
-      .icon-reason {
-        font-size: 16px;
-      }
-    }
-    &.btn-send {
-      bottom: 15px;
-      right: 15px;
-      border-radius: 50%;
-      width: 36px;
-      text-align: center;
-      background-color: var(--el-color-black);
-      color: var(--el-color-white);
-      font-size: 16px;
-      &.disabled {
-        display: none;
-        cursor: not-allowed;
-      }
-    }
-    &.btn-stop {
-      bottom: 15px;
-      right: 15px;
-      border-radius: 50%;
-      width: 36px;
-      text-align: center;
-      background-color: var(--el-color-black);
-      color: var(--el-color-white);
-      font-size: 16px;
-      &.disabled {
-        display: none;
-        cursor: not-allowed;
-      }
     }
   }
 }

src/components/chat/Message.vue

@@ -48,11 +48,11 @@
             v-model="questionValue"
             type="textarea"
             class="chat-input"
-            @keydown.enter.exact.prevent="sendEdit"
+            @keydown.enter.exact.prevent="onEdit"
           ></el-input>
           <div class="button-group">
             <el-button size="small" round @click="cancelEdit">{{ $t('common.button.cancel') }}</el-button>
-            <el-button type="primary" size="small" round @click="sendEdit">{{ $t('common.button.confirm') }}</el-button>
+            <el-button type="primary" size="small" round @click="onEdit">{{ $t('common.button.confirm') }}</el-button>
           </div>
         </div>
         <answering-mark v-if="message.state === messageState.PENDING" />
@@ -75,7 +75,7 @@
           "
           class="btn-restart"
           :messages="messages"
-          @restart="sendRestart"
+          @restart="onRestart"
         />
       </div>
     </div>
@@ -199,11 +199,11 @@ export default defineComponent({
     cancelEdit() {
       this.isEditing = false;
     },
-    sendRestart() {
+    onRestart() {
       // Implement the logic to save the edited content
       this.$emit('restart', this.message);
     },
-    sendEdit() {
+    onEdit() {
       // Implement the logic to save the edited content
       this.isEditing = false;
       this.onSubmit();

src/pages/chat/Conversation.vue

@@ -26,12 +26,17 @@
         </div>
         <div class="composer">
           <input-box
+            v-model:is-search-active="isSearchActive"
+            v-model:is-reason-active="isReasonActive"
+            v-model:is-search-enabled="isSearchEnabled"
+            v-model:is-reason-enabled="isReasonEnabled"
+            v-model:is-upload-enabled="isUploadEnabled"
             :disabled="answering"
             :question="question"
             :references="references"
+            :upload="upload"
             @update:question="question = $event"
-            @update:reason="reason = $event"
-            @update:search="search = $event"
+            @update:upload="upload = $event"
             @update:references="references = $event"
             @submit="onSubmit"
             @stop="onStop"
@@ -55,7 +60,6 @@ import {
   CHAT_MODEL_GPT_4O,
   CHAT_MODEL_GROUP_CHATGPT,
   CHAT_MODEL_GROUP_DEEPSEEK,
-  CHAT_MODEL_O1,
   CHAT_MODEL_O1_MINI,
   CHAT_MODELS,
   ROLE_ASSISTANT,
@@ -85,8 +89,12 @@ import { CHAT_MODEL_GPT_4_ALL, CHAT_MODEL_GPT_4_VISION } from '@/constants';
 export interface IData {
   drawer: boolean;
   question: string;
-  search: boolean;
-  reason: boolean;
+  upload: boolean;
+  isSearchActive: boolean;
+  isReasonActive: boolean;
+  isSearchEnabled: boolean;
+  isReasonEnabled: boolean;
+  isUploadEnabled: boolean;
   references: string[];
   answering: boolean;
   messages: IChatMessage[];
@@ -109,8 +117,12 @@ export default defineComponent({
       drawer: false,
       question: '',
       references: [],
-      search: false,
-      reason: false,
+      upload: false,
+      isSearchActive: false,
+      isReasonActive: false,
+      isSearchEnabled: true,
+      isReasonEnabled: true,
+      isUploadEnabled: true,
       answering: false,
       canceler: undefined,
       messages:
@@ -154,7 +166,7 @@ export default defineComponent({
     }
   },
   watch: {
-    async search(val) {
+    async isSearchActive(val) {
       console.log('search changed', val);
       const model = await this.getModelByAction();
       if (model) {
@@ -168,8 +180,8 @@ export default defineComponent({
     //     await this.$store.dispatch('chat/setModel', model);
     //   }
     // },
-    async reason() {
-      console.log('reason changed', this.reason);
+    async isReasonActive(val) {
+      console.log('reason changed', val);
       const model = await this.getModelByAction();
       if (model) {
         await this.$store.dispatch('chat/setModel', model);
@@ -182,6 +194,9 @@ export default defineComponent({
         console.log('set model', model);
         await this.$store.dispatch('chat/setModel', model);
       }
+      if (val.name === CHAT_MODEL_GROUP_DEEPSEEK.name) {
+        this.upload = false;
+      }
     },
     model(val: IChatModel) {
       console.log('model changed', val);
@@ -197,7 +212,6 @@ export default defineComponent({
           this.conversations?.find((conversation: IChatConversation) => conversation.id === val)?.messages || [];
         this.onScrollDown();
       }
-      console.log('reason changed', this.reason);
       const model = await this.getModelByConversation();
       if (model) {
         await this.$store.dispatch('chat/setModel', model);
@@ -240,16 +254,16 @@ export default defineComponent({
     },
     async getModelByAction() {
       if (this.modelGroup.name === CHAT_MODEL_GROUP_CHATGPT.name) {
-        if (this.reason) {
+        if (this.isReasonActive) {
           return CHAT_MODEL_O1_MINI;
-        } else if (this.search) {
+        } else if (this.isSearchActive) {
           return CHAT_MODEL_GPT_4_BROWSING;
         } else if (this.references.length > 0) {
           return CHAT_MODEL_GPT_4_ALL;
         }
         return CHAT_MODEL_GPT_4O;
       } else if (this.modelGroup.name === CHAT_MODEL_GROUP_DEEPSEEK.name) {
-        if (this.reason) {
+        if (this.isReasonActive) {
           return CHAT_MODEL_DEEPSEEK_REASONER;
         }
         return CHAT_MODEL_DEEPSEEK_CHAT;
@@ -446,7 +460,6 @@ export default defineComponent({
           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
@@ -573,7 +586,7 @@ export default defineComponent({
                   lastMessage?.state !== IChatMessageState.FINISHED ? IChatMessageState.ANSWERING : lastMessage?.state
               };
               conversationId = response?.id;
-              this.onScrollDown();
+              //this.onScrollDown();
             },
             signal: this.canceler.signal
           }

tailwind.config.js

@@ -1,7 +1,14 @@
 module.exports = {
-  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  purge: {
+    enabled: process.env.NODE_ENV !== 'development',
+    content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}']
+  },
+  darkMode: false,
   theme: {
     extend: {}
   },
+  variants: {
+    extend: {}
+  },
   plugins: []
 };