[Feat 0000] AI聊天预设按源更新

src/views/vent/home/configurable/components/preset/AIChat.vue

@@ -9,6 +9,7 @@
           backgroundColor: isFold ? '' : '#2cb6ff',
           width: isFold ? '20px' : 'auto',
         }"
+        @click="addNew"
       >
         <span
           class="btn-text-bg"
@@ -16,7 +17,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
@@ -33,16 +34,19 @@
           }"
         ></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: 110px" :split="false" :data-source="historySessions" class="custom-list">
+          <template #renderItem="{ item }">
+            <a-list-item
+              :style="{
+                padding: '5px 0 0 10px',
+                color: '#5e7081',
+                fontSize: '12px',
+              }"
+              @click="sessionsHistory(item.id)"
+            >
+              {{ item.title ? item.title : '新会话' }}
+            </a-list-item>
+          </template>
         </a-list>
       </div>
       <div
@@ -66,12 +70,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">
@@ -98,49 +101,127 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, onMounted, nextTick, computed } from 'vue';
+  import { ref, onMounted, unref, nextTick, computed } from 'vue';
+  import { useUserStore } from '/@/store/modules/user';
   // 响应式变量声明
-  const dialogVisible = ref(true);
+  const dialogVisible = ref(false);
   const isFold = ref(true); // 是否折叠
   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接口
+  const userStore = useUserStore(); //获取用户信息
+  let userId = unref(userStore.getUserInfo).id;
+  // const userId = ref(0);
   type MessageItem = {
     id: string; // 唯一标识（可用时间戳生成）
     type: 'user' | 'system';
     content: string;
     timestamp: number; // 排序依据
   };
-
   const messageList = ref<MessageItem[]>([]);
   const sortedMessages = computed(() => {
     return messageList.value.sort((a, b) => a.timestamp - b.timestamp);
   });
-  // const scrollToBottom = () => {
-  //   nextTick(() => {
-  //     const container = document.querySelector('.dialog-area');
-  //     container.scrollTop = container.scrollHeight;
-  //   });
-  // };
+
+  const openMenu = () => {
+    dialogVisible.value = !dialogVisible.value;
+    if (dialogVisible.value) {
+      // addNew();
+      hasCreated.value = true;
+    }
+  };
   const fold = () => {
     isFold.value = !isFold.value;
+    if (!isFold.value) {
+      sessionsHistoryList();
+    }
   };
