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

package/package.json

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

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

@@ -37,58 +37,47 @@ body.chat-closed .global-header {
     position: fixed;
     bottom: 20px;
     right: 20px;
-    width: 64px;
-    height: 64px;
-    border-radius: 50%;
-    background: linear-gradient(135deg, #0176d3 0%, #005fb2 100%);
+    background: transparent;
     color: white;
     border: none;
     cursor: pointer;
-    box-shadow: 0 8px 24px rgb(1 118 211 / 25%), 0 2px 8px rgb(1 118 211 / 15%);
     z-index: 1001;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     animation: pulse 3s infinite;
+    padding: 0;
 }
 
-.chat-trigger-button:hover {
-    background: linear-gradient(135deg, #005fb2 0%, #003e73 100%);
-    transform: scale(1.05);
-    box-shadow: 0 12px 32px rgb(1 118 211 / 35%), 0 4px 12px rgb(1 118 211 / 25%);
+.chat-trigger-button:hover .chat-gif {
+    transform: scale(1.1);
 }
 
-.chat-trigger-button:active {
+.chat-trigger-button:active .chat-gif {
     transform: scale(0.95);
 }
 
-.chat-icon {
-    width: 28px;
-    height: 28px;
-    position: absolute;
+.chat-gif {
+    width: 155px;
+    height: 218px;
+    object-fit: cover;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.chat-trigger-text {
-    font-size: 10px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    margin-top: 20px;
-    opacity: 0.9;
-}
+
 
 @keyframes pulse {
     0% {
-        box-shadow: 0 8px 24px rgb(1 118 211 / 25%), 0 2px 8px rgb(1 118 211 / 15%), 0 0 0 0 rgb(1 118 211 / 40%);
+        transform: scale(1);
     }
 
     70% {
-        box-shadow: 0 8px 24px rgb(1 118 211 / 25%), 0 2px 8px rgb(1 118 211 / 15%), 0 0 0 16px rgb(1 118 211 / 0%);
+        transform: scale(1.05);
     }
 
     100% {
-        box-shadow: 0 8px 24px rgb(1 118 211 / 25%), 0 2px 8px rgb(1 118 211 / 15%), 0 0 0 0 rgb(1 118 211 / 0%);
+        transform: scale(1);
     }
 }
 
@@ -244,6 +233,7 @@ body.chat-closed .global-header {
     box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
     position: relative;
     overflow: hidden;
+    animation: thinking-avatar-pulse 3s ease-in-out infinite;
 }
 
 .avatar-container::before {
@@ -254,10 +244,6 @@ body.chat-closed .global-header {
     border-radius: 50%;
 }
 
-.avatar-container {
-    animation: thinking-avatar-pulse 3s ease-in-out infinite;
-}
-
 .avatar-icon {
     width: 32px;
     height: 32px;
@@ -287,6 +273,7 @@ body.chat-closed .global-header {
         transform: scale(1); 
         box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
     }
+
     50% { 
         transform: scale(1.08); 
         box-shadow: 0 4px 16px rgb(0 0 0 / 20%);
@@ -297,6 +284,7 @@ body.chat-closed .global-header {
     0%, 100% { 
         transform: scale(1); 
     }
+
     50% { 
         transform: scale(1.05); 
     }
@@ -304,8 +292,9 @@ body.chat-closed .global-header {
 
 @keyframes thinking-smile-animation {
     0%, 100% { 
-        transform: translateY(0px); 
+        transform: translateY(0); 
     }
+
     50% { 
         transform: translateY(-2px); 
     }
@@ -315,15 +304,19 @@ body.chat-closed .global-header {
     0%, 85%, 100% { 
         transform: scaleY(1); 
     }
+
     90% { 
         transform: scaleY(0.6); 
     }
+
     92% { 
         transform: scaleY(0.2); 
     }
+
     94% { 
         transform: scaleY(0.6); 
     }
+
     96% { 
         transform: scaleY(1); 
     }
@@ -514,21 +507,16 @@ body.chat-closed .global-header {
 /* Responsive design */
 @media (max-width: 768px) {
     .chat-trigger-button {
-        width: 56px;
-        height: 56px;
         bottom: 16px;
         right: 16px;
     }
     
-    .chat-icon {
-        width: 24px;
-        height: 24px;
+    .chat-gif {
+        width: 56px;
+        height: 56px;
     }
     
-    .chat-trigger-text {
-        font-size: 8px;
-        margin-top: 18px;
-    }
+
     
     .chat-container {
         width: 100%;
@@ -577,21 +565,16 @@ body.chat-closed .global-header {
 
 @media (max-width: 480px) {
     .chat-trigger-button {
-        width: 45px;
-        height: 45px;
         bottom: 10px;
         right: 10px;
     }
 
-    .chat-icon {
-        width: 20px;
-        height: 20px;
+    .chat-gif {
+        width: 48px;
+        height: 48px;
     }
 
-    .chat-trigger-text {
-        font-size: 7px;
-        margin-top: 16px;
-    }
+
 
     .chat-container {
         width: 100%;

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

@@ -6,19 +6,11 @@
             onclick={handleOpenClick}
             aria-label="Open chat"
         >
-            <svg
-                class="chat-icon"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-            >
-                <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
-                />
-            </svg>
+            <img
+                class="chat-gif"
+                src="/hi_bot.gif"
+                alt="Hi Bot"
+            />
             <!-- <span class="chat-trigger-text">Chat</span> -->
         </button>
     </template>

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

@@ -58,6 +58,7 @@ export default class Chat extends LightningElement {
     private static readonly OPEN_STATE_KEY = "doc-chat-should-open";
 
     connectedCallback() {
+        console.log('---- Connected callback ------');
         // Load existing messages from localStorage
         this.loadMessages();