From ad1951810859522a98e36d98ee7748bf1355e419 Mon Sep 17 00:00:00 2001
From: teukkk <mengyuan.lv@fit2cloud.com>
Date: Fri, 4 Jul 2025 15:27:32 +0800
Subject: [PATCH] refactor: chat embed

---
 .../component/NodeContent.vue                 |   6 +-
 ui/src/views/chat/embed/index.vue             | 140 ++++++++++++------
 ui/src/views/chat/mobile/index.vue            |   1 +
 3 files changed, 103 insertions(+), 44 deletions(-)

diff --git a/ui/src/views/application-workflow/component/NodeContent.vue b/ui/src/views/application-workflow/component/NodeContent.vue
index e5e238842..abdc2dfb3 100644
--- a/ui/src/views/application-workflow/component/NodeContent.vue
+++ b/ui/src/views/application-workflow/component/NodeContent.vue
@@ -14,7 +14,8 @@
           <template #reference>
             <div class="list-item flex align-center border border-r-6 p-8-12 cursor" style="width: 39%"
               @click.stop="emit('clickNodes', item)" @mousedown.stop="emit('onmousedown', item)">
-              <el-avatar v-if="isAppIcon(item?.icon)" shape="square" :size="32" style="background: none">
+              <LogoIcon v-if="item.resource_type === 'application'" height="32px" />
+              <el-avatar v-else-if="isAppIcon(item?.icon)" shape="square" :size="32" style="background: none">
                 <img :src="resetUrl(item?.icon)" alt="" />
               </el-avatar>
               <el-avatar v-else class="avatar-green" shape="square" :size="32">
@@ -27,7 +28,8 @@
           <template #default>
             <div class="flex-between mb-8">
               <div class="flex align-center">
-                <el-avatar v-if="isAppIcon(item?.icon)" shape="square" :size="32" style="background: none">
+                <LogoIcon v-if="item.resource_type === 'application'" height="32px" />
+                <el-avatar v-else-if="isAppIcon(item?.icon)" shape="square" :size="32" style="background: none">
                   <img :src="resetUrl(item?.icon)" alt="" />
                 </el-avatar>
                 <el-avatar v-else class="avatar-green" shape="square" :size="32">
diff --git a/ui/src/views/chat/embed/index.vue b/ui/src/views/chat/embed/index.vue
index 47f6f25e0..f1ee259d6 100644
--- a/ui/src/views/chat/embed/index.vue
+++ b/ui/src/views/chat/embed/index.vue
@@ -11,7 +11,17 @@
   >
     <div class="chat-embed__header" :style="(user.isEE() || user.isPE()) && customStyle">
       <div class="flex align-center">
-        <div class="mr-12 ml-24 flex">
+        <!-- TODO icon更换 -->
+        <AppIcon
+          iconName="app-history-outlined"
+          style="font-size: 20px"
+          class="ml-16"
+          :style="{
+            color: applicationDetail?.custom_theme?.header_font_color,
+          }"
+          @click.prevent.stop="show = true"
+        />
+        <div class="mr-12 ml-16 flex">
           <el-avatar
             v-if="isAppIcon(applicationDetail?.icon)"
             shape="square"
@@ -50,24 +60,38 @@
         </AiChat>
       </div>
 
-      <!-- 历史记录弹出层 -->
-      <div @click.prevent.stop="show = !show" class="chat-popover-button cursor color-secondary">
-        <AppIcon
-          iconName="app-history-outlined"
-          :style="{
-            color: applicationDetail?.custom_theme?.header_font_color,
-          }"
-        ></AppIcon>
-      </div>
-
-      <el-collapse-transition>
-        <div v-show="show" class="chat-popover w-full" v-click-outside="clickoutside">
-          <div class="border-b p-16-24">
-            <span>{{ $t('chat.history') }}</span>
+      <el-drawer
+        v-model="show"
+        :with-header="false"
+        class="left-drawer"
+        direction="ltr"
+        :size="280"
+      >
+        <div>
+          <div class="flex align-center mb-16">
+            <div class="flex mr-8">
+              <el-avatar
+                v-if="isAppIcon(applicationDetail?.icon)"
+                shape="square"
+                :size="32"
+                style="background: none"
+              >
+                <img :src="applicationDetail?.icon" alt="" />
+              </el-avatar>
+              <LogoIcon v-else height="32px" />
+            </div>
+            <h4>{{ applicationDetail?.name }}</h4>
           </div>
+          <el-button class="add-button w-full primary" @click="newChat">
+            <AppIcon iconName="app-create-chat"></AppIcon>
+            <span class="ml-4">{{ $t('chat.createChat') }}</span>
+          </el-button>
+          <p class="mt-20 mb-8">{{ $t('chat.history') }}</p>
+        </div>
 
