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

package/src/components/json-schema-layout.tsx

@@ -1,326 +0,0 @@
-'use client';
-
-import { useMemo } from 'react';
-
-function getFieldLabel(key: string | number, property: any): string {
-  if (property?.title) return property.title;
-
-  return key
-    .toString()
-    .replace(/_/g, ' ')
-    .replace(/([A-Z])/g, ' $1')
-    .split(' ')
-    .map(w => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
-    .join(' ')
-    .trim();
-}
-
-function formatLabel(key: string): string {
-  return key.replace(/([A-Z])/g, ' $1').replace(/^./, s => s.toUpperCase());
-}
-
-function inferType(value: any): string {
-  if (value === null || value === undefined) return 'string';
-  if (Array.isArray(value)) return 'array';
-  if (typeof value === 'object') return 'object';
-
-  return typeof value;
-}
-
-function formatValue(value: any, property: any): string {
-  if (value === null || value === undefined) return '—';
-
-  const type = property?.type;
-
-  switch (type) {
-    case 'boolean':
-      return value ? 'Yes' : 'No';
-
-    case 'number':
-
-    case 'integer':
-      return String(value);
-
-    case 'string':
-      if (property?.format === 'date') return new Date(value).toLocaleDateString();
-      if (property?.format === 'date-time') return new Date(value).toLocaleString();
-      if (typeof value === 'object') return JSON.stringify(value, null, 2);
-
-      return String(value);
-
-    case 'array':
-      return Array.isArray(value) ? `${value.length} items` : '—';
-
-    case 'object':
-      return typeof value === 'object' ? JSON.stringify(value, null, 2) : '—';
-
-    default:
-      return String(value);
-  }
-}
-
-function formatNestedObject(value: any): string {
-  if (value === null || value === undefined) return '—';
-  if (typeof value !== 'object') return String(value);
-
-  return Object.entries(value)
-    .map(([k, v]) => (typeof v === 'object' && v !== null ? `${k}: ${JSON.stringify(v)}` : `${k}: ${v}`))
-    .join('\n');
-}
-
-function formatNestedArray(value: any): string {
-  if (!Array.isArray(value)) return '—';
-  if (value.length === 0) return '(empty)';
-  if (value.every((item: any) => typeof item !== 'object' || item === null)) return value.join(', ');
-
-  return `${value.length} items:\n${JSON.stringify(value[0], null, 2)}${value.length > 1 ? '\n...' : ''}`;
-}
-
-function formatPrimitive(value: any): string {
-  if (value === null || value === undefined) return '—';
-  if (typeof value === 'boolean') return value ? 'Yes' : 'No';
-
-  return String(value);
-}
-
-function getCitationsForField(basis: any[], fieldKey: string | number): any[] {
-  if (!Array.isArray(basis) || basis.length === 0) return [];
-  const entry = basis.find((item: any) => item.field === fieldKey);
-
-  return entry?.citations || [];
-}
-
-interface JsonSchemaArrayProps {
-  schema: any;
-  data: any[];
-  showHeader?: boolean;
-}
-
-function JsonSchemaArray({ schema, data, showHeader = true }: JsonSchemaArrayProps) {
-  const isEmpty = !data || data.length === 0;
-
-  const isArrayOfObjects = !isEmpty
-    && (schema?.items?.type === 'object'
-      || data.some((item: any) => typeof item === 'object' && item !== null && !Array.isArray(item)));
-
-  const columns: Record<string, { label: string; property: any }> = useMemo(() => {
-    const itemSchema = schema?.items;
-
-    if (itemSchema?.properties) {
-      const cols: Record<string, { label: string; property: any }> = {};
-
-      Object.keys(itemSchema.properties).forEach((key) => {
-        cols[key] = {
-          label: itemSchema.properties[key]?.title || formatLabel(key),
-          property: itemSchema.properties[key]
-        };
-      });
-
-      return cols;
-    }
-
-    if (isArrayOfObjects && data.length > 0) {
-      const allKeys = new Set<string>();
-
-      data.forEach((item: any) => {
-        if (typeof item === 'object' && item !== null) Object.keys(item).forEach(k => allKeys.add(k));
-      });
-
-      const cols: Record<string, { label: string; property: any }> = {};
-
-      allKeys.forEach((key) => {
-        cols[key] = {
-          label: formatLabel(key),
-          property: { type: inferType(data[0]?.[key]) }
-        };
-      });
-
-      return cols;
-    }
-
-    return {};
-  }, [schema, data, isArrayOfObjects]);
-
-  return (
-    <div className="w-full not-prose">
-      {showHeader && schema?.title && (
-        <div className="text-lg font-semibold text-slate-700 mb-3">{schema.title}</div>
-      )}
-      {showHeader && schema?.description && (
-        <div className="text-sm text-slate-600 mb-3">{schema.description}</div>
-      )}
-
-      {isEmpty ? (
-        <div className="text-sm text-slate-500 italic py-4">No items</div>
-      ) : isArrayOfObjects ? (
-        <div className="overflow-x-auto overflow-hidden shadow-sm rounded-lg border border-slate-200">
-          <table className="min-w-full divide-y divide-slate-200">
-            <thead className="bg-slate-50">
-              <tr>
-                {
-                  Object.entries(columns).map(([key, col]) => (
-                    <th
-                      key={key}
-                      className="px-4 py-3 text-left text-xs font-medium text-slate-700 uppercase tracking-wider">
-                      {col.label}
-                    </th>
-                  ))
-                }
-              </tr>
-            </thead>
-            <tbody className="bg-white divide-y divide-slate-200">
-              {data.map((item, index) => (
-                <tr key={index} className="hover:bg-slate-50">
-                  {Object.entries(columns).map(([key, col]) => (
-                    <td key={key} className="px-4 py-3 text-sm text-slate-700">
-                      {col.property?.type === 'object' ? (
-                        <div className="text-xs font-mono bg-slate-100 rounded px-2 py-1 whitespace-pre-wrap break-all max-w-xs">
-                          {formatNestedObject(item[key])}
-                        </div>
-                      ) : col.property?.type === 'array' ? (
-                        <div className="text-xs font-mono bg-slate-100 rounded px-2 py-1 whitespace-pre-wrap break-all max-w-xs">
-                          {formatNestedArray(item[key])}
-                        </div>
-                      ) : (
-                        <span className={col.property?.type === 'number' || col.property?.type === 'integer' ? 'font-mono' : ''}>
-                          {formatValue(item[key], col.property)}
-                        </span>
-                      )}
-                    </td>
-                  ))}
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      ) : (
-        <div className="space-y-2">
-          {data.map((item, index) => (
-            <div
-              key={index}
-              className="px-3 py-2 bg-white border border-slate-200 rounded-md text-sm text-slate-700">
-              {formatPrimitive(item)}
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-interface JsonSchemaObjectProps {
-  schema: any;
-  data: any;
-  basis?: any[];
-}
-
-function JsonSchemaObject({ schema, data, basis = [] }: JsonSchemaObjectProps) {
-  const properties: Record<string, any> = schema?.properties || {};
-  const required: string[] = schema?.required || [];
-
-  return (
-    <div className="w-full">
-      {schema?.title && (
-        <div className="text-lg font-semibold text-slate-700 mb-4">{schema.title}</div>
-      )}
-      {schema?.description && (
-        <div className="text-sm text-slate-600 mb-4">{schema.description}</div>
-      )}
-
-      <div className="space-y-4">
-        {Object.entries(properties).map(([key, property]: [string, any]) => {
-          const isNestedObject = property?.type === 'object' && property?.properties;
-          const isArr = property?.type === 'array';
-          const citations = getCitationsForField(basis, key);
-          const isReq = required.includes(key);
-
-          if (isNestedObject) {
-            return (
-              <div key={key} className="border border-slate-200 rounded-lg p-4 bg-slate-50">
-                <JsonSchemaObject schema={property} data={data?.[key] || {}} basis={basis} />
-              </div>
-            );
-          }
-
-          if (isArr) {
-            return (
-              <div key={key} className="border border-slate-200 rounded-lg p-4 bg-slate-50">
-                {property?.title && (
-                  <div className="text-sm font-medium text-slate-700 mb-2">{property.title}</div>
-                )}
-                <JsonSchemaArray schema={property} data={data?.[key] || []} showHeader={false} />
-              </div>
-            );
-          }
-
-          return (
-            <div key={key} className="flex flex-col">
-              <label className={`text-sm font-medium text-slate-700 mb-1${isReq ? " after:content-['*'] after:ml-0.5 after:text-red-500" : ''}`}>
-                {getFieldLabel(key, property)}
-              </label>
-
-              {property?.description && (
-                <div className="text-xs text-slate-500 mb-1">{property.description}</div>
-              )}
-
-              <div className={`px-3 py-2 bg-white border border-slate-300 rounded-md text-sm text-slate-700${property?.type === 'number' || property?.type === 'integer' ? ' font-mono' : ''}`}>
-                {formatValue(data?.[key], property)}
-              </div>
-
-              {citations.length > 0 && (
-                <div className="mt-2 text-xs text-slate-600 bg-slate-50 border border-slate-200 rounded-md p-3">
-                  <div className="font-medium text-slate-700 mb-2 flex items-center gap-1">
-                    <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
-                      <path
-                        fillRule="evenodd"
-                        d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z"
-                        clipRule="evenodd" />
-                    </svg>
-                    Sources ({citations.length})
-                  </div>
-                  <div className="space-y-2">
-                    {citations.map((citation: any, idx: number) => (
-                      <div key={idx} className="flex gap-2 scroll-mt-4">
-                        <span className="font-mono text-slate-500">[{idx + 1}]</span>
-                        <div className="flex-1 min-w-0">
-                          <a
-                            href={citation.url}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="text-blue-600 hover:text-blue-800 hover:underline break-all truncate block">
-                            {citation.url}
-                          </a>
-                          {citation.excerpts && citation.excerpts.length > 0 && (
-                            <div className="mt-1 text-slate-600 italic truncate">
-                              &quot;{citation.excerpts[0]}&quot;
-                            </div>
-                          )}
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              )}
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-export interface JsonSchemaLayoutProps {
-  schema: any;
-  data: any;
-  basis?: any[];
-}
-
-export function JsonSchemaLayout({ schema, data, basis = [] }: JsonSchemaLayoutProps) {
-  const schemaType = schema?.type || (Array.isArray(data) ? 'array' : 'object');
-
-  if (schemaType === 'array') {
-    return <JsonSchemaArray schema={schema} data={data} />;
-  }
-
-  return <JsonSchemaObject schema={schema} data={data} basis={basis} />;
-}

package/src/components/list-item-card.tsx

@@ -1,92 +0,0 @@
-'use client';
-
-import { type ElementType, type FC, type ReactNode } from 'react';
-
-import { Button } from '@docyrus/ui-pro-shared/components/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger
-} from '@docyrus/ui-pro-shared/components/dropdown-menu';
-import { cn } from '@docyrus/ui-pro-shared/lib/utils';
-import { Edit, MoreHorizontal, Trash } from 'lucide-react';
-
-interface ListItemCardAction {
-  label: string;
-  icon?: ElementType;
-  onClick: () => void;
-  variant?: 'default' | 'destructive';
-}
-
-interface ListItemCardProps {
-  title: string;
-  subtitle?: string;
-  onClick?: () => void;
-  actions?: ListItemCardAction[];
-  className?: string;
-  children?: ReactNode;
-}
-
-export const ListItemCard: FC<ListItemCardProps> = ({
-  title,
-  subtitle,
-  onClick,
-  actions,
-  className,
-  children
-}) => {
-  return (
-    <div
-      onClick={onClick}
-      className={cn(
-        'bg-card border border-border rounded-lg p-4 hover:shadow-md transition-shadow',
-        onClick && 'cursor-pointer',
-        className
-      )}>
-      <div className="flex items-start justify-between mb-3">
-        <h3 className="font-medium text-card-foreground line-clamp-2">{title}</h3>
-        {actions && actions.length > 0 && (
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-6 w-6 text-muted-foreground hover:text-foreground shrink-0"
-                onClick={e => e.stopPropagation()}>
-                <MoreHorizontal className="w-4 h-4" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              {actions.map((action, index) => {
-                const Icon = action.icon || (action.variant === 'destructive' ? Trash : Edit);
-
-                return (
-                  <DropdownMenuItem
-                    key={index}
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      action.onClick();
-                    }}
-                    className={cn(
-                      'cursor-pointer',
-                      action.variant === 'destructive' && 'text-destructive focus:text-destructive'
-                    )}>
-                    <Icon className="w-4 h-4 mr-2" />
-                    {action.label}
-                  </DropdownMenuItem>
-                );
-              })}
-            </DropdownMenuContent>
-          </DropdownMenu>
-        )}
-      </div>
-      {subtitle && (
-        <p className="text-sm text-muted-foreground line-clamp-2">{subtitle}</p>
-      )}
-      {children}
-    </div>
-  );
-};
-
-ListItemCard.displayName = 'ListItemCard';

package/src/components/mermaid-diagram.tsx

@@ -1,192 +0,0 @@
-'use client';
-
-import {
-  useCallback, useEffect, useRef, useState, type MouseEvent, type WheelEvent
-} from 'react';
-
-import {
-  Maximize2, Minus, Plus, RotateCcw, X
-} from 'lucide-react';
-
-import { Button } from '@docyrus/ui-pro-shared/components/button';
-import {
-  Dialog, DialogContent, DialogTitle
-} from '@docyrus/ui-pro-shared/components/dialog';
-import { cn } from '@docyrus/ui-pro-shared/lib/utils';
-
-interface MermaidRenderProps {
-  content: string;
-  className?: string;
-}
-
-function MermaidRender({ content, className }: MermaidRenderProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const svgRef = useRef<HTMLDivElement>(null);
-  const [svg, setSvg] = useState('');
-  const [zoom, setZoom] = useState(1);
-  const [pan, setPan] = useState({ x: 0, y: 0 });
-  const isDragging = useRef(false);
-  const lastPos = useRef({ x: 0, y: 0 });
-
-  useEffect(() => {
-    if (!content) return;
-
-    let cancelled = false;
-
-    const render = async () => {
-      try {
-        const { default: mermaid } = await import('mermaid');
-
-        mermaid.initialize({ startOnLoad: false, securityLevel: 'loose' });
-        const id = `mermaid-${Math.random().toString(36).slice(2)}`;
-        const { svg: rendered } = await mermaid.render(id, content);
-
-        if (!cancelled) setSvg(rendered);
-      } catch (err) {
-        console.error('Mermaid render error:', err);
-      }
-    };
-
-    render();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [content]);
-
-  const zoomIn = () => setZoom(z => Math.min(z + 0.15, 4));
-  const zoomOut = () => setZoom(z => Math.max(z - 0.15, 0.2));
-  const resetView = () => {
-    setZoom(1);
-    setPan({ x: 0, y: 0 });
-  };
-
-  const onWheel = useCallback((e: WheelEvent) => {
-    e.preventDefault();
-    const delta = e.deltaY > 0 ? -0.1 : 0.1;
-
-    setZoom(z => Math.min(Math.max(z + delta, 0.2), 4));
-  }, []);
-
-  const onMouseDown = useCallback((e: MouseEvent) => {
-    isDragging.current = true;
-    lastPos.current = { x: e.clientX, y: e.clientY };
-  }, []);
-
-  const onMouseMove = useCallback((e: MouseEvent) => {
-    if (!isDragging.current) return;
-    const dx = e.clientX - lastPos.current.x;
-    const dy = e.clientY - lastPos.current.y;
-
-    lastPos.current = { x: e.clientX, y: e.clientY };
-    setPan(p => ({ x: p.x + dx, y: p.y + dy }));
-  }, []);
-
-  const onMouseUp = useCallback(() => {
-    isDragging.current = false;
-  }, []);
-
-  return (
-    <div
-      ref={containerRef}
-      className={cn(
-        'relative w-full h-full overflow-hidden cursor-grab active:cursor-grabbing select-none',
-        'bg-[radial-gradient(circle,_#94a3b8_1px,_transparent_1px)] bg-[size:22px_22px] bg-slate-50',
-        className
-      )}
-      onWheel={onWheel}
-      onMouseDown={onMouseDown}
-      onMouseMove={onMouseMove}
-      onMouseUp={onMouseUp}
-      onMouseLeave={onMouseUp}>
-      <div
-        ref={svgRef}
-        className="absolute inset-0 flex items-center justify-center"
-        style={{ transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`, transformOrigin: 'center' }}
-        dangerouslySetInnerHTML={{ __html: svg }} />
-
-      {/* Zoom controls */}
-      <div className="absolute bottom-3 left-3 z-10 flex gap-1">
-        <Button variant="secondary" size="icon" className="h-7 w-7 bg-white shadow-sm" onClick={zoomOut}>
-          <Minus className="size-3" />
-        </Button>
-        <Button variant="secondary" size="icon" className="h-7 w-7 bg-white shadow-sm" onClick={zoomIn}>
-          <Plus className="size-3" />
-        </Button>
-        <Button variant="secondary" size="icon" className="h-7 w-7 bg-white shadow-sm" onClick={resetView}>
-          <RotateCcw className="size-3" />
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-interface MermaidDiagramProps {
-  title?: string;
-  description?: string;
-  mermaidNotation: string;
-  state?: string;
-}
-
-export function MermaidDiagram({
-  title, description, mermaidNotation, state
-}: MermaidDiagramProps) {
-  const [modalOpen, setModalOpen] = useState(false);
-
-  if (state !== 'output-available') {
-    return <div className="w-full h-[400px] rounded-lg border bg-muted/30 animate-pulse" />;
-  }
-
-  return (
-    <>
-      <div className="w-full min-w-96 max-w-2xl h-[400px] border rounded-lg flex flex-col overflow-hidden">
-        {/* Header */}
-        <div className="flex items-center justify-between bg-muted/50 px-4 py-2 shrink-0">
-          <div className="flex items-center gap-3 min-w-0">
-            <div className="min-w-0">
-              {title && <div className="text-sm font-medium truncate">{title}</div>}
-              {description && <div className="text-xs text-muted-foreground truncate">{description}</div>}
-            </div>
-          </div>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-7 w-7 shrink-0"
-            onClick={() => setModalOpen(true)}>
-            <Maximize2 className="size-4" />
-          </Button>
-        </div>
-
-        {/* Diagram */}
-        <div className="flex-1 overflow-hidden">
-          <MermaidRender content={mermaidNotation} />
-        </div>
-      </div>
-
-      {/* Fullscreen modal */}
-      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
-        <DialogContent
-          showCloseButton={false}
-          className="max-w-[90vw] sm:max-w-[90vw] w-[90vw] h-[90vh] p-0 flex flex-col gap-0 overflow-hidden">
-          <DialogTitle className="sr-only">{title ?? 'Diagram'}</DialogTitle>
-          <div className="flex items-center justify-between bg-muted/50 px-4 py-2 shrink-0">
-            <div className="min-w-0">
-              {title && <div className="text-base font-medium truncate">{title}</div>}
-              {description && <div className="text-xs text-muted-foreground truncate">{description}</div>}
-            </div>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-7 w-7 shrink-0"
-              onClick={() => setModalOpen(false)}>
-              <X className="size-4" />
-            </Button>
-          </div>
-          <div className="flex-1 overflow-hidden">
-            <MermaidRender content={mermaidNotation} />
-          </div>
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-}

package/src/components/preview-image.tsx

@@ -1,47 +0,0 @@
-import { type FC, type HTMLAttributes } from 'react';
-
-type ImageItem = {
-  url: string;
-  base64: string;
-  mimeType: string;
-  width: number;
-  height: number;
-};
-
-type Props = {
-  id?: string;
-  title?: string;
-  images?: string | (ImageItem | string)[];
-  onOpen?: () => void;
-} & HTMLAttributes<HTMLDivElement>;
-
-export const PreviewImage: FC<Props> = ({
-  title = '', images = '', onOpen, ...rest
-}) => {
-  const handleClick = () => {
-    if (onOpen) onOpen();
-  };
-
-  return (
-    <div
-      className="rounded-lg shadow-sm hover:shadow-md w-fit min-w-80 max-w-96 border bg-card p-4 flex flex-col items-start justify-stretch space-y-2 cursor-pointer"
-      onClick={handleClick}
-      {...rest}>
-      <div className="truncate text-xs w-full font-medium">{title}</div>
-
-      {Array.isArray(images) ? (
-        images.map((image, index) => (
-          <img
-            key={index}
-            src={typeof image === 'string' ? image : image.url}
-            className="w-80"
-            alt={`image-${index}`} />
-        ))
-      ) : (
-        images && <img src={images} className="w-80" alt="image" />
-      )}
-    </div>
-  );
-};
-
-export default PreviewImage;