style: chat style

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()
+        login.logout()
-            router.push({ name: 'login' })
+        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!',
+    errorLimitMessage:
-    answerMessage: 'Sorry, no relevant content found. Please rephrase your question or provide more details.',
+      '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)
-        //   })
-      })
-    }
   }
 })
 

ui/src/views/chat/component/HistoryPanel.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-tooltip effect="dark" :content="$t('chat.clearChat')" placement="right">
-            <el-icon>
+            <!-- // TODO: 清空 -->
-              <Delete />
+            <el-button text>
-            </el-icon>
+              <el-icon>
-          </el-button>
+                <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
+          <template #title>
-            ><span>{{ $t('chat.history') }}</span></template
+            <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() {
+function refreshFieldTitle(chatId: string, abstract: string) {
-  emit('refreshFieldTitle')
+  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 {
+      // & > div {
-        font-weight: 500;
+      //   font-weight: 500;
-      }
+      // }
     }
   }
 }

ui/src/views/chat/embed/component/ChatHistoryDrawer.vue

@@ -0,0 +1,149 @@
+<template>
+  <div>
+    <el-drawer
+      v-model="show"
+      :with-header="false"
+      class="chat-history-drawer"
+      direction="ltr"
+      :size="280"
+      style="--el-drawer-padding-primary: 0"
+    >
+      <HistoryPanel
+        :application-detail="applicationDetail"
+        :chat-log-data="chatLogData"
+        :left-loading="leftLoading"
+        :currentChatId="currentChatId"
+        @new-chat="newChat"
+        @clickLog="handleClickList"
+        @delete-log="deleteChatLog"
+        @refreshFieldTitle="refreshFieldTitle"
+      >
+        <div class="user-info p-16 cursor">
+          <el-avatar
+            :size="32"
+            v-if="
+              !chatUser.chat_profile?.authentication ||
+              chatUser.chat_profile.authentication_type === 'password'
+            "
+          >
+            <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
+          </el-avatar>
+          <el-dropdown v-else trigger="click" type="primary" class="w-full">
+            <div class="flex align-center">
+              <el-avatar :size="32">
+                <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
+              </el-avatar>
+              <span class="ml-8 color-text-primary">{{ chatUser.chatUserProfile?.nick_name }}</span>
+            </div>
+
+            <template #dropdown>
+              <el-dropdown-menu style="min-width: 260px">
+                <div class="flex align-center p-8">
+                  <div class="mr-8 flex align-center">
+                    <el-avatar :size="40">
+                      <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
+                    </el-avatar>
+                  </div>
+                  <div>
+                    <h4 class="medium mb-4">{{ chatUser.chatUserProfile?.nick_name }}</h4>
+                    <div class="color-secondary">
+                      {{ `${$t('common.username')}: ${chatUser.chatUserProfile?.username}` }}
+                    </div>
+                  </div>
+                </div>
+                <el-dropdown-item
+                  v-if="chatUser.chatUserProfile?.source === 'LOCAL'"
+                  class="border-t"
+                  style="padding-top: 8px; padding-bottom: 8px"
+                  @click="openResetPassword"
+                >
+                  <el-icon><Lock /></el-icon>
+                  {{ $t('views.login.resetPassword') }}
+                </el-dropdown-item>
+                <el-dropdown-item
+                  v-if="chatUser.chatUserProfile?.source === 'LOCAL'"
+                  class="border-t"
+                  style="padding-top: 8px; padding-bottom: 8px"
+                  @click="logout"
+                >
+                  <AppIcon iconName="app-export" />
+                  {{ $t('layout.logout') }}
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+      </HistoryPanel>
+    </el-drawer>
+
+    <ResetPassword
+      ref="resetPasswordRef"
+      emitConfirm
+      @confirm="handleResetPassword"
+    ></ResetPassword>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, defineModel } from 'vue'
+import useStore from '@/stores'
+import HistoryPanel from '@/views/chat/component/HistoryPanel.vue'
+import ResetPassword from '@/layout/layout-header/avatar/ResetPassword.vue'
+import type { ResetCurrentUserPasswordRequest } from '@/api/type/user'
+import chatAPI from '@/api/chat/chat'
+import { useRouter } from 'vue-router'
+const router = useRouter()
+
+const show = defineModel<boolean>('show')
+
+const props = defineProps<{
+  applicationDetail: any
+  chatLogData: any[]
+  leftLoading: boolean
+  currentChatId: string
+}>()
+
+const emit = defineEmits(['newChat', 'clickLog', 'deleteLog', 'refreshFieldTitle'])
+
+const { chatUser, chatLog } = useStore()
+
+const newChat = () => {
+  emit('newChat')
+}
+
+const handleClickList = (item: any) => {
+  emit('clickLog', item)
+}
+
+const deleteChatLog = (row: any) => {
+  emit('deleteLog', row)
+}
+function refreshFieldTitle(chatId: string, abstract: string) {
+  emit('refreshFieldTitle', chatId, abstract)
+}
+
+const resetPasswordRef = ref<InstanceType<typeof ResetPassword>>()
+const openResetPassword = () => {
+  resetPasswordRef.value?.open()
+}
+
+const handleResetPassword = (param: ResetCurrentUserPasswordRequest) => {
+  chatAPI.resetCurrentPassword(param).then(() => {
+    logout()
+  })
+}
+
+const logout = () => {
+  chatUser.logout().then(() => {
+    router.push({ name: 'login' })
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.chat-history-drawer) {
+  .el-drawer__body {
+    padding: 0 !important;
+  }
+}
+</style>

ui/src/views/chat/embed/index.vue

@@ -1,39 +1,43 @@
 <template>
   <div
     class="chat-embed layout-bg chat-background"
-    :class="{ 'chat-embed--popup': isPopup }"
     v-loading="loading"
     :style="{
       '--el-color-primary': applicationDetail?.custom_theme?.theme_color,
       '--el-color-primary-light-9': hexToRgba(applicationDetail?.custom_theme?.theme_color, 0.1),
+      '--el-color-primary-light-6': hexToRgba(applicationDetail?.custom_theme?.theme_color, 0.4),
       backgroundImage: `url(${applicationDetail?.chat_background})`,
     }"
   >
     <div class="chat-embed__header" :style="(user.isEE() || user.isPE()) && customStyle">
-      <div class="flex align-center">
+      <div class="flex-between">
-        <!-- TODO icon更换 -->
+        <div class="flex align-center">
-        <AppIcon
+          <AppIcon
-          iconName="app-mobile-open-history"
+            iconName="app-mobile-open-history"
-          style="font-size: 20px"
+            style="font-size: 20px"
-          class="ml-16 cursor"
+            class="ml-16 cursor"
-          :style="{
+            :style="{
-            color: applicationDetail?.custom_theme?.header_font_color,
+              color: applicationDetail?.custom_theme?.header_font_color,
-          }"
+            }"
-          @click.prevent.stop="show = true"
+            @click.prevent.stop="show = true"
-        />
+          />
-        <div class="mr-12 ml-16 flex">
+          <div class="mr-12 ml-16 flex">
-          <el-avatar
+            <el-avatar
-            v-if="isAppIcon(applicationDetail?.icon)"
+              v-if="isAppIcon(applicationDetail?.icon)"
-            shape="square"
+              shape="square"
-            :size="32"
+              :size="32"
-            style="background: none"
+              style="background: none"
-          >
+            >
-            <img :src="applicationDetail?.icon" alt="" />
+              <img :src="applicationDetail?.icon" alt="" />
-          </el-avatar>
+            </el-avatar>
-          <LogoIcon v-else height="32px" />
+            <LogoIcon v-else height="32px" />
-        </div>
+          </div>
 
