aumera-on-screen-widget 0.0.3 → 0.0.5

package/assets/collapse_dark.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="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 28H20V44" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/assets/expand_dark.svg

@@ -0,0 +1,7 @@
+<?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 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Arrow / Expand">
+<path id="Vector" d="M10 19H5V14M14 5H19V10" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

package/df-btn.js

@@ -98,13 +98,17 @@ if (!config.project) {
     }
 
     .df-btn-text:before {
-        min-width: 56px;
-        height: 48px;
         background-position: center;
         background-repeat: no-repeat;
-        background-size: 24px;
-        background-image: url('${config.logo || origin + "/assets/logo.svg"}');
-        content: ''
+        background-size: cover;
+        background-image: url('${origin + "/assets/chat-agent.jpg"}');
+        border-radius: 50%;
+        width: 32px;
+        height: 32px;
+        margin: 8px 12px;
+        content: '';
+        display: inline-block;
+        flex-shrink: 0;
     }
 
     .df-btn:hover {
@@ -122,8 +126,8 @@ if (!config.project) {
     .df-btn-content {
         display: block;
         border: 0;
-        height: ${config.height || "600px"};
-        width: ${config.width || "400px"};
+        height: ${config.height || "896px"};
+        width: ${config.width || "414px"};
         transition: all .45s cubic-bezier(.4, 0, .2, 1);
         ${config.position === "left" ? "float: left;" : "float: right;"}
         opacity: 1;
@@ -137,7 +141,8 @@ if (!config.project) {
     .df-closed > .df-btn-content {
         width: 0;
         height: 0;
-        opacity: 0
+        opacity: 0;
+        overflow: hidden;
     }
 
     .maximize-minimize-btn {
@@ -159,18 +164,19 @@ if (!config.project) {
       bottom: 0 !important;
       margin: 0 !important;
       border-radius: 0 !important;
+      transition: all .45s cubic-bezier(.4, 0, .2, 1) !important;
     }
     .df-btn.df-maximized .df-btn-content {
       width: 100vw !important;
       height: calc(100vh - 56px) !important;
       opacity: 1 !important;
       display: block !important;
+      transition: all .45s cubic-bezier(.4, 0, .2, 1) !important;
     }
     .df-btn.df-closed .df-btn-content {
       width: 0 !important;
       height: 0 !important;
       opacity: 0 !important;
-      display: none !important;
     }
     .close-btn {
       width: 16px;
@@ -216,8 +222,7 @@ if (!config.project) {
         }
 
         .df-btn-text:before {
-            background-image: url('${config.logoDark || origin + "/assets/logo_dark.svg"
-    }')
+            background-image: url('${origin + "/assets/chat-agent.jpg"}')
         }
 
         .df-btn:not(.df-closed) > .df-btn-text:before {
@@ -227,29 +232,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 +332,74 @@ 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");
+      const isDarkMode =
+        window.matchMedia &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches;
+      maxBtn.innerHTML = `<img class="maximize-minimize-icon" src="${origin}/assets/${
+        maximized ? "collapse" : "expand"
+      }${isDarkMode ? "_dark" : ""}.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';
-      closeBtn.innerHTML = `<img src="${origin}/assets/close.svg" alt="Close" style="width:20px;height:20px;cursor:pointer;" />`;
+      const closeBtn = document.createElement("div");
+      closeBtn.className = "close-btn";
+      closeBtn.innerHTML = `<img src="${origin}/assets/close${
+        isDarkMode ? "_dark" : ""
+      }.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 +412,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.5",
   "description": "A lightweight, customizable chat widget for websites",
   "main": "df-btn.js",
   "scripts": {