AI Chat

BackAI ChatAI

100%

import { AgentAvatar } from "@/components/ai/agent-avatar";
import {
  ArtifactCard,
  ArtifactCardActions,
  ArtifactCardBody,
  ArtifactCardIcon,
  ArtifactCardMeta,
  ArtifactCardThumbnail,
  ArtifactCardTitle,
} from "@/components/ai/artifact-card";
import {
  ArtifactStack,
  ArtifactStackDownloadAll,
} from "@/components/ai/artifact-stack";
import {
  ArtifactViewer,
  ArtifactViewerClose,
  ArtifactViewerContent,
  ArtifactViewerDownload,
  ArtifactViewerExpand,
  ArtifactViewerHeader,
  ArtifactViewerOpenIn,
  ArtifactViewerPaper,
  ArtifactViewerTitle,
} from "@/components/ai/artifact-viewer";
import { ChatComposer } from "@/components/ai/chat-composer";
import {
  ChatHeader,
  ChatHeaderActions,
  ChatHeaderMenu,
  ChatHeaderProject,
  ChatHeaderShare,
  ChatHeaderTitle,
} from "@/components/ai/chat-header";
import { CodeBlock } from "@/components/ai/code-block";
import {
  Conversation,
  ConversationContent,
  ConversationEmptyState,
  ConversationItem,
  ConversationScrollButton,
} from "@/components/ai/conversation";
import {
  Message,
  MessageContent,
  MessageResponse,
} from "@/components/ai/message";
import {
  PromptInput,
  PromptInputBody,
  PromptInputFooter,
  PromptInputHeader,
  PromptInputSubmit,
  PromptInputTextarea,
  PromptInputTools,
} from "@/components/ai/prompt-input";
import { PromptInputAgent } from "@/components/ai/prompt-input-agent";
import {
  Queue,
  QueueItem,
  QueueItemAvatar,
  QueueItemContent,
  QueueItemStatus,
  QueueList,
  QueueSection,
  QueueSectionContent,
  QueueSectionLabel,
  QueueSectionTrigger,
} from "@/components/ai/queue";
import { Suggestion, Suggestions } from "@/components/ai/suggestion";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { ElevationProvider } from "@/components/ui/elevation";
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemTitle,
} from "@/components/ui/item";
import { Spinner } from "@/components/ui/spinner";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useState } from "react";
import { IconPlaceholder } from "@/edmi/icon-placeholder";
import {
  type ArtifactType,
  agent,
  appName,
  banner,
  composer,
  docs,
  greeting,
  groups,
  menu,
  nav,
  project,
  recents,
  suggestions,
  tabs,
  tasks,
  thread,
  tiles,
  title,
  type View,
} from "./data";

const tone: Record<ArtifactType, string> = {
  docs: "bg-[color-mix(in_srgb,var(--chart-2)_14%,var(--card))] text-chart-2",
  slides: "bg-[color-mix(in_srgb,var(--chart-3)_14%,var(--card))] text-chart-3",
  design: "bg-[color-mix(in_srgb,var(--chart-4)_14%,var(--card))] text-chart-4",
};

function TypeIcon({
  type,
  className,
}: {
  type: ArtifactType;
  className?: string;
}) {
  if (type === "docs")
    return (
      <IconPlaceholder
        lucide="FileTextIcon"
        tabler="IconFileDescription"
        hugeicons="File01Icon"
        phosphor="FileTextIcon"
        remixicon="RiFileTextLine"
        className={className}
      />
    );
  if (type === "slides")
    return (
      <IconPlaceholder
        lucide="AppWindowIcon"
        tabler="IconAppWindow"
        hugeicons="BrowserIcon"
        phosphor="AppWindowIcon"
        remixicon="RiWindowLine"
        className={className}
      />
    );
  return (
    <IconPlaceholder
      lucide="PaletteIcon"
      tabler="IconPalette"
      hugeicons="PaintBoardIcon"
      phosphor="PaletteIcon"
      remixicon="RiPaletteLine"
      className={className}
    />
  );
}

