@xcelsior/ui-chat 1.0.8 → 2.0.1

package/src/components/MessageItem.tsx

@@ -1,12 +1,14 @@
 import { formatDistanceToNow } from 'date-fns';
-import ReactMarkdown from 'react-markdown';
-import type { IMessage, IUser } from '../types';
+import type { IMessage, IUser, IChatTheme } from '../types';
+import { XcelsiorAvatar } from './BrandIcons';
+import { MarkdownMessage } from './MarkdownMessage';
 
 interface MessageItemProps {
     message: IMessage;
     currentUser: IUser;
     showAvatar?: boolean;
     showTimestamp?: boolean;
+    theme?: IChatTheme;
 }
 
 export function MessageItem({
@@ -14,81 +16,171 @@ export function MessageItem({
     currentUser,
     showAvatar = true,
     showTimestamp = true,
+    theme,
 }: MessageItemProps) {
     const isOwnMessage = message.senderType === currentUser.type;
     const isSystemMessage = message.senderType === 'system';
     const isAIMessage = message.metadata?.isAI === true;
+    const isBotMessage = message.senderType === 'bot';
 
-    // System messages are centered and styled differently
+    const bgColor = theme?.background || '#00001a';
+    const isLightTheme = (() => {
+        if (!bgColor.startsWith('#')) return false;
+        const hex = bgColor.replace('#', '');
+        const r = parseInt(hex.substring(0, 2), 16);
+        const g = parseInt(hex.substring(2, 4), 16);
+        const b = parseInt(hex.substring(4, 6), 16);
+        return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.5;
+    })();
+
+    const primaryColor = theme?.primary || '#337eff';
+    const primaryStrong = theme?.primaryStrong || '#005eff';
+    const textColor = theme?.text || (isLightTheme ? '#1a1a2e' : '#f7f7f8');
+    const textMuted = theme?.textMuted || (isLightTheme ? 'rgba(0,0,0,0.35)' : 'rgba(247,247,248,0.35)');
+
+    // System messages — centered pill with ultra-subtle surface
     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 className="flex justify-center my-3">
+                <div
+                    className="px-4 py-1.5 rounded-full"
+                    style={{
+                        backgroundColor: isLightTheme ? 'rgba(0,0,0,0.04)' : 'rgba(255,255,255,0.03)',
+                        boxShadow: isLightTheme
+                            ? 'inset 0 0 0 1px rgba(0,0,0,0.06)'
+                            : 'inset 0 0 0 0.5px rgba(255,255,255,0.06)',
+                    }}
+                >
+                    <p
+                        style={{
+                            fontSize: '11px',
+                            letterSpacing: '0.019em',
+                            color: textMuted,
+                        }}
+                    >
+                        {message.content}
+                    </p>
                 </div>
             </div>
         );
     }
 
-    // Determine the avatar icon to display
-    const getAvatarIcon = () => {
-        if (isAIMessage) {
-            return '🤖'; // Robot icon for AI messages
-        }
+    // Determine label for non-customer messages
+    const getSenderLabel = () => {
+        if (isBotMessage || isAIMessage) return 'AI Assistant';
         if (message.senderType === 'agent') {
-            return '🎧'; // Headset icon for human agents
+            return (message.metadata?.agentName as string) || 'Support Agent';
         }
-        return '👤'; // User icon for customers
+        return null;
+    };
+
+    const senderLabel = !isOwnMessage ? getSenderLabel() : null;
+
+    // Own message: blue gradient pill (matches website primary CTA)
+    const ownBubbleStyle: React.CSSProperties = {
+        background: `linear-gradient(135deg, ${primaryColor}, ${primaryStrong})`,
+        color: '#ffffff',
+        borderRadius: '18px 18px 4px 18px',
+        boxShadow: `0 2px 12px -3px ${primaryColor}40`,
     };
 
+    // Other message: surface with subtle inset border (adapts to theme)
+    const otherBubbleStyle: React.CSSProperties = isLightTheme
+        ? {
+              backgroundColor: 'rgba(0,0,0,0.04)',
+              color: textColor,
+              borderRadius: '18px 18px 18px 4px',
+              boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.06)',
+          }
+        : {
+              backgroundColor: 'rgba(255,255,255,0.04)',
+              color: textColor,
+              borderRadius: '18px 18px 18px 4px',
+              boxShadow:
+                  'inset 0 0 0 0.5px rgba(255,255,255,0.06), inset 0 1px 0 0 rgba(255,255,255,0.08)',
+          };
+
     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
+            className={`flex gap-2.5 mb-3 ${isOwnMessage ? 'flex-row-reverse' : 'flex-row'}`}
+        >
+            {/* Avatar */}
+            {showAvatar && !isOwnMessage && (
+                <div className="flex-shrink-0 mt-auto mb-5">
+                    {isBotMessage || isAIMessage ? (
+                        <XcelsiorAvatar size={28} />
+                    ) : (
+                        <div
+                            className="h-7 w-7 rounded-full flex items-center justify-center"
+                            style={{
+                                background: isLightTheme
+                                    ? `linear-gradient(135deg, ${primaryColor}30, rgba(0,0,0,0.04))`
+                                    : `linear-gradient(135deg, ${primaryColor}60, rgba(255,255,255,0.06))`,
+                                boxShadow: isLightTheme
+                                    ? 'inset 0 0 0 1px rgba(0,0,0,0.08)'
+                                    : 'inset 0 0 0 0.5px rgba(255,255,255,0.1)',
+                            }}
+                        >
+                            <svg
+                                width="14"
+                                height="14"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke={isLightTheme ? primaryColor : 'white'}
+                                strokeWidth="2"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                aria-hidden="true"
+                            >
+                                <title>Agent</title>
+                                <path d="M3 18v-6a9 9 0 0 1 18 0v6" />
+                                <path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z" />
+                            </svg>
+                        </div>
+                    )}
                 </div>
             )}
 
+            {/* Spacer for own messages to maintain alignment */}
+            {showAvatar && isOwnMessage && <div className="w-7 flex-shrink-0" />}
+
             <div
-                className={`flex flex-col max-w-[70%] ${!isOwnMessage ? 'items-end' : 'items-start'}`}
+                className={`flex flex-col max-w-[75%] ${isOwnMessage ? 'items-end' : 'items-start'}`}
             >
+                {/* Sender label */}
+                {senderLabel && (
+                    <span
+                        className="mb-1 px-1 font-medium"
+                        style={{
+                            color: isLightTheme ? 'rgba(0,0,0,0.45)' : 'rgba(247,247,248,0.4)',
+                            fontSize: '11px',
+                            letterSpacing: '0.019em',
+                        }}
+                    >
+                        {senderLabel}
+                    </span>
+                )}
+
+                {/* Message bubble */}
                 <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'
-                    }`}
+                    className="px-4 py-2.5"
+                    style={{
+                        ...( isOwnMessage ? ownBubbleStyle : otherBubbleStyle ),
+                        fontSize: '14px',
+                        lineHeight: '1.5',
+                        letterSpacing: '0.006em',
+                    }}
                 >
                     {message.messageType === 'text' && (
-                        <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>
+                        isOwnMessage ? (
+                            // User messages: plain text — no markdown parsing
+                            <span style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
+                                {message.content}
+                            </span>
+                        ) : (
+                            // Bot / agent messages: full markdown rendering
+                            <MarkdownMessage content={message.content} theme={theme} />
+                        )
                     )}
                     {message.messageType === 'image' && (
                         <div>
@@ -102,12 +194,31 @@ export function MessageItem({
                     )}
                     {message.messageType === 'file' && (
                         <div className="flex items-center gap-2">
-                            <span className="text-2xl">📎</span>
+                            <svg
+                                width="18"
+                                height="18"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                strokeWidth="1.75"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                aria-hidden="true"
+                            >
+                                <title>File</title>
+                                <path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48" />
+                            </svg>
                             <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`}
