@useago/sdk 0.4.1 → 0.4.3

package/dist/vue.d.cts

@@ -155,6 +155,13 @@ declare class AgoClient {
      * Remove a dynamic context provider.
      */
     removeDynamicContext(key: string): boolean;
+    /**
+     * Broadcast that the client-side context changed by emitting `context:changed`
+     * with the fresh snapshot. The context-mutating methods call this automatically;
+     * stateful helpers whose context lives in a store (e.g. `createFormCollector`)
+     * call it when their store updates so observers like the dev panel stay live.
+     */
+    notifyContextChanged(): void;
     /**
      * Enable automatic capture of the current browser page (URL + title).
      * Injected as a dynamic context entry named `browser-page`.
@@ -200,6 +207,14 @@ declare class AgoClient {
  * SDK Events
  */
 declare interface AgoClientEvents {
+    /**
+     * The client-side context changed: a context entry or dynamic provider was
+     * added/removed, or a stateful helper (e.g. `createFormCollector`) updated its
+     * store. Carries the fresh snapshot so observers — notably the dev panel — can
+     * repaint without waiting for the next message. Fires for the form collector's
+     * initial install too, so its missing fields show from the start of a conversation.
+     */
+    "context:changed": ContextSnapshot | null;
     "message:start": {
         conversationId: string;
         messageId: string;

package/dist/vue.d.ts

@@ -155,6 +155,13 @@ declare class AgoClient {
      * Remove a dynamic context provider.
      */
     removeDynamicContext(key: string): boolean;
+    /**
+     * Broadcast that the client-side context changed by emitting `context:changed`
+     * with the fresh snapshot. The context-mutating methods call this automatically;
+     * stateful helpers whose context lives in a store (e.g. `createFormCollector`)
+     * call it when their store updates so observers like the dev panel stay live.
+     */
+    notifyContextChanged(): void;
     /**
      * Enable automatic capture of the current browser page (URL + title).
      * Injected as a dynamic context entry named `browser-page`.
@@ -200,6 +207,14 @@ declare class AgoClient {
  * SDK Events
  */
 declare interface AgoClientEvents {
+    /**
+     * The client-side context changed: a context entry or dynamic provider was
+     * added/removed, or a stateful helper (e.g. `createFormCollector`) updated its
+     * store. Carries the fresh snapshot so observers — notably the dev panel — can
+     * repaint without waiting for the next message. Fires for the form collector's
+     * initial install too, so its missing fields show from the start of a conversation.
+     */
+    "context:changed": ContextSnapshot | null;
     "message:start": {
         conversationId: string;
         messageId: string;

package/dist/vue.js

@@ -1,4 +1,4 @@
-import { t as A } from "./AgoClient-BerJvssl.js";
+import { t as A } from "./AgoClient-rvTz2thR.js";
 import { computed as y, inject as F, onMounted as g, onScopeDispose as N, onUnmounted as I, ref as c, shallowRef as D } from "vue";
 var L = /* @__PURE__ */ Symbol("ago-client"), b = { install(t, n) {
   const e = new A(n);

package/dist/widget.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const re=require("./AgoClient-B6PsfMeg.cjs"),ae=require("./createFormCollector-D1FfiSgA.cjs"),ie=require("./createConversationSession-D3K5Gf1k.cjs");var Y='"IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';function m(s,n){Object.assign(s.style,n)}function c(s={}){const n=document.createElement("div");return m(n,s),n}var V="ago-chat-widget-keyframes";function se(){if(typeof document>"u"||document.getElementById(V))return;const s=document.createElement("style");s.id=V,s.textContent="@keyframes ago-pulse { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }",document.head.appendChild(s)}function le(s){const n=typeof s=="string"?document.querySelector(s):s;if(!n)throw new Error(`mountChatWidget: target "${String(s)}" not found.`);return n}function de(s,n){const{title:v="Chat",welcomeMessage:_="Hello! How can I help you today?",placeholder:N="Type a message...",allowFiles:g=!1,height:x=500,logoUrl:f,showAgentName:b=!1,loadThreads:I=!1,forms:A,onFollowUpClick:R,onMessageSent:i,onMessageReceived:C}=n;if(!n.client&&!n.config?.baseUrl)throw new Error("mountChatWidget requires either `client` or `config` (with a baseUrl).");const l=n.client??new re.AgoClient(n.config),T=le(s),y=n.persistConversation,D=y?ie.createConversationSession(y===!0?{}:y):void 0;let u=n.conversationId??D?.getLastActiveThread()??void 0,o=[],k=!1,W=null;const F=[],z=c({display:"flex",flexDirection:"column",height:typeof x=="number"?`${x}px`:x,border:"1px solid #dee3e8",borderRadius:"16px",overflow:"hidden",backgroundColor:"#fff",fontFamily:Y,boxShadow:"rgba(15, 15, 15, 0.08) 0px 2px 16px 0px"});z.className="ago-chat-widget";const L=c({padding:"14px 16px",borderBottom:"1px solid #dee3e8",backgroundColor:"#03182f",color:"#e8f0fe",display:"flex",alignItems:"center",gap:"10px"});if(L.className="ago-chat-widget__header",f){const e=document.createElement("img");e.src=f,e.alt="Logo",m(e,{height:"24px",width:"auto"}),L.appendChild(e)}const M=document.createElement("h3");M.textContent=v,m(M,{margin:"0",fontSize:"15px",fontWeight:"600"}),L.appendChild(M);const E=c({flex:"1",overflow:"auto",padding:"16px",backgroundColor:"#fbfbfb"});E.className="ago-chat-widget__messages";const{inputRow:J,setDisabled:Q,focus:X}=ce({placeholder:N,allowFiles:g,onSend:(e,t)=>{H(e,t)}});se(),z.append(L,E,J),T.appendChild(z);const O=R!==!1,$=R===!1?void 0:R??(e=>{H(e)});function Z(e){const t=e.role==="user",d=c({display:"flex",flexDirection:"column",alignItems:t?"flex-end":"flex-start",marginBottom:"16px"});if(d.className=`ago-message ago-message--${e.role}`,!t&&b&&e.agent){const r=c({fontSize:"13px",fontWeight:"500",color:"#30373e",marginBottom:"6px",padding:"0 4px"});r.className="ago-message__agent",r.textContent=e.agent.displayName||e.agent.name,d.appendChild(r)}if(!t&&e.sources&&e.sources.length>0){const r=c({display:"grid",gridTemplateColumns:"1fr 1fr",gap:"6px",marginBottom:"10px",width:"100%",maxWidth:"85%"});r.className="ago-message__sources",e.sources.forEach((p,a)=>{const w=p.url?document.createElement("a"):document.createElement("div");p.url&&w instanceof HTMLAnchorElement&&(w.href=p.url,w.target="_blank",w.rel="noopener noreferrer"),m(w,{display:"flex",alignItems:"center",gap:"8px",padding:"8px 10px",border:"1px solid #dee3e8",borderRadius:"8px",backgroundColor:"#fff",textDecoration:"none",color:"#30373e",fontSize:"12px",overflow:"hidden"});const K=c({flexShrink:"0",width:"18px",height:"18px",borderRadius:"3px",border:"1px solid #1b5fc4",color:"#1b5fc4",fontSize:"11px",fontWeight:"500",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"#f0f4ff"});K.textContent=String(a+1);const B=c({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"});B.textContent=p.title,B.title=p.title,w.append(K,B),r.appendChild(w)}),d.appendChild(r)}const h=c({maxWidth:t?"75%":"100%",padding:t?"10px 14px":"2px 8px",borderRadius:t?"16px":"0",backgroundColor:t?"#03182f":"transparent",color:t?"#fff":"#30373e",wordBreak:"break-word",fontSize:"14px",lineHeight:"1.6",whiteSpace:"pre-wrap"});if(h.className="ago-message__content",e.content?h.textContent=e.content:e.status==="IN_PROGRESS"&&h.appendChild(oe()),d.appendChild(h),e.followUpReplies&&e.followUpReplies.length>0){const r=c({display:"flex",flexWrap:"wrap",gap:"8px",marginTop:"10px"});r.className="ago-message__followups";for(const p of e.followUpReplies){const a=document.createElement("button");a.type="button",a.className="ago-message__followup-btn",a.textContent=p,a.disabled=!O,m(a,{padding:"6px 14px",fontSize:"13px",borderRadius:"16px",border:"1px solid #dee3e8",backgroundColor:"#fff",color:"#30373e",cursor:O?"pointer":"default",transition:"border-color 0.15s"}),$&&a.addEventListener("click",()=>$(p)),a.addEventListener("mouseenter",()=>{a.style.borderColor="#1b5fc4"}),a.addEventListener("mouseleave",()=>{a.style.borderColor="#dee3e8"}),r.appendChild(a)}d.appendChild(r)}return d}function S(){if(E.replaceChildren(),o.length===0){const e=c({textAlign:"center",color:"#6b6d6f",padding:"24px 16px",fontSize:"14px",lineHeight:"1.5"});e.textContent=_,E.appendChild(e)}else for(const e of o)E.appendChild(Z(e));if(W){const e=c({padding:"10px 14px",backgroundColor:"#fef2f2",color:"#dc2626",borderRadius:"12px",marginTop:"8px",fontSize:"13px",border:"1px solid #fecaca"});e.textContent=W,E.appendChild(e)}E.scrollTop=E.scrollHeight,Q(k)}function ee(){for(let e=o.length-1;e>=0;e--){const t=o[e];if(t.role==="assistant"&&t.status==="IN_PROGRESS")return t}}const q=e=>{u||(u=e.conversationId)},P=e=>{const t=ee();t&&(t.content+=e.content,S())},G=e=>{const t=o.findIndex(d=>d.id===e.id||d.role==="assistant"&&d.status==="IN_PROGRESS");t>=0?o[t]=e:o.push(e),k=!1,S(),e.status==="DONE"&&C?.({id:e.id,content:e.content})},j=e=>{W=e.error,k=!1,o=o.filter(t=>!t.id.startsWith("temp-")),S()};l.on("message:start",q),l.on("message:chunk",P),l.on("message:complete",G),l.on("message:error",j);const te=(A??[]).map(e=>ae.createFormCollector(e).install(l));async function H(e,t){const d=e.trim();if(!d&&!t?.length||k)return;i?.(d),k=!0,W=null;const h=Date.now();o.push({id:`temp-user-${h}`,conversationId:u||"",content:d,role:"user",status:"DONE",createdAt:new Date}),o.push({id:`temp-assistant-${h}`,conversationId:u||"",content:"",role:"assistant",status:"IN_PROGRESS",createdAt:new Date}),S();try{const r=await l.sendMessage(d,{conversationId:u,files:t});r.conversationId&&(u||(u=r.conversationId),D?.setActiveThread(r.conversationId,r.createdAt));const p=o.find(a=>a.id===`temp-user-${h}`);if(p&&(p.id=`user-${h}`,p.conversationId=r.conversationId),!o.some(a=>a.id===r.id)){const a=o.findIndex(w=>w.id===`temp-assistant-${h}`);a>=0?o[a]=r:o.push(r)}o=o.filter(a=>!a.id.startsWith("temp-")),k=!1,S(),I&&U()}catch(r){W=r instanceof Error?r.message:"Failed to send message",k=!1,o=o.filter(p=>!p.id.startsWith("temp-")),S()}}async function U(){try{const e=await l.getConversations();F.splice(0,F.length,...e)}catch{}return F}async function ne(e){try{const t=(await l.getConversation(e))?.messages??[];t.length>0&&o.length===0&&(o=t,S())}catch{o.length===0&&(D?.clear(),u=void 0)}}return S(),X(),u&&ne(u),I&&U(),{client:l,element:z,sendMessage:H,session:D,threads:F,refreshThreads:U,destroy(){l.off("message:start",q),l.off("message:chunk",P),l.off("message:complete",G),l.off("message:error",j),te.forEach(e=>e()),z.remove(),n.client||l.destroy()}};function oe(){const e=c({display:"flex",gap:"4px",padding:"4px 0"});for(let t=0;t<3;t++){const d=c({width:"6px",height:"6px",borderRadius:"50%",backgroundColor:"#b5bfc8",animation:"ago-pulse 1.2s ease-in-out infinite",animationDelay:`${t*.2}s`});e.appendChild(d)}return e}}function ce(s){let n=[];const v=document.createElement("form");m(v,{display:"flex",flexDirection:"column",gap:"8px",padding:"12px",borderTop:"1px solid #dee3e8",backgroundColor:"#fff"}),v.className="ago-chat-input";const _=c({display:"flex",flexWrap:"wrap",gap:"6px"}),N=c({display:"flex",gap:"8px",alignItems:"flex-end"}),g=document.createElement("textarea");g.placeholder=s.placeholder,g.rows=1,m(g,{flex:"1",resize:"none",padding:"10px 12px",border:"1px solid #dee3e8",borderRadius:"12px",fontSize:"14px",fontFamily:Y,lineHeight:"1.4",maxHeight:"120px",outline:"none"});const x=document.createElement("button");x.type="submit",x.textContent="Send",m(x,{padding:"10px 16px",border:"none",borderRadius:"12px",backgroundColor:"#03182f",color:"#fff",fontSize:"14px",fontWeight:"500",cursor:"pointer"});let f=null,b=null;s.allowFiles&&(f=document.createElement("input"),f.type="file",f.multiple=!0,m(f,{display:"none"}),b=document.createElement("button"),b.type="button",b.textContent="📎",m(b,{padding:"10px 12px",border:"1px solid #dee3e8",borderRadius:"12px",backgroundColor:"#fff",cursor:"pointer",fontSize:"14px"}),b.addEventListener("click",()=>f?.click()),f.addEventListener("change",()=>{n=[...n,...Array.from(f?.files??[])],I()}));function I(){_.replaceChildren(),n.forEach((i,C)=>{const l=c({display:"flex",alignItems:"center",gap:"4px",padding:"4px 8px",backgroundColor:"#f0f4ff",border:"1px solid #dee3e8",borderRadius:"8px",fontSize:"12px"}),T=document.createElement("span");T.textContent=i.name;const y=document.createElement("button");y.type="button",y.textContent="×",m(y,{border:"none",background:"transparent",cursor:"pointer",fontSize:"14px",lineHeight:"1"}),y.addEventListener("click",()=>{n=n.filter((D,u)=>u!==C),I()}),l.append(T,y),_.appendChild(l)})}const A=()=>{const i=g.value,C=n;return g.value="",n=[],I(),{content:i,files:C}},R=()=>{const{content:i,files:C}=A();(i.trim()||C.length>0)&&s.onSend(i.trim(),C.length>0?C:void 0)};return v.addEventListener("submit",i=>{i.preventDefault(),R()}),g.addEventListener("keydown",i=>{i.key==="Enter"&&!i.shiftKey&&(i.preventDefault(),R())}),b&&N.appendChild(b),N.append(g,x),f&&v.appendChild(f),v.append(_,N),{inputRow:v,getValueAndClear:A,setDisabled:i=>{g.disabled=i,x.disabled=i,x.style.opacity=i?"0.6":"1",x.style.cursor=i?"not-allowed":"pointer"},focus:()=>g.focus()}}exports.mountChatWidget=de;
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ue=require("./AgoClient-D4EL6nva.cjs"),ge=require("./createFormCollector-Wb8Rr-U2.cjs"),xe=require("./createConversationSession-DtaeA418.cjs");var oe='var(--ago-font, "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif)',ee={font:"--ago-font",radius:"--ago-radius",brand:"--ago-brand-color",brandText:"--ago-brand-text-color",headerBg:"--ago-header-background",headerText:"--ago-header-text-color",panelBg:"--ago-panel-background",messagesBg:"--ago-messages-background",text:"--ago-text-color",mutedText:"--ago-muted-text-color",border:"--ago-border-color",accent:"--ago-accent-color"},ne="var(--ago-brand-color, #03182f)",re="var(--ago-brand-text-color, #fff)",me="var(--ago-header-background, var(--ago-brand-color, #03182f))",he="var(--ago-header-text-color, #e8f0fe)",L="var(--ago-panel-background, #fff)",be="var(--ago-messages-background, #fbfbfb)",z="var(--ago-text-color, #30373e)",Ce="var(--ago-muted-text-color, #6b6d6f)",E="var(--ago-border-color, #dee3e8)",G="var(--ago-accent-color, #1b5fc4)",K="var(--ago-radius, 16px)";function ve(i,o){if(o)for(const u of Object.keys(ee)){const w=o[u];w!=null&&i.style.setProperty(ee[u],w)}}function m(i,o){Object.assign(i.style,o)}function c(i={}){const o=document.createElement("div");return m(o,i),o}var te="ago-chat-widget-keyframes";function ye(){if(typeof document>"u"||document.getElementById(te))return;const i=document.createElement("style");i.id=te,i.textContent="@keyframes ago-pulse { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }",document.head.appendChild(i)}function Ee(i){const o=typeof i=="string"?document.querySelector(i):i;if(!o)throw new Error(`mountChatWidget: target "${String(i)}" not found.`);return o}function we(i,o){const{title:u="Chat",welcomeMessage:w="Hello! How can I help you today?",placeholder:T="Type a message...",allowFiles:g=!1,height:x=500,logoUrl:f,showAgentName:C=!1,theme:A,loadThreads:D=!1,forms:B,onFollowUpClick:s,onMessageSent:v,onMessageReceived:$}=o;if(!o.client&&!o.config?.baseUrl)throw new Error("mountChatWidget requires either `client` or `config` (with a baseUrl).");const l=o.client??new ue.AgoClient(o.config),k=Ee(i),M=o.persistConversation,I=M?xe.createConversationSession(M===!0?{}:M):void 0;let h=o.conversationId??I?.getLastActiveThread()??void 0,n=[],_=!1,N=null;const U=[],O=c({display:"flex",flexDirection:"column",height:typeof x=="number"?`${x}px`:x,border:`1px solid ${E}`,borderRadius:K,overflow:"hidden",backgroundColor:L,fontFamily:oe,boxShadow:"rgba(15, 15, 15, 0.08) 0px 2px 16px 0px"});O.className="ago-chat-widget",ve(O,A);const W=c({padding:"14px 16px",borderBottom:`1px solid ${E}`,backgroundColor:me,color:he,display:"flex",alignItems:"center",gap:"10px"});if(W.className="ago-chat-widget__header",f){const e=document.createElement("img");e.src=f,e.alt="Logo",m(e,{height:"24px",width:"auto"}),W.appendChild(e)}const H=document.createElement("h3");H.textContent=u,m(H,{margin:"0",fontSize:"15px",fontWeight:"600"}),W.appendChild(H);const S=c({flex:"1",overflow:"auto",padding:"16px",backgroundColor:be});S.className="ago-chat-widget__messages";const{inputRow:ae,setDisabled:se,focus:ie}=Se({placeholder:T,allowFiles:g,onSend:(e,t)=>{F(e,t)}});ye(),O.append(W,S,ae),k.appendChild(O);const j=s!==!1,X=s===!1?void 0:s??(e=>{F(e)});function le(e){const t=e.role==="user",d=c({display:"flex",flexDirection:"column",alignItems:t?"flex-end":"flex-start",marginBottom:"16px"});if(d.className=`ago-message ago-message--${e.role}`,!t&&C&&e.agent){const r=c({fontSize:"13px",fontWeight:"500",color:z,marginBottom:"6px",padding:"0 4px"});r.className="ago-message__agent",r.textContent=e.agent.displayName||e.agent.name,d.appendChild(r)}if(!t&&e.sources&&e.sources.length>0){const r=c({display:"grid",gridTemplateColumns:"1fr 1fr",gap:"6px",marginBottom:"10px",width:"100%",maxWidth:"85%"});r.className="ago-message__sources",e.sources.forEach((p,a)=>{const y=p.url?document.createElement("a"):document.createElement("div");p.url&&y instanceof HTMLAnchorElement&&(y.href=p.url,y.target="_blank",y.rel="noopener noreferrer"),m(y,{display:"flex",alignItems:"center",gap:"8px",padding:"8px 10px",border:`1px solid ${E}`,borderRadius:"8px",backgroundColor:L,textDecoration:"none",color:z,fontSize:"12px",overflow:"hidden"});const Z=c({flexShrink:"0",width:"18px",height:"18px",borderRadius:"3px",border:`1px solid ${G}`,color:G,fontSize:"11px",fontWeight:"500",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"#f0f4ff"});Z.textContent=String(a+1);const q=c({overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"});q.textContent=p.title,q.title=p.title,y.append(Z,q),r.appendChild(y)}),d.appendChild(r)}const b=c({maxWidth:t?"75%":"100%",padding:t?"10px 14px":"2px 8px",borderRadius:t?K:"0",backgroundColor:t?ne:"transparent",color:t?re:z,wordBreak:"break-word",fontSize:"14px",lineHeight:"1.6",whiteSpace:"pre-wrap"});if(b.className="ago-message__content",e.content?b.textContent=e.content:e.status==="IN_PROGRESS"&&b.appendChild(fe()),d.appendChild(b),e.followUpReplies&&e.followUpReplies.length>0){const r=c({display:"flex",flexWrap:"wrap",gap:"8px",marginTop:"10px"});r.className="ago-message__followups";for(const p of e.followUpReplies){const a=document.createElement("button");a.type="button",a.className="ago-message__followup-btn",a.textContent=p,a.disabled=!j,m(a,{padding:"6px 14px",fontSize:"13px",borderRadius:K,border:`1px solid ${E}`,backgroundColor:L,color:z,cursor:j?"pointer":"default",transition:"border-color 0.15s"}),X&&a.addEventListener("click",()=>X(p)),a.addEventListener("mouseenter",()=>{a.style.borderColor=G}),a.addEventListener("mouseleave",()=>{a.style.borderColor=E}),r.appendChild(a)}d.appendChild(r)}return d}function R(){if(S.replaceChildren(),n.length===0){const e=c({textAlign:"center",color:Ce,padding:"24px 16px",fontSize:"14px",lineHeight:"1.5"});e.textContent=w,S.appendChild(e)}else for(const e of n)S.appendChild(le(e));if(N){const e=c({padding:"10px 14px",backgroundColor:"#fef2f2",color:"#dc2626",borderRadius:"12px",marginTop:"8px",fontSize:"13px",border:"1px solid #fecaca"});e.textContent=N,S.appendChild(e)}S.scrollTop=S.scrollHeight,se(_)}function de(){for(let e=n.length-1;e>=0;e--){const t=n[e];if(t.role==="assistant"&&t.status==="IN_PROGRESS")return t}}const V=e=>{h||(h=e.conversationId)},Y=e=>{const t=de();t&&(t.content+=e.content,R())},J=e=>{const t=n.findIndex(d=>d.id===e.id||d.role==="assistant"&&d.status==="IN_PROGRESS");t>=0?n[t]=e:n.push(e),_=!1,R(),e.status==="DONE"&&$?.({id:e.id,content:e.content})},Q=e=>{N=e.error,_=!1,n=n.filter(t=>!t.id.startsWith("temp-")),R()};l.on("message:start",V),l.on("message:chunk",Y),l.on("message:complete",J),l.on("message:error",Q);const ce=(B??[]).map(e=>ge.createFormCollector(e).install(l));async function F(e,t){const d=e.trim();if(!d&&!t?.length||_)return;v?.(d),_=!0,N=null;const b=Date.now();n.push({id:`temp-user-${b}`,conversationId:h||"",content:d,role:"user",status:"DONE",createdAt:new Date}),n.push({id:`temp-assistant-${b}`,conversationId:h||"",content:"",role:"assistant",status:"IN_PROGRESS",createdAt:new Date}),R();try{const r=await l.sendMessage(d,{conversationId:h,files:t});r.conversationId&&(h||(h=r.conversationId),I?.setActiveThread(r.conversationId,r.createdAt));const p=n.find(a=>a.id===`temp-user-${b}`);if(p&&(p.id=`user-${b}`,p.conversationId=r.conversationId),!n.some(a=>a.id===r.id)){const a=n.findIndex(y=>y.id===`temp-assistant-${b}`);a>=0?n[a]=r:n.push(r)}n=n.filter(a=>!a.id.startsWith("temp-")),_=!1,R(),D&&P()}catch(r){N=r instanceof Error?r.message:"Failed to send message",_=!1,n=n.filter(p=>!p.id.startsWith("temp-")),R()}}async function P(){try{const e=await l.getConversations();U.splice(0,U.length,...e)}catch{}return U}async function pe(e){try{const t=(await l.getConversation(e))?.messages??[];t.length>0&&n.length===0&&(n=t,R())}catch{n.length===0&&(I?.clear(),h=void 0)}}return R(),ie(),h&&pe(h),D&&P(),{client:l,element:O,sendMessage:F,session:I,threads:U,refreshThreads:P,destroy(){l.off("message:start",V),l.off("message:chunk",Y),l.off("message:complete",J),l.off("message:error",Q),ce.forEach(e=>e()),O.remove(),o.client||l.destroy()}};function fe(){const e=c({display:"flex",gap:"4px",padding:"4px 0"});for(let t=0;t<3;t++){const d=c({width:"6px",height:"6px",borderRadius:"50%",backgroundColor:"#b5bfc8",animation:"ago-pulse 1.2s ease-in-out infinite",animationDelay:`${t*.2}s`});e.appendChild(d)}return e}}function Se(i){let o=[];const u=document.createElement("form");m(u,{display:"flex",flexDirection:"column",gap:"8px",padding:"12px",borderTop:`1px solid ${E}`,backgroundColor:L}),u.className="ago-chat-input";const w=c({display:"flex",flexWrap:"wrap",gap:"6px"}),T=c({display:"flex",gap:"8px",alignItems:"flex-end"}),g=document.createElement("textarea");g.placeholder=i.placeholder,g.rows=1,m(g,{flex:"1",resize:"none",padding:"10px 12px",border:`1px solid ${E}`,borderRadius:"12px",fontSize:"14px",fontFamily:oe,lineHeight:"1.4",maxHeight:"120px",outline:"none"});const x=document.createElement("button");x.type="submit",x.textContent="Send",m(x,{padding:"10px 16px",border:"none",borderRadius:"12px",backgroundColor:ne,color:re,fontSize:"14px",fontWeight:"500",cursor:"pointer"});let f=null,C=null;i.allowFiles&&(f=document.createElement("input"),f.type="file",f.multiple=!0,m(f,{display:"none"}),C=document.createElement("button"),C.type="button",C.textContent="📎",m(C,{padding:"10px 12px",border:`1px solid ${E}`,borderRadius:"12px",backgroundColor:L,cursor:"pointer",fontSize:"14px"}),C.addEventListener("click",()=>f?.click()),f.addEventListener("change",()=>{o=[...o,...Array.from(f?.files??[])],A()}));function A(){w.replaceChildren(),o.forEach((s,v)=>{const $=c({display:"flex",alignItems:"center",gap:"4px",padding:"4px 8px",backgroundColor:"#f0f4ff",border:`1px solid ${E}`,borderRadius:"8px",fontSize:"12px"}),l=document.createElement("span");l.textContent=s.name;const k=document.createElement("button");k.type="button",k.textContent="×",m(k,{border:"none",background:"transparent",cursor:"pointer",fontSize:"14px",lineHeight:"1"}),k.addEventListener("click",()=>{o=o.filter((M,I)=>I!==v),A()}),$.append(l,k),w.appendChild($)})}const D=()=>{const s=g.value,v=o;return g.value="",o=[],A(),{content:s,files:v}},B=()=>{const{content:s,files:v}=D();(s.trim()||v.length>0)&&i.onSend(s.trim(),v.length>0?v:void 0)};return u.addEventListener("submit",s=>{s.preventDefault(),B()}),g.addEventListener("keydown",s=>{s.key==="Enter"&&!s.shiftKey&&(s.preventDefault(),B())}),C&&T.appendChild(C),T.append(g,x),f&&u.appendChild(f),u.append(w,T),{inputRow:u,getValueAndClear:D,setDisabled:s=>{g.disabled=s,x.disabled=s,x.style.opacity=s?"0.6":"1",x.style.cursor=s?"not-allowed":"pointer"},focus:()=>g.focus()}}exports.mountChatWidget=we;

package/dist/widget.d.cts

@@ -147,6 +147,13 @@ declare class AgoClient {
      * Remove a dynamic context provider.
      */
     removeDynamicContext(key: string): boolean;
+    /**
+     * Broadcast that the client-side context changed by emitting `context:changed`
+     * with the fresh snapshot. The context-mutating methods call this automatically;
+     * stateful helpers whose context lives in a store (e.g. `createFormCollector`)
+     * call it when their store updates so observers like the dev panel stay live.
+     */
+    notifyContextChanged(): void;
     /**
      * Enable automatic capture of the current browser page (URL + title).
      * Injected as a dynamic context entry named `browser-page`.
@@ -192,6 +199,14 @@ declare class AgoClient {
  * SDK Events
  */
 declare interface AgoClientEvents {
+    /**
+     * The client-side context changed: a context entry or dynamic provider was
+     * added/removed, or a stateful helper (e.g. `createFormCollector`) updated its
+     * store. Carries the fresh snapshot so observers — notably the dev panel — can
+     * repaint without waiting for the next message. Fires for the form collector's
+     * initial install too, so its missing fields show from the start of a conversation.
+     */
+    "context:changed": ContextSnapshot | null;
     "message:start": {
         conversationId: string;
         messageId: string;
@@ -591,6 +606,10 @@ export declare interface MountChatWidgetOptions {
     logoUrl?: string;
     /** Show the agent name above assistant messages. Defaults to `false`. */
     showAgentName?: boolean;
+    /**
+     * Theme overrides so the panel blends into the host page.
+     */
+    theme?: WidgetTheme;
     /**
      * Load the visitor's conversation list into `widget.threads` on mount and refresh
      * it after each turn (one `GET /conversations` per load). Off by default to avoid
@@ -673,4 +692,35 @@ declare interface ToolCallData {
 
 declare type ToolCallType = "form" | "confirmation_input" | "status_message" | "progress_indicator" | "client_function" | "reasoning" | "mcp_ui_resource";
 
+/**
+ * Theme overrides for {@link mountChatWidget}. *
+ * @see The `--ago-*` token reference in `docs/widget.md`.
+ */
+export declare interface WidgetTheme {
+    /** Font family for the whole panel. Pass `"inherit"` to adopt the page font. (`--ago-font`) */
+    font?: string;
+    /** Corner radius of the panel, user bubbles, and suggested-reply pills. (`--ago-radius`) */
+    radius?: string;
+    /** Brand color: user message bubbles and the send button (and the header, unless `headerBg` is set). (`--ago-brand-color`) */
+    brand?: string;
+    /** Text/icon color shown on top of `brand`. (`--ago-brand-text-color`) */
+    brandText?: string;
+    /** Header background. Defaults to `brand`. (`--ago-header-background`) */
+    headerBg?: string;
+    /** Header title color. (`--ago-header-text-color`) */
+    headerText?: string;
+    /** Panel surface: container, input row, suggested-reply pills, source cards. (`--ago-panel-background`) */
+    panelBg?: string;
+    /** Background of the scrolling messages area. (`--ago-messages-background`) */
+    messagesBg?: string;
+    /** Primary body text color (assistant messages, agent name, source labels). (`--ago-text-color`) */
+    text?: string;
+    /** Muted text color (the empty-state welcome message). (`--ago-muted-text-color`) */
+    mutedText?: string;
+    /** Border color used for the panel, input, pills, and cards. (`--ago-border-color`) */
+    border?: string;
+    /** Secondary accent: source badges and suggested-reply hover outline. (`--ago-accent-color`) */
+    accent?: string;
+}
+
 export { }

package/dist/widget.d.ts

@@ -147,6 +147,13 @@ declare class AgoClient {
      * Remove a dynamic context provider.
      */
     removeDynamicContext(key: string): boolean;
+    /**
+     * Broadcast that the client-side context changed by emitting `context:changed`
+     * with the fresh snapshot. The context-mutating methods call this automatically;
+     * stateful helpers whose context lives in a store (e.g. `createFormCollector`)
+     * call it when their store updates so observers like the dev panel stay live.
+     */
+    notifyContextChanged(): void;
     /**
      * Enable automatic capture of the current browser page (URL + title).
      * Injected as a dynamic context entry named `browser-page`.
@@ -192,6 +199,14 @@ declare class AgoClient {
  * SDK Events
  */
 declare interface AgoClientEvents {
+    /**
+     * The client-side context changed: a context entry or dynamic provider was
+     * added/removed, or a stateful helper (e.g. `createFormCollector`) updated its
+     * store. Carries the fresh snapshot so observers — notably the dev panel — can
+     * repaint without waiting for the next message. Fires for the form collector's
+     * initial install too, so its missing fields show from the start of a conversation.
+     */
+    "context:changed": ContextSnapshot | null;
     "message:start": {
         conversationId: string;
         messageId: string;
@@ -591,6 +606,10 @@ export declare interface MountChatWidgetOptions {
     logoUrl?: string;
     /** Show the agent name above assistant messages. Defaults to `false`. */
     showAgentName?: boolean;
+    /**
+     * Theme overrides so the panel blends into the host page.
+     */
+    theme?: WidgetTheme;
     /**
      * Load the visitor's conversation list into `widget.threads` on mount and refresh
      * it after each turn (one `GET /conversations` per load). Off by default to avoid
@@ -673,4 +692,35 @@ declare interface ToolCallData {
 
 declare type ToolCallType = "form" | "confirmation_input" | "status_message" | "progress_indicator" | "client_function" | "reasoning" | "mcp_ui_resource";
 
+/**
+ * Theme overrides for {@link mountChatWidget}. *
+ * @see The `--ago-*` token reference in `docs/widget.md`.
+ */
+export declare interface WidgetTheme {
+    /** Font family for the whole panel. Pass `"inherit"` to adopt the page font. (`--ago-font`) */
+    font?: string;
+    /** Corner radius of the panel, user bubbles, and suggested-reply pills. (`--ago-radius`) */
+    radius?: string;
+    /** Brand color: user message bubbles and the send button (and the header, unless `headerBg` is set). (`--ago-brand-color`) */
+    brand?: string;
+    /** Text/icon color shown on top of `brand`. (`--ago-brand-text-color`) */
+    brandText?: string;
+    /** Header background. Defaults to `brand`. (`--ago-header-background`) */
+    headerBg?: string;
+    /** Header title color. (`--ago-header-text-color`) */
+    headerText?: string;
+    /** Panel surface: container, input row, suggested-reply pills, source cards. (`--ago-panel-background`) */
+    panelBg?: string;
+    /** Background of the scrolling messages area. (`--ago-messages-background`) */
+    messagesBg?: string;
+    /** Primary body text color (assistant messages, agent name, source labels). (`--ago-text-color`) */
+    text?: string;
+    /** Muted text color (the empty-state welcome message). (`--ago-muted-text-color`) */
+    mutedText?: string;
+    /** Border color used for the panel, input, pills, and cards. (`--ago-border-color`) */
+    border?: string;
+    /** Secondary accent: source badges and suggested-reply hover outline. (`--ago-accent-color`) */
+    accent?: string;
+}
+
 export { }