@salesforcedevs/docs-components 0.0.36-chat → 0.0.38-chat

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "0.0.36-chat",
+    "version": "0.0.38-chat",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/modules/doc/chat/chat.css

@@ -5,7 +5,9 @@
     right: 0;
     height: 100vh;
     z-index: 100000;
-    font-family: "Salesforce Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+    font-family: "Salesforce Sans", -apple-system, BlinkMacSystemFont,
+        "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",
+        sans-serif;
 }
 
 /* Apply content shift to main page content when chat is open */
@@ -50,6 +52,59 @@ body.chat-closed .global-header {
     padding: 0;
 }
 
+/* Tooltip styling */
+.chat-trigger-button::before {
+    content: attr(data-tooltip);
+    position: absolute;
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    background: linear-gradient(135deg, #0176d3 0%, #005fb2 100%);
+    color: white;
+    padding: 12px 16px;
+    border-radius: 12px;
+    font-size: 14px;
+    font-weight: 500;
+    white-space: nowrap;
+    opacity: 0;
+    visibility: hidden;
+    margin-right: 16px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 8px 24px rgb(1 118 211 / 25%), 0 2px 8px rgb(1 118 211 / 15%);
+    backdrop-filter: blur(10px);
+    z-index: 1002;
+    pointer-events: none;
+    letter-spacing: 0.02em;
+}
+
+/* Tooltip arrow */
+.chat-trigger-button::after {
+    content: "";
+    position: absolute;
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-right: 8px;
+    width: 0;
+    height: 0;
+    border-left: 8px solid #0176d3;
+    border-top: 8px solid transparent;
+    border-bottom: 8px solid transparent;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    z-index: 1002;
+    pointer-events: none;
+}
+
+/* Show tooltip on hover */
+.chat-trigger-button:hover::before,
+.chat-trigger-button:hover::after {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(-50%) translateX(-4px);
+}
+
 .chat-trigger-button:hover .chat-gif {
     transform: scale(1.1);
 }
@@ -65,8 +120,6 @@ body.chat-closed .global-header {
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-
-
 @keyframes pulse {
     0% {
         transform: scale(1);
@@ -123,7 +176,11 @@ body.chat-closed .global-header {
     left: 0;
     right: 0;
     bottom: 0;
-    background: linear-gradient(135deg, rgb(255 255 255 / 5%) 0%, rgb(255 255 255 / 1%) 100%);
+    background: linear-gradient(
+        135deg,
+        rgb(255 255 255 / 5%) 0%,
+        rgb(255 255 255 / 1%) 100%
+    );
     pointer-events: none;
 }
 
@@ -240,7 +297,11 @@ body.chat-closed .global-header {
     content: "";
     position: absolute;
     inset: 0;
-    background: linear-gradient(135deg, rgb(255 255 255 / 20%) 0%, rgb(255 255 255 / 10%) 100%);
+    background: linear-gradient(
+        135deg,
+        rgb(255 255 255 / 20%) 0%,
+        rgb(255 255 255 / 10%) 100%
+    );
     border-radius: 50%;
 }
 
@@ -269,56 +330,61 @@ body.chat-closed .global-header {
 }
 
 @keyframes thinking-avatar-pulse {
-    0%, 100% { 
-        transform: scale(1); 
+    0%,
+    100% {
+        transform: scale(1);
         box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
     }
 
-    50% { 
-        transform: scale(1.08); 
+    50% {
+        transform: scale(1.08);
         box-shadow: 0 4px 16px rgb(0 0 0 / 20%);
     }
 }
 
 @keyframes thinking-breathe {
-    0%, 100% { 
-        transform: scale(1); 
+    0%,
+    100% {
+        transform: scale(1);
     }
 
-    50% { 
-        transform: scale(1.05); 
+    50% {
+        transform: scale(1.05);
     }
 }
 
 @keyframes thinking-smile-animation {
-    0%, 100% { 
-        transform: translateY(0); 
+    0%,
+    100% {
+        transform: translateY(0);
     }
 
-    50% { 
-        transform: translateY(-2px); 
+    50% {
+        transform: translateY(-2px);
     }
 }
 
 @keyframes think-blink {
-    0%, 85%, 100% { 
-        transform: scaleY(1); 
+    0%,
+    85%,
+    100% {
+        transform: scaleY(1);
     }
 
-    90% { 
-        transform: scaleY(0.6); 
+    90% {
+        transform: scaleY(0.6);
     }
 
-    92% { 
-        transform: scaleY(0.2); 
+    92% {
+        transform: scaleY(0.2);
     }
 
-    94% { 
-        transform: scaleY(0.6); 
+    94% {
+        transform: scaleY(0.6);
     }
 
-    96% { 
-        transform: scaleY(1); 
+    96% {
+        transform: scaleY(1);
     }
 }
 
@@ -363,6 +429,68 @@ body.chat-closed .global-header {
     font-weight: 400;
 }
 
+/* HTML content styling for rich messages */
+.message-text .chat-link {
+    color: #0176d3;
+    text-decoration: none;
+    border-bottom: 1px solid transparent;
+    transition: all 0.2s ease;
+}
+
+.message-text .chat-link:hover {
+    color: #005fb2;
+    border-bottom-color: #005fb2;
+}
+
+.message-text .chat-list {
+    margin: 12px 0;
+    padding-left: 20px;
+    counter-reset: none;
+}
+
+.message-text .chat-list li {
+    margin: 12px 0;
+    line-height: 1.6;
+    font-weight: 500;
+}
+
+.message-text .chat-description {
+    font-weight: 400;
+    color: #666;
+    font-size: 14px;
+    line-height: 1.5;
+    margin-top: 4px;
+    display: block;
+}
+
+.message-text strong {
+    font-weight: 600;
+    color: #181818;
+}
+
+.message-text em {
+    font-style: italic;
+    color: #555;
+}
+
+/* Style for line breaks in HTML content */
+.message-text br {
+    margin: 4px 0;
+}
+
+/* Ensure proper spacing for HTML content */
+.message-text p {
+    margin: 8px 0;
+}
+
+.message-text p:first-child {
+    margin-top: 0;
+}
+
+.message-text p:last-child {
+    margin-bottom: 0;
+}
+
 .message-timestamp {
     font-size: 12px;
     color: #706e6b;
@@ -510,40 +638,52 @@ body.chat-closed .global-header {
         bottom: 16px;
         right: 16px;
     }
-    
+
     .chat-gif {
         width: 56px;
         height: 56px;
     }
-    
 
-    
+    /* Adjust tooltip for mobile */
+    .chat-trigger-button::before {
+        font-size: 13px;
+        padding: 10px 14px;
+        margin-right: 12px;
+    }
+
+    .chat-trigger-button::after {
+        margin-right: 6px;
+        border-left-width: 6px;
+        border-top-width: 6px;
+        border-bottom-width: 6px;
+    }
+
     .chat-container {
         width: 100%;
         right: 0;
         transform: translateX(100%);
     }
-    
+
     .chat-container_open {
         transform: translateX(0);
     }
-    
+
     .chat-header {
         padding: 16px 20px;
     }
-    
+
     .chat-title {
         font-size: 18px;
     }
-    
+
     .chat-messages {
         padding: 20px 16px;
     }
-    
+
     .chat-input-area {
         padding: 16px 20px;
     }
-    
+
     .message-content {
         max-width: 85%;
     }
@@ -574,7 +714,20 @@ body.chat-closed .global-header {
         height: 48px;
     }
 
+    /* Smaller tooltip for small screens */
+    .chat-trigger-button::before {
+        font-size: 12px;
+        padding: 8px 12px;
+        margin-right: 10px;
+        border-radius: 8px;
+    }
 
+    .chat-trigger-button::after {
+        margin-right: 4px;
+        border-left-width: 5px;
+        border-top-width: 5px;
+        border-bottom-width: 5px;
+    }
 
     .chat-container {
         width: 100%;
@@ -638,6 +791,12 @@ body.chat-closed .global-header {
     .thinking-eye {
         animation: none !important;
     }
+
+    /* Disable tooltip animations for reduced motion users */
+    .chat-trigger-button::before,
+    .chat-trigger-button::after {
+        transition: none;
+    }
 }
 
 /* High contrast mode support */

package/src/modules/doc/chat/chat.html

@@ -5,6 +5,7 @@
             class="chat-trigger-button"
             onclick={handleOpenClick}
             aria-label="Open chat"
+            data-tooltip="Chat with us!"
         >
             <img
                 class="chat-gif"
@@ -70,7 +71,10 @@
                     data-sender={message.sender}
                 >
                     <!-- AI Avatar for assistant messages only -->
-                    <div class="message-avatar-wrapper" data-sender={message.sender}>
+                    <div
+                        class="message-avatar-wrapper"
+                        data-sender={message.sender}
+                    >
                         <div class="avatar-container">
                             <svg
                                 class="avatar-icon"
@@ -84,25 +88,78 @@
                                     <line x1="230" y1="20" x2="230" y2="60" />
                                 </g>
                                 <circle cx="70" cy="20" r="10" fill="#3A98D8" />
-                                <circle cx="230" cy="20" r="10" fill="#3A98D8" />
+                                <circle
+                                    cx="230"
+                                    cy="20"
+                                    r="10"
+                                    fill="#3A98D8"
+                                />
 
                                 <!-- Robot Body -->
                                 <g class="thinking-body">
-                                    <rect x="40" y="60" width="220" height="240" rx="110" ry="110" fill="#3A98D8" />
+                                    <rect
+                                        x="40"
+                                        y="60"
+                                        width="220"
+                                        height="240"
+                                        rx="110"
+                                        ry="110"
+                                        fill="#3A98D8"
+                                    />
 
                                     <!-- Forehead Dots -->
-                                    <circle cx="150" cy="90" r="6" fill="#9ED4E6" />
-                                    <rect x="135" y="100" width="30" height="10" rx="5" ry="5" fill="#9ED4E6" />
+                                    <circle
+                                        cx="150"
+                                        cy="90"
+                                        r="6"
+                                        fill="#9ED4E6"
+                                    />
+                                    <rect
+                                        x="135"
+                                        y="100"
+                                        width="30"
+                                        height="10"
+                                        rx="5"
+                                        ry="5"
+                                        fill="#9ED4E6"
+                                    />
 
                                     <!-- Face Panel -->
-                                    <rect x="70" y="130" width="160" height="80" rx="40" ry="40" fill="#577C86" />
+                                    <rect
+                                        x="70"
+                                        y="130"
+                                        width="160"
+                                        height="80"
+                                        rx="40"
+                                        ry="40"
+                                        fill="#577C86"
+                                    />
 
                                     <!-- Eyes (Thinking animation) -->
-                                    <circle class="thinking-eye" cx="115" cy="170" r="10" fill="#86D3BD" />
-                                    <circle class="thinking-eye" cx="185" cy="170" r="10" fill="#86D3BD" />
+                                    <circle
+                                        class="thinking-eye"
+                                        cx="115"
+                                        cy="170"
+                                        r="10"
+                                        fill="#86D3BD"
+                                    />
+                                    <circle
+                                        class="thinking-eye"
+                                        cx="185"
+                                        cy="170"
+                                        r="10"
+                                        fill="#86D3BD"
+                                    />
 
                                     <!-- Thinking Smile -->
-                                    <path class="thinking-smile" d="M110 240 Q150 260 190 240" stroke="#2F435A" stroke-width="6" fill="none" stroke-linecap="round" />
+                                    <path
+                                        class="thinking-smile"
+                                        d="M110 240 Q150 260 190 240"
+                                        stroke="#2F435A"
+                                        stroke-width="6"
+                                        fill="none"
+                                        stroke-linecap="round"
+                                    />
                                 </g>
                             </svg>
                         </div>
@@ -118,7 +175,12 @@
                                 </div>
                             </template>
                             <template lwc:else>
-                                <p class="message-text">{message.text}</p>
+                                <template lwc:if={message.isHTML}>
+                                    <div class="message-text html-content" lwc:dom="manual" data-message-id={message.id}></div>
+                                </template>
+                                <template lwc:else>
+                                    <p class="message-text">{message.text}</p>
+                                </template>
                             </template>
                         </div>
                         <template lwc:if={showTimestamp}>

package/src/modules/doc/chat/chat.ts

@@ -9,6 +9,7 @@ interface ChatMessage {
     sender: "user" | "assistant";
     isTyping?: boolean;
     formattedTime?: string;
+    isHTML?: boolean; // Flag to indicate if content should be rendered as HTML
 }
 
 export default class Chat extends LightningElement {
@@ -53,12 +54,19 @@ export default class Chat extends LightningElement {
     private _isOpen: boolean = false;
     private messageIdCounter: number = 0;
 
+    // API Configuration
+    private static readonly API_URL = "https://276ca7264b79.ngrok-free.app/api/llm/search";
+    private static readonly MAX_RESULTS = 5;
+    
+    // Development mode flag - set to true if running in development
+    private static readonly IS_DEVELOPMENT = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
+
     // localStorage keys for persisting messages and open state
     private static readonly STORAGE_KEY = "doc-chat-messages";
     private static readonly OPEN_STATE_KEY = "doc-chat-should-open";
 
     connectedCallback() {
-        console.log('---- Connected callback ------');
+        console.log("---- Connected callback ------");
         // Load existing messages from localStorage
         this.loadMessages();
 
@@ -79,6 +87,35 @@ export default class Chat extends LightningElement {
         document.body.classList.remove("chat-open", "chat-closed");
     }
 
+    renderedCallback() {
+        // Handle HTML content rendering for messages with isHTML flag
+        this.renderHTMLMessages();
+    }
+
+    private renderHTMLMessages() {
+        console.log('=== renderHTMLMessages called ===');
+        console.log('All messages:', this.messages);
+        console.log('HTML messages:', this.messages.filter(msg => msg.isHTML));
+        
+        // Use a simpler selector approach
+        const htmlMessageElements = this.template.querySelectorAll('.html-content[data-message-id]');
+        console.log('Found HTML elements:', htmlMessageElements.length);
+        
+        htmlMessageElements.forEach((element) => {
+            const messageId = element.getAttribute('data-message-id');
+            console.log('Processing element with ID:', messageId);
+            
+            const message = this.messages.find(msg => msg.id === messageId && msg.isHTML);
+            console.log('Found message:', message);
+            
+            if (message) {
+                console.log('Setting innerHTML for message:', messageId);
+                console.log('Content:', message.text);
+                element.innerHTML = message.text;
+            }
+        });
+    }
+
     get chatContainerClass() {
         return cx(
             "chat-container",
@@ -107,14 +144,21 @@ export default class Chat extends LightningElement {
         return messages;
     }
 
-    private addMessage(text: string, sender: "user" | "assistant") {
+    // Helper method to get HTML content for a message
+    getMessageHTML(messageId: string): string {
+        const message = this.messages.find(msg => msg.id === messageId && msg.isHTML);
+        return message ? message.text : '';
+    }
+
+    private addMessage(text: string, sender: "user" | "assistant", isHTML: boolean = false) {
         const timestamp = new Date();
         const message: ChatMessage = {
             id: `msg-${this.messageIdCounter++}`,
             text,
             timestamp,
             sender,
-            formattedTime: this.formatTimestamp(timestamp)
+            formattedTime: this.formatTimestamp(timestamp),
+            isHTML
         };
         this.messages = [...this.messages, message];
         this.saveMessages();
@@ -150,7 +194,8 @@ export default class Chat extends LightningElement {
                 text: msg.text,
                 timestamp: msg.timestamp.toISOString(),
                 sender: msg.sender,
-                formattedTime: msg.formattedTime
+                formattedTime: msg.formattedTime,
+                isHTML: msg.isHTML || false
             }));
             localStorage.setItem(
                 Chat.STORAGE_KEY,
@@ -171,7 +216,8 @@ export default class Chat extends LightningElement {
                     text: msg.text,
                     timestamp: new Date(msg.timestamp),
                     sender: msg.sender,
-                    formattedTime: msg.formattedTime
+                    formattedTime: msg.formattedTime,
+                    isHTML: msg.isHTML || false
                 }));
 
                 // Update message counter to avoid ID conflicts
@@ -264,40 +310,169 @@ export default class Chat extends LightningElement {
             input.value = "";
         }
 
-        // Simulate assistant typing
+        // Show typing indicator
         this.isAssistantTyping = true;
 
-        // Simulate assistant response after a delay
+        // Get real assistant response from API
+        // Add a small delay to show the typing indicator
         setTimeout(() => {
-            this.isAssistantTyping = false;
-            this.simulateAssistantResponse(userMessage);
-        }, 1000 + Math.random() * 2000);
-    }
-
-    private simulateAssistantResponse(userMessage: string) {
-        // Simple response simulation - in a real implementation, this would call an API
-        let response = `I received your message: "${userMessage}". `;
-
-        if (
-            userMessage.toLowerCase().includes("hello") ||
-            userMessage.toLowerCase().includes("hi")
-        ) {
-            response = "Hello! Nice to meet you. How can I assist you today?";
-        } else if (userMessage.toLowerCase().includes("help")) {
-            response =
-                "I'm here to help! Feel free to ask me any questions about the documentation or topics you're interested in.";
-        } else if (
-            userMessage.toLowerCase().includes("documentation") ||
-            userMessage.toLowerCase().includes("docs")
-        ) {
-            response =
-                "I can help you navigate the documentation. What specific topic are you looking for?";
-        } else {
-            response =
-                "That's an interesting question. Let me help you with that. Could you provide more details about what you're looking for?";
+            this.getAssistantResponse(userMessage);
+        }, 500);
+    }
+
+    private async callChatAPI(userMessage: string): Promise<string> {
+        try {
+            // Format chat history for API (exclude the current user message)
+            const chatHistory = this.messages.map(msg => ({
+                text: msg.text,
+                sender: msg.sender
+            }));
+
+            const requestBody = {
+                query: userMessage,
+                maxResults: Chat.MAX_RESULTS,
+                chatHistory: chatHistory
+            };
+
+            console.log('Sending API request:', requestBody);
+
+            const response = await fetch(Chat.API_URL, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'ngrok-skip-browser-warning': 'true', // Skip ngrok browser warning
+                },
+                body: JSON.stringify(requestBody)
+            });
+
+            if (!response.ok) {
+                const errorText = await response.text();
+                console.error('API Error Response:', errorText);
+                throw new Error(`API request failed with status: ${response.status}`);
+            }
+
+            const data = await response.json();
+            console.log('API Response:', data);
+            
+            // Handle the new API response format with "data" field
+            const responseText = data.data || data.answer || data.text || data.response || data.result || data.message;
+            console.log('Response Text:', responseText);
+            
+            if (!responseText) {
+                console.warn('No response text found in API response:', data);
+                return 'I received your message but couldn\'t generate a proper response.';
+            }
+            
+            return responseText;
+            
+        } catch (error) {
+            console.error('Chat API error:', error);
+            
+            // Provide more specific error messages for CORS issues
+            if (error instanceof TypeError && error.message.includes('fetch')) {
+                return 'I\'m having trouble connecting to the service. This might be a CORS configuration issue. Please check your internet connection and try again.';
+            }
+            
+            if (error instanceof Error && (error.message.includes('CORS') || error.message.includes('cross-origin'))) {
+                return 'I\'m having trouble connecting due to browser security restrictions. Please ask your administrator to configure CORS headers on the backend API.';
+            }
+            
+            return 'I apologize, but I\'m having trouble connecting to the service right now. Please try again later.';
+        }
+    }
+
+    private parseMarkdownToHTML(text: string): string {
+        // Convert markdown-like text to HTML
+        let html = text;
+        
+        console.log('Original text:', text);
+        
+        // First, convert markdown links [text](url) to HTML links
+        html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer" class="chat-link">$1</a>');
+        
+        // Handle numbered lists with descriptions (more complex pattern)
+        // Split into lines to process each line
+        const lines = html.split('\n');
+        const processedLines = [];
+        let inList = false;
+        
+        for (let i = 0; i < lines.length; i++) {
+            const line = lines[i];
+            
+            // Check if this is a numbered list item (starts with number and dot)
+            if (/^\d+\.\s+/.test(line)) {
+                if (!inList) {
+                    processedLines.push('<ol class="chat-list">');
+                    inList = true;
+                }
+                // Extract the content after the number
+                const content = line.replace(/^\d+\.\s+/, '');
+                processedLines.push(`<li>${content}`);
+                
+                // Check if next line is indented (description)
+                if (i + 1 < lines.length && /^\s{2,}/.test(lines[i + 1])) {
+                    i++; // Skip to next line
+                    const description = lines[i].trim();
+                    processedLines.push(`<br><span class="chat-description">${description}</span></li>`);
+                } else {
+                    processedLines.push('</li>');
+                }
+            } else if (line.trim() === '' && inList) {
+                // Empty line might end the list
+                continue;
+            } else {
+                if (inList && line.trim() !== '') {
+                    processedLines.push('</ol>');
+                    inList = false;
+                }
+                if (line.trim() !== '') {
+                    processedLines.push(line);
+                }
+            }
+        }
+        
+        // Close any open list
+        if (inList) {
+            processedLines.push('</ol>');
         }
+        
+        html = processedLines.join('<br>');
+        
+        // Clean up extra breaks
+        html = html.replace(/<br><br>/g, '<br>');
+        html = html.replace(/^<br>/, '');
+        
+        // Convert **bold** to <strong>
+        html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+        
+        // Convert *italic* to <em>
+        html = html.replace(/\*([^*]+)\*/g, '<em>$1</em>');
+        
+        console.log('Processed HTML:', html);
+        
+        return html;
+    }
 
-        this.addMessage(response, "assistant");
+    private async getAssistantResponse(userMessage: string) {
+        try {
+            const response = await this.callChatAPI(userMessage);
+            // Convert markdown to HTML for rich content display
+            const htmlContent = this.parseMarkdownToHTML(response);
+            this.addMessage(htmlContent, "assistant", true); // true indicates HTML content
+            
+            // Force a re-render after adding the message
+            setTimeout(() => {
+                this.renderHTMLMessages();
+            }, 100);
+        } catch (error) {
+            console.error('Error getting assistant response:', error);
+            this.addMessage(
+                'I apologize, but I encountered an error while processing your request. Please try again.',
+                "assistant"
+            );
+        } finally {
+            this.isAssistantTyping = false;
+        }
     }
 
     formatTimestamp(timestamp: Date) {