hypercrm 1.0.5 → 1.0.7

package/assets/widget.js

@@ -80,8 +80,6 @@
       --hypercrm-radius-sm: 12px;
       --hypercrm-offset-bottom: 0px;
       --hypercrm-offset-side: 0px;
-      --hypercrm-offset-bottom-mobile: 0px;
-      --hypercrm-offset-side-mobile: 0px;
       color-scheme: light;
       -webkit-font-smoothing: antialiased;
     }
@@ -132,11 +130,17 @@
       justify-content: center;
     }
 
+    #hypercrm-toggle-inner.hypercrm-custom-icon {
+      background: #ffffff;
+      border-radius: 50%;
+    }
+
     #hypercrm-toggle-inner img.hypercrm-toggle-avatar {
       width: 100%;
       height: 100%;
       object-fit: cover;
       border-radius: 50%;
+      background: #ffffff;
       display: block;
     }
 
@@ -1295,19 +1299,15 @@
 
     @media (max-width: 640px) {
       .hypercrm-widget-container {
-        bottom: calc(16px + var(--hypercrm-offset-bottom-mobile, 0px));
-        right: calc(16px + var(--hypercrm-offset-side-mobile, 0px));
+        bottom: calc(16px + var(--hypercrm-offset-bottom, 0px));
+        right: calc(16px + var(--hypercrm-offset-side, 0px));
       }
 
       .hypercrm-widget-container.hypercrm-position-left {
-        left: calc(16px + var(--hypercrm-offset-side-mobile, 0px));
+        left: calc(16px + var(--hypercrm-offset-side, 0px));
         right: auto;
       }
 
-      .hypercrm-widget-container.hypercrm-mobile-disabled {
-        display: none;
-      }
-
       .hypercrm-toggle-btn {
         width: 56px;
         height: 56px;
@@ -1340,9 +1340,6 @@
       this.colorModePreference = this.options.colorMode || 'light';
       this.position = this.normalizePosition(this.options.position);
       this.offset = this.normalizeOffsets(this.options.offset);
-      const mobileOptions = this.options && typeof this.options.mobile === 'object' ? this.options.mobile : {};
-      this.mobileEnabled = mobileOptions?.enabled !== false;
-      this.mobileOffset = this.normalizeOffsets(mobileOptions?.offset);
       this.mediaColorQuery = null;
       this.systemColorListener = null;
       this.systemColorListenerAttached = false;
@@ -1445,16 +1442,8 @@
     applyOffsets() {
       if (!this.container) return;
       const offset = this.offset || { bottom: 0, side: 0 };
-      const mobileOffset = this.mobileOffset || { bottom: 0, side: 0 };
       this.container.style.setProperty('--hypercrm-offset-bottom', `${offset.bottom}px`);
       this.container.style.setProperty('--hypercrm-offset-side', `${offset.side}px`);
-      this.container.style.setProperty('--hypercrm-offset-bottom-mobile', `${mobileOffset.bottom}px`);
-      this.container.style.setProperty('--hypercrm-offset-side-mobile', `${mobileOffset.side}px`);
-    }
-
-    applyMobileVisibility() {
-      if (!this.container) return;
-      this.container.classList.toggle('hypercrm-mobile-disabled', this.mobileEnabled === false);
     }
 
     setOffset(offset) {
@@ -1463,20 +1452,6 @@
       this.applyOffsets();
     }
 
-    setMobileOffset(offset) {
-      this.mobileOffset = this.normalizeOffsets(offset);
-      const current = this.options.mobile && typeof this.options.mobile === 'object' ? this.options.mobile : {};
-      this.options.mobile = { ...current, offset: this.mobileOffset };
-      this.applyOffsets();
-    }
-
-    setMobileEnabled(enabled) {
-      this.mobileEnabled = enabled !== false;
-      const current = this.options.mobile && typeof this.options.mobile === 'object' ? this.options.mobile : {};
-      this.options.mobile = { ...current, enabled: this.mobileEnabled };
-      this.applyMobileVisibility();
-    }
-
     absUrl(url) {
       if (!url) return url;
       if (/^https?:/i.test(url)) return url;
@@ -1682,7 +1657,6 @@
       this.container = container;
       this.applyPosition();
       this.applyOffsets();
-      this.applyMobileVisibility();
 
       // Lightbox overlay
       const lightbox = document.createElement('div');
@@ -2440,13 +2414,6 @@
         if (!this.options.offset && orgOffset) {
           this.setOffset(orgOffset);
         }
-        const orgMobile = this.orgInfo?.widget?.mobile || {};
-        if (typeof this.options.mobile?.enabled !== 'boolean' && typeof orgMobile.enabled === 'boolean') {
-          this.setMobileEnabled(orgMobile.enabled);
-        }
-        if (!this.options.mobile?.offset && orgMobile.offset) {
-          this.setMobileOffset(orgMobile.offset);
-        }
         const iconUrl = this.orgInfo?.widget?.iconUrl;
         this.orgIconUrl = iconUrl ? this.absUrl(iconUrl) : null;
         this.updateHeaderIcons();
@@ -2487,8 +2454,10 @@
       const { toggleInner } = this.elements;
       if (!toggleInner) return;
       if (iconUrl) {
+        toggleInner.classList.add('hypercrm-custom-icon');
         toggleInner.innerHTML = `<img src="${iconUrl}" alt="Chat" class="hypercrm-toggle-avatar" />`;
       } else {
+        toggleInner.classList.remove('hypercrm-custom-icon');
         toggleInner.innerHTML = this.renderIcon(this.iconUrls?.chat, '', 'hypercrm-icon-img large');
       }
     }
@@ -3033,12 +3002,6 @@
     setOffset(offset) {
       if (activeWidget) activeWidget.setOffset(offset);
     },
-    setMobileOffset(offset) {
-      if (activeWidget) activeWidget.setMobileOffset(offset);
-    },
-    setMobileEnabled(enabled) {
-      if (activeWidget) activeWidget.setMobileEnabled(enabled);
-    },
     open() {
       if (activeWidget) activeWidget.openWidget();
     },

package/dist/index.d.ts

@@ -10,13 +10,6 @@ export interface WidgetOptions {
         bottom?: number;
         side?: number;
     };
-    mobile?: {
-        enabled?: boolean;
-        offset?: {
-            bottom?: number;
-            side?: number;
-        };
-    };
     autoOpen?: boolean;
     debug?: boolean;
     scriptUrl?: string;
@@ -30,11 +23,6 @@ export declare const setWidgetOffset: (offset: {
     bottom?: number;
     side?: number;
 }) => Promise<void>;
-export declare const setWidgetMobileOffset: (offset: {
-    bottom?: number;
-    side?: number;
-}) => Promise<void>;
-export declare const setWidgetMobileEnabled: (enabled: boolean) => Promise<void>;
 declare const _default: {
     init: (options?: WidgetOptions) => Promise<any>;
     destroy: () => void;
@@ -45,11 +33,6 @@ declare const _default: {
         bottom?: number;
         side?: number;
     }) => Promise<void>;
-    setMobileOffset: (offset: {
-        bottom?: number;
-        side?: number;
-    }) => Promise<void>;
-    setMobileEnabled: (enabled: boolean) => Promise<void>;
 };
 export default _default;
 declare global {
@@ -64,11 +47,6 @@ declare global {
                 bottom?: number;
                 side?: number;
             }) => void;
-            setMobileOffset: (offset: {
-                bottom?: number;
-                side?: number;
-            }) => void;
-            setMobileEnabled: (enabled: boolean) => void;
             open: () => void;
             close: () => void;
             toggle: () => void;

package/dist/index.js

@@ -99,14 +99,6 @@ export const setWidgetOffset = async (offset) => {
     await ensureScriptLoaded();
     window.HyperCRMWidget.setOffset(offset || {});
 };
-export const setWidgetMobileOffset = async (offset) => {
-    await ensureScriptLoaded();
-    window.HyperCRMWidget.setMobileOffset(offset || {});
-};
-export const setWidgetMobileEnabled = async (enabled) => {
-    await ensureScriptLoaded();
-    window.HyperCRMWidget.setMobileEnabled(enabled);
-};
 export default {
     init: initWidget,
     destroy: destroyWidget,
@@ -114,6 +106,4 @@ export default {
     setColorMode: setWidgetColorMode,
     setPosition: setWidgetPosition,
     setOffset: setWidgetOffset,
-    setMobileOffset: setWidgetMobileOffset,
-    setMobileEnabled: setWidgetMobileEnabled,
 };

package/dist/react.js

@@ -1,12 +1,12 @@
 import { useEffect, useRef } from 'react';
-import { initWidget, destroyWidget, setWidgetTheme, setWidgetColorMode, setWidgetPosition, setWidgetOffset, setWidgetMobileOffset, setWidgetMobileEnabled, } from './index';
+import { initWidget, destroyWidget, setWidgetTheme, setWidgetColorMode, setWidgetPosition, setWidgetOffset, } from './index';
 export const useHyperCRMWidget = (options = {}) => {
-    const { apiUrl, apiKey, orgId, mount, theme, colorMode, position, offset, mobile, autoOpen, debug, scriptUrl, } = options;
+    const { apiUrl, apiKey, orgId, mount, theme, colorMode, position, offset, autoOpen, debug, scriptUrl, } = options;
     const readyRef = useRef(false);
-    const latestRef = useRef({ theme, colorMode, position, offset, mobile });
+    const latestRef = useRef({ theme, colorMode, position, offset });
     useEffect(() => {
-        latestRef.current = { theme, colorMode, position, offset, mobile };
-    }, [theme, colorMode, position, offset, mobile]);
+        latestRef.current = { theme, colorMode, position, offset };
+    }, [theme, colorMode, position, offset]);
     useEffect(() => {
         let cancelled = false;
         readyRef.current = false;
@@ -19,13 +19,11 @@ export const useHyperCRMWidget = (options = {}) => {
             colorMode: latestRef.current.colorMode,
             position: latestRef.current.position,
             offset: latestRef.current.offset,
-            mobile: latestRef.current.mobile,
             autoOpen,
             debug,
             scriptUrl,
         })
             .then(() => {
-            var _a, _b;
             if (cancelled)
                 return;
             readyRef.current = true;
@@ -37,10 +35,6 @@ export const useHyperCRMWidget = (options = {}) => {
                 setWidgetPosition(latest.position);
             if (latest.offset)
                 setWidgetOffset(latest.offset);
-            if ((_a = latest.mobile) === null || _a === void 0 ? void 0 : _a.offset)
-                setWidgetMobileOffset(latest.mobile.offset);
-            if (typeof ((_b = latest.mobile) === null || _b === void 0 ? void 0 : _b.enabled) === 'boolean')
-                setWidgetMobileEnabled(latest.mobile.enabled);
         })
             .catch((err) => {
             if (debug)
@@ -72,14 +66,6 @@ export const useHyperCRMWidget = (options = {}) => {
             return;
         setWidgetOffset(offset);
     }, [offset]);
-    useEffect(() => {
-        if (!readyRef.current)
-            return;
-        if (mobile === null || mobile === void 0 ? void 0 : mobile.offset)
-            setWidgetMobileOffset(mobile.offset);
-        if (typeof (mobile === null || mobile === void 0 ? void 0 : mobile.enabled) === 'boolean')
-            setWidgetMobileEnabled(mobile.enabled);
-    }, [mobile]);
 };
 export const HyperCRMWidget = (props) => {
     useHyperCRMWidget(props);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hypercrm",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "HyperCRM widget loader with optional React component.",
   "type": "module",
   "main": "./dist/index.js",