sea-dev 1.0.0

package/apps/main/src/routes/_authed/_app/deals/$dealId/$subId.tsx

@@ -0,0 +1,655 @@
+import { ChatMessages } from "@/components/chat/chat";
+import { ChatProvider } from "@/components/chat/chat-context";
+import { CtaUpgrade } from "@/components/cta";
+import { SubmissionGroupWrapper } from "@/components/data-display/group-wrapper";
+import { Container } from "@/components/header/container";
+import { ConfirmationModal } from "@/components/modals/modals";
+import { DocList } from "@/components/side-panel/doc-list";
+import { SidebarRight } from "@/components/sidebar/sidebar-right";
+import { UnsavedBadge } from "@/components/unsaved-badge";
+import { formatSubmissionForSpreadsheet } from "@/lib/tabularize";
+import { cn } from "@/lib/utils";
+import type { Message, Submission } from "@sea/db/types";
+import { ExcelViewer } from "@sea/ui/components/doc-viewers/excel";
+import { ImageViewer } from "@sea/ui/components/doc-viewers/image";
+import { PdfViewer } from "@sea/ui/components/doc-viewers/pdf";
+import { styledLinkClassName } from "@sea/ui/components/misc/styled-link";
+import { Badge } from "@sea/ui/components/ui/badge";
+import { Button } from "@sea/ui/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@sea/ui/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuItemDumb,
+  DropdownMenuTrigger,
+} from "@sea/ui/components/ui/dropdown-menu";
+import { Highlighted } from "@sea/ui/components/ui/highlight";
+import { Input } from "@sea/ui/components/ui/input";
+import { useSidebar } from "@sea/ui/components/ui/multisidebar";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@sea/ui/components/ui/resizable";
+import { Textarea } from "@sea/ui/components/ui/textarea";
+import { H1, H3, Lead } from "@sea/ui/components/ui/typography";
+import { subName } from "@sea/util/sub-name";
+import { useDebouncer } from "@tanstack/react-pacer/debouncer";
+import { createFileRoute, Link, useRouter } from "@tanstack/react-router";
+import { useServerFn } from "@tanstack/react-start";
+import type { UIMessage } from "ai";
+import { addDays, isPast } from "date-fns";
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  ClipboardCopyIcon,
+  EllipsisIcon,
+  Loader2Icon,
+  RefreshCwIcon,
+  RotateCcwIcon,
+  TrashIcon,
+  XIcon,
+} from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { NewSubmissionShareLinkModal } from "./-components/share-link";
+import { UploadFile } from "./-components/upload-doc";
+import {
+  checkExtractionStatusesFn,
+  deleteSubmissionFn,
+  downloadDocumentFn,
+  getDenormSubmissionFn,
+  getSubmissionFn,
+  refreshUrlFn,
+  reloadFormFn,
+  renameSubmissionFn,
+  resetSubmissionFn,
+  storeMessageDraftFn,
+  summarizeSubmissionFn,
+  toggleFinalFn,
+  updateUpdatedAtFn,
+} from "./-fns";
+
+function toUIMessages(messages: Message[]): UIMessage[] {
+  return messages.map(
+    (m) =>
+      ({
+        ...m,
+        metadata: { status: m.status },
+      }) as UIMessage,
+  );
+}
+
+const isExcelContentType = (contentType: string) => {
+  const excelMimeTypes = [
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", // .xlsx
+    "application/vnd.ms-excel", // .xls
+    "application/excel",
+    "application/x-excel",
+    "application/x-msexcel",
+  ];
+  return excelMimeTypes.includes(contentType);
+};
+
+const isImageContentType = (contentType: string) => {
+  return contentType?.toLowerCase().startsWith("image/");
+};
+
+export const Route = createFileRoute("/_authed/_app/deals/$dealId/$subId")({
+  component: RouteComponent,
+  loader: ({ params: { subId } }) => getSubmissionFn({ data: { submissionId: subId } }),
+});
+
+function RouteComponent() {
+  const router = useRouter();
+  const [unsaved, setUnsaved] = useState(false);
+  const [finalisePending, setFinalisePending] = useState(false);
+  const [visibleExtractionId, setVisibleExtractionId] = useState<string>();
+  const [docHidden, setDocHidden] = useState(true);
+  const [annotationId, setAnnotationId] = useState<string | undefined>(undefined);
+  const [activeCitationId, setActiveCitationId] = useState<string | undefined>(undefined);
+  const [boundingKey, setBoundingKey] = useState<string | undefined>(undefined);
+  const [scrollSource, setScrollSource] = useState<"form" | "viewer" | null>(null);
+  const { experimental } = Route.useRouteContext();
+  const { dealId, subId } = Route.useParams();
+  const { submission, grouped, extractionInfo, chatModel, messageDraft, canExtract } =
+    Route.useLoaderData();
+  const { id: submissionId } = submission;
+  const {
+    rightSidebar: { setOpen: setSidebarOpen },
+  } = useSidebar();
+  const useDeleteSubmission = useServerFn(deleteSubmissionFn);
+  const useResetSubmission = useServerFn(resetSubmissionFn);
+  const checkExtractionStatuses = useServerFn(checkExtractionStatusesFn);
+
+  const debouncedUpdateUpdatedAt = useDebouncer(
+    () => updateUpdatedAtFn({ data: { submissionId } }),
+    { wait: 5_000 },
+  );
+
+  const storeMessageDraft = useCallback(
+    async (content: string) => {
+      await storeMessageDraftFn({ data: { conversationId: submission.conversation.id, content } });
+    },
+    [submission.conversation.id],
+  );
+
+  useEffect(() => {
+    if (unsaved === false) {
+      // Whenever unsaved ticks over to false, update the
+      // submission.updatedAt value
+      debouncedUpdateUpdatedAt.maybeExecute();
+    }
+  }, [unsaved]);
+
+  const processingExtractionIds = submission.extractions
+    .filter((e) => e.status !== "done" && e.status !== "failed")
+    .map((e) => e.id);
+  const isProcessingExtractions = processingExtractionIds.length > 0;
+  const label = `${subName(submission)}`;
+  const crumbs = [
+    { href: "deals", label: "Deals" },
+    { href: dealId, label: submission.deal.name },
+    { href: subId, label },
+  ];
+
+  const toggleFinal = async () => {
+    setFinalisePending(true);
+    try {
+      const { numDerived } = await toggleFinalFn({ data: { submissionId } });
+      if (numDerived > 0) {
+        toast.success(`Derived ${numDerived} fields!`);
+      }
+      router.invalidate();
+    } finally {
+      setFinalisePending(false);
+    }
+  };
+
+  const reloadForm = async () => {
+    await reloadFormFn({ data: { submissionId } });
+    router.invalidate();
+  };
+
+  const copySubmission = async () => {
+    const denorm = await getDenormSubmissionFn({ data: { submissionId } });
+    const formatted = formatSubmissionForSpreadsheet(denorm);
+    navigator.clipboard.writeText(formatted);
+    toast.success("Copied! Try pasting into Google Sheets.");
+  };
+
+  const resetSubmission = async () => {
+    await useResetSubmission({ data: { submissionId } });
+    await router.invalidate();
+  };
+
+  const deleteSubmission = async () => {
+    await useDeleteSubmission({ data: { submissionId } });
+  };
+
+  useEffect(() => {
+    if (isProcessingExtractions) return;
+
+    const inner = async () => {
+      await summarizeSubmissionFn({ data: { submissionId } });
+      router.invalidate();
+    };
+    if (submission.summarizedAt === null || isPast(addDays(submission.summarizedAt, 1))) {
+      inner();
+    }
+  }, [isProcessingExtractions, submission.summarizedAt, submissionId]);
+
+  useEffect(() => {
+    if (!isProcessingExtractions) return;
+
+    // If there are processing extractions, poll the server for "done" extractions
+    // and reload the page if we find any
+    const pollServer = async () => {
+      const { extractions, latestMessage } = await checkExtractionStatuses({
+        data: { submissionId, extractionsIds: processingExtractionIds },
+      });
+
+      const localLatestMessage = submission.conversation.messages.at(-1);
+      const hasNewMessage =
+        latestMessage &&
+        (!localLatestMessage ||
+          latestMessage.id !== localLatestMessage.id ||
+          latestMessage.updatedAt > localLatestMessage.updatedAt);
+
+      if (extractions.length > 0 || hasNewMessage) {
+        router.invalidate();
+      }
+    };
+
+    const intervalId = setInterval(pollServer, 1000);
+    return () => clearInterval(intervalId);
+  }, [isProcessingExtractions, submission.conversation.messages]);
+
+  const activeDocument = useMemo(
+    () =>
+      visibleExtractionId
+        ? extractionInfo.find((p) => p.documentExtractionId === visibleExtractionId && !!p.url)
+        : undefined,
+    [visibleExtractionId, extractionInfo],
+  );
+
+  const isActiveDocumentExcel = useMemo(
+    () => activeDocument && isExcelContentType(activeDocument.contentType),
+    [activeDocument],
+  );
+
+  const isActiveDocumentImage = useMemo(
+    () => activeDocument && isImageContentType(activeDocument.contentType),
+    [activeDocument],
+  );
+
+  const focusDocumentForCitation = (citationId: string | undefined) => {
+    if (citationId === undefined) return;
+    const selectedPdf = extractionInfo.find((p) => p.citations.find((c) => c.id === citationId));
+    if (!selectedPdf) return;
+    setDocVisible(selectedPdf.documentExtractionId);
+    setSidebarOpen(true);
+  };
+
+  const setActiveAnnotation = (
+    id: string | undefined,
+    options: {
+      focus?: boolean;
+    } = {},
+  ) => {
+    const { focus = true } = options;
+    setAnnotationId(id);
+    setActiveCitationId(id);
+    if (focus) {
+      focusDocumentForCitation(id);
+    }
+  };
+
+  const handleFormAnnotationSelect = (id: string | undefined) => {
+    setScrollSource("form");
+    setActiveAnnotation(id, { focus: true });
+  };
+
+  const handleSelectCitation = useCallback((citationId?: string, key?: string) => {
+    setScrollSource("viewer");
+    setBoundingKey(key);
+    setActiveAnnotation(citationId, { focus: true });
+
+    // Scroll to the form field containing this citation
+    // TODO: if we're scrolling to a row in a virtualized table this won't work, need to handle that case
+    setTimeout(() => {
+      const element = document.querySelector(`[data-citation-id="${citationId}"]`);
+      if (element) {
+        element.scrollIntoView({ behavior: "smooth", block: "center" });
+      }
+    }, 100);
+  }, []);
+
+  const refreshPdfUrl = useCallback(() => {
+    if (activeDocument) {
+      return refreshUrlFn({ data: activeDocument });
+    }
+    return Promise.resolve();
+  }, [activeDocument]);
+
+  // Reset scroll source after it's been used
+  useEffect(() => {
+    if (scrollSource !== null) {
+      const timeout = setTimeout(() => setScrollSource(null), 100);
+      return () => clearTimeout(timeout);
+    }
+  }, [scrollSource]);
+
+  const setDocVisible = (extractionId: string) => {
+    setVisibleExtractionId(extractionId);
+    setDocHidden(false);
+  };
+
+  const download = async (documentId: string) => {
+    const { blobUrl } = await downloadDocumentFn({ data: { documentId } });
+    const [domain, docPath] = blobUrl.split("/documents/");
+    if (domain && docPath) {
+      const newUrl = new URL(docPath, "https://ph.sea.dev/doc/").toString();
+      window.open(newUrl, "_blank");
+    } else {
+      window.open(blobUrl, "_blank");
+    }
+  };
+
+  const currentDocIndex =
+    !!activeDocument && extractionInfo.length > 0
+      ? extractionInfo.findIndex(
+          (item) => item.documentExtractionId === activeDocument.documentExtractionId,
+        )
+      : undefined;
+
+  const sidebar = (
+    <SidebarRight className="border-none">
+      {activeDocument && (
+        <div className={cn("h-full w-full min-w-full flex-col", docHidden ? "hidden" : "flex")}>
+          <div className="relative flex w-full items-center justify-between gap-4 border-b p-2">
+            <H3>{activeDocument.name}</H3>
+            <div className="flex items-center gap-1">
+              <Button
+                size="icon"
+                variant="ghost"
+                disabled={
+                  extractionInfo.length <= 1 ||
+                  (currentDocIndex !== undefined && currentDocIndex <= 0)
+                }
+                onClick={() => {
+                  if (currentDocIndex === undefined) {
+                    return;
+                  }
+                  const nextIndex = currentDocIndex - 1;
+                  const nextElement = extractionInfo[nextIndex];
+
+                  if (nextElement) {
+                    setDocVisible(nextElement.documentExtractionId);
+                    setBoundingKey(undefined);
+                  }
+                }}
+              >
+                <ArrowLeftIcon />
+                <span className="sr-only">Previous</span>
+              </Button>
+              <Button
+                size="icon"
+                variant="ghost"
+                disabled={
+                  extractionInfo.length <= 1 ||
+                  (currentDocIndex !== undefined && currentDocIndex == extractionInfo.length - 1)
+                }
+                onClick={() => {
+                  if (currentDocIndex === undefined) {
+                    return;
+                  }
+                  const nextIndex = currentDocIndex + 1;
+                  const nextElement = extractionInfo[nextIndex];
+
+                  if (nextElement) {
+                    setDocVisible(nextElement.documentExtractionId);
+                    setBoundingKey(undefined);
+                  }
+                }}
+              >
+                <ArrowRightIcon />
+                <span className="sr-only">Next</span>
+              </Button>
+              <Button
+                size="icon"
+                variant="ghost"
+                onClick={() => {
+                  setDocHidden(true);
+                  setBoundingKey(undefined);
+                }}
+              >
+                <XIcon />
+                <span className="sr-only">Close</span>
+              </Button>
+            </div>
+          </div>
+          {isActiveDocumentExcel ? (
+            <ExcelViewer
+              excelFile={activeDocument}
+              boundingKey={boundingKey}
+              activeCitationId={activeCitationId}
+              onSelectCitation={handleSelectCitation}
+            />
+          ) : isActiveDocumentImage ? (
+            <ImageViewer
+              image={{ ...activeDocument, url: activeDocument.url ?? "" }}
+              refreshUrl={() => refreshUrlFn({ data: { documentId: activeDocument.documentId } })}
+              annotationFocus={{
+                activeAnnotationKey: boundingKey,
+                activeCitationId: activeCitationId,
+              }}
+              onSelectCitation={handleSelectCitation}
+            />
+          ) : (
+            <PdfViewer
+              pdfInfo={activeDocument}
+              activeAnnotationKey={boundingKey}
+              activeCitationId={activeCitationId}
+              onSelectCitation={handleSelectCitation}
+              refreshPdfUrl={refreshPdfUrl}
+            />
+          )}
+        </div>
+      )}
+      {(!activeDocument || docHidden) && (
+        <ResizablePanelGroup direction="vertical">
+          <ResizablePanel defaultSize={60}>
+            <ChatMessages
+              initInput={messageDraft ?? undefined}
+              conversationId={submission.conversation.id}
+              chatModel={chatModel}
+              isProcessing={isProcessingExtractions}
+              onInputChange={storeMessageDraft}
+              onInputBlur={() => {
+                router.invalidate();
+              }}
+            />
+          </ResizablePanel>
+          <ResizableHandle withHandle={true} />
+          <ResizablePanel defaultSize={40}>
+            <DocList
+              docs={extractionInfo}
+              setDocVisible={setDocVisible}
+              canExtract={canExtract}
+              download={download}
+            />
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      )}
+    </SidebarRight>
+  );
+
+  return (
+    <ChatProvider
+      conversationId={submission.conversation.id}
+      initMessages={toUIMessages(submission.conversation.messages)}
+      chatType="submission"
+    >
+      <Container crumbs={crumbs} sidebar={sidebar}>
+        <div className="flex flex-col gap-0">
+          <div className="flex items-center justify-between gap-2">
+            <div>
+              <RenameSubmissionModal submission={submission} />
+            </div>
+            <div className="flex flex-row gap-2">
+              <UnsavedBadge unsaved={unsaved} />
+              {submission.status === "draft" ? (
+                <Badge variant="secondary">Draft</Badge>
+              ) : (
+                <Badge variant="default">Final</Badge>
+              )}
+            </div>
+          </div>
+          <div className="flex justify-between">
+            <div>
+              <Lead>
+                Deal:{" "}
+                <Link
+                  to="/deals/$dealId"
+                  params={{ dealId: submission.dealId }}
+                  className={styledLinkClassName}
+                >
+                  {submission.deal.name}
+                </Link>
+              </Lead>
+              <Lead>
+                Workflow:{" "}
+                <Link
+                  to="/workflows/$wfSlug"
+                  params={{ wfSlug: submission.form.workflow.slug }}
+                  className={styledLinkClassName}
+                >
+                  {submission.form.workflow.name}
+                </Link>
+              </Lead>
+              <Lead>
+                Form:{" "}
+                <Link
+                  to="/workflows/$wfSlug/$formId"
+                  params={{
+                    wfSlug: submission.form.workflow.slug,
+                    formId: submission.form.id,
+                  }}
+                  className={styledLinkClassName}
+                >
+                  {submission.form.name}
+                </Link>
+              </Lead>
+            </div>
+            <div className="flex flex-row items-center gap-2">
+              <DropdownMenu modal={true}>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    type="button"
+                    size="icon"
+                    variant="ghost"
+                    aria-label="More actions"
+                    aria-haspopup="menu"
+                  >
+                    <EllipsisIcon />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent>
+                  <DropdownMenuGroup>
+                    <DropdownMenuItemDumb>
+                      <ConfirmationModal
+                        title="Reset submission entries"
+                        message="This will clear all entered data"
+                        action={resetSubmission}
+                      >
+                        <div className="flex w-full items-center gap-2">
+                          <RefreshCwIcon />
+                          Reset
+                        </div>
+                      </ConfirmationModal>
+                    </DropdownMenuItemDumb>
+                    <DropdownMenuItemDumb>
+                      <ConfirmationModal
+                        title="Confirmation"
+                        message={`Are you sure you want to delete the ${subName(submission)} submission?`}
+                        action={deleteSubmission}
+                      >
+                        <div className="flex w-full items-center gap-2">
+                          <TrashIcon /> Delete
+                        </div>
+                      </ConfirmationModal>
+                    </DropdownMenuItemDumb>
+                    <DropdownMenuItem onClick={copySubmission}>
+                      <ClipboardCopyIcon /> Copy to clipboard
+                    </DropdownMenuItem>
+                    <DropdownMenuItem onClick={reloadForm}>
+                      <RotateCcwIcon /> Reload form
+                    </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                </DropdownMenuContent>
+              </DropdownMenu>
+              {experimental && <NewSubmissionShareLinkModal />}
+              <Button disabled={finalisePending} onClick={toggleFinal}>
+                {finalisePending && submission.status === "draft" ? (
+                  <Loader2Icon className="animate-spin" />
+                ) : submission.status === "final" ? (
+                  "Revert to draft"
+                ) : (
+                  "Finalise"
+                )}
+              </Button>
+            </div>
+          </div>
+        </div>
+        {grouped.length === 0 ? (
+          <div className="rounded-md border border-dashed p-4 text-center">
+            <Lead>
+              No data points to enter - you might want to hit{" "}
+              <span className="font-bold">
+                <RotateCcwIcon /> Reload form
+              </span>{" "}
+              above.
+            </Lead>
+          </div>
+        ) : canExtract ? (
+          <UploadFile
+            docs={extractionInfo}
+            submissionId={submission.id}
+            isExperimental={experimental}
+            setSidebarOpen={setSidebarOpen}
+          />
+        ) : (
+          <CtaUpgrade />
+        )}
+        {grouped.map(({ formGroup, groups }) => (
+          <SubmissionGroupWrapper
+            key={formGroup.id}
+            formGroup={formGroup}
+            groups={groups}
+            setUnsaved={setUnsaved}
+            disableInput={isProcessingExtractions}
+            annotationId={annotationId}
+            boundingKey={boundingKey}
+            setAnnotationId={handleFormAnnotationSelect}
+            setBoundingKey={setBoundingKey}
+            submissionId={submissionId}
+          />
+        ))}
+      </Container>
+    </ChatProvider>
+  );
+}
+
+function RenameSubmissionModal({ submission }: { submission: Submission }) {
+  const router = useRouter();
+  return (
+    <Dialog>
+      <DialogTrigger className="w-fit">
+        <H1 className="w-fit cursor-pointer hover:underline">
+          <Highlighted>{subName(submission)}</Highlighted>
+        </H1>
+      </DialogTrigger>
+      <DialogContent>
+        <form
+          onSubmit={async (event) => {
+            event.preventDefault();
+            const formData = new FormData(event.currentTarget);
+            const name = formData.get("name") as string;
+            await renameSubmissionFn({ data: { submissionId: submission.id, name } });
+            router.invalidate();
+          }}
+          className="grid gap-4"
+        >
+          <DialogHeader>
+            <DialogTitle>Edit submission</DialogTitle>
+          </DialogHeader>
+          <Input name="name" placeholder="Name" defaultValue={submission.name ?? undefined} />
+          <Textarea
+            disabled={true}
+            placeholder="AI summary is pending"
+            defaultValue={submission.summary ?? undefined}
+          />
+          <DialogFooter>
+            <DialogClose>Cancel</DialogClose>
+            <DialogClose asChild>
+              <Button type="submit" variant="secondary">
+                Save
+              </Button>
+            </DialogClose>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/apps/main/src/routes/_authed/_app/deals/$dealId/-components/doc-loading.tsx

@@ -0,0 +1,37 @@
+import type { DocumentExtractionWDocument } from "@sea/db/types";
+import { FileTextIcon, Loader2Icon } from "lucide-react";
+
+export default function DocumentLoading({
+  extractions,
+}: {
+  extractions: DocumentExtractionWDocument[];
+}) {
+  return (
+    <div className="grid gap-2 rounded-md border border-dashed p-4 text-center">
+      <p className="mb-2 text-gray-500">Processing documents</p>
+      <p className="text-center text-gray-600">
+        Our AI is extracting information from your documents
+      </p>
+      <div className="flex w-full flex-col items-center gap-2">
+        {extractions.map((extraction) => (
+          <div
+            key={extraction.id}
+            className="flex items-center space-x-3 rounded-lg border bg-gray-50 p-3"
+          >
+            <FileTextIcon className="h-5 w-5 flex-shrink-0 text-gray-500" />
+            <span className="truncate text-sm font-medium text-gray-700">
+              {extraction.document.name}
+            </span>
+            <div className="flex-shrink-0">
+              <Loader2Icon className="h-4 w-4 animate-spin text-blue-500" />
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <p className="text-center text-xs text-gray-500">
+        This may take a few moments depending on document size
+      </p>
+    </div>
+  );
+}