@salesforcedevs/docs-components 0.0.30-chat → 0.0.31-chat

package/package.json

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

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

@@ -117,11 +117,18 @@ body.chat-closed .global-header {
     border-bottom: 1px solid #e0e0e0;
     display: flex;
     align-items: center;
-    gap: 12px;
+    justify-content: space-between;
     flex-shrink: 0;
 }
 
-.chat-close-button {
+.chat-header-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.chat-close-button,
+.chat-clear-button {
     width: 32px;
     height: 32px;
     border: none;
@@ -135,12 +142,19 @@ body.chat-closed .global-header {
     color: #666666;
 }
 
-.chat-close-button:hover {
+.chat-close-button:hover,
+.chat-clear-button:hover {
     background-color: #e9ecef;
     color: #333333;
 }
 
-.close-icon {
+.chat-clear-button:hover {
+    background-color: #fee;
+    color: #dc3545;
+}
+
+.close-icon,
+.clear-icon {
     width: 18px;
     height: 18px;
 }

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

@@ -17,15 +17,27 @@
     <div class={chatContainerClass}>
         <div class="chat-header">
             <h3 class="chat-title">{title}</h3>
-            <button 
-                class="chat-close-button"
-                onclick={handleCloseClick}
-                aria-label="Close chat"
-            >
-                <svg class="close-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
-                </svg>
-            </button>
+            <div class="chat-header-actions">
+                <button 
+                    class="chat-clear-button"
+                    onclick={handleClearClick}
+                    aria-label="Clear chat messages"
+                    title="Clear chat messages"
+                >
+                    <svg class="clear-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+                    </svg>
+                </button>
+                <button 
+                    class="chat-close-button"
+                    onclick={handleCloseClick}
+                    aria-label="Close chat"
+                >
+                    <svg class="close-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+                    </svg>
+                </button>
+            </div>
         </div>
         
         <div class="chat-messages">

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

@@ -52,10 +52,18 @@ export default class Chat extends LightningElement {
     private _showTimestamp: boolean = false;
     private _isOpen: boolean = false;
     private messageIdCounter: number = 0;
+    
+    // localStorage key for persisting messages
+    private static readonly STORAGE_KEY = 'doc-chat-messages';
 
     connectedCallback() {
-        // Add a welcome message
-        this.addMessage("Hello! How can I help you today?", "assistant");
+        // 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");
+        }
         
         // Ensure body has proper class state
         this.updateBodyClass();
@@ -104,6 +112,7 @@ export default class Chat extends LightningElement {
             formattedTime: this.formatTimestamp(timestamp)
         };
         this.messages = [...this.messages, message];
+        this.saveMessages();
         this.scrollToBottom();
     }
 
@@ -128,6 +137,57 @@ export default class Chat extends LightningElement {
         }
     }
 
+    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
+            }));
+            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
+                }));
+                
+                // Update message counter to avoid ID conflicts
+                const lastId = this.messages.length > 0 ? 
+                    Math.max(...this.messages.map(m => parseInt(m.id.replace('msg-', '')) || 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);
+        }
+    }
+
     handleInputChange(event: Event) {
         const target = event.target as HTMLInputElement;
         this.currentMessage = target.value;
@@ -205,6 +265,15 @@ export default class Chat extends LightningElement {
         }));
     }
 
+    handleClearClick() {
+        this.clearMessages();
+        
+        // Dispatch custom event to notify parent components
+        this.dispatchEvent(new CustomEvent('chatcleared', {
+            detail: { cleared: true }
+        }));
+    }
+
     handleOpenClick() {
         this.isOpen = true;
         this.updateBodyClass();