aumera-on-screen-widget 0.0.3 → 0.0.4

package/df-btn.js

@@ -216,8 +216,9 @@ 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 {
@@ -227,29 +228,55 @@ 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);
+
+  // Language detection function
+  function getLanguage() {
+    // Check HTML lang attribute first
+    let lang = document.documentElement.lang || "";
+
+    // Fallback to browser language
+    if (!lang) {
+      lang = navigator.language || navigator.languages?.[0] || "en";
+    }
+
+    // Extract language code (e.g., "en" from "en-US")
+    lang = lang.split("-")[0].toLowerCase();
+
+    // Validate against supported languages
+    const supportedLangs = ["en", "de", "it", "fr", "es"];
+    return supportedLangs.includes(lang) ? lang : "de";
+  }
+
+  // Get the detected language
+  const detectedLang = getLanguage();
+
   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>
             </div>
-            <iframe class="df-btn-content" src="https://chat.dev.aumera.ai?orgId=1" allow="microphone *"></iframe>
+            <iframe class="df-btn-content" src="https://chat.dev.aumera.ai/${detectedLang}/?orgId=1" allow="microphone *"></iframe>
         </button>
     `);
 
@@ -301,65 +328,69 @@ if (!config.project) {
 
   // Add close and maximize/minimize buttons dynamically when chat is open
   function updateHeaderButtons() {
-    const header = document.querySelector('.df-btn-header');
+    const header = document.querySelector(".df-btn-header");
     if (!header) return;
     // Remove existing buttons if any
-    const oldClose = header.querySelector('.close-btn');
+    const oldClose = header.querySelector(".close-btn");
     if (oldClose) header.removeChild(oldClose);
-    const oldMax = header.querySelector('.maximize-minimize-btn');
+    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');
+    const btnText = header.querySelector(".df-btn-text");
+    const btn = document.querySelector(".df-btn");
     if (!btn) return;
     // If open
-    if (!btn.classList.contains('df-closed')) {
+    if (!btn.classList.contains("df-closed")) {
       // Set text to Close
-      if (btnText) btnText.innerText = '';
+      if (btnText) btnText.innerText = "";
       // remove right padding from df-btn-text
-      btnText.style.paddingRight = '0';
+      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;" />`;
+      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) => {
+      maxBtn.addEventListener("click", (e) => {
         e.stopPropagation();
         maximizeMinimize();
       });
       // Add close button (left)
-      const closeBtn = document.createElement('div');
-      closeBtn.className = 'close-btn';
+      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) => {
+      closeBtn.addEventListener("click", (e) => {
         e.stopPropagation();
         dfToggle();
       });
     } else {
       // Set text to openText
-      if (btnText) btnText.innerText = config.openText || 'Chat';
+      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';
+        btnText.style.paddingRight = "24px";
       }
     }
   }
 
   function maximizeMinimize() {
-    const btn = document.querySelector('.df-btn');
+    const btn = document.querySelector(".df-btn");
     if (!btn) return;
-    btn.classList.toggle('df-maximized');
+    btn.classList.toggle("df-maximized");
     updateHeaderButtons();
   }
 
   function dfToggle() {
-    const btn = document.querySelector('.df-btn');
+    const btn = document.querySelector(".df-btn");
     if (!btn) return;
-    btn.classList.toggle('df-closed');
+    btn.classList.toggle("df-closed");
     // Always remove maximized state when closing
-    if (btn.classList.contains('df-closed')) {
-      btn.classList.remove('df-maximized');
+    if (btn.classList.contains("df-closed")) {
+      btn.classList.remove("df-maximized");
     }
     updateHeaderButtons();
     clearInactivityAndShake();
@@ -372,11 +403,11 @@ if (!config.project) {
   updateHeaderButtons();
 
   // Remove onclick from button, handle open/close in JS
-  const btn = document.querySelector('.df-btn');
+  const btn = document.querySelector(".df-btn");
   btn.onclick = null;
-  btn.addEventListener('click', (e) => {
+  btn.addEventListener("click", (e) => {
     // Only toggle if chat is closed (popover mode)
-    if (btn.classList.contains('df-closed')) {
+    if (btn.classList.contains("df-closed")) {
       dfToggle();
     }
     // If open, do nothing (let header buttons handle maximize/minimize/close)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aumera-on-screen-widget",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "A lightweight, customizable chat widget for websites",
   "main": "df-btn.js",
   "scripts": {