sea-dev 1.0.0

package/packages/widget/src/components/data-viewer.tsx

@@ -0,0 +1,311 @@
+import {
+  getV2SubmissionsBySubmissionIdData,
+  getV2SubmissionsBySubmissionIdStatus,
+} from "@/clients/api";
+import { SubmissionGroupWrapper, type EmbedSubmissionGroup } from "@/components/data-display";
+import type { ExtractionInfo } from "@sea/core/data-extraction/types";
+import {
+  documentSchema,
+  type ApiFormGroup,
+  type ApiDocumentCitation,
+} from "@sea/schemas/core/submission";
+import { PdfViewer } from "@sea/ui/components/doc-viewers/pdf";
+import { Button } from "@sea/ui/components/ui/button";
+import { useSidebar } from "@sea/ui/components/ui/multisidebar";
+import { H3 } from "@sea/ui/components/ui/typography";
+import { convertItemsToRecord, groupBy } from "@sea/util/data-transform";
+import { subName } from "@sea/util/sub-name";
+import { XIcon } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+import { coercedSchema } from "../lib/util";
+import { Container } from "./container";
+import { DocList } from "./doc-list";
+import { SidebarRight } from "./sidebar-right";
+
+type GroupedData = {
+  formGroup: ApiFormGroup;
+  groups: EmbedSubmissionGroup[];
+}[];
+
+export function DataViewer({
+  submissionId,
+  container,
+}: {
+  submissionId: string;
+  container: HTMLDivElement;
+}) {
+  const {
+    rightSidebar: { setOpen: setSidebarOpen },
+  } = useSidebar();
+
+  const [submission, setSubmission] = useState<{ id: string; name: string | null }>();
+  const [groupedData, setGroupedData] = useState<GroupedData>();
+  const [documents, setDocuments] = useState<ExtractionInfo[]>([]);
+  const [visibleExtractionId, setVisibleExtractionId] = useState<string>();
+  const [boundingKey, setBoundingKey] = useState<string | undefined>(undefined);
+  const [activeCitationId, setActiveCitationId] = useState<string | undefined>(undefined);
+  const isRefreshing = useRef<boolean>(false);
+
+  const processingExtractionIds = documents
+    .filter((e) => e.status !== "done" && e.status !== "failed")
+    .map((e) => e.documentExtractionId);
+  const isProcessingExtractions = processingExtractionIds.length > 0;
+
+  const activePdf = useMemo(
+    () =>
+      visibleExtractionId
+        ? documents?.find((p) => p.documentExtractionId === visibleExtractionId && !!p.url)
+        : undefined,
+    [visibleExtractionId, documents],
+  );
+
+  // Create a lookup map of citationId -> citation for quick access
+  const citationsMap = useMemo(
+    () =>
+      documents.reduce(
+        (acc, doc) => {
+          doc.citations.forEach((citation) => {
+            acc[citation.id] = citation;
+          });
+          return acc;
+        },
+        {} as Record<string, ApiDocumentCitation>,
+      ),
+    [documents],
+  );
+
+  const selectAnnotation = (key: string | undefined) => {
+    setBoundingKey(key);
+    if (key === undefined) {
+      setActiveCitationId(undefined);
+      return;
+    }
+    // Find the document and citation that contains this bounding key
+    let citationId: string | undefined;
+    const selectedPdf = documents.find((doc) => {
+      const citation = doc.citations.find((c) => Object.keys(c.boundingRegions).includes(key));
+      if (citation) {
+        citationId = citation.id;
+        return true;
+      }
+      return false;
+    });
+    if (!selectedPdf) return;
+    setActiveCitationId(citationId);
+    setVisibleExtractionId(selectedPdf.documentExtractionId);
+    setSidebarOpen(true);
+  };
+
+  const handleSelectCitation = useCallback((citationId?: string, key?: string) => {
+    setBoundingKey(key);
+    setActiveCitationId(citationId);
+  }, []);
+
+  const refreshSubmissionData = useCallback(async () => {
+    if (isRefreshing.current || !submissionId) return;
+    isRefreshing.current = true;
+    try {
+      const submissionRes = await getV2SubmissionsBySubmissionIdData({
+        path: { submissionId },
+      });
+      if (submissionRes.error) {
+        toast.error("Issue refreshing submission data");
+        return;
+      }
+
+      const { name, formGroups, groups: groupsRaw, documents } = submissionRes.data;
+      const groups = groupsRaw.map((g) => {
+        const items = g.items.map((item) => ({
+          ...item,
+          value: item.value as string | number,
+          formFieldId: item.formField.id,
+        }));
+        return {
+          ...g,
+          items,
+          itemsMap: convertItemsToRecord(items, "formFieldId"),
+        };
+      });
+
+      const groupObj = groupBy(groups, "formGroupId");
+      const grouped = formGroups.map((formGroup) => {
+        const groups = groupObj[formGroup.id] ?? [];
+        return {
+          formGroup,
+          groups,
+        };
+      });
+      setSubmission({ id: submissionId, name });
+      setGroupedData(grouped);
+      const typedDocs = documents
+        .map((doc) => {
+          const documentParsed = coercedSchema(documentSchema).safeParse(doc);
+          if (documentParsed.error) {
+            toast.error(documentParsed.error.message);
+            return;
+          }
+          const { data } = documentParsed;
+          const extractedPdf = {
+            ...data,
+            uploaded: true,
+            displayType: "new",
+            extractedData: data.extractedData as object | null,
+            composite: false,
+          } satisfies ExtractionInfo;
+          return extractedPdf;
+        })
+        .filter((doc) => !!doc);
+      setDocuments(typedDocs);
+    } finally {
+      isRefreshing.current = false;
+    }
+  }, [submissionId, setDocuments, setSubmission, setGroupedData]);
+
+  // Poll the server for the extraction status
+  const pollServer = useCallback(async () => {
+    const { data: status, error } = await getV2SubmissionsBySubmissionIdStatus({
+      path: { submissionId },
+    });
+    if (!status) {
+      console.error("No status returned from the server", error);
+      return;
+    }
+    if (status.status === "done") {
+      await refreshSubmissionData();
+    }
+  }, [submissionId, refreshSubmissionData]);
+
+  useEffect(() => {
+    if (!submissionId || !isProcessingExtractions) {
+      return;
+    }
+    const interval = setInterval(() => pollServer(), 1000);
+    return () => clearInterval(interval);
+  }, [submissionId, isProcessingExtractions, pollServer]);
+
+  useEffect(() => {
+    if (!submissionId) return;
+    const fn = async () => {
+      const submissionRes = await getV2SubmissionsBySubmissionIdData({
+        path: { submissionId },
+      });
+      if (submissionRes.error) {
+        toast.error("Issue loading submission");
+        throw new Error(submissionRes.error.description);
+      }
+
+      const {
+        submissionId: newId,
+        name,
+        formGroups,
+        groups: groupsRaw,
+        documents,
+      } = submissionRes.data;
+      const groups = groupsRaw.map((g) => {
+        const items = g.items.map((item) => ({
+          ...item,
+          value: item.value as string | number,
+          formFieldId: item.formField.id,
+        }));
+        return {
+          ...g,
+          items,
+          itemsMap: convertItemsToRecord(items, "formFieldId"),
+        };
+      });
+
+      const groupObj = groupBy(groups, "formGroupId");
+      const grouped = formGroups.map((formGroup) => {
+        const groups = groupObj[formGroup.id] ?? [];
+        return {
+          formGroup,
+          groups,
+        };
+      });
+      setSubmission({ id: newId, name });
+      setGroupedData(grouped);
+      const typedDocs = documents
+        .map((doc) => {
+          const documentParsed = coercedSchema(documentSchema).safeParse(doc);
+          if (documentParsed.error) {
+            toast.error(documentParsed.error.message);
+            return;
+          }
+          const { data } = documentParsed;
+          const extractedPdf = {
+            ...data,
+            uploaded: true,
+            displayType: "new",
+            extractedData: data.extractedData as object | null,
+            composite: false,
+          } satisfies ExtractionInfo;
+          return extractedPdf;
+        })
+        .filter((doc) => !!doc);
+      setDocuments(typedDocs);
+    };
+    fn();
+  }, [submissionId]);
+
+  const sidebar = (
+    <SidebarRight>
+      {activePdf ? (
+        <div className="flex h-full w-full min-w-full flex-col">
+          <div className="relative flex items-center justify-between gap-4 border-b p-1 px-2">
+            <H3>Document browser</H3>
+            <Button
+              size="icon"
+              variant="ghost"
+              onClick={() => {
+                setVisibleExtractionId(undefined);
+                setBoundingKey(undefined);
+              }}
+            >
+              <XIcon />
+              <span className="sr-only">Close</span>
+            </Button>
+          </div>
+          <PdfViewer
+            pdfInfo={activePdf}
+            activeAnnotationKey={boundingKey}
+            activeCitationId={activeCitationId}
+            onSelectCitation={handleSelectCitation}
+          />
+        </div>
+      ) : (
+        <DocList
+          docs={documents}
+          setDocVisible={setVisibleExtractionId}
+          canExtract={true} // TODO check this
+        />
+      )}
+    </SidebarRight>
+  );
+  return (
+    <Container
+      sidebar={sidebar}
+      crumbs={[{ label: subName(submission ?? { id: submissionId ?? "", name: null }) }]}
+    >
+      <div className="relative flex h-full max-h-[800px] w-full flex-col gap-0 overflow-hidden p-2">
+        <div className="flex flex-1 flex-row gap-2 overflow-hidden">
+          <div className="flex flex-1 flex-col gap-2 overflow-y-auto" data-scroll-container>
+            {groupedData &&
+              groupedData.map(({ formGroup, groups }) => (
+                <SubmissionGroupWrapper
+                  key={formGroup.id}
+                  formGroup={formGroup}
+                  submissionId={submissionId}
+                  groups={groups}
+                  citationsMap={citationsMap}
+                  boundingKey={boundingKey}
+                  setBoundingKey={selectAnnotation}
+                  container={container}
+                />
+              ))}
+          </div>
+        </div>
+      </div>
+    </Container>
+  );
+}

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

