aumera-on-screen-widget 0.0.1 → 0.0.2

package/df-btn.js

@@ -89,6 +89,14 @@ if (!config.project) {
         height: 48px
     }
 
+    .df-btn-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        height: 48px;
+    }
+
     .df-btn-text:before {
         min-width: 56px;
         height: 48px;
@@ -118,11 +126,12 @@ if (!config.project) {
         width: ${config.width || "400px"};
         transition: all .45s cubic-bezier(.4, 0, .2, 1);
         ${config.position === "left" ? "float: left;" : "float: right;"}
-        opacity: 1
+        opacity: 1;
+        border-radius: 0 0 16px 16px;
     }
 
     .df-btn:not(.df-closed) > .df-btn-content {
-        padding-bottom: 16px;
+        
     }
 
     .df-closed > .df-btn-content {
@@ -131,6 +140,48 @@ if (!config.project) {
         opacity: 0
     }
 
+    .maximize-minimize-btn {
+        width: 16px;
+        height: 16px;
+        cursor: pointer;
+        margin-right: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .df-btn.df-maximized {
+      width: 100vw !important;
+      height: 100vh !important;
+      top: 0 !important;
+      left: 0 !important;
+      right: 0 !important;
+      bottom: 0 !important;
+      margin: 0 !important;
+      border-radius: 0 !important;
+    }
+    .df-btn.df-maximized .df-btn-content {
+      width: 100vw !important;
+      height: calc(100vh - 56px) !important;
+      opacity: 1 !important;
+      display: block !important;
+    }
+    .df-btn.df-closed .df-btn-content {
+      width: 0 !important;
+      height: 0 !important;
+      opacity: 0 !important;
+      display: none !important;
+    }
+    .close-btn {
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+      margin-left: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
     @media screen and (max-width: 720px){
         .df-btn {
             border-radius: 28px;
@@ -165,9 +216,8 @@ if (!config.project) {
         }
 
         .df-btn-text:before {
-            background-image: url('${
-              config.logoDark || origin + "/assets/logo_dark.svg"
-            }')
+            background-image: url('${config.logoDark || origin + "/assets/logo_dark.svg"
+    }')
         }
 
         .df-btn:not(.df-closed) > .df-btn-text:before {
@@ -177,83 +227,161 @@ if (!config.project) {
 
     @keyframes shake {
         0%, 100% { transform: translateX(0); }
-        10%, 30%, 50%, 70%, 90% { transform: translateX(-${config.shakeAmplitude}px); }
-        20%, 40%, 60%, 80% { transform: translateX(${config.shakeAmplitude}px); }
+        10%, 30%, 50%, 70%, 90% { transform: translateX(-${config.shakeAmplitude
+    }px); }
+        20%, 40%, 60%, 80% { transform: translateX(${config.shakeAmplitude
+    }px); }
     }
 
     .df-btn.shake {
-        animation: shake ${config.shakeDuration/1000}s cubic-bezier(.36,.07,.19,.97) both;
+        animation: shake ${config.shakeDuration / 1000
+    }s cubic-bezier(.36,.07,.19,.97) both;
     }
 `;
 
   document.head.appendChild(style);
   document.write(`
         <button class="df-btn df-closed" onclick="dfToggle()">
-            ${config.showNotification ? '<div class="df-notification">Click to check messages</div>' : ''}
+            ${config.showNotification
+      ? '<div class="df-notification">Click to check messages</div>'
+      : ""
+    }
+            <div class="df-btn-header">
             <div class="df-btn-text">${config.openText || "Chat"}</div>
-            <iframe class="df-btn-content" src="https://chat.dev.aumera.ai/frame" allow="microphone *"></iframe>
+            </div>
+            <iframe class="df-btn-content" src="https://chat.dev.aumera.ai?orgId=1" allow="microphone *"></iframe>
         </button>
     `);
 
   let dfToggled = false;
   let inactivityTimer = null;
   let shakeInterval = null;
+  let maximized = false;
 
   const startInactivityTimer = () => {
-    inactivityTimer = setTimeout(() => {
-      if (config.showNotification) {
-        const notification = document.querySelector(".df-notification");
-        if (notification) {
-          notification.classList.add("show");
+    // Only start inactivity timer if button is closed
+    if (!dfToggled) {
+      inactivityTimer = setTimeout(() => {
+        if (config.showNotification) {
+          const notification = document.querySelector(".df-notification");
+          if (notification) {
+            notification.classList.add("show");
+          }
         }
-      }
-      
-      if (config.animation === "shake") {
-        const button = document.querySelector(".df-btn");
-        const shakeButton = () => {
-          button.classList.add("shake");
-          setTimeout(() => {
-            button.classList.remove("shake");
-          }, config.shakeDuration);
-        };
-        
-        // Initial shake
-        shakeButton();
-        
-        // Set up interval for repeated shakes
-        shakeInterval = setInterval(shakeButton, config.shakeInterval);
-      }
-    }, 5000);
+
+        if (config.animation === "shake") {
+          const button = document.querySelector(".df-btn");
+          const shakeButton = () => {
+            button.classList.add("shake");
+            setTimeout(() => {
+              button.classList.remove("shake");
+            }, config.shakeDuration);
+          };
+
+          // Initial shake
+          shakeButton();
+
+          // Set up interval for repeated shakes
+          shakeInterval = setInterval(shakeButton, config.shakeInterval);
+        }
+      }, 5000);
+    }
   };
 
-  const resetInactivityTimer = () => {
+  const clearInactivityAndShake = () => {
     if (inactivityTimer) {
       clearTimeout(inactivityTimer);
+      inactivityTimer = null;
     }
     if (shakeInterval) {
       clearInterval(shakeInterval);
+      shakeInterval = null;
     }
-    startInactivityTimer();
   };
 
-  window.dfToggle = () => {
-    document.querySelector(".df-btn").classList = dfToggled
-      ? "df-btn df-closed"
-      : "df-btn";
-    document.querySelector(".df-btn-text").innerText = dfToggled
-      ? config.openText || "Chat"
-      : config.closeText || "Close";
-    if (config.showNotification) {
-      const notification = document.querySelector(".df-notification");
-      if (notification) {
-        notification.classList.remove("show");
+  // Add close and maximize/minimize buttons dynamically when chat is open
+  function updateHeaderButtons() {
+    const header = document.querySelector('.df-btn-header');
+    if (!header) return;
+    // Remove existing buttons if any
+    const oldClose = header.querySelector('.close-btn');
+    if (oldClose) header.removeChild(oldClose);
+    const oldMax = header.querySelector('.maximize-minimize-btn');
+    if (oldMax) header.removeChild(oldMax);
+    const btnText = header.querySelector('.df-btn-text');
+    const btn = document.querySelector('.df-btn');
+    if (!btn) return;
+    // If open
+    if (!btn.classList.contains('df-closed')) {
+      // Set text to Close
+      if (btnText) btnText.innerText = '';
+      // remove right padding from df-btn-text
+      btnText.style.paddingRight = '0';
+      // Add maximize/minimize button (right)
+      const maxBtn = document.createElement('div');
+      maxBtn.className = 'maximize-minimize-btn';
+      const maximized = btn.classList.contains('df-maximized');
+      maxBtn.innerHTML = `<img class="maximize-minimize-icon" src="${origin}/assets/${maximized ? 'collapse' : 'expand'}.svg" alt="${maximized ? 'Minimize' : 'Maximize'}" style="width:24px;height:24px;cursor:pointer;" />`;
+      header.appendChild(maxBtn);
+      maxBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        maximizeMinimize();
+      });
+      // Add close button (left)
+      const closeBtn = document.createElement('div');
+      closeBtn.className = 'close-btn';
+      closeBtn.innerHTML = `<img src="${origin}/assets/close.svg" alt="Close" style="width:20px;height:20px;cursor:pointer;" />`;
+      header.insertBefore(closeBtn, btnText);
+      closeBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        dfToggle();
+      });
+    } else {
+      // Set text to openText
+      if (btnText) btnText.innerText = config.openText || 'Chat';
+      // add right padding to df-btn-text only if screen size is greater than 720px
+      if (window.innerWidth > 720) {
+        btnText.style.paddingRight = '24px';
       }
     }
-    dfToggled = !dfToggled;
-    resetInactivityTimer();
-  };
+  }
+
+  function maximizeMinimize() {
+    const btn = document.querySelector('.df-btn');
+    if (!btn) return;
+    btn.classList.toggle('df-maximized');
+    updateHeaderButtons();
+  }
+
+  function dfToggle() {
+    const btn = document.querySelector('.df-btn');
+    if (!btn) return;
+    btn.classList.toggle('df-closed');
+    // Always remove maximized state when closing
+    if (btn.classList.contains('df-closed')) {
+      btn.classList.remove('df-maximized');
+    }
+    updateHeaderButtons();
+    clearInactivityAndShake();
+  }
+
+  // Patch window.dfToggle to our new function
+  window.dfToggle = dfToggle;
+  window.maximizeMinimize = maximizeMinimize;
+  // Initial call
+  updateHeaderButtons();
+
+  // Remove onclick from button, handle open/close in JS
+  const btn = document.querySelector('.df-btn');
+  btn.onclick = null;
+  btn.addEventListener('click', (e) => {
+    // Only toggle if chat is closed (popover mode)
+    if (btn.classList.contains('df-closed')) {
+      dfToggle();
+    }
+    // If open, do nothing (let header buttons handle maximize/minimize/close)
+  });
 
-  // Start the inactivity timer when the page loads
+  // Start the inactivity timer when the page loads (button is initially closed)
   startInactivityTimer();
-  
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aumera-on-screen-widget",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "A lightweight, customizable chat widget for websites",
   "main": "df-btn.js",
   "scripts": {
@@ -28,4 +28,4 @@
     "README.md",
     "LICENSE"
   ]
-} 
+}