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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "0.0.35-chat",
+    "version": "0.0.37-chat",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/modules/doc/chat/chat.css

@@ -5,7 +5,9 @@
     right: 0;
     height: 100vh;
     z-index: 100000;
-    font-family: "Salesforce Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+    font-family: "Salesforce Sans", -apple-system, BlinkMacSystemFont,
+        "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",
+        sans-serif;
 }
 
 /* Apply content shift to main page content when chat is open */
@@ -50,6 +52,59 @@ body.chat-closed .global-header {
     padding: 0;
 }
 
+/* Tooltip styling */
+.chat-trigger-button::before {
+    content: attr(data-tooltip);
+    position: absolute;
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    background: linear-gradient(135deg, #0176d3 0%, #005fb2 100%);
+    color: white;
+    padding: 12px 16px;
+    border-radius: 12px;
+    font-size: 14px;
+    font-weight: 500;
+    white-space: nowrap;
+    opacity: 0;
+    visibility: hidden;
+    margin-right: 16px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 8px 24px rgb(1 118 211 / 25%), 0 2px 8px rgb(1 118 211 / 15%);
+    backdrop-filter: blur(10px);
+    z-index: 1002;
+    pointer-events: none;
+    letter-spacing: 0.02em;
+}
+
+/* Tooltip arrow */
+.chat-trigger-button::after {
+    content: "";
+    position: absolute;
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-right: 8px;
+    width: 0;
+    height: 0;
+    border-left: 8px solid #0176d3;
+    border-top: 8px solid transparent;
+    border-bottom: 8px solid transparent;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    z-index: 1002;
+    pointer-events: none;
+}
+
+/* Show tooltip on hover */
+.chat-trigger-button:hover::before,
+.chat-trigger-button:hover::after {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(-50%) translateX(-4px);
+}
+
 .chat-trigger-button:hover .chat-gif {
     transform: scale(1.1);
 }
@@ -65,8 +120,6 @@ body.chat-closed .global-header {
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-
-
 @keyframes pulse {
     0% {
         transform: scale(1);
@@ -123,7 +176,11 @@ body.chat-closed .global-header {
     left: 0;
     right: 0;
     bottom: 0;
-    background: linear-gradient(135deg, rgb(255 255 255 / 5%) 0%, rgb(255 255 255 / 1%) 100%);
+    background: linear-gradient(
+        135deg,
+        rgb(255 255 255 / 5%) 0%,
+        rgb(255 255 255 / 1%) 100%
+    );
     pointer-events: none;
 }
 
@@ -240,7 +297,11 @@ body.chat-closed .global-header {
     content: "";
     position: absolute;
     inset: 0;
-    background: linear-gradient(135deg, rgb(255 255 255 / 20%) 0%, rgb(255 255 255 / 10%) 100%);
+    background: linear-gradient(
+        135deg,
+        rgb(255 255 255 / 20%) 0%,
+        rgb(255 255 255 / 10%) 100%
+    );
     border-radius: 50%;
 }
 
@@ -269,56 +330,61 @@ body.chat-closed .global-header {
 }
 
 @keyframes thinking-avatar-pulse {
-    0%, 100% { 
-        transform: scale(1); 
+    0%,
+    100% {
+        transform: scale(1);
         box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
     }
 
-    50% { 
-        transform: scale(1.08); 
+    50% {
+        transform: scale(1.08);
         box-shadow: 0 4px 16px rgb(0 0 0 / 20%);
     }
 }
 
 @keyframes thinking-breathe {
-    0%, 100% { 
-        transform: scale(1); 
+    0%,
+    100% {
+        transform: scale(1);
     }
 
-    50% { 
-        transform: scale(1.05); 
+    50% {
+        transform: scale(1.05);
     }
 }
 
 @keyframes thinking-smile-animation {
-    0%, 100% { 
-        transform: translateY(0); 
+    0%,
+    100% {
+        transform: translateY(0);
     }
 
-    50% { 
-        transform: translateY(-2px); 
+    50% {
+        transform: translateY(-2px);
     }
 }
 
 @keyframes think-blink {
-    0%, 85%, 100% { 
-        transform: scaleY(1); 
+    0%,
+    85%,
+    100% {
+        transform: scaleY(1);
     }
 
-    90% { 
-        transform: scaleY(0.6); 
+    90% {
+        transform: scaleY(0.6);
     }
 
-    92% { 
-        transform: scaleY(0.2); 
+    92% {
+        transform: scaleY(0.2);
     }
 
-    94% { 
-        transform: scaleY(0.6); 
+    94% {
+        transform: scaleY(0.6);
     }
 
-    96% { 
-        transform: scaleY(1); 
+    96% {
+        transform: scaleY(1);
     }
 }
 
@@ -510,40 +576,52 @@ body.chat-closed .global-header {
         bottom: 16px;
         right: 16px;
     }
-    
+
     .chat-gif {
         width: 56px;
         height: 56px;
     }
-    
 
-    
+    /* Adjust tooltip for mobile */
+    .chat-trigger-button::before {
+        font-size: 13px;
+        padding: 10px 14px;
+        margin-right: 12px;
+    }
+
+    .chat-trigger-button::after {
+        margin-right: 6px;
+        border-left-width: 6px;
+        border-top-width: 6px;
+        border-bottom-width: 6px;
+    }
+
     .chat-container {
         width: 100%;
         right: 0;
         transform: translateX(100%);
     }
-    
+
     .chat-container_open {
         transform: translateX(0);
     }
-    
+
     .chat-header {
         padding: 16px 20px;
     }
-    
+
     .chat-title {
         font-size: 18px;
     }
-    
+
     .chat-messages {
         padding: 20px 16px;
     }
-    
+
     .chat-input-area {
         padding: 16px 20px;
     }
-    
+
     .message-content {
         max-width: 85%;
     }
@@ -574,7 +652,20 @@ body.chat-closed .global-header {
         height: 48px;
     }
 
+    /* Smaller tooltip for small screens */
+    .chat-trigger-button::before {
+        font-size: 12px;
+        padding: 8px 12px;
+        margin-right: 10px;
+        border-radius: 8px;
+    }
 
+    .chat-trigger-button::after {
+        margin-right: 4px;
+        border-left-width: 5px;
+        border-top-width: 5px;
+        border-bottom-width: 5px;
+    }
 
     .chat-container {
         width: 100%;
@@ -638,6 +729,12 @@ body.chat-closed .global-header {
     .thinking-eye {
         animation: none !important;
     }
+
+    /* Disable tooltip animations for reduced motion users */
+    .chat-trigger-button::before,
+    .chat-trigger-button::after {
+        transition: none;
+    }
 }
 
 /* High contrast mode support */

package/src/modules/doc/chat/chat.html

@@ -5,10 +5,11 @@
             class="chat-trigger-button"
             onclick={handleOpenClick}
             aria-label="Open chat"
+            data-tooltip="Chat with us!"
         >
             <img
                 class="chat-gif"
-                src="/hi_bot.gif"
+                src="https://a.sfdcstatic.com/developer-website/sfdocs/hack-smart-agent/hi_bot_bg.gif"
                 alt="Hi Bot"
             />
             <!-- <span class="chat-trigger-text">Chat</span> -->
@@ -70,7 +71,10 @@
                     data-sender={message.sender}
                 >
                     <!-- AI Avatar for assistant messages only -->
-                    <div class="message-avatar-wrapper" data-sender={message.sender}>
+                    <div
+                        class="message-avatar-wrapper"
+                        data-sender={message.sender}
+                    >
                         <div class="avatar-container">
                             <svg
                                 class="avatar-icon"
@@ -84,25 +88,78 @@
                                     <line x1="230" y1="20" x2="230" y2="60" />
                                 </g>
                                 <circle cx="70" cy="20" r="10" fill="#3A98D8" />
-                                <circle cx="230" cy="20" r="10" fill="#3A98D8" />
+                                <circle
+                                    cx="230"
+                                    cy="20"
+                                    r="10"
+                                    fill="#3A98D8"
+                                />
 
                                 <!-- Robot Body -->
                                 <g class="thinking-body">
-                                    <rect x="40" y="60" width="220" height="240" rx="110" ry="110" fill="#3A98D8" />
+                                    <rect
+                                        x="40"
+                                        y="60"
+                                        width="220"
+                                        height="240"
+                                        rx="110"
+                                        ry="110"
+                                        fill="#3A98D8"
+                                    />
 
                                     <!-- Forehead Dots -->
-                                    <circle cx="150" cy="90" r="6" fill="#9ED4E6" />
-                                    <rect x="135" y="100" width="30" height="10" rx="5" ry="5" fill="#9ED4E6" />
+                                    <circle
+                                        cx="150"
+                                        cy="90"
+                                        r="6"
+                                        fill="#9ED4E6"
+                                    />
+                                    <rect
+                                        x="135"
+                                        y="100"
+                                        width="30"
+                                        height="10"
+                                        rx="5"
+                                        ry="5"
+                                        fill="#9ED4E6"
+                                    />
 
                                     <!-- Face Panel -->
-                                    <rect x="70" y="130" width="160" height="80" rx="40" ry="40" fill="#577C86" />
+                                    <rect
+                                        x="70"
+                                        y="130"
+                                        width="160"
+                                        height="80"
+                                        rx="40"
+                                        ry="40"
+                                        fill="#577C86"
+                                    />
 
                                     <!-- Eyes (Thinking animation) -->
-                                    <circle class="thinking-eye" cx="115" cy="170" r="10" fill="#86D3BD" />
-                                    <circle class="thinking-eye" cx="185" cy="170" r="10" fill="#86D3BD" />
+                                    <circle
+                                        class="thinking-eye"
+                                        cx="115"
+                                        cy="170"
+                                        r="10"
+                                        fill="#86D3BD"
+                                    />
+                                    <circle
+                                        class="thinking-eye"
+                                        cx="185"
+                                        cy="170"
+                                        r="10"
+                                        fill="#86D3BD"
+                                    />
 
                                     <!-- Thinking Smile -->
-                                    <path class="thinking-smile" d="M110 240 Q150 260 190 240" stroke="#2F435A" stroke-width="6" fill="none" stroke-linecap="round" />
+                                    <path
+                                        class="thinking-smile"
+                                        d="M110 240 Q150 260 190 240"
+                                        stroke="#2F435A"
+                                        stroke-width="6"
+                                        fill="none"
+                                        stroke-linecap="round"
+                                    />
                                 </g>
                             </svg>
                         </div>

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

@@ -53,12 +53,19 @@ export default class Chat extends LightningElement {
     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 ------');
+        console.log("---- Connected callback ------");
         // Load existing messages from localStorage
         this.loadMessages();
 
@@ -264,40 +271,91 @@ export default class Chat extends LightningElement {
             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);
+            this.getAssistantResponse(userMessage);
+        }, 500);
     }
 
-    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?";
+    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',
+                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)
+            });
+
+            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 different possible response formats
+            const responseText = data.answer || data.text || data.response || data.result || data.message;
+            
+            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.';
         }
+    }
 
-        this.addMessage(response, "assistant");
+    private async getAssistantResponse(userMessage: string) {
+        try {
+            const response = await this.callChatAPI(userMessage);
+            this.addMessage(response, "assistant");
+        } 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) {