@xcelsior/ui-chat 1.0.1

package/src/components/MessageItem.stories.tsx

@@ -0,0 +1,232 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MessageItem } from './MessageItem';
+import type { IMessage, IUser } from '../types';
+
+const meta: Meta<typeof MessageItem> = {
+    title: 'Components/MessageItem',
+    component: MessageItem,
+    parameters: {
+        layout: 'padded',
+    },
+    tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof MessageItem>;
+
+// Mock current user
+const currentUser: IUser = {
+    name: 'John Doe',
+    email: 'john@example.com',
+    type: 'customer',
+    status: 'online',
+};
+
+// Base message template
+const baseMessage: IMessage = {
+    id: '1',
+    conversationId: 'conv-1',
+    senderId: 'user@example.com',
+    senderType: 'customer',
+    content: 'Hello, I need help with my account.',
+    messageType: 'text',
+    createdAt: new Date().toISOString(),
+    status: 'sent',
+};
+
+/**
+ * Customer message (own message)
+ */
+export const CustomerMessage: Story = {
+    args: {
+        message: {
+            ...baseMessage,
+            senderId: currentUser.email,
+            content: 'Hello, I need help with my account.',
+        },
+        currentUser,
+        showAvatar: true,
+        showTimestamp: true,
+    },
+};
+
+/**
+ * Human agent message
+ */
+export const AgentMessage: Story = {
+    args: {
+        message: {
+            ...baseMessage,
+            senderId: 'agent@example.com',
+            senderType: 'agent',
+            content:
+                "Hi! I'd be happy to help you with your account. What specific issue are you experiencing?",
+        },
+        currentUser,
+        showAvatar: true,
+        showTimestamp: true,
+    },
+};
+
+/**
+ * AI-generated message with robot icon
+ */
+export const AIMessage: Story = {
+    args: {
+        message: {
+            ...baseMessage,
+            senderId: 'ai-assistant',
+            senderType: 'agent',
+            content:
+                "Hello! I'm an AI assistant. Based on our knowledge base, here are some common solutions for account issues:\n\n1. Reset your password\n2. Verify your email\n3. Contact support",
+            metadata: {
+                isAI: true,
+            },
+        },
+        currentUser,
+        showAvatar: true,
+        showTimestamp: true,
+    },
+};
+
+/**
+ * AI message with markdown formatting
+ */
+export const AIMessageWithMarkdown: Story = {
+    args: {
+        message: {
+            ...baseMessage,
+            senderId: 'ai-assistant',
+            senderType: 'agent',
+            content: `## Getting Started
+
+Here's how you can reset your password:
+
+1. Go to the login page
+2. Click on **"Forgot Password"**
+3. Enter your email address
+4. Check your inbox for the reset link
+
+*Note: The link expires in 24 hours.*
+
+For more help, visit our [support page](https://example.com/support).`,
+            metadata: {
+                isAI: true,
+            },
+        },
+        currentUser,
+        showAvatar: true,
+        showTimestamp: true,
+    },
+};
+
+/**
+ * System message
+ */
+export const SystemMessage: Story = {
+    args: {
+        message: {
+            ...baseMessage,
+            senderId: 'system',
+            senderType: 'system',
+            content: 'Agent John joined the conversation',
+        },
+        currentUser,
+        showAvatar: true,
+        showTimestamp: true,
+    },
+};
+
+/**
+ * Message with image
+ */
+export const ImageMessage: Story = {
+    args: {
+        message: {
+            ...baseMessage,
+            content: 'https://picsum.photos/400/300',
+            messageType: 'image',
+        },
+        currentUser,
+        showAvatar: true,
+        showTimestamp: true,
+    },
+};
+
+/**
+ * Message with file attachment
+ */
+export const FileMessage: Story = {
+    args: {
+        message: {
+            ...baseMessage,
+            content: 'https://example.com/document.pdf',
+            messageType: 'file',
+            metadata: {
+                fileName: 'Technical Documentation.pdf',
+            },
+        },
+        currentUser,
+        showAvatar: true,
+        showTimestamp: true,
+    },
+};
+
+/**
+ * Conversation showing different message types
+ */
+export const ConversationExample: Story = {
+    render: (args) => (
+        <div className="flex flex-col gap-2 max-w-2xl">
+            <MessageItem
+                {...args}
+                message={{
+                    ...baseMessage,
+                    id: '1',
+                    senderId: currentUser.email,
+                    content: 'Hi, I need help with resetting my password.',
+                }}
+            />
+            <MessageItem
+                {...args}
+                message={{
+                    ...baseMessage,
+                    id: '2',
+                    senderId: 'ai-assistant',
+                    senderType: 'agent',
+                    content:
+                        'I can help you with that! Here are the steps to reset your password:\n\n1. Click on "Forgot Password" on the login page\n2. Enter your email address\n3. Check your inbox for a reset link\n\nThe link will expire in 24 hours. Would you like me to send you the reset link now?',
+                    metadata: { isAI: true },
+                    createdAt: new Date(Date.now() - 60000).toISOString(),
+                }}
+            />
+            <MessageItem
+                {...args}
+                message={{
+                    ...baseMessage,
+                    id: '3',
+                    senderId: currentUser.email,
+                    content: 'Yes please, send me the reset link.',
+                    createdAt: new Date(Date.now() - 30000).toISOString(),
+                }}
+            />
+            <MessageItem
+                {...args}
+                message={{
+                    ...baseMessage,
+                    id: '4',
+                    senderId: 'agent@example.com',
+                    senderType: 'agent',
+                    content:
+                        "I've sent the password reset link to your registered email address. Please check your inbox and spam folder. Let me know if you need any further assistance!",
+                    createdAt: new Date().toISOString(),
+                }}
+            />
+        </div>
+    ),
+    args: {
+        currentUser,
+        showAvatar: true,
+        showTimestamp: true,
+    },
+};

package/src/components/MessageItem.tsx

@@ -0,0 +1,143 @@
+import { formatDistanceToNow } from 'date-fns';
+import ReactMarkdown from 'react-markdown';
+import type { IMessage, IUser } from '../types';
+
+interface MessageItemProps {
+    message: IMessage;
+    currentUser: IUser;
+    showAvatar?: boolean;
+    showTimestamp?: boolean;
+}
+
+export function MessageItem({
+    message,
+    currentUser,
+    showAvatar = true,
+    showTimestamp = true,
+}: MessageItemProps) {
+    const isOwnMessage = message.senderType === currentUser.type;
+    const isSystemMessage = message.senderType === 'system';
+    const isAIMessage = message.metadata?.isAI === true;
+
+    // System messages are centered and styled differently
+    if (isSystemMessage) {
+        return (
+            <div className="flex justify-center my-4">
+                <div className="px-4 py-2 bg-gray-100 dark:bg-gray-800 rounded-full">
+                    <p className="text-xs text-gray-600 dark:text-gray-400">{message.content}</p>
+                </div>
+            </div>
+        );
+    }
+
+    // Determine the avatar icon to display
+    const getAvatarIcon = () => {
+        if (isAIMessage) {
+            return '🤖'; // Robot icon for AI messages
+        }
+        if (message.senderType === 'agent') {
+            return '🎧'; // Headset icon for human agents
+        }
+        return '👤'; // User icon for customers
+    };
+
+    return (
+        <div className={`flex gap-2 mb-4 ${!isOwnMessage ? 'flex-row-reverse' : 'flex-row'}`}>
+            {showAvatar && (
+                <div className="flex-shrink-0">
+                    <div className="h-8 w-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white text-sm font-medium">
+                        {getAvatarIcon()}
+                    </div>
+                </div>
+            )}
+
+            <div
+                className={`flex flex-col max-w-[70%] ${!isOwnMessage ? 'items-end' : 'items-start'}`}
+            >
+                <div
+                    className={`rounded-2xl px-4 py-2 ${
+                        isOwnMessage
+                            ? 'bg-blue-600 text-white'
+                            : 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100'
+                    }`}
+                >
+                    {message.messageType === 'text' && (
+                        <div className="prose prose-sm dark:prose-invert max-w-none">
+                            <ReactMarkdown
+                                components={{
+                                    p: ({ children }) => <p className="mb-0">{children}</p>,
+                                    img: ({ src, alt, ...props }) => (
+                                        <img
+                                            {...props}
+                                            src={src}
+                                            alt={alt}
+                                            className="max-w-full h-auto rounded-lg shadow-sm my-2"
+                                            loading="lazy"
+                                        />
+                                    ),
+                                    a: ({ href, children, ...props }) => (
+                                        <a
+                                            {...props}
+                                            href={href}
+                                            target="_blank"
+                                            rel="noopener noreferrer"
+                                            className={`${isOwnMessage ? 'text-blue-200 hover:text-blue-100' : 'text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300'} underline`}
+                                        >
+                                            {children}
+                                        </a>
+                                    ),
+                                }}
+                            >
+                                {message.content}
+                            </ReactMarkdown>
+                        </div>
+                    )}
+                    {message.messageType === 'image' && (
+                        <div>
+                            <img
+                                src={message.content}
+                                alt="Attachment"
+                                className="max-w-full h-auto rounded-lg"
+                                loading="lazy"
+                            />
+                        </div>
+                    )}
+                    {message.messageType === 'file' && (
+                        <div className="flex items-center gap-2">
+                            <span className="text-2xl">📎</span>
+                            <a
+                                href={message.content}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className={`${isOwnMessage ? 'text-blue-200 hover:text-blue-100' : 'text-blue-600 hover:text-blue-700 dark:text-blue-400'} underline`}
+                            >
+                                {(message.metadata?.fileName as any) || 'Download file'}
+                            </a>
+                        </div>
+                    )}
+                </div>
+
+                {showTimestamp && (
+                    <div
+                        className={`flex items-center gap-2 mt-1 px-2 ${isOwnMessage ? 'flex-row-reverse' : 'flex-row'}`}
+                    >
+                        <span className="text-xs text-gray-500 dark:text-gray-400">
+                            {formatDistanceToNow(new Date(message.createdAt), {
+                                addSuffix: true,
+                            })}
+                        </span>
+                        {isOwnMessage && message.status && (
+                            <span className="text-xs">
+                                {message.status === 'sent' && '✓'}
+                                {message.status === 'delivered' && '✓✓'}
+                                {message.status === 'read' && (
+                                    <span className="text-blue-600">✓✓</span>
+                                )}
+                            </span>
+                        )}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

package/src/components/MessageList.tsx

@@ -0,0 +1,189 @@
+import { useEffect, useRef, useCallback } from 'react';
+import { Spinner } from '@xcelsior/design-system';
+import { MessageItem } from './MessageItem';
+import type { IMessage, IUser } from '../types';
+
+interface MessageListProps {
+    messages: IMessage[];
+    currentUser: IUser;
+    isLoading?: boolean;
+    isTyping?: boolean;
+    typingUser?: string;
+    autoScroll?: boolean;
+    onLoadMore?: () => void;
+    hasMore?: boolean;
+    isLoadingMore?: boolean;
+}
+
+export function MessageList({
+    messages,
+    currentUser,
+    isLoading = false,
+    isTyping = false,
+    typingUser,
+    autoScroll = true,
+    onLoadMore,
+    hasMore = false,
+    isLoadingMore = false,
+}: MessageListProps) {
+    const messagesEndRef = useRef<HTMLDivElement>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const prevLengthRef = useRef(messages.length);
+    const loadMoreTriggerRef = useRef<HTMLDivElement>(null);
+    const prevScrollHeightRef = useRef(0);
+    const hasInitialScrolledRef = useRef(false);
+    const isUserScrollingRef = useRef(false);
+
+    // Auto-scroll to bottom when new messages arrive
+    useEffect(() => {
+        if (autoScroll && messagesEndRef.current) {
+            // Only auto-scroll if we're adding new messages (not loading older ones)
+            // Skip auto-scroll if we're loading more (older messages)
+            if (messages.length > prevLengthRef.current && !isLoadingMore) {
+                messagesEndRef.current.scrollIntoView({ behavior: 'smooth' });
+            }
+            prevLengthRef.current = messages.length;
+        }
+    }, [messages.length, autoScroll, isLoadingMore]);
+
+    // Initial scroll to bottom when messages first load
+    useEffect(() => {
+        if (
+            messages.length > 0 &&
+            messagesEndRef.current &&
+            !isLoading &&
+            !hasInitialScrolledRef.current
+        ) {
+            // Use setTimeout to ensure DOM is fully rendered
+            setTimeout(() => {
+                messagesEndRef.current?.scrollIntoView({ behavior: 'auto' });
+                // Enable user scrolling after initial scroll completes
+                setTimeout(() => {
+                    isUserScrollingRef.current = true;
+                }, 200);
+            }, 100);
+            hasInitialScrolledRef.current = true;
+        } else if (!isLoading && messages.length === 0 && !hasInitialScrolledRef.current) {
+            // If there are no messages, enable user scrolling immediately
+            isUserScrollingRef.current = true;
+            hasInitialScrolledRef.current = true;
+        }
+    }, [isLoading, messages.length]);
+
+    // Restore scroll position after loading more messages
+    useEffect(() => {
+        if (isLoadingMore) {
+            prevScrollHeightRef.current = containerRef.current?.scrollHeight || 0;
+        } else if (prevScrollHeightRef.current > 0 && containerRef.current) {
+            const newScrollHeight = containerRef.current.scrollHeight;
+            const scrollDiff = newScrollHeight - prevScrollHeightRef.current;
+            containerRef.current.scrollTop = scrollDiff;
+            prevScrollHeightRef.current = 0;
+        }
+    }, [isLoadingMore]);
+
+    // Infinite scroll: detect when user scrolls near the top
+    const handleScroll = useCallback(() => {
+        if (!containerRef.current || !onLoadMore || !hasMore || isLoadingMore) return;
+
+        // Only trigger load more if user has actually scrolled (prevents automatic trigger during initial load)
+        if (!isUserScrollingRef.current) return;
+
+        const { scrollTop } = containerRef.current;
+        // Trigger load more when user scrolls within 100px of the top
+        if (scrollTop < 100) {
+            onLoadMore();
+        }
+    }, [onLoadMore, hasMore, isLoadingMore]);
+
+    // Set up scroll event listener
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container) return;
+
+        container.addEventListener('scroll', handleScroll);
+        return () => container.removeEventListener('scroll', handleScroll);
+    }, [handleScroll]);
+
+    if (isLoading) {
+        return (
+            <div className="flex items-center justify-center h-full">
+                <Spinner size="lg" />
+            </div>
+        );
+    }
+
+    if (messages.length === 0) {
+        return (
+            <div className="flex flex-col items-center justify-center h-full text-center p-8">
+                <div className="text-6xl mb-4">💬</div>
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
+                    No messages yet
+                </h3>
+                <p className="text-sm text-gray-600 dark:text-gray-400">
+                    Start the conversation by sending a message below
+                </p>
+            </div>
+        );
+    }
+
+    return (
+        <div
+            ref={containerRef}
+            className="flex-1 overflow-y-auto p-4 space-y-2"
+            style={{ scrollBehavior: 'smooth' }}
+        >
+            {/* Loading indicator at the top for infinite scroll */}
+            {isLoadingMore && (
+                <div className="flex justify-center py-4">
+                    <Spinner size="sm" />
+                </div>
+            )}
+
+            {/* Load more trigger point */}
+            <div ref={loadMoreTriggerRef} />
+
+            {messages.map((message) => (
+                <MessageItem
+                    key={message.id}
+                    message={message}
+                    currentUser={currentUser}
+                    showAvatar={true}
+                    showTimestamp={true}
+                />
+            ))}
+
+            {isTyping && (
+                <div className="flex gap-2 mb-4">
+                    <div className="flex-shrink-0">
+                        <div className="h-8 w-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white text-sm font-medium">
+                            🎧
+                        </div>
+                    </div>
+                    <div className="flex flex-col items-start">
+                        <div className="rounded-2xl px-4 py-3 bg-gray-100 dark:bg-gray-800">
+                            <div className="flex gap-1">
+                                <span className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" />
+                                <span
+                                    className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"
+                                    style={{ animationDelay: '0.1s' }}
+                                />
+                                <span
+                                    className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"
+                                    style={{ animationDelay: '0.2s' }}
+                                />
+                            </div>
+                        </div>
+                        {typingUser && (
+                            <span className="text-xs text-gray-500 dark:text-gray-400 mt-1 px-2">
+                                {typingUser} is typing...
+                            </span>
+                        )}
+                    </div>
+                </div>
+            )}
+
+            <div ref={messagesEndRef} />
+        </div>
+    );
+}