style: chat style

Author: wangdan-fit2cloud

ui/src/layout/layout-header/avatar/ResetPassword.vue

@@ -2,6 +2,9 @@
   <el-dialog
     v-model="resetPasswordDialog"
     :title="$t('views.login.resetPassword')"
+    destroy-on-close
+    append-to-body
+    align-center
     :close-on-click-modal="false"
     :close-on-press-escape="false"
   >
@@ -53,12 +56,12 @@ import { useRouter } from 'vue-router'
 import { t } from '@/locales'
 
 const props = defineProps<{
-  emitConfirm?: boolean; // 在父级调接口
+  emitConfirm?: boolean // 在父级调接口
 }>()
 
 const emit = defineEmits<{
-  (e: 'confirm', value: ResetCurrentUserPasswordRequest): void;
-}>();
+  (e: 'confirm', value: ResetCurrentUserPasswordRequest): void
+}>()
 
 const router = useRouter()
 const { login } = useStore()
@@ -141,13 +144,13 @@ const open = () => {
 }
 const resetPassword = () => {
   resetPasswordFormRef1.value?.validate().then(() => {
-    if(props.emitConfirm) {
+    if (props.emitConfirm) {
       emit('confirm', resetPasswordForm.value)
     } else {
       return UserApi.resetCurrentPassword(resetPasswordForm.value).then(() => {
-            login.logout()
-            router.push({ name: 'login' })
-          })
+        login.logout()
+        router.push({ name: 'login' })
+      })
     }
   })
 }

ui/src/locales/lang/en-US/ai-chat.ts

