@kilnai/widget 0.9.2 → 0.13.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:Y,getOwnPropertyDescriptor:$}=Object,W=Object.prototype.hasOwnProperty;function C(n){return this[n]}var L=(n)=>{var i=(y??=new WeakMap).get(n),o;if(i)return i;if(i=f({},"__esModule",{value:!0}),n&&typeof n==="object"||typeof n==="function"){for(var a of Y(n))if(!W.call(i,a))f(i,a,{get:C.bind(n,a),enumerable:!(o=$(n,a))||o.enumerable})}return y.set(n,i),i},y;var j=(n)=>n;function F(n,i){this[n]=j.bind(null,i)}var M=(n,i)=>{for(var o in i)f(n,o,{get:i[o],enumerable:!0,configurable:!0,set:F.bind(i,o)})};var Q={};M(Q,{KilnWidget:()=>u});class g{ws=null;reconnectTimer=null;reconnectDelay=1000;maxReconnectDelay=30000;intentionalClose=!1;messageHandler=null;statusHandler=null;url;userId;constructor(n,i,o){let a=n.startsWith("https")?"wss":"ws",l=n.replace(/^https?:\/\//,"").replace(/^wss?:\/\//,""),r=`kiln_uid_${o}`;this.userId=localStorage.getItem(r)??crypto.randomUUID(),localStorage.setItem(r,this.userId),this.url=`${a}://${l}/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 m(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;
@@ -287,6 +287,55 @@
       background: rgba(255, 255, 255, 0.15);
     }
 
+    .kiln-bubble pre {
+      background: rgba(0, 0, 0, 0.06);
+      border-radius: 6px;
+      padding: 10px 12px;
+      margin: 6px 0;
+      overflow-x: auto;
+      font-size: 13px;
+    }
+
+    .kiln-msg.user .kiln-bubble pre {
+      background: rgba(255, 255, 255, 0.1);
+    }
+
+    .kiln-bubble pre code {
+      background: none;
+      padding: 0;
+      font-size: inherit;
+      white-space: pre;
+    }
+
+    .kiln-bubble strong {
+      font-weight: 600;
+    }
+
+    .kiln-bubble em {
+      font-style: italic;
+    }
+
+    .kiln-bubble ul,
+    .kiln-bubble ol {
+      margin: 4px 0;
+      padding-left: 20px;
+    }
+
+    .kiln-bubble li {
+      margin: 2px 0;
+      line-height: 1.5;
+    }
+
+    .kiln-bubble a {
+      color: inherit;
+      text-decoration: underline;
+      text-underline-offset: 2px;
+    }
+
+    .kiln-bubble a:hover {
+      opacity: 0.8;
+    }
+
     /* Error message */
     .kiln-msg.error .kiln-bubble {
       background: #fee2e2;
@@ -446,5 +495,92 @@
       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);
+    }
+  `}function z(n){let i=document.createDocumentFragment(),o=n.split(/(```[\s\S]*?```)/g);for(let a of o){if(a.startsWith("```")){let e=a.slice(3,-3),t=e.indexOf(`
+`),s=t>=0?e.slice(t+1):e,d=document.createElement("pre"),b=document.createElement("code");b.textContent=s,d.appendChild(b),i.appendChild(d);continue}let l=a.split(`
+`),r=0;while(r<l.length){let e=l[r];if(/^[\s]*[-*]\s+/.test(e)){let t=document.createElement("ul");while(r<l.length){let s=l[r].match(/^[\s]*[-*]\s+(.*)/);if(!s)break;let d=document.createElement("li");d.appendChild(x(s[1])),t.appendChild(d),r++}i.appendChild(t);continue}if(/^[\s]*\d+\.\s+/.test(e)){let t=document.createElement("ol");while(r<l.length){let s=l[r].match(/^[\s]*\d+\.\s+(.*)/);if(!s)break;let d=document.createElement("li");d.appendChild(x(s[1])),t.appendChild(d),r++}i.appendChild(t);continue}if(e.length>0)i.appendChild(x(e));if(r<l.length-1&&e.length>0)i.appendChild(document.createElement("br"));r++}}return i}function x(n){let i=document.createDocumentFragment(),o=/(\*\*[^*]+\*\*|\*[^*]+\*|`[^`]+`|\[[^\]]+\]\([^)]+\))/g,a=0,l;while((l=o.exec(n))!==null){if(l.index>a)i.appendChild(document.createTextNode(n.slice(a,l.index)));let r=l[0];if(r.startsWith("**")){let e=document.createElement("strong");e.appendChild(x(r.slice(2,-2))),i.appendChild(e)}else if(r.startsWith("`")){let e=document.createElement("code");e.textContent=r.slice(1,-1),i.appendChild(e)}else if(r.startsWith("[")){let e=r.match(/^\[([^\]]+)\]\(([^)]+)\)$/);if(e){let t=document.createElement("a");t.textContent=e[1],t.href=e[2],t.target="_blank",t.rel="noopener noreferrer",i.appendChild(t)}}else if(r.startsWith("*")){let e=document.createElement("em");e.appendChild(x(r.slice(1,-1))),i.appendChild(e)}a=l.index+r.length}if(a<n.length)i.appendChild(document.createTextNode(n.slice(a)));return i}var 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"><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>',P='<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>',w="kiln_visitor_";function h(n){try{let i=localStorage.getItem(`${w}${n}`);return i?JSON.parse(i):null}catch{return null}}function K(n,i){try{localStorage.setItem(`${w}${n}`,JSON.stringify(i))}catch{}}class u{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 g(n.gatewayUrl,n.appName,n.widgetId);let i=h(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=m(this.resolveTheme()),this.shadow.appendChild(o),this.render(),this.client.onMessage((a)=>this.handleFrame(a)),this.client.onStatusChange((a)=>this.updateStatus(a)),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((a)=>{if(a==="connected"&&this.identified){let l=h(n.widgetId);if(l)this.client.identify(l)}this.updateStatus(a)})}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=H,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 a=document.createElement("div");a.id="kiln-header";let l=document.createElement("span");l.id="kiln-status-dot",l.className="disconnected",this.statusDotEl=l;let r=document.createElement("span");r.id="kiln-title",r.textContent=this.config.appName;let e=document.createElement("button");e.id="kiln-close",e.setAttribute("aria-label","Close chat"),e.innerHTML=P,e.addEventListener("click",()=>this.close()),a.appendChild(l),a.appendChild(r),a.appendChild(e);let t=document.createElement("div");t.id="kiln-chat-area",this.chatAreaEl=t;let s=document.createElement("div");s.id="kiln-messages",this.messagesEl=s;let d=document.createElement("div");d.id="kiln-typing",d.className="hidden";for(let p=0;p<3;p++){let v=document.createElement("span");v.className="kiln-typing-dot",d.appendChild(v)}this.typingEl=d,s.appendChild(d);let b=document.createElement("div");b.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",(p)=>{if(p.key==="Enter"&&!p.shiftKey)p.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=J,c.addEventListener("click",()=>this.sendMessage()),this.sendEl=c,b.appendChild(k),b.appendChild(c),t.appendChild(s),t.appendChild(b),o.appendChild(a),o.appendChild(t),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 a=[];for(let r of n.fields){let e=document.createElement("div");e.className="kiln-form-group";let t=document.createElement("label");if(t.className="kiln-form-label",t.textContent=r.label,r.required){let d=document.createElement("span");d.className="kiln-form-required",d.textContent=" *",t.appendChild(d)}let s=document.createElement("input");s.className="kiln-form-input",s.type=r.type==="phone"?"tel":r.type,s.name=r.key,s.required=r.required,s.setAttribute("aria-label",r.label),a.push({key:r.key,input:s,required:r.required}),e.appendChild(t),e.appendChild(s),i.appendChild(e)}let l=document.createElement("button");l.className="kiln-form-submit",l.textContent=n.submitLabel??"Start Chat",l.addEventListener("click",()=>this.submitPreChatForm(a)),i.appendChild(l),i.addEventListener("keydown",(r)=>{if(r.key==="Enter")r.preventDefault(),this.submitPreChatForm(a)}),this.formEl=i,this.chatAreaEl.classList.add("hidden"),this.panelEl.insertBefore(i,this.chatAreaEl)}submitPreChatForm(n){for(let{input:l,required:r}of n){if(r&&!l.value.trim()){l.classList.add("kiln-form-error"),l.focus();return}l.classList.remove("kiln-form-error")}let i={},o={};for(let{key:l,input:r}of n){let e=r.value.trim();if(!e)continue;if(l==="name"||l==="email"||l==="phone")i[l]=e;else o[l]=e}if(Object.keys(o).length>0)i.custom=o;let a=i;K(this.config.widgetId,a),this.identified=!0,this.client.identify(a),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(z(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=h(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 a=document.createElement("button");a.className="kiln-chip",a.textContent=o,a.addEventListener("click",()=>{this.sendMessage(o)}),i.appendChild(a)}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,a=n.dataset.widgetId;if(!i||!o||!a)return;let l={gatewayUrl:i,appName:o,widgetId:a,position:n.dataset.position??"bottom-right",theme:n.dataset.theme??"auto",greeting:n.dataset.greeting,placeholder:n.dataset.placeholder},r=()=>new u(l);if(document.readyState==="loading")document.addEventListener("DOMContentLoaded",r);else r()})();})();

package/package.json

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