@blotoutio/providers-shop-gpt-sdk 1.11.3 → 1.11.5

package/index.js

@@ -377,6 +377,8 @@ var ProvidersShopGptSdk = (function () {
         groupName: '',
         isEnabled: false,
     });
+    // userId => 92ae5ac6-b47c-4444-923f-87d98b7e1fac-1743927514247
+    // sample => 92ae5ac6
     const createABTest = ({ userId }) => {
         const [sample] = userId.split('-');
         const segment = parseInt(sample, 16) % 2;
@@ -412,6 +414,7 @@ var ProvidersShopGptSdk = (function () {
     /** Action length should not exceed 42 */
     const uiActions = new Set([
         'shopGPTInitialized',
+        'shopGPTLoaded',
         'chatbotOpened',
         'chatbotClosed',
         'singleThreadDelete',
@@ -626,16 +629,16 @@ var ProvidersShopGptSdk = (function () {
         const updatedLocal = { [sessionId]: local[sessionId] };
         saveLocalStorageData(destination, updatedLocal);
     };
-    const getShopGPTLoaded = (destination, sessionId) => {
+    const getWasUserExposed = (destination, sessionId) => {
         var _a, _b;
         const local = getLocalStorageData(destination);
         if (!local || !sessionId) {
             logger.error('No local storage data or session id');
             return false;
         }
-        return (_b = (_a = local[sessionId]) === null || _a === void 0 ? void 0 : _a.isShopGPTLoaded) !== null && _b !== void 0 ? _b : false;
+        return (_b = (_a = local[sessionId]) === null || _a === void 0 ? void 0 : _a.exposed) !== null && _b !== void 0 ? _b : false;
     };
-    const setShopGPTLoaded = (destination, sessionId, value) => {
+    const setWasUserExposed = (destination, sessionId, value) => {
         const local = getLocalStorageData(destination);
         if (!local || !sessionId) {
             logger.error('No local storage data or session id');
@@ -643,14 +646,60 @@ var ProvidersShopGptSdk = (function () {
         }
         local[sessionId] = {
             ...local[sessionId],
-            isShopGPTLoaded: value,
+            exposed: value,
         };
         // Clear other sessions
         const updatedLocal = { [sessionId]: local[sessionId] };
         saveLocalStorageData(destination, updatedLocal);
     };
+    const setUserType = (destination, sessionId, value) => {
+        const local = getLocalStorageData(destination);
+        if (!local || !sessionId) {
+            logger.error('No session id');
+            return;
+        }
+        local[sessionId] = {
+            ...local[sessionId],
+            userType: value,
+        };
+        // Clear other sessions
+        const updatedLocal = { [sessionId]: local[sessionId] };
+        saveLocalStorageData(destination, updatedLocal);
+    };
+    const getUserType = (destination, sessionId) => {
+        var _a;
+        const local = getLocalStorageData(destination);
+        if (!sessionId) {
+            logger.error('No session id');
+            return;
+        }
+        return (_a = local === null || local === void 0 ? void 0 : local[sessionId]) === null || _a === void 0 ? void 0 : _a.userType;
+    };
+    const setIsBotOpened = (destination, sessionId, value) => {
+        const local = getLocalStorageData(destination);
+        if (!local || !sessionId) {
+            logger.error('No session id');
+            return;
+        }
+        local[sessionId] = {
+            ...local[sessionId],
+            opened: value,
+        };
+        // Clear other sessions
+        const updatedLocal = { [sessionId]: local[sessionId] };
+        saveLocalStorageData(destination, updatedLocal);
+    };
+    const getIsBotOpened = (destination, sessionId) => {
+        var _a;
+        const local = getLocalStorageData(destination);
+        if (!sessionId) {
+            logger.error('No session id');
+            return;
+        }
+        return (_a = local === null || local === void 0 ? void 0 : local[sessionId]) === null || _a === void 0 ? void 0 : _a.opened;
+    };
 
-    const createShopGPTAPI = ({ fetch: fetchImpl = window.fetch, baseURL, userId, storeAPI, sessionId, }) => {
+    const createShopGPTAPI = ({ fetch: fetchImpl = window.fetch, baseURL, userId, storeAPI, sessionId, sendTag, }) => {
         if (!baseURL) {
             throw new Error(`baseURL missing`);
         }
@@ -780,9 +829,12 @@ var ProvidersShopGptSdk = (function () {
             const data = (await response.json());
             return data.customPrompts;
         };
-        const sendEvent = (action, currency, actionData) => {
+        const sendEvent = (action, currency, actionData, clickData) => {
             var _a;
             const storageData = (_a = getProductActions(baseURL, sessionId)) !== null && _a !== void 0 ? _a : {};
+            const userType = getUserType(baseURL, sessionId);
+            const exposed = getWasUserExposed(baseURL, sessionId);
+            const opened = getIsBotOpened(baseURL, sessionId);
             // This endpoint sends user events to the server, we don't need to wait for the response
             fetchImpl(getURL('/user/event'), {
                 method: 'POST',
@@ -794,7 +846,9 @@ var ProvidersShopGptSdk = (function () {
                     storageData: {
                         session: storageData,
                         preview: hasPreviewKey(),
-                        isShopGPTLoaded: true, // The fact that sendEvent was called means that the ShopGPT is loaded
+                        userType: userType,
+                        exposed,
+                        opened: !!opened,
                     },
                 }),
                 credentials: 'include',
@@ -805,6 +859,21 @@ var ProvidersShopGptSdk = (function () {
                 }
             })
                 .catch(logger.error);
+            sendTag({
+                eventId: crypto.randomUUID(),
+                eventName: action,
+                data: {
+                    ...actionData,
+                    ...clickData,
+                    userType,
+                    exposed,
+                    storageData,
+                    opened: !!opened,
+                },
+                providers: {
+                    shopGPT: true,
+                },
+            });
         };
         return {
             processQuery,
@@ -822,7 +891,7 @@ var ProvidersShopGptSdk = (function () {
     // eslint-disable-next-line @nx/enforce-module-boundaries
     const error = (message) => console.error(message);
     const init = (params) => {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c;
         if (typeof window == 'undefined' || typeof document == 'undefined') {
             // if loaded in non-browser SDKs, return early
             return;
@@ -841,7 +910,6 @@ var ProvidersShopGptSdk = (function () {
             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 experiment = createExperiment({
             name: getExperimentName(mode),
             userId: params.userId,
@@ -851,42 +919,65 @@ var ProvidersShopGptSdk = (function () {
         if (experiment.name === 'preview' && shouldShowUI) {
             logger.log('Enabling UI in preview mode');
         }
-        if (shouldShowUI) {
-            const uiImplementation = window[registryKey].ui;
-            if (!uiImplementation) {
-                error('UI implementation is missing');
-                return;
+        // once we implement a general version with togglable option to discriminate
+        // between anon/known, we'll be able to skip creating this promise before
+        // init and possibly loading the UI
+        new Promise((resolve) => {
+            var _a;
+            const userType = getUserType(params.baseUrl, (_a = params.session) === null || _a === void 0 ? void 0 : _a.sessionId);
+            if (userType) {
+                return resolve();
             }
+            params.getEdgeData(['email'], (data) => {
+                var _a;
+                setUserType(params.baseUrl, (_a = params.session) === null || _a === void 0 ? void 0 : _a.sessionId, data['emailExists'] ? 'known' : 'anon');
+                resolve();
+            });
+        }).then(() => {
+            var _a, _b;
             const shopGPTAPI = createShopGPTAPI({
                 baseURL: params.baseUrl,
                 storeAPI,
                 userId: params.userId,
-                sessionId: (_e = params.session) === null || _e === void 0 ? void 0 : _e.sessionId,
+                sessionId: (_a = params.session) === null || _a === void 0 ? void 0 : _a.sessionId,
+                sendTag: params.sendTag,
             });
-            uiImplementation.init({
-                destination: params.baseUrl,
-                storeAPI,
-                shopGPTAPI,
-                devMode,
-                view,
-                merchantUrl,
-                profiles,
-                productHandles,
-                path: targetPath,
-                brandName,
-                quickPrompts,
-                merchantImage,
-                latestThreadLoad: latestThreadLoad !== null && latestThreadLoad !== void 0 ? latestThreadLoad : DEFAULT_MAX_THREAD_AGE,
-                botIconUrl,
-                css,
-                nudge,
-                sessionId: (_f = params.session) === null || _f === void 0 ? void 0 : _f.sessionId,
-                loadUIManually,
+            shopGPTAPI.sendEvent('shopGPTInitialized', undefined, undefined, {
+                groupName: experiment.groupName,
             });
-            if (!loadUIManually) {
-                uiImplementation.loadUI();
+            if (shouldShowUI) {
+                const uiImplementation = window[registryKey].ui;
+                if (!uiImplementation) {
+                    error('UI implementation is missing');
+                    return;
+                }
+                uiImplementation.init({
+                    destination: params.baseUrl,
+                    storeAPI,
+                    shopGPTAPI,
+                    devMode,
+                    view,
+                    merchantUrl,
+                    profiles,
+                    productHandles,
+                    path: targetPath,
+                    brandName,
+                    quickPrompts,
+                    merchantImage,
+                    latestThreadLoad: latestThreadLoad !== null && latestThreadLoad !== void 0 ? latestThreadLoad : DEFAULT_MAX_THREAD_AGE,
+                    botIconUrl,
+                    css,
+                    nudge,
+                    sessionId: (_b = params.session) === null || _b === void 0 ? void 0 : _b.sessionId,
+                    loadUIManually,
+                });
+                const searchParams = new URLSearchParams(window.location.search);
+                const hasSource = searchParams.get('utm_source') === 'shopgpt';
+                if (!loadUIManually || hasSource) {
+                    uiImplementation.loadUI();
+                }
             }
-        }
+        });
     };
 
     const getClickedProductsInContents = (destination, sessionId, data) => {
@@ -898,7 +989,7 @@ var ProvidersShopGptSdk = (function () {
         return contents.flatMap((content) => { var _a; return ((_a = storedData[content.id]) === null || _a === void 0 ? void 0 : _a.clicked) ? [content.id] : []; });
     };
     const tag = ({ eventName, destination, data, sessionId, }) => {
-        var _a;
+        var _a, _b;
         const clickedProducts = getClickedProductsInContents(destination, sessionId, data);
         if (eventName === 'AddToCart') {
             clickedProducts === null || clickedProducts === void 0 ? void 0 : clickedProducts.forEach((id) => {
@@ -913,7 +1004,9 @@ var ProvidersShopGptSdk = (function () {
         return {
             session: getProductActions(destination, sessionId),
             preview: hasPreviewKey(),
-            isShopGPTLoaded: (_a = getShopGPTLoaded(destination, sessionId)) !== null && _a !== void 0 ? _a : false,
+            exposed: (_a = getWasUserExposed(destination, sessionId)) !== null && _a !== void 0 ? _a : false,
+            userType: getUserType(destination, sessionId),
+            opened: (_b = getIsBotOpened(destination, sessionId)) !== null && _b !== void 0 ? _b : false,
         };
     };
 
@@ -1783,13 +1876,13 @@ var ProvidersShopGptSdk = (function () {
   .product {
     display: flex;
     gap: 16px;
+    cursor: pointer;
 
     img {
       width: 150px;
       height: 186px;
       object-position: center;
       object-fit: contain;
-      cursor: pointer;
     }
   }
 
@@ -1814,7 +1907,6 @@ var ProvidersShopGptSdk = (function () {
     text-overflow: ellipsis;
     word-break: break-word;
     white-space: normal;
-    cursor: pointer;
   }
 
   .product-variation-details {
@@ -1925,11 +2017,14 @@ var ProvidersShopGptSdk = (function () {
       ${this.getLocalPrice(comparedAtPrice)}
     </p>`;
         }
-        redirect(url) {
+        openProduct(url) {
             if (!url) {
                 return;
             }
-            open(url, '_self');
+            const link = new URL(url);
+            link.searchParams.set('utm_source', 'shopgpt');
+            link.searchParams.set('utm_medium', 'chat');
+            open(link, '_self');
         }
         renderVariantTitles() {
             if (this.product.hasOnlyDefaultVariant) {
@@ -1939,39 +2034,32 @@ var ProvidersShopGptSdk = (function () {
         <p class="product-variation-details">${option.name}: ${option.value}</p>
       `);
         }
-        productClicked(productId, price, url) {
-            if (productId) {
+        productClicked(product) {
+            if (product.id) {
+                const price = product.variants[0].price;
                 this.dispatchEvent(new CustomEvent('product-clicked', {
                     detail: {
-                        productId,
+                        id: product.id,
                         value: price ? parseFloat(price) : undefined,
+                        variantId: product.variants[0].id,
+                        title: product.title,
+                        url: product.url,
+                        query: this.query,
+                        response: this.response,
+                        rank: this.rank,
                     },
                     composed: true,
                     bubbles: true,
                 }));
             }
-            this.redirect(url);
+            this.openProduct(product.url);
         }
         render() {
             return x `
-      <div class="product">
-        <img
-          src=${this.product.image.url}
-          alt=${this.product.image.alt}
-          @click=${() => {
-            var _a;
-            return this.productClicked(this.product.id, this.product.variants[0].price, (_a = this.product) === null || _a === void 0 ? void 0 : _a.url);
-        }}
-        />
+      <div class="product" @click=${() => this.productClicked(this.product)}>
+        <img src=${this.product.image.url} alt=${this.product.image.alt} />
         <div class="content">
-          <p
-            class="product-name"
-            title=${this.product.title}
-            @click=${() => {
-            var _a;
-            return this.productClicked(this.product.id, this.product.variants[0].price, (_a = this.product) === null || _a === void 0 ? void 0 : _a.url);
-        }}
-          >
+          <p class="product-name" title=${this.product.title}>
             ${this.product.title}
           </p>
           ${this.renderVariantTitles()}
@@ -1979,15 +2067,7 @@ var ProvidersShopGptSdk = (function () {
             ${this.getComparedAtPrice(this.product.variants[0].comparedAtPrice, this.product.variants[0].price)}
             <p>${this.getLocalPrice(this.product.variants[0].price)}</p>
           </div>
-          <button
-            class="btn-view-product"
-            @click=${() => {
-            var _a;
-            return this.productClicked(this.product.id, this.product.variants[0].price, (_a = this.product) === null || _a === void 0 ? void 0 : _a.url);
-        }}
-          >
-            View Product
-          </button>
+          <button class="btn-view-product">View Product</button>
         </div>
       </div>
     `;
@@ -2002,6 +2082,18 @@ var ProvidersShopGptSdk = (function () {
         n({ type: Object }),
         __metadata("design:type", Object)
     ], ProductItem.prototype, "siteCurrency", void 0);
+    __decorate([
+        n({ type: String }),
+        __metadata("design:type", Object)
+    ], ProductItem.prototype, "query", void 0);
+    __decorate([
+        n({ type: String }),
+        __metadata("design:type", String)
+    ], ProductItem.prototype, "response", void 0);
+    __decorate([
+        n({ type: Number }),
+        __metadata("design:type", Number)
+    ], ProductItem.prototype, "rank", void 0);
     if (!customElements.get('product-item')) {
         customElements.define('product-item', ProductItem);
     }
@@ -2118,7 +2210,7 @@ var ProvidersShopGptSdk = (function () {
             return x `
       <div class="products-wrapper">
         <div class="products" @scroll=${this.updateButtonsState}>
-          ${o$1(this.products, (product) => x `
+          ${o$1(this.products, (product, index) => x `
                 <div
                   class=${e$1({
             'product-container': true,
@@ -2126,8 +2218,11 @@ var ProvidersShopGptSdk = (function () {
         })}
                 >
                   <product-item
+                    .query=${this.query}
+                    .response=${this.response}
                     .product=${product}
                     .siteCurrency=${this.siteCurrency}
+                    .rank=${index + 1}
                   ></product-item>
                 </div>
               `)}
@@ -2155,6 +2250,14 @@ var ProvidersShopGptSdk = (function () {
         n({ type: Object }),
         __metadata("design:type", Object)
     ], ProductsList.prototype, "siteCurrency", void 0);
+    __decorate([
+        n({ type: String }),
+        __metadata("design:type", Object)
+    ], ProductsList.prototype, "query", void 0);
+    __decorate([
+        n({ type: String }),
+        __metadata("design:type", String)
+    ], ProductsList.prototype, "response", void 0);
     __decorate([
         r(),
         __metadata("design:type", Object)
@@ -2201,6 +2304,7 @@ var ProvidersShopGptSdk = (function () {
     `;
         }
         render() {
+            var _a;
             if (this.isLoadingHistory || this.isLoadingThreads) {
                 return x ` <load-spinner></load-spinner> `;
             }
@@ -2211,18 +2315,25 @@ var ProvidersShopGptSdk = (function () {
             }
             const topResult = this.products[0];
             const others = this.products.slice(1);
+            const query = (_a = this.messages) === null || _a === void 0 ? void 0 : _a[1];
+            const response = this.messages[0];
             return x `
       <div class="top-result">
         <h2>Top Result</h2>
         <product-item
+          .query=${query === null || query === void 0 ? void 0 : query.message}
+          .response=${response === null || response === void 0 ? void 0 : response.message}
           .product=${topResult}
           .siteCurrency=${this.siteCurrency}
+          .rank=${1}
         ></product-item>
       </div>
       <span class="line"></span>
       <div class="others">
         <h2>Other Recommendations</h2>
         <products-list
+          .query=${query === null || query === void 0 ? void 0 : query.message}
+          .response=${response === null || response === void 0 ? void 0 : response.message}
           .products=${others}
           .siteCurrency=${this.siteCurrency}
           .viewType=${'overlay'}
@@ -2268,6 +2379,10 @@ var ProvidersShopGptSdk = (function () {
         n({ type: String }),
         __metadata("design:type", String)
     ], ProductsSection.prototype, "css", void 0);
+    __decorate([
+        n({ type: Array }),
+        __metadata("design:type", Array)
+    ], ProductsSection.prototype, "messages", void 0);
     if (!customElements.get('products-section')) {
         customElements.define('products-section', ProductsSection);
     }
@@ -3994,9 +4109,9 @@ ${this.comment ? this.comment : E}</textarea
             }
             await this.sendMessageToServer(e, message, isPrompt);
         }
-        sendEvent(action, actionData) {
+        sendEvent(action, actionData, clickData) {
             this.dispatchEvent(new CustomEvent('send-event', {
-                detail: { action, actionData },
+                detail: { action, actionData, clickData },
                 composed: true,
                 bubbles: true,
             }));
@@ -4027,24 +4142,38 @@ ${this.comment ? this.comment : E}</textarea
             }));
             this.deleteThreadId = '';
         }
-        handleFeedback(rating, messageId, queryMessageId, comment) {
-            var _a, _b;
+        handleFeedback(rating, messageId, queryMessageId, comment, query, response) {
+            var _a, _b, _c, _d;
             if (rating === 'bad') {
-                this.sendEvent('thumbsDown');
+                this.sendEvent('thumbsDown', undefined, {
+                    messageId,
+                    threadId: ((_a = this.thread) === null || _a === void 0 ? void 0 : _a.threadId) || '',
+                    rating,
+                    comment: comment !== null && comment !== void 0 ? comment : '',
+                    query: query !== null && query !== void 0 ? query : '',
+                    response: response !== null && response !== void 0 ? response : '',
+                });
                 this.feedbackDetails = {
                     messageId,
                     queryMessageId,
-                    threadId: ((_a = this.thread) === null || _a === void 0 ? void 0 : _a.threadId) || '',
+                    threadId: ((_b = this.thread) === null || _b === void 0 ? void 0 : _b.threadId) || '',
                     comment,
                 };
                 return;
             }
-            this.sendEvent('thumbsUp');
+            this.sendEvent('thumbsUp', undefined, {
+                messageId,
+                threadId: ((_c = this.thread) === null || _c === void 0 ? void 0 : _c.threadId) || '',
+                rating,
+                comment: comment !== null && comment !== void 0 ? comment : '',
+                query: query !== null && query !== void 0 ? query : '',
+                response: response !== null && response !== void 0 ? response : '',
+            });
             this.dispatchEvent(new CustomEvent('submit-feedback', {
                 detail: {
                     messageId: messageId,
                     queryMessageId: queryMessageId,
-                    threadId: (_b = this.thread) === null || _b === void 0 ? void 0 : _b.threadId,
+                    threadId: (_d = this.thread) === null || _d === void 0 ? void 0 : _d.threadId,
                     feedback: {
                         rating,
                         comment: null,
@@ -4079,8 +4208,11 @@ ${this.comment ? this.comment : E}</textarea
                   <span class="line"></span>
                   <div class="product-container">
                     <product-item
+                      .query=${queryMessage === null || queryMessage === void 0 ? void 0 : queryMessage.message}
+                      .response=${message.message}
                       .product=${message.products[0]}
                       .siteCurrency=${this.siteCurrency}
+                      .rank=${1}
                     ></product-item>
                   </div>
                 `
@@ -4089,16 +4221,18 @@ ${this.comment ? this.comment : E}</textarea
         </div>
         ${this.viewType === 'modal' && message.products
             ? x ` <products-list
+              .query=${queryMessage === null || queryMessage === void 0 ? void 0 : queryMessage.message}
+              .response=${message.message}
               .products=${message.products}
               .siteCurrency=${this.siteCurrency}
               .viewType=${this.viewType}
             ></products-list>`
             : E}
         ${message.messageId && (queryMessage === null || queryMessage === void 0 ? void 0 : queryMessage.messageId)
-            ? x `<div class="bot-response-actions">
+            ? x ` <div class="bot-response-actions">
               <button
                 type="button"
-                @click=${this.handleFeedback.bind(this, 'good', message.messageId, queryMessage === null || queryMessage === void 0 ? void 0 : queryMessage.messageId, (_b = message.feedback) === null || _b === void 0 ? void 0 : _b.comment)}
+                @click=${this.handleFeedback.bind(this, 'good', message.messageId, queryMessage === null || queryMessage === void 0 ? void 0 : queryMessage.messageId, (_b = message.feedback) === null || _b === void 0 ? void 0 : _b.comment, queryMessage === null || queryMessage === void 0 ? void 0 : queryMessage.message, message === null || message === void 0 ? void 0 : message.message)}
               >
                 ${((_c = message.feedback) === null || _c === void 0 ? void 0 : _c.rating) === 'good'
                 ? thumbsUpFilledBtn
@@ -4106,7 +4240,7 @@ ${this.comment ? this.comment : E}</textarea
               </button>
               <button
                 type="button"
-                @click=${this.handleFeedback.bind(this, 'bad', message.messageId, queryMessage === null || queryMessage === void 0 ? void 0 : queryMessage.messageId, (_d = message.feedback) === null || _d === void 0 ? void 0 : _d.comment)}
+                @click=${this.handleFeedback.bind(this, 'bad', message.messageId, queryMessage === null || queryMessage === void 0 ? void 0 : queryMessage.messageId, (_d = message.feedback) === null || _d === void 0 ? void 0 : _d.comment, queryMessage === null || queryMessage === void 0 ? void 0 : queryMessage.message, message === null || message === void 0 ? void 0 : message.message)}
               >
                 ${((_e = message.feedback) === null || _e === void 0 ? void 0 : _e.rating) === 'bad'
                 ? thumbsDownFilledBtn
@@ -4119,7 +4253,7 @@ ${this.comment ? this.comment : E}</textarea
         }
         renderBotIcon() {
             if (this.botIconUrl) {
-                return x `<div class="bot-icon">
+                return x ` <div class="bot-icon">
         <img src=${this.botIconUrl} width="30" height="30" />
       </div>`;
             }
@@ -4127,7 +4261,7 @@ ${this.comment ? this.comment : E}</textarea
         }
         chatWindow() {
             if (this.isLoadingHistory || this.isLoadingThreads) {
-                return x `<div class="messages loading">
+                return x ` <div class="messages loading">
         <load-spinner></load-spinner>
       </div>`;
             }
@@ -4140,7 +4274,7 @@ ${this.comment ? this.comment : E}</textarea
             </div>`
             : ''}
         ${this.isFailed
-            ? x `<div class="message bot">
+            ? x ` <div class="message bot">
               <div>${this.renderBotIcon()}</div>
               <div>
                 <p>
@@ -4160,18 +4294,20 @@ ${this.comment ? this.comment : E}</textarea
         })}
         ${!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. Pick a suggested
-              prompt from below, or enter your own query.
-            </p>
-          </div>
-        </div>
-      </div>`
+            <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. Pick a suggested
+                  prompt from below, or enter your own query.
+                </p>
+              </div>
+            </div>
+            </div>`
             : E}
       </div>
     `;
@@ -4198,7 +4334,9 @@ ${this.comment ? this.comment : E}</textarea
               class="prompt"
               @click=${(e) => {
                 this.processMessage(e, prompt, true);
-                this.sendEvent('promptClicked');
+                this.sendEvent('promptClicked', undefined, {
+                    promptName: prompt,
+                });
             }}
             >
               ${prompt}
@@ -4212,7 +4350,9 @@ ${this.comment ? this.comment : E}</textarea
               href=${link}
               target="_blank"
               rel="noopener"
-              @click=${() => this.sendEvent('promptClicked')}
+              @click=${() => this.sendEvent('promptClicked', undefined, {
+                promptName: prompt,
+            })}
             >
               ${prompt}
             </a>
@@ -4403,7 +4543,7 @@ ${this.comment ? this.comment : E}</textarea
         <div class="title-wrapper">
           <h2>Search History</h2>
           ${this.chatThreads.size
-            ? x `<div
+            ? x ` <div
                 class="trash-icon"
                 @click=${() => {
                 if (this.isStreaming) {
@@ -4809,9 +4949,6 @@ ${this.comment ? this.comment : E}</textarea
             this.startNudgeTimer();
         }
         disconnectedCallback() {
-            if (!this.loadUIManually) {
-                window.removeEventListener('edgetag-initialized', this.loadData);
-            }
             window.removeEventListener('popstate', this.onPopState);
             if (this.nudgeTimer) {
                 window.clearTimeout(this.nudgeTimer);
@@ -4819,16 +4956,9 @@ ${this.comment ? this.comment : E}</textarea
             super.disconnectedCallback();
         }
         init() {
-            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);
-            }
+            this.loadData();
             window.addEventListener('popstate', this.onPopState);
-            this.shopGPTAPI.sendEvent('shopGPTInitialized', this.getSiteCurrency().currency);
+            this.shopGPTAPI.sendEvent('shopGPTLoaded');
             if (!this.view || this.view === 'overlay') {
                 delay(DIALOG_DELAY)
                     .then(() => {
@@ -4844,6 +4974,14 @@ ${this.comment ? this.comment : E}</textarea
                 })
                     .catch(logger.error);
             }
+            else if (this.view === 'modal') {
+                const searchParams = new URLSearchParams(window.location.search);
+                const hasSource = searchParams.get('utm_source') === 'shopgpt';
+                // If the url has `utm_source` open the popup when reloaded
+                if (hasSource) {
+                    this.modalState = 'open';
+                }
+            }
         }
         setChatTitle(threadId, title) {
             if (!title || !threadId) {
@@ -4972,10 +5110,17 @@ ${this.comment ? this.comment : E}</textarea
             }
         }
         async setSelectedThreadId(threadId, silent) {
+            var _a, _b, _c, _d;
             this.isFailed = false;
+            const currentThreadId = this.selectedThreadId;
             this.selectedThreadId = threadId;
             if (threadId && !silent) {
-                this.shopGPTAPI.sendEvent('switchThread');
+                this.shopGPTAPI.sendEvent('switchThread', undefined, undefined, {
+                    previousThread: currentThreadId,
+                    activeThread: threadId,
+                    previousThreadTitle: (_b = (_a = this.chatThreads.get(currentThreadId)) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : '',
+                    activeThreadTitle: (_d = (_c = this.chatThreads.get(this.selectedThreadId)) === null || _c === void 0 ? void 0 : _c.title) !== null && _d !== void 0 ? _d : '',
+                });
             }
             await Promise.all([
                 this.loadHistory(threadId),
@@ -5001,6 +5146,7 @@ ${this.comment ? this.comment : E}</textarea
             }
         }
         handleThreadDelete(e) {
+            var _a, _b;
             e.stopPropagation();
             this.isLoadingThreads = true;
             const threadId = e.detail.threadId;
@@ -5008,7 +5154,10 @@ ${this.comment ? this.comment : E}</textarea
                 logger.error('ThreadId is missing to delete the thread!');
                 return;
             }
-            this.shopGPTAPI.sendEvent('singleThreadDelete');
+            this.shopGPTAPI.sendEvent('singleThreadDelete', undefined, undefined, {
+                thread: threadId,
+                threadTitle: (_b = (_a = this.chatThreads.get(threadId)) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : '',
+            });
             this.shopGPTAPI
                 .deleteSingleThread(threadId)
                 .then(this.loadChatThreads.bind(this))
@@ -5136,7 +5285,10 @@ ${this.comment ? this.comment : E}</textarea
             try {
                 this.isPreviousMessagePrompt = isPrompt;
                 if (!isPrompt) {
-                    this.shopGPTAPI.sendEvent('queryInteractions', this.getSiteCurrency().currency);
+                    this.shopGPTAPI.sendEvent('queryInteractions', this.getSiteCurrency().currency, undefined, {
+                        query: message,
+                        threadId: this.selectedThreadId,
+                    });
                 }
                 this.messages = [{ sender: 'user', message }, ...this.messages];
                 this.isTyping = true;
@@ -5168,15 +5320,25 @@ ${this.comment ? this.comment : E}</textarea
         }
         sendEvent(e) {
             e.stopPropagation();
-            this.shopGPTAPI.sendEvent(e.detail.action, this.getSiteCurrency().currency, e.detail.actionData);
+            this.shopGPTAPI.sendEvent(e.detail.action, this.getSiteCurrency().currency, e.detail.actionData, e.detail.clickData);
         }
         productClicked(e) {
+            var _a, _b;
             e.stopPropagation();
-            setProductAction(this.destination, this.sessionId, e.detail.productId, 'clicked', true);
+            setProductAction(this.destination, this.sessionId, e.detail.id, 'clicked', true);
             this.shopGPTAPI.sendEvent('productRecommendationClicked', this.getSiteCurrency().currency, {
-                productId: e.detail.productId,
+                productId: e.detail.id,
                 value: e.detail.value,
                 isPrompt: this.isPreviousMessagePrompt,
+            }, {
+                threadId: this.selectedThreadId,
+                query: (_a = e.detail.query) !== null && _a !== void 0 ? _a : '',
+                response: (_b = e.detail.response) !== null && _b !== void 0 ? _b : '',
+                currency: this.getSiteCurrency().currency,
+                variantId: e.detail.variantId,
+                url: e.detail.url,
+                title: e.detail.title,
+                rank: e.detail.rank,
             });
         }
         getSiteCurrency() {
@@ -5207,6 +5369,7 @@ ${this.comment ? this.comment : E}</textarea
             .css=${this.css}
           ></chat-threads>
           <products-section
+            .messages=${this.messages}
             .merchantImage=${this.merchantImage}
             .products=${this.products}
             .isLoadingHistory=${this.isLoadingHistory}
@@ -5252,26 +5415,23 @@ ${this.comment ? this.comment : E}</textarea
         <button
           @click=${(e) => {
                 e.preventDefault();
-                this.shopGPTAPI.sendEvent('chatbotOpened', this.getSiteCurrency().currency);
-                this.modalState = 'open';
-                this.handleUserInteraction();
+                this.openModal();
             }}
         >
           ${chatIcon}
         </button>
         ${((_a = this.nudge) === null || _a === void 0 ? void 0 : _a.show) && this.showNudge
-                ? x `<div
+                ? x ` <div
               class="nudge"
               @click=${(e) => {
                     e.preventDefault();
-                    this.modalState = 'open';
-                    this.handleUserInteraction();
+                    this.openModal();
                 }}
             >
               Hi there! I'm an AI Agent to help you find the perfect product.
               What are you looking for today?
             </div>`
-                : x `<div class="chatbot-hover-text">
+                : x ` <div class="chatbot-hover-text">
               What are you looking for today?
             </div>`}
       </div>`;
@@ -5315,6 +5475,12 @@ ${this.comment ? this.comment : E}</textarea
       </div>
     `;
         }
+        openModal() {
+            setIsBotOpened(this.destination, this.sessionId, true);
+            this.shopGPTAPI.sendEvent('chatbotOpened');
+            this.modalState = 'open';
+            this.handleUserInteraction();
+        }
         startNudgeTimer() {
             var _a, _b;
             if (this.view !== 'modal' || !((_a = this.nudge) === null || _a === void 0 ? void 0 : _a.show)) {
@@ -5462,14 +5628,13 @@ ${this.comment ? this.comment : E}</textarea
                     logger.log('ShopGPT component added already!');
                     return;
                 }
+                setWasUserExposed(shopGPT.destination, shopGPT.sessionId, true);
                 document.body.append(shopGPT);
-                setShopGPTLoaded(shopGPT.destination, shopGPT.sessionId, true);
             },
             destroy() {
                 if (!shopGPT) {
                     return;
                 }
-                setShopGPTLoaded(shopGPT.destination, shopGPT.sessionId, false);
                 shopGPT.remove();
                 shopGPT = undefined;
                 delete window[registryKey];