首页会话功能-历史数据、创建新对话、

src/layouts/default/sider/bottomSider2.vue

@@ -14,6 +14,7 @@
               backgroundColor: isFold ? '' : '#2cb6ff',
               width: isFold ? '20px' : 'auto',
             }"
+            @click="addNew"
           >
             <span
               class="btn-text-bg"
@@ -21,7 +22,7 @@
                 backgroundImage: `url(${!isFold ? '/src/assets/images/vent/home/addB.svg' : ''})`,
               }"
             ></span>
-            <span v-if="!isFold" class="btn-text" @click="addNew">添加新对话</span>
+            <span v-if="!isFold" class="btn-text">添加新对话</span>
           </div>
           <div class="divider0"></div>
           <div
@@ -38,16 +39,21 @@
               }"
             ></span>
             <span v-if="!isFold" class="btn-text">历史对话</span>
-            <a-list style="width: 100px" :split="false">
-              <a-list-item style="padding: 5px 0 0 30px; color: #5e7081; font-size: 12px; white-space: nowrap; text-overflow: ellipsis"
-                >历史数据1</a-list-item
-              >
-              <a-list-item style="padding: 5px 0 0 30px; color: #5e7081; font-size: 12px; white-space: nowrap; text-overflow: ellipsis"
-                >历史数据12</a-list-item
-              >
-              <a-list-item style="padding: 5px 0 0 30px; color: #5e7081; font-size: 12px; white-space: nowrap; text-overflow: ellipsis"
-                >历史数据123</a-list-item
-              >
+            <a-list style="width: 100px" :split="false" :data-source="historySessions" :scroll="{ y: 400 }" class="custom-list">
+              <template #renderItem="{ item }">
+                <a-list-item
+                  :style="{
+                    padding: '5px 0 0 30px',
+                    color: '#5e7081',
+                    fontSize: '12px',
+                    whiteSpace: 'nowrap',
+                    textOverflow: 'ellipsis',
+                  }"
+                  @click="sessionsHistory(item.id)"
+                >
+                  {{ item.title ? item.title : '新会话' }}
+                </a-list-item>
+              </template>
             </a-list>
           </div>
           <div
@@ -71,13 +77,11 @@
                 <div v-else class="system-message">
                   <div class="answerIcon"></div>
                   <div class="answer-message">
-                    <!-- <div>
-                      <span>{{ message.content }}</span>
-                    </div> -->
                     <div v-html="formatMessage(message.content)"></div>
                   </div>
                 </div>
               </div>
+              <!-- </div> -->
             </div>
             <!-- 文本输入区域 -->
             <div v-if="spinning" class="thinking-area">
@@ -111,11 +115,12 @@ import { ref, onMounted, nextTick, computed } from 'vue';
 const dialogVisible = ref(false);
 const isFold = ref(false); // 是否折叠
 const inputText = ref(''); // 输入框内容
-// const messages = ref([]); // 消息列表
+const historySessions = ref([]); // 消会话历史
 const spinning = ref(false); // 加载状态
 const systemMessage = ref(''); // 系统返回信息
 const session_id = ref(''); // 会话id
 const hasCreated = ref(false); // 标志位，防止重复调用create接口
