advaisor-chatbot 1.0.0 → 1.3.0

package/dist/testchatbot.js

@@ -1176,12 +1176,220 @@ Please report this to https://github.com/markedjs/marked.`, e) {
   var Ft = b.parse;
   var jt = x.lex;
 
+  // src/sidebar.js
+  var ChatSidebar = class extends HTMLElement {
+    constructor() {
+      super();
+      this.attachShadow({ mode: "open" });
+      this.isOpen = false;
+      this.token = null;
+      this.packageId = null;
+    }
+    setConfig(config) {
+      this.token = config.token;
+      this.packageId = config.packageId;
+    }
+    connectedCallback() {
+      this.render();
+    }
+    async toggle() {
+      this.isOpen = !this.isOpen;
+      this.shadowRoot.querySelector(".sidebar").classList.toggle("open");
+      if (this.isOpen) {
+        await this.loadRecentChats();
+      }
+    }
+    async loadRecentChats() {
+      if (!this.token || !this.packageId) return;
+      try {
+        const res = await fetch("https://silicore.ai:2002/customer/recent_chats", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "Authorization": `Bearer ${this.token}`
+          },
+          body: JSON.stringify({
+            package_id: this.packageId
+          })
+        });
+        const data = await res.json();
+        this.renderChats(data?.body);
+      } catch (err) {
+        console.error("Failed to load recent chats", err);
+      }
+    }
+    renderChats(chats) {
+      const container = this.shadowRoot.getElementById("recent-container");
+      const newChatBtn = this.shadowRoot.getElementById("newChatBtn");
+      newChatBtn.onclick = () => {
+        this.selectedSessionId = null;
+        container.querySelectorAll(".chat-item").forEach((item) => {
+          item.classList.remove("active");
+        });
+        this.dispatchEvent(new CustomEvent("new-chat", {
+          bubbles: true,
+          composed: true
+        }));
+      };
+      if (!chats || chats.length === 0) {
+        container.innerHTML = `<div>No recent chats</div>`;
+        return;
+      }
+      container.innerHTML = chats.map((chat) => {
+        const title = chat?.chat_title || "No title";
+        const shortTitle = title.length > 25 ? title.substring(0, 25) + "..." : title;
+        const activeClass = String(chat.session_id) === String(this.selectedSessionId) ? "active" : "";
+        return `
+        <div class="chat-item ${activeClass}"
+            data-id="${chat.session_id}"
+            title="${title}">
+            
+            <div class="chat-title">${shortTitle}</div>
+
+            <div class="chat-date">
+            ${chat?.created_at || ""}
+            </div>
+
+        </div>
+        `;
+      }).join("");
+      container.querySelectorAll(".chat-item").forEach((el) => {
+        el.onclick = () => {
+          const sessionId = el.dataset.id;
+          this.selectedSessionId = String(sessionId);
+          this.dispatchEvent(new CustomEvent("chat-selected", {
+            detail: { sessionId },
+            bubbles: true,
+            composed: true
+          }));
+          this.renderChats(chats);
+        };
+      });
+    }
+    render() {
+      this.shadowRoot.innerHTML = `
+      <style>
+        .sidebar {
+        position: absolute;
+        left: -280px;
+        top: 64.5px;
+        width: 280px;
+        height: calc(100% - 64.5px);
+        background: white;
+        border-right: 1px solid #eee;
+        box-shadow: 2px 0 10px rgba(0,0,0,0.05);
+        transition: left 0.3s ease;
+        padding: 16px;
+        box-sizing: border-box;
+        border-radius: 0 12px 12px 0;
+
+        display: flex;
+        flex-direction: column;
+        }
+
+        .recent-wrapper {
+        flex: 1;
+        overflow-y: auto;
+        margin-top: 10px;
+        }
+
+        #recent-container {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        }
+
+        .sidebar.open {
+          left: 0;
+        }
+
+        h3 {
+          margin-top: 0;
+          font-size: 16px;
+          margin-bottom: 0px;
+        }
+
+        .chat-item {
+          padding: 8px;
+          border-radius: 6px;
+          cursor: pointer;
+        }
+
+        .chat-item:hover {
+          background: #f3f4f6;
+        }
+        
+        .chat-title {
+          font-size: 14px;
+        }
+
+        .chat-date {
+          font-size: 12px;
+          color: rgba(0,0,0,0.38);
+          white-space: nowrap;
+          margin-top: 2px;
+        }
+
+        .recent-wrapper::-webkit-scrollbar {
+        width: 6px;
+        }
+
+        .recent-wrapper::-webkit-scrollbar-thumb {
+        background: #ddd;
+        border-radius: 6px;
+        }
+
+        .recent-wrapper::-webkit-scrollbar-thumb:hover {
+        background: #ccc;
+        }
+         
+        .new-chat-btn {
+            width: 100%;
+            padding: 8px;
+            border: none;
+            background: var(--primary-color);
+            color: white;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 14px;
+            margin-bottom: 8px;
+        }
+        
+        .chat-item.active {
+            background: rgba(0,0,0,0.08);
+            font-weight: 500;
+        }
+      </style>
+
+      <div class="sidebar">
+
+      <div class="sidebar-header">
+        <button id="newChatBtn" class="new-chat-btn">+ Start New Chat</button>
+      </div>
+
+        <h3>Recent Chats</h3>
+        <div class="recent-wrapper">
+            <div id="recent-container">
+            <div>Loading...</div>
+            </div>
+        </div>
+      </div>
+
+    `;
+    }
+  };
+  customElements.define("chat-sidebar", ChatSidebar);
+
+  // src/assets/chats.png
+  var chats_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAdElEQVR4nO2UQQqAMAwE8zzrhzzqW9uHjCAKHhrolkYQnXO6A9lQs59WgBkotFOApAiU8IusCA6i5u27gubyBwrq5Y9aEV7OYwKRHCnIwNQjWCNWZ7Xw0YJNeuCgzlvnJygJ0llojEABWEIFd4lFgnMw72QHf/xl9mYG+AwAAAAASUVORK5CYII=";
+
   // src/chatbot.js
   var AdvaisorChatBot = class extends HTMLElement {
     constructor() {
       super();
       this.attachShadow({ mode: "open" });
       this.isOpen = false;
+      this.activeSessionId = null;
     }
     connectedCallback() {
       this.apiEndpoint = this.getAttribute("api_endpoint") || "https://silicore.ai:2002/cds_bookshelves/ask_all_bookshelves";
@@ -1191,6 +1399,7 @@ 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;
@@ -1234,10 +1443,10 @@ Please report this to https://github.com/markedjs/marked.`, e) {
           border-radius: 12px;
           width: 400px;
           max-width: 90vw;
-          height: 600px;
+          height: 85vh;
           overflow: hidden;
-          min-width: 280px;
-          min-height: 350px;
+          min-width: min(300px, 85vw);
+          min-height: min(450px, 85vw);
           transition: width 0.2s ease, height 0.2s ease;
         }
 
@@ -1267,7 +1476,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
           align-items: center;
         }
 
