@docyrus/ui-pro-ai-assistant 0.0.1

package/src/views/canvas-code.tsx

@@ -0,0 +1,93 @@
+import { useMemo } from 'react';
+
+import { CodeView, type CodeViewPart } from '../components/code-view';
+
+type SandpackLanguage
+  = 'react-ts'
+    | 'react'
+    | 'vanilla-ts'
+    | 'vanilla'
+    | 'vue'
+    | 'svelte'
+    | 'static';
+
+type InputLanguage
+  = SandpackLanguage
+    | 'typescript'
+    | 'javascript'
+    | 'html'
+    | 'css'
+    | 'json'
+    | 'sql'
+    | 'markdown'
+    | 'text';
+
+interface CanvasCodeViewProps {
+  contentText?: string;
+  language?: InputLanguage;
+  title?: string;
+}
+
+function mapToSandpackLanguage(lang?: InputLanguage): SandpackLanguage {
+  switch (lang) {
+    case 'typescript':
+
+    case 'react-ts':
+      return 'react-ts';
+
+    case 'javascript':
+
+    case 'react':
+      return 'react';
+
+    case 'html':
+
+    case 'css':
+
+    case 'json':
+
+    case 'sql':
+
+    case 'markdown':
+
+    case 'text':
+      return 'static';
+
+    case 'vue':
+      return 'vue';
+
+    case 'svelte':
+      return 'svelte';
+
+    case 'vanilla-ts':
+      return 'vanilla-ts';
+
+    case 'vanilla':
+      return 'vanilla';
+
+    default:
+      return 'react-ts';
+  }
+}
+
+export function CanvasCodeView({
+  contentText = '',
+  language = 'react-ts',
+  title = 'Code Preview'
+}: CanvasCodeViewProps) {
+  const sandpackLanguage = mapToSandpackLanguage(language);
+
+  const part: CodeViewPart = useMemo(() => ({
+    state: 'output-available',
+    toolCallId: 'canvas-code',
+    input: {
+      title,
+      language: sandpackLanguage,
+      code: contentText
+    }
+  }), [contentText, sandpackLanguage, title]);
+
+  return <CodeView part={part} codeOnly />;
+}
+
+export default CanvasCodeView;

