@xcelsior/ui-chat 1.0.7 → 2.0.0

package/src/components/MarkdownMessage.tsx

@@ -0,0 +1,202 @@
+import type { CSSProperties } from 'react';
+import ReactMarkdown from 'react-markdown';
+import type { Components } from 'react-markdown';
+import type { IChatTheme } from '../types';
+import { getMarkdownStyles } from '../utils/markdown-styles';
+
+interface MarkdownMessageProps {
+    content: string;
+    theme?: IChatTheme;
+}
+
+function computeIsLightTheme(theme?: IChatTheme): boolean {
+    const bgColor = theme?.background || '#00001a';
+    if (!bgColor.startsWith('#')) return false;
+    const hex = bgColor.replace('#', '');
+    if (hex.length < 6) return false;
+    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;
+}
+
+export function MarkdownMessage({ content, theme }: MarkdownMessageProps) {
+    const isLightTheme = computeIsLightTheme(theme);
+    const styles = getMarkdownStyles(theme, isLightTheme);
+
+    // Last paragraph in a message should have no bottom margin to avoid
+    // extra space at the bottom of the bubble. We track last child via
+    // a wrapper + CSS last-child, but since we use inline styles we
+    // strip the margin in the paragraph renderer if the node is the last
+    // element. react-markdown does not expose "is last sibling" easily,
+    // so we use a simple wrapper approach: strip bottom margin on the
+    // outermost container's last child by keeping the container style tight
+    // and letting natural flow handle it.
+
+    const wrapperStyle: CSSProperties = {
+        // Collapse bottom margin of the last child to avoid extra padding
+        // inside the bubble.
+        display: 'block',
+    };
+
+    return (
+        <div style={wrapperStyle}>
+            <ReactMarkdown
+                components={{
+                    // Paragraphs
+                    p: ({ children }) => (
+                        <p style={styles.paragraph}>{children}</p>
+                    ),
+
+                    // Bold
+                    strong: ({ children }) => (
+                        <strong style={styles.strong}>{children}</strong>
+                    ),
+
+                    // Italic
+                    em: ({ children }) => (
+                        <em style={styles.emphasis}>{children}</em>
+                    ),
+
+                    // Links — open in new tab
+                    a: ({ href, children }) => (
+                        <a
+                            href={href}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            style={styles.link}
+                        >
+                            {children}
+                        </a>
+                    ),
+
+                    // Unordered list
+                    ul: ({ children }) => (
+                        <ul style={{ ...styles.list, listStyleType: 'disc' }}>
+                            {children}
+                        </ul>
+                    ),
+
+                    // Ordered list
+                    ol: ({ children }) => (
+                        <ol
+                            style={{ ...styles.list, listStyleType: 'decimal' }}
+                        >
+                            {children}
+                        </ol>
+                    ),
+
+                    // List item
+                    li: ({ children }) => (
+                        <li style={styles.listItem}>{children}</li>
+                    ),
+
+                    // Inline code vs code block — react-markdown wraps fenced
+                    // code blocks as <pre><code className="language-*">. The
+                    // cleanest heuristic: if the className starts with
+                    // "language-" it is a fenced block; otherwise it's inline.
+                    code: (({ children, className }) => {
+                        const isBlock = Boolean(
+                            className?.startsWith('language-'),
+                        );
+                        if (isBlock) {
+                            return (
+                                <code
+                                    className={className}
+                                    style={styles.codeBlock}
+                                >
+                                    {children}
+                                </code>
+                            );
+                        }
+                        return <code style={styles.code}>{children}</code>;
+                    }) as Components['code'],
+
+                    // Pre wrapper for code blocks
+                    pre: ({ children }) => (
+                        <pre
+                            style={{
+                                margin: '8px 0',
+                                padding: 0,
+                                backgroundColor: 'transparent',
+                                border: 'none',
+                                overflow: 'visible',
+                            }}
+                        >
+                            {children}
+                        </pre>
+                    ),
+
+                    // Headings — h1 through h6 with progressive size reduction
+                    h1: ({ children }) => (
+                        <h1
+                            style={{
+                                ...styles.heading,
+                                fontSize: '1.15em',
+                            }}
+                        >
+                            {children}
+                        </h1>
+                    ),
+                    h2: ({ children }) => (
+                        <h2
+                            style={{
+                                ...styles.heading,
+                                fontSize: '1.1em',
+                            }}
+                        >
+                            {children}
+                        </h2>
+                    ),
+                    h3: ({ children }) => (
+                        <h3
+                            style={{
+                                ...styles.heading,
+                                fontSize: '1.05em',
+                            }}
+                        >
+                            {children}
+                        </h3>
+                    ),
+                    h4: ({ children }) => (
+                        <h4 style={{ ...styles.heading, fontSize: '1em' }}>
+                            {children}
+                        </h4>
+                    ),
+                    h5: ({ children }) => (
+                        <h5
+                            style={{
+                                ...styles.heading,
+                                fontSize: '0.95em',
+                            }}
+                        >
+                            {children}
+                        </h5>
+                    ),
+                    h6: ({ children }) => (
+                        <h6
+                            style={{
+                                ...styles.heading,
+                                fontSize: '0.9em',
+                            }}
+                        >
+                            {children}
+                        </h6>
+                    ),
+
+                    // Blockquote
+                    blockquote: ({ children }) => (
+                        <blockquote style={styles.blockquote}>
+                            {children}
+                        </blockquote>
+                    ),
+
+                    // Horizontal rule
+                    hr: () => <hr style={styles.hr} />,
+                }}
+            >
+                {content}
+            </ReactMarkdown>
+        </div>
+    );
+}

