mini-chat-bot-widget 0.8.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mini-chat-bot-widget",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "A tiny chat bot widget fixed at bottom right, distributable via npm and usable with a <script> tag.",
   "main": "dist/chat-widget.umd.js",
   "module": "dist/chat-widget.esm.js",

package/src/audio-chat-screen.js

@@ -464,7 +464,9 @@ class AudioChatScreen {
       // Update existing message
       const bubble = existingMessage.querySelector(".message-bubble");
       if (bubble) {
-        bubble.innerHTML = this._escapeHtml(messageData.content || text);
+        // Parse markdown for assistant messages, escape for user messages
+        const content = messageData.content || text;
+        bubble.innerHTML = !isUser ? this._parseMarkdown(content) : this._escapeHtml(content);
       }
       messagesContainer.scrollTop = messagesContainer.scrollHeight;
       return;
@@ -526,10 +528,13 @@ class AudioChatScreen {
     const timestamp = messageData?.timestamp ? new Date(messageData.timestamp) : new Date();
     const formattedTime = this._formatTime(timestamp);
 
+    // Parse markdown for assistant messages, escape for user messages
+    const renderedContent = !isUser ? this._parseMarkdown(content) : this._escapeHtml(content);
+
     messageEl.innerHTML = `
       <div class="message-content">
         ${attachmentsHTML}
-        <div class="message-bubble">${this._escapeHtml(content)}</div>
+        <div class="message-bubble">${renderedContent}</div>
         <div class="message-time">${formattedTime}</div>
       </div>
     `;
@@ -586,7 +591,10 @@ class AudioChatScreen {
         if (existingEl) {
           const bubble = existingEl.querySelector(".message-bubble");
           if (bubble) {
-            bubble.innerHTML = this._escapeHtml(msg.content || "");
+            // Parse markdown for assistant messages, escape for user messages
+            const content = msg.content || "";
+            const isUserMessage = msg.sender === "user";
+            bubble.innerHTML = !isUserMessage ? this._parseMarkdown(content) : this._escapeHtml(content);
           }
 
           // Update attachments if they exist
@@ -687,6 +695,106 @@ class AudioChatScreen {
     return div.innerHTML;
   }
 
+  // Parse markdown to HTML
+  _parseMarkdown(text) {
+    if (!text || typeof text !== 'string') return '';
+    
+    let html = text;
+    
+    // Escape HTML first to prevent XSS
+    html = html
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;');
+    
+    // Split into lines for processing
+    const lines = html.split('\n');
+    const processedLines = [];
+    let inList = false;
+    
+    for (let i = 0; i < lines.length; i++) {
+      let line = lines[i];
+      
+      // Check for headers first (#, ##, ###, etc.)
+      const headerMatch = line.match(/^(#{1,6})\s+(.+)$/);
+      if (headerMatch) {
+        if (inList) {
+          processedLines.push('</ul>');
+          inList = false;
+        }
+        const level = headerMatch[1].length;
+        const headerText = headerMatch[2];
+        // Process markdown inside header
+        let processedHeader = headerText;
+        processedHeader = processedHeader.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+        processedHeader = processedHeader.replace(/__([^_]+)__/g, '<strong>$1</strong>');
+        processedHeader = processedHeader.replace(/(^|[^*])\*([^*]+)\*([^*]|$)/g, '$1<em>$2</em>$3');
+        processedHeader = processedHeader.replace(/(^|[^_])_([^_]+)_([^_]|$)/g, '$1<em>$2</em>$3');
+        processedLines.push(`<h${level}>${processedHeader}</h${level}>`);
+        continue;
+      }
+      
+      // Check if this is a list item (before processing bold/italic)
+      const listMatch = line.match(/^[\s]*[-*]\s+(.+)$/);
+      
+      if (listMatch) {
+        // Process markdown inside list item
+        let listContent = listMatch[1];
+        
+        // Bold: **text** (must be processed before italic)
+        listContent = listContent.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+        listContent = listContent.replace(/__([^_]+)__/g, '<strong>$1</strong>');
+        
+        // Italic: *text* (single asterisk, avoid matching **text**)
+        listContent = listContent.replace(/(^|[^*])\*([^*]+)\*([^*]|$)/g, '$1<em>$2</em>$3');
+        listContent = listContent.replace(/(^|[^_])_([^_]+)_([^_]|$)/g, '$1<em>$2</em>$3');
+        
+        if (!inList) {
+          processedLines.push('<ul>');
+          inList = true;
+        }
+        processedLines.push(`<li>${listContent}</li>`);
+      } else {
+        if (inList) {
+          processedLines.push('</ul>');
+          inList = false;
+        }
+        
+        // Skip empty lines (they'll become <br> later)
+        if (line.trim() === '') {
+          processedLines.push('');
+          continue;
+        }
+        
+        // Process markdown in non-list lines
+        // Bold: **text** (must be processed before italic)
+        line = line.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+        line = line.replace(/__([^_]+)__/g, '<strong>$1</strong>');
+        
+        // Italic: *text* (single asterisk, avoid matching **text**)
+        line = line.replace(/(^|[^*])\*([^*]+)\*([^*]|$)/g, '$1<em>$2</em>$3');
+        line = line.replace(/(^|[^_])_([^_]+)_([^_]|$)/g, '$1<em>$2</em>$3');
+        
+        // Inline code: `code`
+        line = line.replace(/`([^`]+)`/g, '<code>$1</code>');
+        
+        // Links: [text](url)
+        line = line.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
+        
+        processedLines.push(line);
+      }
+    }
+    
+    if (inList) {
+      processedLines.push('</ul>');
+    }
+    
+    // Join lines with <br> and return
+    html = processedLines.join('<br>');
+    
+    return html;
+  }
+
   // Show expanded image modal (mirrors TextChatScreen)
   showExpandedImage(src, alt) {
     const existingModal = document.querySelector(".expanded-image-modal");
@@ -1102,6 +1210,88 @@ class AudioChatScreen {
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
       }
 
+      /* Markdown styles */
+      .audio-chat-screen .message-bubble strong {
+        font-weight: 600;
+  color: inherit;
+      }
+
+      .audio-chat-screen .message-bubble em {
+        font-style: italic;
+      }
+
+      .audio-chat-screen .message-bubble ul {
+  margin: 0px 0;
+  padding-left: 20px;
+  list-style-type: disc;
+  margin-bottom:0px;
+  margin-top:5px;
+      }
+
+      .audio-chat-screen .message-bubble li {
+  margin: 0;
+  line-height: 1.1;
+  padding-left: 3px;
+      }
+
+      .audio-chat-screen .message-bubble h1,
+      .audio-chat-screen .message-bubble h2,
+      .audio-chat-screen .message-bubble h3,
+      .audio-chat-screen .message-bubble h4,
+      .audio-chat-screen .message-bubble h5,
+      .audio-chat-screen .message-bubble h6 {
+  margin: 0px 0 0px 0;
+  font-weight: 600;
+  color: inherit;
+  line-height: 1.3;
+      }
+
+      .audio-chat-screen .message-bubble h1 {
+        font-size: 1.5em;
+      }
+
+      .audio-chat-screen .message-bubble h2 {
+        font-size: 1.3em;
+      }
+
+      .audio-chat-screen .message-bubble h3 {
+        font-size: 1.15em;
+      }
+
+      .audio-chat-screen .message-bubble h4 {
+        font-size: 1.05em;
+      }
+
+      .audio-chat-screen .message-bubble h5 {
+        font-size: 1em;
+      }
+
+      .audio-chat-screen .message-bubble h6 {
+        font-size: 0.95em;
+      }
+
+      .audio-chat-screen .message-bubble code {
+        background: rgba(0, 0, 0, 0.05);
+        padding: 2px 6px;
+        border-radius: 4px;
+        font-family: 'Courier New', Courier, monospace;
+        font-size: 0.9em;
+      }
+
+      .audio-chat-screen .message-bubble a {
+        color: ${this.primaryColor};
+        text-decoration: underline;
+      }
+
+      .audio-chat-screen .message-bubble a:hover {
+        opacity: 0.8;
+      }
+      
+      .audio-chat-screen .message-bubble br {
+  line-height: 0.1; /* Adjust between 0 and 1 */
+}
+
+
       .audio-chat-screen .message-time {
         font-size: 10px;
         color: #94a3b8;

package/src/chat-widget.js

@@ -22,9 +22,10 @@ class ChatWidget {
     this.threadId = options.threadId || null;
     this.assistantId = options.assistantId || null;
     this.selectedLanguage = options.selectedLanguage || "en";
-    this.accessToken = options.accessToken || "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InhpZHdnbHl5emRqc2dyaW92bWdtIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NDczOTE5NjEsImV4cCI6MjA2Mjk2Nzk2MX0.jAdwoGNbwK";
-    this.supabaseToken = options.supabaseToken || "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InhpZHdnbHl5emRqc2dyaW92bWdtIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NDczOTE5NjEsImV4cCI6MjA2Mjk2Nzk2MX0.jAdwoGNbwK";
+    this.accessToken = options.accessToken || "";
+    this.supabaseToken = options.supabaseToken || "";
     this.userInfo = options.userInfo || {};
+    this.mcpServerUrl = options.mcpServerUrl || "http://localhost:8010/mcp";
     // Store the custom getHeaders function or use default
     this._customGetHeaders = options.getHeaders;
 
@@ -106,6 +107,9 @@ class ChatWidget {
     }
   }
 
+
+
+
   _init() {
     // Create container
     this.container = document.createElement("div");
@@ -157,6 +161,7 @@ class ChatWidget {
     this._renderScreen();
     this._populateLanguageOptions();
     this._bindEvents();
+
   }
 
   _applyStyles() {
@@ -1262,6 +1267,7 @@ class ChatWidget {
       return;
     }
 
+
     console.log(
       "📤 Sending text message - Language:",
       this.selectedLanguage,

package/src/text-chat-screen.js

@@ -421,7 +421,9 @@ class TextChatScreen {
       // Update existing message
       const bubble = existingMessage.querySelector(".message-bubble");
       if (bubble) {
-        bubble.innerHTML = this._escapeHtml(messageData.content || text);
+        // Parse markdown for assistant messages, escape for user messages
+        const content = messageData.content || text;
+        bubble.innerHTML = !isUser ? this._parseMarkdown(content) : this._escapeHtml(content);
       }
       messagesContainer.scrollTop = messagesContainer.scrollHeight;
       return;
@@ -483,11 +485,14 @@ class TextChatScreen {
     const timestamp = messageData?.timestamp ? new Date(messageData.timestamp) : new Date();
     const formattedTime = this._formatTime(timestamp);
 
+    // Parse markdown for assistant messages, escape for user messages
+    const renderedContent = !isUser ? this._parseMarkdown(content) : this._escapeHtml(content);
+
     messageEl.innerHTML = `
       <div class="message-content">
         ${attachmentsHTML}
         <div class="message-bubble">
-          ${this._escapeHtml(content)}
+          ${renderedContent}
           </div>
         <div class="message-time">${formattedTime}</div>
       </div>
@@ -537,7 +542,10 @@ class TextChatScreen {
         if (existingEl) {
           const bubble = existingEl.querySelector(".message-bubble");
           if (bubble) {
-            bubble.innerHTML = this._escapeHtml(msg.content || "");
+            // Parse markdown for assistant messages, escape for user messages
+            const content = msg.content || "";
+            const isUserMessage = msg.sender === "user";
+            bubble.innerHTML = !isUserMessage ? this._parseMarkdown(content) : this._escapeHtml(content);
           }
 
           // Update attachments if they exist
@@ -676,6 +684,106 @@ class TextChatScreen {
     return div.innerHTML;
   }
 
+  // Parse markdown to HTML
+  _parseMarkdown(text) {
+    if (!text || typeof text !== 'string') return '';
+    
+    let html = text;
+    
+    // Escape HTML first to prevent XSS
+    html = html
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;');
+    
+    // Split into lines for processing
+    const lines = html.split('\n');
+    const processedLines = [];
+    let inList = false;
+    
+    for (let i = 0; i < lines.length; i++) {
+      let line = lines[i];
+      
+      // Check for headers first (#, ##, ###, etc.)
+      const headerMatch = line.match(/^(#{1,6})\s+(.+)$/);
+      if (headerMatch) {
+        if (inList) {
+          processedLines.push('</ul>');
+          inList = false;
+        }
+        const level = headerMatch[1].length;
+        const headerText = headerMatch[2];
+        // Process markdown inside header
+        let processedHeader = headerText;
+        processedHeader = processedHeader.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+        processedHeader = processedHeader.replace(/__([^_]+)__/g, '<strong>$1</strong>');
+        processedHeader = processedHeader.replace(/(^|[^*])\*([^*]+)\*([^*]|$)/g, '$1<em>$2</em>$3');
+        processedHeader = processedHeader.replace(/(^|[^_])_([^_]+)_([^_]|$)/g, '$1<em>$2</em>$3');
+        processedLines.push(`<h${level}>${processedHeader}</h${level}>`);
+        continue;
+      }
+      
+      // Check if this is a list item (before processing bold/italic)
+      const listMatch = line.match(/^[\s]*[-*]\s+(.+)$/);
+      
+      if (listMatch) {
+        // Process markdown inside list item
+        let listContent = listMatch[1];
+        
+        // Bold: **text** (must be processed before italic)
+        listContent = listContent.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+        listContent = listContent.replace(/__([^_]+)__/g, '<strong>$1</strong>');
+        
+        // Italic: *text* (single asterisk, avoid matching **text**)
+        listContent = listContent.replace(/(^|[^*])\*([^*]+)\*([^*]|$)/g, '$1<em>$2</em>$3');
+        listContent = listContent.replace(/(^|[^_])_([^_]+)_([^_]|$)/g, '$1<em>$2</em>$3');
+        
+        if (!inList) {
+          processedLines.push('<ul>');
+          inList = true;
+        }
+        processedLines.push(`<li>${listContent}</li>`);
+      } else {
+        if (inList) {
+          processedLines.push('</ul>');
+          inList = false;
+        }
+        
+        // Skip empty lines (they'll become <br> later)
+        if (line.trim() === '') {
+          processedLines.push('');
+          continue;
+        }
+        
+        // Process markdown in non-list lines
+        // Bold: **text** (must be processed before italic)
+        line = line.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+        line = line.replace(/__([^_]+)__/g, '<strong>$1</strong>');
+        
+        // Italic: *text* (single asterisk, avoid matching **text**)
+        line = line.replace(/(^|[^*])\*([^*]+)\*([^*]|$)/g, '$1<em>$2</em>$3');
+        line = line.replace(/(^|[^_])_([^_]+)_([^_]|$)/g, '$1<em>$2</em>$3');
+        
+        // Inline code: `code`
+        line = line.replace(/`([^`]+)`/g, '<code>$1</code>');
+        
+        // Links: [text](url)
+        line = line.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
+        
+        processedLines.push(line);
+      }
+    }
+    
+    if (inList) {
+      processedLines.push('</ul>');
+    }
+    
+    // Join lines with <br> and return
+    html = processedLines.join('<br>');
+    
+    return html;
+  }
+
   // Show expanded image modal
   showExpandedImage(src, alt) {
     // Remove existing modal if any
@@ -898,6 +1006,79 @@ class TextChatScreen {
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
       }
 
+      /* ============================================
+   Text Chat Message Bubble Styles
+   ============================================ */
+
+/* Typography - Bold */
+.text-chat-screen .message-bubble strong {
+  font-weight: 600;
+  color: inherit;
+}
+
+/* Typography - Italic */
+.text-chat-screen .message-bubble em {
+  font-style: italic;
+}
+
+/* Lists */
+.text-chat-screen .message-bubble ul {
+  margin: 0px 0;
+  padding-left: 20px;
+  list-style-type: disc;
+  margin-bottom:0px;
+  margin-top:5px;
+}
+
+.text-chat-screen .message-bubble li {
+  margin: 0;
+  line-height: 1.1;
+  padding-left: 3px;
+}
+
+/* Headings - Shared Styles */
+.text-chat-screen .message-bubble h1,
+.text-chat-screen .message-bubble h2,
+.text-chat-screen .message-bubble h3,
+.text-chat-screen .message-bubble h4,
+.text-chat-screen .message-bubble h5,
+.text-chat-screen .message-bubble h6 {
+  margin: 0px 0 0px 0;
+  font-weight: 600;
+  color: inherit;
+  line-height: 1.3;
+}
+
+/* Heading Sizes */
+.text-chat-screen .message-bubble h1 { font-size: 1.5em; }
+.text-chat-screen .message-bubble h2 { font-size: 1.3em; }
+.text-chat-screen .message-bubble h3 { font-size: 1.15em; }
+.text-chat-screen .message-bubble h4 { font-size: 1.05em; }
+.text-chat-screen .message-bubble h5 { font-size: 1em; }
+.text-chat-screen .message-bubble h6 { font-size: 0.95em; }
+
+/* Inline Code */
+.text-chat-screen .message-bubble code {
+  background: rgba(0, 0, 0, 0.05);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 0.9em;
+}
+
+/* Links */
+.text-chat-screen .message-bubble a {
+  color: ${this.primaryColor};
+  text-decoration: underline;
+}
+
+.text-chat-screen .message-bubble a:hover {
+  opacity: 0.8;
+}
+.text-chat-screen .message-bubble br {
+  line-height: 0.1; /* Adjust between 0 and 1 */
+}
+
       .text-chat-screen .message-time {
         font-size: 10px;
         color: #94a3b8;