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

package/index.cjs.js

@@ -376,6 +376,8 @@ const createDisabled = () => ({
     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;
@@ -411,6 +413,7 @@ const createExperiment = (props) => {
 /** Action length should not exceed 42 */
 const uiActions = new Set([
     'shopGPTInitialized',
+    'shopGPTLoaded',
     'chatbotOpened',
     'chatbotClosed',
     'singleThreadDelete',
@@ -625,16 +628,16 @@ const setProductAction = (destination, sessionId, productId, action, value) => {
     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');
@@ -642,14 +645,60 @@ const setShopGPTLoaded = (destination, sessionId, value) => {
     }
     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`);
     }
@@ -779,9 +828,12 @@ const createShopGPTAPI = ({ fetch: fetchImpl = window.fetch, baseURL, userId, st
         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',
@@ -793,7 +845,9 @@ const createShopGPTAPI = ({ fetch: fetchImpl = window.fetch, baseURL, userId, st
                 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',
@@ -804,6 +858,21 @@ const createShopGPTAPI = ({ fetch: fetchImpl = window.fetch, baseURL, userId, st
             }
         })
             .catch(logger.error);
+        sendTag({
+            eventId: crypto.randomUUID(),
+            eventName: action,
+            data: {
+                ...actionData,
+                ...clickData,
+                userType,
+                exposed,
+                storageData,
+                opened: !!opened,
+            },
+            providers: {
+                shopGPT: true,
+            },
+        });
     };
     return {
         processQuery,
@@ -821,7 +890,7 @@ const createShopGPTAPI = ({ fetch: fetchImpl = window.fetch, baseURL, userId, st
 // 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;
@@ -840,7 +909,6 @@ const init = (params) => {
         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,
@@ -850,42 +918,65 @@ const init = (params) => {
     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) => {
@@ -897,7 +988,7 @@ const getClickedProductsInContents = (destination, sessionId, data) => {
     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) => {
@@ -912,7 +1003,9 @@ const tag = ({ eventName, destination, data, sessionId, }) => {
     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,
     };
 };
 
@@ -1782,13 +1875,13 @@ const productItemStyles = i$4 `
   .product {
     display: flex;
     gap: 16px;
+    cursor: pointer;
 
     img {
       width: 150px;
       height: 186px;
       object-position: center;
       object-fit: contain;
-      cursor: pointer;
     }
   }
 
@@ -1813,7 +1906,6 @@ const productItemStyles = i$4 `
     text-overflow: ellipsis;
     word-break: break-word;
     white-space: normal;
-    cursor: pointer;
   }
 
   .product-variation-details {
@@ -1924,11 +2016,14 @@ class ProductItem extends r$2 {
       ${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) {
@@ -1938,39 +2033,32 @@ class ProductItem extends r$2 {
         <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()}
@@ -1978,15 +2066,7 @@ class ProductItem extends r$2 {
             ${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>
     `;
@@ -2001,6 +2081,18 @@ __decorate([
     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);
 }
@@ -2117,7 +2209,7 @@ class ProductsList extends r$2 {
         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,
@@ -2125,8 +2217,11 @@ class ProductsList extends r$2 {
         })}
                 >
                   <product-item
+                    .query=${this.query}
+                    .response=${this.response}
                     .product=${product}
                     .siteCurrency=${this.siteCurrency}
+                    .rank=${index + 1}
                   ></product-item>
                 </div>
               `)}
@@ -2154,6 +2249,14 @@ __decorate([
     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)
@@ -2200,6 +2303,7 @@ class ProductsSection extends r$2 {
     `;
     }
     render() {
+        var _a;
         if (this.isLoadingHistory || this.isLoadingThreads) {
             return x ` <load-spinner></load-spinner> `;
         }
@@ -2210,18 +2314,25 @@ class ProductsSection extends r$2 {
         }
         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'}
@@ -2267,6 +2378,10 @@ __decorate([
     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);
 }
@@ -3993,9 +4108,9 @@ class ChatSection extends r$2 {
         }
         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,
         }));
@@ -4026,24 +4141,38 @@ class ChatSection extends r$2 {
         }));
         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,
