@blotoutio/providers-shop-gpt-sdk 1.10.2 → 1.11.0

package/index.js

@@ -409,13 +409,24 @@ var ProvidersShopGptSdk = (function () {
         }
     };
 
+    /** Action length should not exceed 42 */
     const uiActions = new Set([
         'shopGPTInitialized',
         'chatbotOpened',
+        'chatbotClosed',
+        'singleThreadDelete',
+        'allThreadsDelete',
+        'switchThread',
+        'newSearch',
+        'thumbsUp',
+        'thumbsDown',
+        'showThreads',
         'queryInteractions',
         'promptClicked',
         'productRecommendationClicked',
+        'blotoutLinkClicked',
     ]);
+    /** Action length should not exceed 42 */
     new Set([
         ...uiActions,
         'pageView',
@@ -768,10 +779,11 @@ var ProvidersShopGptSdk = (function () {
             const data = (await response.json());
             return data.customPrompts;
         };
-        const sendEvent = async (action, currency, actionData) => {
+        const sendEvent = (action, currency, actionData) => {
             var _a;
             const storageData = (_a = getProductActions(baseURL, sessionId)) !== null && _a !== void 0 ? _a : {};
-            const response = await fetchImpl(getURL('/user/event'), {
+            // This endpoint sends user events to the server, we don't need to wait for the response
+            fetchImpl(getURL('/user/event'), {
                 method: 'POST',
                 headers: getHeaders(true),
                 body: JSON.stringify({
@@ -785,10 +797,13 @@ var ProvidersShopGptSdk = (function () {
                     },
                 }),
                 credentials: 'include',
-            });
-            if (!response.ok) {
-                throw new Error(`Error while recording user event - ${response.status}: ${response.statusText}\n\n${await response.text()}`);
-            }
+            })
+                .then(async (response) => {
+                if (!response.ok) {
+                    throw new Error(`Error while recording user event - ${response.status}: ${response.statusText}\n\n${await response.text()}`);
+                }
+            })
+                .catch(logger.error);
         };
         return {
             processQuery,
@@ -824,8 +839,8 @@ var ProvidersShopGptSdk = (function () {
             // exit if not in top window
             return;
         }
-        const { enabled, mode, devMode, merchantUrl, profiles, productHandles, targetPath, view, brandName, quickPrompts, merchantImage, latestThreadLoad, botIconUrl, css, nudge, loadUiManually, } = (_c = params.manifest.variables) !== null && _c !== void 0 ? _c : {};
-        setShopGPTLoaded(params.baseUrl, (_d = params.session) === null || _d === void 0 ? void 0 : _d.sessionId, !loadUiManually);
+        const { enabled, mode, devMode, merchantUrl, profiles, productHandles, targetPath, view, brandName, quickPrompts, merchantImage, latestThreadLoad, botIconUrl, css, nudge, loadUIManually, } = (_c = params.manifest.variables) !== null && _c !== void 0 ? _c : {};
+        setShopGPTLoaded(params.baseUrl, (_d = params.session) === null || _d === void 0 ? void 0 : _d.sessionId, !loadUIManually);
         const experiment = createExperiment({
             name: getExperimentName(mode),
             userId: params.userId,
@@ -865,8 +880,9 @@ var ProvidersShopGptSdk = (function () {
                 css,
                 nudge,
                 sessionId: (_f = params.session) === null || _f === void 0 ? void 0 : _f.sessionId,
+                loadUIManually,
             });
-            if (!loadUiManually) {
+            if (!loadUIManually) {
                 uiImplementation.loadUI();
             }
         }
@@ -1089,6 +1105,7 @@ var ProvidersShopGptSdk = (function () {
       height: 56px;
       background-color: var(--shopgpt-primary);
       border-radius: 50%;
+      display: flex;
       justify-content: center;
       align-items: center;
       box-shadow: 0 0 4px 1px var(--shopgpt-white);
@@ -1521,6 +1538,13 @@ var ProvidersShopGptSdk = (function () {
             }
             return `https://${this.merchantUrl}`;
         }
+        sendEvent(action, actionData) {
+            this.dispatchEvent(new CustomEvent('send-event', {
+                detail: { action, actionData },
+                composed: true,
+                bubbles: true,
+            }));
+        }
         handleThreadDelete() {
             if (this.deleteAllThreads) {
                 this.dispatchEvent(new CustomEvent('delete-all-threads', {
@@ -1555,7 +1579,7 @@ var ProvidersShopGptSdk = (function () {
             ? x `<div
                 class="trash-icon"
                 @click=${() => {
-                if (this.isLoading || this.isTyping) {
+                if (this.isLoading || this.isStreaming) {
                     return;
                 }
                 this.deleteAllThreads = true;
@@ -1572,13 +1596,15 @@ var ProvidersShopGptSdk = (function () {
                     class=${e$1({
                 'thread-wrapper': true,
                 active: this.selectedThreadId === thread.threadId,
-                disabled: this.isTyping,
+                disabled: this.isStreaming,
             })}
                   >
                     <div
                       class="thread-title"
                       @click=${async () => {
-                if (this.isLoading || this.isTyping) {
+                if (this.isLoading ||
+                    this.isStreaming ||
+                    this.selectedThreadId === thread.threadId) {
                     return;
                 }
                 await this.setSelectedThreadId(thread.threadId);
@@ -1589,7 +1615,7 @@ var ProvidersShopGptSdk = (function () {
                     <div
                       class="trash-icon"
                       @click=${() => {
-                if (this.isLoading || this.isTyping) {
+                if (this.isLoading || this.isStreaming) {
                     return;
                 }
                 this.deleteThreadId = thread.threadId;
@@ -1610,8 +1636,13 @@ var ProvidersShopGptSdk = (function () {
       <span class="line"></span>
       <button
         class="btn-new-search"
-        ?disabled=${this.isLoading || this.isTyping}
-        @click=${() => this.setSelectedThreadId('')}
+        ?disabled=${this.isLoading || this.isStreaming}
+        @click=${() => {
+            if (this.selectedThreadId) {
+                this.sendEvent('newSearch');
+            }
+            this.setSelectedThreadId('');
+        }}
       >
         New Search
       </button>
@@ -1668,7 +1699,7 @@ var ProvidersShopGptSdk = (function () {
     __decorate([
         n({ type: Boolean }),
         __metadata("design:type", Boolean)
-    ], ChatThreads.prototype, "isTyping", void 0);
+    ], ChatThreads.prototype, "isStreaming", void 0);
     __decorate([
         n({ type: String }),
         __metadata("design:type", String)
@@ -2339,6 +2370,12 @@ var ProvidersShopGptSdk = (function () {
         background: #2b65cf;
         opacity: 1;
       }
+
+      .new-search-btn:disabled {
+        background: #808080;
+        cursor: not-allowed;
+        opacity: 0.5;
+      }
     }
   }
 
@@ -2371,6 +2408,7 @@ var ProvidersShopGptSdk = (function () {
       line-height: 150%;
       letter-spacing: -0.32px;
 
+      box-sizing: border-box;
       background: #fff;
       border-radius: 10px;
       border: 1px solid #dbe2eb;
@@ -2489,6 +2527,11 @@ var ProvidersShopGptSdk = (function () {
       color: rgb(140, 137, 156);
       border-radius: 50%;
 
+      & > svg {
+        height: 22px;
+        width: 22px;
+      }
+
       &:hover {
         background-color: rgba(47, 43, 61, 0.08);
       }
@@ -3982,6 +4025,7 @@ ${this.comment ? this.comment : E}</textarea
         handleFeedback(rating, messageId, comment) {
             var _a, _b;
             if (rating === 'bad') {
+                this.sendEvent('thumbsDown');
                 this.feedbackDetails = {
                     messageId,
                     threadId: ((_a = this.thread) === null || _a === void 0 ? void 0 : _a.threadId) || '',
@@ -3989,6 +4033,7 @@ ${this.comment ? this.comment : E}</textarea
                 };
                 return;
             }
+            this.sendEvent('thumbsUp');
             this.dispatchEvent(new CustomEvent('submit-feedback', {
                 detail: {
                     messageId: messageId,
@@ -4105,22 +4150,26 @@ ${this.comment ? this.comment : E}</textarea
             }
             return x ` <div class="message user">${message.message}</div> `;
         })}
+        ${!this.fromAd || !this.thread
+            ? x `
         <div class="message bot">
           <div>${this.renderBotIcon()}</div>
           <div>
             <p>
               Hi,
               ${this.brandName ? x `Welcome to ${this.brandName}.` : E}
-              I'm here to help you find the perfect product? What are you
-              looking to resolve today?
+              I'm here to help you find the perfect product. Pick a suggested
+              prompt from below, or enter your own query.
             </p>
           </div>
         </div>
+      </div>`
+            : E}
       </div>
     `;
         }
         renderPrompts() {
-            if (this.isLoadingHistory || this.isTyping || this.isLoadingThreads) {
+            if (this.isLoadingHistory || this.isStreaming || this.isLoadingThreads) {
                 return E;
             }
             const isWelcomeMessage = this.messages.length === 1 && this.messages[0].sender === 'bot';
@@ -4251,10 +4300,14 @@ ${this.comment ? this.comment : E}</textarea
           <button
             class="btn btn-icon new-search-btn"
             @click=${(e) => {
-            var _a;
+            var _a, _b;
             e.preventDefault();
-            (_a = this.setSelectedThreadId) === null || _a === void 0 ? void 0 : _a.call(this, '');
+            if ((_a = this.thread) === null || _a === void 0 ? void 0 : _a.threadId) {
+                this.sendEvent('newSearch');
+            }
+            (_b = this.setSelectedThreadId) === null || _b === void 0 ? void 0 : _b.call(this, '');
         }}
+            ?disabled=${this.isStreaming}
           >
             ${plusBtn}
           </button>
@@ -4273,6 +4326,9 @@ ${this.comment ? this.comment : E}</textarea
             @click=${(e) => {
             e.preventDefault();
             this.showChatThreads = !this.showChatThreads;
+            if (this.showChatThreads) {
+                this.sendEvent('showThreads');
+            }
         }}
           >
             ${timerBtn}
@@ -4342,7 +4398,7 @@ ${this.comment ? this.comment : E}</textarea
             ? x `<div
                 class="trash-icon"
                 @click=${() => {
-                if (this.isTyping) {
+                if (this.isStreaming) {
                     return;
                 }
                 this.deleteAllThreads = true;
@@ -4358,17 +4414,18 @@ ${this.comment ? this.comment : E}</textarea
               <div
                 class=${e$1({
             'thread-title': true,
-            disabled: this.isTyping,
+            disabled: this.isStreaming,
         })}
               >
                 <p
                   @click=${() => {
-            var _a;
-            if (this.isTyping) {
+            var _a, _b;
+            if (this.isStreaming ||
+                ((_a = this.thread) === null || _a === void 0 ? void 0 : _a.threadId) === thread.threadId) {
                 return;
             }
             this.showChatThreads = false;
-            (_a = this.setSelectedThreadId) === null || _a === void 0 ? void 0 : _a.call(this, thread.threadId);
+            (_b = this.setSelectedThreadId) === null || _b === void 0 ? void 0 : _b.call(this, thread.threadId);
         }}
                 >
                   ${thread.title || 'New Search'}
@@ -4376,7 +4433,7 @@ ${this.comment ? this.comment : E}</textarea
                 <div
                   class="trash-icon"
                   @click=${() => {
-            if (this.isTyping) {
+            if (this.isStreaming) {
                 return;
             }
             this.deleteThreadId = thread.threadId;
@@ -4425,7 +4482,7 @@ ${this.comment ? this.comment : E}</textarea
             modal: this.viewType === 'modal',
         })}
             type="submit"
-            ?disabled=${this.isTyping || this.isLoadingHistory}
+            ?disabled=${this.isStreaming || this.isLoadingHistory}
           >
             ${sendFilledIcon}
           </button>
@@ -4433,9 +4490,15 @@ ${this.comment ? this.comment : E}</textarea
         ${this.viewType === 'modal'
             ? x ` <footer>
               Powered by
-              <a target="_blank" href="https://shopgpt.edgeagents.ai"
-                >Blotout</a
+              <a
+                target="_blank"
+                href="https://shopgpt.edgeagents.ai"
+                @click=${() => {
+                this.sendEvent('blotoutLinkClicked');
+            }}
               >
+                Blotout
+              </a>
             </footer>`
             : E}
       </div>
@@ -4539,6 +4602,10 @@ ${this.comment ? this.comment : E}</textarea
         n({ type: Boolean }),
         __metadata("design:type", Boolean)
     ], ChatSection.prototype, "isTyping", void 0);
+    __decorate([
+        n({ type: Boolean }),
+        __metadata("design:type", Boolean)
+    ], ChatSection.prototype, "isStreaming", void 0);
     __decorate([
         n({ type: Boolean }),
         __metadata("design:type", Boolean)
@@ -4591,6 +4658,10 @@ ${this.comment ? this.comment : E}</textarea
         n({ type: String }),
         __metadata("design:type", String)
     ], ChatSection.prototype, "css", void 0);
+    __decorate([
+        n({ type: Boolean }),
+        __metadata("design:type", Boolean)
+    ], ChatSection.prototype, "fromAd", void 0);
     if (!customElements.get('chat-section')) {
         customElements.define('chat-section', ChatSection);
     }
@@ -4667,6 +4738,7 @@ ${this.comment ? this.comment : E}</textarea
             this.isLoadingHistory = false;
             this.isLoadingThreads = false;
             this.isTyping = false;
+            this.isStreaming = false;
             this.isFailed = false;
             this.selectedThreadId = '';
             this.products = [];
@@ -4687,6 +4759,16 @@ ${this.comment ? this.comment : E}</textarea
                 this.modalState = 'close';
                 (_a = this.shopGPTDialog) === null || _a === void 0 ? void 0 : _a.close();
             };
+            this.isFromAd = () => {
+                var _a;
+                if (this.devMode) {
+                    const thread = this.chatThreads.get(this.selectedThreadId);
+                    return thread ? !!((_a = thread.devContext) === null || _a === void 0 ? void 0 : _a.productHandle) : false;
+                }
+                const searchParams = new URLSearchParams(window.location.search);
+                return ((isFromAd(searchParams) || searchParams.get('shopGPT') === '1') &&
+                    !!this.storeAPI.getCurrentProductHandle());
+            };
             this.submitQuery = (message) => {
                 if (!message) {
                     return;
@@ -4718,7 +4800,9 @@ ${this.comment ? this.comment : E}</textarea
             this.startNudgeTimer();
         }
         disconnectedCallback() {
-            window.removeEventListener('edgetag-initialized', this.loadData);
+            if (!this.loadUIManually) {
+                window.removeEventListener('edgetag-initialized', this.loadData);
+            }
             window.removeEventListener('popstate', this.onPopState);
             if (this.nudgeTimer) {
                 window.clearTimeout(this.nudgeTimer);
@@ -4726,7 +4810,14 @@ ${this.comment ? this.comment : E}</textarea
             super.disconnectedCallback();
         }
         init() {
-            window.addEventListener('edgetag-initialized', this.loadData);
+            if (this.loadUIManually) {
+                // this is because edgetag-initialized will already be
+                // triggered before the loadUI function is called to load the UI
+                this.loadData();
+            }
+            else {
+                window.addEventListener('edgetag-initialized', this.loadData);
+            }
             window.addEventListener('popstate', this.onPopState);
             this.shopGPTAPI.sendEvent('shopGPTInitialized', this.getSiteCurrency().currency);
             if (!this.view || this.view === 'overlay') {
@@ -4770,15 +4861,18 @@ ${this.comment ? this.comment : E}</textarea
             if (!thread) {
                 return;
             }
-            const searchParams = new URLSearchParams(window.location.search);
-            const fromAd = isFromAd(searchParams) || searchParams.get('shopGPT') === '1';
+            const fromAd = this.isFromAd();
             const productHandle = this.devMode
                 ? (_a = thread === null || thread === void 0 ? void 0 : thread.devContext) === null || _a === void 0 ? void 0 : _a.productHandle
                 : fromAd
                     ? this.storeAPI.getCurrentProductHandle()
                     : undefined;
+            if (!fromAd) {
+                return;
+            }
             try {
                 this.isTyping = true;
+                this.isStreaming = true;
                 const response = await this.shopGPTAPI.processQuery('', thread.threadId, productHandle);
                 this.processMessageResponse(response);
             }
@@ -4786,6 +4880,7 @@ ${this.comment ? this.comment : E}</textarea
                 logger.error(error);
                 this.isFailed = true;
                 this.isTyping = false;
+                this.isStreaming = false;
             }
         }
         async loadChatThreads() {
@@ -4812,9 +4907,9 @@ ${this.comment ? this.comment : E}</textarea
                 }
             }
             if (latestThread) {
-                this.setSelectedThreadId(latestThread.threadId);
+                this.setSelectedThreadId(latestThread.threadId, true);
             }
-            else if (!this.devMode) {
+            else if (!this.devMode && this.isFromAd()) {
                 this.createChatThread({ title: '' }, true);
             }
         }
@@ -4867,9 +4962,12 @@ ${this.comment ? this.comment : E}</textarea
                 logger.error(e);
             }
         }
-        async setSelectedThreadId(threadId) {
+        async setSelectedThreadId(threadId, silent) {
             this.isFailed = false;
             this.selectedThreadId = threadId;
+            if (threadId && !silent) {
+                this.shopGPTAPI.sendEvent('switchThread');
+            }
             await Promise.all([
                 this.loadHistory(threadId),
                 this.loadCustomPrompts(threadId),
@@ -4901,6 +4999,7 @@ ${this.comment ? this.comment : E}</textarea
                 logger.error('ThreadId is missing to delete the thread!');
                 return;
             }
+            this.shopGPTAPI.sendEvent('singleThreadDelete');
             this.shopGPTAPI
                 .deleteSingleThread(threadId)
                 .then(this.loadChatThreads.bind(this))
@@ -4915,6 +5014,7 @@ ${this.comment ? this.comment : E}</textarea
         handleAllThreadsDelete(e) {
             e.stopPropagation();
             this.isLoadingThreads = true;
+            this.shopGPTAPI.sendEvent('allThreadsDelete');
             this.shopGPTAPI
                 .deleteAllThreads()
                 .then(this.loadChatThreads.bind(this))
@@ -4992,6 +5092,7 @@ ${this.comment ? this.comment : E}</textarea
                 }
                 else if (eventName === 'MessageComplete') {
                     isMessageCompleted = true;
+                    this.isStreaming = false;
                     this.handleProductsComplete(products, isMessageCompleted);
                     this.handleCompleteMessage(data);
                 }
@@ -5011,7 +5112,7 @@ ${this.comment ? this.comment : E}</textarea
         async sendMessageToServer(e, message, isPrompt = false) {
             e.preventDefault();
             e.stopPropagation();
-            if (!message || this.isTyping || this.isLoadingHistory) {
+            if (!message || this.isStreaming || this.isLoadingHistory) {
                 return;
             }
             this.isFailed = false;
@@ -5022,6 +5123,7 @@ ${this.comment ? this.comment : E}</textarea
                 }
                 this.messages = [{ sender: 'user', message }, ...this.messages];
                 this.isTyping = true;
+                this.isStreaming = true;
                 const response = await this.submitQuery(message);
                 this.processMessageResponse(response);
             }
@@ -5029,6 +5131,7 @@ ${this.comment ? this.comment : E}</textarea
                 logger.error(err);
                 this.isFailed = true;
                 this.isTyping = false;
+                this.isStreaming = false;
             }
         }
         submitFeedback(e) {
@@ -5082,7 +5185,7 @@ ${this.comment ? this.comment : E}</textarea
             .selectedThreadId=${this.selectedThreadId}
             .setSelectedThreadId=${this.setSelectedThreadId.bind(this)}
             .isLoading=${this.isLoadingThreads}
-            .isTyping=${this.isTyping}
+            .isStreaming=${this.isStreaming}
             .merchantUrl=${this.merchantUrl}
             .css=${this.css}
           ></chat-threads>
@@ -5100,6 +5203,7 @@ ${this.comment ? this.comment : E}</textarea
             .isFailed=${this.isFailed}
             .isLoadingHistory=${this.isLoadingHistory}
             .isTyping=${this.isTyping}
+            .isStreaming=${this.isStreaming}
             .messages=${this.messages}
             .siteCurrency=${this.getSiteCurrency()}
             .sendMessageToServer=${this.sendMessageToServer.bind(this)}
@@ -5113,6 +5217,7 @@ ${this.comment ? this.comment : E}</textarea
             .customPrompts=${this.customPrompts}
             .botIconUrl=${this.botIconUrl}
             .css=${this.css}
+            .fromAd=${this.isFromAd()}
           ></chat-section>
         </div>
       </dialog>
@@ -5123,6 +5228,7 @@ ${this.comment ? this.comment : E}</textarea
             const thread = this.chatThreads.get(this.selectedThreadId);
             const closeModal = () => {
                 this.modalState = 'close';
+                this.shopGPTAPI.sendEvent('chatbotClosed');
             };
             if (this.modalState === 'close') {
                 return x ` <div class="chatbot-widget">
@@ -5169,6 +5275,7 @@ ${this.comment ? this.comment : E}</textarea
           .isFailed=${this.isFailed}
           .isLoadingHistory=${this.isLoadingHistory}
           .isTyping=${this.isTyping}
+          .isStreaming=${this.isStreaming}
           .messages=${this.messages}
           .siteCurrency=${this.getSiteCurrency()}
           .sendMessageToServer=${this.sendMessageToServer.bind(this)}
@@ -5186,6 +5293,7 @@ ${this.comment ? this.comment : E}</textarea
           .customPrompts=${this.customPrompts}
           .botIconUrl=${this.botIconUrl}
           .css=${this.css}
+          .fromAd=${this.isFromAd()}
         ></chat-section>
       </div>
     `;
@@ -5258,6 +5366,10 @@ ${this.comment ? this.comment : E}</textarea
         n({ type: Boolean }),
         __metadata("design:type", Object)
     ], ShopGPT.prototype, "isTyping", void 0);
+    __decorate([
+        n({ type: Boolean }),
+        __metadata("design:type", Object)
+    ], ShopGPT.prototype, "isStreaming", void 0);
     __decorate([
         n({ type: Boolean }),
         __metadata("design:type", Object)
@@ -5322,6 +5434,7 @@ ${this.comment ? this.comment : E}</textarea
                 shopGPT.css = params.css;
                 shopGPT.nudge = params.nudge;
                 shopGPT.sessionId = params.sessionId;
+                shopGPT.loadUIManually = params.loadUIManually;
             },
             loadUI() {
                 if (!shopGPT) {