@a.izzuddin/ai-chat 0.2.6 → 0.2.7

package/README.md

@@ -11,19 +11,27 @@ A modern, customizable chat widget built with Lit web components. Features a cle
 - 🔧 **Easy Integration** - Simple HTML attributes for configuration
 - ⚡ **Built with Lit** - Fast, lightweight web component
 - 🎯 **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
+- 👋 **Customizable Welcome Message** - Set custom greeting with optional subtitle
 
 ## Quick Start
 
 ### Installation
 
 ```bash
-npm install
-npm run dev
+npm install @a.izzuddin/ai-chat
 ```
 
 ### Basic Usage
 
+**HTML:**
 ```html
+<script type="module">
+  import '@a.izzuddin/ai-chat';
+</script>
+
 <ai-chat
   api-url="https://your-api-endpoint.com"
   session-id="user-123"
@@ -31,6 +39,36 @@ npm run dev
 </ai-chat>
 ```
 
+**React:**
+```jsx
+import '@a.izzuddin/ai-chat';
+
+function App() {
+  return (
+    <ai-chat
+      api-url="https://your-api-endpoint.com"
+      session-id="user-123"
+      title="AI Assistant"
+    />
+  );
+}
+```
+
+**Vue:**
+```vue
+<template>
+  <ai-chat
+    api-url="https://your-api-endpoint.com"
+    session-id="user-123"
+    title="AI Assistant">
+  </ai-chat>
+</template>
+
+<script setup>
+import '@a.izzuddin/ai-chat';
+</script>
+```
+
 ## Configuration
 
 ### Display Modes
@@ -83,6 +121,17 @@ npm run dev
 </ai-chat>
 ```
 
+#### Custom Welcome Message
+```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">
+</ai-chat>
+```
+
 ### Dark Mode
 ```html
 <ai-chat
@@ -110,6 +159,8 @@ npm run dev
 | `bot-message-bg` | string | '#F5F5F5' | Bot message background |
 | `bot-avatar-url` | string | '' | Custom bot avatar image |
 | `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 |
 
 ## API Integration
 
@@ -127,15 +178,51 @@ Expected response format:
 ```json
 {
   "response": "string",
-  "faqs_used": [
+  "faq_used": [
     {
       "no.": "1",
-      "question": "Related question?"
+      "question": "What is MySTI?"
     }
+  ],
+  "suggested_follow_ups": [
+    "What are the main objectives of the program?",
+    "How can companies apply?",
+    "Who is eligible for the MySTI logo?"
   ]
 }
 ```
 
+**Supported field variations:**
+- `faq_used` or `faqs_used` for related FAQs
+- `suggested_follow_ups` or `suggested_questions` for clickable follow-up questions
+
+### Response Behavior
+
+- **Related FAQs** - Displayed as non-clickable text references
+- **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 `•`
+  - Ordered lists: Lines starting with `1.`, `2.`, etc.
+
+### List Formatting Example
+
+Your API can return text with lists:
+
+```
+MySTI is a government initiative. Key objectives include:
+
+1. Stimulating local industry growth
+2. Driving technology-based economic growth
+3. Creating job opportunities
+
+Key features:
+- Platform for applicants
+- Database of approved goods
+- Reference for procurement
+```
+
+This will be automatically rendered as proper HTML lists.
+
 ## Events
 
 The component fires custom events you can listen to:

package/custom-elements.json

@@ -684,6 +684,26 @@
               "default": "'#F5F5F5'",
               "attribute": "bot-message-bg"
             },
+            {
+              "kind": "field",
+              "name": "welcomeMessage",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "default": "'How can I help you today?'",
+              "attribute": "welcome-message"
+            },
+            {
+              "kind": "field",
+              "name": "welcomeSubtitle",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "welcome-subtitle"
+            },
             {
               "kind": "field",
               "name": "messages",
@@ -758,6 +778,24 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "formatMessageContent",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "content",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "scrollToBottom",
@@ -943,6 +981,22 @@
               },
               "default": "'#F5F5F5'",
               "fieldName": "botMessageBg"
+            },
+            {
+              "name": "welcome-message",
+              "type": {
+                "text": "string"
+              },
+              "default": "'How can I help you today?'",
+              "fieldName": "welcomeMessage"
+            },
+            {
+              "name": "welcome-subtitle",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "welcomeSubtitle"
             }
           ],
           "superclass": {

package/dist/index.d.mts

@@ -67,6 +67,8 @@ declare class AIChat extends LitElement {
     primaryColorHover: string;
     userMessageBg: string;
     botMessageBg: string;
+    welcomeMessage: string;
+    welcomeSubtitle: string;
     private messages;
     private input;
     private isLoading;
@@ -127,10 +129,19 @@ declare class AIChat extends LitElement {
             type: StringConstructor;
             attribute: string;
         };
+        welcomeMessage: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        welcomeSubtitle: {
+            type: StringConstructor;
+            attribute: string;
+        };
     };
     constructor();
     private toggleWidget;
     private lightenColor;
+    private formatMessageContent;
     connectedCallback(): void;
     updated(changedProperties: PropertyValues): void;
     private scrollToBottom;

package/dist/index.d.ts

@@ -67,6 +67,8 @@ declare class AIChat extends LitElement {
     primaryColorHover: string;
     userMessageBg: string;
     botMessageBg: string;
+    welcomeMessage: string;
+    welcomeSubtitle: string;
     private messages;
     private input;
     private isLoading;
@@ -127,10 +129,19 @@ declare class AIChat extends LitElement {
             type: StringConstructor;
             attribute: string;
         };
+        welcomeMessage: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        welcomeSubtitle: {
+            type: StringConstructor;
+            attribute: string;
+        };
     };
     constructor();
     private toggleWidget;
     private lightenColor;
+    private formatMessageContent;
     connectedCallback(): void;
     updated(changedProperties: PropertyValues): void;
     private scrollToBottom;

package/dist/index.js

@@ -4,6 +4,7 @@ var lit = require('lit');
 var decorators_js = require('lit/decorators.js');
 var repeat_js = require('lit/directives/repeat.js');
 var classMap_js = require('lit/directives/class-map.js');
+var unsafeHtml_js = require('lit/directives/unsafe-html.js');
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -15,7 +16,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-var VERSION = "0.2.6";
+var VERSION = "0.2.7";
 exports.AIChat = class AIChat extends lit.LitElement {
   constructor() {
     super();
@@ -33,6 +34,8 @@ exports.AIChat = class AIChat extends lit.LitElement {
     this.primaryColorHover = "#3457C7";
     this.userMessageBg = "#D6E4FF";
     this.botMessageBg = "#F5F5F5";
+    this.welcomeMessage = "How can I help you today?";
+    this.welcomeSubtitle = "";
     this.messages = [];
     this.input = "";
     this.isLoading = false;
@@ -51,6 +54,57 @@ 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")}`;
   }
