ylhp-ai-project-manager-fronted/src/views/ai-chat/index.vue

<script setup lang="ts">
import { ref, nextTick, onUnmounted, watch } 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 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({
  name: "AiChat"
});

// 状态
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);

// SSE连接
let eventSource: EventSource | null = null;

// 消息容器引用
const messagesContainer = ref<HTMLElement | null>(null);

// 会话中的临时消息（用于流式显示）
const streamingMessage = ref<string>("");
const streamingReferences = ref<ReferencedDocVO[]>([]);

// 加载项目列表
async function loadProjects() {
  projectLoading.value = true;
  try {
    const res = await getProjectList({ pageNum: 1, pageSize: 100 });
    if (res.code === 200) {
      projects.value = res.data?.rows || [];
    }
  } catch (error) {
    console.error("加载项目列表失败:", error);
  } finally {
    projectLoading.value = false;
  }
}

// 加载会话列表
async function loadSessions(projectId?: number) {
  loading.value = true;
  try {
    const res = await getChatSessions(
      projectId || currentSession.value?.projectId || 0
    );
    if (res.code === 200) {
      sessions.value = res.data || [];
    }
  } catch (error) {
    console.error("加载会话列表失败:", error);
  } finally {
    loading.value = false;
  }
}

// 选择会话
async function selectSession(session: ChatSessionVO) {
  currentSession.value = session;
  await loadMessages(session.sessionId);
}

// 加载会话消息
async function loadMessages(sessionId: string) {
  try {
    const res = await getSessionMessages(sessionId);
    if (res.code === 200) {
      messages.value = res.data || [];
      scrollToBottom();
    }
  } catch (error) {
    console.error("加载消息失败:", error);
  }
}

// 创建新会话
async function createNewSession() {
  if (!currentSession.value?.projectId && projects.value.length === 0) {
    await loadProjects();
  }
  showProjectSelect.value = true;
}

// 选择项目后创建会话
async function handleProjectSelect(project: ProjectItem) {
  showProjectSelect.value = false;
  currentSession.value = {
    sessionId: "",
    sessionTitle: "新对话",
    projectId: Number(project.id),
    projectName: project.projectName || "",
    lastMessageTime: new Date().toISOString(),
    messageCount: 0,
    createTime: new Date().toISOString()
  };
  messages.value = [];
  streamingMessage.value = "";
  streamingReferences.value = [];
}

// 发送消息
async function sendMessage() {
  if (!inputMessage.value.trim() || sending.value) return;

  const message = inputMessage.value.trim();
  inputMessage.value = "";

  // 如果没有会话，需要先创建
  if (!currentSession.value?.projectId) {
    ElMessage.warning("请先选择项目");
    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,
    useRag: true
  });

  // 关闭之前的连接
  if (eventSource) {
    eventSource.close();
    eventSource = null;
  }

  eventSource = new EventSource(sseUrl);

  eventSource.addEventListener("start", (e: MessageEvent) => {
    const data: SSEStartData = JSON.parse(e.data);
    if (data.isNewSession || !currentSession.value.sessionId) {
      currentSession.value = {
        ...currentSession.value,
        sessionId: data.sessionId,
        sessionTitle: message.slice(0, 20)
      };
      loadSessions(currentSession.value.projectId);
    }
  });

  eventSource.addEventListener("chunk", (e: MessageEvent) => {
    const data: SSEChunkData = JSON.parse(e.data);
    streamingMessage.value += data.content;
    scrollToBottom();
  });

  eventSource.addEventListener("references", (e: MessageEvent) => {
    const data: SSEReferencesData = JSON.parse(e.data);
    streamingReferences.value = data.docs || [];
  });

  eventSource.addEventListener("complete", (e: MessageEvent) => {
    const data: SSECompleteData = JSON.parse(e.data);

    // 添加AI回复消息
    const assistantMessage: ChatMessageVO = {
      id: data.messageId,
      role: "assistant",
      content: streamingMessage.value,
      referencedDocs: streamingReferences.value,
      tokensUsed: data.tokensUsed,
      messageIndex: messages.value.length + 1,
      createTime: new Date().toISOString()
    };
    messages.value.push(assistantMessage);

    // 重置状态
    streamingMessage.value = "";
    streamingReferences.value = [];
    sending.value = false;

    eventSource?.close();
    eventSource = null;

    loadSessions(currentSession.value?.projectId);
    scrollToBottom();
  });

  eventSource.addEventListener("error", (e: MessageEvent) => {
    const data: SSEErrorData = JSON.parse(e.data);
    ElMessage.error(data.message || "对话发生错误");
    sending.value = false;
    streamingMessage.value = "";
    streamingReferences.value = [];
    eventSource?.close();
    eventSource = null;
  });

  eventSource.onerror = () => {
    ElMessage.error("连接服务器失败");
    sending.value = false;
    streamingMessage.value = "";
    streamingReferences.value = [];
    eventSource?.close();
    eventSource = null;
  };
}

// 删除会话
async function handleDeleteSession(session: ChatSessionVO) {
  try {
    await ElMessageBox.confirm("确定要删除这个会话吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    });

    const res = await deleteChatSession(session.sessionId);
    if (res.code === 200) {
      ElMessage.success("删除成功");
      loadSessions(currentSession.value?.projectId);

      if (currentSession.value?.sessionId === session.sessionId) {
        currentSession.value = null;
        messages.value = [];
      }
    }
  } catch (error) {
    if (error !== "cancel") {
      console.error("删除会话失败:", error);
    }
  }
}

// 滚动到底部
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 (eventSource) {
    eventSource.close();
    eventSource = null;
  }
});

// 初始化加载
loadProjects();
</script>

