@vadimcomanescu/nadicode-design-system 2.0.6 → 2.0.8

package/dist/components/ui/ChatActions.js

@@ -0,0 +1,52 @@
+'use client';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../../chunk-MJ4CB6ZL.js';
+import { ThumbsDownIcon } from '../../chunk-JHQ5NMLZ.js';
+import { ThumbsUpIcon } from '../../chunk-WFJQ43SM.js';
+import { PencilIcon } from '../../chunk-AP5Y5M3R.js';
+import { RefreshCWIcon } from '../../chunk-Q7LVUGFL.js';
+import { CopyIcon } from '../../chunk-TV4RSQH4.js';
+import '../../chunk-ASKFAYYR.js';
+import { cn } from '../../chunk-QYZT24TS.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var ACTION_META = {
+  "copy": { label: "Copy", icon: /* @__PURE__ */ jsx(CopyIcon, { size: 14 }) },
+  "retry": { label: "Retry", icon: /* @__PURE__ */ jsx(RefreshCWIcon, { size: 14 }) },
+  "edit": { label: "Edit", icon: /* @__PURE__ */ jsx(PencilIcon, { size: 14 }) },
+  "thumbs-up": { label: "Thumbs up", icon: /* @__PURE__ */ jsx(ThumbsUpIcon, { size: 14 }) },
+  "thumbs-down": { label: "Thumbs down", icon: /* @__PURE__ */ jsx(ThumbsDownIcon, { size: 14 }) }
+};
+function ChatActions({ children, className }) {
+  return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 300, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "aria-label": "Message actions",
+      className: cn("flex items-center gap-0.5", className),
+      children
+    }
+  ) });
+}
+function ChatAction({ action, onClick, className }) {
+  const { label, icon } = ACTION_META[action];
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick,
+        "aria-label": label,
+        className: cn(
+          "inline-flex h-7 w-7 min-h-10 min-w-10 items-center justify-center rounded-md",
+          "text-text-tertiary hover:text-text-secondary hover:bg-surface/80",
+          "transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent",
+          className
+        ),
+        children: icon
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", className: "text-xs", children: label })
+  ] });
+}
+
+export { ChatAction, ChatActions };

