@larkup/workspace-app 0.0.0-stage → 0.2.0

package/src/components/chat/tools/visual-placement-modal.tsx

@@ -0,0 +1,308 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '../../ui/dialog';
+import { Button } from '@larkup/workspace-ui/button';
+import { ChevronLeft, ChevronRight, Loader2, Save } from 'lucide-react';
+import { motion } from 'framer-motion';
+import { toast } from 'sonner';
+
+export interface Placement {
+  pageIndex: number;
+  x: number;
+  y: number;
+  scale: number;
+}
+
+interface VisualPlacementModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  fileBase64: string;
+  totalPages: number;
+  placements: Placement[];
+  onSave: (placements: Placement[]) => void;
+  mode: 'type' | 'draw' | 'upload';
+  imagePayload: string | null;
+  text: string;
+  font: string;
+  color: string;
+  scale: number;
+}
+
+export function VisualPlacementModal({
+  open,
+  onOpenChange,
+  fileBase64,
+  totalPages,
+  placements,
+  onSave,
+  mode,
+  imagePayload,
+  text,
+  font,
+  color,
+  scale,
+}: VisualPlacementModalProps) {
+  const [currentPage, setCurrentPage] = useState(0);
+  const [isLoading, setIsLoading] = useState(true);
+  const [pdfDoc, setPdfDoc] = useState<any>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Keep local track of placements while editing
+  const [localPlacements, setLocalPlacements] = useState<Placement[]>([]);
+  const [pdfScale, setPdfScale] = useState(1);
+
+  useEffect(() => {
+    if (open) {
+      setLocalPlacements([...placements]);
+    }
+  }, [open, placements]);
+
+  // Load PDF document
+  useEffect(() => {
+    if (!open || !fileBase64) return;
+
+    let isMounted = true;
+    const loadPdf = async () => {
+      try {
+        setIsLoading(true);
+        const pdfjsLib = await import('pdfjs-dist');
+        pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.mjs`;
+
+        const pdfData = atob(fileBase64);
+        const bytes = new Uint8Array(pdfData.length);
+        for (let i = 0; i < pdfData.length; i++) {
+          bytes[i] = pdfData.charCodeAt(i);
+        }
+
+        const loadingTask = pdfjsLib.getDocument({ data: bytes });
+        const pdf = await loadingTask.promise;
+        if (isMounted) {
+          setPdfDoc(pdf);
+        }
+      } catch (err: any) {
+        toast.error('Failed to load PDF for visual placement');
+        console.error(err);
+      }
+    };
+
+    loadPdf();
+    return () => {
+      isMounted = false;
+    };
+  }, [open, fileBase64]);
+
+  // Render current page
+  useEffect(() => {
+    if (!pdfDoc || !canvasRef.current) return;
+
+    let isMounted = true;
+    const renderPage = async () => {
+      try {
+        setIsLoading(true);
+        const page = await pdfDoc.getPage(currentPage + 1);
+
+        const viewport = page.getViewport({ scale: 1 });
+
+        // Let the PDF be as wide as the modal to make it large enough, allow vertical scrolling
+        const availableWidth = Math.min(window.innerWidth * 0.95 - 64, 1136); // max-w-1200px minus padding
+
+        const scaleX = availableWidth / viewport.width;
+        const targetScale = Math.min(scaleX, 1.5); // Cap scale at 1.5x so it doesn't get ridiculously large
+
+        setPdfScale(targetScale);
+        const scaledViewport = page.getViewport({ scale: targetScale });
+
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+
+        const context = canvas.getContext('2d');
+        if (!context) return;
+
+        canvas.height = scaledViewport.height;
+        canvas.width = scaledViewport.width;
+
+        const renderContext = {
+          canvasContext: context,
+          viewport: scaledViewport,
+        };
+
+        await page.render(renderContext).promise;
+      } catch (err) {
+        console.error('Error rendering page:', err);
+      } finally {
+        if (isMounted) setIsLoading(false);
+      }
+    };
+
+    renderPage();
+    return () => {
+      isMounted = false;
+    };
+  }, [pdfDoc, currentPage]);
+
+  const currentPlacement = localPlacements.find((p) => p.pageIndex === currentPage);
+
+  // Default centered position if not set
+  const [dragPos, setDragPos] = useState({ x: 150, y: 150 });
+
+  useEffect(() => {
+    if (currentPlacement && containerRef.current) {
+      const { width, height } = containerRef.current.getBoundingClientRect();
+      setDragPos({
+        x: (currentPlacement.x / 100) * width,
+        y: (currentPlacement.y / 100) * height,
+      });
+    } else if (containerRef.current) {
+      const { width, height } = containerRef.current.getBoundingClientRect();
+      setDragPos({ x: width / 2 - 50, y: height / 2 - 25 });
+    }
+  }, [currentPlacement, currentPage, isLoading]);
+
+  const handleDragEnd = (e: any, info: any) => {
+    if (!containerRef.current) return;
+    const { width, height } = containerRef.current.getBoundingClientRect();
+
+    // Convert final px position to percentages
+    const newX = Math.max(0, Math.min(100, (dragPos.x / width) * 100));
+    const newY = Math.max(0, Math.min(100, (dragPos.y / height) * 100));
+
+    const existingIdx = localPlacements.findIndex((p) => p.pageIndex === currentPage);
+    const newPlacement: Placement = {
+      pageIndex: currentPage,
+      x: newX,
+      y: newY,
+      scale, // Save the current scale when the user updates placement
+    };
+
+    if (existingIdx >= 0) {
+      const copy = [...localPlacements];
+      copy[existingIdx] = newPlacement;
+      setLocalPlacements(copy);
+    } else {
+      setLocalPlacements([...localPlacements, newPlacement]);
+    }
+  };
+
+  const handleRemoveCurrent = () => {
+    setLocalPlacements((prev) => prev.filter((p) => p.pageIndex !== currentPage));
+  };
+
+  const handleSave = () => {
+    onSave(localPlacements);
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="w-[95vw] max-w-250 sm:max-w-250 h-[95vh] max-h-[95vh] bg-white/80 backdrop-blur-md overflow-hidden flex flex-col p-4">
+        <DialogHeader className="mb-2 shrink-0">
+          <DialogTitle>Visual Signature Placement</DialogTitle>
+          <div className="flex items-center justify-between mt-2">
+            <div className="flex items-center gap-2">
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={() => setCurrentPage((p) => Math.max(0, p - 1))}
+                disabled={currentPage === 0 || isLoading}
+              >
+                <ChevronLeft className="h-4 w-4" />
+              </Button>
+              <span className="text-sm font-medium">
+                Page {currentPage + 1} of {totalPages}
+              </span>
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={() => setCurrentPage((p) => Math.min(totalPages - 1, p + 1))}
+                disabled={currentPage === totalPages - 1 || isLoading}
+              >
+                <ChevronRight className="h-4 w-4" />
+              </Button>
+            </div>
+
+            {currentPlacement && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleRemoveCurrent}
+                className="text-muted-foreground"
+              >
+                Remove from this page
+              </Button>
+            )}
+          </div>
+        </DialogHeader>
+
+        <div className="relative flex-1 overflow-auto flex items-center justify-center bg-muted/40 border rounded-lg">
+          {isLoading && (
+            <div className="absolute inset-0 flex items-center justify-center bg-background/50 z-10 backdrop-blur-md">
+              <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+            </div>
+          )}
+
+          <div ref={containerRef} className="relative 35 bg-white overflow-hidden shrink-0">
+            <canvas ref={canvasRef} className="block w-full h-auto" />
+
+            {!isLoading && (
+              <motion.div
+                drag
+                dragMomentum={false}
+                dragConstraints={containerRef}
+                onDrag={(e, info) => {
+                  setDragPos({ x: dragPos.x + info.delta.x, y: dragPos.y + info.delta.y });
+                }}
+                onDragEnd={handleDragEnd}
+                style={{
+                  x: dragPos.x,
+                  y: dragPos.y,
+                  scale: (scale / 100) * pdfScale,
+                  transformOrigin: 'top left',
+                }}
+                className="absolute top-0 left-0 cursor-move border border-primary/50 border-dashed hover:border-primary transition-colors w-max"
+              >
+                {mode === 'type' ? (
+                  <span
+                    style={{
+                      fontFamily: font === 'Cursive' ? 'cursive' : 'sans-serif',
+                      color: color === 'black' ? '#000' : color === 'blue' ? '#0000ff' : '#ff0000',
+                      fontSize: '24px',
+                      lineHeight: 1,
+                      display: 'block',
+                    }}
+                  >
+                    {text || 'Your Signature'}
+                  </span>
+                ) : imagePayload ? (
+                  <img
+                    src={imagePayload}
+                    alt="Signature"
+                    className="max-h-15 pointer-events-none"
+                  />
+                ) : (
+                  <span className="text-muted-foreground text-sm">No signature</span>
+                )}
+              </motion.div>
+            )}
+          </div>
+        </div>
+
+        <DialogFooter className="mt-4 shrink-0 flex items-center justify-between">
+          <div className="text-xs text-muted-foreground">
+            {localPlacements.length} placement(s) set.
+          </div>
+          <div className="flex gap-2">
+            <Button variant="outline" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleSave}>
+              <Save className="h-4 w-4 mr-2" />
+              Save Placements
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/configure/custom-model-modal.tsx

@@ -0,0 +1,209 @@
+import { workspaceUrl, workspaceFetch as fetch } from '../../host';
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../ui/dialog';
+import { Button } from '@larkup/workspace-ui/button';
+import { Input } from '../ui/input';
+import { Label } from '@larkup/workspace-ui/label';
+import { Eye, EyeOff, Loader2, Cloud } from 'lucide-react';
+import type { CustomModelConfig } from '@larkup/core/types';
+
+export function CustomModelForm({
+  onSave,
+  type,
+  onCancel,
+}: {
+  onSave: (config: CustomModelConfig) => void;
+  type: 'embedding' | 'chat' | 'vision';
+  onCancel?: () => void;
+}) {
+  const [baseUrl, setBaseUrl] = useState('');
+  const [apiKey, setApiKey] = useState('');
+  const [showApiKey, setShowApiKey] = useState(false);
+  const [modelName, setModelName] = useState('');
+  const [dimensions, setDimensions] = useState<number | null>(null);
+  const [testing, setTesting] = useState(false);
+  const [verified, setVerified] = useState(false);
+
+  const handleTest = async () => {
+    if (!baseUrl || !modelName) {
+      toast.error('Base URL and Model Name are required');
+      return;
+    }
+    setTesting(true);
+    try {
+      if (type === 'embedding') {
+        const res = await fetch(workspaceUrl('/api/config/test-embedding'), {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ baseUrl, apiKey, modelName }),
+        });
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.error || 'Connection failed');
+
+        setDimensions(data.dimensions);
+        setVerified(true);
+        toast.success(`Success! Detected ${data.dimensions} dimensions.`);
+      } else {
+        const res = await fetch(workspaceUrl('/api/config/verify'), {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(
+            type === 'vision'
+              ? {
+                  visionProvider: 'custom',
+                  visionApiKey: apiKey,
+                  visionModelId: `custom:${modelName}`,
+                  customVisionModels: [{ baseUrl, apiKey, modelName }],
+                }
+              : {
+                  chatProvider: 'custom',
+                  chatApiKey: apiKey,
+                  customChatModels: [{ baseUrl, apiKey, modelName }],
+                },
+          ),
+        });
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.error || 'Connection failed');
+
+        setVerified(true);
+        toast.success(`Success! ${type === 'vision' ? 'Vision' : 'Chat'} model connected.`);
+      }
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'Test failed');
+      setDimensions(null);
+      setVerified(false);
+    } finally {
+      setTesting(false);
+    }
+  };
+
+  const handleSave = () => {
+    if (!baseUrl || !modelName || !verified) {
+      toast.error('Please test the connection first.');
+      return;
+    }
+    onSave({ baseUrl, apiKey, modelName, dimensions: dimensions ?? undefined });
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="grid gap-4 py-4">
+        <div className="grid gap-2">
+          <Label htmlFor="baseUrl">Base URL</Label>
+          <Input
+            id="baseUrl"
+            placeholder="https://api.example.com/v1"
+            value={baseUrl}
+            onChange={(e) => {
+              setBaseUrl(e.target.value);
+              setVerified(false);
+            }}
+          />
+        </div>
+        <div className="grid gap-2">
+          <Label htmlFor="apiKey">API Key (Optional)</Label>
+          <div className="relative">
+            <Input
+              id="apiKey"
+              type={showApiKey ? 'text' : 'password'}
+              placeholder="sk-..."
+              value={apiKey}
+              onChange={(e) => {
+                setApiKey(e.target.value);
+                setVerified(false);
+              }}
+              className="pr-10"
+            />
+            <button
+              type="button"
+              onClick={() => setShowApiKey(!showApiKey)}
+              className="absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground hover:text-foreground"
+            >
+              {showApiKey ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
+            </button>
+          </div>
+        </div>
+        <div className="grid gap-2">
+          <Label htmlFor="modelName">Model Name</Label>
+          <Input
+            id="modelName"
+            placeholder={
+              type === 'embedding'
+                ? 'my-embedding-model'
+                : type === 'vision'
+                  ? 'my-vision-model'
+                  : 'my-chat-model'
+            }
+            value={modelName}
+            onChange={(e) => {
+              setModelName(e.target.value);
+              setVerified(false);
+            }}
+          />
+        </div>
+        {verified && (
+          <div className="text-sm text-green-600 dark:text-green-400 font-medium">
+            ✓ Connection verified {dimensions ? `(${dimensions} dimensions)` : ''}
+          </div>
+        )}
+      </div>
+      <div className="flex flex-row justify-between sm:justify-between items-center gap-2">
+        <Button variant="outline" type="button" onClick={handleTest} disabled={testing}>
+          {testing ? (
+            <Loader2 className="size-4 animate-spin mr-2" />
+          ) : (
+            <Cloud className="size-4 mr-2" />
+          )}
+          Test Connection
+        </Button>
+        <div className="flex gap-2">
+          {onCancel && (
+            <Button variant="ghost" type="button" onClick={onCancel}>
+              Cancel
+            </Button>
+          )}
+          <Button className="px-5" type="button" onClick={handleSave} disabled={!verified}>
+            Add Model
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function CustomModelModal({
+  open,
+  onOpenChange,
+  onSave,
+  type,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSave: (config: CustomModelConfig) => void;
+  type: 'embedding' | 'chat' | 'vision';
+}) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className={'max-w-xl'}>
+        <DialogHeader>
+          <DialogTitle>
+            Custom {type === 'embedding' ? 'Embedding' : type === 'vision' ? 'Vision' : 'Chat'}{' '}
+            Model
+          </DialogTitle>
+          <DialogDescription>
+            Connect an OpenAI-compatible{' '}
+            {type === 'embedding' ? 'embedding' : type === 'vision' ? 'vision' : 'chat'} model.
+          </DialogDescription>
+        </DialogHeader>
+        <CustomModelForm
+          type={type}
+          onSave={(cfg) => {
+            onSave(cfg);
+            onOpenChange(false);
+          }}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/configure/store-fields.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+import { useState } from 'react';
+import { KeyRound, Eye, EyeOff } from 'lucide-react';
+import { Input } from '@larkup/workspace-app/components/ui/input';
+import { Label } from '@larkup/workspace-ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@larkup/workspace-ui/select';
+import { Badge } from '@larkup/workspace-app/components/ui/badge';
+import { cn } from '@larkup/workspace-app/lib/utils';
+import { visibleFields } from '@larkup/vector-stores/registry';
+import type { IndexType, VectorStoreDescriptor } from '@larkup/core/types';
+
+interface StoreFieldsProps {
+  store: VectorStoreDescriptor;
+  values: Record<string, string>;
+  errors: Record<string, string>;
+  onChange: (key: string, value: string) => void;
+  indexType?: IndexType;
+}
+
+export function StoreFields({ store, values, errors, onChange, indexType }: StoreFieldsProps) {
+  const fields = visibleFields(store, values, indexType);
+  const [showPasswords, setShowPasswords] = useState<Record<string, boolean>>({});
+
+  const togglePassword = (key: string) => {
+    setShowPasswords((prev) => ({ ...prev, [key]: !prev[key] }));
+  };
+
+  return (
+    <div className="grid gap-5 sm:grid-cols-2">
+      {fields.map((field) => {
+        const value = values[field.key] ?? field.defaultValue ?? '';
+        const error = errors[field.key];
+        const fieldId = `store-${field.key}`;
+
+        return (
+          <div
+            key={field.key}
+            className={cn('space-y-1.5', field.type === 'select' && 'sm:col-span-1')}
+          >
+            <div className="flex items-center gap-1.5">
+              <Label htmlFor={fieldId}>{field.label}</Label>
+              {field.required && (
+                <span className="text-destructive" aria-hidden>
+                  *
+                </span>
+              )}
+              {field.secret && (
+                <Badge
+                  variant="outline"
+                  className="h-4 gap-1 px-1 text-[9px] font-mono uppercase text-muted-foreground"
+                >
+                  <KeyRound className="size-2.5" />
+                  secret
+                </Badge>
+              )}
+            </div>
+
+            {field.type === 'select' ? (
+              <Select value={value} onValueChange={(v) => onChange(field.key, (v as string) ?? '')}>
+                <SelectTrigger id={fieldId} className={cn('w-full', error && 'border-destructive')}>
+                  <SelectValue placeholder={`Select ${field.label}`} />
+                </SelectTrigger>
+                <SelectContent>
+                  {field.options?.map((opt) => (
+                    <SelectItem key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            ) : field.type === 'password' ? (
+              <div className="relative">
+                <Input
+                  id={fieldId}
+                  type={showPasswords[field.key] ? 'text' : 'password'}
+                  placeholder={field.placeholder}
+                  value={value}
+                  spellCheck={false}
+                  autoComplete="off"
+                  className={cn('font-mono text-sm pr-9', error && 'border-destructive')}
+                  onChange={(e) => onChange(field.key, e.target.value)}
+                />
+                <button
+                  type="button"
+                  onClick={() => togglePassword(field.key)}
+                  className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
+                  tabIndex={-1}
+                >
+                  {showPasswords[field.key] ? (
+                    <EyeOff className="size-4" />
+                  ) : (
+                    <Eye className="size-4" />
+                  )}
+                </button>
+              </div>
+            ) : (
+              <Input
+                id={fieldId}
+                type="text"
+                placeholder={field.placeholder}
+                value={value}
+                spellCheck={false}
+                autoComplete="off"
+                className={cn(
+                  field.type === 'path' && 'font-mono text-sm',
+                  error && 'border-destructive',
+                )}
+                onChange={(e) => onChange(field.key, e.target.value)}
+              />
+            )}
+
+            {error ? (
+              <p className="text-xs text-destructive">{error}</p>
+            ) : field.help ? (
+              <p className="text-xs text-muted-foreground leading-relaxed">{field.help}</p>
+            ) : null}
+          </div>
+        );
+      })}
+    </div>
+  );
+}