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

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

@@ -9,7 +9,6 @@ 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 {
@@ -17,7 +16,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;
@@ -36,108 +35,26 @@ 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() {
-        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;
-            }
-        });
+        // Add a welcome message
+        this.addMessage("Hello! How can I help you today?", "assistant");
     }
 
     get chatContainerClass() {
         return cx(
             "chat-container",
-            this.disabled && "chat-container_disabled",
-            this.isOpen && "chat-container_open"
+            this.disabled && "chat-container--disabled"
         );
     }
 
-    get showTriggerButton() {
-        return !this.isOpen;
-    }
-
     get messagesWithTyping() {
         const messages = [...this.messages];
         if (this.isAssistantTyping) {
@@ -154,151 +71,36 @@ export default class Chat extends LightningElement {
         return messages;
     }
 
-    // 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
-    ) {
+    private addMessage(text: string, sender: "user" | "assistant") {
         const timestamp = new Date();
         const message: ChatMessage = {
             id: `msg-${this.messageIdCounter++}`,
             text,
             timestamp,
             sender,
-            formattedTime: this.formatTimestamp(timestamp),
-            isHTML
+            formattedTime: this.formatTimestamp(timestamp)
         };
         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();
         }
@@ -319,268 +121,43 @@ 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 = "";
         }
 
-        // Show typing indicator
+        // Simulate assistant typing
         this.isAssistantTyping = true;
-
-        // Get real assistant response from API
-        // Add a small delay to show the typing indicator
+        
+        // Simulate assistant response after a delay
         setTimeout(() => {
-            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>");
-
-        // 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;
+            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.addMessage(response, "assistant");
     }
 
     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>