feat(ai-chat): 集成DeepChat组件重构聊天界面

- 将自定义消息列表和输入区域替换为DeepChat组件
- 新增ChatGPT组件支持历史记录传递和自定义请求处理
- 重构消息处理逻辑，简化SSE连接管理
- 改进项目选择和会话管理流程

src/views/ai-chat/index.vue

@@ -1,30 +1,26 @@
 <script setup lang="ts">
-import { ref, nextTick, onUnmounted, watch } from "vue";
+import { ref, onMounted, onUnmounted } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import {
   getChatSessions,
   getSessionMessages,
   deleteChatSession,
-  createChatSession,
   buildSSEUrl,
   type ChatSessionVO,
   type ChatMessageVO,
-  type ReferencedDocVO,
   type SSEStartData,
   type SSEChunkData,
-  type SSEReferencesData,
   type SSECompleteData,
   type SSEErrorData
 } from "@/api/ai-chat";
 import { getProjectList, type ProjectItem } from "@/api/project";
 import { createSSEConnection } from "@/utils/sse/chatSSE";
+import ChatGPT from "@/views/chatai/components/ChatGPT.vue";
 import dayjs from "dayjs";
 
-import SendIcon from "~icons/ri/send-plane-fill";
 import AddIcon from "~icons/ri/add-line";
 import DeleteIcon from "~icons/ep/delete";
