@exegia/corpora-ui 1.0.0 → 2.0.0

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

@@ -1,10 +1,11 @@
 import { describe, expect, mock, test } from "bun:test"
 import { act, fireEvent, render, screen } from "@testing-library/react"
 import { Provider } from "jotai"
+import userEvent from "@testing-library/user-event"
 
-import { Composer, type ComposerAttachment } from "../composer"
+import { Composer, type TComposerAttachment } from "../composer"
 
-const SEED: ComposerAttachment[] = [
+const SEED: TComposerAttachment[] = [
   { id: "a", kind: "document", title: "Q3.pdf", meta: "PDF" },
   { id: "b", kind: "image", title: "IMG.jpg" },
 ]
@@ -36,7 +37,7 @@ describe("Composer attachments", () => {
     const [draft, , attachments] = onSubmit.mock.calls[0] as unknown as [
       string,
       string,
-      ComposerAttachment[],
+      TComposerAttachment[],
     ]
     expect(draft).toBe("hello")
     expect(attachments.map((a) => a.id)).toEqual(["b"])
@@ -50,4 +51,51 @@ describe("Composer attachments", () => {
     )
     expect(container.querySelector('[data-slot="composer-tray"]')).toBeNull()
   })
+
+  test("selects local files and submits an attachment-only message once", async () => {
+    const user = userEvent.setup()
+    const onSubmit = mock(() => {})
+    const onFilesChange = mock(() => {})
+    render(
+      <Provider>
+        <Composer onSubmit={onSubmit} onFilesChange={onFilesChange} />
+      </Provider>
+    )
+    const file = new File(["passage"], "passage.txt", { type: "text/plain" })
+    await user.upload(screen.getByLabelText("Attach files"), file)
+    expect(onFilesChange).toHaveBeenCalledWith([file])
+    expect(screen.getByText("passage.txt")).toBeDefined()
+    await user.click(screen.getByRole("button", { name: "Send message" }))
+    expect(onSubmit).toHaveBeenCalledWith("", "answer", [
+      expect.objectContaining({ file, title: "passage.txt" }),
+    ])
+    expect(screen.queryByText("passage.txt")).toBeNull()
+    expect(
+      screen
+        .getByRole("button", { name: "Send message" })
+        .hasAttribute("disabled")
+    ).toBe(true)
+  })
+
+  test("preserves image, video and audio file types when sending", async () => {
+    const user = userEvent.setup()
+    const onSubmit = mock(() => {})
+    render(
+      <Provider>
+        <Composer onSubmit={onSubmit} />
+      </Provider>
+    )
+    const files = [
+      new File(["image"], "scan.JPG"),
+      new File(["video"], "lecture.mp4", { type: "video/mp4" }),
+      new File(["audio"], "reading.m4a", { type: "audio/mp4" }),
+    ]
+    await user.upload(screen.getByLabelText("Attach files"), files)
+    await user.click(screen.getByRole("button", { name: "Send message" }))
+    expect(onSubmit).toHaveBeenCalledWith("", "answer", [
+      expect.objectContaining({ kind: "image", file: files[0] }),
+      expect.objectContaining({ kind: "media", audio: false, file: files[1] }),
+      expect.objectContaining({ kind: "media", audio: true, file: files[2] }),
+    ])
+  })
 })

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

@@ -1,5 +1,5 @@
 import { describe, expect, mock, test } from "bun:test"
-import { render, screen } from "@testing-library/react"
+import { act, fireEvent, render, screen } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { Provider } from "jotai"
 
