beaver_project/app-instance/frontend/components/chat-workbench/ChatWorkbench.tsx

'use client';

import React from 'react';

import type { ChatMessage, ProcessArtifact, ProcessEvent, ProcessRun } from '@/types';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { MessageList } from '@/components/chat-workbench/MessageList';
import { ArtifactSidebar } from '@/components/chat-workbench/ArtifactSidebar';

export function ChatWorkbench({
  messages,
  isThinking,
  messagesEndRef,
  messageViewportRef,
  processRuns,
  processEvents,
  processArtifacts,
  selectedRunId,
  onSelectRun,
  onCancelRun,
}: {
  messages: ChatMessage[];
  isThinking: boolean;
  messagesEndRef: React.RefObject<HTMLDivElement>;
  messageViewportRef: React.RefObject<HTMLDivElement>;
  processRuns: ProcessRun[];
  processEvents: ProcessEvent[];
  processArtifacts: ProcessArtifact[];
  selectedRunId: string | null;
  onSelectRun: (runId: string) => void;
  onCancelRun: (runId: string) => void;
}) {
  const selectedRun = selectedRunId
    ? processRuns.find((item) => item.run_id === selectedRunId) || null
    : null;
  const selectedRunEvents = selectedRun
    ? processEvents.filter((item) => item.run_id === selectedRun.run_id)
    : [];
  const selectedRunArtifacts = selectedRun
    ? processArtifacts.filter((item) => item.run_id === selectedRun.run_id)
    : [];
  const hasResultsPanel = Boolean(
    selectedRun &&
      (
        selectedRun.summary ||
        selectedRunEvents.length > 0 ||
        selectedRunArtifacts.length > 0
      )
  );
  const desktopColumns = hasResultsPanel
    ? 'lg:grid-cols-[minmax(0,1fr)_360px]'
    : 'lg:grid-cols-[minmax(0,1fr)]';

  return (
    <>
      <div className={`hidden lg:grid h-full ${desktopColumns}`}>
        <div className="min-h-0">
          <MessageList
            messages={messages}
            isThinking={isThinking}
            messagesEndRef={messagesEndRef}
            viewportRef={messageViewportRef}
            processRuns={processRuns}
            processEvents={processEvents}
            processArtifacts={processArtifacts}
            selectedRunId={selectedRun?.run_id || null}
            onSelectRun={onSelectRun}
            onCancelRun={onCancelRun}
          />
        </div>
        {hasResultsPanel && (
          <div className="min-h-0">
            <ArtifactSidebar
              selectedRun={selectedRun}
              events={processEvents}
              artifacts={processArtifacts}
            />
          </div>
        )}
      </div>

      <div className="lg:hidden h-full">
        {!hasResultsPanel ? (
          <MessageList
            messages={messages}
            isThinking={isThinking}
            messagesEndRef={messagesEndRef}
            viewportRef={messageViewportRef}
            processRuns={processRuns}
            processEvents={processEvents}
            processArtifacts={processArtifacts}
            selectedRunId={selectedRun?.run_id || null}
            onSelectRun={onSelectRun}
            onCancelRun={onCancelRun}
          />
        ) : (
          <Tabs defaultValue="chat" className="h-full flex flex-col">
            <div className="px-4 pt-3 border-b border-border">
              <TabsList className="grid w-full grid-cols-2">
                <TabsTrigger value="chat">聊天</TabsTrigger>
                {hasResultsPanel && <TabsTrigger value="results">结果</TabsTrigger>}
              </TabsList>
            </div>
            <TabsContent value="chat" className="flex-1 min-h-0 mt-0">
              <MessageList
                messages={messages}
                isThinking={isThinking}
                messagesEndRef={messagesEndRef}
                viewportRef={messageViewportRef}
                processRuns={processRuns}
                processEvents={processEvents}
                processArtifacts={processArtifacts}
                selectedRunId={selectedRun?.run_id || null}
                onSelectRun={onSelectRun}
                onCancelRun={onCancelRun}
              />
            </TabsContent>
            {hasResultsPanel && (
              <TabsContent value="results" className="flex-1 min-h-0 mt-0">
                <ArtifactSidebar
                  selectedRun={selectedRun}
                  events={processEvents}
                  artifacts={processArtifacts}
                />
              </TabsContent>
            )}
          </Tabs>
        )}
      </div>
    </>
  );
}