@useago/sdk 0.4.2 → 0.4.3

package/dist/widget.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const re=require("./AgoClient-D4EL6nva.cjs"),ae=require("./createFormCollector-Wb8Rr-U2.cjs"),ie=require("./createConversationSession-DtaeA418.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

@@ -606,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
@@ -688,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

@@ -606,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
@@ -688,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.js

@@ -1,94 +1,114 @@
-import { t as re } from "./AgoClient-rvTz2thR.js";
-import { t as ae } from "./createFormCollector-BwvkKi48.js";
-import { t as ie } from "./createConversationSession-D9FesBQS.js";
-var Y = '"IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
-function x(s, n) {
-  Object.assign(s.style, n);
+import { t as ge } from "./AgoClient-rvTz2thR.js";
+import { t as ue } from "./createFormCollector-BwvkKi48.js";
+import { t as xe } from "./createConversationSession-D9FesBQS.js";
+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)", H = "var(--ago-text-color, #30373e)", ve = "var(--ago-muted-text-color, #6b6d6f)", E = "var(--ago-border-color, #dee3e8)", K = "var(--ago-accent-color, #1b5fc4)", X = "var(--ago-radius, 16px)";
+function Ce(i, o) {
+  if (o)
+    for (const g of Object.keys(ee)) {
+      const w = o[g];
+      w != null && i.style.setProperty(ee[g], w);
+    }
+}
+function m(i, o) {
+  Object.assign(i.style, o);
 }
-function c(s = {}) {
-  const n = document.createElement("div");
-  return x(n, s), n;
+function c(i = {}) {
+  const o = document.createElement("div");
+  return m(o, i), o;
 }
-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);
+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 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 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 ue(s, n) {
-  const { title: v = "Chat", welcomeMessage: _ = "Hello! How can I help you today?", placeholder: N = "Type a message...", allowFiles: g = !1, height: m = 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(n.config), L = le(s), y = n.persistConversation, D = y ? ie(y === !0 ? {} : y) : void 0;
-  let u = n.conversationId ?? D?.getLastActiveThread() ?? void 0, o = [], k = !1, z = null;
-  const T = [], W = c({
+function _e(i, o) {
+  const { title: g = "Chat", welcomeMessage: w = "Hello! How can I help you today?", placeholder: T = "Type a message...", allowFiles: u = !1, height: x = 500, logoUrl: f, showAgentName: v = !1, theme: A, loadThreads: D = !1, forms: B, onFollowUpClick: s, onMessageSent: C, 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 ge(o.config), k = Ee(i), U = o.persistConversation, I = U ? xe(U === !0 ? {} : U) : void 0;
+  let h = o.conversationId ?? I?.getLastActiveThread() ?? void 0, n = [], _ = !1, N = null;
+  const M = [], O = c({
     display: "flex",
     flexDirection: "column",
-    height: typeof m == "number" ? `${m}px` : m,
-    border: "1px solid #dee3e8",
-    borderRadius: "16px",
+    height: typeof x == "number" ? `${x}px` : x,
+    border: `1px solid ${E}`,
+    borderRadius: X,
     overflow: "hidden",
-    backgroundColor: "#fff",
-    fontFamily: Y,
+    backgroundColor: L,
+    fontFamily: oe,
     boxShadow: "rgba(15, 15, 15, 0.08) 0px 2px 16px 0px"
   });
-  W.className = "ago-chat-widget";
-  const F = c({
+  O.className = "ago-chat-widget", Ce(O, A);
+  const z = c({
     padding: "14px 16px",
-    borderBottom: "1px solid #dee3e8",
-    backgroundColor: "#03182f",
-    color: "#e8f0fe",
+    borderBottom: `1px solid ${E}`,
+    backgroundColor: me,
+    color: he,
     display: "flex",
     alignItems: "center",
     gap: "10px"
   });
-  if (F.className = "ago-chat-widget__header", f) {
+  if (z.className = "ago-chat-widget__header", f) {
     const e = document.createElement("img");
-    e.src = f, e.alt = "Logo", x(e, {
+    e.src = f, e.alt = "Logo", m(e, {
       height: "24px",
       width: "auto"
-    }), F.appendChild(e);
+    }), z.appendChild(e);
   }
-  const M = document.createElement("h3");
-  M.textContent = v, x(M, {
+  const W = document.createElement("h3");
+  W.textContent = g, m(W, {
     margin: "0",
     fontSize: "15px",
     fontWeight: "600"
-  }), F.appendChild(M);
-  const E = c({
+  }), z.appendChild(W);
+  const R = c({
     flex: "1",
     overflow: "auto",
     padding: "16px",
-    backgroundColor: "#fbfbfb"
+    backgroundColor: be
   });
-  E.className = "ago-chat-widget__messages";
-  const { inputRow: J, setDisabled: Q, focus: X } = de({
-    placeholder: N,
-    allowFiles: g,
+  R.className = "ago-chat-widget__messages";
+  const { inputRow: ae, setDisabled: se, focus: ie } = we({
+    placeholder: T,
+    allowFiles: u,
     onSend: (e, t) => {
-      H(e, t);
+      F(e, t);
     }
   });
-  se(), W.append(F, E, J), L.appendChild(W);
-  const O = R !== !1, $ = R === !1 ? void 0 : R ?? ((e) => {
-    H(e);
+  ye(), O.append(z, R, ae), k.appendChild(O);
+  const j = s !== !1, V = s === !1 ? void 0 : s ?? ((e) => {
+    F(e);
   });
-  function Z(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 && b && e.agent) {
+    if (d.className = `ago-message ago-message--${e.role}`, !t && v && e.agent) {
       const r = c({
         fontSize: "13px",
         fontWeight: "500",
-        color: "#30373e",
+        color: H,
         marginBottom: "6px",
         padding: "0 4px"
       });
@@ -104,27 +124,27 @@ function ue(s, n) {
         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"), x(w, {
+        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 #dee3e8",
+          border: `1px solid ${E}`,
           borderRadius: "8px",
-          backgroundColor: "#fff",
+          backgroundColor: L,
           textDecoration: "none",
-          color: "#30373e",
+          color: H,
           fontSize: "12px",
           overflow: "hidden"
         });
-        const q = c({
+        const Z = c({
           flexShrink: "0",
           width: "18px",
           height: "18px",
           borderRadius: "3px",
-          border: "1px solid #1b5fc4",
-          color: "#1b5fc4",
+          border: `1px solid ${K}`,
+          color: K,
           fontSize: "11px",
           fontWeight: "500",
           display: "flex",
@@ -132,27 +152,27 @@ function ue(s, n) {
           justifyContent: "center",
           backgroundColor: "#f0f4ff"
         });
-        q.textContent = String(a + 1);
-        const B = c({
+        Z.textContent = String(a + 1);
+        const P = c({
           overflow: "hidden",
           textOverflow: "ellipsis",
           whiteSpace: "nowrap"
         });
-        B.textContent = p.title, B.title = p.title, w.append(q, B), r.appendChild(w);
+        P.textContent = p.title, P.title = p.title, y.append(Z, P), r.appendChild(y);
       }), d.appendChild(r);
     }
-    const h = c({
+    const b = c({
       maxWidth: t ? "75%" : "100%",
       padding: t ? "10px 14px" : "2px 8px",
-      borderRadius: t ? "16px" : "0",
-      backgroundColor: t ? "#03182f" : "transparent",
-      color: t ? "#fff" : "#30373e",
+      borderRadius: t ? X : "0",
+      backgroundColor: t ? ne : "transparent",
+      color: t ? re : H,
       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) {
+    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",
@@ -162,19 +182,19 @@ function ue(s, n) {
       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, x(a, {
+        a.type = "button", a.className = "ago-message__followup-btn", a.textContent = p, a.disabled = !j, m(a, {
           padding: "6px 14px",
           fontSize: "13px",
-          borderRadius: "16px",
-          border: "1px solid #dee3e8",
-          backgroundColor: "#fff",
-          color: "#30373e",
-          cursor: O ? "pointer" : "default",
+          borderRadius: X,
+          border: `1px solid ${E}`,
+          backgroundColor: L,
+          color: H,
+          cursor: j ? "pointer" : "default",
           transition: "border-color 0.15s"
-        }), $ && a.addEventListener("click", () => $(p)), a.addEventListener("mouseenter", () => {
-          a.style.borderColor = "#1b5fc4";
+        }), V && a.addEventListener("click", () => V(p)), a.addEventListener("mouseenter", () => {
+          a.style.borderColor = K;
         }), a.addEventListener("mouseleave", () => {
-          a.style.borderColor = "#dee3e8";
+          a.style.borderColor = E;
         }), r.appendChild(a);
       }
       d.appendChild(r);
@@ -182,17 +202,17 @@ function ue(s, n) {
     return d;
   }
   function S() {
-    if (E.replaceChildren(), o.length === 0) {
+    if (R.replaceChildren(), n.length === 0) {
       const e = c({
         textAlign: "center",
-        color: "#6b6d6f",
+        color: ve,
         padding: "24px 16px",
         fontSize: "14px",
         lineHeight: "1.5"
       });
-      e.textContent = _, E.appendChild(e);
-    } else for (const e of o) E.appendChild(Z(e));
-    if (z) {
+      e.textContent = w, R.appendChild(e);
+    } else for (const e of n) R.appendChild(le(e));
+    if (N) {
       const e = c({
         padding: "10px 14px",
         backgroundColor: "#fef2f2",
@@ -202,47 +222,47 @@ function ue(s, n) {
         fontSize: "13px",
         border: "1px solid #fecaca"
       });
-      e.textContent = z, E.appendChild(e);
+      e.textContent = N, R.appendChild(e);
     }
-    E.scrollTop = E.scrollHeight, Q(k);
+    R.scrollTop = R.scrollHeight, se(_);
   }
-  function ee() {
-    for (let e = o.length - 1; e >= 0; e--) {
-      const t = o[e];
+  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 P = (e) => {
-    u || (u = e.conversationId);
-  }, G = (e) => {
-    const t = ee();
+  const q = (e) => {
+    h || (h = e.conversationId);
+  }, Y = (e) => {
+    const t = de();
     t && (t.content += e.content, S());
-  }, K = (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?.({
+  }, 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, S(), e.status === "DONE" && $?.({
       id: e.id,
       content: e.content
     });
-  }, j = (e) => {
-    z = e.error, k = !1, o = o.filter((t) => !t.id.startsWith("temp-")), S();
+  }, Q = (e) => {
+    N = e.error, _ = !1, n = n.filter((t) => !t.id.startsWith("temp-")), S();
   };
-  l.on("message:start", P), l.on("message:chunk", G), l.on("message:complete", K), l.on("message:error", j);
-  const te = (A ?? []).map((e) => ae(e).install(l));
-  async function H(e, t) {
+  l.on("message:start", q), l.on("message:chunk", Y), l.on("message:complete", J), l.on("message:error", Q);
+  const ce = (B ?? []).map((e) => ue(e).install(l));
+  async function F(e, t) {
     const d = e.trim();
-    if (!d && !t?.length || k) return;
-    i?.(d), k = !0, z = null;
-    const h = Date.now();
-    o.push({
-      id: `temp-user-${h}`,
-      conversationId: u || "",
+    if (!d && !t?.length || _) return;
+    C?.(d), _ = !0, N = null;
+    const b = Date.now();
+    n.push({
+      id: `temp-user-${b}`,
+      conversationId: h || "",
       content: d,
       role: "user",
       status: "DONE",
       createdAt: /* @__PURE__ */ new Date()
-    }), o.push({
-      id: `temp-assistant-${h}`,
-      conversationId: u || "",
+    }), n.push({
+      id: `temp-assistant-${b}`,
+      conversationId: h || "",
       content: "",
       role: "assistant",
       status: "IN_PROGRESS",
@@ -250,48 +270,48 @@ function ue(s, n) {
     }), S();
     try {
       const r = await l.sendMessage(d, {
-        conversationId: u,
+        conversationId: h,
         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);
+      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);
       }
-      o = o.filter((a) => !a.id.startsWith("temp-")), k = !1, S(), I && U();
+      n = n.filter((a) => !a.id.startsWith("temp-")), _ = !1, S(), D && G();
     } catch (r) {
-      z = r instanceof Error ? r.message : "Failed to send message", k = !1, o = o.filter((p) => !p.id.startsWith("temp-")), S();
+      N = r instanceof Error ? r.message : "Failed to send message", _ = !1, n = n.filter((p) => !p.id.startsWith("temp-")), S();
     }
   }
-  async function U() {
+  async function G() {
     try {
       const e = await l.getConversations();
-      T.splice(0, T.length, ...e);
+      M.splice(0, M.length, ...e);
     } catch {
     }
-    return T;
+    return M;
   }
-  async function ne(e) {
+  async function pe(e) {
     try {
       const t = (await l.getConversation(e))?.messages ?? [];
-      t.length > 0 && o.length === 0 && (o = t, S());
+      t.length > 0 && n.length === 0 && (n = t, S());
     } catch {
-      o.length === 0 && (D?.clear(), u = void 0);
+      n.length === 0 && (I?.clear(), h = void 0);
     }
   }
-  return S(), X(), u && ne(u), I && U(), {
+  return S(), ie(), h && pe(h), D && G(), {
     client: l,
-    element: W,
-    sendMessage: H,
-    session: D,
-    threads: T,
-    refreshThreads: U,
+    element: O,
+    sendMessage: F,
+    session: I,
+    threads: M,
+    refreshThreads: G,
     destroy() {
-      l.off("message:start", P), l.off("message:chunk", G), l.off("message:complete", K), l.off("message:error", j), te.forEach((e) => e()), W.remove(), n.client || l.destroy();
+      l.off("message:start", q), 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 oe() {
+  function fe() {
     const e = c({
       display: "flex",
       gap: "4px",
@@ -311,108 +331,108 @@ function ue(s, n) {
     return e;
   }
 }
-function de(s) {
-  let n = [];
-  const v = document.createElement("form");
-  x(v, {
+function we(i) {
+  let o = [];
+  const g = document.createElement("form");
+  m(g, {
     display: "flex",
     flexDirection: "column",
     gap: "8px",
     padding: "12px",
-    borderTop: "1px solid #dee3e8",
-    backgroundColor: "#fff"
-  }), v.className = "ago-chat-input";
-  const _ = c({
+    borderTop: `1px solid ${E}`,
+    backgroundColor: L
+  }), g.className = "ago-chat-input";
+  const w = c({
     display: "flex",
     flexWrap: "wrap",
     gap: "6px"
-  }), N = c({
+  }), T = c({
     display: "flex",
     gap: "8px",
     alignItems: "flex-end"
-  }), g = document.createElement("textarea");
-  g.placeholder = s.placeholder, g.rows = 1, x(g, {
+  }), u = document.createElement("textarea");
+  u.placeholder = i.placeholder, u.rows = 1, m(u, {
     flex: "1",
     resize: "none",
     padding: "10px 12px",
-    border: "1px solid #dee3e8",
+    border: `1px solid ${E}`,
     borderRadius: "12px",
     fontSize: "14px",
-    fontFamily: Y,
+    fontFamily: oe,
     lineHeight: "1.4",
     maxHeight: "120px",
     outline: "none"
   });
-  const m = document.createElement("button");
-  m.type = "submit", m.textContent = "Send", x(m, {
+  const x = document.createElement("button");
+  x.type = "submit", x.textContent = "Send", m(x, {
     padding: "10px 16px",
     border: "none",
     borderRadius: "12px",
-    backgroundColor: "#03182f",
-    color: "#fff",
+    backgroundColor: ne,
+    color: re,
     fontSize: "14px",
     fontWeight: "500",
     cursor: "pointer"
   });
-  let f = null, b = null;
-  s.allowFiles && (f = document.createElement("input"), f.type = "file", f.multiple = !0, x(f, { display: "none" }), b = document.createElement("button"), b.type = "button", b.textContent = "📎", x(b, {
+  let f = null, v = null;
+  i.allowFiles && (f = document.createElement("input"), f.type = "file", f.multiple = !0, m(f, { display: "none" }), v = document.createElement("button"), v.type = "button", v.textContent = "📎", m(v, {
     padding: "10px 12px",
-    border: "1px solid #dee3e8",
+    border: `1px solid ${E}`,
     borderRadius: "12px",
-    backgroundColor: "#fff",
+    backgroundColor: L,
     cursor: "pointer",
     fontSize: "14px"
-  }), b.addEventListener("click", () => f?.click()), f.addEventListener("change", () => {
-    n = [...n, ...Array.from(f?.files ?? [])], I();
+  }), v.addEventListener("click", () => f?.click()), f.addEventListener("change", () => {
+    o = [...o, ...Array.from(f?.files ?? [])], A();
   }));
-  function I() {
-    _.replaceChildren(), n.forEach((i, C) => {
-      const l = c({
+  function A() {
+    w.replaceChildren(), o.forEach((s, C) => {
+      const $ = c({
         display: "flex",
         alignItems: "center",
         gap: "4px",
         padding: "4px 8px",
         backgroundColor: "#f0f4ff",
-        border: "1px solid #dee3e8",
+        border: `1px solid ${E}`,
         borderRadius: "8px",
         fontSize: "12px"
-      }), L = document.createElement("span");
-      L.textContent = i.name;
-      const y = document.createElement("button");
-      y.type = "button", y.textContent = "×", x(y, {
+      }), 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"
-      }), y.addEventListener("click", () => {
-        n = n.filter((D, u) => u !== C), I();
-      }), l.append(L, y), _.appendChild(l);
+      }), k.addEventListener("click", () => {
+        o = o.filter((U, I) => I !== C), A();
+      }), $.append(l, k), w.appendChild($);
     });
   }
-  const A = () => {
-    const i = g.value, C = n;
-    return g.value = "", n = [], I(), {
-      content: i,
+  const D = () => {
+    const s = u.value, C = o;
+    return u.value = "", o = [], A(), {
+      content: s,
       files: C
     };
-  }, R = () => {
-    const { content: i, files: C } = A();
-    (i.trim() || C.length > 0) && s.onSend(i.trim(), C.length > 0 ? C : void 0);
+  }, B = () => {
+    const { content: s, files: C } = D();
+    (s.trim() || C.length > 0) && i.onSend(s.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, m), f && v.appendChild(f), v.append(_, N), {
-    inputRow: v,
-    getValueAndClear: A,
-    setDisabled: (i) => {
-      g.disabled = i, m.disabled = i, m.style.opacity = i ? "0.6" : "1", m.style.cursor = i ? "not-allowed" : "pointer";
+  return g.addEventListener("submit", (s) => {
+    s.preventDefault(), B();
+  }), u.addEventListener("keydown", (s) => {
+    s.key === "Enter" && !s.shiftKey && (s.preventDefault(), B());
+  }), v && T.appendChild(v), T.append(u, x), f && g.appendChild(f), g.append(w, T), {
+    inputRow: g,
+    getValueAndClear: D,
+    setDisabled: (s) => {
+      u.disabled = s, x.disabled = s, x.style.opacity = s ? "0.6" : "1", x.style.cursor = s ? "not-allowed" : "pointer";
     },
-    focus: () => g.focus()
+    focus: () => u.focus()
   };
 }
 export {
-  ue as mountChatWidget
+  _e as mountChatWidget
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useago/sdk",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "JavaScript SDK for AGO Chat integration",
   "type": "module",
   "sideEffects": false,