@blotoutio/providers-shop-gpt-sdk 1.31.0 → 1.31.2

package/index.cjs.js

@@ -1018,7 +1018,7 @@ const init = (params) => {
             error('Error in setting the sessionStorage for previewShopGPT');
         }
     }
-    const { enabled, mode, devMode, merchantUrl, profiles, productHandles, targetPath, view, brandName, quickPrompts, supportPrompts, searchSuggestions, merchantImage, latestThreadLoad, botIconUrl, css, nudge, loadUIManually, metafieldDisplayName, } = (_c = params.manifest.variables) !== null && _c !== void 0 ? _c : {};
+    const { enabled, mode, devMode, merchantUrl, profiles, productHandles, targetPath, view, brandName, quickPrompts, supportPrompts, searchSuggestions, merchantImage, latestThreadLoad, botIconUrl, css, nudge, loadUIManually, metafieldDisplayName, showClassicChatbot, chatbotIconType, } = (_c = params.manifest.variables) !== null && _c !== void 0 ? _c : {};
     const experiment = createExperiment({
         name: getExperimentName(mode),
         userId: params.userId,
@@ -1088,6 +1088,8 @@ const init = (params) => {
                 loadUIManually,
                 userId: params.userId,
                 metafieldDisplayName,
+                showClassicChatbot,
+                chatbotIconType,
             });
             const searchParams = new URLSearchParams(window.location.search);
             const hasSource = searchParams.get('utm_source') === 'shopgpt';
@@ -7442,6 +7444,7 @@ const markdown = (text) => {
     const rx_heading = /(?=^|>|\n)([>\s]*?)(#{1,6}) (.*?)( #*)? *(?=\n|$)/g;
     const rx_para = /(?=^|>|\n)\s*\n+([^<]+?)\n+\s*(?=\n|<|$)/g;
     const rx_stash = /-\d+\uf8ff/g;
+    const rx_autolink = /(^|[^<\w])(https?:\/\/[^\s<>"']+)/g;
     const stash = {};
     let si = 0;
     function replace(rex, fn) {
@@ -7506,6 +7509,10 @@ const markdown = (text) => {
             : p6;
         return `${si}\uf8ff`;
     });
+    replace(rx_autolink, (_, prefix, url) => {
+        stash[--si] = `<a href="${url}" rel="noopener" target="_blank">${url}</a>`;
+        return `${prefix}${si}\uf8ff`;
+    });
     replace(rx_table, (_, table) => {
         var _a;
         const sep = ((_a = table.match(rx_thead)) === null || _a === void 0 ? void 0 : _a[1]) || '';
@@ -7667,6 +7674,23 @@ MarkdownRenderer.styles = i$4 `
     .markdown-content li:last-child {
       margin-bottom: 0;
     }
+
+    .markdown-content a {
+      color: #0066cc;
+      text-decoration: underline;
+      word-break: break-all;
+      overflow-wrap: break-word;
+      hyphens: auto;
+    }
+
+    .markdown-content a:hover {
+      color: #0052a3;
+      text-decoration: underline;
+    }
+
+    .markdown-content a:visited {
+      color: #551a8b;
+    }
   `;
 __decorate([
     n$1({ type: String }),
@@ -9409,43 +9433,53 @@ if (!customElements.get('bt-user-form')) {
     customElements.define('bt-user-form', BTUserForm);
 }
 
+const chatIconStyles = i$4 `
+  .chat-icon {
+    border: none;
+    cursor: pointer;
+    width: 60px;
+    height: 58px;
+    background-color: #020617;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 0px 10px 10px -5px #0000000a;
+  }
+`;
+
+var _ChatIcon_sheet;
 const chatIcon = b `<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M13.9999 6.99999V2.33333H9.33325M2.33325 14H4.66659M10.4999 12.8333V15.1667M17.4999 12.8333V15.1667M23.3333 14H25.6666M9.33325 21L4.66659 25.6667V9.33333C4.66659 8.71449 4.91242 8.121 5.35 7.68341C5.78759 7.24583 6.38108 6.99999 6.99992 6.99999H20.9999C21.6188 6.99999 22.2122 7.24583 22.6498 7.68341C23.0874 8.121 23.3333 8.71449 23.3333 9.33333V18.6667C23.3333 19.2855 23.0874 19.879 22.6498 20.3166C22.2122 20.7542 21.6188 21 20.9999 21H9.33325Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`;
 class ChatIcon extends i$1 {
     constructor() {
         super(...arguments);
-        this.isStylesheetInjected = false;
+        _ChatIcon_sheet.set(this, null);
     }
     connectedCallback() {
         super.connectedCallback();
-        if (!this.isStylesheetInjected && this.css) {
-            const sheet = new CSSStyleSheet();
-            sheet.replaceSync(this.css);
-            this.shadowRoot.adoptedStyleSheets.push(sheet);
-            this.isStylesheetInjected = true;
+        this.updateAdoptedStylesheet();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('css')) {
+            this.updateAdoptedStylesheet();
         }
     }
+    updateAdoptedStylesheet() {
+        var _a;
+        if (!__classPrivateFieldGet(this, _ChatIcon_sheet, "f")) {
+            __classPrivateFieldSet(this, _ChatIcon_sheet, new CSSStyleSheet(), "f");
+            this.shadowRoot.adoptedStyleSheets.push(__classPrivateFieldGet(this, _ChatIcon_sheet, "f"));
+        }
+        __classPrivateFieldGet(this, _ChatIcon_sheet, "f").replaceSync((_a = this.css) !== null && _a !== void 0 ? _a : '');
+    }
     render() {
         return x ` <div class="chat-icon">${chatIcon}</div> `;
     }
 }
-ChatIcon.styles = [
-    i$4 `
-      .chat-icon {
-        border: none;
-        cursor: pointer;
-        width: 60px;
-        height: 58px;
-        background-color: #020617;
-        border-radius: 50%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        box-shadow: 0px 10px 10px -5px #0000000a;
-      }
-    `,
-];
+_ChatIcon_sheet = new WeakMap();
+ChatIcon.styles = [chatIconStyles];
 __decorate([
     n$1({ type: String }),
     __metadata("design:type", String)
@@ -11035,6 +11069,11 @@ class ShopGPT extends i$1 {
         if (changedProperties.has('css')) {
             this.updateAdoptedStylesheet();
         }
+        if (this.showClassicChatbot &&
+            this.shouldShowChatbotWidget() &&
+            !this.nudgeTimer) {
+            this.startNudgeTimer();
+        }
     }
     updateAdoptedStylesheet() {
         var _a;
@@ -11592,6 +11631,28 @@ class ShopGPT extends i$1 {
       </dialog>
     `;
     }
+    shouldShowPopupViewMini() {
+        return (!this.showClassicChatbot &&
+            !this.miniPopupSeen &&
+            this.modalState !== 'open' &&
+            !isPopupViewMiniMinimised(this.destination) &&
+            !isUserInteracted(this.destination));
+    }
+    shouldShowChatbotWidget() {
+        return (this.showClassicChatbot ||
+            this.miniPopupSeen ||
+            this.modalState === 'open' ||
+            isPopupViewMiniMinimised(this.destination) ||
+            isUserInteracted(this.destination));
+    }
+    renderChatbotIcon() {
+        if (this.showClassicChatbot) {
+            return this.chatbotIconType === 'chat-icon'
+                ? x `<chat-icon .css=${this.css}></chat-icon>`
+                : x `<chatbot-icon .css=${this.css}></chatbot-icon>`;
+        }
+        return x `<chatbot-icon .css=${this.css}></chatbot-icon>`;
+    }
     modalMode() {
         var _a, _b, _c, _d;
         const thread = this.chatThreads.get(this.selectedThreadId);
@@ -11643,10 +11704,7 @@ class ShopGPT extends i$1 {
             ></popup-view>
           </div>`
             : E}
-      ${!this.miniPopupSeen &&
-            this.modalState !== 'open' &&
-            !isPopupViewMiniMinimised(this.destination) &&
-            !isUserInteracted(this.destination)
+      ${this.shouldShowPopupViewMini()
             ? x ` <div
             id="shop-gpt-mini-modal"
             @minimize-mini=${this.handlePopUpViewMinimised}
@@ -11660,10 +11718,7 @@ class ShopGPT extends i$1 {
             ></popup-view-mini>
           </div>`
             : E}
-      ${this.miniPopupSeen ||
-            this.modalState === 'open' ||
-            isPopupViewMiniMinimised(this.destination) ||
-            isUserInteracted(this.destination)
+      ${this.shouldShowChatbotWidget()
             ? x ` <div class="chatbot-widget">
             <button
               @click=${(e) => {
@@ -11676,7 +11731,7 @@ class ShopGPT extends i$1 {
                 }
             }}
             >
-              <chatbot-icon .css=${this.css}></chatbot-icon>
+              ${this.renderChatbotIcon()}
             </button>
             ${(hasNudgeOverride() || ((_b = this.nudge) === null || _b === void 0 ? void 0 : _b.show)) && this.showNudge
                 ? x ` <div class="nudge">
@@ -11875,6 +11930,8 @@ if (typeof window != 'undefined' && typeof document != 'undefined') {
             shopGPT.loadUIManually = params.loadUIManually;
             shopGPT.userId = params.userId;
             shopGPT.metafieldDisplayName = params.metafieldDisplayName;
+            shopGPT.showClassicChatbot = params.showClassicChatbot;
+            shopGPT.chatbotIconType = params.chatbotIconType;
         },
         loadUI() {
             if (!shopGPT) {

package/index.js

@@ -1019,7 +1019,7 @@ var ProvidersShopGptSdk = (function () {
                 error('Error in setting the sessionStorage for previewShopGPT');
             }
         }
-        const { enabled, mode, devMode, merchantUrl, profiles, productHandles, targetPath, view, brandName, quickPrompts, supportPrompts, searchSuggestions, merchantImage, latestThreadLoad, botIconUrl, css, nudge, loadUIManually, metafieldDisplayName, } = (_c = params.manifest.variables) !== null && _c !== void 0 ? _c : {};
+        const { enabled, mode, devMode, merchantUrl, profiles, productHandles, targetPath, view, brandName, quickPrompts, supportPrompts, searchSuggestions, merchantImage, latestThreadLoad, botIconUrl, css, nudge, loadUIManually, metafieldDisplayName, showClassicChatbot, chatbotIconType, } = (_c = params.manifest.variables) !== null && _c !== void 0 ? _c : {};
         const experiment = createExperiment({
             name: getExperimentName(mode),
             userId: params.userId,
@@ -1089,6 +1089,8 @@ var ProvidersShopGptSdk = (function () {
                     loadUIManually,
                     userId: params.userId,
                     metafieldDisplayName,
+                    showClassicChatbot,
+                    chatbotIconType,
                 });
                 const searchParams = new URLSearchParams(window.location.search);
                 const hasSource = searchParams.get('utm_source') === 'shopgpt';
@@ -7443,6 +7445,7 @@ var ProvidersShopGptSdk = (function () {
         const rx_heading = /(?=^|>|\n)([>\s]*?)(#{1,6}) (.*?)( #*)? *(?=\n|$)/g;
         const rx_para = /(?=^|>|\n)\s*\n+([^<]+?)\n+\s*(?=\n|<|$)/g;
         const rx_stash = /-\d+\uf8ff/g;
+        const rx_autolink = /(^|[^<\w])(https?:\/\/[^\s<>"']+)/g;
         const stash = {};
         let si = 0;
         function replace(rex, fn) {
@@ -7507,6 +7510,10 @@ var ProvidersShopGptSdk = (function () {
                 : p6;
             return `${si}\uf8ff`;
         });
+        replace(rx_autolink, (_, prefix, url) => {
+            stash[--si] = `<a href="${url}" rel="noopener" target="_blank">${url}</a>`;
+            return `${prefix}${si}\uf8ff`;
+        });
         replace(rx_table, (_, table) => {
             var _a;
             const sep = ((_a = table.match(rx_thead)) === null || _a === void 0 ? void 0 : _a[1]) || '';
@@ -7668,6 +7675,23 @@ var ProvidersShopGptSdk = (function () {
     .markdown-content li:last-child {
       margin-bottom: 0;
     }
+
+    .markdown-content a {
+      color: #0066cc;
+      text-decoration: underline;
+      word-break: break-all;
+      overflow-wrap: break-word;
+      hyphens: auto;
+    }
+
+    .markdown-content a:hover {
+      color: #0052a3;
+      text-decoration: underline;
+    }
+
+    .markdown-content a:visited {
+      color: #551a8b;
+    }
   `;
     __decorate([
         n$1({ type: String }),
@@ -9410,43 +9434,53 @@ ${this.comment ? this.comment : E}</textarea
         customElements.define('bt-user-form', BTUserForm);
     }
 
+    const chatIconStyles = i$4 `
+  .chat-icon {
+    border: none;
+    cursor: pointer;
+    width: 60px;
+    height: 58px;
+    background-color: #020617;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 0px 10px 10px -5px #0000000a;
+  }
+`;
+
+    var _ChatIcon_sheet;
     const chatIcon = b `<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M13.9999 6.99999V2.33333H9.33325M2.33325 14H4.66659M10.4999 12.8333V15.1667M17.4999 12.8333V15.1667M23.3333 14H25.6666M9.33325 21L4.66659 25.6667V9.33333C4.66659 8.71449 4.91242 8.121 5.35 7.68341C5.78759 7.24583 6.38108 6.99999 6.99992 6.99999H20.9999C21.6188 6.99999 22.2122 7.24583 22.6498 7.68341C23.0874 8.121 23.3333 8.71449 23.3333 9.33333V18.6667C23.3333 19.2855 23.0874 19.879 22.6498 20.3166C22.2122 20.7542 21.6188 21 20.9999 21H9.33325Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`;
     class ChatIcon extends i$1 {
         constructor() {
             super(...arguments);
-            this.isStylesheetInjected = false;
+            _ChatIcon_sheet.set(this, null);
         }
         connectedCallback() {
             super.connectedCallback();
-            if (!this.isStylesheetInjected && this.css) {
-                const sheet = new CSSStyleSheet();
-                sheet.replaceSync(this.css);
-                this.shadowRoot.adoptedStyleSheets.push(sheet);
-                this.isStylesheetInjected = true;
+            this.updateAdoptedStylesheet();
+        }
+        updated(changedProperties) {
+            if (changedProperties.has('css')) {
+                this.updateAdoptedStylesheet();
             }
         }
+        updateAdoptedStylesheet() {
+            var _a;
+            if (!__classPrivateFieldGet(this, _ChatIcon_sheet, "f")) {
+                __classPrivateFieldSet(this, _ChatIcon_sheet, new CSSStyleSheet(), "f");
+                this.shadowRoot.adoptedStyleSheets.push(__classPrivateFieldGet(this, _ChatIcon_sheet, "f"));
+            }
+            __classPrivateFieldGet(this, _ChatIcon_sheet, "f").replaceSync((_a = this.css) !== null && _a !== void 0 ? _a : '');
+        }
         render() {
             return x ` <div class="chat-icon">${chatIcon}</div> `;
         }
     }
-    ChatIcon.styles = [
-        i$4 `
-      .chat-icon {
-        border: none;
-        cursor: pointer;
-        width: 60px;
-        height: 58px;
-        background-color: #020617;
-        border-radius: 50%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        box-shadow: 0px 10px 10px -5px #0000000a;
-      }
-    `,
-    ];
+    _ChatIcon_sheet = new WeakMap();
+    ChatIcon.styles = [chatIconStyles];
     __decorate([
         n$1({ type: String }),
         __metadata("design:type", String)
@@ -11036,6 +11070,11 @@ ${this.comment ? this.comment : E}</textarea
             if (changedProperties.has('css')) {
                 this.updateAdoptedStylesheet();
             }
+            if (this.showClassicChatbot &&
+                this.shouldShowChatbotWidget() &&
+                !this.nudgeTimer) {
+                this.startNudgeTimer();
+            }
         }
         updateAdoptedStylesheet() {
             var _a;
@@ -11593,6 +11632,28 @@ ${this.comment ? this.comment : E}</textarea
       </dialog>
     `;
         }
+        shouldShowPopupViewMini() {
+            return (!this.showClassicChatbot &&
+                !this.miniPopupSeen &&
+                this.modalState !== 'open' &&
+                !isPopupViewMiniMinimised(this.destination) &&
+                !isUserInteracted(this.destination));
+        }
+        shouldShowChatbotWidget() {
+            return (this.showClassicChatbot ||
+                this.miniPopupSeen ||
+                this.modalState === 'open' ||
+                isPopupViewMiniMinimised(this.destination) ||
+                isUserInteracted(this.destination));
+        }
+        renderChatbotIcon() {
+            if (this.showClassicChatbot) {
+                return this.chatbotIconType === 'chat-icon'
+                    ? x `<chat-icon .css=${this.css}></chat-icon>`
+                    : x `<chatbot-icon .css=${this.css}></chatbot-icon>`;
+            }
+            return x `<chatbot-icon .css=${this.css}></chatbot-icon>`;
+        }
         modalMode() {
             var _a, _b, _c, _d;
             const thread = this.chatThreads.get(this.selectedThreadId);
@@ -11644,10 +11705,7 @@ ${this.comment ? this.comment : E}</textarea
             ></popup-view>
           </div>`
             : E}
-      ${!this.miniPopupSeen &&
-            this.modalState !== 'open' &&
-            !isPopupViewMiniMinimised(this.destination) &&
-            !isUserInteracted(this.destination)
+      ${this.shouldShowPopupViewMini()
             ? x ` <div
             id="shop-gpt-mini-modal"
             @minimize-mini=${this.handlePopUpViewMinimised}
@@ -11661,10 +11719,7 @@ ${this.comment ? this.comment : E}</textarea
             ></popup-view-mini>
           </div>`
             : E}
-      ${this.miniPopupSeen ||
-            this.modalState === 'open' ||
-            isPopupViewMiniMinimised(this.destination) ||
-            isUserInteracted(this.destination)
+      ${this.shouldShowChatbotWidget()
             ? x ` <div class="chatbot-widget">
             <button
               @click=${(e) => {
@@ -11677,7 +11732,7 @@ ${this.comment ? this.comment : E}</textarea
                 }
             }}
             >
-              <chatbot-icon .css=${this.css}></chatbot-icon>
+              ${this.renderChatbotIcon()}
             </button>
             ${(hasNudgeOverride() || ((_b = this.nudge) === null || _b === void 0 ? void 0 : _b.show)) && this.showNudge
                 ? x ` <div class="nudge">
@@ -11876,6 +11931,8 @@ ${this.comment ? this.comment : E}</textarea
                 shopGPT.loadUIManually = params.loadUIManually;
                 shopGPT.userId = params.userId;
                 shopGPT.metafieldDisplayName = params.metafieldDisplayName;
+                shopGPT.showClassicChatbot = params.showClassicChatbot;
+                shopGPT.chatbotIconType = params.chatbotIconType;
             },
             loadUI() {
                 if (!shopGPT) {

package/index.mjs

@@ -1016,7 +1016,7 @@ const init = (params) => {
             error('Error in setting the sessionStorage for previewShopGPT');
         }
     }
-    const { enabled, mode, devMode, merchantUrl, profiles, productHandles, targetPath, view, brandName, quickPrompts, supportPrompts, searchSuggestions, merchantImage, latestThreadLoad, botIconUrl, css, nudge, loadUIManually, metafieldDisplayName, } = (_c = params.manifest.variables) !== null && _c !== void 0 ? _c : {};
+    const { enabled, mode, devMode, merchantUrl, profiles, productHandles, targetPath, view, brandName, quickPrompts, supportPrompts, searchSuggestions, merchantImage, latestThreadLoad, botIconUrl, css, nudge, loadUIManually, metafieldDisplayName, showClassicChatbot, chatbotIconType, } = (_c = params.manifest.variables) !== null && _c !== void 0 ? _c : {};
     const experiment = createExperiment({
         name: getExperimentName(mode),
         userId: params.userId,
@@ -1086,6 +1086,8 @@ const init = (params) => {
                 loadUIManually,
                 userId: params.userId,
                 metafieldDisplayName,
+                showClassicChatbot,
+                chatbotIconType,
             });
             const searchParams = new URLSearchParams(window.location.search);
             const hasSource = searchParams.get('utm_source') === 'shopgpt';
@@ -7440,6 +7442,7 @@ const markdown = (text) => {
     const rx_heading = /(?=^|>|\n)([>\s]*?)(#{1,6}) (.*?)( #*)? *(?=\n|$)/g;
     const rx_para = /(?=^|>|\n)\s*\n+([^<]+?)\n+\s*(?=\n|<|$)/g;
     const rx_stash = /-\d+\uf8ff/g;
+    const rx_autolink = /(^|[^<\w])(https?:\/\/[^\s<>"']+)/g;
     const stash = {};
     let si = 0;
     function replace(rex, fn) {
@@ -7504,6 +7507,10 @@ const markdown = (text) => {
             : p6;
         return `${si}\uf8ff`;
     });
+    replace(rx_autolink, (_, prefix, url) => {
+        stash[--si] = `<a href="${url}" rel="noopener" target="_blank">${url}</a>`;
+        return `${prefix}${si}\uf8ff`;
+    });
     replace(rx_table, (_, table) => {
         var _a;
         const sep = ((_a = table.match(rx_thead)) === null || _a === void 0 ? void 0 : _a[1]) || '';
@@ -7665,6 +7672,23 @@ MarkdownRenderer.styles = i$4 `
     .markdown-content li:last-child {
       margin-bottom: 0;
     }
+
+    .markdown-content a {
+      color: #0066cc;
+      text-decoration: underline;
+      word-break: break-all;
+      overflow-wrap: break-word;
+      hyphens: auto;
+    }
+
+    .markdown-content a:hover {
+      color: #0052a3;
+      text-decoration: underline;
+    }
+
+    .markdown-content a:visited {
+      color: #551a8b;
+    }
   `;
 __decorate([
     n$1({ type: String }),
@@ -9407,43 +9431,53 @@ if (!customElements.get('bt-user-form')) {
     customElements.define('bt-user-form', BTUserForm);
 }
 
+const chatIconStyles = i$4 `
+  .chat-icon {
+    border: none;
+    cursor: pointer;
+    width: 60px;
+    height: 58px;
+    background-color: #020617;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 0px 10px 10px -5px #0000000a;
+  }
+`;
+
+var _ChatIcon_sheet;
 const chatIcon = b `<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M13.9999 6.99999V2.33333H9.33325M2.33325 14H4.66659M10.4999 12.8333V15.1667M17.4999 12.8333V15.1667M23.3333 14H25.6666M9.33325 21L4.66659 25.6667V9.33333C4.66659 8.71449 4.91242 8.121 5.35 7.68341C5.78759 7.24583 6.38108 6.99999 6.99992 6.99999H20.9999C21.6188 6.99999 22.2122 7.24583 22.6498 7.68341C23.0874 8.121 23.3333 8.71449 23.3333 9.33333V18.6667C23.3333 19.2855 23.0874 19.879 22.6498 20.3166C22.2122 20.7542 21.6188 21 20.9999 21H9.33325Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`;
 class ChatIcon extends i$1 {
     constructor() {
         super(...arguments);
-        this.isStylesheetInjected = false;
+        _ChatIcon_sheet.set(this, null);
     }
     connectedCallback() {
         super.connectedCallback();
-        if (!this.isStylesheetInjected && this.css) {
-            const sheet = new CSSStyleSheet();
-            sheet.replaceSync(this.css);
-            this.shadowRoot.adoptedStyleSheets.push(sheet);
-            this.isStylesheetInjected = true;
+        this.updateAdoptedStylesheet();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('css')) {
+            this.updateAdoptedStylesheet();
         }
     }
+    updateAdoptedStylesheet() {
+        var _a;
+        if (!__classPrivateFieldGet(this, _ChatIcon_sheet, "f")) {
+            __classPrivateFieldSet(this, _ChatIcon_sheet, new CSSStyleSheet(), "f");
+            this.shadowRoot.adoptedStyleSheets.push(__classPrivateFieldGet(this, _ChatIcon_sheet, "f"));
+        }
+        __classPrivateFieldGet(this, _ChatIcon_sheet, "f").replaceSync((_a = this.css) !== null && _a !== void 0 ? _a : '');
+    }
     render() {
         return x ` <div class="chat-icon">${chatIcon}</div> `;
     }
 }
-ChatIcon.styles = [
-    i$4 `
-      .chat-icon {
-        border: none;
-        cursor: pointer;
-        width: 60px;
-        height: 58px;
-        background-color: #020617;
-        border-radius: 50%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        box-shadow: 0px 10px 10px -5px #0000000a;
-      }
-    `,
-];
+_ChatIcon_sheet = new WeakMap();
+ChatIcon.styles = [chatIconStyles];
 __decorate([
     n$1({ type: String }),
     __metadata("design:type", String)
@@ -11033,6 +11067,11 @@ class ShopGPT extends i$1 {
         if (changedProperties.has('css')) {
             this.updateAdoptedStylesheet();
         }
+        if (this.showClassicChatbot &&
+            this.shouldShowChatbotWidget() &&
+            !this.nudgeTimer) {
+            this.startNudgeTimer();
+        }
     }
     updateAdoptedStylesheet() {
         var _a;
@@ -11590,6 +11629,28 @@ class ShopGPT extends i$1 {
       </dialog>
     `;
     }
+    shouldShowPopupViewMini() {
+        return (!this.showClassicChatbot &&
+            !this.miniPopupSeen &&
+            this.modalState !== 'open' &&
+            !isPopupViewMiniMinimised(this.destination) &&
+            !isUserInteracted(this.destination));
+    }
+    shouldShowChatbotWidget() {
+        return (this.showClassicChatbot ||
+            this.miniPopupSeen ||
+            this.modalState === 'open' ||
+            isPopupViewMiniMinimised(this.destination) ||
+            isUserInteracted(this.destination));
+    }
+    renderChatbotIcon() {
+        if (this.showClassicChatbot) {
+            return this.chatbotIconType === 'chat-icon'
+                ? x `<chat-icon .css=${this.css}></chat-icon>`
+                : x `<chatbot-icon .css=${this.css}></chatbot-icon>`;
+        }
+        return x `<chatbot-icon .css=${this.css}></chatbot-icon>`;
+    }
     modalMode() {
         var _a, _b, _c, _d;
         const thread = this.chatThreads.get(this.selectedThreadId);
@@ -11641,10 +11702,7 @@ class ShopGPT extends i$1 {
             ></popup-view>
           </div>`
             : E}
-      ${!this.miniPopupSeen &&
-            this.modalState !== 'open' &&
-            !isPopupViewMiniMinimised(this.destination) &&
-            !isUserInteracted(this.destination)
+      ${this.shouldShowPopupViewMini()
             ? x ` <div
             id="shop-gpt-mini-modal"
             @minimize-mini=${this.handlePopUpViewMinimised}
@@ -11658,10 +11716,7 @@ class ShopGPT extends i$1 {
             ></popup-view-mini>
           </div>`
             : E}
-      ${this.miniPopupSeen ||
-            this.modalState === 'open' ||
-            isPopupViewMiniMinimised(this.destination) ||
-            isUserInteracted(this.destination)
+      ${this.shouldShowChatbotWidget()
             ? x ` <div class="chatbot-widget">
             <button
               @click=${(e) => {
@@ -11674,7 +11729,7 @@ class ShopGPT extends i$1 {
                 }
             }}
             >
-              <chatbot-icon .css=${this.css}></chatbot-icon>
+              ${this.renderChatbotIcon()}
             </button>
             ${(hasNudgeOverride() || ((_b = this.nudge) === null || _b === void 0 ? void 0 : _b.show)) && this.showNudge
                 ? x ` <div class="nudge">
@@ -11873,6 +11928,8 @@ if (typeof window != 'undefined' && typeof document != 'undefined') {
             shopGPT.loadUIManually = params.loadUIManually;
             shopGPT.userId = params.userId;
             shopGPT.metafieldDisplayName = params.metafieldDisplayName;
+            shopGPT.showClassicChatbot = params.showClassicChatbot;
+            shopGPT.chatbotIconType = params.chatbotIconType;
         },
         loadUI() {
             if (!shopGPT) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blotoutio/providers-shop-gpt-sdk",
-  "version": "1.31.0",
+  "version": "1.31.2",
   "description": "Shop GPT SDK for EdgeTag",
   "author": "Blotout",
   "license": "MIT",