+const hasAdd = ref(false); // 标志位，防止重复调用create接口
 
 type MessageItem = {
   id: string; // 唯一标识（可用时间戳生成）
@@ -137,14 +142,19 @@ const sortedMessages = computed(() => {
 const openMenu = () => {
   dialogVisible.value = !dialogVisible.value;
   if (dialogVisible.value) {
+    // addNew();
     hasCreated.value = true;
-    addNew();
   }
 };
 const fold = () => {
   isFold.value = !isFold.value;
+  if (!isFold.value) {
+    sessionsHistoryList();
+  }
 };
+//创建新对话
 async function addNew() {
+  hasAdd.value = !hasAdd.value;
   let response = await fetch('http://182.92.126.35:6005/sessions/create', {
     method: 'post',
     headers: {
@@ -152,10 +162,22 @@ async function addNew() {
     },
   });
   const data = await response.json();
-  session_id.value = data.session_id;
+  session_id.value = data.id;
+  messageList.value = [];
 }
 //获取消息列表
 async function handleSend() {
+  if (session_id.value === '') {
+    await addNew();
+    createSessionTitle({ session_id: session_id.value, title: inputText.value });
+    sendMessage();
+  } else {
+    createSessionTitle({ session_id: session_id.value, title: inputText.value });
+    sendMessage();
+  }
+}
+//发送消息
+async function sendMessage() {
   spinning.value = true;
   // 添加用户消息
   messageList.value.push({
@@ -164,8 +186,6 @@ async function handleSend() {
     content: inputText.value,
     timestamp: Date.now(),
   });
-  // 调用接口获取答案
-  // const answer = await fetchAnswerFromAPI(question);
   const params = {
     chat_session_id: session_id.value,
     prompt: inputText.value,
@@ -189,8 +209,8 @@ async function handleSend() {
     }
 
     const data = await response.json();
-    const assistantReply = data.reply; // 获取助手回复
-    formatMessage(assistantReply);
+    const assistantReply = data.reply.content; // 获取助手回复
+    // formatMessage(assistantReply);
     systemMessage.value = assistantReply;
 
     // 添加系统回答
@@ -208,6 +228,65 @@ async function handleSend() {
     spinning.value = false; // 无论请求成功与否，都停止加载指示器
   }
 }
+
+//创建标题
+async function createSessionTitle({ session_id, title }) {
+  const params = {
+    chat_session_id: session_id,
+    prompt: title,
+  };
+  let response = await fetch('http://182.92.126.35:6005/sessions/title', {
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(params),
+  });
+  const data = await response.json();
+}
+//获取会话历史
+async function sessionsHistoryList() {
+  let response = await fetch('http://182.92.126.35:6005/sessions', {
+    method: 'get',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  const data = await response.json();
+  historySessions.value = data.chat_sessions;
+}
+//获取具体会话记录
+async function sessionsHistory(id: string) {
+  let response = await fetch(`http://182.92.126.35:6005/sessions/history_chat/?chat_session_id=${id}`, {
+    method: 'get',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  const data = await response.json();
+  if (data.chat_messages.length > 0) {
+    messageList.value = [];
+    data.chat_messages.forEach((item: any) => {
+      // role== user 用户提问
+      if (item.role === 'user') {
+        messageList.value.push({
+          id: `user_${Date.now()}`,
+          type: 'user',
+          content: item.content,
+          timestamp: Date.now(),
+        });
+      } else {
+        // role== assistant 机器回答
+        messageList.value.push({
+          id: `system_${Date.now()}`,
+          type: 'system',
+          content: item.content,
+          timestamp: Date.now(),
+        });
+      }
+    });
+  }
+}
 //格式化消息
 function formatMessage(text: string) {
   let formatted = text
@@ -225,7 +304,9 @@ function formatMessage(text: string) {
   return formatted;
 }
 // 初始化按钮定位
-onMounted(() => {});
+onMounted(() => {
+  sessionsHistoryList();
+});
 </script>
 
 <style lang="less" scoped>
@@ -239,6 +320,41 @@ onMounted(() => {});
     height: 100vh;
   }
 }
+::v-deep .zxm-list-items {
+  height: 260px !important;
+  overflow-y: auto !important;
+}
+
+/* 穿透组件作用域 */
+::v-deep .custom-list .zxm-list-items {
+  scrollbar-width: thin;
+  scrollbar-color: #1890ff #f0f0f0;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #1890ff;
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #f0f0f0;
+    border-radius: 4px;
+  }
+}
+
+::v-deep .zxm-list-items {
+  color: #1890ff;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+::v-deep .zxm-list-item:hover {
+  text-decoration: underline;
+  color: #1890ff !important;
+}
 .trigger-button {
   position: fixed;
   bottom: 10px;