@a.izzuddin/ai-chat 0.2.8 → 0.2.10

package/dist/index.mjs

@@ -14,7 +14,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-var VERSION = "0.2.8";
+var VERSION = "0.2.10";
 var AIChat = class extends LitElement {
   constructor() {
     super();
@@ -25,6 +25,7 @@ var AIChat = class extends LitElement {
     this.mode = "fullscreen";
     this.initialMessages = [];
     this.botAvatarUrl = "";
+    this.widgetIconUrl = "";
     this.backgroundImageUrl = "";
     this.widgetWidth = "380px";
     this.widgetHeight = "600px";
@@ -42,6 +43,25 @@ var AIChat = class extends 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);
@@ -52,23 +72,66 @@ var AIChat = class extends 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(/([^\n])\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>";
@@ -78,22 +141,40 @@ var AIChat = class extends 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";
         }
       }
@@ -105,20 +186,37 @@ var AIChat = class extends 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;
@@ -171,7 +269,7 @@ var AIChat = class extends 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;
@@ -306,26 +404,14 @@ 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 ? html`
-            <div class="empty-state">
-              <div class="empty-state-avatar">
-                ${this.botAvatarUrl ? html`<img src="${this.botAvatarUrl}" alt="Bot" class="empty-state-avatar-image" />` : 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 ? html`<p class="empty-state-subtitle">${this.welcomeSubtitle}</p>` : ""}
-              </div>
-            </div>
-          ` : ""}
-
           ${repeat(this.messages, (msg) => msg.id, (msg) => html`
-            <div class=${classMap({
+            <div
+              class=${classMap({
       message: true,
       user: msg.role === "user",
       assistant: msg.role === "assistant"
-    })}>
+    })}
+            >
               <div class="avatar">
                 ${msg.role === "user" ? "U" : this.botAvatarUrl ? html`<img src="${this.botAvatarUrl}" alt="AI" class="avatar-image" />` : "AI"}
               </div>
@@ -369,8 +455,6 @@ Please check your API endpoint configuration.`
               </div>
             </div>
           ` : ""}
-
-          <div ${(el) => this.messagesEndRef = el}></div>
         </div>
       </div>
 
@@ -380,7 +464,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}
@@ -422,7 +506,10 @@ Please check your API endpoint configuration.`
 
           <!-- Toggle Button -->
           <button
-            class="widget-button"
+            class=${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"}
@@ -432,6 +519,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 ? html`
+              <img src="${this.widgetIconUrl}" alt="Chat" class="widget-button-icon" />
             ` : 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>
@@ -494,12 +583,29 @@ AIChat.styles = 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;
@@ -961,11 +1067,13 @@ AIChat.styles = 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 {
@@ -974,6 +1082,12 @@ AIChat.styles = 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 {
@@ -1032,7 +1146,8 @@ AIChat.styles = 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;
@@ -1043,7 +1158,7 @@ AIChat.styles = css`
 
     :host([theme="dark"]) .faq-item-static {
       color: #9CA3AF;
-    }
+    } */
 
     .loading {
       display: flex;
@@ -1172,6 +1287,7 @@ 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" },