@exegia/corpora-ui 3.0.0 → 4.0.0

package/src/components/composed/action-bar/utils.ts

@@ -1,140 +0,0 @@
-import { createContext, useMemo, useState } from "react"
-import { Tooltip } from "@base-ui/react/tooltip"
-import type {
-  TActionBarSegment,
-  TActionEntry,
-  TActionItemsByGroup,
-  TActionKey,
-  TActionMap,
-  IEmojiActionBarProps,
-} from "./types"
-import type { Emoji } from "frimousse"
-
-// Each toolbar owns its handle; a shared handle cannot control multiple roots.
-export const ActionTooltipContext = createContext<
-  Tooltip.Handle<string> | undefined
->(undefined)
-
-export const isSeparator = (key: string): boolean => key.includes("separator")
-
-/**
- * Splits `actions` into render-ready segments at every `separator-*` key.
- *
- * Order comes from the map's insertion order (see `ActionMap`) — the grouping
- * is positional, so actions written before a separator group ahead of it.
- * Empty groups are dropped, which is what keeps a leading, trailing or
- * doubled separator from rendering a `ToolbarGroup` with nothing in it.
- */
-export const useActionBar = ({
-  actions,
-}: {
-  actions: TActionMap<TActionKey>
-}) => {
-  return useMemo(() => {
-    const entries = Object.entries(actions) as TActionEntry[]
-    const segments: TActionBarSegment[] = []
-    let open: TActionEntry[] = []
-
-    const closeGroup = (): void => {
-      if (open.length === 0) return
-      segments.push({ type: "group", key: `group-${open[0][0]}`, items: open })
-      open = []
-    }
-
-    for (const entry of entries) {
-      const [key, Item] = entry
-      if (isSeparator(key)) {
-        closeGroup()
-        segments.push({ type: "separator", key, Separator: Item })
-        continue
-      }
-      open.push(entry)
-    }
-    closeGroup()
-
-    const groups = segments.filter((s) => s.type === "group")
-
-    // A bar with no separators renders flat — `ToolbarGroup` is only added
-    // once the caller has actually asked for grouping.
-    const hasGroups = segments.some((s) => s.type === "separator")
-
-    const actionItemsByGroup: TActionItemsByGroup = Object.fromEntries(
-      groups.map((group) => [group.key, group.items])
-    )
-
-    return {
-      segments,
-      entries,
-      hasGroups,
-      groupsCount: groups.length,
-      separatorCount: segments.length - groups.length,
-      actionItemsByGroup,
-    }
-  }, [actions])
-}
-
-/**
- * The quick row. frimousse has no way to render a subset — `EmojiPicker.Root`
- * takes `columns`/`skinTone`/`locale`/`emojiVersion`/`emojibaseUrl`/`sticky`
- * and nothing else, and its list is virtualized on fixed-height rows, so a
- * custom `Emoji` component that returns null leaves holes rather than a short
- * row. A fixed list is the only way to show just these, and it costs no
- * network request — the CDN fetch only happens if "More" is opened.
- */
-export const QUICK_REACTIONS: readonly Emoji[] = [
-  { emoji: "❤️", label: "heart" },
-  { emoji: "👍", label: "thumbs up" },
-  { emoji: "😊", label: "smiling face" },
-  { emoji: "😂", label: "face with tears of joy" },
-  { emoji: "🎉", label: "party popper" },
-  { emoji: "🙏", label: "folded hands" },
-]
-
-/**
- * Hook for managing the emoji picker state and actions.
- *
- * @param props - The emoji picker props.
- * @returns The emoji picker state and actions.
- *
- * @example
- * ```tsx
- * const { isFullPicker, quickReactions, actions, togglePicker, selectEmoji } = useEmojiPicker({ onEmojiSelect });
- * ```
- */
-export const useEmojiPicker = ({
-  onEmojiSelect,
-  reactions,
-  hideMore,
-}: IEmojiActionBarProps) => {
-  const [isFullPicker, setShowAll] = useState(false)
-
-  // Toggles the picker between quick reactions and the full picker.
-  const togglePicker = () => setShowAll((previous) => !previous)
-  /**
-   * Reports the pick and folds the full picker back to the quick row. The bar
-   * lives inside a `keepMounted` popover, so it is never unmounted on close —
-   * without this reset the next open would still show the full picker.
-   */
-  const selectEmoji = (emoji: Emoji): void => {
-    setShowAll(false)
-    onEmojiSelect?.(emoji)
-  }
-  // The quick reactions to display.
-  const quickReactions = reactions ?? QUICK_REACTIONS
-  const actions = useMemo(() => {
-    if (hideMore) return quickReactions
-    return [
-      ...quickReactions,
-      { emoji: "Separator", label: "separator" },
-      { emoji: "More", label: "More emoji" },
-    ]
-  }, [quickReactions, hideMore])
-
-  return {
-    isFullPicker,
-    quickReactions,
-    actions,
-    togglePicker,
-    selectEmoji,
-  }
-}

