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

package/package.json

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

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

@@ -137,7 +137,7 @@ body.chat-closed .global-header {
 /* Chat container */
 .chat-container {
     height: 100vh;
-    width: 400px;
+    width: 700px;
     background-color: #fff;
     box-shadow: -8px 0 32px rgb(0 0 0 / 12%), -2px 0 8px rgb(0 0 0 / 8%);
     transform: translateX(100%);

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

@@ -176,7 +176,11 @@
                             </template>
                             <template lwc:else>
                                 <template lwc:if={message.isHTML}>
-                                    <div class="message-text html-content" lwc:dom="manual" data-message-id={message.id}></div>
+                                    <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>

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

@@ -55,11 +55,14 @@ export default class Chat extends LightningElement {
     private messageIdCounter: number = 0;
 
     // API Configuration
-    private static readonly API_URL = "https://276ca7264b79.ngrok-free.app/api/llm/search";
+    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';
+    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";
@@ -93,24 +96,31 @@ export default class Chat extends LightningElement {
     }
 
     private renderHTMLMessages() {
-        console.log('=== renderHTMLMessages called ===');
-        console.log('All messages:', this.messages);
-        console.log('HTML messages:', this.messages.filter(msg => msg.isHTML));
-        
+        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);
-        
+        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);
-            
+            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);
+                console.log("Setting innerHTML for message:", messageId);
+                console.log("Content:", message.text);
                 element.innerHTML = message.text;
             }
         });
@@ -146,11 +156,17 @@ export default class Chat extends LightningElement {
 
     // 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 : '';
+        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) {
+    private addMessage(
+        text: string,
+        sender: "user" | "assistant",
+        isHTML: boolean = false
+    ) {
         const timestamp = new Date();
         const message: ChatMessage = {
             id: `msg-${this.messageIdCounter++}`,
@@ -323,7 +339,7 @@ export default class Chat extends LightningElement {
     private async callChatAPI(userMessage: string): Promise<string> {
         try {
             // Format chat history for API (exclude the current user message)
-            const chatHistory = this.messages.map(msg => ({
+            const chatHistory = this.messages.map((msg) => ({
                 text: msg.text,
                 sender: msg.sender
             }));
@@ -334,71 +350,93 @@ export default class Chat extends LightningElement {
                 chatHistory: chatHistory
             };
 
-            console.log('Sending API request:', requestBody);
+            console.log("Sending API request:", requestBody);
 
             const response = await fetch(Chat.API_URL, {
-                method: 'POST',
+                method: "POST",
                 headers: {
-                    'Content-Type': 'application/json',
-                    'ngrok-skip-browser-warning': 'true', // Skip ngrok browser warning
+                    "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}`);
+                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);
-            
+            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);
-            
+            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.';
+                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);
-            
+            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 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.';
+
+            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.';
+
+            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);
-        
+
+        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>');
-        
+        // Make sure links are absolute (relative to root) by adding leading slash if missing
+        html = html.replace(
+            /\[([^\]]+)\]\(([^)]+)\)/g,
+            (match, linkText, url) => {
+                // If URL doesn't start with http, https, or /, make it absolute
+                let absoluteUrl = url;
+                if (!url.startsWith('http') && !url.startsWith('/')) {
+                    absoluteUrl = '/' + url;
+                }
+                return `<a href="${absoluteUrl}" target="_blank" rel="noopener noreferrer" class="chat-link">${linkText}</a>`;
+            }
+        );
+
         // Handle numbered lists with descriptions (more complex pattern)
         // Split into lines to process each line
-        const lines = html.split('\n');
+        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) {
@@ -406,50 +444,52 @@ export default class Chat extends LightningElement {
                     inList = true;
                 }
                 // Extract the content after the number
-                const content = line.replace(/^\d+\.\s+/, '');
+                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>`);
+                    processedLines.push(
+                        `<br><span class="chat-description">${description}</span></li>`
+                    );
                 } else {
-                    processedLines.push('</li>');
+                    processedLines.push("</li>");
                 }
-            } else if (line.trim() === '' && inList) {
+            } else if (line.trim() === "" && inList) {
                 // Empty line might end the list
                 continue;
             } else {
-                if (inList && line.trim() !== '') {
-                    processedLines.push('</ol>');
+                if (inList && line.trim() !== "") {
+                    processedLines.push("</ol>");
                     inList = false;
                 }
-                if (line.trim() !== '') {
+                if (line.trim() !== "") {
                     processedLines.push(line);
                 }
             }
         }
-        
+
         // Close any open list
         if (inList) {
-            processedLines.push('</ol>');
+            processedLines.push("</ol>");
         }
-        
-        html = processedLines.join('<br>');
-        
+
+        html = processedLines.join("<br>");
+
         // Clean up extra breaks
-        html = html.replace(/<br><br>/g, '<br>');
-        html = html.replace(/^<br>/, '');
-        
+        html = html.replace(/<br><br>/g, "<br>");
+        html = html.replace(/^<br>/, "");
+
         // Convert **bold** to <strong>
-        html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
-        
+        html = html.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+
         // Convert *italic* to <em>
-        html = html.replace(/\*([^*]+)\*/g, '<em>$1</em>');
-        
-        console.log('Processed HTML:', html);
-        
+        html = html.replace(/\*([^*]+)\*/g, "<em>$1</em>");
+
+        console.log("Processed HTML:", html);
+
         return html;
     }
 
@@ -459,15 +499,15 @@ export default class Chat extends LightningElement {
             // 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);
+            console.error("Error getting assistant response:", error);
             this.addMessage(
-                'I apologize, but I encountered an error while processing your request. Please try again.',
+                "I apologize, but I encountered an error while processing your request. Please try again.",
                 "assistant"
             );
         } finally {