flikkui 0.1.0-beta.9 → 0.2.0-beta.2

package/dist/components/core/Masonry/Masonry.js

@@ -0,0 +1,212 @@
+import React__default, { useRef, useState, useCallback, useEffect } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { getMasonryTheme } from './Masonry.theme.js';
+
+const Masonry = ({ children, columns = 3, gap = 16, gapBreakpoints, className, style, minColumns = 1, maxColumns = 10, sequential = false, themeOverrides, loading = false, ...props }) => {
+    const containerRef = useRef(null);
+    const [currentColumns, setCurrentColumns] = useState(typeof columns === 'number' ? columns : 3);
+    const [currentGap, setCurrentGap] = useState(gap);
+    const [containerWidth, setContainerWidth] = useState(0);
+    // Get the theme with any overrides applied
+    const theme = getMasonryTheme(themeOverrides);
+    // Calculate responsive columns and gap
+    const calculateLayout = useCallback(() => {
+        if (!containerRef.current)
+            return;
+        // Use getBoundingClientRect for more accurate width measurement
+        const containerRect = containerRef.current.getBoundingClientRect();
+        const width = Math.floor(containerRect.width);
+        // Only update if width actually changed to prevent unnecessary re-renders
+        if (width !== containerWidth && width > 0) {
+            setContainerWidth(width);
+        }
+        // Handle responsive columns
+        if (typeof columns === 'object') {
+            const breakpoints = Object.keys(columns)
+                .map(Number)
+                .sort((a, b) => a - b);
+            let newColumns = 3; // Default fallback
+            for (const breakpoint of breakpoints) {
+                if (width >= breakpoint) {
+                    newColumns = columns[breakpoint];
+                }
+            }
+            // Ensure columns are within min/max bounds
+            newColumns = Math.min(Math.max(newColumns, minColumns), maxColumns);
+            setCurrentColumns(newColumns);
+        }
+        else {
+            const clampedColumns = Math.min(Math.max(columns, minColumns), maxColumns);
+            setCurrentColumns(clampedColumns);
+        }
+        // Handle responsive gap
+        if (gapBreakpoints) {
+            const gapBreakpointKeys = Object.keys(gapBreakpoints)
+                .map(Number)
+                .sort((a, b) => a - b);
+            let newGap = gap;
+            for (const breakpoint of gapBreakpointKeys) {
+                if (width >= breakpoint) {
+                    newGap = gapBreakpoints[breakpoint];
+                }
+            }
+            setCurrentGap(newGap);
+        }
+        else {
+            setCurrentGap(gap);
+        }
+    }, [columns, gap, gapBreakpoints, minColumns, maxColumns, containerWidth]);
+    // Arrange items in masonry layout
+    const arrangeItems = useCallback(() => {
+        if (!containerRef.current)
+            return;
+        const container = containerRef.current;
+        const wrappers = Array.from(container.children);
+        if (wrappers.length === 0)
+            return;
+        // Get fresh container width to avoid stale closure issues
+        const currentContainerWidth = container.offsetWidth;
+        // Calculate column width
+        const availableWidth = currentContainerWidth - (currentGap * (currentColumns - 1));
+        const columnWidth = Math.floor(availableWidth / currentColumns);
+        if (columnWidth <= 0)
+            return; // Prevent invalid layouts
+        // Initialize column heights
+        const columnHeights = new Array(currentColumns).fill(0);
+        // PHASE 1: READ - Measure all wrapper heights first (prevents layout thrashing)
+        const wrapperHeights = [];
+        wrappers.forEach((wrapper) => {
+            // Temporarily reset positioning to measure natural height
+            const originalPosition = wrapper.style.position;
+            const originalLeft = wrapper.style.left;
+            const originalTop = wrapper.style.top;
+            // Set width and reset positioning for accurate measurement
+            wrapper.style.width = `${columnWidth}px`;
+            wrapper.style.position = 'static';
+            wrapper.style.left = '';
+            wrapper.style.top = '';
+            // Force layout recalculation to get accurate height
+            void wrapper.offsetHeight;
+            const height = wrapper.offsetHeight;
+            wrapperHeights.push(height > 0 ? height : 0);
+            // Restore original positioning (will be overwritten in write phase, but keeps state consistent)
+            wrapper.style.position = originalPosition;
+            wrapper.style.left = originalLeft;
+            wrapper.style.top = originalTop;
+        });
+        // PHASE 2: WRITE - Position all wrappers (batch all DOM writes)
+        wrappers.forEach((wrapper, index) => {
+            // Set positioning styles
+            wrapper.style.position = 'absolute';
+            wrapper.style.width = `${columnWidth}px`;
+            let targetColumn;
+            if (sequential) {
+                // Sequential placement: round-robin distribution
+                targetColumn = index % currentColumns;
+            }
+            else {
+                // Optimal placement: shortest column
+                targetColumn = columnHeights.indexOf(Math.min(...columnHeights));
+            }
+            // Calculate position
+            const left = targetColumn * (columnWidth + currentGap);
+            const top = columnHeights[targetColumn];
+            // Position the wrapper
+            wrapper.style.left = `${left}px`;
+            wrapper.style.top = `${top}px`;
+            // Update column height using pre-measured height
+            const itemHeight = wrapperHeights[index];
+            if (itemHeight > 0) {
+                columnHeights[targetColumn] = top + itemHeight + currentGap;
+            }
+        });
+        // Set final container height after all items are positioned
+        requestAnimationFrame(() => {
+            const maxHeight = Math.max(...columnHeights) - currentGap;
+            container.style.height = `${Math.max(0, maxHeight)}px`;
+        });
+    }, [currentColumns, currentGap, sequential]);
+    // Handle container resize with ResizeObserver for better performance
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        let resizeTimeoutId;
+        const resizeObserver = new ResizeObserver((_entries) => {
+            // Debounce resize events to prevent excessive recalculations
+            clearTimeout(resizeTimeoutId);
+            resizeTimeoutId = setTimeout(() => {
+                calculateLayout();
+            }, 100);
+        });
+        // Fallback window resize handler for older browsers
+        const handleWindowResize = () => {
+            clearTimeout(resizeTimeoutId);
+            resizeTimeoutId = setTimeout(() => {
+                calculateLayout();
+            }, 100);
+        };
+        resizeObserver.observe(containerRef.current);
+        window.addEventListener('resize', handleWindowResize);
+        return () => {
+            resizeObserver.disconnect();
+            window.removeEventListener('resize', handleWindowResize);
+            clearTimeout(resizeTimeoutId);
+        };
+    }, [calculateLayout]);
+    // Initial layout calculation and arrangement
+    useEffect(() => {
+        // Wait for next tick to ensure container is mounted and measured
+        const timer = setTimeout(() => {
+            calculateLayout();
+            // Only arrange items if we have a valid container width
+            if (containerWidth > 0) {
+                arrangeItems();
+            }
+        }, 0);
+        return () => clearTimeout(timer);
+    }, [calculateLayout, arrangeItems, children, containerWidth]);
+    // Re-arrange when children change (with debouncing)
+    useEffect(() => {
+        let timeoutId;
+        const observer = new MutationObserver(() => {
+            // Debounce multiple rapid changes
+            clearTimeout(timeoutId);
+            timeoutId = setTimeout(() => {
+                arrangeItems();
+            }, 10);
+        });
+        if (containerRef.current) {
+            observer.observe(containerRef.current, {
+                childList: true,
+                subtree: false, // Only watch direct children, not nested changes
+            });
+        }
+        return () => {
+            observer.disconnect();
+            clearTimeout(timeoutId);
+        };
+    }, [arrangeItems]);
+    // Generate container classes
+    const containerClasses = cn(theme.container.base, loading && theme.container.loading, className);
+    // Wrap each child in a positioning div with theme styles
+    const wrappedChildren = React__default.Children.map(children, (child, index) => {
+        if (!React__default.isValidElement(child)) {
+            return child;
+        }
+        const wrapperClasses = cn(theme.item.base, theme.animations.transition);
+        return (React__default.createElement(motion.div, { key: child.key || index, className: wrapperClasses, "data-masonry-item": true, initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, scale: 0.95 }, transition: {
+                duration: 0.4,
+                ease: [0.2, 0.65, 0.3, 0.9], // Subtle spring-like ease
+                delay: index * 0.05, // Stagger effect
+            } }, child));
+    });
+    return (React__default.createElement("div", { ref: containerRef, className: containerClasses, style: {
+            ...style,
+            // Ensure container has minimum dimensions for proper layout calculation
+            minHeight: loading ? '200px' : undefined,
+        }, ...props },
+        React__default.createElement(AnimatePresence, { mode: "popLayout" }, wrappedChildren)));
+};
+
+export { Masonry };

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

