@kilnai/widget 0.1.16 → 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/widget.js +11 -11
- package/package.json +1 -1
package/dist/widget.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
(()=>{var{defineProperty:
|
|
1
|
+
(()=>{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`
|
|
2
2
|
:host {
|
|
3
|
-
--kiln-bg: ${
|
|
4
|
-
--kiln-bg-secondary: ${
|
|
5
|
-
--kiln-text: ${
|
|
6
|
-
--kiln-text-secondary: ${
|
|
7
|
-
--kiln-border: ${
|
|
3
|
+
--kiln-bg: ${n?"#1a1a2e":"#ffffff"};
|
|
4
|
+
--kiln-bg-secondary: ${n?"#2a2a3e":"#f0f0f0"};
|
|
5
|
+
--kiln-text: ${n?"#e8e8f0":"#1a1a1a"};
|
|
6
|
+
--kiln-text-secondary: ${n?"#a0a0b8":"#6b7280"};
|
|
7
|
+
--kiln-border: ${n?"#3a3a5c":"#e5e7eb"};
|
|
8
8
|
--kiln-accent: #1a1a2e;
|
|
9
9
|
--kiln-accent-text: #ffffff;
|
|
10
10
|
--kiln-user-bubble: #1a1a2e;
|
|
11
11
|
--kiln-user-text: #ffffff;
|
|
12
|
-
--kiln-assistant-bubble: ${
|
|
13
|
-
--kiln-assistant-text: ${
|
|
12
|
+
--kiln-assistant-bubble: ${n?"#2a2a3e":"#f0f0f0"};
|
|
13
|
+
--kiln-assistant-text: ${n?"#e8e8f0":"#1a1a1a"};
|
|
14
14
|
--kiln-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
|
|
15
15
|
--kiln-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
16
16
|
--kiln-radius: 16px;
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
--kiln-status-error: #ef4444;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
-
${
|
|
23
|
+
${i==="auto"?`
|
|
24
24
|
@media (prefers-color-scheme: dark) {
|
|
25
25
|
:host {
|
|
26
26
|
--kiln-bg: #1a1a2e;
|
|
@@ -446,5 +446,5 @@
|
|
|
446
446
|
width: 18px;
|
|
447
447
|
height: 18px;
|
|
448
448
|
}
|
|
449
|
-
`}var
|
|
450
|
-
`)
|
|
449
|
+
`}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===`
|
|
450
|
+
`)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()})();})();
|