@a.izzuddin/ai-chat 0.2.1 → 0.2.3

package/README.md

@@ -274,7 +274,7 @@ Contributions are welcome! Please read our [contributing guidelines](CONTRIBUTIN
 
 ## 📄 License
 
-MIT © [Your Name]
+MIT © a.izzuddin
 
 ## 🔗 Links
 

package/custom-elements.json

@@ -69,36 +69,14 @@
     {
       "kind": "javascript-module",
       "path": "dist/index.js",
-      "declarations": [],
-      "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "lib/utils.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "cn",
-          "parameters": [
-            {
-              "name": "inputs",
-              "type": {
-                "text": "ClassValue[]"
-              }
-            }
-          ]
+          "kind": "variable",
+          "name": "faqs",
+          "default": "void 0"
         }
       ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "cn",
-          "declaration": {
-            "name": "cn",
-            "module": "lib/utils.ts"
-          }
-        }
-      ]
+      "exports": []
     },
     {
       "kind": "javascript-module",
@@ -190,6 +168,34 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "lib/utils.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "cn",
+          "parameters": [
+            {
+              "name": "inputs",
+              "type": {
+                "text": "ClassValue[]"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "cn",
+          "declaration": {
+            "name": "cn",
+            "module": "lib/utils.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/index.ts",
@@ -213,6 +219,12 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "tests/chat.spec.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "tests/web-component.spec.ts",
@@ -616,6 +628,19 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "handleFAQClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "question",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "handleSubmit",

package/dist/index.d.mts

@@ -2,10 +2,15 @@ import * as lit_html from 'lit-html';
 import * as lit from 'lit';
 import { LitElement, PropertyValues } from 'lit';
 
+interface FAQ {
+    "no.": string;
+    question: string;
+}
 interface Message {
     id: string;
     role: 'user' | 'assistant';
     content: string;
+    faqs?: FAQ[];
 }
 /**
  * AI Chat Web Component
@@ -66,6 +71,7 @@ declare class AIChat extends LitElement {
     updated(changedProperties: PropertyValues): void;
     private scrollToBottom;
     private handleInput;
+    private handleFAQClick;
     private handleSubmit;
     private renderChatUI;
     render(): lit_html.TemplateResult<1>;

package/dist/index.d.ts

@@ -2,10 +2,15 @@ import * as lit_html from 'lit-html';
 import * as lit from 'lit';
 import { LitElement, PropertyValues } from 'lit';
 
+interface FAQ {
+    "no.": string;
+    question: string;
+}
 interface Message {
     id: string;
     role: 'user' | 'assistant';
     content: string;
+    faqs?: FAQ[];
 }
 /**
  * AI Chat Web Component
@@ -66,6 +71,7 @@ declare class AIChat extends LitElement {
     updated(changedProperties: PropertyValues): void;
     private scrollToBottom;
     private handleInput;
+    private handleFAQClick;
     private handleSubmit;
     private renderChatUI;
     render(): lit_html.TemplateResult<1>;

package/dist/index.js

@@ -15,7 +15,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-var VERSION = "0.2.1";
+var VERSION = "0.2.2";
 exports.AIChat = class AIChat extends lit.LitElement {
   constructor() {
     super();
@@ -53,6 +53,12 @@ exports.AIChat = class AIChat extends lit.LitElement {
   handleInput(e) {
     this.input = e.target.value;
   }
+  handleFAQClick(question) {
+    if (this.isLoading) return;
+    this.input = question;
+    const submitEvent = new Event("submit", { cancelable: true });
+    this.handleSubmit(submitEvent);
+  }
   async handleSubmit(e) {
     e.preventDefault();
     if (!this.input.trim() || this.isLoading || !this.apiUrl) return;
@@ -84,10 +90,79 @@ exports.AIChat = class AIChat extends lit.LitElement {
         throw new Error(`Backend error: ${response.status} ${errorText}`);
       }
       const data = await response.json();
+      console.log("\u{1F50D} Raw API response:", data);
+      let responseText = "No response from agent";
+      let faqs = 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));
+        const trimmedResponse = data.response.trim();
+        if (trimmedResponse.startsWith("{") || trimmedResponse.startsWith("[")) {
+          console.log("\u{1F504} Detected stringified JSON, parsing...");
+          try {
+            let 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.faqs_used || void 0;
+              console.log("\u2705 Extracted text length:", responseText.length);
+              console.log("\u2705 Extracted FAQs count:", faqs?.length || 0);
+            } else {
+              responseText = data.response;
+              faqs = data.faqs_used || void 0;
+            }
+          } catch (parseError) {
+            console.warn("\u26A0\uFE0F JSON.parse failed, using regex extraction...", parseError);
+            const responsePattern = /"response"\s*:\s*"([^"]*(?:\\.[^"]*)*)"/s;
+            const responseMatch = data.response.match(responsePattern);
+            if (responseMatch) {
+              responseText = responseMatch[1].replace(/\\n/g, "\n").replace(/\\t/g, "	").replace(/\\r/g, "\r").replace(/\\"/g, '"').replace(/\\\\/g, "\\");
+              console.log("\u2705 Extracted response text, length:", responseText.length);
+            } else {
+              console.error("\u274C Could not extract response");
+              responseText = "Error: Could not parse response";
+            }
+            const faqsPattern = /"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 = /"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;
+                  }
+                }
+              }
+            }
+          }
+        } else {
+          console.log("\u{1F4C4} Direct text response (not JSON)");
+          responseText = data.response;
+          faqs = data.faqs_used || void 0;
+        }
+      } else if (typeof data === "string") {
+        console.log("\u{1F4C4} Response is a plain string");
+        responseText = data;
+      } else if (data && typeof data === "object") {
+        console.warn("\u26A0\uFE0F Unexpected format, using fallback");
+        responseText = data.message || data.answer || "Error: Unexpected response format";
+      }
+      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);
       const assistantMessage = {
         id: (Date.now() + 1).toString(),
         role: "assistant",
-        content: data.response || "No response from agent"
+        content: responseText,
+        faqs
       };
       this.messages = [...this.messages, assistantMessage];
       this.dispatchEvent(new CustomEvent("response-received", {
@@ -100,7 +175,7 @@ exports.AIChat = class AIChat extends lit.LitElement {
       const errorMessage = {
         id: (Date.now() + 1).toString(),
         role: "assistant",
-        content: `Error: ${err.message}
+        content: `Error: ${err instanceof Error ? err.message : "Unknown error"}
 
 Please check your API endpoint configuration.`
       };
@@ -143,6 +218,18 @@ Please check your API endpoint configuration.`
               </div>
               <div class="message-content">
                 <p class="message-text">${msg.content}</p>
+                ${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)}>
+                          ${faq.question}
+                        </li>
+                      `)}
+                    </ul>
+                  </div>
+                ` : ""}
               </div>
             </div>
           `)}
@@ -425,6 +512,59 @@ exports.AIChat.styles = lit.css`
       margin: 0;
     }
 
+    .faq-section {
+      margin-top: 1rem;
+      padding-top: 1rem;
+      border-top: 1px solid #e4e4e7;
+    }
+
+    :host([theme="dark"]) .faq-section {
+      border-top-color: #3f3f46;
+    }
+
+    .faq-title {
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: #3f3f46;
+      margin: 0 0 0.5rem 0;
+    }
+
+    :host([theme="dark"]) .faq-title {
+      color: #d4d4d8;
+    }
+
+    .faq-list {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+
+    .faq-item {
+      font-size: 0.875rem;
+      color: #52525b;
+      padding: 0.5rem;
+      border-radius: 0.375rem;
+      cursor: pointer;
+      transition: background-color 0.2s, color 0.2s;
+    }
+
+    .faq-item:hover {
+      background-color: #f4f4f5;
+      color: #18181b;
+    }
+
+    :host([theme="dark"]) .faq-item {
+      color: #a1a1aa;
+    }
+
+    :host([theme="dark"]) .faq-item:hover {
+      background-color: #27272a;
+      color: #fafafa;
+    }
+
     .loading {
       display: flex;
       gap: 1rem;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ai-chat.ts"],"names":["AIChat","LitElement","html","repeat","classMap","css","state","customElement"],"mappings":"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","file":"index.js","sourcesContent":["import { LitElement, html, css, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nconst VERSION = '0.2.1';\n\nexport interface Message {\n  id: string;\n  role: 'user' | 'assistant';\n  content: string;\n}\n\n/**\n * AI Chat Web Component\n *\n * @fires message-sent - Fired when user sends a message\n * @fires response-received - Fired when AI responds\n * @fires error - Fired when an error occurs\n *\n * @example\n * ```html\n * <ai-chat\n *   api-url=\"https://api.example.com\"\n *   session-id=\"user-123\"\n *   title=\"My AI Assistant\">\n * </ai-chat>\n * ```\n */\n@customElement('ai-chat')\nexport class AIChat extends LitElement {\n  static styles = css`\n    :host {\n      font-family: system-ui, -apple-system, sans-serif;\n      color: #09090b;\n    }\n\n    /* Fullscreen mode (default) */\n    :host([mode=\"fullscreen\"]) {\n      display: flex;\n      flex-direction: column;\n      height: 100vh;\n      background: #fafafa;\n    }\n\n    :host([mode=\"fullscreen\"][theme=\"dark\"]) {\n      background: #000;\n      color: #fafafa;\n    }\n\n    /* Widget mode */\n    :host([mode=\"widget\"]) {\n      position: fixed;\n      bottom: 20px;\n      right: 20px;\n      z-index: 9999;\n    }\n\n    .widget-container {\n      position: relative;\n    }\n\n    .widget-button {\n      width: 60px;\n      height: 60px;\n      border-radius: 50%;\n      background: #2563eb;\n      border: none;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n      transition: transform 0.2s, box-shadow 0.2s;\n    }\n\n    .widget-button:hover {\n      transform: scale(1.05);\n      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);\n    }\n\n    .widget-button svg {\n      width: 28px;\n      height: 28px;\n      color: white;\n    }\n\n    .widget-window {\n      position: absolute;\n      bottom: 80px;\n      right: 0;\n      width: 380px;\n      height: 600px;\n      background: #fff;\n      border-radius: 12px;\n      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      opacity: 0;\n      transform: scale(0.9) translateY(20px);\n      pointer-events: none;\n      transition: opacity 0.2s, transform 0.2s;\n    }\n\n    .widget-window.open {\n      opacity: 1;\n      transform: scale(1) translateY(0);\n      pointer-events: all;\n    }\n\n    :host([theme=\"dark\"]) .widget-window {\n      background: #18181b;\n      color: #fafafa;\n    }\n\n    @media (max-width: 480px) {\n      .widget-window {\n        width: calc(100vw - 40px);\n        height: calc(100vh - 100px);\n        bottom: 80px;\n        right: 0;\n      }\n    }\n\n    .header {\n      border-bottom: 1px solid #e4e4e7;\n      background: #fff;\n      padding: 1rem;\n    }\n\n    :host([theme=\"dark\"]) .header {\n      border-bottom-color: #27272a;\n      background: #18181b;\n    }\n\n    .header-content {\n      max-width: 56rem;\n      margin: 0 auto;\n    }\n\n    .title {\n      font-size: 1.25rem;\n      font-weight: 600;\n      margin: 0;\n    }\n\n    .messages-area {\n      flex: 1;\n      overflow-y: auto;\n      padding: 1.5rem 1rem;\n    }\n\n    .messages-container {\n      max-width: 56rem;\n      margin: 0 auto;\n      display: flex;\n      flex-direction: column;\n      gap: 1.5rem;\n    }\n\n    .empty-state {\n      text-align: center;\n      color: #71717a;\n      margin-top: 5rem;\n    }\n\n    :host([theme=\"dark\"]) .empty-state {\n      color: #a1a1aa;\n    }\n\n    .empty-state p {\n      font-size: 1.5rem;\n      font-weight: 500;\n      margin: 0;\n    }\n\n    .message {\n      display: flex;\n      gap: 1rem;\n    }\n\n    .message.user {\n      flex-direction: row-reverse;\n    }\n\n    .avatar {\n      width: 2.5rem;\n      height: 2.5rem;\n      border-radius: 9999px;\n      background: #e4e4e7;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      font-weight: 500;\n      font-size: 0.875rem;\n    }\n\n    :host([theme=\"dark\"]) .avatar {\n      background: #3f3f46;\n    }\n\n    .message-content {\n      max-width: 36rem;\n      padding: 0.75rem 1rem;\n      border-radius: 1rem;\n    }\n\n    .message.user .message-content {\n      background: #2563eb;\n      color: #fff;\n    }\n\n    .message.assistant .message-content {\n      background: #fff;\n      border: 1px solid #e4e4e7;\n      color: #09090b;\n    }\n\n    :host([theme=\"dark\"]) .message.assistant .message-content {\n      background: #27272a;\n      border-color: #3f3f46;\n      color: #fafafa;\n    }\n\n    .message-text {\n      white-space: pre-wrap;\n      margin: 0;\n    }\n\n    .loading {\n      display: flex;\n      gap: 1rem;\n    }\n\n    .spinner {\n      display: inline-block;\n      width: 1.25rem;\n      height: 1.25rem;\n      border: 2px solid #e4e4e7;\n      border-top-color: #71717a;\n      border-radius: 50%;\n      animation: spin 1s linear infinite;\n    }\n\n    @keyframes spin {\n      to { transform: rotate(360deg); }\n    }\n\n    .input-area {\n      border-top: 1px solid #e4e4e7;\n      background: #fff;\n      padding: 1rem;\n    }\n\n    :host([theme=\"dark\"]) .input-area {\n      border-top-color: #27272a;\n      background: #000;\n    }\n\n    .input-form {\n      max-width: 56rem;\n      margin: 0 auto;\n      display: flex;\n      gap: 0.75rem;\n    }\n\n    .input-field {\n      flex: 1;\n      height: 3rem;\n      padding: 0 1rem;\n      border: 1px solid #e4e4e7;\n      border-radius: 0.5rem;\n      font-size: 1rem;\n      font-family: inherit;\n      background: #fff;\n      color: #09090b;\n    }\n\n    :host([theme=\"dark\"]) .input-field {\n      border-color: #3f3f46;\n      background: #18181b;\n      color: #fafafa;\n    }\n\n    .input-field:focus {\n      outline: 2px solid #2563eb;\n      outline-offset: 2px;\n    }\n\n    .input-field:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .send-button {\n      width: 3rem;\n      height: 3rem;\n      border-radius: 9999px;\n      border: none;\n      background: #2563eb;\n      color: #fff;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: background 0.2s;\n    }\n\n    .send-button:hover:not(:disabled) {\n      background: #1d4ed8;\n    }\n\n    .send-button:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .send-icon {\n      width: 1.25rem;\n      height: 1.25rem;\n    }\n\n    .version-tag {\n      text-align: center;\n      padding: 0.5rem;\n      font-size: 0.75rem;\n      color: #71717a;\n      border-top: 1px solid #e4e4e7;\n    }\n\n    :host([theme=\"dark\"]) .version-tag {\n      color: #a1a1aa;\n      border-top-color: #27272a;\n    }\n  `;\n\n  declare apiUrl: string;\n  declare sessionId: string;\n  declare chatTitle: string;\n  declare theme: 'light' | 'dark';\n  declare mode: 'fullscreen' | 'widget';\n  declare initialMessages: Message[];\n\n  @state()\n  private declare messages: Message[];\n\n  @state()\n  private declare input: string;\n\n  @state()\n  private declare isLoading: boolean;\n\n  @state()\n  private declare isOpen: boolean;\n\n  private messagesEndRef?: HTMLDivElement;\n\n  static override properties = {\n    apiUrl: { type: String, attribute: 'api-url' },\n    sessionId: { type: String, attribute: 'session-id' },\n    chatTitle: { type: String, attribute: 'title' },\n    theme: { type: String },\n    mode: { type: String, reflect: true },\n    initialMessages: { type: Array },\n  };\n\n  constructor() {\n    super();\n    this.apiUrl = '';\n    this.sessionId = 'default-session';\n    this.chatTitle = 'My AI Agent';\n    this.theme = 'light';\n    this.mode = 'fullscreen';\n    this.initialMessages = [];\n    this.messages = [];\n    this.input = '';\n    this.isLoading = false;\n    this.isOpen = false;\n  }\n\n  private toggleWidget() {\n    this.isOpen = !this.isOpen;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (this.initialMessages && this.initialMessages.length > 0) {\n      this.messages = [...this.initialMessages];\n    }\n  }\n\n  updated(changedProperties: PropertyValues) {\n    super.updated(changedProperties);\n    if (changedProperties.has('messages')) {\n      this.scrollToBottom();\n    }\n  }\n\n  private scrollToBottom() {\n    requestAnimationFrame(() => {\n      this.messagesEndRef?.scrollIntoView({ behavior: 'smooth' });\n    });\n  }\n\n  private handleInput(e: Event) {\n    this.input = (e.target as HTMLInputElement).value;\n  }\n\n  private async handleSubmit(e: Event) {\n    e.preventDefault();\n\n    if (!this.input.trim() || this.isLoading || !this.apiUrl) return;\n\n    const userMessage: Message = {\n      id: Date.now().toString(),\n      role: 'user',\n      content: this.input.trim(),\n    };\n\n    this.messages = [...this.messages, userMessage];\n    const questionText = this.input.trim();\n    this.input = '';\n    this.isLoading = true;\n\n    // Dispatch message-sent event\n    this.dispatchEvent(new CustomEvent('message-sent', {\n      detail: userMessage,\n      bubbles: true,\n      composed: true,\n    }));\n\n    try {\n      const response = await fetch(`${this.apiUrl}/ask`, {\n        method: 'POST',\n        headers: { 'Content-Type': 'application/json' },\n        body: JSON.stringify({\n          session_id: this.sessionId,\n          question: questionText,\n        }),\n      });\n\n      if (!response.ok) {\n        const errorText = await response.text();\n        throw new Error(`Backend error: ${response.status} ${errorText}`);\n      }\n\n      const data = await response.json();\n\n      const assistantMessage: Message = {\n        id: (Date.now() + 1).toString(),\n        role: 'assistant',\n        content: data.response || 'No response from agent',\n      };\n\n      this.messages = [...this.messages, assistantMessage];\n\n      // Dispatch response-received event\n      this.dispatchEvent(new CustomEvent('response-received', {\n        detail: assistantMessage,\n        bubbles: true,\n        composed: true,\n      }));\n    } catch (err: any) {\n      console.error('Backend connection failed:', err);\n\n      const errorMessage: Message = {\n        id: (Date.now() + 1).toString(),\n        role: 'assistant',\n        content: `Error: ${err.message}\\n\\nPlease check your API endpoint configuration.`,\n      };\n\n      this.messages = [...this.messages, errorMessage];\n\n      // Dispatch error event\n      this.dispatchEvent(new CustomEvent('error', {\n        detail: err,\n        bubbles: true,\n        composed: true,\n      }));\n    } finally {\n      this.isLoading = false;\n    }\n  }\n\n  private renderChatUI() {\n    return html`\n      <!-- Header -->\n      <div class=\"header\">\n        <div class=\"header-content\">\n          <h1 class=\"title\">${this.chatTitle}</h1>\n        </div>\n      </div>\n\n      <!-- Messages Area -->\n      <div class=\"messages-area\">\n        <div class=\"messages-container\">\n          ${this.messages.length === 0 ? html`\n            <div class=\"empty-state\">\n              <p>How can I help you today?</p>\n            </div>\n          ` : ''}\n\n          ${repeat(this.messages, (msg) => msg.id, (msg) => html`\n            <div class=${classMap({\n              message: true,\n              user: msg.role === 'user',\n              assistant: msg.role === 'assistant'\n            })}>\n              <div class=\"avatar\">\n                ${msg.role === 'user' ? 'U' : 'AI'}\n              </div>\n              <div class=\"message-content\">\n                <p class=\"message-text\">${msg.content}</p>\n              </div>\n            </div>\n          `)}\n\n          ${this.isLoading ? html`\n            <div class=\"loading\">\n              <div class=\"avatar\">AI</div>\n              <div class=\"message-content\">\n                <div class=\"spinner\"></div>\n              </div>\n            </div>\n          ` : ''}\n\n          <div ${(el: Element) => this.messagesEndRef = el as HTMLDivElement}></div>\n        </div>\n      </div>\n\n      <!-- Input Area -->\n      <div class=\"input-area\">\n        <form class=\"input-form\" @submit=${this.handleSubmit}>\n          <input\n            type=\"text\"\n            class=\"input-field\"\n            placeholder=\"Type your message...\"\n            .value=${this.input}\n            @input=${this.handleInput}\n            ?disabled=${this.isLoading}\n          />\n          <button\n            type=\"submit\"\n            class=\"send-button\"\n            ?disabled=${this.isLoading || !this.input.trim()}\n            aria-label=\"Send message\"\n          >\n            ${this.isLoading ? html`\n              <div class=\"spinner\" style=\"border-color: #fff; border-top-color: transparent;\"></div>\n            ` : html`\n              <svg class=\"send-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"></line>\n                <polygon points=\"22 2 15 22 11 13 2 9 22 2\"></polygon>\n              </svg>\n            `}\n          </button>\n        </form>\n      </div>\n\n      <!-- Version -->\n      <div class=\"version-tag\">v${VERSION}</div>\n    `;\n  }\n\n  render() {\n    if (this.mode === 'widget') {\n      return html`\n        <div class=\"widget-container\">\n          <!-- Chat Window -->\n          <div class=${classMap({ 'widget-window': true, 'open': this.isOpen })}>\n            ${this.renderChatUI()}\n          </div>\n\n          <!-- Toggle Button -->\n          <button\n            class=\"widget-button\"\n            @click=${this.toggleWidget}\n            aria-label=${this.isOpen ? 'Close chat' : 'Open chat'}\n          >\n            ${this.isOpen ? html`\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n                <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n              </svg>\n            ` : html`\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <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>\n              </svg>\n            `}\n          </button>\n        </div>\n      `;\n    }\n\n    // Fullscreen mode\n    return this.renderChatUI();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-chat': AIChat;\n  }\n}\n"]}
+{"version":3,"sources":["../src/components/ai-chat.ts"],"names":["AIChat","LitElement","html","repeat","classMap","css","state","customElement"],"mappings":"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","file":"index.js","sourcesContent":["import { LitElement, html, css, PropertyValues } from 'lit';\r\nimport { customElement, state } from 'lit/decorators.js';\r\nimport { repeat } from 'lit/directives/repeat.js';\r\nimport { classMap } from 'lit/directives/class-map.js';\r\n\r\nconst VERSION = '0.2.2';\r\n\r\nexport interface FAQ {\r\n  \"no.\": string;\r\n  question: string;\r\n}\r\n\r\nexport interface Message {\r\n  id: string;\r\n  role: 'user' | 'assistant';\r\n  content: string;\r\n  faqs?: FAQ[];\r\n}\r\n\r\n/**\r\n * AI Chat Web Component\r\n *\r\n * @fires message-sent - Fired when user sends a message\r\n * @fires response-received - Fired when AI responds\r\n * @fires error - Fired when an error occurs\r\n *\r\n * @example\r\n * ```html\r\n * <ai-chat\r\n *   api-url=\"https://api.example.com\"\r\n *   session-id=\"user-123\"\r\n *   title=\"My AI Assistant\">\r\n * </ai-chat>\r\n * ```\r\n */\r\n@customElement('ai-chat')\r\nexport class AIChat extends LitElement {\r\n  static styles = css`\r\n    :host {\r\n      font-family: system-ui, -apple-system, sans-serif;\r\n      color: #09090b;\r\n    }\r\n\r\n    /* Fullscreen mode (default) */\r\n    :host([mode=\"fullscreen\"]) {\r\n      display: flex;\r\n      flex-direction: column;\r\n      height: 100vh;\r\n      background: #fafafa;\r\n    }\r\n\r\n    :host([mode=\"fullscreen\"][theme=\"dark\"]) {\r\n      background: #000;\r\n      color: #fafafa;\r\n    }\r\n\r\n    /* Widget mode */\r\n    :host([mode=\"widget\"]) {\r\n      position: fixed;\r\n      bottom: 20px;\r\n      right: 20px;\r\n      z-index: 9999;\r\n    }\r\n\r\n    .widget-container {\r\n      position: relative;\r\n    }\r\n\r\n    .widget-button {\r\n      width: 60px;\r\n      height: 60px;\r\n      border-radius: 50%;\r\n      background: #2563eb;\r\n      border: none;\r\n      cursor: pointer;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\r\n      transition: transform 0.2s, box-shadow 0.2s;\r\n    }\r\n\r\n    .widget-button:hover {\r\n      transform: scale(1.05);\r\n      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .widget-button svg {\r\n      width: 28px;\r\n      height: 28px;\r\n      color: white;\r\n    }\r\n\r\n    .widget-window {\r\n      position: absolute;\r\n      bottom: 80px;\r\n      right: 0;\r\n      width: 380px;\r\n      height: 600px;\r\n      background: #fff;\r\n      border-radius: 12px;\r\n      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\r\n      display: flex;\r\n      flex-direction: column;\r\n      overflow: hidden;\r\n      opacity: 0;\r\n      transform: scale(0.9) translateY(20px);\r\n      pointer-events: none;\r\n      transition: opacity 0.2s, transform 0.2s;\r\n    }\r\n\r\n    .widget-window.open {\r\n      opacity: 1;\r\n      transform: scale(1) translateY(0);\r\n      pointer-events: all;\r\n    }\r\n\r\n    :host([theme=\"dark\"]) .widget-window {\r\n      background: #18181b;\r\n      color: #fafafa;\r\n    }\r\n\r\n    @media (max-width: 480px) {\r\n      .widget-window {\r\n        width: calc(100vw - 40px);\r\n        height: calc(100vh - 100px);\r\n        bottom: 80px;\r\n        right: 0;\r\n      }\r\n    }\r\n\r\n    .header {\r\n      border-bottom: 1px solid #e4e4e7;\r\n      background: #fff;\r\n      padding: 1rem;\r\n    }\r\n\r\n    :host([theme=\"dark\"]) .header {\r\n      border-bottom-color: #27272a;\r\n      background: #18181b;\r\n    }\r\n\r\n    .header-content {\r\n      max-width: 56rem;\r\n      margin: 0 auto;\r\n    }\r\n\r\n    .title {\r\n      font-size: 1.25rem;\r\n      font-weight: 600;\r\n      margin: 0;\r\n    }\r\n\r\n    .messages-area {\r\n      flex: 1;\r\n      overflow-y: auto;\r\n      padding: 1.5rem 1rem;\r\n    }\r\n\r\n    .messages-container {\r\n      max-width: 56rem;\r\n      margin: 0 auto;\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 1.5rem;\r\n    }\r\n\r\n    .empty-state {\r\n      text-align: center;\r\n      color: #71717a;\r\n      margin-top: 5rem;\r\n    }\r\n\r\n    :host([theme=\"dark\"]) .empty-state {\r\n      color: #a1a1aa;\r\n    }\r\n\r\n    .empty-state p {\r\n      font-size: 1.5rem;\r\n      font-weight: 500;\r\n      margin: 0;\r\n    }\r\n\r\n    .message {\r\n      display: flex;\r\n      gap: 1rem;\r\n    }\r\n\r\n    .message.user {\r\n      flex-direction: row-reverse;\r\n    }\r\n\r\n    .avatar {\r\n      width: 2.5rem;\r\n      height: 2.5rem;\r\n      border-radius: 9999px;\r\n      background: #e4e4e7;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      flex-shrink: 0;\r\n      font-weight: 500;\r\n      font-size: 0.875rem;\r\n    }\r\n\r\n    :host([theme=\"dark\"]) .avatar {\r\n      background: #3f3f46;\r\n    }\r\n\r\n    .message-content {\r\n      max-width: 36rem;\r\n      padding: 0.75rem 1rem;\r\n      border-radius: 1rem;\r\n    }\r\n\r\n    .message.user .message-content {\r\n      background: #2563eb;\r\n      color: #fff;\r\n    }\r\n\r\n    .message.assistant .message-content {\r\n      background: #fff;\r\n      border: 1px solid #e4e4e7;\r\n      color: #09090b;\r\n    }\r\n\r\n    :host([theme=\"dark\"]) .message.assistant .message-content {\r\n      background: #27272a;\r\n      border-color: #3f3f46;\r\n      color: #fafafa;\r\n    }\r\n\r\n    .message-text {\r\n      white-space: pre-wrap;\r\n      margin: 0;\r\n    }\r\n\r\n    .faq-section {\r\n      margin-top: 1rem;\r\n      padding-top: 1rem;\r\n      border-top: 1px solid #e4e4e7;\r\n    }\r\n\r\n    :host([theme=\"dark\"]) .faq-section {\r\n      border-top-color: #3f3f46;\r\n    }\r\n\r\n    .faq-title {\r\n      font-size: 0.875rem;\r\n      font-weight: 500;\r\n      color: #3f3f46;\r\n      margin: 0 0 0.5rem 0;\r\n    }\r\n\r\n    :host([theme=\"dark\"]) .faq-title {\r\n      color: #d4d4d8;\r\n    }\r\n\r\n    .faq-list {\r\n      list-style: none;\r\n      padding: 0;\r\n      margin: 0;\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 0.5rem;\r\n    }\r\n\r\n    .faq-item {\r\n      font-size: 0.875rem;\r\n      color: #52525b;\r\n      padding: 0.5rem;\r\n      border-radius: 0.375rem;\r\n      cursor: pointer;\r\n      transition: background-color 0.2s, color 0.2s;\r\n    }\r\n\r\n    .faq-item:hover {\r\n      background-color: #f4f4f5;\r\n      color: #18181b;\r\n    }\r\n\r\n    :host([theme=\"dark\"]) .faq-item {\r\n      color: #a1a1aa;\r\n    }\r\n\r\n    :host([theme=\"dark\"]) .faq-item:hover {\r\n      background-color: #27272a;\r\n      color: #fafafa;\r\n    }\r\n\r\n    .loading {\r\n      display: flex;\r\n      gap: 1rem;\r\n    }\r\n\r\n    .spinner {\r\n      display: inline-block;\r\n      width: 1.25rem;\r\n      height: 1.25rem;\r\n      border: 2px solid #e4e4e7;\r\n      border-top-color: #71717a;\r\n      border-radius: 50%;\r\n      animation: spin 1s linear infinite;\r\n    }\r\n\r\n    @keyframes spin {\r\n      to { transform: rotate(360deg); }\r\n    }\r\n\r\n    .input-area {\r\n      border-top: 1px solid #e4e4e7;\r\n      background: #fff;\r\n      padding: 1rem;\r\n    }\r\n\r\n    :host([theme=\"dark\"]) .input-area {\r\n      border-top-color: #27272a;\r\n      background: #000;\r\n    }\r\n\r\n    .input-form {\r\n      max-width: 56rem;\r\n      margin: 0 auto;\r\n      display: flex;\r\n      gap: 0.75rem;\r\n    }\r\n\r\n    .input-field {\r\n      flex: 1;\r\n      height: 3rem;\r\n      padding: 0 1rem;\r\n      border: 1px solid #e4e4e7;\r\n      border-radius: 0.5rem;\r\n      font-size: 1rem;\r\n      font-family: inherit;\r\n      background: #fff;\r\n      color: #09090b;\r\n    }\r\n\r\n    :host([theme=\"dark\"]) .input-field {\r\n      border-color: #3f3f46;\r\n      background: #18181b;\r\n      color: #fafafa;\r\n    }\r\n\r\n    .input-field:focus {\r\n      outline: 2px solid #2563eb;\r\n      outline-offset: 2px;\r\n    }\r\n\r\n    .input-field:disabled {\r\n      opacity: 0.5;\r\n      cursor: not-allowed;\r\n    }\r\n\r\n    .send-button {\r\n      width: 3rem;\r\n      height: 3rem;\r\n      border-radius: 9999px;\r\n      border: none;\r\n      background: #2563eb;\r\n      color: #fff;\r\n      cursor: pointer;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      transition: background 0.2s;\r\n    }\r\n\r\n    .send-button:hover:not(:disabled) {\r\n      background: #1d4ed8;\r\n    }\r\n\r\n    .send-button:disabled {\r\n      opacity: 0.5;\r\n      cursor: not-allowed;\r\n    }\r\n\r\n    .send-icon {\r\n      width: 1.25rem;\r\n      height: 1.25rem;\r\n    }\r\n\r\n    .version-tag {\r\n      text-align: center;\r\n      padding: 0.5rem;\r\n      font-size: 0.75rem;\r\n      color: #71717a;\r\n      border-top: 1px solid #e4e4e7;\r\n    }\r\n\r\n    :host([theme=\"dark\"]) .version-tag {\r\n      color: #a1a1aa;\r\n      border-top-color: #27272a;\r\n    }\r\n  `;\r\n\r\n  declare apiUrl: string;\r\n  declare sessionId: string;\r\n  declare chatTitle: string;\r\n  declare theme: 'light' | 'dark';\r\n  declare mode: 'fullscreen' | 'widget';\r\n  declare initialMessages: Message[];\r\n\r\n  @state()\r\n  private declare messages: Message[];\r\n\r\n  @state()\r\n  private declare input: string;\r\n\r\n  @state()\r\n  private declare isLoading: boolean;\r\n\r\n  @state()\r\n  private declare isOpen: boolean;\r\n\r\n  private messagesEndRef?: HTMLDivElement;\r\n\r\n  static override properties = {\r\n    apiUrl: { type: String, attribute: 'api-url' },\r\n    sessionId: { type: String, attribute: 'session-id' },\r\n    chatTitle: { type: String, attribute: 'title' },\r\n    theme: { type: String },\r\n    mode: { type: String, reflect: true },\r\n    initialMessages: { type: Array },\r\n  };\r\n\r\n  constructor() {\r\n    super();\r\n    this.apiUrl = '';\r\n    this.sessionId = 'default-session';\r\n    this.chatTitle = 'My AI Agent';\r\n    this.theme = 'light';\r\n    this.mode = 'fullscreen';\r\n    this.initialMessages = [];\r\n    this.messages = [];\r\n    this.input = '';\r\n    this.isLoading = false;\r\n    this.isOpen = false;\r\n  }\r\n\r\n  private toggleWidget() {\r\n    this.isOpen = !this.isOpen;\r\n  }\r\n\r\n  connectedCallback() {\r\n    super.connectedCallback();\r\n    if (this.initialMessages && this.initialMessages.length > 0) {\r\n      this.messages = [...this.initialMessages];\r\n    }\r\n  }\r\n\r\n  updated(changedProperties: PropertyValues) {\r\n    super.updated(changedProperties);\r\n    if (changedProperties.has('messages')) {\r\n      this.scrollToBottom();\r\n    }\r\n  }\r\n\r\n  private scrollToBottom() {\r\n    requestAnimationFrame(() => {\r\n      this.messagesEndRef?.scrollIntoView({ behavior: 'smooth' });\r\n    });\r\n  }\r\n\r\n  private handleInput(e: Event) {\r\n    this.input = (e.target as HTMLInputElement).value;\r\n  }\r\n\r\n  private handleFAQClick(question: string) {\r\n    if (this.isLoading) return;\r\n\r\n    // Set the input and trigger submit\r\n    this.input = question;\r\n\r\n    // Create a synthetic submit event\r\n    const submitEvent = new Event('submit', { cancelable: true });\r\n    this.handleSubmit(submitEvent);\r\n  }\r\n\r\n  private async handleSubmit(e: Event) {\r\n    e.preventDefault();\r\n\r\n    if (!this.input.trim() || this.isLoading || !this.apiUrl) return;\r\n\r\n    const userMessage: Message = {\r\n      id: Date.now().toString(),\r\n      role: 'user',\r\n      content: this.input.trim(),\r\n    };\r\n\r\n    this.messages = [...this.messages, userMessage];\r\n    const questionText = this.input.trim();\r\n    this.input = '';\r\n    this.isLoading = true;\r\n\r\n    // Dispatch message-sent event\r\n    this.dispatchEvent(new CustomEvent('message-sent', {\r\n      detail: userMessage,\r\n      bubbles: true,\r\n      composed: true,\r\n    }));\r\n\r\n    try {\r\n      const response = await fetch(`${this.apiUrl}/ask`, {\r\n        method: 'POST',\r\n        headers: { 'Content-Type': 'application/json' },\r\n        body: JSON.stringify({\r\n          session_id: this.sessionId,\r\n          question: questionText,\r\n        }),\r\n      });\r\n\r\n      if (!response.ok) {\r\n        const errorText = await response.text();\r\n        throw new Error(`Backend error: ${response.status} ${errorText}`);\r\n      }\r\n\r\n      const data = await response.json();\r\n      console.log('🔍 Raw API response:', data);\r\n\r\n      // Extract the response text and FAQs properly\r\n      let responseText = 'No response from agent';\r\n      let faqs: FAQ[] | undefined = undefined;\r\n\r\n      if (data && typeof data === 'object' && data.response && typeof data.response === 'string') {\r\n        console.log('📝 data.response type:', typeof data.response);\r\n        console.log('📝 data.response preview:', data.response.substring(0, 100));\r\n\r\n        // Check if data.response contains stringified JSON\r\n        const trimmedResponse = data.response.trim();\r\n        if (trimmedResponse.startsWith('{') || trimmedResponse.startsWith('[')) {\r\n          console.log('🔄 Detected stringified JSON, parsing...');\r\n\r\n          try {\r\n            // First attempt: standard JSON.parse\r\n            let innerData = JSON.parse(data.response);\r\n            console.log('✅ Parsed inner data with JSON.parse');\r\n\r\n            if (innerData && innerData.response && typeof innerData.response === 'string') {\r\n              responseText = innerData.response;\r\n              faqs = innerData.faqs_used || undefined;\r\n              console.log('✅ Extracted text length:', responseText.length);\r\n              console.log('✅ Extracted FAQs count:', faqs?.length || 0);\r\n            } else {\r\n              responseText = data.response;\r\n              faqs = data.faqs_used || undefined;\r\n            }\r\n          } catch (parseError) {\r\n            console.warn('⚠️ JSON.parse failed, using regex extraction...', parseError);\r\n\r\n            // Backend has malformed JSON - extract response text\r\n            const responsePattern = /\"response\"\\s*:\\s*\"([^\"]*(?:\\\\.[^\"]*)*)\"/s;\r\n            const responseMatch = data.response.match(responsePattern);\r\n\r\n            if (responseMatch) {\r\n              responseText = responseMatch[1]\r\n                .replace(/\\\\n/g, '\\n')\r\n                .replace(/\\\\t/g, '\\t')\r\n                .replace(/\\\\r/g, '\\r')\r\n                .replace(/\\\\\"/g, '\"')\r\n                .replace(/\\\\\\\\/g, '\\\\');\r\n              console.log('✅ Extracted response text, length:', responseText.length);\r\n            } else {\r\n              console.error('❌ Could not extract response');\r\n              responseText = 'Error: Could not parse response';\r\n            }\r\n\r\n            // Extract FAQs array\r\n            const faqsPattern = /\"faqs_used\"\\s*:\\s*(\\[[^\\]]*\\])/s;\r\n            const faqsMatch = data.response.match(faqsPattern);\r\n\r\n            if (faqsMatch) {\r\n              try {\r\n                faqs = JSON.parse(faqsMatch[1]);\r\n                console.log('✅ Extracted FAQs, count:', faqs?.length || 0);\r\n              } catch {\r\n                console.log('⚠️ Could not parse FAQs, trying multiline...');\r\n                // FAQs might span multiple lines\r\n                const faqsMultiPattern = /\"faqs_used\"\\s*:\\s*(\\[[\\s\\S]*?\\n\\s*\\])/;\r\n                const faqsMultiMatch = data.response.match(faqsMultiPattern);\r\n                if (faqsMultiMatch) {\r\n                  try {\r\n                    faqs = JSON.parse(faqsMultiMatch[1]);\r\n                    console.log('✅ Extracted multi-line FAQs, count:', faqs?.length || 0);\r\n                  } catch {\r\n                    faqs = undefined;\r\n                  }\r\n                }\r\n              }\r\n            }\r\n          }\r\n        } else {\r\n          // Not JSON, direct text response\r\n          console.log('📄 Direct text response (not JSON)');\r\n          responseText = data.response;\r\n          faqs = data.faqs_used || undefined;\r\n        }\r\n      } else if (typeof data === 'string') {\r\n        console.log('📄 Response is a plain string');\r\n        responseText = data;\r\n      } else if (data && typeof data === 'object') {\r\n        // Fallback for other formats\r\n        console.warn('⚠️ Unexpected format, using fallback');\r\n        responseText = data.message || data.answer || 'Error: Unexpected response format';\r\n      }\r\n\r\n      console.log('🎯 Final responseText length:', responseText.length);\r\n      console.log('🎯 Final responseText preview:', responseText.substring(0, 100));\r\n      console.log('🎯 Final FAQs:', faqs);\r\n\r\n      const assistantMessage: Message = {\r\n        id: (Date.now() + 1).toString(),\r\n        role: 'assistant',\r\n        content: responseText,\r\n        faqs: faqs,\r\n      };\r\n\r\n      this.messages = [...this.messages, assistantMessage];\r\n\r\n      // Dispatch response-received event\r\n      this.dispatchEvent(new CustomEvent('response-received', {\r\n        detail: assistantMessage,\r\n        bubbles: true,\r\n        composed: true,\r\n      }));\r\n    } catch (err) {\r\n      console.error('Backend connection failed:', err);\r\n\r\n      const errorMessage: Message = {\r\n        id: (Date.now() + 1).toString(),\r\n        role: 'assistant',\r\n        content: `Error: ${err instanceof Error ? err.message : 'Unknown error'}\\n\\nPlease check your API endpoint configuration.`,\r\n      };\r\n\r\n      this.messages = [...this.messages, errorMessage];\r\n\r\n      // Dispatch error event\r\n      this.dispatchEvent(new CustomEvent('error', {\r\n        detail: err,\r\n        bubbles: true,\r\n        composed: true,\r\n      }));\r\n    } finally {\r\n      this.isLoading = false;\r\n    }\r\n  }\r\n\r\n  private renderChatUI() {\r\n    return html`\r\n      <!-- Header -->\r\n      <div class=\"header\">\r\n        <div class=\"header-content\">\r\n          <h1 class=\"title\">${this.chatTitle}</h1>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Messages Area -->\r\n      <div class=\"messages-area\">\r\n        <div class=\"messages-container\">\r\n          ${this.messages.length === 0 ? html`\r\n            <div class=\"empty-state\">\r\n              <p>How can I help you today?</p>\r\n            </div>\r\n          ` : ''}\r\n\r\n          ${repeat(this.messages, (msg) => msg.id, (msg) => html`\r\n            <div class=${classMap({\r\n              message: true,\r\n              user: msg.role === 'user',\r\n              assistant: msg.role === 'assistant'\r\n            })}>\r\n              <div class=\"avatar\">\r\n                ${msg.role === 'user' ? 'U' : 'AI'}\r\n              </div>\r\n              <div class=\"message-content\">\r\n                <p class=\"message-text\">${msg.content}</p>\r\n                ${msg.role === 'assistant' && msg.faqs && msg.faqs.length > 0 ? html`\r\n                  <div class=\"faq-section\">\r\n                    <p class=\"faq-title\">Related FAQs:</p>\r\n                    <ul class=\"faq-list\">\r\n                      ${msg.faqs.map(faq => html`\r\n                        <li class=\"faq-item\" @click=${() => this.handleFAQClick(faq.question)}>\r\n                          ${faq.question}\r\n                        </li>\r\n                      `)}\r\n                    </ul>\r\n                  </div>\r\n                ` : ''}\r\n              </div>\r\n            </div>\r\n          `)}\r\n\r\n          ${this.isLoading ? html`\r\n            <div class=\"loading\">\r\n              <div class=\"avatar\">AI</div>\r\n              <div class=\"message-content\">\r\n                <div class=\"spinner\"></div>\r\n              </div>\r\n            </div>\r\n          ` : ''}\r\n\r\n          <div ${(el: Element) => this.messagesEndRef = el as HTMLDivElement}></div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Input Area -->\r\n      <div class=\"input-area\">\r\n        <form class=\"input-form\" @submit=${this.handleSubmit}>\r\n          <input\r\n            type=\"text\"\r\n            class=\"input-field\"\r\n            placeholder=\"Type your message...\"\r\n            .value=${this.input}\r\n            @input=${this.handleInput}\r\n            ?disabled=${this.isLoading}\r\n          />\r\n          <button\r\n            type=\"submit\"\r\n            class=\"send-button\"\r\n            ?disabled=${this.isLoading || !this.input.trim()}\r\n            aria-label=\"Send message\"\r\n          >\r\n            ${this.isLoading ? html`\r\n              <div class=\"spinner\" style=\"border-color: #fff; border-top-color: transparent;\"></div>\r\n            ` : html`\r\n              <svg class=\"send-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                <line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"></line>\r\n                <polygon points=\"22 2 15 22 11 13 2 9 22 2\"></polygon>\r\n              </svg>\r\n            `}\r\n          </button>\r\n        </form>\r\n      </div>\r\n\r\n      <!-- Version -->\r\n      <div class=\"version-tag\">v${VERSION}</div>\r\n    `;\r\n  }\r\n\r\n  render() {\r\n    if (this.mode === 'widget') {\r\n      return html`\r\n        <div class=\"widget-container\">\r\n          <!-- Chat Window -->\r\n          <div class=${classMap({ 'widget-window': true, 'open': this.isOpen })}>\r\n            ${this.renderChatUI()}\r\n          </div>\r\n\r\n          <!-- Toggle Button -->\r\n          <button\r\n            class=\"widget-button\"\r\n            @click=${this.toggleWidget}\r\n            aria-label=${this.isOpen ? 'Close chat' : 'Open chat'}\r\n          >\r\n            ${this.isOpen ? html`\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n                <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n              </svg>\r\n            ` : html`\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                <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>\r\n              </svg>\r\n            `}\r\n          </button>\r\n        </div>\r\n      `;\r\n    }\r\n\r\n    // Fullscreen mode\r\n    return this.renderChatUI();\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    'ai-chat': AIChat;\r\n  }\r\n}\r\n"]}

package/dist/index.mjs

@@ -13,7 +13,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-var VERSION = "0.2.1";
+var VERSION = "0.2.2";
 var AIChat = class extends LitElement {
   constructor() {
     super();
@@ -51,6 +51,12 @@ var AIChat = class extends LitElement {
   handleInput(e) {
     this.input = e.target.value;
   }
+  handleFAQClick(question) {
+    if (this.isLoading) return;
+    this.input = question;
+    const submitEvent = new Event("submit", { cancelable: true });
+    this.handleSubmit(submitEvent);
+  }
   async handleSubmit(e) {
     e.preventDefault();
     if (!this.input.trim() || this.isLoading || !this.apiUrl) return;
@@ -82,10 +88,79 @@ var AIChat = class extends LitElement {
         throw new Error(`Backend error: ${response.status} ${errorText}`);
       }
       const data = await response.json();
+      console.log("\u{1F50D} Raw API response:", data);
+      let responseText = "No response from agent";
+      let faqs = 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));
+        const trimmedResponse = data.response.trim();
+        if (trimmedResponse.startsWith("{") || trimmedResponse.startsWith("[")) {
+          console.log("\u{1F504} Detected stringified JSON, parsing...");
+          try {
+            let 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.faqs_used || void 0;
+              console.log("\u2705 Extracted text length:", responseText.length);
+              console.log("\u2705 Extracted FAQs count:", faqs?.length || 0);
+            } else {
+              responseText = data.response;
+              faqs = data.faqs_used || void 0;
+            }
+          } catch (parseError) {
+            console.warn("\u26A0\uFE0F JSON.parse failed, using regex extraction...", parseError);
+            const responsePattern = /"response"\s*:\s*"([^"]*(?:\\.[^"]*)*)"/s;
+            const responseMatch = data.response.match(responsePattern);
+            if (responseMatch) {
+              responseText = responseMatch[1].replace(/\\n/g, "\n").replace(/\\t/g, "	").replace(/\\r/g, "\r").replace(/\\"/g, '"').replace(/\\\\/g, "\\");
+              console.log("\u2705 Extracted response text, length:", responseText.length);
+            } else {
+              console.error("\u274C Could not extract response");
+              responseText = "Error: Could not parse response";
+            }
+            const faqsPattern = /"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 = /"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;
+                  }
+                }
+              }
+            }
+          }
+        } else {
+          console.log("\u{1F4C4} Direct text response (not JSON)");
+          responseText = data.response;
+          faqs = data.faqs_used || void 0;
+        }
+      } else if (typeof data === "string") {
+        console.log("\u{1F4C4} Response is a plain string");
+        responseText = data;
+      } else if (data && typeof data === "object") {
+        console.warn("\u26A0\uFE0F Unexpected format, using fallback");
+        responseText = data.message || data.answer || "Error: Unexpected response format";
+      }
+      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);
       const assistantMessage = {
         id: (Date.now() + 1).toString(),
         role: "assistant",
-        content: data.response || "No response from agent"
+        content: responseText,
+        faqs
       };
       this.messages = [...this.messages, assistantMessage];
       this.dispatchEvent(new CustomEvent("response-received", {
@@ -98,7 +173,7 @@ var AIChat = class extends LitElement {
       const errorMessage = {
         id: (Date.now() + 1).toString(),
         role: "assistant",
-        content: `Error: ${err.message}
+        content: `Error: ${err instanceof Error ? err.message : "Unknown error"}
 
 Please check your API endpoint configuration.`
       };
@@ -141,6 +216,18 @@ Please check your API endpoint configuration.`
               </div>
               <div class="message-content">
                 <p class="message-text">${msg.content}</p>
+                ${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)}>
+                          ${faq.question}
+                        </li>
+                      `)}
+                    </ul>
+                  </div>
+                ` : ""}
               </div>
             </div>
           `)}
@@ -423,6 +510,59 @@ AIChat.styles = css`
       margin: 0;
     }
 
+    .faq-section {
+      margin-top: 1rem;
+      padding-top: 1rem;
+      border-top: 1px solid #e4e4e7;
+    }
+
+    :host([theme="dark"]) .faq-section {
+      border-top-color: #3f3f46;
+    }
+
+    .faq-title {
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: #3f3f46;
+      margin: 0 0 0.5rem 0;
+    }
+
+    :host([theme="dark"]) .faq-title {
+      color: #d4d4d8;
+    }
+
+    .faq-list {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+
+    .faq-item {
+      font-size: 0.875rem;
+      color: #52525b;
+      padding: 0.5rem;
+      border-radius: 0.375rem;
+      cursor: pointer;
+      transition: background-color 0.2s, color 0.2s;
+    }
+
+    .faq-item:hover {
+      background-color: #f4f4f5;
+      color: #18181b;
+    }
+
+    :host([theme="dark"]) .faq-item {
+      color: #a1a1aa;
+    }
+
+    :host([theme="dark"]) .faq-item:hover {
+      background-color: #27272a;
+      color: #fafafa;
+    }
+
     .loading {
       display: flex;
       gap: 1rem;

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ai-chat.ts"],"names":[],"mappings":"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","file":"index.mjs","sourcesContent":["import { LitElement, html, css, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nconst VERSION = '0.2.1';\n\nexport interface Message {\n  id: string;\n  role: 'user' | 'assistant';\n  content: string;\n}\n\n/**\n * AI Chat Web Component\n *\n * @fires message-sent - Fired when user sends a message\n * @fires response-received - Fired when AI responds\n * @fires error - Fired when an error occurs\n *\n * @example\n * ```html\n * <ai-chat\n *   api-url=\"https://api.example.com\"\n *   session-id=\"user-123\"\n *   title=\"My AI Assistant\">\n * </ai-chat>\n * ```\n */\n@customElement('ai-chat')\nexport class AIChat extends LitElement {\n  static styles = css`\n    :host {\n      font-family: system-ui, -apple-system, sans-serif;\n      color: #09090b;\n    }\n\n    /* Fullscreen mode (default) */\n    :host([mode=\"fullscreen\"]) {\n      display: flex;\n      flex-direction: column;\n      height: 100vh;\n      background: #fafafa;\n    }\n\n    :host([mode=\"fullscreen\"][theme=\"dark\"]) {\n      background: #000;\n      color: #fafafa;\n    }\n\n    /* Widget mode */\n    :host([mode=\"widget\"]) {\n      position: fixed;\n      bottom: 20px;\n      right: 20px;\n      z-index: 9999;\n    }\n\n    .widget-container {\n      position: relative;\n    }\n\n    .widget-button {\n      width: 60px;\n      height: 60px;\n      border-radius: 50%;\n      background: #2563eb;\n      border: none;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n      transition: transform 0.2s, box-shadow 0.2s;\n    }\n\n    .widget-button:hover {\n      transform: scale(1.05);\n      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);\n    }\n\n    .widget-button svg {\n      width: 28px;\n      height: 28px;\n      color: white;\n    }\n\n    .widget-window {\n      position: absolute;\n      bottom: 80px;\n      right: 0;\n      width: 380px;\n      height: 600px;\n      background: #fff;\n      border-radius: 12px;\n      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      opacity: 0;\n      transform: scale(0.9) translateY(20px);\n      pointer-events: none;\n      transition: opacity 0.2s, transform 0.2s;\n    }\n\n    .widget-window.open {\n      opacity: 1;\n      transform: scale(1) translateY(0);\n      pointer-events: all;\n    }\n\n    :host([theme=\"dark\"]) .widget-window {\n      background: #18181b;\n      color: #fafafa;\n    }\n\n    @media (max-width: 480px) {\n      .widget-window {\n        width: calc(100vw - 40px);\n        height: calc(100vh - 100px);\n        bottom: 80px;\n        right: 0;\n      }\n    }\n\n    .header {\n      border-bottom: 1px solid #e4e4e7;\n      background: #fff;\n      padding: 1rem;\n    }\n\n    :host([theme=\"dark\"]) .header {\n      border-bottom-color: #27272a;\n      background: #18181b;\n    }\n\n    .header-content {\n      max-width: 56rem;\n      margin: 0 auto;\n    }\n\n    .title {\n      font-size: 1.25rem;\n      font-weight: 600;\n      margin: 0;\n    }\n\n    .messages-area {\n      flex: 1;\n      overflow-y: auto;\n      padding: 1.5rem 1rem;\n    }\n\n    .messages-container {\n      max-width: 56rem;\n      margin: 0 auto;\n      display: flex;\n      flex-direction: column;\n      gap: 1.5rem;\n    }\n\n    .empty-state {\n      text-align: center;\n      color: #71717a;\n      margin-top: 5rem;\n    }\n\n    :host([theme=\"dark\"]) .empty-state {\n      color: #a1a1aa;\n    }\n\n    .empty-state p {\n      font-size: 1.5rem;\n      font-weight: 500;\n      margin: 0;\n    }\n\n    .message {\n      display: flex;\n      gap: 1rem;\n    }\n\n    .message.user {\n      flex-direction: row-reverse;\n    }\n\n    .avatar {\n      width: 2.5rem;\n      height: 2.5rem;\n      border-radius: 9999px;\n      background: #e4e4e7;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      font-weight: 500;\n      font-size: 0.875rem;\n    }\n\n    :host([theme=\"dark\"]) .avatar {\n      background: #3f3f46;\n    }\n\n    .message-content {\n      max-width: 36rem;\n      padding: 0.75rem 1rem;\n      border-radius: 1rem;\n    }\n\n    .message.user .message-content {\n      background: #2563eb;\n      color: #fff;\n    }\n\n    .message.assistant .message-content {\n      background: #fff;\n      border: 1px solid #e4e4e7;\n      color: #09090b;\n    }\n\n    :host([theme=\"dark\"]) .message.assistant .message-content {\n      background: #27272a;\n      border-color: #3f3f46;\n      color: #fafafa;\n    }\n\n    .message-text {\n      white-space: pre-wrap;\n      margin: 0;\n    }\n\n    .loading {\n      display: flex;\n      gap: 1rem;\n    }\n\n    .spinner {\n      display: inline-block;\n      width: 1.25rem;\n      height: 1.25rem;\n      border: 2px solid #e4e4e7;\n      border-top-color: #71717a;\n      border-radius: 50%;\n      animation: spin 1s linear infinite;\n    }\n\n    @keyframes spin {\n      to { transform: rotate(360deg); }\n    }\n\n    .input-area {\n      border-top: 1px solid #e4e4e7;\n      background: #fff;\n      padding: 1rem;\n    }\n\n    :host([theme=\"dark\"]) .input-area {\n      border-top-color: #27272a;\n      background: #000;\n    }\n\n    .input-form {\n      max-width: 56rem;\n      margin: 0 auto;\n      display: flex;\n      gap: 0.75rem;\n    }\n\n    .input-field {\n      flex: 1;\n      height: 3rem;\n      padding: 0 1rem;\n      border: 1px solid #e4e4e7;\n      border-radius: 0.5rem;\n      font-size: 1rem;\n      font-family: inherit;\n      background: #fff;\n      color: #09090b;\n    }\n\n    :host([theme=\"dark\"]) .input-field {\n      border-color: #3f3f46;\n      background: #18181b;\n      color: #fafafa;\n    }\n\n    .input-field:focus {\n      outline: 2px solid #2563eb;\n      outline-offset: 2px;\n    }\n\n    .input-field:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .send-button {\n      width: 3rem;\n      height: 3rem;\n      border-radius: 9999px;\n      border: none;\n      background: #2563eb;\n      color: #fff;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: background 0.2s;\n    }\n\n    .send-button:hover:not(:disabled) {\n      background: #1d4ed8;\n    }\n\n    .send-button:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .send-icon {\n      width: 1.25rem;\n      height: 1.25rem;\n    }\n\n    .version-tag {\n      text-align: center;\n      padding: 0.5rem;\n      font-size: 0.75rem;\n      color: #71717a;\n      border-top: 1px solid #e4e4e7;\n    }\n\n    :host([theme=\"dark\"]) .version-tag {\n      color: #a1a1aa;\n      border-top-color: #27272a;\n    }\n  `;\n\n  declare apiUrl: string;\n  declare sessionId: string;\n  declare chatTitle: string;\n  declare theme: 'light' | 'dark';\n  declare mode: 'fullscreen' | 'widget';\n  declare initialMessages: Message[];\n\n  @state()\n  private declare messages: Message[];\n\n  @state()\n  private declare input: string;\n\n  @state()\n  private declare isLoading: boolean;\n\n  @state()\n  private declare isOpen: boolean;\n\n  private messagesEndRef?: HTMLDivElement;\n\n  static override properties = {\n    apiUrl: { type: String, attribute: 'api-url' },\n    sessionId: { type: String, attribute: 'session-id' },\n    chatTitle: { type: String, attribute: 'title' },\n    theme: { type: String },\n    mode: { type: String, reflect: true },\n    initialMessages: { type: Array },\n  };\n\n  constructor() {\n    super();\n    this.apiUrl = '';\n    this.sessionId = 'default-session';\n    this.chatTitle = 'My AI Agent';\n    this.theme = 'light';\n    this.mode = 'fullscreen';\n    this.initialMessages = [];\n    this.messages = [];\n    this.input = '';\n    this.isLoading = false;\n    this.isOpen = false;\n  }\n\n  private toggleWidget() {\n    this.isOpen = !this.isOpen;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (this.initialMessages && this.initialMessages.length > 0) {\n      this.messages = [...this.initialMessages];\n    }\n  }\n\n  updated(changedProperties: PropertyValues) {\n    super.updated(changedProperties);\n    if (changedProperties.has('messages')) {\n      this.scrollToBottom();\n    }\n  }\n\n  private scrollToBottom() {\n    requestAnimationFrame(() => {\n      this.messagesEndRef?.scrollIntoView({ behavior: 'smooth' });\n    });\n  }\n\n  private handleInput(e: Event) {\n    this.input = (e.target as HTMLInputElement).value;\n  }\n\n  private async handleSubmit(e: Event) {\n    e.preventDefault();\n\n    if (!this.input.trim() || this.isLoading || !this.apiUrl) return;\n\n    const userMessage: Message = {\n      id: Date.now().toString(),\n      role: 'user',\n      content: this.input.trim(),\n    };\n\n    this.messages = [...this.messages, userMessage];\n    const questionText = this.input.trim();\n    this.input = '';\n    this.isLoading = true;\n\n    // Dispatch message-sent event\n    this.dispatchEvent(new CustomEvent('message-sent', {\n      detail: userMessage,\n      bubbles: true,\n      composed: true,\n    }));\n\n    try {\n      const response = await fetch(`${this.apiUrl}/ask`, {\n        method: 'POST',\n        headers: { 'Content-Type': 'application/json' },\n        body: JSON.stringify({\n          session_id: this.sessionId,\n          question: questionText,\n        }),\n      });\n\n      if (!response.ok) {\n        const errorText = await response.text();\n        throw new Error(`Backend error: ${response.status} ${errorText}`);\n      }\n\n      const data = await response.json();\n\n      const assistantMessage: Message = {\n        id: (Date.now() + 1).toString(),\n        role: 'assistant',\n        content: data.response || 'No response from agent',\n      };\n\n      this.messages = [...this.messages, assistantMessage];\n\n      // Dispatch response-received event\n      this.dispatchEvent(new CustomEvent('response-received', {\n        detail: assistantMessage,\n        bubbles: true,\n        composed: true,\n      }));\n    } catch (err: any) {\n      console.error('Backend connection failed:', err);\n\n      const errorMessage: Message = {\n        id: (Date.now() + 1).toString(),\n        role: 'assistant',\n        content: `Error: ${err.message}\\n\\nPlease check your API endpoint configuration.`,\n      };\n\n      this.messages = [...this.messages, errorMessage];\n\n      // Dispatch error event\n      this.dispatchEvent(new CustomEvent('error', {\n        detail: err,\n        bubbles: true,\n        composed: true,\n      }));\n    } finally {\n      this.isLoading = false;\n    }\n  }\n\n  private renderChatUI() {\n    return html`\n      <!-- Header -->\n      <div class=\"header\">\n        <div class=\"header-content\">\n          <h1 class=\"title\">${this.chatTitle}</h1>\n        </div>\n      </div>\n\n      <!-- Messages Area -->\n      <div class=\"messages-area\">\n        <div class=\"messages-container\">\n          ${this.messages.length === 0 ? html`\n            <div class=\"empty-state\">\n              <p>How can I help you today?</p>\n            </div>\n          ` : ''}\n\n          ${repeat(this.messages, (msg) => msg.id, (msg) => html`\n            <div class=${classMap({\n              message: true,\n              user: msg.role === 'user',\n              assistant: msg.role === 'assistant'\n            })}>\n              <div class=\"avatar\">\n                ${msg.role === 'user' ? 'U' : 'AI'}\n              </div>\n              <div class=\"message-content\">\n                <p class=\"message-text\">${msg.content}</p>\n              </div>\n            </div>\n          `)}\n\n          ${this.isLoading ? html`\n            <div class=\"loading\">\n              <div class=\"avatar\">AI</div>\n              <div class=\"message-content\">\n                <div class=\"spinner\"></div>\n              </div>\n            </div>\n          ` : ''}\n\n          <div ${(el: Element) => this.messagesEndRef = el as HTMLDivElement}></div>\n        </div>\n      </div>\n\n      <!-- Input Area -->\n      <div class=\"input-area\">\n        <form class=\"input-form\" @submit=${this.handleSubmit}>\n          <input\n            type=\"text\"\n            class=\"input-field\"\n            placeholder=\"Type your message...\"\n            .value=${this.input}\n            @input=${this.handleInput}\n            ?disabled=${this.isLoading}\n          />\n          <button\n            type=\"submit\"\n            class=\"send-button\"\n            ?disabled=${this.isLoading || !this.input.trim()}\n            aria-label=\"Send message\"\n          >\n            ${this.isLoading ? html`\n              <div class=\"spinner\" style=\"border-color: #fff; border-top-color: transparent;\"></div>\n            ` : html`\n              <svg class=\"send-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"></line>\n                <polygon points=\"22 2 15 22 11 13 2 9 22 2\"></polygon>\n              </svg>\n            `}\n          </button>\n        </form>\n      </div>\n\n      <!-- Version -->\n      <div class=\"version-tag\">v${VERSION}</div>\n    `;\n  }\n\n  render() {\n    if (this.mode === 'widget') {\n      return html`\n        <div class=\"widget-container\">\n          <!-- Chat Window -->\n          <div class=${classMap({ 'widget-window': true, 'open': this.isOpen })}>\n            ${this.renderChatUI()}\n          </div>\n\n          <!-- Toggle Button -->\n          <button\n            class=\"widget-button\"\n            @click=${this.toggleWidget}\n            aria-label=${this.isOpen ? 'Close chat' : 'Open chat'}\n          >\n            ${this.isOpen ? html`\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n                <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n              </svg>\n            ` : html`\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <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>\n              </svg>\n            `}\n          </button>\n        </div>\n      `;\n    }\n\n    // Fullscreen mode\n    return this.renderChatUI();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-chat': AIChat;\n  }\n}\n"]}
+{"version":3,"sources":["../src/components/ai-chat.ts"],"names":[],"mappings":"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","file":"index.mjs","sourcesContent":["import { LitElement, html, css, PropertyValues } from 'lit';\r\nimport { customElement, state } from 'lit/decorators.js';\r\nimport { repeat } from 'lit/directives/repeat.js';\r\nimport { classMap } from 'lit/directives/class-map.js';\r\n\r\nconst VERSION = '0.2.2';\r\n\r\nexport interface FAQ {\r\n  \"no.\": string;\r\n  question: string;\r\n}\r\n\r\nexport interface Message {\r\n  id: string;\r\n  role: 'user' | 'assistant';\r\n  content: string;\r\n  faqs?: FAQ[];\r\n}\r\n\r\n/**\r\n * AI Chat Web Component\r\n *\r\n * @fires message-sent - Fired when user sends a message\r\n * @fires response-received - Fired when AI responds\r\n * @fires error - Fired when an error occurs\r\n *\r\n * @example\r\n * ```html\r\n * <ai-chat\r\n *   api-url=\"https://api.example.com\"\r\n *   session-id=\"user-123\"\r\n *   title=\"My AI Assistant\">\r\n * </ai-chat>\r\n * ```\r\n */\r\n@customElement('ai-chat')\r\nexport class AIChat extends LitElement {\r\n  static styles = css`\r\n    :host {\r\n      font-family: system-ui, -apple-system, sans-serif;\r\n      color: #09090b;\r\n    }\r\n\r\n    /* Fullscreen mode (default) */\r\n    :host([mode=\"fullscreen\"]) {\r\n      display: flex;\r\n      flex-direction: column;\r\n      height: 100vh;\r\n      background: #fafafa;\r\n    }\r\n\r\n    :host([mode=\"fullscreen\"][theme=\"dark\"]) {\r\n      background: #000;\r\n      color: #fafafa;\r\n    }\r\n\r\n    /* Widget mode */\r\n    :host([mode=\"widget\"]) {\r\n      position: fixed;\r\n      bottom: 20px;\r\n      right: 20px;\r\n      z-index: 9999;\r\n    }\r\n\r\n    .widget-container {\r\n      position: relative;\r\n    }\r\n\r\n    .widget-button {\r\n      width: 60px;\r\n      height: 60px;\r\n      border-radius: 50%;\r\n      background: #2563eb;\r\n      border: none;\r\n      cursor: pointer;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\r\n      transition: transform 0.2s, box-shadow 0.2s;\r\n    }\r\n\r\n    .widget-button:hover {\r\n      transform: scale(1.05);\r\n      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);\r\n    }\r\n\r\n    .widget-button svg {\r\n      width: 28px;\r\n      height: 28px;\r\n      color: white;\r\n    }\r\n\r\n    .widget-window {\r\n      position: absolute;\r\n      bottom: 80px;\r\n      right: 0;\r\n      width: 380px;\r\n      height: 600px;\r\n      background: #fff;\r\n      border-radius: 12px;\r\n      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\r\n      display: flex;\r\n      flex-direction: column;\r\n      overflow: hidden;\r\n      opacity: 0;\r\n      transform: scale(0.9) translateY(20px);\r\n      pointer-events: none;\r\n      transition: opacity 0.2s, transform 0.2s;\r\n    }\r\n\r\n    .widget-window.open {\r\n      opacity: 1;\r\n      transform: scale(1) translateY(0);\r\n      pointer-events: all;\r\n    }\r\n\r\n    :host([theme=\"dark\"]) .widget-window {\r\n      background: #18181b;\r\n      color: #fafafa;\r\n    }\r\n\r\n    @media (max-width: 480px) {\r\n      .widget-window {\r\n        width: calc(100vw - 40px);\r\n        height: calc(100vh - 100px);\r\n        bottom: 80px;\r\n        right: 0;\r\n      }\r\n    }\r\n\r\n    .header {\r\n      border-bottom: 1px solid #e4e4e7;\r\n      background: #fff;\r\n      padding: 1rem;\r\n    }\r\n\r\n    :host([theme=\"dark\"]) .header {\r\n      border-bottom-color: #27272a;\r\n      background: #18181b;\r\n    }\r\n\r\n    .header-content {\r\n      max-width: 56rem;\r\n      margin: 0 auto;\r\n    }\r\n\r\n    .title {\r\n      font-size: 1.25rem;\r\n      font-weight: 600;\r\n      margin: 0;\r\n    }\r\n\r\n    .messages-area {\r\n      flex: 1;\r\n      overflow-y: auto;\r\n      padding: 1.5rem 1rem;\r\n    }\r\n\r\n    .messages-container {\r\n      max-width: 56rem;\r\n      margin: 0 auto;\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 1.5rem;\r\n    }\r\n\r\n    .empty-state {\r\n      text-align: center;\r\n      color: #71717a;\r\n      margin-top: 5rem;\r\n    }\r\n\r\n    :host([theme=\"dark\"]) .empty-state {\r\n      color: #a1a1aa;\r\n    }\r\n\r\n    .empty-state p {\r\n      font-size: 1.5rem;\r\n      font-weight: 500;\r\n      margin: 0;\r\n    }\r\n\r\n    .message {\r\n      display: flex;\r\n      gap: 1rem;\r\n    }\r\n\r\n    .message.user {\r\n      flex-direction: row-reverse;\r\n    }\r\n\r\n    .avatar {\r\n      width: 2.5rem;\r\n      height: 2.5rem;\r\n      border-radius: 9999px;\r\n      background: #e4e4e7;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      flex-shrink: 0;\r\n      font-weight: 500;\r\n      font-size: 0.875rem;\r\n    }\r\n\r\n    :host([theme=\"dark\"]) .avatar {\r\n      background: #3f3f46;\r\n    }\r\n\r\n    .message-content {\r\n      max-width: 36rem;\r\n      padding: 0.75rem 1rem;\r\n      border-radius: 1rem;\r\n    }\r\n\r\n    .message.user .message-content {\r\n      background: #2563eb;\r\n      color: #fff;\r\n    }\r\n\r\n    .message.assistant .message-content {\r\n      background: #fff;\r\n      border: 1px solid #e4e4e7;\r\n      color: #09090b;\r\n    }\r\n\r\n    :host([theme=\"dark\"]) .message.assistant .message-content {\r\n      background: #27272a;\r\n      border-color: #3f3f46;\r\n      color: #fafafa;\r\n    }\r\n\r\n    .message-text {\r\n      white-space: pre-wrap;\r\n      margin: 0;\r\n    }\r\n\r\n    .faq-section {\r\n      margin-top: 1rem;\r\n      padding-top: 1rem;\r\n      border-top: 1px solid #e4e4e7;\r\n    }\r\n\r\n    :host([theme=\"dark\"]) .faq-section {\r\n      border-top-color: #3f3f46;\r\n    }\r\n\r\n    .faq-title {\r\n      font-size: 0.875rem;\r\n      font-weight: 500;\r\n      color: #3f3f46;\r\n      margin: 0 0 0.5rem 0;\r\n    }\r\n\r\n    :host([theme=\"dark\"]) .faq-title {\r\n      color: #d4d4d8;\r\n    }\r\n\r\n    .faq-list {\r\n      list-style: none;\r\n      padding: 0;\r\n      margin: 0;\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 0.5rem;\r\n    }\r\n\r\n    .faq-item {\r\n      font-size: 0.875rem;\r\n      color: #52525b;\r\n      padding: 0.5rem;\r\n      border-radius: 0.375rem;\r\n      cursor: pointer;\r\n      transition: background-color 0.2s, color 0.2s;\r\n    }\r\n\r\n    .faq-item:hover {\r\n      background-color: #f4f4f5;\r\n      color: #18181b;\r\n    }\r\n\r\n    :host([theme=\"dark\"]) .faq-item {\r\n      color: #a1a1aa;\r\n    }\r\n\r\n    :host([theme=\"dark\"]) .faq-item:hover {\r\n      background-color: #27272a;\r\n      color: #fafafa;\r\n    }\r\n\r\n    .loading {\r\n      display: flex;\r\n      gap: 1rem;\r\n    }\r\n\r\n    .spinner {\r\n      display: inline-block;\r\n      width: 1.25rem;\r\n      height: 1.25rem;\r\n      border: 2px solid #e4e4e7;\r\n      border-top-color: #71717a;\r\n      border-radius: 50%;\r\n      animation: spin 1s linear infinite;\r\n    }\r\n\r\n    @keyframes spin {\r\n      to { transform: rotate(360deg); }\r\n    }\r\n\r\n    .input-area {\r\n      border-top: 1px solid #e4e4e7;\r\n      background: #fff;\r\n      padding: 1rem;\r\n    }\r\n\r\n    :host([theme=\"dark\"]) .input-area {\r\n      border-top-color: #27272a;\r\n      background: #000;\r\n    }\r\n\r\n    .input-form {\r\n      max-width: 56rem;\r\n      margin: 0 auto;\r\n      display: flex;\r\n      gap: 0.75rem;\r\n    }\r\n\r\n    .input-field {\r\n      flex: 1;\r\n      height: 3rem;\r\n      padding: 0 1rem;\r\n      border: 1px solid #e4e4e7;\r\n      border-radius: 0.5rem;\r\n      font-size: 1rem;\r\n      font-family: inherit;\r\n      background: #fff;\r\n      color: #09090b;\r\n    }\r\n\r\n    :host([theme=\"dark\"]) .input-field {\r\n      border-color: #3f3f46;\r\n      background: #18181b;\r\n      color: #fafafa;\r\n    }\r\n\r\n    .input-field:focus {\r\n      outline: 2px solid #2563eb;\r\n      outline-offset: 2px;\r\n    }\r\n\r\n    .input-field:disabled {\r\n      opacity: 0.5;\r\n      cursor: not-allowed;\r\n    }\r\n\r\n    .send-button {\r\n      width: 3rem;\r\n      height: 3rem;\r\n      border-radius: 9999px;\r\n      border: none;\r\n      background: #2563eb;\r\n      color: #fff;\r\n      cursor: pointer;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      transition: background 0.2s;\r\n    }\r\n\r\n    .send-button:hover:not(:disabled) {\r\n      background: #1d4ed8;\r\n    }\r\n\r\n    .send-button:disabled {\r\n      opacity: 0.5;\r\n      cursor: not-allowed;\r\n    }\r\n\r\n    .send-icon {\r\n      width: 1.25rem;\r\n      height: 1.25rem;\r\n    }\r\n\r\n    .version-tag {\r\n      text-align: center;\r\n      padding: 0.5rem;\r\n      font-size: 0.75rem;\r\n      color: #71717a;\r\n      border-top: 1px solid #e4e4e7;\r\n    }\r\n\r\n    :host([theme=\"dark\"]) .version-tag {\r\n      color: #a1a1aa;\r\n      border-top-color: #27272a;\r\n    }\r\n  `;\r\n\r\n  declare apiUrl: string;\r\n  declare sessionId: string;\r\n  declare chatTitle: string;\r\n  declare theme: 'light' | 'dark';\r\n  declare mode: 'fullscreen' | 'widget';\r\n  declare initialMessages: Message[];\r\n\r\n  @state()\r\n  private declare messages: Message[];\r\n\r\n  @state()\r\n  private declare input: string;\r\n\r\n  @state()\r\n  private declare isLoading: boolean;\r\n\r\n  @state()\r\n  private declare isOpen: boolean;\r\n\r\n  private messagesEndRef?: HTMLDivElement;\r\n\r\n  static override properties = {\r\n    apiUrl: { type: String, attribute: 'api-url' },\r\n    sessionId: { type: String, attribute: 'session-id' },\r\n    chatTitle: { type: String, attribute: 'title' },\r\n    theme: { type: String },\r\n    mode: { type: String, reflect: true },\r\n    initialMessages: { type: Array },\r\n  };\r\n\r\n  constructor() {\r\n    super();\r\n    this.apiUrl = '';\r\n    this.sessionId = 'default-session';\r\n    this.chatTitle = 'My AI Agent';\r\n    this.theme = 'light';\r\n    this.mode = 'fullscreen';\r\n    this.initialMessages = [];\r\n    this.messages = [];\r\n    this.input = '';\r\n    this.isLoading = false;\r\n    this.isOpen = false;\r\n  }\r\n\r\n  private toggleWidget() {\r\n    this.isOpen = !this.isOpen;\r\n  }\r\n\r\n  connectedCallback() {\r\n    super.connectedCallback();\r\n    if (this.initialMessages && this.initialMessages.length > 0) {\r\n      this.messages = [...this.initialMessages];\r\n    }\r\n  }\r\n\r\n  updated(changedProperties: PropertyValues) {\r\n    super.updated(changedProperties);\r\n    if (changedProperties.has('messages')) {\r\n      this.scrollToBottom();\r\n    }\r\n  }\r\n\r\n  private scrollToBottom() {\r\n    requestAnimationFrame(() => {\r\n      this.messagesEndRef?.scrollIntoView({ behavior: 'smooth' });\r\n    });\r\n  }\r\n\r\n  private handleInput(e: Event) {\r\n    this.input = (e.target as HTMLInputElement).value;\r\n  }\r\n\r\n  private handleFAQClick(question: string) {\r\n    if (this.isLoading) return;\r\n\r\n    // Set the input and trigger submit\r\n    this.input = question;\r\n\r\n    // Create a synthetic submit event\r\n    const submitEvent = new Event('submit', { cancelable: true });\r\n    this.handleSubmit(submitEvent);\r\n  }\r\n\r\n  private async handleSubmit(e: Event) {\r\n    e.preventDefault();\r\n\r\n    if (!this.input.trim() || this.isLoading || !this.apiUrl) return;\r\n\r\n    const userMessage: Message = {\r\n      id: Date.now().toString(),\r\n      role: 'user',\r\n      content: this.input.trim(),\r\n    };\r\n\r\n    this.messages = [...this.messages, userMessage];\r\n    const questionText = this.input.trim();\r\n    this.input = '';\r\n    this.isLoading = true;\r\n\r\n    // Dispatch message-sent event\r\n    this.dispatchEvent(new CustomEvent('message-sent', {\r\n      detail: userMessage,\r\n      bubbles: true,\r\n      composed: true,\r\n    }));\r\n\r\n    try {\r\n      const response = await fetch(`${this.apiUrl}/ask`, {\r\n        method: 'POST',\r\n        headers: { 'Content-Type': 'application/json' },\r\n        body: JSON.stringify({\r\n          session_id: this.sessionId,\r\n          question: questionText,\r\n        }),\r\n      });\r\n\r\n      if (!response.ok) {\r\n        const errorText = await response.text();\r\n        throw new Error(`Backend error: ${response.status} ${errorText}`);\r\n      }\r\n\r\n      const data = await response.json();\r\n      console.log('🔍 Raw API response:', data);\r\n\r\n      // Extract the response text and FAQs properly\r\n      let responseText = 'No response from agent';\r\n      let faqs: FAQ[] | undefined = undefined;\r\n\r\n      if (data && typeof data === 'object' && data.response && typeof data.response === 'string') {\r\n        console.log('📝 data.response type:', typeof data.response);\r\n        console.log('📝 data.response preview:', data.response.substring(0, 100));\r\n\r\n        // Check if data.response contains stringified JSON\r\n        const trimmedResponse = data.response.trim();\r\n        if (trimmedResponse.startsWith('{') || trimmedResponse.startsWith('[')) {\r\n          console.log('🔄 Detected stringified JSON, parsing...');\r\n\r\n          try {\r\n            // First attempt: standard JSON.parse\r\n            let innerData = JSON.parse(data.response);\r\n            console.log('✅ Parsed inner data with JSON.parse');\r\n\r\n            if (innerData && innerData.response && typeof innerData.response === 'string') {\r\n              responseText = innerData.response;\r\n              faqs = innerData.faqs_used || undefined;\r\n              console.log('✅ Extracted text length:', responseText.length);\r\n              console.log('✅ Extracted FAQs count:', faqs?.length || 0);\r\n            } else {\r\n              responseText = data.response;\r\n              faqs = data.faqs_used || undefined;\r\n            }\r\n          } catch (parseError) {\r\n            console.warn('⚠️ JSON.parse failed, using regex extraction...', parseError);\r\n\r\n            // Backend has malformed JSON - extract response text\r\n            const responsePattern = /\"response\"\\s*:\\s*\"([^\"]*(?:\\\\.[^\"]*)*)\"/s;\r\n            const responseMatch = data.response.match(responsePattern);\r\n\r\n            if (responseMatch) {\r\n              responseText = responseMatch[1]\r\n                .replace(/\\\\n/g, '\\n')\r\n                .replace(/\\\\t/g, '\\t')\r\n                .replace(/\\\\r/g, '\\r')\r\n                .replace(/\\\\\"/g, '\"')\r\n                .replace(/\\\\\\\\/g, '\\\\');\r\n              console.log('✅ Extracted response text, length:', responseText.length);\r\n            } else {\r\n              console.error('❌ Could not extract response');\r\n              responseText = 'Error: Could not parse response';\r\n            }\r\n\r\n            // Extract FAQs array\r\n            const faqsPattern = /\"faqs_used\"\\s*:\\s*(\\[[^\\]]*\\])/s;\r\n            const faqsMatch = data.response.match(faqsPattern);\r\n\r\n            if (faqsMatch) {\r\n              try {\r\n                faqs = JSON.parse(faqsMatch[1]);\r\n                console.log('✅ Extracted FAQs, count:', faqs?.length || 0);\r\n              } catch {\r\n                console.log('⚠️ Could not parse FAQs, trying multiline...');\r\n                // FAQs might span multiple lines\r\n                const faqsMultiPattern = /\"faqs_used\"\\s*:\\s*(\\[[\\s\\S]*?\\n\\s*\\])/;\r\n                const faqsMultiMatch = data.response.match(faqsMultiPattern);\r\n                if (faqsMultiMatch) {\r\n                  try {\r\n                    faqs = JSON.parse(faqsMultiMatch[1]);\r\n                    console.log('✅ Extracted multi-line FAQs, count:', faqs?.length || 0);\r\n                  } catch {\r\n                    faqs = undefined;\r\n                  }\r\n                }\r\n              }\r\n            }\r\n          }\r\n        } else {\r\n          // Not JSON, direct text response\r\n          console.log('📄 Direct text response (not JSON)');\r\n          responseText = data.response;\r\n          faqs = data.faqs_used || undefined;\r\n        }\r\n      } else if (typeof data === 'string') {\r\n        console.log('📄 Response is a plain string');\r\n        responseText = data;\r\n      } else if (data && typeof data === 'object') {\r\n        // Fallback for other formats\r\n        console.warn('⚠️ Unexpected format, using fallback');\r\n        responseText = data.message || data.answer || 'Error: Unexpected response format';\r\n      }\r\n\r\n      console.log('🎯 Final responseText length:', responseText.length);\r\n      console.log('🎯 Final responseText preview:', responseText.substring(0, 100));\r\n      console.log('🎯 Final FAQs:', faqs);\r\n\r\n      const assistantMessage: Message = {\r\n        id: (Date.now() + 1).toString(),\r\n        role: 'assistant',\r\n        content: responseText,\r\n        faqs: faqs,\r\n      };\r\n\r\n      this.messages = [...this.messages, assistantMessage];\r\n\r\n      // Dispatch response-received event\r\n      this.dispatchEvent(new CustomEvent('response-received', {\r\n        detail: assistantMessage,\r\n        bubbles: true,\r\n        composed: true,\r\n      }));\r\n    } catch (err) {\r\n      console.error('Backend connection failed:', err);\r\n\r\n      const errorMessage: Message = {\r\n        id: (Date.now() + 1).toString(),\r\n        role: 'assistant',\r\n        content: `Error: ${err instanceof Error ? err.message : 'Unknown error'}\\n\\nPlease check your API endpoint configuration.`,\r\n      };\r\n\r\n      this.messages = [...this.messages, errorMessage];\r\n\r\n      // Dispatch error event\r\n      this.dispatchEvent(new CustomEvent('error', {\r\n        detail: err,\r\n        bubbles: true,\r\n        composed: true,\r\n      }));\r\n    } finally {\r\n      this.isLoading = false;\r\n    }\r\n  }\r\n\r\n  private renderChatUI() {\r\n    return html`\r\n      <!-- Header -->\r\n      <div class=\"header\">\r\n        <div class=\"header-content\">\r\n          <h1 class=\"title\">${this.chatTitle}</h1>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Messages Area -->\r\n      <div class=\"messages-area\">\r\n        <div class=\"messages-container\">\r\n          ${this.messages.length === 0 ? html`\r\n            <div class=\"empty-state\">\r\n              <p>How can I help you today?</p>\r\n            </div>\r\n          ` : ''}\r\n\r\n          ${repeat(this.messages, (msg) => msg.id, (msg) => html`\r\n            <div class=${classMap({\r\n              message: true,\r\n              user: msg.role === 'user',\r\n              assistant: msg.role === 'assistant'\r\n            })}>\r\n              <div class=\"avatar\">\r\n                ${msg.role === 'user' ? 'U' : 'AI'}\r\n              </div>\r\n              <div class=\"message-content\">\r\n                <p class=\"message-text\">${msg.content}</p>\r\n                ${msg.role === 'assistant' && msg.faqs && msg.faqs.length > 0 ? html`\r\n                  <div class=\"faq-section\">\r\n                    <p class=\"faq-title\">Related FAQs:</p>\r\n                    <ul class=\"faq-list\">\r\n                      ${msg.faqs.map(faq => html`\r\n                        <li class=\"faq-item\" @click=${() => this.handleFAQClick(faq.question)}>\r\n                          ${faq.question}\r\n                        </li>\r\n                      `)}\r\n                    </ul>\r\n                  </div>\r\n                ` : ''}\r\n              </div>\r\n            </div>\r\n          `)}\r\n\r\n          ${this.isLoading ? html`\r\n            <div class=\"loading\">\r\n              <div class=\"avatar\">AI</div>\r\n              <div class=\"message-content\">\r\n                <div class=\"spinner\"></div>\r\n              </div>\r\n            </div>\r\n          ` : ''}\r\n\r\n          <div ${(el: Element) => this.messagesEndRef = el as HTMLDivElement}></div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Input Area -->\r\n      <div class=\"input-area\">\r\n        <form class=\"input-form\" @submit=${this.handleSubmit}>\r\n          <input\r\n            type=\"text\"\r\n            class=\"input-field\"\r\n            placeholder=\"Type your message...\"\r\n            .value=${this.input}\r\n            @input=${this.handleInput}\r\n            ?disabled=${this.isLoading}\r\n          />\r\n          <button\r\n            type=\"submit\"\r\n            class=\"send-button\"\r\n            ?disabled=${this.isLoading || !this.input.trim()}\r\n            aria-label=\"Send message\"\r\n          >\r\n            ${this.isLoading ? html`\r\n              <div class=\"spinner\" style=\"border-color: #fff; border-top-color: transparent;\"></div>\r\n            ` : html`\r\n              <svg class=\"send-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                <line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"></line>\r\n                <polygon points=\"22 2 15 22 11 13 2 9 22 2\"></polygon>\r\n              </svg>\r\n            `}\r\n          </button>\r\n        </form>\r\n      </div>\r\n\r\n      <!-- Version -->\r\n      <div class=\"version-tag\">v${VERSION}</div>\r\n    `;\r\n  }\r\n\r\n  render() {\r\n    if (this.mode === 'widget') {\r\n      return html`\r\n        <div class=\"widget-container\">\r\n          <!-- Chat Window -->\r\n          <div class=${classMap({ 'widget-window': true, 'open': this.isOpen })}>\r\n            ${this.renderChatUI()}\r\n          </div>\r\n\r\n          <!-- Toggle Button -->\r\n          <button\r\n            class=\"widget-button\"\r\n            @click=${this.toggleWidget}\r\n            aria-label=${this.isOpen ? 'Close chat' : 'Open chat'}\r\n          >\r\n            ${this.isOpen ? html`\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n                <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n              </svg>\r\n            ` : html`\r\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n                <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>\r\n              </svg>\r\n            `}\r\n          </button>\r\n        </div>\r\n      `;\r\n    }\r\n\r\n    // Fullscreen mode\r\n    return this.renderChatUI();\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    'ai-chat': AIChat;\r\n  }\r\n}\r\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a.izzuddin/ai-chat",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "A framework-agnostic AI chat web component. Works with React, Vue, Svelte, Angular, and vanilla JavaScript.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",