@docyrus/ui-pro-ai-assistant 0.0.1

package/src/components/sheet-command.tsx

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

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

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

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