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

package/src/views/canvas-code.tsx

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

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

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

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

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

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