export default function AiChatExample() {
  const [view, setView] = useState<View>("thread");
  const [openId, setOpenId] = useState<string | null>(null);
  const [expanded, setExpanded] = useState(false);
  const [navOpen, setNavOpen] = useState(false);
  const [tab, setTab] = useState("all");
  const [bannerOpen, setBannerOpen] = useState(true);
  const doc = docs.find((d) => d.id === openId);
  const visible = groups
    .map((g) => ({
      ...g,
      items: g.items.filter(
        (i) => tab === "all" || (tab === "shared" ? i.shared : !i.shared),
      ),
    }))
    .filter((g) => g.items.length > 0);

  function go(next: View) {
    setView(next);
    setOpenId(null);
    setExpanded(false);
    setNavOpen(false);
  }
  function close() {
    setExpanded(false);
    setOpenId(null);
  }

  return (
    <ElevationProvider mode="layered">
      <div className="flex h-svh bg-background text-foreground">
        {navOpen && (
          <button
            type="button"
            aria-label="Close menu"
            className="fixed inset-0 z-30 bg-overlay md:hidden"
            onClick={() => setNavOpen(false)}
          />
        )}
        <aside
          className={`flex w-60 shrink-0 flex-col gap-1 border-r border-sidebar-border bg-sidebar p-3 text-sidebar-foreground max-md:fixed max-md:inset-y-0 max-md:left-0 max-md:z-40 ${navOpen ? "" : "max-md:-translate-x-full"}`}
        >
          <div className="flex items-center gap-2 px-2 pt-1 pb-3 font-serif text-lg">
            {appName}
          </div>
          <Button
            className="w-full justify-start"
            type="button"
            variant="outline"
            onClick={() => go("home")}
          >
            <IconPlaceholder
              lucide="PlusIcon"
              tabler="IconPlus"
              hugeicons="Add01Icon"
              phosphor="PlusIcon"
              remixicon="RiAddLine"
              className="size-4"
            />
            New chat
          </Button>
          <div className="mt-2 flex flex-col gap-0.5">
            {nav.map((n) => (
              <Button
                key={n.view}
                className={`w-full justify-start ${view === n.view ? "bg-sidebar-accent" : ""}`}
                type="button"
                variant="ghost"
                onClick={() => go(n.view)}
              >
                {n.view === "thread" ? (
                  <IconPlaceholder
                    lucide="MessageSquareIcon"
                    tabler="IconMessage"
                    hugeicons="Message01Icon"
                    phosphor="ChatCircleIcon"
                    remixicon="RiChat1Line"
                    className="size-4"
                  />
                ) : (
                  <IconPlaceholder
                    lucide="BookOpenIcon"
                    tabler="IconBook"
                    hugeicons="BookOpen01Icon"
                    phosphor="BookOpenIcon"
                    remixicon="RiBookOpenLine"
                    className="size-4"
                  />
                )}
                {n.label}
              </Button>
            ))}
          </div>
          <div className="mt-4 px-2 text-xs text-muted-foreground">Recents</div>
          <div className="flex min-h-0 flex-col gap-0.5 overflow-y-auto">
            {recents.map((r) => (
              <Button
                key={r}
                className="w-full justify-start font-normal"
                type="button"
                variant="ghost"
                onClick={() => go("thread")}
              >
                <span className="truncate">{r}</span>
              </Button>
            ))}
          </div>
        </aside>

        <div className="flex min-w-0 flex-1">
          <div className="flex min-w-0 flex-1 flex-col">
            <div className="flex items-center p-2 pb-0 md:hidden">
              <Button
                aria-label="Open menu"
                size="icon-sm"
                type="button"
                variant="ghost"
                onClick={() => setNavOpen(true)}
              >
                <IconPlaceholder
                  lucide="PanelLeftIcon"
                  tabler="IconLayoutSidebar"
                  hugeicons="SidebarLeftIcon"
                  phosphor="SidebarIcon"
                  remixicon="RiLayoutLeftLine"
                  className="size-4"
                />
              </Button>
            </div>

            {view === "home" && (
              <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
                <div className="mx-auto flex min-h-full w-full max-w-2xl flex-col gap-4 p-4">
                  <ConversationEmptyState
                    variant="home"
                    title={greeting}
                    description=""
                    className="flex-1 gap-8 p-2"
                  >
                    <Badge variant="secondary" className="-mt-5 gap-1.5">
                      <IconPlaceholder
                        lucide="MapIcon"
                        tabler="IconMap"
                        hugeicons="Location01Icon"
                        phosphor="MapTrifoldIcon"
                        remixicon="RiMapLine"
                        className="size-3"
                      />
                      {project}
                    </Badge>
                    <Queue variant="flat" className="w-full text-left">
                      <QueueSection>
                        <QueueSectionTrigger className="font-normal text-muted-foreground">
                          <QueueSectionLabel label="Tasks" chevron={false} />
                        </QueueSectionTrigger>
                        <QueueSectionContent>
                          <QueueList>
                            {tasks.map((task) => (
                              <QueueItem key={task.id}>
                                <div className="flex items-center gap-2">
                                  <QueueItemAvatar>
                                    <AgentAvatar
                                      seed={task.agent.id}
                                      color={task.agent.color}
                                      size={22}
                                      tile={false}
                                    />
                                  </QueueItemAvatar>
                                  <QueueItemContent>
                                    {task.title}
                                  </QueueItemContent>
                                  <QueueItemStatus>
                                    <span className="font-mono">
                                      {task.age}
                                    </span>
                                    {task.status === "running" ? (
                                      <Spinner className="size-3.5" />
                                    ) : (
                                      <span className="size-1.5 rounded-full bg-success" />
                                    )}
                                  </QueueItemStatus>
                                </div>
                              </QueueItem>
                            ))}
                          </QueueList>
                        </QueueSectionContent>
                      </QueueSection>
                    </Queue>
                    <div className="flex w-full items-center gap-2">
                      <span className="shrink-0 text-xs text-muted-foreground">
                        Suggested
                      </span>
                      <Suggestions>
                        {suggestions.map((s) => (
                          <Suggestion
                            key={s}
                            suggestion={s}
                            onClick={() => go("thread")}
                          />
                        ))}
                      </Suggestions>
                    </div>
                  </ConversationEmptyState>

                  <PromptInput onSubmit={() => go("thread")}>
                    <PromptInputHeader>
                      <PromptInputAgent agent={agent} />
                    </PromptInputHeader>
                    <PromptInputBody>
                      <PromptInputTextarea
                        placeholder={`Ask ${agent.name} anything about your index…`}
                        className="min-h-20"
                      />
                    </PromptInputBody>
                    <PromptInputFooter>
                      <PromptInputTools>
                        <Button
                          aria-label="Attach"
                          size="icon-sm"
                          type="button"
                          variant="ghost"
                        >
                          <IconPlaceholder
                            lucide="PlusIcon"
                            tabler="IconPlus"
                            hugeicons="Add01Icon"
                            phosphor="PlusIcon"
                            remixicon="RiAddLine"
                            className="size-4"
                          />
                        </Button>
                      </PromptInputTools>
                      <PromptInputSubmit
                        size="icon-sm"
                        className="size-10"
                        variant="secondary"
                      />
                    </PromptInputFooter>
                  </PromptInput>
                </div>
              </div>
            )}

            {view === "thread" && (
              <div className="flex min-h-0 flex-1 flex-col gap-2 p-3">
                <ChatHeader>
                  <ChatHeaderTitle>
                    <span className="truncate">{title}</span>
                    <ChatHeaderProject status="connected" />
                    <ChatHeaderMenu>
                      <DropdownMenuItem>Rename</DropdownMenuItem>
                      <DropdownMenuItem>Move to project</DropdownMenuItem>
                      <DropdownMenuItem variant="destructive">
                        Delete
                      </DropdownMenuItem>
                    </ChatHeaderMenu>
                  </ChatHeaderTitle>
                  <ChatHeaderActions>
                    <Button
                      aria-label="Web access"
                      size="icon-sm"
                      type="button"
                      variant="ghost"
                    >
                      <IconPlaceholder
                        lucide="GlobeIcon"
                        tabler="IconWorld"
                        hugeicons="Globe02Icon"
                        phosphor="GlobeIcon"
                        remixicon="RiGlobalLine"
                        className="size-4"
                      />
                    </Button>
                    <Button size="sm" type="button" variant="ghost">
                      <IconPlaceholder
                        lucide="FileTextIcon"
                        tabler="IconFileDescription"
                        hugeicons="File01Icon"
                        phosphor="FileTextIcon"
                        remixicon="RiFileTextLine"
                        className="size-3.5"
                      />
                      {docs.length}
                    </Button>
                    <ChatHeaderShare />
                  </ChatHeaderActions>
                </ChatHeader>

                <Conversation className="min-h-0">
                  <ConversationContent className="mx-auto w-full max-w-3xl gap-6 px-4 py-6">
                    {thread.map((turn) => (
                      <ConversationItem key={turn.id} messageId={turn.id}>
                        <Message from={turn.role}>
                          <MessageContent className="gap-4">
                            {turn.blocks.map((block, i) => {
                              switch (block.type) {
                                case "markdown":
                                  return turn.role === "user" ? (
                                    block.text
                                  ) : (
                                    // biome-ignore lint/suspicious/noArrayIndexKey: static sample data
                                    <MessageResponse key={i}>
                                      {block.text}
                                    </MessageResponse>
                                  );
                                case "code":
                                  return (
                                    <CodeBlock
                                      // biome-ignore lint/suspicious/noArrayIndexKey: static sample data
                                      key={i}
                                      code={block.code}
                                      language={block.language}
                                    />
                                  );
                                case "archive":
                                  return (
                                    // biome-ignore lint/suspicious/noArrayIndexKey: static sample data
                                    <ArtifactCard key={i}>
                                      <ArtifactCardIcon kind="archive" />
                                      <ArtifactCardBody>
                                        <ArtifactCardTitle>
                                          {block.title}
                                        </ArtifactCardTitle>
                                        <ArtifactCardMeta>
                                          {block.meta}
                                        </ArtifactCardMeta>
                                      </ArtifactCardBody>
                                      <ArtifactCardActions>
                                        <DropdownMenuItem>
                                          Copy link
                                        </DropdownMenuItem>
                                        <DropdownMenuItem>
                                          Open
                                        </DropdownMenuItem>
                                      </ArtifactCardActions>
                                    </ArtifactCard>
                                  );
                                default:
                                  return (
                                    // biome-ignore lint/suspicious/noArrayIndexKey: static sample data
                                    <ArtifactStack key={i}>
                                      {block.ids.map((id) => {
                                        const d = docs.find((x) => x.id === id);
                                        if (!d) return null;
                                        return (
                                          <ArtifactCard
                                            key={d.id}
                                            className="cursor-pointer"
                                            onClick={() => setOpenId(d.id)}
                                          >
                                            {d.thumbnail ? (
                                              <ArtifactCardThumbnail />
                                            ) : (
                                              <ArtifactCardIcon kind={d.kind} />
                                            )}
                                            <ArtifactCardBody>
                                              <ArtifactCardTitle>
                                                {d.title}
                                              </ArtifactCardTitle>
                                              <ArtifactCardMeta>
                                                {d.meta}
                                              </ArtifactCardMeta>
                                            </ArtifactCardBody>
                                            <ArtifactCardActions>
                                              <DropdownMenuItem>
                                                Copy link
                                              </DropdownMenuItem>
                                              <DropdownMenuItem
                                                onClick={() => setOpenId(d.id)}
                                              >
                                                Open
                                              </DropdownMenuItem>
                                            </ArtifactCardActions>
                                          </ArtifactCard>
                                        );
                                      })}
                                      <ArtifactStackDownloadAll />
                                    </ArtifactStack>
                                  );
                              }
                            })}
                          </MessageContent>
                        </Message>
                      </ConversationItem>
                    ))}
                  </ConversationContent>
                  <ConversationScrollButton />
                </Conversation>

                <ChatComposer
                  className="mx-auto max-w-3xl"
                  onSubmit={() => {}}
                  onAttach={() => {}}
                  onSpeech={() => {}}
                  disclaimer={composer.disclaimer}
                  models={composer.models}
                  efforts={composer.efforts}
                  defaultEffort="medium"
                  modes={composer.modes}
                />
              </div>
            )}

            {view === "library" && (
              <div className="min-h-0 flex-1 overflow-y-auto">
                <div className="mx-auto w-full max-w-[920px] px-5 py-[30px] sm:px-[34px]">
                  <h1 className="font-serif text-[30px] leading-tight font-normal tracking-[-0.3px]">
                    Library
                  </h1>

                  <div className="mt-[18px] flex flex-wrap items-center justify-between gap-2">
                    <Tabs value={tab} onValueChange={(v) => setTab(String(v))}>
                      <TabsList variant="pills">
                        {tabs.map((t) => (
                          <TabsTrigger key={t.value} value={t.value}>
                            {t.label}
                          </TabsTrigger>
                        ))}
                      </TabsList>
                    </Tabs>
                    <div className="flex items-center gap-1">
                      <Button
                        aria-label="Search"
                        size="icon-sm"
                        type="button"
                        variant="ghost"
                      >
                        <IconPlaceholder
                          lucide="SearchIcon"
                          tabler="IconSearch"
                          hugeicons="SearchIcon"
                          phosphor="MagnifyingGlassIcon"
                          remixicon="RiSearchLine"
                          className="size-4"
                        />
                      </Button>
                      <Button
                        aria-label="Grid view"
                        size="icon-sm"
                        type="button"
                        variant="ghost"
                      >
                        <IconPlaceholder
                          lucide="LayoutGridIcon"
                          tabler="IconLayoutGrid"
                          hugeicons="GridViewIcon"
                          phosphor="GridFourIcon"
                          remixicon="RiLayoutGridLine"
                          className="size-4"
                        />
                      </Button>
                      <Button size="sm" type="button" variant="secondary">
                        Edmi Design
                        <IconPlaceholder
                          lucide="ChevronDownIcon"
                          tabler="IconChevronDown"
                          hugeicons="ArrowDown01Icon"
                          phosphor="CaretDownIcon"
                          remixicon="RiArrowDownSLine"
                        />
                      </Button>
                    </div>
                  </div>

                  {bannerOpen && (
                    <Card className="mt-[18px] flex-row items-start justify-between gap-3 px-4 py-3.5">
                      <div>
                        <div className="text-sm font-semibold">
                          {banner.title}
                        </div>
                        <div className="mt-0.5 text-[13.5px] text-muted-foreground">
                          {banner.text}
                        </div>
                        <Button
                          className="mt-2.5"
                          size="sm"
                          type="button"
                          variant="secondary"
                        >
                          {banner.action}
                          <IconPlaceholder
                            lucide="ArrowUpRightIcon"
                            tabler="IconArrowUpRight"
                            hugeicons="ArrowUpRight01Icon"
                            phosphor="ArrowUpRightIcon"
                            remixicon="RiArrowRightUpLine"
                          />
                        </Button>
                      </div>
                      <Button
                        aria-label="Dismiss"
                        size="icon-sm"
                        type="button"
                        variant="ghost"
                        onClick={() => setBannerOpen(false)}
                      >
                        <IconPlaceholder
                          lucide="XIcon"
                          tabler="IconX"
                          hugeicons="Cancel01Icon"
                          phosphor="XIcon"
                          remixicon="RiCloseLine"
                          className="size-4"
                        />
                      </Button>
                    </Card>
                  )}

                  <div className="mt-[22px] mb-2.5 text-[13px] text-muted-foreground">
                    Make something new
                  </div>
                  <div className="grid grid-cols-3 gap-3.5 sm:max-w-[538px]">
                    {tiles.map((t) => (
                      <div key={t.type} className="flex flex-col gap-2">
                        <div
                          className={`flex h-[118px] w-full items-center justify-center rounded-[calc(var(--radius)*1.4)] border border-border ${tone[t.type]}`}
                        >
                          <TypeIcon type={t.type} className="size-6" />
                        </div>
                        <div className="flex items-center gap-1.5 text-sm">
                          {t.label}
                          <Badge
                            variant="secondary"
                            className="h-[18px] text-[10.5px]"
                          >
                            Beta
                          </Badge>
                        </div>
                      </div>
                    ))}
                  </div>

                  {visible.map((g) => (
                    <section key={g.label}>
                      <div className="mt-[22px] mb-0.5 text-[13px] text-muted-foreground">
                        {g.label}
                      </div>
                      <ItemGroup>
                        {g.items.map((i) => (
                          <Item
                            key={i.id}
                            className="cursor-pointer px-0 py-3"
                            onClick={() => setOpenId(i.docId)}
                          >
                            <span
                              className={`inline-flex size-10 shrink-0 items-center justify-center rounded-[10px] ${tone[i.type]}`}
                            >
                              <TypeIcon type={i.type} className="size-[18px]" />
                            </span>
                            <ItemContent>
                              <ItemTitle className="text-[15px] font-normal">
                                {i.title}
                              </ItemTitle>
                              {i.note && (
                                <ItemDescription>{i.note}</ItemDescription>
                              )}
                            </ItemContent>
                            <ItemActions>
                              <span className="flex items-center gap-1.5 text-[13px] text-muted-foreground">
                                <IconPlaceholder
                                  lucide="LockIcon"
                                  tabler="IconLock"
                                  hugeicons="SquareLock02Icon"
                                  phosphor="LockKeyIcon"
                                  remixicon="RiLockLine"
                                  className="size-3.5"
                                />
                                <span className="max-sm:hidden">
                                  {i.viewed}
                                </span>
                              </span>
                              <DropdownMenu>
                                <DropdownMenuTrigger
                                  render={
                                    <Button
                                      aria-label="More"
                                      size="icon-sm"
                                      type="button"
                                      variant="ghost"
                                      onClick={(e) => e.stopPropagation()}
                                    />
                                  }
                                >
                                  <IconPlaceholder
                                    lucide="MoreHorizontalIcon"
                                    tabler="IconDots"
                                    hugeicons="MoreHorizontalCircle01Icon"
                                    phosphor="DotsThreeOutlineIcon"
                                    remixicon="RiMoreLine"
                                    className="size-4 rotate-90"
                                  />
                                </DropdownMenuTrigger>
                                <DropdownMenuContent align="end">
                                  {menu.map((m) => (
                                    <DropdownMenuItem
                                      key={m}
                                      variant={
                                        m === "Delete"
                                          ? "destructive"
                                          : "default"
                                      }
                                    >
                                      {m}
                                    </DropdownMenuItem>
                                  ))}
                                </DropdownMenuContent>
                              </DropdownMenu>
                            </ItemActions>
                          </Item>
                        ))}
                      </ItemGroup>
                    </section>
                  ))}
                </div>
              </div>
            )}
          </div>

          {doc && (
            <div
              className={
                expanded
                  ? "fixed inset-0 z-50 flex"
                  : "flex border-l border-border max-md:fixed max-md:inset-0 max-md:z-50 md:w-1/2 md:shrink-0"
              }
            >
              <ArtifactViewer className="h-full w-full rounded-none border-0">
                <ArtifactViewerHeader>
                  <ArtifactViewerTitle format={doc.format}>
                    {doc.title}
                  </ArtifactViewerTitle>
                  <ArtifactViewerOpenIn />
                  <ArtifactViewerDownload />
                  <ArtifactViewerExpand
                    onClick={() => setExpanded((e) => !e)}
                  />
                  <ArtifactViewerClose onClick={close} />
                </ArtifactViewerHeader>
                <ArtifactViewerContent>
                  <ArtifactViewerPaper className="px-8 py-[30px]">
                    <div className="font-mono text-[10.5px] tracking-[2px] text-[#7a7974]">
                      {doc.paper.kicker}
                    </div>
                    <div className="mt-2.5 font-serif text-2xl leading-[1.15] font-bold">
                      {doc.paper.headline}
                    </div>
                    <p className="mt-3 text-[12.5px] leading-[1.7] text-[#3d3c38]">
                      {doc.paper.lead.map((s) =>
                        s.b ? (
                          <b key={s.t}>{s.t}</b>
                        ) : s.link ? (
                          <span key={s.t} className="text-[#3b6fd6]">
                            {s.t}
                          </span>
                        ) : (
                          s.t
                        ),
                      )}
                    </p>
                    <div className="mt-4 mb-2.5 h-0.5 bg-[#22406b]" />
                    <div className="font-serif text-base font-bold text-[#22406b]">
                      {doc.paper.heading}
                    </div>
                    <p className="mt-3 text-[12.5px] leading-[1.7] text-[#3d3c38]">
                      {doc.paper.body.map((s) =>
                        s.b ? <b key={s.t}>{s.t}</b> : s.t,
                      )}
                    </p>
                  </ArtifactViewerPaper>
                </ArtifactViewerContent>
              </ArtifactViewer>
            </div>
          )}
        </div>
      </div>
    </ElevationProvider>
  );
}

