@exegia/corpora-ui 1.0.0 → 3.0.0

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

@@ -1,29 +1,316 @@
-import { describe, expect, test } from "bun:test"
-import { render, screen } from "@testing-library/react"
+import { describe, expect, mock, test } from "bun:test"
+import { fireEvent, render, screen } from "@testing-library/react"
 
-import { Chart } from "../chart"
+import {
+  Chart,
+  useChartActions,
+  useChartState,
+  removeChartInstance,
+} from "../chart"
+import { StrictMode } from "react"
+import { Provider, createStore } from "jotai"
+import { chartSelectedKeyAtom } from "../chart/chart-atom"
+import { buildChartConfig } from "../chart/utils"
+import { createChartTooltip } from "../chart/chart-tooltip"
 
-const data = [{ label: "A", v: 1 }, { label: "B", v: 2 }]
+function Controls({ id }: { id: string }) {
+  const actions = useChartActions(id)
+  const { selectedKey } = useChartState(id)
+  return (
+    <>
+      <output data-testid={`${id}-selection`}>{selectedKey ?? "none"}</output>
+      <button onClick={() => actions.select("v")}>Select {id}</button>
+      <button onClick={actions.clearSelection}>Clear {id}</button>
+      <button onClick={actions.reset}>Reset {id}</button>
+      <button onClick={() => actions.select("missing")}>Invalid {id}</button>
+    </>
+  )
+}
+
+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="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)
+    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} />)
+    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)
+    expect(container.querySelectorAll('[data-slot="legend-item"]').length).toBe(
+      0
+    )
+  })
+
+  test("uses the supplied reference instead of the type badge and routes selection", () => {
+    const onClick = mock(() => {})
+    const { container } = render(
+      <Chart
+        type="area"
+        title="Cross-reference coverage"
+        reference={{ children: "John 3:14–18", onClick }}
+        data={data}
+        series={series}
+      />
+    )
+    expect(screen.queryByText("Area")).toBeNull()
+    expect(
+      container.querySelectorAll('[data-slot="reference-chip"]').length
+    ).toBe(1)
+    fireEvent.click(screen.getByRole("button", { name: "John 3:14–18" }))
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+})
+
+describe("Chart selection", () => {
+  test("named instances stay isolated and external actions update legend selection", () => {
+    const onChange = mock(() => {})
+    render(
+      <Provider>
+        <Chart
+          chartId="one"
+          type="bar"
+          data={data}
+          series={series}
+          interactive
+          onSelectionChange={onChange}
+        />
+        <Chart
+          chartId="two"
+          type="line"
+          data={data}
+          series={series}
+          interactive
+        />
+        <Controls id="one" />
+        <Controls id="two" />
+      </Provider>
+    )
+    fireEvent.click(screen.getByText("Select one"))
+    expect(screen.getByTestId("one-selection").textContent).toBe("v")
+    expect(screen.getByTestId("two-selection").textContent).toBe("none")
+    expect(
+      screen
+        .getAllByRole("button", { name: "Value" })[0]
+        .getAttribute("aria-pressed")
+    ).toBe("true")
+    expect(onChange).toHaveBeenCalledTimes(1)
+    fireEvent.click(screen.getByText("Invalid one"))
+    expect(onChange).toHaveBeenCalledTimes(1)
+    fireEvent.click(screen.getByText("Clear one"))
+    expect(screen.getByTestId("one-selection").textContent).toBe("none")
+  })
+  test("controlled props remain authoritative until parent accepts selection", () => {
+    const onChange = mock(() => {})
+    const { rerender } = render(
+      <Chart
+        type="area"
+        data={data}
+        series={series}
+        interactive
+        selectedKey={null}
+        onSelectionChange={onChange}
+      />
+    )
+    fireEvent.click(screen.getByRole("button", { name: "Value" }))
+    expect(onChange).toHaveBeenCalledWith("v")
+    expect(
+      screen.getByRole("button", { name: "Value" }).getAttribute("aria-pressed")
+    ).toBe("false")
+    rerender(
+      <Chart
+        type="area"
+        data={data}
+        series={series}
+        interactive
+        selectedKey="v"
+        onSelectionChange={onChange}
+      />
+    )
+    expect(
+      screen.getByRole("button", { name: "Value" }).getAttribute("aria-pressed")
+    ).toBe("true")
+  })
+  test("reset restores the default and removed series clear selection", () => {
+    const store = createStore()
+    const { rerender } = render(
+      <Provider store={store}>
+        <Chart
+          chartId="reset"
+          type="bar"
+          data={data}
+          series={series}
+          defaultSelectedKey="v"
+        />
+        <Controls id="reset" />
+      </Provider>
+    )
+    fireEvent.click(screen.getByText("Clear reset"))
+    fireEvent.click(screen.getByText("Reset reset"))
+    expect(store.get(chartSelectedKeyAtom("reset"))).toBe("v")
+    rerender(
+      <Provider store={store}>
+        <Chart
+          chartId="reset"
+          type="bar"
+          data={data}
+          series={[]}
+          defaultSelectedKey="v"
+        />
+      </Provider>
+    )
+    expect(store.get(chartSelectedKeyAtom("reset"))).toBeNull()
+  })
+  test("generated identity survives StrictMode effect replay", async () => {
+    render(
+      <StrictMode>
+        <Chart type="line" data={data} series={series} interactive />
+      </StrictMode>
+    )
+    await Promise.resolve()
+    fireEvent.click(screen.getByRole("button", { name: "Value" }))
+    expect(
+      screen.getByRole("button", { name: "Value" }).getAttribute("aria-pressed")
+    ).toBe("true")
+  })
+  test("pie selection uses category labels", () => {
+    const callback = mock(() => {})
+    render(
+      <Chart
+        type="pie"
+        data={data}
+        series={series}
+        interactive
+        onSelectionChange={callback}
+      />
+    )
+    fireEvent.click(screen.getByRole("button", { name: "A 1" }))
+    expect(callback).toHaveBeenCalledWith("A")
+  })
+  test("instance removal releases the atom family", () => {
+    const original = chartSelectedKeyAtom("removed")
+    removeChartInstance("removed")
+    expect(chartSelectedKeyAtom("removed")).not.toBe(original)
+  })
+})
+describe("Chart adapters", () => {
+  test("config preserves CSS tokens and custom series colors", () => {
+    expect(
+      buildChartConfig("bar", data, [{ ...series[0], color: "var(--primary)" }])
+        .v.colors?.light
+    ).toEqual(["var(--primary)"])
+    expect(Object.keys(buildChartConfig("pie", data, series))).toEqual([
+      "A",
+      "B",
+    ])
+  })
+  test("tooltip escapes data and preserves React formatters", () => {
+    const tooltip = createChartTooltip("bar", data, [
+      {
+        key: "v",
+        label: "<script>",
+        format: (value) => <strong>{value}%</strong>,
+      },
+    ])
+    const html = tooltip({ seriesIndex: 0, dataIndex: 1 })
+    expect(html).toContain("&lt;script&gt;")
+    expect(html).toContain("<strong>2%</strong>")
+  })
+})
+
+test("tooltip defaults to frosted glass with one surface shadow", () => {
+  const params = { seriesIndex: 0, dataIndex: 1 }
+  const html = createChartTooltip("bar", data, series)(params)
+  expect(html).toContain("bg-background/50")
+  expect(html).toContain("backdrop-blur-md")
+  expect(html).toContain("box-shadow:0 4px 12px rgb(0 0 0 / 0.12)")
+  const solid = createChartTooltip("bar", data, series, { variant: "default" })(
+    params
+  )
+  expect(solid).not.toContain("backdrop-blur-md")
+})
+
+describe("Chart consumer layout", () => {
+  test("accepts CSS dimensions and replaces the framed root", () => {
+    const { container } = render(
+      <Chart
+        type="bar"
+        data={[]}
+        series={series}
+        width="100%"
+        height={360}
+        render={<section aria-label="Research chart" />}
+      />
+    )
+    const root = screen.getByRole("region", { name: "Research chart" })
+    expect(root.getAttribute("data-slot")).toBe("chart")
+    expect(root.style.width).toBe("100%")
+    expect(root.style.height).toBe("360px")
+    expect(
+      (container.querySelector('[role="group"]') as HTMLElement).style.height
+    ).toBe("100%")
+  })
+  test("explicit plot height and consumer styles take precedence", () => {
+    const { container } = render(
+      <Chart
+        type="bar"
+        data={[]}
+        series={series}
+        width={320}
+        height={360}
+        plotHeight="12rem"
+        style={{ width: "90%" }}
+      />
+    )
+    expect(
+      (container.querySelector('[data-slot="chart"]') as HTMLElement).style
+        .width
+    ).toBe("90%")
+    expect(
+      (container.querySelector('[role="group"]') as HTMLElement).style.height
+    ).toBe("12rem")
+  })
+  test("custom components receive props and children in headerless mode", () => {
+    function Surface(props: React.ComponentProps<"section">) {
+      return <section {...props} data-surface="custom" />
+    }
+    render(
+      <Chart
+        type="pie"
+        data={[]}
+        series={series}
+        headerless
+        render={<Surface aria-label="Bare chart" />}
+        width={480}
+        height={240}
+      />
+    )
+    const root = screen.getByRole("region", { name: "Bare chart" })
+    expect(root.getAttribute("data-surface")).toBe("custom")
+    expect(root.style.width).toBe("480px")
+    expect(screen.getByRole("status").textContent).toBe("No data")
   })
 })

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")