@blotoutio/providers-shop-gpt-sdk 1.8.0 → 1.9.1

package/index.js

@@ -473,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(),
@@ -488,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) {
@@ -629,7 +621,7 @@ var ProvidersShopGptSdk = (function () {
             // exit if not in top window
             return;
         }
-        const { enabled, mode, devMode, merchantUrl, profiles, productHandles, targetPath, view, brandName, quickPrompts, merchantImage, latestThreadLoad, } = (_c = params.manifest.variables) !== null && _c !== void 0 ? _c : {};
+        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,
@@ -663,6 +655,8 @@ var ProvidersShopGptSdk = (function () {
                 quickPrompts,
                 merchantImage,
                 latestThreadLoad: latestThreadLoad !== null && latestThreadLoad !== void 0 ? latestThreadLoad : DEFAULT_MAX_THREAD_AGE,
+                botIconUrl,
+                css,
             });
         }
     };
@@ -789,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;
   }
@@ -821,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;
@@ -839,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;
@@ -866,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);
 
@@ -888,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;
@@ -899,7 +902,7 @@ var ProvidersShopGptSdk = (function () {
   .shopgpt-container {
     display: flex;
     gap: 1px;
-    background: #dbe2eb;
+    background: var(--shopgpt-border);
     height: 100%;
     width: 100%;
 
@@ -1226,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;
@@ -1394,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);
     }
@@ -1832,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) {
@@ -1910,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);
     }
@@ -2026,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;
   }
 
@@ -2176,6 +2207,9 @@ var ProvidersShopGptSdk = (function () {
     border-radius: 5px;
     border: 1px solid #dbe2eb;
     background: #fff;
+    width: 36px;
+    height: 36px;
+    box-sizing: border-box;
   }
 
   .line {
@@ -2412,6 +2446,17 @@ var ProvidersShopGptSdk = (function () {
     }
   }
 
+  footer {
+    text-align: center;
+    font-size: 10px;
+    color: #4e647f;
+    font-weight: 500;
+
+    a {
+      text-decoration: none;
+    }
+  }
+
   ${scrollBarStyles}
 `;
 
@@ -3081,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 `
@@ -3100,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);
     }
@@ -3555,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;
@@ -3625,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 `
@@ -3675,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">
@@ -3685,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.
@@ -3713,9 +3776,7 @@ ${this.comment ? this.comment : E}</textarea
             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,
@@ -3840,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'}>
@@ -4026,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)}
@@ -4082,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)
@@ -4170,15 +4244,78 @@ ${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);
     }
 
+    async function* streamToIterable(stream) {
+        const reader = stream.getReader();
+        while (true) {
+            const { done, value } = await reader.read();
+            if (done)
+                return;
+            yield value;
+        }
+    }
+    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 streamToIterable(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;
@@ -4212,6 +4349,12 @@ ${this.comment ? this.comment : E}</textarea
         }
         connectedCallback() {
             super.connectedCallback();
+            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;
@@ -4281,27 +4424,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;
             }
         }
@@ -4439,6 +4567,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();
@@ -4449,32 +4663,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;
             }
         }
@@ -4521,6 +4715,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}
@@ -4528,6 +4723,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}
@@ -4546,6 +4742,8 @@ ${this.comment ? this.comment : E}</textarea
             .viewType=${'overlay'}
             .isLoadingThreads=${this.isLoadingThreads}
             .customPrompts=${this.customPrompts}
+            .botIconUrl=${this.botIconUrl}
+            .css=${this.css}
           ></chat-section>
         </div>
       </dialog>
@@ -4597,6 +4795,8 @@ ${this.comment ? this.comment : E}</textarea
           .isLoadingThreads=${this.isLoadingThreads}
           .merchantImage=${this.merchantImage}
           .customPrompts=${this.customPrompts}
+          .botIconUrl=${this.botIconUrl}
+          .css=${this.css}
         ></chat-section>
       </div>
     `;
@@ -4678,6 +4878,8 @@ ${this.comment ? this.comment : E}</textarea
                 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() {