npm - @a.izzuddin/ai-chat - Versions diffs - 0.2.3 → 0.2.4 - Mend

@a.izzuddin/ai-chat 0.2.3 → 0.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/custom-elements.json CHANGED Viewed

@@ -66,18 +66,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "dist/index.js",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "faqs",
-          "default": "void 0"
-        }
-      ],
-      "exports": []
-    },
     {
       "kind": "javascript-module",
       "path": "examples/angular.component.ts",
@@ -168,6 +156,18 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/index.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "faqs",
+          "default": "void 0"
+        }
+      ],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "lib/utils.ts",
@@ -561,6 +561,26 @@
               "default": "[]",
               "attribute": "initialMessages"
             },
+            {
+              "kind": "field",
+              "name": "botAvatarUrl",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "bot-avatar-url"
+            },
+            {
+              "kind": "field",
+              "name": "backgroundImageUrl",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "background-image-url"
+            },
             {
               "kind": "field",
               "name": "messages",
@@ -731,6 +751,22 @@
               },
               "default": "[]",
               "fieldName": "initialMessages"
+            },
+            {
+              "name": "bot-avatar-url",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "botAvatarUrl"
+            },
+            {
+              "name": "background-image-url",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "backgroundImageUrl"
             }
           ],
           "superclass": {

package/dist/index.d.mts CHANGED Viewed

@@ -36,6 +36,8 @@ declare class AIChat extends LitElement {
     theme: 'light' | 'dark';
     mode: 'fullscreen' | 'widget';
     initialMessages: Message[];
+    botAvatarUrl: string;
+    backgroundImageUrl: string;
     private messages;
     private input;
     private isLoading;
@@ -64,6 +66,14 @@ declare class AIChat extends LitElement {
         initialMessages: {
             type: ArrayConstructor;
         };
+        botAvatarUrl: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        backgroundImageUrl: {
+            type: StringConstructor;
+            attribute: string;
+        };
     };
     constructor();
     private toggleWidget;

package/dist/index.d.ts CHANGED Viewed

@@ -36,6 +36,8 @@ declare class AIChat extends LitElement {
     theme: 'light' | 'dark';
     mode: 'fullscreen' | 'widget';
     initialMessages: Message[];
+    botAvatarUrl: string;
+    backgroundImageUrl: string;
     private messages;
     private input;
     private isLoading;
@@ -64,6 +66,14 @@ declare class AIChat extends LitElement {
         initialMessages: {
             type: ArrayConstructor;
         };
+        botAvatarUrl: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        backgroundImageUrl: {
+            type: StringConstructor;
+            attribute: string;
+        };
     };
     constructor();
     private toggleWidget;

package/dist/index.js CHANGED Viewed

@@ -15,7 +15,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-var VERSION = "0.2.2";
+var VERSION = "0.2.4";
 exports.AIChat = class AIChat extends lit.LitElement {
   constructor() {
     super();
@@ -25,6 +25,8 @@ exports.AIChat = class AIChat extends lit.LitElement {
     this.theme = "light";
     this.mode = "fullscreen";
     this.initialMessages = [];
+    this.botAvatarUrl = "";
+    this.backgroundImageUrl = "";
     this.messages = [];
     this.input = "";
     this.isLoading = false;
@@ -199,7 +201,7 @@ Please check your API endpoint configuration.`
       </div>
       <!-- Messages Area -->
-      <div class="messages-area">
+      <div class="messages-area" style="${this.backgroundImageUrl ? `--background-image-url: url('${this.backgroundImageUrl}')` : ""}">
         <div class="messages-container">
           ${this.messages.length === 0 ? lit.html`
             <div class="empty-state">
@@ -214,7 +216,7 @@ Please check your API endpoint configuration.`
       assistant: msg.role === "assistant"
     })}>
               <div class="avatar">
-                ${msg.role === "user" ? "U" : "AI"}
+                ${msg.role === "user" ? "U" : this.botAvatarUrl ? lit.html`<img src="${this.botAvatarUrl}" alt="AI" class="avatar-image" />` : "AI"}
               </div>
               <div class="message-content">
                 <p class="message-text">${msg.content}</p>
@@ -236,7 +238,9 @@ Please check your API endpoint configuration.`
           ${this.isLoading ? lit.html`
             <div class="loading">
-              <div class="avatar">AI</div>
+              <div class="avatar">
+                ${this.botAvatarUrl ? lit.html`<img src="${this.botAvatarUrl}" alt="AI" class="avatar-image" />` : "AI"}
+              </div>
               <div class="message-content">
                 <div class="spinner"></div>
               </div>
@@ -432,6 +436,23 @@ exports.AIChat.styles = lit.css`
       flex: 1;
       overflow-y: auto;
       padding: 1.5rem 1rem;
+      position: relative;
+    }
+    .messages-area::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-image: var(--background-image-url);
+      background-size: 200px auto 60%;
+      background-position: center center;
+      background-repeat: no-repeat;
+      opacity: 0.5;
+      pointer-events: none;
+      z-index: 0;
     }
     .messages-container {
@@ -440,6 +461,8 @@ exports.AIChat.styles = lit.css`
       display: flex;
       flex-direction: column;
       gap: 1.5rem;
+      position: relative;
+      z-index: 1;
     }
     .empty-state {
@@ -478,12 +501,19 @@ exports.AIChat.styles = lit.css`
       flex-shrink: 0;
       font-weight: 500;
       font-size: 0.875rem;
+      overflow: hidden;
     }
     :host([theme="dark"]) .avatar {
       background: #3f3f46;
     }
+    .avatar-image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
     .message-content {
       max-width: 36rem;
       padding: 0.75rem 1rem;
@@ -677,7 +707,9 @@ exports.AIChat.properties = {
   chatTitle: { type: String, attribute: "title" },
   theme: { type: String },
   mode: { type: String, reflect: true },
-  initialMessages: { type: Array }
+  initialMessages: { type: Array },
+  botAvatarUrl: { type: String, attribute: "bot-avatar-url" },
+  backgroundImageUrl: { type: String, attribute: "background-image-url" }
 };
 __decorateClass([
   decorators_js.state()

package/dist/index.js.map CHANGED Viewed

	@@ -1 +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';\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"]}
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';\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.4';\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 position: relative;\r\n }\r\n\r\n .messages-area::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background-image: var(--background-image-url);\r\n background-size: 200px auto 60%;\r\n background-position: center center;\r\n background-repeat: no-repeat;\r\n opacity: 0.5;\r\n pointer-events: none;\r\n z-index: 0;\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 position: relative;\r\n z-index: 1;\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 overflow: hidden;\r\n }\r\n\r\n :host([theme=\"dark\"]) .avatar {\r\n background: #3f3f46;\r\n }\r\n\r\n .avatar-image {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\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 declare botAvatarUrl: string;\r\n declare backgroundImageUrl: string;\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 botAvatarUrl: { type: String, attribute: 'bot-avatar-url' },\r\n backgroundImageUrl: { type: String, attribute: 'background-image-url' },\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.botAvatarUrl = '';\r\n this.backgroundImageUrl = '';\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\" style=\"${this.backgroundImageUrl ? `--background-image-url: url('${this.backgroundImageUrl}')` : ''}\">\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'\r\n ? 'U'\r\n : this.botAvatarUrl\r\n ? html`<img src=\"${this.botAvatarUrl}\" alt=\"AI\" class=\"avatar-image\" />`\r\n : '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\">\r\n ${this.botAvatarUrl\r\n ? html`<img src=\"${this.botAvatarUrl}\" alt=\"AI\" class=\"avatar-image\" />`\r\n : 'AI'}\r\n </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 CHANGED Viewed

@@ -13,7 +13,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-var VERSION = "0.2.2";
+var VERSION = "0.2.4";
 var AIChat = class extends LitElement {
   constructor() {
     super();
@@ -23,6 +23,8 @@ var AIChat = class extends LitElement {
     this.theme = "light";
     this.mode = "fullscreen";
     this.initialMessages = [];
+    this.botAvatarUrl = "";
+    this.backgroundImageUrl = "";
     this.messages = [];
     this.input = "";
     this.isLoading = false;
@@ -197,7 +199,7 @@ Please check your API endpoint configuration.`
       </div>
       <!-- Messages Area -->
-      <div class="messages-area">
+      <div class="messages-area" style="${this.backgroundImageUrl ? `--background-image-url: url('${this.backgroundImageUrl}')` : ""}">
         <div class="messages-container">
           ${this.messages.length === 0 ? html`
             <div class="empty-state">
@@ -212,7 +214,7 @@ Please check your API endpoint configuration.`
       assistant: msg.role === "assistant"
     })}>
               <div class="avatar">
-                ${msg.role === "user" ? "U" : "AI"}
+                ${msg.role === "user" ? "U" : this.botAvatarUrl ? html`<img src="${this.botAvatarUrl}" alt="AI" class="avatar-image" />` : "AI"}
               </div>
               <div class="message-content">
                 <p class="message-text">${msg.content}</p>
@@ -234,7 +236,9 @@ Please check your API endpoint configuration.`
           ${this.isLoading ? html`
             <div class="loading">
-              <div class="avatar">AI</div>
+              <div class="avatar">
+                ${this.botAvatarUrl ? html`<img src="${this.botAvatarUrl}" alt="AI" class="avatar-image" />` : "AI"}
+              </div>
               <div class="message-content">
                 <div class="spinner"></div>
               </div>
@@ -430,6 +434,23 @@ AIChat.styles = css`
       flex: 1;
       overflow-y: auto;
       padding: 1.5rem 1rem;
+      position: relative;
+    }
+    .messages-area::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-image: var(--background-image-url);
+      background-size: 200px auto 60%;
+      background-position: center center;
+      background-repeat: no-repeat;
+      opacity: 0.5;
+      pointer-events: none;
+      z-index: 0;
     }
     .messages-container {
@@ -438,6 +459,8 @@ AIChat.styles = css`
       display: flex;
       flex-direction: column;
       gap: 1.5rem;
+      position: relative;
+      z-index: 1;
     }
     .empty-state {
@@ -476,12 +499,19 @@ AIChat.styles = css`
       flex-shrink: 0;
       font-weight: 500;
       font-size: 0.875rem;
+      overflow: hidden;
     }
     :host([theme="dark"]) .avatar {
       background: #3f3f46;
     }
+    .avatar-image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
     .message-content {
       max-width: 36rem;
       padding: 0.75rem 1rem;
@@ -675,7 +705,9 @@ AIChat.properties = {
   chatTitle: { type: String, attribute: "title" },
   theme: { type: String },
   mode: { type: String, reflect: true },
-  initialMessages: { type: Array }
+  initialMessages: { type: Array },
+  botAvatarUrl: { type: String, attribute: "bot-avatar-url" },
+  backgroundImageUrl: { type: String, attribute: "background-image-url" }
 };
 __decorateClass([
   state()

package/dist/index.mjs.map CHANGED Viewed

	@@ -1 +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';\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"]}
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';\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.4';\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 position: relative;\r\n }\r\n\r\n .messages-area::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background-image: var(--background-image-url);\r\n background-size: 200px auto 60%;\r\n background-position: center center;\r\n background-repeat: no-repeat;\r\n opacity: 0.5;\r\n pointer-events: none;\r\n z-index: 0;\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 position: relative;\r\n z-index: 1;\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 overflow: hidden;\r\n }\r\n\r\n :host([theme=\"dark\"]) .avatar {\r\n background: #3f3f46;\r\n }\r\n\r\n .avatar-image {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\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 declare botAvatarUrl: string;\r\n declare backgroundImageUrl: string;\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 botAvatarUrl: { type: String, attribute: 'bot-avatar-url' },\r\n backgroundImageUrl: { type: String, attribute: 'background-image-url' },\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.botAvatarUrl = '';\r\n this.backgroundImageUrl = '';\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\" style=\"${this.backgroundImageUrl ? `--background-image-url: url('${this.backgroundImageUrl}')` : ''}\">\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'\r\n ? 'U'\r\n : this.botAvatarUrl\r\n ? html`<img src=\"${this.botAvatarUrl}\" alt=\"AI\" class=\"avatar-image\" />`\r\n : '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\">\r\n ${this.botAvatarUrl\r\n ? html`<img src=\"${this.botAvatarUrl}\" alt=\"AI\" class=\"avatar-image\" />`\r\n : 'AI'}\r\n </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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@a.izzuddin/ai-chat",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "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",