// Sample data for the AI chat example (Keeper = the sample agent). Shared by react.tsx, vue.vue and
// svelte.svelte: one app with a home, a thread, an artifact viewer and a library.

export type Segment = { t: string; b?: boolean; link?: boolean };

export interface PaperDoc {
  kicker: string;
  headline: string;
  lead: Segment[];
  heading: string;
  body: Segment[];
}

export interface ArtifactDoc {
  id: string;
  title: string;
  /** Card meta line, e.g. "Document · PDF". */
  meta: string;
  /** Shown after the viewer title, in mono. */
  format: string;
  kind: "document";
  /** Card shows the cropped page thumbnail instead of the icon tile. */
  thumbnail: boolean;
  paper: PaperDoc;
}

export type Block =
  | { type: "markdown"; text: string }
  | { type: "code"; code: string; language: "bash" | "typescript" }
  | { type: "archive"; title: string; meta: string }
  | { type: "docs"; ids: string[] };

export interface Turn {
  id: string;
  role: "assistant" | "user";
  blocks: Block[];
}

export const appName = "Edmi";
export const nav = [
  { view: "thread", label: "Chats" },
  { view: "library", label: "Library" },
] as const;
export type View = "home" | "thread" | "library";

export const recents = [
  "Keeper starter plan",
  "Eight index ideas",
  "Rebalance MAG4",
  "Launch post draft",
];

export const user = { name: "Dwi", initials: "D" };
export const greeting = "Good evening, Dwi";
export const project = "Roadmap";
export const title = "Keeper starter plan";
export const suggestions = [
  "Write a launch post",
  "Compare fees",
  "Add a token",
];
export const agent = {
  id: "keeper",
  name: "Keeper",
  scope: "trading",
  color: "chart-3",
};

export const notes = `**Before you use this document:**

- **The ranking is a judgment, not a score.** Data backs each idea but not the order.
- **Research is partial.** Some competitors were not checked; all are flagged.

Sources I re-checked:

- [RevenueCat subscription report](https://example.com/revenuecat)
- [Stripe founder data](https://example.com/stripe)
- [Jupiter API terms](https://example.com/jupiter)`;

export const processNote =
  "Updating the task list and marking finished items complete.";

export const thread: Turn[] = [
  {
    id: "t1",
    role: "assistant",
    blocks: [
      {
        type: "markdown",
        text: `**Check before you start:** the quote path for \`@jup-ag/api\` is not confirmed yet (probably \`@jup-ag/api/quote\`). Flagged in \`docs/open-questions.md\`.

**Two open questions** in \`docs/open-questions.md\`:

- Managed RPC in production (default) or your own node?
- Start with one keeper instance? Default is 1.`,
      },
      { type: "archive", title: "Keeper starter", meta: "ZIP" },
    ],
  },
  {
    id: "t2",
    role: "user",
    blocks: [
      {
        type: "markdown",
        text: "What prompt starts the agent after the repo is cloned?",
      },
    ],
  },
  {
    id: "t3",
    role: "assistant",
    blocks: [
      {
        type: "markdown",
        text: "The kit ships a `/next-phase` command. After cloning and unzipping into the repo root, type this in your coding agent:",
      },
      { type: "code", language: "bash", code: "/next-phase 00" },
      { type: "markdown", text: "Or the short plain prompt:" },
      {
        type: "code",
        language: "bash",
        code: 'Read AGENTS.md, then docs/README.md in order. Do phase 00 in docs/plans/00-scaffold.md until the "Done when" checklist passes.',
      },
    ],
  },
  {
    id: "t4",
    role: "user",
    blocks: [
      {
        type: "markdown",
        text: "Good. Which index ideas can a team of 1–3 ship first?",
      },
    ],
  },
  {
    id: "t5",
    role: "assistant",
    blocks: [
      { type: "markdown", text: notes },
      { type: "docs", ids: ["pdf", "md"] },
    ],
  },
  {
    id: "t6",
    role: "user",
    blocks: [
      {
        type: "markdown",
        text: "Add a slide version, point by point?",
      },
    ],
  },
  {
    id: "t7",
    role: "assistant",
    blocks: [{ type: "markdown", text: processNote }],
  },
];

export const docs: ArtifactDoc[] = [
  {
    id: "pdf",
    title: "Eight index ideas",
    meta: "Document · PDF",
    format: "PDF",
    kind: "document",
    thumbnail: true,
    paper: {
      kicker: "RESEARCH · 8 INDEX IDEAS · OCT 2026",
      headline: "Distribution, not AI, picks the winner",
      lead: [
        {
          t: "Some indexes can win now, but the product shape and channel decide it. Three shapes work for teams of 1–3 (",
        },
        { t: "Stripe", link: true },
        { t: "; " },
        { t: "RevenueCat", link: true },
        { t: "). " },
        { t: "None of the eight ideas passes without conditions.", b: true },
        {
          t: " The three best supported: idea 8 as a B2B ops layer, idea 3 as a local terminal for developers, idea 4 as a learning path.",
        },
      ],
      heading: "What wins now: narrow vertical, recurring billing, own channel",
      body: [
        {
          t: "The first winning shape is vertical B2B. Solo founders in the top decile are about ",
        },
        { t: "twice as likely to build AI-native products", b: true },
        { t: " and sell to 10 countries in month one." },
      ],
    },
  },
  {
    id: "md",
    title: "Eight index ideas",
    meta: "Document · MD",
    format: "MD",
    kind: "document",
    thumbnail: false,
    paper: {
      kicker: "NOTES · 8 INDEX IDEAS · OCT 2026",
      headline: "Eight index ideas, point by point",
      lead: [
        {
          t: "Each idea is scored on channel, margin and time to first holder. ",
        },
        { t: "Ideas 3, 4 and 8 clear the bar", b: true },
        { t: "; the other five need a channel first." },
      ],
      heading: "Open conditions per idea",
      body: [
        { t: "Idea 8 needs one design partner. Idea 3 needs a " },
        { t: "signed terminal build", b: true },
        { t: ". Idea 4 needs a curriculum owner." },
      ],
    },
  },
  {
    id: "mag4",
    title: "MAG4 — Editorial minimal",
    meta: "Design · Draft",
    format: "DESIGN",
    kind: "document",
    thumbnail: false,
    paper: {
      kicker: "DESIGN · MAG4 · OCT 2026",
      headline: "MAG4, editorial and minimal",
      lead: [
        { t: "A flat, typographic index page: one " },
        { t: "serif headline", b: true },
        { t: ", a mono number column and a single accent." },
      ],
      heading: "Layout notes",
      body: [
        { t: "Cards stay flat; only the " },
        { t: "primary action", b: true },
        { t: " rises." },
      ],
    },
  },
  {
    id: "stockbreak",
    title: "Stockbreak",
    meta: "Design · Shared",
    format: "DESIGN",
    kind: "document",
    thumbnail: false,
    paper: {
      kicker: "DESIGN · STOCKBREAK · SEP 2026",
      headline: "Stockbreak markets, shared with you",
      lead: [
        { t: "The markets, explore and portfolio pages in one " },
        { t: "layered", b: true },
        { t: " app shell." },
      ],
      heading: "Review status",
      body: [
        { t: "Two comments open on the " },
        { t: "leaderboard podium", b: true },
        { t: "." },
      ],
    },
  },
];

export type ArtifactType = "docs" | "slides" | "design";

export const tabs = [
  { value: "all", label: "All" },
  { value: "yours", label: "Yours" },
  { value: "shared", label: "Shared with you" },
];

export const banner = {
  title: "Designs live here now",
  text: "New slides and designs are saved as artifacts.",
  action: "Open the design home",
};

export const tiles: { type: ArtifactType; label: string }[] = [
  { type: "docs", label: "Docs" },
  { type: "slides", label: "Slides" },
  { type: "design", label: "Design" },
];

export interface LibraryItem {
  id: string;
  type: ArtifactType;
  title: string;
  note?: string;
  /** Appears under "Shared with you" (and not under "Yours"). */
  shared?: boolean;
  viewed: string;
  /** Viewer document opened by this row. */
  docId: string;
}

export const groups: { label: string; items: LibraryItem[] }[] = [
  {
    label: "Today",
    items: [
      {
        id: "a1",
        type: "design",
        title: "MAG4 — Editorial minimal",
        viewed: "Viewed 20m ago",
        docId: "mag4",
      },
      {
        id: "a2",
        type: "slides",
        title: "8 index ideas",
        viewed: "Viewed 1h ago",
        docId: "pdf",
      },
    ],
  },
  {
    label: "September",
    items: [
      {
        id: "a3",
        type: "docs",
        title: "Keeper spec",
        viewed: "Viewed Sep 24",
        docId: "md",
      },
      {
        id: "a4",
        type: "design",
        title: "Stockbreak",
        note: "Shared with you",
        shared: true,
        viewed: "Viewed Sep 26",
        docId: "stockbreak",
      },
    ],
  },
];

export const menu = ["Open", "Rename", "Share", "Delete"];

export const composer = {
  disclaimer: "Edmi is AI and can make mistakes.",
  models: [
    { id: "opus", label: "Opus" },
    { id: "sonnet", label: "Sonnet" },
  ],
  efforts: [
    { id: "low", label: "Low" },
    { id: "medium", label: "Medium" },
    { id: "high", label: "High" },
  ],
  modes: [
    { id: "auto", label: "Auto" },
    { id: "ask", label: "Ask first" },
  ],
};

// Agent-home task list (Queue).
export interface Task {
  id: string;
  title: string;
  age: string;
  agent: { id: string; color: string };
  status: "running" | "done";
}

export const tasks: Task[] = [
  {
    id: "1",
    title: "Draft feed post",
    age: "1m",
    agent: { id: "writer", color: "chart-4" },
    status: "running",
  },
  {
    id: "2",
    title: "Rebalance MAG4",
    age: "4d",
    agent: { id: "keeper", color: "chart-3" },
    status: "done",
  },
];