-          <el-scrollbar max-height="300">
-            <div class="p-8">
+        <div class="left-height pt-0">
+          <el-scrollbar>
+            <div>
               <common-list
                 :style="{ '--el-color-primary': applicationDetail?.custom_theme?.theme_color }"
                 :data="chatLogData"
@@ -113,9 +137,18 @@
             </div>
           </el-scrollbar>
         </div>
-      </el-collapse-transition>
-      <div class="chat-popover-mask" v-show="show"></div>
+        <div class="flex align-center user-info" @click="toUserCenter">
+          <el-avatar :size="32">
+            <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>
     </div>
+
+    <UserCenter v-model:show="userCenterDrawerShow" />
   </div>
 </template>
 <script setup lang="ts">
@@ -126,7 +159,10 @@ import { hexToRgba } from '@/utils/theme'
 import { MsgError } from '@/utils/message'
 import useStore from '@/stores'
 import { t } from '@/locales'
-const { user, chatLog } = useStore()
+import UserCenter from '../mobile/component/UserCenter.vue'
+import chatAPI from '@/api/chat/chat'
+
+const { user, chatLog, chatUser } = useStore()
 const route = useRoute()
 
 const isPopup = computed(() => {
@@ -219,13 +255,17 @@ function handleScroll(event: any) {
   }
 }
 
-function clickoutside() {
-  show.value = false
+const newObj = {
+  id: 'new',
+  abstract: t('chat.createChat'),
 }
 
 function newChat() {
   paginationConfig.current_page = 1
   currentRecordList.value = []
+  if (!chatLogData.value.some((v) => v.id === 'new')) {
+    chatLogData.value.unshift(newObj)
+  }
   currentChatId.value = 'new'
 }
 
@@ -235,7 +275,7 @@ function getChatLog(id: string) {
     page_size: 20,
   }
 
-  chatLog.asyncGetChatLogClient(id, page, left_loading).then((res: any) => {
+  chatAPI.pageChat(page.current_page, page.page_size, left_loading).then((res: any) => {
     chatLogData.value = res.data.records
     paginationConfig.current_page = 1
     paginationConfig.total = 0
@@ -248,13 +288,12 @@ function getChatLog(id: string) {
 }
 
 function getChatRecord() {
-  return chatLog
-    .asyncChatRecordLog(
-      applicationDetail.value.id,
+  return chatAPI
+    .pageChatRecord(
       currentChatId.value,
-      paginationConfig,
+      paginationConfig.current_page,
+      paginationConfig.page_size,
       loading,
-      false,
     )
     .then((res: any) => {
       paginationConfig.total = res.data.total
@@ -301,6 +340,12 @@ const init = () => {
 onMounted(() => {
   init()
 })
+
+const userCenterDrawerShow = ref(false)
+function toUserCenter() {
+  if (!chatUser.chat_profile?.authentication) return
+  userCenterDrawerShow.value = true
+}
 </script>
 <style lang="scss">
 .chat-embed {
@@ -324,23 +369,34 @@ onMounted(() => {
   }
   .new-chat-button {
     z-index: 11;
+    font-size: 1rem;
   }
   // 历史对话弹出层
-  .chat-popover {
-    position: absolute;
-    top: var(--app-header-height);
-    background: #ffffff;
-    padding-bottom: 24px;
-    z-index: 2009;
+  .left-drawer {
+    .el-drawer__body {
+      padding: 16px;
+      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);
+      }
+
+      .left-height {
+        height: calc(100vh - 212px);
+      }
+
+      .user-info {
+        border-radius: 6px;
+        padding: 4px 8px;
+        margin-top: 16px;
+        box-sizing: border-box;
+      }
+    }
   }
-  .chat-popover-button {
-    z-index: 2009;
-    position: absolute;
-    top: 16px;
-    right: 16px;
-    font-size: 22px;
-  }
-  &.chat-embed--popup {
+ &.chat-embed--popup {
     .chat-popover-button {
       right: 85px;
     }
diff --git a/ui/src/views/chat/mobile/index.vue b/ui/src/views/chat/mobile/index.vue
index 3e570adcf..2ac2a123e 100644
--- a/ui/src/views/chat/mobile/index.vue
+++ b/ui/src/views/chat/mobile/index.vue
@@ -11,6 +11,7 @@
   >
     <div class="chat-embed__header" :style="(user.isEE() || user.isPE()) && customStyle">
       <div class="flex align-center">
+        <!-- TODO icon更换 -->
         <AppIcon
           iconName="app-history-outlined"
           style="font-size: 20px"