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

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

@@ -1,104 +0,0 @@
-'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

@@ -1,30 +0,0 @@
-'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

@@ -1,160 +0,0 @@
-'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

@@ -1,90 +0,0 @@
-'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

@@ -1,101 +0,0 @@
-'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

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