larkup 0.1.14 → 0.1.21

package/components/chat/canvas/doc-editor-provider.tsx

@@ -0,0 +1,343 @@
+'use client';
+
+import { createContext, useContext, useState, useCallback, type ReactNode } from 'react';
+import type { ParsedDocument, DocumentField, FieldEdit } from '@larkup/tool-doc-editor/types';
+
+/* ------------------------------------------------------------------ */
+/* Types                                                               */
+/* ------------------------------------------------------------------ */
+
+interface DocEditorState {
+  /** Whether the canvas split-view is open */
+  isCanvasOpen: boolean;
+  /** Active editor session ID */
+  sessionId: string | null;
+  /** Parsed document data */
+  parsedDocument: ParsedDocument | null;
+  /** File being processed */
+  activeFileName: string | null;
+  /** File type */
+  activeFileType: string | null;
+  /** Base64 file data for live preview */
+  fileBase64: string | null;
+  /** MIME type */
+  fileMimeType: string | null;
+  /** Loading state */
+  isLoading: boolean;
+  /** Error state */
+  error: string | null;
+  /** Fields currently being filled by AI (for animation) */
+  fillingFields: Set<string>;
+  /** Recently updated fields (for highlight animation) */
+  updatedFields: Set<string>;
+  /** Monotonically increasing version counter to force `<object>` remounting */
+  updateVersion: number;
+}
+
+interface DocEditorActions {
+  /** Open the canvas with a file */
+  openCanvas: (file: File, options?: { background?: boolean }) => Promise<void>;
+  /** Close the canvas */
+  closeCanvas: () => void;
+  /** Toggle the canvas */
+  toggleCanvas: () => void;
+  /** Apply field edits */
+  applyEdits: (edits: FieldEdit[]) => Promise<void>;
+  /** Mark fields as being filled (for animation) */
+  setFillingFields: (fieldIds: string[]) => void;
+  /** Clear filling state */
+  clearFillingFields: () => void;
+  /** Export the current document */
+  exportFile: () => void;
+  /** Update parsed document from external source (e.g., chat tool result) */
+  updateFromToolResult: (result: {
+    sessionId: string;
+    fields: DocumentField[];
+    updatedFields: string[];
+    fileBase64?: string;
+    pages?: any[];
+    totalPages?: number;
+  }) => void;
+}
+
+type DocEditorContext = DocEditorState & DocEditorActions;
+
+/* ------------------------------------------------------------------ */
+/* Context                                                             */
+/* ------------------------------------------------------------------ */
+
+const DocEditorCtx = createContext<DocEditorContext | null>(null);
+
+export function useDocEditor(): DocEditorContext {
+  const ctx = useContext(DocEditorCtx);
+  if (!ctx) {
+    throw new Error('useDocEditor must be used within a DocEditorProvider');
+  }
+  return ctx;
+}
+
+/* ------------------------------------------------------------------ */
+/* Provider                                                            */
+/* ------------------------------------------------------------------ */
+
+export function DocEditorProvider({ children }: { children: ReactNode }) {
+  const [state, setState] = useState<DocEditorState>({
+    isCanvasOpen: false,
+    sessionId: null,
+    parsedDocument: null,
+    activeFileName: null,
+    activeFileType: null,
+    fileBase64: null,
+    fileMimeType: null,
+    isLoading: false,
+    error: null,
+    fillingFields: new Set(),
+    updatedFields: new Set(),
+    updateVersion: 0,
+  });
+
+  /* ---- Open Canvas ---- */
+  const openCanvas = useCallback(async (file: File, options?: { background?: boolean }) => {
+    setState((s) => ({
+      ...s,
+      isLoading: true,
+      error: null,
+      activeFileName: file.name,
+      isCanvasOpen: options?.background ? s.isCanvasOpen : true,
+    }));
+
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+
+      const res = await fetch('/api/doc-editor/parse', {
+        method: 'POST',
+        body: formData,
+      });
+
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.error || 'Failed to parse file');
+      }
+
+      const data = await res.json();
+
+      // Read the file as base64 for preview
+      const fileBase64 = await new Promise<string>((resolve) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+          const result = reader.result as string;
+          // Remove data URL prefix
+          resolve(result.split(',')[1] || result);
+        };
+        reader.readAsDataURL(file);
+      });
+
+      setState((s) => ({
+        ...s,
+        isLoading: false,
+        sessionId: data.sessionId,
+        parsedDocument: {
+          sessionId: data.sessionId,
+          fileName: data.fileName,
+          type: data.type,
+          mimeType: data.mimeType,
+          fileSize: data.fileSize,
+          pages: data.pages,
+          fields: data.fields,
+          rawText: data.rawText,
+          metadata: data.metadata,
+          totalPages: data.totalPages,
+        },
+        activeFileType: data.type,
+        fileMimeType: data.mimeType,
+        fileBase64,
+        updateVersion: s.updateVersion + 1,
+      }));
+    } catch (err: any) {
+      setState((s) => ({
+        ...s,
+        isLoading: false,
+        error: err.message || 'Failed to parse file',
+      }));
+    }
+  }, []);
+
+  /* ---- Close Canvas ---- */
+  const closeCanvas = useCallback(() => {
+    setState((s) => ({
+      ...s,
+      isCanvasOpen: false,
+    }));
+  }, []);
+
+  /* ---- Toggle Canvas ---- */
+  const toggleCanvas = useCallback(() => {
+    setState((s) => ({
+      ...s,
+      isCanvasOpen: !s.isCanvasOpen,
+    }));
+  }, []);
+
+  /* ---- Apply Edits ---- */
+  const applyEdits = useCallback(
+    async (edits: FieldEdit[]) => {
+      if (!state.sessionId) return;
+
+      // Mark fields as filling (for animation)
+      setState((s) => ({
+        ...s,
+        fillingFields: new Set(edits.map((e) => e.fieldId)),
+      }));
+
+      try {
+        const res = await fetch('/api/doc-editor/edit', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            sessionId: state.sessionId,
+            fieldEdits: edits,
+          }),
+        });
+
+        if (!res.ok) {
+          const data = await res.json();
+          throw new Error(data.error || 'Edit failed');
+        }
+
+        const data = await res.json();
+
+        setState((s) => ({
+          ...s,
+          fillingFields: new Set(),
+          updatedFields: new Set(data.updatedFields || []),
+          parsedDocument: s.parsedDocument
+            ? {
+                ...s.parsedDocument,
+                fields: data.fields || s.parsedDocument.fields,
+                pages: data.pages || s.parsedDocument.pages,
+                totalPages: data.totalPages || s.parsedDocument.totalPages,
+              }
+            : null,
+          fileBase64: data.fileBase64 || s.fileBase64,
+          updateVersion: s.updateVersion + 1,
+        }));
+
+        // Clear the updated highlight after 2 seconds
+        setTimeout(() => {
+          setState((s) => ({ ...s, updatedFields: new Set() }));
+        }, 2000);
+      } catch (err: any) {
+        setState((s) => ({
+          ...s,
+          fillingFields: new Set(),
+          error: err.message || 'Edit failed',
+        }));
+      }
+    },
+    [state.sessionId],
+  );
+
+  /* ---- Set Filling Fields ---- */
+  const setFillingFields = useCallback((fieldIds: string[]) => {
+    setState((s) => ({ ...s, fillingFields: new Set(fieldIds) }));
+  }, []);
+
+  /* ---- Clear Filling Fields ---- */
+  const clearFillingFields = useCallback(() => {
+    setState((s) => ({ ...s, fillingFields: new Set() }));
+  }, []);
+
+  /* ---- Export File ---- */
+  const exportFile = useCallback(() => {
+    if (!state.sessionId) return;
+
+    const url = `/api/doc-editor/export?sessionId=${encodeURIComponent(state.sessionId)}`;
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = state.activeFileName || 'document';
+    link.click();
+  }, [state.sessionId, state.activeFileName]);
+
+  /* ---- Update from Tool Result ---- */
+  const updateFromToolResult = useCallback(
+    (result: {
+      sessionId: string;
+      fields: DocumentField[];
+      updatedFields: string[];
+      fileBase64?: string;
+      pages?: any[];
+      totalPages?: number;
+    }) => {
+      setState((s) => {
+        // If the canvas is not open for this session, open it
+        const shouldOpen = !s.isCanvasOpen || s.sessionId !== result.sessionId;
+
+        return {
+          ...s,
+          sessionId: result.sessionId,
+          isCanvasOpen: true,
+          parsedDocument: s.parsedDocument
+            ? {
+                ...s.parsedDocument,
+                fields: result.fields,
+                pages: result.pages || s.parsedDocument.pages,
+                totalPages: result.totalPages || s.parsedDocument.totalPages,
+              }
+            : {
+                sessionId: result.sessionId,
+                fileName: s.activeFileName || 'Document',
+                type: 'pdf',
+                mimeType: 'application/pdf',
+                fileSize: 0,
+                pages: result.pages || [],
+                fields: result.fields || [],
+                rawText: '',
+                metadata: {},
+                totalPages: result.totalPages || 1,
+              },
+          fileBase64: result.fileBase64 || s.fileBase64,
+          updatedFields: new Set(result.updatedFields),
+          fillingFields: new Set(),
+          updateVersion: s.updateVersion + 1,
+        };
+      });
+
+      // Restore on the backend just in case the server restarted and memory was cleared
+      if (result.fileBase64 && result.sessionId) {
+        fetch('/api/doc-editor/restore', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            sessionId: result.sessionId,
+            fileBase64: result.fileBase64,
+            // Pass minimal required fields for the backend session
+            fileName: 'Document',
+            mimeType: 'application/pdf',
+            activeFileType: 'pdf',
+          }),
+        }).catch(console.error);
+      }
+
+      // Clear highlight after animation
+      setTimeout(() => {
+        setState((s) => ({ ...s, updatedFields: new Set() }));
+      }, 2000);
+    },
+    [],
+  );
+
+  const value: DocEditorContext = {
+    ...state,
+    openCanvas,
+    closeCanvas,
+    toggleCanvas,
+    applyEdits,
+    setFillingFields,
+    clearFillingFields,
+    exportFile,
+    updateFromToolResult,
+  };
+
+  return <DocEditorCtx.Provider value={value}>{children}</DocEditorCtx.Provider>;
+}

