@docyrus/ui-pro-ai-assistant 0.0.1

package/src/components/generative-ui-object.tsx

@@ -0,0 +1,210 @@
+'use client';
+
+import { Card } from '@docyrus/ui-pro-shared/components/card';
+import { CheckCircle2, FileText, Loader2 } from 'lucide-react';
+
+import { GenerativeActionButton } from './generative-action-button';
+import { MermaidDiagram } from './mermaid-diagram';
+import { WorkCanvas } from './work-canvas';
+
+interface GenerativeUIObjectPart {
+  type: string;
+  data?: any;
+  state?: string;
+  workType?: string;
+  workId?: string;
+  workVersionId?: string;
+  workDataSourceId?: string;
+}
+
+interface GenerativeUIObjectProps {
+  part: GenerativeUIObjectPart;
+  agents?: any[];
+  isStreaming?: boolean;
+  openCanvasView?: (options: Record<string, any>) => void;
+  onUseWorkResult?: (data: {
+    workId?: string;
+    workVersionId?: string;
+    workType?: string;
+    workDataSourceId?: string;
+    data?: any;
+    state?: string;
+  }) => void;
+}
+
+export const GENERATIVE_UI_PART_TYPES = new Set([
+  'agent',
+  'workflow-run-start-event',
+  'workflow-step-start',
+  'workflow-step-success',
+  'work',
+  'workflow-run-complete-event'
+]);
+
+export function GenerativeUIObject({
+  part,
+  agents = [],
+  isStreaming = false,
+  openCanvasView,
+  onUseWorkResult
+}: GenerativeUIObjectProps) {
+  const {
+    type, data, state, workType, workId, workVersionId, workDataSourceId
+  } = part;
+  const partState = state || (isStreaming ? 'streaming' : 'output-available');
+  const isPartStreaming = partState === 'streaming';
+
+  // Agent routing
+  if (type === 'agent') {
+    const agent = agents.find((a: any) => a.id === data?.agentId);
+
+    if (!agent?.agentName) return null;
+
+    return (
+      <div className="text-sm text-muted-foreground px-1.5 mb-1">
+        Routing to agent: {agent.agentName}
+      </div>
+    );
+  }
+
+  // Workflow run started
+  if (type === 'workflow-run-start-event') {
+    return (
+      <div className="flex items-center gap-2 px-1.5 mb-1">
+        <CheckCircle2 className="h-4 w-4 text-green-500 shrink-0" />
+        <span className="text-sm">Workflow started</span>
+      </div>
+    );
+  }
+
+  // Workflow step in progress
+  if (type === 'workflow-step-start') {
+    return (
+      <div className="flex items-center gap-2 px-1.5 mb-1">
+        <CheckCircle2 className="h-4 w-4 text-muted-foreground shrink-0" />
+        <span className="text-sm">{data?.step?.name || 'Processing...'}</span>
+      </div>
+    );
+  }
+
+  // Workflow step completed
+  if (type === 'workflow-step-success') {
+    return (
+      <div className="flex items-center gap-2 px-1.5 mb-1">
+        <CheckCircle2 className="h-4 w-4 text-green-500 shrink-0" />
+        <span className="text-sm">{data?.step?.name || 'Step completed'}</span>
+      </div>
+    );
+  }
+
+  // Work / workflow-run-complete-event
+  if (type === 'work' || type === 'workflow-run-complete-event') {
+    const isWorkflowComplete = type === 'workflow-run-complete-event';
+    const effectiveData = isWorkflowComplete ? data?.result?.output : data;
+    const outputWorkType: string | undefined = workType;
+
+    if (outputWorkType === 'record' && partState === 'output-available') {
+      return (
+        <div className="not-prose mb-4 w-full">
+          <GenerativeActionButton
+            action="showCreateRecordForm"
+            data={{ dataSourceId: workDataSourceId, defaultValues: effectiveData }}
+            onAction={() => {
+              openCanvasView?.({
+                type: 'record',
+                id: `record-${Date.now()}`,
+                dataSourceId: workDataSourceId,
+                data: effectiveData,
+                mode: 'add'
+              });
+            }} />
+        </div>
+      );
+    }
+
+    if (outputWorkType === 'app') {
+      const appTitle = effectiveData?.layout?.title || effectiveData?.title || 'App Preview';
+      const appDesc = effectiveData?.layout?.description || effectiveData?.description;
+
+      return (
+        <div className="not-prose mb-4 w-full">
+          <div className="flex flex-row items-center gap-4">
+            <Card
+              className="rounded-lg shadow-sm w-fit min-w-80 max-w-96 border bg-card p-4 flex flex-col gap-2 cursor-pointer hover:bg-accent/50 transition-colors"
+              onClick={() => openCanvasView?.({
+                type: 'app',
+                id: workId || 'streaming',
+                title: appTitle,
+                contentJson: effectiveData,
+                loaded: true
+              })}>
+              <div className="flex items-start gap-2">
+                <div className="shrink-0 p-2 bg-slate-50 rounded">
+                  <FileText className="size-8 text-muted-foreground" />
+                </div>
+                <div className="grow flex flex-col gap-1 min-w-0">
+                  <div className="font-medium text-base">{appTitle}</div>
+                  {appDesc && <p className="text-sm text-muted-foreground">{appDesc}</p>}
+                </div>
+              </div>
+            </Card>
+            {isPartStreaming && <Loader2 className="size-8 animate-spin text-primary shrink-0" />}
+          </div>
+        </div>
+      );
+    }
+
+    if (outputWorkType === 'mermaid_diagram') {
+      return (
+        <div className="not-prose mb-4 w-full">
+          <MermaidDiagram
+            title={effectiveData?.title || 'Mermaid Diagram'}
+            description={effectiveData?.description}
+            mermaidNotation={effectiveData?.mermaid_notation ?? ''}
+            state={isPartStreaming ? 'input-streaming' : 'output-available'} />
+        </div>
+      );
+    }
+
+    if (outputWorkType) {
+      return (
+        <div className="not-prose mb-4 w-full">
+          <WorkCanvas
+            title={effectiveData?.title || 'Work Canvas'}
+            description={effectiveData?.description}
+            content={JSON.stringify(effectiveData, null, 2)}
+            state={isPartStreaming ? 'input-streaming' : 'output-available'}
+            type={outputWorkType}
+            showUseButton={!!onUseWorkResult}
+            onOpen={() => openCanvasView?.({
+              type: outputWorkType,
+              id: workId || 'streaming',
+              versionId: workVersionId,
+              title: effectiveData?.title,
+              contentJson: effectiveData,
+              loaded: true
+            })}
+            onUseResult={() => onUseWorkResult?.({
+              data: effectiveData,
+              state: partState,
+              workId,
+              workType: outputWorkType,
+              workVersionId,
+              workDataSourceId
+            })} />
+        </div>
+      );
+    }
+
+    // Fallback: show raw JSON
+    return (
+      <div className="not-prose mb-2 w-full">
+        <div className="rounded-lg border bg-card p-3 text-xs font-mono text-muted-foreground overflow-auto max-h-48 whitespace-pre-wrap">
+          {JSON.stringify(effectiveData, null, 2)}
+        </div>
+      </div>
+    );
+  }
+
+  return null;
+}