package/src/components/composed/ai/__tests__/ai.test.tsx

@@ -1,66 +0,0 @@
-import { describe, expect, mock, test } from "bun:test"
-import { render, screen } from "@testing-library/react"
-import { Message } from "../message"
-import type { TAIContentProps } from "../types"
-
-describe("Message", () => {
-  test("renders the agent identity row and the body as a polite live region", () => {
-    const { container } = render(
-      <Message type="markdown">Hello reader</Message>
-    )
-
-    expect(screen.getByText("Exegia")).toBeDefined()
-    expect(screen.getByText("AI Scholar")).toBeDefined()
-
-    const root = container.querySelector('[data-slot="ai-message"]')
-    expect(root).not.toBeNull()
-    expect(root!.getAttribute("data-variant")).toBe("ai")
-
-    const body = container.querySelector('[data-slot="ai-message-body"]')
-    expect(body).not.toBeNull()
-    expect(body!.getAttribute("aria-live")).toBe("polite")
-    expect(body!.textContent).toContain("Hello reader")
-  })
-
-  test("marks the root while streaming and drops the flag at rest", () => {
-    const { container, rerender } = render(
-      <Message isStreaming type="markdown" />
-    )
-    const root = container.querySelector('[data-slot="ai-message"]')!
-    expect(root.hasAttribute("data-streaming")).toBe(true)
-
-    rerender(<Message type="markdown" />)
-    expect(root.hasAttribute("data-streaming")).toBe(false)
-  })
-
-  test("hands AttachedContent the message type as `kind` plus contentProps", () => {
-    const seen = mock<(props: TAIContentProps<"chart">) => void>(() => {})
-    const Attached = (props: TAIContentProps<"chart">) => {
-      seen(props)
-      return <div data-testid="attached">chart goes here</div>
-    }
-
-    render(
-      <Message
-        AttachedContent={Attached}
-        contentProps={{ type: "bar", data: [], series: [] }}
-        type="chart"
-      />
-    )
-
-    expect(screen.getByTestId("attached")).toBeDefined()
-    expect(seen).toHaveBeenCalledTimes(1)
-    expect(seen.mock.calls[0]?.[0]).toMatchObject({
-      kind: "chart",
-      type: "bar",
-      data: [],
-      series: [],
-    })
-  })
-
-  test("renders no attachment slot when AttachedContent is omitted", () => {
-    const { container } = render(<Message type="markdown">Prose only</Message>)
-    const body = container.querySelector('[data-slot="ai-message-body"]')!
-    expect(body.textContent).toBe("Prose only")
-  })
-})

package/src/components/composed/ai/avatar.tsx

@@ -1,19 +0,0 @@
-import OWLImage from "@/assets/owl-avatar.png"
-import { Badge } from "@/components/ui/badge";
-import { Avatar as AvatarAtom } from "@/components/atoms";
-
-export const Avatar = () => {
-  return (
-    <div className="flex items-center gap-1.5">
-      <AvatarAtom size="default" className="bg-indigo-900/20 dark:bg-indigo-100/40 p-0.5 scale-90 shadow-debossed inset-shadow-accent" user={{ avatarUrl: OWLImage }} />
-      <div className="flex flex-col">
-        <div className="inline-flex items-center gap-1.5">
-          <span className="text-sm font-semibold">Exegia</span>
-          <Badge variant="default" size="xs">
-            AI Scholar
-          </Badge>
-        </div>
-      </div>
-    </div>
-  )
-}

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

