aumera-on-screen-widget 0.0.4 → 0.0.6

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

@@ -1,7 +1,7 @@
 const wrapper = document.querySelector("#df-btn");
 const config = {
   src: wrapper.getAttribute("src"),
-  project: wrapper.getAttribute("project"),
+  orgId: wrapper.getAttribute("orgId"),
   width: wrapper.getAttribute("width"),
   height: wrapper.getAttribute("height"),
   openText: wrapper.getAttribute("openText"),
@@ -21,8 +21,8 @@ const config = {
 
 const origin = config.src.substring(0, config.src.lastIndexOf("/"));
 
-if (!config.project) {
-  console.warn("Please specify your project ID in attributes!");
+if (!config.orgId) {
+  console.warn("Please specify your organization ID in attributes!");
 } else {
   const style = document.createElement("style");
   style.innerHTML = `
@@ -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,9 +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 {
@@ -276,7 +280,9 @@ if (!config.project) {
             <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/${detectedLang}/?orgId=1" allow="microphone *"></iframe>
+            <iframe class="df-btn-content" src="https://chat.dev.aumera.ai/${detectedLang}/?orgId=${
+    config.orgId
+  }" allow="microphone *"></iframe>
         </button>
     `);
 
@@ -348,9 +354,12 @@ if (!config.project) {
       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"
-      }.svg" alt="${
+      }${isDarkMode ? "_dark" : ""}.svg" alt="${
         maximized ? "Minimize" : "Maximize"
       }" style="width:24px;height:24px;cursor:pointer;" />`;
       header.appendChild(maxBtn);
@@ -361,7 +370,9 @@ if (!config.project) {
       // 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;" />`;
+      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) => {
         e.stopPropagation();

package/package.json

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