sea-dev 1.0.0

package/packages/widget/src/components/upload-doc.tsx

@@ -0,0 +1,241 @@
+import { postV2SubmissionsBySubmissionIdExtractions } from "@/clients/api";
+import { Button } from "@sea/ui/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@sea/ui/components/ui/dialog";
+import { Input } from "@sea/ui/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@sea/ui/components/ui/select";
+import { cn } from "@sea/ui/lib/utils";
+import { FilePlus, FileTextIcon, Loader2 } from "lucide-react";
+import type { ChangeEvent, DragEvent } from "react";
+import { useRef, useState } from "react";
+
+const EXTRACTION_MODELS = {
+  general: "General",
+  smart: "Smart",
+  expert: "Expert",
+  turbo: "Turbo (beta)",
+  bank_statement: "Bank Statement (beta)",
+};
+
+export function UploadFile({
+  submissionId,
+  container,
+  onUploadComplete,
+}: {
+  submissionId: string;
+  container: HTMLDivElement;
+  onUploadComplete?: () => void;
+}) {
+  const formRef = useRef<HTMLFormElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [dragActive, setDragActive] = useState(false);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [pendingFiles, setPendingFiles] = useState<FileList | null>(null);
+  const [model, setModel] = useState("general");
+  const [loading, setLoading] = useState(false);
+  const [userPrompt, setUserPrompt] = useState<string>("");
+
+  const uploadFileFn = async (formData: FormData) => {
+    const { data, error } = await postV2SubmissionsBySubmissionIdExtractions({
+      path: { submissionId },
+      body: {
+        files: formData.getAll("files") as File[],
+        model: formData.get("model") as "general" | "smart" | "bank_statement" | "turbo",
+      },
+    });
+    if (!data) {
+      console.error("No data returned from the server", error);
+      return;
+    }
+    onUploadComplete?.();
+  };
+
+  // Function to process files after getting user input
+  const processFiles = (selectedFiles: FileList | null) => {
+    if (!selectedFiles) return;
+    if (fileInputRef.current) {
+      fileInputRef.current.files = selectedFiles;
+      formRef.current?.requestSubmit();
+    }
+
+    // Reset the underlying input so the same file can be re-selected
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  const validateAndProcessFiles = (selectedFiles: FileList | null) => {
+    if (!selectedFiles) return;
+    setPendingFiles(selectedFiles);
+    setIsDialogOpen(true);
+  };
+
+  const handleDrag = (e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.type === "dragenter" || e.type === "dragover") {
+      setDragActive(true);
+    } else if (e.type === "dragleave") {
+      setDragActive(false);
+    }
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(false);
+    validateAndProcessFiles(e.dataTransfer.files);
+  };
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    validateAndProcessFiles(files);
+  };
+
+  const handleDialogSubmit = () => {
+    processFiles(pendingFiles);
+    setUserPrompt("");
+    setPendingFiles(null);
+    setIsDialogOpen(false);
+  };
+
+  const handleButtonClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      className="relative cursor-default rounded-md border border-dashed p-4 text-center"
+      onDragEnter={handleDrag}
+      onDragLeave={handleDrag}
+      onDragOver={handleDrag}
+      onDrop={handleDrop}
+    >
+      {loading ? (
+        <div className="flex flex-col items-center justify-center">
+          <Loader2 className="animate-spin" />
+          <p className="text-muted-foreground text-sm">Loading...</p>
+        </div>
+      ) : (
+        <>
+          <p className="mb-2 text-gray-500">
+            Drop documents here or click 'Browse Files' to upload
+          </p>
+          <p className="mb-4 text-xs text-gray-400">
+            Supported formats: PDF, CSV, JPG, PNG, Excel (Max 10MB)
+          </p>
+          <form
+            ref={formRef}
+            onSubmit={async (event) => {
+              event.preventDefault();
+              setLoading(true);
+              try {
+                const formData = new FormData(event.currentTarget);
+                await uploadFileFn(formData);
+              } finally {
+                setLoading(false);
+              }
+            }}
+          >
+            <Button
+              variant="outline"
+              extra="action"
+              onClick={handleButtonClick}
+              type="button"
+              className="mx-auto"
+            >
+              <FileTextIcon className="mr-2 size-4" />
+              Browse Files
+            </Button>
+            <Input
+              type="file"
+              name="files"
+              multiple
+              accept="application/pdf,text/csv,image/jpeg,image/png,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
+              ref={fileInputRef}
+              onChange={handleChange}
+              className="hidden"
+              aria-label="hidden upload input"
+            />
+            <Input type="text" name="userPrompt" className="hidden" value={userPrompt} readOnly />
+            <Input type="text" name="model" className="hidden" value={model} readOnly />
+          </form>
+          <p className="mt-4 text-xs text-gray-400">
+            Our AI will automatically extract information from your documents
+          </p>
+
+          {/* Overlay that appears when dragging */}
+          <div
+            className={cn(
+              "bg-primary/5 pointer-events-none absolute inset-0 flex items-center justify-center rounded-xl backdrop-blur-sm transition-opacity",
+              dragActive ? "opacity-100" : "opacity-0",
+            )}
+          >
+            <div className="flex flex-col items-center space-y-4 text-center">
+              <div className="bg-primary/20 rounded-full p-4">
+                <FilePlus className="text-primary h-8 w-8" />
+              </div>
+              <h3 className="text-primary text-xl font-semibold">Drop files to upload</h3>
+            </div>
+          </div>
+
+          {/* Dialog for user prompt */}
+          <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Extraction instructions</DialogTitle>
+                <DialogDescription>
+                  Please enter any additional instructions to process the files.
+                </DialogDescription>
+              </DialogHeader>
+              <Input
+                value={userPrompt}
+                onChange={(e) => setUserPrompt(e.target.value)}
+                onKeyDown={(e) => {
+                  if ((e.key === "Enter" || e.key === "NumpadEnter") && !e.shiftKey) {
+                    e.preventDefault();
+                    handleDialogSubmit();
+                  }
+                }}
+                placeholder="Prompt..."
+              />
+              <p className="text-muted-foreground text-sm">Extraction Model</p>
+              <Select name="model" defaultValue="general" onValueChange={setModel}>
+                <SelectTrigger className="w-40 shrink-0 grow-0">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent container={container}>
+                  {Object.entries(EXTRACTION_MODELS).map(([key, value], i) => (
+                    <SelectItem key={`type-select-${i}`} value={key}>
+                      {value}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <DialogFooter className="mt-4 flex justify-end space-x-2">
+                <Button variant="outline" onClick={() => setIsDialogOpen(false)}>
+                  Cancel
+                </Button>
+                <Button onClick={handleDialogSubmit}>Confirm</Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </>
+      )}
+    </div>
+  );
+}

package/packages/widget/src/components/widget.tsx

@@ -0,0 +1,101 @@
+import { _H1, Lead } from "@sea/ui/components/ui/typography";
+import { useState } from "react";
+import { Container } from "./container";
+import { DataViewer } from "./data-viewer";
+import { NewSubmissionModal } from "./new-submission";
+import { SubmissionsPage } from "./submission-page";
+import { UploadFile } from "./upload-doc";
+
+export function Widget({
+  formId: providedFormId,
+  dealId: providedDealId,
+  submissionId: providedSubmissionId,
+  container,
+}: {
+  formId: string | undefined;
+  dealId: string | undefined;
+  submissionId: string | undefined;
+  container: HTMLDivElement;
+}) {
+  const [currentFormId, setCurrentFormId] = useState(providedFormId ?? undefined);
+  const [currentDealId, setCurrentDealId] = useState(providedDealId ?? undefined);
+  const [currentSubmissionId, setCurrentSubmissionId] = useState(providedSubmissionId ?? null);
+  // Tri-state: `undefined` = unknown, `true` = submissions exist, `false` = none
+  const [hasSubmissions, setHasSubmissions] = useState<boolean | undefined>(undefined);
+  const formId = providedFormId ?? currentFormId;
+  const dealId = providedDealId ?? currentDealId;
+  const submissionId = providedSubmissionId ?? currentSubmissionId;
+  const crumbs = submissionId ? [] : [{ label: "Submissions" }];
+
+  const triggerLabel = (() => {
+    if (dealId && formId) {
+      return "Create submission";
+    }
+    if (dealId) {
+      return "Set Form";
+    }
+    if (formId) {
+      return "Set Deal";
+    }
+    return "Set Deal & Form";
+  })();
+
+  const deselectSubmission = () => {
+    setCurrentSubmissionId(null);
+  };
+
+  const handleFormDealUpdate = () => {
+    if (!providedFormId) {
+      setCurrentFormId(localStorage.getItem("formId") ?? undefined);
+    }
+    if (!providedDealId) {
+      setCurrentDealId(localStorage.getItem("dealId") ?? undefined);
+    }
+    deselectSubmission();
+  };
+
+  return (
+    <div className="h-full w-full">
+      {!submissionId ? (
+        <Container crumbs={crumbs}>
+          <div className="flex flex-col gap-4">
+            <div className="flex flex-row items-center justify-between">
+              <div>
+                <_H1>Submissions</_H1>
+                <Lead>(for selected deal and form)</Lead>
+              </div>
+              <NewSubmissionModal
+                formId={formId}
+                dealId={dealId}
+                canSelectForm={!providedFormId}
+                canSelectDeal={!providedDealId}
+                hasSubmissions={hasSubmissions}
+                triggerLabel={triggerLabel}
+                setSubmissionId={setCurrentSubmissionId}
+                onSubmissionCreated={setCurrentSubmissionId}
+                onFormDealUpdate={handleFormDealUpdate}
+              />
+            </div>
+            <SubmissionsPage
+              dealId={dealId}
+              formId={formId}
+              setSubmissionId={setCurrentSubmissionId}
+              onHasSubmissionsChange={setHasSubmissions}
+            />
+          </div>
+        </Container>
+      ) : (
+        <div className="flex h-full w-full flex-col gap-4">
+          <UploadFile
+            submissionId={submissionId}
+            container={container}
+            onUploadComplete={() => {
+              window.location.reload();
+            }}
+          />
+          <DataViewer submissionId={submissionId} container={container} />
+        </div>
+      )}
+    </div>
+  );
+}

package/packages/widget/src/index.tsx

@@ -0,0 +1,167 @@
+"use client";
+
+import { client } from "@/clients/api/client.gen";
+import { SidebarProvider } from "@sea/ui/components/ui/multisidebar";
+import { cn } from "@sea/ui/lib/utils";
+import React, { useCallback, useEffect, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { Toaster } from "sonner";
+import { DataViewer } from "./components/data-viewer";
+import { UploadFile } from "./components/upload-doc";
+import { Widget } from "./components/widget";
+import { apiBaseUrl } from "./lib/config";
+import "./styles/index.css";
+
+interface SeaWidgetProps {
+  apiKey: string;
+  submissionId?: string;
+  formId?: string;
+  dealId?: string;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+interface SeaDataViewerProps {
+  apiKey: string;
+  submissionId: string;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export function initSeaWidget(elementId: string, props: SeaWidgetProps) {
+  const targetElement = document.getElementById(elementId);
+  if (!targetElement) {
+    console.error(`Element with id "${elementId}" not found`);
+    return;
+  }
+
+  // Derive CSS asset URL from the built JS filename
+  const jsHref = new URL(import.meta.url).href;
+  const cssHref = jsHref.replace(/\.js(\?.*)?$/, ".css");
+
+  // Inject CSS link into document head if not already present
+  if (!document.querySelector(`link[rel="stylesheet"][href="${cssHref}"]`)) {
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = cssHref;
+    document.head.appendChild(link);
+  }
+
+  createRoot(targetElement).render(<SeaWidget {...props} />);
+}
+
+export function initSeaWidgetShadow(elementId: string, props: SeaWidgetProps) {
+  const targetElement = document.getElementById(elementId);
+  if (!targetElement) {
+    console.error(`Element with id "${elementId}" not found`);
+    return;
+  }
+
+  // Create shadow root for style isolation
+  const shadowRoot = targetElement.shadowRoot ?? targetElement.attachShadow({ mode: "open" });
+
+  // Inject CSS link into shadow root
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = new URL(/* @vite-ignore */ "./sea-widget.css", import.meta.url).href;
+  shadowRoot.appendChild(link);
+
+  createRoot(shadowRoot).render(<SeaWidget {...props} />);
+}
+
+export function SeaWidget({
+  apiKey,
+  formId,
+  dealId,
+  submissionId,
+  className,
+  style,
+}: SeaWidgetProps) {
+  const [container, setContainer] = useState<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    client.setConfig({
+      baseUrl: apiBaseUrl,
+      auth: apiKey,
+    });
+  }, [apiKey]);
+
+  return (
+    <div
+      ref={setContainer}
+      className={cn("w-full overflow-hidden rounded-lg border", className)}
+      style={style}
+    >
+      <Toaster />
+      <SidebarProvider className="h-full" defaultRightOpen={true}>
+        {container && (
+          <Widget
+            formId={formId}
+            dealId={dealId}
+            submissionId={submissionId}
+            container={container}
+          />
+        )}
+      </SidebarProvider>
+    </div>
+  );
+}
+
+export function SeaDataViewer({ apiKey, submissionId, className, style }: SeaDataViewerProps) {
+  const [container, setContainer] = useState<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    client.setConfig({
+      baseUrl: apiBaseUrl,
+      auth: apiKey,
+    });
+  }, [apiKey]);
+
+  return (
+    <div
+      ref={setContainer}
+      className={cn("w-full overflow-hidden rounded-lg border", className)}
+      style={style}
+    >
+      <Toaster />
+      <SidebarProvider className="h-full" defaultRightOpen={true}>
+        {container && <DataViewer submissionId={submissionId} container={container} />}
+      </SidebarProvider>
+    </div>
+  );
+}
+
+export function SeaFileUpload({
+  apiKey,
+  submissionId,
+  onUpload,
+}: {
+  submissionId: string;
+  apiKey: string;
+  onUpload: () => void;
+}) {
+  const [container, setContainer] = useState<HTMLDivElement | null>(null);
+
+  const onUploadComplete = useCallback(() => {
+    onUpload?.();
+  }, [onUpload]);
+
+  useEffect(() => {
+    client.setConfig({
+      baseUrl: apiBaseUrl,
+      auth: apiKey,
+    });
+  }, [apiKey]);
+
+  return (
+    <div ref={setContainer}>
+      {container && (
+        <UploadFile
+          submissionId={submissionId}
+          container={container}
+          onUploadComplete={onUploadComplete}
+        />
+      )}
+    </div>
+  );
+}

