sea-dev 1.0.0

package/apps/main/src/components/chat/chat-status.tsx

@@ -0,0 +1,140 @@
+import { LoadingDotsIcon } from "@/components/svg/loading";
+import type { ReasoningUIPart } from "ai";
+import { useEffect, useRef, useState } from "react";
+import { useChatContext } from "./chat-context";
+
+const RANDOM_STEPS = ["Processing", "Extracting", "Summarizing", "Analyzing", "Generating"];
+
+export function ProgressListItem({
+  step,
+  isLast,
+}: {
+  step: ReasoningUIPart & { status: string };
+  isLast: boolean;
+}) {
+  return (
+    <li className="relative pb-10">
+      {!isLast && (
+        <div
+          aria-hidden="true"
+          className="absolute top-3 left-[7px] mt-0.5 h-[calc(100%-0.75rem)] w-0.5 bg-gray-300 dark:bg-gray-700"
+        ></div>
+      )}
+      {step.status === "done" && (
+        <a href="#" className="group relative flex items-start">
+          <span className="flex items-start">
+            <span className="relative flex size-4 shrink-0 items-center justify-center">
+              <svg
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                data-slot="icon"
+                aria-hidden="true"
+                className="text-brand-600 dark:text-brand-400"
+              >
+                <path
+                  d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z"
+                  clipRule="evenodd"
+                  fillRule="evenodd"
+                />
+              </svg>
+            </span>
+            <span className="ml-4 text-xs font-medium text-gray-500 dark:text-gray-400">
+              {step.text}
+            </span>
+          </span>
+        </a>
+      )}
+      {step.status === "processing" && (
+        <a href="#" aria-current="step" className="group relative flex items-start">
+          <span
+            aria-hidden="true"
+            className="relative flex size-4 shrink-0 items-center justify-center"
+          >
+            <span className="bg-brand-200 dark:bg-brand-900 absolute size-4 animate-pulse rounded-full"></span>
+            <span className="bg-brand-600 dark:bg-brand-400 relative block size-2 animate-pulse rounded-full"></span>
+          </span>
+          <span className="ml-4 flex min-w-0 flex-col">
+            <span className="text-xs font-medium text-indigo-600 dark:text-indigo-400">
+              {step.text}
+            </span>
+          </span>
+        </a>
+      )}
+    </li>
+  );
+}
+
+export function ChatStatus() {
+  const { messages } = useChatContext();
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Get the latest assistant message being streamed
+  const [latestMessage] = messages.filter((m) => m.role === "assistant");
+  const intermediateSteps =
+    latestMessage?.parts
+      .filter((part) => part.type === "reasoning")
+      .map((part, index) => ({
+        type: part.type,
+        text: part.text,
+        status: index === latestMessage.parts.length - 1 ? "processing" : "done",
+      })) ?? [];
+  const [randomStep, setRandomStep] = useState(RANDOM_STEPS[0]);
+  // const currentStep = intermediateSteps.find((s) => s.status === "processing")?.text ?? randomStep;
+  const currentStep = randomStep;
+
+  useEffect(() => {
+    if (containerRef.current) {
+      containerRef.current.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    }
+  }, [intermediateSteps.length]);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      console.log("Setting random step");
+      setRandomStep(RANDOM_STEPS[Math.floor(Math.random() * RANDOM_STEPS.length)]);
+    }, 5000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div className="text-muted-foreground flex animate-pulse items-center gap-2 px-4 py-2 text-sm">
+      <LoadingDotsIcon />
+      <span>{currentStep}...</span>
+    </div>
+  );
+
+  // return (
+  //   <div
+  //     ref={containerRef}
+  //     className="bg-muted/30 text-muted-foreground flex flex-col gap-2 rounded-lg border px-4 py-3 text-sm transition-all duration-300 ease-in-out"
+  //   >
+  //     <button
+  //       onClick={() => setExpanded(!expanded)}
+  //       className="hover:text-foreground flex w-full items-center justify-between gap-3 transition-colors"
+  //       aria-label={expanded ? "Collapse status" : "Expand status"}
+  //     >
+  //       <div className="flex items-center gap-2">
+  //         {expanded ? (
+  //           <ChevronRightIcon className="h-4 w-4 rotate-90 transition-transform" />
+  //         ) : (
+  //           <LoadingDotsIcon />
+  //         )}
+  //         <span className="font-medium">{expanded ? "Extraction Progress" : currentStep}</span>
+  //       </div>
+  //       {expanded && <span className="text-xs opacity-70">{intermediateSteps.length} steps</span>}
+  //     </button>
+
+  //     {expanded && (
+  //       <div className="animate-in slide-in-from-top-2 fade-in mt-2 ml-1 flex flex-col space-y-4 text-xs duration-300">
+  //         <ol role="list" className="overflow-hidden">
+  //           {intermediateSteps.map((step, i) => {
+  //             return (
+  //               <ProgressListItem key={i} step={step} isLast={i === intermediateSteps.length - 1} />
+  //             );
+  //           })}
+  //         </ol>
+  //       </div>
+  //     )}
+  //   </div>
+  // );
+}

