@aikaara/chat-sdk 0.1.0

package/dist/ui.cjs

@@ -0,0 +1,502 @@
+"use strict";var T=Object.defineProperty;var L=(s,t,e)=>t in s?T(s,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):s[t]=e;var i=(s,t,e)=>L(s,typeof t!="symbol"?t+"":t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./headless-CjIUiswe.cjs");class C{constructor(t,e){i(this,"client");i(this,"panel");i(this,"bubble");i(this,"header");i(this,"messageList");i(this,"input");i(this,"errorBanner");i(this,"isOpen",!1);this.client=new o.AikaaraChatClient(t),this.bubble=e.querySelector("aikaara-chat-bubble"),this.panel=e.querySelector(".aikaara-panel"),this.header=e.querySelector("aikaara-chat-header"),this.messageList=e.querySelector("aikaara-message-list"),this.input=e.querySelector("aikaara-chat-input"),this.errorBanner=e.querySelector("aikaara-error-banner"),t.welcomeMessage&&this.messageList.setWelcomeMessage(t.welcomeMessage),t.showTimestamps!==void 0&&this.messageList.setShowTimestamps(t.showTimestamps),this.wireEvents()}async connect(){try{await this.client.connect(),this.messageList.renderMessages(this.client.messages)}catch{this.errorBanner.show("Failed to connect. Retrying...",5e3)}}async disconnect(){await this.client.disconnect()}wireEvents(){this.bubble.addEventListener("toggle",()=>{this.togglePanel()}),this.header.addEventListener("close",()=>{this.togglePanel(!1)}),this.input.addEventListener("send",(t=>{this.handleSend(t.detail.content)})),this.client.on("message:sent",t=>{this.messageList.addMessage(t)}),this.client.on("stream:start",()=>{this.messageList.removeTypingIndicator();const t=this.client.messages[this.client.messages.length-1];t&&this.messageList.addMessage(t)}),this.client.on("stream:update",({content:t})=>{this.messageList.updateStreamingContent(t)}),this.client.on("stream:end",()=>{this.messageList.finalizeStreaming()}),this.client.on("typing:start",()=>{const t=this.client.messages,e=t[t.length-1];(!e||e.status!=="streaming")&&this.messageList.showTypingIndicator()}),this.client.on("typing:stop",()=>{this.messageList.removeTypingIndicator()}),this.client.on("connection:state",t=>{this.header.setStatus(t),t==="connected"?(this.errorBanner.hide(),this.input.disabled=!1):t==="reconnecting"?(this.errorBanner.show("Connection lost. Reconnecting..."),this.input.disabled=!0):t==="disconnected"&&(this.input.disabled=!0)}),this.client.on("error",t=>{this.errorBanner.show(t.message,5e3)})}async handleSend(t){try{await this.client.sendMessage(t)}catch{this.errorBanner.show("Failed to send message",3e3)}}togglePanel(t){this.isOpen=t!==void 0?t:!this.isOpen,this.isOpen?(this.panel.removeAttribute("hidden"),requestAnimationFrame(()=>{this.panel.classList.remove("entering"),this.panel.classList.add("visible"),this.input.focus()})):(this.panel.classList.remove("visible"),this.panel.classList.add("entering"),setTimeout(()=>{this.panel.setAttribute("hidden","")},200))}}class b extends HTMLElement{constructor(){super();i(this,"shadow");i(this,"controller",null);i(this,"_config",{});this.shadow=this.attachShadow({mode:"open"})}static get observedAttributes(){return["base-url","user-token","api-key","title","subtitle","theme","primary-color","position","width","height","placeholder","welcome-message","avatar-url"]}connectedCallback(){this.render(),this.initController()}disconnectedCallback(){var e;(e=this.controller)==null||e.disconnect()}attributeChangedCallback(e,a,r){a!==r&&this.controller&&(this.render(),this.initController())}configure(e){this._config={...this._config,...e}}getConfig(){return{baseUrl:this.getAttribute("base-url")||this._config.baseUrl||"",userToken:this.getAttribute("user-token")||this._config.userToken||"",apiKey:this.getAttribute("api-key")||this._config.apiKey,title:this.getAttribute("title")||this._config.title||"Chat",subtitle:this.getAttribute("subtitle")||this._config.subtitle,theme:this.getAttribute("theme")||this._config.theme||o.DEFAULT_THEME,primaryColor:this.getAttribute("primary-color")||this._config.primaryColor||o.DEFAULT_PRIMARY_COLOR,position:this.getAttribute("position")||this._config.position||o.DEFAULT_POSITION,width:Number(this.getAttribute("width"))||this._config.width||o.DEFAULT_WIDGET_WIDTH,height:Number(this.getAttribute("height"))||this._config.height||o.DEFAULT_WIDGET_HEIGHT,fontFamily:this._config.fontFamily||o.DEFAULT_FONT_FAMILY,borderRadius:this._config.borderRadius??o.DEFAULT_BORDER_RADIUS,placeholder:this.getAttribute("placeholder")||this._config.placeholder||o.DEFAULT_PLACEHOLDER,welcomeMessage:this.getAttribute("welcome-message")||this._config.welcomeMessage,avatarUrl:this.getAttribute("avatar-url")||this._config.avatarUrl,showTimestamps:this._config.showTimestamps??!0,persistConversation:this._config.persistConversation??!0,showBubble:this._config.showBubble??!0,offset:this._config.offset||o.DEFAULT_OFFSET,conversationId:this._config.conversationId,systemPromptId:this._config.systemPromptId,channel:this._config.channel,onMessage:this._config.onMessage,onStatusChange:this._config.onStatusChange,onError:this._config.onError,onStreamUpdate:this._config.onStreamUpdate,onConnectionStateChange:this._config.onConnectionStateChange}}render(){var a,r;const e=this.getConfig();this.shadow.innerHTML=`
+      <style>
+        :host {
+          --aikaara-primary: ${e.primaryColor};
+          --aikaara-primary-hover: ${this.darkenColor(e.primaryColor||o.DEFAULT_PRIMARY_COLOR)};
+          --aikaara-bg: #ffffff;
+          --aikaara-bg-secondary: #f9fafb;
+          --aikaara-text: #1f2937;
+          --aikaara-text-secondary: #6b7280;
+          --aikaara-border: #e5e7eb;
+          --aikaara-radius: ${e.borderRadius}px;
+          --aikaara-font: ${e.fontFamily};
+          --aikaara-panel-width: ${e.width}px;
+          --aikaara-panel-height: ${e.height}px;
+          --aikaara-bubble-size: 60px;
+          --aikaara-offset-x: ${((a=e.offset)==null?void 0:a.x)??20}px;
+          --aikaara-offset-y: ${((r=e.offset)==null?void 0:r.y)??20}px;
+          font-family: var(--aikaara-font);
+          position: fixed;
+          z-index: 9999;
+          bottom: var(--aikaara-offset-y);
+          ${e.position==="bottom-left"?"left":"right"}: var(--aikaara-offset-x);
+        }
+
+        .aikaara-panel {
+          width: var(--aikaara-panel-width);
+          height: var(--aikaara-panel-height);
+          max-height: calc(100vh - 100px);
+          background: var(--aikaara-bg);
+          border-radius: var(--aikaara-radius);
+          box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
+          border: 1px solid var(--aikaara-border);
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+          position: absolute;
+          bottom: calc(var(--aikaara-bubble-size) + 16px);
+          ${e.position==="bottom-left"?"left":"right"}: 0;
+          transition: opacity 200ms ease, transform 200ms ease;
+        }
+
+        .aikaara-panel[hidden] {
+          display: none;
+        }
+
+        .aikaara-panel.entering {
+          opacity: 0;
+          transform: translateY(8px) scale(0.98);
+        }
+
+        .aikaara-panel.visible {
+          opacity: 1;
+          transform: translateY(0) scale(1);
+        }
+      </style>
+
+      <aikaara-chat-bubble></aikaara-chat-bubble>
+
+      <div class="aikaara-panel entering" hidden role="dialog" aria-label="Chat">
+        <aikaara-chat-header
+          title="${e.title||"Chat"}"
+          ${e.subtitle?`subtitle="${e.subtitle}"`:""}
+          ${e.avatarUrl?`avatar-url="${e.avatarUrl}"`:""}
+        ></aikaara-chat-header>
+        <aikaara-message-list></aikaara-message-list>
+        <aikaara-chat-input placeholder="${e.placeholder||o.DEFAULT_PLACEHOLDER}"></aikaara-chat-input>
+        <aikaara-error-banner></aikaara-error-banner>
+      </div>
+    `}async initController(){var a;const e=this.getConfig();!e.baseUrl||!e.userToken||((a=this.controller)==null||a.disconnect(),this.controller=new C(e,this.shadow),await this.controller.connect())}darkenColor(e){try{const a=parseInt(e.replace("#",""),16),r=Math.max(0,(a>>16)-20),n=Math.max(0,(a>>8&255)-20),d=Math.max(0,(a&255)-20);return`#${(r<<16|n<<8|d).toString(16).padStart(6,"0")}`}catch{return e}}}class p extends HTMLElement{constructor(){super();i(this,"shadow");this.shadow=this.attachShadow({mode:"open"})}connectedCallback(){var e;this.render(),(e=this.shadow.querySelector(".bubble"))==null||e.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("toggle",{bubbles:!0,composed:!0}))})}render(){this.shadow.innerHTML=`
+      <style>
+        .bubble {
+          width: var(--aikaara-bubble-size, 60px);
+          height: var(--aikaara-bubble-size, 60px);
+          border-radius: 50%;
+          background: var(--aikaara-primary, #6366f1);
+          color: #ffffff;
+          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 200ms ease, box-shadow 200ms ease;
+        }
+        .bubble:hover {
+          transform: scale(1.05);
+          box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+        }
+        .bubble svg {
+          width: 28px;
+          height: 28px;
+        }
+        .bubble-text {
+          font-family: var(--aikaara-font, system-ui, sans-serif);
+          font-size: 12px;
+          font-weight: 500;
+        }
+      </style>
+      <button class="bubble" aria-label="Open chat">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+        </svg>
+      </button>
+    `}setIcon(e){const a=this.shadow.querySelector(".bubble");a&&(a.innerHTML=e)}}class u extends HTMLElement{constructor(){super();i(this,"shadow");this.shadow=this.attachShadow({mode:"open"})}static get observedAttributes(){return["title","subtitle","avatar-url","status"]}connectedCallback(){var e;this.render(),(e=this.shadow.querySelector(".close-btn"))==null||e.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0}))})}attributeChangedCallback(){this.render()}render(){const e=this.getAttribute("title")||"Chat",a=this.getAttribute("subtitle")||"",r=this.getAttribute("avatar-url"),n=this.getAttribute("status")||"connected",d=n==="connected"?"#10b981":n==="connecting"||n==="reconnecting"?"#f59e0b":"#ef4444";this.shadow.innerHTML=`
+      <style>
+        .header {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          padding: 14px 16px;
+          background: var(--aikaara-primary, #6366f1);
+          color: #ffffff;
+          flex-shrink: 0;
+        }
+        .avatar {
+          width: 36px;
+          height: 36px;
+          border-radius: 50%;
+          background: rgba(255,255,255,0.2);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-shrink: 0;
+          overflow: hidden;
+        }
+        .avatar img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+        .avatar svg {
+          width: 20px;
+          height: 20px;
+        }
+        .info {
+          flex: 1;
+          min-width: 0;
+        }
+        .title {
+          font-size: 15px;
+          font-weight: 600;
+          line-height: 1.2;
+          display: flex;
+          align-items: center;
+          gap: 6px;
+        }
+        .status-dot {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          flex-shrink: 0;
+        }
+        .subtitle {
+          font-size: 12px;
+          opacity: 0.85;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .close-btn {
+          background: none;
+          border: none;
+          color: #ffffff;
+          cursor: pointer;
+          padding: 4px;
+          border-radius: 4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          opacity: 0.8;
+          transition: opacity 200ms;
+        }
+        .close-btn:hover {
+          opacity: 1;
+        }
+        .close-btn svg {
+          width: 20px;
+          height: 20px;
+        }
+      </style>
+      <div class="header">
+        <div class="avatar">
+          ${r?`<img src="${r}" alt="Avatar" />`:'<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"/></svg>'}
+        </div>
+        <div class="info">
+          <div class="title">
+            ${e}
+            <span class="status-dot" style="background:${d}"></span>
+          </div>
+          ${a?`<div class="subtitle">${a}</div>`:""}
+        </div>
+        <button class="close-btn" aria-label="Close chat">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+          </svg>
+        </button>
+      </div>
+    `}setStatus(e){this.setAttribute("status",e)}}function c(s){let t=A(s);return t=t.replace(/```(\w*)\n([\s\S]*?)```/g,(e,a,r)=>`<pre><code>${r.trim()}</code></pre>`),t=t.replace(/`([^`]+)`/g,"<code>$1</code>"),t=t.replace(/\*\*(.+?)\*\*/g,"<strong>$1</strong>"),t=t.replace(/\*(.+?)\*/g,"<em>$1</em>"),t=t.replace(/\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g,'<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'),t=t.replace(/\n/g,"<br>"),t}function A(s){const t={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#039;"};return s.replace(/[&<>"']/g,e=>t[e])}const E=new Set(["p","br","strong","em","code","pre","a","ul","ol","li","blockquote","h1","h2","h3","h4","h5","h6","span","div"]),S={a:new Set(["href","target","rel"]),code:new Set(["class"]),pre:new Set(["class"]),span:new Set(["class"]),div:new Set(["class"])};function h(s){const t=document.createElement("template");return t.innerHTML=s,g(t.content),t.innerHTML}function g(s){const t=Array.from(s.childNodes);for(const e of t)if(e.nodeType===Node.ELEMENT_NODE){const a=e,r=a.tagName.toLowerCase();if(!E.has(r)){const l=document.createTextNode(a.textContent||"");s.replaceChild(l,e);continue}const n=S[r]||new Set,d=Array.from(a.attributes);for(const l of d)n.has(l.name)||a.removeAttribute(l.name);if(a.hasAttribute("href")){const l=a.getAttribute("href")||"";!l.startsWith("http://")&&!l.startsWith("https://")&&!l.startsWith("/")&&a.removeAttribute("href")}g(e)}}class m extends HTMLElement{constructor(){super();i(this,"shadow");i(this,"container");i(this,"welcomeMessage","");i(this,"showTimestamps",!0);this.shadow=this.attachShadow({mode:"open"})}connectedCallback(){this.shadow.innerHTML=`
+      <style>
+        .message-list {
+          flex: 1;
+          overflow-y: auto;
+          padding: 16px;
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+          scroll-behavior: smooth;
+        }
+        .message-list::-webkit-scrollbar { width: 6px; }
+        .message-list::-webkit-scrollbar-track { background: transparent; }
+        .message-list::-webkit-scrollbar-thumb { background: var(--aikaara-border, #e5e7eb); border-radius: 3px; }
+        .message-wrap { display: flex; flex-direction: column; }
+        .message-wrap.user { align-items: flex-end; }
+        .message-wrap.assistant { align-items: flex-start; }
+        .bubble {
+          max-width: 85%;
+          padding: 10px 14px;
+          border-radius: var(--aikaara-radius, 12px);
+          font-size: 14px;
+          line-height: 1.5;
+          word-wrap: break-word;
+          overflow-wrap: break-word;
+        }
+        .bubble.user {
+          background: var(--aikaara-primary, #6366f1);
+          color: #ffffff;
+          border-bottom-right-radius: 4px;
+        }
+        .bubble.assistant {
+          background: var(--aikaara-bg-secondary, #f9fafb);
+          color: var(--aikaara-text, #1f2937);
+          border-bottom-left-radius: 4px;
+        }
+        .bubble pre {
+          background: rgba(0,0,0,0.06);
+          padding: 8px 12px;
+          border-radius: 6px;
+          overflow-x: auto;
+          font-size: 13px;
+          margin: 8px 0;
+        }
+        .bubble code {
+          font-family: 'SF Mono', 'Fira Code', monospace;
+          font-size: 13px;
+        }
+        .bubble.assistant code:not(pre code) {
+          background: rgba(0,0,0,0.06);
+          padding: 2px 4px;
+          border-radius: 3px;
+        }
+        .bubble a { color: inherit; text-decoration: underline; }
+        .timestamp {
+          font-size: 11px;
+          color: var(--aikaara-text-secondary, #6b7280);
+          margin-top: 2px;
+          padding: 0 4px;
+        }
+        .welcome {
+          text-align: center;
+          color: var(--aikaara-text-secondary, #6b7280);
+          font-size: 14px;
+          padding: 24px 16px;
+        }
+        .streaming-cursor::after {
+          content: '\\25CF';
+          animation: blink 1s infinite;
+          margin-left: 2px;
+          font-size: 10px;
+          vertical-align: middle;
+        }
+        @keyframes blink {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0; }
+        }
+        .typing-indicator {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          padding: 10px 14px;
+          align-self: flex-start;
+          background: var(--aikaara-bg-secondary, #f9fafb);
+          border-radius: var(--aikaara-radius, 12px);
+          border-bottom-left-radius: 4px;
+        }
+        .typing-indicator .dot {
+          width: 6px;
+          height: 6px;
+          border-radius: 50%;
+          background: var(--aikaara-text-secondary, #6b7280);
+          animation: typing-bounce 1.4s infinite ease-in-out;
+        }
+        .typing-indicator .dot:nth-child(1) { animation-delay: 0ms; }
+        .typing-indicator .dot:nth-child(2) { animation-delay: 200ms; }
+        .typing-indicator .dot:nth-child(3) { animation-delay: 400ms; }
+        @keyframes typing-bounce {
+          0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
+          30% { transform: translateY(-4px); opacity: 1; }
+        }
+      </style>
+      <div class="message-list"></div>
+    `,this.container=this.shadow.querySelector(".message-list")}setWelcomeMessage(e){this.welcomeMessage=e}setShowTimestamps(e){this.showTimestamps=e}renderMessages(e){if(this.container){if(this.container.innerHTML="",e.length===0&&this.welcomeMessage){this.container.innerHTML=`<div class="welcome">${h(c(this.welcomeMessage))}</div>`;return}for(const a of e)this.appendMessageElement(a);this.scrollToBottom()}}addMessage(e){const a=this.container.querySelector(".welcome");a&&a.remove(),this.appendMessageElement(e),this.scrollToBottom()}updateStreamingContent(e){const a=this.container.querySelector('[data-streaming="true"] .bubble');a&&(a.innerHTML=h(c(e)),a.classList.add("streaming-cursor"),this.scrollToBottom())}finalizeStreaming(){const e=this.container.querySelector('[data-streaming="true"]');if(e){e.removeAttribute("data-streaming");const a=e.querySelector(".bubble");a==null||a.classList.remove("streaming-cursor")}}showTypingIndicator(){this.removeTypingIndicator();const e=document.createElement("div");e.classList.add("typing-indicator"),e.setAttribute("data-typing","true"),e.innerHTML='<span class="dot"></span><span class="dot"></span><span class="dot"></span>',this.container.appendChild(e),this.scrollToBottom()}removeTypingIndicator(){var e;(e=this.container.querySelector('[data-typing="true"]'))==null||e.remove()}appendMessageElement(e){const a=document.createElement("div");a.classList.add("message-wrap",e.role),e.status==="streaming"&&a.setAttribute("data-streaming","true");const r=document.createElement("div");if(r.classList.add("bubble",e.role),e.role==="user"?r.textContent=e.content:(r.innerHTML=h(c(e.content||"")),e.status==="streaming"&&r.classList.add("streaming-cursor")),a.appendChild(r),this.showTimestamps&&e.createdAt){const n=document.createElement("div");n.classList.add("timestamp"),n.textContent=this.formatTime(e.createdAt),a.appendChild(n)}this.container.appendChild(a)}scrollToBottom(){requestAnimationFrame(()=>{this.container.scrollTop=this.container.scrollHeight})}formatTime(e){try{return new Date(e).toLocaleTimeString(void 0,{hour:"2-digit",minute:"2-digit"})}catch{return""}}}class f extends HTMLElement{constructor(){super();i(this,"shadow");this.shadow=this.attachShadow({mode:"open"})}static get observedAttributes(){return["role","content","timestamp"]}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}render(){const e=this.getAttribute("role")||"user",a=this.getAttribute("content")||"",r=this.getAttribute("timestamp")||"",n=e==="user"?document.createTextNode(a).textContent||"":h(c(a));this.shadow.innerHTML=`
+      <style>
+        :host { display: flex; flex-direction: column; }
+        :host([role="user"]) { align-items: flex-end; }
+        :host([role="assistant"]) { align-items: flex-start; }
+        .bubble {
+          max-width: 85%;
+          padding: 10px 14px;
+          border-radius: var(--aikaara-radius, 12px);
+          font-size: 14px;
+          line-height: 1.5;
+          word-wrap: break-word;
+        }
+        .bubble.user {
+          background: var(--aikaara-primary, #6366f1);
+          color: #fff;
+          border-bottom-right-radius: 4px;
+        }
+        .bubble.assistant {
+          background: var(--aikaara-bg-secondary, #f9fafb);
+          color: var(--aikaara-text, #1f2937);
+          border-bottom-left-radius: 4px;
+        }
+        .timestamp {
+          font-size: 11px;
+          color: var(--aikaara-text-secondary, #6b7280);
+          margin-top: 2px;
+          padding: 0 4px;
+        }
+      </style>
+      <div class="bubble ${e}">${n}</div>
+      ${r?`<div class="timestamp">${r}</div>`:""}
+    `}}class x extends HTMLElement{constructor(){super();i(this,"shadow");i(this,"textarea");i(this,"sendBtn");i(this,"_disabled",!1);this.shadow=this.attachShadow({mode:"open"})}connectedCallback(){const e=this.getAttribute("placeholder")||"Type a message...";this.shadow.innerHTML=`
+      <style>
+        .input-container {
+          display: flex;
+          align-items: flex-end;
+          gap: 8px;
+          padding: 12px 16px;
+          border-top: 1px solid var(--aikaara-border, #e5e7eb);
+          background: var(--aikaara-bg, #ffffff);
+        }
+        textarea {
+          flex: 1;
+          resize: none;
+          border: 1px solid var(--aikaara-border, #e5e7eb);
+          border-radius: 8px;
+          padding: 10px 12px;
+          font-family: var(--aikaara-font, system-ui, sans-serif);
+          font-size: 14px;
+          color: var(--aikaara-text, #1f2937);
+          background: var(--aikaara-bg, #ffffff);
+          outline: none;
+          min-height: 40px;
+          max-height: 120px;
+          line-height: 1.4;
+          transition: border-color 200ms ease;
+        }
+        textarea:focus {
+          border-color: var(--aikaara-primary, #6366f1);
+        }
+        textarea::placeholder {
+          color: var(--aikaara-text-secondary, #6b7280);
+        }
+        .send-btn {
+          width: 40px;
+          height: 40px;
+          border: none;
+          border-radius: 50%;
+          background: var(--aikaara-primary, #6366f1);
+          color: #ffffff;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-shrink: 0;
+          transition: background 200ms, opacity 200ms;
+        }
+        .send-btn:hover { background: var(--aikaara-primary-hover, #4f46e5); }
+        .send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+        .send-btn svg { width: 18px; height: 18px; }
+      </style>
+      <div class="input-container">
+        <textarea rows="1" placeholder="${e}"></textarea>
+        <button class="send-btn" aria-label="Send message" disabled>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
+          </svg>
+        </button>
+      </div>
+    `,this.textarea=this.shadow.querySelector("textarea"),this.sendBtn=this.shadow.querySelector(".send-btn"),this.textarea.addEventListener("input",()=>{this.autoGrow(),this.sendBtn.disabled=this._disabled||!this.textarea.value.trim()}),this.textarea.addEventListener("keydown",a=>{a.key==="Enter"&&!a.shiftKey&&(a.preventDefault(),this.handleSend())}),this.sendBtn.addEventListener("click",()=>this.handleSend())}set disabled(e){var a;this._disabled=e,this.textarea&&(this.textarea.disabled=e),this.sendBtn&&(this.sendBtn.disabled=e||!((a=this.textarea)!=null&&a.value.trim()))}get disabled(){return this._disabled}focus(){var e;(e=this.textarea)==null||e.focus()}clear(){this.textarea&&(this.textarea.value="",this.textarea.style.height="auto",this.sendBtn.disabled=!0)}handleSend(){const e=this.textarea.value.trim();!e||this._disabled||(this.dispatchEvent(new CustomEvent("send",{detail:{content:e},bubbles:!0,composed:!0})),this.clear(),this.textarea.focus())}autoGrow(){this.textarea.style.height="auto",this.textarea.style.height=Math.min(this.textarea.scrollHeight,120)+"px"}}class k extends HTMLElement{constructor(){super();i(this,"shadow");this.shadow=this.attachShadow({mode:"open"})}connectedCallback(){this.shadow.innerHTML=`
+      <style>
+        :host { display: none; }
+        :host([visible]) { display: block; }
+        .typing {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          padding: 10px 14px;
+          background: var(--aikaara-bg-secondary, #f9fafb);
+          border-radius: var(--aikaara-radius, 12px);
+          border-bottom-left-radius: 4px;
+          width: fit-content;
+        }
+        .dot {
+          width: 6px;
+          height: 6px;
+          border-radius: 50%;
+          background: var(--aikaara-text-secondary, #6b7280);
+          animation: bounce 1.4s infinite ease-in-out;
+        }
+        .dot:nth-child(1) { animation-delay: 0ms; }
+        .dot:nth-child(2) { animation-delay: 200ms; }
+        .dot:nth-child(3) { animation-delay: 400ms; }
+        @keyframes bounce {
+          0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
+          30% { transform: translateY(-4px); opacity: 1; }
+        }
+      </style>
+      <div class="typing">
+        <span class="dot"></span>
+        <span class="dot"></span>
+        <span class="dot"></span>
+      </div>
+    `}show(){this.setAttribute("visible","")}hide(){this.removeAttribute("visible")}}class y extends HTMLElement{constructor(){super();i(this,"shadow");i(this,"bubble");this.shadow=this.attachShadow({mode:"open"})}connectedCallback(){this.shadow.innerHTML=`
+      <style>
+        :host {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+        }
+        .bubble {
+          max-width: 85%;
+          padding: 10px 14px;
+          border-radius: var(--aikaara-radius, 12px);
+          border-bottom-left-radius: 4px;
+          background: var(--aikaara-bg-secondary, #f9fafb);
+          color: var(--aikaara-text, #1f2937);
+          font-size: 14px;
+          line-height: 1.5;
+          word-wrap: break-word;
+          min-height: 20px;
+        }
+        .bubble pre {
+          background: rgba(0,0,0,0.06);
+          padding: 8px 12px;
+          border-radius: 6px;
+          overflow-x: auto;
+          font-size: 13px;
+          margin: 8px 0;
+        }
+        .bubble code {
+          font-family: 'SF Mono', 'Fira Code', monospace;
+          font-size: 13px;
+        }
+        .bubble code:not(pre code) {
+          background: rgba(0,0,0,0.06);
+          padding: 2px 4px;
+          border-radius: 3px;
+        }
+        .cursor::after {
+          content: '\\25CF';
+          animation: blink 1s infinite;
+          margin-left: 2px;
+          font-size: 10px;
+          vertical-align: middle;
+        }
+        @keyframes blink {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0; }
+        }
+      </style>
+      <div class="bubble cursor"></div>
+    `,this.bubble=this.shadow.querySelector(".bubble")}updateContent(e){this.bubble&&(this.bubble.innerHTML=h(c(e)),this.bubble.classList.add("cursor"))}finalize(){var e;(e=this.bubble)==null||e.classList.remove("cursor")}}class v extends HTMLElement{constructor(){super();i(this,"shadow");i(this,"container");i(this,"dismissTimer",null);this.shadow=this.attachShadow({mode:"open"})}connectedCallback(){var e;this.shadow.innerHTML=`
+      <style>
+        .banner {
+          display: none;
+          padding: 8px 16px;
+          background: #fef2f2;
+          color: #dc2626;
+          font-size: 13px;
+          text-align: center;
+          border-top: 1px solid #fecaca;
+        }
+        .banner.visible {
+          display: block;
+        }
+        .dismiss {
+          background: none;
+          border: none;
+          color: #dc2626;
+          cursor: pointer;
+          font-size: 12px;
+          text-decoration: underline;
+          margin-left: 8px;
+        }
+      </style>
+      <div class="banner">
+        <span class="message"></span>
+        <button class="dismiss">Dismiss</button>
+      </div>
+    `,this.container=this.shadow.querySelector(".banner"),(e=this.shadow.querySelector(".dismiss"))==null||e.addEventListener("click",()=>this.hide())}show(e,a){const r=this.container.querySelector(".message");r&&(r.textContent=e),this.container.classList.add("visible"),this.dismissTimer&&clearTimeout(this.dismissTimer),a&&(this.dismissTimer=setTimeout(()=>this.hide(),a))}hide(){this.container.classList.remove("visible"),this.dismissTimer&&(clearTimeout(this.dismissTimer),this.dismissTimer=null)}}function w(){const s=[["aikaara-chat-widget",b],["aikaara-chat-bubble",p],["aikaara-chat-header",u],["aikaara-message-list",m],["aikaara-message-bubble",f],["aikaara-chat-input",x],["aikaara-typing-indicator",k],["aikaara-streaming-message",y],["aikaara-error-banner",v]];for(const[t,e]of s)customElements.get(t)||customElements.define(t,e)}w();exports.AikaaraChatBubble=p;exports.AikaaraChatHeader=u;exports.AikaaraChatInput=x;exports.AikaaraChatWidget=b;exports.AikaaraErrorBanner=v;exports.AikaaraMessageBubble=f;exports.AikaaraMessageList=m;exports.AikaaraStreamingMessage=y;exports.AikaaraTypingIndicator=k;exports.registerComponents=w;