@exegia/corpora-ui 1.0.0 → 3.0.0

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

@@ -4,16 +4,15 @@ import { Avatar as AvatarAtom } from "@/components/atoms";
 
 export const Avatar = () => {
   return (
-    <div className="flex items-center gap-2">
-      <AvatarAtom size="default" className="bg-indigo-950 dark:bg-indigo-300 p-0.5 scale-110" user={{ avatarUrl: OWLImage }} />
+    <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="flex items-center gap-1.5">
+        <div className="inline-flex items-center gap-1.5">
           <span className="text-sm font-semibold">Exegia</span>
           <Badge variant="default" size="xs">
-            Agent
+            AI Scholar
           </Badge>
         </div>
-        <span className="text-xs text-muted-foreground">AI Scholar</span>
       </div>
     </div>
   )

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

@@ -4,7 +4,7 @@ import { ResearchAnswer } from "./research-answer"
 import { SuggestedPrompt } from "./suggested-prompt"
 import { Avatar } from "./avatar"
 
-export type { SuggestedPromptProps } from "./suggested-prompt"
+export type { ISuggestedPromptProps } from "./suggested-prompt"
 
 export {
   accentRing,
@@ -16,13 +16,13 @@ export {
   mutedText,
   surface,
 } from "./shared"
-export { type StreamingTextProps, type StreamingToken } from "./streaming-text"
-export type { ResearchAnswerProps } from "./research-answer"
+export { type IStreamingTextProps, type TStreamingToken } from "./streaming-text"
+export type { IResearchAnswerProps } from "./research-answer"
 export type {
-  AISuggestionBase,
-  DiffRow,
-  ReferenceBase,
-  SuggestionState,
+  IAISuggestionBase,
+  IDiffRow,
+  IReferenceBase,
+  TSuggestionState,
 } from "./types"
 
 const AI = {

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

@@ -1,4 +1,4 @@
-import type { AIContentProps, AIMessageProps, AIMessageType } from "./types"
+import type { TAIContentProps, IAIMessageProps, TAIMessageType } from "./types"
 import { Bubble } from "@/components/atoms"
 import { cn } from "@/lib/utils"
 import { Avatar } from "./avatar"
@@ -8,7 +8,7 @@ import { Avatar } from "./avatar"
  * changes — a "Suggestions" disclosure that fans the cards out below with a
  * staggered spring.
  */
-export function Message<T extends AIMessageType>({
+export function Message<T extends TAIMessageType>({
   children,
   isStreaming = false,
   className,
@@ -16,15 +16,15 @@ export function Message<T extends AIMessageType>({
   type,
   contentProps,
   ...props
-}: AIMessageProps<T>): React.ReactElement {
+}: 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<AIContentProps> | undefined
+    React.ComponentType<TAIContentProps> | undefined
 
   return (
     <Bubble
-      className={cn(className)}
+      className={cn("my-1.5", className)}
       data-slot="ai-message"
       data-streaming={isStreaming ? "" : undefined}
       variant="ai"
@@ -39,9 +39,9 @@ export function Message<T extends AIMessageType>({
         aria-live="polite"
         data-slot="ai-message-body"
       >
-        {children}
+        <div className="ml-3">{children}</div>
         {Content && (
-          <Content {...({ kind: type, ...contentProps } as AIContentProps)} />
+          <Content {...({ kind: type, ...contentProps } as TAIContentProps)} />
         )}
       </Bubble.Message>
     </Bubble>

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

@@ -13,7 +13,7 @@ import {
 import { Button } from "@/components/ui/button"
 import { IconTile, InlineSource } from "@/components/ui/chat"
 
-export interface ResearchReference {
+export interface IResearchReference {
   /** Pill label, e.g. "Iliad · Homer corpus". */
   label: React.ReactNode
   /** Preview-card content shown on hover. */
@@ -23,7 +23,7 @@ export interface ResearchReference {
   href?: string
 }
 
-export interface ResearchAnswerProps extends Omit<
+export interface IResearchAnswerProps extends Omit<
   React.ComponentPropsWithoutRef<"div">,
   "content"
 > {
@@ -31,9 +31,9 @@ export interface ResearchAnswerProps extends Omit<
   /** "Answered from 3 passages · 0.8 s" */
   kickerSub?: React.ReactNode
   content: React.ReactNode
-  source?: React.ReactNode | ResearchReference
+  source?: React.ReactNode | IResearchReference
   date?: React.ReactNode
-  authors?: React.ReactNode | ResearchReference
+  authors?: React.ReactNode | IResearchReference
   onCopyCitation?: () => void
   onShare?: () => void
   /** TODO(spec 003): the design shows the control only; behaviour is the caller's. */
@@ -62,14 +62,14 @@ export function ResearchAnswer({
   bare = false,
   className,
   ...props
-}: ResearchAnswerProps): React.ReactElement {
+}: 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 | ResearchReference
+    value: React.ReactNode | IResearchReference
   ): React.ReactNode => {
     if (value && typeof value === "object" && "label" in value) {
-      const { label, ...preview } = value as ResearchReference
+      const { label, ...preview } = value as IResearchReference
       return <InlineSource domain={label} {...preview} />
     }
     return value

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

@@ -6,13 +6,13 @@ 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 =
+export type TStreamingToken =
   | { text: string }
   | { cite: string; favicon?: string; title?: string; description?: string; href?: string }
 
-export interface StreamingTextProps extends React.ComponentPropsWithoutRef<"div"> {
+export interface IStreamingTextProps extends React.ComponentPropsWithoutRef<"div"> {
   /** Paragraphs, each a token list; a string is split on spaces. */
-  paragraphs: (string | StreamingToken[])[]
+  paragraphs: (string | TStreamingToken[])[]
   /** Reveal words over time and show the caret. */
   streaming?: boolean
   /** Reveal gap in ms; defaults to the --stream-gap token (60ms). */
@@ -21,7 +21,7 @@ export interface StreamingTextProps extends React.ComponentPropsWithoutRef<"div"
 
 
 
-const toTokens = (p: string | StreamingToken[]): StreamingToken[] => (typeof p === "string" ? p.split(" ").map((text) => ({ text })) : p)
+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.
@@ -31,7 +31,7 @@ const toTokens = (p: string | StreamingToken[]): StreamingToken[] => (typeof p =
  */
 export function StreamingText({
   paragraphs, streaming = false, wordMs, className, ...props
-}: StreamingTextProps): React.ReactElement {
+}: IStreamingTextProps): React.ReactElement {
   const reduceMotion = useReducedMotion()
   const tokens = React.useMemo(() => paragraphs.map(toTokens), [paragraphs])
   const total = tokens.reduce((n, p) => n + p.length, 0)

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

@@ -13,7 +13,7 @@ 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<
+export interface ISuggestedPromptProps extends Omit<
   HTMLMotionProps<"button">,
   "children" | "onSelect"
 > {
@@ -38,7 +38,7 @@ export function SuggestedPrompt({
   layoutId,
   className,
   ...props
-}: SuggestedPromptProps): React.ReactElement {
+}: ISuggestedPromptProps): React.ReactElement {
   const reduceMotion = useReducedMotion()
   return (
     <motion.button
@@ -66,7 +66,7 @@ export function SuggestedPrompt({
   )
 }
 
-export interface SuggestedPromptsProps extends Omit<
+export interface ISuggestedPromptsProps extends Omit<
   HTMLMotionProps<"div">,
   "children"
 > {
@@ -95,7 +95,7 @@ export function SuggestedPrompts({
   onOpenChange,
   className,
   ...props
-}: SuggestedPromptsProps): React.ReactElement | null {
+}: ISuggestedPromptsProps): React.ReactElement | null {
   const panelId = useId()
   const reduceMotion = useReducedMotion()
   const [internalOpen, setInternalOpen] = useState(defaultOpen)

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

@@ -1,23 +1,23 @@
 import type {
-  ChartProps,
-  ComposerSuggestionsProps,
-  MarkdownProps,
-  RecommendationStackProps,
-  ResearchAnswerProps,
-  UserType,
+  IChartProps,
+  IComposerSuggestionsProps,
+  IMarkdownProps,
+  IResearchAnswerProps,
 } from "@/index"
-import type * as React from "react"
+import type { TUserType } from "@/components/atoms/types"
+import type { ReactNode } from "react"
+import type { IRecommendationStackProps } from "@/components/blocks/types"
 
-export type SuggestionState = "accepted" | "rejected" | "pending"
+export type TSuggestionState = "accepted" | "rejected" | "pending"
 
-export interface DiffRow {
+export interface IDiffRow {
   type: "add" | "remove"
-  value: React.ReactNode
+  value: ReactNode
   field?: string
 }
 
 /** A word, or an inline citation; extra fields turn the chip into a hover preview. */
-export type StreamingToken =
+export type TStreamingToken =
   | { text: string }
   | {
       cite: string
@@ -27,9 +27,9 @@ export type StreamingToken =
       href?: string
     }
 
-export interface StreamingTextProps extends React.ComponentPropsWithoutRef<"div"> {
+export interface IStreamingTextProps extends React.ComponentPropsWithoutRef<"div"> {
   /** Paragraphs, each a token list; a string is split on spaces. */
-  paragraphs: (string | StreamingToken[])[]
+  paragraphs: (string | TStreamingToken[])[]
   /** Reveal words over time and show the caret. */
   streaming?: boolean
   /** Reveal gap in ms; defaults to the --stream-gap token (60ms). */
@@ -37,45 +37,45 @@ export interface StreamingTextProps extends React.ComponentPropsWithoutRef<"div"
 }
 
 /** 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 interface IAIContentPropsMap {
+  markdown: IMarkdownProps
+  research: IResearchAnswerProps
+  chart: IChartProps
+  suggestion: IComposerSuggestionsProps
+  recommendation: IRecommendationStackProps
 }
 
-export type AIMessageType = keyof AIContentPropsMap
+export type TAIMessageType = keyof IAIContentPropsMap
 
 /** Discriminated union of `{ kind } & props`, distributed over `T`. */
-export type AIContentProps<T extends AIMessageType = AIMessageType> = {
-  [K in T]: { kind: K } & AIContentPropsMap[K]
+export type TAIContentProps<T extends TAIMessageType = TAIMessageType> = {
+  [K in T]: { kind: K } & IAIContentPropsMap[K]
 }[T]
 
-export interface AIMessageProps<T extends AIMessageType = AIMessageType> {
+export interface IAIMessageProps<T extends TAIMessageType = TAIMessageType> {
   /** Identity shown in the header. */
-  user?: UserType
+  user?: TUserType
   type: T
   thinking?: boolean
   /** Replaces the default `User.Info` identity row in the header. */
-  AttachedContent?: React.ComponentType<AIContentProps<T>>
+  AttachedContent?: React.ComponentType<TAIContentProps<T>>
   /** Props forwarded to `AttachedContent`, typed by `type`. */
-  contentProps?: AIContentPropsMap[T]
+  contentProps?: IAIContentPropsMap[T]
   children?: React.ReactNode
   isStreaming?: boolean
   className?: string
 }
 
-export interface ReferenceBase {
+export interface IReferenceBase {
   id: string
   title?: string
   url?: string
 }
 
-export interface AISuggestionBase {
+export interface IAISuggestionBase {
   heading: string
   description?: string | React.ReactNode
-  state?: SuggestionState
+  state?: TSuggestionState
   updatedAt?: string
-  references?: ReferenceBase[] | ReferenceBase
+  references?: IReferenceBase[] | IReferenceBase
 }

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

@@ -1,12 +1,19 @@
-import { describe, expect, mock, test } from "bun:test"
-import { act, fireEvent, render, screen } from "@testing-library/react"
+import { describe, expect, mock, spyOn, test } from "bun:test"
+import { act, fireEvent, render, screen, waitFor } 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} />)
+    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" }))
@@ -14,26 +21,53 @@ describe("Attachment", () => {
   })
 
   test("removable={false} hides the ✕", () => {
-    render(<Attachment kind="image" title="a.jpg" onRemove={() => {}} removable={false} />)
+    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" />
+        <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)
+    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" />)
+    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]")!
+    const chip = screen
+      .getByText("Iliad · Book 1, §12")
+      .closest("[data-slot=attachment]")!
     await act(async () => {
       fireEvent.focus(chip)
       fireEvent.mouseEnter(chip)
@@ -42,4 +76,143 @@ describe("Attachment", () => {
     })
     expect(await screen.findByText("the will of Zeus")).toBeDefined()
   })
+
+  test("default documents and user handles have keyboard-focus previews", async () => {
+    const document = render(
+      <Attachment
+        kind="document"
+        title="notes.txt"
+        previewText="Compare the manuscript witnesses."
+      />
+    )
+    fireEvent.focus(
+      document.container.querySelector('[data-slot="preview-card-trigger"]')!
+    )
+    await waitFor(() =>
+      expect(
+        document.baseElement.querySelector(
+          '[data-slot="attachment-hover-preview"]'
+        )
+      ).not.toBeNull()
+    )
+    expect(
+      screen.getAllByText("Compare the manuscript witnesses.").length
+    ).toBeGreaterThan(0)
+    document.unmount()
+
+    const handle = render(
+      <Attachment
+        kind="username-handle"
+        variant="default"
+        title="@reviewer"
+        meta="Corpus editor"
+        initials="CE"
+      />
+    )
+    fireEvent.focus(
+      handle.container.querySelector('[data-slot="preview-card-trigger"]')!
+    )
+    await waitFor(() =>
+      expect(
+        handle.baseElement.querySelector(
+          '[data-slot="attachment-hover-preview"]'
+        )
+      ).not.toBeNull()
+    )
+    expect(screen.getAllByText("Corpus editor").length).toBe(2)
+  })
+
+  test("expanded previews render directly without another hover trigger", () => {
+    const { container } = render(
+      <Attachment
+        kind="image"
+        variant="preview"
+        title="scan.jpg"
+        src="/scan.jpg"
+        preview={<span>Nested preview</span>}
+      />
+    )
+    expect(
+      screen.getByRole("img", { name: "scan.jpg" }).getAttribute("src")
+    ).toBe("/scan.jpg")
+    expect(
+      container.querySelector('[data-slot="preview-card-trigger"]')
+    ).toBeNull()
+    expect(screen.queryByText("Nested preview")).toBeNull()
+  })
+
+  test("audio previews keep their controls and metadata without a duplicate title", () => {
+    render(
+      <Attachment
+        kind="media"
+        variant="preview"
+        audio
+        title="voice-note.m4a"
+        meta="0:42 · voice-note.m4a"
+      />
+    )
+    expect(screen.queryByText("voice-note.m4a", { exact: true })).toBeNull()
+    expect(screen.getByText("0:42 · voice-note.m4a")).toBeDefined()
+    expect(screen.getByRole("button", { name: "Play" })).toBeDefined()
+  })
+
+  test("local images get a real preview URL, release replaced URLs, and keep file data off the DOM", async () => {
+    const createURL = spyOn(URL, "createObjectURL")
+      .mockReturnValueOnce("blob:first-image")
+      .mockReturnValueOnce("blob:second-image")
+    const revokeURL = spyOn(URL, "revokeObjectURL").mockImplementation(() => {})
+    const first = new File(["image"], "scan.JPG", { type: "" })
+    const second = new File(["image two"], "scan.png", { type: "image/png" })
+    const view = render(
+      <Attachment kind="document" title="scan" file={first} variant="preview" />
+    )
+    try {
+      await waitFor(() =>
+        expect(
+          screen.getByRole("img", { name: "scan" }).getAttribute("src")
+        ).toBe("blob:first-image")
+      )
+      expect(view.container.querySelector('[data-kind="image"]')).not.toBeNull()
+      expect(view.container.querySelector("[file]")).toBeNull()
+      view.rerender(
+        <Attachment kind="image" title="scan" file={second} variant="preview" />
+      )
+      await waitFor(() =>
+        expect(
+          screen.getByRole("img", { name: "scan" }).getAttribute("src")
+        ).toBe("blob:second-image")
+      )
+      expect(revokeURL).toHaveBeenCalledWith("blob:first-image")
+      view.unmount()
+      expect(revokeURL).toHaveBeenCalledWith("blob:second-image")
+    } finally {
+      view.unmount()
+      createURL.mockRestore()
+      revokeURL.mockRestore()
+    }
+  })
+
+  test("local text files supply a readable excerpt", async () => {
+    const file = new File(
+      ["Verse notes: compare the parallel passage."],
+      "notes.txt",
+      { type: "text/plain" }
+    )
+    const createURL = spyOn(URL, "createObjectURL").mockReturnValue(
+      "blob:notes"
+    )
+    const revokeURL = spyOn(URL, "revokeObjectURL").mockImplementation(() => {})
+    const view = render(
+      <Attachment kind="document" title="notes.txt" file={file} />
+    )
+    try {
+      expect(
+        await screen.findByText("Verse notes: compare the parallel passage.")
+      ).toBeDefined()
+    } finally {
+      view.unmount()
+      createURL.mockRestore()
+      revokeURL.mockRestore()
+    }
+  })
 })