@exegia/corpora-ui 0.28.0 → 1.0.0

package/src/components/composed/ai/streaming-text.tsx

@@ -0,0 +1,94 @@
+"use client"
+
+import { useReducedMotion } from "motion/react"
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { InlineSource } from "@/components/ui/chat"
+
+/** A word, or an inline citation; extra fields turn the chip into a hover preview. */
+export type StreamingToken =
+  | { text: string }
+  | { cite: string; favicon?: string; title?: string; description?: string; href?: string }
+
+export interface StreamingTextProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** Paragraphs, each a token list; a string is split on spaces. */
+  paragraphs: (string | StreamingToken[])[]
+  /** Reveal words over time and show the caret. */
+  streaming?: boolean
+  /** Reveal gap in ms; defaults to the --stream-gap token (60ms). */
+  wordMs?: number
+}
+
+
+
+const toTokens = (p: string | StreamingToken[]): StreamingToken[] => (typeof p === "string" ? p.split(" ").map((text) => ({ text })) : p)
+
+/**
+ * Streamed answer: paragraphs with inline source previews and a caret.
+ * Actions, sources and follow-ups belong to the host.
+ *
+ * @sketch "Component / Streaming Text"
+ */
+export function StreamingText({
+  paragraphs, streaming = false, wordMs, className, ...props
+}: StreamingTextProps): React.ReactElement {
+  const reduceMotion = useReducedMotion()
+  const tokens = React.useMemo(() => paragraphs.map(toTokens), [paragraphs])
+  const total = tokens.reduce((n, p) => n + p.length, 0)
+  // Revealed-word counter; a change in `total` resets it during render (the
+  // React "adjust state on prop change" pattern), and only the interval
+  // advances it, so no effect ever sets state synchronously.
+  const [reveal, setReveal] = React.useState({ total, n: 0 })
+  if (reveal.total !== total) setReveal({ total, n: 0 })
+  const animate = streaming && !reduceMotion
+  const shown = animate ? Math.min(reveal.n, total) : total
+
+  React.useEffect(() => {
+    if (!animate) return
+    // The JS cadence reads --stream-gap so the token stays the single source
+    // of truth; an explicit wordMs still wins. Reading it here keeps SSR safe.
+    const gapMs =
+      wordMs ??
+      (parseFloat(
+        getComputedStyle(document.documentElement).getPropertyValue("--stream-gap")
+      ) || 60)
+    const timer = setInterval(() => setReveal((r) => (r.n >= r.total ? r : { ...r, n: r.n + 1 })), gapMs)
+    return () => clearInterval(timer)
+  }, [animate, wordMs, total])
+
+  const done = shown >= total
+  let cursor = 0
+  // Plain CSS transitions: each word fades in once and never re-animates on
+  // re-render, which is what kept the Motion version flickering.
+  const word = (visible: boolean) =>
+    cn(
+      "inline transition-[opacity,filter] duration-[var(--stream-fade)] ease-[var(--stream-ease)]",
+      !reduceMotion && !visible ? "opacity-0 blur-[var(--stream-blur)]" : "blur-[0px]",
+    )
+
+  return (
+    <div data-slot="streaming-text" data-streaming={streaming && !done} className={cn("flex w-[380px] max-w-full flex-col", className)} {...props}>
+      {tokens.map((p, pi) => (
+        <p key={pi} className="text-[13px] leading-5 text-text-primary">
+          {p.map((t, ti) => {
+            const index = cursor++
+            const visible = index < shown
+            const last = index === shown - 1 && streaming && !done
+            return (
+              <React.Fragment key={ti}>
+                <span className={word(visible)}>
+                  {"cite" in t ? (
+                    <InlineSource domain={t.cite} favicon={t.favicon} title={t.title} description={t.description} href={t.href} />
+                  ) : (
+                    t.text
+                  )}{" "}
+                </span>
+                {last ? <span aria-hidden="true" className="ml-px inline-block h-3.5 w-0.5 animate-pulse bg-text-primary align-middle" /> : null}
+              </React.Fragment>
+            )
+          })}
+        </p>
+      ))}
+    </div>
+  )
+}

