@a.izzuddin/ai-chat 0.2.4 → 0.2.7

package/dist/index.mjs

@@ -2,6 +2,7 @@ import { css, LitElement, html } from 'lit';
 import { state, customElement } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -13,7 +14,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-var VERSION = "0.2.4";
+var VERSION = "0.2.7";
 var AIChat = class extends LitElement {
   constructor() {
     super();
@@ -25,6 +26,14 @@ var AIChat = class extends LitElement {
     this.initialMessages = [];
     this.botAvatarUrl = "";
     this.backgroundImageUrl = "";
+    this.widgetWidth = "380px";
+    this.widgetHeight = "600px";
+    this.primaryColor = "#3681D3";
+    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;
@@ -33,6 +42,67 @@ var AIChat = class extends LitElement {
   toggleWidget() {
     this.isOpen = !this.isOpen;
   }
+  lightenColor(hex, percent = 15) {
+    hex = hex.replace("#", "");
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+    const newR = Math.min(255, Math.round(r + (255 - r) * (percent / 100)));
+    const newG = Math.min(255, Math.round(g + (255 - g) * (percent / 100)));
+    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) {
@@ -93,6 +163,7 @@ var AIChat = class extends LitElement {
       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);
         console.log("\u{1F4DD} data.response preview:", data.response.substring(0, 100));
@@ -104,12 +175,15 @@ var AIChat = class extends LitElement {
             console.log("\u2705 Parsed inner data with JSON.parse");
             if (innerData && innerData.response && typeof innerData.response === "string") {
               responseText = innerData.response;
-              faqs = innerData.faqs_used || void 0;
+              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.faqs_used || void 0;
+              faqs = data.faq_used || data.faqs_used || void 0;
+              suggestedQuestions = data.suggested_follow_ups || data.suggested_questions || void 0;
             }
           } catch (parseError) {
             console.warn("\u26A0\uFE0F JSON.parse failed, using regex extraction...", parseError);
@@ -122,7 +196,7 @@ var AIChat = class extends LitElement {
               console.error("\u274C Could not extract response");
               responseText = "Error: Could not parse response";
             }
-            const faqsPattern = /"faqs_used"\s*:\s*(\[[^\]]*\])/s;
+            const faqsPattern = /"(?:faq_used|faqs_used)"\s*:\s*(\[[^\]]*\])/s;
             const faqsMatch = data.response.match(faqsPattern);
             if (faqsMatch) {
               try {
@@ -130,7 +204,7 @@ var AIChat = class extends LitElement {
                 console.log("\u2705 Extracted FAQs, count:", faqs?.length || 0);
               } catch {
                 console.log("\u26A0\uFE0F Could not parse FAQs, trying multiline...");
-                const faqsMultiPattern = /"faqs_used"\s*:\s*(\[[\s\S]*?\n\s*\])/;
+                const faqsMultiPattern = /"(?:faq_used|faqs_used)"\s*:\s*(\[[\s\S]*?\n\s*\])/;
                 const faqsMultiMatch = data.response.match(faqsMultiPattern);
                 if (faqsMultiMatch) {
                   try {
@@ -142,11 +216,32 @@ var AIChat = class extends LitElement {
                 }
               }
             }
+            const suggestedPattern = /"(?:suggested_follow_ups|suggested_questions)"\s*:\s*(\[[^\]]*\])/s;
+            const suggestedMatch = data.response.match(suggestedPattern);
+            if (suggestedMatch) {
+              try {
+                suggestedQuestions = JSON.parse(suggestedMatch[1]);
+                console.log("\u2705 Extracted suggested questions, count:", suggestedQuestions?.length || 0);
+              } catch {
+                console.log("\u26A0\uFE0F Could not parse suggested questions, trying multiline...");
+                const suggestedMultiPattern = /"(?:suggested_follow_ups|suggested_questions)"\s*:\s*(\[[\s\S]*?\n\s*\])/;
+                const suggestedMultiMatch = data.response.match(suggestedMultiPattern);
+                if (suggestedMultiMatch) {
+                  try {
+                    suggestedQuestions = JSON.parse(suggestedMultiMatch[1]);
+                    console.log("\u2705 Extracted multi-line suggested questions, count:", suggestedQuestions?.length || 0);
+                  } catch {
+                    suggestedQuestions = void 0;
+                  }
+                }
+              }
+            }
           }
         } else {
           console.log("\u{1F4C4} Direct text response (not JSON)");
           responseText = data.response;
-          faqs = data.faqs_used || void 0;
+          faqs = data.faq_used || data.faqs_used || void 0;
+          suggestedQuestions = data.suggested_follow_ups || data.suggested_questions || void 0;
         }
       } else if (typeof data === "string") {
         console.log("\u{1F4C4} Response is a plain string");
@@ -154,15 +249,19 @@ var AIChat = class extends 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,
+        suggestedQuestions
       };
       this.messages = [...this.messages, assistantMessage];
       this.dispatchEvent(new CustomEvent("response-received", {
@@ -190,20 +289,34 @@ Please check your API endpoint configuration.`
     }
   }
   renderChatUI() {
+    const primaryColorLight = this.lightenColor(this.primaryColor, 15);
     return html`
       <!-- Header -->
-      <div class="header">
+      <div class="header" style="--primary-color: ${this.primaryColor}; --primary-color-light: ${primaryColorLight}; --primary-color-hover: ${this.primaryColorHover};">
         <div class="header-content">
+          <div class="header-avatar">
+            ${this.botAvatarUrl ? html`<img src="${this.botAvatarUrl}" alt="Bot" class="header-avatar-image" />` : html`<svg viewBox="0 0 24 24" fill="none" stroke="${this.primaryColor}" stroke-width="2" style="width: 1.5rem; height: 1.5rem;">
+                  <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>
           <h1 class="title">${this.chatTitle}</h1>
         </div>
       </div>
 
       <!-- Messages Area -->
-      <div class="messages-area" style="${this.backgroundImageUrl ? `--background-image-url: url('${this.backgroundImageUrl}')` : ""}">
+      <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">
-              <p>How can I help you today?</p>
+              <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>
           ` : ""}
 
@@ -217,19 +330,31 @@ Please check your API endpoint configuration.`
                 ${msg.role === "user" ? "U" : this.botAvatarUrl ? 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(this.formatMessageContent(msg.content))}</div>
                 ${msg.role === "assistant" && msg.faqs && msg.faqs.length > 0 ? html`
                   <div class="faq-section">
                     <p class="faq-title">Related FAQs:</p>
                     <ul class="faq-list">
                       ${msg.faqs.map((faq) => html`
-                        <li class="faq-item" @click=${() => this.handleFAQClick(faq.question)}>
+                        <li class="faq-item-static">
                           ${faq.question}
                         </li>
                       `)}
                     </ul>
                   </div>
                 ` : ""}
+                ${msg.role === "assistant" && msg.suggestedQuestions && msg.suggestedQuestions.length > 0 ? html`
+                  <div class="faq-section">
+                    <p class="faq-title">Suggested Questions:</p>
+                    <ul class="faq-list">
+                      ${msg.suggestedQuestions.map((question) => html`
+                        <li class="faq-item" @click=${() => this.handleFAQClick(question)}>
+                          ${question}
+                        </li>
+                      `)}
+                    </ul>
+                  </div>
+                ` : ""}
               </div>
             </div>
           `)}
@@ -250,7 +375,7 @@ Please check your API endpoint configuration.`
       </div>
 
       <!-- Input Area -->
-      <div class="input-area">
+      <div class="input-area" style="--primary-color: ${this.primaryColor}; --primary-color-hover: ${this.primaryColorHover};">
         <form class="input-form" @submit=${this.handleSubmit}>
           <input
             type="text"
@@ -283,17 +408,22 @@ Please check your API endpoint configuration.`
     `;
   }
   render() {
+    const primaryColorLight = this.lightenColor(this.primaryColor, 15);
     if (this.mode === "widget") {
       return html`
         <div class="widget-container">
           <!-- Chat Window -->
-          <div class=${classMap({ "widget-window": true, "open": this.isOpen })}>
+          <div
+            class=${classMap({ "widget-window": true, "open": this.isOpen })}
+            style="--widget-width: ${this.widgetWidth}; --widget-height: ${this.widgetHeight};"
+          >
             ${this.renderChatUI()}
           </div>
 
           <!-- Toggle Button -->
           <button
             class="widget-button"
+            style="--primary-color: ${this.primaryColor}; --primary-color-light: ${primaryColorLight};"
             @click=${this.toggleWidget}
             aria-label=${this.isOpen ? "Close chat" : "Open chat"}
           >
@@ -325,7 +455,7 @@ AIChat.styles = css`
       display: flex;
       flex-direction: column;
       height: 100vh;
-      background: #fafafa;
+      background: #ffffff;
     }
 
     :host([mode="fullscreen"][theme="dark"]) {
@@ -349,19 +479,19 @@ AIChat.styles = css`
       width: 60px;
       height: 60px;
       border-radius: 50%;
-      background: #2563eb;
+      background: #3681D3;
       border: none;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      box-shadow: 0 4px 16px rgba(65, 105, 225, 0.3);
       transition: transform 0.2s, box-shadow 0.2s;
     }
 
     .widget-button:hover {
       transform: scale(1.05);
-      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+      box-shadow: 0 6px 20px rgba(65, 105, 225, 0.4);
     }
 
     .widget-button svg {
@@ -374,11 +504,11 @@ AIChat.styles = css`
       position: absolute;
       bottom: 80px;
       right: 0;
-      width: 380px;
-      height: 600px;
+      width: var(--widget-width, 380px);
+      height: var(--widget-height, 600px);
       background: #fff;
-      border-radius: 12px;
-      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+      border-radius: 16px;
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
       display: flex;
       flex-direction: column;
       overflow: hidden;
@@ -399,35 +529,251 @@ AIChat.styles = css`
       color: #fafafa;
     }
 
-    @media (max-width: 480px) {
+    /* Tablet breakpoint */
+    @media (max-width: 1024px) and (min-width: 769px) {
+      .widget-window {
+        width: var(--widget-width, 400px);
+        height: var(--widget-height, 650px);
+      }
+    }
+
+    /* Small tablet breakpoint */
+    @media (max-width: 768px) and (min-width: 481px) {
+      .widget-window {
+        width: var(--widget-width, 360px);
+        height: var(--widget-height, 550px);
+      }
+    }
+
+    /* Mobile portrait */
+    @media (max-width: 480px) and (orientation: portrait) {
       .widget-window {
         width: calc(100vw - 40px);
+        height: 70vh;
+        bottom: 80px;
+        right: 0;
+      }
+
+      .widget-button {
+        width: 56px;
+        height: 56px;
+      }
+
+      .widget-button svg {
+        width: 24px;
+        height: 24px;
+      }
+    }
+
+    /* Mobile landscape */
+    @media (max-width: 900px) and (orientation: landscape) {
+      .widget-window {
+        width: var(--widget-width, 500px);
         height: calc(100vh - 100px);
         bottom: 80px;
         right: 0;
       }
+
+      .widget-button {
+        width: 56px;
+        height: 56px;
+      }
+
+      .widget-button svg {
+        width: 24px;
+        height: 24px;
+      }
+    }
+
+    /* Mobile responsive styles for all modes */
+    @media (max-width: 768px) {
+      .header {
+        padding: 0.875rem 1rem;
+      }
+
+      .header-avatar {
+        width: 2.25rem;
+        height: 2.25rem;
+      }
+
+      .title {
+        font-size: 1.125rem;
+      }
+
+      .messages-area {
+        padding: 1rem 0.75rem;
+      }
+
+      .message {
+        gap: 0.75rem;
+      }
+
+      .avatar {
+        width: 2rem;
+        height: 2rem;
+        font-size: 0.75rem;
+      }
+
+      .message-content {
+        max-width: 100%;
+        padding: 0.625rem 0.875rem;
+        font-size: 0.9375rem;
+      }
+
+      .empty-state {
+        margin-top: 3rem;
+      }
+
+      .empty-state p {
+        font-size: 1.25rem;
+        padding: 0 1rem;
+      }
+
+      .faq-section {
+        margin-top: 0.75rem;
+        padding-top: 0.75rem;
+      }
+
+      .faq-item {
+        font-size: 0.8125rem;
+        padding: 0;
+      }
+
+      .input-area {
+        padding: 0.75rem;
+      }
+
+      .input-form {
+        gap: 0.5rem;
+      }
+
+      .input-field {
+        height: 2.75rem;
+        padding: 0 0.875rem;
+        font-size: 0.9375rem;
+      }
+
+      .send-button {
+        width: 2.75rem;
+        height: 2.75rem;
+        flex-shrink: 0;
+      }
+
+      .send-icon {
+        width: 1.125rem;
+        height: 1.125rem;
+      }
+    }
+
+    /* Extra small screens */
+    @media (max-width: 480px) {
+      .header {
+        padding: 0.75rem 0.875rem;
+      }
+
+      .header-avatar {
+        width: 2rem;
+        height: 2rem;
+      }
+
+      .title {
+        font-size: 1rem;
+      }
+
+      .messages-area {
+        padding: 0.75rem 0.5rem;
+      }
+
+      .message {
+        gap: 0.5rem;
+      }
+
+      .avatar {
+        width: 1.75rem;
+        height: 1.75rem;
+        font-size: 0.7rem;
+      }
+
+      .message-content {
+        padding: 0.5rem 0.75rem;
+        font-size: 0.875rem;
+        border-radius: 0.75rem;
+      }
+
+      .empty-state {
+        margin-top: 2rem;
+      }
+
+      .empty-state p {
+        font-size: 1.125rem;
+      }
+
+      .input-area {
+        padding: 0.625rem;
+      }
+
+      .input-field {
+        height: 2.5rem;
+        padding: 0 0.75rem;
+        font-size: 0.875rem;
+      }
+
+      .send-button {
+        width: 2.5rem;
+        height: 2.5rem;
+      }
+
+      .version-tag {
+        font-size: 0.7rem;
+        padding: 0.375rem;
+      }
     }
 
     .header {
-      border-bottom: 1px solid #e4e4e7;
-      background: #fff;
-      padding: 1rem;
+      background:#3681D3;
+      padding: 1rem 1.25rem;
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      box-shadow: 0 2px 8px rgba(65, 105, 225, 0.2);
     }
 
     :host([theme="dark"]) .header {
-      border-bottom-color: #27272a;
-      background: #18181b;
+      background: #3681D3
     }
 
     .header-content {
       max-width: 56rem;
       margin: 0 auto;
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      width: 100%;
+    }
+
+    .header-avatar {
+      width: 2.5rem;
+      height: 2.5rem;
+      border-radius: 50%;
+      background: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      flex-shrink: 0;
+    }
+
+    .header-avatar-image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
     }
 
     .title {
       font-size: 1.25rem;
       font-weight: 600;
       margin: 0;
+      color: #fff;
     }
 
     .messages-area {
@@ -435,6 +781,11 @@ AIChat.styles = css`
       overflow-y: auto;
       padding: 1.5rem 1rem;
       position: relative;
+      background: #ffffff;
+    }
+
+    :host([theme="dark"]) .messages-area {
+      background: #000;
     }
 
     .messages-area::before {
@@ -448,7 +799,7 @@ AIChat.styles = css`
       background-size: 200px auto 60%;
       background-position: center center;
       background-repeat: no-repeat;
-      opacity: 0.5;
+      opacity: 0.03;
       pointer-events: none;
       z-index: 0;
     }
@@ -465,18 +816,74 @@ AIChat.styles = css`
 
     .empty-state {
       text-align: center;
-      color: #71717a;
       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 {
@@ -492,18 +899,20 @@ AIChat.styles = css`
       width: 2.5rem;
       height: 2.5rem;
       border-radius: 9999px;
-      background: #e4e4e7;
+      background: #E5E7EB;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
-      font-weight: 500;
+      font-weight: 600;
       font-size: 0.875rem;
       overflow: hidden;
+      color: #6B7280;
     }
 
     :host([theme="dark"]) .avatar {
       background: #3f3f46;
+      color: #9ca3af;
     }
 
     .avatar-image {
@@ -514,36 +923,63 @@ AIChat.styles = css`
 
     .message-content {
       max-width: 36rem;
-      padding: 0.75rem 1rem;
-      border-radius: 1rem;
+      padding: 0.875rem 1.125rem;
+      border-radius: 1.25rem;
+      line-height: 1.6;
     }
 
     .message.user .message-content {
-      background: #2563eb;
-      color: #fff;
+      background: var(--user-message-bg, #D6E4FF);
+      color: #1a1a1a;
+      border-radius: 1.25rem 1.25rem 0.25rem 1.25rem;
     }
 
     .message.assistant .message-content {
-      background: #fff;
-      border: 1px solid #e4e4e7;
-      color: #09090b;
+      background: var(--bot-message-bg, #F5F5F5);
+      color: #1a1a1a;
+      border-radius: 1.25rem 1.25rem 1.25rem 0.25rem;
+    }
+
+    :host([theme="dark"]) .message.user .message-content {
+      background: #3D5A99;
+      color: #fff;
     }
 
     :host([theme="dark"]) .message.assistant .message-content {
       background: #27272a;
-      border-color: #3f3f46;
       color: #fafafa;
     }
 
     .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;
-      border-top: 1px solid #e4e4e7;
+      margin-top: 0.75rem;
+      padding-top: 0.75rem;
+      border-top: 1px solid #d1d5db;
     }
 
     :host([theme="dark"]) .faq-section {
@@ -552,13 +988,13 @@ AIChat.styles = css`
 
     .faq-title {
       font-size: 0.875rem;
-      font-weight: 500;
-      color: #3f3f46;
-      margin: 0 0 0.5rem 0;
+      font-weight: 600;
+      color: var(--primary-color, #3681D3);
+      margin: 0 0 0.375rem 0;
     }
 
     :host([theme="dark"]) .faq-title {
-      color: #d4d4d8;
+      color: var(--primary-color-light, #5B7FE8);
     }
 
     .faq-list {
@@ -567,30 +1003,46 @@ AIChat.styles = css`
       margin: 0;
       display: flex;
       flex-direction: column;
-      gap: 0.5rem;
+      gap: 0.375rem;
     }
 
     .faq-item {
       font-size: 0.875rem;
-      color: #52525b;
-      padding: 0.5rem;
-      border-radius: 0.375rem;
+      color: var(--primary-color, #3681D3);
+      padding: 0;
+      border-radius: 0.5rem;
       cursor: pointer;
       transition: background-color 0.2s, color 0.2s;
+      border: 1px solid transparent;
     }
 
     .faq-item:hover {
-      background-color: #f4f4f5;
-      color: #18181b;
+      background-color: #EEF2FF;
+      color: var(--primary-color-hover, #3457C7);
+      border-color: #C7D2FE;
     }
 
     :host([theme="dark"]) .faq-item {
-      color: #a1a1aa;
+      color: var(--primary-color-light, #5B7FE8);
     }
 
     :host([theme="dark"]) .faq-item:hover {
-      background-color: #27272a;
-      color: #fafafa;
+      background-color: #1e293b;
+      color: #93C5FD;
+      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 {
@@ -613,14 +1065,14 @@ AIChat.styles = css`
     }
 
     .input-area {
-      border-top: 1px solid #e4e4e7;
+      border-top: 1px solid #e5e7eb;
       background: #fff;
-      padding: 1rem;
+      padding: 1rem 1.25rem;
     }
 
     :host([theme="dark"]) .input-area {
       border-top-color: #27272a;
-      background: #000;
+      background: #18181b;
     }
 
     .input-form {
@@ -628,18 +1080,24 @@ AIChat.styles = css`
       margin: 0 auto;
       display: flex;
       gap: 0.75rem;
+      align-items: center;
     }
 
     .input-field {
       flex: 1;
       height: 3rem;
       padding: 0 1rem;
-      border: 1px solid #e4e4e7;
-      border-radius: 0.5rem;
-      font-size: 1rem;
+      border: 1px solid #d1d5db;
+      border-radius: 1.5rem;
+      font-size: 0.9375rem;
       font-family: inherit;
       background: #fff;
-      color: #09090b;
+      color: #374151;
+      transition: border-color 0.2s, box-shadow 0.2s;
+    }
+
+    .input-field::placeholder {
+      color: #9ca3af;
     }
 
     :host([theme="dark"]) .input-field {
@@ -649,8 +1107,9 @@ AIChat.styles = css`
     }
 
     .input-field:focus {
-      outline: 2px solid #2563eb;
-      outline-offset: 2px;
+      outline: none;
+      border-color: var(--primary-color, #3681D3);
+      box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.1);
     }
 
     .input-field:disabled {
@@ -663,17 +1122,23 @@ AIChat.styles = css`
       height: 3rem;
       border-radius: 9999px;
       border: none;
-      background: #2563eb;
+      background: var(--primary-color, #3681D3);
       color: #fff;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
-      transition: background 0.2s;
+      transition: background 0.2s, transform 0.1s;
+      flex-shrink: 0;
     }
 
     .send-button:hover:not(:disabled) {
-      background: #1d4ed8;
+      background: var(--primary-color-hover, #3457C7);
+      transform: scale(1.05);
+    }
+
+    .send-button:active:not(:disabled) {
+      transform: scale(0.95);
     }
 
     .send-button:disabled {
@@ -690,12 +1155,12 @@ AIChat.styles = css`
       text-align: center;
       padding: 0.5rem;
       font-size: 0.75rem;
-      color: #71717a;
-      border-top: 1px solid #e4e4e7;
+      color: #9ca3af;
+      border-top: 1px solid #e5e7eb;
     }
 
     :host([theme="dark"]) .version-tag {
-      color: #a1a1aa;
+      color: #6b7280;
       border-top-color: #27272a;
     }
   `;
@@ -707,7 +1172,15 @@ AIChat.properties = {
   mode: { type: String, reflect: true },
   initialMessages: { type: Array },
   botAvatarUrl: { type: String, attribute: "bot-avatar-url" },
-  backgroundImageUrl: { type: String, attribute: "background-image-url" }
+  backgroundImageUrl: { type: String, attribute: "background-image-url" },
+  widgetWidth: { type: String, attribute: "widget-width" },
+  widgetHeight: { type: String, attribute: "widget-height" },
+  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" },
+  welcomeMessage: { type: String, attribute: "welcome-message" },
+  welcomeSubtitle: { type: String, attribute: "welcome-subtitle" }
 };
 __decorateClass([
   state()