@@ -0,0 +1,34 @@
+/**
+ * Default theme for the Masonry component
+ */
+const masonryTheme = {
+    // Container styles
+    container: {
+        base: "relative w-full overflow-hidden",
+        loading: "opacity-70 pointer-events-none",
+    },
+    // Item wrapper styles (auto-applied to each child wrapper)
+    item: {
+        base: "relative rounded-[var(--form-rounded)] border border-[var(--color-border)] overflow-hidden",
+    },
+    // Animation classes
+    animations: {
+        transition: "transition-[left,top,width,height] duration-400 ease-in-out",
+        enter: "opacity-0 scale-95",
+        exit: "opacity-100 scale-100",
+    },
+};
+/**
+ * Apply theme overrides to the default theme
+ */
+const getMasonryTheme = (overrides) => {
+    if (!overrides)
+        return masonryTheme;
+    return {
+        container: { ...masonryTheme.container, ...overrides.container },
+        item: { ...masonryTheme.item, ...overrides.item },
+        animations: { ...masonryTheme.animations, ...overrides.animations },
+    };
+};
+
+export { getMasonryTheme, masonryTheme };

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

@@ -0,0 +1,49 @@
+import React from "react";
+/**
+ * Theme configuration for the Masonry component
+ */
+export interface MasonryTheme {
+    container: {
+        base: string;
+        loading: string;
+    };
+    item: {
+        base: string;
+    };
+    animations: {
+        transition: string;
+        enter: string;
+        exit: string;
+    };
+}
+/**
+ * Masonry theme overrides interface for customization
+ */
+export interface MasonryThemeOverrides {
+    container?: Partial<MasonryTheme['container']>;
+    item?: Partial<MasonryTheme['item']>;
+    animations?: Partial<MasonryTheme['animations']>;
+}
+/**
+ * Masonry component props
+ */
+export interface MasonryProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Children elements to be arranged in masonry layout */
+    children: React.ReactNode;
+    /** Number of columns (static) or breakpoint configuration (responsive) */
+    columns?: number | Record<number, number>;
+    /** Gap between items in pixels */
+    gap?: number;
+    /** Gap configuration for different breakpoints */
+    gapBreakpoints?: Record<number, number>;
+    /** Minimum columns count */
+    minColumns?: number;
+    /** Maximum columns count */
+    maxColumns?: number;
+    /** Enable sequential placement (items placed in order vs optimal placement) */
+    sequential?: boolean;
+    /** Theme overrides for customizing appearance */
+    themeOverrides?: MasonryThemeOverrides;
+    /** Loading state */
+    loading?: boolean;
+}