package/src/components/composed/ai/suggested-prompt.tsx

@@ -0,0 +1,183 @@
+"use client"
+
+import { ChevronDown, Plus, Sparkle, Sparkles } from "lucide-react"
+import {
+  AnimatePresence,
+  motion,
+  useReducedMotion,
+  type HTMLMotionProps,
+} from "motion/react"
+import { isValidElement, useId, useState } from "react"
+import type * as React from "react"
+import { cn } from "@/lib/utils"
+import { EASE_IN_OUT, SPRING_PANEL } from "@/lib/ease"
+import { flattenChildren, ITEM_VARIANTS, LIST_VARIANTS } from "./shared"
+
+export interface SuggestedPromptProps extends Omit<
+  HTMLMotionProps<"button">,
+  "children" | "onSelect"
+> {
+  /** The prompt itself — what the person would have typed. */
+  children: React.ReactNode
+  onSelect?: () => void
+  /**
+   * Shared-layout id. Give the resulting message bubble the same id and the
+   * row flies into it when this one unmounts.
+   */
+  layoutId?: string
+}
+
+/**
+ * One suggested prompt: a violet spark, the prompt, and a `+` marking that
+ * picking it drops the prompt into the thread. The whole row is the control —
+ * the `+` is an affordance, not a second action.
+ */
+export function SuggestedPrompt({
+  children,
+  onSelect,
+  layoutId,
+  className,
+  ...props
+}: SuggestedPromptProps): React.ReactElement {
+  const reduceMotion = useReducedMotion()
+  return (
+    <motion.button
+      className={cn(
+        "group/prompt flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1 text-left text-sm text-foreground/90 outline-none transition-colors duration-150 ease-smooth-out hover:bg-foreground/5 focus-visible:bg-foreground/5 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      data-slot="suggested-prompt"
+      layoutId={reduceMotion ? undefined : layoutId}
+      onClick={onSelect}
+      type="button"
+      whileTap={reduceMotion ? undefined : { scale: 0.985 }}
+      {...props}
+    >
+      <Sparkle
+        aria-hidden="true"
+        className="size-3.5 shrink-0 fill-violet-500/30 stroke-[1.5] stroke-violet-600 dark:fill-violet-400/20 dark:stroke-violet-400"
+      />
+      <span className="min-w-0 flex-1 truncate">{children}</span>
+      <Plus
+        aria-hidden="true"
+        className="size-3.5 shrink-0 stroke-2 text-muted-foreground/60 transition-colors duration-150 ease-smooth-out group-hover/prompt:text-foreground"
+      />
+    </motion.button>
+  )
+}
+
+export interface SuggestedPromptsProps extends Omit<
+  HTMLMotionProps<"div">,
+  "children"
+> {
+  /** The `SuggestedPrompt` rows. */
+  children: React.ReactNode
+  /** Overrides the count derived from `children`. */
+  count?: number
+  /** Names the disclosure. `Suggestions (n)` by default. */
+  label?: (count: number) => React.ReactNode
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+/**
+ * The "Suggestions (n)" disclosure above the composer: a chevron that swings
+ * from left (folded) to down (open) and a panel of prompts that fans out
+ * beneath it, its bottom edge tucked behind the composer pill.
+ */
+export function SuggestedPrompts({
+  children,
+  count,
+  label = (n) => `Suggestions (${n})`,
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange,
+  className,
+  ...props
+}: SuggestedPromptsProps): React.ReactElement | null {
+  const panelId = useId()
+  const reduceMotion = useReducedMotion()
+  const [internalOpen, setInternalOpen] = useState(defaultOpen)
+  const open = openProp ?? internalOpen
+  const items = flattenChildren(children)
+
+  const setOpen = (next: boolean): void => {
+    if (openProp === undefined) setInternalOpen(next)
+    onOpenChange?.(next)
+  }
+
+  // Picking the last prompt empties `children`. Collapsing the whole block on
+  // height rather than returning null keeps the header from blinking out in a
+  // single frame while that last row is still flying to its bubble.
+  return (
+    <motion.div
+      animate={{ height: items.length ? "auto" : 0, opacity: items.length ? 1 : 0 }}
+      className={cn("flex flex-col overflow-hidden w-11/12 mx-auto", className)}
+      data-slot="suggested-prompts"
+      initial={false}
+      transition={
+        reduceMotion ? { duration: 0 } : { duration: 0.32, ease: EASE_IN_OUT }
+      }
+      {...props}
+    >
+      <motion.button
+        aria-controls={panelId}
+        aria-expanded={open}
+        className="flex w-full mx-auto cursor-pointer items-center gap-2 px-4 py-1 text-xs text-muted-foreground outline-none transition-colors duration-150 ease-smooth-out hover:text-foreground focus-visible:text-foreground"
+        data-slot="suggested-prompts-trigger"
+        onClick={() => setOpen(!open)}
+        type="button"
+        whileTap={reduceMotion ? undefined : { scale: 0.97 }}
+      >
+        <Sparkles aria-hidden="true" className="size-3.5 stroke-[1.5]" />
+        <span className="flex-1 text-left">{label(count ?? items.length)}</span>
+        <motion.span
+          animate={{ rotate: open ? 0 : 90 }}
+          className="inline-flex"
+          initial={false}
+          transition={reduceMotion ? { duration: 0 } : SPRING_PANEL}
+        >
+          <ChevronDown aria-hidden="true" className="size-4 stroke-2" />
+        </motion.span>
+      </motion.button>
+
+      <AnimatePresence initial={false}>
+        {open ? (
+          <motion.div
+            animate={{ height: "auto", opacity: 1 }}
+            // A plain height tween, deliberately not a `layout` projection —
+            // the composer shell below animates its own scale, and a second
+            // projection over the same box breaks its scale correction.
+            className="overflow-hidden"
+            exit={{ height: 0, opacity: 0 }}
+            id={panelId}
+            initial={{ height: 0, opacity: 0 }}
+            transition={
+              reduceMotion ? { duration: 0 } : { duration: 0.32, ease: EASE_IN_OUT }
+            }
+          >
+            <motion.div
+              animate="visible"
+              // The bottom padding is what the composer pill sits over, so the
+              // panel reads as tucked behind it rather than stacked on it.
+              className="-mb-5 mt-1 flex flex-col gap-0.5 border-t border-t-border rounded-md bg-secondary p-1.5 pb-6"
+              exit="hidden"
+              initial={reduceMotion ? false : "hidden"}
+              variants={LIST_VARIANTS}
+            >
+              {items.map((item, index) => (
+                <motion.div
+                  key={isValidElement(item) && item.key != null ? item.key : index}
+                  variants={reduceMotion ? undefined : ITEM_VARIANTS}
+                >
+                  {item}
+                </motion.div>
+              ))}
+            </motion.div>
+          </motion.div>
+        ) : null}
+      </AnimatePresence>
+    </motion.div>
+  )
+}

package/src/components/composed/ai/types.ts

@@ -0,0 +1,81 @@
+import type {
+  ChartProps,
+  ComposerSuggestionsProps,
+  MarkdownProps,
+  RecommendationStackProps,
+  ResearchAnswerProps,
+  UserType,
+} from "@/index"
+import type * as React from "react"
+
+export type SuggestionState = "accepted" | "rejected" | "pending"
+
+export interface DiffRow {
+  type: "add" | "remove"
+  value: React.ReactNode
+  field?: string
+}
+
+/** A word, or an inline citation; extra fields turn the chip into a hover preview. */
+export type StreamingToken =
+  | { text: string }
+  | {
+      cite: string
+      favicon?: string
+      title?: string
+      description?: string
+      href?: string
+    }
+
+export interface StreamingTextProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** Paragraphs, each a token list; a string is split on spaces. */
+  paragraphs: (string | StreamingToken[])[]
+  /** Reveal words over time and show the caret. */
+  streaming?: boolean
+  /** Reveal gap in ms; defaults to the --stream-gap token (60ms). */
+  wordMs?: number
+}
+
+/** Kind → props map for message content; the source of truth for `AIContentProps`. */
+export interface AIContentPropsMap {
+  markdown: MarkdownProps
+  research: ResearchAnswerProps
+  chart: ChartProps
+  suggestion: ComposerSuggestionsProps
+  recommendation: RecommendationStackProps
+}
+
+export type AIMessageType = keyof AIContentPropsMap
+
+/** Discriminated union of `{ kind } & props`, distributed over `T`. */
+export type AIContentProps<T extends AIMessageType = AIMessageType> = {
+  [K in T]: { kind: K } & AIContentPropsMap[K]
+}[T]
+
+export interface AIMessageProps<T extends AIMessageType = AIMessageType> {
+  /** Identity shown in the header. */
+  user?: UserType
+  type: T
+  thinking?: boolean
+  /** Replaces the default `User.Info` identity row in the header. */
+  AttachedContent?: React.ComponentType<AIContentProps<T>>
+  /** Props forwarded to `AttachedContent`, typed by `type`. */
+  contentProps?: AIContentPropsMap[T]
+  children?: React.ReactNode
+  isStreaming?: boolean
+  className?: string
+}
+
+export interface ReferenceBase {
+  id: string
+  title?: string
+  url?: string
+}
+
+export interface AISuggestionBase {
+  heading: string
+  description?: string | React.ReactNode
+  state?: SuggestionState
+  updatedAt?: string
+  references?: ReferenceBase[] | ReferenceBase
+}

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

@@ -0,0 +1,52 @@
+"use client"
+
+import { defineStory } from "@/registry/story"
+
+import { Attachment } from "./chat/attachment"
+
+export const story = defineStory({
+  Component: Attachment,
+  args: [
+    {
+      variant: "Document chip",
+      initial: {
+        kind: "document",
+        title: "Iliad annotations.pdf",
+        meta: "PDF · 2.4 MB",
+      },
+    },
+    {
+      variant: "Quoted passage",
+      initial: {
+        kind: "text-selection",
+        variant: "preview",
+        title: "Iliad 1.1",
+        quote: "Sing, goddess, the anger of Achilles.",
+      },
+    },
+    {
+      variant: "Reply",
+      initial: {
+        kind: "chat-reply",
+        variant: "preview",
+        title: "Annotation discussion",
+        author: "Jenny Hamilton",
+        time: "2 minutes ago",
+        body: "Compare the opening invocation with the Odyssey.",
+      },
+    },
+    {
+      variant: "Link preview",
+      initial: {
+        kind: "url-link",
+        variant: "preview",
+        title: "Corpora UI",
+        domain: "github.com",
+        description: "Components for corpus research applications.",
+        href: "https://github.com/exegia/corpora-ui",
+      },
+    },
+  ],
+})
+
+export const Preview = story.WithControl

package/src/components/composed/chart.story.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+import type { ComponentProps, FC } from "react"
+
+import { defineStory } from "@/registry/story"
+
+import { Chart } from "./chat/chart"
+
+export const story = defineStory({
+  Component: Chart as FC<
+    Pick<
+      ComponentProps<typeof Chart>,
+      | "type"
+      | "title"
+      | "subtitle"
+      | "data"
+      | "series"
+      | "headerless"
+      | "plotHeight"
+    >
+  >,
+  args: {
+    initial: {
+      type: "bar",
+      title: "Corpus coverage",
+      data: [
+        {
+          label: "Iliad",
+          tokens: 79,
+        },
+        {
+          label: "Odyssey",
+          tokens: 72,
+        },
+      ],
+      series: [
+        {
+          key: "tokens",
+          label: "Coverage",
+        },
+      ],
+    },
+  },
+})
+
+export const Preview = story.WithControl

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

@@ -0,0 +1,45 @@
+import { describe, expect, mock, test } from "bun:test"
+import { act, fireEvent, render, screen } from "@testing-library/react"
+
+import { Attachment } from "../attachment"
+
+describe("Attachment", () => {
+  test("chip shows title + meta and fires onRemove", () => {
+    const onRemove = mock(() => {})
+    render(<Attachment kind="document" title="Q3.pdf" meta="PDF · 2.4 MB" onRemove={onRemove} />)
+    expect(screen.getByText("Q3.pdf")).toBeDefined()
+    expect(screen.getByText("PDF · 2.4 MB")).toBeDefined()
+    fireEvent.click(screen.getByRole("button", { name: "Remove" }))
+    expect(onRemove).toHaveBeenCalledTimes(1)
+  })
+
+  test("removable={false} hides the ✕", () => {
+    render(<Attachment kind="image" title="a.jpg" onRemove={() => {}} removable={false} />)
+    expect(screen.queryByRole("button", { name: "Remove" })).toBeNull()
+  })
+
+  test("preview renders per kind", () => {
+    const { container } = render(
+      <>
+        <Attachment kind="media" variant="preview" title="clip" duration="0:42" />
+        <Attachment kind="url-link" variant="preview" title="Exegia" domain="sketch.com" />
+      </>
+    )
+    expect(screen.getByRole("button", { name: "Play" })).toBeDefined()
+    expect(screen.getByText("0:42")).toBeDefined()
+    expect(container.querySelectorAll('[data-variant="preview"]').length).toBe(2)
+  })
+
+  test("previewable chip shows its preview on hover / focus", async () => {
+    render(<Attachment kind="text-selection" title="Iliad · Book 1, §12" quote="the will of Zeus" />)
+    expect(screen.queryByText("the will of Zeus")).toBeNull()
+    const chip = screen.getByText("Iliad · Book 1, §12").closest("[data-slot=attachment]")!
+    await act(async () => {
+      fireEvent.focus(chip)
+      fireEvent.mouseEnter(chip)
+      fireEvent.mouseMove(chip)
+      await new Promise((r) => setTimeout(r, 400))
+    })
+    expect(await screen.findByText("the will of Zeus")).toBeDefined()
+  })
+})

package/src/components/composed/chat/__tests__/beautiful-ui.test.tsx

@@ -0,0 +1,57 @@
+import { describe, expect, mock, test } from "bun:test"
+import { fireEvent, render, screen } from "@testing-library/react"
+import { Provider } from "jotai"
+
+import { FilterTable, RecordsTable } from "../index"
+import { StreamingText } from "../../ai/streaming-text"
+
+describe("StreamingText", () => {
+  test("shows all text without streaming, with the inline source chip", () => {
+    render(
+      <Provider>
+        <StreamingText paragraphs={["Hello world", [{ cite: "a.io" }, { text: "done" }]]} />
+      </Provider>
+    )
+    expect(screen.getByText(/Hello/)).toBeDefined()
+    expect(screen.getByText("a.io")).toBeDefined()
+  })
+})
+
+describe("FilterTable", () => {
+  const rows = [
+    { id: "1", task: "A", status: "todo" },
+    { id: "2", task: "B", status: "done" },
+  ]
+  test("filters rows by status pill", () => {
+    render(
+      <Provider>
+        <FilterTable
+          statuses={[{ id: "todo", label: "To do", tone: "warning" }, { id: "done", label: "Completed", tone: "success" }]}
+          columns={[{ key: "task", header: "Task" }, { key: "status", header: "Status" }]}
+          rows={rows}
+        />
+      </Provider>
+    )
+    expect(screen.getAllByRole("row").length).toBe(3)
+    fireEvent.click(screen.getByRole("tab", { name: /Completed/ }))
+    expect(screen.getAllByRole("row").length).toBe(2)
+    expect(screen.getByText("B")).toBeDefined()
+    fireEvent.click(screen.getByRole("tab", { name: /All/ }))
+    expect(screen.getAllByRole("row").length).toBe(3)
+  })
+})
+
+describe("RecordsTable", () => {
+  test("row and select-all checkboxes drive the selection", () => {
+    const onSelectionChange = mock((_selected: ReadonlySet<string>) => {})
+    render(
+      <Provider>
+        <RecordsTable rows={[{ id: "a", name: "A" }, { id: "b", name: "B" }]} onSelectionChange={onSelectionChange} />
+      </Provider>
+    )
+    fireEvent.click(screen.getByRole("checkbox", { name: "Select row 1" }))
+    expect([...onSelectionChange.mock.calls.at(-1)![0]]).toEqual(["a"])
+    fireEvent.click(screen.getByRole("checkbox", { name: "Select all" }))
+    expect([...onSelectionChange.mock.calls.at(-1)![0]].sort()).toEqual(["a", "b"])
+  })
+})

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

@@ -0,0 +1,29 @@
+import { describe, expect, test } from "bun:test"
+import { render, screen } from "@testing-library/react"
+
+import { Chart } from "../chart"
+
+const data = [{ label: "A", v: 1 }, { label: "B", v: 2 }]
+const series = [{ key: "v", label: "Value" }]
+
+describe("Chart", () => {
+  test("renders every type with its pill and legend", () => {
+    render(
+      <>
+        <Chart type="pie" title="Pie" data={data} series={series} center={{ value: "3" }} />
+        <Chart type="area" title="Area" data={data} series={series} />
+        <Chart type="line" title="Line" data={data} series={series} />
+        <Chart type="bar" title="Bar" data={data} series={series} />
+      </>
+    )
+    for (const t of ["Pie", "Area", "Line", "Bar"]) expect(screen.getAllByText(t).length).toBeGreaterThan(0)
+    expect(screen.getAllByText("Value").length).toBe(3)
+    expect(screen.getByText("3")).toBeDefined()
+  })
+
+  test("empty data keeps the chrome and drops the legend", () => {
+    const { container } = render(<Chart type="bar" title="Empty" data={[]} series={series} />)
+    expect(screen.getByText("Empty")).toBeDefined()
+    expect(container.querySelectorAll('[data-slot="legend-item"]').length).toBe(0)
+  })
+})

package/src/components/composed/chat/__tests__/code-block.test.tsx

@@ -0,0 +1,12 @@
+import { expect, test } from "bun:test"
+import { renderToStaticMarkup } from "react-dom/server"
+
+import { tokenize } from "../code-block"
+
+test("tokenize highlights keywords and escaped strings in linear time", () => {
+  const source = `const value = "${'\\"'.repeat(10_000)}"`
+  const html = renderToStaticMarkup(<>{tokenize(source, new Set(["const"]))}</>)
+
+  expect(html).toContain('class="text-code-keyword">const</span>')
+  expect(html).toContain('class="text-code-string">')
+})

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

@@ -0,0 +1,53 @@
+import { describe, expect, mock, test } from "bun:test"
+import { act, fireEvent, render, screen } from "@testing-library/react"
+import { Provider } from "jotai"
+
+import { Composer, type ComposerAttachment } from "../composer"
+
+const SEED: ComposerAttachment[] = [
+  { id: "a", kind: "document", title: "Q3.pdf", meta: "PDF" },
+  { id: "b", kind: "image", title: "IMG.jpg" },
+]
+
+describe("Composer attachments", () => {
+  test("renders the tray, removes a chip and sends with ⌘↵", async () => {
+    const onSubmit = mock(() => {})
+    render(
+      <Provider>
+        <Composer
+          attachments={SEED}
+          defaultValue="hello"
+          onSubmit={onSubmit}
+          safetyNote={null}
+        />
+      </Provider>
+    )
+    // The tray seeds from a passive effect; flush the re-render it schedules.
+    await act(async () => {})
+    expect(screen.getAllByRole("button", { name: "Remove" }).length).toBe(2)
+    fireEvent.click(screen.getAllByRole("button", { name: "Remove" })[0])
+    expect(screen.queryByText("Q3.pdf")).toBeNull()
+
+    fireEvent.keyDown(screen.getByRole("textbox", { name: "Message" }), {
+      key: "Enter",
+      metaKey: true,
+    })
+    expect(onSubmit).toHaveBeenCalledTimes(1)
+    const [draft, , attachments] = onSubmit.mock.calls[0] as unknown as [
+      string,
+      string,
+      ComposerAttachment[],
+    ]
+    expect(draft).toBe("hello")
+    expect(attachments.map((a) => a.id)).toEqual(["b"])
+  })
+
+  test("empty tray renders no tray row", () => {
+    const { container } = render(
+      <Provider>
+        <Composer safetyNote={null} />
+      </Provider>
+    )
+    expect(container.querySelector('[data-slot="composer-tray"]')).toBeNull()
+  })
+})