@a.izzuddin/ai-chat 0.2.21-beta.3 → 0.2.21-beta.4

package/dist/index.js

@@ -5952,22 +5952,16 @@ ${this.welcomeSubtitle}` : this.welcomeMessage;
               <div class="message-content">
                 <div class="message-text">${unsafeHtml_js.unsafeHTML(this.formatMessageContent(msg.content))}</div>
                 ${msg.role === "assistant" && msg.confidence && !msg.confidence.is_confident ? lit.html`
-                  <div class="low-confidence-warning">
-                    <svg class="warning-icon" viewBox="0 0 24 24" fill="currentColor">
-                      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
-                    </svg>
-                    <div style="display: flex; flex-direction: column; gap: 0.5rem;">
-                      <span>${this.lowConfidenceMessage}</span>
-                      <a
-                        href="${this.contactSupportUrl}"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class="contact-support-button"
-                        style="--primary-color: ${this.primaryColor}; --primary-color-hover: ${this.primaryColorHover};"
-                      >
-                        ${this.contactSupportMessage}
-                      </a>
-                    </div>
+                  <div class="contact-support-container">
+                    <a
+                      href="${this.contactSupportUrl}"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      class="contact-support-button"
+                      style="--primary-color: ${this.primaryColor}; --primary-color-hover: ${this.primaryColorHover};"
+                    >
+                      ${this.contactSupportMessage}
+                    </a>
                   </div>
                 ` : ""}
                 ${msg.role === "assistant" && this.showRelatedFaqs && msg.faqs && msg.faqs.length > 0 ? lit.html`
@@ -6816,36 +6810,55 @@ exports.AIChat.styles = lit.css`
       color: #FCD34D;
     }
 
+    .contact-support-container {
+      position: sticky;
+      bottom: 0.5rem;
+      z-index: 10;
+      margin-top: 0.75rem;
+      padding-bottom: 0;
+      display: flex;
+      justify-content: center;
+      pointer-events: none;
+    }
+
     .contact-support-button {
-      margin-top: 0.5rem;
-      padding: 0.5rem 1rem;
-      background: var(--primary-color, #3681D3);
-      color: #fff;
-      border: none;
-      border-radius: 0.5rem;
+      padding: 0.625rem 1.25rem;
+      background: #fff;
+      color: var(--primary-color, #3681D3);
+      border: 1.5px solid var(--primary-color, #3681D3);
+      border-radius: 1.5rem;
       font-size: 0.875rem;
       font-weight: 500;
       cursor: pointer;
-      transition: background-color 0.2s, transform 0.1s;
+      transition: all 0.2s ease;
       display: inline-block;
       text-decoration: none;
+      white-space: nowrap;
+      pointer-events: auto;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     }
 
     .contact-support-button:hover {
-      background: var(--primary-color-hover, #3457C7);
+      background: var(--primary-color, #3681D3);
+      color: #fff;
       transform: translateY(-1px);
+      box-shadow: 0 2px 8px rgba(54, 129, 211, 0.25);
     }
 
     .contact-support-button:active {
       transform: translateY(0);
+      box-shadow: 0 1px 4px rgba(54, 129, 211, 0.2);
     }
 
     :host([theme="dark"]) .contact-support-button {
-      background: var(--primary-color, #3681D3);
+      background: #18181b;
+      color: var(--primary-color-light, #5B7FE8);
+      border-color: var(--primary-color-light, #5B7FE8);
     }
 
     :host([theme="dark"]) .contact-support-button:hover {
-      background: var(--primary-color-hover, #3457C7);
+      background: var(--primary-color-light, #5B7FE8);
+      color: #18181b;
     }
 
     .loading {