@exegia/corpora-ui 0.28.0 → 1.0.0

package/src/components/composed/chat/__tests__/composer.test.tsx

@@ -0,0 +1,81 @@
+import { describe, expect, mock, test } from "bun:test"
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { Provider } from "jotai"
+
+import {
+  CommandMenu,
+  Composer,
+  SuggestedPrompts,
+  type ComposerSuggestionsProps,
+} from "../composer"
+import { SuggestedPrompt } from "@/components/composed/ai/suggested-prompt"
+
+describe("Composer", () => {
+  test("rests as a pill with the send hint and expands on focus", async () => {
+    const user = userEvent.setup()
+    const onSubmit = mock(() => {})
+    render(
+      <Provider>
+        <Composer
+          ComposerMenu={() => <CommandMenu items={[]} />}
+          onSubmit={onSubmit}
+          safetyNote={null}
+        />
+      </Provider>
+    )
+
+    expect(screen.getByText("to send message")).toBeDefined()
+    expect(screen.queryByRole("button", { name: "Send message" })).toBeNull()
+
+    const field = screen.getByRole("textbox", { name: "Message" })
+    await user.click(field)
+    expect(
+      await screen.findByRole("button", { name: "Send message" })
+    ).toBeDefined()
+    expect(screen.getByRole("button", { name: "Add attachment" })).toBeDefined()
+
+    await user.type(field, "Validate ¶12")
+    await user.keyboard("{Meta>}{Enter}{/Meta}")
+    expect(onSubmit).toHaveBeenCalledWith("Validate ¶12", "answer", [])
+  })
+
+  test("folds the suggested prompts behind the disclosure and routes a pick", async () => {
+    const user = userEvent.setup()
+    const onSelect = mock(() => {})
+    const Suggestions = (props: ComposerSuggestionsProps) => (
+      <SuggestedPrompts onOpenChange={props.onOpenChange} open={props.open}>
+        <SuggestedPrompt onSelect={onSelect}>Check ¶12</SuggestedPrompt>
+      </SuggestedPrompts>
+    )
+    render(
+      <Provider>
+        <Composer safetyNote={null} Suggestions={Suggestions} />
+      </Provider>
+    )
+
+    const trigger = screen.getByRole("button", { name: /Suggestions \(1\)/ })
+    expect(trigger.getAttribute("aria-expanded")).toBe("true")
+
+    await user.click(await screen.findByRole("button", { name: /Check ¶12/ }))
+    expect(onSelect).toHaveBeenCalledTimes(1)
+
+    // Only the disclosure state is asserted: the panel leaves through an
+    // AnimatePresence exit, and happy-dom's stubbed `Element.animate` never
+    // finishes it, so the row stays mounted here but not in a browser.
+    await user.click(trigger)
+    expect(trigger.getAttribute("aria-expanded")).toBe("false")
+  })
+
+  test("shows Stop while streaming and routes it to onStop", async () => {
+    const user = userEvent.setup()
+    const onStop = mock(() => {})
+    render(
+      <Provider>
+        <Composer expanded isStreaming onStop={onStop} safetyNote={null} />
+      </Provider>
+    )
+    await user.click(screen.getByRole("button", { name: "Stop" }))
+    expect(onStop).toHaveBeenCalledTimes(1)
+  })
+})

package/src/components/composed/chat/__tests__/flowchart.test.tsx

