sea-dev 1.0.0

package/apps/main/src/routes/_authed/_app/agents/$agentId/index.tsx

@@ -0,0 +1,206 @@
+import { Container } from "@/components/header/container";
+import { SidebarRight } from "@/components/sidebar/sidebar-right";
+import { cn } from "@/lib/utils";
+import type { ChatModel } from "@sea/db/schema";
+import { memorySchema } from "@sea/db/schema";
+import type { Conversation } from "@sea/db/types";
+import { Button } from "@sea/ui/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@sea/ui/components/ui/dialog";
+import { Highlighted } from "@sea/ui/components/ui/highlight";
+import { Input } from "@sea/ui/components/ui/input";
+import { H1, H3 } from "@sea/ui/components/ui/typography";
+import { createFileRoute, useRouter } from "@tanstack/react-router";
+import { useServerFn } from "@tanstack/react-start";
+import { ChevronDownIcon, FolderIcon, LayersIcon, PlusIcon } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { AgentActionsMenu } from "../-components/agent-actions-menu";
+import { AgentArtifacts } from "../-components/agent-artifacts";
+import { AgentChatMessages } from "../-components/agent-chat";
+import { AgentHistoryMenu } from "../-components/agent-history-menu";
+import { AgentRelevantItems } from "../-components/agent-relevant-items";
+import { AddToContextModal } from "../-components/context-modal";
+import { createAgentFn, deleteArtifactFn, getAgentDataFn, renameAgentFn } from "../-fns";
+
+export const Route = createFileRoute("/_authed/_app/agents/$agentId/")({
+  loader: ({ params: { agentId } }) => getAgentDataFn({ data: { conversationId: agentId } }),
+  component: AgentPage,
+});
+
+function AgentPage() {
+  const router = useRouter();
+  const { agentId } = Route.useParams();
+  const { conversation, agentConversations, items, canExtract, extractionInfo } =
+    Route.useLoaderData();
+  const [chatIsLoading, setChatIsLoading] = useState(false);
+  const memory = memorySchema.parse(conversation.memory);
+  const hasArtifacts = memory.artifacts.length > 0;
+  const hasContext =
+    items.deals.length > 0 ||
+    items.workflows.length > 0 ||
+    items.forms.length > 0 ||
+    items.submissions.length > 0 ||
+    items.documents.length > 0;
+
+  const [showContext, setShowContext] = useState(hasContext);
+  const [showArtifacts, setShowArtifacts] = useState(hasArtifacts);
+  const prevHasContext = useRef(hasContext);
+  const createAgent = useServerFn(createAgentFn);
+  const deleteArtifact = useServerFn(deleteArtifactFn);
+
+  const crumbs = [{ href: "/agents", label: "Agents" }];
+
+  useEffect(() => {
+    // Keep context collapsed when empty; auto-open when context first appears.
+    if (!hasContext) setShowContext(false);
+    if (prevHasContext.current === false && hasContext) setShowContext(true);
+    prevHasContext.current = hasContext;
+  }, [hasContext]);
+
+  useEffect(() => {
+    // Auto-open artifacts panel when artifacts first appear
+    if (hasArtifacts) setShowArtifacts(true);
+  }, [hasArtifacts]);
+
+  const handleDeleteArtifact = async (artifactId: string) => {
+    await deleteArtifact({ data: { conversationId: agentId, artifactId } });
+    router.invalidate();
+  };
+
+  const sidebar = (
+    <SidebarRight className="border-none">
+      <div className="flex h-full flex-col gap-2 p-2">
+        <div
+          className={cn(
+            "flex flex-col border-b pb-4",
+            showContext && hasArtifacts && showArtifacts && "max-h-[50%]",
+          )}
+        >
+          <div className="flex flex-shrink-0 items-center justify-between gap-2">
+            <div className="flex items-center gap-2">
+              <FolderIcon className="text-muted-foreground h-4 w-4" />
+              <H3>Context</H3>
+            </div>
+            <div className="flex items-center gap-1">
+              <AddToContextModal conversationId={agentId}>
+                <Button variant="ghost" size="icon">
+                  <PlusIcon />
+                </Button>
+              </AddToContextModal>
+              <Button variant="ghost" size="icon" onClick={() => setShowContext((prev) => !prev)}>
+                <ChevronDownIcon
+                  className={cn("h-4 w-4 transition-transform", !showContext && "-rotate-90")}
+                />
+              </Button>
+            </div>
+          </div>
+          {showContext && (
+            <div className="mt-2 min-h-0 flex-1 overflow-y-auto">
+              <AgentRelevantItems conversationId={agentId} items={items} />
+            </div>
+          )}
+        </div>
+        {hasArtifacts && (
+          <div className={cn("flex flex-col", showArtifacts && "max-h-[50%]")}>
+            <div className="flex flex-shrink-0 items-center justify-between gap-2">
+              <div className="flex items-center gap-2">
+                <LayersIcon className="text-muted-foreground h-4 w-4" />
+                <H3>Artifacts</H3>
+              </div>
+              <Button variant="ghost" size="icon" onClick={() => setShowArtifacts((prev) => !prev)}>
+                <ChevronDownIcon
+                  className={cn("h-4 w-4 transition-transform", !showArtifacts && "-rotate-90")}
+                />
+              </Button>
+            </div>
+            {showArtifacts && (
+              <div className="mt-2 min-h-0 flex-1 overflow-y-auto">
+                <AgentArtifacts
+                  artifacts={memory.artifacts}
+                  onDeleteArtifact={handleDeleteArtifact}
+                />
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </SidebarRight>
+  );
+
+  return (
+    <Container crumbs={crumbs} sidebar={sidebar} className="bg-subtle-grid overflow-hidden">
+      <div className="flex h-full min-h-0 flex-col">
+        <div className="flex flex-shrink-0 items-center justify-between gap-2 pb-4">
+          <RenameAgentModal conversation={conversation} />
+          <div className="flex flex-row gap-2">
+            <AgentHistoryMenu agentConversations={agentConversations} currentAgentId={agentId} />
+            <AgentActionsMenu
+              conversationId={agentId}
+              chatModel={conversation.model}
+              setChatIsLoading={setChatIsLoading}
+            />
+            <Button variant="secondary" onClick={async () => await createAgent()}>
+              <PlusIcon className="mr-2 h-4 w-4" />
+              New Agent
+            </Button>
+          </div>
+        </div>
+        <div className="min-h-0 flex-1">
+          <AgentChatMessages
+            conversation={conversation}
+            conversationId={agentId}
+            chatIsLoading={chatIsLoading}
+            canExtract={canExtract}
+            chatModel={conversation.model as ChatModel}
+            extractionInfo={extractionInfo}
+          />
+        </div>
+      </div>
+    </Container>
+  );
+}
+
+function RenameAgentModal({ conversation }: { conversation: Conversation }) {
+  const router = useRouter();
+  return (
+    <Dialog>
+      <DialogTrigger className="w-fit">
+        <H1 className="w-fit cursor-pointer hover:underline">
+          <Highlighted>{conversation.name || "New Agent"}</Highlighted>
+        </H1>
+      </DialogTrigger>
+      <DialogContent>
+        <form
+          onSubmit={async (event) => {
+            event.preventDefault();
+            const formData = new FormData(event.currentTarget);
+            const name = formData.get("name") as string;
+            await renameAgentFn({ data: { conversationId: conversation.id, name } });
+            router.invalidate();
+          }}
+          className="grid gap-4"
+        >
+          <DialogHeader>
+            <DialogTitle>Rename conversation</DialogTitle>
+          </DialogHeader>
+          <Input name="name" placeholder="Name" defaultValue={conversation.name ?? 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/agents/-components/agent-actions-menu.tsx

@@ -0,0 +1,94 @@
+import { ConfirmationModal } from "@/components/modals/modals";
+import { getAppConfig } from "@/lib/config";
+import { membershipMiddleware } from "@/middleware";
+import { getChatModel, summarizeAndEraseConversation } from "@sea/core";
+import { eraseConversation } from "@sea/dal/conversation";
+import { Button } from "@sea/ui/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@sea/ui/components/ui/dropdown-menu";
+import { Link } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { EllipsisIcon, EraserIcon, SettingsIcon, Sparkles } from "lucide-react";
+import type { Dispatch, SetStateAction } from "react";
+
+const eraseChatFn = createServerFn({ method: "POST" })
+  .middleware([membershipMiddleware])
+  .validator((data: { conversationId: string }) => data)
+  .handler(async ({ context: { member }, data: { conversationId } }) => {
+    await eraseConversation({ member, conversationId });
+  });
+
+const summarizeAndEraseChatFn = createServerFn({ method: "POST" })
+  .middleware([membershipMiddleware])
+  .validator((data: { conversationId: string; modelId: string }) => data)
+  .handler(async ({ context: { member }, data: { conversationId, modelId } }) => {
+    const config = getAppConfig();
+    const model = getChatModel({
+      aiGatewayApiKey: config.vercel.aiGatewayApiKey,
+      modelId,
+    });
+    await summarizeAndEraseConversation(model, member, conversationId);
+  });
+
+export function AgentActionsMenu({
+  conversationId,
+  chatModel,
+  setChatIsLoading,
+}: {
+  conversationId: string;
+  chatModel: string;
+  setChatIsLoading: Dispatch<SetStateAction<boolean>>;
+}) {
+  const eraseChat = async () => {
+    await eraseChatFn({ data: { conversationId } });
+    window.location.reload();
+  };
+
+  const summarizeAndErase = async () => {
+    setChatIsLoading(true);
+    try {
+      await summarizeAndEraseChatFn({ data: { conversationId, modelId: chatModel } });
+    } finally {
+      setChatIsLoading(false);
+    }
+    window.location.reload();
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <EllipsisIcon className="h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem asChild>
+          <Link to="/agents/$agentId/config" params={{ agentId: conversationId }}>
+            <SettingsIcon className="mr-2 h-4 w-4" />
+            Tools Config
+          </Link>
+        </DropdownMenuItem>
+        <ConfirmationModal title="Erase all messages" message="Are you sure?" action={eraseChat}>
+          <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+            <EraserIcon className="mr-2 h-4 w-4" />
+            Erase chat
+          </DropdownMenuItem>
+        </ConfirmationModal>
+        <ConfirmationModal
+          title="Summarise and erase"
+          message="A summary of your conversation will be inserted into the context for future messages. Continue?"
+          action={summarizeAndErase}
+        >
+          <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+            <Sparkles className="mr-2 h-4 w-4" />
+            Summarise and erase
+          </DropdownMenuItem>
+        </ConfirmationModal>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/apps/main/src/routes/_authed/_app/agents/-components/agent-artifacts.tsx

@@ -0,0 +1,153 @@
+import { ChartRenderer, DashboardRenderer, TableRenderer } from "@sea/ui/components/chart-viz";
+import { RelDate } from "@sea/ui/components/misc/rel-date";
+import { Button } from "@sea/ui/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@sea/ui/components/ui/dialog";
+import { DownloadIcon, FileTextIcon, XIcon } from "lucide-react";
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+export type Artifact = {
+  id: string;
+  type: "markdown" | "chart" | "table" | "dashboard";
+  title: string;
+  content: string;
+  createdAt: string;
+};
+
+function downloadBlob(blob: Blob, filename: string) {
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  link.click();
+  URL.revokeObjectURL(url);
+}
+
+function escapeHtml(text: string) {
+  return text
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/\"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+}
+
+export function AgentArtifacts({
+  artifacts,
+  onDeleteArtifact,
+}: {
+  artifacts: Artifact[];
+  onDeleteArtifact?: (artifactId: string) => void;
+}) {
+  if (artifacts.length === 0) {
+    return (
+      <p className="text-muted-foreground text-sm">
+        No artifacts yet. Ask the agent to create a report when you need one.
+      </p>
+    );
+  }
+
+  return (
+    <div className="space-y-2 p-2">
+      {artifacts.map((artifact) => {
+        const markdownFileName = `${artifact.title}.md`;
+        const wordFileName = `${artifact.title}.doc`;
+
+        return (
+          <Dialog key={artifact.id}>
+            <div className="group/item bg-muted/50 hover:bg-muted/70 flex items-center justify-between gap-2 rounded-md">
+              <DialogTrigger asChild>
+                <button className="flex grow cursor-pointer items-center justify-between gap-2 p-2 text-left">
+                  <span className="flex min-w-0 items-center gap-2">
+                    <FileTextIcon className="text-primary h-4 w-4 shrink-0" />
+                    <span className="truncate text-sm">{artifact.title}</span>
+                  </span>
+                  <span className="text-muted-foreground shrink-0 text-xs">
+                    <RelDate date={new Date(artifact.createdAt)} />
+                  </span>
+                </button>
+              </DialogTrigger>
+              {onDeleteArtifact && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="hidden p-1 group-hover/item:block"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    onDeleteArtifact(artifact.id);
+                  }}
+                >
+                  <XIcon className="text-destructive" />
+                </Button>
+              )}
+            </div>
+            <DialogContent className="h-[90vh] max-w-[90vw] sm:max-w-[95vw]">
+              <DialogHeader>
+                <DialogTitle>{artifact.title}</DialogTitle>
+              </DialogHeader>
+              <div className="prose prose-sm dark:prose-invert max-h-[60vh] max-w-full overflow-y-auto">
+                {artifact.type === "markdown" ? (
+                  <Markdown remarkPlugins={[remarkGfm]}>{artifact.content}</Markdown>
+                ) : artifact.type === "chart" ? (
+                  <ChartRenderer config={artifact.content} />
+                ) : artifact.type === "table" ? (
+                  <TableRenderer config={artifact.content} />
+                ) : artifact.type === "dashboard" ? (
+                  <DashboardRenderer config={artifact.content} />
+                ) : null}
+              </div>
+              <DialogFooter className="flex w-full flex-wrap items-center justify-between gap-2">
+                <div className="text-muted-foreground text-xs">
+                  Created <RelDate date={new Date(artifact.createdAt)} />
+                </div>
+                <div className="flex gap-2">
+                  <Button
+                    variant="secondary"
+                    size="sm"
+                    onClick={() =>
+                      downloadBlob(
+                        new Blob([artifact.content], { type: "text/markdown" }),
+                        markdownFileName,
+                      )
+                    }
+                  >
+                    <DownloadIcon className="mr-2 h-4 w-4" />
+                    Download Markdown
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() =>
+                      downloadBlob(
+                        new Blob(
+                          [
+                            `<!DOCTYPE html><html><head><meta charset="utf-8" /></head><body><pre>${escapeHtml(
+                              artifact.content,
+                            )}</pre></body></html>`,
+                          ],
+                          { type: "application/msword" },
+                        ),
+                        wordFileName,
+                      )
+                    }
+                  >
+                    <DownloadIcon className="mr-2 h-4 w-4" />
+                    Download Word
+                  </Button>
+                </div>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        );
+      })}
+    </div>
+  );
+}

package/apps/main/src/routes/_authed/_app/agents/-components/agent-chat.tsx

@@ -0,0 +1,220 @@
+import { MessageComponent } from "@/components/chat/chat";
+import { CitationModal } from "@/components/chat/citation-modal";
+import { CtaUpgrade } from "@/components/cta";
+import { LoadingDotsIcon } from "@/components/svg/loading";
+import { useChat } from "@ai-sdk/react";
+import type { ExtractionInfo } from "@sea/core/data-extraction/types";
+import type { ChatModel } from "@sea/db/schema";
+import type { ConversationHydrated } from "@sea/db/types";
+import { Button } from "@sea/ui/components/ui/button";
+import { ChatTextarea } from "@sea/ui/components/ui/textarea";
+import { nanoid } from "@sea/util/id";
+import { useRouter } from "@tanstack/react-router";
+import { DefaultChatTransport, type UIMessage } from "ai";
+import { ArrowUpIcon, BotIcon, Loader2Icon, SquareIcon } from "lucide-react";
+import { type FormEvent, useEffect, useRef, useState } from "react";
+import { AgentModelSelect } from "./agent-model-select";
+import { AgentUploadButton } from "./agent-upload-button";
+
+const ERROR_MSG = "Error in LLM backend";
+
+export function AgentChatMessages({
+  conversation,
+  conversationId,
+  chatIsLoading,
+  canExtract,
+  chatModel,
+  extractionInfo,
+}: {
+  conversation: ConversationHydrated;
+  conversationId: string;
+  chatIsLoading: boolean;
+  canExtract: boolean;
+  chatModel: ChatModel;
+  extractionInfo: ExtractionInfo[];
+}) {
+  const router = useRouter();
+  const [input, setInput] = useState("");
+  const [citationModalOpen, setCitationModalOpen] = useState(false);
+  const [selectedCitationId, setSelectedCitationId] = useState<string | null>(null);
+
+  const handleCitationClick = (citationId: string) => {
+    setSelectedCitationId(citationId);
+    setCitationModalOpen(true);
+  };
+
+  const { messages, error, setMessages, sendMessage, status, stop } = useChat({
+    transport: new DefaultChatTransport({
+      api: "/api/chat/agent",
+      prepareSendMessagesRequest({ messages }) {
+        return {
+          body: { message: messages.at(-1), conversationId, chatType: "agent" },
+        };
+      },
+    }),
+    id: conversationId,
+    messages: conversation.messages as UIMessage[],
+    generateId: nanoid,
+    // Throttle updates to prevent "Maximum update depth exceeded" errors during long streams
+    experimental_throttle: 500,
+    onFinish: () => {
+      // Only invalidate after all tools are done and the conversation is complete
+      setTimeout(() => router.invalidate(), 100);
+    },
+  });
+  const isLoading = status === "submitted" || status === "streaming";
+
+  // Sync messages when conversation updates from polling
+  useEffect(() => {
+    const loaderMessages = conversation.messages as UIMessage[];
+    // Only update if we have new messages
+    if (loaderMessages.length > messages.length) {
+      setMessages(loaderMessages);
+    }
+  }, [conversation.messages, messages.length, setMessages]);
+
+  useEffect(() => {
+    if (error) {
+      console.error("[AgentChatMessages] Error:", error);
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: nanoid(),
+          role: "assistant",
+          parts: [{ type: "text", text: ERROR_MSG }],
+        },
+      ]);
+    }
+  }, [error]);
+
+  const instructions = `I'm your credit assistant, I can help you navigate the app, find data and analyse it to help you stay on top of your portfolio
+
+• Create and manage workflows
+• Set up deals and submissions
+• Analyze and extract data from documents
+• Generate summaries and reports
+
+How can I help you today?`;
+
+  const messagesRef = useRef<HTMLDivElement>(null);
+  const shouldAutoScrollRef = useRef(true);
+
+  useEffect(() => {
+    const container = messagesRef.current;
+    if (!container) return;
+
+    const handleScroll = () => {
+      const threshold = 80;
+      const atBottom =
+        container.scrollHeight - container.scrollTop - container.clientHeight <= threshold;
+      shouldAutoScrollRef.current = atBottom;
+    };
+
+    handleScroll();
+    container.addEventListener("scroll", handleScroll);
+
+    return () => {
+      container.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  useEffect(() => {
+    const container = messagesRef.current;
+    if (!container || !shouldAutoScrollRef.current) return;
+    container.scrollTo({
+      top: container.scrollHeight,
+      behavior: "smooth",
+    });
+  }, [messages, isLoading]);
+
+  const onSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    sendMessage({ text: input });
+    setInput("");
+  };
+
+  return (
+    <div className="flex h-full flex-col">
+      <div ref={messagesRef} className="flex-1 overflow-y-auto">
+        <div className="mx-auto w-full max-w-3xl space-y-4 p-4">
+          {messages.length === 0 && (
+            <div className="text-muted-foreground my-8 text-center">
+              <div className="bg-card mx-auto max-w-md rounded-lg p-6">
+                <BotIcon className="text-primary mx-auto mb-4 h-8 w-8" />
+                <p className="whitespace-pre-line">{instructions}</p>
+              </div>
+            </div>
+          )}
+          <div className="space-y-4">
+            {messages.map((message) => (
+              <MessageComponent
+                key={message.id}
+                message={message}
+                variant="agent"
+                onCitationClick={handleCitationClick}
+              />
+            ))}
+            {isLoading && (
+              <div className="text-brand-foreground mx-auto my-4">
+                <LoadingDotsIcon />
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <CitationModal
+        open={citationModalOpen}
+        onOpenChange={setCitationModalOpen}
+        citationId={selectedCitationId}
+        extractionInfo={extractionInfo}
+      />
+
+      <div className="border-border/40 flex-shrink-0 border-t bg-transparent">
+        <div className="mx-auto w-full max-w-3xl space-y-2 p-4">
+          <form onSubmit={onSubmit} className="relative flex w-full flex-col gap-2">
+            <ChatTextarea
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              autoFocus={true}
+              isLoading={isLoading}
+              disabled={chatIsLoading}
+              placeholder="Ask me anything about your workflows, deals, or submissions..."
+              className="bg-background text-foreground z-10 min-h-[112px] w-full max-w-full resize-none rounded-md border px-3 py-2 pr-16 ring-transparent! outline-hidden! dark:ring-0!"
+            />
+            <div className="absolute bottom-0 left-0 z-11 flex w-full items-end justify-between p-2">
+              <AgentUploadButton conversationId={conversationId} setMessages={setMessages} />
+              <div className="flex items-center gap-2">
+                <AgentModelSelect conversationId={conversationId} chatModel={chatModel} />
+                {isLoading ? (
+                  <Button type="button" size="icon" className="size-8" onClick={() => stop()}>
+                    <SquareIcon className="size-4" fill="currentColor" />
+                  </Button>
+                ) : (
+                  <Button
+                    type="submit"
+                    size="icon"
+                    extra="action"
+                    className="size-8 [&_svg]:size-5"
+                    disabled={!input.trim()}
+                    aria-label="Send message"
+                    title="Send"
+                  >
+                    <ArrowUpIcon />
+                  </Button>
+                )}
+              </div>
+            </div>
+          </form>
+          {!canExtract ? <CtaUpgrade /> : null}
+        </div>
+      </div>
+
+      {chatIsLoading && (
+        <div className="bg-muted/60 fixed inset-0 flex items-center justify-center">
+          <Loader2Icon className="h-6 w-6 animate-spin" />
+        </div>
+      )}
+    </div>
+  );
+}