@docyrus/ui-pro-ai-assistant 0.0.1

package/src/components/create-agent-task.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import {
+  AlertTriangle,
+  CalendarClock,
+  Check,
+  Loader2
+} from 'lucide-react';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+interface CreateAgentTaskProps {
+  taskPrompt?: string;
+  taskDescription?: string;
+  scheduleType?: string;
+  state: string;
+  output?: any;
+}
+
+function truncateText(text: string, maxLength: number): string {
+  if (!text) return '';
+
+  return text.length > maxLength ? `${text.substring(0, maxLength)}...` : text;
+}
+
+export function CreateAgentTask({
+  taskPrompt,
+  taskDescription,
+  scheduleType,
+  state,
+  output
+}: CreateAgentTaskProps) {
+  const isSuccess = output?.status === 'success' || output?.result?.success;
+  const outputMessage: string | null = output ? (output.text || output.result?.message || null) : null;
+
+  const statusConfig = (() => {
+    if (state === 'output-available') {
+      if (isSuccess) {
+        return {
+          label: 'Created',
+          bgColor: 'bg-emerald-100',
+          textColor: 'text-emerald-700',
+          Icon: Check,
+          animate: false
+        };
+      }
+
+      return {
+        label: 'Failed',
+        bgColor: 'bg-rose-100',
+        textColor: 'text-rose-700',
+        Icon: AlertTriangle,
+        animate: false
+      };
+    }
+
+    return {
+      label: 'Creating...',
+      bgColor: 'bg-sky-100',
+      textColor: 'text-sky-700',
+      Icon: Loader2,
+      animate: true
+    };
+  })();
+
+  const {
+    label, bgColor, textColor, Icon, animate
+  } = statusConfig;
+
+  return (
+    <div className="rounded-lg border border-slate-200 bg-white p-4 hover:border-slate-300 transition-colors max-w-md">
+      <div className="flex items-start justify-between gap-4">
+        <div className="flex-grow min-w-0">
+          <div className="flex items-center gap-2 mb-1.5">
+            <span className={cn('inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium', bgColor, textColor)}>
+              <Icon className={cn('h-3 w-3', animate && 'animate-spin')} />
+              {label}
+            </span>
+            {scheduleType === 'scheduled' && (
+              <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-violet-100 text-violet-700">
+                <CalendarClock className="h-3 w-3" />
+                Scheduled
+              </span>
+            )}
+          </div>
+
+          <h3 className="font-medium text-slate-800 mb-1">
+            {taskDescription || truncateText(taskPrompt ?? '', 60)}
+          </h3>
+
+          {taskDescription && taskPrompt && (
+            <p className="text-sm text-slate-500 mb-2 line-clamp-2">{taskPrompt}</p>
+          )}
+
+          {outputMessage && state === 'output-available' && (
+            <div className={cn('mt-2 text-xs rounded-md px-3 py-2', isSuccess ? 'bg-emerald-50 text-emerald-700' : 'bg-rose-50 text-rose-700')}>
+              {outputMessage}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/create-new-work-version.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { FilePlus, Loader2 } from 'lucide-react';
+
+interface CreateNewWorkVersionProps {
+  title?: string;
+  description?: string;
+  state?: string;
+}
+
+export function CreateNewWorkVersion({ title, description, state }: CreateNewWorkVersionProps) {
+  return (
+    <div className="flex flex-row items-center space-x-4">
+      <div className="rounded-lg shadow-sm w-fit min-w-64 border bg-card p-3 flex items-center space-x-3">
+        <div className="flex-none p-2 bg-slate-50 rounded">
+          <FilePlus className="size-5" />
+        </div>
+        <div className="grow min-w-0">
+          <div className="font-medium text-sm truncate">{title || 'New Version'}</div>
+          {description && (
+            <p className="text-xs text-muted-foreground truncate">{description}</p>
+          )}
+        </div>
+      </div>
+      {state === 'input-streaming' && (
+        <Loader2 className="size-5 animate-spin text-primary" />
+      )}
+    </div>
+  );
+}

package/src/components/extract-web.tsx

@@ -0,0 +1,160 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+import { CheckCircle, Globe, Loader2 } from 'lucide-react';
+
+import { Card } from '@docyrus/ui-pro-shared/components/card';
+
+import { useApiClient } from '../lib/api-client';
+
+interface ExtractWebProps {
+  title?: string;
+  status?: string;
+  state?: string;
+  runId?: string;
+  onOpen?: () => void;
+}
+
+const TERMINAL_STATUSES = [
+  'completed',
+  'failed',
+  'error',
+  'success'
+];
+
+export function ExtractWeb({
+  title,
+  status: initialStatus,
+  state,
+  runId,
+  onOpen
+}: ExtractWebProps) {
+  const [currentStatus, setCurrentStatus] = useState(initialStatus || '');
+  const [pollingFailed, setPollingFailed] = useState(false);
+  const apiClient = useApiClient();
+  const isPollingRef = useRef(false);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const unmountedRef = useRef(false);
+  const currentStatusRef = useRef(initialStatus || '');
+
+  const capitalizedStatus = currentStatus ? currentStatus.charAt(0).toUpperCase() + currentStatus.slice(1) : 'Processing';
+
+  const isCompleted = currentStatus === 'completed' || currentStatus === 'success';
+  const isSpinning = !isCompleted && !pollingFailed;
+
+  const handleClick = () => {
+    if (state === 'output-available') {
+      onOpen?.();
+    }
+  };
+
+  const stopPolling = () => {
+    isPollingRef.current = false;
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  };
+
+  const poll = async () => {
+    if (!runId || isPollingRef.current || unmountedRef.current) return;
+    if (TERMINAL_STATUSES.includes(currentStatusRef.current)) return;
+
+    isPollingRef.current = true;
+
+    try {
+      const data = await apiClient.get(`ai/external-task-jobs/${runId}/check`);
+
+      if (unmountedRef.current) return;
+
+      const responseData = (data.data as any) || data;
+      const status = responseData?.status as string | undefined;
+
+      if (status) {
+        currentStatusRef.current = status;
+        setCurrentStatus(status);
+      }
+
+      isPollingRef.current = false;
+
+      if (!status || TERMINAL_STATUSES.includes(status)) {
+        return;
+      }
+
+      timeoutRef.current = setTimeout(() => {
+        void poll();
+      }, 20000);
+    } catch (error) {
+      if (!unmountedRef.current) {
+        console.error('ExtractWeb: polling error, stopping:', error);
+        setPollingFailed(true);
+      }
+      isPollingRef.current = false;
+    }
+  };
+
+  useEffect(() => {
+    const status = initialStatus || '';
+
+    currentStatusRef.current = status;
+    setCurrentStatus(status);
+
+    if (TERMINAL_STATUSES.includes(status)) {
+      stopPolling();
+    }
+  }, [initialStatus]);
+
+  useEffect(() => {
+    unmountedRef.current = false;
+    setPollingFailed(false);
+
+    if (runId && !TERMINAL_STATUSES.includes(currentStatusRef.current)) {
+      void poll();
+    }
+
+    return () => {
+      unmountedRef.current = true;
+      stopPolling();
+    };
+    // poll uses refs internally, safe to omit
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [runId]);
+
+  return (
+    <div className="flex flex-row items-center space-x-4">
+      <Card
+        className="p-4 w-fit min-w-96 max-w-96 shadow-sm flex flex-col space-y-2 cursor-pointer hover:bg-accent/50 transition-colors"
+        onClick={handleClick}>
+        <div className="flex items-start space-x-2">
+          <div className="flex-none p-2 bg-slate-50 rounded">
+            <Globe className="size-8 text-muted-foreground" />
+          </div>
+          <div className="grow space-y-1 min-w-0">
+            <div className="font-medium text-base truncate">{title || 'Web Extraction'}</div>
+            {isCompleted ? (
+              <div className="flex items-center gap-2">
+                <span className="inline-flex items-center gap-1.5 px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-700">
+                  <CheckCircle className="size-3" />
+                  {capitalizedStatus}
+                </span>
+              </div>
+            ) : (
+              <div>
+                <span className="inline-flex items-center gap-1.5 px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
+                  {isSpinning && <Loader2 className="size-3 animate-spin" />}
+                  {capitalizedStatus}{isSpinning ? '...' : ''}
+                </span>
+                {isSpinning && (
+                  <p className="text-sm text-muted-foreground mt-1">
+                    This process may take some time. You will receive a notification once it is complete.
+                  </p>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}

package/src/components/forward-to-agent.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+import { ArrowRight } from 'lucide-react';
+
+import { Button } from '@docyrus/ui-pro-shared/components/button';
+
+import { useApiClient } from '../lib/api-client';
+
+interface ForwardToAgentProps {
+  agentId?: string;
+  prompt?: string;
+  state?: string;
+  onForward?: () => void;
+}
+
+export function ForwardToAgent({ agentId, onForward }: ForwardToAgentProps) {
+  const apiClient = useApiClient();
+  const [agentName, setAgentName] = useState('');
+  const [avatar, setAvatar] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!agentId) {
+      setAgentName('');
+      setAvatar('');
+
+      return;
+    }
+
+    const fetchAgent = async () => {
+      setLoading(true);
+      try {
+        const response = await apiClient.get(`/ai/agents/${agentId}`);
+
+        if (response.success && response.data) {
+          const data = response.data as { name?: string; avatar?: { signed_url?: string } | string };
+
+          setAgentName(data.name || '');
+          const avatarUrl = typeof data.avatar === 'string' ? data.avatar : data.avatar?.signed_url || '';
+
+          setAvatar(avatarUrl);
+        }
+      } catch (err) {
+        console.error('[ForwardToAgent] Error fetching agent:', err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchAgent();
+  }, [agentId, apiClient]);
+
+  return (
+    <div className="p-4 m-2 border bg-white border-slate-200 max-w-[500px] rounded-lg animate-bounce-subtle">
+      <div className="flex items-center gap-2">
+        <ArrowRight className="size-5 text-blue-500 flex-shrink-0" />
+        <span className="text-sm font-medium text-slate-700 whitespace-nowrap">
+          Forwarding to agent
+        </span>
+        {(avatar || agentName) && (
+          <div className="flex items-center gap-1.5 ml-1">
+            {avatar && (
+              <img
+                src={avatar}
+                alt="Agent Avatar"
+                className="w-5 h-5 rounded-full object-cover" />
+            )}
+            {agentName && (
+              <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
+                {agentName}
+              </span>
+            )}
+          </div>
+        )}
+      </div>
+      <div className="mt-3 flex justify-end">
+        <Button
+          size="sm"
+          disabled={loading}
+          onClick={onForward}
+          className="gap-1.5 bg-emerald-600 hover:bg-emerald-700 text-white">
+          <ArrowRight className="size-3.5" />
+          {agentName ? `Forward to ${agentName}` : 'Forward to agent'}
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/components/generate-chart.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+import { ChevronDown } from 'lucide-react';
+
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+interface GenerateChartProps {
+  spec?: Record<string, any>;
+  time?: Record<string, any>;
+  state?: string;
+  errorText?: string;
+  title?: string;
+  description?: string;
+  className?: string;
+}
+
+export function GenerateChart({
+  spec, state, errorText, title = 'Chart', description, className
+}: GenerateChartProps) {
+  const [open, setOpen] = useState(true);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const chartRef = useRef<any>(null);
+
+  useEffect(() => {
+    if (state !== 'output-available' || !spec || !open || !containerRef.current) return;
+
+    let isMounted = true;
+
+    const initChart = async () => {
+      try {
+        const { default: VChart } = await import('@visactor/vchart');
+
+        if (!isMounted || !containerRef.current) return;
+
+        if (chartRef.current) {
+          chartRef.current.updateSpecSync(spec);
+          chartRef.current.renderSync();
+        } else {
+          const chart = new VChart(spec as any, { dom: containerRef.current });
+
+          chart.renderSync();
+          chartRef.current = chart;
+        }
+      } catch (error) {
+        console.error('Failed to render chart:', error);
+      }
+    };
+
+    initChart();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [spec, state, open]);
+
+  useEffect(() => {
+    return () => {
+      if (chartRef.current) {
+        chartRef.current.release();
+        chartRef.current = null;
+      }
+    };
+  }, []);
+
+  return (
+    <div className="rounded-xl shadow bg-card border overflow-hidden">
+      {/* Header */}
+      <div
+        role="button"
+        tabIndex={0}
+        onClick={() => setOpen(v => !v)}
+        onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && setOpen(v => !v)}
+        className="flex w-full items-center justify-between gap-1.5 px-4 py-3 text-left bg-muted/50 hover:bg-muted transition-colors cursor-pointer select-none">
+        <div className="flex items-center gap-2 grow min-w-0">
+          <span className="font-medium text-sm truncate">{title}</span>
+          {description && (
+            <span className="text-xs text-muted-foreground truncate hidden sm:block">{description}</span>
+          )}
+        </div>
+        <ChevronDown className={cn('size-4 text-muted-foreground transition-transform shrink-0', open && 'rotate-180')} />
+      </div>
+
+      {/* Body — always in DOM so VChart container keeps its ref */}
+      <div className={cn('p-4', !open && 'hidden', className)}>
+        {state !== 'output-available' && !errorText && (
+          <div className="w-full h-[300px] rounded-lg bg-muted/30 animate-pulse" />
+        )}
+        {errorText && (
+          <div className="text-sm text-destructive bg-destructive/10 border border-destructive/20 rounded-lg p-3">
+            {errorText}
+          </div>
+        )}
+        <div
+          ref={containerRef}
+          className="w-full min-h-[300px]" />
+      </div>
+    </div>
+  );
+}

package/src/components/generative-action-button.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import { type ElementType } from 'react';
+
+import {
+  Eye, HelpCircle, Pencil, PlusCircle
+} from 'lucide-react';
+
+import { resolveToolIcon } from '@docyrus/ui-pro-shared/ai';
+import { Button } from '@docyrus/ui-pro-shared/components/button';
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+type Action = 'showCreateRecordForm' | 'showUpdateRecordForm' | 'showRecordDetailsForm';
+
+interface GenerativeActionButtonProps {
+  action: Action | string;
+  data?: Record<string, any>;
+  title?: string;
+  icon?: string;
+  className?: string;
+  onAction?: (action: string, data?: Record<string, any>) => void;
+}
+
+const ACTION_CONFIG: Record<Action, { label: string; FallbackIcon: ElementType }> = {
+  showCreateRecordForm: { label: 'Create Record', FallbackIcon: PlusCircle },
+  showUpdateRecordForm: { label: 'Update Record', FallbackIcon: Pencil },
+  showRecordDetailsForm: { label: 'View Record', FallbackIcon: Eye }
+};
+
+function getComputedTitle(data?: Record<string, any>): string {
+  if (!data?.defaultValues) return '';
+
+  const values = typeof data.defaultValues === 'string' ? (() => {
+    try {
+      return JSON.parse(data.defaultValues);
+    } catch {
+      return {};
+    }
+  })() : data.defaultValues;
+
+  if (Array.isArray(values)) {
+    return values.length > 1 ? `${values.length} items` : 'Untitled Record';
+  }
+
+  return (values as Record<string, any>)?.name
+    ?? (values as Record<string, any>)?.title
+    ?? 'Untitled Record';
+}
+
+function getDescription(data?: Record<string, any>): string | null {
+  if (!data?.defaultValues || Array.isArray(data.defaultValues)) return null;
+
+  const values = typeof data.defaultValues === 'string' ? (() => {
+    try {
+      return JSON.parse(data.defaultValues);
+    } catch {
+      return null;
+    }
+  })() : data.defaultValues;
+
+  return (values as Record<string, any>)?.description ?? null;
+}
+
+export function GenerativeActionButton({
+  action,
+  data,
+  title,
+  icon,
+  className,
+  onAction
+}: GenerativeActionButtonProps) {
+  const config = ACTION_CONFIG[action as Action] ?? { label: 'Action', FallbackIcon: HelpCircle };
+  const { label, FallbackIcon } = config;
+
+  /*
+   * Use the icon string from the tool output (e.g. "huge form") if available,
+   * otherwise fall back to the action-specific icon.
+   */
+  const resolvedIcon = icon ? resolveToolIcon(icon) : <FallbackIcon className="size-6 text-muted-foreground" />;
+
+  const buttonIcon = icon ? resolveToolIcon(icon) : <FallbackIcon className="size-3.5" />;
+
+  const displayTitle = title || getComputedTitle(data);
+  const description = getDescription(data);
+
+  const handleClick = () => {
+    onAction?.(action, data);
+  };
+
+  return (
+    <div
+      className={cn(
+        'flex flex-col space-y-3 rounded-lg shadow-sm hover:shadow-md w-fit min-w-80 max-w-96 border p-4',
+        className
+      )}>
+      <div
+        role="button"
+        tabIndex={0}
+        onClick={handleClick}
+        onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && handleClick()}
+        className="flex items-start gap-3 cursor-pointer rounded-lg">
+        <div className="shrink-0 p-2 bg-muted rounded [&_svg]:size-6 [&_svg]:text-muted-foreground">
+          {resolvedIcon}
+        </div>
+        <div className="grow space-y-1 min-w-0">
+          {displayTitle && (
+            <div className="font-medium text-base truncate">{displayTitle}</div>
+          )}
+          {description && (
+            <div className="text-sm text-muted-foreground line-clamp-2">{description}</div>
+          )}
+        </div>
+      </div>
+      <div className="flex items-center justify-end">
+        <Button size="sm" onClick={handleClick} className="gap-1.5 [&_svg]:size-3.5">
+          {buttonIcon}
+          {label}
+        </Button>
+      </div>
+    </div>
+  );
+}