@a.izzuddin/ai-chat 0.1.2 → 0.2.1

package/custom-elements.json

@@ -528,6 +528,17 @@
               "default": "'light'",
               "attribute": "theme"
             },
+            {
+              "kind": "field",
+              "name": "mode",
+              "privacy": "public",
+              "type": {
+                "text": "'fullscreen' | 'widget'"
+              },
+              "default": "'fullscreen'",
+              "attribute": "mode",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "initialMessages",
@@ -565,6 +576,15 @@
               "privacy": "private",
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "isOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "messagesEndRef",
@@ -573,6 +593,11 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "toggleWidget",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "scrollToBottom",
@@ -603,6 +628,11 @@
                   }
                 }
               ]
+            },
+            {
+              "kind": "method",
+              "name": "renderChatUI",
+              "privacy": "private"
             }
           ],
           "events": [
@@ -661,6 +691,14 @@
               "default": "'light'",
               "fieldName": "theme"
             },
+            {
+              "name": "mode",
+              "type": {
+                "text": "'fullscreen' | 'widget'"
+              },
+              "default": "'fullscreen'",
+              "fieldName": "mode"
+            },
             {
               "name": "initialMessages",
               "type": {

package/dist/index.d.mts

@@ -29,10 +29,12 @@ declare class AIChat extends LitElement {
     sessionId: string;
     chatTitle: string;
     theme: 'light' | 'dark';
+    mode: 'fullscreen' | 'widget';
     initialMessages: Message[];
     private messages;
     private input;
     private isLoading;
+    private isOpen;
     private messagesEndRef?;
     static properties: {
         apiUrl: {
@@ -50,16 +52,22 @@ declare class AIChat extends LitElement {
         theme: {
             type: StringConstructor;
         };
+        mode: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         initialMessages: {
             type: ArrayConstructor;
         };
     };
     constructor();
+    private toggleWidget;
     connectedCallback(): void;
     updated(changedProperties: PropertyValues): void;
     private scrollToBottom;
     private handleInput;
     private handleSubmit;
+    private renderChatUI;
     render(): lit_html.TemplateResult<1>;
 }
 declare global {

package/dist/index.d.ts

@@ -29,10 +29,12 @@ declare class AIChat extends LitElement {
     sessionId: string;
     chatTitle: string;
     theme: 'light' | 'dark';
+    mode: 'fullscreen' | 'widget';
     initialMessages: Message[];
     private messages;
     private input;
     private isLoading;
+    private isOpen;
     private messagesEndRef?;
     static properties: {
         apiUrl: {
@@ -50,16 +52,22 @@ declare class AIChat extends LitElement {
         theme: {
             type: StringConstructor;
         };
+        mode: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         initialMessages: {
             type: ArrayConstructor;
         };
     };
     constructor();
+    private toggleWidget;
     connectedCallback(): void;
     updated(changedProperties: PropertyValues): void;
     private scrollToBottom;
     private handleInput;
     private handleSubmit;
+    private renderChatUI;
     render(): lit_html.TemplateResult<1>;
 }
 declare global {

package/dist/index.js

@@ -15,6 +15,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
+var VERSION = "0.2.1";
 exports.AIChat = class AIChat extends lit.LitElement {
   constructor() {
     super();
@@ -22,10 +23,15 @@ exports.AIChat = class AIChat extends lit.LitElement {
     this.sessionId = "default-session";
     this.chatTitle = "My AI Agent";
     this.theme = "light";
+    this.mode = "fullscreen";
     this.initialMessages = [];
     this.messages = [];
     this.input = "";
     this.isLoading = false;
+    this.isOpen = false;
+  }
+  toggleWidget() {
+    this.isOpen = !this.isOpen;
   }
   connectedCallback() {
     super.connectedCallback();
@@ -108,7 +114,7 @@ Please check your API endpoint configuration.`
       this.isLoading = false;
     }
   }
-  render() {
+  renderChatUI() {
     return lit.html`
       <!-- Header -->
       <div class="header">
@@ -182,24 +188,137 @@ Please check your API endpoint configuration.`
           </button>
         </form>
       </div>
+
+      <!-- Version -->
+      <div class="version-tag">v${VERSION}</div>
     `;
   }
+  render() {
+    if (this.mode === "widget") {
+      return lit.html`
+        <div class="widget-container">
+          <!-- Chat Window -->
+          <div class=${classMap_js.classMap({ "widget-window": true, "open": this.isOpen })}>
+            ${this.renderChatUI()}
+          </div>
+
+          <!-- Toggle Button -->
+          <button
+            class="widget-button"
+            @click=${this.toggleWidget}
+            aria-label=${this.isOpen ? "Close chat" : "Open chat"}
+          >
+            ${this.isOpen ? lit.html`
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <line x1="18" y1="6" x2="6" y2="18"></line>
+                <line x1="6" y1="6" x2="18" y2="18"></line>
+              </svg>
+            ` : lit.html`
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+              </svg>
+            `}
+          </button>
+        </div>
+      `;
+    }
+    return this.renderChatUI();
+  }
 };
 exports.AIChat.styles = lit.css`
     :host {
+      font-family: system-ui, -apple-system, sans-serif;
+      color: #09090b;
+    }
+
+    /* Fullscreen mode (default) */
+    :host([mode="fullscreen"]) {
       display: flex;
       flex-direction: column;
       height: 100vh;
-      font-family: system-ui, -apple-system, sans-serif;
       background: #fafafa;
-      color: #09090b;
     }
 
-    :host([theme="dark"]) {
+    :host([mode="fullscreen"][theme="dark"]) {
       background: #000;
       color: #fafafa;
     }
 
+    /* Widget mode */
+    :host([mode="widget"]) {
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      z-index: 9999;
+    }
+
+    .widget-container {
+      position: relative;
+    }
+
+    .widget-button {
+      width: 60px;
+      height: 60px;
+      border-radius: 50%;
+      background: #2563eb;
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      transition: transform 0.2s, box-shadow 0.2s;
+    }
+
+    .widget-button:hover {
+      transform: scale(1.05);
+      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+    }
+
+    .widget-button svg {
+      width: 28px;
+      height: 28px;
+      color: white;
+    }
+
+    .widget-window {
+      position: absolute;
+      bottom: 80px;
+      right: 0;
+      width: 380px;
+      height: 600px;
+      background: #fff;
+      border-radius: 12px;
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      opacity: 0;
+      transform: scale(0.9) translateY(20px);
+      pointer-events: none;
+      transition: opacity 0.2s, transform 0.2s;
+    }
+
+    .widget-window.open {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+      pointer-events: all;
+    }
+
+    :host([theme="dark"]) .widget-window {
+      background: #18181b;
+      color: #fafafa;
+    }
+
+    @media (max-width: 480px) {
+      .widget-window {
+        width: calc(100vw - 40px);
+        height: calc(100vh - 100px);
+        bottom: 80px;
+        right: 0;
+      }
+    }
+
     .header {
       border-bottom: 1px solid #e4e4e7;
       background: #fff;
@@ -398,12 +517,26 @@ exports.AIChat.styles = lit.css`
       width: 1.25rem;
       height: 1.25rem;
     }
+
+    .version-tag {
+      text-align: center;
+      padding: 0.5rem;
+      font-size: 0.75rem;
+      color: #71717a;
+      border-top: 1px solid #e4e4e7;
+    }
+
+    :host([theme="dark"]) .version-tag {
+      color: #a1a1aa;
+      border-top-color: #27272a;
+    }
   `;
 exports.AIChat.properties = {
   apiUrl: { type: String, attribute: "api-url" },
   sessionId: { type: String, attribute: "session-id" },
   chatTitle: { type: String, attribute: "title" },
   theme: { type: String },
+  mode: { type: String, reflect: true },
   initialMessages: { type: Array }
 };
 __decorateClass([
@@ -415,6 +548,9 @@ __decorateClass([
 __decorateClass([
   decorators_js.state()
 ], exports.AIChat.prototype, "isLoading", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.AIChat.prototype, "isOpen", 2);
 exports.AIChat = __decorateClass([
   decorators_js.customElement("ai-chat")
 ], exports.AIChat);

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\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      display: flex;\n      flex-direction: column;\n      height: 100vh;\n      font-family: system-ui, -apple-system, sans-serif;\n      background: #fafafa;\n      color: #09090b;\n    }\n\n    :host([theme=\"dark\"]) {\n      background: #000;\n      color: #fafafa;\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\n  declare apiUrl: string;\n  declare sessionId: string;\n  declare chatTitle: string;\n  declare theme: 'light' | 'dark';\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  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    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.initialMessages = [];\n    this.messages = [];\n    this.input = '';\n    this.isLoading = false;\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  render() {\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  }\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":";;;;;;;;;;;;;;;;;AAKA,IAAM,OAAA,GAAU,OAAA;AAyBHA,cAAA,GAAN,qBAAqBC,cAAA,CAAW;AAAA,EAkVrC,WAAA,GAAc;AACZ,IAAA,KAAA,EAAM;AACN,IAAA,IAAA,CAAK,MAAA,GAAS,EAAA;AACd,IAAA,IAAA,CAAK,SAAA,GAAY,iBAAA;AACjB,IAAA,IAAA,CAAK,SAAA,GAAY,aAAA;AACjB,IAAA,IAAA,CAAK,KAAA,GAAQ,OAAA;AACb,IAAA,IAAA,CAAK,IAAA,GAAO,YAAA;AACZ,IAAA,IAAA,CAAK,kBAAkB,EAAC;AACxB,IAAA,IAAA,CAAK,WAAW,EAAC;AACjB,IAAA,IAAA,CAAK,KAAA,GAAQ,EAAA;AACb,IAAA,IAAA,CAAK,SAAA,GAAY,KAAA;AACjB,IAAA,IAAA,CAAK,MAAA,GAAS,KAAA;AAAA,EAChB;AAAA,EAEQ,YAAA,GAAe;AACrB,IAAA,IAAA,CAAK,MAAA,GAAS,CAAC,IAAA,CAAK,MAAA;AAAA,EACtB;AAAA,EAEA,iBAAA,GAAoB;AAClB,IAAA,KAAA,CAAM,iBAAA,EAAkB;AACxB,IAAA,IAAI,IAAA,CAAK,eAAA,IAAmB,IAAA,CAAK,eAAA,CAAgB,SAAS,CAAA,EAAG;AAC3D,MAAA,IAAA,CAAK,QAAA,GAAW,CAAC,GAAG,IAAA,CAAK,eAAe,CAAA;AAAA,IAC1C;AAAA,EACF;AAAA,EAEA,QAAQ,iBAAA,EAAmC;AACzC,IAAA,KAAA,CAAM,QAAQ,iBAAiB,CAAA;AAC/B,IAAA,IAAI,iBAAA,CAAkB,GAAA,CAAI,UAAU,CAAA,EAAG;AACrC,MAAA,IAAA,CAAK,cAAA,EAAe;AAAA,IACtB;AAAA,EACF;AAAA,EAEQ,cAAA,GAAiB;AACvB,IAAA,qBAAA,CAAsB,MAAM;AAC1B,MAAA,IAAA,CAAK,cAAA,EAAgB,cAAA,CAAe,EAAE,QAAA,EAAU,UAAU,CAAA;AAAA,IAC5D,CAAC,CAAA;AAAA,EACH;AAAA,EAEQ,YAAY,CAAA,EAAU;AAC5B,IAAA,IAAA,CAAK,KAAA,GAAS,EAAE,MAAA,CAA4B,KAAA;AAAA,EAC9C;AAAA,EAEA,MAAc,aAAa,CAAA,EAAU;AACnC,IAAA,CAAA,CAAE,cAAA,EAAe;AAEjB,IAAA,IAAI,CAAC,KAAK,KAAA,CAAM,IAAA,MAAU,IAAA,CAAK,SAAA,IAAa,CAAC,IAAA,CAAK,MAAA,EAAQ;AAE1D,IAAA,MAAM,WAAA,GAAuB;AAAA,MAC3B,EAAA,EAAI,IAAA,CAAK,GAAA,EAAI,CAAE,QAAA,EAAS;AAAA,MACxB,IAAA,EAAM,MAAA;AAAA,MACN,OAAA,EAAS,IAAA,CAAK,KAAA,CAAM,IAAA;AAAK,KAC3B;AAEA,IAAA,IAAA,CAAK,QAAA,GAAW,CAAC,GAAG,IAAA,CAAK,UAAU,WAAW,CAAA;AAC9C,IAAA,MAAM,YAAA,GAAe,IAAA,CAAK,KAAA,CAAM,IAAA,EAAK;AACrC,IAAA,IAAA,CAAK,KAAA,GAAQ,EAAA;AACb,IAAA,IAAA,CAAK,SAAA,GAAY,IAAA;AAGjB,IAAA,IAAA,CAAK,aAAA,CAAc,IAAI,WAAA,CAAY,cAAA,EAAgB;AAAA,MACjD,MAAA,EAAQ,WAAA;AAAA,MACR,OAAA,EAAS,IAAA;AAAA,MACT,QAAA,EAAU;AAAA,KACX,CAAC,CAAA;AAEF,IAAA,IAAI;AACF,MAAA,MAAM,WAAW,MAAM,KAAA,CAAM,CAAA,EAAG,IAAA,CAAK,MAAM,CAAA,IAAA,CAAA,EAAQ;AAAA,QACjD,MAAA,EAAQ,MAAA;AAAA,QACR,OAAA,EAAS,EAAE,cAAA,EAAgB,kBAAA,EAAmB;AAAA,QAC9C,IAAA,EAAM,KAAK,SAAA,CAAU;AAAA,UACnB,YAAY,IAAA,CAAK,SAAA;AAAA,UACjB,QAAA,EAAU;AAAA,SACX;AAAA,OACF,CAAA;AAED,MAAA,IAAI,CAAC,SAAS,EAAA,EAAI;AAChB,QAAA,MAAM,SAAA,GAAY,MAAM,QAAA,CAAS,IAAA,EAAK;AACtC,QAAA,MAAM,IAAI,KAAA,CAAM,CAAA,eAAA,EAAkB,SAAS,MAAM,CAAA,CAAA,EAAI,SAAS,CAAA,CAAE,CAAA;AAAA,MAClE;AAEA,MAAA,MAAM,IAAA,GAAO,MAAM,QAAA,CAAS,IAAA,EAAK;AAEjC,MAAA,MAAM,gBAAA,GAA4B;AAAA,QAChC,EAAA,EAAA,CAAK,IAAA,CAAK,GAAA,EAAI,GAAI,GAAG,QAAA,EAAS;AAAA,QAC9B,IAAA,EAAM,WAAA;AAAA,QACN,OAAA,EAAS,KAAK,QAAA,IAAY;AAAA,OAC5B;AAEA,MAAA,IAAA,CAAK,QAAA,GAAW,CAAC,GAAG,IAAA,CAAK,UAAU,gBAAgB,CAAA;AAGnD,MAAA,IAAA,CAAK,aAAA,CAAc,IAAI,WAAA,CAAY,mBAAA,EAAqB;AAAA,QACtD,MAAA,EAAQ,gBAAA;AAAA,QACR,OAAA,EAAS,IAAA;AAAA,QACT,QAAA,EAAU;AAAA,OACX,CAAC,CAAA;AAAA,IACJ,SAAS,GAAA,EAAU;AACjB,MAAA,OAAA,CAAQ,KAAA,CAAM,8BAA8B,GAAG,CAAA;AAE/C,MAAA,MAAM,YAAA,GAAwB;AAAA,QAC5B,EAAA,EAAA,CAAK,IAAA,CAAK,GAAA,EAAI,GAAI,GAAG,QAAA,EAAS;AAAA,QAC9B,IAAA,EAAM,WAAA;AAAA,QACN,OAAA,EAAS,CAAA,OAAA,EAAU,GAAA,CAAI,OAAO;;AAAA,6CAAA;AAAA,OAChC;AAEA,MAAA,IAAA,CAAK,QAAA,GAAW,CAAC,GAAG,IAAA,CAAK,UAAU,YAAY,CAAA;AAG/C,MAAA,IAAA,CAAK,aAAA,CAAc,IAAI,WAAA,CAAY,OAAA,EAAS;AAAA,QAC1C,MAAA,EAAQ,GAAA;AAAA,QACR,OAAA,EAAS,IAAA;AAAA,QACT,QAAA,EAAU;AAAA,OACX,CAAC,CAAA;AAAA,IACJ,CAAA,SAAE;AACA,MAAA,IAAA,CAAK,SAAA,GAAY,KAAA;AAAA,IACnB;AAAA,EACF;AAAA,EAEQ,YAAA,GAAe;AACrB,IAAA,OAAOC,QAAA;AAAA;AAAA;AAAA;AAAA,4BAAA,EAImB,KAAK,SAAS,CAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA,UAAA,EAOhC,IAAA,CAAK,QAAA,CAAS,MAAA,KAAW,CAAA,GAAIA,QAAA;AAAA;AAAA;AAAA;AAAA,UAAA,CAAA,GAI3B,EAAE;;AAAA,UAAA,EAEJC,gBAAA,CAAO,KAAK,QAAA,EAAU,CAAC,QAAQ,GAAA,CAAI,EAAA,EAAI,CAAC,GAAA,KAAQD,QAAA;AAAA,uBAAA,EACnCE,oBAAA,CAAS;AAAA,MACpB,OAAA,EAAS,IAAA;AAAA,MACT,IAAA,EAAM,IAAI,IAAA,KAAS,MAAA;AAAA,MACnB,SAAA,EAAW,IAAI,IAAA,KAAS;AAAA,KACzB,CAAC,CAAA;AAAA;AAAA,gBAAA,EAEI,GAAA,CAAI,IAAA,KAAS,MAAA,GAAS,GAAA,GAAM,IAAI;AAAA;AAAA;AAAA,wCAAA,EAGR,IAAI,OAAO,CAAA;AAAA;AAAA;AAAA,UAAA,CAG1C,CAAC;;AAAA,UAAA,EAEA,KAAK,SAAA,GAAYF,QAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAAA,CAAA,GAOf,EAAE;;AAAA,eAAA,EAEC,CAAC,EAAA,KAAgB,IAAA,CAAK,cAAA,GAAiB,EAAoB,CAAA;AAAA;AAAA;;AAAA;AAAA;AAAA,yCAAA,EAMjC,KAAK,YAAY,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAA,EAKvC,KAAK,KAAK;AAAA,mBAAA,EACV,KAAK,WAAW;AAAA,sBAAA,EACb,KAAK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAA,EAKd,KAAK,SAAA,IAAa,CAAC,IAAA,CAAK,KAAA,CAAM,MAAM;AAAA;AAAA;AAAA,YAAA,EAG9C,KAAK,SAAA,GAAYA,QAAA;AAAA;AAAA,YAAA,CAAA,GAEfA,QAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAA,CAKH;AAAA;AAAA;AAAA;;AAAA;AAAA,gCAAA,EAMqB,OAAO,CAAA;AAAA,IAAA,CAAA;AAAA,EAEvC;AAAA,EAEA,MAAA,GAAS;AACP,IAAA,IAAI,IAAA,CAAK,SAAS,QAAA,EAAU;AAC1B,MAAA,OAAOA,QAAA;AAAA;AAAA;AAAA,qBAAA,EAGUE,oBAAA,CAAS,EAAE,eAAA,EAAiB,IAAA,EAAM,QAAQ,IAAA,CAAK,MAAA,EAAQ,CAAC,CAAA;AAAA,YAAA,EACjE,IAAA,CAAK,cAAc;AAAA;;AAAA;AAAA;AAAA;AAAA,mBAAA,EAMZ,KAAK,YAAY;AAAA,uBAAA,EACb,IAAA,CAAK,MAAA,GAAS,YAAA,GAAe,WAAW;AAAA;AAAA,YAAA,EAEnD,KAAK,MAAA,GAASF,QAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAA,CAAA,GAKZA,QAAA;AAAA;AAAA;AAAA;AAAA,YAAA,CAIH;AAAA;AAAA;AAAA,MAAA,CAAA;AAAA,IAIT;AAGA,IAAA,OAAO,KAAK,YAAA,EAAa;AAAA,EAC3B;AACF;AAzjBaF,cAAA,CACJ,MAAA,GAASK,OAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA,CAAA;AADLL,cAAA,CAyUK,UAAA,GAAa;AAAA,EAC3B,MAAA,EAAQ,EAAE,IAAA,EAAM,MAAA,EAAQ,WAAW,SAAA,EAAU;AAAA,EAC7C,SAAA,EAAW,EAAE,IAAA,EAAM,MAAA,EAAQ,WAAW,YAAA,EAAa;AAAA,EACnD,SAAA,EAAW,EAAE,IAAA,EAAM,MAAA,EAAQ,WAAW,OAAA,EAAQ;AAAA,EAC9C,KAAA,EAAO,EAAE,IAAA,EAAM,MAAA,EAAO;AAAA,EACtB,IAAA,EAAM,EAAE,IAAA,EAAM,MAAA,EAAQ,SAAS,IAAA,EAAK;AAAA,EACpC,eAAA,EAAiB,EAAE,IAAA,EAAM,KAAA;AAC3B,CAAA;AApBgB,eAAA,CAAA;AAAA,EADfM,mBAAA;AAAM,CAAA,EA3TIN,cAAA,CA4TK,SAAA,EAAA,UAAA,EAAA,CAAA,CAAA;AAGA,eAAA,CAAA;AAAA,EADfM,mBAAA;AAAM,CAAA,EA9TIN,cAAA,CA+TK,SAAA,EAAA,OAAA,EAAA,CAAA,CAAA;AAGA,eAAA,CAAA;AAAA,EADfM,mBAAA;AAAM,CAAA,EAjUIN,cAAA,CAkUK,SAAA,EAAA,WAAA,EAAA,CAAA,CAAA;AAGA,eAAA,CAAA;AAAA,EADfM,mBAAA;AAAM,CAAA,EApUIN,cAAA,CAqUK,SAAA,EAAA,QAAA,EAAA,CAAA,CAAA;AArULA,cAAA,GAAN,eAAA,CAAA;AAAA,EADNO,4BAAc,SAAS;AAAA,CAAA,EACXP,cAAA,CAAA","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"]}

package/dist/index.mjs

@@ -13,6 +13,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
+var VERSION = "0.2.1";
 var AIChat = class extends LitElement {
   constructor() {
     super();
@@ -20,10 +21,15 @@ var AIChat = class extends LitElement {
     this.sessionId = "default-session";
     this.chatTitle = "My AI Agent";
     this.theme = "light";
+    this.mode = "fullscreen";
     this.initialMessages = [];
     this.messages = [];
     this.input = "";
     this.isLoading = false;
+    this.isOpen = false;
+  }
+  toggleWidget() {
+    this.isOpen = !this.isOpen;
   }
   connectedCallback() {
     super.connectedCallback();
@@ -106,7 +112,7 @@ Please check your API endpoint configuration.`
       this.isLoading = false;
     }
   }
-  render() {
+  renderChatUI() {
     return html`
       <!-- Header -->
       <div class="header">
@@ -180,24 +186,137 @@ Please check your API endpoint configuration.`
           </button>
         </form>
       </div>
+
+      <!-- Version -->
+      <div class="version-tag">v${VERSION}</div>
     `;
   }
+  render() {
+    if (this.mode === "widget") {
+      return html`
+        <div class="widget-container">
+          <!-- Chat Window -->
+          <div class=${classMap({ "widget-window": true, "open": this.isOpen })}>
+            ${this.renderChatUI()}
+          </div>
+
+          <!-- Toggle Button -->
+          <button
+            class="widget-button"
+            @click=${this.toggleWidget}
+            aria-label=${this.isOpen ? "Close chat" : "Open chat"}
+          >
+            ${this.isOpen ? html`
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <line x1="18" y1="6" x2="6" y2="18"></line>
+                <line x1="6" y1="6" x2="18" y2="18"></line>
+              </svg>
+            ` : html`
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+              </svg>
+            `}
+          </button>
+        </div>
+      `;
+    }
+    return this.renderChatUI();
+  }
 };
 AIChat.styles = css`
     :host {
+      font-family: system-ui, -apple-system, sans-serif;
+      color: #09090b;
+    }
+
+    /* Fullscreen mode (default) */
+    :host([mode="fullscreen"]) {
       display: flex;
       flex-direction: column;
       height: 100vh;
-      font-family: system-ui, -apple-system, sans-serif;
       background: #fafafa;
-      color: #09090b;
     }
 
-    :host([theme="dark"]) {
+    :host([mode="fullscreen"][theme="dark"]) {
       background: #000;
       color: #fafafa;
     }
 
+    /* Widget mode */
+    :host([mode="widget"]) {
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      z-index: 9999;
+    }
+
+    .widget-container {
+      position: relative;
+    }
+
+    .widget-button {
+      width: 60px;
+      height: 60px;
+      border-radius: 50%;
+      background: #2563eb;
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      transition: transform 0.2s, box-shadow 0.2s;
+    }
+
+    .widget-button:hover {
+      transform: scale(1.05);
+      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+    }
+
+    .widget-button svg {
+      width: 28px;
+      height: 28px;
+      color: white;
+    }
+
+    .widget-window {
+      position: absolute;
+      bottom: 80px;
+      right: 0;
+      width: 380px;
+      height: 600px;
+      background: #fff;
+      border-radius: 12px;
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      opacity: 0;
+      transform: scale(0.9) translateY(20px);
+      pointer-events: none;
+      transition: opacity 0.2s, transform 0.2s;
+    }
+
+    .widget-window.open {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+      pointer-events: all;
+    }
+
+    :host([theme="dark"]) .widget-window {
+      background: #18181b;
+      color: #fafafa;
+    }
+
+    @media (max-width: 480px) {
+      .widget-window {
+        width: calc(100vw - 40px);
+        height: calc(100vh - 100px);
+        bottom: 80px;
+        right: 0;
+      }
+    }
+
     .header {
       border-bottom: 1px solid #e4e4e7;
       background: #fff;
@@ -396,12 +515,26 @@ AIChat.styles = css`
       width: 1.25rem;
       height: 1.25rem;
     }
+
+    .version-tag {
+      text-align: center;
+      padding: 0.5rem;
+      font-size: 0.75rem;
+      color: #71717a;
+      border-top: 1px solid #e4e4e7;
+    }
+
+    :host([theme="dark"]) .version-tag {
+      color: #a1a1aa;
+      border-top-color: #27272a;
+    }
   `;
 AIChat.properties = {
   apiUrl: { type: String, attribute: "api-url" },
   sessionId: { type: String, attribute: "session-id" },
   chatTitle: { type: String, attribute: "title" },
   theme: { type: String },
+  mode: { type: String, reflect: true },
   initialMessages: { type: Array }
 };
 __decorateClass([
@@ -413,6 +546,9 @@ __decorateClass([
 __decorateClass([
   state()
 ], AIChat.prototype, "isLoading", 2);
+__decorateClass([
+  state()
+], AIChat.prototype, "isOpen", 2);
 AIChat = __decorateClass([
   customElement("ai-chat")
 ], AIChat);

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\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      display: flex;\n      flex-direction: column;\n      height: 100vh;\n      font-family: system-ui, -apple-system, sans-serif;\n      background: #fafafa;\n      color: #09090b;\n    }\n\n    :host([theme=\"dark\"]) {\n      background: #000;\n      color: #fafafa;\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\n  declare apiUrl: string;\n  declare sessionId: string;\n  declare chatTitle: string;\n  declare theme: 'light' | 'dark';\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  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    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.initialMessages = [];\n    this.messages = [];\n    this.input = '';\n    this.isLoading = false;\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  render() {\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  }\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';\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"]}

package/package.json

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