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 { ProcessLane } from '@/components/chat-workbench/ProcessLane';
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 = processRuns.find((item) => item.run_id === selectedRunId) || processRuns[0] || 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 hasProcessLane = processRuns.length > 0;
  const hasResultsPanel = Boolean(
    selectedRun &&
      (
        selectedRun.summary ||
        selectedRunEvents.length > 0 ||
        selectedRunArtifacts.length > 0
      )
  );
  const desktopColumns = hasProcessLane && hasResultsPanel
    ? 'lg:grid-cols-[minmax(0,1fr)_360px_360px]'
    : hasProcessLane
      ? 'lg:grid-cols-[minmax(0,1fr)_360px]'
      : 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}
          />
        </div>
        {hasProcessLane && (
          <div className="min-h-0">
            <ProcessLane
              runs={processRuns}
              events={processEvents}
              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">
        {!hasProcessLane && !hasResultsPanel ? (
          <MessageList
            messages={messages}
            isThinking={isThinking}
            messagesEndRef={messagesEndRef}
            viewportRef={messageViewportRef}
          />
        ) : (
          <Tabs defaultValue="chat" className="h-full flex flex-col">
            <div className="px-4 pt-3 border-b border-border">
              <TabsList
                className={`grid w-full ${
                  hasProcessLane && hasResultsPanel
                    ? 'grid-cols-3'
                    : 'grid-cols-2'
                }`}
              >
                <TabsTrigger value="chat">聊天</TabsTrigger>
                {hasProcessLane && <TabsTrigger value="process">过程</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}
              />
            </TabsContent>
            {hasProcessLane && (
              <TabsContent value="process" className="flex-1 min-h-0 mt-0">
                <ProcessLane
                  runs={processRuns}
                  events={processEvents}
                  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>
    </>
  );
}