@@ -4,6 +4,7 @@ export default {
   confirmModification: 'Confirm modification',
   noHistory: 'No Chat History',
   createChat: 'New Chat',
+  clearChat: 'Clear Chat',
   history: 'Chat History',
   only20history: 'Showing only the last 20 chats',
   question_count: 'Questions',
@@ -15,7 +16,7 @@ export default {
   passwordValidator: {
     title: 'Enter Password to Access',
     errorMessage1: 'Password cannot be empty',
-    errorMessage2: 'Incorrect password'
+    errorMessage2: 'Incorrect password',
   },
   operation: {
     play: 'Play',
@@ -32,8 +33,10 @@ export default {
   tip: {
     error500Message: 'Sorry, the service is currently under maintenance. Please try again later!',
     errorIdentifyMessage: 'Unable to verify user identity',
-    errorLimitMessage: 'Sorry, you have reached the maximum number of questions. Please try again tomorrow!',
-    answerMessage: 'Sorry, no relevant content found. Please rephrase your question or provide more details.',
+    errorLimitMessage:
+      'Sorry, you have reached the maximum number of questions. Please try again tomorrow!',
+    answerMessage:
+      'Sorry, no relevant content found. Please rephrase your question or provide more details.',
     stopAnswer: 'Response Stopped',
     answerLoading: 'Generating Response...',
     recorderTip: `<p>This feature requires microphone access. Browsers block recording on insecure pages. Solutions:<br/>
@@ -46,12 +49,12 @@ export default {
     requiredMessage: 'Please fill in all required fields',
     inputParamMessage1: 'Please specify a parameter in the URL',
     inputParamMessage2: 'value',
-    prologueMessage: 'Sorry, the service is currently under maintenance. Please try again later!'
+    prologueMessage: 'Sorry, the service is currently under maintenance. Please try again later!',
   },
   inputPlaceholder: {
     speaking: 'Speaking...',
     recorderLoading: 'Transcribing...',
-    default: 'Type your question'
+    default: 'Type your question',
   },
   uploadFile: {
     label: 'Upload File',
@@ -63,7 +66,7 @@ export default {
     limitMessage2: 'files',
     sizeLimit: 'Each file must not exceed',
     imageMessage: 'Please process the image content',
-    errorMessage: 'Upload Failed'
+    errorMessage: 'Upload Failed',
   },
   executionDetails: {
     title: 'Execution Details',
@@ -82,18 +85,18 @@ export default {
     rerankerResult: 'Re-ranking Results',
     paragraph: 'Segment',
     noSubmit: 'No submission from user',
-    errMessage: 'Error Log'
+    errMessage: 'Error Log',
   },
   KnowledgeSource: {
     title: 'Knowledge Source',
     referenceParagraph: 'Cited Segment',
     consume: 'Tokens',
-    consumeTime: 'Runtime'
+    consumeTime: 'Runtime',
   },
   paragraphSource: {
     title: 'Knowledge Quote',
     question: 'User Question',
-    optimizationQuestion: 'Optimized Question'
+    optimizationQuestion: 'Optimized Question',
   },
   editTitle: 'Edit Title',
 }

ui/src/locales/lang/zh-CN/ai-chat.ts

@@ -4,6 +4,7 @@ export default {
   confirmModification: '确认修改',
   noHistory: '暂无历史记录',
   createChat: '新建对话',
+  clearChat: '清空对话',
   history: '历史记录',
   only20history: '仅显示最近 20 条对话',
   question_count: '条提问',

ui/src/locales/lang/zh-Hant/ai-chat.ts

@@ -4,6 +4,7 @@ export default {
   confirmModification: '確認修改',
   noHistory: '暫無歷史記錄',
   createChat: '新建對話',
+  clearChat: '清空對話',
   history: '歷史記錄',
   only20history: '僅顯示最近 20 條對話',
   question_count: '條提問',
@@ -15,7 +16,7 @@ export default {
   passwordValidator: {
     title: '請輸入密碼打開連結',
     errorMessage1: '密碼不能為空',
-    errorMessage2: '密碼錯誤'
+    errorMessage2: '密碼錯誤',
   },
   operation: {
     play: '點擊播放',
@@ -46,12 +47,12 @@ export default {
     requiredMessage: '請填寫所有必填欄位',
     inputParamMessage1: '請在 URL 中填寫參數',
     inputParamMessage2: '的值',
-    prologueMessage: '抱歉，當前正在維護，無法提供服務，請稍後再試！'
+    prologueMessage: '抱歉，當前正在維護，無法提供服務，請稍後再試！',
   },
   inputPlaceholder: {
     speaking: '說話中',
     recorderLoading: '轉文字中',
-    default: '請輸入問題'
+    default: '請輸入問題',
   },
   uploadFile: {
     label: '上傳文件',
@@ -63,7 +64,7 @@ export default {
     limitMessage2: '個文件',
     sizeLimit: '單個文件大小不能超過',
     imageMessage: '請解析圖片內容',
-    errorMessage: '上傳失敗'
+    errorMessage: '上傳失敗',
   },
   executionDetails: {
     title: '執行詳細',
@@ -82,18 +83,18 @@ export default {
     rerankerResult: '重排結果',
     paragraph: '段落',
     noSubmit: '用戶未提交',
-    errMessage: '錯誤日誌'
+    errMessage: '錯誤日誌',
   },
   KnowledgeSource: {
     title: '知識來源',
     referenceParagraph: '引用段落',
     consume: '消耗tokens',
-    consumeTime: '耗時'
+    consumeTime: '耗時',
   },
   paragraphSource: {
     title: '知識庫引用',
     question: '用戶問題',
-    optimizationQuestion: '優化後問題'
+    optimizationQuestion: '優化後問題',
   },
   editTitle: '編輯標題',
 }

ui/src/stores/modules/chat-log.ts

@@ -36,42 +36,6 @@ const useChatLogStore = defineStore('chatLog',{
           })
       })
     },
-    async asyncGetChatLogClient(id: string, page: pageRequest, loading?: Ref<boolean>) {
-      return new Promise((resolve, reject) => {
-        // chatLogApi
-        //   .getChatLogClient(id, page, loading)
-        //   .then((data) => {
-        //     resolve(data)
-        //   })
-        //   .catch((error) => {
-        //     reject(error)
-        //   })
-      })
-    },
-    async asyncDelChatClientLog(id: string, chatId: string, loading?: Ref<boolean>) {
-      return new Promise((resolve, reject) => {
-        // chatLogApi
-        //   .delChatClientLog(id, chatId, loading)
-        //   .then((data) => {
-        //     resolve(data)
-        //   })
-        //   .catch((error) => {
-        //     reject(error)
-        //   })
-      })
-    },
-    async asyncPutChatClientLog(id: string, chatId: string, data: any, loading?: Ref<boolean>) {
-      return new Promise((resolve, reject) => {
-        // chatLogApi
-        //   .putChatClientLog(id, chatId, data, loading)
-        //   .then((data) => {
-        //     resolve(data)
-        //   })
-        //   .catch((error) => {
-        //     reject(error)
-        //   })
-      })
-    }
   }
 })
 

…at/history-component/EditTitleDialog.vue …views/chat/component/EditTitleDialog.vueui/src/views/chat/history-component/EditTitleDialog.vue renamed to ui/src/views/chat/component/EditTitleDialog.vue ui/src/views/chat/history-component/EditTitleDialog.vue renamed to ui/src/views/chat/component/EditTitleDialog.vue

@@ -34,11 +34,14 @@
         </el-button>
         <div v-show="!isPcCollapse" class="flex-between p-8 pb-0 color-secondary mt-8">
           <span>{{ $t('chat.history') }}</span>
-          <el-button text>
-            <el-icon>
-              <Delete />
-            </el-icon>
-          </el-button>
+          <el-tooltip effect="dark" :content="$t('chat.clearChat')" placement="right">
+            <!-- // TODO: 清空 -->
+            <el-button text>
+              <el-icon>
+                <Delete />
+              </el-icon>
+            </el-button>
+          </el-tooltip>
         </div>
       </div>
       <div v-show="!isPcCollapse" class="left-height">
@@ -55,7 +58,7 @@
             >
               <template #default="{ row }">
                 <div class="flex-between">
-                  <span :title="row.abstract">
+                  <span :title="row.abstract" class="ellipsis" style="max-width: 180px">
                     {{ row.abstract }}
                   </span>
                   <div @click.stop v-show="mouseId === row.id && row.id !== 'new'">
@@ -97,27 +100,40 @@
         <AppIcon iconName="app-create-chat"></AppIcon>
         <template #title>{{ $t('chat.createChat') }}</template>
       </el-menu-item>
+
       <el-sub-menu v-show="isPcCollapse" index="2">
         <template #title>
           <AppIcon iconName="app-history-outlined" />
         </template>
         <el-menu-item-group v-loading="leftLoading">
-          <template #title
-            ><span>{{ $t('chat.history') }}</span></template
-          >
+          <template #title>
+            <div class="flex-between w-full">
+              <span>{{ $t('chat.history') }}</span>
+              <el-tooltip effect="dark" :content="$t('chat.clearChat')" placement="right">
+                <!-- // TODO: 清空 -->
+                <el-button text>
+                  <el-icon>
+                    <Delete />
+                  </el-icon>
+                </el-button>
+              </el-tooltip>
+            </div>
+          </template>
           <el-menu-item
             v-for="row in chatLogData"
             :index="row.id"
             :key="row.id"
             @click="handleClickList(row)"
+            @mouseenter="mouseenter(row)"
+            @mouseleave="mouseId = ''"
           >
             <div class="flex-between w-full lighter">
-              <span :title="row.abstract">
+              <span :title="row.abstract" class="ellipsis">
                 {{ row.abstract }}
               </span>
               <div @click.stop class="flex" v-show="mouseId === row.id && row.id !== 'new'">
                 <el-dropdown trigger="click" :teleported="false">
-                  <el-icon class="rotate-90 mt-4">
+                  <el-icon class="mt-4 lighter">
                     <MoreFilled />
                   </el-icon>
                   <template #dropdown>
@@ -161,7 +177,7 @@ const props = defineProps<{
   chatLogData: any[]
   leftLoading: boolean
   currentChatId: string
-  isPcCollapse: boolean
+  isPcCollapse?: boolean
 }>()
 const emit = defineEmits(['newChat', 'clickLog', 'deleteLog', 'refreshFieldTitle'])
 
@@ -188,8 +204,8 @@ function editLogTitle(row: any) {
   EditTitleDialogRef.value.open(row, props.applicationDetail.id)
 }
 
-function refreshFieldTitle() {
-  emit('refreshFieldTitle')
+function refreshFieldTitle(chatId: string, abstract: string) {
+  emit('refreshFieldTitle', chatId, abstract)
 }
 </script>
 <style lang="scss" scoped>
@@ -200,12 +216,17 @@ function refreshFieldTitle() {
   background:
     linear-gradient(187.61deg, rgba(235, 241, 255, 0.5) 39.6%, rgba(231, 249, 255, 0.5) 94.3%),
     #eef1f4;
-  .el-menu {
+  :deep(.el-menu) {
     background: none;
     border: none;
     &:not(.el-menu--collapse) {
       width: 280px;
     }
+    &.el-menu--collapse {
+      .el-sub-menu.is-active .el-sub-menu__title {
+        color: var(--el-text-color-primary) !important;
+      }
+    }
   }
 
   .left-height {
@@ -237,7 +258,7 @@ function refreshFieldTitle() {
     background: transparent;
   }
   .el-menu-item-group__title {
-    padding-bottom: 16px;
+    padding: 8px 8px 8px 16px;
     font-weight: 500;
     color: var(--app-text-color-secondary);
   }
@@ -248,15 +269,14 @@ function refreshFieldTitle() {
     padding-left: 8px;
     padding-right: 8px;
     &:hover {
-      background-color: #1f23291a;
+      background-color: rgba(31, 35, 41, 0.1);
     }
     &.is-active {
       background-color: #ffffff;
-
       color: var(--el-text-color-primary);
-      & > div {
-        font-weight: 500;
-      }
+      // & > div {
+      //   font-weight: 500;
+      // }
     }
   }
 }