vf_react/src/views/AgentChat/index.js

// src/views/AgentChat/index.js
// 超炫酷的 AI 投研助手 - HeroUI v3 现代深色主题版本
// 使用 Framer Motion 物理动画引擎 + 毛玻璃效果

import React, { useState, useEffect } from 'react';
import { Box, Flex, useToast, useColorMode } from '@chakra-ui/react';
import { useAuth } from '@contexts/AuthContext';

// 常量配置 - 从 TypeScript 模块导入
import { DEFAULT_MODEL_ID } from './constants/models';
import { DEFAULT_SELECTED_TOOLS } from './constants/tools';

// 拆分后的子组件
import LeftSidebar from './components/LeftSidebar';
import ChatArea from './components/ChatArea';
import RightSidebar from './components/RightSidebar';

// 自定义 Hooks
import { useAgentSessions, useAgentChat, useFileUpload, useAutoScroll } from './hooks';

/**
 * Agent Chat - 主组件（HeroUI v3 深色主题）
 *
 * 架构说明：
 * - Phase 1: 常量配置已提取到 constants/ 目录（TypeScript）
 * - Phase 2: UI 组件已拆分到 components/ 目录
 * - Phase 3: 业务逻辑已提取到 hooks/ 目录（TypeScript）
 *
 * 主组件职责：
 * 1. 组合各个自定义 Hooks
 * 2. 管理 UI 状态（侧边栏开关、模型选择、工具选择）
 * 3. 组合渲染子组件
 */
const AgentChat = () => {
  const { user } = useAuth();
  const toast = useToast();
  const { setColorMode } = useColorMode();

  // ==================== UI 状态（主组件管理）====================
  const [selectedModel, setSelectedModel] = useState(DEFAULT_MODEL_ID);
  const [selectedTools, setSelectedTools] = useState(DEFAULT_SELECTED_TOOLS);
  const [isLeftSidebarOpen, setIsLeftSidebarOpen] = useState(true);
  const [isRightSidebarOpen, setIsRightSidebarOpen] = useState(true);

  // ==================== 自定义 Hooks ====================

  // 文件上传 Hook
  const { uploadedFiles, fileInputRef, handleFileSelect, removeFile, clearFiles } = useFileUpload();

  // 会话管理 Hook（需要先创建 messages state）
  const [messages, setMessages] = useState([]);

  const {
    sessions,
    currentSessionId,
    setCurrentSessionId,
    isLoadingSessions,
    loadSessions,
    switchSession,
    createNewSession,
  } = useAgentSessions({
    user,
    setMessages,
  });

  // 消息处理 Hook
  const {
    inputValue,
    setInputValue,
    isProcessing,
    handleSendMessage,
    handleKeyPress,
  } = useAgentChat({
    user,
    currentSessionId,
    setCurrentSessionId,
    selectedModel,
    selectedTools,
    uploadedFiles,
    clearFiles,
    toast,
    loadSessions,
  });

  // 自动滚动 Hook
  const { messagesEndRef } = useAutoScroll(messages);

  // ==================== 输入框引用（保留在主组件）====================
  const inputRef = React.useRef(null);

  // ==================== 启用深色模式 ====================
  useEffect(() => {
    // 为 AgentChat 页面强制启用深色模式
    setColorMode('dark');
    document.documentElement.classList.add('dark');

    return () => {
      // 组件卸载时不移除,让其他页面自己控制
      // document.documentElement.classList.remove('dark');
    };
  }, [setColorMode]);

  // ==================== 渲染组件 ====================
  return (
    <Box flex={1} bg="gray.900">
      <Flex h="100%" overflow="hidden" position="relative">
        {/* 左侧栏 */}
        <LeftSidebar
          isOpen={isLeftSidebarOpen}
          onClose={() => setIsLeftSidebarOpen(false)}
          sessions={sessions}
          currentSessionId={currentSessionId}
          onSessionSwitch={switchSession}
          onNewSession={createNewSession}
          isLoadingSessions={isLoadingSessions}
          user={user}
        />

        {/* 中间聊天区 */}
        <ChatArea
          messages={messages}
          inputValue={inputValue}
          onInputChange={setInputValue}
          isProcessing={isProcessing}
          onSendMessage={handleSendMessage}
          onKeyPress={handleKeyPress}
          uploadedFiles={uploadedFiles}
          onFileSelect={handleFileSelect}
          onFileRemove={removeFile}
          selectedModel={selectedModel}
          isLeftSidebarOpen={isLeftSidebarOpen}
          isRightSidebarOpen={isRightSidebarOpen}
          onToggleLeftSidebar={() => setIsLeftSidebarOpen(true)}
          onToggleRightSidebar={() => setIsRightSidebarOpen(true)}
          onNewSession={createNewSession}
          userAvatar={user?.avatar}
          // messagesEndRef={messagesEndRef}
          inputRef={inputRef}
          fileInputRef={fileInputRef}
        />

        {/* 右侧栏 */}
        <RightSidebar
          isOpen={isRightSidebarOpen}
          onClose={() => setIsRightSidebarOpen(false)}
          selectedModel={selectedModel}
          onModelChange={setSelectedModel}
          selectedTools={selectedTools}
          onToolsChange={setSelectedTools}
          sessionsCount={sessions.length}
          messagesCount={messages.length}
        />
      </Flex>
    </Box>
  );
};

export default AgentChat;