mky-vent-base/src/views/ventAI/manageAssistent/components/AiAssistantModal.vue

<template>
  <a-modal
    :visible="props.visible"
    @cancel="emit('close')"
    :width="modalWidth"
    :footer="null"
    destroyOnClose
    :closable="showControls"
    :zIndex="props.zIndex"
    :get-container="getModalContainer"
    :class="['ai-assistant-modal', { fullscreen: isFullscreen }]"
  >
    <template #title>
      <div :class="['draggable-title', { 'no-drag': isFullscreen }]" @mousedown="onDragStart">"通安智风"大模型</div>
    </template>
    <!-- 最大化/还原按钮 -->
    <div v-if="showControls" class="maximize-btn" @click="toggleFullscreen">
      <div :class="['maximize-icon', { minimized: isFullscreen }]"></div>
    </div>
    <!-- 收起/展开按钮 -->
    <div class="collapse-btn" @click="togglePanel">
      <div :class="['collapse-icon', { collapsed: panelCollapsed }]"></div>
    </div>
    <div class="ai-container" @dragenter="onDragEnter" @dragover="onDragOver" @dragleave="onDragLeave" @drop="onDrop">
      <!-- 拖拽经过时的「可放置」提示。pointer-events: none 不能去掉：遮罩一旦能命中，
           它自己会连续触发 dragenter/dragleave，反馈会持续闪断 -->
      <div v-if="isDragOver" class="drop-overlay">
        <div class="drop-overlay-text">松开鼠标添加附件</div>
      </div>
      <!-- 左侧任务列表 -->
      <div :class="['task-panel-wrapper', { collapsed: panelCollapsed }]">
        <TaskListPanel
          :taskList="taskList"
          :currentTaskId="currentTaskId"
          @switch-task="switchTask"
          @create-task="createNewTask"
          @delete-task="handleDeleteTask"
          @pin-task="handlePinTask"
          @toggle-skill="toggleSkillPanel"
          @toggle-sub-agents="toggleSubAgentPanel"
          @toggle-schedules="toggleSchedulePanel"
        />
        <!-- 「技能」「子智能体」两个入口对所有角色都显示：角色差异收敛在面板内部
             （非管理员只读：隐藏创建/编辑/删除、禁用启停开关），而不是把入口整个藏掉。 -->
      </div>

      <!-- 右侧内容区：根据 activePanel 切换显示 -->
      <!-- 聊天区域 -->
      <template v-if="activePanel === 'chat'">
        <div class="chat-panel">
          <!-- 顶部任务选择器 -->
          <ChatHeader
            :currentTask="currentTask"
            :panelCollapsed="panelCollapsed"
            :canGoPrev="canGoPrev"
            :canGoNext="canGoNext"
            :currentWordUrl="currentWordUrl"
            :capsule-files="capsuleFiles"
            :capsule-links="capsuleLinks"
            :capsule-agents="capsuleAgents"
            @go-to-prev="goToPrev"
            @go-to-next="goToNext"
            @create-task="createNewTask"
            @save-title="handleSaveTitle"
            @download-word="downloadWordReport"
            @export-md="handleExportMarkdown"
            @export-word="handleExportWord"
            @file-preview="openFilePreview"
            @agent-detail-click="handleAgentDetailClick"
            @locate-message="handleLocateMessage"
          />

          <!-- 附件列表面板 -->
          <FileListPanel :visible="showFileList" :files="getCurrentTaskFiles()" @close="showFileList = false" @file-click="openFilePreview" />

          <!-- 消息列表 -->
          <ChatMessages
            ref="chatMessagesRef"
            :messages="messages"
            :history-loading="isCurrentHistoryLoading"
            @file-preview="openFilePreview"
            @download-word="downloadWordFile"
            @open-file-preview="handleOpenFilePreview"
            @ask-user-submit="handleAskUserSubmit"
            @ask-user-cancel="handleAskUserCancel"
            @agent-detail-click="handleAgentDetailClick"
            @open-markdown-tab="openMarkdownPreviewTab"
            @delete-message="handleDeleteMessage"
            @regenerate="handleRegenerate"
            @edit-resend="handleEditResend"
          />

          <!-- 任务进度条 -->
          <TodoListBar v-if="showTodoBar" :todos="currentTodos" />

          <!-- 输入区域 -->
          <!-- [审计-第四轮 M3] 重放自我方 fix/base-agent-token（M1/M2/M3）：:isAdmin 透传给输入区，
               由输入区隐藏「思考级别」切换控件；注意只隐藏"切换"，
               思考级别的读取（getModelMsg）对所有人保持开放 -->
          <ChatInputArea
            ref="chatInputRef"
            v-model="inputMessage"
            :pendingFile="pendingFile"
            :loading="loading || !!currentPendingApproval"
            :streaming="loading"
            :contextUsed="contextUsed"
            :contextMax="contextMax"
            :contextPercent="contextPercent"
            :contextBreakdown="contextBreakdown"
            :usageLimit="usageToday?.limit_tokens ?? 0"
            :usageSpent="usageToday?.spent_tokens ?? 0"
            :usageRemaining="usageToday?.remaining_tokens ?? 0"
            :usageByModel="usageToday?.by_model ?? []"
            :initialThinkLevel="thinkLevel"
            :isAdmin="isAdmin"
            :initialEditMode="editMode"
            :taskList="taskList"
            :currentTaskId="currentTaskId"
            @send="handleSendMessage"
            @stop="stopStreaming"
            @file-upload="triggerFileUpload"
            @file-change="handleFileUpload"
            @file-add="handleFileAdded"
            @remove-pending-file="removePendingFile"
            @pending-file-preview="openFilePreview"
            @think-level-change="handleThinkLevelChange"
            @edit-mode-change="handleEditModeChange"
            @update:selected-sessions="handleUpdateSelectedSessions"
            @update:selected-skill="handleUpdateSelectedSkill"
          />
        </div>

        <!-- 右侧辅助面板（标签页容器，与 chat-panel 并列，带滑入滑出动画） -->
        <Transition name="right-panel-slide" @after-leave="onPanelLeaveEnd">
          <RightPanelTabs
            v-if="currentRightPanels.tabs.length > 0"
            :tabs="currentRightPanels.tabs"
            :activeTabId="currentRightPanels.activeTabId"
            :messages="messages"
            @switch-tab="activateTab"
            @close-tab="closeTab"
            @save-success="handleSaveSuccess"
            @schedule-deleted="handleScheduleDeleted"
            @schedule-updated="handleScheduleUpdated"
            @open-schedule-session="handleOpenScheduleSession"
            @open-markdown-tab="openMarkdownPreviewTab"
          />
        </Transition>
      </template>

      <!-- 技能面板：非管理员只读（面板内部按 isAdmin 隐藏/禁用写操作） -->
      <div v-if="activePanel === 'skill'" class="right-panel full">
        <SkillPanel :is-admin="isAdmin" @close="activePanel = 'chat'" />
      </div>

      <!-- 子智能体面板：非管理员只读 -->
      <div v-if="activePanel === 'sub-agents'" class="right-panel full">
        <SubAgentPanel :is-admin="isAdmin" @close="activePanel = 'chat'" />
      </div>

      <!-- 定时任务面板 -->
      <div v-if="activePanel === 'schedules'" class="right-panel full">
        <SchedulePanel
          ref="schedulePanelRef"
          @close="activePanel = 'chat'"
          @open-session="handleOpenScheduleSession"
          @data-changed="fetchScheduleListForDetail"
        />
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
  import { ref, nextTick, watch, computed, onBeforeUnmount } from 'vue';
  import dayjs from 'dayjs';
  // [审计-第四轮 M3] 重放自我方 fix/base-agent-token（M1/M2/M3）：引入 getMe 用于按 is_admin 隐藏管理入口
  import { getDetail, deleteSession, deleteMessage, StreamError, getMe } from '/@/views/ventAI/manageAssistent/api';
  import { message, Modal } from 'ant-design-vue';
  import TaskListPanel from '/@/views/ventAI/manageAssistent/components/panels/TaskListPanel.vue';
  import ChatHeader from '/@/views/ventAI/manageAssistent/components/chat/ChatHeader.vue';
  import FileListPanel from '/@/views/ventAI/manageAssistent/components/panels/FileListPanel.vue';
  import ChatMessages from '/@/views/ventAI/manageAssistent/components/chat/ChatMessages.vue';
  import ChatInputArea from '/@/views/ventAI/manageAssistent/components/chat/ChatInputArea.vue';
  import TodoListBar from '/@/views/ventAI/manageAssistent/components/chat/TodoListBar.vue';
  import SkillPanel from '/@/views/ventAI/manageAssistent/components/panels/SkillPanel.vue';
  import SubAgentPanel from '/@/views/ventAI/manageAssistent/components/panels/SubAgentPanel.vue';
  import SchedulePanel from '/@/views/ventAI/manageAssistent/components/panels/SchedulePanel.vue';
  import RightPanelTabs from '/@/views/ventAI/manageAssistent/components/panels/RightPanelTabs.vue';
  import { getScheduleList } from '/@/views/ventAI/manageAssistent/api';
  import type { Message, ScheduleTask, Task } from '/@/views/ventAI/manageAssistent/types/index';
  import { buildCapsuleFiles, buildCapsuleLinks, buildCapsuleAgents } from '/@/views/ventAI/manageAssistent/lib/capsule';
  import { useChatStream } from '../hooks/useChatStream';
  import { useChatTasks } from '../hooks/useChatTasks';
  import { useChatPanels } from '../hooks/useChatPanels';
  import { useChatDrag } from '../hooks/useChatDrag';
  import { useChatApproval } from '../hooks/useChatApproval';
  import { useChatSend } from '../hooks/useChatSend';
  import { useChatScroll } from '../hooks/useChatScroll';
  import { useChatFiles } from '../hooks/useChatFiles';
  import { useFileDrop } from '../hooks/useFileDrop';
  import { useChatQuota } from '../hooks/useChatQuota';
  import { useChatExport } from '../hooks/useChatExport';

  interface Props {
    visible: boolean;
    // 初始即全屏显示（首页等嵌入场景）
    defaultFullscreen?: boolean;
    // 是否显示窗口控制按钮（最大化/还原、关闭）
    showControls?: boolean;
    zIndex?: number;
    // 挂载容器：不传则默认挂到 body；首页等场景传入 adaptive-container，使其与页面同坐标系、同缩放
    getContainer?: () => HTMLElement;
  }

  interface Emits {
    (e: 'close'): void;
  }

  const props = withDefaults(defineProps<Props>(), {
    defaultFullscreen: false,
    showControls: true,
  });
  const emit = defineEmits<Emits>();

  // 弹框真正渲染/被 antd 滚动锁锁定的目标：包一层 size-0 空壳，
  // 避免 antd Modal 打开时滚动锁直接改写 #adaptive-container 的宽度（导致整页缩放错乱、露出白边）
  const portalWrapper = ref<HTMLDivElement | null>(null);

  const getModalContainer = (): HTMLElement => {
    if (portalWrapper.value) return portalWrapper.value;
    const target = props.getContainer ? props.getContainer() : document.body;
    const wrapper = document.createElement('div');
    wrapper.style.cssText = 'position:absolute;top:0;left:0;width:0;height:0;';
    target.appendChild(wrapper);
    portalWrapper.value = wrapper;
    return wrapper;
  };

  // —— 会话状态与列表相关职责已下沉到 useChatTasks ——
  const {
    taskList,
    currentTaskId,
    currentTask,
    messages,
    historyLoadedTasks,
    historyLoadingTaskIds,
    setHistoryLoading,
    getDefaultMessages,
    transformHistoryToMessages,
    fetchSessionList,
    handlePinTask,
    handleSaveTitle,
    setCurrentSessionId,
  } = useChatTasks();

  // 当前任务的历史是否正在拉取：切换任务时新任务的 messages 要等接口回来才填充，
  // 消息区据此显示加载态，避免中间先闪一屏空会话缺省图。
  const isCurrentHistoryLoading = computed(() => historyLoadingTaskIds.value.includes(currentTaskId.value));

  // —— 右侧面板/标签页/全屏相关职责已下沉到 useChatPanels ——
  const {
    showFileList,
    activePanel,
    panelCollapsed,
    togglePanel,
    toggleSkillPanel,
    toggleSchedulePanel,
    toggleSubAgentPanel,
    isFullscreen,
    currentRightPanels,
    modalWidth,
    onPanelLeaveEnd,
    toggleFullscreen,
    getPanelState,
    activateTab,
    removeTab,
    closeTab,
    handleAgentDetailClick,
    handleLocateMessage,
    openMarkdownPreviewTab,
    openFilePreview,
    handleOpenFilePreview,
    handleSaveSuccess,
    getCurrentTaskFiles,
  } = useChatPanels({
    getCurrentTask: () => currentTask.value,
    getMessages: () => messages.value,
    getChatMessages: () => chatMessagesRef.value,
    getContainer: () => (props.getContainer ? props.getContainer() : document.body),
    resetModalPosition: () => drag.centerModal(),
    defaultFullscreen: !!props.defaultFullscreen,
  });

  // —— 拖拽/居中职责已下沉到 useChatDrag（与面板全屏共用 lib/modalWrap） ——
  const drag = useChatDrag({
    getIsFullscreen: () => isFullscreen.value,
    getVisible: () => props.visible,
  });
  const { onDragStart } = drag;

  // —— 待审批流程已下沉到 useChatApproval ——
  const { setTaskPendingApproval, currentPendingApproval, migrateTaskApproval, handleAskUserSubmit, handleAskUserCancel } = useChatApproval({
    getTaskList: () => taskList.value,
    getCurrentTaskId: () => currentTaskId.value,
    switchTask: (id) => switchTask(id),
    setTaskAbortController: (id, controller) => setTaskAbortController(id, controller),
    handleStreamEvent: (data, aiMsg, taskId) => chatStream.handleEvent(data, aiMsg, taskId),
    scrollToBottom: (force) => scrollToBottom(force),
    scrollToBottomThrottled: (force) => scrollToBottomThrottled(force),
    refreshUsage: () => fetchTodayUsage(),
    resetTodos: () => {
      showTodoBar.value = false;
      currentTodos.value = [];
    },
    setCurrentSessionId: (id) => setCurrentSessionId(id),
  });

  // —— 发送/流式管线已下沉到 useChatSend（handleSendMessage 作为输入框编排留在组件里） ——
  const {
    loading,
    stopStreaming,
    setTaskAbortController,
    abortAllStreams,
    getSkillRefIconUrl,
    getSessionRefIconUrl,
    sendTextOnly,
    sendWithAttachment,
    handleRegenerate,
    handleEditResend,
  } = useChatSend({
    getTaskList: () => taskList.value,
    getCurrentTaskId: () => currentTaskId.value,
    setCurrentTaskId: (taskId) => {
      currentTaskId.value = taskId;
    },
    getMessages: () => messages.value,
    setTaskList: (next) => {
      taskList.value = next;
    },
    getEditMode: () => editMode.value,
    getPendingApproval: () => currentPendingApproval.value,
    getChatMessages: () => chatMessagesRef.value,
    handleStreamEvent: (data, aiMsg, taskId) => chatStream.handleEvent(data, aiMsg, taskId),
    scrollToBottomThrottled: (force) => scrollToBottomThrottled(force),
    resetTodos: () => {
      showTodoBar.value = false;
      currentTodos.value = [];
    },
    migrateTaskApproval: (from, to) => migrateTaskApproval(from, to),
    historyLoadedTasks,
    transformHistoryToMessages,
  });

  // 胶囊聚合数据：转换逻辑内聚在 capsuleData 纯函数模块中，此处只做响应式接线
  const capsuleFiles = computed(() => buildCapsuleFiles(currentTask.value, messages.value));
  const capsuleLinks = computed(() => buildCapsuleLinks(capsuleFiles.value, messages.value));
  const capsuleAgents = computed(() => buildCapsuleAgents(messages.value, (i) => chatMessagesRef.value?.isAnswerVisible(i)));

  // 顶部上一个/下一个会话导航
  const currentTaskIndex = computed(() => taskList.value.findIndex((t) => t.id === currentTaskId.value));
  const canGoPrev = computed(() => currentTaskIndex.value > 0);
  const canGoNext = computed(() => currentTaskIndex.value >= 0 && currentTaskIndex.value < taskList.value.length - 1);

  const goToPrev = () => {
    if (!canGoPrev.value) return;
    const prevTask = taskList.value[currentTaskIndex.value - 1];
    if (prevTask) switchTask(prevTask.id);
  };

  const goToNext = () => {
    if (!canGoNext.value) return;
    const nextTask = taskList.value[currentTaskIndex.value + 1];
    if (nextTask) switchTask(nextTask.id);
  };

  // 删除单条消息：先删数据库行，后端再清空该会话内存线程，下轮从数据库重建上下文
  const handleDeleteMessage = (msg: Message) => {
    if (!msg.id) return;
    // 确认框与删除请求都是异步的，用户可能在这期间切到别的会话：记住这条消息所属的任务，
    // 写回它而不是「当前任务」，否则被删的消息会一直留在原任务里直到刷新。
    const ownerTask = currentTask.value;
    Modal.confirm({
      title: '提示',
      content: '是否删除该条消息？',
      okText: '确认',
      cancelText: '取消',
      wrapClassName: 'delete-task-confirm-modal',
      onOk: async () => {
        try {
          await deleteMessage(msg.id!);
          message.success('消息已删除');
          if (ownerTask) {
            ownerTask.messages = ownerTask.messages.filter((m) => m !== msg);
          }
        } catch {
          message.error('删除失败');
        }
      },
    });
  };
  const chatInputRef = ref<InstanceType<typeof ChatInputArea>>();
  const chatMessagesRef = ref<InstanceType<typeof ChatMessages>>();

  const scheduleListForDetail = ref<ScheduleTask[]>([]);

  const fetchScheduleListForDetail = async () => {
    try {
      const res = await getScheduleList();
      // getScheduleList 已按真实契约标注 { tasks, total }
      scheduleListForDetail.value = res?.tasks ?? [];
    } catch (e) {
      console.error('获取定时任务列表失败:', e);
      scheduleListForDetail.value = [];
      message.error('获取定时任务列表失败，定时任务详情可能不是最新');
    }
  };

  const currentTodos = ref<Array<{ content: string; status: string }>>([]);
  const showTodoBar = ref(false);

  const syncTodoBarFromMessages = () => {
    for (let i = messages.value.length - 1; i >= 0; i--) {
      const msg = messages.value[i];
      if (msg.type === 'ai' && msg.thinkingSteps) {
        for (let j = msg.thinkingSteps.length - 1; j >= 0; j--) {
          const step = msg.thinkingSteps[j];
          if (step.type === 'updated_todo_list' && step.todos) {
            currentTodos.value = [...step.todos];
            showTodoBar.value = true;
            return;
          }
        }
      }
    }
    showTodoBar.value = false;
    currentTodos.value = [];
  };

  const handleOpenScheduleSession = async (sessionId: string, prompt?: string) => {
    activePanel.value = 'chat';
    await fetchSessionList();
    await fetchScheduleListForDetail();
    const existing = taskList.value.find((t) => t.sessionId === sessionId);
    if (existing) {
      await switchTask(existing.id);
    } else {
      const newTask: Task = {
        id: sessionId,
        name: '定时任务',
        sessionId,
        messages: [],
        attachedFiles: [],
      };
      taskList.value.unshift(newTask);
      historyLoadedTasks.delete(sessionId);
      await switchTask(newTask.id);
    }

    // 如果有 prompt，自动发送消息
    if (prompt) {
      inputMessage.value = prompt;
      await nextTick();
      await handleSendMessage();
    }
  };

  const schedulePanelRef = ref();

  const handleScheduleDeleted = () => {
    const task = currentTask.value;
    if (task?.rightPanels) {
      const tab = task.rightPanels.tabs.find((t) => t.type === 'schedule');
      if (tab) removeTab(task.rightPanels, tab.id);
    }
    fetchScheduleListForDetail();
    schedulePanelRef.value?.fetchScheduleList?.();
  };

  const handleScheduleUpdated = async () => {
    await fetchScheduleListForDetail();
    // 同步标签内任务对象为最新数据（编辑/启停后）
    const task = currentTask.value;
    const tab = task?.rightPanels?.tabs.find((t) => t.type === 'schedule');
    if (tab?.type === 'schedule') {
      const fresh = scheduleListForDetail.value.find((s) => s.id === tab.task.id);
      if (fresh) tab.task = fresh;
    }
    schedulePanelRef.value?.fetchScheduleList?.();
  };

  const inputMessage = ref('');
  const selectedSessions = ref<Array<{ id: string; name: string }>>([]);
  const selectedSkill = ref<{ name: string; display_name: string } | null>(null);
  // [审计-第四轮 M3] 重放自我方 fix/base-agent-token（M1/M2/M3）：当前登录用户是否管理员
  // （TfAgents /ventAI/api/model/me 的 is_admin；原审计写 /api/me，经实测校正，见交付说明 §⑩）。
  // 默认 false = 保守语义：取不到权限信息时按非管理员处理，管理入口隐藏。
  const isAdmin = ref(false);

  // —— 以下四组职责已下沉到 composables（额度/导出/滚动/文件），组件只做接线 ——
  const { scrollToBottom, scrollToBottomThrottled } = useChatScroll(() => chatMessagesRef.value);
  const { pendingFile, activeFileReader, triggerFileUpload, handleFileUpload, addFile, removePendingFile } = useChatFiles(() => chatInputRef.value);

  // 拖拽 / 粘贴进来的文件与「选择文件」共用同一条入队路径：校验与读取分流都在 addFile 内
  const handleFileAdded = (file: File) => {
    addFile(file);
  };

  const handleDropFiles = (files: File[]) => {
    // 待发附件是单值，多文件拖入时取第一个并说明，避免用户以为全都加上了
    if (files.length > 1) message.warning('一次只能添加一个附件，已取第一个文件');
    addFile(files[0]);
  };

  const { isDragOver, dragHandlers } = useFileDrop({
    onFiles: handleDropFiles,
    isVisible: () => props.visible,
  });
  const { onDragEnter, onDragOver, onDragLeave, onDrop } = dragHandlers;
  const {
    usageToday,
    fetchTodayUsage,
    contextUsed,
    contextMax,
    contextPercent,
    contextBreakdown,
    thinkLevel,
    editMode,
    fetchModelMsg,
    fetchSessionMode,
    fetchContext,
    invalidateQuotaFetch,
    handleThinkLevelChange,
    handleEditModeChange,
  } = useChatQuota(() => getCurrentSessionId());
  const { currentWordUrl, downloadWordFile, downloadWordReport, handleExportMarkdown, handleExportWord } = useChatExport(
    () => messages.value,
    () => currentTask.value
  );

  const handleUpdateSelectedSessions = (sessions: Array<{ id: string; name: string }>) => {
    selectedSessions.value = sessions;
  };

  const handleUpdateSelectedSkill = (skill: { name: string; display_name: string } | null) => {
    selectedSkill.value = skill;
  };

  const getCurrentSessionId = (): string => {
    const currentTask = taskList.value.find((t) => t.id === currentTaskId.value);
    return currentTask?.sessionId || '';
  };

  const switchTask = async (taskId: string) => {
    activePanel.value = 'chat';

    // 单一数据源：messages 直接读当前任务，切换任务前无需把视图数组回写到旧任务
    currentTaskId.value = taskId;
    const newTask = taskList.value.find((t) => t.id === taskId);
    if (!newTask) return;

    inputMessage.value = '';
    pendingFile.value = null;
    showFileList.value = false;

    if (newTask.sessionId && !historyLoadedTasks.has(taskId)) {
      // 流式中的任务不拉历史（避免覆盖在途消息），但必须继续走完下面的初始化：
      // currentTaskId 已经切过来了，提前 return 会让上下文用量/模式/进度条/滚动全部停在上一个任务上。
      if (!newTask.isStreaming) {
        // 标记加载中：消息区据 isCurrentHistoryLoading 显示加载态，而不是先闪一屏空会话
        setHistoryLoading(taskId, true);
        try {
          const res = await getDetail(newTask.sessionId);
          const messages = res?.messages;
          if (Array.isArray(messages)) {
            newTask.messages = transformHistoryToMessages(messages);
          }
          historyLoadedTasks.add(taskId);
        } catch (error) {
          // 拉不到历史时界面会是空白会话，容易被误认为「对话丢了」，必须给出提示
          console.error('加载历史会话失败:', error);
          message.error('加载历史会话失败，请稍后重试');
        } finally {
          setHistoryLoading(taskId, false);
        }
      }
    }

    if (newTask.sessionId) {
      fetchContext(newTask.sessionId);
      fetchSessionMode(newTask.sessionId);
    } else {
      // 空白会话不拉取额度：作废在途请求，否则上一条会话的响应会盖掉下面刚重置的默认值
      invalidateQuotaFetch();
      contextUsed.value = 0;
      contextPercent.value = 0;
      contextBreakdown.value = { messages: 0, mcp: 0, skills: 0, system_prompt: 0, other: 0 };
      editMode.value = 'full';
    }

    syncTodoBarFromMessages();

    // 切换任务时检测是否为定时任务会话：自动打开/关闭定时任务详情标签
    const scheduleItem = newTask.sessionId ? scheduleListForDetail.value.find((s) => s.feedback_session_id === newTask.sessionId) : undefined;
    const panelState = getPanelState(newTask);
    const existingScheduleTab = panelState.tabs.find((t) => t.type === 'schedule');
    if (scheduleItem) {
      if (existingScheduleTab) {
        panelState.activeTabId = existingScheduleTab.id;
      } else {
        panelState.tabs.push({ id: 'schedule', type: 'schedule', title: scheduleItem.name || '定时任务', task: scheduleItem });
        panelState.activeTabId = 'schedule';
      }
    } else if (existingScheduleTab) {
      removeTab(panelState, existingScheduleTab.id);
    }

    await nextTick();
    chatMessagesRef.value?.forceScrollToBottom();
  };

  const createNewTask = () => {
    const existingBlank = taskList.value.find((t) => !t.sessionId && t.messages.length === 0);
    if (existingBlank) {
      switchTask(existingBlank.id);
      return;
    }

    const newTask: Task = {
      id: `task-${Date.now()}`,
      name: '新任务',
      sessionId: '',
      messages: getDefaultMessages(),
      attachedFiles: [],
    };

    invalidateQuotaFetch();
    contextUsed.value = 0;
    contextPercent.value = 0;
    contextBreakdown.value = { messages: 0, mcp: 0, skills: 0, system_prompt: 0, other: 0 };
    editMode.value = 'full';
    taskList.value.unshift(newTask);
    switchTask(newTask.id);
  };

  const handleDeleteTask = (task: Task, _index: number) => {
    Modal.confirm({
      title: '提示',
      content: '是否删除该对话？',
      okText: '确认',
      cancelText: '取消',
      wrapClassName: 'delete-task-confirm-modal',
      onOk: async () => {
        try {
          if (task.sessionId) {
            await deleteSession(task.sessionId);
          }
          const realIndex = taskList.value.findIndex((t) => t.id === task.id);
          if (realIndex !== -1) {
            taskList.value.splice(realIndex, 1);
          }
          if (currentTaskId.value === task.id) {
            if (taskList.value.length > 0) {
              switchTask(taskList.value[0].id);
            } else {
              // 任务已清空：没有当前任务后 messages 自动回落到空数组
              currentTaskId.value = '';
            }
          }
          message.success('删除成功');
        } catch {
          message.error('删除失败');
        }
      },
    });
  };

  const handleSendMessage = async () => {
    const hasText = inputMessage.value.trim();
    const hasFile = pendingFile.value;

    if (!hasText) {
      message.warning('请输入消息内容');
      return;
    }
    if (loading.value) return;
    if (currentPendingApproval.value) {
      message.warning('请先审批执行计划');
      return;
    }
    // 没有当前任务时（例如会话被全部删除）先建一个：消息是挂在任务上的，
    // 否则 push 出去的消息会落在视图之外的临时数组里，之后再也不会显示
    if (!currentTask.value) {
      await createNewTask();
      if (!currentTask.value) return;
    }

    const sessionPrefix = selectedSessions.value.length > 0 ? selectedSessions.value.map((s) => `#session:${s.id}`).join(' ') + ' ' : '';
    const skillPrefix = selectedSkill.value ? `#skill:${selectedSkill.value.name} ` : '';
    const userInput = skillPrefix + sessionPrefix + inputMessage.value.trim();

    let displayContent = inputMessage.value.trim();
    if (selectedSkill.value) {
      const skillIconUrl = getSkillRefIconUrl();
      displayContent = `[<img src="${skillIconUrl}" class="session-ref-icon" /> 技能：${selectedSkill.value.display_name}] ${displayContent}`;
    }
    if (selectedSessions.value.length > 0) {
      const names = selectedSessions.value.map((s) => s.name).join('、');
      const iconUrl = getSessionRefIconUrl();
      displayContent = `[<img src="${iconUrl}" class="session-ref-icon" /> 引用 ${selectedSessions.value.length} 个会话：${names}] ${displayContent}`;
    }

    const fileToSend = pendingFile.value;

    inputMessage.value = '';
    pendingFile.value = null;
    selectedSessions.value = [];
    selectedSkill.value = null;

    // 记住本次发送属于哪个任务：请求期间用户可能切到别的会话，失败时的报错必须落回发起它的任务，
    // 否则报错气泡会塞进正在看的那条会话，而发起任务的占位消息没人清理（永远停在「正在输入」）。
    const originTask = currentTask.value;

    try {
      await nextTick();
      chatMessagesRef.value?.forceScrollToBottom();

      if (hasFile) {
        await sendWithAttachment(fileToSend!, userInput, displayContent);
      } else {
        await sendTextOnly(userInput, displayContent);
      }
    } catch (error) {
      console.error('发送消息失败:', error);
      const isStreamError = error instanceof StreamError;
      const errText = isStreamError ? error.message : '发送失败，请重试';
      message.error(errText);
      if (isStreamError) fetchTodayUsage();

      // 归位到发起本次请求的任务。任务可能在请求期间被删除，那时只保留上面的提示。
      if (originTask) {
        const msgs = originTask.messages;
        const lastMsg = msgs[msgs.length - 1];
        if (lastMsg && lastMsg.type === 'ai' && lastMsg.isLoading) {
          msgs.pop();
        }
        msgs.push({
          type: 'ai',
          content: isStreamError ? error.message : '抱歉，请求失败，请稍后重试。',
          time: dayjs().format('HH:mm'),
        });
      }
    } finally {
      // 自动滚到底只对「用户仍停在这条任务上」有意义，否则会把正在看的别的会话拽到底部。
      // 按对象身份比较：任务在拿到真实 session_id 后会被改名（id 会变），用 id 比较会误判。
      if (currentTask.value === originTask) {
        await scrollToBottom(true);
      }
    }
  };

  // 统一对话流（SSE）事件管线：事件 → 消息状态的映射收敛在 hooks/useChatStream 内，
  // 本组件只注入「任务查找 / 进度条 / 用量刷新 / 待审批登记 / 答案初始化」这些视图侧钩子。
  const chatStream = useChatStream({
    findTask: (taskId) => taskList.value.find((t) => t.id === taskId),
    isCurrentTask: (taskId) => currentTaskId.value === taskId,
    setTodos: (todos) => {
      currentTodos.value = [...todos];
      showTodoBar.value = true;
    },
    refreshContext: (sessionId) => {
      fetchContext(sessionId);
    },
    refreshUsage: () => {
      fetchTodayUsage();
    },
    markPendingApproval: (taskId, sessionId, threadId) => {
      setTaskPendingApproval(taskId, sessionId, threadId);
    },
    initAskUserAnswers: (aiMsg, questions) => {
      chatMessagesRef.value?.initAskUserAnswers(aiMsg, questions);
    },
  });

  /**
   * 拉取当前登录用户的权限信息（TfAgents 的 GET /ventAI/api/model/me）。
   *
   * [审计-第四轮 M3] 重放自我方 fix/base-agent-token（M1/M2/M3）。
   * 为什么需要：TfAgents 已把「技能上传/启停、子智能体增删改、思考级别切换」等全局变更端点收归管理员
   * （用户已定案方案 B：后端返回 is_admin，前端隐藏入口），基座据此隐藏对应入口，避免非管理员点了才被 403。
   *
   * 安全语义（保守失败，历史踩坑点必须保留）：任何异常（未登录 401 / 接口未上线 404 / 网络失败）
   * 一律按「非管理员」处理——isAdmin 置 false，且不缓存结果（每次打开都重新拉取，管理员名单可能在
   * 服务端 .env 变更）。注意这只是界面可见性，真正的拦截仍在 TfAgents 后端——前端隐藏不等于安全。
   */
  const fetchMe = async () => {
    try {
      const me = await getMe();
      isAdmin.value = !!me?.is_admin;
    } catch (e) {
      // 取不到（未登录/接口未上线/令牌失效）→ 按非管理员处理，隐藏管理入口
      isAdmin.value = false;
      console.warn('获取当前用户权限失败，管理入口将隐藏:', e);
    }
  };

  // 发送流式 AI 回答的核心：推送一条空的 AI 消息 → 建 AbortController → 调 SSE → 处理 session_id 迁移 → 异常/清理。
  // 正常发送、编辑重发、重新生成都复用此函数，file 存在且带 originalFile 时走 PDF 审查流，否则走纯文本流。
  // Throttled version for SSE streaming (no await, uses rAF)
  // immediate：组件若在挂载时就已经是可见状态（例如宿主页面默认展开、或恢复了上次的展开状态），
  // false→true 的边沿不会发生，初始化就永远不执行，面板会停在空白状态。立即执行一次并让不可见分支
  // 直接返回，等价于「打开时才初始化」的懒加载语义。
  watch(
    () => props.visible,
    async (newVisible) => {
      // 关闭弹框无需任何回写：消息单一数据源直接挂在任务对象上；仅在打开时做初始化
      if (newVisible) {
        await fetchSessionList();
        fetchModelMsg();
        fetchScheduleListForDetail();
        fetchTodayUsage();
        // [审计-第四轮 M3] 重放自我方 fix/base-agent-token（M1/M2/M3）：每次打开时刷新权限（不缓存；失败置 false 见 fetchMe）
        fetchMe();

        // 去除重复的空白任务，只保留一个
        taskList.value = taskList.value.filter((task, index) => {
          if (task.sessionId) return true;
          return index === taskList.value.findIndex((t) => !t.sessionId);
        });

        // 优先回到关闭前所在的任务（如流式中的新任务），否则默认选中第一条历史记录
        const firstHistoryTask = taskList.value.find((t) => t.sessionId);
        const prevTask = taskList.value.find((t) => t.id === currentTaskId.value);

        let targetTask: Task;
        if (prevTask) {
          targetTask = prevTask;
        } else if (firstHistoryTask) {
          targetTask = firstHistoryTask;
        } else {
          // 没有历史记录时才创建空白新任务
          targetTask = {
            id: `task-${Date.now()}`,
            name: '新任务',
            sessionId: '',
            messages: getDefaultMessages(),
            attachedFiles: [],
          };
          taskList.value.unshift(targetTask);
        }

        currentTaskId.value = targetTask.id;

        // 如果是历史任务，加载其消息
        if (targetTask.sessionId && !historyLoadedTasks.has(targetTask.id)) {
          setHistoryLoading(targetTask.id, true);
          try {
            const res = await getDetail(targetTask.sessionId);
            const messages = res?.messages;
            if (Array.isArray(messages)) {
              targetTask.messages = transformHistoryToMessages(messages);
            }
            historyLoadedTasks.add(targetTask.id);
          } catch (error) {
            console.error('加载历史会话失败:', error);
            message.error('加载历史会话失败，请稍后重试');
          } finally {
            setHistoryLoading(targetTask.id, false);
          }
        }

        if (targetTask.sessionId) {
          fetchContext(targetTask.sessionId);
          fetchSessionMode(targetTask.sessionId);
        } else {
          invalidateQuotaFetch();
          contextUsed.value = 0;
          contextPercent.value = 0;
          contextBreakdown.value = { messages: 0, mcp: 0, skills: 0, system_prompt: 0, other: 0 };
          editMode.value = 'full';
        }

        syncTodoBarFromMessages();

        pendingFile.value = null;
        showFileList.value = false;
        inputMessage.value = '';

        await nextTick(() => {
          chatMessagesRef.value?.forceScrollToBottom();
        });
      }
    },
    { immediate: true }
  );

  onBeforeUnmount(() => {
    // 移除挂载空壳，避免残留
    portalWrapper.value?.remove();
    portalWrapper.value = null;
    // 组件卸载时主动断开所有任务的流式连接
    abortAllStreams();
    // Abort in-flight FileReader if any
    if (activeFileReader.value) {
      activeFileReader.value.abort();
      activeFileReader.value = null;
    }
  });