@@ -7,12 +7,12 @@ import {
   CommandMenu,
   Composer,
   SuggestedPrompts,
-  type ComposerSuggestionsProps,
+  type IComposerSuggestionsProps,
 } 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 () => {
+  test("shows the prompt bar controls at rest and preserves keyboard sending", async () => {
     const user = userEvent.setup()
     const onSubmit = mock(() => {})
     render(
@@ -25,8 +25,13 @@ describe("Composer", () => {
       </Provider>
     )
 
-    expect(screen.getByText("to send message")).toBeDefined()
-    expect(screen.queryByRole("button", { name: "Send message" })).toBeNull()
+    expect(screen.queryByText("to send message")).toBeNull()
+    expect(
+      screen
+        .getByRole("button", { name: "Send message" })
+        .hasAttribute("disabled")
+    ).toBe(true)
+    expect(screen.getByRole("combobox", { name: "Choose model" })).toBeDefined()
 
     const field = screen.getByRole("textbox", { name: "Message" })
     await user.click(field)
@@ -43,7 +48,7 @@ describe("Composer", () => {
   test("folds the suggested prompts behind the disclosure and routes a pick", async () => {
     const user = userEvent.setup()
     const onSelect = mock(() => {})
-    const Suggestions = (props: ComposerSuggestionsProps) => (
+    const Suggestions = (props: IComposerSuggestionsProps) => (
       <SuggestedPrompts onOpenChange={props.onOpenChange} open={props.open}>
         <SuggestedPrompt onSelect={onSelect}>Check ¶12</SuggestedPrompt>
       </SuggestedPrompts>
@@ -78,4 +83,166 @@ describe("Composer", () => {
     await user.click(screen.getByRole("button", { name: "Stop" }))
     expect(onStop).toHaveBeenCalledTimes(1)
   })
+
+  test("filters commands and sources and inserts a keyboard selection without sending", async () => {
+    const user = userEvent.setup()
+    const onSubmit = mock(() => {})
+    const onCommand = mock(() => {})
+    const onSourceSelect = mock(() => {})
+    const command = {
+      id: "validate",
+      label: "/validate",
+      insertText: "/validate ",
+    }
+    const source = { id: "corpus", label: "Corpus", insertText: "@corpus " }
+    render(
+      <Provider>
+        <Composer
+          commands={[command, { id: "compare", label: "/compare" }]}
+          sources={[source]}
+          onSubmit={onSubmit}
+          onCommand={onCommand}
+          onSourceSelect={onSourceSelect}
+        />
+      </Provider>
+    )
+    const field = screen.getByRole("textbox", {
+      name: "Message",
+    }) as HTMLTextAreaElement
+    await user.type(field, "/val")
+    expect(
+      await screen.findByRole("option", { name: "/validate" })
+    ).toBeDefined()
+    expect(screen.queryByRole("option", { name: "/compare" })).toBeNull()
+    await user.keyboard("{Tab}")
+    expect(field.value).toBe("/validate ")
+    expect(onCommand).toHaveBeenCalledWith(command)
+    await user.type(field, "@cor")
+    await user.keyboard("{Enter}")
+    expect(field.value).toBe("/validate @corpus ")
+    expect(onSourceSelect).toHaveBeenCalledWith(source)
+    expect(onSubmit).not.toHaveBeenCalled()
+  })
+
+  test("changes the selected model through the picker", async () => {
+    const user = userEvent.setup()
+    const onModelChange = mock(() => {})
+    render(
+      <Provider>
+        <Composer
+          models={[
+            { id: "auto", label: "Auto" },
+            { id: "reasoning", label: "Reasoning" },
+          ]}
+          onModelChange={onModelChange}
+        />
+      </Provider>
+    )
+    await user.click(screen.getByRole("combobox", { name: "Choose model" }))
+    await user.click(await screen.findByRole("option", { name: "Reasoning" }))
+    expect(onModelChange).toHaveBeenCalledWith("reasoning")
+    expect(
+      screen.getByRole("combobox", { name: "Choose model" }).textContent
+    ).toContain("Reasoning")
+  })
+
+  test("keeps Shift+Enter and IME input from submitting and leaves controlled text to the parent", () => {
+    const onSubmit = mock(() => {})
+    const onValueChange = mock(() => {})
+    render(
+      <Provider>
+        <Composer
+          value="Controlled draft"
+          onSubmit={onSubmit}
+          onValueChange={onValueChange}
+        />
+      </Provider>
+    )
+    const field = screen.getByRole("textbox", {
+      name: "Message",
+    }) as HTMLTextAreaElement
+    fireEvent.keyDown(field, { key: "Enter", shiftKey: true })
+    fireEvent.keyDown(field, { key: "Enter", isComposing: true })
+    expect(onSubmit).not.toHaveBeenCalled()
+    fireEvent.keyDown(field, { key: "Enter" })
+    expect(onSubmit).toHaveBeenCalledWith("Controlled draft", "answer", [])
+    expect(field.value).toBe("Controlled draft")
+  })
+
+  test("dictation appends final results and is cancelled on send", async () => {
+    const original = Object.getOwnPropertyDescriptor(
+      window,
+      "SpeechRecognition"
+    )
+    const recognizers: MockRecognition[] = []
+    class MockRecognition {
+      continuous = false
+      interimResults = false
+      lang = ""
+      onresult:
+        | ((event: {
+            resultIndex: number
+            results: { isFinal: boolean; 0: { transcript: string } }[]
+          }) => void)
+        | null = null
+      onerror: ((event: { error: string }) => void) | null = null
+      onend: (() => void) | null = null
+      start = mock(() => {})
+      stop = mock(() => {})
+      abort = mock(() => {})
+      constructor() {
+        recognizers.push(this)
+      }
+    }
+    Object.defineProperty(window, "SpeechRecognition", {
+      configurable: true,
+      value: MockRecognition,
+    })
+    const onSubmit = mock(() => {})
+    const view = render(
+      <Provider>
+        <Composer defaultValue="Please" onSubmit={onSubmit} />
+      </Provider>
+    )
+    try {
+      fireEvent.click(screen.getByRole("button", { name: "Start dictation" }))
+      const recognizer = recognizers[0]
+      expect(recognizer!.start).toHaveBeenCalledTimes(1)
+      await act(async () => {
+        recognizer!.onresult?.({
+          resultIndex: 0,
+          results: [
+            { isFinal: false, 0: { transcript: "ignore" } },
+            { isFinal: true, 0: { transcript: "validate this" } },
+          ],
+        })
+      })
+      expect(
+        (
+          screen.getByRole("textbox", {
+            name: "Message",
+          }) as HTMLTextAreaElement
+        ).value
+      ).toBe("Please validate this")
+      fireEvent.click(screen.getByRole("button", { name: "Send message" }))
+      expect(onSubmit).toHaveBeenCalledWith(
+        "Please validate this",
+        "answer",
+        []
+      )
+      expect(recognizer!.abort).toHaveBeenCalledTimes(1)
+      expect(recognizer!.onresult).toBeNull()
+      expect(
+        (
+          screen.getByRole("textbox", {
+            name: "Message",
+          }) as HTMLTextAreaElement
+        ).value
+      ).toBe("")
+    } finally {
+      view.unmount()
+      if (original) Object.defineProperty(window, "SpeechRecognition", original)
+      else Reflect.deleteProperty(window, "SpeechRecognition")
+    }
+  })
 })

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

@@ -1,9 +1,9 @@
 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"
+import { Flowchart, type TStepNode } from "../flowchart"
 
-const STEPS: StepNode[] = [
+const STEPS: TStepNode[] = [
   { id: "a", row: 0, x: 0.5, w: 200, title: "A" },
   { id: "b", row: 1, x: 0.5, w: 200, title: "B" },
 ]
@@ -29,6 +29,19 @@ describe("Flowchart", () => {
     expect(container.querySelector("path[data-edge]")!.getAttribute("stroke")).toContain("accent")
   })
 
+  it("does not capture a stationary press away from the selection button", () => {
+    const { container } = render(<Flowchart.Root steps={STEPS} />)
+    const wrapper = container.querySelector('[data-node="a"]') as HTMLElement
+    const capture = mock(() => {})
+    wrapper.setPointerCapture = capture
+    const button = screen.getByRole("button", { name: "A" })
+    fireEvent.pointerDown(button, { button: 0, pointerId: 1, clientX: 20, clientY: 20 })
+    expect(capture).not.toHaveBeenCalled()
+    fireEvent.pointerUp(button, { pointerId: 1 })
+    fireEvent.click(button)
+    expect(button.getAttribute("aria-pressed")).toBe("true")
+  })
+
   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")

package/src/components/composed/chat/__tests__/glass-material.test.tsx

@@ -0,0 +1,54 @@
+import { afterEach, describe, expect, test } from "bun:test"
+import { cleanup, fireEvent, render, screen } from "@testing-library/react"
+import { createRef } from "react"
+import { Button } from "@/components/ui/button"
+import { GlassContainer } from "@/components/ui/glasscn/glass-container"
+import type { TFrostGlassVariant } from "@/lib/glass-variants"
+
+afterEach(cleanup)
+
+describe("library glass material", () => {
+  for (const glassVariant of [
+    "clear",
+    "frosted",
+    "subtle",
+    "liquid",
+    "liquid-refract",
+  ] as TFrostGlassVariant[]) {
+    test(`${glassVariant} keeps the button as the interactive root`, () => {
+      let clicks = 0
+      const { container } = render(
+        <Button
+          variant="glass"
+          glassVariant={glassVariant}
+          onClick={() => clicks++}
+        >
+          Save
+        </Button>
+      )
+      const button = screen.getByRole("button", { name: "Save" })
+      expect(container.firstElementChild).toBe(button)
+      expect(
+        button.querySelector('[data-liquid-glass="material"]')
+      ).toBeTruthy()
+      fireEvent.click(button)
+      expect(clicks).toBe(1)
+    })
+  }
+
+  test("container forwards refs and attributes to the content host", () => {
+    const ref = createRef<HTMLDivElement>()
+    render(
+      <GlassContainer ref={ref} role="region" aria-label="Details">
+        <button>Inspect</button>
+      </GlassContainer>
+    )
+    expect<HTMLElement | null>(ref.current).toBe(
+      screen.getByRole("region", { name: "Details" })
+    )
+    expect(
+      ref.current?.querySelectorAll('[data-liquid-glass="material"]').length
+    ).toBe(1)
+    expect(screen.getByRole("button", { name: "Inspect" })).toBeTruthy()
+  })
+})

package/src/components/composed/chat/__tests__/menu-command.test.tsx

@@ -0,0 +1,35 @@
+import { expect, mock, test } from "bun:test"
+import { render, screen, waitFor } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { MenuCommand } from "@/components/ui/menu-command"
+
+test("filters commands and selects with the keyboard", async () => {
+  const user = userEvent.setup()
+  const onSelect = mock(() => {})
+  const action = mock(() => {})
+  render(
+    <MenuCommand
+      onSelect={onSelect}
+      items={[
+        { id: "search", label: "Search corpus" },
+        { id: "export", label: "Export notes", onSelect: action },
+      ]}
+    >
+      <button>Commands</button>
+    </MenuCommand>
+  )
+  await user.click(screen.getByRole("button", { name: "Commands" }))
+  const input = await screen.findByRole("combobox", { name: "Search commands" })
+  await user.type(input, "Export")
+  await waitFor(() =>
+    expect(screen.queryByRole("option", { name: "Search corpus" })).toBeNull()
+  )
+  await user.keyboard("{ArrowDown}{Enter}")
+  expect(action).toHaveBeenCalledTimes(1)
+  expect(onSelect).toHaveBeenCalledTimes(1)
+  await waitFor(() =>
+    expect(
+      screen.queryByRole("combobox", { name: "Search commands" })
+    ).toBeNull()
+  )
+})

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

@@ -0,0 +1,43 @@
+import { describe, expect, mock, test } from "bun:test"
+import { render, screen, waitFor, within } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+
+import { RecommendationCard } from "../recommendation"
+
+describe("Recommendation content", () => {
+  test("collapses the description and its pills with the body while keeping the title available", async () => {
+    const user = userEvent.setup()
+    const onAccept = mock(() => {})
+    render(
+      <RecommendationCard
+        title="Validate this corpus"
+        description="Check the section features in"
+        entity={{ name: "Iliad", initials: "I" }}
+        leadTime="2 min"
+        defaultOpen={false}
+        onAccept={onAccept}
+      />
+    )
+    const trigger = screen.getByRole("button", { name: "Validate this corpus" })
+    expect(trigger.getAttribute("aria-expanded")).toBe("false")
+    expect(screen.queryByText("Check the section features in")).toBeNull()
+    expect(screen.queryByText("Iliad")).toBeNull()
+    expect(screen.queryByText("2 min")).toBeNull()
+
+    await user.click(trigger)
+    const description = await screen.findByText(
+      "Check the section features in",
+      { exact: false }
+    )
+    expect(description.closest('[data-slot="accordion-panel"]')).not.toBeNull()
+    expect(within(trigger).queryByText("Iliad")).toBeNull()
+    expect(screen.getByText("Iliad")).toBeDefined()
+    expect(screen.getByText("2 min")).toBeDefined()
+    await user.click(screen.getByRole("button", { name: "Accept" }))
+    expect(onAccept).toHaveBeenCalledTimes(1)
+
+    await user.click(trigger)
+    expect(trigger.getAttribute("aria-expanded")).toBe("false")
+    await waitFor(() => expect(screen.queryByText("Iliad")).toBeNull())
+  })
+})

package/src/components/composed/chat/attachment-file.ts

@@ -0,0 +1,82 @@
+"use client"
+
+import { useEffect, useState } from "react"
+
+const MIME_BY_EXTENSION: Record<string, string> = {
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  png: "image/png",
+  gif: "image/gif",
+  webp: "image/webp",
+  avif: "image/avif",
+  svg: "image/svg+xml",
+  mp4: "video/mp4",
+  webm: "video/webm",
+  mov: "video/quicktime",
+  mp3: "audio/mpeg",
+  m4a: "audio/mp4",
+  wav: "audio/wav",
+  ogg: "audio/ogg",
+  pdf: "application/pdf",
+  txt: "text/plain",
+  md: "text/markdown",
+  csv: "text/csv",
+  json: "application/json",
+  xml: "text/xml",
+}
+
+export function attachmentMimeType(file: File): string {
+  return file.type && file.type !== "application/octet-stream"
+    ? file.type
+    : (MIME_BY_EXTENSION[file.name.split(".").pop()?.toLowerCase() ?? ""] ??
+        file.type)
+}
+
+export function attachmentFileKind(
+  file: File
+):
+  { kind: "image" } | { kind: "media"; audio: boolean } | { kind: "document" } {
+  const mime = attachmentMimeType(file)
+  if (mime.startsWith("image/")) return { kind: "image" }
+  if (mime.startsWith("video/") || mime.startsWith("audio/"))
+    return { kind: "media", audio: mime.startsWith("audio/") }
+  return { kind: "document" }
+}
+
+interface FilePreview {
+  file: File
+  url?: string
+  text?: string
+}
+
+/** Each mounted attachment owns its URL, so clearing the tray cannot break a sent preview. */
+export function useAttachmentFile(file?: File) {
+  const [preview, setPreview] = useState<FilePreview>()
+  useEffect(() => {
+    if (!file) return
+    let active = true
+    let url: string | undefined
+    // Create browser resources after mounting; cancelled renders never allocate a URL.
+    void Promise.resolve().then(async () => {
+      if (!active) return
+      try {
+        const mime = attachmentMimeType(file)
+        const blob =
+          mime && file.type !== mime ? file.slice(0, file.size, mime) : file
+        url = URL.createObjectURL(blob)
+        const text =
+          mime.startsWith("text/") || mime === "application/json"
+            ? await file.slice(0, 8192).text()
+            : undefined
+        if (active) setPreview({ file, url, text })
+      } catch {
+        if (active) setPreview({ file, url })
+      }
+    })
+    return () => {
+      active = false
+      if (url) URL.revokeObjectURL(url)
+    }
+  }, [file])
+  return preview?.file === file ? preview : undefined
+}