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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "0.0.37-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%);
@@ -429,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;

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

@@ -175,7 +175,16 @@
                                 </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 {
@@ -54,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";
@@ -86,6 +90,42 @@ 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",
@@ -114,14 +154,27 @@ 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();
@@ -157,7 +210,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,
@@ -178,7 +232,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
@@ -284,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
             }));
@@ -295,62 +350,164 @@ 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',
-                mode: 'cors', // Explicitly set CORS mode
+                method: "POST",
                 headers: {
-                    'Content-Type': 'application/json',
-                    'ngrok-skip-browser-warning': 'true', // Skip ngrok browser warning
-                    ...(Chat.IS_DEVELOPMENT && { 'Access-Control-Allow-Origin': '*' })
+                    "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);
-            
-            // Handle different possible response formats
-            const responseText = data.answer || data.text || data.response || data.result || data.message;
-            
+            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.';
+                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);
+
+        // First, convert markdown links [text](url) to HTML links
+        // 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 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;
+    }
+
     private async getAssistantResponse(userMessage: string) {
         try {
             const response = await this.callChatAPI(userMessage);
-            this.addMessage(response, "assistant");
+            // 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 {