fix(Embedded Management): Floating window mode hover sidebar supplementary interaction

Author: dataeaseShu

frontend/src/views/chat/ChatListContainer.vue

@@ -317,6 +317,9 @@ function onChatRenamed(chat: Chat) {
     .search {
       height: 32px;
       width: 100%;
+      :deep(.ed-input__wrapper) {
+        background-color: #f5f6f7;
+      }
     }
   }
 

frontend/src/views/chat/index.vue

@@ -1,4 +1,30 @@
 <template>
+  <el-popover
+    :width="280"
+    v-if="assistantStore.assistant && !assistantStore.pageEmbedded && assistantStore.type != 4"
+    placement="bottom-start"
+    popper-class="popover-chat_history popover-chat_history_small"
+  >
+    <template #reference>
+      <el-icon class="show-history_icon" style="" size="20" @click="showFloatPopover">
+        <icon_sidebar_outlined></icon_sidebar_outlined>
+      </el-icon>
+    </template>
+    <ChatListContainer
+      ref="floatPopoverRef"
+      v-model:chat-list="chatList"
+      v-model:current-chat-id="currentChatId"
+      v-model:current-chat="currentChat"
+      v-model:loading="loading"
+      :in-popover="!chatListSideBarShow"
+      @go-empty="goEmpty"
+      @on-chat-created="onChatCreated"
+      @on-click-history="onClickHistory"
+      @on-chat-deleted="onChatDeleted"
+      @on-chat-renamed="onChatRenamed"
+      @on-click-side-bar-btn="hideSideBar"
+    />
+  </el-popover>
   <el-container class="chat-container no-padding">
     <el-aside
       v-if="(isCompletePage || pageEmbedded) && chatListSideBarShow"
@@ -18,6 +44,7 @@
         @on-click-side-bar-btn="hideSideBar"
       />
     </el-aside>
+
     <div
       v-if="(!isCompletePage && !pageEmbedded) || !chatListSideBarShow"
       class="hidden-sidebar-btn"
@@ -1265,4 +1292,37 @@ onMounted(() => {
   border-radius: 12px !important;
   overflow: hidden;
 }
+
+.popover-chat_history_small {
+  height: calc(100% - 54px);
+  padding: 0 !important;
+  border: 1px solid rgba(222, 224, 227, 1);
+  border-radius: 6px;
+}
+
+.show-history_icon {
+  cursor: pointer;
+  position: absolute;
+  top: 18px;
+  left: 16px;
+  z-index: 199;
+  &::after {
+    content: '';
+    background-color: #1f23291a;
+    position: absolute;
+    border-radius: 6px;
+    width: 28px;
+    height: 28px;
+    transform: translate(-50%, -50%);
+    top: 50%;
+    left: 50%;
+    display: none;
+  }
+
+  &:hover {
+    &::after {
+      display: block;
+    }
+  }
+}
 </style>

frontend/src/views/embedded/index.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="sqlbot-assistant-container">
     <div class="header" :style="{ color: customSet.header_font_color }">
-      <el-icon size="20" @click="openHistory">
-        <icon_sidebar_outlined></icon_sidebar_outlined>
-      </el-icon>
+      <el-icon size="20"> </el-icon>
       <el-icon v-if="!logo" class="logo" size="30">
         <LOGO></LOGO>
       </el-icon>
@@ -37,7 +35,6 @@ import { onBeforeMount, nextTick, onBeforeUnmount, ref, onMounted, reactive } fr
 import ChatComponent from '@/views/chat/index.vue'
 import { request } from '@/utils/request'
 import LOGO from '@/assets/svg/logo-custom_small.svg'
-import icon_sidebar_outlined from '@/assets/embedded/icon_sidebar_outlined_nofill.svg'
 import icon_new_chat_outlined from '@/assets/svg/icon_new_chat_outlined.svg'
 import { useAppearanceStoreWithOut } from '@/stores/appearance'
 import { useRoute } from 'vue-router'