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

package/index.cjs.js

@@ -408,13 +408,24 @@ const createExperiment = (props) => {
     }
 };
 
+/** 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',
@@ -767,10 +778,11 @@ const createShopGPTAPI = ({ fetch: fetchImpl = window.fetch, baseURL, userId, st
         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({
@@ -784,10 +796,13 @@ const createShopGPTAPI = ({ fetch: fetchImpl = window.fetch, baseURL, userId, st
                 },
             }),
             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,
@@ -823,8 +838,8 @@ const init = (params) => {
         // 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,
@@ -864,8 +879,9 @@ const init = (params) => {
             css,
             nudge,
             sessionId: (_f = params.session) === null || _f === void 0 ? void 0 : _f.sessionId,
+            loadUIManually,
         });
-        if (!loadUiManually) {
+        if (!loadUIManually) {
             uiImplementation.loadUI();
         }
     }
@@ -1088,6 +1104,7 @@ const shopGPTStyles = i$4 `
       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);
@@ -1520,6 +1537,13 @@ class ChatThreads extends r$2 {
         }
         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', {
@@ -1554,7 +1578,7 @@ class ChatThreads extends r$2 {
             ? x `<div
                 class="trash-icon"
                 @click=${() => {
-                if (this.isLoading || this.isTyping) {
+                if (this.isLoading || this.isStreaming) {
                     return;
                 }
                 this.deleteAllThreads = true;
@@ -1571,13 +1595,15 @@ class ChatThreads extends r$2 {
                     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);
@@ -1588,7 +1614,7 @@ class ChatThreads extends r$2 {
                     <div
                       class="trash-icon"
                       @click=${() => {
-                if (this.isLoading || this.isTyping) {
+                if (this.isLoading || this.isStreaming) {
                     return;
                 }
                 this.deleteThreadId = thread.threadId;
@@ -1609,8 +1635,13 @@ class ChatThreads extends r$2 {
       <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>
@@ -1667,7 +1698,7 @@ __decorate([
 __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)
@@ -2338,6 +2369,12 @@ const chatSectionStyles = i$4 `
         background: #2b65cf;
         opacity: 1;
       }
+
+      .new-search-btn:disabled {
+        background: #808080;
+        cursor: not-allowed;
+        opacity: 0.5;
+      }
     }
   }
 
@@ -2370,6 +2407,7 @@ const chatSectionStyles = i$4 `
       line-height: 150%;
       letter-spacing: -0.32px;
 
+      box-sizing: border-box;
       background: #fff;
       border-radius: 10px;
       border: 1px solid #dbe2eb;
@@ -2488,6 +2526,11 @@ const chatSectionStyles = i$4 `
       color: rgb(140, 137, 156);
       border-radius: 50%;
 
+      & > svg {
+        height: 22px;
+        width: 22px;
+      }
+
       &:hover {
         background-color: rgba(47, 43, 61, 0.08);
       }
@@ -3981,6 +4024,7 @@ class ChatSection extends r$2 {
     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) || '',
@@ -3988,6 +4032,7 @@ class ChatSection extends r$2 {
             };
             return;
         }
+        this.sendEvent('thumbsUp');
         this.dispatchEvent(new CustomEvent('submit-feedback', {
             detail: {
                 messageId: messageId,
@@ -4104,22 +4149,26 @@ class ChatSection extends r$2 {
             }
             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';
@@ -4250,10 +4299,14 @@ class ChatSection extends r$2 {
           <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>
@@ -4272,6 +4325,9 @@ class ChatSection extends r$2 {
             @click=${(e) => {
             e.preventDefault();
             this.showChatThreads = !this.showChatThreads;
+            if (this.showChatThreads) {
+                this.sendEvent('showThreads');
+            }
         }}
           >
             ${timerBtn}
@@ -4341,7 +4397,7 @@ class ChatSection extends r$2 {
             ? x `<div
                 class="trash-icon"
                 @click=${() => {
-                if (this.isTyping) {
+                if (this.isStreaming) {
                     return;
                 }
                 this.deleteAllThreads = true;
@@ -4357,17 +4413,18 @@ class ChatSection extends r$2 {
               <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'}
@@ -4375,7 +4432,7 @@ class ChatSection extends r$2 {
                 <div
                   class="trash-icon"
                   @click=${() => {
-            if (this.isTyping) {
+            if (this.isStreaming) {
                 return;
             }
             this.deleteThreadId = thread.threadId;
@@ -4424,7 +4481,7 @@ class ChatSection extends r$2 {
             modal: this.viewType === 'modal',
         })}
             type="submit"
-            ?disabled=${this.isTyping || this.isLoadingHistory}
+            ?disabled=${this.isStreaming || this.isLoadingHistory}
           >
             ${sendFilledIcon}
           </button>
@@ -4432,9 +4489,15 @@ class ChatSection extends r$2 {
         ${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>
@@ -4538,6 +4601,10 @@ __decorate([
     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)
@@ -4590,6 +4657,10 @@ __decorate([
     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);
 }
@@ -4666,6 +4737,7 @@ class ShopGPT extends r$2 {
         this.isLoadingHistory = false;
         this.isLoadingThreads = false;
         this.isTyping = false;
+        this.isStreaming = false;
         this.isFailed = false;
         this.selectedThreadId = '';
         this.products = [];
@@ -4686,6 +4758,16 @@ class ShopGPT extends r$2 {
             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;
@@ -4717,7 +4799,9 @@ class ShopGPT extends r$2 {
         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);
@@ -4725,7 +4809,14 @@ class ShopGPT extends r$2 {
         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') {
@@ -4769,15 +4860,18 @@ class ShopGPT extends r$2 {
         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);
         }
@@ -4785,6 +4879,7 @@ class ShopGPT extends r$2 {
             logger.error(error);
             this.isFailed = true;
             this.isTyping = false;
+            this.isStreaming = false;
         }
     }
     async loadChatThreads() {
@@ -4811,9 +4906,9 @@ class ShopGPT extends r$2 {
             }
         }
         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);
         }
     }
@@ -4866,9 +4961,12 @@ class ShopGPT extends r$2 {
             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),
@@ -4900,6 +4998,7 @@ class ShopGPT extends r$2 {
             logger.error('ThreadId is missing to delete the thread!');
             return;
         }
+        this.shopGPTAPI.sendEvent('singleThreadDelete');
         this.shopGPTAPI
             .deleteSingleThread(threadId)
             .then(this.loadChatThreads.bind(this))
@@ -4914,6 +5013,7 @@ class ShopGPT extends r$2 {
     handleAllThreadsDelete(e) {
         e.stopPropagation();
         this.isLoadingThreads = true;
+        this.shopGPTAPI.sendEvent('allThreadsDelete');
         this.shopGPTAPI
             .deleteAllThreads()
             .then(this.loadChatThreads.bind(this))
@@ -4991,6 +5091,7 @@ class ShopGPT extends r$2 {
             }
             else if (eventName === 'MessageComplete') {
                 isMessageCompleted = true;
+                this.isStreaming = false;
                 this.handleProductsComplete(products, isMessageCompleted);
                 this.handleCompleteMessage(data);
             }
@@ -5010,7 +5111,7 @@ class ShopGPT extends r$2 {
     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;
@@ -5021,6 +5122,7 @@ class ShopGPT extends r$2 {
             }
             this.messages = [{ sender: 'user', message }, ...this.messages];
             this.isTyping = true;
+            this.isStreaming = true;
             const response = await this.submitQuery(message);
             this.processMessageResponse(response);
         }
@@ -5028,6 +5130,7 @@ class ShopGPT extends r$2 {
             logger.error(err);
             this.isFailed = true;
             this.isTyping = false;
+            this.isStreaming = false;
         }
     }
     submitFeedback(e) {
@@ -5081,7 +5184,7 @@ class ShopGPT extends r$2 {
             .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>
@@ -5099,6 +5202,7 @@ class ShopGPT extends r$2 {
             .isFailed=${this.isFailed}
             .isLoadingHistory=${this.isLoadingHistory}
             .isTyping=${this.isTyping}
+            .isStreaming=${this.isStreaming}
             .messages=${this.messages}
             .siteCurrency=${this.getSiteCurrency()}
             .sendMessageToServer=${this.sendMessageToServer.bind(this)}
@@ -5112,6 +5216,7 @@ class ShopGPT extends r$2 {
             .customPrompts=${this.customPrompts}
             .botIconUrl=${this.botIconUrl}
             .css=${this.css}
+            .fromAd=${this.isFromAd()}
           ></chat-section>
         </div>
       </dialog>
@@ -5122,6 +5227,7 @@ class ShopGPT extends r$2 {
         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">
@@ -5168,6 +5274,7 @@ class ShopGPT extends r$2 {
           .isFailed=${this.isFailed}
           .isLoadingHistory=${this.isLoadingHistory}
           .isTyping=${this.isTyping}
+          .isStreaming=${this.isStreaming}
           .messages=${this.messages}
           .siteCurrency=${this.getSiteCurrency()}
           .sendMessageToServer=${this.sendMessageToServer.bind(this)}
@@ -5185,6 +5292,7 @@ class ShopGPT extends r$2 {
           .customPrompts=${this.customPrompts}
           .botIconUrl=${this.botIconUrl}
           .css=${this.css}
+          .fromAd=${this.isFromAd()}
         ></chat-section>
       </div>
     `;
@@ -5257,6 +5365,10 @@ __decorate([
     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)
@@ -5321,6 +5433,7 @@ if (typeof window != 'undefined' && typeof document != 'undefined') {
             shopGPT.css = params.css;
             shopGPT.nudge = params.nudge;
             shopGPT.sessionId = params.sessionId;
+            shopGPT.loadUIManually = params.loadUIManually;
         },
         loadUI() {
             if (!shopGPT) {