advaisor-chatbot 1.6.0 → 1.7.1-beta.0

package/dist/testchatbot.js

@@ -1390,6 +1390,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       this.attachShadow({ mode: "open" });
       this.isOpen = false;
       this.activeSessionId = null;
+      this.abortController = null;
     }
     connectedCallback() {
       this.apiEndpoint = this.getAttribute("api_endpoint") || "https://silicore.ai:2002/cds_bookshelves/ask_all_bookshelves";
@@ -1399,215 +1400,238 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     }
     render() {
       this.shadowRoot.innerHTML = `
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
-      <style>
-        :host {
-          --primary-color: #EC9588;
-          --user-bubble: #f29b8c;
-          --bot-bubble: #e5e7eb;
-          font-family: system-ui, -apple-system, sans-serif;
-        }
-
-        .chat-trigger {
-          position: fixed;
-          bottom: 20px;
-          right: 20px;
-          z-index: 9999;
-          height: 56px;
-          width: 56px;
-          border-radius: 50%;
-          background: var(--primary-color);
-          color: white;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-          font-size: 24px;
-          cursor: pointer;
-          transition: transform 0.2s;
-          border: none;
-        }
-
-        .chat-trigger:hover { transform: scale(1.05); }
-
-        .chat-window {
-          position: fixed;
-          bottom: 20px;
-          right: 20px;
-          z-index: 10000;
-
-          display: none;
-          flex-direction: column;
-
-          background: #ffffff;
-          box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+    <style>
+      :host {
+        --primary-color: #EC9588;
+        --user-bubble: #f29b8c;
+        --bot-bubble: #e5e7eb;
+        font-family: system-ui, -apple-system, sans-serif;
+      }
 
-          width: min(30vw, 420px);
-          height: 90vh;
+      .chat-trigger {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 9999;
+        height: 56px;
+        width: 56px;
+        border-radius: 50%;
+        background: var(--primary-color);
+        color: white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        font-size: 24px;
+        cursor: pointer;
+        transition: transform 0.2s;
+        border: none;
+      }
 
-          border-radius: 16px;
-          overflow: hidden;
+      .chat-trigger:hover { transform: scale(1.05); }
 
-          transition: all 0.25s ease;
+      .chat-window {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 10000;
+        display: none;
+        flex-direction: column;
+        background: #ffffff;
+        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+        width: min(30vw, 420px);
+        height: 90vh;
+        border-radius: 16px;
+        overflow: hidden;
+        transition: all 0.25s ease;
+        resize: both;
+        min-width: 300px;
+        min-height: 450px;
+      }
 
-          resize: both;
-          min-width: 300px;
-          min-height: 450px;
-        }
+      .chat-window.expanded {
+        width: min(700px, 95vw);
+        height: 90vh;
+      }
 
-        /* \u2705 Proper desktop expanded */
+      @media (max-width: 768px) {
+        .chat-window,
         .chat-window.expanded {
-          width: min(700px, 95vw);
-          height: 90vh;
-
+          width: 100vw !important;
+          max-width: 100vw !important;
+          height: 85vh !important;
+          bottom: 0;
+          right: 0;
+          border-radius: 16px 16px 0 0;
         }
+      }
 
-        /* \u2705 Mobile override */
-        @media (max-width: 768px) {
-          .chat-window,
-          .chat-window.expanded {
-            width: 100vw !important;
-            max-width: 100vw !important;
-
-            height: 85vh !important;
+      .header {
+        background: var(--primary-color);
+        padding: 12px 16px;
+        color: white;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        cursor: move;
+        user-select: none;
+        touch-action: none;
+      }
 
-            border-radius: 16px 16px 0 0;
-          }
-        }
- 
-         .typing {
-          display: flex;
-          gap: 4px;
-          align-items: center;
-        }
-          
-        .chat-body {
-          flex: 1;
-          overflow-y: auto;
-          overflow-x: hidden;
-        }
+      .close-btn, .resize-btn, .history-btn {
+        background: none;
+        border: none;
+        color: white;
+        cursor: pointer;
+        font-size: 16px;
+      }
 
-        .message {
-          word-wrap: break-word;
-          overflow-wrap: break-word;
-        }
+      .history-btn {
+        height: 32px;
+        width: 32px;
+        border-radius: 50%;
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 4px;
+      }
 
-        .message pre,
-        .message code {
-          white-space: pre-wrap;
-          word-break: break-word;
-        }
+      .chat-body {
+        flex: 1;
+        padding: 16px;
+        overflow-y: auto;
+        background: #f9fafb;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
 
-        .header {
-          background: var(--primary-color);
-          padding: 12px 16px;
-          color: white;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-        }
+      /* Base message styles */
+      .message {
+        max-width: 75%;
+        font-size: 15px;
+        line-height: 1.5;
+        word-wrap: break-word;
+        overflow-wrap: break-word;
+      }
 
-        .close-btn { background: none; border: none; color: white; cursor: pointer; font-size: 16px; }
+      .message.bot {
+        align-self: flex-start;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 4px;
+      }
 
-        .chat-body {
-          flex: 1;
-          padding: 16px;
-          overflow-y: auto;
-          background: #f9fafb;
-          display: flex;
-          flex-direction: column;
-          gap: 12px;
-        }
+      .message.user {
+        align-self: flex-end;
+        background: var(--user-bubble);
+        color: white;
+        padding: 8px 16px;
+        border-radius: 18px 18px 4px 18px;
+        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+      }
 
-        .message {
-          max-width: 75%;
-          padding: 8px 16px;
-          border-radius: 12px;
-          font-size: 15px;
-          line-height: 1.5;
-        }
+      /* Bot message content bubble */
+      .message.bot .content {
+        background: var(--bot-bubble);
+        color: #1f2937;
+        padding: 8px 16px;
+        border-radius: 18px 18px 18px 4px;
+        word-wrap: break-word;
+        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+      }
 
-        .bot { align-self: flex-start; background: var(--bot-bubble); color: #1f2937; }
-        .user { align-self: flex-end; background: var(--user-bubble); color: white; }
+      .message.bot .content p {
+        margin: 4px 0;
+      }
 
-        .input-area {
-          border-top: 1px solid #e5e7eb;
-          padding: 12px;
-          display: flex;
-          gap: 8px;
-        }
+      .message.bot .content p:first-child { margin-top: 0; }
+      .message.bot .content p:last-child { margin-bottom: 0; }
 
-        input {
-          flex: 1;
-          border: 1px solid #e5e7eb;
-          border-radius: 6px;
-          padding: 8px 12px;
-          outline: none;
-        }
+      .message pre, .message code {
+        white-space: pre-wrap;
+        word-break: break-word;
+      }
 
-        input:focus { border-color: var(--primary-color); }
+      /* Status message (outside bubble) */
+      .status-message {
+        font-style: italic;
+        color: #888;
+        font-size: 0.85em;
+        padding: 4px 12px;
+        margin: 2px 0;
+        background: transparent;
+        border-radius: 12px;
+        display: inline-block;
+        max-width: 80%;
+      }
 
-        .send-btn {
-          background: var(--user-bubble);
-          color: white;
-          border: none;
-          padding: 0 16px;
-          border-radius: 6px;
-          cursor: pointer;
-        }
-        
+      /* Typing indicator as message bubble */
+      .typing-indicator {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 8px 16px;
+        background: var(--bot-bubble);
+        border-radius: 18px 18px 18px 4px;
+        margin: 4px 0;
+        max-width: fit-content;
+        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+      }
 
-        .resize-btn {
-          background: none;
-          border: none;
-          color: white;
-          cursor: pointer;
-          font-size: 16px;
-        }
+      .typing-indicator span {
+        width: 8px;
+        height: 8px;
+        background: #666;
+        border-radius: 50%;
+        display: inline-block;
+        animation: typingBounce 1.4s infinite ease-in-out both;
+      }
 
+      .typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
+      .typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
+      .typing-indicator span:nth-child(3) { animation-delay: 0; }
 
-        .typing span {
-          width: 6px;
-          height: 6px;
-          background: #999;
-          border-radius: 50%;
-          animation: blink 1.4s infinite;
-        }
+      @keyframes typingBounce {
+        0%, 80%, 100% { transform: scale(0.6); opacity: 0.6; }
+        40% { transform: scale(1); opacity: 1; }
+      }
 
-        .typing span:nth-child(2) { animation-delay: 0.2s; }
-        .typing span:nth-child(3) { animation-delay: 0.4s; }
+      .input-area {
+        border-top: 1px solid #e5e7eb;
+        padding: 12px;
+        display: flex;
+        gap: 8px;
+      }
 
-        @keyframes blink {
-          0%, 80%, 100% { opacity: 0.2; transform: scale(1); }
-          40% { opacity: 1; transform: scale(1.3); }
-        }
+      input {
+        flex: 1;
+        border: 1px solid #e5e7eb;
+        border-radius: 6px;
+        padding: 8px 12px;
+        outline: none;
+      }
 
-        .send-btn:disabled {
-          opacity: 0.6;
-          cursor: not-allowed;
-        }
+      input:focus { border-color: var(--primary-color); }
 
-        .header {
-          cursor: move;
-          user-select: none;
-          touch-action: none;
-        }
+      .send-btn {
+        background: var(--user-bubble);
+        color: white;
+        border: none;
+        padding: 0 16px;
+        border-radius: 6px;
+        cursor: pointer;
+      }
 
-        .history-btn {
-          height: 32px;
-          width: 32px;
-          border-radius: 50%;
-          border: none;
-          cursor: pointer;
-          background: rgba(255,255,255,0.0);
-          color: white;
-          font-size: 14px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          margin-top: 4px;
-        }
-      </style>
+      .send-btn:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+    </style>
+    
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
 
       <button class="chat-trigger" id="trigger">\u{1F4AC}</button>
 
@@ -1651,6 +1675,10 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       const historyBtn = this.shadowRoot.getElementById("history");
       const sidebar = this.shadowRoot.getElementById("sidebar");
       sidebar.addEventListener("new-chat", () => {
+        if (this.abortController) {
+          this.abortController.abort();
+          this.abortController = null;
+        }
         this.activeSessionId = null;
         const body2 = this.shadowRoot.getElementById("body");
         body2.innerHTML = `<div class="message bot">Hi ${this.userName}! How can I help?</div>`;
@@ -1679,6 +1707,10 @@ Please report this to https://github.com/markedjs/marked.`, e) {
         body.scrollTop = body.scrollHeight;
       };
       closeBtn.onclick = () => {
+        if (this.abortController) {
+          this.abortController.abort();
+          this.abortController = null;
+        }
         windowEl.style.display = "none";
         trigger.style.display = "flex";
       };
