@exegia/corpora-ui 1.0.0 → 3.0.0

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
+}