aumera-on-screen-widget 0.0.2 → 0.0.4

package/assets/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"/></svg>

package/assets/close_dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="#FFFFFF" d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"/></svg>

package/assets/collapse.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M44 20H28V4" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 28H20V44" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/assets/expand.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Arrow / Expand">
+<path id="Vector" d="M10 19H5V14M14 5H19V10" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

package/assets/logo.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="25px" height="32px" viewBox="0 0 25 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M23.7932308,6.22276923 L13.5138462,0.290461538 C12.8492308,-0.0935384615 12.0221538,-0.0935384615 11.3575385,0.290461538 L1.07815385,6.22276923 C0.413538462,6.61169231 0.00492307692,7.32061538 0.00492307692,8.09353846 L0.00492307692,19.968 C0.00492307692,20.736 0.413538462,21.4449231 1.07815385,21.8338462 L6.22276923,24.8073846 L6.22276923,30.8676923 C6.22276923,31.2270769 6.51323077,31.5126154 6.87261538,31.5126154 C6.98584615,31.5126154 7.09415385,31.4830769 7.19261538,31.424 L23.808,21.8387692 C24.4726154,21.4547692 24.8861538,20.7458462 24.8813589,19.9729231 L24.8813589,8.09353846 C24.8763077,7.31569231 24.4627692,6.60676923 23.7932308,6.22276923 Z" fill="#000000" fill-rule="nonzero"></path>
+    </g>
+</svg>

package/assets/logo_dark.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="25px" height="32px" viewBox="0 0 25 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M23.7932308,6.22276923 L13.5138462,0.290461538 C12.8492308,-0.0935384615 12.0221538,-0.0935384615 11.3575385,0.290461538 L1.07815385,6.22276923 C0.413538462,6.61169231 0.00492307692,7.32061538 0.00492307692,8.09353846 L0.00492307692,19.968 C0.00492307692,20.736 0.413538462,21.4449231 1.07815385,21.8338462 L6.22276923,24.8073846 L6.22276923,30.8676923 C6.22276923,31.2270769 6.51323077,31.5126154 6.87261538,31.5126154 C6.98584615,31.5126154 7.09415385,31.4830769 7.19261538,31.424 L23.808,21.8387692 C24.4726154,21.4547692 24.8861538,20.7458462 24.8813589,19.9729231 L24.8813589,8.09353846 C24.8763077,7.31569231 24.4627692,6.60676923 23.7932308,6.22276923 Z" fill="#FFFFFF" fill-rule="nonzero"></path>
+    </g>
+</svg>

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.2",
+  "version": "0.0.4",
   "description": "A lightweight, customizable chat widget for websites",
   "main": "df-btn.js",
   "scripts": {
@@ -26,6 +26,7 @@
   "files": [
     "df-btn.js",
     "README.md",
-    "LICENSE"
+    "LICENSE",
+    "assets/"
   ]
 }