@@ -0,0 +1,102 @@
+import type { ExtractionInfo } from "@sea/core/data-extraction/types";
+import { Button } from "@sea/ui/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@sea/ui/components/ui/popover";
+import { H3 } from "@sea/ui/components/ui/typography";
+import { EyeIcon, FileCheck, FileXIcon, Loader2Icon } from "lucide-react";
+
+export function DocList({
+  docs,
+  setDocVisible,
+  canExtract,
+}: {
+  docs: ExtractionInfo[];
+  setDocVisible: (d: string) => void;
+  canExtract: boolean;
+}) {
+  return (
+    <div className="flex h-full min-h-0 flex-col gap-2 p-2">
+      <H3>Documents</H3>
+      <div className="h-full min-h-0 space-y-3 overflow-y-auto">
+        {docs.length === 0 ? (
+          <div className="text-muted-foreground flex items-center justify-center">
+            Nothing here...
+          </div>
+        ) : (
+          docs.map((d) => (
+            <DocItem key={d.documentExtractionId} doc={d} setDocVisible={setDocVisible} />
+          ))
+        )}
+        {!canExtract && (
+          <div className="text-muted-foreground text-sm">
+            You can't add any more until you upgrade!
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function DocItem({
+  doc,
+  setDocVisible,
+}: {
+  doc: ExtractionInfo;
+  setDocVisible: (d: string) => void;
+}) {
+  return (
+    <div className="flex flex-wrap items-center justify-between">
+      <div className="flex max-w-54 items-center gap-1 truncate overflow-hidden">
+        {doc.status === "pending" || doc.status === "processing" ? (
+          <span className="flex h-8 w-8 items-center justify-center">
+            <Loader2Icon className="h-5 w-5 animate-spin text-gray-500" />
+          </span>
+        ) : doc.status === "failed" ? (
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button variant="ghost" size="icon" className="h-8 w-8">
+                <FileXIcon className="h-5 w-5 text-red-500" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent>
+              <p>Failed to extract data from this document. Please try again.</p>
+            </PopoverContent>
+          </Popover>
+        ) : (
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button variant="ghost" size="icon" className="h-8 w-8">
+                <FileCheck className="h-5 w-5 items-end text-green-500" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-fit p-4 py-2">
+              <H3 className="py-2 text-sm font-bold">Data extracted successfully</H3>
+              <div className="grid grid-cols-2 items-center gap-2">
+                <div className="border-primary flex border-l-2 pl-4 text-sm font-medium">
+                  Extraction model
+                </div>
+                <div className="flex grow content-end text-sm font-medium text-gray-500">
+                  {doc.extractionModel}
+                </div>
+              </div>
+            </PopoverContent>
+          </Popover>
+        )}
+        <span className="truncate text-sm" title={doc.name}>
+          {doc.name}
+        </span>
+      </div>
+      <div className="flex space-x-1">
+        {doc.uploaded && (
+          <Button
+            onClick={() => setDocVisible(doc.documentExtractionId)}
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7"
+          >
+            <EyeIcon className="h-4 w-4 text-gray-500" />
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

package/packages/widget/src/components/field-correction-modal.tsx

@@ -0,0 +1,265 @@
+import {
+  getV2SubmissionsBySubmissionIdItemsByItemIdCorrections,
+  postV2SubmissionsBySubmissionIdItemsByItemIdCorrections,
+} from "@/clients/api";
+import type { SubmissionItemValue } from "@sea/db/schema";
+import { Badge } from "@sea/ui/components/ui/badge";
+import { Button } from "@sea/ui/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@sea/ui/components/ui/dialog";
+import { Label } from "@sea/ui/components/ui/label";
+import { Separator } from "@sea/ui/components/ui/separator";
+import { Textarea } from "@sea/ui/components/ui/textarea";
+import { useEffect, useMemo, useState } from "react";
+
+type FieldCorrection = {
+  id: string;
+  submissionItemId: string;
+  extractedValue: string | number | null;
+  correctedValue: string | number | null;
+  feedback: string | null;
+  status: "pending" | "addressed";
+  createdAt: string;
+  updatedAt: string;
+};
+
+export function FieldCorrectionModal({
+  children,
+  submissionId,
+  submissionItemId,
+  extractedValue,
+  initialCorrectedValue = "",
+  fieldName,
+  fieldHint,
+}: {
+  children: React.ReactNode;
+  submissionId: string;
+  submissionItemId: string;
+  extractedValue: SubmissionItemValue | null;
+  initialCorrectedValue: string;
+  fieldName?: string;
+  fieldHint?: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const [correctedValue, setCorrectedValue] = useState(initialCorrectedValue);
+  const [feedback, setFeedback] = useState("");
+  const [historicalFeedbacks, setHistoricalFeedbacks] = useState<FieldCorrection[]>([]);
+  const [loadingHistory, setLoadingHistory] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+
+  const actualExtractedValue = useMemo(() => {
+    if (historicalFeedbacks.length > 0) {
+      const oldest = historicalFeedbacks.reduce((a, b) =>
+        new Date(a.createdAt) <= new Date(b.createdAt) ? a : b,
+      );
+      return oldest.extractedValue ?? extractedValue;
+    }
+    return extractedValue;
+  }, [historicalFeedbacks, extractedValue]);
+
+  useEffect(() => {
+    if (open) {
+      setCorrectedValue(initialCorrectedValue);
+      setFeedback("");
+
+      const loadHistoricalFeedbacks = async () => {
+        setLoadingHistory(true);
+        try {
+          const result = await getV2SubmissionsBySubmissionIdItemsByItemIdCorrections({
+            path: { submissionId, itemId: submissionItemId },
+          });
+          if (result.data) {
+            setHistoricalFeedbacks(result.data as FieldCorrection[]);
+          }
+        } catch (error) {
+          console.error("Failed to load historical feedbacks:", error);
+          setHistoricalFeedbacks([]);
+        } finally {
+          setLoadingHistory(false);
+        }
+      };
+
+      loadHistoricalFeedbacks();
+    }
+  }, [open, initialCorrectedValue, submissionId, submissionItemId]);
+
+  const handleSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+
+    if (!correctedValue.trim() && !feedback.trim()) {
+      alert("Please provide either a corrected value or feedback.");
+      return;
+    }
+
+    setSubmitting(true);
+    try {
+      await postV2SubmissionsBySubmissionIdItemsByItemIdCorrections({
+        path: { submissionId, itemId: submissionItemId },
+        body: {
+          extractedValue: actualExtractedValue,
+          correctedValue: correctedValue || undefined,
+          feedback: feedback || undefined,
+        },
+      });
+      setOpen(false);
+    } catch (error) {
+      console.error("Failed to submit correction:", error);
+      alert("Failed to submit feedback. Please try again.");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent className="max-h-[80vh] overflow-y-auto sm:max-w-4xl">
+        <div className="flex h-full flex-col gap-6 lg:flex-row">
+          <div className="flex-1">
+            <form onSubmit={handleSubmit}>
+              <DialogHeader>
+                <DialogTitle>Report incorrect extraction</DialogTitle>
+                <DialogDescription>
+                  Your feedback improves our AI extraction accuracy.
+                </DialogDescription>
+              </DialogHeader>
+
+              {fieldName && (
+                <div className="my-4">
+                  <Label className="text-muted-foreground mb-1 block text-xs font-medium">
+                    Field name
+                  </Label>
+                  <div className="bg-muted rounded-md p-2 text-sm font-medium">{fieldName}</div>
+                </div>
+              )}
+
+              {fieldHint && (
+                <div className="my-4">
+                  <Label className="text-muted-foreground mb-1 block text-xs font-medium">
+                    Field hint
+                  </Label>
+                  <div className="bg-muted rounded-md p-2 text-sm">{fieldHint}</div>
+                </div>
+              )}
+
+              {actualExtractedValue !== undefined && (
+                <div className="my-4">
+                  <Label className="text-muted-foreground mb-1 block text-xs font-medium">
+                    Extracted value
+                  </Label>
+                  <pre className="bg-muted max-w-full overflow-x-auto rounded-md p-2 text-sm break-words whitespace-pre-wrap">
+                    {JSON.stringify(actualExtractedValue, null, 2)}
+                  </pre>
+                </div>
+              )}
+
+              <div className="my-4 space-y-2">
+                <Label htmlFor="corrected" className="text-muted-foreground text-xs font-medium">
+                  Corrected value
+                </Label>
+                <Textarea
+                  id="corrected"
+                  name="corrected"
+                  placeholder="Enter the corrected value"
+                  value={correctedValue}
+                  onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+                    setCorrectedValue(e.target.value)
+                  }
+                  className="max-h-[16rem] min-h-[6rem] resize-y overflow-auto break-words whitespace-pre-wrap"
+                />
+              </div>
+
+              <div className="my-4 space-y-2">
+                <Label htmlFor="feedback" className="text-muted-foreground text-xs font-medium">
+                  Feedback on this extraction
+                </Label>
+                <Textarea
+                  id="feedback"
+                  name="feedback"
+                  placeholder="What do you think the AI missed?"
+                  value={feedback}
+                  onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+                    setFeedback(e.target.value)
+                  }
+                  className="max-h-[16rem] min-h-[6rem] resize-y overflow-auto break-words whitespace-pre-wrap"
+                />
+              </div>
+
+              <DialogFooter>
+                <Button type="submit" disabled={submitting}>
+                  {submitting ? "Submitting..." : "Submit feedback"}
+                </Button>
+              </DialogFooter>
+            </form>
+          </div>
+
+          {!loadingHistory && historicalFeedbacks.length > 0 && (
+            <div className="flex-1 border-l pl-6">
+              <div className="mb-4">
+                <h3 className="text-lg font-semibold">Previous Feedback</h3>
+                <p className="text-muted-foreground text-sm">Historical feedback for this field</p>
+              </div>
+
+              <div className="h-[400px] overflow-y-auto pr-2">
+                <div className="space-y-4">
+                  {historicalFeedbacks.map((correction, index) => (
+                    <div key={correction.id} className="rounded-md border p-3">
+                      <div className="mb-2 flex items-center justify-between">
+                        <Badge variant={correction.status === "pending" ? "secondary" : "default"}>
+                          {correction.status}
+                        </Badge>
+                        <span className="text-muted-foreground text-xs">
+                          {new Date(correction.createdAt).toLocaleDateString()}
+                        </span>
+                      </div>
+
+                      {correction.extractedValue && (
+                        <div className="mb-2">
+                          <Label className="text-muted-foreground text-xs font-medium">
+                            Extracted:
+                          </Label>
+                          <pre className="bg-muted mt-1 max-w-full overflow-x-auto rounded p-2 text-xs break-words whitespace-pre-wrap">
+                            {JSON.stringify(correction.extractedValue, null, 2)}
+                          </pre>
+                        </div>
+                      )}
+
+                      {correction.correctedValue && (
+                        <div className="mb-2">
+                          <Label className="text-muted-foreground text-xs font-medium">
+                            Corrected:
+                          </Label>
+                          <pre className="bg-muted mt-1 max-w-full overflow-x-auto rounded p-2 text-xs break-words whitespace-pre-wrap">
+                            {JSON.stringify(correction.correctedValue, null, 2)}
+                          </pre>
+                        </div>
+                      )}
+
+                      {correction.feedback && (
+                        <div>
+                          <Label className="text-muted-foreground text-xs font-medium">
+                            Feedback:
+                          </Label>
+                          <p className="mt-1 text-sm">{correction.feedback}</p>
+                        </div>
+                      )}
+
+                      {index < historicalFeedbacks.length - 1 && <Separator className="mt-3" />}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}