@exegia/corpora-ui 2.0.0 → 3.1.0

package/src/components/atoms/bubble/__tests__/bubble.test.tsx

@@ -1,193 +0,0 @@
-import { describe, expect, mock, test } from "bun:test"
-import { render, screen } from "@testing-library/react"
-import userEvent from "@testing-library/user-event"
-import { Bubble, type IBubbleReaction } from "../index"
-import User from "@/components/composed/user"
-import { Attachment } from "@/components/composed/chat/attachment"
-
-describe("Bubble", () => {
-  test("detects attachment-only content through fragments without stripping mixed text bubbles", () => {
-    const view = render(
-      <Bubble variant="sender">
-        <Bubble.Message>
-          <>
-            <Attachment kind="document" title="notes.pdf" />
-          </>
-        </Bubble.Message>
-      </Bubble>
-    )
-    expect(
-      view.container
-        .querySelector('[data-slot="bubble-message"]')
-        ?.hasAttribute("data-unstyled")
-    ).toBe(true)
-    view.rerender(
-      <Bubble variant="sender">
-        <Bubble.Message>
-          Read these notes
-          <Attachment kind="document" title="notes.pdf" />
-        </Bubble.Message>
-      </Bubble>
-    )
-    expect(
-      view.container
-        .querySelector('[data-slot="bubble-message"]')
-        ?.hasAttribute("data-unstyled")
-    ).toBe(false)
-  })
-  test("header renders the user's identity row, time and role badge", () => {
-    render(
-      <Bubble variant="sender">
-        <Bubble.Header>
-          <User.Info
-            user={{ firstName: "Sen", lastName: "Der", role: "Admin" }}
-            variant="info"
-          />
-        </Bubble.Header>
-        <Bubble.Message>Hello</Bubble.Message>
-      </Bubble>
-    )
-    expect(screen.getByText(/Sen\s+Der/)).toBeDefined()
-    expect(screen.getByText("Admin")).toBeDefined()
-  })
-
-  test("without children the header only carries the header slot", () => {
-    const { container } = render(
-      <Bubble variant="ai">
-        <Bubble.Header />
-        <Bubble.Message>Generated</Bubble.Message>
-      </Bubble>
-    )
-    expect(
-      container.querySelector('[data-slot="bubble-header"]')
-    ).not.toBeNull()
-    expect(
-      container.querySelector('[data-slot="bubble-header"]')?.textContent
-    ).toBe("")
-    expect(screen.queryByText("Exegia")).toBeNull()
-    expect(screen.queryByText("AI Scholar")).toBeNull()
-  })
-
-  test("reaction chips expose aria-pressed and report toggles by index", async () => {
-    const user = userEvent.setup()
-    const onToggle = mock((_reaction: IBubbleReaction, _index: number) => {})
-    render(
-      <Bubble variant="recipient">
-        <Bubble.Message>Hi</Bubble.Message>
-        <Bubble.Reactions
-          onToggle={onToggle}
-          reactions={[
-            {
-              id: "heart",
-              emoji: "❤️",
-              count: 4,
-              reacted: true,
-              label: "heart",
-            },
-            { id: "thumbs", emoji: "👍", count: 2, label: "thumbs up" },
-          ]}
-        />
-      </Bubble>
-    )
-    const heart = screen.getByRole("button", { name: "heart" })
-    expect(heart.getAttribute("aria-pressed")).toBe("true")
-    expect(heart.textContent).toContain("4")
-    const thumbs = screen.getByRole("button", { name: "thumbs up" })
-    expect(thumbs.getAttribute("aria-pressed")).toBe("false")
-    await user.click(thumbs)
-    expect(onToggle).toHaveBeenCalledTimes(1)
-    expect(onToggle.mock.calls[0]?.[1]).toBe(1)
-  })
-
-  test("the add-reaction button opens the quick reaction bar, not the full picker", async () => {
-    const user = userEvent.setup()
-    render(
-      <Bubble variant="recipient">
-        <Bubble.Message>Hi</Bubble.Message>
-        <Bubble.Reactions reactions={[]} />
-      </Bubble>
-    )
-    // The popup is `keepMounted`, so it is in the DOM from the start — closed
-    // is what matters, and base-ui hides it from the a11y tree until then.
-    const trigger = screen.getByRole("button", { name: "Add reaction" })
-    expect(trigger.getAttribute("aria-expanded")).toBe("false")
-    expect(screen.queryByRole("button", { name: "heart" })).toBeNull()
-    await user.click(trigger)
-
-    expect(await screen.findByRole("button", { name: "heart" })).toBeDefined()
-    // The full picker is what costs a CDN fetch, so it must stay unmounted
-    // until "More" is pressed.
-    expect(document.querySelector('[data-slot="emoji-picker"]')).toBeNull()
-    expect(screen.queryByRole("searchbox")).toBeNull()
-  })
-
-  test('"More emoji" swaps the quick bar for the full picker', async () => {
-    const user = userEvent.setup()
-    render(
-      <Bubble variant="recipient">
-        <Bubble.Message>Hi</Bubble.Message>
-        <Bubble.Reactions reactions={[]} />
-      </Bubble>
-    )
-    await user.click(screen.getByRole("button", { name: "Add reaction" }))
-    await user.click(await screen.findByRole("button", { name: "More emoji" }))
-
-    expect(await screen.findByRole("searchbox")).toBeDefined()
-    expect(document.querySelector('[data-slot="emoji-picker"]')).not.toBeNull()
-    expect(screen.queryByRole("button", { name: "heart" })).toBeNull()
-  })
-
-  test("picking a quick reaction reports the emoji and closes the popover", async () => {
-    const user = userEvent.setup()
-    const onEmojiSelect = mock(
-      (_picked: { emoji: string; label: string }) => {}
-    )
-    render(
-      <Bubble variant="recipient">
-        <Bubble.Message>Hi</Bubble.Message>
-        <Bubble.Reactions onEmojiSelect={onEmojiSelect} reactions={[]} />
-      </Bubble>
-    )
-    await user.click(screen.getByRole("button", { name: "Add reaction" }))
-    await user.click(await screen.findByRole("button", { name: "thumbs up" }))
-
-    expect(onEmojiSelect).toHaveBeenCalledTimes(1)
-    expect(onEmojiSelect.mock.calls[0]?.[0]).toEqual({
-      emoji: "\u{1F44D}",
-      label: "thumbs up",
-    })
-  })
-
-  test("root carries the variant for styling hooks", () => {
-    const { container } = render(
-      <Bubble variant="sender">
-        <Bubble.Message>Out</Bubble.Message>
-      </Bubble>
-    )
-    expect(
-      container
-        .querySelector('[data-slot="bubble"]')
-        ?.getAttribute("data-variant")
-    ).toBe("sender")
-  })
-
-  test("an attachment message keeps its alignment without a bubble surface", () => {
-    const { container } = render(
-      <Bubble variant="sender">
-        <Bubble.Message unstyled>
-          <div data-slot="attachment">scan.jpg</div>
-        </Bubble.Message>
-      </Bubble>
-    )
-    const message = container.querySelector('[data-slot="bubble-message"]')!
-    expect(message.hasAttribute("data-unstyled")).toBe(true)
-    expect(message.className).not.toContain("bubble-sender")
-    expect(message.className).not.toContain("bezel-")
-    expect(message.className).not.toContain("py-3")
-    expect(
-      container
-        .querySelector('[data-slot="bubble"]')
-        ?.getAttribute("data-variant")
-    ).toBe("sender")
-  })
-})