+  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");
+    processedContent = processedContent.replace(/(-\s+[^-]+?)(?=\s+-\s+|\s*$)/g, "$1\n");
+    const lines = processedContent.split("\n");
+    let formattedContent = "";
+    let inList = false;
+    let listType = 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+(.+)$/);
+      if (unorderedMatch) {
+        if (!inList || listType !== "ul") {
+          if (inList) formattedContent += listType === "ol" ? "</ol>" : "</ul>";
+          formattedContent += "<ul>";
+          inList = true;
+          listType = "ul";
+        }
+        formattedContent += `<li>${escapeHtml(unorderedMatch[1])}</li>`;
+      } else if (orderedMatch) {
+        if (!inList || listType !== "ol") {
+          if (inList) formattedContent += listType === "ol" ? "</ol>" : "</ul>";
+          formattedContent += "<ol>";
+          inList = true;
+          listType = "ol";
+        }
+        formattedContent += `<li>${escapeHtml(orderedMatch[1])}</li>`;
+      } else {
+        if (inList) {
+          formattedContent += listType === "ol" ? "</ol>" : "</ul>";
+          inList = false;
+          listType = null;
+        }
+        if (trimmedLine === "") {
+          formattedContent += "<br>";
+        } else {
+          formattedContent += escapeHtml(line) + "\n";
+        }
+      }
+    }
+    if (inList) {
+      formattedContent += listType === "ol" ? "</ol>" : "</ul>";
+    }
+    return formattedContent;
+  }
   connectedCallback() {
     super.connectedCallback();
     if (this.initialMessages && this.initialMessages.length > 0) {
@@ -256,7 +310,15 @@ Please check your API endpoint configuration.`
         <div class="messages-container">
           ${this.messages.length === 0 ? lit.html`
             <div class="empty-state">
-              <p>How can I help you today?</p>
+              <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>
           ` : ""}
 
@@ -270,13 +332,13 @@ Please check your API endpoint configuration.`
                 ${msg.role === "user" ? "U" : this.botAvatarUrl ? lit.html`<img src="${this.botAvatarUrl}" alt="AI" class="avatar-image" />` : "AI"}
               </div>
               <div class="message-content">
-                <p class="message-text">${msg.content}</p>
+                <div class="message-text">${unsafeHtml_js.unsafeHTML(this.formatMessageContent(msg.content))}</div>
                 ${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">
                       ${msg.faqs.map((faq) => lit.html`
-                        <li class="faq-item" @click=${() => this.handleFAQClick(faq.question)}>
+                        <li class="faq-item-static">
                           ${faq.question}
                         </li>
                       `)}
@@ -576,7 +638,7 @@ exports.AIChat.styles = lit.css`
 
       .faq-item {
         font-size: 0.8125rem;
-        padding: 0.375rem;
+        padding: 0;
       }
 
       .input-area {
@@ -756,18 +818,74 @@ exports.AIChat.styles = lit.css`
 
     .empty-state {
       text-align: center;
-      color: #9ca3af;
       margin-top: 5rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 1.5rem;
     }
 
     :host([theme="dark"]) .empty-state {
       color: #a1a1aa;
     }
 
-    .empty-state p {
-      font-size: 1.5rem;
-      font-weight: 500;
+    .empty-state-avatar {
+      width: 5rem;
+      height: 5rem;
+      border-radius: 50%;
+      background: #E5E7EB;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+    }
+
+    :host([theme="dark"]) .empty-state-avatar {
+      background: #3f3f46;
+    }
+
+    .empty-state-avatar-image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .empty-state-avatar svg {
+      width: 3rem;
+      height: 3rem;
+      color: #9ca3af;
+    }
+
+    :host([theme="dark"]) .empty-state-avatar svg {
+      color: #6b7280;
+    }
+
+    .empty-state-content {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+
+    .empty-state-message {
+      font-size: 1.25rem;
+      font-weight: 600;
+      margin: 0;
+      color: #374151;
+    }
+
+    :host([theme="dark"]) .empty-state-message {
+      color: #f3f4f6;
+    }
+
+    .empty-state-subtitle {
+      font-size: 0.9375rem;
       margin: 0;
+      color: #6b7280;
+      max-width: 24rem;
+    }
+
+    :host([theme="dark"]) .empty-state-subtitle {
+      color: #9ca3af;
     }
 
     .message {
@@ -837,11 +955,32 @@ exports.AIChat.styles = lit.css`
     .message-text {
       white-space: pre-wrap;
       margin: 0;
+      word-wrap: break-word;
+    }
+
+    .message-text ul,
+    .message-text ol {
+      margin: 0.5rem 0;
+      padding-left: 1.5rem;
+      white-space: normal;
+    }
+
+    .message-text li {
+      margin: 0.25rem 0;
+      white-space: normal;
+    }
+
+    .message-text ul {
+      list-style-type: disc;
+    }
+
+    .message-text ol {
+      list-style-type: decimal;
     }
 
     .faq-section {
-      margin-top: 1rem;
-      padding-top: 1rem;
+      margin-top: 0.75rem;
+      padding-top: 0.75rem;
       border-top: 1px solid #d1d5db;
     }
 
@@ -853,7 +992,7 @@ exports.AIChat.styles = lit.css`
       font-size: 0.875rem;
       font-weight: 600;
       color: var(--primary-color, #3681D3);
-      margin: 0 0 0.5rem 0;
+      margin: 0 0 0.375rem 0;
     }
 
     :host([theme="dark"]) .faq-title {
@@ -866,13 +1005,13 @@ exports.AIChat.styles = lit.css`
       margin: 0;
       display: flex;
       flex-direction: column;
-      gap: 0.5rem;
+      gap: 0.375rem;
     }
 
     .faq-item {
       font-size: 0.875rem;
       color: var(--primary-color, #3681D3);
-      padding: 0.5rem 0.75rem;
+      padding: 0;
       border-radius: 0.5rem;
       cursor: pointer;
       transition: background-color 0.2s, color 0.2s;
@@ -895,6 +1034,19 @@ exports.AIChat.styles = lit.css`
       border-color: #3f3f46;
     }
 
+    .faq-item-static {
+      font-size: 0.875rem;
+      color: #6B7280;
+      padding: 0;
+      border-radius: 0.5rem;
+      cursor: default;
+      border: 1px solid transparent;
+    }
+
+    :host([theme="dark"]) .faq-item-static {
+      color: #9CA3AF;
+    }
+
     .loading {
       display: flex;
       gap: 1rem;
@@ -1028,7 +1180,9 @@ exports.AIChat.properties = {
   primaryColor: { type: String, attribute: "primary-color" },
   primaryColorHover: { type: String, attribute: "primary-color-hover" },
   userMessageBg: { type: String, attribute: "user-message-bg" },
-  botMessageBg: { type: String, attribute: "bot-message-bg" }
+  botMessageBg: { type: String, attribute: "bot-message-bg" },
+  welcomeMessage: { type: String, attribute: "welcome-message" },
+  welcomeSubtitle: { type: String, attribute: "welcome-subtitle" }
 };
 __decorateClass([
   decorators_js.state()