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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "0.0.32-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

@@ -5,6 +5,7 @@
     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;
 }
 
 /* Apply content shift to main page content when chat is open */
@@ -36,26 +37,26 @@ body.chat-closed .global-header {
     position: fixed;
     bottom: 20px;
     right: 20px;
-    width: 60px;
-    height: 60px;
+    width: 64px;
+    height: 64px;
     border-radius: 50%;
-    background-color: #0066cc;
+    background: linear-gradient(135deg, #0176d3 0%, #005fb2 100%);
     color: white;
     border: none;
     cursor: pointer;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    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 ease;
-    animation: pulse 2s infinite;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    animation: pulse 3s infinite;
 }
 
 .chat-trigger-button:hover {
-    background-color: #0052a3;
-    transform: scale(1.1);
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
+    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:active {
@@ -79,13 +80,15 @@ body.chat-closed .global-header {
 
 @keyframes pulse {
     0% {
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(0, 102, 204, 0.7);
+        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%);
     }
+
     70% {
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 10px rgba(0, 102, 204, 0);
+        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%);
     }
+
     100% {
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(0, 102, 204, 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 / 0%);
     }
 }
 
@@ -93,32 +96,46 @@ body.chat-closed .global-header {
 .chat-container {
     height: 100vh;
     width: 400px;
-    background-color: #ffffff;
-    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
+    background-color: #fff;
+    box-shadow: -8px 0 32px rgb(0 0 0 / 12%), -2px 0 8px rgb(0 0 0 / 8%);
     transform: translateX(100%);
-    transition: transform 0.3s ease-in-out;
+    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     display: flex;
     flex-direction: column;
-    border-left: 1px solid #e0e0e0;
+    border-left: 1px solid #d8dde6;
+    backdrop-filter: blur(20px);
 }
 
-.chat-container--open {
+.chat-container_open {
     transform: translateX(0);
 }
 
-.chat-container--disabled {
+.chat-container_disabled {
     opacity: 0.6;
     pointer-events: none;
 }
 
 .chat-header {
-    background-color: #f8f9fa;
-    padding: 16px;
-    border-bottom: 1px solid #e0e0e0;
+    background: linear-gradient(135deg, #0176d3 0%, #005fb2 100%);
+    padding: 18px 24px;
+    border-bottom: 1px solid rgb(1 118 211 / 20%);
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-shrink: 0;
+    backdrop-filter: blur(10px);
+    position: relative;
+}
+
+.chat-header::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgb(255 255 255 / 5%) 0%, rgb(255 255 255 / 1%) 100%);
+    pointer-events: none;
 }
 
 .chat-header-actions {
@@ -129,28 +146,31 @@ body.chat-closed .global-header {
 
 .chat-close-button,
 .chat-clear-button {
-    width: 32px;
-    height: 32px;
+    width: 36px;
+    height: 36px;
     border: none;
-    background: none;
+    background: rgb(255 255 255 / 15%);
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 4px;
-    transition: background-color 0.2s ease;
-    color: #666666;
+    border-radius: 8px;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    color: white;
+    position: relative;
+    z-index: 1;
 }
 
 .chat-close-button:hover,
 .chat-clear-button:hover {
-    background-color: #e9ecef;
-    color: #333333;
+    background: rgb(255 255 255 / 25%);
+    transform: scale(1.05);
+    color: white;
 }
 
 .chat-clear-button:hover {
-    background-color: #fee;
-    color: #dc3545;
+    background: rgb(255 82 82 / 20%);
+    color: #ff6b6b;
 }
 
 .close-icon,
@@ -161,24 +181,30 @@ body.chat-closed .global-header {
 
 .chat-title {
     margin: 0;
-    font-size: 18px;
-    font-weight: 600;
-    color: #333333;
+    font-size: 20px;
+    font-weight: 700;
+    color: white;
     flex: 1;
+    position: relative;
+    z-index: 1;
+    letter-spacing: -0.02em;
 }
 
 .chat-messages {
     flex: 1;
     overflow-y: auto;
-    padding: 16px;
+    padding: 24px 20px;
     scroll-behavior: smooth;
     min-height: 0;
+    background: linear-gradient(180deg, #fafbfc 0%, #f7f9fb 100%);
 }
 
 .message-wrapper {
-    margin-bottom: 16px;
+    margin-bottom: 20px;
     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"] {
@@ -189,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;
@@ -201,35 +341,43 @@ body.chat-closed .global-header {
 }
 
 .message-bubble {
-    padding: 12px 16px;
-    border-radius: 18px;
+    padding: 14px 18px;
+    border-radius: 20px;
     word-wrap: break-word;
     max-width: 100%;
+    position: relative;
+    backdrop-filter: blur(10px);
+    box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
 }
 
 .message-wrapper[data-sender="user"] .message-bubble {
-    background-color: #0066cc;
+    background: linear-gradient(135deg, #0176d3 0%, #005fb2 100%);
     color: white;
+    border-bottom-right-radius: 8px;
 }
 
 .message-wrapper[data-sender="assistant"] .message-bubble {
-    background-color: #f0f0f0;
-    color: #333333;
+    background: white;
+    color: #181818;
+    border: 1px solid #e5e7ea;
+    border-bottom-left-radius: 8px;
 }
 
 .message-text {
     margin: 0;
-    line-height: 1.4;
-    font-size: 14px;
+    line-height: 1.5;
+    font-size: 15px;
+    font-weight: 400;
 }
 
 .message-timestamp {
     font-size: 12px;
-    color: #666666;
-    margin-top: 4px;
+    color: #706e6b;
+    margin-top: 6px;
     display: flex;
     align-items: center;
     gap: 4px;
+    font-weight: 400;
 }
 
 .message-sender {
@@ -252,7 +400,7 @@ body.chat-closed .global-header {
     width: 8px;
     height: 8px;
     border-radius: 50%;
-    background-color: #666666;
+    background-color: #0176d3;
     animation: typing 1.4s infinite ease-in-out both;
 }
 
@@ -265,21 +413,37 @@ body.chat-closed .global-header {
 }
 
 @keyframes typing {
-    0%, 80%, 100% {
+    0%,
+    80%,
+    100% {
         transform: scale(0);
         opacity: 0.5;
     }
+
     40% {
         transform: scale(1);
         opacity: 1;
     }
 }
 
+@keyframes message-slide-in {
+    from {
+        opacity: 0;
+        transform: translateY(12px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
 .chat-input-area {
-    border-top: 1px solid #e0e0e0;
-    padding: 16px;
-    background-color: #ffffff;
+    border-top: 1px solid #e5e7ea;
+    padding: 20px 24px;
+    background: white;
     flex-shrink: 0;
+    backdrop-filter: blur(20px);
 }
 
 .chat-input-container {
@@ -290,18 +454,22 @@ body.chat-closed .global-header {
 
 .chat-input {
     flex: 1;
-    padding: 12px 16px;
-    border: 1px solid #e0e0e0;
-    border-radius: 20px;
-    font-size: 14px;
+    padding: 14px 18px;
+    border: 2px solid #d8dde6;
+    border-radius: 24px;
+    font-size: 15px;
     outline: none;
-    background-color: #f8f9fa;
-    transition: border-color 0.2s ease;
+    background-color: #fafbfc;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    font-family: inherit;
+    line-height: 1.4;
 }
 
 .chat-input:focus {
-    border-color: #0066cc;
-    background-color: #ffffff;
+    border-color: #0176d3;
+    background-color: #fff;
+    box-shadow: 0 0 0 3px rgb(1 118 211 / 10%);
+    transform: translateY(-1px);
 }
 
 .chat-input:disabled {
@@ -310,26 +478,32 @@ body.chat-closed .global-header {
 }
 
 .chat-send-button {
-    width: 40px;
-    height: 40px;
+    width: 44px;
+    height: 44px;
     border: none;
     border-radius: 50%;
-    background-color: #0066cc;
+    background: linear-gradient(135deg, #0176d3 0%, #005fb2 100%);
     color: white;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: background-color 0.2s ease;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 4px 12px rgb(1 118 211 / 25%);
+    margin-left: 12px;
 }
 
 .chat-send-button:hover:not(:disabled) {
-    background-color: #0052a3;
+    background: linear-gradient(135deg, #005fb2 0%, #003e73 100%);
+    transform: scale(1.05);
+    box-shadow: 0 6px 16px rgb(1 118 211 / 35%);
 }
 
 .chat-send-button:disabled {
-    background-color: #cccccc;
+    background: #d8dde6;
     cursor: not-allowed;
+    transform: none;
+    box-shadow: none;
 }
 
 .send-icon {
@@ -340,10 +514,10 @@ body.chat-closed .global-header {
 /* Responsive design */
 @media (max-width: 768px) {
     .chat-trigger-button {
-        width: 50px;
-        height: 50px;
-        bottom: 15px;
-        right: 15px;
+        width: 56px;
+        height: 56px;
+        bottom: 16px;
+        right: 16px;
     }
     
     .chat-icon {
@@ -362,12 +536,42 @@ body.chat-closed .global-header {
         transform: translateX(100%);
     }
     
-    .chat-container--open {
+    .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: 90%;
+        max-width: 85%;
+    }
+
+    .avatar-container {
+        width: 32px;
+        height: 32px;
+    }
+
+    .avatar-icon {
+        width: 28px;
+        height: 28px;
+    }
+
+    .message-wrapper {
+        gap: 10px;
     }
 }
 
@@ -378,32 +582,47 @@ body.chat-closed .global-header {
         bottom: 10px;
         right: 10px;
     }
-    
+
     .chat-icon {
         width: 20px;
         height: 20px;
     }
-    
+
     .chat-trigger-text {
         font-size: 7px;
         margin-top: 16px;
     }
-    
+
     .chat-container {
         width: 100%;
     }
-    
+
     .chat-header {
         padding: 12px;
     }
-    
+
     .chat-messages {
         padding: 12px;
     }
-    
+
     .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 */
@@ -411,30 +630,47 @@ body.chat-closed .global-header {
     .chat-trigger-button {
         animation: none;
     }
-    
+
     .typing-dot {
         animation: none;
     }
-    
+
     .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 */
 @media (prefers-contrast: high) {
     .chat-container {
-        border: 2px solid #000000;
+        border: 2px solid #000;
     }
-    
+
     .message-wrapper[data-sender="user"] .message-bubble {
-        background-color: #000000;
-        color: #ffffff;
+        background-color: #000;
+        color: #fff;
     }
-    
+
     .message-wrapper[data-sender="assistant"] .message-bubble {
-        background-color: #ffffff;
-        color: #000000;
-        border: 1px solid #000000;
+        background-color: #fff;
+        color: #000;
+        border: 1px solid #000;
     }
-} 
+}

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

@@ -1,13 +1,23 @@
 <template>
     <!-- Floating trigger button - visible when chat is closed -->
     <template lwc:if={showTriggerButton}>
-        <button 
+        <button
             class="chat-trigger-button"
             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
+                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>
             <!-- <span class="chat-trigger-text">Chat</span> -->
         </button>
@@ -18,31 +28,94 @@
         <div class="chat-header">
             <h3 class="chat-title">{title}</h3>
             <div class="chat-header-actions">
-                <button 
+                <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
+                        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 
+                <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
+                        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">
             <template for:each={messagesWithTyping} for:item="message">
-                <div key={message.id} class="message-wrapper" data-sender={message.sender}>
+                <div
+                    key={message.id}
+                    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}>
@@ -72,29 +145,39 @@
                 </div>
             </template>
         </div>
-        
+
         <div class="chat-input-area">
             <div class="chat-input-container">
-                <input 
-                    type="text" 
-                    class="chat-input" 
+                <input
+                    type="text"
+                    class="chat-input"
                     placeholder={placeholder}
                     value={currentMessage}
                     oninput={handleInputChange}
                     onkeydown={handleKeyDown}
                     disabled={disabled}
                 />
-                <button 
+                <button
                     class="chat-send-button"
                     onclick={handleSendClick}
                     disabled={sendButtonDisabled}
                     aria-label="Send message"
                 >
-                    <svg class="send-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
+                    <svg
+                        class="send-icon"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
+                        />
                     </svg>
                 </button>
             </div>
         </div>
     </div>
-</template> 
+</template>

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

@@ -16,7 +16,7 @@ export default class Chat extends LightningElement {
     @api placeholder: string = "Type your message...";
     @api assistantName: string = "Assistant";
     @api maxHeight: string = "400px";
-    
+
     @api
     get disabled() {
         return this._disabled;
@@ -47,42 +47,42 @@ export default class Chat extends LightningElement {
     @track messages: ChatMessage[] = [];
     @track currentMessage: string = "";
     @track isAssistantTyping: boolean = false;
-    
+
     private _disabled: boolean = false;
     private _showTimestamp: boolean = false;
     private _isOpen: boolean = false;
     private messageIdCounter: number = 0;
-    
+
     // 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';
+    private static readonly STORAGE_KEY = "doc-chat-messages";
+    private static readonly OPEN_STATE_KEY = "doc-chat-should-open";
 
     connectedCallback() {
         // 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");
         }
-        
+
         // Check if chat should be opened after reload
         this.checkAndOpenAfterReload();
-        
+
         // 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');
+        document.body.classList.remove("chat-open", "chat-closed");
     }
 
     get chatContainerClass() {
         return cx(
             "chat-container",
-            this.disabled && "chat-container--disabled",
-            this.isOpen && "chat-container--open"
+            this.disabled && "chat-container_disabled",
+            this.isOpen && "chat-container_open"
         );
     }
 
@@ -123,7 +123,8 @@ export default class Chat extends LightningElement {
     private scrollToBottom() {
         // Use setTimeout to ensure DOM is updated
         setTimeout(() => {
-            const messagesContainer = this.template.querySelector('.chat-messages');
+            const messagesContainer =
+                this.template.querySelector(".chat-messages");
             if (messagesContainer) {
                 messagesContainer.scrollTop = messagesContainer.scrollHeight;
             }
@@ -133,26 +134,29 @@ export default class Chat extends LightningElement {
     private updateBodyClass() {
         // Update body classes to trigger content shift
         if (this.isOpen) {
-            document.body.classList.remove('chat-closed');
-            document.body.classList.add('chat-open');
+            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');
+            document.body.classList.remove("chat-open");
+            document.body.classList.add("chat-closed");
         }
     }
 
     private saveMessages() {
         try {
-            const messagesToSave = this.messages.map(msg => ({
+            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));
+            localStorage.setItem(
+                Chat.STORAGE_KEY,
+                JSON.stringify(messagesToSave)
+            );
         } catch (error) {
-            console.warn('Failed to save messages to localStorage:', error);
+            console.warn("Failed to save messages to localStorage:", error);
         }
     }
 
@@ -168,14 +172,22 @@ export default class Chat extends LightningElement {
                     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;
+                const lastId =
+                    this.messages.length > 0
+                        ? Math.max(
+                              ...this.messages.map(
+                                  (m) =>
+                                      parseInt(m.id.replace("msg-", ""), 10) ||
+                                      0
+                              )
+                          )
+                        : 0;
                 this.messageIdCounter = lastId + 1;
             }
         } catch (error) {
-            console.warn('Failed to load messages from localStorage:', error);
+            console.warn("Failed to load messages from localStorage:", error);
             this.messages = [];
         }
     }
@@ -188,27 +200,32 @@ export default class Chat extends LightningElement {
             // 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);
+            console.warn("Failed to clear messages from localStorage:", error);
         }
     }
 
     private checkAndOpenAfterReload() {
         try {
             const shouldOpen = localStorage.getItem(Chat.OPEN_STATE_KEY);
-            if (shouldOpen === 'true') {
+            if (shouldOpen === "true") {
                 // Clear the flag
                 localStorage.removeItem(Chat.OPEN_STATE_KEY);
                 // Open the chat
-                this.isOpen = true;
+                this._isOpen = true;
                 this.updateBodyClass();
-                
+
                 // Dispatch custom event to notify parent components
-                this.dispatchEvent(new CustomEvent('chatopened', {
-                    detail: { opened: true }
-                }));
+                this.dispatchEvent(
+                    new CustomEvent("chatopened", {
+                        detail: { opened: true }
+                    })
+                );
             }
         } catch (error) {
-            console.warn('Failed to check open state from localStorage:', error);
+            console.warn(
+                "Failed to check open state from localStorage:",
+                error
+            );
         }
     }
 
@@ -218,7 +235,7 @@ export default class Chat extends LightningElement {
     }
 
     handleKeyDown(event: KeyboardEvent) {
-        if (event.key === 'Enter' && !event.shiftKey) {
+        if (event.key === "Enter" && !event.shiftKey) {
             event.preventDefault();
             this.sendMessage();
         }
@@ -239,14 +256,16 @@ export default class Chat extends LightningElement {
         this.currentMessage = "";
 
         // Clear input
-        const input = this.template.querySelector('.chat-input') as HTMLInputElement;
+        const input = this.template.querySelector(
+            ".chat-input"
+        ) as HTMLInputElement;
         if (input) {
             input.value = "";
         }
 
         // Simulate assistant typing
         this.isAssistantTyping = true;
-        
+
         // Simulate assistant response after a delay
         setTimeout(() => {
             this.isAssistantTyping = false;
@@ -257,22 +276,34 @@ export default class Chat extends LightningElement {
     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")) {
+
+        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?";
+            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?";
+            response =
+                "That's an interesting question. Let me help you with that. Could you provide more details about what you're looking for?";
         }
 
         this.addMessage(response, "assistant");
     }
 
     formatTimestamp(timestamp: Date) {
-        return timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+        return timestamp.toLocaleTimeString([], {
+            hour: "2-digit",
+            minute: "2-digit"
+        });
     }
 
     get sendButtonDisabled() {
@@ -280,32 +311,35 @@ export default class Chat extends LightningElement {
     }
 
     handleCloseClick() {
-        this.isOpen = false;
+        this._isOpen = false;
         this.updateBodyClass();
-        
+
         // Dispatch custom event to notify parent components
-        this.dispatchEvent(new CustomEvent('chatclosed', {
-            detail: { closed: true }
-        }));
+        this.dispatchEvent(
+            new CustomEvent("chatclosed", {
+                detail: { closed: true }
+            })
+        );
     }
 
     handleClearClick() {
         this.clearMessages();
-        
+
         // Dispatch custom event to notify parent components
-        this.dispatchEvent(new CustomEvent('chatcleared', {
-            detail: { cleared: true }
-        }));
+        this.dispatchEvent(
+            new CustomEvent("chatcleared", {
+                detail: { cleared: true }
+            })
+        );
     }
 
     handleOpenClick() {
         try {
             // Set flag to open chat after reload
-            localStorage.setItem(Chat.OPEN_STATE_KEY, 'true');
+            localStorage.setItem(Chat.OPEN_STATE_KEY, "true");
         } catch (error) {
-            console.warn('Failed to set open state in localStorage:', error);
+            console.warn("Failed to set open state in localStorage:", error);
         }
-        
         // Hard reload the page to clear cache when opening chat
         window.location.reload();
     }
@@ -313,22 +347,24 @@ export default class Chat extends LightningElement {
     openChat() {
         try {
             // Set flag to open chat after reload
-            localStorage.setItem(Chat.OPEN_STATE_KEY, 'true');
+            localStorage.setItem(Chat.OPEN_STATE_KEY, "true");
         } catch (error) {
-            console.warn('Failed to set open state in localStorage:', error);
+            console.warn("Failed to set open state in localStorage:", error);
         }
-        
+
         // Hard reload the page to clear cache when opening chat
         window.location.reload();
     }
 
     closeChat() {
-        this.isOpen = false;
+        this._isOpen = false;
         this.updateBodyClass();
-        
+
         // Dispatch custom event to notify parent components
-        this.dispatchEvent(new CustomEvent('chatclosed', {
-            detail: { closed: true }
-        }));
+        this.dispatchEvent(
+            new CustomEvent("chatclosed", {
+                detail: { closed: true }
+            })
+        );
     }
-} 
+}