package/dist/components/core/Masonry/index.d.ts

@@ -0,0 +1,3 @@
+export { Masonry } from './Masonry';
+export { masonryTheme, getMasonryTheme } from './Masonry.theme';
+export type { MasonryProps, MasonryThemeOverrides, MasonryTheme } from './Masonry.types';

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { MessageProps } from './Message.types';
+export declare const Message: React.ForwardRefExoticComponent<MessageProps & React.RefAttributes<HTMLDivElement>> & {
+    Avatar: React.ForwardRefExoticComponent<import("./MessageAvatar").MessageAvatarComponentProps & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<import("./MessageContent").MessageContentProps & React.RefAttributes<HTMLDivElement>>;
+    Actions: React.ForwardRefExoticComponent<import("./MessageActions").MessageActionsProps & React.RefAttributes<HTMLDivElement>>;
+    Timestamp: React.ForwardRefExoticComponent<import("./MessageTimestamp").MessageTimestampProps & React.RefAttributes<HTMLDivElement>>;
+};

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

@@ -0,0 +1,130 @@
+import React__default from 'react';
+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 { 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 { MessageActions } from './MessageActions.js';
+import { MessageTimestamp } from './MessageTimestamp.js';
+import { TypeWriter } from './TypeWriter.js';
+
+const MessageFooter = ({ isStreaming, streamingIndicator, showTimestamp, timestamp, actions, timestampStyle, streamingIndicatorStyle, actionsContainerStyle, variant, }) => {
+    if (isStreaming) {
+        return (React__default.createElement("div", { className: cn('flex flex-row items-center gap-3 mt-1', variant === 'receiver' ? 'ml-2' : 'mr-3') },
+            React__default.createElement("div", { className: cn(timestampStyle, streamingIndicatorStyle) }, streamingIndicator || (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement("span", null, "Typing"),
+                React__default.createElement(motion.span, { animate: { opacity: [0.4, 1, 0.4] }, transition: {
+                        duration: 1.5,
+                        repeat: Infinity,
+                        ease: 'easeInOut',
+                    } }, "\u2022\u2022\u2022"))))));
+    }
+    // For system variant, only show timestamp (no actions)
+    if (variant === 'system') {
+        return showTimestamp && timestamp ? (React__default.createElement("div", { className: timestampStyle },
+            React__default.createElement("time", { dateTime: typeof timestamp === 'string' ? timestamp : timestamp.toISOString(), className: "select-none" }, formatTimestamp(timestamp)))) : null;
+    }
+    // For sender/receiver variants, show timestamp and actions in a row
+    return (React__default.createElement("div", { className: cn(`flex flex-row items-center gap-3 mt-2`, variant === 'receiver' ? 'ml-2' : 'mr-3') },
+        showTimestamp && timestamp && (React__default.createElement("div", { className: timestampStyle },
+            React__default.createElement("time", { dateTime: typeof timestamp === 'string'
+                    ? timestamp
+                    : timestamp.toISOString(), className: "select-none" }, formatTimestamp(timestamp)))),
+        actions && React__default.createElement("div", { className: cn(actionsContainerStyle) }, 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) => {
+    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';
+    }
+    else {
+        // Use variant prop or default
+        variant = variantProp || 'receiver';
+    }
+    // Detect if using compound API (has children)
+    const isCompoundAPI = !!children;
+    // Context value for compound components
+    const contextValue = {
+        role,
+        variant,
+        isStreaming,
+        typingSpeed,
+    };
+    // Resolve content (support deprecated 'message' prop)
+    const messageContent = content !== null && content !== void 0 ? content : message;
+    // Determine if we should show default actions
+    const shouldShowDefaultActions = showActions !== false &&
+        (variant === 'receiver' || role === 'assistant') &&
+        (onCopy || onRegenerate);
+    if (isCompoundAPI) {
+        // Compound API - Render with context
+        const variantTheme = messageTheme.variants[variant];
+        // 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 (React__default.createElement(MessageContext.Provider, { value: contextValue },
+            React__default.createElement("div", { ref: ref, className: cn('w-full max-w-full group', className), "data-variant": variant, "data-role": role, ...props },
+                React__default.createElement("div", { className: containerStyle }, children))));
+    }
+    // Props API - Render inline
+    // Get variant-specific theme
+    const variantTheme = messageTheme.variants[variant];
+    // 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);
+    // 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);
+    // 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);
+    // Build default action buttons if needed
+    const defaultActionButtons = shouldShowDefaultActions ? (React__default.createElement("div", { className: cn(messageTheme.actionsContainerStyle, customTheme.actionsContainerStyle) },
+        onCopy && (React__default.createElement("button", { onClick: onCopy, className: cn(messageTheme.actionButtonStyle, customTheme.actionButtonStyle), "aria-label": "Copy message" },
+            React__default.createElement(DocumentDuplicateIcon, { className: "w-4 h-4" }))),
+        onRegenerate && (React__default.createElement("button", { onClick: onRegenerate, className: cn(messageTheme.actionButtonStyle, customTheme.actionButtonStyle), "aria-label": "Regenerate response" },
+            React__default.createElement(ArrowPathIcon, { className: "w-4 h-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') &&
+        isStreaming &&
+        typeof messageContent === 'string';
+    const renderedContent = shouldAnimate ? (React__default.createElement(TypeWriter, { text: messageContent, speed: typingSpeed, enabled: true, className: "break-words" })) : (messageContent);
+    // System messages render differently (centered, no avatar)
+    if (variant === 'system') {
+        return (React__default.createElement("div", { ref: ref, className: cn('w-full max-w-full', className), "data-variant": "system", "data-role": role, ...props },
+            React__default.createElement("div", { className: containerStyle },
+                React__default.createElement("div", { className: bubbleStyle }, typeof renderedContent === 'string' ? (React__default.createElement("p", { className: "text-sm" }, renderedContent)) : (renderedContent)),
+                React__default.createElement(MessageFooter, { isStreaming: isStreaming, streamingIndicator: streamingIndicator, showTimestamp: showTimestamp, timestamp: timestamp, actions: undefined, timestampStyle: timestampStyle, streamingIndicatorStyle: cn(messageTheme.streamingIndicatorStyle, customTheme.streamingIndicatorStyle), actionsContainerStyle: undefined, variant: "system" }))));
+    }
+    return (React__default.createElement("div", { ref: ref, className: cn('w-full max-w-full group', className), "data-variant": variant, "data-role": role, ...props },
+        React__default.createElement("div", { className: containerStyle },
+            avatar && (React__default.createElement("div", { className: "flex-shrink-0" },
+                React__default.createElement(Avatar, { src: avatar.src, alt: avatar.alt, fallback: avatar.fallback, size: "xs" }))),
+            React__default.createElement("div", { className: cn('flex flex-col', variant === 'sender' ? 'items-end' : 'items-start') },
+                React__default.createElement("div", { className: bubbleStyle }, typeof renderedContent === 'string' ? (React__default.createElement("p", { className: "break-words" }, renderedContent)) : (renderedContent)),
+                React__default.createElement(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 })))));
+});
+MessageRoot.displayName = 'Message';
+// Attach compound components
+const Message = Object.assign(MessageRoot, {
+    Avatar: MessageAvatar,
+    Content: MessageContent,
+    Actions: MessageActions,
+    Timestamp: MessageTimestamp,
+});
+
+export { Message };

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

@@ -0,0 +1,6 @@
+import { MessageTheme } from './Message.types';
+/**
+ * Unified Message theme with shared base styles + variant-specific modifiers
+ * Based on ChatMessage theme with additional action button styles
+ */
+export declare const messageTheme: MessageTheme;

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

@@ -0,0 +1,46 @@
+/**
+ * Unified Message theme with shared base styles + variant-specific modifiers
+ * Based on ChatMessage theme with additional action button styles
+ */
+const messageTheme = {
+    // Shared base styles (apply to all variants)
+    bubbleBaseStyle: 'max-w-[80%] sm:max-w-[90%] rounded-xl 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)]',
+    // 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)] ' +
+                // 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',
+        },
+        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)] ' +
+                // 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',
+        },
+        system: {
+            containerModifier: 'justify-center', // Center alignment
+            bubbleStyle: 'bg-[var(--color-neutral-100)] text-[var(--color-text-secondary)] rounded-md px-2 py-1 ' +
+                'text-sm font-medium border-none ' +
+                // Dark mode
+                'dark:bg-[var(--color-neutral-800)] dark:text-[var(--color-neutral-400)]',
+            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)]',
+};
+
+export { messageTheme };

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