package/src/components/MessageItem.stories.tsx

@@ -14,7 +14,6 @@ const meta: Meta<typeof MessageItem> = {
 export default meta;
 type Story = StoryObj<typeof MessageItem>;
 
-// Mock current user
 const currentUser: IUser = {
     name: 'John Doe',
     email: 'john@example.com',
@@ -22,7 +21,6 @@ const currentUser: IUser = {
     status: 'online',
 };
 
-// Base message template
 const baseMessage: IMessage = {
     id: '1',
     conversationId: 'conv-1',
@@ -34,9 +32,7 @@ const baseMessage: IMessage = {
     status: 'sent',
 };
 
-/**
- * Customer message (own message)
- */
+/** Customer message (own message) */
 export const CustomerMessage: Story = {
     args: {
         message: {
@@ -50,17 +46,14 @@ export const CustomerMessage: Story = {
     },
 };
 
-/**
- * Human agent message
- */
+/** 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?",
+            content: "Hi! I'd be happy to help you with your account. What issue are you experiencing?",
         },
         currentUser,
         showAvatar: true,
@@ -68,20 +61,16 @@ export const AgentMessage: Story = {
     },
 };
 
-/**
- * AI-generated message with robot icon
- */
-export const AIMessage: Story = {
+/** Bot message (AI assistant) — new senderType */
+export const BotMessage: 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,
-            },
+            senderType: 'bot',
+            content: "Hello! I'm the Xcelsior assistant. Based on our knowledge base, here are some common solutions:\n\n1. Reset your password\n2. Verify your email\n3. Contact support\n\nWhich would you like help with?",
+            confidence: 0.85,
+            metadata: { isAI: true, kbUsed: true },
         },
         currentUser,
         showAvatar: true,
@@ -89,15 +78,66 @@ export const AIMessage: Story = {
     },
 };
 
-/**
- * AI message with markdown formatting
- */
-export const AIMessageWithMarkdown: Story = {
+/** Bot message with low confidence */
+export const BotMessageLowConfidence: Story = {
     args: {
         message: {
             ...baseMessage,
             senderId: 'ai-assistant',
-            senderType: 'agent',
+            senderType: 'bot',
+            content: "I'm not entirely sure about this, but let me check with my team. In the meantime, you might want to visit our help center.",
+            confidence: 0.3,
+            metadata: { isAI: true, kbUsed: false },
+        },
+        currentUser,
+        showAvatar: true,
+        showTimestamp: true,
+    },
+};
+
+/** Bot message with feedback (rated good) */
+export const BotMessageFeedbackGood: Story = {
+    args: {
+        message: {
+            ...baseMessage,
+            senderId: 'ai-assistant',
+            senderType: 'bot',
+            content: "You can reset your password by going to Settings > Security > Change Password.",
+            feedback: 'good',
+            confidence: 0.9,
+            metadata: { isAI: true, kbUsed: true },
+        },
+        currentUser,
+        showAvatar: true,
+        showTimestamp: true,
+    },
+};
+
+/** Bot message with feedback (rated wrong) */
+export const BotMessageFeedbackWrong: Story = {
+    args: {
+        message: {
+            ...baseMessage,
+            senderId: 'ai-assistant',
+            senderType: 'bot',
+            content: "Your subscription expires on March 15th.",
+            feedback: 'wrong',
+            confidence: 0.6,
+            metadata: { isAI: true, kbUsed: true },
+        },
+        currentUser,
+        showAvatar: true,
+        showTimestamp: true,
+    },
+};
+
+/** AI message with markdown formatting */
+export const BotMessageWithMarkdown: Story = {
+    args: {
+        message: {
+            ...baseMessage,
+            senderId: 'ai-assistant',
+            senderType: 'bot',
             content: `## Getting Started
 
 Here's how you can reset your password:
@@ -109,10 +149,8 @@ Here's how you can reset your password:
 
 *Note: The link expires in 24 hours.*
 
-For more help, visit our [support page](https://example.com/support).`,
-            metadata: {
-                isAI: true,
-            },
+For more help, visit our [support page](https://xcelsior.co/support).`,
+            metadata: { isAI: true, kbUsed: true },
         },
         currentUser,
         showAvatar: true,
@@ -120,9 +158,7 @@ For more help, visit our [support page](https://example.com/support).`,
     },
 };
 
-/**
- * System message
- */
+/** System message — generic */
 export const SystemMessage: Story = {
     args: {
         message: {
@@ -130,6 +166,23 @@ export const SystemMessage: Story = {
             senderId: 'system',
             senderType: 'system',
             content: 'Agent John joined the conversation',
+            messageType: 'system',
+        },
+        currentUser,
+        showAvatar: true,
+        showTimestamp: true,
+    },
+};
+
+/** System message — escalation notice */
+export const EscalationNotice: Story = {
+    args: {
+        message: {
+            ...baseMessage,
+            senderId: 'system',
+            senderType: 'system',
+            content: 'Connecting you with a team member who can help further...',
+            messageType: 'system',
         },
         currentUser,
         showAvatar: true,
@@ -137,9 +190,23 @@ export const SystemMessage: Story = {
     },
 };
 
-/**
- * Message with image
- */
+/** System message — agent took over */
+export const AgentTookOver: Story = {
+    args: {
+        message: {
+            ...baseMessage,
+            senderId: 'system',
+            senderType: 'system',
+            content: 'Sarah from our team is here to help!',
+            messageType: 'system',
+        },
+        currentUser,
+        showAvatar: true,
+        showTimestamp: true,
+    },
+};
+
+/** Image message */
 export const ImageMessage: Story = {
     args: {
         message: {
@@ -153,18 +220,14 @@ export const ImageMessage: Story = {
     },
 };
 
-/**
- * Message with file attachment
- */
+/** File message */
 export const FileMessage: Story = {
     args: {
         message: {
             ...baseMessage,
             content: 'https://example.com/document.pdf',
             messageType: 'file',
-            metadata: {
-                fileName: 'Technical Documentation.pdf',
-            },
+            metadata: { fileName: 'Technical Documentation.pdf' },
         },
         currentUser,
         showAvatar: true,
@@ -172,19 +235,142 @@ export const FileMessage: Story = {
     },
 };
 
-/**
- * Conversation showing different message types
- */
-export const ConversationExample: Story = {
+/** Bot message with rich markdown — bullet list, bold, pricing options */
+export const BotMarkdownMessage: Story = {
+    args: {
+        message: {
+            id: 'md-1',
+            conversationId: 'conv-1',
+            senderId: 'ai-assistant',
+            senderType: 'bot',
+            content: `Hi there! I'd be happy to help you get a quote for your project.
+
+To provide you with the most accurate quote, I'll need to understand more about what you're looking for. Could you tell me:
+
+- **What type of project** are you considering? (mobile app, website, custom software, etc.)
+- **What's the main purpose** or functionality you need?
+- **Any specific requirements** or features you have in mind?
+
+At Xcelsior, we offer flexible pricing models to fit your needs:
+
+1. Hour-based pricing
+2. Feature-based pricing
+3. Fixed-sum pricing
+
+Once I understand your project better, I can connect you with our team for a detailed quote and consultation.`,
+            messageType: 'text',
+            createdAt: new Date().toISOString(),
+            status: 'sent',
+        },
+        currentUser: {
+            name: 'Visitor',
+            email: 'visitor@example.com',
+            type: 'customer',
+            status: 'online',
+        },
+        showAvatar: true,
+        showTimestamp: true,
+    },
+};
+
+/** Bot message with a fenced code block and inline code */
+export const BotCodeBlock: Story = {
+    args: {
+        message: {
+            id: 'md-2',
+            conversationId: 'conv-1',
+            senderId: 'ai-assistant',
+            senderType: 'bot',
+            content: `Here's a quick example of how to integrate our SDK:
+
+\`\`\`javascript
+import { XcelsiorChat } from '@xcelsior/ui-chat';
+
+const config = {
+  apiKey: 'your-api-key',
+  theme: { primary: '#337eff' }
+};
+
+<XcelsiorChat config={config} />
+\`\`\`
+
+You can also use inline code like \`npm install @xcelsior/ui-chat\` to get started.
+
+For more details, check our **documentation** or reach out to our team!`,
+            messageType: 'text',
+            createdAt: new Date().toISOString(),
+            status: 'sent',
+        },
+        currentUser: {
+            name: 'Visitor',
+            email: 'visitor@example.com',
+            type: 'customer',
+            status: 'online',
+        },
+        showAvatar: true,
+        showTimestamp: true,
+    },
+};
+
+/** Bot message with headings, nested lists, and a blockquote */
+export const BotLongResponse: Story = {
+    args: {
+        message: {
+            id: 'md-3',
+            conversationId: 'conv-1',
+            senderId: 'ai-assistant',
+            senderType: 'bot',
+            content: `Great question! Here's a comprehensive overview of our services:
+
+## Web Development
+We build modern, responsive web applications using cutting-edge technologies like **Next.js**, **React**, and **TypeScript**. Our team focuses on performance, accessibility, and SEO.
+
+## Mobile Development
+We develop cross-platform mobile apps using **React Native** and **Flutter**, ensuring your app runs smoothly on both iOS and Android.
+
+## Digital Solutions
+- Custom CMS development
+- E-commerce platforms
+- API integrations
+- Cloud infrastructure (AWS, GCP)
+
+## IT Consulting
+Our experienced consultants help you:
+1. Plan your technology roadmap
+2. Optimize existing systems
+3. Scale your infrastructure
+4. Implement security best practices
+
+> "Xcelsior delivered our project on time and exceeded our expectations." — Client Testimonial
+
+Would you like to know more about any specific service?`,
+            messageType: 'text',
+            createdAt: new Date().toISOString(),
+            status: 'sent',
+        },
+        currentUser: {
+            name: 'Visitor',
+            email: 'visitor@example.com',
+            type: 'customer',
+            status: 'online',
+        },
+        showAvatar: true,
+        showTimestamp: true,
+    },
+};
+
+/** Full conversation flow: customer → bot → escalation → agent */
+export const FullConversationFlow: Story = {
     render: (args) => (
-        <div className="flex flex-col gap-2 max-w-2xl">
+        <div className="flex flex-col gap-2 max-w-2xl p-4 bg-gray-950 rounded-lg">
             <MessageItem
                 {...args}
                 message={{
                     ...baseMessage,
                     id: '1',
                     senderId: currentUser.email,
-                    content: 'Hi, I need help with resetting my password.',
+                    senderType: 'customer',
+                    content: 'Hi, I need help with pricing for a custom web app.',
                 }}
             />
             <MessageItem
@@ -193,10 +379,10 @@ export const ConversationExample: Story = {
                     ...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 },
+                    senderType: 'bot',
+                    content: "Hello! I'd be happy to help with pricing. At Xcelsior, we offer custom quotes based on your project requirements. Could you tell me more about what you're looking for?",
+                    confidence: 0.8,
+                    metadata: { isAI: true, kbUsed: true },
                     createdAt: new Date(Date.now() - 60000).toISOString(),
                 }}
             />
@@ -206,7 +392,8 @@ export const ConversationExample: Story = {
                     ...baseMessage,
                     id: '3',
                     senderId: currentUser.email,
-                    content: 'Yes please, send me the reset link.',
+                    senderType: 'customer',
+                    content: 'I want to talk to a real person about this. Can you connect me with your sales team?',
                     createdAt: new Date(Date.now() - 30000).toISOString(),
                 }}
             />
@@ -215,10 +402,21 @@ export const ConversationExample: Story = {
                 message={{
                     ...baseMessage,
                     id: '4',
-                    senderId: 'agent@example.com',
+                    senderId: 'system',
+                    senderType: 'system',
+                    content: 'Connecting you with a team member who can help further...',
+                    messageType: 'system',
+                    createdAt: new Date(Date.now() - 25000).toISOString(),
+                }}
+            />
+            <MessageItem
+                {...args}
+                message={{
+                    ...baseMessage,
+                    id: '5',
+                    senderId: 'sarah@xcelsior.co',
                     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!",
+                    content: "Hi there! I'm Sarah from our sales team. I'd love to discuss your custom web app project. Can you share a bit about the features you need and your timeline?",
                     createdAt: new Date().toISOString(),
                 }}
             />