</script>

<style scoped lang="less">
  @import '../styles/tokens.less';

  .ai-container {
    display: flex;
    height: 700px;
    gap: 10px;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    /* 拖拽提示遮罩的定位基准 */
    position: relative;
  }

  /* 拖拽上传提示：z-index 低于弹框的收起/最大化按钮（10），拖拽时窗口控件仍保持可见 */
  .drop-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: @color-primary-a10;
    border: 2px dashed @color-primary-a50;
    border-radius: 4px;
  }

  .drop-overlay-text {
    padding: 8px 20px;
    border-radius: 6px;
    background: @color-panel-bg;
    border: 1px solid @color-panel-border;
    color: @color-text;
    font-size: 13px;
  }

  .collapse-btn {
    position: absolute;
    top: 16px;
    left: 24px;
    z-index: 10;
    width: 32px;
    height: 32px;
    background: #1a6696;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s;

    &:hover {
      background: #1f7ab8;
    }

    .collapse-icon {
      width: 16px;
      height: 16px;
      background-image: var(--img-chat-collapse-icon);
      background-repeat: no-repeat;
      background-size: 100% 100%;

      &.collapsed {
        background-image: var(--img-chat-expand-icon);
      }
    }
  }

  .task-panel-wrapper {
    width: 300px;
    flex-shrink: 0;
    overflow: hidden;
    transition:
      width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      margin 0.35s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.25s ease;

    &.collapsed {
      width: 0;
      margin: 0;
      opacity: 0;
    }
  }

  .chat-panel {
    flex: 1;
    display: flex;
    position: relative;
    flex-direction: column;
    background-image: var(--img-chat-panel-bg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 4px;
    overflow: hidden;
    min-width: 0;
  }

  .right-panel {
    width: calc(50% - 140px);
    height: 100%;
    display: flex;
    flex-direction: column;
    background-image: var(--img-chat-panel-bg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 4px;

    &.full {
      flex: 1;
      width: auto;
      min-width: 0;
    }
    flex-shrink: 0;
  }

  /* 右侧面板滑入滑出过渡动画 */
  :deep(.right-panel-slide-enter-active) {
    transition:
      opacity 0.3s ease,
      transform 0.3s ease;
  }

  :deep(.right-panel-slide-leave-active) {
    transition:
      opacity 0.25s ease,
      transform 0.25s ease;
  }

  :deep(.right-panel-slide-enter-from) {
    opacity: 0;
    transform: translateX(30px);
  }

  :deep(.right-panel-slide-leave-to) {
    opacity: 0;
    transform: translateX(30px);
  }

  .draggable-title {
    cursor: grab;
    user-select: none;

    &:active {
      cursor: grabbing;
    }

    &.no-drag {
      cursor: default;

      &:active {
        cursor: default;
      }
    }
  }
</style>

<style lang="less">
  @import '../styles/modal.less';
</style>