<script setup lang="ts">
import { ElevationProvider } from "@/components/ui/elevation";
import {
  AppWindowIcon,
  ArrowUpRightIcon,
  BookOpenIcon,
  ChevronDownIcon,
  FileTextIcon,
  GlobeIcon,
  LayoutGridIcon,
  LockIcon,
  MessageSquareIcon,
  MoreHorizontalIcon,
  PaletteIcon,
  PanelLeft,
  PlusIcon,
  SearchIcon,
  XIcon,
} from "@lucide/vue";
import { computed, ref } from "vue";
import { AgentAvatar } from "@/components/ai/agent-avatar";
import {
  ArtifactCard,
  ArtifactCardActions,
  ArtifactCardBody,
  ArtifactCardIcon,
  ArtifactCardMeta,
  ArtifactCardThumbnail,
  ArtifactCardTitle,
} from "@/components/ai/artifact-card";
import { ArtifactStack, ArtifactStackDownloadAll } from "@/components/ai/artifact-stack";
import {
  ArtifactViewer,
  ArtifactViewerClose,
  ArtifactViewerContent,
  ArtifactViewerDownload,
  ArtifactViewerExpand,
  ArtifactViewerHeader,
  ArtifactViewerOpenIn,
  ArtifactViewerPaper,
  ArtifactViewerTitle,
} from "@/components/ai/artifact-viewer";
import { ChatComposer } from "@/components/ai/chat-composer";
import {
  ChatHeader,
  ChatHeaderActions,
  ChatHeaderMenu,
  ChatHeaderProject,
  ChatHeaderShare,
  ChatHeaderTitle,
} from "@/components/ai/chat-header";
import { CodeBlock } from "@/components/ai/code-block";
import {
  Conversation,
  ConversationContent,
  ConversationEmptyState,
  ConversationItem,
  ConversationScrollButton,
} from "@/components/ai/conversation";
import { Message, MessageContent, MessageResponse } from "@/components/ai/message";
import {
  PromptInput,
  PromptInputBody,
  PromptInputFooter,
  PromptInputHeader,
  PromptInputSubmit,
  PromptInputTextarea,
  PromptInputTools,
} from "@/components/ai/prompt-input";
import { PromptInputAgent } from "@/components/ai/prompt-input-agent";
import {
  Queue,
  QueueItem,
  QueueItemAvatar,
  QueueItemContent,
  QueueItemStatus,
  QueueList,
  QueueSection,
  QueueSectionContent,
  QueueSectionLabel,
  QueueSectionTrigger,
} from "@/components/ai/queue";
import { Suggestion, Suggestions } from "@/components/ai/suggestion";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemTitle,
} from "@/components/ui/item";
import { Spinner } from "@/components/ui/spinner";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  type ArtifactType,
  agent,
  appName,
  banner,
  composer,
  docs,
  greeting,
  groups,
  menu,
  nav,
  project,
  recents,
  suggestions,
  tabs,
  tasks,
  thread,
  tiles,
  title,
  type View,
} from "./data";

const tone: Record<ArtifactType, string> = {
  docs: "bg-[color-mix(in_srgb,var(--chart-2)_14%,var(--card))] text-chart-2",
  slides: "bg-[color-mix(in_srgb,var(--chart-3)_14%,var(--card))] text-chart-3",
  design: "bg-[color-mix(in_srgb,var(--chart-4)_14%,var(--card))] text-chart-4",
};
const typeIcon = { docs: FileTextIcon, slides: AppWindowIcon, design: PaletteIcon };

const view = ref<View>("thread");
const openId = ref<string | null>(null);
const expanded = ref(false);
const navOpen = ref(false);
const tab = ref("all");
const bannerOpen = ref(true);
const doc = computed(() => docs.find((d) => d.id === openId.value));
const visible = computed(() =>
  groups
    .map((g) => ({
      ...g,
      items: g.items.filter(
        (i) => tab.value === "all" || (tab.value === "shared" ? i.shared : !i.shared),
      ),
    }))
    .filter((g) => g.items.length > 0),
);

function go(next: View) {
  view.value = next;
  openId.value = null;
  expanded.value = false;
  navOpen.value = false;
}
function close() {
  expanded.value = false;
  openId.value = null;
}
function docById(id: string) {
  return docs.find((x) => x.id === id);
}
</script>

<template>
  <ElevationProvider mode="layered">
    <div class="flex h-svh bg-background text-foreground">
      <button
        v-if="navOpen"
        type="button"
        aria-label="Close menu"
        class="fixed inset-0 z-30 bg-overlay md:hidden"
        @click="navOpen = false"
      />
      <aside
        :class="`flex w-60 shrink-0 flex-col gap-1 border-r border-sidebar-border bg-sidebar p-3 text-sidebar-foreground max-md:fixed max-md:inset-y-0 max-md:left-0 max-md:z-40 ${navOpen ? '' : 'max-md:-translate-x-full'}`"
      >
        <div class="flex items-center gap-2 px-2 pt-1 pb-3 font-serif text-lg">{{ appName }}</div>
        <Button class="w-full justify-start" type="button" variant="outline" @click="go('home')">
          <PlusIcon class="size-4" />
          New chat
        </Button>
        <div class="mt-2 flex flex-col gap-0.5">
          <Button
            v-for="n in nav"
            :key="n.view"
            :class="`w-full justify-start ${view === n.view ? 'bg-sidebar-accent' : ''}`"
            type="button"
            variant="ghost"
            @click="go(n.view)"
          >
            <MessageSquareIcon v-if="n.view === 'thread'" class="size-4" />
            <BookOpenIcon v-else class="size-4" />
            {{ n.label }}
          </Button>
        </div>
        <div class="mt-4 px-2 text-xs text-muted-foreground">Recents</div>
        <div class="flex min-h-0 flex-col gap-0.5 overflow-y-auto">
          <Button
            v-for="r in recents"
            :key="r"
            class="w-full justify-start font-normal"
            type="button"
            variant="ghost"
            @click="go('thread')"
          >
            <span class="truncate">{{ r }}</span>
          </Button>
        </div>
      </aside>

      <div class="flex min-w-0 flex-1">
        <div class="flex min-w-0 flex-1 flex-col">
          <div class="flex items-center p-2 pb-0 md:hidden">
            <Button aria-label="Open menu" size="icon-sm" type="button" variant="ghost" @click="navOpen = true">
              <PanelLeft class="size-4" />
            </Button>
          </div>

          <div v-if="view === 'home'" class="flex min-h-0 flex-1 flex-col overflow-y-auto">
            <div class="mx-auto flex min-h-full w-full max-w-2xl flex-col gap-4 p-4">
              <ConversationEmptyState variant="home" :title="greeting" description="" class="flex-1 gap-8 p-2">
                <Badge variant="secondary" class="-mt-5 gap-1.5">
                  <BookOpenIcon class="size-3" />
                  {{ project }}
                </Badge>
                <Queue variant="flat" class="w-full text-left">
                  <QueueSection>
                    <QueueSectionTrigger class="font-normal text-muted-foreground">
                      <QueueSectionLabel label="Tasks" :chevron="false" />
                    </QueueSectionTrigger>
                    <QueueSectionContent>
                      <QueueList>
                        <QueueItem v-for="task in tasks" :key="task.id">
                          <div class="flex items-center gap-2">
                            <QueueItemAvatar>
                              <AgentAvatar :seed="task.agent.id" :color="task.agent.color" :size="22" :tile="false" />
                            </QueueItemAvatar>
                            <QueueItemContent>{{ task.title }}</QueueItemContent>
                            <QueueItemStatus>
                              <span class="font-mono">{{ task.age }}</span>
                              <Spinner v-if="task.status === 'running'" class="size-3.5" />
                              <span v-else class="size-1.5 rounded-full bg-success" />
                            </QueueItemStatus>
                          </div>
                        </QueueItem>
                      </QueueList>
                    </QueueSectionContent>
                  </QueueSection>
                </Queue>
                <div class="flex w-full items-center gap-2">
                  <span class="shrink-0 text-xs text-muted-foreground">Suggested</span>
                  <Suggestions>
                    <Suggestion v-for="s in suggestions" :key="s" :suggestion="s" @click="go('thread')" />
                  </Suggestions>
                </div>
              </ConversationEmptyState>

              <PromptInput @submit="go('thread')">
                <PromptInputHeader>
                  <PromptInputAgent :agent="agent" />
                </PromptInputHeader>
                <PromptInputBody>
                  <PromptInputTextarea :placeholder="`Ask ${agent.name} anything about your index…`" class="min-h-20" />
                </PromptInputBody>
                <PromptInputFooter>
                  <PromptInputTools>
                    <Button aria-label="Attach" size="icon-sm" type="button" variant="ghost">
                      <PlusIcon class="size-4" />
                    </Button>
                  </PromptInputTools>
                  <PromptInputSubmit class="size-10" size="icon-sm" variant="secondary" />
                </PromptInputFooter>
              </PromptInput>
            </div>
          </div>

          <div v-else-if="view === 'thread'" class="flex min-h-0 flex-1 flex-col gap-2 p-3">
            <ChatHeader>
              <ChatHeaderTitle>
                <span class="truncate">{{ title }}</span>
                <ChatHeaderProject status="connected" />
                <ChatHeaderMenu>
                  <DropdownMenuItem>Rename</DropdownMenuItem>
                  <DropdownMenuItem>Move to project</DropdownMenuItem>
                  <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
                </ChatHeaderMenu>
              </ChatHeaderTitle>
              <ChatHeaderActions>
                <Button aria-label="Web access" size="icon-sm" type="button" variant="ghost">
                  <GlobeIcon class="size-4" />
                </Button>
                <Button size="sm" type="button" variant="ghost">
                  <FileTextIcon class="size-3.5" />
                  {{ docs.length }}
                </Button>
                <ChatHeaderShare />
              </ChatHeaderActions>
            </ChatHeader>

            <Conversation class="min-h-0">
              <ConversationContent class="mx-auto w-full max-w-3xl gap-6 px-4 py-6">
                <ConversationItem v-for="turn in thread" :key="turn.id" :message-id="turn.id">
                  <Message :from="turn.role">
                    <MessageContent class="gap-4">
                      <template v-for="(block, i) in turn.blocks" :key="i">
                        <template v-if="block.type === 'markdown'">
                          <template v-if="turn.role === 'user'">{{ block.text }}</template>
                          <MessageResponse v-else :content="block.text" />
                        </template>
                        <CodeBlock v-else-if="block.type === 'code'" :code="block.code" :language="block.language" />
                        <ArtifactCard v-else-if="block.type === 'archive'">
                          <ArtifactCardIcon kind="archive" />
                          <ArtifactCardBody>
                            <ArtifactCardTitle>{{ block.title }}</ArtifactCardTitle>
                            <ArtifactCardMeta>{{ block.meta }}</ArtifactCardMeta>
                          </ArtifactCardBody>
                          <ArtifactCardActions>
                            <DropdownMenuItem>Copy link</DropdownMenuItem>
                            <DropdownMenuItem>Open</DropdownMenuItem>
                          </ArtifactCardActions>
                        </ArtifactCard>
                        <ArtifactStack v-else>
                          <template v-for="id in block.ids" :key="id">
                            <ArtifactCard v-if="docById(id)" class="cursor-pointer" @click="openId = id">
                              <ArtifactCardThumbnail v-if="docById(id)?.thumbnail" />
                              <ArtifactCardIcon v-else kind="document" />
                              <ArtifactCardBody>
                                <ArtifactCardTitle>{{ docById(id)?.title }}</ArtifactCardTitle>
                                <ArtifactCardMeta>{{ docById(id)?.meta }}</ArtifactCardMeta>
                              </ArtifactCardBody>
                              <ArtifactCardActions>
                                <DropdownMenuItem>Copy link</DropdownMenuItem>
                                <DropdownMenuItem @click="openId = id">Open</DropdownMenuItem>
                              </ArtifactCardActions>
                            </ArtifactCard>
                          </template>
                          <ArtifactStackDownloadAll />
                        </ArtifactStack>
                      </template>
                    </MessageContent>
                  </Message>
                </ConversationItem>
              </ConversationContent>
              <ConversationScrollButton />
            </Conversation>

            <ChatComposer
              class="mx-auto max-w-3xl"
              :disclaimer="composer.disclaimer"
              :models="composer.models"
              :efforts="composer.efforts"
              default-effort="medium"
              :modes="composer.modes"
              @attach="() => {}"
              @speech="() => {}"
            />
          </div>

          <div v-else class="min-h-0 flex-1 overflow-y-auto">
            <div class="mx-auto w-full max-w-[920px] px-5 py-[30px] sm:px-[34px]">
              <h1 class="font-serif text-[30px] leading-tight font-normal tracking-[-0.3px]">Library</h1>

              <div class="mt-[18px] flex flex-wrap items-center justify-between gap-2">
                <Tabs v-model="tab">
                  <TabsList variant="pills">
                    <TabsTrigger v-for="t in tabs" :key="t.value" :value="t.value">{{ t.label }}</TabsTrigger>
                  </TabsList>
                </Tabs>
                <div class="flex items-center gap-1">
                  <Button aria-label="Search" size="icon-sm" type="button" variant="ghost">
                    <SearchIcon class="size-4" />
                  </Button>
                  <Button aria-label="Grid view" size="icon-sm" type="button" variant="ghost">
                    <LayoutGridIcon class="size-4" />
                  </Button>
                  <Button size="sm" type="button" variant="secondary">
                    Edmi Design
                    <ChevronDownIcon />
                  </Button>
                </div>
              </div>

              <Card v-if="bannerOpen" class="mt-[18px] flex-row items-start justify-between gap-3 px-4 py-3.5">
                <div>
                  <div class="text-sm font-semibold">{{ banner.title }}</div>
                  <div class="mt-0.5 text-[13.5px] text-muted-foreground">{{ banner.text }}</div>
                  <Button class="mt-2.5" size="sm" type="button" variant="secondary">
                    {{ banner.action }}
                    <ArrowUpRightIcon />
                  </Button>
                </div>
                <Button aria-label="Dismiss" size="icon-sm" type="button" variant="ghost" @click="bannerOpen = false">
                  <XIcon class="size-4" />
                </Button>
              </Card>

              <div class="mt-[22px] mb-2.5 text-[13px] text-muted-foreground">Make something new</div>
              <div class="grid grid-cols-3 gap-3.5 sm:max-w-[538px]">
                <div v-for="t in tiles" :key="t.type" class="flex flex-col gap-2">
                  <div
                    :class="`flex h-[118px] w-full items-center justify-center rounded-[calc(var(--radius)*1.4)] border border-border ${tone[t.type]}`"
                  >
                    <component :is="typeIcon[t.type]" class="size-6" />
                  </div>
                  <div class="flex items-center gap-1.5 text-sm">
                    {{ t.label }}
                    <Badge variant="secondary" class="h-[18px] text-[10.5px]">Beta</Badge>
                  </div>
                </div>
              </div>

              <section v-for="g in visible" :key="g.label">
                <div class="mt-[22px] mb-0.5 text-[13px] text-muted-foreground">{{ g.label }}</div>
                <ItemGroup>
                  <Item v-for="i in g.items" :key="i.id" class="cursor-pointer px-0 py-3" @click="openId = i.docId">
                    <span
                      :class="`inline-flex size-10 shrink-0 items-center justify-center rounded-[10px] ${tone[i.type]}`"
                    >
                      <component :is="typeIcon[i.type]" class="size-[18px]" />
                    </span>
                    <ItemContent>
                      <ItemTitle class="text-[15px] font-normal">{{ i.title }}</ItemTitle>
                      <ItemDescription v-if="i.note">{{ i.note }}</ItemDescription>
                    </ItemContent>
                    <ItemActions>
                      <span class="flex items-center gap-1.5 text-[13px] text-muted-foreground">
                        <LockIcon class="size-3.5" />
                        <span class="max-sm:hidden">{{ i.viewed }}</span>
                      </span>
                      <DropdownMenu>
                        <DropdownMenuTrigger as-child>
                          <Button aria-label="More" size="icon-sm" type="button" variant="ghost" @click.stop>
                            <MoreHorizontalIcon class="size-4 rotate-90" />
                          </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                          <DropdownMenuItem
                            v-for="m in menu"
                            :key="m"
                            :variant="m === 'Delete' ? 'destructive' : 'default'"
                          >
                            {{ m }}
                          </DropdownMenuItem>
                        </DropdownMenuContent>
                      </DropdownMenu>
                    </ItemActions>
                  </Item>
                </ItemGroup>
              </section>
            </div>
          </div>
        </div>

        <div
          v-if="doc"
          :class="
            expanded
              ? 'fixed inset-0 z-50 flex'
              : 'flex border-l border-border max-md:fixed max-md:inset-0 max-md:z-50 md:w-1/2 md:shrink-0'
          "
        >
          <ArtifactViewer class="h-full w-full rounded-none border-0">
            <ArtifactViewerHeader>
              <ArtifactViewerTitle :format="doc.format">{{ doc.title }}</ArtifactViewerTitle>
              <ArtifactViewerOpenIn />
              <ArtifactViewerDownload />
              <ArtifactViewerExpand @click="expanded = !expanded" />
              <ArtifactViewerClose @click="close" />
            </ArtifactViewerHeader>
            <ArtifactViewerContent>
              <ArtifactViewerPaper class="px-8 py-[30px]">
                <div class="font-mono text-[10.5px] tracking-[2px] text-[#7a7974]">
                  {{ doc.paper.kicker }}
                </div>
                <div class="mt-2.5 font-serif text-2xl leading-[1.15] font-bold">
                  {{ doc.paper.headline }}
                </div>
                <p class="mt-3 text-[12.5px] leading-[1.7] text-[#3d3c38]">
                  <template v-for="s in doc.paper.lead" :key="s.t">
                    <b v-if="s.b">{{ s.t }}</b>
                    <span v-else-if="s.link" class="text-[#3b6fd6]">{{ s.t }}</span>
                    <template v-else>{{ s.t }}</template>
                  </template>
                </p>
                <div class="mt-4 mb-2.5 h-0.5 bg-[#22406b]" />
                <div class="font-serif text-base font-bold text-[#22406b]">
                  {{ doc.paper.heading }}
                </div>
                <p class="mt-3 text-[12.5px] leading-[1.7] text-[#3d3c38]">
                  <template v-for="s in doc.paper.body" :key="s.t">
                    <b v-if="s.b">{{ s.t }}</b>
                    <template v-else>{{ s.t }}</template>
                  </template>
                </p>
              </ArtifactViewerPaper>
            </ArtifactViewerContent>
          </ArtifactViewer>
        </div>
      </div>
    </div>
  </ElevationProvider>
