@exegia/corpora-ui 0.28.0 → 1.0.0

package/src/components/atoms/_layout.tsx

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+import { createHomeLayout } from "fumapress/layouts/home";
+import type PressConfig from "../../../press.config";
+
+const HomeLayout = createHomeLayout<typeof PressConfig.$context>();
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return <HomeLayout>{children}</HomeLayout>;
+}

package/src/components/atoms/avatar/base.tsx

@@ -0,0 +1,70 @@
+import {
+  Avatar,
+  AvatarBadge,
+  AvatarFallback,
+  AvatarImage,
+} from "@/components/ui/avatar"
+import type { AvatarProps, UserType } from "./types"
+import { cn } from "@/lib/utils"
+import {
+  initialsFrom,
+  loaderSizes,
+  ringClasses,
+  sizeClasses,
+  statusClasses,
+} from "./utils"
+import { User } from "lucide-react"
+import { VerifiedBadge } from "./verified"
+import { Skeleton } from "@/components/ui/skeleton"
+import { Loader } from "../loader"
+
+export default function Base<T extends UserType>({
+  user,
+  size = "sm",
+  className,
+  loading,
+  audio,
+}: AvatarProps<T>) {
+  return (
+    <div
+      className={cn(
+        "relative",
+        audio && "group/avatar flex items-center justify-center"
+      )}
+    >
+      {
+        /* Animated Story Ring — suppressed while loading; identity first */
+        audio && !loading && (
+          <div
+            className={cn(
+              "absolute -inset-1 rounded-full bg-linear-to-tr from-yellow-400 via-fuchsia-500 to-violet-600 blur-xs transition-all duration-500",
+              ringClasses[audio]
+            )}
+          />
+        )
+      }
+      <Avatar className={cn(sizeClasses[size], className)}>
+        <AvatarImage src={user?.avatarUrl} alt={user?.firstName} />
+        <AvatarFallback>
+          {initialsFrom(user) ?? <User className="size-4" aria-hidden="true" />}
+        </AvatarFallback>
+        {loading && (
+          <Skeleton className="absolute inset-0 rounded-full ring-1 ring-border/50 dark:[--skeleton-highlight:--alpha(var(--color-white)/14%)]" />
+        )}
+        {user && user.status && !loading && size !== "sm" && (
+          <AvatarBadge className={statusClasses[user.status]} />
+        )}
+        {user && user.verified && !loading && size !== "sm" && (
+          <span className="absolute -top-0.5 -right-0.5">
+            <VerifiedBadge />
+          </span>
+        )}
+      </Avatar>
+      {loading && (
+        <div className="absolute inset-0 flex items-center justify-center">
+          <Loader type="dots" size={loaderSizes[size]} />
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,3 @@
+import Avatar from "./base"
+
+export { Avatar }

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

@@ -0,0 +1,24 @@
+import type { AtomSize } from "../types";
+
+export type UserType = {
+  firstName?: string
+  lastName?: string
+  email?: string
+  role?: string
+  avatarUrl?: string
+  verified?: boolean
+  status?: AvatarStatus
+}
+
+export type AvatarSize = Exclude<AtomSize, "xs">
+export type AvatarStatus = "online" | "idle" | "offline"
+
+export type AvatarAudio = "muted" | "unmuted" | "speaking"
+
+export interface AvatarProps<T extends UserType> {
+  user?: T
+  size?: AvatarSize
+  className?: string
+  audio?: AvatarAudio
+  loading?: boolean
+}

package/src/components/atoms/avatar/utils.ts

@@ -0,0 +1,54 @@
+import type { ClassValue } from "class-variance-authority/types"
+import type { AvatarAudio, AvatarSize, UserType } from "./types"
+import type { AtomSize } from "../types";
+
+export function initialsFrom(user: string | UserType | undefined): string | undefined {
+  // If the user is a string, use it directly to generate initials.
+  if (user && typeof user === "string") {
+    const parts = user.trim().split(/\s+/).filter(Boolean)
+    if (parts.length === 0) return ""
+    const first = parts[0]?.[0] ?? ""
+    const last = parts.length > 1 ? (parts.at(-1)?.[0] ?? "") : ""
+    return (first + last).toUpperCase()
+  }
+  // If the user is not a string, use firstName and lastName to generate initials.
+  if (user && typeof user !== "string" && user.firstName && user.lastName)
+    return user.firstName.charAt(0) + user.lastName.charAt(0)
+  // If the user does not have a firstName or lastName, return undefined.
+  return undefined
+}
+
+export const avatarIsSpeakingClass =
+  "ring-background size-10 ring-2 transition-transform duration-500 group-hover/avatar:scale-95"
+
+export const ringClasses: Record<NonNullable<AvatarAudio>, ClassValue> = {
+  muted: "group-hover/avatar:opacity-0 group-hover/avatar:blur-none  opacity-0",
+  unmuted:
+    "animate-none group-hover/avatar:opacity-70 group-hover/avatar:blur-sm opacity-30",
+  speaking:
+    "animate-[spin_3s_linear_infinite] group-hover/avatar:opacity-100 group-hover/avatar:blur-sm opacity-75",
+}
+
+export const sizeClasses: Record<AvatarSize, string> = {
+  sm: "size-6",
+  default: "size-8",
+  lg: "size-10",
+  xl: "size-14",
+  xxl: "size-16",
+}
+
+// Dot trio ≈ 45-55% of the disc: 3×dot + 2×4px gap.
+// 24px disc → 14px trio (xs), 40px → 20px (sm), 64px → 32px (md).
+export const loaderSizes: Record<AvatarSize, AtomSize> = {
+  sm: "xs",
+  default: "xs",
+  lg: "sm",
+  xl: "sm",
+  xxl: "default",
+}
+
+export const statusClasses = {
+  online: "bg-success",
+  idle: "bg-warning",
+  offline: "bg-text-secondary",
+}

package/src/components/atoms/avatar/verified.tsx

@@ -0,0 +1,16 @@
+
+
+export const VerifiedBadge = () => {
+  return (
+    <svg viewBox="0 0 15 16" className="size-4">
+      <path
+        className="fill-blue-500"
+        d="M14.5425 6.8973L13.5 5.8398C13.4273 5.76858 13.3699 5.68331 13.3312 5.58919C13.2925 5.49507 13.2734 5.39405 13.275 5.2923V3.7923C13.274 3.58681 13.2324 3.38353 13.1527 3.19414C13.0729 3.00476 12.9565 2.833 12.8101 2.68874C12.6638 2.54448 12.4904 2.43055 12.2998 2.35351C12.1093 2.27647 11.9055 2.23783 11.7 2.2398H10.2C10.0982 2.24141 9.99722 2.22228 9.9031 2.1836C9.80898 2.14492 9.72371 2.08749 9.65249 2.0148L8.60249 0.957304C8.30998 0.665106 7.91344 0.500977 7.49999 0.500977C7.08654 0.500977 6.68999 0.665106 6.39749 0.957304L5.33999 1.9998C5.26876 2.07249 5.1835 2.12992 5.08937 2.1686C4.99525 2.20728 4.89424 2.22641 4.79249 2.2248H3.29249C3.08699 2.22578 2.88371 2.26735 2.69432 2.34713C2.50494 2.4269 2.33318 2.54331 2.18892 2.68966C2.04466 2.83602 1.93073 3.00943 1.85369 3.19994C1.77665 3.39046 1.73801 3.59431 1.73999 3.7998V5.2998C1.74159 5.40155 1.72247 5.50256 1.68378 5.59669C1.6451 5.69081 1.58767 5.77608 1.51499 5.8473L0.457487 6.8973C0.165289 7.18981 0.00115967 7.58635 0.00115967 7.9998C0.00115967 8.41325 0.165289 8.80979 0.457487 9.1023L1.49999 10.1598C1.57267 10.231 1.6301 10.3163 1.66878 10.4104C1.70747 10.5045 1.72659 10.6056 1.72499 10.7073V12.2073C1.72597 12.4128 1.76754 12.6161 1.84731 12.8055C1.92709 12.9949 2.04349 13.1666 2.18985 13.3109C2.3362 13.4551 2.50961 13.5691 2.70013 13.6461C2.89064 13.7231 3.0945 13.7618 3.29999 13.7598H4.79999C4.90174 13.7582 5.00275 13.7773 5.09687 13.816C5.191 13.8547 5.27627 13.9121 5.34749 13.9848L6.40499 15.0423C6.69749 15.3345 7.09404 15.4986 7.50749 15.4986C7.92094 15.4986 8.31748 15.3345 8.60999 15.0423L9.65999 13.9998C9.73121 13.9271 9.81647 13.8697 9.9106 13.831C10.0047 13.7923 10.1057 13.7732 10.2075 13.7748H11.7075C12.1212 13.7748 12.518 13.6104 12.8106 13.3179C13.1031 13.0253 13.2675 12.6285 13.2675 12.2148V10.7148C13.2659 10.6131 13.285 10.512 13.3237 10.4179C13.3624 10.3238 13.4198 10.2385 13.4925 10.1673L14.55 9.1098C14.6953 8.96434 14.8104 8.79157 14.8887 8.60146C14.9671 8.41134 15.007 8.20761 15.0063 8.00199C15.0056 7.79638 14.9643 7.59293 14.8847 7.40334C14.8051 7.21376 14.6888 7.04178 14.5425 6.8973Z"
+      />
+      <path
+        className="fill-white"
+        d="M10.635 6.6498L6.95249 10.2498C6.90055 10.3024 6.83864 10.3441 6.77038 10.3724C6.70212 10.4007 6.62889 10.4152 6.55499 10.4148C6.48062 10.4138 6.40719 10.398 6.33896 10.3684C6.27073 10.3388 6.20905 10.2959 6.15749 10.2423L4.37999 8.4423C4.32532 8.39026 4.28169 8.32775 4.25169 8.25849C4.22169 8.18923 4.20593 8.11464 4.20536 8.03916C4.20479 7.96369 4.21941 7.88887 4.24836 7.81916C4.27731 7.74946 4.31999 7.68629 4.37387 7.63342C4.42774 7.58056 4.4917 7.53908 4.56194 7.51145C4.63218 7.48382 4.70726 7.47061 4.78271 7.4726C4.85816 7.4746 4.93244 7.49176 5.00112 7.52306C5.0698 7.55436 5.13148 7.59917 5.18249 7.6548L6.56249 9.0573L9.84749 5.8473C9.95296 5.74197 10.0959 5.6828 10.245 5.6828C10.394 5.6828 10.537 5.74197 10.6425 5.8473C10.6953 5.90016 10.737 5.963 10.7653 6.03216C10.7935 6.10132 10.8077 6.17542 10.807 6.25013C10.8063 6.32483 10.7908 6.39865 10.7612 6.46728C10.7317 6.5359 10.6888 6.59795 10.635 6.6498Z"
+      />
+    </svg>
+  )
+}

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

@@ -0,0 +1,8 @@
+import { Texture } from "./texture"
+
+const Background = {
+  Texture
+}
+
+export * from "./type"
+export default Background

package/src/components/atoms/background/texture.tsx

@@ -0,0 +1,29 @@
+import { cn } from "@/lib/utils"
+import type { TextureProps } from "./type";
+import { linearGradient, textureMap } from "./utils";
+
+
+export function Texture({
+  variant = "fabric",
+  opacity = 1,
+  className,
+  children,
+}: TextureProps) {
+  const textureUrl = variant !== "none" ? textureMap[variant] : null
+  return (
+    <div className="relative h-full w-full flex flex-col flex-1">
+      {textureUrl && (
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0"
+          style={{
+            backgroundImage: `url(${textureUrl})`,
+            backgroundRepeat: "repeat",
+            opacity,
+          }}
+        />
+      )}
+      {children && <div className={cn("h-full w-full flex flex-col flex-1", linearGradient, className)}>{children}</div>}
+    </div>
+  )
+}

package/src/components/atoms/background/type.ts

@@ -0,0 +1,10 @@
+export type TextureVariant =
+  | "fabric"
+  | "paper"
+  | "none"
+export interface TextureProps {
+  variant?: TextureVariant
+  opacity?: number
+  className?: string
+  children?: React.ReactNode
+}

package/src/components/atoms/background/utils.ts

@@ -0,0 +1,13 @@
+import type { TextureVariant } from "./type";
+import fabricBackground from "@/assets/fabric.png";
+import paperBackground from "@/assets/paper.png";
+
+export const textureMap: Record<Exclude<TextureVariant, "none">, string> = {
+  fabric: fabricBackground,
+  paper: paperBackground,
+}
+
+export const linearGradient = "bg-linear-to-t from-background from-10% to-transparent to-40% dark:from-10% dark:to-background/30 dark:to-50%";
+
+export const verticalFadeGradient = (color: string, spread: number = 50) =>
+  `linear-gradient(to top, ${color} 0%, ${color} ${spread}%, transparent 100%)`

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

@@ -0,0 +1,138 @@
+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 BubbleReaction } from "../index"
+import User from "@/components/composed/user"
+
+describe("Bubble", () => {
+  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: BubbleReaction, _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")
+  })
+})

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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,28 @@
+"use client"
+
+import type * as React from "react"
+import { cn } from "@/lib/utils"
+import type { BubbleActionsProps } 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
+}: BubbleActionsProps): 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

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

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