package/dist/components/ui/ChatBranch.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from 'react';
+export interface ChatBranchProps {
+    current: number;
+    total: number;
+    onNavigate: (index: number) => void;
+    children: ReactNode;
+    className?: string;
+}
+export declare function ChatBranch({ current, total, onNavigate, children, className, }: ChatBranchProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ChatBranchPrevious({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ChatBranchNext({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ChatBranchCount({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/ChatBranch.js

@@ -0,0 +1,84 @@
+'use client';
+import { ChevronLeftIcon } from '../../chunk-G5YLGJXR.js';
+import { ChevronRightIcon } from '../../chunk-G24VV5NO.js';
+import '../../chunk-ASKFAYYR.js';
+import { cn } from '../../chunk-QYZT24TS.js';
+import { createContext, useContext } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var ChatBranchContext = createContext({
+  current: 1,
+  total: 1,
+  onNavigate: () => {
+  }
+});
+function ChatBranch({
+  current,
+  total,
+  onNavigate,
+  children,
+  className
+}) {
+  if (total <= 1) return null;
+  return /* @__PURE__ */ jsx(ChatBranchContext.Provider, { value: { current, total, onNavigate }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "navigation",
+      "aria-label": "Response versions",
+      className: cn("inline-flex items-center gap-1 text-xs text-text-tertiary", className),
+      children
+    }
+  ) });
+}
+function ChatBranchPrevious({ className }) {
+  const { current, onNavigate } = useContext(ChatBranchContext);
+  const disabled = current <= 1;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => onNavigate(current - 1),
+      disabled,
+      "aria-label": "Previous version",
+      className: cn(
+        "inline-flex h-6 w-6 min-h-10 min-w-10 items-center justify-center rounded",
+        "hover:text-text-secondary transition-colors",
+        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent",
+        "disabled:opacity-40 disabled:cursor-not-allowed",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: 14, "aria-hidden": "true" })
+    }
+  );
+}
+function ChatBranchNext({ className }) {
+  const { current, total, onNavigate } = useContext(ChatBranchContext);
+  const disabled = current >= total;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => onNavigate(current + 1),
+      disabled,
+      "aria-label": "Next version",
+      className: cn(
+        "inline-flex h-6 w-6 min-h-10 min-w-10 items-center justify-center rounded",
+        "hover:text-text-secondary transition-colors",
+        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent",
+        "disabled:opacity-40 disabled:cursor-not-allowed",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(ChevronRightIcon, { size: 14, "aria-hidden": "true" })
+    }
+  );
+}
+function ChatBranchCount({ className }) {
+  const { current, total } = useContext(ChatBranchContext);
+  return /* @__PURE__ */ jsxs("span", { className: cn("tabular-nums select-none", className), children: [
+    current,
+    " / ",
+    total
+  ] });
+}
+
+export { ChatBranch, ChatBranchCount, ChatBranchNext, ChatBranchPrevious };

package/dist/components/ui/ChatChainOfThought.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from 'react';
+export interface ChatChainOfThoughtProps {
+    children: ReactNode;
+    className?: string;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+export declare function ChatChainOfThought({ children, className, defaultOpen, open, onOpenChange, }: ChatChainOfThoughtProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatChainOfThoughtTrigger({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ChatChainOfThoughtContent({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+type StepStatus = 'complete' | 'active' | 'pending';
+export interface ChatChainOfThoughtStepProps {
+    status: StepStatus;
+    children: ReactNode;
+    className?: string;
+}
+export declare function ChatChainOfThoughtStep({ status, children, className, }: ChatChainOfThoughtStepProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/ChatChainOfThought.js

@@ -0,0 +1,99 @@
+'use client';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '../../chunk-VJIL7W55.js';
+import { LoaderIcon } from '../../chunk-R3AO6AZM.js';
+import { CircleIcon } from '../../chunk-GCUTJI7M.js';
+import { CheckIcon } from '../../chunk-CXACRCZ4.js';
+import { ChevronDownIcon } from '../../chunk-HJBXUXTD.js';
+import '../../chunk-ASKFAYYR.js';
+import { cn } from '../../chunk-QYZT24TS.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function ChatChainOfThought({
+  children,
+  className,
+  defaultOpen,
+  open,
+  onOpenChange
+}) {
+  return /* @__PURE__ */ jsx(
+    Collapsible,
+    {
+      defaultOpen,
+      open,
+      onOpenChange,
+      className: cn("space-y-1", className),
+      children
+    }
+  );
+}
+function ChatChainOfThoughtTrigger({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    CollapsibleTrigger,
+    {
+      className: cn(
+        "inline-flex min-h-10 min-w-10 items-center gap-1.5 rounded-lg px-2 py-1",
+        "text-xs text-text-secondary",
+        "hover:bg-surface/80 hover:text-text-primary transition-colors",
+        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { children }),
+        /* @__PURE__ */ jsx(
+          ChevronDownIcon,
+          {
+            size: 14,
+            "aria-hidden": "true",
+            className: "transition-transform [[data-state=open]>&]:rotate-180"
+          }
+        )
+      ]
+    }
+  );
+}
+function ChatChainOfThoughtContent({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "list",
+      "aria-label": "Reasoning steps",
+      className: cn("space-y-1 pl-1", className),
+      children
+    }
+  ) });
+}
+var STEP_ICONS = {
+  complete: /* @__PURE__ */ jsx(CheckIcon, { size: 14, "aria-hidden": "true", className: "text-success" }),
+  active: /* @__PURE__ */ jsx(LoaderIcon, { size: 14, "aria-hidden": "true", className: "animate-spin text-accent" }),
+  pending: /* @__PURE__ */ jsx(CircleIcon, { size: 14, "aria-hidden": "true", className: "text-text-tertiary" })
+};
+function ChatChainOfThoughtStep({
+  status,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "listitem",
+      "data-slot": "step",
+      className: cn(
+        "flex items-center gap-2 rounded-md px-2 py-1 text-sm text-text-secondary",
+        status === "pending" && "opacity-50",
+        className
+      ),
+      children: [
+        STEP_ICONS[status],
+        /* @__PURE__ */ jsx("span", { children })
+      ]
+    }
+  );
+}
+
+export { ChatChainOfThought, ChatChainOfThoughtContent, ChatChainOfThoughtStep, ChatChainOfThoughtTrigger };

package/dist/components/ui/ChatConfirmation.d.ts

@@ -0,0 +1,37 @@
+import { type ReactNode } from 'react';
+type ChatConfirmationStatus = 'pending' | 'approved' | 'rejected';
+export interface ChatConfirmationProps {
+    status: ChatConfirmationStatus;
+    children: ReactNode;
+    className?: string;
+}
+export declare function ChatConfirmation({ status, children, className, }: ChatConfirmationProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatConfirmationTitle({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ChatConfirmationDescription({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export interface ChatConfirmationActionsProps {
+    onApprove: () => void;
+    onReject: () => void;
+    approveLabel?: string;
+    rejectLabel?: string;
+    className?: string;
+}
+export declare function ChatConfirmationActions({ onApprove, onReject, approveLabel, rejectLabel, className, }: ChatConfirmationActionsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ChatConfirmationPending({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function ChatConfirmationApproved({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function ChatConfirmationRejected({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/ui/ChatConfirmation.js

@@ -0,0 +1,115 @@
+'use client';
+import { CheckIcon } from '../../chunk-CXACRCZ4.js';
+import { XIcon } from '../../chunk-UIUMTURU.js';
+import '../../chunk-ASKFAYYR.js';
+import { cn } from '../../chunk-QYZT24TS.js';
+import { createContext, useContext } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var ChatConfirmationContext = createContext({
+  status: "pending"
+});
+function ChatConfirmation({
+  status,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx(ChatConfirmationContext.Provider, { value: { status }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "status",
+      "aria-label": "Confirmation",
+      className: cn(
+        "rounded-xl border border-border p-4 space-y-3",
+        className
+      ),
+      children
+    }
+  ) });
+}
+function ChatConfirmationTitle({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx("h3", { className: cn("text-sm font-medium text-text-primary", className), children });
+}
+function ChatConfirmationDescription({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx("p", { className: cn("text-sm text-text-secondary", className), children });
+}
+function ChatConfirmationActions({
+  onApprove,
+  onReject,
+  approveLabel = "Approve",
+  rejectLabel = "Reject",
+  className
+}) {
+  const { status } = useContext(ChatConfirmationContext);
+  if (status !== "pending") return null;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onApprove,
+        "aria-label": approveLabel,
+        className: cn(
+          "inline-flex min-h-10 min-w-10 items-center justify-center gap-1.5 rounded-lg",
+          "bg-accent px-3 py-1.5 text-xs font-medium text-accent-foreground",
+          "hover:bg-accent/90 transition-colors",
+          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(CheckIcon, { size: 14, "aria-hidden": "true" }),
+          approveLabel
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onReject,
+        "aria-label": rejectLabel,
+        className: cn(
+          "inline-flex min-h-10 min-w-10 items-center justify-center gap-1.5 rounded-lg",
+          "border border-border px-3 py-1.5 text-xs font-medium text-text-secondary",
+          "hover:bg-surface/80 hover:text-text-primary transition-colors",
+          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(XIcon, { size: 14, "aria-hidden": "true" }),
+          rejectLabel
+        ]
+      }
+    )
+  ] });
+}
+function ChatConfirmationPending({
+  children,
+  className
+}) {
+  const { status } = useContext(ChatConfirmationContext);
+  if (status !== "pending") return null;
+  return /* @__PURE__ */ jsx("div", { className, children });
+}
+function ChatConfirmationApproved({
+  children,
+  className
+}) {
+  const { status } = useContext(ChatConfirmationContext);
+  if (status !== "approved") return null;
+  return /* @__PURE__ */ jsx("div", { className, children });
+}
+function ChatConfirmationRejected({
+  children,
+  className
+}) {
+  const { status } = useContext(ChatConfirmationContext);
+  if (status !== "rejected") return null;
+  return /* @__PURE__ */ jsx("div", { className, children });
+}
+
+export { ChatConfirmation, ChatConfirmationActions, ChatConfirmationApproved, ChatConfirmationDescription, ChatConfirmationPending, ChatConfirmationRejected, ChatConfirmationTitle };

package/dist/components/ui/ChatGreeting.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode, type Ref } from 'react';
+export interface ChatGreetingProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Greeting headline. */
+    title?: string;
+    /** Greeting subtext. */
+    subtitle?: string;
+    /** Custom content instead of title/subtitle. */
+    children?: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * ChatGreeting - animated empty state shown when a conversation has zero messages.
+ *
+ * Renders configurable title and subtitle with a 300ms Framer Motion fade-in
+ * and staggered entrance. Accepts children for fully custom content.
+ * Consumers wrap this in AnimatePresence for fade-out when messages appear.
+ */
+export declare function ChatGreeting({ title, subtitle, children, className, ref, ...props }: ChatGreetingProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/ChatGreeting.js

@@ -0,0 +1,80 @@
+'use client';
+import { m } from '../../chunk-PD2YEH3H.js';
+import '../../chunk-CRY67BIF.js';
+import '../../chunk-HJC6U46F.js';
+import { cn } from '../../chunk-QYZT24TS.js';
+import { useReducedMotion } from 'motion/react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var FADE_DURATION_S = 0.3;
+var TITLE_DELAY_S = 0;
+var SUBTITLE_DELAY_S = 0.1;
+function ChatGreeting({
+  title = "Hello!",
+  subtitle = "How can I help you today?",
+  children,
+  className,
+  ref,
+  ...props
+}) {
+  const prefersReduced = useReducedMotion();
+  if (children) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("flex flex-col items-center justify-center gap-2", className),
+        ...props,
+        children
+      }
+    );
+  }
+  if (prefersReduced) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("flex flex-col items-center justify-center gap-2", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xl font-semibold text-text-primary", children: title }),
+          subtitle ? /* @__PURE__ */ jsx("p", { className: "text-lg text-text-secondary", children: subtitle }) : null
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-col items-center justify-center gap-2", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          m.p,
+          {
+            className: "text-xl font-semibold text-text-primary",
+            initial: { opacity: 0, y: 10 },
+            animate: { opacity: 1, y: 0 },
+            exit: { opacity: 0, y: 10 },
+            transition: { duration: FADE_DURATION_S, delay: TITLE_DELAY_S },
+            children: title
+          }
+        ),
+        subtitle ? /* @__PURE__ */ jsx(
+          m.p,
+          {
+            className: "text-lg text-text-secondary",
+            initial: { opacity: 0, y: 10 },
+            animate: { opacity: 1, y: 0 },
+            exit: { opacity: 0, y: 10 },
+            transition: { duration: FADE_DURATION_S, delay: SUBTITLE_DELAY_S },
+            children: subtitle
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+export { ChatGreeting };

package/dist/components/ui/ChatMessage.d.ts

@@ -0,0 +1,40 @@
+import { type ReactNode, type Ref } from 'react';
+type ChatMessageRole = 'user' | 'assistant' | 'agent' | 'system';
+declare const chatMessageVariants: (props?: ({
+    role?: "user" | "assistant" | "system" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const chatMessageContentVariants: (props?: ({
+    role?: "user" | "assistant" | "system" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ChatMessageProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Message role.
+     * @deprecated Use `"assistant"` instead of `"agent"`.
+     * The `"agent"` alias will be removed in the next major version.
+     */
+    role: ChatMessageRole;
+    children: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * ChatMessage - role-based message layout compound.
+ *
+ * User right-aligned, assistant left-aligned, system centered.
+ * Compound: ChatMessage, ChatMessageContent, ChatMessageAvatar.
+ */
+export declare function ChatMessage({ role, children, className, ref, ...props }: ChatMessageProps): import("react/jsx-runtime").JSX.Element;
+export interface ChatMessageContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function ChatMessageContent({ children, className, ref, ...props }: ChatMessageContentProps): import("react/jsx-runtime").JSX.Element;
+export interface ChatMessageAvatarProps {
+    /** Avatar image source URL. */
+    src: string;
+    /** Display name (first 2 chars used as fallback). */
+    name?: string;
+    className?: string;
+    ref?: Ref<HTMLSpanElement>;
+}
+export declare function ChatMessageAvatar({ src, name, className, ref, }: ChatMessageAvatarProps): import("react/jsx-runtime").JSX.Element;
+export { chatMessageVariants, chatMessageContentVariants };

package/dist/components/ui/ChatMessage.js

@@ -0,0 +1,96 @@
+'use client';
+import { Avatar, AvatarImage, AvatarFallback } from '../../chunk-NAAU5IWU.js';
+import { cn } from '../../chunk-QYZT24TS.js';
+import { createContext, useContext } from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var ChatMessageContext = createContext("user");
+function useMessageRole() {
+  return useContext(ChatMessageContext);
+}
+function normalizeRole(role) {
+  return role === "agent" ? "assistant" : role;
+}
+var chatMessageVariants = cva("flex gap-4 max-w-full", {
+  variants: {
+    role: {
+      user: "flex-row-reverse",
+      assistant: "flex-row",
+      system: "justify-center"
+    }
+  },
+  defaultVariants: { role: "assistant" }
+});
+var chatMessageContentVariants = cva(
+  "rounded-2xl px-4 py-2.5 text-sm leading-relaxed",
+  {
+    variants: {
+      role: {
+        user: "bg-primary text-primary-foreground max-w-[80%] rounded-br-sm",
+        assistant: "bg-surface border border-border text-text-primary max-w-[80%] rounded-bl-sm",
+        system: "bg-muted/50 text-text-tertiary text-xs italic px-4 py-1.5 rounded-lg"
+      }
+    },
+    defaultVariants: { role: "assistant" }
+  }
+);
+function ChatMessage({
+  role,
+  children,
+  className,
+  ref,
+  ...props
+}) {
+  const normalized = normalizeRole(role);
+  return /* @__PURE__ */ jsx(ChatMessageContext.Provider, { value: role, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(chatMessageVariants({ role: normalized }), className),
+      ...props,
+      children
+    }
+  ) });
+}
+function ChatMessageContent({
+  children,
+  className,
+  ref,
+  ...props
+}) {
+  const role = normalizeRole(useMessageRole());
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(chatMessageContentVariants({ role }), className),
+      ...props,
+      children
+    }
+  );
+}
+function ChatMessageAvatar({
+  src,
+  name,
+  className,
+  ref
+}) {
+  const role = normalizeRole(useMessageRole());
+  const fallback = name ? name.slice(0, 2).toUpperCase() : role === "user" ? "U" : "AI";
+  const label = role === "user" ? "User avatar" : "Assistant avatar";
+  return /* @__PURE__ */ jsxs(
+    Avatar,
+    {
+      ref,
+      className: cn("h-8 w-8 shrink-0 ring-1 ring-border", className),
+      "aria-label": label,
+      children: [
+        src ? /* @__PURE__ */ jsx(AvatarImage, { src, alt: "" }) : null,
+        /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: fallback })
+      ]
+    }
+  );
+}
+
+export { ChatMessage, ChatMessageAvatar, ChatMessageContent, chatMessageContentVariants, chatMessageVariants };