@@ -4078,8 +4207,11 @@ class ChatSection extends r$2 {
                   <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>
                 `
@@ -4088,16 +4220,18 @@ class ChatSection extends r$2 {
         </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
@@ -4105,7 +4239,7 @@ class ChatSection extends r$2 {
               </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
@@ -4118,7 +4252,7 @@ class ChatSection extends r$2 {
     }
     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>`;
         }
@@ -4126,7 +4260,7 @@ class ChatSection extends r$2 {
     }
     chatWindow() {
         if (this.isLoadingHistory || this.isLoadingThreads) {
-            return x `<div class="messages loading">
+            return x ` <div class="messages loading">
         <load-spinner></load-spinner>
       </div>`;
         }
@@ -4139,7 +4273,7 @@ class ChatSection extends r$2 {
             </div>`
             : ''}
         ${this.isFailed
-            ? x `<div class="message bot">
+            ? x ` <div class="message bot">
               <div>${this.renderBotIcon()}</div>
               <div>
                 <p>
@@ -4159,18 +4293,20 @@ class ChatSection extends r$2 {
         })}
         ${!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>
     `;
@@ -4197,7 +4333,9 @@ class ChatSection extends r$2 {
               class="prompt"
               @click=${(e) => {
                 this.processMessage(e, prompt, true);
-                this.sendEvent('promptClicked');
+                this.sendEvent('promptClicked', undefined, {
+                    promptName: prompt,
+                });
             }}
             >
               ${prompt}
@@ -4211,7 +4349,9 @@ class ChatSection extends r$2 {
               href=${link}
               target="_blank"
               rel="noopener"
-              @click=${() => this.sendEvent('promptClicked')}
+              @click=${() => this.sendEvent('promptClicked', undefined, {
+                promptName: prompt,
+            })}
             >
               ${prompt}
             </a>
@@ -4402,7 +4542,7 @@ class ChatSection extends r$2 {
         <div class="title-wrapper">
           <h2>Search History</h2>
           ${this.chatThreads.size
-            ? x `<div
+            ? x ` <div
                 class="trash-icon"
                 @click=${() => {
                 if (this.isStreaming) {
@@ -4808,9 +4948,6 @@ class ShopGPT extends r$2 {
         this.startNudgeTimer();
     }
     disconnectedCallback() {
-        if (!this.loadUIManually) {
-            window.removeEventListener('edgetag-initialized', this.loadData);
-        }
         window.removeEventListener('popstate', this.onPopState);
         if (this.nudgeTimer) {
             window.clearTimeout(this.nudgeTimer);
@@ -4818,16 +4955,9 @@ class ShopGPT extends r$2 {
         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(() => {
@@ -4843,6 +4973,14 @@ class ShopGPT extends r$2 {
             })
                 .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) {
@@ -4971,10 +5109,17 @@ class ShopGPT extends r$2 {
         }
     }
     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),
@@ -5000,6 +5145,7 @@ class ShopGPT extends r$2 {
         }
     }
     handleThreadDelete(e) {
+        var _a, _b;
         e.stopPropagation();
         this.isLoadingThreads = true;
         const threadId = e.detail.threadId;
@@ -5007,7 +5153,10 @@ class ShopGPT extends r$2 {
             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))
@@ -5135,7 +5284,10 @@ class ShopGPT extends r$2 {
         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;
@@ -5167,15 +5319,25 @@ class ShopGPT extends r$2 {
     }
     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() {
@@ -5206,6 +5368,7 @@ class ShopGPT extends r$2 {
             .css=${this.css}
           ></chat-threads>
           <products-section
+            .messages=${this.messages}
             .merchantImage=${this.merchantImage}
             .products=${this.products}
             .isLoadingHistory=${this.isLoadingHistory}
@@ -5251,26 +5414,23 @@ class ShopGPT extends r$2 {
         <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>`;
@@ -5314,6 +5474,12 @@ class ShopGPT extends r$2 {
       </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)) {
@@ -5461,14 +5627,13 @@ if (typeof window != 'undefined' && typeof document != 'undefined') {
                 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];