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

package/package.json

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

@@ -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,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 {
@@ -86,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",
@@ -114,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();
@@ -157,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,
@@ -178,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
@@ -299,11 +338,9 @@ export default class Chat extends LightningElement {
 
             const response = await fetch(Chat.API_URL, {
                 method: 'POST',
-                mode: 'cors', // Explicitly set CORS mode
                 headers: {
                     'Content-Type': 'application/json',
                     'ngrok-skip-browser-warning': 'true', // Skip ngrok browser warning
-                    ...(Chat.IS_DEVELOPMENT && { 'Access-Control-Allow-Origin': '*' })
                 },
                 body: JSON.stringify(requestBody)
             });
@@ -317,8 +354,9 @@ export default class Chat extends LightningElement {
             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;
+            // 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);
@@ -343,10 +381,89 @@ export default class Chat extends LightningElement {
         }
     }
 
+    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;
+    }
+
     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);
             this.addMessage(