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

package/package.json

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

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

@@ -117,7 +117,7 @@ body.chat-closed .global-header {
 
 .chat-header {
     background: linear-gradient(135deg, #0176d3 0%, #005fb2 100%);
-    padding: 20px 24px;
+    padding: 18px 24px;
     border-bottom: 1px solid rgb(1 118 211 / 20%);
     display: flex;
     align-items: center;
@@ -204,6 +204,7 @@ body.chat-closed .global-header {
     display: flex;
     align-items: flex-start;
     animation: message-slide-in 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    gap: 12px;
 }
 
 .message-wrapper[data-sender="user"] {
@@ -214,6 +215,120 @@ body.chat-closed .global-header {
     justify-content: flex-start;
 }
 
+/* Avatar styling */
+.message-avatar-wrapper {
+    flex-shrink: 0;
+    display: flex;
+    align-items: flex-start;
+    margin-top: 2px;
+}
+
+/* Hide avatar for user messages */
+.message-wrapper[data-sender="user"] .message-avatar-wrapper {
+    display: none;
+}
+
+/* Show avatar for assistant messages */
+.message-wrapper[data-sender="assistant"] .message-avatar-wrapper {
+    display: flex;
+}
+
+.avatar-container {
+    width: 36px;
+    height: 36px;
+    background: linear-gradient(180deg, #fafbfc 0%, #f7f9fb 100%);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
+    position: relative;
+    overflow: hidden;
+}
+
+.avatar-container::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(135deg, rgb(255 255 255 / 20%) 0%, rgb(255 255 255 / 10%) 100%);
+    border-radius: 50%;
+}
+
+.avatar-container {
+    animation: thinking-avatar-pulse 3s ease-in-out infinite;
+}
+
+.avatar-icon {
+    width: 32px;
+    height: 32px;
+    color: white;
+    position: relative;
+    z-index: 1;
+    filter: drop-shadow(0 1px 2px rgb(0 0 0 / 15%));
+}
+
+/* Thinking Bot SVG Animations */
+.thinking-body {
+    animation: thinking-breathe 2s ease-in-out infinite;
+    transform-origin: center;
+}
+
+.thinking-smile {
+    animation: thinking-smile-animation 3s ease-in-out infinite;
+}
+
+.thinking-eye {
+    animation: think-blink 6s infinite;
+    transform-origin: center;
+}
+
+@keyframes thinking-avatar-pulse {
+    0%, 100% { 
+        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%);
+    }
+}
+
+@keyframes thinking-breathe {
+    0%, 100% { 
+        transform: scale(1); 
+    }
+    50% { 
+        transform: scale(1.05); 
+    }
+}
+
+@keyframes thinking-smile-animation {
+    0%, 100% { 
+        transform: translateY(0px); 
+    }
+    50% { 
+        transform: translateY(-2px); 
+    }
+}
+
+@keyframes think-blink {
+    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); 
+    }
+}
+
 .message-content {
     max-width: 80%;
     display: flex;
@@ -444,6 +559,20 @@ body.chat-closed .global-header {
     .message-content {
         max-width: 85%;
     }
+
+    .avatar-container {
+        width: 32px;
+        height: 32px;
+    }
+
+    .avatar-icon {
+        width: 28px;
+        height: 28px;
+    }
+
+    .message-wrapper {
+        gap: 10px;
+    }
 }
 
 @media (max-width: 480px) {
@@ -479,6 +608,21 @@ body.chat-closed .global-header {
     .chat-input-area {
         padding: 12px;
     }
+
+    .avatar-container {
+        width: 28px;
+        height: 28px;
+    }
+
+    .avatar-icon {
+        width: 24px;
+        height: 24px;
+    }
+
+    .message-wrapper {
+        gap: 8px;
+        margin-bottom: 16px;
+    }
 }
 
 /* Accessibility improvements */
@@ -494,6 +638,23 @@ body.chat-closed .global-header {
     .chat-messages {
         scroll-behavior: auto;
     }
+
+    .avatar-container {
+        animation: none;
+    }
+
+    /* Disable all thinking bot animations for reduced motion users */
+    .thinking-body {
+        animation: none !important;
+    }
+
+    .thinking-smile {
+        animation: none !important;
+    }
+
+    .thinking-eye {
+        animation: none !important;
+    }
 }
 
 /* High contrast mode support */

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

@@ -77,6 +77,45 @@
                     class="message-wrapper"
                     data-sender={message.sender}
                 >
+                    <!-- AI Avatar for assistant messages only -->
+                    <div class="message-avatar-wrapper" data-sender={message.sender}>
+                        <div class="avatar-container">
+                            <svg
+                                class="avatar-icon"
+                                viewBox="0 0 300 320"
+                                fill="none"
+                                stroke="none"
+                            >
+                                <!-- Antennas -->
+                                <g stroke="#999" stroke-width="6">
+                                    <line x1="70" y1="20" x2="70" y2="60" />
+                                    <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" />
+
+                                <!-- Robot Body -->
+                                <g class="thinking-body">
+                                    <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" />
+
+                                    <!-- Face Panel -->
+                                    <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" />
+
+                                    <!-- Thinking Smile -->
+                                    <path class="thinking-smile" d="M110 240 Q150 260 190 240" stroke="#2F435A" stroke-width="6" fill="none" stroke-linecap="round" />
+                                </g>
+                            </svg>
+                        </div>
+                    </div>
+
                     <div class="message-content">
                         <div class="message-bubble">
                             <template lwc:if={message.isTyping}>