@salesforcedevs/docs-components - npm Package Compare versions

Comparing version 0.0.37-chat to 0.0.38-chat

package.json

 {
     "name": "@salesforcedevs/docs-components",
-    "version": "0.0.37-chat",
+    "version": "0.0.38-chat",
     "description": "Docs Lightning web components for DSC",
@@ -5,0 +5,0 @@ "license": "MIT",

src/modules/doc/chat/chat.ts

@@ -12,2 +12,3 @@ import { LightningElement, api, track } from "lwc";
     formattedTime?: string;
+    isHTML?: boolean; // Flag to indicate if content should be rendered as HTML
 }
@@ -90,2 +91,31 @@
 
+    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() {
@@ -119,3 +149,9 @@ return cx(
 
-    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();
@@ -127,3 +163,4 @@ const message: ChatMessage = {
             sender,
-            formattedTime: this.formatTimestamp(timestamp)
+            formattedTime: this.formatTimestamp(timestamp),
+            isHTML
         };
@@ -164,3 +201,4 @@ this.messages = [...this.messages, message];
                 sender: msg.sender,
-                formattedTime: msg.formattedTime
+                formattedTime: msg.formattedTime,
+                isHTML: msg.isHTML || false
             }));
@@ -186,3 +224,4 @@ localStorage.setItem(
                     sender: msg.sender,
-                    formattedTime: msg.formattedTime
+                    formattedTime: msg.formattedTime,
+                    isHTML: msg.isHTML || false
                 }));
@@ -308,7 +347,5 @@
                 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': '*' })
                 },
@@ -327,4 +364,5 @@ body: JSON.stringify(requestBody)
             
-            // 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);
             
@@ -354,6 +392,85 @@ if (!responseText) {
 
+    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) {
@@ -360,0 +477,0 @@ console.error('Error getting assistant response:', error);

No alert changes

Improved metrics

Total package byte prevSize

329965

1.86%

Lines of code

8137

1.83%

No dependency changes