@@ -1,36 +0,0 @@
-import { Message } from "./message"
-import { StreamingText } from "./streaming-text"
-import { ResearchAnswer } from "./research-answer"
-import { SuggestedPrompt } from "./suggested-prompt"
-import { Avatar } from "./avatar"
-
-export type { ISuggestedPromptProps } from "./suggested-prompt"
-
-export {
-  accentRing,
-  accentSolid,
-  accentText,
-  agentText,
-  ghostMuted,
-  glassCard,
-  mutedText,
-  surface,
-} from "./shared"
-export { type IStreamingTextProps, type TStreamingToken } from "./streaming-text"
-export type { IResearchAnswerProps } from "./research-answer"
-export type {
-  IAISuggestionBase,
-  IDiffRow,
-  IReferenceBase,
-  TSuggestionState,
-} from "./types"
-
-const AI = {
-  Message,
-  Avatar,
-  StreamingText,
-  SuggestedPrompt,
-  ResearchAnswer,
-}
-
-export default AI

package/src/components/composed/ai/message.tsx

@@ -1,49 +0,0 @@
-import type { TAIContentProps, IAIMessageProps, TAIMessageType } from "./types"
-import { Bubble } from "@/components/atoms"
-import { cn } from "@/lib/utils"
-import { Avatar } from "./avatar"
-
-/**
- * An agent turn: author row, prose body and — when the model proposed
- * changes — a "Suggestions" disclosure that fans the cards out below with a
- * staggered spring.
- */
-export function Message<T extends TAIMessageType>({
-  children,
-  isStreaming = false,
-  className,
-  AttachedContent,
-  type,
-  contentProps,
-  ...props
-}: IAIMessageProps<T>): React.ReactElement {
-  // TS can't relate `AIContentProps<T>` to JSX's IntrinsicAttributes while `T`
-  // is unresolved; widen to the full union for the render site only.
-  const Content = AttachedContent as
-    React.ComponentType<TAIContentProps> | undefined
-
-  return (
-    <Bubble
-      className={cn("my-1.5", className)}
-      data-slot="ai-message"
-      data-streaming={isStreaming ? "" : undefined}
-      variant="ai"
-      {...props}
-    >
-      <Bubble.Header>
-        <Avatar />
-      </Bubble.Header>
-
-      <Bubble.Message
-        aria-atomic="false"
-        aria-live="polite"
-        data-slot="ai-message-body"
-      >
-        <div className="ml-3">{children}</div>
-        {Content && (
-          <Content {...({ kind: type, ...contentProps } as TAIContentProps)} />
-        )}
-      </Bubble.Message>
-    </Bubble>
-  )
-}

package/src/components/composed/ai/research-answer.tsx