@@ -1692,6 +1724,10 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       const sendMessage = async () => {
         const text = input.value.trim();
         if (!text) return;
+        if (this.abortController) {
+          this.abortController.abort();
+          this.abortController = null;
+        }
         input.disabled = true;
         sendBtn.disabled = true;
         const userMsg = document.createElement("div");
@@ -1700,21 +1736,39 @@ Please report this to https://github.com/markedjs/marked.`, e) {
         body.appendChild(userMsg);
         input.value = "";
         body.scrollTop = body.scrollHeight;
+        const botMessageContainer = document.createElement("div");
+        botMessageContainer.className = "message bot";
+        const contentDiv = document.createElement("div");
+        contentDiv.className = "content";
+        contentDiv.id = "answer-content";
         const typingDiv = document.createElement("div");
-        typingDiv.className = "message bot";
+        typingDiv.className = "typing-indicator";
         typingDiv.id = "typing-indicator";
         typingDiv.innerHTML = `
-        <div class="typing">
-          <span></span><span></span><span></span>
-        </div>
+        <span></span><span></span><span></span>
       `;
-        body.appendChild(typingDiv);
+        const statusDiv = document.createElement("div");
+        statusDiv.className = "status-message";
+        statusDiv.id = "status-message";
+        botMessageContainer.appendChild(contentDiv);
+        botMessageContainer.appendChild(typingDiv);
+        botMessageContainer.appendChild(statusDiv);
+        body.appendChild(botMessageContainer);
         body.scrollTop = body.scrollHeight;
-        function fixMarkdown(text2) {
-          return text2.replace(/}```/g, "}\n```").replace(/```(\S)/g, "```\n$1");
-        }
+        const timeoutId = setTimeout(() => {
+          if (this.abortController) {
+            this.abortController.abort();
+            this.abortController = null;
+            this.showErrorMessage(body, "Request timed out after 30 seconds. Please try again.");
+            botMessageContainer.remove();
+            input.disabled = false;
+            sendBtn.disabled = false;
+            input.focus();
+          }
+        }, 3e4);
         try {
-          const res = await fetch(this.apiEndpoint, {
+          this.abortController = new AbortController();
+          const response = await fetch(this.apiEndpoint, {
             method: "POST",
             headers: {
               "Content-Type": "application/json",
@@ -1727,36 +1781,90 @@ Please report this to https://github.com/markedjs/marked.`, e) {
               bookshelf_name: "All Bookshelves",
               package_id: 30,
               user_timezone: Intl.DateTimeFormat().resolvedOptions().timeZone
-            })
+            }),
+            signal: this.abortController.signal
           });