@@ -0,0 +1,132 @@
+import { afterEach, describe, expect, it, mock } from "bun:test"
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react"
+
+import { Flowchart, type StepNode } from "../flowchart"
+
+const STEPS: StepNode[] = [
+  { id: "a", row: 0, x: 0.5, w: 200, title: "A" },
+  { id: "b", row: 1, x: 0.5, w: 200, title: "B" },
+]
+
+afterEach(cleanup)
+
+describe("Flowchart", () => {
+  it("lays out the default steps and draws a connector", () => {
+    const { container } = render(<Flowchart.Root />)
+    expect(screen.getByText("Iliad corpus loaded")).toBeTruthy()
+    expect(screen.getByText("Text node")).toBeTruthy()
+    const path = container.querySelector("path[data-edge]")!
+    expect(path.getAttribute("d")).toMatch(/^M \d/)
+    const canvas = container.querySelector('[data-slot="flowchart"]') as HTMLElement
+    expect(parseFloat(canvas.style.minHeight)).toBeGreaterThan(0)
+  })
+
+  it("lights the connector when a step is selected", () => {
+    const { container } = render(<Flowchart.Root />)
+    const step = screen.getByRole("button", { name: /Iliad corpus loaded/ })
+    fireEvent.click(step)
+    expect(step.getAttribute("aria-pressed")).toBe("true")
+    expect(container.querySelector("path[data-edge]")!.getAttribute("stroke")).toContain("accent")
+  })
+
+  it("renders custom children and chains edges by default", () => {
+    const { container } = render(<Flowchart.Root steps={[{ ...STEPS[0], children: <em>custom</em> }, STEPS[1]]} />)
+    expect(screen.getByText("custom").tagName).toBe("EM")
+    expect(container.querySelector('path[data-edge="a->b"]')).toBeTruthy()
+  })
+
+  it("offers add child, duplicate and delete from the context menu, confirming orphans", async () => {
+    const onAdd = mock(() => {})
+    const onRemove = mock(() => {})
+    const onDuplicate = mock(() => {})
+    render(<Flowchart.Root steps={STEPS} onAdd={onAdd} onRemove={onRemove} onDuplicate={onDuplicate} />)
+    expect(screen.queryByRole("button", { name: /Add node/ })).toBeNull()
+    fireEvent.contextMenu(screen.getByRole("button", { name: "A" }))
+    fireEvent.click(await screen.findByRole("menuitem", { name: "Add child" }))
+    expect(onAdd).toHaveBeenCalledWith("a", "bottom")
+    fireEvent.contextMenu(screen.getByRole("button", { name: "B" }))
+    fireEvent.click(await screen.findByRole("menuitem", { name: "Duplicate" }))
+    expect(onDuplicate).toHaveBeenCalledWith("b")
+    // leaf: removed outright
+    fireEvent.contextMenu(screen.getByRole("button", { name: "B" }))
+    fireEvent.click(await screen.findByRole("menuitem", { name: "Delete" }))
+    expect(onRemove).toHaveBeenCalledWith("b")
+    // parent: asks first
+    fireEvent.contextMenu(screen.getByRole("button", { name: "A" }))
+    fireEvent.click(await screen.findByRole("menuitem", { name: "Delete" }))
+    const dialog = await screen.findByRole("alertdialog")
+    expect(dialog.textContent).toContain("orphaned")
+    expect(onRemove).toHaveBeenCalledTimes(1)
+    fireEvent.click(screen.getByRole("button", { name: "Delete anyway" }))
+    await waitFor(() => expect(onRemove).toHaveBeenCalledWith("a"))
+  })
+
+  it("hides the context menu when read-only", () => {
+    render(<Flowchart.Root steps={STEPS} readOnly onAdd={() => {}} onRemove={() => {}} />)
+    fireEvent.contextMenu(screen.getByRole("button", { name: "A" }))
+    expect(screen.queryByRole("menu")).toBeNull()
+  })
+
+  it("renames a card from its pill and labels conditions Node n", async () => {
+    const onRename = mock(() => {})
+    render(
+      <Flowchart.Root
+        steps={[{ ...STEPS[0], kind: { label: "Trigger", hue: "#000" } }, { ...STEPS[1], condition: true }]}
+        onRename={onRename}
+      />
+    )
+    expect(screen.getByText("Trigger")).toBeTruthy()
+    expect(screen.getByText("Node 2")).toBeTruthy()
+    fireEvent.doubleClick(screen.getByText("Node 2"))
+    const input = screen.getByRole("textbox", { name: "Node name" })
+    fireEvent.change(input, { target: { value: "Cross references" } })
+    fireEvent.keyDown(input, { key: "Enter" })
+    expect(onRename).toHaveBeenCalledWith("b", "Cross references")
+  })
+
+  it("zooms with the buttons", () => {
+    const { container } = render(<Flowchart.Root steps={STEPS} zoomable />)
+    fireEvent.click(screen.getByRole("button", { name: "Zoom in" }))
+    expect(screen.getByText("125%")).toBeTruthy()
+    const canvas = container.querySelector('[data-slot="flowchart"]') as HTMLElement
+    expect(canvas.style.backgroundSize).toContain("27.5px")
+  })
+
+  it("fills its parent and keeps a min-height floor when zooming out or removing a card", () => {
+    const { container, rerender } = render(<Flowchart.Root steps={STEPS} zoomable height={300} />)
+    const canvas = container.querySelector('[data-slot="flowchart"]') as HTMLElement
+    expect(canvas.className).toContain("h-full")
+    expect(canvas.style.minHeight).toBe("300px")
+    fireEvent.click(screen.getByRole("button", { name: "Zoom out" }))
+    expect(canvas.style.minHeight).toBe("300px")
+    rerender(<Flowchart.Root steps={[STEPS[0]]} zoomable height={300} />)
+    expect(canvas.style.minHeight).toBe("300px")
+  })
+
+  it("clears the selected card on a still click on empty canvas", () => {
+    const { container } = render(<Flowchart.Root steps={STEPS} />)
+    const step = screen.getByRole("button", { name: "A" })
+    fireEvent.click(step)
+    expect(step.getAttribute("aria-pressed")).toBe("true")
+    const canvas = container.querySelector('[data-slot="flowchart"]') as HTMLElement
+    fireEvent.pointerDown(canvas, { button: 0, clientX: 5, clientY: 5 })
+    fireEvent.pointerUp(canvas)
+    expect(step.getAttribute("aria-pressed")).toBe("false")
+  })
+
+  it("selects a connector and edits it from the toolbar", () => {
+    const onEdgeRemove = mock(() => {})
+    const onEdgeChange = mock(() => {})
+    const { container } = render(<Flowchart.Root steps={STEPS} onEdgeRemove={onEdgeRemove} onEdgeChange={onEdgeChange} />)
+    expect(screen.queryByRole("toolbar")).toBeNull()
+    // the wide transparent twin is the click target
+    fireEvent.click(container.querySelector('path[data-edge="a->b"]')!.nextElementSibling!)
+    expect(screen.getByRole("toolbar", { name: "Connector" })).toBeTruthy()
+    expect(container.querySelector('path[data-edge="a->b"]')!.getAttribute("stroke")).toContain("accent")
+    fireEvent.click(screen.getByRole("button", { name: "Stroke 3" }))
+    expect(onEdgeChange).toHaveBeenCalledWith("a->b", { strokeWidth: 3 })
+    fireEvent.click(screen.getByRole("button", { name: "Disconnect" }))
+    expect(onEdgeRemove).toHaveBeenCalledWith("a->b")
+    expect(screen.queryByRole("toolbar")).toBeNull()
+  })
+})

