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

package/index.cjs.js

@@ -472,7 +472,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(),
@@ -487,14 +486,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) {
@@ -628,7 +620,7 @@ const init = (params) => {
         // 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,
@@ -662,6 +654,8 @@ const init = (params) => {
             quickPrompts,
             merchantImage,
             latestThreadLoad: latestThreadLoad !== null && latestThreadLoad !== void 0 ? latestThreadLoad : DEFAULT_MAX_THREAD_AGE,
+            botIconUrl,
+            css,
         });
     }
 };
@@ -788,6 +782,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;
   }
@@ -820,6 +822,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;
@@ -838,21 +841,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;
@@ -865,7 +868,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);
 
@@ -887,7 +890,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;
@@ -898,7 +901,7 @@ const shopGPTStyles = i$4 `
   .shopgpt-container {
     display: flex;
     gap: 1px;
-    background: #dbe2eb;
+    background: var(--shopgpt-border);
     height: 100%;
     width: 100%;
 
@@ -1225,6 +1228,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;
@@ -1393,6 +1406,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);
 }
@@ -1831,8 +1848,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) {
@@ -1909,6 +1936,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);
 }
@@ -2025,8 +2056,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;
   }
 
@@ -2175,6 +2206,9 @@ const chatSectionStyles = i$4 `
     border-radius: 5px;
     border: 1px solid #dbe2eb;
     background: #fff;
+    width: 36px;
+    height: 36px;
+    box-sizing: border-box;
   }
 
   .line {
@@ -2411,6 +2445,17 @@ const chatSectionStyles = i$4 `
     }
   }
 
+  footer {
+    text-align: center;
+    font-size: 10px;
+    color: #4e647f;
+    font-weight: 500;
+
+    a {
+      text-decoration: none;
+    }
+  }
+
   ${scrollBarStyles}
 `;
 
@@ -3080,12 +3125,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 `
@@ -3099,6 +3144,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);
 }
@@ -3554,6 +3603,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;
@@ -3624,12 +3683,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 `
@@ -3674,6 +3733,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">
@@ -3684,17 +3751,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.
@@ -3712,9 +3775,7 @@ class ChatSection extends r$2 {
             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,
@@ -3839,7 +3900,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'}>
@@ -4025,6 +4090,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)}
@@ -4081,6 +4151,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)
@@ -4169,15 +4243,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;
@@ -4211,6 +4339,12 @@ class ShopGPT extends r$2 {
     }
     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;
@@ -4280,27 +4414,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;
         }
     }
@@ -4438,6 +4557,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();
@@ -4448,32 +4653,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;
         }
     }
@@ -4520,6 +4705,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}
@@ -4527,6 +4713,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}
@@ -4545,6 +4732,8 @@ class ShopGPT extends r$2 {
             .viewType=${'overlay'}
             .isLoadingThreads=${this.isLoadingThreads}
             .customPrompts=${this.customPrompts}
+            .botIconUrl=${this.botIconUrl}
+            .css=${this.css}
           ></chat-section>
         </div>
       </dialog>
@@ -4596,6 +4785,8 @@ class ShopGPT extends r$2 {
           .isLoadingThreads=${this.isLoadingThreads}
           .merchantImage=${this.merchantImage}
           .customPrompts=${this.customPrompts}
+          .botIconUrl=${this.botIconUrl}
+          .css=${this.css}
         ></chat-section>
       </div>
     `;
@@ -4677,6 +4868,8 @@ if (typeof window != 'undefined' && typeof document != 'undefined') {
             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() {