-          const response = await res.json();
-          typingDiv.remove();
-          if (response?.session_id) {
-            this.activeSessionId = response.session_id;
+          clearTimeout(timeoutId);
+          if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+          }
+          const reader = response.body.getReader();
+          const decoder = new TextDecoder("utf-8");
+          let buffer = "";
+          let accumulatedAnswer = "";
+          let lastStatusMessage = "";
+          while (true) {
+            const { value, done } = await reader.read();
+            if (done) break;
+            buffer += decoder.decode(value, { stream: true });
+            const events = buffer.split("\n\n");
+            buffer = events.pop();
+            for (const event of events) {
+              const match = event.match(/^data: (.+)$/m);
+              if (!match) continue;
+              const jsonStr = match[1].trim();
+              try {
+                const data = JSON.parse(jsonStr);
+                if (data.type === "message") {
+                  lastStatusMessage = data.text;
+                  statusDiv.textContent = data.text;
+                  typingDiv.style.display = "none";
+                }
+                if (data.type === "answer") {
+                  typingDiv.style.display = "none";
+                  if (data.session_id) {
+                    this.activeSessionId = data.session_id;
+                  }
+                  if (accumulatedAnswer && !accumulatedAnswer.endsWith("\n\n")) {
+                    accumulatedAnswer += "\n\n";
+                  }
+                  const newText = data.text;
+                  accumulatedAnswer += newText;
+                  const words = newText.split(" ");
+                  let currentDisplayText = accumulatedAnswer.substring(0, accumulatedAnswer.length - newText.length);
+                  if (currentDisplayText) {
+                    const cleanExisting = this.fixMarkdown(currentDisplayText);
+                    const htmlExisting = d.parse(cleanExisting);
+                    contentDiv.innerHTML = htmlExisting;
+                    await new Promise((resolve) => setTimeout(resolve, 50));
+                  }
+                  for (let i = 0; i < words.length; i++) {
+                    currentDisplayText += (i > 0 || currentDisplayText ? " " : "") + words[i];
+                    const cleanReply = this.fixMarkdown(currentDisplayText + (i < words.length - 1 ? " ..." : ""));
+                    const htmlReply = d.parse(cleanReply);
+                    contentDiv.innerHTML = htmlReply;
+                    if (i < words.length - 1) {
+                      await new Promise((resolve) => setTimeout(resolve, 30));
+                    }
+                  }
+                }
+                if (data.is_last) {
+                  statusDiv.remove();
+                  typingDiv.style.display = "none";
+                  const cleanReply = this.fixMarkdown(accumulatedAnswer);
+                  const htmlReply = d.parse(cleanReply);
+                  contentDiv.innerHTML = htmlReply;
+                  break;
+                }
+              } catch (parseError) {
+                console.error("Error parsing JSON:", jsonStr, parseError);
+              }
+            }
           }
