@aikaara/chat-sdk 0.3.0 → 0.3.3

package/dist/ui.cjs

@@ -1,621 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./AikaaraChatClient-kAu65hX-.cjs");class S{client;panel;bubble;header;messageList;input;errorBanner;isOpen=!1;constructor(e,t,a){this.client=new l.AikaaraChatClient(e,{uploadAdapter:a?.uploadAdapter}),this.bubble=t.querySelector("aikaara-chat-bubble"),this.panel=t.querySelector(".aikaara-panel"),this.header=t.querySelector("aikaara-chat-header"),this.messageList=t.querySelector("aikaara-message-list"),this.input=t.querySelector("aikaara-chat-input"),this.errorBanner=t.querySelector("aikaara-error-banner"),e.welcomeMessage&&this.messageList.setWelcomeMessage(e.welcomeMessage),e.showTimestamps!==void 0&&this.messageList.setShowTimestamps(e.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("header-close",()=>{this.togglePanel(!1)}),this.input.addEventListener("send",(e=>{this.handleSend(e.detail.content)})),this.client.on("message:sent",e=>{this.messageList.addMessage(e)}),this.client.on("stream:start",()=>{this.messageList.removeTypingIndicator();const e=this.client.messages[this.client.messages.length-1];e&&this.messageList.addMessage(e)}),this.client.on("stream:update",({content:e})=>{this.messageList.updateStreamingContent(e)}),this.client.on("stream:end",()=>{this.messageList.finalizeStreaming()}),this.client.on("typing:start",()=>{const e=this.client.messages,t=e[e.length-1];(!t||t.status!=="streaming")&&this.messageList.showTypingIndicator()}),this.client.on("typing:stop",()=>{this.messageList.removeTypingIndicator()}),this.client.on("connection:state",e=>{this.header.setStatus(e),e==="connected"?(this.errorBanner.hide(),this.input.disabled=!1):e==="reconnecting"?(this.errorBanner.show("Connection lost. Reconnecting..."),this.input.disabled=!0):e==="disconnected"&&(this.input.disabled=!0)}),this.client.on("error",e=>{this.errorBanner.show(e.message,5e3)}),this.client.on("message:received",e=>{this.messageList.upsertMessage(e)}),this.client.on("message:updated",e=>{this.messageList.upsertMessage(e)}),this.messageList.addEventListener("message-action",e=>{const t=e.detail;t?.text&&this.handleSend(t.text)})}async handleSend(e){try{await this.client.sendMessage(e)}catch{this.errorBanner.show("Failed to send message",3e3)}}sendUserEvent(e,t,a){this.client.sendUserEvent(e,t,a)}getClient(){return this.client}togglePanel(e){this.isOpen=e!==void 0?e:!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 m extends HTMLElement{shadow;controller=null;_config={};static get observedAttributes(){return["base-url","ws-url","user-token","api-key","title","subtitle","theme","primary-color","position","width","height","placeholder","welcome-message","avatar-url"]}constructor(){super(),this.shadow=this.attachShadow({mode:"open"})}connectedCallback(){this.render(),this.initController()}disconnectedCallback(){this.controller?.disconnect()}attributeChangedCallback(e,t,a){t!==a&&this.controller&&(this.render(),this.initController())}configure(e){this._config={...this._config,...e}}getConfig(){return{baseUrl:this.getAttribute("base-url")||this._config.baseUrl||"",wsUrl:this.getAttribute("ws-url")||this._config.wsUrl,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||l.DEFAULT_THEME,primaryColor:this.getAttribute("primary-color")||this._config.primaryColor||l.DEFAULT_PRIMARY_COLOR,position:this.getAttribute("position")||this._config.position||l.DEFAULT_POSITION,width:Number(this.getAttribute("width"))||this._config.width||l.DEFAULT_WIDGET_WIDTH,height:Number(this.getAttribute("height"))||this._config.height||l.DEFAULT_WIDGET_HEIGHT,fontFamily:this._config.fontFamily||l.DEFAULT_FONT_FAMILY,borderRadius:this._config.borderRadius??l.DEFAULT_BORDER_RADIUS,placeholder:this.getAttribute("placeholder")||this._config.placeholder||l.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||l.DEFAULT_OFFSET,conversationId:this._config.conversationId,systemPromptId:this._config.systemPromptId,channel:this._config.channel,extUid:this._config.extUid,transport:this._config.transport,tiledesk:this._config.tiledesk,tiledeskIdentity:this._config.tiledeskIdentity,onMessage:this._config.onMessage,onStatusChange:this._config.onStatusChange,onError:this._config.onError,onStreamUpdate:this._config.onStreamUpdate,onConnectionStateChange:this._config.onConnectionStateChange,onTemplateMessage:this._config.onTemplateMessage}}setUploadAdapter(e){this._config.uploadAdapter=e,this.controller?.getClient().setUploadAdapter(e)}render(){const e=this.getConfig();this.shadow.innerHTML=`
-      <style>
-        :host {
-          --aikaara-primary: ${e.primaryColor};
-          --aikaara-primary-hover: ${this.darkenColor(e.primaryColor||l.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: ${e.offset?.x??20}px;
-          --aikaara-offset-y: ${e.offset?.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);
-        }
-
-        aikaara-chat-header,
-        aikaara-message-list,
-        aikaara-chat-input,
-        aikaara-error-banner {
-          display: block;
-        }
-
-        aikaara-message-list {
-          flex: 1;
-          overflow: scroll;
-          min-height: 0;
-        }
-
-        aikaara-chat-input {
-          flex-shrink: 0;
-        }
-
-        aikaara-chat-header {
-          flex-shrink: 0;
-        }
-      </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||l.DEFAULT_PLACEHOLDER}"></aikaara-chat-input>
-        <aikaara-error-banner></aikaara-error-banner>
-      </div>
-    `}async initController(){const e=this.getConfig();!e.baseUrl||!e.userToken||(this.controller?.disconnect(),this.controller=new S(e,this.shadow,{uploadAdapter:this._config.uploadAdapter}),await this.controller.connect())}sendUserEvent(e,t,a){this.controller?.sendUserEvent(e,t,a)}getClient(){return this.controller?.getClient()??null}darkenColor(e){try{const t=parseInt(e.replace("#",""),16),a=Math.max(0,(t>>16)-20),i=Math.max(0,(t>>8&255)-20),r=Math.max(0,(t&255)-20);return`#${(a<<16|i<<8|r).toString(16).padStart(6,"0")}`}catch{return e}}}class g extends HTMLElement{shadow;constructor(){super(),this.shadow=this.attachShadow({mode:"open"})}connectedCallback(){this.render(),this.shadow.querySelector(".bubble")?.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 t=this.shadow.querySelector(".bubble");t&&(t.innerHTML=e)}}class f extends HTMLElement{shadow;static get observedAttributes(){return["title","subtitle","avatar-url","status"]}constructor(){super(),this.shadow=this.attachShadow({mode:"open"})}connectedCallback(){this.render(),this.bindClose()}attributeChangedCallback(){this.render(),this.bindClose()}bindClose(){this.shadow.querySelector(".close-btn")?.addEventListener("click",()=>{this.dispatchEvent(new CustomEvent("header-close",{bubbles:!0,composed:!0}))})}render(){const e=this.getAttribute("title")||"Chat",t=this.getAttribute("subtitle")||"",a=this.getAttribute("avatar-url"),i=this.getAttribute("status")||"connected",r=i==="connected"?"#10b981":i==="connecting"||i==="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">
-          ${a?`<img src="${a}" 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:${r}"></span>
-          </div>
-          ${t?`<div class="subtitle">${t}</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 d(s){let e=_(s);return e=e.replace(/```(\w*)\n([\s\S]*?)```/g,(t,a,i)=>`<pre><code>${i.trim()}</code></pre>`),e=e.replace(/`([^`]+)`/g,"<code>$1</code>"),e=e.replace(/\*\*(.+?)\*\*/g,"<strong>$1</strong>"),e=e.replace(/\*(.+?)\*/g,"<em>$1</em>"),e=e.replace(/\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g,'<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'),e=e.replace(/\n/g,"<br>"),e}function _(s){const e={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#039;"};return s.replace(/[&<>"']/g,t=>e[t])}const $=new Set(["p","br","strong","em","code","pre","a","ul","ol","li","blockquote","h1","h2","h3","h4","h5","h6","span","div"]),H={a:new Set(["href","target","rel"]),code:new Set(["class"]),pre:new Set(["class"]),span:new Set(["class"]),div:new Set(["class"])};function c(s){const e=document.createElement("template");return e.innerHTML=s,x(e.content),e.innerHTML}function x(s){const e=Array.from(s.childNodes);for(const t of e)if(t.nodeType===Node.ELEMENT_NODE){const a=t,i=a.tagName.toLowerCase();if(!$.has(i)){const n=document.createTextNode(a.textContent||"");s.replaceChild(n,t);continue}const r=H[i]||new Set,o=Array.from(a.attributes);for(const n of o)r.has(n.name)||a.removeAttribute(n.name);if(a.hasAttribute("href")){const n=a.getAttribute("href")||"";!n.startsWith("http://")&&!n.startsWith("https://")&&!n.startsWith("/")&&a.removeAttribute("href")}x(t)}}class k extends HTMLElement{shadow;container;welcomeMessage="";showTimestamps=!0;constructor(){super(),this.shadow=this.attachShadow({mode:"open"})}connectedCallback(){this.shadow.innerHTML=`
-      <style>
-        :host {
-          display: flex;
-          flex-direction: column;
-          min-height: 0;
-        }
-        .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,
-        .message-wrap.agent,
-        .message-wrap.system { align-items: flex-start; }
-        .message-wrap.system .bubble {
-          background: transparent;
-          color: var(--aikaara-text-secondary, #6b7280);
-          font-size: 12px;
-          font-style: italic;
-          padding: 4px 0;
-        }
-        .attachments {
-          display: flex;
-          flex-direction: column;
-          gap: 4px;
-          margin-top: 6px;
-        }
-        .attachment {
-          display: inline-flex;
-          align-items: center;
-          gap: 6px;
-          padding: 6px 10px;
-          background: rgba(0,0,0,0.05);
-          border-radius: 8px;
-          font-size: 12px;
-          color: inherit;
-          text-decoration: none;
-        }
-        .attachment:hover { background: rgba(0,0,0,0.08); }
-        .status-tick {
-          font-size: 10px;
-          margin-left: 4px;
-          color: var(--aikaara-text-secondary, #6b7280);
-        }
-        .status-tick.read { color: var(--aikaara-primary, #6366f1); }
-        aikaara-template-renderer { display: block; margin-top: 6px; }
-        .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"),this.welcomeMessage&&this.renderMessages([])}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">${c(d(this.welcomeMessage))}</div>`;return}for(const t of e)this.appendMessageElement(t);this.scrollToBottom()}}addMessage(e){const t=this.container.querySelector(".welcome");t&&t.remove(),this.appendMessageElement(e),this.scrollToBottom()}updateStreamingContent(e){const t=this.container.querySelector('[data-streaming="true"] .bubble');t&&(t.innerHTML=c(d(e)),t.classList.add("streaming-cursor"),this.scrollToBottom())}finalizeStreaming(){const e=this.container.querySelector('[data-streaming="true"]');e&&(e.removeAttribute("data-streaming"),e.querySelector(".bubble")?.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(){this.container.querySelector('[data-typing="true"]')?.remove()}appendMessageElement(e){const t=document.createElement("div");t.classList.add("message-wrap",e.role),e.status==="streaming"&&t.setAttribute("data-streaming","true"),e.externalId&&(t.dataset.externalId=e.externalId),t.dataset.messageId=e.id;const a=document.createElement("div");if(a.classList.add("bubble",e.role),e.role==="user"?a.textContent=e.content:(a.innerHTML=c(d(e.content||"")),e.status==="streaming"&&a.classList.add("streaming-cursor")),e.template?.contentType){const i=document.createElement("aikaara-template-renderer");i.setAttribute("content-type",e.template.contentType),e.template.templateId&&i.setAttribute("template-id",e.template.templateId),i.setPayload(e.template.payload,e.role!=="user"?e.content:void 0),a.appendChild(i)}if(e.attachments?.length){const i=document.createElement("div");i.classList.add("attachments");for(const r of e.attachments){const o=document.createElement("a");o.classList.add("attachment"),o.href=r.fileUrl,o.target="_blank",o.rel="noopener noreferrer",o.textContent=`📎 ${r.fileName}`,i.appendChild(o)}a.appendChild(i)}if(t.appendChild(a),this.showTimestamps&&e.createdAt||e.role==="user"&&e.status){const i=document.createElement("div");if(i.classList.add("timestamp"),this.showTimestamps&&e.createdAt&&(i.textContent=this.formatTime(e.createdAt)),e.role==="user"&&e.status){const r=document.createElement("span");r.classList.add("status-tick"),e.status==="read"&&r.classList.add("read"),r.textContent={sending:" ○",sent:" ✓",delivered:" ✓✓",read:" ✓✓"}[e.status]??"",i.appendChild(r)}t.appendChild(i)}this.container.appendChild(t)}upsertMessage(e){const t=this.findRenderedMessage(e);t&&t.remove(),this.appendMessageElement(e),this.scrollToBottom()}findRenderedMessage(e){if(e.externalId){const t=this.container.querySelector(`[data-external-id="${CSS.escape(e.externalId)}"]`);if(t)return t}return this.container.querySelector(`[data-message-id="${CSS.escape(e.id)}"]`)}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 y extends HTMLElement{shadow;templatePayload=null;attachments=[];static get observedAttributes(){return["role","content","timestamp","content-type","template-id","inner-message","message-id","status"]}constructor(){super(),this.shadow=this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}setTemplatePayload(e){this.templatePayload=e,this.render()}setAttachments(e){this.attachments=e,this.render()}render(){const e=this.getAttribute("role")||"user",t=this.getAttribute("content")||"",a=this.getAttribute("timestamp")||"",i=this.getAttribute("status")||"",r=this.getAttribute("content-type")||"",o=this.getAttribute("template-id")||"",n=this.getAttribute("inner-message")||"",p=e==="user"?document.createTextNode(t).textContent||"":c(d(t)),u=e==="user"&&i,E=i==="sending"?"○":i==="sent"?"✓":i==="delivered"||i==="read"?"✓✓":"";this.shadow.innerHTML=`
-      <style>
-        :host { display: flex; flex-direction: column; }
-        :host([role="user"]) { align-items: flex-end; }
-        :host([role="assistant"]),
-        :host([role="agent"]),
-        :host([role="system"]) { 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, .bubble.agent {
-          background: var(--aikaara-bg-secondary, #f9fafb);
-          color: var(--aikaara-text, #1f2937);
-          border-bottom-left-radius: 4px;
-        }
-        .bubble.system {
-          background: transparent;
-          color: var(--aikaara-text-secondary, #6b7280);
-          font-size: 12px;
-          font-style: italic;
-        }
-        .timestamp {
-          font-size: 11px;
-          color: var(--aikaara-text-secondary, #6b7280);
-          margin-top: 2px;
-          padding: 0 4px;
-        }
-        .status {
-          font-size: 10px;
-          color: ${i==="read"?"var(--aikaara-primary, #6366f1)":"var(--aikaara-text-secondary, #6b7280)"};
-          margin-left: 4px;
-        }
-        .attachments {
-          display: flex;
-          flex-direction: column;
-          gap: 6px;
-          margin-top: 8px;
-        }
-        .attachment {
-          display: inline-flex;
-          align-items: center;
-          gap: 6px;
-          padding: 6px 10px;
-          background: rgba(0,0,0,0.05);
-          border-radius: 8px;
-          font-size: 12px;
-          color: inherit;
-          text-decoration: none;
-          max-width: 100%;
-        }
-        .attachment:hover { background: rgba(0,0,0,0.08); }
-        aikaara-template-renderer { display: block; margin-top: 6px; }
-      </style>
-      <div class="bubble ${e}">
-        <div class="content">${p}</div>
-        ${r?`<aikaara-template-renderer
-                content-type="${r}"
-                template-id="${o}"
-                inner-message="${b(n)}"
-              ></aikaara-template-renderer>`:""}
-        ${this.renderAttachments()}
-      </div>
-      ${a||u?`
-        <div class="timestamp">
-          ${a}${u?`<span class="status">${E}</span>`:""}
-        </div>
-      `:""}
-    `;const h=this.shadow.querySelector("aikaara-template-renderer");h&&this.templatePayload!==null&&h.setPayload(this.templatePayload,n),h&&h.addEventListener("template-action",M=>{this.dispatchEvent(new CustomEvent("message-action",{detail:M.detail,bubbles:!0,composed:!0}))})}renderAttachments(){return this.attachments.length?`<div class="attachments">${this.attachments.map(t=>`<a class="attachment" href="${b(t.fileUrl)}" target="_blank" rel="noopener noreferrer">
-             📎 ${z(t.fileName)}
-           </a>`).join("")}</div>`:""}}function b(s){return String(s).replace(/[&<>"']/g,e=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"})[e])}function z(s){return String(s).replace(/[&<>]/g,e=>({"&":"&amp;","<":"&lt;",">":"&gt;"})[e])}class v extends HTMLElement{shadow;textarea;sendBtn;_disabled=!1;constructor(){super(),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",t=>{t.key==="Enter"&&!t.shiftKey&&(t.preventDefault(),this.handleSend())}),this.sendBtn.addEventListener("click",()=>this.handleSend())}set disabled(e){this._disabled=e,this.textarea&&(this.textarea.disabled=e),this.sendBtn&&(this.sendBtn.disabled=e||!this.textarea?.value.trim())}get disabled(){return this._disabled}focus(){this.textarea?.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 w extends HTMLElement{shadow;constructor(){super(),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 C extends HTMLElement{shadow;bubble;constructor(){super(),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=c(d(e)),this.bubble.classList.add("cursor"))}finalize(){this.bubble?.classList.remove("cursor")}}class A extends HTMLElement{shadow;container;dismissTimer=null;constructor(){super(),this.shadow=this.attachShadow({mode:"open"})}connectedCallback(){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"),this.shadow.querySelector(".dismiss")?.addEventListener("click",()=>this.hide())}show(e,t){const a=this.container.querySelector(".message");a&&(a.textContent=e),this.container.classList.add("visible"),this.dismissTimer&&clearTimeout(this.dismissTimer),t&&(this.dismissTimer=setTimeout(()=>this.hide(),t))}hide(){this.container.classList.remove("visible"),this.dismissTimer&&(clearTimeout(this.dismissTimer),this.dismissTimer=null)}}class T extends HTMLElement{shadow;payloadData=null;innerMessage="";static get observedAttributes(){return["content-type","template-id","inner-message"]}constructor(){super(),this.shadow=this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}setPayload(e,t){this.payloadData=e,t!==void 0&&(this.innerMessage=t),this.render()}render(){const e=this.getAttribute("content-type")??"",t=this.getAttribute("template-id")??"",a=this.getAttribute("inner-message")??this.innerMessage;this.shadow.innerHTML=`
-      <style>
-        :host { display: block; }
-        .inner { font-size: 14px; line-height: 1.5; color: var(--aikaara-text, #1f2937); }
-        .placeholder {
-          font-size: 12px;
-          color: var(--aikaara-text-secondary, #6b7280);
-          padding: 6px 0;
-        }
-      </style>
-      ${a?'<div class="inner"></div>':""}
-      <slot></slot>
-    `;const i=this.shadow.querySelector(".inner");if(i&&a&&(i.textContent=a),!e)return;const r=t?`aikaara-template-${t}`:`aikaara-template-${e}`;if(customElements.get(r)){const o=this.querySelector(r);if(o){o.setPayload?.(this.payloadData);return}const n=document.createElement(r);n.setPayload?.(this.payloadData),n.addEventListener("template-action",p=>{this.dispatchEvent(new CustomEvent("template-action",{detail:p.detail,bubbles:!0,composed:!0}))}),this.appendChild(n)}}}function L(){const s=[["aikaara-chat-widget",m],["aikaara-chat-bubble",g],["aikaara-chat-header",f],["aikaara-message-list",k],["aikaara-message-bubble",y],["aikaara-chat-input",v],["aikaara-typing-indicator",w],["aikaara-streaming-message",C],["aikaara-error-banner",A],["aikaara-template-renderer",T]];for(const[e,t]of s)customElements.get(e)||customElements.define(e,t)}L();exports.AikaaraChatBubble=g;exports.AikaaraChatHeader=f;exports.AikaaraChatInput=v;exports.AikaaraChatWidget=m;exports.AikaaraErrorBanner=A;exports.AikaaraMessageBubble=y;exports.AikaaraMessageList=k;exports.AikaaraStreamingMessage=C;exports.AikaaraTemplateRenderer=T;exports.AikaaraTypingIndicator=w;exports.registerComponents=L;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./ui-B0-Np9Dn.cjs");exports.AikaaraChatBubble=a.AikaaraChatBubble;exports.AikaaraChatHeader=a.AikaaraChatHeader;exports.AikaaraChatInput=a.AikaaraChatInput;exports.AikaaraChatWidget=a.AikaaraChatWidget;exports.AikaaraErrorBanner=a.AikaaraErrorBanner;exports.AikaaraMessageBubble=a.AikaaraMessageBubble;exports.AikaaraMessageList=a.AikaaraMessageList;exports.AikaaraModalAction=a.AikaaraModalAction;exports.AikaaraOptionList=a.AikaaraOptionList;exports.AikaaraStreamingMessage=a.AikaaraStreamingMessage;exports.AikaaraSubmitAction=a.AikaaraSubmitAction;exports.AikaaraSystemPill=a.AikaaraSystemPill;exports.AikaaraTemplateRenderer=a.AikaaraTemplateRenderer;exports.AikaaraTypingIndicator=a.AikaaraTypingIndicator;exports.registerComponents=a.registerComponents;