AstroResearch/dashboard/src/pages/ResearchAgentPanel.tsx

import { useResearchAgent } from '../hooks/useResearchAgent';
import { AgentSessionSidebar } from '../components/agent/AgentSessionSidebar';
import { AgentMessageList } from '../components/agent/AgentMessageList';
import { AgentInputArea } from '../components/agent/AgentInputArea';
import type { StandardPaper } from '../types';
import type { useCitations } from '../hooks/useCitations';
import type { useLibrary } from '../hooks/useLibrary';
import type { TabId } from '../components/layout/Sidebar';

interface ResearchAgentPanelProps {
  showConfirm?: (
    message: string,
    onConfirm: () => void,
    title?: string
  ) => void;
  showAlert?: (message: string, title?: string) => void;
  openReader?: (paper: StandardPaper, skipTabSwitch?: boolean) => void;
  setActiveTab?: (tab: TabId) => void;
  citations?: ReturnType<typeof useCitations>;
  library?: ReturnType<typeof useLibrary>;
}

export function ResearchAgentPanel({
  showConfirm,
  showAlert,
  openReader,
  setActiveTab,
  citations,
  library,
}: ResearchAgentPanelProps) {
  const state = useResearchAgent({ showConfirm, showAlert });

  return (
    <div className="w-full flex-1 flex overflow-hidden bg-slate-100 rounded-lg border border-slate-200 h-full lg:h-[calc(100vh-130px)] shadow-sm">
      {/* 左侧会话列表侧栏 */}
      <AgentSessionSidebar
        sessions={state.sessions}
        currentSessionId={state.currentSessionId}
        setCurrentSessionId={state.setCurrentSessionId}
        loadingSessions={state.loadingSessions}
        searchQuery={state.searchQuery}
        setSearchQuery={state.setSearchQuery}
        searchScopeOnlyCurrent={state.searchScopeOnlyCurrent}
        setSearchScopeOnlyCurrent={state.setSearchScopeOnlyCurrent}
        searchResults={state.searchResults}
        loadingSearch={state.loadingSearch}
        collapsed={state.sidebarCollapsed}
        onToggleCollapse={state.setSidebarCollapsed}
        onNewSession={state.handleNewSession}
        onDeleteSession={state.handleDeleteSession}
      />

      {/* 右侧会话对话展示及输入面板 */}
      <div className="flex-1 flex flex-col overflow-hidden bg-white relative">
        <AgentMessageList
          turns={state.turns}
          activeTurn={state.activeTurn}
          streaming={state.streaming}
          currentSessionId={state.currentSessionId}
          expandedThoughts={state.expandedThoughts}
          expandedArgs={state.expandedArgs}
          expandedResults={state.expandedResults}
          collapsedSubAgents={state.collapsedSubAgents}
          toggleThought={state.toggleThought}
          toggleArgs={state.toggleArgs}
          toggleResult={state.toggleResult}
          toggleSubAgent={state.toggleSubAgent}
          handleRewind={state.handleRewind}
          handleRestoreRewind={state.handleRestoreRewind}
          handleRetry={state.handleRetry}
          handleBranch={state.handleBranch}
          handleSend={state.handleSend}
          scrollContainerRef={state.scrollContainerRef}
          chatEndRef={state.chatEndRef}
          handleScroll={state.handleScroll}
          showMetrics={state.showMetrics}
          setShowMetrics={state.setShowMetrics}
          showAuditLog={state.showAuditLog}
          setShowAuditLog={state.setShowAuditLog}
          hasPendingPermission={state.hasPendingPermission}
          setHasPendingPermission={state.setHasPendingPermission}
          hasPendingQuestion={state.hasPendingQuestion}
          setHasPendingQuestion={state.setHasPendingQuestion}
          showAlert={showAlert}
          sidebarCollapsed={state.sidebarCollapsed}
          setSidebarCollapsed={state.setSidebarCollapsed}
          sessions={state.sessions}
          handleDeleteSession={state.handleDeleteSession}
          loadSessionHistory={state.loadSessionHistory}
          openReader={openReader}
          setActiveTab={setActiveTab}
          citations={citations}
          library={library}
        />

        <AgentInputArea
          input={state.input}
          setInput={state.setInput}
          streaming={state.streaming}
          thinking={state.thinking}
          setThinking={state.setThinking}
          agentMode={state.agentMode}
          setAgentMode={state.setAgentMode}
          agentModes={state.agentModes}
          pendingImage={state.pendingImage}
          setPendingImage={state.setPendingImage}
          onSend={state.handleSend}
          onStop={state.handleStop}
          fileInputRef={state.fileInputRef}
          attachImage={state.attachImage}
          handlePaste={state.handlePaste}
        />
      </div>
    </div>
  );
}