@a.izzuddin/ai-chat 0.2.8 → 0.2.9

package/dist/index.js

@@ -27,6 +27,7 @@ exports.AIChat = class AIChat extends lit.LitElement {
     this.mode = "fullscreen";
     this.initialMessages = [];
     this.botAvatarUrl = "";
+    this.widgetIconUrl = "";
     this.backgroundImageUrl = "";
     this.widgetWidth = "380px";
     this.widgetHeight = "600px";
@@ -44,6 +45,25 @@ exports.AIChat = class AIChat extends lit.LitElement {
   toggleWidget() {
     this.isOpen = !this.isOpen;
   }
+  /**
+   * Clear all chat messages and reset to welcome message
+   * @public
+   */
+  clearChat() {
+    this.clearMessagesFromStorage();
+    if (this.welcomeMessage) {
+      const welcomeText = this.welcomeSubtitle ? `${this.welcomeMessage}
+
+${this.welcomeSubtitle}` : this.welcomeMessage;
+      this.messages = [{
+        id: "welcome-" + Date.now(),
+        role: "assistant",
+        content: welcomeText
+      }];
+    } else {
+      this.messages = [];
+    }
+  }
   lightenColor(hex, percent = 15) {
     hex = hex.replace("#", "");
     const r = parseInt(hex.substring(0, 2), 16);
@@ -54,23 +74,66 @@ exports.AIChat = class AIChat extends lit.LitElement {
     const newB = Math.min(255, Math.round(b + (255 - b) * (percent / 100)));
     return `#${newR.toString(16).padStart(2, "0")}${newG.toString(16).padStart(2, "0")}${newB.toString(16).padStart(2, "0")}`;
   }
+  getStorageKey() {
+    return `ai-chat-messages-${this.sessionId}`;
+  }
+  saveMessagesToStorage() {
+    try {
+      const storageKey = this.getStorageKey();
+      localStorage.setItem(storageKey, JSON.stringify(this.messages));
+    } catch (error) {
+      console.warn("Failed to save messages to localStorage:", error);
+    }
+  }
+  loadMessagesFromStorage() {
+    try {
+      const storageKey = this.getStorageKey();
+      const saved = localStorage.getItem(storageKey);
+      if (saved) {
+        return JSON.parse(saved);
+      }
+    } catch (error) {
+      console.warn("Failed to load messages from localStorage:", error);
+    }
+    return null;
+  }
+  clearMessagesFromStorage() {
+    try {
+      const storageKey = this.getStorageKey();
+      localStorage.removeItem(storageKey);
+    } catch (error) {
+      console.warn("Failed to clear messages from localStorage:", error);
+    }
+  }
   formatMessageContent(content) {
     const escapeHtml = (text) => {
       const div = document.createElement("div");
       div.textContent = text;
       return div.innerHTML;
     };
-    let processedContent = content.replace(/(\d+\.\s+[^0-9]+?)(?=\s+\d+\.\s+|\s*$)/g, "$1\n");
+    let processedContent = content.replace(/([:\w])\s*(\d+\.\s+)/g, "$1\n$2");
+    processedContent = processedContent.replace(/(\d+\.\s+[^0-9]+?)(?=\s+\d+\.\s+|\s*$)/g, "$1\n");
     processedContent = processedContent.replace(/(-\s+[^-]+?)(?=\s+-\s+|\s*$)/g, "$1\n");
     const lines = processedContent.split("\n");
     let formattedContent = "";
     let inList = false;
     let listType = null;
+    let orderedListCounter = 1;
+    const getNextListType = (startIndex) => {
+      for (let j = startIndex + 1; j < lines.length; j++) {
+        const nextLine = lines[j].trim();
+        if (nextLine === "") continue;
+        if (nextLine.match(/^[-*•]\s+/)) return "ul";
+        if (nextLine.match(/^\d+\.\s+/)) return "ol";
+        return null;
+      }
+      return null;
+    };
     for (let i = 0; i < lines.length; i++) {
       const line = lines[i];
       const trimmedLine = line.trim();
       const unorderedMatch = trimmedLine.match(/^[-*•]\s+(.+)$/);
-      const orderedMatch = trimmedLine.match(/^\d+\.\s+(.+)$/);
+      const orderedMatch = trimmedLine.match(/^(\d+)\.\s+(.+)$/);
       if (unorderedMatch) {
         if (!inList || listType !== "ul") {
           if (inList) formattedContent += listType === "ol" ? "</ol>" : "</ul>";
@@ -80,22 +143,40 @@ exports.AIChat = class AIChat extends lit.LitElement {
         }
         formattedContent += `<li>${escapeHtml(unorderedMatch[1])}</li>`;
       } else if (orderedMatch) {
+        const itemNumber = parseInt(orderedMatch[1], 10);
+        const itemText = orderedMatch[2];
         if (!inList || listType !== "ol") {
           if (inList) formattedContent += listType === "ol" ? "</ol>" : "</ul>";
-          formattedContent += "<ol>";
+          if (itemNumber === 1) {
+            orderedListCounter = 1;
+            formattedContent += "<ol>";
+          } else {
+            formattedContent += `<ol start="${orderedListCounter}">`;
+          }
           inList = true;
           listType = "ol";
         }
-        formattedContent += `<li>${escapeHtml(orderedMatch[1])}</li>`;
+        formattedContent += `<li value="${itemNumber}">${escapeHtml(itemText)}</li>`;
+        orderedListCounter = itemNumber + 1;
       } else {
-        if (inList) {
-          formattedContent += listType === "ol" ? "</ol>" : "</ul>";
-          inList = false;
-          listType = null;
-        }
         if (trimmedLine === "") {
-          formattedContent += "<br>";
+          const nextListType = getNextListType(i);
+          if (inList && nextListType === listType) {
+            formattedContent += '<li style="list-style: none; height: 0.5em;"></li>';
+          } else {
+            if (inList) {
+              formattedContent += listType === "ol" ? "</ol>" : "</ul>";
+              inList = false;
+              listType = null;
+            }
+            formattedContent += "<br>";
+          }
         } else {
+          if (inList) {
+            formattedContent += listType === "ol" ? "</ol>" : "</ul>";
+            inList = false;
+            listType = null;
+          }
           formattedContent += escapeHtml(line) + "\n";
         }
       }
@@ -107,20 +188,37 @@ exports.AIChat = class AIChat extends lit.LitElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    const savedMessages = this.loadMessagesFromStorage();
     if (this.initialMessages && this.initialMessages.length > 0) {
       this.messages = [...this.initialMessages];
+    } else if (savedMessages && savedMessages.length > 0) {
+      this.messages = savedMessages;
+    } else if (this.welcomeMessage) {
+      const welcomeText = this.welcomeSubtitle ? `${this.welcomeMessage}
+
+${this.welcomeSubtitle}` : this.welcomeMessage;
+      this.messages = [{
+        id: "welcome-" + Date.now(),
+        role: "assistant",
+        content: welcomeText
+      }];
     }
   }
   updated(changedProperties) {
     super.updated(changedProperties);
     if (changedProperties.has("messages")) {
       this.scrollToBottom();
+      this.saveMessagesToStorage();
     }
   }
   scrollToBottom() {
-    requestAnimationFrame(() => {
-      this.messagesEndRef?.scrollIntoView({ behavior: "smooth" });
-    });
+    setTimeout(() => {
+      const userMessages = this.shadowRoot?.querySelectorAll(".message.user");
+      if (userMessages && userMessages.length > 0) {
+        const lastUserMessage = userMessages[userMessages.length - 1];
+        lastUserMessage.scrollIntoView({ behavior: "smooth", block: "start" });
+      }
+    }, 100);
   }
   handleInput(e) {
     this.input = e.target.value;
@@ -164,7 +262,6 @@ exports.AIChat = class AIChat extends lit.LitElement {
       const data = await response.json();
       console.log("\u{1F50D} Raw API response:", data);
       let responseText = "No response from agent";
-      let faqs = void 0;
       let suggestedQuestions = void 0;
       if (data && typeof data === "object" && data.response && typeof data.response === "string") {
         console.log("\u{1F4DD} data.response type:", typeof data.response);
@@ -173,18 +270,15 @@ exports.AIChat = class AIChat extends lit.LitElement {
         if (trimmedResponse.startsWith("{") || trimmedResponse.startsWith("[")) {
           console.log("\u{1F504} Detected stringified JSON, parsing...");
           try {
-            let innerData = JSON.parse(data.response);
+            const innerData = JSON.parse(data.response);
             console.log("\u2705 Parsed inner data with JSON.parse");
             if (innerData && innerData.response && typeof innerData.response === "string") {
               responseText = innerData.response;
-              faqs = innerData.faq_used || innerData.faqs_used || void 0;
               suggestedQuestions = innerData.suggested_follow_ups || innerData.suggested_questions || void 0;
               console.log("\u2705 Extracted text length:", responseText.length);
-              console.log("\u2705 Extracted FAQs count:", faqs?.length || 0);
               console.log("\u2705 Extracted suggested questions count:", suggestedQuestions?.length || 0);
             } else {
               responseText = data.response;
-              faqs = data.faq_used || data.faqs_used || void 0;
               suggestedQuestions = data.suggested_follow_ups || data.suggested_questions || void 0;
             }
           } catch (parseError) {
@@ -198,26 +292,6 @@ exports.AIChat = class AIChat extends lit.LitElement {
               console.error("\u274C Could not extract response");
               responseText = "Error: Could not parse response";
             }
-            const faqsPattern = /"(?:faq_used|faqs_used)"\s*:\s*(\[[^\]]*\])/s;
-            const faqsMatch = data.response.match(faqsPattern);
-            if (faqsMatch) {
-              try {
-                faqs = JSON.parse(faqsMatch[1]);
-                console.log("\u2705 Extracted FAQs, count:", faqs?.length || 0);
-              } catch {
-                console.log("\u26A0\uFE0F Could not parse FAQs, trying multiline...");
-                const faqsMultiPattern = /"(?:faq_used|faqs_used)"\s*:\s*(\[[\s\S]*?\n\s*\])/;
-                const faqsMultiMatch = data.response.match(faqsMultiPattern);
-                if (faqsMultiMatch) {
-                  try {
-                    faqs = JSON.parse(faqsMultiMatch[1]);
-                    console.log("\u2705 Extracted multi-line FAQs, count:", faqs?.length || 0);
-                  } catch {
-                    faqs = void 0;
-                  }
-                }
-              }
-            }
             const suggestedPattern = /"(?:suggested_follow_ups|suggested_questions)"\s*:\s*(\[[^\]]*\])/s;
             const suggestedMatch = data.response.match(suggestedPattern);
             if (suggestedMatch) {
@@ -242,7 +316,6 @@ exports.AIChat = class AIChat extends lit.LitElement {
         } else {
           console.log("\u{1F4C4} Direct text response (not JSON)");
           responseText = data.response;
-          faqs = data.faq_used || data.faqs_used || void 0;
           suggestedQuestions = data.suggested_follow_ups || data.suggested_questions || void 0;
         }
       } else if (typeof data === "string") {
@@ -251,18 +324,16 @@ exports.AIChat = class AIChat extends lit.LitElement {
       } else if (data && typeof data === "object") {
         console.warn("\u26A0\uFE0F Unexpected format, using fallback");
         responseText = data.message || data.answer || "Error: Unexpected response format";
-        faqs = data.faq_used || data.faqs_used || void 0;
         suggestedQuestions = data.suggested_follow_ups || data.suggested_questions || void 0;
       }
       console.log("\u{1F3AF} Final responseText length:", responseText.length);
       console.log("\u{1F3AF} Final responseText preview:", responseText.substring(0, 100));
-      console.log("\u{1F3AF} Final FAQs:", faqs);
       console.log("\u{1F3AF} Final suggested questions:", suggestedQuestions);
       const assistantMessage = {
         id: (Date.now() + 1).toString(),
         role: "assistant",
         content: responseText,
-        faqs,
+        // faqs: faqs,  // Commented out - FAQ functionality disabled
         suggestedQuestions
       };
       this.messages = [...this.messages, assistantMessage];
@@ -308,32 +379,21 @@ Please check your API endpoint configuration.`
       <!-- Messages Area -->
       <div class="messages-area" style="--user-message-bg: ${this.userMessageBg}; --bot-message-bg: ${this.botMessageBg}; --primary-color: ${this.primaryColor}; --primary-color-light: ${primaryColorLight}; --primary-color-hover: ${this.primaryColorHover}; ${this.backgroundImageUrl ? `--background-image-url: url('${this.backgroundImageUrl}');` : ""}">
         <div class="messages-container">
-          ${this.messages.length === 0 ? lit.html`
-            <div class="empty-state">
-              <div class="empty-state-avatar">
-                ${this.botAvatarUrl ? lit.html`<img src="${this.botAvatarUrl}" alt="Bot" class="empty-state-avatar-image" />` : lit.html`<svg viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2">
-                      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
-                    </svg>`}
-              </div>
-              <div class="empty-state-content">
-                <p class="empty-state-message">${this.welcomeMessage}</p>
-                ${this.welcomeSubtitle ? lit.html`<p class="empty-state-subtitle">${this.welcomeSubtitle}</p>` : ""}
-              </div>
-            </div>
-          ` : ""}
-
           ${repeat_js.repeat(this.messages, (msg) => msg.id, (msg) => lit.html`
-            <div class=${classMap_js.classMap({
+            <div
+              class=${classMap_js.classMap({
       message: true,
       user: msg.role === "user",
       assistant: msg.role === "assistant"
-    })}>
+    })}
+            >
               <div class="avatar">
                 ${msg.role === "user" ? "U" : this.botAvatarUrl ? lit.html`<img src="${this.botAvatarUrl}" alt="AI" class="avatar-image" />` : "AI"}
               </div>
               <div class="message-content">
                 <div class="message-text">${unsafeHtml_js.unsafeHTML(this.formatMessageContent(msg.content))}</div>
-                ${msg.role === "assistant" && msg.faqs && msg.faqs.length > 0 ? lit.html`
+                <!-- FAQ section - commented out for now -->
+                <!-- ${msg.role === "assistant" && msg.faqs && msg.faqs.length > 0 ? lit.html`
                   <div class="faq-section">
                     <p class="faq-title">Related FAQs:</p>
                     <ul class="faq-list">
@@ -344,7 +404,7 @@ Please check your API endpoint configuration.`
                       `)}
                     </ul>
                   </div>
-                ` : ""}
+                ` : ""} -->
                 ${msg.role === "assistant" && msg.suggestedQuestions && msg.suggestedQuestions.length > 0 ? lit.html`
                   <div class="faq-section">
                     <p class="faq-title">Suggested Questions:</p>
@@ -371,8 +431,6 @@ Please check your API endpoint configuration.`
               </div>
             </div>
           ` : ""}
-
-          <div ${(el) => this.messagesEndRef = el}></div>
         </div>
       </div>
 
@@ -382,7 +440,7 @@ Please check your API endpoint configuration.`
           <input
             type="text"
             class="input-field"
-            placeholder="Type your message..."
+            placeholder="Taip mesej anda..."
             .value=${this.input}
             @input=${this.handleInput}
             ?disabled=${this.isLoading}
@@ -424,7 +482,10 @@ Please check your API endpoint configuration.`
 
           <!-- Toggle Button -->
           <button
-            class="widget-button"
+            class=${classMap_js.classMap({
+        "widget-button": true,
+        "widget-button-no-bg": !this.isOpen && !!this.widgetIconUrl
+      })}
             style="--primary-color: ${this.primaryColor}; --primary-color-light: ${primaryColorLight};"
             @click=${this.toggleWidget}
             aria-label=${this.isOpen ? "Close chat" : "Open chat"}
@@ -434,6 +495,8 @@ Please check your API endpoint configuration.`
                 <line x1="18" y1="6" x2="6" y2="18"></line>
                 <line x1="6" y1="6" x2="18" y2="18"></line>
               </svg>
+            ` : this.widgetIconUrl ? lit.html`
+              <img src="${this.widgetIconUrl}" alt="Chat" class="widget-button-icon" />
             ` : lit.html`
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
@@ -496,12 +559,29 @@ exports.AIChat.styles = lit.css`
       box-shadow: 0 6px 20px rgba(65, 105, 225, 0.4);
     }
 
+    .widget-button-no-bg {
+      background: transparent;
+      box-shadow: none;
+    }
+
+    .widget-button-no-bg:hover {
+      background: transparent;
+      box-shadow: none;
+      transform: scale(1.1);
+    }
+
     .widget-button svg {
       width: 28px;
       height: 28px;
       color: white;
     }
 
+    .widget-button-icon {
+      width: auto;
+      height: auto;
+      object-fit: cover;
+    }
+
     .widget-window {
       position: absolute;
       bottom: 80px;
@@ -963,11 +1043,13 @@ exports.AIChat.styles = lit.css`
       margin: 0.5rem 0;
       padding-left: 1.5rem;
       white-space: normal;
+      list-style-position: outside;
     }
 
     .message-text li {
       margin: 0.25rem 0;
       white-space: normal;
+      display: list-item;
     }
 
     .message-text ul {
@@ -976,6 +1058,12 @@ exports.AIChat.styles = lit.css`
 
     .message-text ol {
       list-style-type: decimal;
+      counter-reset: list-counter;
+    }
+
+    .message-text ol li {
+      display: list-item;
+      list-style-type: decimal;
     }
 
     .faq-section {
@@ -1034,7 +1122,8 @@ exports.AIChat.styles = lit.css`
       border-color: #3f3f46;
     }
 
-    .faq-item-static {
+    /* FAQ static item styles - commented out for now */
+    /* .faq-item-static {
       font-size: 0.875rem;
       color: #6B7280;
       padding: 0;
@@ -1045,7 +1134,7 @@ exports.AIChat.styles = lit.css`
 
     :host([theme="dark"]) .faq-item-static {
       color: #9CA3AF;
-    }
+    } */
 
     .loading {
       display: flex;
@@ -1174,6 +1263,7 @@ exports.AIChat.properties = {
   mode: { type: String, reflect: true },
   initialMessages: { type: Array },
   botAvatarUrl: { type: String, attribute: "bot-avatar-url" },
+  widgetIconUrl: { type: String, attribute: "widget-icon-url" },
   backgroundImageUrl: { type: String, attribute: "background-image-url" },
   widgetWidth: { type: String, attribute: "widget-width" },
   widgetHeight: { type: String, attribute: "widget-height" },