package/packages/widget/src/lib/config.ts

@@ -0,0 +1,2 @@
+// These values are injected by Vite at build-time
+export const apiBaseUrl = __API_BASE_URL__;

package/packages/widget/src/lib/util.ts

@@ -0,0 +1,40 @@
+import * as z from "zod/v4";
+
+function getCoercedField(value: z.core.$ZodType): z.core.$ZodType {
+  if (value instanceof z.ZodString) {
+    return z.coerce.string();
+  }
+
+  if (value instanceof z.ZodNumber) {
+    return z.coerce.number();
+  }
+
+  if (value instanceof z.ZodDate) {
+    return z.coerce.date();
+  }
+
+  if (value instanceof z.ZodBoolean) {
+    return z.coerce.boolean();
+  }
+
+  if (value instanceof z.ZodNullable) {
+    const innerType = value.def.innerType;
+    if (innerType instanceof z.ZodDate) {
+      return z.coerce.date().nullable();
+    }
+    if (innerType instanceof z.ZodString) {
+      return z.coerce.string().nullable();
+    }
+  }
+
+  return value;
+}
+
+export function coercedSchema<T extends z.ZodObject>(schema: T): T {
+  const coercedEntries = Object.entries(schema.shape).map(([key, value]) => [
+    key,
+    getCoercedField(value),
+  ]);
+
+  return z.object(Object.fromEntries(coercedEntries)) as T;
+}

package/packages/widget/src/styles/index.css

@@ -0,0 +1,5 @@
+@import "@sea/ui/styles/style.css";
+@import "./tw-properties.css";
+
+@source "../../../libs/ui/src/**/*.{js,ts,jsx,tsx}";
+@source "../**/*.{js,ts,jsx,tsx}";