@flikk/ui 1.0.0-beta.2 → 1.0.0-beta.21

package/dist/components/core/Message/Message.js

@@ -4,44 +4,78 @@ import { cn } from '../../../utils/cn.js';
 import { formatTimestamp } from '../../../utils/dateUtils.js';
 import { messageTheme } from './Message.theme.js';
 import { Avatar } from '../Avatar/Avatar.js';
+import { Button } from '../Button/Button.js';
 import { motion } from 'motion/react';
 import { DocumentDuplicateIcon, ArrowPathIcon } from '@heroicons/react/24/outline';
 import { MessageContext } from './MessageContext.js';
 import { MessageAvatar } from './MessageAvatar.js';
-import { MessageContent } from './MessageContent.js';
+import { MessageBody } from './MessageBody.js';
 import { MessageActions } from './MessageActions.js';
 import { MessageTimestamp } from './MessageTimestamp.js';
+import { MessageList } from './MessageList.js';
 import { TypeWriter } from './TypeWriter.js';
+import { MessageStatusIndicator } from './MessageStatusIndicator.js';
+import { MessageSenderName } from './MessageSenderName.js';
+import { MessageFile } from './MessageFile.js';
+import { MessageImage } from './MessageImage.js';
+import { MessageAudio } from './MessageAudio.js';
+import { MessageLink } from './MessageLink.js';
+import { MessageReply } from './MessageReply.js';
+import { MessageReactions } from './MessageReactions.js';
+import { MessageDateDivider } from './MessageDateDivider.js';
 
 const MessageFooter = ({ isStreaming, streamingIndicator, showTimestamp, timestamp, actions, timestampStyle, streamingIndicatorStyle, actionsContainerStyle, variant, }) => {
     if (isStreaming) {
-        return (jsx("div", { className: cn('flex flex-row items-center gap-3 mt-1', variant === 'receiver' ? 'ml-2' : 'mr-3'), children: jsx("div", { className: cn(timestampStyle, streamingIndicatorStyle), children: streamingIndicator || (jsxs(Fragment, { children: [jsx("span", { children: "Typing" }), jsx(motion.span, { animate: { opacity: [0.4, 1, 0.4] }, transition: {
+        return (jsx("div", { className: cn("flex flex-row items-center gap-3 mt-1", variant === "receiver" ? "ml-2" : "mr-3"), children: jsx("div", { className: cn(timestampStyle, streamingIndicatorStyle), children: streamingIndicator || (jsxs(Fragment, { children: [jsx("span", { children: "Typing" }), jsx(motion.span, { animate: { opacity: [0.4, 1, 0.4] }, transition: {
                                 duration: 1.5,
                                 repeat: Infinity,
-                                ease: 'easeInOut',
+                                ease: "easeInOut",
                             }, children: "\u2022\u2022\u2022" })] })) }) }));
     }
     // For system variant, only show timestamp (no actions)
-    if (variant === 'system') {
-        return showTimestamp && timestamp ? (jsx("div", { className: timestampStyle, children: jsx("time", { dateTime: typeof timestamp === 'string' ? timestamp : timestamp.toISOString(), className: "select-none", children: formatTimestamp(timestamp) }) })) : null;
+    if (variant === "system") {
+        return showTimestamp && timestamp ? (jsx("div", { className: timestampStyle, children: jsx("time", { dateTime: typeof timestamp === "string" ? timestamp : timestamp.toISOString(), className: "select-none", children: formatTimestamp(timestamp) }) })) : null;
     }
     // For sender/receiver variants, show timestamp and actions in a row
-    return (jsxs("div", { className: cn(`flex flex-row items-center gap-3 mt-2`, variant === 'receiver' ? 'ml-2' : 'mr-3'), children: [showTimestamp && timestamp && (jsx("div", { className: timestampStyle, children: jsx("time", { dateTime: typeof timestamp === 'string'
+    return (jsxs("div", { className: cn(`flex flex-row items-center gap-3 mt-3`, variant === "receiver" ? "-ml-0" : "mr-3"), children: [showTimestamp && timestamp && (jsx("div", { className: timestampStyle, children: jsx("time", { dateTime: typeof timestamp === "string"
                         ? timestamp
                         : timestamp.toISOString(), className: "select-none", children: formatTimestamp(timestamp) }) })), actions && jsx("div", { className: cn(actionsContainerStyle), children: actions })] }));
 };
-const MessageRoot = React__default.forwardRef(({ role, variant: variantProp, content, message, // Deprecated alias
-timestamp, avatar, showTimestamp = true, isStreaming = false, streamingIndicator, typingSpeed = 100, actions, onCopy, onRegenerate, showActions, className, theme: customTheme = {}, children, ...props }, ref) => {
+/**
+ * Renders attachment sub-components based on attachment type
+ */
+const AttachmentsList = ({ attachments, containerClassName }) => {
+    return (jsx("div", { className: cn(messageTheme.attachmentContainerStyle, containerClassName), children: attachments.map((attachment, index) => {
+            switch (attachment.type) {
+                case "file":
+                    return (jsx(MessageFile, { name: attachment.name, url: attachment.url, size: attachment.size }, index));
+                case "image":
+                    return (jsx(MessageImage, { src: attachment.url, thumbnailUrl: attachment.thumbnailUrl, name: attachment.name, size: attachment.size }, index));
+                case "audio":
+                    return (jsx(MessageAudio, { name: attachment.name, duration: attachment.duration }, index));
+                case "link":
+                    return (jsx(MessageLink, { url: attachment.url, thumbnailUrl: attachment.thumbnailUrl, title: attachment.name, description: attachment.description, domain: attachment.domain }, index));
+                default:
+                    return null;
+            }
+        }) }));
+};
+const MessageRoot = React__default.forwardRef(({ role, variant: variantProp, content, timestamp, avatar, showTimestamp = false, isStreaming = false, streamingIndicator, typingSpeed = 100, actions, onCopy, onRegenerate, showActions, status, readAt, onRetry, attachments, reactions, onReactionClick, replyTo, sender, isGrouped, className, theme: customTheme = {}, children, ...props }, ref) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     // Determine the variant: role takes precedence over variant prop
     let variant;
     if (role) {
         // Map role to variant
-        variant = role === 'user' ? 'sender' : role === 'assistant' ? 'receiver' : 'system';
+        variant =
+            role === "user"
+                ? "sender"
+                : role === "assistant"
+                    ? "receiver"
+                    : "system";
     }
     else {
         // Use variant prop or default
-        variant = variantProp || 'receiver';
+        variant = variantProp || "receiver";
     }
     // Detect if using compound API (has children)
     const isCompoundAPI = !!children;
@@ -51,12 +85,13 @@ timestamp, avatar, showTimestamp = true, isStreaming = false, streamingIndicator
         variant,
         isStreaming,
         typingSpeed,
-    }), [role, variant, isStreaming, typingSpeed]);
-    // Resolve content (support deprecated 'message' prop)
-    const messageContent = content !== null && content !== void 0 ? content : message;
+        status,
+        isGrouped,
+    }), [role, variant, isStreaming, typingSpeed, status, isGrouped]);
+    const messageContent = content;
     // Determine if we should show default actions
     const shouldShowDefaultActions = showActions !== false &&
-        (variant === 'receiver' || role === 'assistant') &&
+        (variant === "receiver" || role === "assistant") &&
         (onCopy || onRegenerate);
     if (isCompoundAPI) {
         // Compound API - Render with context
@@ -64,8 +99,8 @@ timestamp, avatar, showTimestamp = true, isStreaming = false, streamingIndicator
         // Build container style
         const containerStyle = cn(messageTheme.containerBaseStyle, variantTheme.containerModifier, customTheme.containerBaseStyle, (_b = (_a = customTheme.variants) === null || _a === void 0 ? void 0 : _a[variant]) === null || _b === void 0 ? void 0 : _b.containerModifier, 
         // Backward compatibility
-        variant === 'sender' && customTheme.senderContainerStyle, variant === 'receiver' && customTheme.receiverContainerStyle, variant === 'system' && customTheme.systemContainerStyle);
-        return (jsx(MessageContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cn('w-full max-w-full group', className), "data-variant": variant, "data-role": role, ...props, children: jsx("div", { className: containerStyle, children: children }) }) }));
+        variant === "sender" && customTheme.senderContainerStyle, variant === "receiver" && customTheme.receiverContainerStyle, variant === "system" && customTheme.systemContainerStyle);
+        return (jsx(MessageContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cn("w-full max-w-full group", className), "data-variant": variant, "data-role": role, ...props, children: jsx("div", { className: containerStyle, children: children }) }) }));
     }
     // Props API - Render inline
     // Get variant-specific theme
@@ -73,37 +108,49 @@ timestamp, avatar, showTimestamp = true, isStreaming = false, streamingIndicator
     // Build container styles
     const containerStyle = cn(messageTheme.containerBaseStyle, variantTheme.containerModifier, customTheme.containerBaseStyle, (_d = (_c = customTheme.variants) === null || _c === void 0 ? void 0 : _c[variant]) === null || _d === void 0 ? void 0 : _d.containerModifier, 
     // Backward compatibility
-    variant === 'sender' && customTheme.senderContainerStyle, variant === 'receiver' && customTheme.receiverContainerStyle, variant === 'system' && customTheme.systemContainerStyle);
+    variant === "sender" && customTheme.senderContainerStyle, variant === "receiver" && customTheme.receiverContainerStyle, variant === "system" && customTheme.systemContainerStyle);
     // Build bubble styles
     const bubbleStyle = cn(messageTheme.bubbleBaseStyle, variantTheme.bubbleStyle, customTheme.bubbleBaseStyle, (_f = (_e = customTheme.variants) === null || _e === void 0 ? void 0 : _e[variant]) === null || _f === void 0 ? void 0 : _f.bubbleStyle, 
     // Backward compatibility
-    variant === 'sender' && customTheme.senderBubbleStyle, variant === 'receiver' && customTheme.receiverBubbleStyle, variant === 'system' && customTheme.systemBubbleStyle);
+    variant === "sender" && customTheme.senderBubbleStyle, variant === "receiver" && customTheme.receiverBubbleStyle, variant === "system" && customTheme.systemBubbleStyle);
     // Build timestamp styles
     const timestampStyle = cn(messageTheme.timestampStyle, variantTheme.timestampModifier, customTheme.timestampStyle, (_h = (_g = customTheme.variants) === null || _g === void 0 ? void 0 : _g[variant]) === null || _h === void 0 ? void 0 : _h.timestampModifier, 
     // Backward compatibility
-    variant === 'sender' && customTheme.senderTimestampStyle, variant === 'receiver' && customTheme.receiverTimestampStyle, variant === 'system' && customTheme.systemTimestampStyle);
+    variant === "sender" && customTheme.senderTimestampStyle, variant === "receiver" && customTheme.receiverTimestampStyle, variant === "system" && customTheme.systemTimestampStyle);
     // Build default action buttons if needed
-    const defaultActionButtons = shouldShowDefaultActions ? (jsxs("div", { className: cn(messageTheme.actionsContainerStyle, customTheme.actionsContainerStyle), children: [onCopy && (jsx("button", { onClick: onCopy, className: cn(messageTheme.actionButtonStyle, customTheme.actionButtonStyle), "aria-label": "Copy message", children: jsx(DocumentDuplicateIcon, { className: "w-4 h-4" }) })), onRegenerate && (jsx("button", { onClick: onRegenerate, className: cn(messageTheme.actionButtonStyle, customTheme.actionButtonStyle), "aria-label": "Regenerate response", children: jsx(ArrowPathIcon, { className: "w-4 h-4" }) }))] })) : undefined;
+    const defaultActionButtons = shouldShowDefaultActions ? (jsxs("div", { className: cn(messageTheme.actionsContainerStyle, customTheme.actionsContainerStyle), children: [onCopy && (jsx(Button, { variant: "link", color: "neutral", size: "sm", onClick: onCopy, "aria-label": "Copy message", className: "opacity-40 hover:opacity-100", children: jsx(DocumentDuplicateIcon, { className: "size-4" }) })), onRegenerate && (jsx(Button, { variant: "link", color: "neutral", size: "sm", onClick: onRegenerate, "aria-label": "Regenerate response", className: "opacity-40 hover:opacity-100", children: jsx(ArrowPathIcon, { className: "size-4" }) }))] })) : undefined;
     // Use custom actions if provided, otherwise use default actions
     const finalActions = actions !== null && actions !== void 0 ? actions : defaultActionButtons;
     // Use TypeWriter for streaming receiver/assistant messages with string content (props API)
-    const shouldAnimate = (variant === 'receiver' || role === 'assistant') &&
+    const shouldAnimate = (variant === "receiver" || role === "assistant") &&
         isStreaming &&
-        typeof messageContent === 'string';
+        typeof messageContent === "string";
     const renderedContent = shouldAnimate ? (jsx(TypeWriter, { text: messageContent, speed: typingSpeed, enabled: true, className: "break-words" })) : (messageContent);
     // System messages render differently (centered, no avatar)
-    if (variant === 'system') {
-        return (jsx("div", { ref: ref, className: cn('w-full max-w-full', className), "data-variant": "system", "data-role": role, ...props, children: jsxs("div", { className: containerStyle, children: [jsx("div", { className: bubbleStyle, children: typeof renderedContent === 'string' ? (jsx("p", { className: "text-sm", children: renderedContent })) : (renderedContent) }), jsx(MessageFooter, { isStreaming: isStreaming, streamingIndicator: streamingIndicator, showTimestamp: showTimestamp, timestamp: timestamp, actions: undefined, timestampStyle: timestampStyle, streamingIndicatorStyle: cn(messageTheme.streamingIndicatorStyle, customTheme.streamingIndicatorStyle), actionsContainerStyle: undefined, variant: "system" })] }) }));
+    if (variant === "system") {
+        return (jsx("div", { ref: ref, className: cn("w-full max-w-full", className), "data-variant": "system", "data-role": role, ...props, children: jsxs("div", { className: containerStyle, children: [jsx("div", { className: bubbleStyle, children: typeof renderedContent === "string" ? (jsx("p", { className: "text-base", children: renderedContent })) : (renderedContent) }), jsx(MessageFooter, { isStreaming: isStreaming, streamingIndicator: streamingIndicator, showTimestamp: showTimestamp, timestamp: timestamp, actions: undefined, timestampStyle: timestampStyle, streamingIndicatorStyle: cn(messageTheme.streamingIndicatorStyle, customTheme.streamingIndicatorStyle), actionsContainerStyle: undefined, variant: "system" })] }) }));
     }
-    return (jsx("div", { ref: ref, className: cn('w-full max-w-full group', className), "data-variant": variant, "data-role": role, ...props, children: jsxs("div", { className: containerStyle, children: [avatar && (jsx("div", { className: "flex-shrink-0", children: jsx(Avatar, { src: avatar.src, alt: avatar.alt, fallback: avatar.fallback, size: "xs" }) })), jsxs("div", { className: cn('flex flex-col', variant === 'sender' ? 'items-end' : 'items-start'), children: [jsx("div", { className: bubbleStyle, children: typeof renderedContent === 'string' ? (jsx("p", { className: "break-words", children: renderedContent })) : (renderedContent) }), jsx(MessageFooter, { isStreaming: isStreaming, streamingIndicator: streamingIndicator, showTimestamp: showTimestamp, timestamp: timestamp, actions: finalActions, timestampStyle: timestampStyle, streamingIndicatorStyle: cn(messageTheme.streamingIndicatorStyle, customTheme.streamingIndicatorStyle), actionsContainerStyle: cn(messageTheme.actionsContainerStyle, customTheme.actionsContainerStyle), variant: variant })] })] }) }));
+    const showAvatar = avatar && !isGrouped;
+    const showSenderName = (sender === null || sender === void 0 ? void 0 : sender.name) && variant === "receiver" && !isGrouped;
+    return (jsxs("div", { ref: ref, className: cn("w-full max-w-full group", className), "data-variant": variant, "data-role": role, ...props, children: [jsxs("div", { className: containerStyle, children: [showAvatar ? (jsx("div", { className: "flex-shrink-0", children: jsx(Avatar, { src: avatar.src, name: avatar.name, fallback: avatar.fallback, size: "xs" }) })) : isGrouped && avatar ? (jsx("div", { className: "flex-shrink-0 size-8" })) : null, jsxs("div", { className: cn("flex flex-col", variant === "sender" ? "items-end" : "items-start"), children: [showSenderName && jsx(MessageSenderName, { name: sender.name }), jsxs("div", { className: bubbleStyle, children: [replyTo && (jsx(MessageReply, { name: replyTo.name, content: replyTo.content, avatar: replyTo.avatar })), typeof renderedContent === "string" ? (jsx("p", { className: "break-words", children: renderedContent })) : (renderedContent), attachments && attachments.length > 0 && (jsx(AttachmentsList, { attachments: attachments, containerClassName: customTheme.attachmentContainerStyle }))] }), jsx(MessageFooter, { isStreaming: isStreaming, streamingIndicator: streamingIndicator, showTimestamp: showTimestamp, timestamp: timestamp, actions: finalActions, timestampStyle: timestampStyle, streamingIndicatorStyle: cn(messageTheme.streamingIndicatorStyle, customTheme.streamingIndicatorStyle), actionsContainerStyle: cn(messageTheme.actionsContainerStyle, customTheme.actionsContainerStyle), variant: variant }), status && variant === "sender" && (jsx(MessageStatusIndicator, { status: status, readAt: readAt, onRetry: onRetry, className: cn(variant === "sender" ? "self-end mr-1" : "self-start ml-1", customTheme.statusStyle) }))] })] }), reactions && reactions.length > 0 && (jsx("div", { className: cn("mt-0.5", avatar && !isGrouped ? "ml-11" : "", variant === "sender" ? "flex justify-end mr-1" : ""), children: jsx(MessageReactions, { reactions: reactions, onReactionClick: onReactionClick, className: customTheme.reactionsContainerStyle }) }))] }));
 });
-MessageRoot.displayName = 'Message';
+MessageRoot.displayName = "Message";
 // Attach compound components
 const Message = Object.assign(MessageRoot, {
     Avatar: MessageAvatar,
-    Content: MessageContent,
+    Body: MessageBody,
     Actions: MessageActions,
     Timestamp: MessageTimestamp,
+    List: MessageList,
+    Status: MessageStatusIndicator,
+    SenderName: MessageSenderName,
+    File: MessageFile,
+    Image: MessageImage,
+    Audio: MessageAudio,
+    Link: MessageLink,
+    Reply: MessageReply,
+    Reactions: MessageReactions,
+    DateDivider: MessageDateDivider,
 });
 
 export { Message };

package/dist/components/core/Message/Message.theme.d.ts

@@ -1,4 +1,4 @@
-import { MessageTheme } from './Message.types';
+import { MessageTheme } from "./Message.types";
 /**
  * Unified Message theme with shared base styles + variant-specific modifiers
  * Based on ChatMessage theme with additional action button styles

package/dist/components/core/Message/Message.theme.js

@@ -4,43 +4,63 @@
  */
 const messageTheme = {
     // Shared base styles (apply to all variants)
-    bubbleBaseStyle: 'max-w-[80%] sm:max-w-[90%] rounded-[calc(var(--radius-base)*1.5)] px-3 py-2 w-fit min-w-fit border-t-[0.5px] ring-1 h-fit',
-    containerBaseStyle: 'flex items-start gap-3 h-fit text-sm',
-    timestampStyle: 'text-xs text-[var(--color-text-placeholder)] dark:text-[var(--color-neutral-500)]',
+    bubbleBaseStyle: "max-w-[80%] sm:max-w-[85%] rounded-[calc(var(--radius-base)*1.5)] px-3 py-2 w-fit min-w-fit h-fit",
+    containerBaseStyle: "flex items-start gap-3 h-fit text-base",
+    timestampStyle: "text-xs text-[var(--color-text-placeholder)] dark:text-[var(--color-neutral-500)]",
     // Variant-specific modifiers (only differences)
     variants: {
         sender: {
-            containerModifier: 'flex-row-reverse', // Reverse direction for right alignment
-            bubbleStyle: 'bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-700)] text-white ' +
-                'rounded-tr-xs ring-[var(--color-primary-700)] border-t-1 border-[var(--color-primary-400)] ' +
+            containerModifier: "flex-row-reverse", // Reverse direction for right alignment
+            bubbleStyle: "bg-[var(--color-neutral-900)] text-[var(--color-neutral-100)] " +
+                "rounded-tr-xs  " +
                 // Dark mode - slightly darker gradient for better contrast
-                'dark:from-[var(--color-primary-600)] dark:to-[var(--color-primary-800)] dark:ring-[var(--color-primary-800)] dark:border-[var(--color-primary-400)]',
-            timestampModifier: 'text-right pr-1',
+                " ",
+            timestampModifier: "text-right pr-1",
         },
         receiver: {
-            containerModifier: '', // Default direction (no modifier needed)
-            bubbleStyle: 'bg-[var(--color-neutral-100)] text-[var(--color-text-primary)] rounded-tl-xs ' +
-                'shadow-black/10 ring-neutral-100 border-[var(--chat-bubble-border-receiver)] ' +
+            containerModifier: "", // Default direction (no modifier needed)
+            bubbleStyle: " text-[var(--color-text-secondary)] rounded-tl-xs py-0 px-0 " +
+                " " +
                 // Dark mode - dark background with lighter text
-                'dark:bg-[var(--color-neutral-900)] ' +
-                'dark:ring-[var(--color-neutral-800)] dark:border-[var(--color-neutral-700)] dark:border-neutral-500',
-            timestampModifier: 'text-left pl-1',
+                " " +
+                "",
+            timestampModifier: "text-left pl-1",
         },
         system: {
-            containerModifier: 'justify-center', // Center alignment
-            bubbleStyle: 'bg-[var(--color-neutral-100)] text-[var(--color-text-secondary)] rounded-[calc(var(--radius-base)*0.75)] px-2 py-1 ' +
-                'text-sm font-medium border-none ' +
+            containerModifier: "justify-center", // Center alignment
+            bubbleStyle: "bg-[var(--color-background)] text-[var(--color-text-muted)]/80 rounded-[calc(var(--radius-base)*0.75)] px-1 py-0.5 " +
+                "text-sm border-none " +
                 // Dark mode
-                'dark:bg-[var(--color-neutral-800)] dark:text-[var(--color-neutral-400)]',
-            timestampModifier: 'text-center',
+                "",
+            timestampModifier: "text-center",
         },
     },
     // Feature styles (streaming, actions)
-    streamingIndicatorStyle: 'flex items-center gap-1 text-[var(--color-text-placeholder)] text-xs ' +
-        'dark:text-[var(--color-neutral-500)]',
-    actionsContainerStyle: 'flex items-start gap-2',
-    actionButtonStyle: 'text-[var(--color-text-placeholder)] hover:text-[var(--color-text-primary)] ' +
-        'transition-colors cursor-pointer dark:text-[var(--color-neutral-500)] dark:hover:text-[var(--color-neutral-300)]',
+    streamingIndicatorStyle: "flex items-center gap-1 text-[var(--color-text-placeholder)] text-sm " +
+        "dark:text-[var(--color-neutral-500)]",
+    actionsContainerStyle: "flex items-start gap-3",
+    // Status styles
+    statusStyle: "flex items-center gap-1 text-xs mt-1",
+    statusSending: "text-[var(--color-text-placeholder)] animate-pulse",
+    statusSent: "text-[var(--color-text-placeholder)]",
+    statusDelivered: "text-[var(--color-text-placeholder)]",
+    statusRead: "text-[var(--color-primary)]",
+    statusFailed: "text-[var(--color-danger)]",
+    // Attachment styles
+    attachmentContainerStyle: "flex flex-col gap-2 mt-2",
+    fileStyle: "flex items-center gap-3 rounded-lg border border-[var(--color-border)] bg-[var(--color-background-secondary)] px-3 py-2.5 text-sm",
+    imageStyle: "rounded-lg overflow-hidden max-w-xs",
+    audioStyle: "flex items-center gap-3 rounded-lg border border-[var(--color-border)] bg-[var(--color-background-secondary)] px-3 py-2.5 text-sm",
+    linkStyle: "flex flex-col rounded-lg border border-[var(--color-border)] overflow-hidden text-sm max-w-xs",
+    // Reactions styles
+    reactionsContainerStyle: "flex flex-wrap items-center gap-1.5 mt-1.5",
+    reactionPillStyle: "inline-flex items-center gap-1 rounded-full border border-[var(--color-border)] bg-[var(--color-background-secondary)] px-2 py-0.5 text-xs cursor-pointer transition-colors hover:bg-[var(--color-background-tertiary)]",
+    reactionPillActiveStyle: "border-[var(--color-primary-200)] bg-[var(--color-primary-50)] text-[var(--color-primary)]",
+    // Reply/quote styles
+    replyStyle: "border-l-2 border-[var(--color-border)] pl-2.5 mb-2 text-xs text-[var(--color-text-muted)]",
+    // Grouping styles
+    dateDividerStyle: "flex items-center gap-3 text-xs text-[var(--color-text-muted)] select-none",
+    senderNameStyle: "text-xs font-medium text-[var(--color-text-secondary)] mb-1 pl-1",
 };
 
 export { messageTheme };

package/dist/components/core/Message/Message.types.d.ts

@@ -1,12 +1,56 @@
-import { ReactNode } from 'react';
+import { ReactNode } from "react";
 /**
  * Message role types for AI conversations
  */
-export type MessageRole = 'user' | 'assistant' | 'system';
+export type MessageRole = "user" | "assistant" | "system";
 /**
  * Message variant types for chat UI
  */
-export type MessageVariant = 'sender' | 'receiver' | 'system';
+export type MessageVariant = "sender" | "receiver" | "system";
+/**
+ * Message delivery status
+ */
+export type MessageStatus = "sending" | "sent" | "delivered" | "read" | "failed";
+/**
+ * Attachment types
+ */
+export type MessageAttachmentType = "file" | "image" | "audio" | "link";
+/**
+ * Attachment data
+ */
+export interface MessageAttachment {
+    type: MessageAttachmentType;
+    name?: string;
+    url?: string;
+    size?: string;
+    duration?: string;
+    thumbnailUrl?: string;
+    description?: string;
+    domain?: string;
+}
+/**
+ * Reaction data
+ */
+export interface MessageReaction {
+    emoji: string;
+    count: number;
+    reacted?: boolean;
+}
+/**
+ * Reply/quote reference
+ */
+export interface MessageReplyTo {
+    name: string;
+    content: string;
+    avatar?: string;
+}
+/**
+ * Sender display info
+ */
+export interface MessageSenderInfo {
+    name: string;
+    avatar?: string;
+}
 /**
  * Avatar configuration for message sender
  */
@@ -16,9 +60,9 @@ export interface MessageAvatarProps {
      */
     src?: string;
     /**
-     * Alternative text for the avatar image
+     * The name for the avatar (used for initials and alt text)
      */
-    alt: string;
+    name: string;
     /**
      * Fallback content to display when image fails to load
      */
@@ -28,7 +72,7 @@ export interface MessageAvatarProps {
  * Message component props
  * Supports both props-based API and compound component API
  */
-export interface MessageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {
+export interface MessageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "content"> {
     /**
      * The role of the message sender (AI semantic naming)
      * Takes precedence over variant if both are provided
@@ -47,14 +91,9 @@ export interface MessageProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     variant?: MessageVariant;
     /**
      * The message content (supports rich content, markdown, etc.)
-     * Note: Optional when using compound API with Message.Content
+     * Note: Optional when using compound API with Message.Body
      */
     content?: ReactNode;
-    /**
-     * Deprecated alias for content (for backward compatibility)
-     * @deprecated Use content instead
-     */
-    message?: ReactNode;
     /**
      * The timestamp of the message
      */
@@ -104,6 +143,43 @@ export interface MessageProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
      * @default true for assistant messages
      */
     showActions?: boolean;
+    /**
+     * Delivery status indicator (sending/sent/delivered/read/failed)
+     * Only renders for sender variant
+     */
+    status?: MessageStatus;
+    /**
+     * Timestamp when the message was read (shown alongside read status)
+     */
+    readAt?: Date | string;
+    /**
+     * Callback when retry button is clicked on failed messages
+     */
+    onRetry?: () => void;
+    /**
+     * File, image, audio, or link attachments
+     */
+    attachments?: MessageAttachment[];
+    /**
+     * Emoji reactions displayed below the message
+     */
+    reactions?: MessageReaction[];
+    /**
+     * Callback when a reaction pill is clicked
+     */
+    onReactionClick?: (emoji: string) => void;
+    /**
+     * Reply/quote reference shown above message content
+     */
+    replyTo?: MessageReplyTo;
+    /**
+     * Sender display info (name shown above receiver bubbles)
+     */
+    sender?: MessageSenderInfo;
+    /**
+     * Whether this is a consecutive message from the same sender (hides avatar & name)
+     */
+    isGrouped?: boolean;
     /**
      * Custom theme overrides
      */
@@ -131,7 +207,23 @@ export interface MessageTheme {
     };
     streamingIndicatorStyle: string;
     actionsContainerStyle: string;
-    actionButtonStyle: string;
+    statusStyle: string;
+    statusSending: string;
+    statusSent: string;
+    statusDelivered: string;
+    statusRead: string;
+    statusFailed: string;
+    attachmentContainerStyle: string;
+    fileStyle: string;
+    imageStyle: string;
+    audioStyle: string;
+    linkStyle: string;
+    reactionsContainerStyle: string;
+    reactionPillStyle: string;
+    reactionPillActiveStyle: string;
+    replyStyle: string;
+    dateDividerStyle: string;
+    senderNameStyle: string;
 }
 /**
  * Theme overrides for Message component
@@ -147,7 +239,23 @@ export interface MessageThemeOverrides {
     };
     streamingIndicatorStyle?: string;
     actionsContainerStyle?: string;
-    actionButtonStyle?: string;
+    statusStyle?: string;
+    statusSending?: string;
+    statusSent?: string;
+    statusDelivered?: string;
+    statusRead?: string;
+    statusFailed?: string;
+    attachmentContainerStyle?: string;
+    fileStyle?: string;
+    imageStyle?: string;
+    audioStyle?: string;
+    linkStyle?: string;
+    reactionsContainerStyle?: string;
+    reactionPillStyle?: string;
+    reactionPillActiveStyle?: string;
+    replyStyle?: string;
+    dateDividerStyle?: string;
+    senderNameStyle?: string;
     /** @deprecated Use variants.sender.containerModifier instead */
     senderContainerStyle?: string;
     /** @deprecated Use variants.sender.bubbleStyle instead */

package/dist/components/core/Message/MessageAudio.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export interface MessageAudioProps {
+    duration?: string;
+    name?: string;
+    onClick?: () => void;
+    className?: string;
+}
+export declare const MessageAudio: React.FC<MessageAudioProps>;

package/dist/components/core/Message/MessageAudio.js

@@ -0,0 +1,11 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import 'react';
+import { messageTheme } from './Message.theme.js';
+import { PlayIcon } from '@heroicons/react/24/solid';
+
+const MessageAudio = ({ duration, name, onClick, className, }) => {
+    return (jsxs("div", { className: cn(messageTheme.audioStyle, className), children: [jsx("button", { onClick: onClick, className: "flex items-center justify-center size-8 rounded-full bg-[var(--color-primary)] text-white flex-shrink-0 cursor-pointer", "aria-label": name ? `Play ${name}` : "Play audio", type: "button", children: jsx(PlayIcon, { className: "size-4 ml-0.5" }) }), jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [name && (jsx("span", { className: "font-medium text-[var(--color-text-primary)] truncate", children: name })), duration && (jsx("span", { className: "text-xs text-[var(--color-text-muted)]", children: duration }))] })] }));
+};
+
+export { MessageAudio };

package/dist/components/core/Message/MessageAvatar.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
+import React from "react";
 export interface MessageAvatarComponentProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * The source URL for the avatar image
      */
     src?: string;
     /**
-     * The name or alt text for the avatar
+     * The name for the avatar
      */
     name: string;
     /**

package/dist/components/core/Message/MessageAvatar.js

@@ -6,11 +6,11 @@ import { useMessageContext } from './MessageContext.js';
 const MessageAvatar = React__default.forwardRef(({ src, name, fallback, className, ...props }, ref) => {
     const { variant } = useMessageContext();
     // Don't render avatar for system messages
-    if (variant === 'system') {
+    if (variant === "system") {
         return null;
     }
-    return (jsx("div", { ref: ref, className: className, ...props, children: jsx(Avatar, { src: src, alt: name, fallback: fallback, size: "xs" }) }));
+    return (jsx("div", { ref: ref, className: className, ...props, children: jsx(Avatar, { src: src, name: name, fallback: fallback, size: "xs" }) }));
 });
-MessageAvatar.displayName = 'Message.Avatar';
+MessageAvatar.displayName = "Message.Avatar";
 
 export { MessageAvatar };

package/dist/components/core/Message/MessageBody.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface MessageBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The message content
+     */
+    children: React.ReactNode;
+}
+export declare const MessageBody: React.ForwardRefExoticComponent<MessageBodyProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Message/{MessageContent.js → MessageBody.js}

@@ -5,7 +5,7 @@ import { useMessageContext } from './MessageContext.js';
 import { messageTheme } from './Message.theme.js';
 import { TypeWriter } from './TypeWriter.js';
 
-const MessageContent = React__default.forwardRef(({ children, className, ...props }, ref) => {
+const MessageBody = React__default.forwardRef(({ children, className, ...props }, ref) => {
     const { variant, role, isStreaming, typingSpeed } = useMessageContext();
     // Get variant-specific theme
     const variantTheme = messageTheme.variants[variant];
@@ -17,6 +17,6 @@ const MessageContent = React__default.forwardRef(({ children, className, ...prop
         typeof children === 'string';
     return (jsx("div", { ref: ref, className: bubbleStyle, ...props, children: shouldAnimate ? (jsx(TypeWriter, { text: children, speed: typingSpeed, enabled: true, className: "break-words" })) : typeof children === 'string' ? (jsx("p", { className: "break-words", children: children })) : (children) }));
 });
-MessageContent.displayName = 'Message.Content';
+MessageBody.displayName = 'Message.Body';
 
-export { MessageContent };
+export { MessageBody };

package/dist/components/core/Message/MessageContext.d.ts

@@ -1,9 +1,11 @@
-import { MessageRole, MessageVariant } from './Message.types';
+import { MessageRole, MessageVariant, MessageStatus } from './Message.types';
 export interface MessageContextValue {
     role?: MessageRole;
     variant: MessageVariant;
     isStreaming?: boolean;
     typingSpeed?: number;
+    status?: MessageStatus;
+    isGrouped?: boolean;
 }
 export declare const MessageContext: import("react").Context<MessageContextValue | undefined>;
 export declare const useMessageContext: () => MessageContextValue;

package/dist/components/core/Message/MessageDateDivider.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface MessageDateDividerProps {
+    label: string;
+    className?: string;
+}
+export declare const MessageDateDivider: React.FC<MessageDateDividerProps>;

package/dist/components/core/Message/MessageDateDivider.js

@@ -0,0 +1,10 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import 'react';
+import { messageTheme } from './Message.theme.js';
+
+const MessageDateDivider = ({ label, className, }) => {
+    return (jsxs("div", { className: cn(messageTheme.dateDividerStyle, className), children: [jsx("hr", { className: "flex-1 border-t border-[var(--color-border)]" }), jsx("span", { children: label }), jsx("hr", { className: "flex-1 border-t border-[var(--color-border)]" })] }));
+};
+
+export { MessageDateDivider };

package/dist/components/core/Message/MessageFile.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface MessageFileProps {
+    name?: string;
+    url?: string;
+    size?: string;
+    onClick?: () => void;
+    className?: string;
+}
+export declare const MessageFile: React.FC<MessageFileProps>;

package/dist/components/core/Message/MessageFile.js

@@ -0,0 +1,15 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import 'react';
+import { messageTheme } from './Message.theme.js';
+import { DocumentIcon, ArrowDownTrayIcon } from '@heroicons/react/24/outline';
+
+const MessageFile = ({ name = "File", url, size, onClick, className, }) => {
+    const content = (jsxs("div", { className: cn(messageTheme.fileStyle, className), onClick: !url ? onClick : undefined, role: !url && onClick ? "button" : undefined, tabIndex: !url && onClick ? 0 : undefined, children: [jsx(DocumentIcon, { className: "size-5 flex-shrink-0 text-[var(--color-text-muted)]" }), jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [jsx("span", { className: "font-medium text-[var(--color-text-primary)] truncate", children: name }), size && (jsx("span", { className: "text-xs text-[var(--color-text-muted)]", children: size }))] }), url && (jsx(ArrowDownTrayIcon, { className: "size-4 flex-shrink-0 text-[var(--color-text-muted)]" }))] }));
+    if (url) {
+        return (jsx("a", { href: url, download: true, className: "no-underline", "aria-label": `Download ${name}`, children: content }));
+    }
+    return content;
+};
+
+export { MessageFile };