-          const botReply = response?.answer || "No response received.";
-          d.setOptions({
-            breaks: true,
-            gfm: true
-          });
-          const cleanReply = fixMarkdown(botReply);
-          const htmlReply = d.parse(cleanReply);
-          const wrapper = document.createElement("div");
-          wrapper.className = "message bot";
-          wrapper.innerHTML = htmlReply;
-          body.appendChild(wrapper);
-          body.scrollTop = body.scrollHeight;
         } catch (error) {
-          typingDiv.remove();
-          const errorMsg = document.createElement("div");
-          errorMsg.className = "message bot";
-          errorMsg.textContent = "Sorry, something went wrong.";
-          body.appendChild(errorMsg);
-          console.error(error);
+          clearTimeout(timeoutId);
+          botMessageContainer.remove();
+          if (error.name === "AbortError") {
+            console.log("Stream aborted");
+          } else {
+            this.showErrorMessage(body, "Sorry, something went wrong. Please try again.");
+            console.error("Stream error:", error);
+          }
         } finally {
           input.disabled = false;
           sendBtn.disabled = false;
           input.focus();
+          this.abortController = null;
         }
       };
       sendBtn.onclick = sendMessage;
@@ -1823,7 +1931,21 @@ Please report this to https://github.com/markedjs/marked.`, e) {
         }
       });
     }