@@ -1,157 +0,0 @@
-"use client"
-
-import { BookOpen, Calendar, Copy, ListPlus, Share2, Users } from "lucide-react"
-import type * as React from "react"
-import { cn } from "@/lib/utils"
-import {
-  Card,
-  CardFrame,
-  CardFrameFooter,
-  CardFrameHeader,
-  CardPanel,
-} from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { IconTile, InlineSource } from "@/components/ui/chat"
-
-export interface IResearchReference {
-  /** Pill label, e.g. "Iliad · Homer corpus". */
-  label: React.ReactNode
-  /** Preview-card content shown on hover. */
-  favicon?: string
-  title?: React.ReactNode
-  description?: React.ReactNode
-  href?: string
-}
-
-export interface IResearchAnswerProps extends Omit<
-  React.ComponentPropsWithoutRef<"div">,
-  "content"
-> {
-  kicker?: React.ReactNode
-  /** "Answered from 3 passages · 0.8 s" */
-  kickerSub?: React.ReactNode
-  content: React.ReactNode
-  source?: React.ReactNode | IResearchReference
-  date?: React.ReactNode
-  authors?: React.ReactNode | IResearchReference
-  onCopyCitation?: () => void
-  onShare?: () => void
-  /** TODO(spec 003): the design shows the control only; behaviour is the caller's. */
-  onAddToList?: () => void
-  bare?: boolean
-}
-
-const GHOST =
-  "h-6 gap-1.5 rounded-md px-2 text-[11.5px] font-medium text-text-secondary hover:bg-surface-subtle hover:text-text-primary sm:h-6 [&_svg]:size-3.5! [&_svg]:opacity-100"
-
-/**
- * Research answer card: kicker, content, Source / Date / Author(s) meta, actions.
- *
- * @sketch "Component / Research Answer"
- */
-export function ResearchAnswer({
-  kicker = "Research answer",
-  kickerSub,
-  content,
-  source,
-  date,
-  authors,
-  onCopyCitation,
-  onShare,
-  onAddToList,
-  bare = false,
-  className,
-  ...props
-}: IResearchAnswerProps): React.ReactElement {
-  // A structured value renders as a reference pill with a hover preview;
-  // plain strings stay plain text.
-  const asPill = (
-    value: React.ReactNode | IResearchReference
-  ): React.ReactNode => {
-    if (value && typeof value === "object" && "label" in value) {
-      const { label, ...preview } = value as IResearchReference
-      return <InlineSource domain={label} {...preview} />
-    }
-    return value
-  }
-  const meta = [
-    { icon: <BookOpen />, label: "Source", value: source },
-    { icon: <Calendar />, label: "Date", value: date },
-    { icon: <Users />, label: "Author(s)", value: authors },
-  ].filter((m) => m.value !== undefined)
-
-  return (
-    <CardFrame
-      data-slot="research-answer"
-      className={cn(
-        "w-[380px] max-w-full [--frame-radius:var(--radius-md)]",
-        bare && "border-transparent shadow-none",
-        className
-      )}
-      {...props}
-    >
-      <CardFrameHeader className="flex flex-row items-start gap-2 px-3.5 py-3">
-        <IconTile size={28}>
-          <BookOpen />
-        </IconTile>
-        <div className="flex min-w-0 flex-1 flex-col gap-0.5">
-          <span className="text-[13px] leading-4 font-semibold text-text-primary">
-            {kicker}
-          </span>
-          {kickerSub ? (
-            <span className="text-[11px] leading-3 text-text-secondary">
-              {kickerSub}
-            </span>
-          ) : null}
-        </div>
-      </CardFrameHeader>
-      <Card>
-        <CardPanel className="px-3.5 py-3.5 text-[13px] leading-[18px] text-text-primary">
-          {content}
-        </CardPanel>
-        {meta.length ? (
-          <>
-            <div className="mx-3.5 h-px bg-border-default" />
-            <dl className="flex flex-col gap-1.5 px-3.5 py-3">
-              {meta.map((m) => (
-                <div key={m.label} className="flex items-baseline gap-3">
-                  <dt className="flex w-20 shrink-0 items-center gap-1 text-[11px] leading-4 text-text-secondary [&_svg]:size-3 [&_svg]:self-center [&_svg]:text-icon">
-                    {m.icon}
-                    {m.label}
-                  </dt>
-                  <dd className="min-w-0 flex-1 text-[12px] leading-4 text-text-primary">
-                    {asPill(m.value)}
-                  </dd>
-                </div>
-              ))}
-            </dl>
-          </>
-        ) : null}
-      </Card>
-      <CardFrameFooter className="flex items-center gap-0.5 p-2">
-        <Button
-          variant="ghost"
-          size="xs"
-          className={GHOST}
-          onClick={onCopyCitation}
-        >
-          <Copy />
-          Copy
-        </Button>
-        <Button variant="ghost" size="xs" className={GHOST} onClick={onShare}>
-          <Share2 />
-          Share
-        </Button>
-        <Button
-          variant="ghost"
-          size="xs"
-          className={GHOST}
-          onClick={onAddToList}
-        >
-          <ListPlus />
-          Add to list
-        </Button>
-      </CardFrameFooter>
-    </CardFrame>
-  )
-}

package/src/components/composed/ai/shared.tsx