package/src/components/atoms/bubble/__tests__/reference.test.tsx

@@ -1,25 +0,0 @@
-import { describe, expect, test } from "bun:test"
-import { act, fireEvent, render, screen } from "@testing-library/react"
-
-import { Reference } from "../../reference"
-
-describe("Reference", () => {
-  test("shows the passage on hover / focus only when given", async () => {
-    render(
-      <>
-        <Reference preview="Sing, goddess, the wrath">Iliad 1.1</Reference>
-        <Reference>Iliad 1.2</Reference>
-      </>
-    )
-    expect(screen.queryByText("Sing, goddess, the wrath")).toBeNull()
-    const chip = screen.getByText("Iliad 1.1").closest("[data-slot=reference-chip]")!
-    await act(async () => {
-      fireEvent.focus(chip)
-      fireEvent.mouseEnter(chip)
-      fireEvent.mouseMove(chip)
-      await new Promise((r) => setTimeout(r, 400))
-    })
-    expect(await screen.findByText("Sing, goddess, the wrath")).toBeDefined()
-    expect(document.querySelectorAll("[data-slot=reference-preview]").length).toBe(1)
-  })
-})

package/src/components/atoms/bubble/actions.tsx

@@ -1,28 +0,0 @@
-"use client"
-
-import type * as React from "react"
-import { cn } from "@/lib/utils"
-import type { TBubbleActionsProps } from "./types"
-
-/**
- * Row of per-message actions (copy, retry, …). Hidden until the bubble is
- * hovered or an action has focus; compose with `Button size="icon-xs"`.
- */
-export function BubbleActions({
-  className,
-  "aria-label": ariaLabel = "Message actions",
-  ...props
-}: TBubbleActionsProps): React.ReactElement {
-  return (
-    <div
-      aria-label={ariaLabel}
-      className={cn(
-        "flex items-center gap-0.5 opacity-0 transition-opacity duration-150 group-hover/bubble:opacity-100 focus-within:opacity-100 motion-reduce:transition-none relative",
-        className
-      )}
-      data-slot="bubble-actions"
-      role="toolbar"
-      {...props}
-    />
-  )
-}

