@blotoutio/providers-shop-gpt-sdk 1.7.0 → 1.8.0

package/index.cjs.js

@@ -364,6 +364,50 @@ const usStates = new Map([
 ]);
 new Set([...isoCountries.keys(), ...usStates.keys()]);
 
+const createEnabled = () => ({
+    name: 'enabled',
+    groupNames: new Set(),
+    groupName: '',
+    isEnabled: true,
+});
+const createDisabled = () => ({
+    name: 'disabled',
+    groupNames: new Set(),
+    groupName: '',
+    isEnabled: false,
+});
+const createABTest = ({ userId }) => {
+    const [sample] = userId.split('-');
+    const segment = parseInt(sample, 16) % 2;
+    return {
+        name: 'ab-test',
+        groupNames: new Set(['enabled', 'control']),
+        groupName: segment == 1 ? 'enabled' : 'control',
+        isEnabled: segment == 1,
+    };
+};
+const createPreview = ({ preview }) => {
+    return {
+        name: 'preview',
+        groupNames: new Set(['preview']),
+        groupName: preview ? 'preview' : '',
+        isEnabled: preview !== null && preview !== void 0 ? preview : false,
+    };
+};
+const getExperimentName = (mode) => (mode !== null && mode !== void 0 ? mode : 'disabled');
+const createExperiment = (props) => {
+    switch (props.name) {
+        case 'enabled':
+            return createEnabled();
+        case 'disabled':
+            return createDisabled();
+        case 'ab-test':
+            return createABTest(props);
+        case 'preview':
+            return createPreview(props);
+    }
+};
+
 const packageName = 'shopGPT';
 const DEFAULT_MAX_THREAD_AGE = 14;
 const previewKeyName = 'previewShopGPT';
@@ -530,6 +574,18 @@ const createShopGPTAPI = ({ fetch: fetchImpl = window.fetch, baseURL, userId, st
             throw new Error(`Failed to save feedback - ${response.status}: ${await response.text()}`);
         }
     };