-        .close-btn { background: none; border: none; color: white; cursor: pointer; font-size: 18px; }
+        .close-btn { background: none; border: none; color: white; cursor: pointer; font-size: 16px; }
 
         .chat-body {
           flex: 1;
@@ -1361,12 +1570,29 @@ Please report this to https://github.com/markedjs/marked.`, e) {
         .header {
           cursor: move;
           user-select: none;
+          touch-action: none;
+        }
+
+        .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>
 
       <button class="chat-trigger" id="trigger">\u{1F4AC}</button>
 
       <div class="chat-window" id="window">
+      <chat-sidebar id="sidebar"></chat-sidebar>
         <div class="header">
           <div>
             <div style="font-weight: 600;">advAIsor</div>
@@ -1374,8 +1600,12 @@ Please report this to https://github.com/markedjs/marked.`, e) {
           </div>
 
           <div style="display:flex; gap:8px;">
-            <button class="resize-btn" id="resize">\u26F6</button>
-            <button class="close-btn" id="close">\u2715</button>
+            <button title="Chat History" class="history-btn" id="history">
+              <img src="${chats_default}" alt="History" 
+                style="width:18px; height:16px;">
+            </button>
+            <button title="Resize" class="resize-btn" id="resize">\u26F6</button>
+            <button title="Close" class="close-btn" id="close">\u2715</button>
           </div>
         </div>
 
@@ -1398,6 +1628,31 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       const sendBtn = this.shadowRoot.getElementById("send");
       const input = this.shadowRoot.getElementById("input");
       const body = this.shadowRoot.getElementById("body");
+      const historyBtn = this.shadowRoot.getElementById("history");
+      const sidebar = this.shadowRoot.getElementById("sidebar");
+      sidebar.addEventListener("new-chat", () => {
+        this.activeSessionId = null;
+        const body2 = this.shadowRoot.getElementById("body");
+        body2.innerHTML = `<div class="message bot">Hi ${this.userName}! How can I help?</div>`;
+        if (sidebar.isOpen) {
+          sidebar.toggle();
+        }
+      });
+      sidebar.setConfig({
+        token: this.token,
+        packageId: 30
+        // or this.packageId if dynamic
+      });
+      historyBtn.onclick = () => {
+        sidebar.toggle();
+      };
+      sidebar.addEventListener("chat-selected", (e) => {
+        const sessionId = e.detail.sessionId;
+        this.loadSession(sessionId);
+        if (sidebar.isOpen) {
+          sidebar.toggle();
+        }
+      });
       trigger.onclick = () => {
         windowEl.style.display = "flex";
         trigger.style.display = "none";
@@ -1448,7 +1703,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
             body: JSON.stringify({
               question: text,
               pdf_name: "All Bookshelves",
-              session_id: null,
+              session_id: this.activeSessionId,
               bookshelf_name: "All Bookshelves",
               package_id: 30,
               user_timezone: Intl.DateTimeFormat().resolvedOptions().timeZone
@@ -1456,6 +1711,9 @@ Please report this to https://github.com/markedjs/marked.`, e) {
           });
           const response = await res.json();
           typingDiv.remove();
+          if (response?.session_id) {
+            this.activeSessionId = response.session_id;
+          }
           const botReply = response?.answer || "No response received.";
           d.setOptions({
             breaks: true,
@@ -1489,31 +1747,104 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       let isDragging = false;
       let offsetX = 0;
       let offsetY = 0;
-      header.addEventListener("mousedown", (e) => {
+      function getEventPosition(e) {
+        if (e.touches && e.touches.length > 0) {
+          return {
+            x: e.touches[0].clientX,
+            y: e.touches[0].clientY
+          };
+        }
+        return {
+          x: e.clientX,
+          y: e.clientY
+        };
+      }
+      function startDrag(e) {
         isDragging = true;
+        const pos = getEventPosition(e);
         const rect = windowEl.getBoundingClientRect();
-        offsetX = e.clientX - rect.left;
-        offsetY = e.clientY - rect.top;
+        offsetX = pos.x - rect.left;
+        offsetY = pos.y - rect.top;
         windowEl.style.right = "auto";
         windowEl.style.bottom = "auto";
         windowEl.style.left = rect.left + "px";
         windowEl.style.top = rect.top + "px";
-      });
-      document.addEventListener("mousemove", (e) => {
+      }
+      header.addEventListener("mousedown", startDrag);
+      header.addEventListener("touchstart", startDrag);
+      function onDrag(e) {
         if (!isDragging) return;
-        let x2 = e.clientX - offsetX;
-        let y2 = e.clientY - offsetY;
+        const pos = getEventPosition(e);
+        let x2 = pos.x - offsetX;
+        let y2 = pos.y - offsetY;
         const maxX = window.innerWidth - windowEl.offsetWidth;
         const maxY = window.innerHeight - windowEl.offsetHeight;
         x2 = Math.max(0, Math.min(x2, maxX));
         y2 = Math.max(0, Math.min(y2, maxY));
         windowEl.style.left = x2 + "px";
         windowEl.style.top = y2 + "px";
-      });
-      document.addEventListener("mouseup", () => {
+      }
+      document.addEventListener("mousemove", onDrag);
+      document.addEventListener("touchmove", onDrag);
+      function stopDrag() {
         isDragging = false;
+      }
+      document.addEventListener("mouseup", stopDrag);
+      document.addEventListener("touchend", stopDrag);
+      windowEl.addEventListener("click", (e) => {
+        const sidebar2 = this.shadowRoot.getElementById("sidebar");
+        const historyBtn2 = this.shadowRoot.getElementById("history");
+        if (!sidebar2.isOpen) return;
+        const path = e.composedPath();
+        const clickedInsideSidebar = path.includes(sidebar2);
+        const clickedHistoryBtn = path.includes(historyBtn2);
+        if (!clickedInsideSidebar && !clickedHistoryBtn) {
+          sidebar2.toggle();
+        }
       });
     }
+    async loadSession(sessionId) {
+      this.activeSessionId = sessionId;
+      const body = this.shadowRoot.getElementById("body");
+      body.innerHTML = `<div class="message bot">Loading conversation...</div>`;
+      try {
+        const res = await fetch(
+          "https://silicore.ai:2002/customer/user_session_chats",
+          {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+              "Authorization": `Bearer ${this.token}`
+            },
+            body: JSON.stringify({
+              session_id: sessionId
+            })
+          }
+        );
+        const data = await res.json();
+        const history = data?.body?.chat_history || [];
+        body.innerHTML = "";
+        history.forEach((chat) => {
+          this.renderMessage(chat.question, "user");
+          this.renderMessage(chat.answer, "bot", true);
+        });
+      } catch (err) {
+        console.error("Failed to load session", err);
+      }
+    }
+    renderMessage(content, type, isMarkdown = false) {
+      const body = this.shadowRoot.getElementById("body");
+      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);
+      } else {
+        wrapper.textContent = content;
+      }
+      body.appendChild(wrapper);
+      body.scrollTop = body.scrollHeight;
+    }
   };
   customElements.define("advaisor-chatbot", AdvaisorChatBot);
 })();

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "advaisor-chatbot",
-  "version": "1.0.0",
+  "version": "1.3.0",
   "description": "Embeddable chatbot component",
   "main": "dist/testchatbot.js",
   "scripts": {
     "build": "node build.js"
   },
-  "keywords": ["chatbot", "web-component", "ai"],
+  "keywords": [
+    "chatbot",
+    "web-component",
+    "ai"
+  ],
   "author": "Echno Technologies",
   "license": "ISC",
   "files": [