+                                style={{
+                                    color: isOwnMessage
+                                        ? 'rgba(255,255,255,0.85)'
+                                        : primaryColor,
+                                    textDecoration: 'underline',
+                                    textUnderlineOffset: '2px',
+                                }}
                             >
                                 {(message.metadata?.fileName as any) || 'Download file'}
                             </a>
@@ -115,21 +226,73 @@ export function MessageItem({
                     )}
                 </div>
 
+                {/* Timestamp + status */}
                 {showTimestamp && (
                     <div
-                        className={`flex items-center gap-2 mt-1 px-2 ${isOwnMessage ? 'flex-row-reverse' : 'flex-row'}`}
+                        className={`flex items-center gap-1.5 mt-1 px-1 ${isOwnMessage ? 'flex-row-reverse' : 'flex-row'}`}
                     >
-                        <span className="text-xs text-gray-500 dark:text-gray-400">
+                        <span
+                            style={{
+                                fontSize: '11px',
+                                letterSpacing: '0.019em',
+                                color: textMuted,
+                            }}
+                        >
                             {formatDistanceToNow(new Date(message.createdAt), {
                                 addSuffix: true,
                             })}
                         </span>
                         {isOwnMessage && message.status && (
-                            <span className="text-xs">
-                                {message.status === 'sent' && '✓'}
-                                {message.status === 'delivered' && '✓✓'}
+                            <span style={{ color: textMuted }}>
+                                {message.status === 'sent' && (
+                                    <svg
+                                        width="14"
+                                        height="14"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        strokeWidth="2.5"
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        aria-hidden="true"
+                                    >
+                                        <title>Sent</title>
+                                        <polyline points="20 6 9 17 4 12" />
+                                    </svg>
+                                )}
+                                {message.status === 'delivered' && (
+                                    <svg
+                                        width="14"
+                                        height="14"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        strokeWidth="2.5"
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        aria-hidden="true"
+                                    >
+                                        <title>Delivered</title>
+                                        <polyline points="18 6 7 17 2 12" />
+                                        <polyline points="22 6 11 17" />
+                                    </svg>
+                                )}
                                 {message.status === 'read' && (
-                                    <span className="text-blue-600">✓✓</span>
+                                    <svg
+                                        width="14"
+                                        height="14"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke={primaryColor}
+                                        strokeWidth="2.5"
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        aria-hidden="true"
+                                    >
+                                        <title>Read</title>
+                                        <polyline points="18 6 7 17 2 12" />
+                                        <polyline points="22 6 11 17" />
+                                    </svg>
                                 )}
                             </span>
                         )}

package/src/components/MessageList.tsx

@@ -1,7 +1,12 @@
-import { useEffect, useRef, useCallback } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
+
 import { Spinner } from '@xcelsior/design-system';
+
+import { XcelsiorAvatar, XcelsiorSymbol } from './BrandIcons';
 import { MessageItem } from './MessageItem';
-import type { IMessage, IUser } from '../types';
+import { ThinkingIndicator } from './ThinkingIndicator';
+
+import type { IMessage, IUser, IChatTheme } from '../types';
 
 interface MessageListProps {
     messages: IMessage[];
@@ -13,6 +18,11 @@ interface MessageListProps {
     onLoadMore?: () => void;
     hasMore?: boolean;
     isLoadingMore?: boolean;
+    theme?: IChatTheme;
+    /** Called when a quick-start action button is clicked — sends the text as a message */
+    onQuickAction?: (text: string) => void;
+    /** True when user sent a message and bot response hasn't arrived yet */
+    isBotThinking?: boolean;
 }
 
 export function MessageList({
@@ -25,6 +35,9 @@ export function MessageList({
     onLoadMore,
     hasMore = false,
     isLoadingMore = false,
+    theme,
+    onQuickAction,
+    isBotThinking = false,
 }: MessageListProps) {
     const messagesEndRef = useRef<HTMLDivElement>(null);
     const containerRef = useRef<HTMLDivElement>(null);
@@ -34,11 +47,23 @@ export function MessageList({
     const hasInitialScrolledRef = useRef(false);
     const isUserScrollingRef = useRef(false);
 
+    const bgColor = theme?.background || '#00001a';
+    const isLightTheme = (() => {
+        if (!bgColor.startsWith('#')) return false;
+        const hex = bgColor.replace('#', '');
+        const r = parseInt(hex.substring(0, 2), 16);
+        const g = parseInt(hex.substring(2, 4), 16);
+        const b = parseInt(hex.substring(4, 6), 16);
+        return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.5;
+    })();
+
+    const primaryColor = theme?.primary || '#337eff';
+    const textColor = theme?.text || (isLightTheme ? '#1a1a2e' : '#f7f7f8');
+    const textMuted = theme?.textMuted || (isLightTheme ? 'rgba(0,0,0,0.4)' : 'rgba(247,247,248,0.45)');
+
     // 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' });
             }
@@ -54,17 +79,14 @@ export function MessageList({
             !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;
         }
@@ -85,12 +107,9 @@ export function MessageList({
     // 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();
         }
@@ -113,16 +132,86 @@ export function MessageList({
         );
     }
 
+    // Empty state — premium, minimal, matching Xcelsior website feel
     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
+            <div className="flex flex-col items-center justify-center h-full text-center" style={{ padding: '40px 32px' }}>
+                <h3
+                    className="font-semibold mb-2"
+                    style={{
+                        color: textColor,
+                        fontSize: '17px',
+                        letterSpacing: '-0.01em',
+                    }}
+                >
+                    How can we help?
                 </h3>
-                <p className="text-sm text-gray-600 dark:text-gray-400">
-                    Start the conversation by sending a message below
+                <p
+                    className="max-w-[240px]"
+                    style={{
+                        color: textMuted,
+                        fontSize: '13px',
+                        lineHeight: '1.5',
+                        letterSpacing: '0.015em',
+                        marginBottom: 20,
+                    }}
+                >
+                    Ask us anything. We are here to help you get the most out of Xcelsior.
                 </p>
+
+                {/* Quick-start action buttons */}
+                <div className="flex flex-wrap justify-center gap-2">
+                    {[
+                        { label: 'Our services', message: 'What services does Xcelsior offer?' },
+                        { label: 'Get a quote', message: 'I would like to get a quote for a project' },
+                        { label: 'Support', message: 'I need help with something' },
+                    ].map((action) => (
+                        <button
+                            key={action.label}
+                            type="button"
+                            onClick={() => onQuickAction?.(action.message)}
+                            style={{
+                                padding: '6px 14px',
+                                borderRadius: '999px',
+                                cursor: 'pointer',
+                                transition: 'all 150ms ease',
+                                backgroundColor: isLightTheme
+                                    ? 'rgba(0,0,0,0.04)'
+                                    : 'rgba(255,255,255,0.04)',
+                                border: isLightTheme
+                                    ? '1px solid rgba(0,0,0,0.1)'
+                                    : '1px solid rgba(255,255,255,0.1)',
+                                color: isLightTheme
+                                    ? 'rgba(0,0,0,0.6)'
+                                    : 'rgba(247,247,248,0.6)',
+                                fontSize: '12px',
+                                letterSpacing: '0.015em',
+                            }}
+                            onMouseEnter={(e) => {
+                                e.currentTarget.style.backgroundColor = isLightTheme
+                                    ? 'rgba(0,0,0,0.08)'
+                                    : 'rgba(255,255,255,0.08)';
+                                e.currentTarget.style.color = isLightTheme
+                                    ? 'rgba(0,0,0,0.8)'
+                                    : 'rgba(247,247,248,0.8)';
+                                e.currentTarget.style.borderColor = primaryColor;
+                            }}
+                            onMouseLeave={(e) => {
+                                e.currentTarget.style.backgroundColor = isLightTheme
+                                    ? 'rgba(0,0,0,0.04)'
+                                    : 'rgba(255,255,255,0.04)';
+                                e.currentTarget.style.color = isLightTheme
+                                    ? 'rgba(0,0,0,0.6)'
+                                    : 'rgba(247,247,248,0.6)';
+                                e.currentTarget.style.borderColor = isLightTheme
+                                    ? 'rgba(0,0,0,0.1)'
+                                    : 'rgba(255,255,255,0.1)';
+                            }}
+                        >
+                            {action.label}
+                        </button>
+                    ))}
+                </div>
             </div>
         );
     }
@@ -130,12 +219,22 @@ export function MessageList({
     return (
         <div
             ref={containerRef}
-            className="flex-1 overflow-y-auto p-4 space-y-2"
+            className="flex-1 overflow-y-auto px-4 py-3"
             style={{ scrollBehavior: 'smooth' }}
         >
+            <style>{`
+                @keyframes thinkingPulse {
+                    0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
+                    30% { opacity: 1; transform: scale(1); }
+                }
+                @keyframes cursorBlink {
+                    0%, 100% { opacity: 1; }
+                    50% { opacity: 0; }
+                }
+            `}</style>
             {/* Loading indicator at the top for infinite scroll */}
             {isLoadingMore && (
-                <div className="flex justify-center py-4">
+                <div className="flex justify-center py-3">
                     <Spinner size="sm" />
                 </div>
             )}
@@ -150,32 +249,54 @@ export function MessageList({
                     currentUser={currentUser}
                     showAvatar={true}
                     showTimestamp={true}
+                    theme={theme}
                 />
             ))}
 
+            {/* Typing indicator — matching bot message bubble style */}
             {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 className="flex gap-2.5 mb-3">
+                    <div className="flex-shrink-0 mt-auto mb-5">
+                        <XcelsiorAvatar size={28} />
                     </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
+                            className="px-4 py-3"
+                            style={{
+                                backgroundColor: isLightTheme
+                                    ? 'rgba(0,0,0,0.04)'
+                                    : 'rgba(255,255,255,0.04)',
+                                borderRadius: '18px 18px 18px 4px',
+                                boxShadow: isLightTheme
+                                    ? 'inset 0 0 0 1px rgba(0,0,0,0.06)'
+                                    : 'inset 0 0 0 0.5px rgba(255,255,255,0.06), inset 0 1px 0 0 rgba(255,255,255,0.08)',
+                            }}
+                        >
+                            <div className="flex gap-1.5 items-center" style={{ height: 16 }}>
+                                {[0, 1, 2].map((i) => (
+                                    <span
+                                        key={i}
+                                        className="rounded-full animate-bounce"
+                                        style={{
+                                            width: 5,
+                                            height: 5,
+                                            backgroundColor: `${primaryColor}80`,
+                                            animationDelay: `${i * 0.15}s`,
+                                            animationDuration: '0.8s',
+                                        }}
+                                    />
+                                ))}
                             </div>
                         </div>
                         {typingUser && (
-                            <span className="text-xs text-gray-500 dark:text-gray-400 mt-1 px-2">
+                            <span
+                                className="mt-1 px-1"
+                                style={{
+                                    color: textMuted,
+                                    fontSize: '11px',
+                                    letterSpacing: '0.019em',
+                                }}
+                            >
                                 {typingUser} is typing...
                             </span>
                         )}
@@ -183,6 +304,14 @@ export function MessageList({
                 </div>
             )}
 
+            {/* Bot thinking indicator — Claude-like typewriter with rotating phrases */}
+            {isBotThinking && !isTyping && (
+                <ThinkingIndicator
+                    theme={theme}
+                    lastUserMessage={messages.filter((m) => m.senderType === 'customer').pop()?.content}
+                />
+            )}
+
             <div ref={messagesEndRef} />
         </div>
     );