@salesforcedevs/docs-components 0.0.4 → 0.0.5-edit

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

@@ -0,0 +1,586 @@
+import { LightningElement, api, track } from "lwc";
+import cx from "classnames";
+import { normalizeBoolean } from "dxUtils/normalizers";
+
+interface ChatMessage {
+    id: string;
+    text: string;
+    timestamp: Date;
+    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 {
+    @api title: string = "Chat";
+    @api placeholder: string = "Type your message...";
+    @api assistantName: string = "Assistant";
+    @api maxHeight: string = "400px";
+
+    @api
+    get disabled() {
+        return this._disabled;
+    }
+
+    set disabled(value) {
+        this._disabled = normalizeBoolean(value);
+    }
+
+    @api
+    get showTimestamp() {
+        return this._showTimestamp;
+    }
+
+    set showTimestamp(value) {
+        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 = 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";
+
+    // 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;
+            }
+        });
+    }
+
+    get chatContainerClass() {
+        return cx(
+            "chat-container",
+            this.disabled && "chat-container_disabled",
+            this.isOpen && "chat-container_open"
+        );
+    }
+
+    get showTriggerButton() {
+        return !this.isOpen;
+    }
+
+    get messagesWithTyping() {
+        const messages = [...this.messages];
+        if (this.isAssistantTyping) {
+            const timestamp = new Date();
+            messages.push({
+                id: "typing",
+                text: "...",
+                timestamp,
+                sender: "assistant",
+                isTyping: true,
+                formattedTime: this.formatTimestamp(timestamp)
+            });
+        }
+        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
+    ) {
+        const timestamp = new Date();
+        const message: ChatMessage = {
+            id: `msg-${this.messageIdCounter++}`,
+            text,
+            timestamp,
+            sender,
+            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");
+            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) {
+            event.preventDefault();
+            this.sendMessage();
+        }
+    }
+
+    handleSendClick() {
+        this.sendMessage();
+    }
+
+    private sendMessage() {
+        if (!this.currentMessage.trim() || this.disabled) {
+            return;
+        }
+
+        // Add user message
+        this.addMessage(this.currentMessage, "user");
+        const userMessage = this.currentMessage;
+        this.currentMessage = "";
+
+        // Clear input
+        const input = this.template.querySelector(
+            ".chat-input"
+        ) as HTMLInputElement;
+        if (input) {
+            input.value = "";
+        }
+
+        // Show typing indicator
+        this.isAssistantTyping = true;
+
+        // Get real assistant response from API
+        // Add a small delay to show the typing indicator
+        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;
+        }
+    }
+
+    formatTimestamp(timestamp: Date) {
+        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/componentPlayground/componentPlayground.css

@@ -0,0 +1,22 @@
+@import "dxHelpers/reset";
+
+/**
+ * Designs link - https://www.figma.com/design/9SalRPlJmtRDZHq03o8dL1/One-Doc-Site-Visionary-Mocks?node-id=9968-366397&m=dev
+ * Preview padding: 24px
+ * Example Selector height: 122px
+ * Example Preview min height: 150px
+ * Tab height with border: 46px(45px height and 1px border)
+ * Codeblock height: 264px(224px for codeblock and 40px for panel)
+ * Total: 606px
+**/
+
+iframe {
+    width: 100%;
+    height: 606px;
+    border-radius: var(--dx-g-spacing-sm);
+    border: 1px solid var(--dx-g-gray-90);
+}
+
+.container {
+    position: relative;
+}

package/src/modules/doc/componentPlayground/componentPlayground.html

@@ -0,0 +1,20 @@
+<template>
+    <div class="container" lwc:if={playgroundAvailable}>
+        <dx-spinner
+            size="large"
+            variant="brand"
+            if:true={isLoading}
+        ></dx-spinner>
+        <iframe
+            src={playgroundSrc}
+            onload={handleIframeLoad}
+            title="Component Playground"
+            allow="clipboard-write"
+        ></iframe>
+    </div>
+    <dx-error-fallback
+        lwc:else
+        title="Playground Unavailable"
+        description="This component's playground is currently unavailable. Please check again later."
+    ></dx-error-fallback>
+</template>

package/src/modules/doc/componentPlayground/componentPlayground.ts

@@ -0,0 +1,29 @@
+import { LightningElement, api } from "lwc";
+
+export default class ComponentPlayground extends LightningElement {
+    @api model!: string;
+    @api namespace!: string;
+    @api component!: string;
+    @api playgroundAppUrl!: string;
+
+    isLoading = true;
+
+    get playgroundAvailable() {
+        return (
+            this.playgroundAppUrl &&
+            this.model &&
+            this.namespace &&
+            this.component
+        );
+    }
+
+    get playgroundSrc(): string {
+        return `${this.playgroundAppUrl}/playground/${this.model}/${
+            this.namespace
+        }/${this.component.toLowerCase()}.html`;
+    }
+
+    handleIframeLoad() {
+        this.isLoading = false;
+    }
+}