package/src/components/atoms/bubble/context.ts

@@ -1,11 +0,0 @@
-"use client"
-
-import { createContext, useContext } from "react"
-import type { TBubbleVariant } from "./types"
-
-export const BubbleContext = createContext<TBubbleVariant>("recipient")
-
-/** Variant of the closest `Bubble` ancestor; used by the sub-components. */
-export function useBubbleVariant(): TBubbleVariant {
-  return useContext(BubbleContext)
-}

package/src/components/atoms/bubble/default.tsx

@@ -1,46 +0,0 @@
-"use client"
-
-import type * as React from "react"
-import { cn } from "@/lib/utils"
-import { BubbleContext } from "./context"
-import type { IBubbleProps } from "./types"
-import { twBubbleAlignClasses, twBubbleColumnClasses } from "./utils"
-
-export function Bubble({
-  variant = "sender",
-  continued = false,
-  className,
-  children,
-  ...props
-}: IBubbleProps): React.ReactElement {
-  return (
-    <BubbleContext.Provider value={variant}>
-      <div
-        className={cn(
-          // Full width, not `w-fit`: a fit-content root anchors left, so a
-          // short sender message would sit mid-thread with its column
-          // right-aligned inside its own box instead of hugging the edge.
-          "group/bubble relative my-3 flex w-full flex-col gap-y-3",
-          // 12px bottom margin above minus 10px: a 2px seam between run bubbles.
-          continued && "-mt-2.5",
-          twBubbleAlignClasses[variant],
-          className
-        )}
-        data-continued={continued ? "" : undefined}
-        data-slot="bubble"
-        data-variant={variant}
-        {...props}
-      >
-        <div
-          className={cn(
-            "relative flex flex-col gap-y-2 select-none",
-            twBubbleColumnClasses[variant]
-          )}
-          data-slot="bubble-column"
-        >
-          {children}
-        </div>
-      </div>
-    </BubbleContext.Provider>
-  )
-}

package/src/components/atoms/bubble/header.tsx