+    fixMarkdown(text) {
+      return text.replace(/}```/g, "}\n```").replace(/```(\S)/g, "```\n$1");
+    }
+    showErrorMessage(body, message) {
+      const errorMsg = document.createElement("div");
+      errorMsg.className = "message bot error-message";
+      errorMsg.textContent = message;
+      body.appendChild(errorMsg);
+      body.scrollTop = body.scrollHeight;
+    }
     async loadSession(sessionId) {
+      if (this.abortController) {
+        this.abortController.abort();
+        this.abortController = null;
+      }
       this.activeSessionId = sessionId;
       const body = this.shadowRoot.getElementById("body");
       body.innerHTML = `<div class="message bot">Loading conversation...</div>`;
@@ -1841,6 +1963,9 @@ Please report this to https://github.com/markedjs/marked.`, e) {
             })
           }
         );
+        if (!res.ok) {
+          throw new Error(`HTTP error! status: ${res.status}`);
+        }
         const data = await res.json();
         const history = data?.body?.chat_history || [];
         body.innerHTML = "";
@@ -1850,6 +1975,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
         });
       } catch (err) {
         console.error("Failed to load session", err);
+        body.innerHTML = `<div class="message bot error-message">Failed to load conversation. Please try again.</div>`;
       }
     }
     renderMessage(content, type, isMarkdown = false) {
@@ -1857,8 +1983,11 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       const wrapper = document.createElement("div");
       wrapper.className = `message ${type}`;
       if (isMarkdown) {
-        const cleanReply = content.replace(/}```/g, "}\n```").replace(/```(\S)/g, "```\n$1");
-        wrapper.innerHTML = d.parse(cleanReply);
+        const cleanReply = this.fixMarkdown(content);
+        const contentDiv = document.createElement("div");
+        contentDiv.className = "content";
+        contentDiv.innerHTML = d.parse(cleanReply);
+        wrapper.appendChild(contentDiv);
       } else {
         wrapper.textContent = content;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "advaisor-chatbot",
-  "version": "1.6.0",
+  "version": "1.7.1-beta.0",
   "description": "Embeddable chatbot component",
   "main": "dist/testchatbot.js",
   "scripts": {