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

package/index.mjs

@@ -362,6 +362,50 @@ const usStates = new Map([
 ]);
 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';
@@ -426,7 +470,6 @@ const createShopGPTAPI = ({ fetch: fetchImpl = window.fetch, baseURL, userId, st
         return url;
     };
     const processQuery = async (query, threadId, productHandle) => {
-        var _a;
         const response = await fetchImpl(getURL('/query'), {
             method: 'POST',
             headers: getHeaders(),
@@ -441,14 +484,7 @@ const createShopGPTAPI = ({ fetch: fetchImpl = window.fetch, baseURL, userId, st
         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) {
@@ -528,6 +564,18 @@ const createShopGPTAPI = ({ fetch: fetchImpl = window.fetch, baseURL, userId, st
             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,
@@ -536,6 +584,7 @@ const createShopGPTAPI = ({ fetch: fetchImpl = window.fetch, baseURL, userId, st
         deleteSingleThread,
         deleteAllThreads,
         saveFeedback,
+        fetchCustomPrompts,
     };
 };
 
@@ -569,11 +618,15 @@ const init = (params) => {
         // 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;
@@ -590,7 +643,7 @@ const init = (params) => {
             storeAPI,
             shopGPTAPI,
             devMode,
-            uiMode,
+            view,
             merchantUrl,
             profiles,
             productHandles,
@@ -599,6 +652,8 @@ const init = (params) => {
             quickPrompts,
             merchantImage,
             latestThreadLoad: latestThreadLoad !== null && latestThreadLoad !== void 0 ? latestThreadLoad : DEFAULT_MAX_THREAD_AGE,
+            botIconUrl,
+            css,
         });
     }
 };
@@ -725,6 +780,14 @@ const scrollBarStyles = i$4 `
 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;
   }
@@ -757,6 +820,7 @@ const shopGPTStyles = i$4 `
       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;
@@ -775,21 +839,21 @@ const shopGPTStyles = i$4 `
     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;
@@ -802,7 +866,7 @@ const shopGPTStyles = i$4 `
       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);
 
@@ -824,7 +888,7 @@ const shopGPTStyles = i$4 `
       display: flex;
       overflow: hidden;
       height: 100%;
-      background: #ffffff;
+      background: var(--shopgpt-white);
       justify-content: center;
       align-items: center;
       padding: 25px;
@@ -835,7 +899,7 @@ const shopGPTStyles = i$4 `
   .shopgpt-container {
     display: flex;
     gap: 1px;
-    background: #dbe2eb;
+    background: var(--shopgpt-border);
     height: 100%;
     width: 100%;
 
@@ -1010,6 +1074,10 @@ const chatThreadsStyles = i$4 `
     &:hover {
       background: #091627;
     }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
   }
 
   .history {
@@ -1158,6 +1226,16 @@ class ChatThreads extends r$2 {
     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;
@@ -1255,6 +1333,7 @@ class ChatThreads extends r$2 {
       <span class="line"></span>
       <button
         class="btn-new-search"
+        ?disabled=${this.isLoading || this.isTyping}
         @click=${() => this.setSelectedThreadId('')}
       >
         New Search
@@ -1263,7 +1342,7 @@ class ChatThreads extends r$2 {
       ${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>`
@@ -1325,6 +1404,10 @@ __decorate([
     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);
 }
@@ -1763,8 +1846,18 @@ if (!customElements.get('products-list')) {
 }
 
 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) {
@@ -1841,6 +1934,10 @@ __decorate([
     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);
 }
@@ -1957,8 +2054,8 @@ const chatSectionStyles = i$4 `
   }
 
   .chatbot-section.modal-view {
-    height: calc(100% - 121px);
-    padding: 0px 16px 44px;
+    height: calc(100% - 93px);
+    padding: 0px 16px 16px;
     gap: 16px;
   }
 
@@ -2107,6 +2204,9 @@ const chatSectionStyles = i$4 `
     border-radius: 5px;
     border: 1px solid #dbe2eb;
     background: #fff;
+    width: 36px;
+    height: 36px;
+    box-sizing: border-box;
   }
 
   .line {
@@ -2234,6 +2334,7 @@ const chatSectionStyles = i$4 `
       padding: 10px;
       border-radius: 10px;
       border: 1px solid #a3b2c6;
+      text-decoration: none;
 
       color: #4e647f;
       line-height: 21px;
@@ -2342,6 +2443,17 @@ const chatSectionStyles = i$4 `
     }
   }
 
+  footer {
+    text-align: center;
+    font-size: 10px;
+    color: #4e647f;
+    font-weight: 500;
+
+    a {
+      text-decoration: none;
+    }
+  }
+
   ${scrollBarStyles}
 `;
 
@@ -2985,7 +3097,7 @@ const markdown = (text) => {
         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`;
     });
@@ -3011,12 +3123,12 @@ const markdown = (text) => {
 };
 
 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 `
@@ -3030,6 +3142,10 @@ MarkdownRenderer.styles = i$4 `
       }
     }
   `;
+__decorate([
+    n({ type: String }),
+    __metadata("design:type", Object)
+], MarkdownRenderer.prototype, "content", void 0);
 if (!customElements.get('markdown-renderer')) {
     customElements.define('markdown-renderer', MarkdownRenderer);
 }
@@ -3485,6 +3601,16 @@ class ChatSection extends r$2 {
         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;
@@ -3555,12 +3681,12 @@ class ChatSection extends r$2 {
         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 `
@@ -3605,6 +3731,14 @@ class ChatSection extends r$2 {
       </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">
@@ -3615,17 +3749,13 @@ class ChatSection extends r$2 {
       <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.
@@ -3636,16 +3766,14 @@ class ChatSection extends r$2 {
               </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,
@@ -3658,28 +3786,39 @@ class ChatSection extends r$2 {
       </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>
     `;
     }
@@ -3759,7 +3898,11 @@ class ChatSection extends r$2 {
     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'}>
@@ -3926,7 +4069,7 @@ class ChatSection extends r$2 {
             'modal-view': this.viewType === 'modal',
         })}
       >
-        ${this.chatWindow()} ${this.quickPrompts()}
+        ${this.chatWindow()} ${this.renderPrompts()}
         <form class="chat-form" @submit=${this.onSubmit}>
           <input
             type="text"
@@ -3945,6 +4088,11 @@ class ChatSection extends r$2 {
             ${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)}
@@ -4001,6 +4149,10 @@ __decorate([
     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)
@@ -4009,6 +4161,10 @@ __decorate([
     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)
@@ -4085,15 +4241,69 @@ __decorate([
     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;
@@ -4104,6 +4314,7 @@ class ShopGPT extends r$2 {
         this.products = [];
         this.messages = [];
         this.chatThreads = new Map();
+        this.customPrompts = [];
         this.loadData = async () => {
             if (!this.shopGPTAPI) {
                 return;
@@ -4126,7 +4337,13 @@ class ShopGPT extends r$2 {
     }
     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;
             }
@@ -4147,7 +4364,7 @@ class ShopGPT extends r$2 {
     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) {
@@ -4195,27 +4412,12 @@ class ShopGPT extends r$2 {
                 : 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;
         }
     }
@@ -4286,10 +4488,25 @@ class ShopGPT extends r$2 {
             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 {
@@ -4300,7 +4517,9 @@ class ShopGPT extends r$2 {
             ]);
             this.selectedThreadId = thread.threadId;
             if (loadInitialQuery) {
-                await this.loadInitialQuery();
+                await Promise.all([
+                    (this.loadInitialQuery(), this.loadCustomPrompts(thread.threadId)),
+                ]);
             }
         }
         catch (e) {
@@ -4336,6 +4555,92 @@ class ShopGPT extends r$2 {
             .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();
@@ -4346,32 +4651,12 @@ class ShopGPT extends r$2 {
         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;
         }
     }
@@ -4393,7 +4678,7 @@ class ShopGPT extends r$2 {
         return this.storeAPI.getSiteCurrency();
     }
     render() {
-        if (this.uiMode === 'modal') {
+        if (this.view === 'modal') {
             return this.modalMode();
         }
         return this.overlayMode();
@@ -4418,6 +4703,7 @@ class ShopGPT extends r$2 {
             .isLoading=${this.isLoadingThreads}
             .isTyping=${this.isTyping}
             .merchantUrl=${this.merchantUrl}
+            .css=${this.css}
           ></chat-threads>
           <products-section
             .merchantImage=${this.merchantImage}
@@ -4425,6 +4711,7 @@ class ShopGPT extends r$2 {
             .isLoadingHistory=${this.isLoadingHistory}
             .siteCurrency=${this.getSiteCurrency()}
             .isLoadingThreads=${this.isLoadingThreads}
+            .css=${this.css}
           ></products-section>
           <chat-section
             .prompts=${this.quickPrompts}
@@ -4442,6 +4729,9 @@ class ShopGPT extends r$2 {
             .profiles=${this.profiles}
             .viewType=${'overlay'}
             .isLoadingThreads=${this.isLoadingThreads}
+            .customPrompts=${this.customPrompts}
+            .botIconUrl=${this.botIconUrl}
+            .css=${this.css}
           ></chat-section>
         </div>
       </dialog>
@@ -4492,6 +4782,9 @@ class ShopGPT extends r$2 {
           .chatThreads=${this.chatThreads}
           .isLoadingThreads=${this.isLoadingThreads}
           .merchantImage=${this.merchantImage}
+          .customPrompts=${this.customPrompts}
+          .botIconUrl=${this.botIconUrl}
+          .css=${this.css}
         ></chat-section>
       </div>
     `;
@@ -4542,6 +4835,10 @@ __decorate([
     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);
 }
@@ -4563,12 +4860,14 @@ if (typeof window != 'undefined' && typeof document != 'undefined') {
             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() {