@@ -1,36 +0,0 @@
-"use client"
-
-import type * as React from "react"
-import { cn } from "@/lib/utils"
-import { useBubbleVariant } from "./context"
-import type { TBubbleHeaderProps } from "./types"
-
-/**
- * Author row above a message: avatar, name, time and an optional role badge.
- * The sender variant mirrors the order so the row reads inward from the
- * thread's edge, the same way its bubble does.
- */
-export function BubbleHeader({
-  className,
-  children,
-  ...props
-}: TBubbleHeaderProps): React.ReactElement {
-  const variant = useBubbleVariant()
-  const reversed = variant === "sender"
-
-  return (
-    <div
-      className={cn(
-        "gap-2 flex items-center",
-        // The message column keeps its inset; only the identity reaches the thread edge.
-        reversed && "translate-x-4 flex-row-reverse",
-        variant === "recipient" && "-translate-x-4",
-        className
-      )}
-      data-slot="bubble-header"
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}

package/src/components/atoms/bubble/index.ts

@@ -1,37 +0,0 @@
-import { Bubble as BubbleRoot } from "./default"
-import { useBubbleVariant } from "./context"
-import { BubbleActions } from "./actions"
-import { BubbleHeader } from "./header"
-import { BubbleMessage } from "./message"
-import { Reference } from "../reference"
-import { BubbleReactionChip, BubbleReactions } from "./reactions"
-
-export const Bubble = Object.assign(BubbleRoot, {
-  Header: BubbleHeader,
-  Message: BubbleMessage,
-  Reactions: BubbleReactions,
-  Reaction: BubbleReactionChip,
-  Actions: BubbleActions,
-})
-
-export {
-  BubbleActions,
-  BubbleHeader,
-  BubbleMessage,
-  BubbleReactionChip,
-  BubbleReactions,
-  Reference,
-  useBubbleVariant,
-}
-
-export type {
-  TBubbleActionsProps,
-  IBubblePickedEmoji,
-  TBubbleHeaderProps,
-  TBubbleMessageProps,
-  IBubbleReactionChipProps,
-  IBubbleProps,
-  IBubbleReaction,
-  IBubbleReactionsProps,
-  TBubbleVariant
-} from "./types"

package/src/components/atoms/bubble/message.tsx

@@ -1,32 +0,0 @@
-"use client"
-
-import type * as React from "react"
-import { cn } from "@/lib/utils"
-import { useBubbleVariant } from "./context"
-import type { TBubbleMessageProps } from "./types"
-import { twBubbleMessageClasses } from "./utils"
-import { containsOnlyAttachments } from "@/lib/attachment-content"
-
-export function BubbleMessage({
-  className,
-  unstyled,
-  children,
-  ...props
-}: TBubbleMessageProps): React.ReactElement {
-  const variant = useBubbleVariant()
-  const bare = unstyled ?? containsOnlyAttachments(children)
-  return (
-    <div
-      className={cn(
-        "gap-y-2 relative flex-col select-none",
-        bare ? "min-w-0 flex max-w-full" : twBubbleMessageClasses[variant],
-        className
-      )}
-      data-slot="bubble-message"
-      data-unstyled={bare ? "" : undefined}
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}

package/src/components/atoms/bubble/reactions.tsx

@@ -1,191 +0,0 @@
-"use client"
-
-import { AnimatePresence, motion, useReducedMotion } from "motion/react"
-import type * as React from "react"
-import { cn } from "@/lib/utils"
-import { EASE_IN_OUT, SPRING_PRESS, SPRING_SWAP } from "@/lib/ease"
-import { useBubbleVariant } from "./context"
-import { MorphIcon } from "morphicons/react";
-import type {
-  IBubbleReactionsProps,
-  IBubbleReactionChipProps,
-  TBubbleReactionsButtonProps,
-} from "./types"
-import { reactionKey } from "./utils"
-import { GlassContainer } from "@/components/ui/glasscn/glass-container"
-import {
-  Popover,
-  PopoverGlass,
-  PopoverTrigger,
-} from "@/components/ui/popover-glass"
-import { ActionBar } from "@/components/composed/action-bar"
-import { useState } from "react"
-import { FaceSlightlySmilingPlus, X } from "lucide"
-
-/**
- * One emoji + count inside the pill. Pressing it springs the emoji, and a
- * count change slides the old number out as the new one drops in.
- */
-export function BubbleReactionChip({
-  reaction,
-  index,
-  onToggle,
-  className,
-  ...props
-}: IBubbleReactionChipProps): React.ReactElement {
-  const reduceMotion = useReducedMotion()
-  const showCount = reaction.count != null && reaction.count > 0
-
-  return (
-    <motion.button
-      aria-label={reaction.label}
-      aria-pressed={reaction.reacted ?? false}
-      className={cn(
-        "inline-flex cursor-pointer items-center gap-1 rounded-lg px-1 py-1.5 font-bold text-neutral-600 transition-[colors,scale] duration-150 ease-smooth-out outline-none hover:scale-105 focus-visible:ring-0 focus-visible:ring-ring dark:text-neutral-300",
-        reaction.reacted && "text-foreground",
-        className
-      )}
-      data-reacted={reaction.reacted ? "" : undefined}
-      data-slot="bubble-reaction"
-      onClick={() => onToggle?.(reaction, index)}
-      transition={SPRING_PRESS}
-      type="button"
-      whileTap={reduceMotion ? undefined : { scale: 0.88 }}
-      {...props}
-    >
-      <motion.span
-        animate={
-          reduceMotion
-            ? { scale: 1 }
-            : { scale: reaction.reacted ? [1, 1.35, 1] : 1 }
-        }
-        aria-hidden={reaction.label ? true : undefined}
-        className="block text-xs/snug select-none"
-        transition={
-          reduceMotion
-            ? { duration: 0 }
-            : { duration: 0.36, ease: EASE_IN_OUT, times: [0, 0.45, 1] }
-        }
-      >
-        {reaction.emoji}
-      </motion.span>
-      {showCount ? (
-        <span className="relative inline-grid overflow-hidden tabular-nums">
-          <AnimatePresence initial={false} mode="popLayout">
-            <motion.span
-              animate={{ y: 0, opacity: 1 }}
-              className="text-xs/snug select-none"
-              exit={{ y: reduceMotion ? 0 : -10, opacity: 0 }}
-              initial={{ y: reduceMotion ? 0 : 10, opacity: 0 }}
-              key={reaction.count}
-              transition={reduceMotion ? { duration: 0 } : SPRING_SWAP}
-            >
-              {reaction.count}
-            </motion.span>
-          </AnimatePresence>
-        </span>
-      ) : null}
-    </motion.button>
-  )
-}
-
-export function BubbleReactionsButton({
-  className,
-  onClick,
-  onEmojiSelect
-}: TBubbleReactionsButtonProps): React.ReactElement {
-
-  const [open, setOpen] = useState(false)
-  return (
-    <Popover onOpenChange={setOpen} open={open}>
-      <PopoverTrigger
-        render={(_props, state) => (
-          <button
-            aria-label="Add reaction"
-            className={cn(
-              "inline-flex cursor-pointer items-center gap-1 rounded-lg px-1 py-2 font-bold text-neutral-600 duration-150 ease-smooth-out outline-none hover:scale-105 focus-visible:ring-0 dark:text-neutral-300",
-              className
-            )}
-            data-slot="bubble-reaction-button"
-            type="button"
-            {..._props}
-            // After the spread, and composed: base-ui's own onClick is what
-            // opens the popover, so overwriting it would wedge the trigger and
-            // letting it win would swallow the caller's handler.
-            onClick={(event) => {
-              _props.onClick?.(event)
-              onClick?.(event)
-            }}
-          >
-             <MorphIcon icon={state.open ? X : FaceSlightlySmilingPlus} size={16} />
-          </button>
-        )}
-      />
-       
-      <PopoverGlass
-        align="center"
-        alignOffset={-25}
-  
-        glassVariant="frosted"
-        sideOffset={5}
-        side="top"
-      >
-        <ActionBar.Emoji
-          onEmojiSelect={(picked) => {
-            onEmojiSelect?.(picked)
-            setOpen(false)
-          }}
-        />
-      </PopoverGlass>
-    </Popover>
-  )
-}
-
-/**
- * Glass reaction pill that hangs off the bubble's bottom trailing corner.
- * Pass `reactions` for the standard chips, or children for a custom row —
- * both share the pill.
- */
-export function BubbleReactions({
-  reactions = [],
-  onToggle,
-  onEmojiSelect,
-  className,
-  children,
-  ...props
-}: IBubbleReactionsProps): React.ReactElement {
-  const variant = useBubbleVariant()
-  return (
-    <div
-      className={cn(
-        "absolute -bottom-5 z-1 flex max-h-8 w-fit flex-1 items-center",
-        variant === "sender" ? "left-4" : "right-4",
-        className
-      )}
-    >
-      <GlassContainer
-        glassVariant="liquid"
-        optics={{ strength: 0.5, depth: 0.5, bendWidth: 0.4, frost: 1.5 }}
-        className={cn(
-          "inline-flex h-full w-fit items-center rounded-xl",
-          className
-        )}
-        data-slot="bubble-reactions"
-        {...props}
-      >
-        <div className={cn("mx-1.5 inline-flex h-full items-center")}>
-          {reactions.map((reaction, index) => (
-            <BubbleReactionChip
-              index={index}
-              key={reactionKey(reaction, index)}
-              onToggle={onToggle}
-              reaction={reaction}
-            />
-          ))}
-          <BubbleReactionsButton onEmojiSelect={onEmojiSelect} />
-          {children}
-        </div>
-      </GlassContainer>
-    </div>
-  )
-}

package/src/components/atoms/bubble/types.ts

@@ -1,82 +0,0 @@
-import type { HTMLMotionProps } from "motion/react"
-import type { ComponentPropsWithoutRef, ReactNode } from "react"
-
-/**
- * Who the bubble belongs to:
- * - "sender"    — the current user's outgoing message (right-aligned, inverted)
- * - "recipient" — an incoming message from another person (left-aligned, muted)
- * - "ai"        — generated output (left-aligned, chrome-less prose)
- */
-export type TBubbleVariant = "ai" | "sender" | "recipient"
-
-export interface IBubbleProps extends ComponentPropsWithoutRef<"div"> {
-  variant?: TBubbleVariant
-  /**
-   * A follow-up in a run of messages from the same author: tucks under the
-   * previous bubble. Render `Bubble.Header` on the first of the run only.
-   */
-  continued?: boolean
-}
-
-export type TBubbleMessageProps = ComponentPropsWithoutRef<"div"> & {
-  /** No bubble surface. Automatically true for attachment-only children; set explicitly for custom wrappers. */
-  unstyled?: boolean
-}
-
-export type TBubbleHeaderProps = ComponentPropsWithoutRef<"div">
-
-export interface IBubbleReaction {
-  /** Stable key; falls back to the label/emoji when omitted. */
-  id?: string
-  emoji: ReactNode | string
-  count?: number
-  /** Whether the current user has this reaction. */
-  reacted?: boolean
-  /** Accessible name, e.g. "thumbs up". Required when emoji is not a string. */
-  label?: string
-}
-
-/** An emoji chosen from the picker. Mirrors frimousse's payload so the
- *  library never re-exports a dependency's type on its public surface. */
-export interface IBubblePickedEmoji {
-  emoji: string
-  label: string
-}
-
-export interface IBubbleReactionsProps extends Omit<
-  ComponentPropsWithoutRef<"div">,
-  "onToggle"
-> {
-  reactions?: IBubbleReaction[]
-  onToggle?: (reaction: IBubbleReaction, index: number) => void
-  /** Fires when an emoji is picked from the add-reaction popover. */
-  onEmojiSelect?: (emoji: IBubblePickedEmoji) => void
-}
-
-export type TBubbleActionsProps = ComponentPropsWithoutRef<"div">
-
-export interface IBubbleReactionChipProps extends Omit<
-  HTMLMotionProps<"button">,
-  "onToggle" | "children"
-> {
-  reaction: IBubbleReaction
-  index: number
-  onToggle?: (reaction: IBubbleReaction, index: number) => void
-}
-
-export type TBubbleReactionsButtonProps = Omit<
-  HTMLMotionProps<"button">,
-  "onToggle" | "children" | "onClick"
-> & {
-  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
-  /** Fires when an emoji is picked from the popover. */
-  onEmojiSelect?: (emoji: IBubblePickedEmoji) => void
-}
-
-/**
- * Only what the chip actually forwards. It renders through `Button`, which is
- * either a `<button>` or — with an href — an `<a>`, so the full anchor prop
- * set cannot be honoured (and `type` means two different things across the
- * two elements). Declaring the anchor set wholesale only advertised props the
- * chip silently dropped.
- */