@kilnai/widget 0.1.5

package/dist/widget.js

@@ -0,0 +1,398 @@
+(()=>{var{defineProperty:b,getOwnPropertyNames:m,getOwnPropertyDescriptor:v}=Object,y=Object.prototype.hasOwnProperty;function w(e){return this[e]}var S=(e)=>{var n=(x??=new WeakMap).get(e),t;if(n)return n;if(n=b({},"__esModule",{value:!0}),e&&typeof e==="object"||typeof e==="function"){for(var i of m(e))if(!y.call(n,i))b(n,i,{get:w.bind(e,i),enumerable:!(t=v(e,i))||t.enumerable})}return x.set(e,n),n},x;var W=(e)=>e;function C(e,n){this[e]=W.bind(null,n)}var $=(e,n)=>{for(var t in n)b(e,t,{get:n[t],enumerable:!0,configurable:!0,set:C.bind(n,t)})};var F={};$(F,{KilnWidget:()=>k});class h{ws=null;reconnectTimer=null;reconnectDelay=1000;maxReconnectDelay=30000;intentionalClose=!1;messageHandler=null;statusHandler=null;url;userId;constructor(e,n,t){let i=e.startsWith("https")?"wss":"ws",s=e.replace(/^https?:\/\//,"").replace(/^wss?:\/\//,""),o=`kiln_widget_${t}`;this.userId=sessionStorage.getItem(o)??crypto.randomUUID(),sessionStorage.setItem(o,this.userId),this.url=`${i}://${s}/apps/${n}/ws?widgetId=${t}&userId=${encodeURIComponent(this.userId)}`}connect(){this.intentionalClose=!1,this.setStatus("connecting");let e=new WebSocket(this.url);this.ws=e,e.onopen=()=>{this.reconnectDelay=1000,this.setStatus("connected")},e.onmessage=(n)=>{try{let t=JSON.parse(n.data);this.messageHandler?.(t)}catch{}},e.onerror=()=>this.setStatus("error"),e.onclose=()=>{if(this.ws=null,!this.intentionalClose)this.setStatus("disconnected"),this.scheduleReconnect()}}send(e){if(!this.ws||this.ws.readyState!==WebSocket.OPEN)return;let n={type:"message",content:e};this.ws.send(JSON.stringify(n))}onMessage(e){this.messageHandler=e}onStatusChange(e){this.statusHandler=e}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(e){this.statusHandler?.(e)}scheduleReconnect(){this.reconnectTimer=setTimeout(()=>{this.reconnectTimer=null,this.connect()},this.reconnectDelay),this.reconnectDelay=Math.min(this.reconnectDelay*2,this.maxReconnectDelay)}}function g(e){let n=e==="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-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-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
+      --kiln-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      --kiln-radius: 16px;
+      --kiln-status-connected: #22c55e;
+      --kiln-status-connecting: #f59e0b;
+      --kiln-status-disconnected: #6b7280;
+      --kiln-status-error: #ef4444;
+    }
+
+    ${e==="auto"?`
+    @media (prefers-color-scheme: dark) {
+      :host {
+        --kiln-bg: #1a1a2e;
+        --kiln-bg-secondary: #2a2a3e;
+        --kiln-text: #e8e8f0;
+        --kiln-text-secondary: #a0a0b8;
+        --kiln-border: #3a3a5c;
+        --kiln-assistant-bubble: #2a2a3e;
+        --kiln-assistant-text: #e8e8f0;
+      }
+    }`:""}
+
+    *, *::before, *::after {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    /* Launcher button */
+    #kiln-launcher {
+      position: fixed;
+      bottom: 24px;
+      width: 56px;
+      height: 56px;
+      border-radius: 50%;
+      background: var(--kiln-accent);
+      color: var(--kiln-accent-text);
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: var(--kiln-shadow);
+      transition: transform 0.2s ease, box-shadow 0.2s ease;
+      z-index: 999998;
+      font-family: var(--kiln-font);
+    }
+
+    #kiln-launcher.position-bottom-right {
+      right: 24px;
+    }
+
+    #kiln-launcher.position-bottom-left {
+      left: 24px;
+    }
+
+    #kiln-launcher:hover {
+      transform: scale(1.08);
+      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
+    }
+
+    #kiln-launcher:active {
+      transform: scale(0.96);
+    }
+
+    #kiln-launcher svg {
+      width: 24px;
+      height: 24px;
+      flex-shrink: 0;
+    }
+
+    /* Chat panel */
+    #kiln-panel {
+      position: fixed;
+      bottom: 92px;
+      width: 380px;
+      height: min(520px, calc(100vh - 100px));
+      border-radius: var(--kiln-radius);
+      background: var(--kiln-bg);
+      box-shadow: var(--kiln-shadow);
+      display: flex;
+      flex-direction: column;
+      z-index: 999997;
+      font-family: var(--kiln-font);
+      border: 1px solid var(--kiln-border);
+      overflow: hidden;
+      transform-origin: bottom center;
+      animation: kiln-slide-up 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+
+    #kiln-panel.position-bottom-right {
+      right: 24px;
+    }
+
+    #kiln-panel.position-bottom-left {
+      left: 24px;
+    }
+
+    #kiln-panel.hidden {
+      display: none;
+    }
+
+    @keyframes kiln-slide-up {
+      from {
+        opacity: 0;
+        transform: translateY(16px) scale(0.96);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+      }
+    }
+
+    @media (max-width: 639px) {
+      #kiln-panel {
+        width: 100vw;
+        height: 100vh;
+        bottom: 0;
+        right: 0 !important;
+        left: 0 !important;
+        border-radius: 0;
+        animation: kiln-slide-up-mobile 0.22s ease;
+      }
+
+      @keyframes kiln-slide-up-mobile {
+        from {
+          opacity: 0;
+          transform: translateY(24px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+    }
+
+    /* Header */
+    #kiln-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 14px 16px;
+      border-bottom: 1px solid var(--kiln-border);
+      flex-shrink: 0;
+    }
+
+    #kiln-status-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      flex-shrink: 0;
+      background: var(--kiln-status-disconnected);
+      transition: background 0.3s ease;
+    }
+
+    #kiln-status-dot.connected { background: var(--kiln-status-connected); }
+    #kiln-status-dot.connecting { background: var(--kiln-status-connecting); }
+    #kiln-status-dot.disconnected { background: var(--kiln-status-disconnected); }
+    #kiln-status-dot.error { background: var(--kiln-status-error); }
+
+    #kiln-title {
+      flex: 1;
+      font-size: 15px;
+      font-weight: 600;
+      color: var(--kiln-text);
+    }
+
+    #kiln-close {
+      background: none;
+      border: none;
+      cursor: pointer;
+      color: var(--kiln-text-secondary);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 28px;
+      height: 28px;
+      border-radius: 6px;
+      transition: background 0.15s ease, color 0.15s ease;
+    }
+
+    #kiln-close:hover {
+      background: var(--kiln-bg-secondary);
+      color: var(--kiln-text);
+    }
+
+    #kiln-close svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    /* Messages area */
+    #kiln-messages {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      scroll-behavior: smooth;
+    }
+
+    #kiln-messages::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    #kiln-messages::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    #kiln-messages::-webkit-scrollbar-thumb {
+      background: var(--kiln-border);
+      border-radius: 2px;
+    }
+
+    /* Message bubbles */
+    .kiln-msg {
+      display: flex;
+      flex-direction: column;
+      max-width: 80%;
+      animation: kiln-msg-in 0.18s ease;
+    }
+
+    @keyframes kiln-msg-in {
+      from {
+        opacity: 0;
+        transform: translateY(6px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    .kiln-msg.user {
+      align-self: flex-end;
+      align-items: flex-end;
+    }
+
+    .kiln-msg.assistant {
+      align-self: flex-start;
+      align-items: flex-start;
+    }
+
+    .kiln-bubble {
+      padding: 10px 14px;
+      border-radius: 14px;
+      font-size: 14px;
+      line-height: 1.5;
+      word-break: break-word;
+    }
+
+    .kiln-msg.user .kiln-bubble {
+      background: var(--kiln-user-bubble);
+      color: var(--kiln-user-text);
+      border-bottom-right-radius: 4px;
+    }
+
+    .kiln-msg.assistant .kiln-bubble {
+      background: var(--kiln-assistant-bubble);
+      color: var(--kiln-assistant-text);
+      border-bottom-left-radius: 4px;
+    }
+
+    .kiln-bubble code {
+      font-family: "Courier New", Courier, monospace;
+      font-size: 13px;
+      background: rgba(0, 0, 0, 0.08);
+      padding: 1px 5px;
+      border-radius: 4px;
+    }
+
+    .kiln-msg.user .kiln-bubble code {
+      background: rgba(255, 255, 255, 0.15);
+    }
+
+    /* Error message */
+    .kiln-msg.error .kiln-bubble {
+      background: #fee2e2;
+      color: #dc2626;
+      border: 1px solid #fca5a5;
+    }
+
+    /* Typing indicator */
+    #kiln-typing {
+      display: flex;
+      align-self: flex-start;
+      padding: 10px 14px;
+      background: var(--kiln-assistant-bubble);
+      border-radius: 14px;
+      border-bottom-left-radius: 4px;
+      gap: 4px;
+      animation: kiln-msg-in 0.18s ease;
+    }
+
+    #kiln-typing.hidden {
+      display: none;
+    }
+
+    .kiln-typing-dot {
+      width: 7px;
+      height: 7px;
+      border-radius: 50%;
+      background: var(--kiln-text-secondary);
+      animation: kiln-bounce 1.2s infinite;
+    }
+
+    .kiln-typing-dot:nth-child(2) { animation-delay: 0.2s; }
+    .kiln-typing-dot:nth-child(3) { animation-delay: 0.4s; }
+
+    @keyframes kiln-bounce {
+      0%, 60%, 100% { transform: translateY(0); }
+      30% { transform: translateY(-5px); }
+    }
+
+    /* Input area */
+    #kiln-input-area {
+      display: flex;
+      align-items: flex-end;
+      gap: 8px;
+      padding: 12px 16px;
+      border-top: 1px solid var(--kiln-border);
+      flex-shrink: 0;
+    }
+
+    #kiln-input {
+      flex: 1;
+      padding: 9px 12px;
+      border: 1px solid var(--kiln-border);
+      border-radius: 10px;
+      background: var(--kiln-bg);
+      color: var(--kiln-text);
+      font-family: var(--kiln-font);
+      font-size: 14px;
+      line-height: 1.5;
+      resize: none;
+      outline: none;
+      max-height: 120px;
+      min-height: 40px;
+      transition: border-color 0.15s ease;
+      overflow-y: auto;
+    }
+
+    #kiln-input::placeholder {
+      color: var(--kiln-text-secondary);
+    }
+
+    #kiln-input:focus {
+      border-color: var(--kiln-accent);
+    }
+
+    #kiln-send {
+      background: var(--kiln-accent);
+      color: var(--kiln-accent-text);
+      border: none;
+      border-radius: 10px;
+      width: 38px;
+      height: 38px;
+      flex-shrink: 0;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: opacity 0.15s ease, transform 0.1s ease;
+    }
+
+    #kiln-send:hover {
+      opacity: 0.88;
+    }
+
+    #kiln-send:active {
+      transform: scale(0.94);
+    }
+
+    #kiln-send:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    #kiln-send svg {
+      width: 18px;
+      height: 18px;
+    }
+  `}var T='<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>',z='<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>',I='<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 Y(e){let n=document.createDocumentFragment(),t=/(\*\*[^*]+\*\*|`[^`]+`|\n)/g,i=0,s;while((s=t.exec(e))!==null){if(s.index>i)n.appendChild(document.createTextNode(e.slice(i,s.index)));let o=s[0];if(o===`
+`)n.appendChild(document.createElement("br"));else if(o.startsWith("**")){let r=document.createElement("strong");r.textContent=o.slice(2,-2),n.appendChild(r)}else if(o.startsWith("`")){let r=document.createElement("code");r.textContent=o.slice(1,-1),n.appendChild(r)}i=s.index+o.length}if(i<e.length)n.appendChild(document.createTextNode(e.slice(i)));return n}class k{config;client;container;shadow;messages=[];isOpen=!1;isLoading=!1;idCounter=0;panelEl;messagesEl;typingEl;inputEl;sendEl;statusDotEl;launcherEl;constructor(e){this.config=e,this.client=new h(e.gatewayUrl,e.appName,e.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=g(this.resolveTheme()),this.shadow.appendChild(n),this.render(),this.client.onMessage((t)=>this.handleFrame(t)),this.client.onStatusChange((t)=>this.updateStatus(t)),this.client.connect(),e.greeting)this.addMessage({id:String(++this.idCounter),role:"assistant",content:e.greeting,timestamp:Date.now()})}resolveTheme(){let e=this.config.theme??"auto";if(e==="auto")return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";return e}render(){let e=this.config.position??"bottom-right",n=document.createElement("button");n.id="kiln-launcher",n.className=`position-${e}`,n.setAttribute("aria-label","Open chat"),n.innerHTML=T,n.addEventListener("click",()=>this.toggle()),this.launcherEl=n;let t=document.createElement("div");t.id="kiln-panel",t.className=`position-${e} hidden`,t.setAttribute("role","dialog"),t.setAttribute("aria-label","Chat");let i=document.createElement("div");i.id="kiln-header";let s=document.createElement("span");s.id="kiln-status-dot",s.className="disconnected",this.statusDotEl=s;let o=document.createElement("span");o.id="kiln-title",o.textContent=this.config.appName;let r=document.createElement("button");r.id="kiln-close",r.setAttribute("aria-label","Close chat"),r.innerHTML=z,r.addEventListener("click",()=>this.close()),i.appendChild(s),i.appendChild(o),i.appendChild(r);let p=document.createElement("div");p.id="kiln-messages",this.messagesEl=p;let c=document.createElement("div");c.id="kiln-typing",c.className="hidden";for(let d=0;d<3;d++){let f=document.createElement("span");f.className="kiln-typing-dot",c.appendChild(f)}this.typingEl=c,p.appendChild(c);let u=document.createElement("div");u.id="kiln-input-area";let a=document.createElement("textarea");a.id="kiln-input",a.rows=1,a.placeholder=this.config.placeholder??"Type a message...",a.setAttribute("aria-label","Message input"),a.addEventListener("keydown",(d)=>{if(d.key==="Enter"&&!d.shiftKey)d.preventDefault(),this.sendMessage()}),a.addEventListener("input",()=>this.autoResizeTextarea()),this.inputEl=a;let l=document.createElement("button");l.id="kiln-send",l.setAttribute("aria-label","Send message"),l.innerHTML=I,l.addEventListener("click",()=>this.sendMessage()),this.sendEl=l,u.appendChild(a),u.appendChild(l),t.appendChild(i),t.appendChild(p),t.appendChild(u),this.panelEl=t,this.shadow.appendChild(n),this.shadow.appendChild(t)}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(){let e=this.inputEl.value.trim();if(!e||this.isLoading)return;this.addMessage({id:String(++this.idCounter),role:"user",content:e,timestamp:Date.now()}),this.inputEl.value="",this.inputEl.style.height="auto",this.setLoading(!0),this.client.send(e)}addMessage(e){this.messages.push(e),this.renderMessage(e),this.scrollToBottom()}renderMessage(e){let n=document.createElement("div");n.className=`kiln-msg ${e.role}`,n.dataset.msgId=e.id;let t=document.createElement("div");if(t.className="kiln-bubble",e.role==="assistant")t.appendChild(Y(e.content));else t.textContent=e.content;n.appendChild(t),this.messagesEl.insertBefore(n,this.typingEl)}renderErrorMessage(e){let n=document.createElement("div");n.className="kiln-msg error";let t=document.createElement("div");t.className="kiln-bubble",t.textContent=e,n.appendChild(t),this.messagesEl.insertBefore(n,this.typingEl),this.scrollToBottom()}setLoading(e){if(this.isLoading=e,this.sendEl.disabled=e,this.inputEl.disabled=e,e)this.typingEl.classList.remove("hidden"),this.scrollToBottom();else this.typingEl.classList.add("hidden")}scrollToBottom(){requestAnimationFrame(()=>{this.messagesEl.scrollTop=this.messagesEl.scrollHeight})}handleFrame(e){if(e.type==="done")this.setLoading(!1),this.addMessage({id:String(++this.idCounter),role:"assistant",content:e.content,timestamp:Date.now()});else if(e.type==="error")this.setLoading(!1),this.renderErrorMessage(e.message)}updateStatus(e){this.statusDotEl.className=e}destroy(){this.client.disconnect(),this.container.remove()}}(function(){let e=document.currentScript;if(!e)return;let n=e.dataset.gateway,t=e.dataset.app,i=e.dataset.widgetId;if(!n||!t||!i)return;let s={gatewayUrl:n,appName:t,widgetId:i,position:e.dataset.position??"bottom-right",theme:e.dataset.theme??"auto",greeting:e.dataset.greeting,placeholder:e.dataset.placeholder},o=()=>new k(s);if(document.readyState==="loading")document.addEventListener("DOMContentLoaded",o);else o()})();})();

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@kilnai/widget",
+  "version": "0.1.5",
+  "description": "Embeddable chat widget for Kiln AI — add AI chat to any website with one script tag",
+  "type": "module",
+  "main": "dist/widget.js",
+  "files": ["dist"],
+  "scripts": {
+    "build": "bun run build.ts",
+    "test": "vitest run"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sequelcore/kiln.git",
+    "directory": "packages/widget"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "jsdom": "^25.0.0",
+    "vitest": "^4.0.18"
+  }
+}