@kilnai/widget 0.9.1 → 0.10.0

package/dist/widget.js

@@ -1,16 +1,16 @@
-(()=>{var{defineProperty:x,getOwnPropertyNames:v,getOwnPropertyDescriptor:y}=Object,m=Object.prototype.hasOwnProperty;function w(i){return this[i]}var z=(i)=>{var n=(g??=new WeakMap).get(i),o;if(n)return n;if(n=x({},"__esModule",{value:!0}),i&&typeof i==="object"||typeof i==="function"){for(var r of v(i))if(!m.call(n,r))x(n,r,{get:w.bind(i,r),enumerable:!(o=y(i,r))||o.enumerable})}return g.set(i,n),n},g;var Y=(i)=>i;function $(i,n){this[i]=Y.bind(null,n)}var W=(i,n)=>{for(var o in n)x(i,o,{get:n[o],enumerable:!0,configurable:!0,set:$.bind(n,o)})};var S={};W(S,{KilnWidget:()=>c});class u{ws=null;reconnectTimer=null;reconnectDelay=1000;maxReconnectDelay=30000;intentionalClose=!1;messageHandler=null;statusHandler=null;url;userId;constructor(i,n,o){let r=i.startsWith("https")?"wss":"ws",t=i.replace(/^https?:\/\//,"").replace(/^wss?:\/\//,""),a=`kiln_widget_${o}`;this.userId=sessionStorage.getItem(a)??crypto.randomUUID(),sessionStorage.setItem(a,this.userId),this.url=`${r}://${t}/apps/${n}/ws?widgetId=${o}&userId=${encodeURIComponent(this.userId)}`}connect(){this.intentionalClose=!1,this.setStatus("connecting");let i=new WebSocket(this.url);this.ws=i,i.onopen=()=>{this.reconnectDelay=1000,this.setStatus("connected")},i.onmessage=(n)=>{try{let o=JSON.parse(n.data);if(o.type==="ping"){try{i.send(JSON.stringify({type:"pong"}))}catch{}return}this.messageHandler?.(o)}catch{}},i.onerror=()=>this.setStatus("error"),i.onclose=()=>{if(this.ws=null,!this.intentionalClose)this.setStatus("disconnected"),this.scheduleReconnect()}}send(i){if(!this.ws||this.ws.readyState!==WebSocket.OPEN)return;let n={type:"message",content:i};this.ws.send(JSON.stringify(n))}onMessage(i){this.messageHandler=i}onStatusChange(i){this.statusHandler=i}disconnect(){if(this.intentionalClose=!0,this.reconnectTimer)clearTimeout(this.reconnectTimer),this.reconnectTimer=null;this.ws?.close(),this.ws=null,this.setStatus("disconnected")}get connected(){return this.ws?.readyState===WebSocket.OPEN}setStatus(i){this.statusHandler?.(i)}scheduleReconnect(){this.reconnectTimer=setTimeout(()=>{this.reconnectTimer=null,this.connect()},this.reconnectDelay),this.reconnectDelay=Math.min(this.reconnectDelay*2,this.maxReconnectDelay)}}function h(i){let n=i==="dark";return`
+(()=>{var{defineProperty:f,getOwnPropertyNames:w,getOwnPropertyDescriptor:z}=Object,Y=Object.prototype.hasOwnProperty;function $(n){return this[n]}var W=(n)=>{var i=(v??=new WeakMap).get(n),o;if(i)return i;if(i=f({},"__esModule",{value:!0}),n&&typeof n==="object"||typeof n==="function"){for(var r of w(n))if(!Y.call(i,r))f(i,r,{get:$.bind(n,r),enumerable:!(o=z(n,r))||o.enumerable})}return v.set(n,i),i},v;var C=(n)=>n;function M(n,i){this[n]=C.bind(null,i)}var j=(n,i)=>{for(var o in i)f(n,o,{get:i[o],enumerable:!0,configurable:!0,set:M.bind(i,o)})};var K={};j(K,{KilnWidget:()=>p});class u{ws=null;reconnectTimer=null;reconnectDelay=1000;maxReconnectDelay=30000;intentionalClose=!1;messageHandler=null;statusHandler=null;url;userId;constructor(n,i,o){let r=n.startsWith("https")?"wss":"ws",a=n.replace(/^https?:\/\//,"").replace(/^wss?:\/\//,""),l=`kiln_uid_${o}`;this.userId=localStorage.getItem(l)??crypto.randomUUID(),localStorage.setItem(l,this.userId),this.url=`${r}://${a}/apps/${i}/ws?widgetId=${o}&userId=${encodeURIComponent(this.userId)}`}connect(){this.intentionalClose=!1,this.setStatus("connecting");let n=new WebSocket(this.url);this.ws=n,n.onopen=()=>{this.reconnectDelay=1000,this.setStatus("connected")},n.onmessage=(i)=>{try{let o=JSON.parse(i.data);if(o.type==="ping"){try{n.send(JSON.stringify({type:"pong"}))}catch{}return}this.messageHandler?.(o)}catch{}},n.onerror=()=>this.setStatus("error"),n.onclose=()=>{if(this.ws=null,!this.intentionalClose)this.setStatus("disconnected"),this.scheduleReconnect()}}send(n){if(!this.ws||this.ws.readyState!==WebSocket.OPEN)return;let i={type:"message",content:n};this.ws.send(JSON.stringify(i))}identify(n){if(!this.ws||this.ws.readyState!==WebSocket.OPEN)return;let i={type:"identify",visitor:n};this.ws.send(JSON.stringify(i))}onMessage(n){this.messageHandler=n}onStatusChange(n){this.statusHandler=n}disconnect(){if(this.intentionalClose=!0,this.reconnectTimer)clearTimeout(this.reconnectTimer),this.reconnectTimer=null;this.ws?.close(),this.ws=null,this.setStatus("disconnected")}get connected(){return this.ws?.readyState===WebSocket.OPEN}setStatus(n){this.statusHandler?.(n)}scheduleReconnect(){this.reconnectTimer=setTimeout(()=>{this.reconnectTimer=null,this.connect()},this.reconnectDelay),this.reconnectDelay=Math.min(this.reconnectDelay*2,this.maxReconnectDelay)}}function y(n){let i=n==="dark";return`
     :host {
-      --kiln-bg: ${n?"#1a1a2e":"#ffffff"};
-      --kiln-bg-secondary: ${n?"#2a2a3e":"#f0f0f0"};
-      --kiln-text: ${n?"#e8e8f0":"#1a1a1a"};
-      --kiln-text-secondary: ${n?"#a0a0b8":"#6b7280"};
-      --kiln-border: ${n?"#3a3a5c":"#e5e7eb"};
+      --kiln-bg: ${i?"#1a1a2e":"#ffffff"};
+      --kiln-bg-secondary: ${i?"#2a2a3e":"#f0f0f0"};
+      --kiln-text: ${i?"#e8e8f0":"#1a1a1a"};
+      --kiln-text-secondary: ${i?"#a0a0b8":"#6b7280"};
+      --kiln-border: ${i?"#3a3a5c":"#e5e7eb"};
       --kiln-accent: #1a1a2e;
       --kiln-accent-text: #ffffff;
       --kiln-user-bubble: #1a1a2e;
       --kiln-user-text: #ffffff;
-      --kiln-assistant-bubble: ${n?"#2a2a3e":"#f0f0f0"};
-      --kiln-assistant-text: ${n?"#e8e8f0":"#1a1a1a"};
+      --kiln-assistant-bubble: ${i?"#2a2a3e":"#f0f0f0"};
+      --kiln-assistant-text: ${i?"#e8e8f0":"#1a1a1a"};
       --kiln-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
       --kiln-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
       --kiln-radius: 16px;
@@ -20,7 +20,7 @@
       --kiln-status-error: #ef4444;
     }
 
-    ${i==="auto"?`
+    ${n==="auto"?`
     @media (prefers-color-scheme: dark) {
       :host {
         --kiln-bg: #1a1a2e;
@@ -446,5 +446,91 @@
       width: 18px;
       height: 18px;
     }
-  `}var C='<svg xmlns="http://www.w3.org/2000/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>',M='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" 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>',j='<svg xmlns="http://www.w3.org/2000/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>';function L(i){let n=document.createDocumentFragment(),o=/(\*\*[^*]+\*\*|`[^`]+`|\n)/g,r=0,t;while((t=o.exec(i))!==null){if(t.index>r)n.appendChild(document.createTextNode(i.slice(r,t.index)));let a=t[0];if(a===`
-`)n.appendChild(document.createElement("br"));else if(a.startsWith("**")){let l=document.createElement("strong");l.textContent=a.slice(2,-2),n.appendChild(l)}else if(a.startsWith("`")){let l=document.createElement("code");l.textContent=a.slice(1,-1),n.appendChild(l)}r=t.index+a.length}if(r<i.length)n.appendChild(document.createTextNode(i.slice(r)));return n}class c{config;client;container;shadow;messages=[];isOpen=!1;isLoading=!1;idCounter=0;greetingShown=!1;panelEl;messagesEl;typingEl;inputEl;sendEl;statusDotEl;launcherEl;constructor(i){this.config=i,this.client=new u(i.gatewayUrl,i.appName,i.widgetId),this.container=document.createElement("div"),this.container.id="kiln-widget-root",this.shadow=this.container.attachShadow({mode:"closed"}),document.body.appendChild(this.container);let n=document.createElement("style");if(n.textContent=h(this.resolveTheme()),this.shadow.appendChild(n),this.render(),this.client.onMessage((o)=>this.handleFrame(o)),this.client.onStatusChange((o)=>this.updateStatus(o)),this.client.connect(),i.greeting)this.addMessage({id:String(++this.idCounter),role:"assistant",content:i.greeting,timestamp:Date.now()}),this.greetingShown=!0}resolveTheme(){let i=this.config.theme??"auto";if(i==="auto")return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";return i}render(){let i=this.config.position??"bottom-right",n=document.createElement("button");n.id="kiln-launcher",n.className=`position-${i}`,n.setAttribute("aria-label","Open chat"),n.innerHTML=C,n.addEventListener("click",()=>this.toggle()),this.launcherEl=n;let o=document.createElement("div");o.id="kiln-panel",o.className=`position-${i} hidden`,o.setAttribute("role","dialog"),o.setAttribute("aria-label","Chat");let r=document.createElement("div");r.id="kiln-header";let t=document.createElement("span");t.id="kiln-status-dot",t.className="disconnected",this.statusDotEl=t;let a=document.createElement("span");a.id="kiln-title",a.textContent=this.config.appName;let l=document.createElement("button");l.id="kiln-close",l.setAttribute("aria-label","Close chat"),l.innerHTML=M,l.addEventListener("click",()=>this.close()),r.appendChild(t),r.appendChild(a),r.appendChild(l);let b=document.createElement("div");b.id="kiln-messages",this.messagesEl=b;let k=document.createElement("div");k.id="kiln-typing",k.className="hidden";for(let d=0;d<3;d++){let f=document.createElement("span");f.className="kiln-typing-dot",k.appendChild(f)}this.typingEl=k,b.appendChild(k);let p=document.createElement("div");p.id="kiln-input-area";let e=document.createElement("textarea");e.id="kiln-input",e.rows=1,e.placeholder=this.config.placeholder??"Type a message...",e.setAttribute("aria-label","Message input"),e.addEventListener("keydown",(d)=>{if(d.key==="Enter"&&!d.shiftKey)d.preventDefault(),this.sendMessage()}),e.addEventListener("input",()=>this.autoResizeTextarea()),this.inputEl=e;let s=document.createElement("button");s.id="kiln-send",s.setAttribute("aria-label","Send message"),s.innerHTML=j,s.addEventListener("click",()=>this.sendMessage()),this.sendEl=s,p.appendChild(e),p.appendChild(s),o.appendChild(r),o.appendChild(b),o.appendChild(p),this.panelEl=o,this.shadow.appendChild(n),this.shadow.appendChild(o)}autoResizeTextarea(){this.inputEl.style.height="auto",this.inputEl.style.height=`${Math.min(this.inputEl.scrollHeight,120)}px`}open(){this.isOpen=!0,this.panelEl.classList.remove("hidden"),this.launcherEl.setAttribute("aria-expanded","true"),this.inputEl.focus(),this.scrollToBottom()}close(){this.isOpen=!1,this.panelEl.classList.add("hidden"),this.launcherEl.setAttribute("aria-expanded","false")}toggle(){if(this.isOpen)this.close();else this.open()}sendMessage(i){let n=i??this.inputEl.value.trim();if(!n||this.isLoading)return;this.removeSuggestions(),this.addMessage({id:String(++this.idCounter),role:"user",content:n,timestamp:Date.now()}),this.inputEl.value="",this.inputEl.style.height="auto",this.setLoading(!0),this.client.send(n)}addMessage(i){this.messages.push(i),this.renderMessage(i),this.scrollToBottom()}renderMessage(i){let n=document.createElement("div");n.className=`kiln-msg ${i.role}`,n.dataset.msgId=i.id;let o=document.createElement("div");if(o.className="kiln-bubble",i.role==="assistant")o.appendChild(L(i.content));else o.textContent=i.content;n.appendChild(o),this.messagesEl.insertBefore(n,this.typingEl)}renderErrorMessage(i){let n=document.createElement("div");n.className="kiln-msg error";let o=document.createElement("div");o.className="kiln-bubble",o.textContent=i,n.appendChild(o),this.messagesEl.insertBefore(n,this.typingEl),this.scrollToBottom()}setLoading(i){if(this.isLoading=i,this.sendEl.disabled=i,this.inputEl.disabled=i,i)this.typingEl.classList.remove("hidden"),this.scrollToBottom();else this.typingEl.classList.add("hidden")}scrollToBottom(){requestAnimationFrame(()=>{this.messagesEl.scrollTop=this.messagesEl.scrollHeight})}handleFrame(i){if(i.type==="done")this.setLoading(!1),this.addMessage({id:String(++this.idCounter),role:"assistant",content:i.content,timestamp:Date.now()});else if(i.type==="error")if(this.setLoading(!1),i.code==="BUDGET_EXHAUSTED")this.renderInfoMessage(i.message);else this.renderErrorMessage(i.message);else if(i.type==="welcome"){if(i.greeting&&!this.greetingShown)this.addMessage({id:String(++this.idCounter),role:"assistant",content:i.greeting,timestamp:Date.now()}),this.greetingShown=!0;if(i.suggestions&&i.suggestions.length>0)this.renderSuggestions([...i.suggestions])}else if(i.type==="suggestions")this.renderSuggestions([...i.items])}renderSuggestions(i){this.removeSuggestions();let n=document.createElement("div");n.className="kiln-suggestions";for(let o of i){let r=document.createElement("button");r.className="kiln-chip",r.textContent=o,r.addEventListener("click",()=>{this.sendMessage(o)}),n.appendChild(r)}this.messagesEl.insertBefore(n,this.typingEl),this.scrollToBottom()}removeSuggestions(){let i=this.messagesEl.querySelector(".kiln-suggestions");if(i)i.remove()}renderInfoMessage(i){let n=document.createElement("div");n.className="kiln-msg info";let o=document.createElement("div");o.className="kiln-bubble",o.textContent=i,n.appendChild(o),this.messagesEl.insertBefore(n,this.typingEl),this.scrollToBottom()}updateStatus(i){this.statusDotEl.className=i}destroy(){this.client.disconnect(),this.container.remove()}}(function(){let i=document.currentScript;if(!i)return;let n=i.dataset.gateway,o=i.dataset.app,r=i.dataset.widgetId;if(!n||!o||!r)return;let t={gatewayUrl:n,appName:o,widgetId:r,position:i.dataset.position??"bottom-right",theme:i.dataset.theme??"auto",greeting:i.dataset.greeting,placeholder:i.dataset.placeholder},a=()=>new c(t);if(document.readyState==="loading")document.addEventListener("DOMContentLoaded",a);else a()})();})();
+
+    /* Chat area wrapper */
+    #kiln-chat-area {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      min-height: 0;
+    }
+
+    #kiln-chat-area.hidden {
+      display: none;
+    }
+
+    /* Pre-chat form */
+    #kiln-prechat-form {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 14px;
+      padding: 24px 20px;
+      overflow-y: auto;
+    }
+
+    .kiln-form-title {
+      font-size: 14px;
+      color: var(--kiln-text-secondary);
+      line-height: 1.5;
+    }
+
+    .kiln-form-group {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .kiln-form-label {
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--kiln-text);
+    }
+
+    .kiln-form-required {
+      color: var(--kiln-status-error);
+    }
+
+    .kiln-form-input {
+      padding: 9px 12px;
+      border: 1px solid var(--kiln-border);
+      border-radius: 8px;
+      background: var(--kiln-bg);
+      color: var(--kiln-text);
+      font-family: var(--kiln-font);
+      font-size: 14px;
+      outline: none;
+      transition: border-color 0.15s ease;
+    }
+
+    .kiln-form-input:focus {
+      border-color: var(--kiln-accent);
+    }
+
+    .kiln-form-input.kiln-form-error {
+      border-color: var(--kiln-status-error);
+    }
+
+    .kiln-form-submit {
+      margin-top: auto;
+      padding: 10px 16px;
+      background: var(--kiln-accent);
+      color: var(--kiln-accent-text);
+      border: none;
+      border-radius: 10px;
+      font-family: var(--kiln-font);
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: opacity 0.15s ease;
+    }
+
+    .kiln-form-submit:hover {
+      opacity: 0.88;
+    }
+
+    .kiln-form-submit:active {
+      transform: scale(0.98);
+    }
+  `}var L='<svg xmlns="http://www.w3.org/2000/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>',F='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" 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>',H='<svg xmlns="http://www.w3.org/2000/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>',m="kiln_visitor_";function P(n){let i=document.createDocumentFragment(),o=/(\*\*[^*]+\*\*|`[^`]+`|\n)/g,r=0,a;while((a=o.exec(n))!==null){if(a.index>r)i.appendChild(document.createTextNode(n.slice(r,a.index)));let l=a[0];if(l===`
+`)i.appendChild(document.createElement("br"));else if(l.startsWith("**")){let e=document.createElement("strong");e.textContent=l.slice(2,-2),i.appendChild(e)}else if(l.startsWith("`")){let e=document.createElement("code");e.textContent=l.slice(1,-1),i.appendChild(e)}r=a.index+l.length}if(r<n.length)i.appendChild(document.createTextNode(n.slice(r)));return i}function g(n){try{let i=localStorage.getItem(`${m}${n}`);return i?JSON.parse(i):null}catch{return null}}function J(n,i){try{localStorage.setItem(`${m}${n}`,JSON.stringify(i))}catch{}}class p{config;client;container;shadow;messages=[];isOpen=!1;isLoading=!1;idCounter=0;greetingShown=!1;identified=!1;panelEl;messagesEl;typingEl;inputEl;sendEl;statusDotEl;launcherEl;formEl=null;chatAreaEl;constructor(n){this.config=n,this.client=new u(n.gatewayUrl,n.appName,n.widgetId);let i=g(n.widgetId);if(i)this.identified=!0;this.container=document.createElement("div"),this.container.id="kiln-widget-root",this.shadow=this.container.attachShadow({mode:"closed"}),document.body.appendChild(this.container);let o=document.createElement("style");if(o.textContent=y(this.resolveTheme()),this.shadow.appendChild(o),this.render(),this.client.onMessage((r)=>this.handleFrame(r)),this.client.onStatusChange((r)=>this.updateStatus(r)),this.client.connect(),n.greeting)this.addMessage({id:String(++this.idCounter),role:"assistant",content:n.greeting,timestamp:Date.now()}),this.greetingShown=!0;if(i)this.client.onStatusChange((r)=>{if(r==="connected"&&this.identified){let a=g(n.widgetId);if(a)this.client.identify(a)}this.updateStatus(r)})}resolveTheme(){let n=this.config.theme??"auto";if(n==="auto")return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";return n}render(){let n=this.config.position??"bottom-right",i=document.createElement("button");i.id="kiln-launcher",i.className=`position-${n}`,i.setAttribute("aria-label","Open chat"),i.innerHTML=L,i.addEventListener("click",()=>this.toggle()),this.launcherEl=i;let o=document.createElement("div");o.id="kiln-panel",o.className=`position-${n} hidden`,o.setAttribute("role","dialog"),o.setAttribute("aria-label","Chat");let r=document.createElement("div");r.id="kiln-header";let a=document.createElement("span");a.id="kiln-status-dot",a.className="disconnected",this.statusDotEl=a;let l=document.createElement("span");l.id="kiln-title",l.textContent=this.config.appName;let e=document.createElement("button");e.id="kiln-close",e.setAttribute("aria-label","Close chat"),e.innerHTML=F,e.addEventListener("click",()=>this.close()),r.appendChild(a),r.appendChild(l),r.appendChild(e);let s=document.createElement("div");s.id="kiln-chat-area",this.chatAreaEl=s;let t=document.createElement("div");t.id="kiln-messages",this.messagesEl=t;let d=document.createElement("div");d.id="kiln-typing",d.className="hidden";for(let b=0;b<3;b++){let h=document.createElement("span");h.className="kiln-typing-dot",d.appendChild(h)}this.typingEl=d,t.appendChild(d);let x=document.createElement("div");x.id="kiln-input-area";let k=document.createElement("textarea");k.id="kiln-input",k.rows=1,k.placeholder=this.config.placeholder??"Type a message...",k.setAttribute("aria-label","Message input"),k.addEventListener("keydown",(b)=>{if(b.key==="Enter"&&!b.shiftKey)b.preventDefault(),this.sendMessage()}),k.addEventListener("input",()=>this.autoResizeTextarea()),this.inputEl=k;let c=document.createElement("button");c.id="kiln-send",c.setAttribute("aria-label","Send message"),c.innerHTML=H,c.addEventListener("click",()=>this.sendMessage()),this.sendEl=c,x.appendChild(k),x.appendChild(c),s.appendChild(t),s.appendChild(x),o.appendChild(r),o.appendChild(s),this.panelEl=o,this.shadow.appendChild(i),this.shadow.appendChild(o)}renderPreChatForm(n){if(this.formEl)return;let i=document.createElement("div");i.id="kiln-prechat-form";let o=document.createElement("p");o.className="kiln-form-title",o.textContent="Before we start, tell us a bit about yourself",i.appendChild(o);let r=[];for(let l of n.fields){let e=document.createElement("div");e.className="kiln-form-group";let s=document.createElement("label");if(s.className="kiln-form-label",s.textContent=l.label,l.required){let d=document.createElement("span");d.className="kiln-form-required",d.textContent=" *",s.appendChild(d)}let t=document.createElement("input");t.className="kiln-form-input",t.type=l.type==="phone"?"tel":l.type,t.name=l.key,t.required=l.required,t.setAttribute("aria-label",l.label),r.push({key:l.key,input:t,required:l.required}),e.appendChild(s),e.appendChild(t),i.appendChild(e)}let a=document.createElement("button");a.className="kiln-form-submit",a.textContent=n.submitLabel??"Start Chat",a.addEventListener("click",()=>this.submitPreChatForm(r)),i.appendChild(a),i.addEventListener("keydown",(l)=>{if(l.key==="Enter")l.preventDefault(),this.submitPreChatForm(r)}),this.formEl=i,this.chatAreaEl.classList.add("hidden"),this.panelEl.insertBefore(i,this.chatAreaEl)}submitPreChatForm(n){for(let{input:a,required:l}of n){if(l&&!a.value.trim()){a.classList.add("kiln-form-error"),a.focus();return}a.classList.remove("kiln-form-error")}let i={},o={};for(let{key:a,input:l}of n){let e=l.value.trim();if(!e)continue;if(a==="name"||a==="email"||a==="phone")i[a]=e;else o[a]=e}if(Object.keys(o).length>0)i.custom=o;let r=i;J(this.config.widgetId,r),this.identified=!0,this.client.identify(r),this.formEl?.remove(),this.formEl=null,this.chatAreaEl.classList.remove("hidden"),this.inputEl.focus()}autoResizeTextarea(){this.inputEl.style.height="auto",this.inputEl.style.height=`${Math.min(this.inputEl.scrollHeight,120)}px`}open(){if(this.isOpen=!0,this.panelEl.classList.remove("hidden"),this.launcherEl.setAttribute("aria-expanded","true"),!this.formEl)this.inputEl.focus();this.scrollToBottom()}close(){this.isOpen=!1,this.panelEl.classList.add("hidden"),this.launcherEl.setAttribute("aria-expanded","false")}toggle(){if(this.isOpen)this.close();else this.open()}sendMessage(n){let i=n??this.inputEl.value.trim();if(!i||this.isLoading)return;this.removeSuggestions(),this.addMessage({id:String(++this.idCounter),role:"user",content:i,timestamp:Date.now()}),this.inputEl.value="",this.inputEl.style.height="auto",this.setLoading(!0),this.client.send(i)}addMessage(n){this.messages.push(n),this.renderMessage(n),this.scrollToBottom()}renderMessage(n){let i=document.createElement("div");i.className=`kiln-msg ${n.role}`,i.dataset.msgId=n.id;let o=document.createElement("div");if(o.className="kiln-bubble",n.role==="assistant")o.appendChild(P(n.content));else o.textContent=n.content;i.appendChild(o),this.messagesEl.insertBefore(i,this.typingEl)}renderErrorMessage(n){let i=document.createElement("div");i.className="kiln-msg error";let o=document.createElement("div");o.className="kiln-bubble",o.textContent=n,i.appendChild(o),this.messagesEl.insertBefore(i,this.typingEl),this.scrollToBottom()}setLoading(n){if(this.isLoading=n,this.sendEl.disabled=n,this.inputEl.disabled=n,n)this.typingEl.classList.remove("hidden"),this.scrollToBottom();else this.typingEl.classList.add("hidden")}scrollToBottom(){requestAnimationFrame(()=>{this.messagesEl.scrollTop=this.messagesEl.scrollHeight})}handleFrame(n){if(n.type==="done")this.setLoading(!1),this.addMessage({id:String(++this.idCounter),role:"assistant",content:n.content,timestamp:Date.now()});else if(n.type==="error")if(this.setLoading(!1),n.code==="BUDGET_EXHAUSTED")this.renderInfoMessage(n.message);else this.renderErrorMessage(n.message);else if(n.type==="welcome"){if(n.greeting&&!this.greetingShown)this.addMessage({id:String(++this.idCounter),role:"assistant",content:n.greeting,timestamp:Date.now()}),this.greetingShown=!0;if(n.suggestions&&n.suggestions.length>0)this.renderSuggestions([...n.suggestions]);if(n.preChatForm?.enabled&&!this.identified)this.renderPreChatForm(n.preChatForm);if(this.identified){let i=g(this.config.widgetId);if(i)this.client.identify(i)}}else if(n.type==="suggestions")this.renderSuggestions([...n.items])}renderSuggestions(n){this.removeSuggestions();let i=document.createElement("div");i.className="kiln-suggestions";for(let o of n){let r=document.createElement("button");r.className="kiln-chip",r.textContent=o,r.addEventListener("click",()=>{this.sendMessage(o)}),i.appendChild(r)}this.messagesEl.insertBefore(i,this.typingEl),this.scrollToBottom()}removeSuggestions(){let n=this.messagesEl.querySelector(".kiln-suggestions");if(n)n.remove()}renderInfoMessage(n){let i=document.createElement("div");i.className="kiln-msg info";let o=document.createElement("div");o.className="kiln-bubble",o.textContent=n,i.appendChild(o),this.messagesEl.insertBefore(i,this.typingEl),this.scrollToBottom()}updateStatus(n){this.statusDotEl.className=n}destroy(){this.client.disconnect(),this.container.remove()}}(function(){let n=document.currentScript;if(!n)return;let i=n.dataset.gateway,o=n.dataset.app,r=n.dataset.widgetId;if(!i||!o||!r)return;let a={gatewayUrl:i,appName:o,widgetId:r,position:n.dataset.position??"bottom-right",theme:n.dataset.theme??"auto",greeting:n.dataset.greeting,placeholder:n.dataset.placeholder},l=()=>new p(a);if(document.readyState==="loading")document.addEventListener("DOMContentLoaded",l);else l()})();})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kilnai/widget",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "Embeddable chat widget for Kiln AI — add AI chat to any website with one script tag",
   "type": "module",
   "main": "dist/widget.js",