@@ -0,0 +1,169 @@
+import { ReactNode } from 'react';
+/**
+ * Message role types for AI conversations
+ */
+export type MessageRole = 'user' | 'assistant' | 'system';
+/**
+ * Message variant types for chat UI
+ */
+export type MessageVariant = 'sender' | 'receiver' | 'system';
+/**
+ * Avatar configuration for message sender
+ */
+export interface MessageAvatarProps {
+    /**
+     * The source URL for the avatar image
+     */
+    src?: string;
+    /**
+     * Alternative text for the avatar image
+     */
+    alt: string;
+    /**
+     * Fallback content to display when image fails to load
+     */
+    fallback?: ReactNode;
+}
+/**
+ * Message component props
+ * Supports both props-based API and compound component API
+ */
+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
+     * - user: Messages from the user (maps to sender)
+     * - assistant: AI-generated responses (maps to receiver)
+     * - system: System notifications/messages
+     */
+    role?: MessageRole;
+    /**
+     * The variant of the message (Chat UI semantic naming)
+     * - sender: User messages (right-aligned)
+     * - receiver: Response messages (left-aligned)
+     * - system: System notifications (centered)
+     * @default "receiver"
+     */
+    variant?: MessageVariant;
+    /**
+     * The message content (supports rich content, markdown, etc.)
+     * Note: Optional when using compound API with Message.Content
+     */
+    content?: ReactNode;
+    /**
+     * Deprecated alias for content (for backward compatibility)
+     * @deprecated Use content instead
+     */
+    message?: ReactNode;
+    /**
+     * The timestamp of the message
+     */
+    timestamp?: Date | string;
+    /**
+     * Avatar configuration for the message sender
+     * Note: Not shown for system messages
+     */
+    avatar?: MessageAvatarProps;
+    /**
+     * Whether to show the timestamp
+     * @default true
+     */
+    showTimestamp?: boolean;
+    /**
+     * Whether the message is currently streaming (for AI responses)
+     * @default false
+     */
+    isStreaming?: boolean;
+    /**
+     * Custom streaming indicator content
+     * If not provided, a default animated indicator will be shown
+     */
+    streamingIndicator?: ReactNode;
+    /**
+     * Speed for word-by-word typing animation in milliseconds
+     * Only applies when isStreaming is true for assistant messages
+     * @default 100
+     */
+    typingSpeed?: number;
+    /**
+     * Custom action buttons slot
+     * Overrides default built-in actions (copy, regenerate)
+     */
+    actions?: ReactNode;
+    /**
+     * Callback when copy button is clicked (only for assistant/receiver messages)
+     */
+    onCopy?: () => void;
+    /**
+     * Callback when regenerate button is clicked (only for assistant/receiver messages)
+     */
+    onRegenerate?: () => void;
+    /**
+     * Whether to show built-in action buttons (copy, regenerate)
+     * Only shown for assistant/receiver messages when callbacks are provided
+     * @default true for assistant messages
+     */
+    showActions?: boolean;
+    /**
+     * Custom theme overrides
+     */
+    theme?: MessageThemeOverrides;
+}
+/**
+ * Variant-specific theme styles
+ */
+export interface MessageVariantTheme {
+    containerModifier: string;
+    bubbleStyle: string;
+    timestampModifier: string;
+}
+/**
+ * Message theme configuration
+ */
+export interface MessageTheme {
+    bubbleBaseStyle: string;
+    containerBaseStyle: string;
+    timestampStyle: string;
+    variants: {
+        sender: MessageVariantTheme;
+        receiver: MessageVariantTheme;
+        system: MessageVariantTheme;
+    };
+    streamingIndicatorStyle: string;
+    actionsContainerStyle: string;
+    actionButtonStyle: string;
+}
+/**
+ * Theme overrides for Message component
+ */
+export interface MessageThemeOverrides {
+    bubbleBaseStyle?: string;
+    containerBaseStyle?: string;
+    timestampStyle?: string;
+    variants?: {
+        sender?: Partial<MessageVariantTheme>;
+        receiver?: Partial<MessageVariantTheme>;
+        system?: Partial<MessageVariantTheme>;
+    };
+    streamingIndicatorStyle?: string;
+    actionsContainerStyle?: string;
+    actionButtonStyle?: string;
+    /** @deprecated Use variants.sender.containerModifier instead */
+    senderContainerStyle?: string;
+    /** @deprecated Use variants.sender.bubbleStyle instead */
+    senderBubbleStyle?: string;
+    /** @deprecated Use variants.sender.timestampModifier instead */
+    senderTimestampStyle?: string;
+    /** @deprecated Use variants.receiver.containerModifier instead */
+    receiverContainerStyle?: string;
+    /** @deprecated Use variants.receiver.bubbleStyle instead */
+    receiverBubbleStyle?: string;
+    /** @deprecated Use variants.receiver.timestampModifier instead */
+    receiverTimestampStyle?: string;
+    /** @deprecated Use variants.system.containerModifier instead */
+    systemContainerStyle?: string;
+    /** @deprecated Use variants.system.bubbleStyle instead */
+    systemBubbleStyle?: string;
+    /** @deprecated Use variants.system.timestampModifier instead */
+    systemTimestampStyle?: string;
+}