@a.izzuddin/ai-chat 0.2.24 → 0.2.25-beta.3

package/dist/index.js

@@ -5399,7 +5399,7 @@ exports.AIChat = class AIChat extends lit.LitElement {
     this.widgetHeight = "600px";
     this.primaryColor = "#3681D3";
     this.primaryColorHover = "#3457C7";
-    this.userMessageBg = "#D6E4FF";
+    this.userMessageBg = "#1a4fbd";
     this.botMessageBg = "#F5F5F5";
     this.welcomeMessage = "How can I help you today?";
     this.welcomeSubtitle = "";
@@ -6234,6 +6234,14 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
                 </svg>`}
           </div>
           <h1 class="title">${this.chatTitle}</h1>
+          ${this.mode === "widget" ? lit.html`
+            <button class="header-close-button" @click=${this.toggleWidget} aria-label="Close chat">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                <line x1="18" y1="6" x2="6" y2="18"></line>
+                <line x1="6" y1="6" x2="18" y2="18"></line>
+              </svg>
+            </button>
+          ` : ""}
         </div>
       </div>
 
@@ -6270,7 +6278,7 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
                   ` : ""}
                   ${msg.role === "assistant" && msg.suggestedQuestions && msg.suggestedQuestions.length > 0 ? lit.html`
                     <div class="faq-section">
-                      <p class="faq-title">Cadangan Soalan:</p>
+                      <p class="faq-title">${this.language === "ms" || this.language === "my" ? "Cadangan Soalan:" : "Suggested Questions:"}</p>
                       <ul class="faq-list">
                         ${msg.suggestedQuestions.map((question) => lit.html`
                           <li class="faq-item" @click=${(e) => this.handleFAQClick(question, e)}>
@@ -6304,7 +6312,9 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
                 ${this.botAvatarUrl ? lit.html`<img src="${this.botAvatarUrl}" alt="AI" class="avatar-image" />` : "AI"}
               </div>
               <div class="message-content">
-                <div class="spinner"></div>
+                <div class="spinner">
+                  <span></span><span></span><span></span>
+                </div>
               </div>
             </div>
           ` : ""}
@@ -6317,7 +6327,7 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
           <input
             type="text"
             class="input-field"
-            placeholder="Taip mesej anda..."
+            placeholder="${this.language === "ms" || this.language === "my" ? "Taip mesej anda..." : "Type your message..."}"
             .value=${this.input}
             @input=${this.handleInput}
             ?disabled=${this.isLoading}
@@ -6328,14 +6338,10 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
             ?disabled=${this.isLoading || !this.input.trim()}
             aria-label="Send message"
           >
-            ${this.isLoading ? lit.html`
-              <div class="spinner" style="border-color: #fff; border-top-color: transparent;"></div>
-            ` : lit.html`
-              <svg class="send-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <line x1="22" y1="2" x2="11" y2="13"></line>
-                <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
-              </svg>
-            `}
+            <svg class="send-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <line x1="22" y1="2" x2="11" y2="13"></line>
+              <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+            </svg>
           </button>
         </form>
       </div>
@@ -6355,22 +6361,23 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
             ${this.renderChatUI()}
           </div>
 
+          <!-- Speech Bubble -->
+          ${!this.isOpen ? lit.html`
+            <div class="widget-speech-bubble">${this.language === "ms" || this.language === "my" ? "Perlukan bantuan? Sembang dengan saya!" : "Need help? Chat with me!"}</div>
+          ` : ""}
+
           <!-- Toggle Button -->
           <button
             class=${classMap_js.classMap({
         "widget-button": true,
-        "widget-button-no-bg": !this.isOpen && !!this.widgetIconUrl
+        "widget-button-no-bg": !!this.widgetIconUrl,
+        "widget-button-hidden": this.isOpen
       })}
             style="--primary-color: ${this.primaryColor}; --primary-color-light: ${primaryColorLight};"
             @click=${this.toggleWidget}
             aria-label=${this.isOpen ? "Close chat" : "Open chat"}
           >
-            ${this.isOpen ? lit.html`
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <line x1="18" y1="6" x2="6" y2="18"></line>
-                <line x1="6" y1="6" x2="18" y2="18"></line>
-              </svg>
-            ` : this.widgetIconUrl ? lit.html`
+            ${this.widgetIconUrl ? lit.html`
               <img src="${this.widgetIconUrl}" alt="Chat" class="widget-button-icon" />
             ` : lit.html`
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -6416,8 +6423,8 @@ exports.AIChat.styles = lit.css`
     }
 
     .widget-button {
-      width: 60px;
-      height: 60px;
+      width: 80px;
+      height: 80px;
       border-radius: 50%;
       background: #3681D3;
       border: none;
@@ -6446,6 +6453,43 @@ exports.AIChat.styles = lit.css`
       transform: scale(1.1);
     }
 
+    .widget-button-hidden {
+      display: none;
+    }
+
+    .widget-speech-bubble {
+      position: absolute;
+      bottom: 22px;
+      right: 90px;
+      background: #fff;
+      color: #333;
+      font-size: 0.875rem;
+      font-weight: 500;
+      padding: 0.5rem 0.875rem;
+      border-radius: 1rem 1rem 0.25rem 1rem;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+      white-space: nowrap;
+      opacity: 0;
+      transform: translateX(8px);
+      transition: opacity 0.2s, transform 0.2s;
+      pointer-events: none;
+    }
+
+    .widget-speech-bubble::after {
+      content: '';
+      position: absolute;
+      bottom: 6px;
+      right: -8px;
+      border-width: 6px 0 6px 8px;
+      border-style: solid;
+      border-color: transparent transparent transparent #fff;
+    }
+
+    .widget-container:hover .widget-speech-bubble {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
     .widget-button svg {
       width: 28px;
       height: 28px;
@@ -6453,15 +6497,15 @@ exports.AIChat.styles = lit.css`
     }
 
     .widget-button-icon {
-      width: 60px;
-      height: 60px;
+      width: 80px;
+      height: 80px;
       object-fit: contain;
       border-radius: 50%;
     }
 
     .widget-window {
       position: absolute;
-      bottom: 80px;
+      bottom: 0;
       right: 0;
       width: var(--widget-width, 380px);
       height: var(--widget-height, 600px);
@@ -6509,18 +6553,18 @@ exports.AIChat.styles = lit.css`
       .widget-window {
         width: calc(100vw - 40px);
         height: 70vh;
-        bottom: 80px;
+        bottom: 0;
         right: 0;
       }
 
       .widget-button {
-        width: 56px;
-        height: 56px;
+        width: 68px;
+        height: 68px;
       }
 
       .widget-button svg {
-        width: 24px;
-        height: 24px;
+        width: 28px;
+        height: 28px;
       }
     }
 
@@ -6529,33 +6573,18 @@ exports.AIChat.styles = lit.css`
       .widget-window {
         width: var(--widget-width, 500px);
         height: calc(100vh - 100px);
-        bottom: 80px;
+        bottom: 0;
         right: 0;
       }
 
       .widget-button {
-        width: 56px;
-        height: 56px;
+        width: 68px;
+        height: 68px;
       }
 
       .widget-button svg {
-        width: 24px;
-        height: 24px;
-      }
-    }
-
-    /* Desktop responsive styles - reduce excessive margins on large screens */
-    @media (min-width: 1025px) {
-      .message.user {
-        margin-left: 2rem;
-      }
-
-      .message.assistant {
-        margin-right: 1.5rem;
-      }
-
-      .contact-support-wrapper {
-        margin-left: 1.5rem;
+        width: 28px;
+        height: 28px;
       }
     }
 
@@ -6587,11 +6616,11 @@ exports.AIChat.styles = lit.css`
       }
 
       .message.user {
-        margin-left: 3.5rem;
+        margin-left: 0;
       }
 
       .message.assistant {
-        margin-right: 2.75rem;
+        margin-right: 0;
       }
 
       .avatar {
@@ -6607,7 +6636,7 @@ exports.AIChat.styles = lit.css`
       }
 
       .message.user .message-content {
-        max-width: 85%;
+        max-width: 100%;
       }
 
       .empty-state {
@@ -6683,11 +6712,11 @@ exports.AIChat.styles = lit.css`
       }
 
       .message.user {
-        margin-left: 3rem;
+        margin-left: 0;
       }
 
       .message.assistant {
-        margin-right: 2.25rem;
+        margin-right: 0;
       }
 
       .avatar {
@@ -6703,7 +6732,7 @@ exports.AIChat.styles = lit.css`
       }
 
       .message.user .message-content {
-        max-width: 80%;
+        max-width: 100%;
       }
 
       .empty-state {
@@ -6782,6 +6811,30 @@ exports.AIChat.styles = lit.css`
       color: #fff;
     }
 
+    .header-close-button {
+      background: none;
+      border: none;
+      cursor: pointer;
+      color: #fff;
+      padding: 0.3rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-left: auto;
+      border-radius: 50%;
+      transition: background 0.2s;
+      flex-shrink: 0;
+    }
+
+    .header-close-button:hover {
+      background: rgba(255, 255, 255, 0.2);
+    }
+
+    .header-close-button svg {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+
     .messages-area {
       flex: 1;
       overflow-y: auto;
@@ -6900,11 +6953,11 @@ exports.AIChat.styles = lit.css`
     .message.user {
       flex-direction: row-reverse;
       justify-content: flex-end;
-      margin-left: 5rem;
+      margin-left: 0;
     }
 
     .message.assistant {
-      margin-right: 3.5rem;
+      margin-right: 0;
     }
 
     .avatar {
@@ -6934,38 +6987,46 @@ exports.AIChat.styles = lit.css`
     }
 
     .message-content {
-      max-width: 36rem;
+      width: fit-content;
+      max-width: 100%;
       border-radius: 1.25rem;
-      line-height: 1.6;
+      line-height: 1.65;
       overflow-wrap: break-word;
       word-wrap: break-word;
       min-width: 0;
       font-size: 1.2rem;
-      padding: 1rem 1.5rem;
+      padding: 0.875rem 1.125rem;
+      letter-spacing: 0.01em;
     }
 
     .message.user .message-content {
-      background: var(--user-message-bg, #D6E4FF);
-      color: #1a1a1a;
+      background: var(--user-message-bg, #0D47A1);
+      color: #ffffff;
       border-radius: 1.25rem 0.25rem 1.25rem 1.25rem;
-      max-width: 26rem;
+      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
+      max-width: 100%;
       margin-left: auto;
     }
 
     .message.assistant .message-content {
-      background: var(--bot-message-bg, #F5F5F5);
-      color: #1a1a1a;
+      flex: 1;
+      background: var(--bot-message-bg, #f0f2f5);
+      color: #1a1a2e;
       border-radius: 0.25rem 1.25rem 1.25rem 1.25rem;
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+      border: 1px solid rgba(0, 0, 0, 0.06);
     }
 
     :host([theme="dark"]) .message.user .message-content {
-      background: #3D5A99;
+      background: #1a4fbd;
       color: #fff;
+      box-shadow: 0 2px 8px rgba(29, 78, 216, 0.4);
     }
 
     :host([theme="dark"]) .message.assistant .message-content {
       background: #27272a;
-      color: #fafafa;
+      color: #e4e4e7;
+      border-color: rgba(255, 255, 255, 0.06);
     }
 
     .message-text {
@@ -7221,17 +7282,29 @@ exports.AIChat.styles = lit.css`
     }
 
     .spinner {
+      display: flex;
+      align-items: center;
+      gap: 0.35rem;
+      padding: 0.25rem 0;
+    }
+
+    .spinner span {
       display: inline-block;
-      width: 1.25rem;
-      height: 1.25rem;
-      border: 2px solid #e4e4e7;
-      border-top-color: #71717a;
+      width: 0.55rem;
+      height: 0.55rem;
+      background-color: var(--primary-color, #3681D3);
       border-radius: 50%;
-      animation: spin 1s linear infinite;
+      animation: dot-pulse 1.4s ease-in-out infinite;
+      opacity: 0.3;
     }
 
-    @keyframes spin {
-      to { transform: rotate(360deg); }
+    .spinner span:nth-child(1) { animation-delay: 0s; }
+    .spinner span:nth-child(2) { animation-delay: 0.2s; }
+    .spinner span:nth-child(3) { animation-delay: 0.4s; }
+
+    @keyframes dot-pulse {
+      0%, 100% { transform: scale(1); opacity: 0.3; }
+      50% { transform: scale(1.5); opacity: 1; }
     }
 
     .input-area {