@ihoomanai/chat-widget 3.0.9 → 3.0.11

package/src/widget.ts

@@ -17,7 +17,7 @@ import type {
   WidgetView,
 } from './types';
 
-const VERSION = '3.0.9';
+const VERSION = '3.0.11';
 const STORAGE_PREFIX = 'ihooman_chat_';
 const DEFAULT_SERVER_URL = 'https://api.ihooman.ai';
 
@@ -231,9 +231,21 @@ function generateStyles(): string {
   const positionBottom = config.position?.includes('bottom') ?? true;
 
   return `
-    .ihooman-widget * { box-sizing: border-box !important; margin: 0; padding: 0; }
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    :host { all: initial; }
     .ihooman-widget { font-family: ${fontFamily}; font-size: 14px; line-height: 1.5; color: ${textColor}; -webkit-font-smoothing: antialiased; }
-    .ihooman-widget button { box-sizing: border-box !important; cursor: pointer !important; font-family: inherit !important; appearance: none !important; -webkit-appearance: none !important; outline: none !important; }
+    button { 
+      font-family: inherit;
+      font-size: 100%;
+      line-height: inherit;
+      color: inherit;
+      margin: 0;
+      padding: 0;
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      outline: none;
+    }
     .ihooman-toggle { position: fixed !important; ${positionRight ? 'right: 20px' : 'left: 20px'}; ${positionBottom ? 'bottom: 20px' : 'top: 20px'}; width: ${buttonSize}px !important; height: ${buttonSize}px !important; border-radius: 50% !important; background: linear-gradient(135deg, ${gradientFrom}, ${gradientTo}) !important; border: none !important; cursor: pointer; z-index: ${zIndex}; display: flex !important; 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); }
@@ -300,8 +312,7 @@ function generateStyles(): string {
     .ihooman-powered { text-align: center; padding: 8px; font-size: 11px; color: ${mutedColor}; background: ${bgColor}; }
     .ihooman-powered a { color: ${primaryColor}; text-decoration: none; }
     .ihooman-escalation-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
-    .ihooman-widget .ihooman-escalation-btn { cursor: pointer !important; font-family: inherit !important; transition: all 0.2s ease !important; }
-    .ihooman-widget .ihooman-escalation-btn svg { width: 14px !important; height: 14px !important; flex-shrink: 0 !important; }
+    .ihooman-escalation-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
     .ihooman-status-bar { padding: 10px 16px; text-align: center; font-size: 13px; display: none; }
     .ihooman-status-bar.show { display: block; }
     .ihooman-status-bar.waiting { background: #fef3c7; color: #92400e; }
@@ -337,8 +348,7 @@ function generateStyles(): string {
     .ihooman-history-empty { padding: 40px; text-align: center; color: ${mutedColor}; font-size: 14px; }
     .ihooman-preset-questions { padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 6px; background: ${bgColor}; border-top: 1px solid ${borderColor}; }
     .ihooman-preset-questions:empty { display: none; }
-    .ihooman-preset-questions.hidden { display: none !important; }
-    .ihooman-widget .ihooman-preset-btn { cursor: pointer !important; font-family: inherit !important; transition: all 0.2s !important; }
+    .ihooman-preset-questions.hidden { display: none; }
     .ihooman-proactive-toast { position: fixed; ${positionRight ? 'right: 20px' : 'left: 20px'}; ${positionBottom ? 'bottom: 90px' : 'top: 90px'}; max-width: 300px; padding: 16px; background: ${bgColor}; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); z-index: ${(zIndex ?? 9999) - 2}; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s ease; border: 1px solid ${borderColor}; }
     .ihooman-proactive-toast.show { opacity: 1; visibility: visible; transform: translateY(0); }
     .ihooman-proactive-toast-content { font-size: 14px; color: ${textColor}; margin-bottom: 12px; }
@@ -361,8 +371,7 @@ function generateStyles(): string {
     .ihooman-survey-skip { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; background: transparent; color: ${mutedColor}; border: none; font-size: 12px; cursor: pointer; line-height: 1.4; }
     .ihooman-survey-skip:hover { color: ${textColor}; }
     .ihooman-feedback-btns { display: flex; gap: 6px; margin-top: 6px; }
-    .ihooman-widget .ihooman-feedback-btn { cursor: pointer !important; transition: all 0.2s !important; }
-    .ihooman-widget .ihooman-feedback-btn svg { width: 12px !important; height: 12px !important; }
+    .ihooman-feedback-btn svg { width: 12px; height: 12px; }
     .ihooman-carousel { display: flex; gap: 12px; overflow-x: auto; padding: 8px 0; scroll-snap-type: x mandatory; }
     .ihooman-carousel::-webkit-scrollbar { height: 4px; }
     .ihooman-carousel-card { min-width: 200px; max-width: 250px; border: 1px solid ${borderColor}; border-radius: 12px; overflow: hidden; scroll-snap-align: start; background: ${bgColor}; }
@@ -371,9 +380,7 @@ function generateStyles(): string {
     .ihooman-carousel-card-title { font-size: 14px; font-weight: 600; color: ${textColor}; margin-bottom: 4px; }
     .ihooman-carousel-card-desc { font-size: 12px; color: ${mutedColor}; margin-bottom: 8px; }
     .ihooman-carousel-card-btns { display: flex; flex-direction: column; gap: 6px; }
-    .ihooman-widget .ihooman-carousel-card-btn { cursor: pointer !important; transition: all 0.2s !important; }
     .ihooman-quick-replies { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
-    .ihooman-widget .ihooman-quick-reply { cursor: pointer !important; transition: all 0.2s !important; }
     @media (max-width: 480px) { .ihooman-window { width: calc(100vw - 20px); height: calc(100vh - 100px); min-height: 400px; max-height: calc(100vh - 100px); left: 10px; right: 10px; bottom: 80px; } .ihooman-toggle { ${positionRight ? 'right: 16px' : 'left: 16px'}; bottom: 16px; } .ihooman-proactive-toast { left: 10px; right: 10px; max-width: none; } }
   `;
 }