</template>

// Sample data for the AI chat example (Keeper = the sample agent). Shared by react.tsx, vue.vue and
// svelte.svelte: one app with a home, a thread, an artifact viewer and a library.

export type Segment = { t: string; b?: boolean; link?: boolean };

export interface PaperDoc {
  kicker: string;
  headline: string;
  lead: Segment[];
  heading: string;
  body: Segment[];
}

export interface ArtifactDoc {
  id: string;
  title: string;
  /** Card meta line, e.g. "Document · PDF". */
  meta: string;
  /** Shown after the viewer title, in mono. */
  format: string;
  kind: "document";
  /** Card shows the cropped page thumbnail instead of the icon tile. */
  thumbnail: boolean;
  paper: PaperDoc;
}

export type Block =
  | { type: "markdown"; text: string }
  | { type: "code"; code: string; language: "bash" | "typescript" }
  | { type: "archive"; title: string; meta: string }
  | { type: "docs"; ids: string[] };

export interface Turn {
  id: string;
  role: "assistant" | "user";
  blocks: Block[];
}

export const appName = "Edmi";
export const nav = [
  { view: "thread", label: "Chats" },
  { view: "library", label: "Library" },
] as const;
export type View = "home" | "thread" | "library";

export const recents = [
  "Keeper starter plan",
  "Eight index ideas",
  "Rebalance MAG4",
  "Launch post draft",
];

export const user = { name: "Dwi", initials: "D" };
export const greeting = "Good evening, Dwi";
export const project = "Roadmap";
export const title = "Keeper starter plan";
export const suggestions = [
  "Write a launch post",
  "Compare fees",
  "Add a token",
];
export const agent = {
  id: "keeper",
  name: "Keeper",
  scope: "trading",
  color: "chart-3",
};

export const notes = `**Before you use this document:**

- **The ranking is a judgment, not a score.** Data backs each idea but not the order.
- **Research is partial.** Some competitors were not checked; all are flagged.

Sources I re-checked:

- [RevenueCat subscription report](https://example.com/revenuecat)
- [Stripe founder data](https://example.com/stripe)
- [Jupiter API terms](https://example.com/jupiter)`;

export const processNote =
  "Updating the task list and marking finished items complete.";

export const thread: Turn[] = [
  {
    id: "t1",
    role: "assistant",
    blocks: [
      {
        type: "markdown",
        text: `**Check before you start:** the quote path for \`@jup-ag/api\` is not confirmed yet (probably \`@jup-ag/api/quote\`). Flagged in \`docs/open-questions.md\`.

**Two open questions** in \`docs/open-questions.md\`:

- Managed RPC in production (default) or your own node?
- Start with one keeper instance? Default is 1.`,
      },
      { type: "archive", title: "Keeper starter", meta: "ZIP" },
    ],
  },
  {
    id: "t2",
    role: "user",
    blocks: [
      {
        type: "markdown",
        text: "What prompt starts the agent after the repo is cloned?",
      },
    ],
  },
  {
    id: "t3",
    role: "assistant",
    blocks: [
      {
        type: "markdown",
        text: "The kit ships a `/next-phase` command. After cloning and unzipping into the repo root, type this in your coding agent:",
      },
      { type: "code", language: "bash", code: "/next-phase 00" },
      { type: "markdown", text: "Or the short plain prompt:" },
      {
        type: "code",
        language: "bash",
        code: 'Read AGENTS.md, then docs/README.md in order. Do phase 00 in docs/plans/00-scaffold.md until the "Done when" checklist passes.',
      },
    ],
  },
  {
    id: "t4",
    role: "user",
    blocks: [
      {
        type: "markdown",
        text: "Good. Which index ideas can a team of 1–3 ship first?",
      },
    ],
  },
  {
    id: "t5",
    role: "assistant",
    blocks: [
      { type: "markdown", text: notes },
      { type: "docs", ids: ["pdf", "md"] },
    ],
  },
  {
    id: "t6",
    role: "user",
    blocks: [
      {
        type: "markdown",
        text: "Add a slide version, point by point?",
      },
    ],
  },
  {
    id: "t7",
    role: "assistant",
    blocks: [{ type: "markdown", text: processNote }],
  },
];

export const docs: ArtifactDoc[] = [
  {
    id: "pdf",
    title: "Eight index ideas",
    meta: "Document · PDF",
    format: "PDF",
    kind: "document",
    thumbnail: true,
    paper: {
      kicker: "RESEARCH · 8 INDEX IDEAS · OCT 2026",
      headline: "Distribution, not AI, picks the winner",
      lead: [
        {
          t: "Some indexes can win now, but the product shape and channel decide it. Three shapes work for teams of 1–3 (",
        },
        { t: "Stripe", link: true },
        { t: "; " },
        { t: "RevenueCat", link: true },
        { t: "). " },
        { t: "None of the eight ideas passes without conditions.", b: true },
        {
          t: " The three best supported: idea 8 as a B2B ops layer, idea 3 as a local terminal for developers, idea 4 as a learning path.",
        },
      ],
      heading: "What wins now: narrow vertical, recurring billing, own channel",
      body: [
        {
          t: "The first winning shape is vertical B2B. Solo founders in the top decile are about ",
        },
        { t: "twice as likely to build AI-native products", b: true },
        { t: " and sell to 10 countries in month one." },
      ],
    },
  },
  {
    id: "md",
    title: "Eight index ideas",
    meta: "Document · MD",
    format: "MD",
    kind: "document",
    thumbnail: false,
    paper: {
      kicker: "NOTES · 8 INDEX IDEAS · OCT 2026",
      headline: "Eight index ideas, point by point",
      lead: [
        {
          t: "Each idea is scored on channel, margin and time to first holder. ",
        },
        { t: "Ideas 3, 4 and 8 clear the bar", b: true },
        { t: "; the other five need a channel first." },
      ],
      heading: "Open conditions per idea",
      body: [
        { t: "Idea 8 needs one design partner. Idea 3 needs a " },
        { t: "signed terminal build", b: true },
        { t: ". Idea 4 needs a curriculum owner." },
      ],
    },
  },
  {
    id: "mag4",
    title: "MAG4 — Editorial minimal",
    meta: "Design · Draft",
    format: "DESIGN",
    kind: "document",
    thumbnail: false,
    paper: {
      kicker: "DESIGN · MAG4 · OCT 2026",
      headline: "MAG4, editorial and minimal",
      lead: [
        { t: "A flat, typographic index page: one " },
        { t: "serif headline", b: true },
        { t: ", a mono number column and a single accent." },
      ],
      heading: "Layout notes",
      body: [
        { t: "Cards stay flat; only the " },
        { t: "primary action", b: true },
        { t: " rises." },
      ],
    },
  },
  {
    id: "stockbreak",
    title: "Stockbreak",
    meta: "Design · Shared",
    format: "DESIGN",
    kind: "document",
    thumbnail: false,
    paper: {
      kicker: "DESIGN · STOCKBREAK · SEP 2026",
      headline: "Stockbreak markets, shared with you",
      lead: [
        { t: "The markets, explore and portfolio pages in one " },
        { t: "layered", b: true },
        { t: " app shell." },
      ],
      heading: "Review status",
      body: [
        { t: "Two comments open on the " },
        { t: "leaderboard podium", b: true },
        { t: "." },
      ],
    },
  },
];

