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

package/index.mjs

@@ -406,13 +406,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',
@@ -765,10 +776,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({
@@ -782,10 +794,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,
@@ -821,8 +836,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,
@@ -862,8 +877,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();
         }
     }
@@ -1086,6 +1102,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);
@@ -1518,6 +1535,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', {
@@ -1552,7 +1576,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;
@@ -1569,13 +1593,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);
@@ -1586,7 +1612,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;
@@ -1607,8 +1633,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>
@@ -1665,7 +1696,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)
@@ -2336,6 +2367,12 @@ const chatSectionStyles = i$4 `
         background: #2b65cf;
         opacity: 1;
       }
+
+      .new-search-btn:disabled {
+        background: #808080;
+        cursor: not-allowed;
+        opacity: 0.5;
+      }
     }
   }
 
@@ -2368,6 +2405,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;
@@ -2486,6 +2524,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);
       }
@@ -3979,6 +4022,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) || '',
@@ -3986,6 +4030,7 @@ class ChatSection extends r$2 {
             };
             return;
         }
+        this.sendEvent('thumbsUp');
         this.dispatchEvent(new CustomEvent('submit-feedback', {
             detail: {
                 messageId: messageId,
@@ -4102,22 +4147,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';
@@ -4248,10 +4297,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>
@@ -4270,6 +4323,9 @@ class ChatSection extends r$2 {
             @click=${(e) => {
             e.preventDefault();
             this.showChatThreads = !this.showChatThreads;
+            if (this.showChatThreads) {
+                this.sendEvent('showThreads');
+            }
         }}
           >
             ${timerBtn}
@@ -4339,7 +4395,7 @@ class ChatSection extends r$2 {
             ? x `<div
                 class="trash-icon"
                 @click=${() => {
-                if (this.isTyping) {
+                if (this.isStreaming) {
                     return;
                 }
                 this.deleteAllThreads = true;
@@ -4355,17 +4411,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'}
@@ -4373,7 +4430,7 @@ class ChatSection extends r$2 {
                 <div
                   class="trash-icon"
                   @click=${() => {
-            if (this.isTyping) {
+            if (this.isStreaming) {
                 return;
             }
             this.deleteThreadId = thread.threadId;
@@ -4422,7 +4479,7 @@ class ChatSection extends r$2 {
             modal: this.viewType === 'modal',
         })}
             type="submit"
-            ?disabled=${this.isTyping || this.isLoadingHistory}
+            ?disabled=${this.isStreaming || this.isLoadingHistory}
           >
             ${sendFilledIcon}
           </button>
@@ -4430,9 +4487,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>
@@ -4536,6 +4599,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)
@@ -4588,6 +4655,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);
 }
@@ -4664,6 +4735,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 = [];
@@ -4684,6 +4756,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;
@@ -4715,7 +4797,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);
@@ -4723,7 +4807,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') {
@@ -4767,15 +4858,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);
         }
@@ -4783,6 +4877,7 @@ class ShopGPT extends r$2 {
             logger.error(error);
             this.isFailed = true;
             this.isTyping = false;
+            this.isStreaming = false;
         }
     }
     async loadChatThreads() {
@@ -4809,9 +4904,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);
         }
     }
@@ -4864,9 +4959,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),
@@ -4898,6 +4996,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))
@@ -4912,6 +5011,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))
@@ -4989,6 +5089,7 @@ class ShopGPT extends r$2 {
             }
             else if (eventName === 'MessageComplete') {
                 isMessageCompleted = true;
+                this.isStreaming = false;
                 this.handleProductsComplete(products, isMessageCompleted);
                 this.handleCompleteMessage(data);
             }
@@ -5008,7 +5109,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;
@@ -5019,6 +5120,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);
         }
@@ -5026,6 +5128,7 @@ class ShopGPT extends r$2 {
             logger.error(err);
             this.isFailed = true;
             this.isTyping = false;
+            this.isStreaming = false;
         }
     }
     submitFeedback(e) {
@@ -5079,7 +5182,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>
@@ -5097,6 +5200,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)}
@@ -5110,6 +5214,7 @@ class ShopGPT extends r$2 {
             .customPrompts=${this.customPrompts}
             .botIconUrl=${this.botIconUrl}
             .css=${this.css}
+            .fromAd=${this.isFromAd()}
           ></chat-section>
         </div>
       </dialog>
@@ -5120,6 +5225,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">
@@ -5166,6 +5272,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)}
@@ -5183,6 +5290,7 @@ class ShopGPT extends r$2 {
           .customPrompts=${this.customPrompts}
           .botIconUrl=${this.botIconUrl}
           .css=${this.css}
+          .fromAd=${this.isFromAd()}
         ></chat-section>
       </div>
     `;
@@ -5255,6 +5363,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)
@@ -5319,6 +5431,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) {

package/package.json

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