@docyrus/ui-pro-ai-assistant 0.0.1

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

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

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

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

@@ -0,0 +1,47 @@
+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;