<template>
  <div class="ai-chat-container">
    <!-- 左侧会话列表 -->
    <div class="session-sidebar">
      <div class="sidebar-header">
        <h3>AI 助手</h3>
        <el-button
          type="primary"
          :icon="useRenderIcon(AddIcon)"
          @click="createNewSession"
        >
          新对话
        </el-button>
      </div>

      <!-- 项目选择 -->
      <div v-if="showProjectSelect" class="project-select-panel">
        <div class="panel-header">
          <span>选择项目</span>
          <el-button link @click="showProjectSelect = false">
            <component :is="useRenderIcon('ri/close-line')" />
          </el-button>
        </div>
        <el-scrollbar height="300px">
          <div
            v-for="project in projects"
            :key="project.id"
            class="project-item"
            @click="handleProjectSelect(project)"
          >
            <component :is="useRenderIcon('ri/folder-line')" class="mr-2" />
            {{ project.projectName }}
          </div>
        </el-scrollbar>
      </div>

      <!-- 会话列表 -->
      <el-scrollbar class="session-list">
        <div v-if="loading" class="loading-placeholder">
          <el-icon class="is-loading"
            ><component :is="useRenderIcon('ri/loader-4-line')"
          /></el-icon>
          <span>加载中...</span>
        </div>
        <template v-else>
          <div
            v-for="session in sessions"
            :key="session.sessionId"
            :class="[
              'session-item',
              { active: currentSession?.sessionId === session.sessionId }
            ]"
            @click="selectSession(session)"
          >
            <div class="session-info">
              <div class="session-title">{{ session.sessionTitle }}</div>
              <div class="session-meta">
                <span>{{ session.projectName }}</span>
                <span>{{ formatTime(session.lastMessageTime) }}</span>
              </div>
            </div>
            <el-button
              link
              class="delete-btn"
              @click.stop="handleDeleteSession(session)"
            >
              <component :is="useRenderIcon(DeleteIcon)" />
            </el-button>
          </div>
          <el-empty
            v-if="sessions.length === 0"
            description="暂无会话"
            :image-size="80"
          />
        </template>
      </el-scrollbar>
    </div>

    <!-- 右侧聊天区域 -->
    <div class="chat-main">
      <template v-if="currentSession">
        <!-- 会话头部 -->
        <div class="chat-header">
          <div class="header-info">
            <h4>{{ currentSession.sessionTitle }}</h4>
            <span class="project-name">{{ currentSession.projectName }}</span>
          </div>
          <el-button
            :icon="useRenderIcon(RefreshIcon)"
            @click="loadMessages(currentSession.sessionId)"
          >
            刷新
          </el-button>
        </div>

        <!-- 消息列表 -->
        <div ref="messagesContainer" class="messages-container">
          <div
            v-for="msg in messages"
            :key="msg.id"
            :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>

      <!-- 未选择会话时的提示 -->
      <div v-else class="empty-chat">
        <div class="empty-icon">
          <component
            :is="useRenderIcon('ri/chat-3-line')"
            style="font-size: 64px; color: var(--el-color-primary)"
          />
        </div>
        <h3>开始新的对话</h3>
        <p class="text-gray-400">选择一个项目开始与AI助手对话</p>
        <el-button type="primary" class="mt-4" @click="createNewSession">
          <template #icon>
            <component :is="useRenderIcon(AddIcon)" />
          </template>
          新建对话
        </el-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.ai-chat-container {
  display: flex;
  height: calc(100vh - 100px);
  overflow: hidden;
  background: var(--el-bg-color);
  border-radius: 8px;
}

.session-sidebar {
  display: flex;
  flex-direction: column;
  width: 280px;
  background: var(--el-fill-color-blank);
  border-right: 1px solid var(--el-border-color-light);

  .sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--el-border-color-light);

    h3 {
      margin: 0;
      font-size: 16px;
    }
  }

  .project-select-panel {
    border-bottom: 1px solid var(--el-border-color-light);

    .panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      font-weight: 500;
    }

    .project-item {
      display: flex;
      align-items: center;
      padding: 12px 16px;
      cursor: pointer;
      transition: background 0.2s;

      &:hover {
        background: var(--el-fill-color-light);
      }
    }
  }

  .session-list {
    flex: 1;
    overflow: auto;
  }

  .loading-placeholder {
    padding: 20px;
    color: var(--el-text-color-secondary);
    text-align: center;
  }

  .session-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--el-border-color-lighter);
    transition: background 0.2s;

    &:hover {
      background: var(--el-fill-color-light);
    }

    &.active {
      background: var(--el-color-primary-light-9);
    }

    .session-info {
      flex: 1;
      min-width: 0;
    }

    .session-title {
      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: 500;
      white-space: nowrap;
    }

    .session-meta {
      display: flex;
      justify-content: space-between;
      margin-top: 4px;
      font-size: 12px;
      color: var(--el-text-color-secondary);
    }

    .delete-btn {
      opacity: 0;
      transition: opacity 0.2s;
    }

    &:hover .delete-btn {
      opacity: 1;
    }
  }
}

.chat-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;

  .chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--el-border-color-light);

    .header-info {
      h4 {
        margin: 0;
        font-size: 16px;
      }

      .project-name {
        margin-left: 8px;
        font-size: 12px;
        color: var(--el-text-color-secondary);
      }
    }
  }

  .messages-container {
    flex: 1;
    padding: 20px;
    overflow: auto;

    .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 {
    padding: 16px 20px;
    background: var(--el-fill-color-blank);
    border-top: 1px solid var(--el-border-color-light);

    .input-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 12px;

      .tip {
        font-size: 12px;
        color: var(--el-text-color-secondary);
      }
    }
  }
}

.empty-chat {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .empty-icon {
    margin-bottom: 16px;
  }

  h3 {
    margin: 0 0 8px;
  }
}
</style>