feat: 调整对话区域的滚动条位置

1. 将对话区域滚动条调整至紧贴浏览器边缘

src/modules/conversation-chat/DialogInput.vue

@@ -1,5 +1,6 @@
 <template>
   <div ref="input_area_container">
+    <slot name="left"></slot>
     <div class="dialog-input-area-container">
       <slot name="top"></slot>
 
@@ -38,6 +39,7 @@
         @delete="handleFileDelete"
       />
     </div>
+    <slot name="right"></slot>
   </div>
 </template>
 
@@ -340,7 +342,7 @@ defineExpose({
   display: flex;
   flex-direction: column;
 
-  box-shadow: 0 0 5px var(--color-text-4);
+  /* box-shadow: 0 0 5px var(--color-text-4); */
   border-radius: 10px;
   padding: 10px;
 

src/modules/conversation-chat/DialogList.vue

@@ -1,5 +1,7 @@
 <template>
   <a-scrollbar type="track" :style="container_style" ref="scroll_container">
+    <!-- <div class="scroll-left">左侧</div> -->
+    <slot name="left"></slot>
     <div class="dialog-list dialog-markdown-container">
       <DialogItem
         v-for="(item, index) of list"
@@ -12,6 +14,9 @@
 
       <DialogSuggestion v-if="suggestion.length !== 0" :suggestion="suggestion" />
     </div>
+
+    <!-- <div class="scroll-right">右侧</div> -->
+    <slot name="right"></slot>
   </a-scrollbar>
 </template>
 
@@ -54,7 +59,8 @@ const scroll2Bottom = useScrollBottom('scroll_container');
 const container_style = computed(() => {
   return {
     height: props.height + 'px',
-    overflow: 'auto'
+    overflow: 'auto',
+    display: 'flex'
   };
 });
 
@@ -75,5 +81,14 @@ defineExpose({
 <style lang="css" scoped>
 .dialog-list {
   color: var(--color-text-1);
+  flex-grow: 1;
+}
+
+/* .scroll-left {
+  width: 25%;
 }
+
+.scroll-right {
+  width: 25%;
+} */
 </style>

src/modules/conversation-content/DialogContent.vue

@@ -55,7 +55,7 @@ const custom_style = computed(() => {
   border-radius: 10px;
   padding: 18px;
   /* box-shadow: 0 0 5px #dedede; */
-  box-shadow: 0 0 5px var(--color-text-4);
+  /* box-shadow: 0 0 5px var(--color-text-4); */
 }
 
 .dialog-chat-answer-content code {

src/modules/conversation-item/DialogAnswer.vue

@@ -199,6 +199,10 @@ const full_refference = computed(() => {
     return null;
   }
 
+  if (Object.keys(answer.client_custom_linked_refference_full_content).length === 0) {
+    return null;
+  }
+
   return answer.client_custom_linked_refference_full_content;
 });
 
@@ -290,6 +294,6 @@ onMounted(() => {
 }
 
 .refference-files-blocks-container {
-  margin-top: 10px;
+  margin-top: 26px;
 }
 </style>

src/views/ConversationQA.vue

@@ -1,6 +1,6 @@
 <template>
   <LayoutExperience>
-    <ContentContainer>
+    <ContentContainer :containerStyle="containerStyle">
       <ChatAsideMenu />
 
       <template v-if="query_value_status === 2">
@@ -85,6 +85,11 @@ const handleBack = () => {
   router.back();
 };
 
+const containerStyle = {
+  paddingLeft: 0,
+  paddingRight: 0
+};
+
 /**
  * 检查是否存在合法的agent参数值
  * @param agent_id

src/views/conversation/ChatAsideMenu.vue

@@ -127,6 +127,8 @@ const handleAgentDelete = (agent_id) => {
   position: fixed;
   left: 0;
   top: 60px;
+
+  z-index: 999;
 }
 .chat-aside-menu {
   width: 74px;

src/views/conversation/ConversationChatContainer.vue

@@ -1,39 +1,46 @@
 <template>
   <div class="conversation-chat-container">
-    <div class="conversation-chat-left">
-      <DialogAsideLeft />
-    </div>
-
-    <div class="conversation-chat-main" ref="chat_main">
+    <div class="conversation-chat-main" ref="chat_scrren_container">
       <DialogHeader
         class="conversation-chat-header"
         :agent_info="CHAT_AGENT_INFOMATION"
         :style="{ height: header_height + 'px' }"
       />
 
-      <div class="conversation-chat-content">
-        <template v-if="show_welcome">
-          <!-- 有会话ID 获取历史记录，显示加载中状态 -->
-          <div v-if="session_id" class="conversation-chat-area history-list-loading">
-            <a-spin />
-          </div>
-
-          <!-- 无会话ID，直接对话，此时可现实欢迎消息：欢迎使用报表合并、欢迎使用文档智能、欢迎使用小数绘图 -->
-          <DialogWelcome v-if="!session_id" class="conversation-chat-area" :agent_info="CHAT_AGENT_INFOMATION" />
-        </template>
-
-        <DialogList
-          v-if="!show_welcome"
-          ref="list_scroller"
-          class="conversation-chat-area"
-          :height="list_height"
-          :width="chat_width"
-          :agent_id="agent_id"
-          :list="chat_display_list"
-          :suggestion="chat_suggestion"
-          @share="handleChatShare"
-          @submit="handleSuggestSubmit"
-        />
+      <div class="conversation-chat-content" :style="{ height: chat_height - 30 - 30 + 'px' }">
+        <div class="conversation-chat-main-container">
+          <template v-if="show_welcome">
+            <!-- 有会话ID 获取历史记录，显示加载中状态 -->
+            <div v-if="session_id" class="conversation-chat-area history-list-loading">
+              <div class="scroll-left"></div>
+              <div class="history-list-loading-container"><a-spin /></div>
+              <div class="scroll-right"></div>
+            </div>
+
+            <!-- 无会话ID，直接对话，此时可现实欢迎消息：欢迎使用报表合并、欢迎使用文档智能、欢迎使用小数绘图 -->
+            <DialogWelcome v-if="!session_id" class="conversation-chat-area" :agent_info="CHAT_AGENT_INFOMATION" />
+          </template>
+
+          <DialogList
+            v-if="!show_welcome"
+            ref="list_scroller"
+            class="conversation-chat-area"
+            :height="list_height"
+            :width="chat_width"
+            :agent_id="agent_id"
+            :list="chat_display_list"
+            :suggestion="chat_suggestion"
+            @share="handleChatShare"
+            @submit="handleSuggestSubmit"
+          >
+            <template v-slot:left>
+              <div class="scroll-left"></div>
+            </template>
+            <template v-slot:right>
+              <div class="scroll-right"></div>
+            </template>
+          </DialogList>
+        </div>
 
         <DialogInput
           ref="dialog_input"
@@ -48,15 +55,18 @@
           <template v-if="show_input_others_opts" v-slot:top>
             <DialogInputTop :menu_id="current_menu_id" :agent_info="CHAT_AGENT_INFOMATION" ref="dialog_input_top" />
           </template>
+
+          <template v-slot:left>
+            <div class="scroll-left"></div>
+          </template>
+          <template v-slot:right>
+            <div class="scroll-right"></div>
+          </template>
         </DialogInput>
       </div>
 
       <DialogFooter class="conversation-chat-footer" :style="{ height: footer_height + 'px' }" />
     </div>
-
-    <div class="conversation-chat-right">
-      <DialogAsideRight />
-    </div>
   </div>
 </template>
 
@@ -145,7 +155,7 @@ const input_height = ref(100);
 /**
  * 获取到对话区域的宽度和高度
  */
-const { width: chat_width, height: chat_height } = useEleSizeV1('chat_main');
+const { width: chat_width, height: chat_height } = useEleSizeV1('chat_scrren_container');
 
 /**
  * 对话列表区域的高度
@@ -355,7 +365,9 @@ const handleInputSizeChange = (size) => {
   const input_width = size.width;
   // const input_height = size.height;
 
-  input_height.value = size.height;
+  setTimeout(() => {
+    input_height.value = size.height;
+  });
 };
 
 /**
@@ -755,7 +767,7 @@ onUnmounted(() => {
 .conversation-chat-main {
   flex-grow: 1;
   height: 100%;
-  max-width: 960px;
+  /* max-width: 960px; */
   margin-left: auto;
   margin-right: auto;
 
@@ -772,12 +784,24 @@ onUnmounted(() => {
 
   overflow: hidden;
 }
+.conversation-chat-main-container {
+  /* height: 80%; */
+  flex-grow: 1;
+}
 .conversation-chat-area {
   flex-grow: 1;
   overflow: auto;
+  /* max-width: 960px; */
 }
 
 .history-list-loading {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  min-height: 300px;
+  width: 100%;
+}
+.history-list-loading-container {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -787,6 +811,13 @@ onUnmounted(() => {
   /* background-color: #a67777; */
   flex-shrink: 0;
 
+  /* max-width: 960px; */
+  width: 100%;
+
+  margin-left: auto;
+  margin-right: auto;
+  /* flex-grow: 1; */
+
   margin-top: 5px;
   margin-bottom: 5px;
   padding: 5px;
@@ -794,4 +825,14 @@ onUnmounted(() => {
 
   display: flex;
 }
+
+.scroll-left {
+  width: 25%;
+  flex-shrink: 0;
+}
+
+.scroll-right {
+  width: 25%;
+  flex-shrink: 0;
+}
 </style>