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

package/src/components/sheet-command.tsx

@@ -1,88 +0,0 @@
-'use client';
-
-import { useEffect, useRef } from 'react';
-
-import { FileSpreadsheet, Loader2 } from 'lucide-react';
-import { Card } from '@docyrus/ui-pro-shared/components/card';
-
-interface SheetCommandProps {
-  commands?: any[];
-  state?: string;
-  toolCallId?: string;
-  workId?: string;
-  onAutoRespond?: (commands: any[]) => void;
-  onSendSpreadsheetCommands?: (commands: any[]) => void;
-  openCanvasView?: (options: any) => void;
-}
-
-export function SheetCommand({
-  commands,
-  state,
-  toolCallId,
-  workId,
-  onAutoRespond,
-  onSendSpreadsheetCommands: _onSendSpreadsheetCommands,
-  openCanvasView
-}: SheetCommandProps) {
-  const hasRespondedRef = useRef(false);
-  const commandCount = commands?.length ?? 0;
-
-  useEffect(() => {
-    if (
-      state === 'input-available'
-      && commands && commands.length > 0
-      && toolCallId
-      && !hasRespondedRef.current
-    ) {
-      hasRespondedRef.current = true;
-
-      // Execute commands on the already-open UniverSheets via postMessage
-      for (const cmd of commands) {
-        window.postMessage(
-          { type: 'event', eventName: 'api:call', payload: cmd },
-          '*'
-        );
-      }
-
-      // Keep canvas visible
-      openCanvasView?.({
-        type: 'xlsx',
-        id: workId,
-        workId,
-        title: 'Spreadsheet',
-        commands
-      });
-
-      onAutoRespond?.(commands);
-    }
-  }, [
-    state,
-    commands,
-    toolCallId,
-    workId,
-    openCanvasView,
-    onAutoRespond
-  ]);
-
-  return (
-    <div className="flex flex-row items-center space-x-4">
-      <Card className="p-4 flex flex-col space-y-2 w-fit min-w-80 max-w-96 shadow-sm">
-        <div className="flex items-start space-x-2">
-          <div className="flex-none p-2 bg-slate-50 rounded">
-            <FileSpreadsheet className="size-8 text-muted-foreground" />
-          </div>
-          <div className="grow space-y-1 min-w-0">
-            <div className="font-medium text-base">Spreadsheet Commands</div>
-            <p className="text-sm text-muted-foreground">
-              {commandCount} command{commandCount !== 1 ? 's' : ''} to execute
-            </p>
-          </div>
-        </div>
-      </Card>
-
-      {(state === 'input-streaming' || state === 'input-available') && (
-        <Loader2 className="size-8 animate-spin text-primary flex-none" />
-      )}
-    </div>
-  );
-}

package/src/components/shell-canvas.tsx

