@blotoutio/providers-shop-gpt-sdk 1.7.1 → 1.9.0

package/index.js

@@ -365,6 +365,50 @@ var ProvidersShopGptSdk = (function () {
     ]);
     new Set([...isoCountries.keys(), ...usStates.keys()]);
 
+    const createEnabled = () => ({
+        name: 'enabled',
+        groupNames: new Set(),
+        groupName: '',
+        isEnabled: true,
+    });
+    const createDisabled = () => ({
+        name: 'disabled',
+        groupNames: new Set(),
+        groupName: '',
+        isEnabled: false,
+    });
+    const createABTest = ({ userId }) => {
+        const [sample] = userId.split('-');
+        const segment = parseInt(sample, 16) % 2;
+        return {
+            name: 'ab-test',
+            groupNames: new Set(['enabled', 'control']),
+            groupName: segment == 1 ? 'enabled' : 'control',
+            isEnabled: segment == 1,
+        };
+    };
+    const createPreview = ({ preview }) => {
+        return {
+            name: 'preview',
+            groupNames: new Set(['preview']),
+            groupName: preview ? 'preview' : '',
+            isEnabled: preview !== null && preview !== void 0 ? preview : false,
+        };
+    };
+    const getExperimentName = (mode) => (mode !== null && mode !== void 0 ? mode : 'disabled');
+    const createExperiment = (props) => {
+        switch (props.name) {
+            case 'enabled':
+                return createEnabled();
+            case 'disabled':
+                return createDisabled();
+            case 'ab-test':
+                return createABTest(props);
+            case 'preview':
+                return createPreview(props);
+        }
+    };
+
     const packageName = 'shopGPT';
     const DEFAULT_MAX_THREAD_AGE = 14;
     const previewKeyName = 'previewShopGPT';