@@ -1,94 +0,0 @@
-import { Children, Fragment, isValidElement } from "react"
-import type * as React from "react"
-import { cn } from "@/lib/utils"
-import { EASE_IN_OUT, SPRING_PANEL } from "@/lib/ease"
-import type { Variants } from "motion"
-
-// The AI accent is a muted amber used sparingly — the ✦ icon, small labels
-// and the primary Apply action. Everything else reads from theme tokens so
-// these components inherit whatever surface hosts them (e.g. the shell
-// right panel).
-export const accentText = "text-amber-600 dark:text-amber-300/90"
-
-export const accentRing = "ring-offset-0 focus-visible:ring-amber-400/40"
-
-export const accentSolid = cn(
-  "border-amber-500/60 bg-amber-400/90 text-amber-950 shadow-none hover:bg-amber-400 disabled:opacity-35 data-pressed:bg-amber-400 *:data-[slot=button-loading-indicator]:text-amber-950",
-  accentRing
-)
-
-// The agent's own voice is violet: its badge, the suggestions disclosure and
-// the accepted mark on a suggestion card.
-export const agentText = "text-violet-600 dark:text-violet-400"
-
-export const ghostMuted = cn(
-  "text-muted-foreground hover:text-foreground",
-  accentRing
-)
-
-export const mutedText = "text-[13px] leading-5 text-muted-foreground"
-
-// Floating surfaces (scope picker list, selection popover) — theme tokens,
-// not a hard-coded dark panel.
-export const surface = "border bg-popover text-popover-foreground shadow-lg"
-
-/** The AI spark — the accent-coloured ✦ that marks every AI affordance. */
-export function AiIcon({
-  className,
-}: {
-  className?: string
-}): React.ReactElement {
-  return (
-    <span aria-hidden="true" className={cn(accentText, className)}>
-      ✦
-    </span>
-  )
-}
-
-export function CloseIcon(): React.ReactElement {
-  return (
-    <svg
-      aria-hidden="true"
-      className="size-4"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      strokeWidth="1.8"
-    >
-      <path d="m6 6 12 12M18 6 6 18" />
-    </svg>
-  )
-}
-
-// Frosted card used by suggestion cards: a translucent field with a lit top
-// edge and a light backdrop blur so the thread reads through it.
-export const glassCard =
-  "rounded-md border-0 border-t-2 border-t-white/70 bg-neutral-200/45 shadow-none backdrop-blur-[3px] backdrop-saturate-125 before:hidden dark:border-t-neutral-700 dark:bg-neutral-800/50"
-
-// The suggestions fan-out: the list holds the stagger, each item springs up
-// into place. Shared by `AiMessage`'s disclosure and `SuggestedPrompts`, so
-// both fan out with the same rhythm.
-export const LIST_VARIANTS: Variants = {
-  hidden: { transition: { staggerChildren: 0.04, staggerDirection: -1 } },
-  visible: { transition: { staggerChildren: 0.07, delayChildren: 0.05 } },
-}
-
-export const ITEM_VARIANTS: Variants = {
-  hidden: {
-    opacity: 0,
-    y: 14,
-    scale: 0.97,
-    transition: { duration: 0.18, ease: EASE_IN_OUT },
-  },
-  visible: { opacity: 1, y: 0, scale: 1, transition: SPRING_PANEL },
-}
-
-/** Children.toArray, but looking through fragments so `<>{a}{b}</>` counts two. */
-export function flattenChildren(children: React.ReactNode): React.ReactNode[] {
-  return Children.toArray(children).flatMap((child) =>
-    isValidElement<{ children?: React.ReactNode }>(child) &&
-    child.type === Fragment
-      ? flattenChildren(child.props.children)
-      : [child]
-  )
-}

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

@@ -1,94 +0,0 @@
-"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 TStreamingToken =
-  | { text: string }
-  | { cite: string; favicon?: string; title?: string; description?: string; href?: string }
-
-export interface IStreamingTextProps extends React.ComponentPropsWithoutRef<"div"> {
-  /** Paragraphs, each a token list; a string is split on spaces. */
-  paragraphs: (string | TStreamingToken[])[]
-  /** 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 | TStreamingToken[]): TStreamingToken[] => (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
-}: IStreamingTextProps): 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>
-  )
-}