@a.izzuddin/ai-chat 0.2.8 → 0.2.10

package/README.md

@@ -13,7 +13,7 @@ A modern, customizable chat widget built with Lit web components. Features a cle
 - 🎯 **TypeScript Support** - Full type safety
 - 📝 **List Formatting** - Automatic rendering of bulleted and numbered lists
 - 💡 **Suggested Questions** - Clickable follow-up questions for better UX
-- 🔗 **Related FAQs** - Display related FAQ references
+<!-- - 🔗 **Related FAQs** - Display related FAQ references (commented out) -->
 - 👋 **Customizable Welcome Message** - Set custom greeting with optional subtitle
 
 ## Quick Start
@@ -117,21 +117,28 @@ import '@a.izzuddin/ai-chat';
   session-id="user-123"
   title="AI Assistant"
   bot-avatar-url="/path/to/avatar.png"
+  widget-icon-url="/path/to/widget-icon.png"
   background-image-url="/path/to/background.png">
 </ai-chat>
 ```
 
+**Note:** The `widget-icon-url` sets a custom icon for the floating widget button (only applies in widget mode).
+
 #### Custom Welcome Message
+The welcome message appears as the first assistant message in the chat instead of a large empty state.
+
 ```html
 <ai-chat
   api-url="https://api.example.com"
   session-id="user-123"
   title="AI Assistant"
-  welcome-message="Hello! How may I assist you?"
-  welcome-subtitle="Ask me anything about our services">
+  welcome-message="Hai, bagaimana saya boleh bantu?"
+  welcome-subtitle="Sila tanya tentang permohonan atau apa-apa berkaitan MySTI">
 </ai-chat>
 ```
 
+The welcome message and subtitle will be combined and displayed as a regular chat message from the assistant.
+
 ### Dark Mode
 ```html
 <ai-chat
@@ -158,9 +165,10 @@ import '@a.izzuddin/ai-chat';
 | `user-message-bg` | string | '#D6E4FF' | User message background |
 | `bot-message-bg` | string | '#F5F5F5' | Bot message background |
 | `bot-avatar-url` | string | '' | Custom bot avatar image |
+| `widget-icon-url` | string | '' | Custom widget button icon (widget mode only) |
 | `background-image-url` | string | '' | Chat background image |
-| `welcome-message` | string | 'How can I help you today?' | Initial welcome message shown when chat is empty |
-| `welcome-subtitle` | string | '' | Optional subtitle text shown below welcome message |
+| `welcome-message` | string | 'How can I help you today?' | Initial message from assistant (appears as first chat message) |
+| `welcome-subtitle` | string | '' | Optional subtitle added to welcome message |
 
 ## API Integration
 
@@ -178,12 +186,6 @@ Expected response format:
 ```json
 {
   "response": "string",
-  "faq_used": [
-    {
-      "no.": "1",
-      "question": "What is MySTI?"
-    }
-  ],
   "suggested_follow_ups": [
     "What are the main objectives of the program?",
     "How can companies apply?",
@@ -192,13 +194,26 @@ Expected response format:
 }
 ```
 
+<!-- FAQ functionality - commented out for now
+{
+  "response": "string",
+  "faq_used": [
+    {
+      "no.": "1",
+      "question": "What is MySTI?"
+    }
+  ],
+  "suggested_follow_ups": [...]
+}
+-->
+
 **Supported field variations:**
-- `faq_used` or `faqs_used` for related FAQs
+<!-- - `faq_used` or `faqs_used` for related FAQs (commented out) -->
 - `suggested_follow_ups` or `suggested_questions` for clickable follow-up questions
 
 ### Response Behavior
 
-- **Related FAQs** - Displayed as non-clickable text references
+<!-- - **Related FAQs** - Displayed as non-clickable text references (commented out) -->
 - **Suggested Questions** - Displayed as clickable buttons that send the question when clicked
 - **List Formatting** - Messages support automatic list rendering:
   - Unordered lists: Lines starting with `-`, `*`, or `•`

package/custom-elements.json

@@ -221,14 +221,6 @@
             "name": "Message",
             "module": "./components/ai-chat"
           }
-        },
-        {
-          "kind": "js",
-          "name": "FAQ",
-          "declaration": {
-            "name": "FAQ",
-            "module": "./components/ai-chat"
-          }
         }
       ]
     },
@@ -614,6 +606,16 @@
               "default": "''",
               "attribute": "bot-avatar-url"
             },
+            {
+              "kind": "field",
+              "name": "widgetIconUrl",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "widget-icon-url"
+            },
             {
               "kind": "field",
               "name": "backgroundImageUrl",
@@ -741,17 +743,20 @@
               "default": "false"
             },
             {
-              "kind": "field",
-              "name": "messagesEndRef",
-              "type": {
-                "text": "HTMLDivElement | undefined"
-              },
+              "kind": "method",
+              "name": "toggleWidget",
               "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "toggleWidget",
-              "privacy": "private"
+              "name": "clearChat",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Clear all chat messages and reset to welcome message"
             },
             {
               "kind": "method",
@@ -778,6 +783,46 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "getStorageKey",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "saveMessagesToStorage",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "loadMessagesFromStorage",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Message[] | null"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "clearMessagesFromStorage",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "formatMessageContent",
@@ -926,6 +971,14 @@
               "default": "''",
               "fieldName": "botAvatarUrl"
             },
