@salesforcedevs/docs-components 0.0.27-chat → 0.0.29-chat

package/package.json

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

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

@@ -1,6 +1,34 @@
-/* Override parent container margin to prevent unwanted spacing */
+/* Fixed positioned chat with full viewport height */
 :host {
-    margin-bottom: calc(-2 * (var(--dx-g-spacing-5xl) + 4px)) !important;
+    position: fixed;
+    top: 0;
+    right: 0;
+    height: 100vh;
+    z-index: 100000;
+}
+
+/* Apply content shift to main page content when chat is open */
+body.chat-open .content {
+    transform: translateX(-400px);
+    transition: transform 0.3s ease-in-out;
+}
+
+body.chat-closed .content {
+    transform: translateX(0);
+    transition: transform 0.3s ease-in-out;
+}
+
+/* Also shift the global header if it exists */
+body.chat-open dx-global-header,
+body.chat-open .global-header {
+    transform: translateX(-400px);
+    transition: transform 0.3s ease-in-out;
+}
+
+body.chat-closed dx-global-header,
+body.chat-closed .global-header {
+    transform: translateX(0);
+    transition: transform 0.3s ease-in-out;
 }
 
 /* Floating trigger button */
@@ -63,7 +91,7 @@
 
 /* Chat container */
 .chat-container {
-    height: 100%;
+    height: 100vh;
     width: 400px;
     background-color: #ffffff;
     box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);

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

@@ -56,6 +56,14 @@ export default class Chat extends LightningElement {
     connectedCallback() {
         // Add a welcome message
         this.addMessage("Hello! How can I help you today?", "assistant");
+        
+        // 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');
     }
 
     get chatContainerClass() {
@@ -109,6 +117,17 @@ export default class Chat extends LightningElement {
         }, 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');
+        }
+    }
+
     handleInputChange(event: Event) {
         const target = event.target as HTMLInputElement;
         this.currentMessage = target.value;
@@ -178,6 +197,7 @@ export default class Chat extends LightningElement {
 
     handleCloseClick() {
         this.isOpen = false;
+        this.updateBodyClass();
         
         // Dispatch custom event to notify parent components
         this.dispatchEvent(new CustomEvent('chatclosed', {
@@ -187,6 +207,7 @@ export default class Chat extends LightningElement {
 
     handleOpenClick() {
         this.isOpen = true;
+        this.updateBodyClass();
         
         // Dispatch custom event to notify parent components
         this.dispatchEvent(new CustomEvent('chatopened', {
@@ -196,6 +217,7 @@ export default class Chat extends LightningElement {
 
     openChat() {
         this.isOpen = true;
+        this.updateBodyClass();
         
         // Dispatch custom event to notify parent components
         this.dispatchEvent(new CustomEvent('chatopened', {
@@ -205,6 +227,7 @@ export default class Chat extends LightningElement {
 
     closeChat() {
         this.isOpen = false;
+        this.updateBodyClass();
         
         // Dispatch custom event to notify parent components
         this.dispatchEvent(new CustomEvent('chatclosed', {

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

@@ -59,15 +59,17 @@
                             value={tocValue}
                         ></dx-toc>
                     </div>
-                    <doc-chat
-                        title="Smart Agent"
-                        placeholder="Type your message..."
-                        assistant-name="Assistant"
-                    ></doc-chat>
             </div>
             <div lwc:if={showFooter} class="footer-container">
                 <dx-footer variant="no-signup"></dx-footer>
             </div>
         </div>
     </div>
+    
+    <!-- Fixed positioned chat component -->
+    <doc-chat
+        title="Smart Agent"
+        placeholder="Type your message..."
+        assistant-name="Assistant"
+    ></doc-chat>
 </template>