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

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>
-  );
-}