+            {
+              "name": "widget-icon-url",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "widgetIconUrl"
+            },
             {
               "name": "background-image-url",
               "type": {
@@ -1035,7 +1088,7 @@
           "name": "AIChat",
           "parameters": [
             {
-              "name": "{\n  apiUrl,\n  sessionId = \"default-session\",\n  title = \"My AI Agent\",\n  initialMessages = [],\n  className,\n  onMessageSent,\n  onResponseReceived,\n  onError,\n}",
+              "name": "{\r\n  apiUrl,\r\n  sessionId = \"default-session\",\r\n  title = \"My AI Agent\",\r\n  initialMessages = [],\r\n  className,\r\n  onMessageSent,\r\n  onResponseReceived,\r\n  onError,\r\n}",
               "type": {
                 "text": "AIChatProps"
               }

package/dist/index.d.mts

@@ -60,6 +60,7 @@ declare class AIChat extends LitElement {
     mode: 'fullscreen' | 'widget';
     initialMessages: Message[];
     botAvatarUrl: string;
+    widgetIconUrl: string;
     backgroundImageUrl: string;
     widgetWidth: string;
     widgetHeight: string;
@@ -73,7 +74,6 @@ declare class AIChat extends LitElement {
     private input;
     private isLoading;
     private isOpen;
-    private messagesEndRef?;
     static properties: {
         apiUrl: {
             type: StringConstructor;
@@ -101,6 +101,10 @@ declare class AIChat extends LitElement {
             type: StringConstructor;
             attribute: string;
         };
+        widgetIconUrl: {
+            type: StringConstructor;
+            attribute: string;
+        };
         backgroundImageUrl: {
             type: StringConstructor;
             attribute: string;
@@ -140,7 +144,16 @@ declare class AIChat extends LitElement {
     };
     constructor();
     private toggleWidget;
+    /**
+     * Clear all chat messages and reset to welcome message
+     * @public
+     */
+    clearChat(): void;
     private lightenColor;
+    private getStorageKey;
+    private saveMessagesToStorage;
+    private loadMessagesFromStorage;
+    private clearMessagesFromStorage;
     private formatMessageContent;
     connectedCallback(): void;
     updated(changedProperties: PropertyValues): void;
@@ -157,4 +170,4 @@ declare global {
     }
 }
 
-export { AIChat, type FAQ, type Message };
+export { AIChat, type Message };

package/dist/index.d.ts

@@ -60,6 +60,7 @@ declare class AIChat extends LitElement {
     mode: 'fullscreen' | 'widget';
     initialMessages: Message[];
     botAvatarUrl: string;
+    widgetIconUrl: string;
     backgroundImageUrl: string;
     widgetWidth: string;
     widgetHeight: string;
@@ -73,7 +74,6 @@ declare class AIChat extends LitElement {
     private input;
     private isLoading;
     private isOpen;
-    private messagesEndRef?;
     static properties: {
         apiUrl: {
             type: StringConstructor;
@@ -101,6 +101,10 @@ declare class AIChat extends LitElement {
             type: StringConstructor;
             attribute: string;
         };
+        widgetIconUrl: {
+            type: StringConstructor;
+            attribute: string;
+        };
         backgroundImageUrl: {
             type: StringConstructor;
             attribute: string;
@@ -140,7 +144,16 @@ declare class AIChat extends LitElement {
     };
     constructor();
     private toggleWidget;
+    /**
+     * Clear all chat messages and reset to welcome message
+     * @public
+     */
+    clearChat(): void;
     private lightenColor;
+    private getStorageKey;
+    private saveMessagesToStorage;
+    private loadMessagesFromStorage;
+    private clearMessagesFromStorage;
     private formatMessageContent;
     connectedCallback(): void;
     updated(changedProperties: PropertyValues): void;
@@ -157,4 +170,4 @@ declare global {
     }
 }
 
-export { AIChat, type FAQ, type Message };
+export { AIChat, type Message };

package/dist/index.js

@@ -16,7 +16,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";
 exports.AIChat = class AIChat extends lit.LitElement {
   constructor() {
     super();
@@ -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(/([^\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>";
@@ -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;
@@ -173,7 +271,7 @@ 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;
@@ -308,26 +406,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 ? 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>
@@ -371,8 +457,6 @@ Please check your API endpoint configuration.`
               </div>
             </div>
           ` : ""}
-
-          <div ${(el) => this.messagesEndRef = el}></div>
         </div>
       </div>
 
@@ -382,7 +466,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 +508,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 +521,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 +585,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 +1069,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 +1084,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 +1148,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 +1160,7 @@ exports.AIChat.styles = lit.css`
 
     :host([theme="dark"]) .faq-item-static {
       color: #9CA3AF;
-    }
+    } */
 
     .loading {
       display: flex;
@@ -1174,6 +1289,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" },