package/src/components/composed/chat/__tests__/markdown.test.tsx

@@ -0,0 +1,25 @@
+import { describe, expect, mock, test } from "bun:test"
+import { render, screen, waitFor } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { Provider } from "jotai"
+
+import { Markdown } from "../markdown"
+
+const SRC = "# Title\n\nBody with `code`.\n\n- one\n- two"
+
+describe("Markdown", () => {
+  test("toggles between rendered preview and raw markup", async () => {
+    const onCopy = mock(() => {})
+    render(<Provider><Markdown source={SRC} onCopy={onCopy} /></Provider>)
+    expect(screen.getByRole("heading", { level: 1 }).textContent).toBe("Title")
+    expect(screen.getAllByRole("listitem").length).toBe(2)
+    const user = userEvent.setup()
+    await user.click(screen.getByRole("tab", { name: "Markup" }))
+    await waitFor(() => {
+      expect(screen.queryByRole("heading", { level: 1 })).toBeNull()
+      expect(screen.getByText(/# Title/)).toBeDefined()
+    })
+    await user.click(screen.getByRole("button", { name: "Copy markdown" }))
+    expect(onCopy).toHaveBeenCalledWith(SRC)
+  })
+})

package/src/components/composed/chat/actions.tsx

@@ -0,0 +1,81 @@
+import { Bubble } from "@/components/atoms"
+import { Button } from "@/components/ui/button"
+import {
+  Tooltip,
+  TooltipCreateHandle,
+  TooltipPopup,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import type {
+  IBubbleActionsProps,
+  TBubbleActionKey,
+  TBubbleActionPayload,
+} from "./type"
+import { useCallback, useMemo, type ComponentType } from "react"
+
+const tooltipHandle = TooltipCreateHandle<ComponentType>()
+
+export function Actions<K extends TBubbleActionKey = TBubbleActionKey>({
+  actions,
+  size,
+  onClick,
+}: IBubbleActionsProps<K>) {
+  const handleClick = useCallback(
+    (key: K, payload: TBubbleActionPayload) => {
+      if (onClick) onClick(key, payload)
+    },
+    [onClick]
+  )
+
+  const renderActionButton = useCallback(
+    (key?: K, action?: (typeof actions)[K]) => {
+      if (!key || !action) return
+      return (
+        <Button
+          aria-label={action?.tooltip}
+          size={action?.size ?? size}
+          variant="ghost"
+          onClick={() => {
+            const payload =
+              (action?.onClick?.arguments[1] as TBubbleActionPayload) ??
+              undefined
+            handleClick(key, payload)
+          }}
+        />
+      )
+    },
+    [handleClick, size]
+  )
+
+  const actionButtons = useMemo(() => {
+    if (!actions || Object.values(actions).length === 0) return []
+    return Object.entries<(typeof actions)[K]>(actions).map(([key, action]) => {
+      if (!key || !action) return
+      //return renderActionButton(key as K, action as typeof actions[K]);
+      return { key: key, action }
+    })
+  }, [actions])
+
+  return (
+    <TooltipProvider>
+      <Bubble.Actions>
+        {actionButtons &&
+          actionButtons.map((item, index) => (
+            <TooltipTrigger
+              key={index}
+              render={renderActionButton(item?.key as K, item?.action)}
+            >
+              {item?.action.icon}
+            </TooltipTrigger>
+          ))}
+      </Bubble.Actions>
+
+      <Tooltip handle={tooltipHandle}>
+        {({ payload: Payload }) => (
+          <TooltipPopup>{Payload !== undefined && <Payload />}</TooltipPopup>
+        )}
+      </Tooltip>
+    </TooltipProvider>
+  )
+}

package/src/components/composed/chat/attachment.tsx

@@ -0,0 +1,228 @@
+"use client"
+
+import { AtSign, BookOpen, Download, Film, FileText, Image as ImageIcon, Link as LinkIcon, Reply, TextQuote } from "lucide-react"
+import type * as React from "react"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { PreviewCard, PreviewCardPopup, PreviewCardTrigger } from "@/components/ui/preview-card"
+import {
+  AvatarHandle,
+  DurationPill,
+  Favicon,
+  IconTile,
+  PlayButton,
+  QuoteRail,
+  RemoveButton,
+  Thumbnail,
+  Waveform,
+} from "@/components/ui/chat"
+
+export type AttachmentKind =
+  | "document"
+  | "image"
+  | "media"
+  | "text-selection"
+  | "chat-reply"
+  | "username-handle"
+  | "url-link"
+
+export type AttachmentVariant = "default" | "preview"
+
+interface AttachmentBase {
+  id?: string
+  className?: string
+  style?: React.CSSProperties
+  /** `default` is the 240×52 composer chip; `preview` the in-bubble rendering. */
+  variant?: AttachmentVariant
+  /** Primary line of the chip (file name, handle, URL, source…). */
+  title: React.ReactNode
+  /** Secondary line of the chip ("PDF · 2.4 MB", "Link · fetching preview"…). */
+  meta?: React.ReactNode
+  /** Fires from the chip's ✕. Omit (or pass `removable={false}`) to hide it. */
+  onRemove?: () => void
+  removable?: boolean
+}
+
+export type AttachmentProps = AttachmentBase &
+  (
+    | { kind: "document"; onAction?: () => void; actionIcon?: React.ReactNode }
+    | { kind: "image"; src?: string; alt?: string }
+    | { kind: "media"; src?: string; poster?: string; duration?: React.ReactNode; audio?: boolean; onPlay?: () => void; waveform?: number[] }
+    | { kind: "text-selection"; quote?: React.ReactNode }
+    | { kind: "chat-reply"; author?: React.ReactNode; time?: React.ReactNode; body?: React.ReactNode }
+    | { kind: "username-handle"; src?: string; initials?: string }
+    | { kind: "url-link"; src?: string; domain?: React.ReactNode; description?: React.ReactNode; favicon?: string; href?: string }
+  )
+
+const KIND_ICON: Record<AttachmentKind, React.ComponentType<{ className?: string }>> = {
+  document: FileText,
+  image: ImageIcon,
+  media: Film,
+  "text-selection": TextQuote,
+  "chat-reply": Reply,
+  "username-handle": AtSign,
+  "url-link": LinkIcon,
+}
+
+const chipClasses = "flex h-[52px] w-60 items-center gap-2.5 rounded-[10px] border border-border-default bg-surface-card py-1.5 pl-1.5 pr-2.5 text-left"
+const titleClasses = "truncate text-[13px] font-medium leading-[15px] text-text-primary"
+const metaClasses = "truncate text-[11px] leading-3 text-text-secondary"
+
+/**
+ * One attachment in every shape the chat needs — a composer chip before
+ * sending (`variant="default"`) or the rendering inside a bubble
+ * (`variant="preview"`).
+ *
+ * @sketch "Component / Attachment / {Image, Media, Document, Text Selection, Chat Reply, Username Handle, URL Link} / {Default, Preview}", "Component / Attachment / Media / Preview Audio"
+ */
+export function Attachment(props: AttachmentProps): React.ReactElement {
+  if (props.variant === "preview") return <AttachmentPreview {...props} />
+  if (!PREVIEWABLE.has(props.kind)) return <AttachmentChip {...props} />
+  // A chip whose kind has a richer rendering shows it on hover / focus.
+  return (
+    <PreviewCard>
+      <PreviewCardTrigger delay={300} render={<AttachmentChip {...props} />} />
+      <PreviewCardPopup className="w-fit p-1.5">
+        <AttachmentPreview {...props} variant="preview" removable={false} />
+      </PreviewCardPopup>
+    </PreviewCard>
+  )
+}
+
+/** Kinds whose preview rendering says more than the chip: images, media, quotes, replies and link cards. */
+const PREVIEWABLE: ReadonlySet<AttachmentKind> = new Set(["image", "media", "text-selection", "chat-reply", "url-link"])
+
+function AttachmentChip(props: AttachmentProps & Record<string, unknown>): React.ReactElement {
+  const { kind, variant: _variant, title, meta, onRemove, removable = true, className, id, style, ...rest } = props
+  const Icon = KIND_ICON[kind]
+  const leading =
+    kind === "image" ? (
+      <Thumbnail src={props.src} alt={props.alt} />
+    ) : (
+      <IconTile>
+        <Icon />
+      </IconTile>
+    )
+  return (
+    <div {...chipRest(rest)} data-slot="attachment" data-kind={kind} data-variant="default" className={cn(chipClasses, className)} id={id} style={style}>
+      {leading}
+      <span className="flex min-w-0 flex-1 flex-col gap-0.5">
+        <span className={titleClasses}>{title}</span>
+        {meta ? <span className={metaClasses}>{meta}</span> : null}
+      </span>
+      {removable && onRemove ? <RemoveButton onClick={onRemove} /> : null}
+    </div>
+  )
+}
+
+/** Only what the preview-card trigger merges in (ref, hover/focus handlers, aria); the kind-specific props stay off the DOM. */
+const KIND_PROPS = new Set(["src", "alt", "poster", "duration", "audio", "onPlay", "waveform", "quote", "author", "time", "body", "initials", "domain", "description", "favicon", "href", "onAction", "actionIcon"])
+function chipRest(rest: Record<string, unknown>): Record<string, unknown> {
+  return Object.fromEntries(Object.entries(rest).filter(([k]) => !KIND_PROPS.has(k)))
+}
+
+function AttachmentPreview(props: AttachmentProps): React.ReactElement {
+  const { kind, variant: _variant, title, meta, onRemove: _onRemove, removable: _removable, className, id, style } = props
+  const shared = { "data-slot": "attachment", "data-kind": kind, "data-variant": "preview", id, style } as const
+
+  switch (props.kind) {
+    case "image":
+      return (
+        <Thumbnail size="lg" src={props.src} alt={props.alt} className={className} {...shared} />
+      )
+    case "media": {
+      const { src, poster, duration, audio, onPlay, waveform } = props
+      if (audio) {
+        return (
+          <div {...shared} className={cn("flex h-14 w-60 items-center gap-3 rounded-[10px] border border-border-default bg-surface-card py-2.5 pl-2.5 pr-3.5", className)}>
+            <PlayButton onClick={onPlay} className="bg-text-primary text-text-inverse hover:bg-text-primary/85" />
+            <span className="flex min-w-0 flex-1 flex-col gap-1">
+              <Waveform bars={waveform} />
+              <span className={metaClasses}>{meta ?? title}</span>
+            </span>
+          </div>
+        )
+      }
+      return (
+        <Thumbnail size="lg" src={poster ?? src} className={className} {...shared}>
+          <PlayButton onClick={onPlay} className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
+          {duration ? <DurationPill className="absolute bottom-2 right-2">{duration}</DurationPill> : null}
+        </Thumbnail>
+      )
+    }
+    case "document": {
+      const { onAction, actionIcon } = props
+      return (
+        <div {...shared} className={cn("flex h-14 w-[260px] items-center gap-2.5 rounded-[10px] border border-border-default bg-surface-card py-2 pl-2 pr-3", className)}>
+          <IconTile><FileText /></IconTile>
+          <span className="flex min-w-0 flex-1 flex-col gap-0.5">
+            <span className={titleClasses}>{title}</span>
+            {meta ? <span className={metaClasses}>{meta}</span> : null}
+          </span>
+          {onAction ? (
+            <Button aria-label="Download" variant="ghost" size="icon-xs" onClick={onAction} className="size-6 text-icon sm:size-6">
+              {actionIcon ?? <Download />}
+            </Button>
+          ) : null}
+        </div>
+      )
+    }
+    case "text-selection":
+      return (
+        <div {...shared} className={cn("flex w-[260px] gap-2.5 rounded-[10px] bg-surface-subtle p-2.5", className)}>
+          <QuoteRail />
+          <span className="flex min-w-0 flex-1 flex-col gap-1">
+            <span className="flex items-center gap-1.5 text-[11px] font-semibold leading-4 text-accent-text [&_svg]:size-4 [&_svg]:text-accent-default">
+              <BookOpen />
+              <span className="truncate">{title}</span>
+            </span>
+            <span className="line-clamp-4 text-[13px] leading-[15px] text-text-primary">{props.quote}</span>
+          </span>
+        </div>
+      )
+    case "chat-reply":
+      return (
+        <div {...shared} className={cn("flex w-[260px] gap-2 rounded-[10px] bg-surface-subtle py-2 pl-2 pr-2.5", className)}>
+          <QuoteRail />
+          <span className="flex min-w-0 flex-1 flex-col gap-0.5">
+            <span className="flex items-center gap-1.5 text-[12px] leading-4 [&_svg]:size-4 [&_svg]:text-accent-default">
+              <Reply />
+              <span className="truncate font-semibold text-accent-text">{props.author ?? title}</span>
+              {props.time ? <span className="text-[11px] text-text-muted">{props.time}</span> : null}
+            </span>
+            <span className="line-clamp-3 text-[13px] leading-[15px] text-text-primary">{props.body ?? meta}</span>
+          </span>
+        </div>
+      )
+    case "username-handle":
+      return (
+        <span {...shared} className={cn("inline-flex h-6 items-center gap-1.5 rounded-full bg-accent-subtle py-0.5 pl-0.5 pr-2 text-[13px] font-semibold leading-none text-accent-text", className)}>
+          <AvatarHandle src={props.src} initials={props.initials} />
+          {title}
+        </span>
+      )
+    case "url-link": {
+      const { src, domain, description, favicon, href } = props
+      const Tag = href ? "a" : "div"
+      return (
+        <Tag
+          {...shared}
+          href={href}
+          target={href ? "_blank" : undefined}
+          rel={href ? "noreferrer" : undefined}
+          className={cn("block w-60 overflow-hidden rounded-[10px] border border-border-default bg-surface-card", className)}
+        >
+          <Thumbnail size="lg" src={src} className="h-[120px] w-full rounded-none" />
+          <span className="flex flex-col gap-1 px-3 pb-3 pt-2.5">
+            <span className="flex items-center gap-1.5 font-mono text-[10.5px] leading-3 text-text-secondary">
+              <Favicon src={favicon} />
+              <span className="truncate">{domain}</span>
+            </span>
+            <span className={titleClasses}>{title}</span>
+            {description ? <span className="line-clamp-2 text-[11px] leading-[14px] text-text-secondary">{description}</span> : null}
+          </span>
+        </Tag>
+      )
+    }
+  }
+}