@docyrus/ui-pro-ai-assistant 0.0.2 → 0.0.3

package/src/components/generative-tool.tsx

@@ -1,685 +0,0 @@
-'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;
-}