@@ -429,7 +473,6 @@ var ProvidersShopGptSdk = (function () {
             return url;
         };
         const processQuery = async (query, threadId, productHandle) => {
-            var _a;
             const response = await fetchImpl(getURL('/query'), {
                 method: 'POST',
                 headers: getHeaders(),
@@ -444,14 +487,7 @@ var ProvidersShopGptSdk = (function () {
             if (!response.ok) {
                 throw new Error(`Failed to process the query - ${response.status}: ${await response.text()}`);
             }
-            const data = (await response.json());
-            return {
-                messageId: data.messageId,
-                message: data.message,
-                products: (_a = data.products) === null || _a === void 0 ? void 0 : _a.filter((item) => !!item).map((item) => ({ ...item, quantity: 1 })),
-                chatTitle: data.chatTitle,
-                welcomePrompts: data.welcomePrompts,
-            };
+            return response;
         };
         const fetchChatHistory = async (threadId) => {
             if (!threadId) {
@@ -531,6 +567,18 @@ var ProvidersShopGptSdk = (function () {
                 throw new Error(`Failed to save feedback - ${response.status}: ${await response.text()}`);
             }
         };
+        const fetchCustomPrompts = async (threadId) => {
+            const response = await fetchImpl(getURL(`/custom-prompts?threadId=${threadId}`), {
+                method: 'GET',
+                headers: getHeaders(),
+                credentials: 'include',
+            });
+            if (!response.ok) {
+                throw new Error(`Could not fetch custom prompts - ${response.status}: ${await response.text()}`);
+            }
+            const data = (await response.json());
+            return data.customPrompts;
+        };
         return {
             processQuery,
             fetchChatHistory,
@@ -539,6 +587,7 @@ var ProvidersShopGptSdk = (function () {
             deleteSingleThread,
             deleteAllThreads,
             saveFeedback,
+            fetchCustomPrompts,
         };
     };
 
@@ -572,11 +621,15 @@ var ProvidersShopGptSdk = (function () {
             // exit if not in top window
             return;
         }
-        const { enabled, devMode, merchantUrl, profiles, productHandles, targetPath, uiMode, brandName, quickPrompts, merchantImage, latestThreadLoad, } = (_c = params.manifest.variables) !== null && _c !== void 0 ? _c : {};
-        let shouldShowUI = enabled;
-        if (!enabled && hasPreviewKey()) {
+        const { enabled, mode, devMode, merchantUrl, profiles, productHandles, targetPath, view, brandName, quickPrompts, merchantImage, latestThreadLoad, botIconUrl, css, } = (_c = params.manifest.variables) !== null && _c !== void 0 ? _c : {};
+        const experiment = createExperiment({
+            name: getExperimentName(mode),
+            userId: params.userId,
+            preview: hasPreviewKey(),
+        });
+        const shouldShowUI = enabled || experiment.isEnabled;
+        if (experiment.name === 'preview' && shouldShowUI) {
             logger.log('Enabling UI in preview mode');
-            shouldShowUI = true;
         }
         if (shouldShowUI) {
             const uiImplementation = window[registryKey].ui;
@@ -593,7 +646,7 @@ var ProvidersShopGptSdk = (function () {
                 storeAPI,
                 shopGPTAPI,
                 devMode,
-                uiMode,
+                view,
                 merchantUrl,
                 profiles,
                 productHandles,
@@ -602,6 +655,8 @@ var ProvidersShopGptSdk = (function () {
                 quickPrompts,
                 merchantImage,
                 latestThreadLoad: latestThreadLoad !== null && latestThreadLoad !== void 0 ? latestThreadLoad : DEFAULT_MAX_THREAD_AGE,
+                botIconUrl,
+                css,
             });
         }
     };
@@ -728,6 +783,14 @@ var ProvidersShopGptSdk = (function () {
     const shopGPTStyles = i$4 `
   ${scrollBarStyles}
 
+  :host {
+    --shopgpt-primary: #001531;
+    --shopgpt-secondary: #172a41;
+    --shopgpt-white: #ffffff;
+    --shopgpt-border: #dbe2eb;
+    --shopgpt-warning: #ffcc81;
+  }
+
   * {
     box-sizing: border-box;
   }
@@ -760,6 +823,7 @@ var ProvidersShopGptSdk = (function () {
       0px 20px 20px 0px rgba(0, 0, 0, 0.08);
     position: fixed;
     z-index: 2000;
+    background: var(--shopgpt-white);
 
     @media screen and (max-width: 768px) {
       min-height: unset;
@@ -778,21 +842,21 @@ var ProvidersShopGptSdk = (function () {
     z-index: 1000;
 
     button {
-      color: #ffffff;
+      color: var(--shopgpt-white);
       border: none;
       cursor: pointer;
       width: 56px;
       height: 56px;
-      background-color: #001531;
+      background-color: var(--shopgpt-primary);
       border-radius: 50%;
       justify-content: center;
       align-items: center;
-      box-shadow: 0 0 4px 1px #ffffff;
+      box-shadow: 0 0 4px 1px var(--shopgpt-white);
     }
 
     .chatbot-hover-text {
       position: absolute;
-      color: #172a41;
+      color: var(--shopgpt-secondary);
       padding: 8px;
       white-space: nowrap;
       font-size: 16px;
@@ -805,7 +869,7 @@ var ProvidersShopGptSdk = (function () {
       right: calc(100% + 5px);
 
       border-radius: 5px 5px 0px;
-      background: #ffcc81;
+      background: var(--shopgpt-warning);
       box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1),
         0px 2px 4px -1px rgba(0, 0, 0, 0.06);
 
@@ -827,7 +891,7 @@ var ProvidersShopGptSdk = (function () {
       display: flex;
       overflow: hidden;
       height: 100%;
-      background: #ffffff;
+      background: var(--shopgpt-white);
       justify-content: center;
       align-items: center;
       padding: 25px;
@@ -838,7 +902,7 @@ var ProvidersShopGptSdk = (function () {
   .shopgpt-container {
     display: flex;
     gap: 1px;
-    background: #dbe2eb;
+    background: var(--shopgpt-border);
     height: 100%;
     width: 100%;
 
@@ -1013,6 +1077,10 @@ var ProvidersShopGptSdk = (function () {
     &:hover {
       background: #091627;
     }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
   }
 
   .history {
@@ -1161,6 +1229,16 @@ var ProvidersShopGptSdk = (function () {
         constructor() {
             super(...arguments);
             this.deleteAllThreads = false;
+            this.isStylesheetInjected = false;
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            if (!this.isStylesheetInjected && this.css) {
+                const sheet = new CSSStyleSheet();
+                sheet.replaceSync(this.css);
+                this.shadowRoot.adoptedStyleSheets.push(sheet);
+                this.isStylesheetInjected = true;
+            }
         }
         getDomain() {
             var _a;
@@ -1258,6 +1336,7 @@ var ProvidersShopGptSdk = (function () {
       <span class="line"></span>
       <button
         class="btn-new-search"
+        ?disabled=${this.isLoading || this.isTyping}
         @click=${() => this.setSelectedThreadId('')}
       >
         New Search
@@ -1266,7 +1345,7 @@ var ProvidersShopGptSdk = (function () {
       ${this.merchantUrl
             ? x `<div class="footer">
             Catalog:
-            <a href="${this.getDomain()}" target="_blank">
+            <a href="${this.getDomain()}" target="_blank" rel="noopener">
               ${this.getDomain().replace('https://', '')}
             </a>
           </div>`
@@ -1328,6 +1407,10 @@ var ProvidersShopGptSdk = (function () {
         r(),
         __metadata("design:type", Object)
     ], ChatThreads.prototype, "deleteAllThreads", void 0);
+    __decorate([
+        n({ type: String }),
+        __metadata("design:type", String)
+    ], ChatThreads.prototype, "css", void 0);
     if (!customElements.get('chat-threads')) {
         customElements.define('chat-threads', ChatThreads);
     }
@@ -1766,8 +1849,18 @@ var ProvidersShopGptSdk = (function () {
     }
 
     class ProductsSection extends r$2 {
+        constructor() {
+            super(...arguments);
+            this.isStylesheetInjected = false;
+        }
         connectedCallback() {
             super.connectedCallback();
+            if (!this.isStylesheetInjected && this.css) {
+                const sheet = new CSSStyleSheet();
+                sheet.replaceSync(this.css);
+                this.shadowRoot.adoptedStyleSheets.push(sheet);
+                this.isStylesheetInjected = true;
+            }
         }
         renderMerchantImage() {
             if (this.merchantImage) {
@@ -1844,6 +1937,10 @@ var ProvidersShopGptSdk = (function () {
         e$3('.products'),
         __metadata("design:type", Object)
     ], ProductsSection.prototype, "productsEle", void 0);
+    __decorate([
+        n({ type: String }),
+        __metadata("design:type", String)
+    ], ProductsSection.prototype, "css", void 0);
     if (!customElements.get('products-section')) {
         customElements.define('products-section', ProductsSection);
     }
@@ -1960,8 +2057,8 @@ var ProvidersShopGptSdk = (function () {
   }
 
   .chatbot-section.modal-view {
-    height: calc(100% - 121px);
-    padding: 0px 16px 44px;
+    height: calc(100% - 93px);
+    padding: 0px 16px 16px;
     gap: 16px;
   }
 
@@ -2110,6 +2207,9 @@ var ProvidersShopGptSdk = (function () {
     border-radius: 5px;
     border: 1px solid #dbe2eb;
     background: #fff;
+    width: 36px;
+    height: 36px;
+    box-sizing: border-box;
   }
 
   .line {
@@ -2237,6 +2337,7 @@ var ProvidersShopGptSdk = (function () {
       padding: 10px;
       border-radius: 10px;
       border: 1px solid #a3b2c6;
+      text-decoration: none;
 
       color: #4e647f;
       line-height: 21px;
@@ -2345,6 +2446,17 @@ var ProvidersShopGptSdk = (function () {
     }
   }
 
+  footer {
+    text-align: center;
+    font-size: 10px;
+    color: #4e647f;
+    font-weight: 500;
+
+    a {
+      text-decoration: none;
+    }
+  }
+
   ${scrollBarStyles}
 `;
 
@@ -2988,7 +3100,7 @@ var ProvidersShopGptSdk = (function () {
             stash[--si] = p4
                 ? p2
                     ? `<img src="${p4}" alt="${p3}"/>`
-                    : `<a href="${p4}">${highlight(p3)}</a>`
+                    : `<a href="${p4}" rel="noopener">${highlight(p3)}</a>`
                 : p6;
             return `${si}\uf8ff`;
         });
@@ -3014,12 +3126,12 @@ var ProvidersShopGptSdk = (function () {
     };
 
     class MarkdownRenderer extends r$2 {
+        constructor() {
+            super(...arguments);
+            this.content = '';
+        }
         render() {
-            // Remove lit markers from slot content
-            const slotContent = this.innerHTML
-                .trim()
-                .replace(/<!--\?lit\$[\d$]+-->/g, '');
-            return o(markdown(slotContent));
+            return o(markdown(this.content));
         }
     }
     MarkdownRenderer.styles = i$4 `
@@ -3033,6 +3145,10 @@ var ProvidersShopGptSdk = (function () {
       }
     }
   `;
+    __decorate([
+        n({ type: String }),
+        __metadata("design:type", Object)
+    ], MarkdownRenderer.prototype, "content", void 0);
     if (!customElements.get('markdown-renderer')) {
         customElements.define('markdown-renderer', MarkdownRenderer);
     }
@@ -3488,6 +3604,16 @@ ${this.comment ? this.comment : E}</textarea
             this.showChatThreads = false;
             this.deleteAllThreads = false;
             this.userQuery = '';
+            this.isStylesheetInjected = false;
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            if (!this.isStylesheetInjected && this.css) {
+                const sheet = new CSSStyleSheet();
+                sheet.replaceSync(this.css);
+                this.shadowRoot.adoptedStyleSheets.push(sheet);
+                this.isStylesheetInjected = true;
+            }
         }
         scrollToBottom() {
             var _a;
@@ -3558,12 +3684,12 @@ ${this.comment ? this.comment : E}</textarea
             return x `
       <div class="message-wrapper">
         <div class="message bot">
-          <div>
-            <div class="bot-icon">${botIcon}</div>
-          </div>
+          <div>${this.renderBotIcon()}</div>
           <div>
             ${message.message
-            ? x ` <markdown-renderer>${message.message}</markdown-renderer>`
+            ? x ` <markdown-renderer
+                  .content=${message.message}
+                ></markdown-renderer>`
             : E}
             ${this.viewType !== 'modal' && ((_a = message.products) === null || _a === void 0 ? void 0 : _a[0])
             ? x `
@@ -3608,6 +3734,14 @@ ${this.comment ? this.comment : E}</textarea
       </div>
     `;
         }
+        renderBotIcon() {
+            if (this.botIconUrl) {
+                return x `<div class="bot-icon">
+        <img src=${this.botIconUrl} width="30" height="30" />
+      </div>`;
+            }
+            return x ` <div class="bot-icon">${botIcon}</div> `;
+        }
         chatWindow() {
             if (this.isLoadingHistory || this.isLoadingThreads) {
                 return x `<div class="messages loading">
@@ -3618,17 +3752,13 @@ ${this.comment ? this.comment : E}</textarea
       <div class="messages">
         ${this.isTyping
             ? x ` <div class="message bot">
-              <div>
-                <div class="bot-icon">${botIcon}</div>
-              </div>
+              <div>${this.renderBotIcon()}</div>
               ${this.typingIndicator()}
             </div>`
             : ''}
         ${this.isFailed
             ? x `<div class="message bot">
-              <div>
-                <div class="bot-icon">${botIcon}</div>
-              </div>
+              <div>${this.renderBotIcon()}</div>
               <div>
                 <p>
                   Uh-oh! Looks like I tripped over some alpha-stage wires.
@@ -3639,16 +3769,14 @@ ${this.comment ? this.comment : E}</textarea
               </div>
             </div>`
             : E}
-        ${this.messages.map((message) => {
+        ${o$1(this.messages, (message) => {
             if (message.sender === 'bot') {
                 return this.botMessage(message);
             }
             return x ` <div class="message user">${message.message}</div> `;
         })}
         <div class="message bot">
-          <div>
-            <div class="bot-icon">${botIcon}</div>
-          </div>
+          <div>${this.renderBotIcon()}</div>
           <div>
             <p>
               Hi,
@@ -3661,28 +3789,39 @@ ${this.comment ? this.comment : E}</textarea
       </div>
     `;
         }
-        quickPrompts() {
+        renderPrompts() {
             if (this.isLoadingHistory || this.isTyping || this.isLoadingThreads) {
                 return E;
             }
+            const isWelcomeMessage = this.messages.length === 1 && this.messages[0].sender === 'bot';
             const prompts = this.messages.length
                 ? this.messages[0].welcomePrompts
                 : this.prompts
                     ? this.prompts.split(',').map((prompt) => prompt.trim())
                     : ['Best Sellers'];
-            if (!prompts) {
+            const customPrompts = !this.messages.length || isWelcomeMessage ? this.customPrompts : undefined;
+            if (!prompts && !customPrompts) {
                 return E;
             }
             return x `
       <div class="prompts btn">
-        ${prompts.map((prompt) => x `
-              <div
-                class="prompt"
-                @click=${(e) => this.processMessage(e, prompt)}
-              >
-                ${prompt}
-              </div>
-            `)}
+        ${o$1(prompts, (prompt) => {
+            return x `
+            <div
+              class="prompt"
+              @click=${(e) => this.processMessage(e, prompt)}
+            >
+              ${prompt}
+            </div>
+          `;
+        })}
+        ${o$1(customPrompts, ({ prompt, link }) => {
+            return x `
+            <a class="prompt" href=${link} target="_blank" rel="noopener">
+              ${prompt}
+            </a>
+          `;
+        })}
       </div>
     `;
         }
@@ -3762,7 +3901,11 @@ ${this.comment ? this.comment : E}</textarea
         modalViewHeader() {
             var _a;
             return x `
-      <div>${botIcon}</div>
+      <div>
+        ${this.botIconUrl
+            ? x `<img src=${this.botIconUrl} width="30" height="30" />`
+            : botIcon}
+      </div>
       <h2>${((_a = this.thread) === null || _a === void 0 ? void 0 : _a.title) || 'New Search'}</h2>
       <div class="btns-wrapper">
         <tooltip-component .position=${'bottom-right'} .text=${'New Chat'}>
@@ -3929,7 +4072,7 @@ ${this.comment ? this.comment : E}</textarea
             'modal-view': this.viewType === 'modal',
         })}
       >
-        ${this.chatWindow()} ${this.quickPrompts()}
+        ${this.chatWindow()} ${this.renderPrompts()}
         <form class="chat-form" @submit=${this.onSubmit}>
           <input
             type="text"
@@ -3948,6 +4091,11 @@ ${this.comment ? this.comment : E}</textarea
             ${sendFilledIcon}
           </button>
         </form>
+        ${this.viewType === 'modal'
+            ? x ` <footer>
+              Powered by <a href="https://blotout.io">Blotout</a>
+            </footer>`
+            : E}
       </div>
       <personalize-dialog
         .createChatThread=${this.createChatThread.bind(this)}
@@ -4004,6 +4152,10 @@ ${this.comment ? this.comment : E}</textarea
         n({ type: String }),
         __metadata("design:type", Object)
     ], ChatSection.prototype, "merchantImage", void 0);
+    __decorate([
+        n({ type: String }),
+        __metadata("design:type", Object)
+    ], ChatSection.prototype, "botIconUrl", void 0);
     __decorate([
         n({ type: String }),
         __metadata("design:type", Object)
@@ -4012,6 +4164,10 @@ ${this.comment ? this.comment : E}</textarea
         n({ type: String }),
         __metadata("design:type", Object)
     ], ChatSection.prototype, "prompts", void 0);
+    __decorate([
+        n({ type: Array }),
+        __metadata("design:type", Object)
+    ], ChatSection.prototype, "customPrompts", void 0);
     __decorate([
         n({ type: Boolean }),
         __metadata("design:type", Boolean)
@@ -4088,15 +4244,69 @@ ${this.comment ? this.comment : E}</textarea
         n({ type: String }),
         __metadata("design:type", Object)
     ], ChatSection.prototype, "userQuery", void 0);
+    __decorate([
+        n({ type: String }),
+        __metadata("design:type", String)
+    ], ChatSection.prototype, "css", void 0);
     if (!customElements.get('chat-section')) {
         customElements.define('chat-section', ChatSection);
     }
 
+    const handleEventSource = async (response, onEvent) => {
+        var _a, _b;
+        if (!response.body) {
+            throw new Error('No body found in response');
+        }
+        let buffer = '';
+        for await (const chunk of response.body.pipeThrough(new TextDecoderStream())) {
+            buffer += chunk;
+            const sections = buffer.split('\n\n');
+            buffer = sections.pop() || '';
+            for (const section of sections) {
+                const event = parseMessage(section, true);
+                onEvent((_a = event.event) !== null && _a !== void 0 ? _a : '', event.data);
+            }
+        }
+        if (buffer) {
+            const event = parseMessage(buffer, true);
+            onEvent((_b = event.event) !== null && _b !== void 0 ? _b : '', event.data);
+        }
+    };
+    const parseMessage = (message, parseDataAsJSON) => {
+        const fields = message.split('\n');
+        const result = {};
+        for (const field of fields) {
+            if (field.startsWith(':')) {
+                continue;
+            }
+            if (field.startsWith('event: ')) {
+                result.event = field.slice(7);
+            }
+            else if (field.startsWith('data: ')) {
+                if (result.data) {
+                    result.data += '\n';
+                }
+                else {
+                    result.data = '';
+                }
+                result.data += field.slice(6);
+            }
+            else if (field.startsWith('retry: ')) {
+                result.retry = field.slice(7);
+            }
+        }
+        if (result.data && parseDataAsJSON) {
+            result.data = JSON.parse(result.data);
+        }
+        return result;
+    };
+
     const DIALOG_DELAY = 1000;
     const normalizePath = (path) => path.replace(/\/$/, '');
     class ShopGPT extends r$2 {
         constructor() {
             super(...arguments);
+            this.isStylesheetInjected = false;
             this.latestThreadLoad = DEFAULT_MAX_THREAD_AGE;
             this.modalState = 'close';
             this.isLoadingHistory = false;
@@ -4107,6 +4317,7 @@ ${this.comment ? this.comment : E}</textarea
             this.products = [];
             this.messages = [];
             this.chatThreads = new Map();
+            this.customPrompts = [];
             this.loadData = async () => {
                 if (!this.shopGPTAPI) {
                     return;
@@ -4129,7 +4340,13 @@ ${this.comment ? this.comment : E}</textarea
         }
         connectedCallback() {
             super.connectedCallback();
-            if (!this.uiMode || this.uiMode === 'overlay') {
+            if (!this.isStylesheetInjected && this.css) {
+                const sheet = new CSSStyleSheet();
+                sheet.replaceSync(this.css);
+                this.shadowRoot.adoptedStyleSheets.push(sheet);
+                this.isStylesheetInjected = true;
+            }
+            if (!this.view || this.view === 'overlay') {
                 if (!this.path) {
                     return;
                 }
@@ -4150,7 +4367,7 @@ ${this.comment ? this.comment : E}</textarea
         init() {
             window.addEventListener('edgetag-initialized', this.loadData);
             window.addEventListener('popstate', this.onPopState);
-            if (!this.uiMode || this.uiMode === 'overlay') {
+            if (!this.view || this.view === 'overlay') {
                 delay(DIALOG_DELAY).then(() => {
                     var _a;
                     if (document.hidden) {
@@ -4198,27 +4415,12 @@ ${this.comment ? this.comment : E}</textarea
                     : undefined;
             try {
                 this.isTyping = true;
-                const reply = await this.shopGPTAPI.processQuery('', thread.threadId, productHandle);
-                if (reply.chatTitle) {
-                    this.setChatTitle(this.selectedThreadId, reply.chatTitle);
-                }
-                this.messages = [
-                    {
-                        messageId: reply.messageId,
-                        sender: 'bot',
-                        message: reply.message,
-                        products: reply.products,
-                        welcomePrompts: reply.welcomePrompts,
-                    },
-                    ...this.messages,
-                ];
-                this.products = reply.products || [];
+                const response = await this.shopGPTAPI.processQuery('', thread.threadId, productHandle);
+                this.processMessageResponse(response);
             }
             catch (error) {
                 logger.error(error);
                 this.isFailed = true;
-            }
-            finally {
                 this.isTyping = false;
             }
         }
@@ -4289,10 +4491,25 @@ ${this.comment ? this.comment : E}</textarea
                 this.isLoadingHistory = false;
             }
         }
+        async loadCustomPrompts(threadId) {
+            try {
+                if (!threadId) {
+                    this.customPrompts = [];
+                    return;
+                }
+                this.customPrompts = await this.shopGPTAPI.fetchCustomPrompts(threadId);
+            }
+            catch (e) {
+                logger.error(e);
+            }
+        }
         async setSelectedThreadId(threadId) {
             this.isFailed = false;
             this.selectedThreadId = threadId;
-            await this.loadHistory(threadId);
+            await Promise.all([
+                this.loadHistory(threadId),
+                this.loadCustomPrompts(threadId),
+            ]);
         }
         async createChatThread(payload, loadInitialQuery) {
             try {
@@ -4303,7 +4520,9 @@ ${this.comment ? this.comment : E}</textarea
                 ]);
                 this.selectedThreadId = thread.threadId;
                 if (loadInitialQuery) {
-                    await this.loadInitialQuery();
+                    await Promise.all([
+                        (this.loadInitialQuery(), this.loadCustomPrompts(thread.threadId)),
+                    ]);
                 }
             }
             catch (e) {
@@ -4339,6 +4558,92 @@ ${this.comment ? this.comment : E}</textarea
                 .catch(logger.error)
                 .finally(() => (this.isLoadingThreads = false));
         }
+        handleMessageChunks(messageData) {
+            if (!messageData.message) {
+                return;
+            }
+            const latestMessage = this.messages[0];
+            this.isTyping = false;
+            if (latestMessage === null || latestMessage === void 0 ? void 0 : latestMessage.isChunk) {
+                this.messages = [
+                    {
+                        ...latestMessage,
+                        message: latestMessage.message + messageData.message,
+                        isChunk: messageData.isChunk,
+                        sender: 'bot',
+                    },
+                    ...this.messages.slice(1),
+                ];
+            }
+            else {
+                this.messages = [
+                    {
+                        sender: 'bot',
+                        message: messageData.message || '',
+                        isChunk: messageData.isChunk,
+                    },
+                    ...this.messages,
+                ];
+            }
+        }
+        handleCompleteMessage(messageData) {
+            const latestMessage = this.messages[0];
+            this.messages = [
+                {
+                    ...latestMessage,
+                    message: messageData.message || '',
+                    messageId: messageData.messageId,
+                    welcomePrompts: messageData.welcomePrompts,
+                    sender: 'bot',
+                    isChunk: false,
+                },
+                ...this.messages.slice(1),
+            ];
+        }
+        handleProductsComplete(products, isMessageCompleted) {
+            if (!products || !isMessageCompleted) {
+                return;
+            }
+            const latestMessage = this.messages[0];
+            this.messages = [
+                {
+                    ...latestMessage,
+                    products,
+                },
+                ...this.messages.slice(1),
+            ];
+            if (products.length) {
+                this.products = products;
+            }
+        }
+        processMessageResponse(response) {
+            let isMessageCompleted = false;
+            let products;
+            handleEventSource(response, (eventName, data) => {
+                if (eventName === 'ChatTitle') {
+                    this.setChatTitle(this.selectedThreadId, data.chatTitle || '');
+                }
+                else if (eventName === 'Message') {
+                    this.handleMessageChunks(data);
+                }
+                else if (eventName === 'MessageComplete') {
+                    isMessageCompleted = true;
+                    this.handleProductsComplete(products, isMessageCompleted);
+                    this.handleCompleteMessage(data);
+                }
+                else if (eventName === 'ProductsComplete') {
+                    this.handleProductsComplete(data.products, isMessageCompleted);
+                    products = data.products;
+                }
+                else if (eventName === 'error') {
+                    if (this.messages[0].isChunk) {
+                        this.messages = this.messages.slice(1);
+                    }
+                    this.isFailed = true;
+                    throw new Error(data);
+                }
+            });
+        }
         async sendMessageToServer(e, message) {
             e.preventDefault();
             e.stopPropagation();
@@ -4349,32 +4654,12 @@ ${this.comment ? this.comment : E}</textarea
             try {
                 this.messages = [{ sender: 'user', message }, ...this.messages];
                 this.isTyping = true;
-                const reply = await this.submitQuery(message);
-                if (!reply) {
-                    return;
-                }
-                if (reply.chatTitle) {
-                    this.setChatTitle(this.selectedThreadId, reply.chatTitle);
-                }
-                this.messages = [
-                    {
-                        messageId: reply.messageId,
-                        sender: 'bot',
-                        message: reply.message,
-                        products: reply.products,
-                        welcomePrompts: reply.welcomePrompts,
-                    },
-                    ...this.messages,
-                ];
-                if (reply.products && reply.products.length > 0) {
-                    this.products = reply.products;
-                }
+                const response = await this.submitQuery(message);
+                this.processMessageResponse(response);
             }
             catch (err) {
                 logger.error(err);
                 this.isFailed = true;
-            }
-            finally {
                 this.isTyping = false;
             }
         }
@@ -4396,7 +4681,7 @@ ${this.comment ? this.comment : E}</textarea
             return this.storeAPI.getSiteCurrency();
         }
         render() {
-            if (this.uiMode === 'modal') {
+            if (this.view === 'modal') {
                 return this.modalMode();
             }
             return this.overlayMode();
@@ -4421,6 +4706,7 @@ ${this.comment ? this.comment : E}</textarea
             .isLoading=${this.isLoadingThreads}
             .isTyping=${this.isTyping}
             .merchantUrl=${this.merchantUrl}
+            .css=${this.css}
           ></chat-threads>
           <products-section
             .merchantImage=${this.merchantImage}
@@ -4428,6 +4714,7 @@ ${this.comment ? this.comment : E}</textarea
             .isLoadingHistory=${this.isLoadingHistory}
             .siteCurrency=${this.getSiteCurrency()}
             .isLoadingThreads=${this.isLoadingThreads}
+            .css=${this.css}
           ></products-section>
           <chat-section
             .prompts=${this.quickPrompts}
@@ -4445,6 +4732,9 @@ ${this.comment ? this.comment : E}</textarea
             .profiles=${this.profiles}
             .viewType=${'overlay'}
             .isLoadingThreads=${this.isLoadingThreads}
+            .customPrompts=${this.customPrompts}
+            .botIconUrl=${this.botIconUrl}
+            .css=${this.css}
           ></chat-section>
         </div>
       </dialog>
@@ -4495,6 +4785,9 @@ ${this.comment ? this.comment : E}</textarea
           .chatThreads=${this.chatThreads}
           .isLoadingThreads=${this.isLoadingThreads}
           .merchantImage=${this.merchantImage}
+          .customPrompts=${this.customPrompts}
+          .botIconUrl=${this.botIconUrl}
+          .css=${this.css}
         ></chat-section>
       </div>
     `;
@@ -4545,6 +4838,10 @@ ${this.comment ? this.comment : E}</textarea
         n({ type: Object }),
         __metadata("design:type", Map)
     ], ShopGPT.prototype, "chatThreads", void 0);
+    __decorate([
+        n({ type: Array }),
+        __metadata("design:type", Array)
+    ], ShopGPT.prototype, "customPrompts", void 0);
     if (!customElements.get('shop-gpt')) {
         customElements.define('shop-gpt', ShopGPT);
     }
@@ -4566,12 +4863,14 @@ ${this.comment ? this.comment : E}</textarea
                 shopGPT.merchantUrl = params.merchantUrl;
                 shopGPT.profiles = params.profiles;
                 shopGPT.productHandles = params.productHandles;
-                shopGPT.uiMode = params.uiMode;
+                shopGPT.view = params.view;
                 shopGPT.path = params.path;
                 shopGPT.brandName = params.brandName;
                 shopGPT.quickPrompts = params.quickPrompts;
                 shopGPT.merchantImage = params.merchantImage;
                 shopGPT.latestThreadLoad = params.latestThreadLoad;
+                shopGPT.botIconUrl = params.botIconUrl;
+                shopGPT.css = params.css;
                 document.body.append(shopGPT);
             },
             destroy() {