export type ArtifactType = "docs" | "slides" | "design";

export const tabs = [
  { value: "all", label: "All" },
  { value: "yours", label: "Yours" },
  { value: "shared", label: "Shared with you" },
];

export const banner = {
  title: "Designs live here now",
  text: "New slides and designs are saved as artifacts.",
  action: "Open the design home",
};

export const tiles: { type: ArtifactType; label: string }[] = [
  { type: "docs", label: "Docs" },
  { type: "slides", label: "Slides" },
  { type: "design", label: "Design" },
];

export interface LibraryItem {
  id: string;
  type: ArtifactType;
  title: string;
  note?: string;
  /** Appears under "Shared with you" (and not under "Yours"). */
  shared?: boolean;
  viewed: string;
  /** Viewer document opened by this row. */
  docId: string;
}

export const groups: { label: string; items: LibraryItem[] }[] = [
  {
    label: "Today",
    items: [
      {
        id: "a1",
        type: "design",
        title: "MAG4 — Editorial minimal",
        viewed: "Viewed 20m ago",
        docId: "mag4",
      },
      {
        id: "a2",
        type: "slides",
        title: "8 index ideas",
        viewed: "Viewed 1h ago",
        docId: "pdf",
      },
    ],
  },
  {
    label: "September",
    items: [
      {
        id: "a3",
        type: "docs",
        title: "Keeper spec",
        viewed: "Viewed Sep 24",
        docId: "md",
      },
      {
        id: "a4",
        type: "design",
        title: "Stockbreak",
        note: "Shared with you",
        shared: true,
        viewed: "Viewed Sep 26",
        docId: "stockbreak",
      },
    ],
  },
];

export const menu = ["Open", "Rename", "Share", "Delete"];

export const composer = {
  disclaimer: "Edmi is AI and can make mistakes.",
  models: [
    { id: "opus", label: "Opus" },
    { id: "sonnet", label: "Sonnet" },
  ],
  efforts: [
    { id: "low", label: "Low" },
    { id: "medium", label: "Medium" },
    { id: "high", label: "High" },
  ],
  modes: [
    { id: "auto", label: "Auto" },
    { id: "ask", label: "Ask first" },
  ],
};

// Agent-home task list (Queue).
export interface Task {
  id: string;
  title: string;
  age: string;
  agent: { id: string; color: string };
  status: "running" | "done";
}

export const tasks: Task[] = [
  {
    id: "1",
    title: "Draft feed post",
    age: "1m",
    agent: { id: "writer", color: "chart-4" },
    status: "running",
  },
  {
    id: "2",
    title: "Rebalance MAG4",
    age: "4d",
    agent: { id: "keeper", color: "chart-3" },
    status: "done",
  },
];

<script lang="ts">
  import { ElevationProvider } from "$lib/components/ui/elevation";
  import { AgentAvatar } from "$lib/components/ai/agent-avatar";
  import {
    ArtifactCard,
    ArtifactCardActions,
    ArtifactCardBody,
    ArtifactCardIcon,
    ArtifactCardMeta,
    ArtifactCardThumbnail,
    ArtifactCardTitle,
  } from "$lib/components/ai/artifact-card";
  import { ArtifactStack, ArtifactStackDownloadAll } from "$lib/components/ai/artifact-stack";
  import {
    ArtifactViewer,
    ArtifactViewerClose,
    ArtifactViewerContent,
    ArtifactViewerDownload,
    ArtifactViewerExpand,
    ArtifactViewerHeader,
    ArtifactViewerOpenIn,
    ArtifactViewerPaper,
    ArtifactViewerTitle,
  } from "$lib/components/ai/artifact-viewer";
  import { ChatComposer } from "$lib/components/ai/chat-composer";
  import {
    ChatHeader,
    ChatHeaderActions,
    ChatHeaderMenu,
    ChatHeaderProject,
    ChatHeaderShare,
    ChatHeaderTitle,
  } from "$lib/components/ai/chat-header";
  import { CodeBlock } from "$lib/components/ai/code-block";
  import {
    Conversation,
    ConversationContent,
    ConversationEmptyState,
    ConversationItem,
    ConversationScrollButton,
  } from "$lib/components/ai/conversation";
  import { Message, MessageContent, MessageResponse } from "$lib/components/ai/message";
  import {
    PromptInput,
    PromptInputBody,
    PromptInputFooter,
    PromptInputHeader,
    PromptInputSubmit,
    PromptInputTextarea,
    PromptInputTools,
  } from "$lib/components/ai/prompt-input";
  import { PromptInputAgent } from "$lib/components/ai/prompt-input-agent";
  import {
    Queue,
    QueueItem,
    QueueItemAvatar,
    QueueItemContent,
    QueueItemStatus,
    QueueList,
    QueueSection,
    QueueSectionContent,
    QueueSectionLabel,
    QueueSectionTrigger,
  } from "$lib/components/ai/queue";
  import { Suggestion, Suggestions } from "$lib/components/ai/suggestion";
  import { Badge } from "$lib/components/ui/badge";
  import { Button } from "$lib/components/ui/button";
  import { Card } from "$lib/components/ui/card";
  import { DropdownMenuItem } from "$lib/components/ui/dropdown-menu";
  import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
  import * as Item from "$lib/components/ui/item";
  import { Spinner } from "$lib/components/ui/spinner";
  import * as Tabs from "$lib/components/ui/tabs";
  import IconPlaceholder from "$lib/components/icon-placeholder/icon-placeholder.svelte";
  import {
    type ArtifactType,
    agent,
    appName,
    banner,
    composer,
    docs,
    greeting,
    groups,
    menu,
    nav,
    project,
    recents,
    suggestions,
    tabs,
    tasks,
    thread,
    tiles,
    title,
    type View,
  } from "./data";

  const tone: Record<ArtifactType, string> = {
    docs: "bg-[color-mix(in_srgb,var(--chart-2)_14%,var(--card))] text-chart-2",
    slides: "bg-[color-mix(in_srgb,var(--chart-3)_14%,var(--card))] text-chart-3",
    design: "bg-[color-mix(in_srgb,var(--chart-4)_14%,var(--card))] text-chart-4",
  };

  let view = $state<View>("thread");
  let openId = $state<string | null>(null);
  let expanded = $state(false);
  let navOpen = $state(false);
  let tab = $state("all");
  let bannerOpen = $state(true);
  const doc = $derived(docs.find((d) => d.id === openId));
  const visible = $derived(
    groups
      .map((g) => ({
        ...g,
        items: g.items.filter((i) => tab === "all" || (tab === "shared" ? i.shared : !i.shared)),
      }))
      .filter((g) => g.items.length > 0),
  );

  function go(next: View) {
    view = next;
    openId = null;
    expanded = false;
    navOpen = false;
  }
  function close() {
    expanded = false;
    openId = null;
  }
  function docById(id: string) {
    return docs.find((x) => x.id === id);
  }
</script>