package/src/views/canvas-deep-research.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { JsonSchemaLayout } from '../components/json-schema-layout';
+
+export interface CanvasDeepResearchViewProps {
+  title?: string;
+  output_schema?: Record<string, any> | null;
+  content?: Record<string, any> | any[] | null;
+  basis?: any[] | null;
+}
+
+export function CanvasDeepResearchView({
+  title,
+  output_schema,
+  content,
+  basis
+}: CanvasDeepResearchViewProps) {
+  return (
+    <div className="h-full w-full overflow-x-auto bg-muted">
+      <div className="max-w-7xl mx-auto p-6">
+        {title && (
+          <div className="mb-6">
+            <h2 className="text-2xl font-semibold text-gray-900">{title}</h2>
+          </div>
+        )}
+
+        {output_schema && content ? (
+          <div className="bg-white rounded-lg shadow-sm p-6">
+            <JsonSchemaLayout
+              schema={output_schema}
+              data={content}
+              basis={basis ?? []} />
+          </div>
+        ) : (
+          <div className="bg-gray-50 border border-gray-200 rounded-lg p-8 text-center">
+            <p className="text-gray-500">No data available to display</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default CanvasDeepResearchView;

package/src/views/canvas-image.tsx

@@ -0,0 +1,25 @@
+import { type FC } from 'react';
+
+interface ImageData {
+  url: string;
+  width?: number;
+  height?: number;
+  mimeType?: string;
+}
+
+interface CanvasImageViewProps {
+  title?: string;
+  images?: ImageData[];
+}
+
+export const CanvasImageView: FC<CanvasImageViewProps> = ({ title = '', images = [] }) => (
+  <div className="h-full w-full overflow-x-hidden overflow-y-auto flex flex-col items-center space-y-2">
+    {images.map((image, index) => (
+      <img
+        key={index}
+        src={image.url}
+        alt={title || `Image ${index + 1}`}
+        className="w-fit max-w-full h-auto p-2 rounded" />
+    ))}
+  </div>
+);

package/src/views/canvas-record-view.tsx

@@ -0,0 +1,285 @@
+'use client';
+
+import {
+  useCallback, useEffect, useState, type SyntheticEvent
+} from 'react';
+
+import {
+  AlertCircle, CheckCircle, Loader2
+} from 'lucide-react';
+
+import { Button } from '@docyrus/ui-pro-shared/components/button';
+import { Input } from '@docyrus/ui-pro-shared/components/input';
+import { Label } from '@docyrus/ui-pro-shared/components/label';
+import { Separator } from '@docyrus/ui-pro-shared/components/separator';
+
+import { useApiClient } from '../lib/api-client';
+
+export type RecordMode = 'add' | 'edit' | 'view';
+
+export interface CanvasRecordViewProps {
+  dataSourceId: string;
+  mode?: RecordMode;
+  defaultValues?: Record<string, any> | string;
+  recordId?: string;
+  onSave?: (id: string, data: Record<string, any>) => void;
+  onClose?: () => void;
+}
+
+interface DsField {
+  id: string;
+  name: string;
+  slug: string;
+  type: string;
+  read_only?: boolean;
+  sort_order?: number;
+}
+
+interface DsInfo {
+  id: string;
+  name: string;
+  slug: string;
+  app: { id: string; name: string; slug: string };
+  fields: DsField[];
+}
+
+const parseValues = (values: any): Record<string, any> => {
+  if (!values) return {};
+
+  if (typeof values === 'string') {
+    try {
+      return JSON.parse(values);
+    } catch {
+      return {};
+    }
+  }
+
+  return typeof values === 'object' ? values : {};
+};
+
+const isUuid = (str: string): boolean => /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(str);
+
+export function CanvasRecordView({
+  dataSourceId,
+  mode = 'add',
+  defaultValues,
+  recordId,
+  onSave,
+  onClose
+}: CanvasRecordViewProps) {
+  const apiClient = useApiClient();
+  const parsedDefaults = parseValues(defaultValues);
+
+  // TODO: fetch dsInfo via config.getDataSourceSchema once auth strategy is finalized
+  const [dsInfo, _setDsInfo] = useState<DsInfo | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [formValues, setFormValues] = useState<Record<string, any>>(parsedDefaults);
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [savedId, setSavedId] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!dataSourceId) {
+      setIsLoading(false);
+
+      return;
+    }
+
+    let cancelled = false;
+
+    const init = async () => {
+      setIsLoading(true);
+
+      /*
+       * TODO: Fetch data source schema (fields + app slug) via getDataSourceSchema,
+       * then load record via REST if mode !== 'add'.
+       * Blocked by: auth strategy for server-side Supabase query.
+       */
+
+      if (!cancelled) {
+        setFormValues(parsedDefaults);
+        setIsLoading(false);
+      }
+    };
+
+    init();
+
+    return () => {
+      cancelled = true;
+    };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dataSourceId, mode, recordId]);
+
+  const handleChange = useCallback((key: string, val: any) => {
+    setFormValues(prev => ({
+      ...prev,
+      [key]: val
+    }));
+  }, []);
+
+  const handleSubmit = async (e: SyntheticEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (mode === 'view') return;
+
+    const appSlug = dsInfo?.app?.slug;
+    const dsSlug = dsInfo?.slug;
+
+    if (!appSlug || !dsSlug) {
+      setError('Data source information not loaded yet');
+
+      return;
+    }
+
+    setIsSaving(true);
+    setError(null);
+
+    try {
+      let res: any;
+
+      if (mode === 'add') {
+        res = await apiClient.post(`/apps/${appSlug}/data-sources/${dsSlug}/items`, formValues);
+      } else if (mode === 'edit' && recordId) {
+        res = await apiClient.patch(`/apps/${appSlug}/data-sources/${dsSlug}/items/${recordId}`, formValues);
+      }
+
+      if (res?.success) {
+        const id = res.data?.id || recordId || '';
+
+        setSavedId(id);
+        onSave?.(id, res.data ?? formValues);
+      } else {
+        setError(res?.error || res?.message || 'Failed to save record');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to save record');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const renderFields = () => {
+    const fields = dsInfo?.fields
+      ?.filter(f => !f.read_only || mode === 'view')
+      ?.sort((a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0));
+
+    if (fields && fields.length > 0) {
+      return fields.map((field) => {
+        const value = formValues[field.slug] ?? formValues[field.id] ?? '';
+        const label = field.name || field.slug;
+        const readOnly = mode === 'view' || !!field.read_only;
+
+        return (
+          <div key={field.id} className="space-y-1.5">
+            <Label className="text-xs font-medium capitalize">{label}</Label>
+            {isUuid(String(value)) ? (
+              <div className="px-3 py-2 rounded-md border bg-muted/30 text-xs text-muted-foreground truncate">
+                {String(value)}
+              </div>
+            ) : (
+              <Input
+                value={String(value)}
+                onChange={e => handleChange(field.slug, e.target.value)}
+                readOnly={readOnly}
+                className="text-sm h-9" />
+            )}
+          </div>
+        );
+      });
+    }
+
+    // Fallback: derive fields from formValues keys
+    return Object.entries(formValues).map(([key, value]) => {
+      if (key.endsWith('_currency')) return null;
+
+      const currencyKey = `${key}_currency`;
+      const currency = formValues[currencyKey];
+      const label = isUuid(key) ? `${key.slice(0, 8)}…` : key.replace(/_/g, ' ');
+
+      return (
+        <div key={key} className="space-y-1.5">
+          <Label className="text-xs font-medium capitalize">{label}</Label>
+          {isUuid(String(value)) ? (
+            <div className="px-3 py-2 rounded-md border bg-muted/30 text-xs text-muted-foreground truncate">
+              {String(value)}
+            </div>
+          ) : (
+            <div className="flex gap-2">
+              <Input
+                value={String(value ?? '')}
+                onChange={e => handleChange(key, e.target.value)}
+                readOnly={mode === 'view'}
+                className="text-sm h-9" />
+              {currency && (
+                <div className="flex items-center px-2.5 bg-muted rounded-md text-xs font-medium shrink-0">
+                  {String(currency)}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      );
+    }).filter(Boolean);
+  };
+
+  const modeLabel = mode === 'add' ? 'Create' : mode === 'edit' ? 'Update' : 'View';
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-full p-8">
+        <Loader2 className="size-5 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (savedId !== null) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full p-8 gap-4">
+        <CheckCircle className="size-10 text-green-500" />
+        <div className="text-center">
+          <div className="font-medium">Record saved successfully</div>
+          {savedId && <div className="text-xs text-muted-foreground mt-1">ID: {savedId}</div>}
+        </div>
+        <Button variant="outline" size="sm" onClick={onClose}>Close</Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <form onSubmit={handleSubmit} className="flex flex-col flex-1 overflow-hidden">
+        <div className="flex-1 overflow-y-auto p-4 space-y-4">
+          {error && (
+            <div className="flex items-start gap-2 p-3 bg-destructive/10 border border-destructive/20 rounded-md text-destructive text-sm">
+              <AlertCircle className="size-4 mt-0.5 shrink-0" />
+              <span>{error}</span>
+            </div>
+          )}
+
+          {renderFields()}
+
+          {Object.keys(formValues).length === 0 && !dsInfo?.fields?.length && (
+            <div className="text-sm text-muted-foreground text-center py-8">
+              No fields available for this data source
+            </div>
+          )}
+        </div>
+
+        {mode !== 'view' && (
+          <>
+            <Separator />
+            <div className="flex items-center justify-end gap-2 p-4 shrink-0">
+              {onClose && (
+                <Button type="button" variant="outline" size="sm" onClick={onClose}>
+                  Cancel
+                </Button>
+              )}
+              <Button type="submit" size="sm" disabled={isSaving}>
+                {isSaving ? <><Loader2 className="size-3.5 mr-1.5 animate-spin" />Saving…</> : `${modeLabel} Record`}
+              </Button>
+            </div>
+          </>
+        )}
+      </form>
+    </div>
+  );
+}

package/src/views/canvas-spreadsheet.tsx

@@ -0,0 +1,125 @@
+'use client';
+
+import { useMemo } from 'react';
+
+import { UniverSheets } from '../internal/sheets';
+
+interface CanvasSpreadsheetViewProps {
+  title?: string;
+  content?: Record<string, any> | null;
+  workId?: string;
+  versionId?: string;
+  commands?: any[];
+  onData?: (data: { workbook: unknown; workbookJson: string }) => void;
+}
+
+const toSparse = (arr: any): Record<string, any> => {
+  if (!Array.isArray(arr)) {
+    return arr || {};
+  }
+  const m: Record<string, any> = {};
+
+  arr.forEach((row: any, r: number) => row?.forEach((cell: any, c: number) => cell && ((m[r] = m[r] || {})[c] = cell)));
+
+  return m;
+};
+
+const transformSheet = (sheet: Record<string, any>, sheetId: string) => {
+  const keys = [
+    'id',
+    'name',
+    'columnCount',
+    'rowCount',
+    'mergeData',
+    'rowData',
+    'columnData',
+    'rowHeader',
+    'columnHeader',
+    'showGridlines',
+    'rightToLeft',
+    'freeze',
+    'defaultColumnWidth',
+    'defaultRowHeight',
+    'tabColor',
+    'hidden'
+  ];
+  const result: Record<string, any> = { cellData: toSparse(sheet.cellData), id: sheetId };
+
+  keys.forEach(k => sheet[k] != null && (result[k] = sheet[k]));
+
+  return result;
+};
+
+const transformWorkbook = (wb: Record<string, any> | null | undefined): Record<string, any> | null => {
+  if (!wb) return null;
+
+  const sheetsObject: Record<string, any> = {};
+
+  const rawSheets = Array.isArray(wb.sheets) ? wb.sheets : Object.values(wb.sheets ?? {});
+
+  rawSheets.forEach((s: any, index: number) => {
+    if (!s || s === '') return;
+
+    let sheetData: Record<string, any>;
+
+    if (typeof s === 'string') {
+      try {
+        sheetData = JSON.parse(s);
+      } catch {
+        console.warn(`Sheet at index ${index} is not valid JSON:`, s);
+
+        return;
+      }
+    } else {
+      sheetData = s;
+    }
+
+    if (sheetData?.id && sheetData?.sheet) {
+      sheetsObject[sheetData.id] = transformSheet(sheetData.sheet, sheetData.id);
+    } else if (sheetData?.id) {
+      sheetsObject[sheetData.id] = transformSheet(sheetData, sheetData.id);
+    }
+  });
+
+  const validSheetIds = new Set(Object.keys(sheetsObject));
+  const sheetOrder = (wb.sheetOrder || []).filter((id: string) => validSheetIds.has(id));
+
+  const workbookData: Record<string, any> = {
+    id: wb.id,
+    name: wb.name,
+    sheetOrder,
+    sheets: sheetsObject
+  };
+
+  if (wb.styles) {
+    if (Array.isArray(wb.styles)) {
+      workbookData.styles = {};
+      wb.styles.forEach((s: any) => {
+        if (s.id && s.style) {
+          workbookData.styles[s.id] = s.style;
+        }
+      });
+    } else {
+      workbookData.styles = wb.styles;
+    }
+  }
+
+  return workbookData;
+};
+
+export function CanvasSpreadsheetView({
+  content,
+  commands,
+  onData
+}: CanvasSpreadsheetViewProps) {
+  const workbookData = useMemo(() => transformWorkbook(content?.workbook ?? content), [content]);
+
+  return (
+    <div className="h-full w-full overflow-hidden bg-muted flex relative">
+      <UniverSheets
+        initialData={workbookData ?? undefined}
+        commands={commands}
+        onData={onData} />
+    </div>
+  );
+}

package/src/views/canvas-text.tsx

@@ -0,0 +1,52 @@
+import { useEffect, useRef } from 'react';
+
+import { PlateEditor, type PlateEditorHandle } from '../internal/plate-editor';
+
+import { useAssistantConfig } from '../lib/assistant-config';
+import { CanvasCodeView } from './canvas-code';
+
+type TextLanguage = 'markdown' | 'plain_text' | 'json' | 'javascript' | 'typescript' | 'html' | 'sql';
+
+interface CanvasTextViewProps {
+  contentText?: string;
+  language?: TextLanguage;
+  title?: string;
+}
+
+function MarkdownView({ contentText = '' }: { contentText?: string }) {
+  const editorRef = useRef<PlateEditorHandle>(null);
+  const { getAuthToken } = useAssistantConfig();
+
+  useEffect(() => {
+    editorRef.current?.setMarkdown(contentText);
+  }, [contentText]);
+
+  return (
+    <PlateEditor
+      ref={editorRef}
+      getAccessToken={getAuthToken}
+      onReady={() => editorRef.current?.setMarkdown(contentText)} />
+  );
+}
+
+export function CanvasTextView({
+  contentText = '',
+  language = 'markdown',
+  title = ''
+}: CanvasTextViewProps) {
+  if (language === 'markdown' || language === 'plain_text') {
+    return (
+      <div className="h-full w-full overflow-x-auto bg-muted flex justify-center items-start">
+        <MarkdownView contentText={contentText} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full w-full overflow-x-auto">
+      <CanvasCodeView contentText={contentText} language={language} title={title} />
+    </div>
+  );
+}
+
+export default CanvasTextView;