@@ -1,122 +0,0 @@
-'use client';
-
-import { useEffect, useRef } from 'react';
-
-import { useApiClient } from '../lib/api-client';
-
-const ALLOWED_ORIGINS = ['https://shell.docy.work', 'https://shell-docyrus.web.app'];
-
-interface ShellCanvasUser {
-  id?: string;
-  email?: string;
-  firstname?: string;
-  lastname?: string;
-  photo?: string;
-}
-
-interface ShellCanvasProps {
-  workId: string;
-  versionId?: string | null;
-  title?: string;
-  user?: ShellCanvasUser;
-  onSendToChat?: (message: string) => void;
-}
-
-export function ShellCanvas({
-  workId, versionId, title, user, onSendToChat
-}: ShellCanvasProps) {
-  const src = `https://shell.docy.work?work=${workId}${versionId ? `&versionId=${versionId}` : ''}`;
-  const apiClient = useApiClient();
-  const onSendToChatRef = useRef(onSendToChat);
-
-  onSendToChatRef.current = onSendToChat;
-
-  useEffect(() => {
-    const api: Record<string, (...args: any[]) => unknown> = {
-      getUser: () => user ?? {},
-      getTenant: () => ({}),
-      getRecord: async (appSlug: string, dataSourceSlug: string, recordId: string, options: any = {}) => {
-        const params: Record<string, unknown> = {};
-
-        if (options.columns) params.columns = options.columns;
-
-        return apiClient.get(`apps/${appSlug}/data-sources/${dataSourceSlug}/items/${recordId}`, params);
-      },
-      getRecords: async (appSlug: string, dataSourceSlug: string, options: any = {}) => {
-        const params: Record<string, unknown> = {};
-
-        [
-          'columns',
-          'limit',
-          'offset',
-          'orderBy',
-          'orderByDirection',
-          'filters',
-          'pivot'
-        ].forEach((k) => {
-          if (options[k] !== undefined) params[k] = options[k];
-        });
-
-        return apiClient.get(`apps/${appSlug}/data-sources/${dataSourceSlug}/items`, params);
-      },
-      insertRecord: (appSlug: string, dataSourceSlug: string, data: unknown) => apiClient.post(`apps/${appSlug}/data-sources/${dataSourceSlug}/items`, data),
-      updateRecord: (appSlug: string, dataSourceSlug: string, recordId: string, data: unknown) => apiClient.patch(`apps/${appSlug}/data-sources/${dataSourceSlug}/items/${recordId}`, data),
-      deleteRecord: (appSlug: string, dataSourceSlug: string, recordId: string) => apiClient.delete(`apps/${appSlug}/data-sources/${dataSourceSlug}/items/${recordId}`),
-      viewRecord: async () => {},
-      runAggregateQuery: (appSlug: string, dataSourceSlug: string, rows: unknown, calculations: unknown) => apiClient.get(`apps/${appSlug}/data-sources/${dataSourceSlug}/items`, { rows, calculations } as any),
-      runCustomQuery: (customQueryId: string, options: unknown) => apiClient.put(`reports/runCustomQuery/${customQueryId}`, options),
-      sendToChat: (message: string) => { onSendToChatRef.current?.(message); },
-      list: (...args: any[]) => apiClient.get(args[0], args[1]),
-      get: (...args: any[]) => apiClient.get(args[0], args[1]),
-      post: (...args: any[]) => apiClient.post(args[0], args[1]),
-      put: (...args: any[]) => apiClient.put(args[0], args[1]),
-      patch: (...args: any[]) => apiClient.patch(args[0], args[1]),
-      delete: (...args: any[]) => apiClient.delete(args[0])
-    };
-
-    const handleMessage = async (event: MessageEvent) => {
-      if (!ALLOWED_ORIGINS.includes(event.origin)) return;
-
-      const { type, id } = event.data ?? {};
-
-      if (type === 'handshake') {
-        (event.source as Window)?.postMessage(
-          {
-            type: 'handshake_ack',
-            id,
-            sessionId: crypto.randomUUID(),
-            allowedMethods: Object.keys(api)
-          },
-          event.origin
-        );
-      } else if (type === 'rpc') {
-        const { method, params = [] } = event.data;
-
-        if (!Object.prototype.hasOwnProperty.call(api, method)) return;
-
-        try {
-          const result = await (api[method] as any)(...params);
-
-          (event.source as Window)?.postMessage({ type: 'rpc_response', id, result }, event.origin);
-        } catch (err: any) {
-          (event.source as Window)?.postMessage(
-            { type: 'rpc_response', id, error: err?.message ?? 'Unknown error' },
-            event.origin
-          );
-        }
-      }
-    };
-
-    window.addEventListener('message', handleMessage);
-
-    return () => window.removeEventListener('message', handleMessage);
-  }, [apiClient, user]);
-
-  return (
-    <iframe
-      src={src}
-      title={title}
-      className="w-full h-full border-0"
-      sandbox="allow-scripts allow-same-origin allow-downloads allow-modals allow-forms allow-presentation allow-top-navigation-by-user-activation allow-popups" />
-  );
-}

package/src/components/show-advanced-data-table.tsx