-        <h4>{{ applicationDetail?.name }}</h4>
+          <h4>{{ applicationDetail?.name }}</h4>
+        </div>
+        <el-button text @click="newChat" style="margin-right: 85px">
+          <AppIcon iconName="app-create-chat" style="font-size: 20px"></AppIcon>
+        </el-button>
       </div>
     </div>
     <div>
@@ -50,13 +54,6 @@
           @scroll="handleScroll"
           class="AiChat-embed"
         >
-          <template #operateBefore>
-            <div>
-              <el-button type="primary" link class="new-chat-button mb-8" @click="newChat">
-                <el-icon><Plus /></el-icon><span class="ml-4">{{ $t('chat.createChat') }}</span>
-              </el-button>
-            </div>
-          </template>
         </AiChat>
       </div>
 
@@ -75,20 +72,14 @@
 </template>
 <script setup lang="ts">
 import { ref, onMounted, reactive, nextTick, computed } from 'vue'
-import { useRoute } from 'vue-router'
 import { isAppIcon } from '@/utils/common'
 import { hexToRgba } from '@/utils/theme'
 import useStore from '@/stores'
 import { t } from '@/locales'
-import ChatHistoryDrawer from '../mobile/component/ChatHistoryDrawer.vue'
+import ChatHistoryDrawer from './component/ChatHistoryDrawer.vue'
 import chatAPI from '@/api/chat/chat'
 
