@ihoomanai/chat-widget 2.5.1 → 2.5.3

package/src/widget.ts

@@ -259,7 +259,8 @@ function generateStyles(): string {
   return `
     .ihooman-widget * { box-sizing: border-box; margin: 0; padding: 0; }
     .ihooman-widget { font-family: ${fontFamily}; font-size: 14px; line-height: 1.5; color: ${textColor}; -webkit-font-smoothing: antialiased; }
-    .ihooman-toggle { position: fixed; ${positionRight ? 'right: 20px' : 'left: 20px'}; ${positionBottom ? 'bottom: 20px' : 'top: 20px'}; width: ${buttonSize}px; height: ${buttonSize}px; border-radius: 50%; background: linear-gradient(135deg, ${gradientFrom}, ${gradientTo}); border: none; cursor: pointer; z-index: ${zIndex}; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0, 174, 255, 0.35); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; }
+    .ihooman-widget button { border-radius: 8px; }
+    .ihooman-toggle { position: fixed; ${positionRight ? 'right: 20px' : 'left: 20px'}; ${positionBottom ? 'bottom: 20px' : 'top: 20px'}; width: ${buttonSize}px; height: ${buttonSize}px; border-radius: 50% !important; background: linear-gradient(135deg, ${gradientFrom}, ${gradientTo}); border: none; cursor: pointer; z-index: ${zIndex}; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0, 174, 255, 0.35); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; }
     .ihooman-toggle:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(0, 174, 255, 0.45); }
     .ihooman-toggle:active { transform: scale(0.95); }
     .ihooman-toggle::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(255,255,255,0.2), transparent); border-radius: 50%; }
@@ -273,7 +274,7 @@ function generateStyles(): string {
     .ihooman-toggle.open .ihooman-pulse { display: none; }
     .ihooman-badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px; background: #ef4444; color: white; font-size: 11px; font-weight: 600; border-radius: 10px; display: flex; align-items: center; justify-content: center; z-index: 2; }
     .ihooman-badge:empty { display: none; }
-    .ihooman-window { position: fixed; ${positionRight ? 'right: 20px' : 'left: 20px'}; ${positionBottom ? 'bottom: 90px' : 'top: 90px'}; width: ${width}px; height: ${height}px; max-height: calc(100vh - 120px); z-index: ${(zIndex ?? 9999) - 1}; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(20px) scale(0.95); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
+    .ihooman-window { position: fixed; ${positionRight ? 'right: 20px' : 'left: 20px'}; ${positionBottom ? 'bottom: 90px' : 'top: 90px'}; width: ${width}px; height: ${height}px; max-height: calc(100vh - 120px); z-index: ${(zIndex ?? 9999) - 1}; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(20px) scale(0.95); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); overscroll-behavior: contain; }
     .ihooman-window.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
     .ihooman-container { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; border-radius: ${borderRadius}px; overflow: hidden; }
     .ihooman-container::before { content: ''; position: absolute; inset: 0; background: ${bgColor}; opacity: 0.97; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: ${borderRadius}px; border: 1px solid ${borderColor}; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
@@ -291,7 +292,7 @@ function generateStyles(): string {
     .ihooman-header-btn { width: 32px; height: 32px; border-radius: 8px !important; background: rgba(255,255,255,0.15); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: white; transition: background 0.2s; }
     .ihooman-header-btn:hover { background: rgba(255,255,255,0.25); }
     .ihooman-header-btn svg { width: 16px; height: 16px; }
-    .ihooman-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: ${bgColor}; }
+    .ihooman-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: ${bgColor}; overscroll-behavior: contain; }
     .ihooman-messages::-webkit-scrollbar { width: 6px; }
     .ihooman-messages::-webkit-scrollbar-track { background: transparent; }
     .ihooman-messages::-webkit-scrollbar-thumb { background: ${borderColor}; border-radius: 3px; }
@@ -359,7 +360,7 @@ function generateStyles(): string {
     .ihooman-history-new { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, ${gradientFrom}, ${gradientTo}); color: white; border: none; padding: 8px 16px; border-radius: 8px !important; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s; }
     .ihooman-history-new:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 174, 255, 0.3); }
     .ihooman-history-new svg { width: 14px; height: 14px; flex-shrink: 0; }
-    .ihooman-history-list { flex: 1; overflow-y: auto; padding: 8px; }
+    .ihooman-history-list { flex: 1; overflow-y: auto; padding: 8px; overscroll-behavior: contain; }
     .ihooman-history-item { padding: 12px; border: 1px solid ${borderColor}; border-radius: 8px; margin-bottom: 6px; cursor: pointer; transition: all 0.2s; background: ${bgColor}; }
     .ihooman-history-item:hover { background: ${isDark ? 'rgba(255,255,255,0.05)' : '#f8fafc'}; }
     .ihooman-history-item.active { background: ${isDark ? 'rgba(0, 174, 255, 0.1)' : '#eff6ff'}; border-color: ${primaryColor}; }
@@ -438,7 +439,7 @@ function createWidget(): void {
         <div class="ihooman-history-view">
           <div class="ihooman-history-header">
             <span class="ihooman-history-title">Your Conversations</span>
-            <button class="ihooman-history-new">${icons.plus} New Chat</button>
+            <button class="ihooman-history-new" style="display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, ${config.gradientFrom}, ${config.gradientTo}); color: white; border: none; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer;">${icons.plus} New Chat</button>
           </div>
           <div class="ihooman-history-list"></div>
         </div>
@@ -560,13 +561,18 @@ function addMessage(content: string, sender: 'user' | 'bot' = 'bot', metadata: M
   
   let escalationButtonsHtml = '';
   if (showEscalationButtons) {
+    // Use inline styles to ensure buttons are rectangular regardless of external CSS
+    const btnBaseStyle = 'display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 8px; border: none; cursor: pointer; font-size: 13px; font-weight: 500; transition: all 0.2s ease; width: auto; height: auto; min-width: 120px;';
+    const primaryStyle = `${btnBaseStyle} background: linear-gradient(135deg, ${config.gradientFrom}, ${config.gradientTo}); color: white;`;
+    const secondaryStyle = `${btnBaseStyle} background: rgba(0,0,0,0.05); color: inherit; border: 1px solid rgba(0,0,0,0.1);`;
+    
     escalationButtonsHtml = `
       <div class="ihooman-escalation-actions">
-        <button class="ihooman-escalation-btn primary" data-action="live-agent">
+        <button class="ihooman-escalation-btn primary" data-action="live-agent" style="${primaryStyle}">
           ${icons.agent}
           <span>Talk to Agent</span>
         </button>
-        <button class="ihooman-escalation-btn secondary" data-action="create-ticket">
+        <button class="ihooman-escalation-btn secondary" data-action="create-ticket" style="${secondaryStyle}">
           ${icons.ticket}
           <span>Create Ticket</span>
         </button>