@@ -383,14 +390,27 @@ function generateStyles(): string {
 // DOM CREATION
 // ============================================================================
 
+let shadowRoot: ShadowRoot | null = null;
+
 function createWidget(): void {
+  // Create host element
+  const host = document.createElement('div');
+  host.id = 'ihooman-chat-widget-host';
+  host.style.cssText = 'all: initial !important; position: fixed !important; z-index: 2147483647 !important; pointer-events: none !important;';
+  document.body.appendChild(host);
+
+  // Create Shadow DOM for style isolation
+  shadowRoot = host.attachShadow({ mode: 'open' });
+
+  // Add styles inside shadow DOM
   const styleEl = document.createElement('style');
   styleEl.id = 'ihooman-widget-styles';
   styleEl.textContent = generateStyles();
-  document.head.appendChild(styleEl);
+  shadowRoot.appendChild(styleEl);
 
   const widget = document.createElement('div');
   widget.className = 'ihooman-widget';
+  widget.style.cssText = 'pointer-events: auto;';
   widget.innerHTML = `
     <button class="ihooman-toggle" aria-label="Open chat">
       <span class="ihooman-pulse"></span>
@@ -459,7 +479,7 @@ function createWidget(): void {
     </div>
   `;
 
-  document.body.appendChild(widget);
+  shadowRoot.appendChild(widget);
 
   elements = {
     widget,
@@ -1789,16 +1809,41 @@ const DEFAULT_BUTTON_STYLES = {
     fontSize: 12,
     fontWeight: 'medium',
   },
+  toggleButton: {
+    backgroundColor: '#00aeff',
+    textColor: '#ffffff',
+    borderColor: 'transparent',
+    borderWidth: 0,
+    borderRadius: 30,
+    paddingVertical: 0,
+    paddingHorizontal: 0,
+    fontSize: 14,
+    fontWeight: 'medium',
+  },
+  attachButton: {
+    backgroundColor: 'transparent',
+    textColor: '#6b7280',
+    borderColor: 'transparent',
+    borderWidth: 0,
+    borderRadius: 8,
+    paddingVertical: 6,
+    paddingHorizontal: 6,
+    fontSize: 14,
+    fontWeight: 'medium',
+  },
 };
 
 function applyButtonStyling(buttonStyling?: Record<string, Record<string, unknown>>): void {
   const styleId = 'ihooman-button-styling';
-  let styleEl = document.getElementById(styleId) as HTMLStyleElement | null;
+  
+  // Get the shadow root or fall back to document.head
+  const styleContainer = shadowRoot || document.head;
+  let styleEl = styleContainer.querySelector(`#${styleId}`) as HTMLStyleElement | null;
   
   if (!styleEl) {
     styleEl = document.createElement('style');
     styleEl.id = styleId;
-    document.head.appendChild(styleEl);
+    styleContainer.appendChild(styleEl);
   }
 
   // Merge provided styles with defaults
@@ -1811,6 +1856,8 @@ function applyButtonStyling(buttonStyling?: Record<string, Record<string, unknow
     headerActions: { ...DEFAULT_BUTTON_STYLES.headerActions, ...(buttonStyling?.headerActions || {}) },
     escalation: { ...DEFAULT_BUTTON_STYLES.escalation, ...(buttonStyling?.escalation || {}) },
     cardActions: { ...DEFAULT_BUTTON_STYLES.cardActions, ...(buttonStyling?.cardActions || {}) },
+    toggleButton: { ...DEFAULT_BUTTON_STYLES.toggleButton, ...(buttonStyling?.toggleButton || {}) },
+    attachButton: { ...DEFAULT_BUTTON_STYLES.attachButton, ...(buttonStyling?.attachButton || {}) },
   };
 
   const generateButtonCSS = (selector: string, style: Record<string, unknown>): string => {
@@ -1824,37 +1871,37 @@ function applyButtonStyling(buttonStyling?: Record<string, Record<string, unknow
     const fontSize = style.fontSize as number;
     const fontWeight = getFontWeightValue(style.fontWeight as string);
 
+    // Shadow DOM provides isolation, so we don't need !important or high specificity
     return `
-      .ihooman-widget ${selector},
-      html body .ihooman-widget ${selector} {
-        background: ${bg} !important;
-        color: ${color} !important;
-        border: ${borderWidth}px solid ${borderColor} !important;
-        border-radius: ${borderRadius}px !important;
-        padding: ${paddingV}px ${paddingH}px !important;
-        font-size: ${fontSize}px !important;
-        font-weight: ${fontWeight} !important;
-        min-width: auto !important;
-        min-height: auto !important;
-        width: auto !important;
-        height: auto !important;
-        max-width: none !important;
-        max-height: none !important;
-        display: inline-flex !important;
-        align-items: center !important;
-        justify-content: center !important;
-        gap: 6px !important;
-        line-height: 1.4 !important;
-        text-transform: none !important;
-        letter-spacing: normal !important;
-        box-shadow: none !important;
-        text-decoration: none !important;
-        white-space: nowrap !important;
-        flex-shrink: 0 !important;
-        flex-grow: 0 !important;
-        box-sizing: border-box !important;
-        appearance: none !important;
-        -webkit-appearance: none !important;
+      ${selector} {
+        background: ${bg};
+        color: ${color};
+        border: ${borderWidth}px solid ${borderColor};
+        border-radius: ${borderRadius}px;
+        padding: ${paddingV}px ${paddingH}px;
+        margin: 0;
+        font-family: inherit;
+        font-size: ${fontSize}px;
+        font-weight: ${fontWeight};
+        min-width: unset;
+        min-height: unset;
+        width: auto;
+        height: auto;
+        max-width: none;
+        max-height: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        line-height: 1.4;
+        text-transform: none;
+        letter-spacing: normal;
+        box-shadow: none;
+        text-decoration: none;
+        white-space: nowrap;
+        box-sizing: border-box;
+        cursor: pointer;
+        transition: all 0.2s ease;
       }
     `;
   };
@@ -1893,6 +1940,25 @@ function applyButtonStyling(buttonStyling?: Record<string, Record<string, unknow
   // Card action buttons
   css += generateButtonCSS('.ihooman-carousel-card-btn', mergedStyles.cardActions);
 
+  // Toggle button (floating chat bubble) - special handling for circular button
+  const toggleStyle = mergedStyles.toggleButton;
+  const toggleBg = toggleStyle.backgroundColor as string;
+  const toggleColor = toggleStyle.textColor as string;
+  const toggleBorderColor = toggleStyle.borderColor as string;
+  const toggleBorderWidth = toggleStyle.borderWidth as number;
+  const toggleBorderRadius = toggleStyle.borderRadius as number;
+  css += `
+    .ihooman-toggle {
+      background: linear-gradient(135deg, ${toggleBg}, ${toggleBg}) !important;
+      color: ${toggleColor};
+      border: ${toggleBorderWidth}px solid ${toggleBorderColor};
+      border-radius: ${toggleBorderRadius}px;
+    }
+  `;
+
+  // Attach button (file attachment)
+  css += generateButtonCSS('.ihooman-input-btn.attach', mergedStyles.attachButton);
+
   console.debug('[IhoomanChat] Applied button styling CSS:', css.length, 'chars');
   styleEl.textContent = css;
 }