+    const fetchCustomPrompts = async (threadId) => {
+        const response = await fetchImpl(getURL(`/custom-prompts?threadId=${threadId}`), {
+            method: 'GET',
+            headers: getHeaders(),
+            credentials: 'include',
+        });
+        if (!response.ok) {
+            throw new Error(`Could not fetch custom prompts - ${response.status}: ${await response.text()}`);
+        }
+        const data = (await response.json());
+        return data.customPrompts;
+    };
     return {
         processQuery,
         fetchChatHistory,
@@ -538,6 +594,7 @@ const createShopGPTAPI = ({ fetch: fetchImpl = window.fetch, baseURL, userId, st
         deleteSingleThread,
         deleteAllThreads,
         saveFeedback,
+        fetchCustomPrompts,
     };
 };
 
@@ -571,11 +628,15 @@ const init = (params) => {
         // exit if not in top window
         return;
     }
-    const { enabled, devMode, merchantUrl, profiles, productHandles, targetPath, uiMode, brandName, quickPrompts, merchantImage, latestThreadLoad, } = (_c = params.manifest.variables) !== null && _c !== void 0 ? _c : {};
-    let shouldShowUI = enabled;
-    if (!enabled && hasPreviewKey()) {
+    const { enabled, mode, devMode, merchantUrl, profiles, productHandles, targetPath, view, brandName, quickPrompts, merchantImage, latestThreadLoad, } = (_c = params.manifest.variables) !== null && _c !== void 0 ? _c : {};
+    const experiment = createExperiment({
+        name: getExperimentName(mode),
+        userId: params.userId,
+        preview: hasPreviewKey(),
+    });
+    const shouldShowUI = enabled || experiment.isEnabled;
+    if (experiment.name === 'preview' && shouldShowUI) {
         logger.log('Enabling UI in preview mode');
-        shouldShowUI = true;
     }
     if (shouldShowUI) {
         const uiImplementation = window[registryKey].ui;
@@ -592,7 +653,7 @@ const init = (params) => {
             storeAPI,
             shopGPTAPI,
             devMode,
-            uiMode,
+            view,
             merchantUrl,
             profiles,
             productHandles,
@@ -1012,6 +1073,10 @@ const chatThreadsStyles = i$4 `
     &:hover {
       background: #091627;
     }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
   }
 
   .history {
@@ -1257,6 +1322,7 @@ class ChatThreads extends r$2 {
       <span class="line"></span>
       <button
         class="btn-new-search"
+        ?disabled=${this.isLoading || this.isTyping}
         @click=${() => this.setSelectedThreadId('')}
       >
         New Search
@@ -1265,7 +1331,7 @@ class ChatThreads extends r$2 {
       ${this.merchantUrl
             ? x `<div class="footer">
             Catalog:
-            <a href="${this.getDomain()}" target="_blank">
+            <a href="${this.getDomain()}" target="_blank" rel="noopener">
               ${this.getDomain().replace('https://', '')}
             </a>
           </div>`
@@ -2236,6 +2302,7 @@ const chatSectionStyles = i$4 `
       padding: 10px;
       border-radius: 10px;
       border: 1px solid #a3b2c6;
+      text-decoration: none;
 
       color: #4e647f;
       line-height: 21px;
@@ -2987,7 +3054,7 @@ const markdown = (text) => {
         stash[--si] = p4
             ? p2
                 ? `<img src="${p4}" alt="${p3}"/>`
-                : `<a href="${p4}">${highlight(p3)}</a>`
+                : `<a href="${p4}" rel="noopener">${highlight(p3)}</a>`
             : p6;
         return `${si}\uf8ff`;
     });
@@ -3638,7 +3705,7 @@ class ChatSection extends r$2 {
               </div>
             </div>`
             : E}
-        ${this.messages.map((message) => {
+        ${o$1(this.messages, (message) => {
             if (message.sender === 'bot') {
                 return this.botMessage(message);
             }
@@ -3660,28 +3727,39 @@ class ChatSection extends r$2 {
       </div>
     `;
     }
-    quickPrompts() {
+    renderPrompts() {
         if (this.isLoadingHistory || this.isTyping || this.isLoadingThreads) {
             return E;
         }
+        const isWelcomeMessage = this.messages.length === 1 && this.messages[0].sender === 'bot';
         const prompts = this.messages.length
             ? this.messages[0].welcomePrompts
             : this.prompts
                 ? this.prompts.split(',').map((prompt) => prompt.trim())
                 : ['Best Sellers'];
-        if (!prompts) {
+        const customPrompts = !this.messages.length || isWelcomeMessage ? this.customPrompts : undefined;
+        if (!prompts && !customPrompts) {
             return E;
         }
         return x `
       <div class="prompts btn">
-        ${prompts.map((prompt) => x `
-              <div
-                class="prompt"
-                @click=${(e) => this.processMessage(e, prompt)}
-              >
-                ${prompt}
-              </div>
-            `)}
+        ${o$1(prompts, (prompt) => {
+            return x `
+            <div
+              class="prompt"
+              @click=${(e) => this.processMessage(e, prompt)}
+            >
+              ${prompt}
+            </div>
+          `;
+        })}
+        ${o$1(customPrompts, ({ prompt, link }) => {
+            return x `
+            <a class="prompt" href=${link} target="_blank" rel="noopener">
+              ${prompt}
+            </a>
+          `;
+        })}
       </div>
     `;
     }
@@ -3928,7 +4006,7 @@ class ChatSection extends r$2 {
             'modal-view': this.viewType === 'modal',
         })}
       >
-        ${this.chatWindow()} ${this.quickPrompts()}
+        ${this.chatWindow()} ${this.renderPrompts()}
         <form class="chat-form" @submit=${this.onSubmit}>
           <input
             type="text"
@@ -4011,6 +4089,10 @@ __decorate([
     n({ type: String }),
     __metadata("design:type", Object)
 ], ChatSection.prototype, "prompts", void 0);
+__decorate([
+    n({ type: Array }),
+    __metadata("design:type", Object)
+], ChatSection.prototype, "customPrompts", void 0);
 __decorate([
     n({ type: Boolean }),
     __metadata("design:type", Boolean)
@@ -4106,6 +4188,7 @@ class ShopGPT extends r$2 {
         this.products = [];
         this.messages = [];
         this.chatThreads = new Map();
+        this.customPrompts = [];
         this.loadData = async () => {
             if (!this.shopGPTAPI) {
                 return;
@@ -4128,7 +4211,7 @@ class ShopGPT extends r$2 {
     }
     connectedCallback() {
         super.connectedCallback();
-        if (!this.uiMode || this.uiMode === 'overlay') {
+        if (!this.view || this.view === 'overlay') {
             if (!this.path) {
                 return;
             }
@@ -4149,7 +4232,7 @@ class ShopGPT extends r$2 {
     init() {
         window.addEventListener('edgetag-initialized', this.loadData);
         window.addEventListener('popstate', this.onPopState);
-        if (!this.uiMode || this.uiMode === 'overlay') {
+        if (!this.view || this.view === 'overlay') {
             delay(DIALOG_DELAY).then(() => {
                 var _a;
                 if (document.hidden) {
@@ -4288,10 +4371,25 @@ class ShopGPT extends r$2 {
             this.isLoadingHistory = false;
         }
     }
+    async loadCustomPrompts(threadId) {
+        try {
+            if (!threadId) {
+                this.customPrompts = [];
+                return;
+            }
+            this.customPrompts = await this.shopGPTAPI.fetchCustomPrompts(threadId);
+        }
+        catch (e) {
+            logger.error(e);
+        }
+    }
     async setSelectedThreadId(threadId) {
         this.isFailed = false;
         this.selectedThreadId = threadId;
-        await this.loadHistory(threadId);
+        await Promise.all([
+            this.loadHistory(threadId),
+            this.loadCustomPrompts(threadId),
+        ]);
     }
     async createChatThread(payload, loadInitialQuery) {
         try {
@@ -4302,7 +4400,9 @@ class ShopGPT extends r$2 {
             ]);
             this.selectedThreadId = thread.threadId;
             if (loadInitialQuery) {
-                await this.loadInitialQuery();
+                await Promise.all([
+                    (this.loadInitialQuery(), this.loadCustomPrompts(thread.threadId)),
+                ]);
             }
         }
         catch (e) {
@@ -4395,7 +4495,7 @@ class ShopGPT extends r$2 {
         return this.storeAPI.getSiteCurrency();
     }
     render() {
-        if (this.uiMode === 'modal') {
+        if (this.view === 'modal') {
             return this.modalMode();
         }
         return this.overlayMode();
@@ -4444,6 +4544,7 @@ class ShopGPT extends r$2 {
             .profiles=${this.profiles}
             .viewType=${'overlay'}
             .isLoadingThreads=${this.isLoadingThreads}
+            .customPrompts=${this.customPrompts}
           ></chat-section>
         </div>
       </dialog>
@@ -4494,6 +4595,7 @@ class ShopGPT extends r$2 {
           .chatThreads=${this.chatThreads}
           .isLoadingThreads=${this.isLoadingThreads}
           .merchantImage=${this.merchantImage}
+          .customPrompts=${this.customPrompts}
         ></chat-section>
       </div>
     `;
@@ -4544,6 +4646,10 @@ __decorate([
     n({ type: Object }),
     __metadata("design:type", Map)
 ], ShopGPT.prototype, "chatThreads", void 0);
+__decorate([
+    n({ type: Array }),
+    __metadata("design:type", Array)
+], ShopGPT.prototype, "customPrompts", void 0);
 if (!customElements.get('shop-gpt')) {
     customElements.define('shop-gpt', ShopGPT);
 }
@@ -4565,7 +4671,7 @@ if (typeof window != 'undefined' && typeof document != 'undefined') {
             shopGPT.merchantUrl = params.merchantUrl;
             shopGPT.profiles = params.profiles;
             shopGPT.productHandles = params.productHandles;
-            shopGPT.uiMode = params.uiMode;
+            shopGPT.view = params.view;
             shopGPT.path = params.path;
             shopGPT.brandName = params.brandName;
             shopGPT.quickPrompts = params.quickPrompts;

package/index.js

@@ -365,6 +365,50 @@ var ProvidersShopGptSdk = (function () {
     ]);
     new Set([...isoCountries.keys(), ...usStates.keys()]);
 
+    const createEnabled = () => ({
+        name: 'enabled',
+        groupNames: new Set(),
+        groupName: '',
+        isEnabled: true,
+    });
+    const createDisabled = () => ({
+        name: 'disabled',
+        groupNames: new Set(),
+        groupName: '',
+        isEnabled: false,
+    });
+    const createABTest = ({ userId }) => {
+        const [sample] = userId.split('-');
+        const segment = parseInt(sample, 16) % 2;
+        return {
+            name: 'ab-test',
+            groupNames: new Set(['enabled', 'control']),
+            groupName: segment == 1 ? 'enabled' : 'control',
+            isEnabled: segment == 1,
+        };
+    };
+    const createPreview = ({ preview }) => {
+        return {
+            name: 'preview',
+            groupNames: new Set(['preview']),
+            groupName: preview ? 'preview' : '',
+            isEnabled: preview !== null && preview !== void 0 ? preview : false,
+        };
+    };
+    const getExperimentName = (mode) => (mode !== null && mode !== void 0 ? mode : 'disabled');
+    const createExperiment = (props) => {
+        switch (props.name) {
+            case 'enabled':
+                return createEnabled();
+            case 'disabled':
+                return createDisabled();
+            case 'ab-test':
+                return createABTest(props);
+            case 'preview':
+                return createPreview(props);
+        }
+    };
+
     const packageName = 'shopGPT';
     const DEFAULT_MAX_THREAD_AGE = 14;
     const previewKeyName = 'previewShopGPT';
@@ -531,6 +575,18 @@ var ProvidersShopGptSdk = (function () {
                 throw new Error(`Failed to save feedback - ${response.status}: ${await response.text()}`);
             }
         };
+        const fetchCustomPrompts = async (threadId) => {
+            const response = await fetchImpl(getURL(`/custom-prompts?threadId=${threadId}`), {
+                method: 'GET',
+                headers: getHeaders(),
+                credentials: 'include',
+            });
+            if (!response.ok) {
+                throw new Error(`Could not fetch custom prompts - ${response.status}: ${await response.text()}`);
+            }
+            const data = (await response.json());
+            return data.customPrompts;
+        };
         return {
             processQuery,
             fetchChatHistory,
@@ -539,6 +595,7 @@ var ProvidersShopGptSdk = (function () {
             deleteSingleThread,
             deleteAllThreads,
             saveFeedback,
+            fetchCustomPrompts,
         };
     };
 
@@ -572,11 +629,15 @@ var ProvidersShopGptSdk = (function () {
             // exit if not in top window
             return;
         }
-        const { enabled, devMode, merchantUrl, profiles, productHandles, targetPath, uiMode, brandName, quickPrompts, merchantImage, latestThreadLoad, } = (_c = params.manifest.variables) !== null && _c !== void 0 ? _c : {};
-        let shouldShowUI = enabled;
-        if (!enabled && hasPreviewKey()) {
+        const { enabled, mode, devMode, merchantUrl, profiles, productHandles, targetPath, view, brandName, quickPrompts, merchantImage, latestThreadLoad, } = (_c = params.manifest.variables) !== null && _c !== void 0 ? _c : {};
+        const experiment = createExperiment({
+            name: getExperimentName(mode),
+            userId: params.userId,
+            preview: hasPreviewKey(),
+        });
+        const shouldShowUI = enabled || experiment.isEnabled;
+        if (experiment.name === 'preview' && shouldShowUI) {
             logger.log('Enabling UI in preview mode');
-            shouldShowUI = true;
         }
         if (shouldShowUI) {
             const uiImplementation = window[registryKey].ui;
@@ -593,7 +654,7 @@ var ProvidersShopGptSdk = (function () {
                 storeAPI,
                 shopGPTAPI,
                 devMode,
-                uiMode,
+                view,
                 merchantUrl,
                 profiles,
                 productHandles,
@@ -1013,6 +1074,10 @@ var ProvidersShopGptSdk = (function () {
     &:hover {
       background: #091627;
     }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
   }
 
   .history {
@@ -1258,6 +1323,7 @@ var ProvidersShopGptSdk = (function () {
       <span class="line"></span>
       <button
         class="btn-new-search"
+        ?disabled=${this.isLoading || this.isTyping}
         @click=${() => this.setSelectedThreadId('')}
       >
         New Search
@@ -1266,7 +1332,7 @@ var ProvidersShopGptSdk = (function () {
       ${this.merchantUrl
             ? x `<div class="footer">
             Catalog:
-            <a href="${this.getDomain()}" target="_blank">
+            <a href="${this.getDomain()}" target="_blank" rel="noopener">
               ${this.getDomain().replace('https://', '')}
             </a>
           </div>`
@@ -2237,6 +2303,7 @@ var ProvidersShopGptSdk = (function () {
       padding: 10px;
       border-radius: 10px;
       border: 1px solid #a3b2c6;
+      text-decoration: none;
 
       color: #4e647f;
       line-height: 21px;
@@ -2988,7 +3055,7 @@ var ProvidersShopGptSdk = (function () {
             stash[--si] = p4
                 ? p2
                     ? `<img src="${p4}" alt="${p3}"/>`
-                    : `<a href="${p4}">${highlight(p3)}</a>`
+                    : `<a href="${p4}" rel="noopener">${highlight(p3)}</a>`
                 : p6;
             return `${si}\uf8ff`;
         });
@@ -3639,7 +3706,7 @@ ${this.comment ? this.comment : E}</textarea
               </div>
             </div>`
             : E}
-        ${this.messages.map((message) => {
+        ${o$1(this.messages, (message) => {
             if (message.sender === 'bot') {
                 return this.botMessage(message);
             }
@@ -3661,28 +3728,39 @@ ${this.comment ? this.comment : E}</textarea
       </div>
     `;
         }
-        quickPrompts() {
+        renderPrompts() {
             if (this.isLoadingHistory || this.isTyping || this.isLoadingThreads) {
                 return E;
             }
+            const isWelcomeMessage = this.messages.length === 1 && this.messages[0].sender === 'bot';
             const prompts = this.messages.length
                 ? this.messages[0].welcomePrompts
                 : this.prompts
                     ? this.prompts.split(',').map((prompt) => prompt.trim())
                     : ['Best Sellers'];
-            if (!prompts) {
+            const customPrompts = !this.messages.length || isWelcomeMessage ? this.customPrompts : undefined;
+            if (!prompts && !customPrompts) {
                 return E;
             }
             return x `
       <div class="prompts btn">
-        ${prompts.map((prompt) => x `
-              <div
-                class="prompt"
-                @click=${(e) => this.processMessage(e, prompt)}
-              >
-                ${prompt}
-              </div>
-            `)}
+        ${o$1(prompts, (prompt) => {
+            return x `
+            <div
+              class="prompt"
+              @click=${(e) => this.processMessage(e, prompt)}
+            >
+              ${prompt}
+            </div>
+          `;
+        })}
+        ${o$1(customPrompts, ({ prompt, link }) => {
+            return x `
+            <a class="prompt" href=${link} target="_blank" rel="noopener">
+              ${prompt}
+            </a>
+          `;
+        })}
       </div>
     `;
         }
@@ -3929,7 +4007,7 @@ ${this.comment ? this.comment : E}</textarea
             'modal-view': this.viewType === 'modal',
         })}
       >
-        ${this.chatWindow()} ${this.quickPrompts()}
+        ${this.chatWindow()} ${this.renderPrompts()}
         <form class="chat-form" @submit=${this.onSubmit}>
           <input
             type="text"
@@ -4012,6 +4090,10 @@ ${this.comment ? this.comment : E}</textarea
         n({ type: String }),
         __metadata("design:type", Object)
     ], ChatSection.prototype, "prompts", void 0);
+    __decorate([
+        n({ type: Array }),
+        __metadata("design:type", Object)
+    ], ChatSection.prototype, "customPrompts", void 0);
     __decorate([
         n({ type: Boolean }),
         __metadata("design:type", Boolean)
@@ -4107,6 +4189,7 @@ ${this.comment ? this.comment : E}</textarea
             this.products = [];
             this.messages = [];
             this.chatThreads = new Map();
+            this.customPrompts = [];
             this.loadData = async () => {
                 if (!this.shopGPTAPI) {
                     return;
@@ -4129,7 +4212,7 @@ ${this.comment ? this.comment : E}</textarea
         }
         connectedCallback() {
             super.connectedCallback();
-            if (!this.uiMode || this.uiMode === 'overlay') {
+            if (!this.view || this.view === 'overlay') {
                 if (!this.path) {
                     return;
                 }
@@ -4150,7 +4233,7 @@ ${this.comment ? this.comment : E}</textarea
         init() {
             window.addEventListener('edgetag-initialized', this.loadData);
             window.addEventListener('popstate', this.onPopState);
-            if (!this.uiMode || this.uiMode === 'overlay') {
+            if (!this.view || this.view === 'overlay') {
                 delay(DIALOG_DELAY).then(() => {
                     var _a;
                     if (document.hidden) {
@@ -4289,10 +4372,25 @@ ${this.comment ? this.comment : E}</textarea
                 this.isLoadingHistory = false;
             }
         }
+        async loadCustomPrompts(threadId) {
+            try {
+                if (!threadId) {
+                    this.customPrompts = [];
+                    return;
+                }
+                this.customPrompts = await this.shopGPTAPI.fetchCustomPrompts(threadId);
+            }
+            catch (e) {
+                logger.error(e);
+            }
+        }
         async setSelectedThreadId(threadId) {
             this.isFailed = false;
             this.selectedThreadId = threadId;
-            await this.loadHistory(threadId);
+            await Promise.all([
+                this.loadHistory(threadId),
+                this.loadCustomPrompts(threadId),
+            ]);
         }
         async createChatThread(payload, loadInitialQuery) {
             try {
@@ -4303,7 +4401,9 @@ ${this.comment ? this.comment : E}</textarea
                 ]);
                 this.selectedThreadId = thread.threadId;
                 if (loadInitialQuery) {
-                    await this.loadInitialQuery();
+                    await Promise.all([
+                        (this.loadInitialQuery(), this.loadCustomPrompts(thread.threadId)),
+                    ]);
                 }
             }
             catch (e) {
@@ -4396,7 +4496,7 @@ ${this.comment ? this.comment : E}</textarea
             return this.storeAPI.getSiteCurrency();
         }
         render() {
-            if (this.uiMode === 'modal') {
+            if (this.view === 'modal') {
                 return this.modalMode();
             }
             return this.overlayMode();
@@ -4445,6 +4545,7 @@ ${this.comment ? this.comment : E}</textarea
             .profiles=${this.profiles}
             .viewType=${'overlay'}
             .isLoadingThreads=${this.isLoadingThreads}
+            .customPrompts=${this.customPrompts}
           ></chat-section>
         </div>
       </dialog>
@@ -4495,6 +4596,7 @@ ${this.comment ? this.comment : E}</textarea
           .chatThreads=${this.chatThreads}
           .isLoadingThreads=${this.isLoadingThreads}
           .merchantImage=${this.merchantImage}
+          .customPrompts=${this.customPrompts}
         ></chat-section>
       </div>
     `;
@@ -4545,6 +4647,10 @@ ${this.comment ? this.comment : E}</textarea
         n({ type: Object }),
         __metadata("design:type", Map)
     ], ShopGPT.prototype, "chatThreads", void 0);
+    __decorate([
+        n({ type: Array }),
+        __metadata("design:type", Array)
+    ], ShopGPT.prototype, "customPrompts", void 0);
     if (!customElements.get('shop-gpt')) {
         customElements.define('shop-gpt', ShopGPT);
     }
@@ -4566,7 +4672,7 @@ ${this.comment ? this.comment : E}</textarea
                 shopGPT.merchantUrl = params.merchantUrl;
                 shopGPT.profiles = params.profiles;
                 shopGPT.productHandles = params.productHandles;
-                shopGPT.uiMode = params.uiMode;
+                shopGPT.view = params.view;
                 shopGPT.path = params.path;
                 shopGPT.brandName = params.brandName;
                 shopGPT.quickPrompts = params.quickPrompts;

package/index.mjs

@@ -362,6 +362,50 @@ const usStates = new Map([
 ]);
 new Set([...isoCountries.keys(), ...usStates.keys()]);
 
+const createEnabled = () => ({
+    name: 'enabled',
+    groupNames: new Set(),
+    groupName: '',
+    isEnabled: true,
+});
+const createDisabled = () => ({
+    name: 'disabled',
+    groupNames: new Set(),
+    groupName: '',
+    isEnabled: false,
+});
+const createABTest = ({ userId }) => {
+    const [sample] = userId.split('-');
+    const segment = parseInt(sample, 16) % 2;
+    return {
+        name: 'ab-test',
+        groupNames: new Set(['enabled', 'control']),
+        groupName: segment == 1 ? 'enabled' : 'control',
+        isEnabled: segment == 1,
+    };
+};
+const createPreview = ({ preview }) => {
+    return {
+        name: 'preview',
+        groupNames: new Set(['preview']),
+        groupName: preview ? 'preview' : '',
+        isEnabled: preview !== null && preview !== void 0 ? preview : false,
+    };
+};
+const getExperimentName = (mode) => (mode !== null && mode !== void 0 ? mode : 'disabled');
+const createExperiment = (props) => {
+    switch (props.name) {
+        case 'enabled':
+            return createEnabled();
+        case 'disabled':
+            return createDisabled();
+        case 'ab-test':
+            return createABTest(props);
+        case 'preview':
+            return createPreview(props);
+    }
+};
+
 const packageName = 'shopGPT';
 const DEFAULT_MAX_THREAD_AGE = 14;
 const previewKeyName = 'previewShopGPT';
@@ -528,6 +572,18 @@ const createShopGPTAPI = ({ fetch: fetchImpl = window.fetch, baseURL, userId, st
             throw new Error(`Failed to save feedback - ${response.status}: ${await response.text()}`);
         }
     };
+    const fetchCustomPrompts = async (threadId) => {
+        const response = await fetchImpl(getURL(`/custom-prompts?threadId=${threadId}`), {
+            method: 'GET',
+            headers: getHeaders(),
+            credentials: 'include',
+        });
+        if (!response.ok) {
+            throw new Error(`Could not fetch custom prompts - ${response.status}: ${await response.text()}`);
+        }
+        const data = (await response.json());
+        return data.customPrompts;
+    };
     return {
         processQuery,
         fetchChatHistory,
@@ -536,6 +592,7 @@ const createShopGPTAPI = ({ fetch: fetchImpl = window.fetch, baseURL, userId, st
         deleteSingleThread,
         deleteAllThreads,
         saveFeedback,
+        fetchCustomPrompts,
     };
 };
 
@@ -569,11 +626,15 @@ const init = (params) => {
         // exit if not in top window
         return;
     }
-    const { enabled, devMode, merchantUrl, profiles, productHandles, targetPath, uiMode, brandName, quickPrompts, merchantImage, latestThreadLoad, } = (_c = params.manifest.variables) !== null && _c !== void 0 ? _c : {};
-    let shouldShowUI = enabled;
-    if (!enabled && hasPreviewKey()) {
+    const { enabled, mode, devMode, merchantUrl, profiles, productHandles, targetPath, view, brandName, quickPrompts, merchantImage, latestThreadLoad, } = (_c = params.manifest.variables) !== null && _c !== void 0 ? _c : {};
+    const experiment = createExperiment({
+        name: getExperimentName(mode),
+        userId: params.userId,
+        preview: hasPreviewKey(),
+    });
+    const shouldShowUI = enabled || experiment.isEnabled;
+    if (experiment.name === 'preview' && shouldShowUI) {
         logger.log('Enabling UI in preview mode');
-        shouldShowUI = true;
     }
     if (shouldShowUI) {
         const uiImplementation = window[registryKey].ui;
@@ -590,7 +651,7 @@ const init = (params) => {
             storeAPI,
             shopGPTAPI,
             devMode,
-            uiMode,
+            view,
             merchantUrl,
             profiles,
             productHandles,
@@ -1010,6 +1071,10 @@ const chatThreadsStyles = i$4 `
     &:hover {
       background: #091627;
     }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
   }
 
   .history {
@@ -1255,6 +1320,7 @@ class ChatThreads extends r$2 {
       <span class="line"></span>
       <button
         class="btn-new-search"
+        ?disabled=${this.isLoading || this.isTyping}
         @click=${() => this.setSelectedThreadId('')}
       >
         New Search
@@ -1263,7 +1329,7 @@ class ChatThreads extends r$2 {
       ${this.merchantUrl
             ? x `<div class="footer">
             Catalog:
-            <a href="${this.getDomain()}" target="_blank">
+            <a href="${this.getDomain()}" target="_blank" rel="noopener">
               ${this.getDomain().replace('https://', '')}
             </a>
           </div>`
@@ -2234,6 +2300,7 @@ const chatSectionStyles = i$4 `
       padding: 10px;
       border-radius: 10px;
       border: 1px solid #a3b2c6;
+      text-decoration: none;
 
       color: #4e647f;
       line-height: 21px;
@@ -2985,7 +3052,7 @@ const markdown = (text) => {
         stash[--si] = p4
             ? p2
                 ? `<img src="${p4}" alt="${p3}"/>`
-                : `<a href="${p4}">${highlight(p3)}</a>`
+                : `<a href="${p4}" rel="noopener">${highlight(p3)}</a>`
             : p6;
         return `${si}\uf8ff`;
     });
@@ -3636,7 +3703,7 @@ class ChatSection extends r$2 {
               </div>
             </div>`
             : E}
-        ${this.messages.map((message) => {
+        ${o$1(this.messages, (message) => {
             if (message.sender === 'bot') {
                 return this.botMessage(message);
             }
@@ -3658,28 +3725,39 @@ class ChatSection extends r$2 {
       </div>
     `;
     }
-    quickPrompts() {
+    renderPrompts() {
         if (this.isLoadingHistory || this.isTyping || this.isLoadingThreads) {
             return E;
         }
+        const isWelcomeMessage = this.messages.length === 1 && this.messages[0].sender === 'bot';
         const prompts = this.messages.length
             ? this.messages[0].welcomePrompts
             : this.prompts
                 ? this.prompts.split(',').map((prompt) => prompt.trim())
                 : ['Best Sellers'];
-        if (!prompts) {
+        const customPrompts = !this.messages.length || isWelcomeMessage ? this.customPrompts : undefined;
+        if (!prompts && !customPrompts) {
             return E;
         }
         return x `
       <div class="prompts btn">
-        ${prompts.map((prompt) => x `
-              <div
-                class="prompt"
-                @click=${(e) => this.processMessage(e, prompt)}
-              >
-                ${prompt}
-              </div>
-            `)}
+        ${o$1(prompts, (prompt) => {
+            return x `
+            <div
+              class="prompt"
+              @click=${(e) => this.processMessage(e, prompt)}
+            >
+              ${prompt}
+            </div>
+          `;
+        })}
+        ${o$1(customPrompts, ({ prompt, link }) => {
+            return x `
+            <a class="prompt" href=${link} target="_blank" rel="noopener">
+              ${prompt}
+            </a>
+          `;
+        })}
       </div>
     `;
     }
@@ -3926,7 +4004,7 @@ class ChatSection extends r$2 {
             'modal-view': this.viewType === 'modal',
         })}
       >
-        ${this.chatWindow()} ${this.quickPrompts()}
+        ${this.chatWindow()} ${this.renderPrompts()}
         <form class="chat-form" @submit=${this.onSubmit}>
           <input
             type="text"
@@ -4009,6 +4087,10 @@ __decorate([
     n({ type: String }),
     __metadata("design:type", Object)
 ], ChatSection.prototype, "prompts", void 0);
+__decorate([
+    n({ type: Array }),
+    __metadata("design:type", Object)
+], ChatSection.prototype, "customPrompts", void 0);
 __decorate([
     n({ type: Boolean }),
     __metadata("design:type", Boolean)
@@ -4104,6 +4186,7 @@ class ShopGPT extends r$2 {
         this.products = [];
         this.messages = [];
         this.chatThreads = new Map();
+        this.customPrompts = [];
         this.loadData = async () => {
             if (!this.shopGPTAPI) {
                 return;
@@ -4126,7 +4209,7 @@ class ShopGPT extends r$2 {
     }
     connectedCallback() {
         super.connectedCallback();
-        if (!this.uiMode || this.uiMode === 'overlay') {
+        if (!this.view || this.view === 'overlay') {
             if (!this.path) {
                 return;
             }
@@ -4147,7 +4230,7 @@ class ShopGPT extends r$2 {
     init() {
         window.addEventListener('edgetag-initialized', this.loadData);
         window.addEventListener('popstate', this.onPopState);
-        if (!this.uiMode || this.uiMode === 'overlay') {
+        if (!this.view || this.view === 'overlay') {
             delay(DIALOG_DELAY).then(() => {
                 var _a;
                 if (document.hidden) {
@@ -4286,10 +4369,25 @@ class ShopGPT extends r$2 {
             this.isLoadingHistory = false;
         }
     }
+    async loadCustomPrompts(threadId) {
+        try {
+            if (!threadId) {
+                this.customPrompts = [];
+                return;
+            }
+            this.customPrompts = await this.shopGPTAPI.fetchCustomPrompts(threadId);
+        }
+        catch (e) {
+            logger.error(e);
+        }
+    }
     async setSelectedThreadId(threadId) {
         this.isFailed = false;
         this.selectedThreadId = threadId;
-        await this.loadHistory(threadId);
+        await Promise.all([
+            this.loadHistory(threadId),
+            this.loadCustomPrompts(threadId),
+        ]);
     }
     async createChatThread(payload, loadInitialQuery) {
         try {
@@ -4300,7 +4398,9 @@ class ShopGPT extends r$2 {
             ]);
             this.selectedThreadId = thread.threadId;
             if (loadInitialQuery) {
-                await this.loadInitialQuery();
+                await Promise.all([
+                    (this.loadInitialQuery(), this.loadCustomPrompts(thread.threadId)),
+                ]);
             }
         }
         catch (e) {
@@ -4393,7 +4493,7 @@ class ShopGPT extends r$2 {
         return this.storeAPI.getSiteCurrency();
     }
     render() {
-        if (this.uiMode === 'modal') {
+        if (this.view === 'modal') {
             return this.modalMode();
         }
         return this.overlayMode();
@@ -4442,6 +4542,7 @@ class ShopGPT extends r$2 {
             .profiles=${this.profiles}
             .viewType=${'overlay'}
             .isLoadingThreads=${this.isLoadingThreads}
+            .customPrompts=${this.customPrompts}
           ></chat-section>
         </div>
       </dialog>
@@ -4492,6 +4593,7 @@ class ShopGPT extends r$2 {
           .chatThreads=${this.chatThreads}
           .isLoadingThreads=${this.isLoadingThreads}
           .merchantImage=${this.merchantImage}
+          .customPrompts=${this.customPrompts}
         ></chat-section>
       </div>
     `;
@@ -4542,6 +4644,10 @@ __decorate([
     n({ type: Object }),
     __metadata("design:type", Map)
 ], ShopGPT.prototype, "chatThreads", void 0);
+__decorate([
+    n({ type: Array }),
+    __metadata("design:type", Array)
+], ShopGPT.prototype, "customPrompts", void 0);
 if (!customElements.get('shop-gpt')) {
     customElements.define('shop-gpt', ShopGPT);
 }
@@ -4563,7 +4669,7 @@ if (typeof window != 'undefined' && typeof document != 'undefined') {
             shopGPT.merchantUrl = params.merchantUrl;
             shopGPT.profiles = params.profiles;
             shopGPT.productHandles = params.productHandles;
-            shopGPT.uiMode = params.uiMode;
+            shopGPT.view = params.view;
             shopGPT.path = params.path;
             shopGPT.brandName = params.brandName;
             shopGPT.quickPrompts = params.quickPrompts;

package/package.json

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