@@ -1,352 +0,0 @@
-'use client';
-
-import {
-  useCallback, useEffect, useMemo, useRef, useState
-} from 'react';
-
-import {
-  ChevronDown, Download, FileSpreadsheet, FileText
-} from 'lucide-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';
-
-interface ColumnFormat {
-  formatter: 'number' | 'percent' | 'currency' | 'date' | 'datetime';
-  format?: Record<string, any> | string;
-}
-
-interface Column {
-  name?: string;
-  field?: string;
-  title?: string;
-  label?: string;
-  width?: number;
-  align?: 'left' | 'center' | 'right';
-  format?: ColumnFormat;
-  sortable?: boolean;
-  minWidth?: number;
-  maxWidth?: number;
-}
-
-interface ShowAdvancedDataTableProps {
-  title?: string;
-  description?: string;
-  additionalComments?: string | null;
-  state?: string;
-  errorText?: string;
-  data?: string;
-  columns?: Column[];
-  enableTree?: boolean;
-  treeChildrenField?: string;
-  sortable?: boolean;
-  defaultRowHeight?: number;
-  defaultHeaderRowHeight?: number;
-  defaultColWidth?: number;
-  height?: number;
-}
-
-const formatCellValue = (value: any, formatConfig?: ColumnFormat): string => {
-  if (value === null || value === undefined) return '-';
-  if (!formatConfig?.formatter) return String(value);
-
-  const { formatter, format } = formatConfig;
-  const fmt = typeof format === 'string' ? JSON.parse(format) : (format ?? {});
-
-  try {
-    switch (formatter) {
-      case 'number': {
-        const num = typeof value === 'string' ? parseFloat(value) : value;
-
-        if (typeof num !== 'number' || isNaN(num)) return String(value);
-        const { thousandsSeparator = ',', decimalsSeparator = '.', decimalPlaces = 2 } = fmt;
-        const fixed = num.toFixed(decimalPlaces);
-        const [intPart, decPart] = fixed.split('.');
-        const formattedInt = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, thousandsSeparator);
-
-        return decPart ? `${formattedInt}${decimalsSeparator}${decPart}` : formattedInt;
-      }
-
-      case 'percent': {
-        const num = typeof value === 'string' ? parseFloat(value) : value;
-
-        if (typeof num !== 'number' || isNaN(num)) return String(value);
-
-        return `${(num * 100).toFixed(fmt.decimalPlaces ?? 2)}%`;
-      }
-
-      case 'currency': {
-        const num = typeof value === 'string' ? parseFloat(value) : value;
-
-        if (typeof num !== 'number' || isNaN(num)) return String(value);
-
-        return `${fmt.symbol ?? '$'}${num.toFixed(2)}`;
-      }
-
-      case 'date': {
-        const d = new Date(value);
-
-        if (isNaN(d.getTime())) return String(value);
-
-        return d.toISOString().split('T')[0];
-      }
-
-      case 'datetime': {
-        const d = new Date(value);
-
-        if (isNaN(d.getTime())) return String(value);
-        const iso = d.toISOString();
-
-        return `${iso.split('T')[0]} ${iso.split('T')[1].slice(0, 5)}`;
-      }
-
-      default:
-        return String(value);
-    }
-  } catch {
-    return String(value);
-  }
-};
-
-export function ShowAdvancedDataTable({
-  title = 'Data Table',
-  description,
-  additionalComments,
-  state,
-  errorText,
-  data,
-  columns = [],
-  enableTree = false,
-  treeChildrenField = 'children',
-  sortable = true,
-  defaultRowHeight = 40,
-  defaultHeaderRowHeight = 40,
-  defaultColWidth = 150,
-  height = 500
-}: ShowAdvancedDataTableProps) {
-  const [open, setOpen] = useState(true);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const tableRef = useRef<any>(null);
-
-  const parsedData = useMemo(() => {
-    if (!data) return [];
-    try {
-      const parsed = JSON.parse(data);
-
-      return Array.isArray(parsed) ? parsed : [];
-    } catch {
-      return null;
-    }
-  }, [data]);
-
-  const parseError = useMemo(() => {
-    if (!data) return null;
-    try {
-      JSON.parse(data);
-
-      return null;
-    } catch (e: any) {
-      return e.message as string;
-    }
-  }, [data]);
-
-  const vtableColumns = useMemo(() => {
-    return columns.map((col) => {
-      const field = col.field ?? col.name ?? '';
-      const column: Record<string, any> = {
-        field,
-        title: col.title ?? col.label ?? field
-      };
-
-      if (col.width) column.width = typeof col.width === 'string' ? parseInt(col.width) : col.width;
-      if (col.minWidth) column.minWidth = col.minWidth;
-      if (col.maxWidth) column.maxWidth = col.maxWidth;
-      column.sort = col.sortable !== undefined ? col.sortable : sortable;
-      if (col.align) {
-        column.headerStyle = { textAlign: col.align };
-        column.style = { textAlign: col.align };
-      }
-      if (col.format?.formatter) {
-        column.format = (value: any) => formatCellValue(value, col.format);
-      }
-
-      return column;
-    });
-  }, [columns, sortable]);
-
-  const initTable = useCallback(async () => {
-    if (!containerRef.current || !parsedData || parsedData.length === 0) return;
-
-    // Ensure container has dimensions
-    const rect = containerRef.current.getBoundingClientRect();
-
-    if (rect.width === 0) return;
-
-    try {
-      const VTable = await import('@visactor/vtable');
-
-      if (tableRef.current) {
-        tableRef.current.release();
-        tableRef.current = null;
-      }
-
-      const options: Record<string, any> = {
-        container: containerRef.current,
-        records: parsedData,
-        columns: vtableColumns,
-        defaultRowHeight,
-        defaultHeaderRowHeight,
-        defaultColWidth,
-        widthMode: 'standard',
-        height,
-        animationAppear: false
-      };
-
-      if (enableTree) {
-        options.tree = { children: treeChildrenField, defaultOpenLevel: 1 };
-      }
-
-      tableRef.current = new VTable.ListTable(options);
-    } catch (err) {
-      console.error('Failed to initialize VTable:', err);
-    }
-  }, [
-    parsedData,
-    vtableColumns,
-    defaultRowHeight,
-    defaultHeaderRowHeight,
-    defaultColWidth,
-    height,
-    enableTree,
-    treeChildrenField
-  ]);
-
-  useEffect(() => {
-    if (state !== 'output-available' || !open) return;
-
-    // First attempt after short delay for layout
-    const t1 = setTimeout(() => initTable(), 150);
-
-    // Retry via ResizeObserver in case container has no dimensions yet
-    const observer = new ResizeObserver((entries) => {
-      const entry = entries[0];
-
-      if (entry && entry.contentRect.width > 0 && !tableRef.current) {
-        initTable();
-      }
-    });
-
-    if (containerRef.current) {
-      observer.observe(containerRef.current);
-    }
-
-    return () => {
-      clearTimeout(t1);
-      observer.disconnect();
-    };
-  }, [state, open, initTable]);
-
-  useEffect(() => {
-    return () => {
-      if (tableRef.current) {
-        tableRef.current.release();
-        tableRef.current = null;
-      }
-    };
-  }, []);
-
-  const handleDownload = useCallback(async (type: 'csv' | 'xlsx') => {
-    if (!tableRef.current) return;
-    const fileName = title;
-
-    if (type === 'csv') {
-      tableRef.current.exportToCsv?.({ fileName: `${fileName}.csv`, downloadFile: true, exportAllData: true });
-    } else {
-      tableRef.current.exportToExcel?.({
-        fileName: `${fileName}.xlsx`, downloadFile: true, exportAllData: true, ignoreIcon: true
-      });
-    }
-  }, [title]);
-
-  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>
-        <div className="flex items-center gap-1 shrink-0">
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="h-7 w-7"
-                onClick={e => e.stopPropagation()}>
-                <Download className="size-3.5" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuItem onClick={() => handleDownload('csv')}>
-                <FileText className="size-4 mr-2" />
-                Download as CSV
-              </DropdownMenuItem>
-              <DropdownMenuItem onClick={() => handleDownload('xlsx')}>
-                <FileSpreadsheet className="size-4 mr-2" />
-                Download as XLSX
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-          <ChevronDown className={cn('size-4 text-muted-foreground transition-transform', open && 'rotate-180')} />
-        </div>
-      </div>
-
-      {/* Body — always in DOM so VTable container keeps its ref */}
-      <div className={cn('p-4', !open && 'hidden')}>
-        {state !== 'output-available' && !parseError && (
-          <div className="w-full h-[200px] rounded-lg bg-muted/30 animate-pulse" />
-        )}
-        {parseError && (
-          <div className="text-sm text-destructive bg-destructive/10 border border-destructive/20 rounded-lg p-3">
-            <div className="font-medium">Error parsing data</div>
-            <div className="text-xs mt-1">{parseError}</div>
-          </div>
-        )}
-        {errorText && !parseError && (
-          <div className="text-sm text-destructive bg-destructive/10 border border-destructive/20 rounded-lg p-3">
-            {errorText}
-          </div>
-        )}
-        {state === 'output-available' && !parseError && parsedData && parsedData.length === 0 && (
-          <div className="text-sm text-muted-foreground text-center py-6">No data to display</div>
-        )}
-        <div ref={containerRef} className="w-full rounded-lg" style={{ height: `${height}px` }} />
-        {state === 'output-available' && parsedData && parsedData.length > 0 && (
-          <div className="text-xs text-muted-foreground mt-2">
-            {parsedData.length} {parsedData.length === 1 ? 'row' : 'rows'}
-          </div>
-        )}
-        {additionalComments && (
-          <div className="mt-4 text-sm bg-blue-50 border border-blue-200 rounded-lg p-3 dark:bg-blue-950/30 dark:border-blue-800">
-            <div className="font-medium text-blue-900 dark:text-blue-300 mb-1">Note</div>
-            <div className="text-blue-800 dark:text-blue-400">{additionalComments}</div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

package/src/components/show-generated-content-options.tsx

@@ -1,93 +0,0 @@
-'use client';
-
-import { List, Plus, RefreshCw } from 'lucide-react';
-
-import { Button } from '@docyrus/ui-pro-shared/components/button';
-
-interface ContentOption {
-  title?: string;
-  text?: string;
-}
-
-interface ShowGeneratedContentOptionsProps {
-  output?: ContentOption[] | null;
-  state: string;
-  onInsertText?: (data: { text: string }) => void;
-  onReplaceText?: (data: { text: string }) => void;
-}
-
-export function ShowGeneratedContentOptions({
-  output,
-  state,
-  onInsertText,
-  onReplaceText
-}: ShowGeneratedContentOptionsProps) {
-  const options: ContentOption[] = Array.isArray(output) ? output : [];
-
-  if (state === 'output-error') {
-    return <div className="text-xs text-destructive py-1">Failed to load options</div>;
-  }
-
-  if (state === 'output-available' && options.length === 0) {
-    return <div className="text-xs text-muted-foreground py-1">No options to display</div>;
-  }
-
-  if (state !== 'output-available' || options.length === 0) return null;
-
-  const handleInsert = (option: ContentOption) => {
-    onInsertText?.({ text: option.text || option.title || '' });
-  };
-
-  const handleReplace = (option: ContentOption) => {
-    onReplaceText?.({ text: option.text || option.title || '' });
-  };
-
-  return (
-    <div className="w-full">
-      <div className="flex items-center p-1 gap-2 mb-2">
-        <List className="w-4 h-4 text-primary" />
-        <p className="text-xs font-medium text-primary">
-          {`${options.length} options generated:`}
-        </p>
-      </div>
-      <div className="flex flex-col gap-2">
-        {options.map((option, index) => (
-          <div key={index} className="flex px-4 pt-2 rounded-lg bg-slate-50">
-            <div className="flex items-center justify-between mb-4 w-full">
-              <div className="flex flex-col w-full">
-                <div className="flex mb-2 justify-between items-center">
-                  {option.title && (
-                    <h3 className="text-sm ps-2 font-semibold text-foreground w-fit">
-                      {option.title}
-                    </h3>
-                  )}
-                  <div className="flex justify-end gap-2">
-                    <Button
-                      size="sm"
-                      variant="secondary"
-                      className="gap-1.5 [&_svg]:size-3.5 text-sky-600 hover:text-sky-700"
-                      onClick={() => handleInsert(option)}>
-                      <Plus />
-                      Insert
-                    </Button>
-                    <Button
-                      size="sm"
-                      variant="secondary"
-                      className="gap-1.5 [&_svg]:size-3.5 text-amber-600 hover:text-amber-700"
-                      onClick={() => handleReplace(option)}>
-                      <RefreshCw />
-                      Replace
-                    </Button>
-                  </div>
-                </div>
-                {option.text && (
-                  <p className="text-xs text-muted-foreground">{option.text}</p>
-                )}
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}