-import DocumentIcon from "~icons/ri/file-text-line";
 import RefreshIcon from "~icons/ri/refresh-line";
 
 defineOptions({
@@ -36,22 +32,19 @@ const loading = ref(false);
 const sessions = ref<ChatSessionVO[]>([]);
 const currentSession = ref<ChatSessionVO | null>(null);
 const messages = ref<ChatMessageVO[]>([]);
-const inputMessage = ref("");
 const sending = ref(false);
 const projects = ref<ProjectItem[]>([]);
 const projectLoading = ref(false);
 const showProjectSelect = ref(false);
+const currentProjectId = ref<string>("");
+const didInitProjectAndSessions = ref(false);
+const activeSessionKey = ref<string>("");
+const chatRenderKey = ref(0);
+const deepChatHistory = ref<Array<{ text: string; role: "user" | "ai" }>>([]);
 
 // SSE连接关闭函数
 let abortSSE: (() => void) | null = null;
 
-// 消息容器引用
-const messagesContainer = ref<HTMLElement | null>(null);
-
-// 会话中的临时消息（用于流式显示）
-const streamingMessage = ref<string>("");
-const streamingReferences = ref<ReferencedDocVO[]>([]);
-
 // 加载项目列表
 async function loadProjects() {
   projectLoading.value = true;
@@ -69,11 +62,18 @@ async function loadProjects() {
 
 // 加载会话列表
 async function loadSessions(projectId?: string) {
+  const pid =
+    projectId ||
+    currentProjectId.value ||
+    currentSession.value?.projectId ||
+    "";
+  if (!pid) {
+    sessions.value = [];
+    return;
+  }
   loading.value = true;
   try {
-    const res = await getChatSessions(
+    const res = await getChatSessions(pid);
-      projectId || currentSession.value?.projectId || ""
-    );
     if (res.code === 200) {
       sessions.value = res.data || [];
     }
@@ -84,19 +84,54 @@ async function loadSessions(projectId?: string) {
   }
 }
 
+function setCurrentProject(project: ProjectItem) {
+  const pid = String(project.id || "");
+  if (!pid) return;
+
+  currentProjectId.value = pid;
+  if (!currentSession.value) {
+    currentSession.value = {
+      sessionId: "",
+      sessionTitle: "新对话",
+      projectId: pid,
+      projectName: project.projectName || "",
+      lastMessageTime: new Date().toISOString(),
+      messageCount: 0,
+      createTime: new Date().toISOString()
+    };
+  } else if (!currentSession.value.sessionId) {
+    currentSession.value = {
+      ...currentSession.value,
+      projectId: pid,
+      projectName: project.projectName || ""
+    };
+  }
+}
+
 // 选择会话
 async function selectSession(session: ChatSessionVO) {
   currentSession.value = session;
+  currentProjectId.value = String(session.projectId || "");
+  activeSessionKey.value = String(session.sessionId || "");
+  deepChatHistory.value = [];
+  chatRenderKey.value += 1;
   await loadMessages(session.sessionId);
 }
 
 // 加载会话消息
 async function loadMessages(sessionId: string) {
+  if (!sessionId) return;
   try {
     const res = await getSessionMessages(sessionId);
     if (res.code === 200) {
       messages.value = res.data || [];
-      scrollToBottom();
+      deepChatHistory.value = (messages.value || [])
+        .filter(m => m.role === "user" || m.role === "assistant")
+        .map(m => ({
+          text: m.content,
+          role: m.role === "user" ? "user" : "ai"
+        }));
+      chatRenderKey.value += 1;
     }
   } catch (error) {
     console.error("加载消息失败:", error);
@@ -114,136 +149,95 @@ async function createNewSession() {
 // 选择项目后创建会话
 async function handleProjectSelect(project: ProjectItem) {
   showProjectSelect.value = false;
+  const pid = String(project.id || "");
+  if (!pid) {
+    ElMessage.warning("项目ID缺失，无法创建会话");
+    return;
+  }
+  currentProjectId.value = pid;
   currentSession.value = {
     sessionId: "",
     sessionTitle: "新对话",
-    projectId: String(project.id),
+    projectId: pid,
     projectName: project.projectName || "",
     lastMessageTime: new Date().toISOString(),
     messageCount: 0,
     createTime: new Date().toISOString()
   };
   messages.value = [];
-  streamingMessage.value = "";
+  deepChatHistory.value = [];
-  streamingReferences.value = [];
+  activeSessionKey.value = `draft-${pid}-${Date.now()}`;
+  chatRenderKey.value += 1;
+  await loadSessions(currentProjectId.value);
 }
 
-// 发送消息
+async function requestAssistantReply(messageText: string): Promise<string> {
-async function sendMessage() {
+  if (!messageText.trim()) return "";
-  if (!inputMessage.value.trim() || sending.value) return;
-
-  const message = inputMessage.value.trim();
-  inputMessage.value = "";
-
-  // 如果没有会话，需要先创建
   if (!currentSession.value?.projectId) {
     ElMessage.warning("请先选择项目");
-    return;
+    return "请先选择项目";
   }
 
-  // 添加用户消息
-  const userMessage: ChatMessageVO = {
-    id: Date.now(),
-    role: "user",
-    content: message,
-    messageIndex: messages.value.length + 1,
-    createTime: new Date().toISOString()
-  };
-  messages.value.push(userMessage);
-
   sending.value = true;
-  streamingMessage.value = "";
-  streamingReferences.value = [];
-
-  // 建立SSE连接
   const sseUrl = buildSSEUrl({
     sessionId: currentSession.value.sessionId || undefined,
     projectId: currentSession.value.projectId,
-    message: message,
+    message: messageText,
     useRag: true
   });
 
-  // 关闭之前的连接
   if (abortSSE) {
     abortSSE();
     abortSSE = null;
   }
 
-  // 使用带鉴权Header的SSE连接
+  let fullText = "";
-  abortSSE = await createSSEConnection({
+  const replyText = await new Promise<string>(async resolve => {
-    url: sseUrl,
+    abortSSE = await createSSEConnection({
-    onEvent: (eventName: string, data: any) => {
+      url: sseUrl,
-      switch (eventName) {
+      onEvent: (eventName: string, data: any) => {
-        case "start": {
+        switch (eventName) {
-          const startData = data as SSEStartData;
+          case "start": {
-          if (startData.isNewSession || !currentSession.value?.sessionId) {
+            const startData = data as SSEStartData;
-            currentSession.value = {
+            if (startData.isNewSession || !currentSession.value?.sessionId) {
-              ...currentSession.value!,
+              currentSession.value = {
-              sessionId: startData.sessionId,
+                ...currentSession.value!,
-              sessionTitle: message.slice(0, 20)
+                sessionId: startData.sessionId,
-            };
+                sessionTitle: messageText.slice(0, 20)
-            loadSessions(currentSession.value.projectId);
+              };
+              loadSessions(currentSession.value.projectId);
+            }
+            break;
           }
-          break;
+          case "chunk": {
-        }
+            const chunkData = data as SSEChunkData;
-        case "chunk": {
+            fullText += chunkData.content;
-          const chunkData = data as SSEChunkData;
+            break;
-          streamingMessage.value += chunkData.content;
+          }
-          scrollToBottom();
+          case "complete": {
-          break;
+            resolve(fullText);
-        }
+            break;
-        case "references": {
+          }
-          const refData = data as SSEReferencesData;
+          case "error": {
-          streamingReferences.value = refData.docs || [];
+            const errorData = data as SSEErrorData;
-          break;
+            resolve(errorData.message || "对话发生错误");
-        }
+            break;
-        case "complete": {
-          const completeData = data as SSECompleteData;
-
-          // 添加AI回复消息
-          const assistantMessage: ChatMessageVO = {
-            id: completeData.messageId,
-            role: "assistant",
-            content: streamingMessage.value,
-            referencedDocs: streamingReferences.value,
-            tokensUsed: completeData.tokensUsed,
-            messageIndex: messages.value.length + 1,
-            createTime: new Date().toISOString()
-          };
-          messages.value.push(assistantMessage);
-
-          // 重置状态
-          streamingMessage.value = "";
-          streamingReferences.value = [];
-          sending.value = false;
-          abortSSE = null;
-
-          loadSessions(currentSession.value?.projectId);
-          scrollToBottom();
-          break;
-        }
-        case "error": {
-          const errorData = data as SSEErrorData;
-          ElMessage.error(errorData.message || "对话发生错误");
-          sending.value = false;
-          streamingMessage.value = "";
-          streamingReferences.value = [];
-          if (abortSSE) {
-            abortSSE();
-            abortSSE = null;
           }
-          break;
         }
+      },
+      onError: (error: Error) => {
+        resolve("连接服务器失败: " + error.message);
       }
-    },
+    });
-    onError: (error: Error) => {
-      ElMessage.error("连接服务器失败: " + error.message);
-      sending.value = false;
-      streamingMessage.value = "";
-      streamingReferences.value = [];
-      abortSSE = null;
-    }
   });
+
+  sending.value = false;
+  if (abortSSE) {
+    abortSSE();
+    abortSSE = null;
+  }
+  loadSessions(currentSession.value?.projectId);
+  return replyText;
 }
 
 // 删除会话
@@ -261,8 +255,19 @@ async function handleDeleteSession(session: ChatSessionVO) {
       loadSessions(currentSession.value?.projectId);
 
       if (currentSession.value?.sessionId === session.sessionId) {
-        currentSession.value = null;
         messages.value = [];
+        deepChatHistory.value = [];
+        const defaultProject = projects.value[0];
+        if (defaultProject?.id) {
+          currentSession.value = null;
+          setCurrentProject(defaultProject);
+          activeSessionKey.value = `draft-${String(defaultProject.id)}-${Date.now()}`;
+          chatRenderKey.value += 1;
+        } else {
+          currentSession.value = null;
+          activeSessionKey.value = "";
+          chatRenderKey.value += 1;
+        }
       }
     }
   } catch (error) {
@@ -272,27 +277,11 @@ async function handleDeleteSession(session: ChatSessionVO) {
   }
 }
 
-// 滚动到底部
-function scrollToBottom() {
-  nextTick(() => {
-    if (messagesContainer.value) {
-      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
-    }
-  });
-}
-
 // 格式化时间
 function formatTime(time: string) {
   return dayjs(time).format("MM-DD HH:mm");
 }
 
-// 格式化文件大小
-function formatFileSize(bytes: number) {
-  if (bytes < 1024) return bytes + " B";
-  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
-  return (bytes / (1024 * 1024)).toFixed(1) + " MB";
-}
-
 // 组件卸载时关闭SSE连接
 onUnmounted(() => {
   if (abortSSE) {
@@ -301,8 +290,28 @@ onUnmounted(() => {
   }
 });
 
-// 初始化加载
+async function initPage() {
-loadProjects();
+  await loadProjects();
+  if (!didInitProjectAndSessions.value && projects.value.length > 0) {
+    setCurrentProject(projects.value[0]);
+    didInitProjectAndSessions.value = true;
+  }
+  if (!activeSessionKey.value && currentProjectId.value) {
+    activeSessionKey.value = `draft-${currentProjectId.value}-${Date.now()}`;
+  }
+  await loadSessions();
+  const firstSession = sessions.value[0];
+  if (firstSession?.sessionId) {
+    await selectSession(firstSession);
+  } else {
+    deepChatHistory.value = [];
+    chatRenderKey.value += 1;
+  }
+}
+
+onMounted(() => {
+  initPage();
+});
 </script>
 
 <template>
@@ -394,118 +403,19 @@ loadProjects();
           </div>
           <el-button
             :icon="useRenderIcon(RefreshIcon)"
+            :disabled="!currentSession.sessionId"
             @click="loadMessages(currentSession.sessionId)"
           >
             刷新
           </el-button>
         </div>
 
-        <!-- 消息列表 -->
+        <div class="chat-body">
-        <div ref="messagesContainer" class="messages-container">
+          <ChatGPT
-          <div
+            :key="`${activeSessionKey}-${chatRenderKey}`"
-            v-for="msg in messages"
+            :history="deepChatHistory"
-            :key="msg.id"
+            :onRequest="requestAssistantReply"
-            :class="['message-item', msg.role]"
-          >
-            <div class="message-avatar">
-              <el-avatar v-if="msg.role === 'user'" :size="32">
-                <component :is="useRenderIcon('ri/user-line')" />
-              </el-avatar>
-              <el-avatar
-                v-else
-                :size="32"
-                style="
-                  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-                "
-              >
-                <component :is="useRenderIcon('ri/robot-line')" />
-              </el-avatar>
-            </div>
-            <div class="message-content">
-              <div
-                class="message-text"
-                v-html="msg.content.replace(/\n/g, '<br>')"
-              />
-              <!-- 引用文档 -->
-              <div v-if="msg.referencedDocs?.length" class="referenced-docs">
-                <div class="ref-title">
-                  <component :is="useRenderIcon(DocumentIcon)" />
-                  参考文档
-                </div>
-                <div
-                  v-for="doc in msg.referencedDocs"
-                  :key="doc.id"
-                  class="ref-doc"
-                >
-                  <span class="doc-title">{{ doc.title }}</span>
-                  <el-tag size="small" type="info"
-                    >相关度: {{ (doc.score * 100).toFixed(0) }}%</el-tag
-                  >
-                </div>
-              </div>
-              <div class="message-time">{{ formatTime(msg.createTime) }}</div>
-            </div>
-          </div>
-
-          <!-- 流式输出中的消息 -->
-          <div v-if="streamingMessage" class="message-item assistant streaming">
-            <div class="message-avatar">
-              <el-avatar
-                :size="32"
-                style="
-                  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-                "
-              >
-                <component :is="useRenderIcon('ri/robot-line')" />
-              </el-avatar>
-            </div>
-            <div class="message-content">
-              <div
-                class="message-text"
-                v-html="streamingMessage.replace(/\n/g, '<br>')"
-              />
-              <div v-if="streamingReferences.length" class="referenced-docs">
-                <div class="ref-title">
-                  <component :is="useRenderIcon(DocumentIcon)" />
-                  参考文档
-                </div>
-                <div
-                  v-for="doc in streamingReferences"
-                  :key="doc.id"
-                  class="ref-doc"
-                >
-                  <span class="doc-title">{{ doc.title }}</span>
-                  <el-tag size="small" type="info"
-                    >相关度: {{ (doc.score * 100).toFixed(0) }}%</el-tag
-                  >
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- 输入区域 -->
-        <div class="input-area">
-          <el-input
-            v-model="inputMessage"
-            type="textarea"
-            :rows="3"
-            placeholder="输入您的问题..."
-            :disabled="sending"
-            @keydown.enter.ctrl="sendMessage"
           />
-          <div class="input-actions">
-            <span class="tip">Ctrl + Enter 发送</span>
-            <el-button
-              type="primary"
-              :icon="useRenderIcon(SendIcon)"
-              :loading="sending"
-              :disabled="!inputMessage.trim()"
-              @click="sendMessage"
-            >
-              发送
-            </el-button>
-          </div>
         </div>
       </template>
 
@@ -669,109 +579,17 @@ loadProjects();
     }
   }
 
-  .messages-container {
+  .chat-body {
     flex: 1;
     padding: 20px;
-    overflow: auto;
+    overflow: hidden;
-
-    .message-item {
-      display: flex;
-      margin-bottom: 20px;
-
-      &.user {
-        flex-direction: row-reverse;
-
-        .message-content {
-          align-items: flex-end;
-        }
-
-        .message-text {
-          color: #fff;
-          background: var(--el-color-primary);
-        }
-      }
-
-      &.streaming {
-        .message-text {
-          background: var(--el-fill-color);
-        }
-      }
-
-      .message-avatar {
-        flex-shrink: 0;
-        margin: 0 12px;
-      }
-
-      .message-content {
-        display: flex;
-        flex-direction: column;
-        max-width: 70%;
-
-        .message-text {
-          padding: 12px 16px;
-          line-height: 1.6;
-          overflow-wrap: break-word;
-          background: var(--el-fill-color);
-          border-radius: 12px;
-        }
-
-        .referenced-docs {
-          padding: 8px 12px;
-          margin-top: 8px;
-          background: var(--el-fill-color-lighter);
-          border-radius: 8px;
-
-          .ref-title {
-            display: flex;
-            gap: 4px;
-            align-items: center;
-            margin-bottom: 8px;
-            font-size: 12px;
-            color: var(--el-text-color-secondary);
-          }
-
-          .ref-doc {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 4px 0;
-            font-size: 13px;
-
-            .doc-title {
-              flex: 1;
-              margin-right: 8px;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              white-space: nowrap;
-            }
-          }
-        }
-
-        .message-time {
-          margin-top: 4px;
-          font-size: 12px;
-          color: var(--el-text-color-secondary);
-        }
-      }
-    }
   }
 
-  .input-area {
+  .chat-body :deep(deep-chat) {
-    padding: 16px 20px;
+    display: block;
-    background: var(--el-fill-color-blank);
+    width: 100%;
-    border-top: 1px solid var(--el-border-color-light);
+    max-width: none;
-
+    height: 100%;
-    .input-actions {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-top: 12px;
-
-      .tip {
-        font-size: 12px;
-        color: var(--el-text-color-secondary);
-      }
-    }
   }
 }
 

src/views/chatai/components/ChatGPT.vue

@@ -1,25 +1,60 @@
 <script setup lang="ts">
 import "deep-chat";
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 
-const chatRef = ref();
+type HistoryItem = { text: string; role: "user" | "ai" };
+
+const props = withDefaults(
+  defineProps<{
+    history?: HistoryItem[];
+    onRequest?: (messageText: string) => Promise<string> | string;
+  }>(),
+  {
+    history: () => []
+  }
+);
+
+const chatRef = ref<any>();
+
+function normalizeUserText(rawMessage: any): string {
+  if (typeof rawMessage === "string") return rawMessage;
+  if (rawMessage?.text) return String(rawMessage.text);
+  return "";
+}
+
+function applyHistory() {
+  if (!chatRef.value) return;
+  chatRef.value.history = props.history || [];
+}
 
 onMounted(() => {
+  applyHistory();
   chatRef.value.demo = {
-    response: message => {
+    response: async (rawMessage: any) => {
-      console.log(message);
+      const messageText = normalizeUserText(rawMessage);
+      if (props.onRequest) {
+        const replyText = await props.onRequest(messageText);
+        return { text: replyText };
+      }
       return {
         text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
       };
     }
   };
 });
+
+watch(
+  () => props.history,
+  () => {
+    applyHistory();
+  }
+);
 </script>
 
 <template>
   <deep-chat
     ref="chatRef"
-    style="border-radius: 10px"
+    style=" width: 100%; height: 100%;border-radius: 10px"
     :messageStyles="{
       default: {
         shared: {
@@ -101,13 +136,7 @@ onMounted(() => {
       }
     }"
     :textInput="{ placeholder: { text: '发送消息' } }"
-    :history="[
+    :history="props.history"
-      { text: '李白是谁？', role: 'user' },
-      {
-        text: '李白（701年2月28日－762年），号青莲居士，又号“谪仙人”，是唐代著名的浪漫主义诗人，被后人誉为“诗仙”。',
-        role: 'ai'
-      }
-    ]"
     :demo="true"
     :connect="{ stream: true }"
   />