@docyrus/ui-pro-ai-assistant 0.0.1

package/src/components/generative-tool.tsx

@@ -0,0 +1,685 @@
+'use client';
+
+import { CodeBlock, CodeBlockCopyButton } from '@docyrus/ui-pro-shared/ai';
+import {
+  Source,
+  SourcesContent,
+  SourcesTrigger,
+  Sources
+} from '@docyrus/ui-pro-shared/ai-elements/sources';
+import { Card } from '@docyrus/ui-pro-shared/components/card';
+
+import { useAssistantTranslation } from '../i18n';
+import { type ToolActionEvent } from '../types';
+
+import { CreateAgentTask } from './create-agent-task';
+import { CreateNewWorkVersion } from './create-new-work-version';
+import { ExtractWeb } from './extract-web';
+import { ForwardToAgent } from './forward-to-agent';
+import { GenerateChart } from './generate-chart';
+import { GenerativeActionButton } from './generative-action-button';
+import { MermaidDiagram } from './mermaid-diagram';
+import PreviewImage from './preview-image';
+import { RequestApproval } from './request-approval';
+import { RequestUserInput } from './request-user-input';
+import { SheetCommand } from './sheet-command';
+import { ShowAdvancedDataTable } from './show-advanced-data-table';
+import { SearchWeb } from './search-web';
+import { ShowGeneratedContentOptions } from './show-generated-content-options';
+import { ShowPeopleCards } from './show-people-cards';
+import { SubagentTool } from './subagent-tool';
+import { TextEditorTool } from './text-editor-tool';
+import { WorkCanvas } from './work-canvas';
+
+interface Part {
+  state:
+    | 'input-available'
+    | 'input-streaming'
+    | 'output-available'
+    | 'output-error'
+    | 'approval-requested'
+    | 'approval-responded'
+    | 'output-denied';
+  input?: Record<string, any>;
+  output?: any;
+  errorText?: string;
+  toolCallId: string;
+  approval?:
+    | { id: string; approved?: never; reason?: never }
+    | { id: string; approved: true; reason?: string }
+    | { id: string; approved: false; reason?: string };
+}
+
+interface GenerativeUIToolProps {
+  part: Part;
+  toolName: string;
+  onToolAction: (event: ToolActionEvent) => void;
+  openCanvasView?: (options: {
+    type: string;
+    id: string;
+    versionId?: string;
+    title?: string;
+    description?: string;
+    images?: any[];
+    contentJson?: Record<string, any> | null;
+    loaded?: boolean;
+    workId?: string;
+    commands?: any[];
+    fetchLatestVersion?: boolean;
+    [key: string]: any;
+  }) => void;
+  onUseWorkResult?: (data: {
+    workId?: string;
+    workVersionId?: string;
+    workType?: string;
+    data?: any;
+  }) => void;
+  onSendSpreadsheetCommands?: (commands: any[]) => void;
+  onForwardToAgent?: (options: { agentId: string; prompt?: string }) => void;
+  onInsertText?: (data: { text: string }) => void;
+  onReplaceText?: (data: { text: string }) => void;
+  workId?: string;
+  agent?: Record<string, any>;
+}
+
+const stringify = (val: any): string => {
+  try {
+    return typeof val === 'string' ? val : JSON.stringify(val, null, 2);
+  } catch {
+    return String(val ?? '');
+  }
+};
+
+export function GenerativeUITool({
+  part, toolName, onToolAction, openCanvasView, onUseWorkResult, onSendSpreadsheetCommands, onForwardToAgent, onInsertText, onReplaceText, workId, agent
+}: GenerativeUIToolProps) {
+  const { t } = useAssistantTranslation();
+
+  const emitToolAction = (decision: string) => {
+    onToolAction({
+      tool: toolName,
+      toolCallId: part.toolCallId,
+      decision,
+      input: part.input
+    });
+  };
+
+  // requestApproval tool
+  if (toolName === 'requestApproval') {
+    return (
+      <div className="not-prose mb-4 w-full">
+        <RequestApproval
+          state={part.state}
+          action={part.input?.action}
+          details={part.input?.details}
+          onApprove={() => emitToolAction('approve')}
+          onReject={() => emitToolAction('continue')} />
+      </div>
+    );
+  }
+
+  // previewCode tool
+  if (
+    toolName === 'previewCode'
+    && (part.state === 'input-available' || part.state === 'input-streaming' || part.state === 'output-available')
+  ) {
+    return (
+      <div className="not-prose mb-4 w-full">
+        <Card
+          className="p-4 cursor-pointer hover:bg-accent/50 transition-colors"
+          onClick={() => openCanvasView?.({
+            type: 'code',
+            id: part.output?.id || '',
+            title: part.input?.title,
+            description: part.input?.description
+          })}>
+          <h3 className="font-semibold text-sm mb-2">{part.input?.title || t('descriptions.code_preview')}</h3>
+          {part.input?.description && <p className="text-xs text-muted-foreground mb-2">{part.input?.description}</p>}
+          <div className="text-xs text-muted-foreground">{t('messages.click_to_view_code')} →</div>
+        </Card>
+      </div>
+    );
+  }
+
+  // generateImage/previewImage tool
+  if (
+    toolName === 'generateImage'
+    && (part.state === 'input-available' || part.state === 'input-streaming' || part.state === 'output-available')
+  ) {
+    // Handle completed state with images
+    if (part.state === 'output-available' && part.output?.status === 'success' && part.output?.result?.images) {
+      return (
+        <div className="not-prose mb-4 w-full">
+          <PreviewImage
+            title={part.input?.prompt}
+            images={part.output.result.images}
+            onOpen={() => openCanvasView?.({
+              type: 'image',
+              id: part.output.result.workId || part.output.result.id || '',
+              title: part.input?.prompt,
+              images: part.output.result.images
+            })} />
+        </div>
+      );
+    }
+
+    // Loading state (input-streaming, input-available, or output loading)
+    return (
+      <div className="not-prose mb-4 w-full">
+        <div className="rounded-lg border bg-card p-3">
+          <div className="text-xs font-medium text-muted-foreground mb-1">{t('messages.generating_image')}</div>
+          <div className="text-sm">{part.output?.text || t('messages.generating_image_message')}</div>
+        </div>
+      </div>
+    );
+  }
+
+  // showImage tool
+  if (
+    toolName === 'showImage'
+    && (part.state === 'input-available' || part.state === 'input-streaming' || part.state === 'output-available')
+  ) {
+    return (
+      <div className="not-prose mb-4 w-full">
+        <PreviewImage
+          title={part.input?.title}
+          images={part.input?.images} />
+      </div>
+    );
+  }
+
+  // showAdvancedDataTable tool
+  if (toolName === 'showAdvancedDataTable') {
+    return (
+      <div className="not-prose mb-4 w-full">
+        <ShowAdvancedDataTable
+          state={part.state}
+          errorText={part.errorText}
+          title={part.input?.title}
+          description={part.input?.description}
+          additionalComments={part.input?.additionalComments}
+          data={part.input?.data}
+          columns={part.input?.columns}
+          enableTree={part.input?.enableTree}
+          treeChildrenField={part.input?.treeChildrenField} />
+      </div>
+    );
+  }
+
+  // record form tools
+  if (
+    toolName === 'showCreateRecordForm'
+    || toolName === 'showUpdateRecordForm'
+    || toolName === 'showRecordDetailsForm'
+  ) {
+    const recordMode = toolName === 'showCreateRecordForm' ? 'add' : toolName === 'showUpdateRecordForm' ? 'edit' : 'view';
+
+    const dataSourceId = part.input?.dataSourceId
+      || part.output?.result?.dataSourceId;
+
+    const recordDefaultValues = part.input?.defaultValues
+      || part.output?.result?.defaultValues;
+
+    const recordId = part.input?.recordId || part.output?.result?.recordId;
+
+    return (
+      <div className="not-prose mb-4 w-full">
+        <GenerativeActionButton
+          action={toolName}
+          data={part.input}
+          title={part.output?.text}
+          icon={part.output?.icon}
+          onAction={(action, data) => {
+            openCanvasView?.({
+              type: 'record',
+              id: `record-${Date.now()}`,
+              title: part.output?.text || action,
+              dataSourceId,
+              data: recordDefaultValues,
+              mode: recordMode,
+              recordId
+            } as any);
+            onToolAction({
+              tool: action,
+              toolCallId: part.toolCallId,
+              decision: 'open',
+              input: data
+            });
+          }} />
+      </div>
+    );
+  }
+
+  // previewMermaidDiagram tool
+  if (toolName === 'previewMermaidDiagram') {
+    return (
+      <div className="not-prose mb-4 w-full">
+        <MermaidDiagram
+          title={part.output?.text ?? part.input?.title}
+          description={part.input?.description}
+          mermaidNotation={part.input?.mermaidNotation ?? ''}
+          state={part.state} />
+      </div>
+    );
+  }
+
+  // generateChart tool
+  if (toolName === 'generateChart') {
+    return (
+      <div className="not-prose mb-4 w-full">
+        <GenerateChart
+          spec={part.output?.result?.spec}
+          time={part.output?.result?.time}
+          state={part.state}
+          errorText={part.errorText}
+          title={part.output?.text ?? part.input?.title}
+          description={part.input?.description} />
+      </div>
+    );
+  }
+
+  // saveTextWork tool
+  if (
+    toolName === 'saveTextWork'
+    && (part.state === 'input-available' || part.state === 'input-streaming' || part.state === 'output-available')
+  ) {
+    return (
+      <div className="not-prose mb-4 w-full">
+        <WorkCanvas
+          title={part.output?.text || part.input?.title}
+          description={part.input?.description}
+          id={part.output?.result?.workId || ''}
+          content={part.input?.content || ''}
+          state={part.state}
+          onOpen={() => openCanvasView?.({
+            type: 'text',
+            id: part.output?.result?.workId || '',
+            versionId: part.output?.result?.workVersionId || '',
+            title: part.input?.title,
+            description: part.input?.description
+          })} />
+      </div>
+    );
+  }
+
+  // showWorkCanvas tool
+  if (
+    toolName === 'showWorkCanvas'
+    && (part.state === 'input-available' || part.state === 'input-streaming' || part.state === 'output-available')
+  ) {
+    return (
+      <div className="not-prose mb-4 w-full">
+        <WorkCanvas
+          title={part.output?.text || part.input?.title}
+          description={part.input?.description}
+          id={part.input?.workId || ''}
+          state={part.state}
+          showUseButton={!!onUseWorkResult}
+          onOpen={() => openCanvasView?.({
+            type: part.input?.workType || 'code',
+            id: part.input?.workId || '',
+            versionId: part.input?.workVersionId || '',
+            title: part.input?.title,
+            description: part.input?.description
+          })}
+          onUseResult={() => onUseWorkResult?.({
+            workId: part.input?.workId,
+            workVersionId: part.input?.workVersionId,
+            workType: part.input?.workType || 'code',
+            data: part.input
+          })} />
+      </div>
+    );
+  }
+
+  // searchWeb / web_search / google_search / browser_search tools
+  if (
+    toolName === 'searchWeb'
+    || toolName === 'web_search'
+    || toolName === 'google_search'
+    || toolName === 'browser_search'
+  ) {
+    if (part.state === 'input-available' || part.state === 'input-streaming') {
+      return (
+        <div className="not-prose mb-4 w-full">
+          <div className="rounded-lg border bg-card p-3 flex items-center gap-2">
+            <span className="text-xs font-medium text-slate-500">
+              {part.output?.text || 'Searching the web...'}
+            </span>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className="not-prose mb-4 w-full">
+        <SearchWeb
+          state={part.state}
+          output={part.output}
+          errorText={part.errorText}
+          title={part.output?.text} />
+      </div>
+    );
+  }
+
+  // extractFromWeb tool
+  if (
+    toolName === 'extractFromWeb'
+    && (part.state === 'input-available' || part.state === 'input-streaming' || part.state === 'output-available')
+  ) {
+    return (
+      <div className="not-prose mb-4 w-full">
+        <ExtractWeb
+          title={part.output?.text || part.output?.result?.title || part.input?.title}
+          status={part.output?.result?.status || part.output?.status}
+          state={part.state}
+          runId={part.output?.result?.runId || part.output?.result?.extractionId}
+          onOpen={() => openCanvasView?.({
+            type: 'data',
+            id: part.output?.result?.workId || 'streaming',
+            versionId: part.output?.result?.workVersionId || 'streaming',
+            contentJson: {
+              basis: part.output?.result?.data?.output?.basis,
+              content: part.output?.result?.data?.output?.content
+            },
+            loaded: true
+          } as any)} />
+      </div>
+    );
+  }
+
+  // deepResearch tool
+  if (
+    toolName === 'deepResearch'
+    && (part.state === 'input-available' || part.state === 'input-streaming' || part.state === 'output-available')
+  ) {
+    if (part.state === 'input-available' || part.state === 'input-streaming') {
+      return (
+        <div className="not-prose mb-4 w-full">
+          <div className="rounded-lg border bg-card p-3 flex items-center gap-2">
+            <span className="text-xs font-medium text-slate-500">
+              {part.output?.text || `${t('tools.deep_research')}...`}
+            </span>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className="not-prose mb-4 w-full">
+        <Card
+          className="p-4 cursor-pointer hover:bg-accent/50 transition-colors"
+          onClick={() => openCanvasView?.({
+            type: 'data',
+            id: part.output?.result?.data?.run?.run_id || part.output?.result?.workId || '',
+            title: part.input?.title || part.output?.text || t('tools.deep_research'),
+            contentJson: {
+              output_schema: part.output?.result?.data?.output?.output_schema || part.input?.output_schema,
+              content: part.output?.result?.data?.output?.content,
+              basis: part.output?.result?.data?.output?.basis
+            },
+            loaded: true
+          })}>
+          <h3 className="font-semibold text-sm mb-2">{part.input?.title || part.output?.text || t('tools.deep_research')}</h3>
+          {part.input?.description && <p className="text-xs text-muted-foreground mb-2">{part.input.description}</p>}
+          <div className="text-xs text-muted-foreground">{t('messages.click_to_view_code')} →</div>
+        </Card>
+      </div>
+    );
+  }
+
+  // requestUserInput tool
+  if (
+    toolName === 'requestUserInput'
+    && (part.state === 'input-available' || part.state === 'input-streaming' || part.state === 'output-available')
+  ) {
+    return (
+      <div className="not-prose mb-4 w-full">
+        <RequestUserInput
+          state={part.state}
+          schema={part.input?.jsonSchema || {}}
+          title={part.input?.title || 'User Input Required'}
+          description={part.input?.description || ''}
+          submitLabel={part.input?.submitLabel || 'Submit'}
+          output={part.output}
+          onSubmit={data => onToolAction({
+            tool: toolName,
+            toolCallId: part.toolCallId,
+            decision: 'submit',
+            input: data
+          })}
+          onCancel={() => emitToolAction('cancel')} />
+      </div>
+    );
+  }
+
+  // call*Agent tools (orchestrator subagent calls)
+  if (
+    toolName.startsWith('call')
+    && toolName.endsWith('Agent')
+    && (part.state === 'input-available' || part.state === 'input-streaming' || part.state === 'output-available')
+  ) {
+    const output = part.output as Record<string, any> | undefined;
+
+    return (
+      <div className="not-prose mb-4 w-full">
+        <SubagentTool
+          toolState={part.state}
+          input={part.input}
+          status={output?.status}
+          text={output?.text}
+          icon={output?.icon}
+          skillName={output?.skillName}
+          agentName={output?.agentName}
+          step={output?.step}
+          result={output?.result}
+          agent={agent}
+          openCanvasView={openCanvasView} />
+      </div>
+    );
+  }
+
+  // forwardToAgentById tool
+  if (
+    toolName === 'forwardToAgentById'
+    && (part.state === 'input-available' || part.state === 'input-streaming')
+  ) {
+    return (
+      <div className="not-prose mb-4 w-full">
+        <ForwardToAgent
+          agentId={part.input?.agentId}
+          prompt={part.input?.prompt}
+          state={part.state}
+          onForward={() => {
+            onForwardToAgent?.({ agentId: part.input?.agentId, prompt: part.input?.prompt });
+            emitToolAction('forward');
+          }} />
+      </div>
+    );
+  }
+
+  // runSpreadsheetCommand tool
+  if (toolName === 'runSpreadsheetCommand') {
+    return (
+      <div className="not-prose mb-4 w-full">
+        <SheetCommand
+          commands={part.input?.commands}
+          state={part.state}
+          toolCallId={part.toolCallId}
+          workId={part.input?.id || workId}
+          openCanvasView={openCanvasView}
+          onSendSpreadsheetCommands={onSendSpreadsheetCommands}
+          onAutoRespond={() => onToolAction({
+            tool: toolName,
+            toolCallId: part.toolCallId,
+            decision: 'submit',
+            input: { success: true }
+          })} />
+      </div>
+    );
+  }
+
+  // showPeopleCards tool
+  if (
+    toolName === 'showPeopleCards'
+    && (part.state === 'input-available' || part.state === 'input-streaming' || part.state === 'output-available')
+  ) {
+    return (
+      <div className="not-prose mb-4 w-full">
+        <ShowPeopleCards
+          state={part.state}
+          output={part.output}
+          errorText={part.errorText}
+          title={part.output?.text} />
+      </div>
+    );
+  }
+
+  // createAgentTask tool
+  if (
+    toolName === 'createAgentTask'
+    && (part.state === 'input-available' || part.state === 'input-streaming' || part.state === 'output-available')
+  ) {
+    return (
+      <div className="not-prose mb-4 w-full">
+        <CreateAgentTask
+          taskPrompt={part.input?.taskPrompt}
+          taskDescription={part.input?.taskDescription}
+          scheduleType={part.input?.scheduleType}
+          state={part.state}
+          output={part.output} />
+      </div>
+    );
+  }
+
+  // showGeneratedContentOptions tool
+  if (
+    toolName === 'showGeneratedContentOptions'
+    && (part.state === 'input-available' || part.state === 'input-streaming' || part.state === 'output-available' || part.state === 'output-error')
+  ) {
+    return (
+      <div className="not-prose mb-4 w-full">
+        <ShowGeneratedContentOptions
+          output={part.output?.result}
+          state={part.state}
+          onInsertText={onInsertText}
+          onReplaceText={onReplaceText} />
+      </div>
+    );
+  }
+
+  // createNewWorkVersion tool
+  if (toolName === 'createNewWorkVersion') {
+    return (
+      <div className="not-prose mb-4 w-full">
+        <CreateNewWorkVersion
+          title={part.output?.text || part.input?.title}
+          description={part.input?.description}
+          state={part.state} />
+      </div>
+    );
+  }
+
+  // searchDocuments tool
+  if (toolName === 'searchDocuments') {
+    if (part.state === 'input-available' || part.state === 'input-streaming') {
+      return (
+        <div className="not-prose mb-4 w-full">
+          <div className="rounded-lg border bg-card p-3 flex items-center gap-2">
+            <span className="text-xs font-medium text-slate-500">
+              {part.output?.text || t('tools.document_search')}
+            </span>
+          </div>
+        </div>
+      );
+    }
+
+    if (part.state === 'output-available') {
+      const sources: Array<{ url: string; title?: string }> = part.output?.result?.sources ?? [];
+
+      if (sources.length > 0) {
+        return (
+          <div className="not-prose mb-4 w-full">
+            <Sources>
+              <SourcesTrigger count={sources.length}>
+                <span className="font-medium">{part.output?.text || `${sources.length} sources`}</span>
+              </SourcesTrigger>
+              <SourcesContent>
+                {sources.map((src, idx) => (
+                  <Source key={idx} href={src.url} title={src.title || src.url} />
+                ))}
+              </SourcesContent>
+            </Sources>
+          </div>
+        );
+      }
+
+      return (
+        <div className="not-prose mb-4 w-full">
+          <div className="rounded-lg border bg-card p-3">
+            <span className="text-xs font-medium text-slate-500">No documents found</span>
+          </div>
+        </div>
+      );
+    }
+  }
+
+  // str_replace_based_edit_tool
+  if (
+    toolName === 'str_replace_based_edit_tool'
+    && (part.state === 'input-available' || part.state === 'input-streaming' || part.state === 'output-available')
+  ) {
+    const output = part.output as any;
+
+    return (
+      <div className="not-prose mb-4 w-full">
+        <TextEditorTool
+          command={part.input?.command || 'view'}
+          path={part.input?.path || ''}
+          fileText={part.input?.file_text || ''}
+          oldStr={part.input?.old_str || ''}
+          newStr={part.input?.new_str || ''}
+          insertLine={part.input?.insert_line || 0}
+          viewRange={part.input?.view_range || null}
+          query={part.input?.query || ''}
+          state={part.state}
+          result={output?.result ?? output ?? null}
+          errorText={part.errorText}
+          onOpen={() => openCanvasView?.({
+            type: output?.type || 'code',
+            id: output?.workId || '',
+            versionId: output?.workVersionId || '',
+            title: part.input?.path
+          })} />
+      </div>
+    );
+  }
+
+  if (part.state === 'output-available') {
+    return (
+      <div className="not-prose mb-4 w-full">
+        <div className="rounded-lg border bg-card p-3">
+          <div className="text-xs font-medium text-muted-foreground mb-1">{t('sections.output')}</div>
+          <CodeBlock code={stringify(part.output)} language="json">
+            <CodeBlockCopyButton />
+          </CodeBlock>
+        </div>
+      </div>
+    );
+  }
+
+  if (part.state === 'output-error') {
+    return (
+      <div className="not-prose mb-4 w-full">
+        <div className="rounded-lg border bg-card p-3">
+          <div className="text-xs font-medium text-destructive mb-1">{t('sections.error')}</div>
+          <CodeBlock code={part.errorText || ''} language={'txt' as any}>
+            <CodeBlockCopyButton />
+          </CodeBlock>
+        </div>
+      </div>
+    );
+  }
+
+  return null;
+}