<ElevationProvider mode="layered">
{#snippet typeIcon(type: ArtifactType, cls: string)}
  {#if type === "docs"}
    <IconPlaceholder
      lucide="FileTextIcon"
      tabler="IconFileDescription"
      hugeicons="File01Icon"
      phosphor="FileTextIcon"
      remixicon="RiFileTextLine"
      class={cls}
    />
  {:else if type === "slides"}
    <IconPlaceholder
      lucide="AppWindowIcon"
      tabler="IconAppWindow"
      hugeicons="BrowserIcon"
      phosphor="AppWindowIcon"
      remixicon="RiWindowLine"
      class={cls}
    />
  {:else}
    <IconPlaceholder
      lucide="PaletteIcon"
      tabler="IconPalette"
      hugeicons="PaintBoardIcon"
      phosphor="PaletteIcon"
      remixicon="RiPaletteLine"
      class={cls}
    />
  {/if}
{/snippet}

<div class="flex h-svh bg-background text-foreground">
  {#if navOpen}
    <button
      type="button"
      aria-label="Close menu"
      class="fixed inset-0 z-30 bg-overlay md:hidden"
      onclick={() => (navOpen = false)}
    ></button>
  {/if}
  <aside
    class="flex w-60 shrink-0 flex-col gap-1 border-r border-sidebar-border bg-sidebar p-3 text-sidebar-foreground max-md:fixed max-md:inset-y-0 max-md:left-0 max-md:z-40 {navOpen
      ? ''
      : 'max-md:-translate-x-full'}"
  >
    <div class="flex items-center gap-2 px-2 pt-1 pb-3 font-serif text-lg">{appName}</div>
    <Button class="w-full justify-start" type="button" variant="outline" onclick={() => go("home")}>
      <IconPlaceholder
        lucide="PlusIcon"
        tabler="IconPlus"
        hugeicons="Add01Icon"
        phosphor="PlusIcon"
        remixicon="RiAddLine"
        class="size-4"
      />
      New chat
    </Button>
    <div class="mt-2 flex flex-col gap-0.5">
      {#each nav as n (n.view)}
        <Button
          class="w-full justify-start {view === n.view ? 'bg-sidebar-accent' : ''}"
          type="button"
          variant="ghost"
          onclick={() => go(n.view)}
        >
          {#if n.view === "thread"}
            <IconPlaceholder
              lucide="MessageSquareIcon"
              tabler="IconMessage"
              hugeicons="Message01Icon"
              phosphor="ChatCircleIcon"
              remixicon="RiChat1Line"
              class="size-4"
            />
          {:else}
            <IconPlaceholder
              lucide="BookOpenIcon"
              tabler="IconBook"
              hugeicons="BookOpen01Icon"
              phosphor="BookOpenIcon"
              remixicon="RiBookOpenLine"
              class="size-4"
            />
          {/if}
          {n.label}
        </Button>
      {/each}
    </div>
    <div class="mt-4 px-2 text-xs text-muted-foreground">Recents</div>
    <div class="flex min-h-0 flex-col gap-0.5 overflow-y-auto">
      {#each recents as r (r)}
        <Button
          class="w-full justify-start font-normal"
          type="button"
          variant="ghost"
          onclick={() => go("thread")}
        >
          <span class="truncate">{r}</span>
        </Button>
      {/each}
    </div>
  </aside>

  <div class="flex min-w-0 flex-1">
    <div class="flex min-w-0 flex-1 flex-col">
      <div class="flex items-center p-2 pb-0 md:hidden">
        <Button
          aria-label="Open menu"
          size="icon-sm"
          type="button"
          variant="ghost"
          onclick={() => (navOpen = true)}
        >
          <IconPlaceholder
            lucide="PanelLeftIcon"
            tabler="IconLayoutSidebar"
            hugeicons="SidebarLeftIcon"
            phosphor="SidebarIcon"
            remixicon="RiLayoutLeftLine"
            class="size-4"
          />
        </Button>
      </div>

      {#if view === "home"}
        <div class="flex min-h-0 flex-1 flex-col overflow-y-auto">
          <div class="mx-auto flex min-h-full w-full max-w-2xl flex-col gap-4 p-4">
            <ConversationEmptyState variant="home" title={greeting} description="" class="flex-1 gap-8 p-2">
              <Badge variant="secondary" class="-mt-5 gap-1.5">
                <IconPlaceholder
                  lucide="MapIcon"
                  tabler="IconMap"
                  hugeicons="Location01Icon"
                  phosphor="MapTrifoldIcon"
                  remixicon="RiMapLine"
                  class="size-3"
                />
                {project}
              </Badge>
              <Queue variant="flat" class="w-full text-left">
                <QueueSection>
                  <QueueSectionTrigger class="font-normal text-muted-foreground">
                    <QueueSectionLabel label="Tasks" chevron={false} />
                  </QueueSectionTrigger>
                  <QueueSectionContent>
                    <QueueList>
                      {#each tasks as task (task.id)}
                        <QueueItem>
                          <div class="flex items-center gap-2">
                            <QueueItemAvatar>
                              <AgentAvatar seed={task.agent.id} color={task.agent.color} size={22} tile={false} />
                            </QueueItemAvatar>
                            <QueueItemContent>{task.title}</QueueItemContent>
                            <QueueItemStatus>
                              <span class="font-mono">{task.age}</span>
                              {#if task.status === "running"}
                                <Spinner class="size-3.5" />
                              {:else}
                                <span class="size-1.5 rounded-full bg-success"></span>
                              {/if}
                            </QueueItemStatus>
                          </div>
                        </QueueItem>
                      {/each}
                    </QueueList>
                  </QueueSectionContent>
                </QueueSection>
              </Queue>
              <div class="flex w-full items-center gap-2">
                <span class="shrink-0 text-xs text-muted-foreground">Suggested</span>
                <Suggestions>
                  {#each suggestions as s (s)}
                    <Suggestion suggestion={s} onclick={() => go("thread")} />
                  {/each}
                </Suggestions>
              </div>
            </ConversationEmptyState>

            <PromptInput onSubmit={() => go("thread")}>
              <PromptInputHeader>
                <PromptInputAgent {agent} />
              </PromptInputHeader>
              <PromptInputBody>
                <PromptInputTextarea placeholder="Ask {agent.name} anything about your index…" class="min-h-20" />
              </PromptInputBody>
              <PromptInputFooter>
                <PromptInputTools>
                  <Button aria-label="Attach" size="icon-sm" type="button" variant="ghost">
                    <IconPlaceholder
                      lucide="PlusIcon"
                      tabler="IconPlus"
                      hugeicons="Add01Icon"
                      phosphor="PlusIcon"
                      remixicon="RiAddLine"
                      class="size-4"
                    />
                  </Button>
                </PromptInputTools>
                <PromptInputSubmit class="size-10" size="icon-sm" variant="secondary" />
              </PromptInputFooter>
            </PromptInput>
          </div>
        </div>
      {:else if view === "thread"}
        <div class="flex min-h-0 flex-1 flex-col gap-2 p-3">
          <ChatHeader>
            <ChatHeaderTitle>
              <span class="truncate">{title}</span>
              <ChatHeaderProject status="connected" />
              <ChatHeaderMenu>
                <DropdownMenuItem>Rename</DropdownMenuItem>
                <DropdownMenuItem>Move to project</DropdownMenuItem>
                <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
              </ChatHeaderMenu>
            </ChatHeaderTitle>
            <ChatHeaderActions>
              <Button aria-label="Web access" size="icon-sm" type="button" variant="ghost">
                <IconPlaceholder
                  lucide="GlobeIcon"
                  tabler="IconWorld"
                  hugeicons="Globe02Icon"
                  phosphor="GlobeIcon"
                  remixicon="RiGlobalLine"
                  class="size-4"
                />
              </Button>
              <Button size="sm" type="button" variant="ghost">
                <IconPlaceholder
                  lucide="FileTextIcon"
                  tabler="IconFileDescription"
                  hugeicons="File01Icon"
                  phosphor="FileTextIcon"
                  remixicon="RiFileTextLine"
                  class="size-3.5"
                />
                {docs.length}
              </Button>
              <ChatHeaderShare />
            </ChatHeaderActions>
          </ChatHeader>

          <Conversation class="min-h-0">
            <ConversationContent class="mx-auto w-full max-w-3xl gap-6 px-4 py-6">
              {#each thread as turn (turn.id)}
                <ConversationItem messageId={turn.id}>
                  <Message from={turn.role}>
                    <MessageContent class="gap-4">
                      {#each turn.blocks as block, i (i)}
                        {#if block.type === "markdown"}
                          {#if turn.role === "user"}
                            {block.text}
                          {:else}
                            <MessageResponse content={block.text} />
                          {/if}
                        {:else if block.type === "code"}
                          <CodeBlock code={block.code} language={block.language} />
                        {:else if block.type === "archive"}
                          <ArtifactCard>
                            <ArtifactCardIcon kind="archive" />
                            <ArtifactCardBody>
                              <ArtifactCardTitle>{block.title}</ArtifactCardTitle>
                              <ArtifactCardMeta>{block.meta}</ArtifactCardMeta>
                            </ArtifactCardBody>
                            <ArtifactCardActions>
                              <DropdownMenuItem>Copy link</DropdownMenuItem>
                              <DropdownMenuItem>Open</DropdownMenuItem>
                            </ArtifactCardActions>
                          </ArtifactCard>
                        {:else}
                          <ArtifactStack>
                            {#each block.ids as id (id)}
                              {@const d = docById(id)}
                              {#if d}
                                <ArtifactCard class="cursor-pointer" onclick={() => (openId = id)}>
                                  {#if d.thumbnail}
                                    <ArtifactCardThumbnail />
                                  {:else}
                                    <ArtifactCardIcon kind={d.kind} />
                                  {/if}
                                  <ArtifactCardBody>
                                    <ArtifactCardTitle>{d.title}</ArtifactCardTitle>
                                    <ArtifactCardMeta>{d.meta}</ArtifactCardMeta>
                                  </ArtifactCardBody>
                                  <ArtifactCardActions>
                                    <DropdownMenuItem>Copy link</DropdownMenuItem>
                                    <DropdownMenuItem onclick={() => (openId = id)}>Open</DropdownMenuItem>
                                  </ArtifactCardActions>
                                </ArtifactCard>
                              {/if}
                            {/each}
                            <ArtifactStackDownloadAll />
                          </ArtifactStack>
                        {/if}
                      {/each}
                    </MessageContent>
                  </Message>
                </ConversationItem>
              {/each}
            </ConversationContent>
            <ConversationScrollButton />
          </Conversation>

          <ChatComposer
            class="mx-auto max-w-3xl"
            onSubmit={() => {}}
            onAttach={() => {}}
            onSpeech={() => {}}
            disclaimer={composer.disclaimer}
            models={composer.models}
            efforts={composer.efforts}
            defaultEffort="medium"
            modes={composer.modes}
          />
        </div>
      {:else}
        <div class="min-h-0 flex-1 overflow-y-auto">
          <div class="mx-auto w-full max-w-[920px] px-5 py-[30px] sm:px-[34px]">
            <h1 class="font-serif text-[30px] leading-tight font-normal tracking-[-0.3px]">Library</h1>

            <div class="mt-[18px] flex flex-wrap items-center justify-between gap-2">
              <Tabs.Root bind:value={tab}>
                <Tabs.List variant="pills">
                  {#each tabs as t (t.value)}
                    <Tabs.Trigger value={t.value}>{t.label}</Tabs.Trigger>
                  {/each}
                </Tabs.List>
              </Tabs.Root>
              <div class="flex items-center gap-1">
                <Button aria-label="Search" size="icon-sm" type="button" variant="ghost">
                  <IconPlaceholder
                    lucide="SearchIcon"
                    tabler="IconSearch"
                    hugeicons="SearchIcon"
                    phosphor="MagnifyingGlassIcon"
                    remixicon="RiSearchLine"
                    class="size-4"
                  />
                </Button>
                <Button aria-label="Grid view" size="icon-sm" type="button" variant="ghost">
                  <IconPlaceholder
                    lucide="LayoutGridIcon"
                    tabler="IconLayoutGrid"
                    hugeicons="GridViewIcon"
                    phosphor="GridFourIcon"
                    remixicon="RiLayoutGridLine"
                    class="size-4"
                  />
                </Button>
                <Button size="sm" type="button" variant="secondary">
                  Edmi Design
                  <IconPlaceholder
                    lucide="ChevronDownIcon"
                    tabler="IconChevronDown"
                    hugeicons="ArrowDown01Icon"
                    phosphor="CaretDownIcon"
                    remixicon="RiArrowDownSLine"
                  />
                </Button>
              </div>
            </div>

            {#if bannerOpen}
              <Card class="mt-[18px] flex-row items-start justify-between gap-3 px-4 py-3.5">
                <div>
                  <div class="text-sm font-semibold">{banner.title}</div>
                  <div class="mt-0.5 text-[13.5px] text-muted-foreground">{banner.text}</div>
                  <Button class="mt-2.5" size="sm" type="button" variant="secondary">
                    {banner.action}
                    <IconPlaceholder
                      lucide="ArrowUpRightIcon"
                      tabler="IconArrowUpRight"
                      hugeicons="ArrowUpRight01Icon"
                      phosphor="ArrowUpRightIcon"
                      remixicon="RiArrowRightUpLine"
                    />
                  </Button>
                </div>
                <Button
                  aria-label="Dismiss"
                  size="icon-sm"
                  type="button"
                  variant="ghost"
                  onclick={() => (bannerOpen = false)}
                >
                  <IconPlaceholder
                    lucide="XIcon"
                    tabler="IconX"
                    hugeicons="Cancel01Icon"
                    phosphor="XIcon"
                    remixicon="RiCloseLine"
                    class="size-4"
                  />
                </Button>
              </Card>
            {/if}

            <div class="mt-[22px] mb-2.5 text-[13px] text-muted-foreground">Make something new</div>
            <div class="grid grid-cols-3 gap-3.5 sm:max-w-[538px]">
              {#each tiles as t (t.type)}
                <div class="flex flex-col gap-2">
                  <div
                    class="flex h-[118px] w-full items-center justify-center rounded-[calc(var(--radius)*1.4)] border border-border {tone[
                      t.type
                    ]}"
                  >
                    {@render typeIcon(t.type, "size-6")}
                  </div>
                  <div class="flex items-center gap-1.5 text-sm">
                    {t.label}
                    <Badge variant="secondary" class="h-[18px] text-[10.5px]">Beta</Badge>
                  </div>
                </div>
              {/each}
            </div>

            {#each visible as g (g.label)}
              <section>
                <div class="mt-[22px] mb-0.5 text-[13px] text-muted-foreground">{g.label}</div>
                <Item.Group>
                  {#each g.items as i (i.id)}
                    <Item.Root class="cursor-pointer px-0 py-3" onclick={() => (openId = i.docId)}>
                      <span
                        class="inline-flex size-10 shrink-0 items-center justify-center rounded-[10px] {tone[
                          i.type
                        ]}"
                      >
                        {@render typeIcon(i.type, "size-[18px]")}
                      </span>
                      <Item.Content>
                        <Item.Title class="text-[15px] font-normal">{i.title}</Item.Title>
                        {#if i.note}<Item.Description>{i.note}</Item.Description>{/if}
                      </Item.Content>
                      <Item.Actions>
                        <span class="flex items-center gap-1.5 text-[13px] text-muted-foreground">
                          <IconPlaceholder
                            lucide="LockIcon"
                            tabler="IconLock"
                            hugeicons="SquareLock02Icon"
                            phosphor="LockKeyIcon"
                            remixicon="RiLockLine"
                            class="size-3.5"
                          />
                          <span class="max-sm:hidden">{i.viewed}</span>
                        </span>
                        <span role="none" onclick={(e) => e.stopPropagation()}>
                          <DropdownMenu.Root>
                            <DropdownMenu.Trigger>
                              {#snippet child({ props })}
                                <Button
                                  {...props}
                                  aria-label="More"
                                  size="icon-sm"
                                  type="button"
                                  variant="ghost"
                                >
                                  <IconPlaceholder
                                    lucide="MoreHorizontalIcon"
                                    tabler="IconDots"
                                    hugeicons="MoreHorizontalCircle01Icon"
                                    phosphor="DotsThreeOutlineIcon"
                                    remixicon="RiMoreLine"
                                    class="size-4 rotate-90"
                                  />
                                </Button>
                              {/snippet}
                            </DropdownMenu.Trigger>
                            <DropdownMenu.Content align="end">
                              {#each menu as m (m)}
                                <DropdownMenu.Item variant={m === "Delete" ? "destructive" : "default"}>
                                  {m}
                                </DropdownMenu.Item>
                              {/each}
                            </DropdownMenu.Content>
                          </DropdownMenu.Root>
                        </span>
                      </Item.Actions>
                    </Item.Root>
                  {/each}
                </Item.Group>
              </section>
            {/each}
          </div>
        </div>
      {/if}
    </div>

    {#if doc}
      <div
        class={expanded
          ? "fixed inset-0 z-50 flex"
          : "flex border-l border-border max-md:fixed max-md:inset-0 max-md:z-50 md:w-1/2 md:shrink-0"}
      >
        <ArtifactViewer class="h-full w-full rounded-none border-0">
          <ArtifactViewerHeader>
            <ArtifactViewerTitle format={doc.format}>{doc.title}</ArtifactViewerTitle>
            <ArtifactViewerOpenIn />
            <ArtifactViewerDownload />
            <ArtifactViewerExpand onclick={() => (expanded = !expanded)} />
            <ArtifactViewerClose onclick={close} />
          </ArtifactViewerHeader>
          <ArtifactViewerContent>
            <ArtifactViewerPaper class="px-8 py-[30px]">
              <div class="font-mono text-[10.5px] tracking-[2px] text-[#7a7974]">
                {doc.paper.kicker}
              </div>
              <div class="mt-2.5 font-serif text-2xl leading-[1.15] font-bold">
                {doc.paper.headline}
              </div>
              <p class="mt-3 text-[12.5px] leading-[1.7] text-[#3d3c38]">
                {#each doc.paper.lead as s (s.t)}
                  {#if s.b}<b>{s.t}</b>{:else if s.link}<span class="text-[#3b6fd6]">{s.t}</span>{:else}{s.t}{/if}
                {/each}
              </p>
              <div class="mt-4 mb-2.5 h-0.5 bg-[#22406b]"></div>
              <div class="font-serif text-base font-bold text-[#22406b]">{doc.paper.heading}</div>
              <p class="mt-3 text-[12.5px] leading-[1.7] text-[#3d3c38]">
                {#each doc.paper.body as s (s.t)}
                  {#if s.b}<b>{s.t}</b>{:else}{s.t}{/if}
                {/each}
              </p>
            </ArtifactViewerPaper>
          </ArtifactViewerContent>
        </ArtifactViewer>
      </div>
    {/if}
  </div>
</div>
</ElevationProvider>

// Sample data for the AI chat example (Keeper = the sample agent). Shared by react.tsx, vue.vue and
// svelte.svelte: one app with a home, a thread, an artifact viewer and a library.

export type Segment = { t: string; b?: boolean; link?: boolean };

export interface PaperDoc {
  kicker: string;
  headline: string;
  lead: Segment[];
  heading: string;
  body: Segment[];
}

export interface ArtifactDoc {
  id: string;
  title: string;
  /** Card meta line, e.g. "Document · PDF". */
  meta: string;
  /** Shown after the viewer title, in mono. */
  format: string;
  kind: "document";
  /** Card shows the cropped page thumbnail instead of the icon tile. */
  thumbnail: boolean;
  paper: PaperDoc;
}

export type Block =
  | { type: "markdown"; text: string }
  | { type: "code"; code: string; language: "bash" | "typescript" }
  | { type: "archive"; title: string; meta: string }
  | { type: "docs"; ids: string[] };

export interface Turn {
  id: string;
  role: "assistant" | "user";
  blocks: Block[];
}

export const appName = "Edmi";
export const nav = [
  { view: "thread", label: "Chats" },
  { view: "library", label: "Library" },
] as const;
export type View = "home" | "thread" | "library";

export const recents = [
  "Keeper starter plan",
  "Eight index ideas",
  "Rebalance MAG4",
  "Launch post draft",
];

export const user = { name: "Dwi", initials: "D" };
export const greeting = "Good evening, Dwi";
export const project = "Roadmap";
export const title = "Keeper starter plan";
export const suggestions = [
  "Write a launch post",
  "Compare fees",
  "Add a token",
];
export const agent = {
  id: "keeper",
  name: "Keeper",
  scope: "trading",
  color: "chart-3",
};

export const notes = `**Before you use this document:**

- **The ranking is a judgment, not a score.** Data backs each idea but not the order.
- **Research is partial.** Some competitors were not checked; all are flagged.

Sources I re-checked:

- [RevenueCat subscription report](https://example.com/revenuecat)
- [Stripe founder data](https://example.com/stripe)
- [Jupiter API terms](https://example.com/jupiter)`;

export const processNote =
  "Updating the task list and marking finished items complete.";

export const thread: Turn[] = [
  {
    id: "t1",
    role: "assistant",
    blocks: [
      {
        type: "markdown",
        text: `**Check before you start:** the quote path for \`@jup-ag/api\` is not confirmed yet (probably \`@jup-ag/api/quote\`). Flagged in \`docs/open-questions.md\`.

**Two open questions** in \`docs/open-questions.md\`:

- Managed RPC in production (default) or your own node?
- Start with one keeper instance? Default is 1.`,
      },
      { type: "archive", title: "Keeper starter", meta: "ZIP" },
    ],
  },
  {
    id: "t2",
    role: "user",
    blocks: [
      {
        type: "markdown",
        text: "What prompt starts the agent after the repo is cloned?",
      },
    ],
  },
  {
    id: "t3",
    role: "assistant",
    blocks: [
      {
        type: "markdown",
        text: "The kit ships a `/next-phase` command. After cloning and unzipping into the repo root, type this in your coding agent:",
      },
      { type: "code", language: "bash", code: "/next-phase 00" },
      { type: "markdown", text: "Or the short plain prompt:" },
      {
        type: "code",
        language: "bash",
        code: 'Read AGENTS.md, then docs/README.md in order. Do phase 00 in docs/plans/00-scaffold.md until the "Done when" checklist passes.',
      },
    ],
  },
  {
    id: "t4",
    role: "user",
    blocks: [
      {
        type: "markdown",
        text: "Good. Which index ideas can a team of 1–3 ship first?",
      },
    ],
  },
  {
    id: "t5",
    role: "assistant",
    blocks: [
      { type: "markdown", text: notes },
      { type: "docs", ids: ["pdf", "md"] },
    ],
  },
  {
    id: "t6",
    role: "user",
    blocks: [
      {
        type: "markdown",
        text: "Add a slide version, point by point?",
      },
    ],
  },
  {
    id: "t7",
    role: "assistant",
    blocks: [{ type: "markdown", text: processNote }],
  },
];

export const docs: ArtifactDoc[] = [
  {
    id: "pdf",
    title: "Eight index ideas",
    meta: "Document · PDF",
    format: "PDF",
    kind: "document",
    thumbnail: true,
    paper: {
      kicker: "RESEARCH · 8 INDEX IDEAS · OCT 2026",
      headline: "Distribution, not AI, picks the winner",
      lead: [
        {
          t: "Some indexes can win now, but the product shape and channel decide it. Three shapes work for teams of 1–3 (",
        },
        { t: "Stripe", link: true },
        { t: "; " },
        { t: "RevenueCat", link: true },
        { t: "). " },
        { t: "None of the eight ideas passes without conditions.", b: true },
        {
          t: " The three best supported: idea 8 as a B2B ops layer, idea 3 as a local terminal for developers, idea 4 as a learning path.",
        },
      ],
      heading: "What wins now: narrow vertical, recurring billing, own channel",
      body: [
        {
          t: "The first winning shape is vertical B2B. Solo founders in the top decile are about ",
        },
        { t: "twice as likely to build AI-native products", b: true },
        { t: " and sell to 10 countries in month one." },
      ],
    },
  },
  {
    id: "md",
    title: "Eight index ideas",
    meta: "Document · MD",
    format: "MD",
    kind: "document",
    thumbnail: false,
    paper: {
      kicker: "NOTES · 8 INDEX IDEAS · OCT 2026",
      headline: "Eight index ideas, point by point",
      lead: [
        {
          t: "Each idea is scored on channel, margin and time to first holder. ",
        },
        { t: "Ideas 3, 4 and 8 clear the bar", b: true },
        { t: "; the other five need a channel first." },
      ],
      heading: "Open conditions per idea",
      body: [
        { t: "Idea 8 needs one design partner. Idea 3 needs a " },
        { t: "signed terminal build", b: true },
        { t: ". Idea 4 needs a curriculum owner." },
      ],
    },
  },
  {
    id: "mag4",
    title: "MAG4 — Editorial minimal",
    meta: "Design · Draft",
    format: "DESIGN",
    kind: "document",
    thumbnail: false,
    paper: {
      kicker: "DESIGN · MAG4 · OCT 2026",
      headline: "MAG4, editorial and minimal",
      lead: [
        { t: "A flat, typographic index page: one " },
        { t: "serif headline", b: true },
        { t: ", a mono number column and a single accent." },
      ],
      heading: "Layout notes",
      body: [
        { t: "Cards stay flat; only the " },
        { t: "primary action", b: true },
        { t: " rises." },
      ],
    },
  },
  {
    id: "stockbreak",
    title: "Stockbreak",
    meta: "Design · Shared",
    format: "DESIGN",
    kind: "document",
    thumbnail: false,
    paper: {
      kicker: "DESIGN · STOCKBREAK · SEP 2026",
      headline: "Stockbreak markets, shared with you",
      lead: [
        { t: "The markets, explore and portfolio pages in one " },
        { t: "layered", b: true },
        { t: " app shell." },
      ],
      heading: "Review status",
      body: [
        { t: "Two comments open on the " },
        { t: "leaderboard podium", b: true },
        { t: "." },
      ],
    },
  },
];

export type ArtifactType = "docs" | "slides" | "design";

export const tabs = [
  { value: "all", label: "All" },
  { value: "yours", label: "Yours" },
  { value: "shared", label: "Shared with you" },
];

export const banner = {
  title: "Designs live here now",
  text: "New slides and designs are saved as artifacts.",
  action: "Open the design home",
};

export const tiles: { type: ArtifactType; label: string }[] = [
  { type: "docs", label: "Docs" },
  { type: "slides", label: "Slides" },
  { type: "design", label: "Design" },
];

export interface LibraryItem {
  id: string;
  type: ArtifactType;
  title: string;
  note?: string;
  /** Appears under "Shared with you" (and not under "Yours"). */
  shared?: boolean;
  viewed: string;
  /** Viewer document opened by this row. */
  docId: string;
}

export const groups: { label: string; items: LibraryItem[] }[] = [
  {
    label: "Today",
    items: [
      {
        id: "a1",
        type: "design",
        title: "MAG4 — Editorial minimal",
        viewed: "Viewed 20m ago",
        docId: "mag4",
      },
      {
        id: "a2",
        type: "slides",
        title: "8 index ideas",
        viewed: "Viewed 1h ago",
        docId: "pdf",
      },
    ],
  },
  {
    label: "September",
    items: [
      {
        id: "a3",
        type: "docs",
        title: "Keeper spec",
        viewed: "Viewed Sep 24",
        docId: "md",
      },
      {
        id: "a4",
        type: "design",
        title: "Stockbreak",
        note: "Shared with you",
        shared: true,
        viewed: "Viewed Sep 26",
        docId: "stockbreak",
      },
    ],
  },
];

export const menu = ["Open", "Rename", "Share", "Delete"];

export const composer = {
  disclaimer: "Edmi is AI and can make mistakes.",
  models: [
    { id: "opus", label: "Opus" },
    { id: "sonnet", label: "Sonnet" },
  ],
  efforts: [
    { id: "low", label: "Low" },
    { id: "medium", label: "Medium" },
    { id: "high", label: "High" },
  ],
  modes: [
    { id: "auto", label: "Auto" },
    { id: "ask", label: "Ask first" },
  ],
};

// Agent-home task list (Queue).
export interface Task {
  id: string;
  title: string;
  age: string;
  agent: { id: string; color: string };
  status: "running" | "done";
}

export const tasks: Task[] = [
  {
    id: "1",
    title: "Draft feed post",
    age: "1m",
    agent: { id: "writer", color: "chart-4" },
    status: "running",
  },
  {
    id: "2",
    title: "Rebalance MAG4",
    age: "4d",
    agent: { id: "keeper", color: "chart-3" },
    status: "done",
  },
];