@salesforcedevs/docs-components 0.0.11-chat → 0.0.11-edit

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 {
@@ -16,7 +17,7 @@ export default class Chat extends LightningElement {
     @api placeholder: string = "Type your message...";
     @api assistantName: string = "Assistant";
     @api maxHeight: string = "400px";
-    
+
     @api
     get disabled() {
         return this._disabled;
@@ -35,26 +36,108 @@ export default class Chat extends LightningElement {
         this._showTimestamp = normalizeBoolean(value);
     }
 
+    @api
+    get isOpen() {
+        return this._isOpen;
+    }
+
+    set isOpen(value) {
+        this._isOpen = normalizeBoolean(value);
+    }
+
     @track messages: ChatMessage[] = [];
     @track currentMessage: string = "";
     @track isAssistantTyping: boolean = false;
-    
+
     private _disabled: boolean = false;
     private _showTimestamp: boolean = false;
+    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 = 3;
+
+    // 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() {
-        // Add a welcome message
-        this.addMessage("Hello! How can I help you today?", "assistant");
+        console.log("---- Connected callback ------");
+        // Load existing messages from localStorage
+        this.loadMessages();
+
+        // Add welcome message only if no existing messages
+        if (this.messages.length === 0) {
+            this.addMessage("Hello! How can I help you today?", "assistant");
+        }
+
+        // Check if chat should be opened after reload
+        this.checkAndOpenAfterReload();
+
+        // Ensure body has proper class state
+        this.updateBodyClass();
+    }
+
+    disconnectedCallback() {
+        // Clean up body classes when component is destroyed
+        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",
-            this.disabled && "chat-container--disabled"
+            this.disabled && "chat-container_disabled",
+            this.isOpen && "chat-container_open"
         );
     }
 
+    get showTriggerButton() {
+        return !this.isOpen;
+    }
+
     get messagesWithTyping() {
         const messages = [...this.messages];
         if (this.isAssistantTyping) {
@@ -71,36 +154,151 @@ 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();
         this.scrollToBottom();
     }
 
     private scrollToBottom() {
         // Use setTimeout to ensure DOM is updated
         setTimeout(() => {
-            const messagesContainer = this.template.querySelector('.chat-messages');
+            const messagesContainer =
+                this.template.querySelector(".chat-messages");
             if (messagesContainer) {
                 messagesContainer.scrollTop = messagesContainer.scrollHeight;
             }
         }, 0);
     }
 
+    private updateBodyClass() {
+        // Update body classes to trigger content shift
+        if (this.isOpen) {
+            document.body.classList.remove("chat-closed");
+            document.body.classList.add("chat-open");
+        } else {
+            document.body.classList.remove("chat-open");
+            document.body.classList.add("chat-closed");
+        }
+    }
+
+    private saveMessages() {
+        try {
+            const messagesToSave = this.messages.map((msg) => ({
+                id: msg.id,
+                text: msg.text,
+                timestamp: msg.timestamp.toISOString(),
+                sender: msg.sender,
+                formattedTime: msg.formattedTime,
+                isHTML: msg.isHTML || false
+            }));
+            localStorage.setItem(
+                Chat.STORAGE_KEY,
+                JSON.stringify(messagesToSave)
+            );
+        } catch (error) {
+            console.warn("Failed to save messages to localStorage:", error);
+        }
+    }
+
+    private loadMessages() {
+        try {
+            const savedMessages = localStorage.getItem(Chat.STORAGE_KEY);
+            if (savedMessages) {
+                const parsedMessages = JSON.parse(savedMessages);
+                this.messages = parsedMessages.map((msg: any) => ({
+                    id: msg.id,
+                    text: msg.text,
+                    timestamp: new Date(msg.timestamp),
+                    sender: msg.sender,
+                    formattedTime: msg.formattedTime,
+                    isHTML: msg.isHTML || false
+                }));
+
+                // Update message counter to avoid ID conflicts
+                const lastId =
+                    this.messages.length > 0
+                        ? Math.max(
+                              ...this.messages.map(
+                                  (m) =>
+                                      parseInt(m.id.replace("msg-", ""), 10) ||
+                                      0
+                              )
+                          )
+                        : 0;
+                this.messageIdCounter = lastId + 1;
+            }
+        } catch (error) {
+            console.warn("Failed to load messages from localStorage:", error);
+            this.messages = [];
+        }
+    }
+
+    private clearMessages() {
+        try {
+            localStorage.removeItem(Chat.STORAGE_KEY);
+            this.messages = [];
+            this.messageIdCounter = 0;
+            // Add welcome message after clearing
+            this.addMessage("Hello! How can I help you today?", "assistant");
+        } catch (error) {
+            console.warn("Failed to clear messages from localStorage:", error);
+        }
+    }
+
+    private checkAndOpenAfterReload() {
+        try {
+            const shouldOpen = localStorage.getItem(Chat.OPEN_STATE_KEY);
+            if (shouldOpen === "true") {
+                // Clear the flag
+                localStorage.removeItem(Chat.OPEN_STATE_KEY);
+                // Open the chat
+                this._isOpen = true;
+                this.updateBodyClass();
+
+                // Dispatch custom event to notify parent components
+                this.dispatchEvent(
+                    new CustomEvent("chatopened", {
+                        detail: { opened: true }
+                    })
+                );
+            }
+        } catch (error) {
+            console.warn(
+                "Failed to check open state from localStorage:",
+                error
+            );
+        }
+    }
+
     handleInputChange(event: Event) {
         const target = event.target as HTMLInputElement;
         this.currentMessage = target.value;
     }
 
     handleKeyDown(event: KeyboardEvent) {
-        if (event.key === 'Enter' && !event.shiftKey) {
+        if (event.key === "Enter" && !event.shiftKey) {
             event.preventDefault();
             this.sendMessage();
         }
@@ -121,43 +319,268 @@ export default class Chat extends LightningElement {
         this.currentMessage = "";
 
         // Clear input
-        const input = this.template.querySelector('.chat-input') as HTMLInputElement;
+        const input = this.template.querySelector(
+            ".chat-input"
+        ) as HTMLInputElement;
         if (input) {
             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
+        // 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>");
 
-        this.addMessage(response, "assistant");
+        // 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);
+            // 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) {
-        return timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+        return timestamp.toLocaleTimeString([], {
+            hour: "2-digit",
+            minute: "2-digit"
+        });
     }
 
     get sendButtonDisabled() {
         return this.disabled || !this.currentMessage.trim();
     }
-} 
+
+    handleCloseClick() {
+        this._isOpen = false;
+        this.updateBodyClass();
+
+        // Dispatch custom event to notify parent components
+        this.dispatchEvent(
+            new CustomEvent("chatclosed", {
+                detail: { closed: true }
+            })
+        );
+    }
+
+    handleClearClick() {
+        this.clearMessages();
+
+        // Dispatch custom event to notify parent components
+        this.dispatchEvent(
+            new CustomEvent("chatcleared", {
+                detail: { cleared: true }
+            })
+        );
+    }
+
+    handleOpenClick() {
+        try {
+            // Set flag to open chat after reload
+            localStorage.setItem(Chat.OPEN_STATE_KEY, "true");
+        } catch (error) {
+            console.warn("Failed to set open state in localStorage:", error);
+        }
+        // Hard reload the page to clear cache when opening chat
+        window.location.reload();
+    }
+
+    openChat() {
+        try {
+            // Set flag to open chat after reload
+            localStorage.setItem(Chat.OPEN_STATE_KEY, "true");
+        } catch (error) {
+            console.warn("Failed to set open state in localStorage:", error);
+        }
+
+        // Hard reload the page to clear cache when opening chat
+        window.location.reload();
+    }
+
+    closeChat() {
+        this._isOpen = false;
+        this.updateBodyClass();
+
+        // Dispatch custom event to notify parent components
+        this.dispatchEvent(
+            new CustomEvent("chatclosed", {
+                detail: { closed: true }
+            })
+        );
+    }
+}

package/src/modules/doc/contentLayout/contentLayout.html

@@ -42,23 +42,23 @@
             <slot name="doc-phase"></slot>
             <slot name="version-banner"></slot>
             <div class="content-body-container">
-                <div class="content-body">
-                    <doc-breadcrumbs
-                        lwc:if={showBreadcrumbs}
-                        breadcrumbs={breadcrumbs}
-                    ></doc-breadcrumbs>
-                    <slot onslotchange={onSlotChange}></slot>
-                    <doc-sprig-survey
-                        lwc:if={shouldDisplayFeedback}
-                    ></doc-sprig-survey>
-                </div>
-                <div lwc:if={showToc} class="right-nav-bar is-sticky">
-                    <dx-toc
-                        header={tocTitle}
-                        options={tocOptions}
-                        value={tocValue}
-                    ></dx-toc>
-                </div>
+                    <div class="content-body">
+                        <doc-breadcrumbs
+                            lwc:if={showBreadcrumbs}
+                            breadcrumbs={breadcrumbs}
+                        ></doc-breadcrumbs>
+                        <slot onslotchange={onSlotChange}></slot>
+                        <doc-sprig-survey
+                            lwc:if={shouldDisplayFeedback}
+                        ></doc-sprig-survey>
+                    </div>
+                    <div lwc:if={showToc} class="right-nav-bar is-sticky">
+                        <dx-toc
+                            header={tocTitle}
+                            options={tocOptions}
+                            value={tocValue}
+                        ></dx-toc>
+                    </div>
             </div>
             <div lwc:if={showFooter} class="footer-container">
                 <dx-footer variant="no-signup"></dx-footer>