package/apps/main/src/components/chat/chat.tsx

@@ -0,0 +1,458 @@
+import { ModelSelect } from "@/components/sidebar/model-select";
+import { LoadingDotsIcon } from "@/components/svg/loading";
+import { cn } from "@/lib/utils";
+import type { ChatModel, MessageRole } from "@sea/db/schema";
+import { Button } from "@sea/ui/components/ui/button";
+import { Citation } from "@sea/ui/components/ui/citation";
+import { ChatTextarea } from "@sea/ui/components/ui/textarea";
+import {
+  Tool,
+  ToolConnector,
+  ToolContent,
+  ToolGroup,
+  ToolGroupContent,
+  ToolGroupHeader,
+  ToolHeader,
+  ToolInput,
+  ToolOutput,
+} from "@sea/ui/components/ui/tool";
+import { nanoid } from "@sea/util/id";
+import { useDebouncer } from "@tanstack/react-pacer/debouncer";
+import { type UIMessage } from "ai";
+import { ArrowUpIcon, CopyIcon, Loader2Icon } from "lucide-react";
+import { useEffect, useRef, useState, type ComponentProps, type FormEvent } from "react";
+import Markdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import remarkGfm from "remark-gfm";
+import { useChatContext } from "./chat-context";
+import { ChatStatus } from "./chat-status";
+
+const ERROR_MSG = "Error in LLM backend";
+
+const TOOL_DISPLAY_NAMES: Record<string, string> = {
+  getOrganizationData: "Fetching recent submissions and deals",
+  fetchCurrentSubmission: "Fetching submission data",
+  fetchCurrentForm: "Fetching current form data",
+  persistForm: "Persisting form data",
+  fetchFormEditability: "Checking if form is editable",
+  resetCurrentSubmission: "Resetting submission data",
+  addSubmissionRow: "Adding a new row",
+  populateSubmissionItem: "Populating a field",
+  getSubmissionDocumentList: "Getting document list",
+  getSubmissionDocumentData: "Getting document data",
+  fileSearch: "Searching documents for data",
+  searchDeals: "Searching deals",
+  searchDealSubmissions: "Searching deal submissions",
+  updateAgentProgress: "Updating progress list",
+  createArtifact: "Creating an artifact",
+};
+
+export function ChatMessages({
+  conversationId,
+  chatModel,
+  initInput = "",
+  instructions,
+  isProcessing = false,
+  onInputChange,
+  onInputBlur,
+}: {
+  conversationId: string;
+  chatModel: ChatModel;
+  initInput?: string;
+  instructions?: string;
+  isProcessing?: boolean;
+  onInputChange?: (input: string) => void;
+  onInputBlur?: () => void;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [input, setInput] = useState(initInput);
+
+  const { messages, error, setMessages, sendMessage, status, chatIsLoading, setChatIsLoading } =
+    useChatContext();
+
+  const isLoading = status === "submitted" || status === "streaming" || isProcessing;
+
+  const debouncedOnInputChange = useDebouncer(
+    (input: string) => {
+      onInputChange?.(input);
+    },
+    { wait: 1_000 },
+  );
+
+  useEffect(() => {
+    if (error) {
+      console.error("[ChatMessages] Error:", error);
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: nanoid(),
+          role: "assistant",
+          parts: [{ type: "text", text: ERROR_MSG }],
+        },
+      ]);
+    }
+  }, [error]);
+
+  useEffect(() => {
+    if (containerRef.current) {
+      containerRef.current.scrollTo({
+        top: containerRef.current.scrollHeight,
+        behavior: "smooth",
+      });
+    }
+  }, [messages, isLoading]);
+
+  useEffect(() => {
+    debouncedOnInputChange.maybeExecute(input);
+  }, [input]);
+
+  const onSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    sendMessage({ text: input });
+    setInput("");
+  };
+
+  return (
+    <div className="relative flex h-full w-full grow flex-col items-center justify-between">
+      <div className="w-full p-2">
+        <ModelSelect
+          conversationId={conversationId}
+          chatModel={chatModel}
+          setChatIsLoading={setChatIsLoading}
+        />
+      </div>
+      <div
+        ref={containerRef}
+        className="flex h-full max-h-full min-h-0 w-full max-w-full grow flex-col gap-4 overflow-y-auto px-2 text-xs"
+      >
+        {instructions && messages.length === 0 && (
+          <div className="text-muted-foreground my-auto text-center text-[1rem]">
+            <p>{instructions}</p>
+          </div>
+        )}
+        {messages.map((message) => (
+          <MessageComponent key={message.id} message={message} />
+        ))}
+        {isLoading && !isProcessing && (
+          <div className="text-brand-foreground mx-auto my-4">
+            <LoadingDotsIcon />
+          </div>
+        )}
+        {isProcessing && <ChatStatus />}
+      </div>
+      <div className="bg-background w-full p-2">
+        <form onSubmit={onSubmit} className="flex w-full space-x-2">
+          <ChatTextarea
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onBlur={onInputBlur}
+            autoFocus={true}
+            isLoading={isLoading}
+            disabled={chatIsLoading}
+            placeholder="Reply..."
+            className="bg-background text-foreground z-10 w-full max-w-full resize-none border-0 ring-transparent! outline-hidden! dark:ring-0!"
+          />
+          <Button size="icon" disabled={isLoading}>
+            <ArrowUpIcon />
+          </Button>
+        </form>
+      </div>
+      {chatIsLoading && (
+        <div className="bg-muted/60 absolute inset-0 flex items-center justify-center">
+          <Loader2Icon className="h-6 w-6 animate-spin" />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function isToolPart(
+  part: UIMessage["parts"][number],
+): part is Extract<UIMessage["parts"][number], { type: `tool-${string}` }> {
+  return part.type?.startsWith("tool-") ?? false;
+}
+
+export function MessageComponent({
+  message,
+  variant = "default",
+  onCitationClick,
+}: {
+  message: UIMessage;
+  variant?: "default" | "agent";
+  onCitationClick?: (citationId: string) => void;
+}) {
+  // Group consecutive tool calls together
+  const groupedParts: Array<
+    | {
+        type: "tool-group";
+        tools: Array<{
+          part: Extract<UIMessage["parts"][number], { type: `tool-${string}` }>;
+          index: number;
+        }>;
+      }
+    | { type: "other"; part: UIMessage["parts"][number]; index: number }
+  > = [];
+
+  for (const [index, part] of message.parts.entries()) {
+    if (!part || !part.type) continue;
+
+    // Skip step-start and data-* parts for grouping purposes
+    if (part.type === "step-start" || part.type.startsWith("data-")) continue;
+
+    if (isToolPart(part)) {
+      const toolName = part.type.slice("tool-".length);
+      if (toolName.toLowerCase().endsWith("agent")) continue;
+
+      const lastGroup = groupedParts[groupedParts.length - 1];
+      if (lastGroup && lastGroup.type === "tool-group") {
+        lastGroup.tools.push({ part, index });
+      } else {
+        groupedParts.push({ type: "tool-group", tools: [{ part, index }] });
+      }
+    } else {
+      // Only break the tool group if this is a significant part (text, source, etc.)
+      groupedParts.push({ type: "other", part, index });
+    }
+  }
+
+  return groupedParts.map((group, groupIdx) => {
+    if (group.type === "tool-group") {
+      // Single tool - render without group wrapper
+      if (group.tools.length === 1) {
+        const { part, index } = group.tools[0] as {
+          part: Extract<UIMessage["parts"][number], { type: `tool-${string}` }>;
+          index: number;
+        };
+        const toolName = part.type.slice("tool-".length);
+        return (
+          <Tool defaultOpen={false} key={`${message.role}-tool-${index}`}>
+            <ToolConnector isLast state={part.state} />
+            <ToolHeader title={toolName} type={part.type} state={part.state} />
+            <ToolContent>
+              {part.input !== undefined && <ToolInput input={part.input} />}
+              <ToolOutput output={part.output} errorText={part.errorText} />
+            </ToolContent>
+          </Tool>
+        );
+      }
+
+      // Multiple tools - render with group wrapper
+      return (
+        <ToolGroup
+          key={`${message.role}-group-${groupIdx}`}
+          toolCount={group.tools.length}
+          defaultOpen={false}
+        >
+          <ToolGroupHeader toolCount={group.tools.length} />
+          <ToolGroupContent>
+            {group.tools.map(({ part, index }, toolIdx) => {
+              const toolName = part.type.slice("tool-".length);
+              const isLast = toolIdx === group.tools.length - 1;
+              return (
+                <Tool defaultOpen={false} key={`${message.role}-tool-${index}`}>
+                  <ToolConnector isLast={isLast} state={part.state} />
+                  <ToolHeader title={toolName} type={part.type} state={part.state} />
+                  <ToolContent>
+                    {part.input !== undefined && <ToolInput input={part.input} />}
+                    <ToolOutput output={part.output} errorText={part.errorText} />
+                  </ToolContent>
+                </Tool>
+              );
+            })}
+          </ToolGroupContent>
+        </ToolGroup>
+      );
+    }
+
+    // Non-tool parts
+    const { part, index } = group;
+
+    if (part.type === "step-start") return null;
+
+    // Reasoning is not supported yet
+    if (part.type === "reasoning") return null;
+    // if (part.type === "reasoning") {
+    //   return (
+    //     <div className="w-full p-4" style={{ height: "300px" }}>
+    //       <Reasoning className="w-full" isStreaming={true}>
+    //         <ReasoningTrigger />
+    //         <ReasoningContent>{part.text}</ReasoningContent>
+    //       </Reasoning>
+    //     </div>
+    //   );
+    // }
+
+    if (part.type === "text") {
+      return (
+        <MessageText
+          key={`${message.role}-${index}`}
+          role={message.role}
+          text={part.text}
+          variant={variant}
+          onCitationClick={onCitationClick}
+        />
+      );
+    }
+
+    if (part.type === "source-url") {
+      return (
+        <p key={`${message.role}-${index}`} className="text-muted-foreground text-xs">
+          Source: <a href={part.url}>{part.url}</a>
+        </p>
+      );
+    }
+
+    if (part.type === "source-document") {
+      return (
+        <p key={`${message.role}-${index}`} className="text-muted-foreground text-xs">
+          File: {part.filename}
+        </p>
+      );
+    }
+
+    // "data-*" parts are internal context; don't render by default.
+    if (part.type.startsWith("data-")) return null;
+
+    // Unknown/unsupported part types: keep a small placeholder to avoid silent failures.
+    return (
+      <p key={`${message.role}-${index}`} className="text-muted-foreground text-xs">
+        (Unsupported message part: {part.type})
+      </p>
+    );
+  });
+}
+
+function ChatMarkdown({
+  text,
+  onCitationClick,
+}: {
+  text: string;
+  onCitationClick?: (citationId: string) => void;
+}) {
+  return (
+    <Markdown
+      remarkPlugins={[remarkGfm]}
+      rehypePlugins={[rehypeRaw]}
+      components={{
+        a: LinkRenderer,
+        // Map cite tags to Citation component with inline content
+        cite: onCitationClick
+          ? ({ children, ...props }) => {
+              const citationId = (props as { "data-id"?: string })["data-id"];
+              if (citationId) {
+                return (
+                  <Citation citationId={citationId} onCitationClick={onCitationClick}>
+                    {children}
+                  </Citation>
+                );
+              }
+              return <cite {...props}>{children}</cite>;
+            }
+          : undefined,
+        pre({ className, children, ...props }) {
+          return (
+            <pre
+              className={cn(
+                "bg-muted/50 text-foreground my-2 overflow-x-auto rounded p-2 text-[11px]",
+                className,
+              )}
+              {...(props as ComponentProps<"pre">)}
+            >
+              {children}
+            </pre>
+          );
+        },
+        code({ className, children, ...props }) {
+          const codeText = String(children).replace(/\n$/, "");
+          const inline = (props as { inline?: boolean }).inline;
+          if (inline) {
+            return <code className={className}>{children}</code>;
+          }
+          return (
+            <code className={className} {...(props as ComponentProps<"code">)}>
+              {codeText}
+            </code>
+          );
+        },
+      }}
+    >
+      {text}
+    </Markdown>
+  );
+}
+
+function MessageText({
+  role,
+  text,
+  variant,
+  onCitationClick,
+}: {
+  role: MessageRole;
+  text: string;
+  variant: "default" | "agent";
+  onCitationClick?: (citationId: string) => void;
+}) {
+  // In the agent chat UI, the assistant should read like plain text on the background.
+  if (variant === "agent" && role !== "user") {
+    return (
+      <div className="prose prose-slate dark:prose-invert prose-sm prose-p:my-0 text-foreground text-pretty">
+        <ChatMarkdown text={text} onCitationClick={onCitationClick} />
+      </div>
+    );
+  }
+
+  return <MessageBubble role={role} text={text} onCitationClick={onCitationClick} />;
+}
+
+export function MessageBubble({
+  role,
+  text,
+  onCitationClick,
+}: {
+  role: MessageRole;
+  text: string;
+  onCitationClick?: (citationId: string) => void;
+}) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    void navigator.clipboard?.writeText(text);
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1500);
+  };
+
+  return (
+    <div
+      className={cn(
+        "bg-card text-card-foreground group relative w-fit max-w-[85%]",
+        "min-w-12 rounded-md p-2 pr-8 shadow-sm last:mb-4",
+        role === "user" ? "ml-auto" : "bg-brand dark:bg-brand-foreground mr-auto",
+        text === ERROR_MSG ? "border border-red-600 font-bold text-red-700" : "",
+      )}
+    >
+      <div className="prose prose-slate dark:prose-invert prose-sm prose-p:my-0 text-pretty">
+        <ChatMarkdown text={text} onCitationClick={onCitationClick} />
+      </div>
+      <button
+        type="button"
+        onClick={handleCopy}
+        className={cn(
+          "text-muted-foreground/60 hover:text-foreground absolute top-2 right-2 rounded p-1 transition",
+          "opacity-0 group-hover:opacity-100",
+        )}
+        aria-label={copied ? "Copied" : "Copy message"}
+        title={copied ? "Copied" : "Copy"}
+      >
+        <CopyIcon className="h-3.5 w-3.5" />
+      </button>
+    </div>
+  );
+}
+
+export function LinkRenderer(props: ComponentProps<"a">) {
+  return (
+    <a href={props.href} target="_blank" rel="noreferrer">
+      {props.children}
+    </a>
+  );
+}