-const { user, chatLog } = useStore()
+const { user } = useStore()
-const route = useRoute()
-
-const isPopup = computed(() => {
-  return route.query.popup !== 'no'
-})
 const AiChatRef = ref()
 const loading = ref(false)
 const left_loading = ref(false)
@@ -121,7 +112,7 @@ const customStyle = computed(() => {
 })
 
 function deleteLog(row: any) {
-  chatLog.asyncDelChatClientLog(applicationDetail.value.id, row.id, left_loading).then(() => {
+  chatAPI.deleteChat(row.id, left_loading).then(() => {
     if (currentChatId.value === row.id) {
       currentChatId.value = 'new'
       paginationConfig.current_page = 1
@@ -252,10 +243,7 @@ onMounted(() => {
     height: calc(100vh - var(--app-header-height) - 16px);
     overflow: hidden;
   }
-  .new-chat-button {
+
-    z-index: 11;
-    font-size: 1rem;
-  }
   &.chat-embed--popup {
     .chat-popover-button {
       right: 85px;

ui/src/views/chat/index.vue

@@ -39,4 +39,10 @@ const loading = ref(false)
 
 const applicationAvailable = ref<boolean>(true)
 </script>
-<style lang="scss"></style>
+<style lang="scss">
+@media only screen and (max-width: 768px) {
+  .el-dialog {
+    width: 90% !important;
+  }
+}
+</style>

ui/src/views/chat/mobile/component/ChatHistoryDrawer.vue

@@ -1,105 +1,46 @@
 <template>
   <div>
-    <el-drawer v-model="show" :with-header="false" class="left-drawer" direction="ltr" :size="280">
+    <el-drawer
-      <div>
+      v-model="show"
-        <div class="flex align-center mb-16">
+      :with-header="false"
-          <div class="flex mr-8">
+      class="chat-history-drawer"
-            <el-avatar
+      direction="ltr"
-              v-if="isAppIcon(applicationDetail?.icon)"
+      :size="280"
-              shape="square"
+      style="--el-drawer-padding-primary: 0"
-              :size="32"
+    >
-              style="background: none"
+      <HistoryPanel
-            >
+        :application-detail="applicationDetail"
-              <img :src="applicationDetail?.icon" alt="" />
+        :chat-log-data="chatLogData"
-            </el-avatar>
+        :left-loading="leftLoading"
-            <LogoIcon v-else height="32px" />
+        :currentChatId="currentChatId"
-          </div>
+        @new-chat="newChat"
-          <h4>{{ applicationDetail?.name }}</h4>
+        @clickLog="handleClickList"
+        @delete-log="deleteChatLog"
+        @refreshFieldTitle="refreshFieldTitle"
+      >
+        <div class="flex align-center user-info p-16" @click="toUserCenter">
+          <el-avatar
+            :size="32"
+            :class="`${!chatUser.chat_profile?.authentication || chatUser.chat_profile.authentication_type === 'password' ? 'cursor-default' : ''}`"
+          >
+            <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
+          </el-avatar>
+          <span v-if="chatUser.chat_profile?.authentication" class="ml-8 color-text-primary">
+            {{ chatUser.chatUserProfile?.nick_name }}
+          </span>
         </div>
-        <el-button size="large" class="add-button w-full primary" @click="emit('newChat')">
+      </HistoryPanel>
-          <AppIcon iconName="app-create-chat"></AppIcon>
-          <span class="ml-4">{{ $t('chat.createChat') }}</span>
-        </el-button>
-        <p class="mt-20 mb-8 color-secondary">{{ $t('chat.history') }}</p>
-      </div>
-
-      <div class="left-height pt-0">
-        <el-scrollbar>
-          <div>
-            <common-list
-              :style="{ '--el-color-primary': applicationDetail?.custom_theme?.theme_color }"
-              :data="chatLogData"
-              v-loading="leftLoading"
-              :defaultActive="currentChatId"
-              @click="handleClickList"
-              @mouseenter="mouseenter"
-              @mouseleave="mouseId = ''"
-            >
-              <template #default="{ row }">
-                <div class="flex-between">
-                  <ReadWrite
-                    @change="(val: string) => updateChatName(val, row)"
-                    :data="row.abstract"
-                    trigger="manual"
-                    :write="row.writeStatus"
-                    @close="() => (row.writeStatus = false)"
-                    :maxlength="1024"
-                  />
-                  <div
-                    @click.stop
-                    v-if="mouseId === row.id && row.id !== 'new' && !row.writeStatus"
-                    class="flex"
-                  >
-                    <el-button style="padding: 0" link @click.stop="() => (row.writeStatus = true)">
-                      <el-icon>
-                        <EditPen />
-                      </el-icon>
-                    </el-button>
-                    <el-button style="padding: 0" link @click.stop="() => deleteChatLog(row)">
-                      <el-icon>
-                        <Delete />
-                      </el-icon>
-                    </el-button>
-                  </div>
-                </div>
-              </template>
-              <template #empty>
-                <div class="text-center mt-24">
-                  <el-text type="info">{{ $t('chat.noHistory') }}</el-text>
-                </div>
-              </template>
-            </common-list>
-          </div>
-          <div v-if="chatLogData.length" class="gradient-divider lighter mt-8">
-            <span>{{ $t('chat.only20history') }}</span>
-          </div>
-        </el-scrollbar>
-      </div>
-      <div class="flex align-center user-info" @click="toUserCenter">
-        <el-avatar
-          :size="32"
-          :class="`${!chatUser.chat_profile?.authentication || chatUser.chat_profile.authentication_type === 'password' ? 'cursor-default' : ''}`"
-        >
-          <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
-        </el-avatar>
-        <span v-if="chatUser.chat_profile?.authentication" class="ml-8 color-text-primary">
-          {{ chatUser.chatUserProfile?.nick_name }}
-        </span>
-      </div>
     </el-drawer>
 
-    <UserCenter v-model:show="userCenterDrawerShow" />
+    <UserCenterDrawer v-model:show="userCenterDrawerShow" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, defineModel } from 'vue'
-import { isAppIcon } from '@/utils/common'
-import { t } from '@/locales'
-import { Delete, EditPen } from '@element-plus/icons-vue'
 import useStore from '@/stores'
-import { MsgError } from '@/utils/message'
+import UserCenterDrawer from './UserCenterDrawer.vue'
-import UserCenter from './UserCenter.vue'
+import HistoryPanel from '@/views/chat/component/HistoryPanel.vue'
 
 const show = defineModel<boolean>('show')
 
@@ -110,32 +51,26 @@ const props = defineProps<{
   currentChatId: string
 }>()
 
-const emit = defineEmits(['newChat', 'clickLog', 'deleteLog'])
+const emit = defineEmits(['newChat', 'clickLog', 'deleteLog', 'refreshFieldTitle'])
 
 const { chatUser, chatLog } = useStore()
 
+const newChat = () => {
+  emit('newChat')
+}
+
 const handleClickList = (item: any) => {
   emit('clickLog', item)
 }
 
-const updateChatName = (val: string, item: any) => {
-  if (!val) return MsgError(t('views.applicationWorkflow.tip.nameMessage'))
-  const obj = { abstract: val }
-  chatLog.asyncPutChatClientLog(props.applicationDetail.id, item.id, obj, ref(false)).then(() => {
-    item.abstract = val
-    item.writeStatus = false
-  })
-}
-
 const deleteChatLog = (row: any) => {
   emit('deleteLog', row)
 }
-
+function refreshFieldTitle(chatId: string, abstract: string) {
-const mouseId = ref('')
+  emit('refreshFieldTitle', chatId, abstract)
-const mouseenter = (row: any) => {
-  mouseId.value = row.id
 }
 
+
 const userCenterDrawerShow = ref(false)
 function toUserCenter() {
   if (
@@ -148,69 +83,9 @@ function toUserCenter() {
 </script>
 
 <style lang="scss" scoped>
-:deep(.left-drawer) {
+:deep(.chat-history-drawer) {
   .el-drawer__body {
-    padding: 16px;
+    padding: 0 !important;
-    background:
-      linear-gradient(187.61deg, rgba(235, 241, 255, 0.5) 39.6%, rgba(231, 249, 255, 0.5) 94.3%),
-      #eef1f4;
-    overflow: hidden;
-
-    // .add-button {
-    //   border: 1px solid var(--el-color-primary);
-    //   color: var(--el-color-primary);
-    //   font-weight: 500;
-    // }
-
-    .left-height {
-      height: calc(100vh - 212px);
-    }
-
-    .common-list li.active {
-      background-color: #ffffff;
-      font-weight: 500;
-      color: var(--el-text-color-primary);
-      &:hover {
-        background-color: #ffffff;
-      }
-    }
-
-    .user-info {
-      border-radius: 6px;
-      padding: 4px 8px;
-      margin-top: 16px;
-      box-sizing: border-box;
-    }
-  }
-
-  .cursor-default {
-    cursor: default;
-  }
-}
-
-.gradient-divider {
-  position: relative;
-  text-align: center;
-  color: var(--el-color-info);
-
-  ::before {
-    content: '';
-    width: 17%;
-    height: 1px;
-    background: linear-gradient(90deg, rgba(222, 224, 227, 0) 0%, #dee0e3 100%);
-    position: absolute;
-    left: 16px;
-    top: 50%;
-  }
-
-  ::after {
-    content: '';
-    width: 17%;
-    height: 1px;
-    background: linear-gradient(90deg, #dee0e3 0%, rgba(222, 224, 227, 0) 100%);
-    position: absolute;
-    right: 16px;
-    top: 50%;
   }
 }
 </style>

ui/src/views/chat/mobile/component/ResetPasswordDrawer.vue

@@ -9,18 +9,29 @@
 
     <el-form ref="resetPasswordFormRef" :model="resetPasswordForm" :rules="rules">
       <el-form-item prop="password">
-        <el-input type="password" size="large" v-model="resetPasswordForm.password"
+        <el-input
-          :placeholder="$t('views.login.loginForm.new_password.placeholder')" show-password>
+          type="password"
+          size="large"
+          v-model="resetPasswordForm.password"
+          :placeholder="$t('views.login.loginForm.new_password.placeholder')"
+          show-password
+        >
         </el-input>
       </el-form-item>
       <el-form-item prop="re_password">
-        <el-input type="password" size="large" v-model="resetPasswordForm.re_password"
+        <el-input
-          :placeholder="$t('views.login.loginForm.re_password.placeholder')" show-password>
+          type="password"
+          size="large"
+          v-model="resetPasswordForm.re_password"
+          :placeholder="$t('views.login.loginForm.re_password.placeholder')"
+          show-password
+        >
         </el-input>
       </el-form-item>
     </el-form>
-    <el-button type="primary" size="large" class="w-full" @click="resetPassword">{{ $t('chat.confirmModification')
+    <el-button type="primary" size="large" class="w-full" @click="resetPassword">{{
-      }}</el-button>
+      $t('chat.confirmModification')
+    }}</el-button>
   </el-drawer>
 </template>
 
@@ -39,7 +50,7 @@ const { chatUser } = useStore()
 
 const show = defineModel<boolean>('show', {
   required: true,
-});
+})
 
 const resetPasswordFormRef = ref<FormInstance>()
 
@@ -104,11 +115,11 @@ function resetPassword() {
   .el-drawer__body {
     padding: 16px;
     padding-top: 0;
-    background: #FFFFFF;
+    background: #ffffff !important;
 
     .navigation {
       height: 44px;
     }
   }
 }
-</style>
+</style>

ui/src/views/chat/mobile/component/UserCenterDrawer.vue

@@ -11,13 +11,18 @@
         <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
       </el-avatar>
       <h2 class="mt-12 mb-4">{{ chatUser.chatUserProfile?.nick_name }}</h2>
-      <div class="color-secondary lighter">{{ `${$t('common.username')}: ${chatUser.chatUserProfile?.username}` }}</div>
+      <div class="color-secondary lighter">
+        {{ `${$t('common.username')}: ${chatUser.chatUserProfile?.username}` }}
+      </div>
     </div>
 
-    <div class="card-item reset-password flex-between" v-if="chatUser.chatUserProfile?.source === 'LOCAL'"
+    <div
-      @click="resetPassword">
+      class="card-item reset-password flex-between"
+      v-if="chatUser.chatUserProfile?.source === 'LOCAL'"
+      @click="resetPassword"
+    >
       <div class="flex align-center">
-        <AppIcon iconName="app-copy" class="mr-12"></AppIcon>
+        <el-icon class="mr-12"><Lock /></el-icon>
         <h4 class="lighter">{{ $t('views.login.resetPassword') }}</h4>
       </div>
       <el-icon size="16">
@@ -25,7 +30,11 @@
       </el-icon>
     </div>
 
-    <div v-if="chatUser.chatUserProfile?.source === 'LOCAL'" class="card-item logout" @click="logout">
+    <div
+      v-if="chatUser.chatUserProfile?.source === 'LOCAL'"
+      class="card-item logout"
+      @click="logout"
+    >
       <h4 class="lighter">{{ $t('layout.logout') }}</h4>
     </div>
 
@@ -46,7 +55,7 @@ const { chatUser } = useStore()
 
 const show = defineModel<boolean>('show', {
   required: true,
-});
+})
 
 const resetPasswordDrawerShow = ref(false)
 function resetPassword() {
@@ -54,19 +63,14 @@ function resetPassword() {
 }
 
 function logout() {
-  MsgConfirm(
+  MsgConfirm(t('layout.logout'), t('chat.logoutContent'), {
-    t('layout.logout'),
+    confirmButtonText: t('layout.logout'),
-    t('chat.logoutContent'),
+    confirmButtonClass: 'danger',
-    {
+  }).then(() => {
-      confirmButtonText: t('layout.logout'),
+    chatUser.logout().then(() => {
-      confirmButtonClass: 'danger',
+      router.push({ name: 'login' })
-    },
-  )
-    .then(() => {
-      chatUser.logout().then(() => {
-        router.push({ name: 'login' })
-      })
     })
+  })
 }
 </script>
 
@@ -76,7 +80,8 @@ function logout() {
     padding: 16px;
     padding-top: 0;
     background:
-      linear-gradient(187.61deg, rgba(235, 241, 255, 0.2) 39.6%, rgba(231, 249, 255, 0.2) 94.3%), #EFF0F1;
+      linear-gradient(187.61deg, rgba(235, 241, 255, 0.2) 39.6%, rgba(231, 249, 255, 0.2) 94.3%),
+      #eff0f1;
 
     .navigation {
       height: 44px;
@@ -89,7 +94,7 @@ function logout() {
     }
 
     .card-item {
-      background-color: #FFFFFF;
+      background-color: #ffffff;
       border-radius: 8px;
       margin-bottom: 16px;
 
@@ -105,11 +110,11 @@ function logout() {
       }
 
       &.logout {
-        color: #F54A45;
+        color: #f54a45;
         display: flex;
         justify-content: center;
       }
     }
   }
 }
-</style>
+</style>

ui/src/views/chat/mobile/index.vue

@@ -6,37 +6,44 @@
     :style="{
       '--el-color-primary': applicationDetail?.custom_theme?.theme_color,
       '--el-color-primary-light-9': hexToRgba(applicationDetail?.custom_theme?.theme_color, 0.1),
+      '--el-color-primary-light-6': hexToRgba(applicationDetail?.custom_theme?.theme_color, 0.4),
+
       backgroundImage: `url(${applicationDetail?.chat_background})`,
     }"
   >
-    <div class="chat-embed__header" :style="(user.isEE() || user.isPE()) && customStyle">
+    <div class="chat-mobile__header" :style="(user.isEE() || user.isPE()) && customStyle">
-      <div class="flex align-center">
+      <div class="flex-between">
-        <AppIcon
+        <div class="flex align-center">
-          iconName="app-mobile-open-history"
+          <AppIcon
-          style="font-size: 20px"
+            iconName="app-mobile-open-history"
-          class="ml-16 cursor"
+            style="font-size: 20px"
-          :style="{
+            class="ml-16 cursor"
-            color: applicationDetail?.custom_theme?.header_font_color,
+            :style="{
-          }"
+              color: applicationDetail?.custom_theme?.header_font_color,
-          @click.prevent.stop="show = true"
+            }"
-        />
+            @click.prevent.stop="show = true"
-        <div class="mr-12 ml-16 flex">
+          />
-          <el-avatar
+          <div class="mr-12 ml-16 flex">
-            v-if="isAppIcon(applicationDetail?.icon)"
+            <el-avatar
-            shape="square"
+              v-if="isAppIcon(applicationDetail?.icon)"
-            :size="32"
+              shape="square"
-            style="background: none"
+              :size="32"
-          >
+              style="background: none"
-            <img :src="applicationDetail?.icon" alt="" />
+            >
-          </el-avatar>
+              <img :src="applicationDetail?.icon" alt="" />
-          <LogoIcon v-else height="32px" />
+            </el-avatar>
-        </div>
+            <LogoIcon v-else height="32px" />
+          </div>
 
-        <h4>{{ applicationDetail?.name }}</h4>
+          <h4>{{ applicationDetail?.name }}</h4>
+        </div>
+        <el-button text @click="newChat" class="mr-16">
+          <AppIcon iconName="app-create-chat" style="font-size: 20px"></AppIcon>
+        </el-button>
       </div>
     </div>
     <div>
-      <div class="chat-embed__main">
+      <div class="chat-mobile__main">
         <AiChat
           ref="AiChatRef"
           v-model:applicationDetails="applicationDetail"
@@ -49,13 +56,6 @@
           @scroll="handleScroll"
           class="AiChat-embed"
         >
-          <template #operateBefore>
-            <div>
-              <el-button type="primary" link class="new-chat-button mb-8" @click="newChat">
-                <el-icon><Plus /></el-icon><span class="ml-4">{{ $t('chat.createChat') }}</span>
-              </el-button>
-            </div>
-          </template>
         </AiChat>
       </div>
 
@@ -81,7 +81,7 @@ import { t } from '@/locales'
 import ChatHistoryDrawer from './component/ChatHistoryDrawer.vue'
 import chatAPI from '@/api/chat/chat'
 
-const { user, chatLog, common } = useStore()
+const { user, common } = useStore()
 
 const AiChatRef = ref()
 const loading = ref(false)
@@ -121,7 +121,7 @@ const classObj = computed(() => {
 })
 
 function deleteLog(row: any) {
-  chatLog.asyncDelChatClientLog(applicationDetail.value.id, row.id, left_loading).then(() => {
+  chatAPI.deleteChat(row.id, left_loading).then(() => {
     if (currentChatId.value === row.id) {
       currentChatId.value = 'new'
       paginationConfig.current_page = 1
@@ -230,7 +230,7 @@ onMounted(() => {
   init()
 })
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .chat-mobile {
   overflow: hidden;
   &__header {
@@ -250,21 +250,6 @@ onMounted(() => {
     height: calc(100vh - var(--app-header-height) - 16px);
     overflow: hidden;
   }
-  .new-chat-button {
-    z-index: 11;
-    font-size: 1rem;
-  }
-
-  // &.chat-embed--popup {
-  //   .chat-popover-button {
-  //     right: 85px;
-  //   }
-  // }
-  // .AiChat-embed {
-  //   .ai-chat__operate {
-  //     padding-top: 12px;
-  //   }
-  // }
 }
 </style>
 <style lang="scss" scoped>

ui/src/views/chat/pc/index.vue

@@ -11,7 +11,7 @@
   >
     <div class="flex h-full w-full">
       <div class="chat-pc__left">
-        <history-component
+        <HistoryPanel
           :application-detail="applicationDetail"
           :chat-log-data="chatLogData"
           :left-loading="left_loading"
@@ -43,8 +43,8 @@
               </div>
 
               <template #dropdown>
-                <el-dropdown-menu class="avatar-dropdown">
+                <el-dropdown-menu style="min-width: 260px">
-                  <div class="flex align-center" style="padding: 8px 12px">
+                  <div class="flex align-center p-8">
                     <div class="mr-8 flex align-center">
                       <el-avatar :size="40">
                         <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
@@ -63,7 +63,7 @@
                     style="padding-top: 8px; padding-bottom: 8px"
                     @click="openResetPassword"
                   >
-                    <AppIcon iconName="app-export" />
+                    <el-icon><Lock /></el-icon>
                     {{ $t('views.login.resetPassword') }}
                   </el-dropdown-item>
                   <el-dropdown-item
@@ -79,7 +79,7 @@
               </template>
             </el-dropdown>
           </div>
-        </history-component>
+        </HistoryPanel>
         <el-button
           v-if="!common.isMobile()"
           class="pc-collapse cursor"
@@ -201,7 +201,7 @@ import type { ResetCurrentUserPasswordRequest } from '@/api/type/user'
 import ExecutionDetailContent from '@/components/ai-chat/component/knowledge-source-component/ExecutionDetailContent.vue'
 import ParagraphSourceContent from '@/components/ai-chat/component/knowledge-source-component/ParagraphSourceContent.vue'
 import ParagraphDocumentContent from '@/components/ai-chat/component/knowledge-source-component/ParagraphDocumentContent.vue'
-import HistoryComponent from '@/views/chat/history-component/index.vue'
+import HistoryPanel from '@/views/chat/component/HistoryPanel.vue'
 import { cloneDeep } from 'lodash'
 
 useResize()
@@ -487,9 +487,11 @@ function closeExecutionDetail() {
     .pc-collapse {
       position: absolute;
       top: 20px;
-      right: -15px;
+      right: -13px;
       box-shadow: 0px 5px 10px 0px rgba(31, 35, 41, 0.1);
       z-index: 1;
+      width: 24px;
+      height: 24px;
     }
   }
 
@@ -522,10 +524,6 @@ function closeExecutionDetail() {
       }
     }
   }
-
-  .collapse {
-    display: none;
-  }
 }
 
 .chat-width {
@@ -538,7 +536,4 @@ function closeExecutionDetail() {
     margin: 0 auto;
   }
 }
-.avatar-dropdown {
-  min-width: 240px;
-}
 </style>