package/components/chat/canvas/document-canvas.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import { useRef, useCallback, useState } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useDocEditor } from './doc-editor-provider';
+import { DocumentViewer } from './document-viewer';
+import { cn } from '@/lib/utils';
+
+/* ------------------------------------------------------------------ */
+/* DocumentCanvas    */
+/* ------------------------------------------------------------------ */
+
+interface DocumentCanvasProps {
+  /** The chat content to render on the left side */
+  children: React.ReactNode;
+}
+
+export function DocumentCanvas({ children }: DocumentCanvasProps) {
+  const { isCanvasOpen, parsedDocument } = useDocEditor();
+  const [splitRatio, setSplitRatio] = useState(50); // percentage for left panel
+  const containerRef = useRef<HTMLDivElement>(null);
+  const isDragging = useRef(false);
+
+  /* ---- Resize handle drag ---- */
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    isDragging.current = true;
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+
+    const handleMouseMove = (ev: MouseEvent) => {
+      if (!isDragging.current || !containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      const x = ev.clientX - rect.left;
+      const pct = Math.max(25, Math.min(75, (x / rect.width) * 100));
+      setSplitRatio(pct);
+    };
+
+    const handleMouseUp = () => {
+      isDragging.current = false;
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+  }, []);
+
+  /* ---- Split-view layout ---- */
+  return (
+    <div ref={containerRef} className="flex h-full w-full overflow-hidden">
+      {/* Left panel — Chat */}
+      <motion.div
+        initial={{ width: '100%' }}
+        animate={{ width: isCanvasOpen ? `${splitRatio}%` : '100%' }}
+        transition={{ type: 'spring', stiffness: 300, damping: 30 }}
+        className="flex h-full min-w-0 flex-col overflow-hidden"
+      >
+        {children}
+      </motion.div>
+
+      {/* Resize handle */}
+      {isCanvasOpen && (
+        <div
+          role="separator"
+          aria-orientation="vertical"
+          onMouseDown={handleMouseDown}
+          className={cn(
+            'relative z-10 flex w-[3px] shrink-0 cursor-col-resize items-center justify-center',
+            'bg-border/40 transition-colors hover:bg-primary/30 active:bg-primary/50',
+            'group',
+          )}
+        >
+          {/* Visual handle indicator */}
+          <div className="absolute h-8 w-1 rounded-full bg-border group-hover:bg-primary/40 transition-colors" />
+        </div>
+      )}
+
+      {/* Right panel — Document Viewer */}
+      <AnimatePresence mode="wait">
+        {isCanvasOpen && (
+          <motion.div
+            key="canvas-panel"
+            initial={{ width: 0, opacity: 0, scale: 0.95 }}
+            animate={{
+              width: `${100 - splitRatio}%`,
+              opacity: 1,
+              scale: 1,
+            }}
+            exit={{ width: 0, opacity: 0, scale: 0.95 }}
+            transition={{ type: 'spring', stiffness: 300, damping: 30 }}
+            className="flex h-full min-w-0 flex-col overflow-hidden origin-top-left"
+          >
+            <DocumentViewer />
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

package/components/chat/canvas/document-field.tsx

@@ -0,0 +1,171 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { Check, Loader2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { DocumentField as DocumentFieldType } from '@larkup/tool-doc-editor/types';
+
+/* ------------------------------------------------------------------ */
+/* DocumentField — individual editable field with animations           */
+/* ------------------------------------------------------------------ */
+
+interface DocumentFieldProps {
+  field: DocumentFieldType;
+  /** Whether this field is currently being filled by AI */
+  isFilling: boolean;
+  /** Whether this field was recently updated */
+  isUpdated: boolean;
+  /** Callback when user manually edits the field */
+  onEdit: (value: string) => void;
+}
+
+export function DocumentField({ field, isFilling, isUpdated, onEdit }: DocumentFieldProps) {
+  const [localValue, setLocalValue] = useState(field.value);
+  const [isEditing, setIsEditing] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Sync external value changes (from AI fills)
+  useEffect(() => {
+    setLocalValue(field.value);
+  }, [field.value]);
+
+  const handleBlur = () => {
+    setIsEditing(false);
+    if (localValue !== field.value) {
+      onEdit(localValue);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      (e.target as HTMLElement).blur();
+    }
+  };
+
+  return (
+    <motion.div
+      data-field-id={field.id}
+      layout
+      initial={{ opacity: 0, y: 4 }}
+      animate={{ opacity: 1, y: 0 }}
+      className={cn(
+        'group relative rounded-lg border px-3 py-2 transition-all duration-300',
+        isFilling && 'border-primary/40 bg-primary/5',
+        isUpdated && !isFilling && 'border-emerald-400/60 bg-emerald-50/50 dark:bg-emerald-900/10',
+        !isFilling && !isUpdated && 'border-border/60 bg-card hover:border-border',
+      )}
+    >
+      {/* Label */}
+      <div className="flex items-center justify-between mb-1">
+        <label className="text-[11px] font-medium text-muted-foreground">
+          {field.name}
+          {field.required && <span className="text-destructive ml-0.5">*</span>}
+        </label>
+        <div className="flex items-center gap-1">
+          {isFilling && (
+            <motion.div
+              initial={{ scale: 0 }}
+              animate={{ scale: 1 }}
+              className="flex items-center gap-1"
+            >
+              <Loader2 className="size-3 animate-spin text-primary" />
+              <span className="text-[9px] text-primary font-medium">Filling…</span>
+            </motion.div>
+          )}
+          {isUpdated && !isFilling && (
+            <motion.div
+              initial={{ scale: 0 }}
+              animate={{ scale: 1 }}
+              transition={{ type: 'spring', stiffness: 500, damping: 25 }}
+              className="flex items-center gap-1"
+            >
+              <div className="flex h-4 w-4 items-center justify-center rounded-full bg-emerald-500">
+                <Check className="size-2.5 text-white" />
+              </div>
+              <span className="text-[9px] text-emerald-600 dark:text-emerald-400 font-medium">
+                Updated
+              </span>
+            </motion.div>
+          )}
+        </div>
+      </div>
+
+      {/* Field input */}
+      {field.type === 'checkbox' ? (
+        <label className="flex items-center gap-2 cursor-pointer">
+          <input
+            type="checkbox"
+            checked={localValue === 'true'}
+            onChange={(e) => {
+              const val = e.target.checked ? 'true' : 'false';
+              setLocalValue(val);
+              onEdit(val);
+            }}
+            className="h-4 w-4 rounded border-border text-primary focus:ring-primary"
+          />
+          <span className="text-xs text-foreground">{field.name}</span>
+        </label>
+      ) : field.type === 'select' && field.options ? (
+        <select
+          value={localValue}
+          onChange={(e) => {
+            setLocalValue(e.target.value);
+            onEdit(e.target.value);
+          }}
+          className="w-full rounded-md border border-border/60 bg-transparent px-2 py-1 text-xs text-foreground outline-none focus:border-primary"
+        >
+          <option value="">Select…</option>
+          {field.options.map((opt) => (
+            <option key={opt} value={opt}>
+              {opt}
+            </option>
+          ))}
+        </select>
+      ) : field.type === 'textarea' ? (
+        <textarea
+          ref={inputRef as any}
+          value={localValue}
+          onChange={(e) => setLocalValue(e.target.value)}
+          onFocus={() => setIsEditing(true)}
+          onBlur={handleBlur}
+          placeholder={field.placeholder || `Enter ${field.name.toLowerCase()}`}
+          rows={2}
+          className={cn(
+            'w-full rounded-md border bg-transparent px-2 py-1 text-xs text-foreground outline-none resize-none transition',
+            'border-border/60 focus:border-primary placeholder:text-muted-foreground/50',
+            isFilling && 'animate-pulse',
+          )}
+        />
+      ) : (
+        <input
+          ref={inputRef}
+          type={field.type === 'date' ? 'date' : field.type === 'number' ? 'number' : 'text'}
+          value={localValue}
+          onChange={(e) => setLocalValue(e.target.value)}
+          onFocus={() => setIsEditing(true)}
+          onBlur={handleBlur}
+          onKeyDown={handleKeyDown}
+          placeholder={field.placeholder || `Enter ${field.name.toLowerCase()}`}
+          className={cn(
+            'w-full rounded-md border bg-transparent px-2 py-1 text-xs text-foreground outline-none transition',
+            'border-border/60 focus:border-primary placeholder:text-muted-foreground/50',
+            isFilling && 'animate-pulse',
+          )}
+        />
+      )}
+
+      {/* Filling shimmer overlay */}
+      {isFilling && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          className="absolute inset-0 rounded-lg overflow-hidden pointer-events-none"
+        >
+          <div className="absolute inset-0 bg-gradient-to-r from-transparent via-primary/5 to-transparent animate-shimmer" />
+        </motion.div>
+      )}
+    </motion.div>
+  );
+}