+  //创建新对话
   async function addNew() {
+    hasAdd.value = !hasAdd.value;
+    const params = {
+      user_id: userId,
+    };
     let response = await fetch('http://182.92.126.35:6005/sessions/create', {
       method: 'post',
       headers: {
         'Content-Type': 'application/json',
       },
+      body: JSON.stringify(params),
     });
     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({
+      id: `user_${Date.now()}`,
+      type: 'user',
+      content: inputText.value,
+      timestamp: Date.now(),
+    });
+    const params = {
+      chat_session_id: session_id.value,
+      prompt: inputText.value,
+      ref_file_ids: [],
+      thinking_enabled: false,
+    };
+    inputText.value = ''; // 清空输入框
+    //将用户输入的内容发送到后端
+    try {
+      // 将用户输入的内容发送到后端
+      let response = await fetch('http://182.92.126.35:6005/chat', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(params),
+      });
+
+      if (!response.ok) {
+        throw new Error('Network response was not ok');
+      }
+
+      const data = await response.json();
+      const assistantReply = data.reply.content; // 获取助手回复
+      // formatMessage(assistantReply);
+      systemMessage.value = assistantReply;
+
+      // 添加系统回答
+      messageList.value.push({
+        id: `system_${Date.now()}`,
+        type: 'system',
+        content: systemMessage.value,
+        timestamp: Date.now(),
+      });
+    } catch (error) {
+      // 请求失败时设置系统消息为"服务器异常"
+      systemMessage.value = '服务器异常';
+      console.error('请求失败:', error);
+    } finally {
+      spinning.value = false; // 无论请求成功与否，都停止加载指示器
+    }
+  }
+  //发送消息  流式响应
+  async function sendMessage1() {
     spinning.value = true;
     // 添加用户消息
     messageList.value.push({
@@ -149,8 +230,6 @@
       content: inputText.value,
       timestamp: Date.now(),
     });
-    // 调用接口获取答案
-    // const answer = await fetchAnswerFromAPI(question);
     const params = {
       chat_session_id: session_id.value,
       prompt: inputText.value,
@@ -159,50 +238,114 @@
     };
     inputText.value = ''; // 清空输入框
     //将用户输入的内容发送到后端
-    let response = await fetch('http://182.92.126.35:6005/chat', {
-      method: 'POST',
+    try {
+      // 将用户输入的内容发送到后端;
+      let response = await fetch('http://182.92.126.35:6005/chat_stream', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'text/event-stream; charset=utf-8',
+        },
+        body: JSON.stringify(params),
+      });
+
+      if (!response.ok) {
+        throw new Error('Network response was not ok');
+      }
+      const data = await response.json();
+      const assistantReply = data.reply.content; // 获取助手回复
+      systemMessage.value = assistantReply;
+      // 添加系统回答
+      messageList.value.push({
+        id: `system_${Date.now()}`,
+        type: 'system',
+        content: systemMessage.value,
+        timestamp: Date.now(),
+      });
+    } catch (error) {
+      // 请求失败时设置系统消息为"服务器异常"
+      systemMessage.value = '服务器异常';
+      console.error('请求失败:', error);
+    } finally {
+      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();
-    const assistantReply = data.reply; // 获取助手回复
-    systemMessage.value = assistantReply;
-    // 添加系统回答
-    messageList.value.push({
-      id: `system_${Date.now()}`,
-      type: 'system',
-      content: systemMessage.value,
-      timestamp: Date.now(),
+  }
+  //获取会话历史
+  async function sessionsHistoryList() {
+    let response = await fetch(`http://182.92.126.35:6005/sessions/?user_id=${userId}`, {
+      method: 'get',
+      headers: {
+        'Content-Type': 'application/json',
+      },
     });
-    spinning.value = false;
-  }
-  // async function handleSend() {
-  //   spinning.value = true;
-  //   userMessage.value.push({
-  //     msg: inputText.value, // 消息内容
-  //   });
-  //   inputText.value = ''; // 清空输入框
-  //   const params = {
-  //     messages: [{ role: 'user', content: inputText.value }],
-  //   };
-  //   //将用户输入的内容发送到后端
-  //   let response = await fetch('http://182.92.126.35:6005/chat', {
-  //     method: 'POST',
-  //     headers: {
-  //       'Content-Type': 'application/json',
-  //     },
-  //     body: JSON.stringify(params),
-  //   });
-  //   const data = await response.json();
-  //   spinning.value = false;
-  //   const assistantReply = data.reply; // 获取助手回复
-  //   systemMessage.value = assistantReply;
-  // }
+    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
+      // 处理换行
+      .replace(/\n\n/g, '<br>')
+      .replace(/\n###/g, '<br> ')
+      .replace(/###/g, '')
+      .replace(/---/g, '')
+      // 处理粗体
+      .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+      // 处理斜体
+      .replace(/\*(.*?)\*/g, '<em>$1</em>')
+      // 处理行内代码
+      .replace(/`([^`]+)`/g, '<code>$1</code>');
+    return formatted;
+  }
   // 初始化按钮定位
   onMounted(() => {
-    addNew();
+    sessionsHistoryList();
   });
 </script>
 
@@ -217,6 +360,39 @@
       height: 100vh;
     }
   }
+  .custom-list {
+    height: 360px;
+    overflow-y: auto;
+  }
+  /* 穿透组件作用域 */
+  ::v-deep .custom-list {
+    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-item {
+    white-space: normal; /* 禁止文本换行 */
+  }
+  ::v-deep .zxm-list-items {
+    color: #1890ff;
+  }
+  ::v-deep .zxm-list-item:hover {
+    text-decoration: underline;
+    color: #1890ff !important;
+  }
   .trigger-button {
     position: fixed;
     bottom: 10px;
@@ -375,6 +551,7 @@
     flex-direction: row;
   }
   .answerIcon {
+    flex-shrink: 0;
     margin-top: 10px;
     width: 35px;
     height: 35px;
@@ -383,7 +560,6 @@
   }
   .answer-message {
     float: left;
-    max-width: 80%;
     padding: 10px;
     margin: 10px;
     border-radius: 5px;
@@ -396,7 +572,7 @@
     display: flex;
     flex-direction: row;
     align-self: flex-start;
-    max-width: 90%;
+    width: 100%;
     padding: 12px;
     display: flex;
   }
@@ -409,7 +585,7 @@
   }
   .answer-message {
     float: left;
-    max-width: 80%;
+    width: 100%;
     padding: 10px;
     margin: 10px;
     border-radius: 5px;
@@ -427,7 +603,7 @@
     min-height: 40px; /* 避免高度塌陷 */
   }
   .message-item.user {
-    margin-bottom: 30px;
+    margin-bottom: 50px;
   }
   .input-area {
     background-color: #043256 !important;