package/apps/main/src/components/chat/citation-modal.tsx

@@ -0,0 +1,54 @@
+import type { ExtractionInfo } from "@sea/core/data-extraction/types";
+import { PdfViewer } from "@sea/ui/components/doc-viewers/pdf";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@sea/ui/components/ui/dialog";
+import { useEffect, useMemo, useState } from "react";
+
+interface CitationModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  citationId: string | null;
+  extractionInfo: ExtractionInfo[];
+}
+
+export function CitationModal({
+  open,
+  onOpenChange,
+  citationId,
+  extractionInfo,
+}: CitationModalProps) {
+  // Find the extraction that contains this citation
+  const extraction = useMemo(
+    () => extractionInfo.find((ext) => ext.citations.some((c) => c.id === citationId)),
+    [extractionInfo, citationId],
+  );
+  const citation = useMemo(
+    () => extraction?.citations.find((c) => c.id === citationId),
+    [extraction, citationId],
+  );
+  const [annotationKey, setAnnotationKey] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    if (citation?.boundingRegions) {
+      const key = Object.keys(citation.boundingRegions)[0];
+      setAnnotationKey(Object.keys(citation.boundingRegions)[0]);
+    }
+  }, [citation]);
+
+  return !extraction || !citation ? null : (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="flex h-[90vh] max-w-[90vw] flex-col gap-0 p-0 sm:max-w-[95vw]">
+        <DialogHeader className="flex-shrink-0 border-b px-6 py-4">
+          <DialogTitle>{extraction.name}</DialogTitle>
+        </DialogHeader>
+        <div className="min-h-0 flex-1">
+          <PdfViewer
+            key={citationId}
+            pdfInfo={extraction}
+            activeAnnotationKey={annotationKey}
+            activeCitationId={citationId ?? undefined}
+          />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/apps/main/src/components/cta.tsx

@@ -0,0 +1,21 @@
+import { Alert, AlertDescription, AlertTitle } from "@sea/ui/components/ui/alert";
+import { Button } from "@sea/ui/components/ui/button";
+import { Link } from "@tanstack/react-router";
+import { BadgeAlertIcon } from "lucide-react";
+
+export function CtaUpgrade() {
+  return (
+    <Alert variant="destructive" className="w-full">
+      <BadgeAlertIcon className="size-4" />
+      <AlertTitle>Time to upgrade</AlertTitle>
+      <AlertDescription className="flex flex-row flex-wrap items-center justify-between">
+        <p>You're all out of document extractions, please upgrade for more</p>
+        <Link to="/settings/billing">
+          <Button variant="outline" extra="action" className="text-foreground! animate-bounce">
+            Explore Benefits
+          </Button>
+        </Link>
+      </AlertDescription>
+    </Alert>
+  );
+}