@@ -0,0 +1,46 @@
+"use client"
+
+import type * as React from "react"
+import { cn } from "@/lib/utils"
+import { BubbleContext } from "./context"
+import type { BubbleProps } from "./types"
+import { twBubbleAlignClasses, twBubbleColumnClasses } from "./utils"
+
+export function Bubble({
+  variant = "sender",
+  continued = false,
+  className,
+  children,
+  ...props
+}: BubbleProps): 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

@@ -0,0 +1,34 @@
+"use client"
+
+import type * as React from "react"
+import { cn } from "@/lib/utils"
+import { useBubbleVariant } from "./context"
+import type { BubbleHeaderProps } 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
+}: BubbleHeaderProps): React.ReactElement {
+  const variant = useBubbleVariant()
+  const reversed = variant === "sender"
+
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-2",
+        reversed && "flex-row-reverse",
+        className
+      )}
+      data-slot="bubble-header"
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}

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

@@ -0,0 +1,37 @@
+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 {
+  BubbleActionsProps,
+  BubblePickedEmoji,
+  BubbleHeaderProps,
+  BubbleMessageProps,
+  BubbleReactionChipProps,
+  BubbleProps,
+  BubbleReaction,
+  BubbleReactionsProps,
+  BubbleVariant
+} from "./types"

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

@@ -0,0 +1,25 @@
+"use client"
+
+import type * as React from "react"
+import { cn } from "@/lib/utils"
+import { useBubbleVariant } from "./context"
+import type { BubbleMessageProps } from "./types"
+import { twBubbleMessageClasses } from "./utils"
+
+export function BubbleMessage({
+  className,
+  ...props
+}: BubbleMessageProps): React.ReactElement {
+  const variant = useBubbleVariant()
+  return (
+    <div
+      className={cn(
+        "relative select-none flex-col gap-y-2",
+        twBubbleMessageClasses[variant],
+        className
+      )}
+      data-slot="bubble-message"
+      {...props}
+    />
+  )
+}