@economic/agents-playground 1.2.1 → 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/assets/{index-CNPSk-AE.js → index-CJXc8PMM.js} +2 -2
  2. package/dist/index.html +1 -1
  3. package/package.json +1 -1
package/dist/assets/{index-CNPSk-AE.js → index-CJXc8PMM.js} RENAMED
@@ -328,7 +328,7 @@ const partysocket = new PartySocket({
328
328
 
329
329
  ---
330
330
 
331
- `),c=o.some(m0),l=!t&&!c&&a.length>0;return(0,U.jsx)(wE,{from:e.role,children:(0,U.jsxs)(`div`,{children:[r.length>0&&(0,U.jsxs)(RB,{children:[(0,U.jsx)(zB,{count:r.length}),(0,U.jsx)(BB,{children:r.map((e,t)=>e.type===`source-url`?(0,U.jsx)(VB,{href:e.url,title:e.title??e.url},t):(0,U.jsx)(VB,{href:`#${e.sourceId}`,title:e.title},t))})]}),(0,U.jsx)(TE,{children:l?(0,U.jsx)(jE,{children:s}):(0,U.jsxs)(U.Fragment,{children:[s&&!n&&(0,U.jsxs)(NB,{defaultOpen:!1,isStreaming:t,children:[(0,U.jsx)(FB,{}),(0,U.jsx)(LB,{children:s})]}),o.map((e,r)=>(0,U.jsx)(Y2,{isStreaming:t,part:e,partIndex:r,userMode:n},r))]})})]})})}var Z2=({attachment:e,onRemove:t})=>(0,U.jsxs)(td,{data:e,onRemove:(0,B.useCallback)(()=>{t(e.id)},[t,e.id]),children:[(0,U.jsx)(nd,{}),(0,U.jsx)(rd,{})]}),Q2=()=>{let e=dk(),t=(0,B.useCallback)(t=>{e.remove(t)},[e]);return e.files.length===0?null:(0,U.jsx)(ed,{variant:`inline`,children:e.files.map(e=>(0,U.jsx)(Z2,{attachment:e,onRemove:t},e.id))})},$2=({chatId:e,host:t,agentName:n,agentUrl:r,authToken:i,body:a,query:o,welcomeMessage:s,onAgentChange:c,onConnectionStatusChange:l,onRetry:u,onUnauthorized:d,userMode:f})=>{let[p,m]=(0,B.useState)(``),[h,g]=(0,B.useState)(!1),{agent:_,chat:v,connectionStatus:y}=J2({agent:n,host:t,chatId:e,authToken:i,toolContext:a??{},connectionParams:o??{},onConnectionStatusChange:l,welcomeMessage:s,onClose:e=>{e.code>=3e3&&d?.(e.reason??``)}});(0,B.useEffect)(()=>(c?.(_),()=>{c?.(null)}),[_,c]);let{messages:b,sendMessage:x,status:S,stop:C}=v,w=(0,B.useMemo)(()=>b.filter(e=>e.role!==`system`),[b]),T=(0,B.useCallback)(e=>{let t=!!e.text?.trim(),n=!!e.files?.length;if(!(t||n))return;let r=[];if(e.text?.trim()&&r.push({type:`text`,text:e.text.trim()}),e.files?.length)for(let t of e.files)r.push({type:`text`,text:`[Attachment: ${t.filename??`file`}]`});x({role:`user`,parts:r}),m(``),e.files?.length&&nt.success(`Files attached`,{description:`${e.files.length} file(s) attached to message`})},[x]),E=(0,B.useCallback)(e=>{m(t=>t?`${t} ${e}`:e)},[]),D=(0,B.useCallback)(e=>{m(e.target.value)},[]),O=(0,B.useCallback)(()=>{g(e=>!e)},[]),k=(0,B.useMemo)(()=>String(S)===`idle`||String(S)===`ready`?`ready`:S===`submitted`||S===`streaming`||S===`error`?S:`ready`,[S]),A=(0,B.useMemo)(()=>{if(k!==`submitted`&&k!==`streaming`)return!1;let e=w.at(-1);if(!e||e.role===`user`)return!0;if(e.role===`assistant`){let t=e.parts?.some(e=>e.type===`text`),n=e.parts?.some(e=>e.type===`reasoning`);return!t&&!n}return!1},[k,w]),j=(0,B.useMemo)(()=>!p.trim()||k===`streaming`||k===`submitted`,[p,k]);return y===`connecting`?(0,U.jsxs)(`div`,{className:`flex size-full flex-col items-center justify-center gap-3 text-muted-foreground`,children:[(0,U.jsx)(`div`,{className:`h-6 w-6 rounded-full border-2 border-zinc-300 border-t-zinc-600 animate-spin`}),(0,U.jsx)(`p`,{className:`text-sm`,children:`Connecting to agent...`})]}):y===`disconnected`?(0,U.jsxs)(`div`,{className:`flex size-full flex-col items-center justify-center gap-4`,children:[(0,U.jsxs)(`div`,{className:`flex flex-col items-center gap-2 text-center`,children:[(0,U.jsx)(`div`,{className:`h-10 w-10 rounded-full bg-red-50 flex items-center justify-center`,children:(0,U.jsx)(`div`,{className:`h-4 w-4 rounded-full bg-red-400`})}),(0,U.jsx)(`h3`,{className:`text-sm font-semibold`,children:`Unable to connect`}),r&&(0,U.jsxs)(`p`,{className:`text-xs text-muted-foreground max-w-xs`,children:[`Could not reach `,(0,U.jsx)(`span`,{className:`font-mono`,children:r}),`. Check the URL and make sure the agent is running.`]})]}),u&&(0,U.jsx)(`button`,{className:`text-xs text-muted-foreground underline underline-offset-2 hover:text-foreground transition-colors`,onClick:u,children:`Try again`})]}):(0,U.jsxs)(`div`,{className:`relative flex size-full flex-col divide-y overflow-hidden`,children:[(0,U.jsxs)(_d,{children:[(0,U.jsxs)(vd,{children:[w.map((e,t)=>(0,U.jsx)(OE,{defaultBranch:0,children:(0,U.jsx)(kE,{children:(0,U.jsx)(X2,{isStreaming:k===`streaming`&&t===w.length-1,message:e,userMode:f})})},e.id)),A&&(0,U.jsx)(wE,{from:`assistant`,children:(0,U.jsx)(TE,{children:(0,U.jsxs)(`div`,{className:`flex items-center gap-1.5 text-muted-foreground text-sm`,children:[(0,U.jsx)(nk,{className:`size-3.5 shrink-0`}),(0,U.jsx)(`span`,{children:`Thinking...`})]})})})]}),(0,U.jsx)(yd,{})]}),(0,U.jsx)(`div`,{className:`grid shrink-0 gap-4 pt-4`,children:(0,U.jsx)(`div`,{className:`w-full px-4 pb-4`,children:(0,U.jsxs)(mk,{globalDrop:!0,multiple:!0,onSubmit:T,children:[(0,U.jsx)(_k,{children:(0,U.jsx)(Q2,{})}),(0,U.jsx)(hk,{children:(0,U.jsx)(gk,{onChange:D,value:p})}),(0,U.jsxs)(vk,{children:[(0,U.jsxs)(yk,{children:[(0,U.jsxs)(xk,{children:[(0,U.jsx)(Sk,{}),(0,U.jsx)(Ck,{children:(0,U.jsx)(pk,{})})]}),(0,U.jsx)(UB,{className:`shrink-0`,onTranscriptionChange:E,size:`icon-sm`,variant:`ghost`}),(0,U.jsxs)(bk,{onClick:O,variant:h?`default`:`ghost`,children:[(0,U.jsx)(Au,{size:16}),(0,U.jsx)(`span`,{children:`Search`})]})]}),(0,U.jsx)(wk,{disabled:j,onStop:C,status:k})]})]})})})]})};function e4({className:e,size:t=`default`,...n}){return(0,U.jsx)(`div`,{"data-slot":`card`,"data-size":t,className:H(`group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl`,e),...n})}function t4({className:e,...t}){return(0,U.jsx)(`div`,{"data-slot":`card-header`,className:H(`group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3`,e),...t})}function n4({className:e,...t}){return(0,U.jsx)(`div`,{"data-slot":`card-title`,className:H(`text-base leading-snug font-medium group-data-[size=sm]/card:text-sm`,e),...t})}function r4({className:e,...t}){return(0,U.jsx)(`div`,{"data-slot":`card-description`,className:H(`text-sm text-muted-foreground`,e),...t})}function i4({...e}){return(0,U.jsx)(SD,{"data-slot":`sheet`,...e})}function a4({...e}){return(0,U.jsx)(wD,{"data-slot":`sheet-trigger`,...e})}function o4({...e}){return(0,U.jsx)(aD,{"data-slot":`sheet-portal`,...e})}function s4({className:e,children:t,side:n=`right`,showCloseButton:r=!0,...i}){return(0,U.jsx)(o4,{children:(0,U.jsxs)(rD,{"data-slot":`sheet-content`,"data-side":n,className:H(`fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm`,e),...i,children:[t,r&&(0,U.jsx)(VE,{"data-slot":`sheet-close`,render:(0,U.jsxs)(Yn,{variant:`ghost`,className:`absolute top-3 right-3`,size:`icon-sm`,children:[(0,U.jsx)(Ku,{}),(0,U.jsx)(`span`,{className:`sr-only`,children:`Close`})]})})]})})}function c4({className:e,...t}){return(0,U.jsx)(`div`,{"data-slot":`sheet-header`,className:H(`flex flex-col gap-0.5 p-4`,e),...t})}function l4({className:e,...t}){return(0,U.jsx)(CD,{"data-slot":`sheet-title`,className:H(`cn-font-heading text-base font-medium text-foreground`,e),...t})}function u4({className:e,...t}){return(0,U.jsx)(HE,{"data-slot":`sheet-description`,className:H(`text-sm text-muted-foreground`,e),...t})}function d4(e){return!e||typeof e!=`object`?!1:`durable_object_name`in e||`title`in e||`summary`in e||`created_at`in e||`updated_at`in e}function f4(e){return Array.isArray(e)?{rows:e.filter(d4),supported:!0}:{rows:[],supported:!1}}function p4(e){if(e==null||e===``)return`Unknown time`;let t=new Date(e);return Number.isNaN(t.getTime())?`Unknown time`:new Intl.DateTimeFormat(void 0,{dateStyle:`medium`,timeStyle:`short`}).format(t)}function m4(e){let t=e?.trim();return t?t.length>180?`${t.slice(0,177)}...`:t:`No summary available yet.`}function h4(e){return e.title?.trim()||`Untitled conversation`}function g4(e){let t=e.indexOf(`:`);return t===-1?e:e.slice(t+1)}function _4({agent:e,connectionStatus:t,currentChatId:n,onConversationClick:r}){let[i,a]=(0,B.useState)(!1),[o,s]=(0,B.useState)([]),[c,l]=(0,B.useState)(`disconnected`),[u,d]=(0,B.useState)(null),[f,p]=(0,B.useState)(null),m=(0,B.useMemo)(()=>t===`unauthorized`?{title:`Unauthorized`,description:`Reconnect with valid credentials to load conversations.`}:{title:`Disconnected`,description:`Connect to the agent to load conversations for the active identity.`},[t]),h=(0,B.useCallback)(async()=>{if(!e){l(t===`unauthorized`?`unauthorized`:`disconnected`),d(null);return}if(t!==`connected`){l(t===`unauthorized`?`unauthorized`:`disconnected`),d(null);return}l(`loading`),d(null);try{let{rows:t,supported:n}=f4(await e.call(`getConversations`));s(t),p(new Date().toISOString()),l(n?t.length>0?`ready`:`empty`:`unsupported`)}catch(e){d(e instanceof Error?e.message:String(e)),l(`error`)}},[e,t]);return(0,B.useEffect)(()=>{if(t===`connected`&&e&&!i){h();return}if(i){if(t===`connected`&&e){h();return}l(t===`unauthorized`?`unauthorized`:`disconnected`),d(null)}},[i,t,h]),(0,U.jsxs)(i4,{open:i,onOpenChange:a,children:[(0,U.jsx)(a4,{children:(0,U.jsxs)(Ud,{children:[(0,U.jsx)(Wd,{children:(0,U.jsx)(Yn,{"aria-label":`Conversation history`,title:`Conversation history`,size:`icon-sm`,variant:`outline`,className:`relative`,children:(0,U.jsx)(Fu,{className:`size-4`})})}),(0,U.jsx)(Gd,{children:(0,U.jsx)(`p`,{children:`Conversation history`})})]})}),(0,U.jsxs)(s4,{className:`gap-0`,children:[(0,U.jsxs)(c4,{children:[(0,U.jsxs)(l4,{children:[`Conversation history`,(0,U.jsx)(Yn,{"aria-label":`Refresh conversations`,className:`absolute top-3 right-10`,onClick:()=>void h(),size:`icon-sm`,variant:`ghost`,children:(0,U.jsx)(Bu,{className:`size-4`})})]}),(0,U.jsx)(u4,{children:`Recent conversations for the connected identity.`})]}),(0,U.jsx)(`div`,{className:`border-b px-4 pb-3 text-xs text-muted-foreground`,children:f?(0,U.jsxs)(`span`,{className:`flex items-center gap-1.5`,children:[(0,U.jsx)(wu,{className:`size-3.5`}),`Last refreshed`,` `,new Intl.DateTimeFormat(void 0,{timeStyle:`short`}).format(new Date(f))]}):(0,U.jsx)(`span`,{children:`Open the panel to load conversations from the current session.`})}),(0,U.jsxs)(`div`,{className:`overflow-y-auto`,children:[c===`loading`&&(0,U.jsx)(`div`,{className:`flex h-full items-center justify-center px-4`,children:(0,U.jsxs)(`div`,{className:`flex items-center gap-2 text-sm text-muted-foreground`,children:[(0,U.jsx)(nk,{className:`size-4`}),`Loading conversations...`]})}),c===`unauthorized`||c===`disconnected`?(0,U.jsx)(`div`,{className:`flex h-full items-center justify-center px-4`,children:(0,U.jsx)(e4,{size:`sm`,className:`w-full border-dashed`,children:(0,U.jsxs)(t4,{children:[(0,U.jsx)(n4,{className:`text-sm`,children:m.title}),(0,U.jsx)(r4,{children:m.description})]})})}):null,c===`error`?(0,U.jsxs)(`div`,{className:` items-center justify-center p-4`,children:[(0,U.jsx)(`p`,{className:`text-red-600`,children:`Could not load conversations`}),(0,U.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:u??`An unexpected error occurred while loading the conversation list.`}),(0,U.jsx)(Yn,{onClick:()=>void h(),size:`sm`,variant:`outline`,children:`Retry`})]}):null,c===`empty`?(0,U.jsxs)(`div`,{className:` items-center justify-center p-4`,children:[(0,U.jsx)(`p`,{children:`No conversations yet`}),(0,U.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:`This identity has not created any saved conversations.`})]}):null,c===`unsupported`?(0,U.jsxs)(`div`,{className:` items-center justify-center p-4`,children:[(0,U.jsx)(`p`,{children:`Conversations unavailable`}),(0,U.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:`This agent does not expose saved conversations for the current identity.`})]}):null,c===`ready`?(0,U.jsx)(`div`,{className:`flex flex-col gap-3 p-4`,children:o.map((e,t)=>{let i=g4(e.durable_object_name??``);return(0,U.jsx)(`article`,{className:[`rounded-lg border bg-card p-3 shadow-sm transition-shadow hover:shadow-md cursor-pointer`,n&&i===n?`ring-2 ring-primary border-primary`:``].filter(Boolean).join(` `),onClick:()=>{a(!1),r(i)},children:(0,U.jsxs)(`div`,{className:`flex flex-col justify-between gap-2`,children:[(0,U.jsxs)(`div`,{className:`min-w-0 flex gap-x-2 items-center`,children:[(0,U.jsx)(`h3`,{className:`truncate text-sm font-medium`,children:h4(e)}),(0,U.jsx)(`time`,{className:`shrink-0 text-[11px] text-muted-foreground ml-auto`,children:p4(e.updated_at)})]}),(0,U.jsx)(`p`,{className:`mt-1 line-clamp-3 text-xs leading-relaxed text-muted-foreground`,children:m4(e.summary)})]})},e.durable_object_name??`${e.updated_at??t}`)})}):null]})]})]})}var v4=class extends B.Component{state={error:null};static getDerivedStateFromError(e){return{error:e}}render(){return this.state.error?(0,U.jsx)(`div`,{className:`flex size-full flex-col items-center justify-center gap-4 text-muted-foreground`,children:(0,U.jsxs)(`div`,{className:`flex flex-col items-center gap-2 text-center`,children:[(0,U.jsx)(`div`,{className:`h-10 w-10 rounded-full bg-red-50 flex items-center justify-center`,children:(0,U.jsx)(`div`,{className:`h-4 w-4 rounded-full bg-red-400`})}),(0,U.jsx)(`h3`,{className:`text-sm font-semibold text-foreground`,children:`Something went wrong`}),(0,U.jsx)(`p`,{className:`text-xs max-w-xs`,children:`Could not connect to the agent. Check the URL above and try again.`})]})}):this.props.children}};function y4(e){try{let t=JSON.parse(e);return typeof t==`object`&&!!t&&Object.keys(t).length>0}catch{return!1}}var b4=`{
331
+ `),c=o.some(m0),l=!t&&!c&&a.length>0;return(0,U.jsx)(wE,{from:e.role,children:(0,U.jsxs)(`div`,{children:[r.length>0&&(0,U.jsxs)(RB,{children:[(0,U.jsx)(zB,{count:r.length}),(0,U.jsx)(BB,{children:r.map((e,t)=>e.type===`source-url`?(0,U.jsx)(VB,{href:e.url,title:e.title??e.url},t):(0,U.jsx)(VB,{href:`#${e.sourceId}`,title:e.title},t))})]}),(0,U.jsx)(TE,{children:l?(0,U.jsx)(jE,{children:s}):(0,U.jsxs)(U.Fragment,{children:[s&&!n&&(0,U.jsxs)(NB,{defaultOpen:!1,isStreaming:t,children:[(0,U.jsx)(FB,{}),(0,U.jsx)(LB,{children:s})]}),o.map((e,r)=>(0,U.jsx)(Y2,{isStreaming:t,part:e,partIndex:r,userMode:n},r))]})})]})})}var Z2=({attachment:e,onRemove:t})=>(0,U.jsxs)(td,{data:e,onRemove:(0,B.useCallback)(()=>{t(e.id)},[t,e.id]),children:[(0,U.jsx)(nd,{}),(0,U.jsx)(rd,{})]}),Q2=()=>{let e=dk(),t=(0,B.useCallback)(t=>{e.remove(t)},[e]);return e.files.length===0?null:(0,U.jsx)(ed,{variant:`inline`,children:e.files.map(e=>(0,U.jsx)(Z2,{attachment:e,onRemove:t},e.id))})},$2=({chatId:e,host:t,agentName:n,agentUrl:r,authToken:i,body:a,query:o,welcomeMessage:s,onAgentChange:c,onConnectionStatusChange:l,onRetry:u,onUnauthorized:d,userMode:f})=>{let[p,m]=(0,B.useState)(``),[h,g]=(0,B.useState)(!1),{agent:_,chat:v,connectionStatus:y}=J2({agent:n,host:t,chatId:e,authToken:i,toolContext:a??{},connectionParams:o??{},onConnectionStatusChange:l,welcomeMessage:s,onClose:e=>{e.code>=3e3&&d?.(e.reason??``)}});(0,B.useEffect)(()=>(c?.(_),()=>{c?.(null)}),[_,c]);let{messages:b,sendMessage:x,status:S,stop:C}=v,w=(0,B.useMemo)(()=>b.filter(e=>e.role!==`system`),[b]),T=(0,B.useCallback)(e=>{let t=!!e.text?.trim(),n=!!e.files?.length;if(!(t||n))return;let r=[];if(e.text?.trim()&&r.push({type:`text`,text:e.text.trim()}),e.files?.length)for(let t of e.files)r.push({type:`text`,text:`[Attachment: ${t.filename??`file`}]`});x({role:`user`,parts:r}),m(``),e.files?.length&&nt.success(`Files attached`,{description:`${e.files.length} file(s) attached to message`})},[x]),E=(0,B.useCallback)(e=>{m(t=>t?`${t} ${e}`:e)},[]),D=(0,B.useCallback)(e=>{m(e.target.value)},[]),O=(0,B.useCallback)(()=>{g(e=>!e)},[]),k=(0,B.useMemo)(()=>String(S)===`idle`||String(S)===`ready`?`ready`:S===`submitted`||S===`streaming`||S===`error`?S:`ready`,[S]),A=(0,B.useMemo)(()=>{if(k!==`submitted`&&k!==`streaming`)return!1;let e=w.at(-1);if(!e||e.role===`user`)return!0;if(e.role===`assistant`){let t=e.parts?.some(e=>e.type===`text`),n=e.parts?.some(e=>e.type===`reasoning`);return!t&&!n}return!1},[k,w]),j=(0,B.useMemo)(()=>!p.trim()||k===`streaming`||k===`submitted`,[p,k]);return y===`connecting`?(0,U.jsxs)(`div`,{className:`flex size-full flex-col items-center justify-center gap-3 text-muted-foreground`,children:[(0,U.jsx)(`div`,{className:`h-6 w-6 rounded-full border-2 border-zinc-300 border-t-zinc-600 animate-spin`}),(0,U.jsx)(`p`,{className:`text-sm`,children:`Connecting to agent...`})]}):y===`disconnected`?(0,U.jsxs)(`div`,{className:`flex size-full flex-col items-center justify-center gap-4`,children:[(0,U.jsxs)(`div`,{className:`flex flex-col items-center gap-2 text-center`,children:[(0,U.jsx)(`div`,{className:`h-10 w-10 rounded-full bg-red-50 flex items-center justify-center`,children:(0,U.jsx)(`div`,{className:`h-4 w-4 rounded-full bg-red-400`})}),(0,U.jsx)(`h3`,{className:`text-sm font-semibold`,children:`Unable to connect`}),r&&(0,U.jsxs)(`p`,{className:`text-xs text-muted-foreground max-w-xs`,children:[`Could not reach `,(0,U.jsx)(`span`,{className:`font-mono`,children:r}),`. Check the URL and make sure the agent is running.`]})]}),u&&(0,U.jsx)(`button`,{className:`text-xs text-muted-foreground underline underline-offset-2 hover:text-foreground transition-colors`,onClick:u,children:`Try again`})]}):(0,U.jsxs)(`div`,{className:`relative flex size-full flex-col divide-y overflow-hidden`,children:[(0,U.jsxs)(_d,{children:[(0,U.jsxs)(vd,{children:[w.map((e,t)=>(0,U.jsx)(OE,{defaultBranch:0,children:(0,U.jsx)(kE,{children:(0,U.jsx)(X2,{isStreaming:k===`streaming`&&t===w.length-1,message:e,userMode:f})})},e.id)),A&&(0,U.jsx)(wE,{from:`assistant`,children:(0,U.jsx)(TE,{children:(0,U.jsxs)(`div`,{className:`flex items-center gap-1.5 text-muted-foreground text-sm`,children:[(0,U.jsx)(nk,{className:`size-3.5 shrink-0`}),(0,U.jsx)(`span`,{children:`Thinking...`})]})})})]}),(0,U.jsx)(yd,{})]}),(0,U.jsx)(`div`,{className:`grid shrink-0 gap-4 pt-4`,children:(0,U.jsx)(`div`,{className:`w-full px-4 pb-4`,children:(0,U.jsxs)(mk,{globalDrop:!0,multiple:!0,onSubmit:T,children:[(0,U.jsx)(_k,{children:(0,U.jsx)(Q2,{})}),(0,U.jsx)(hk,{children:(0,U.jsx)(gk,{onChange:D,value:p})}),(0,U.jsxs)(vk,{children:[(0,U.jsxs)(yk,{children:[(0,U.jsxs)(xk,{children:[(0,U.jsx)(Sk,{}),(0,U.jsx)(Ck,{children:(0,U.jsx)(pk,{})})]}),(0,U.jsx)(UB,{className:`shrink-0`,onTranscriptionChange:E,size:`icon-sm`,variant:`ghost`}),(0,U.jsxs)(bk,{onClick:O,variant:h?`default`:`ghost`,children:[(0,U.jsx)(Au,{size:16}),(0,U.jsx)(`span`,{children:`Search`})]})]}),(0,U.jsx)(wk,{disabled:j,onStop:C,status:k})]})]})})})]})};function e4({className:e,size:t=`default`,...n}){return(0,U.jsx)(`div`,{"data-slot":`card`,"data-size":t,className:H(`group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl`,e),...n})}function t4({className:e,...t}){return(0,U.jsx)(`div`,{"data-slot":`card-header`,className:H(`group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3`,e),...t})}function n4({className:e,...t}){return(0,U.jsx)(`div`,{"data-slot":`card-title`,className:H(`text-base leading-snug font-medium group-data-[size=sm]/card:text-sm`,e),...t})}function r4({className:e,...t}){return(0,U.jsx)(`div`,{"data-slot":`card-description`,className:H(`text-sm text-muted-foreground`,e),...t})}function i4({...e}){return(0,U.jsx)(SD,{"data-slot":`sheet`,...e})}function a4({...e}){return(0,U.jsx)(wD,{"data-slot":`sheet-trigger`,...e})}function o4({...e}){return(0,U.jsx)(aD,{"data-slot":`sheet-portal`,...e})}function s4({className:e,children:t,side:n=`right`,showCloseButton:r=!0,...i}){return(0,U.jsx)(o4,{children:(0,U.jsxs)(rD,{"data-slot":`sheet-content`,"data-side":n,className:H(`fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm`,e),...i,children:[t,r&&(0,U.jsx)(VE,{"data-slot":`sheet-close`,render:(0,U.jsxs)(Yn,{variant:`ghost`,className:`absolute top-3 right-3`,size:`icon-sm`,children:[(0,U.jsx)(Ku,{}),(0,U.jsx)(`span`,{className:`sr-only`,children:`Close`})]})})]})})}function c4({className:e,...t}){return(0,U.jsx)(`div`,{"data-slot":`sheet-header`,className:H(`flex flex-col gap-0.5 p-4`,e),...t})}function l4({className:e,...t}){return(0,U.jsx)(CD,{"data-slot":`sheet-title`,className:H(`cn-font-heading text-base font-medium text-foreground`,e),...t})}function u4({className:e,...t}){return(0,U.jsx)(HE,{"data-slot":`sheet-description`,className:H(`text-sm text-muted-foreground`,e),...t})}function d4(e){return!e||typeof e!=`object`?!1:`durable_object_name`in e||`title`in e||`summary`in e||`created_at`in e||`updated_at`in e}function f4(e){return Array.isArray(e)?{rows:e.filter(d4),supported:!0}:{rows:[],supported:!1}}function p4(e){if(e==null||e===``)return`Unknown time`;let t=new Date(e);return Number.isNaN(t.getTime())?`Unknown time`:new Intl.DateTimeFormat(void 0,{dateStyle:`medium`,timeStyle:`short`}).format(t)}function m4(e){let t=e?.trim();return t?t.length>180?`${t.slice(0,177)}...`:t:`No summary available yet.`}function h4(e){return e.title?.trim()||`Untitled conversation`}function g4(e){let t=e.indexOf(`:`);return t===-1?e:e.slice(t+1)}function _4({agent:e,connectionStatus:t,currentChatId:n,onConversationClick:r}){let[i,a]=(0,B.useState)(!1),[o,s]=(0,B.useState)([]),[c,l]=(0,B.useState)(`disconnected`),[u,d]=(0,B.useState)(null),[f,p]=(0,B.useState)(null),m=(0,B.useMemo)(()=>t===`unauthorized`?{title:`Unauthorized`,description:`Reconnect with valid credentials to load conversations.`}:{title:`Disconnected`,description:`Connect to the agent to load conversations for the active identity.`},[t]),h=(0,B.useCallback)(async()=>{if(!e){l(t===`unauthorized`?`unauthorized`:`disconnected`),d(null);return}if(t!==`connected`){l(t===`unauthorized`?`unauthorized`:`disconnected`),d(null);return}l(`loading`),d(null);try{let{rows:t,supported:n}=f4(await e.call(`getConversations`));s(t),p(new Date().toISOString()),l(n?t.length>0?`ready`:`empty`:`unsupported`)}catch(e){d(e instanceof Error?e.message:String(e)),l(`error`)}},[e,t]);return(0,B.useEffect)(()=>{if(t===`connected`&&e&&!i){h();return}if(i){if(t===`connected`&&e){h();return}l(t===`unauthorized`?`unauthorized`:`disconnected`),d(null)}},[i,t,h]),(0,U.jsxs)(i4,{open:i,onOpenChange:a,children:[(0,U.jsxs)(Ud,{children:[(0,U.jsx)(Wd,{render:(0,U.jsx)(a4,{render:(0,U.jsx)(Yn,{"aria-label":`Conversation history`,title:`Conversation history`,size:`icon-sm`,variant:`outline`,className:`relative`})}),children:(0,U.jsx)(Fu,{className:`size-4`})}),(0,U.jsx)(Gd,{children:(0,U.jsx)(`p`,{children:`Conversation history`})})]}),(0,U.jsxs)(s4,{className:`gap-0`,children:[(0,U.jsxs)(c4,{children:[(0,U.jsxs)(l4,{children:[`Conversation history`,(0,U.jsx)(Yn,{"aria-label":`Refresh conversations`,className:`absolute top-3 right-10`,onClick:()=>void h(),size:`icon-sm`,variant:`ghost`,children:(0,U.jsx)(Bu,{className:`size-4`})})]}),(0,U.jsx)(u4,{children:`Recent conversations for the connected identity.`})]}),(0,U.jsx)(`div`,{className:`border-b px-4 pb-3 text-xs text-muted-foreground`,children:f?(0,U.jsxs)(`span`,{className:`flex items-center gap-1.5`,children:[(0,U.jsx)(wu,{className:`size-3.5`}),`Last refreshed`,` `,new Intl.DateTimeFormat(void 0,{timeStyle:`short`}).format(new Date(f))]}):(0,U.jsx)(`span`,{children:`Open the panel to load conversations from the current session.`})}),(0,U.jsxs)(`div`,{className:`overflow-y-auto`,children:[c===`loading`&&(0,U.jsx)(`div`,{className:`flex h-full items-center justify-center px-4`,children:(0,U.jsxs)(`div`,{className:`flex items-center gap-2 text-sm text-muted-foreground`,children:[(0,U.jsx)(nk,{className:`size-4`}),`Loading conversations...`]})}),c===`unauthorized`||c===`disconnected`?(0,U.jsx)(`div`,{className:`flex h-full items-center justify-center px-4`,children:(0,U.jsx)(e4,{size:`sm`,className:`w-full border-dashed`,children:(0,U.jsxs)(t4,{children:[(0,U.jsx)(n4,{className:`text-sm`,children:m.title}),(0,U.jsx)(r4,{children:m.description})]})})}):null,c===`error`?(0,U.jsxs)(`div`,{className:` items-center justify-center p-4`,children:[(0,U.jsx)(`p`,{className:`text-red-600`,children:`Could not load conversations`}),(0,U.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:u??`An unexpected error occurred while loading the conversation list.`}),(0,U.jsx)(Yn,{onClick:()=>void h(),size:`sm`,variant:`outline`,children:`Retry`})]}):null,c===`empty`?(0,U.jsxs)(`div`,{className:` items-center justify-center p-4`,children:[(0,U.jsx)(`p`,{children:`No conversations yet`}),(0,U.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:`This identity has not created any saved conversations.`})]}):null,c===`unsupported`?(0,U.jsxs)(`div`,{className:` items-center justify-center p-4`,children:[(0,U.jsx)(`p`,{children:`Conversations unavailable`}),(0,U.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:`This agent does not expose saved conversations for the current identity.`})]}):null,c===`ready`?(0,U.jsx)(`div`,{className:`flex flex-col gap-3 p-4`,children:o.map((e,t)=>{let i=g4(e.durable_object_name??``);return(0,U.jsx)(`article`,{className:[`rounded-lg border bg-card p-3 shadow-sm transition-shadow hover:shadow-md cursor-pointer`,n&&i===n?`ring-2 ring-primary border-primary`:``].filter(Boolean).join(` `),onClick:()=>{a(!1),r(i)},children:(0,U.jsxs)(`div`,{className:`flex flex-col justify-between gap-2`,children:[(0,U.jsxs)(`div`,{className:`min-w-0 flex gap-x-2 items-center`,children:[(0,U.jsx)(`h3`,{className:`truncate text-sm font-medium`,children:h4(e)}),(0,U.jsx)(`time`,{className:`shrink-0 text-[11px] text-muted-foreground ml-auto`,children:p4(e.updated_at)})]}),(0,U.jsx)(`p`,{className:`mt-1 line-clamp-3 text-xs leading-relaxed text-muted-foreground`,children:m4(e.summary)})]})},e.durable_object_name??`${e.updated_at??t}`)})}):null]})]})]})}var v4=class extends B.Component{state={error:null};static getDerivedStateFromError(e){return{error:e}}render(){return this.state.error?(0,U.jsx)(`div`,{className:`flex size-full flex-col items-center justify-center gap-4 text-muted-foreground`,children:(0,U.jsxs)(`div`,{className:`flex flex-col items-center gap-2 text-center`,children:[(0,U.jsx)(`div`,{className:`h-10 w-10 rounded-full bg-red-50 flex items-center justify-center`,children:(0,U.jsx)(`div`,{className:`h-4 w-4 rounded-full bg-red-400`})}),(0,U.jsx)(`h3`,{className:`text-sm font-semibold text-foreground`,children:`Something went wrong`}),(0,U.jsx)(`p`,{className:`text-xs max-w-xs`,children:`Could not connect to the agent. Check the URL above and try again.`})]})}):this.props.children}};function y4(e){try{let t=JSON.parse(e);return typeof t==`object`&&!!t&&Object.keys(t).length>0}catch{return!1}}var b4=`{
332
332
  "currentDateTime": "2026-04-13T11:57:17.858Z",
333
333
  "tokens": {
334
334
  "X-Economic-Token": "token_123"
@@ -337,4 +337,4 @@ const partysocket = new PartySocket({
337
337
  "guid": "guid_123";
338
338
  "agreementNumber": "agreementNumber_123";
339
339
  }
340
- }`;function x4({body:e,onChange:t}){let[n,r]=(0,B.useState)(!1),[i,a]=(0,B.useState)(e),o=(0,B.useCallback)(t=>{t&&a(e),r(t)},[e]),s=(0,B.useCallback)(()=>{let e=i.trim();if(e&&e!==`{}`)try{JSON.parse(e)}catch{nt.error(`Invalid JSON — check the syntax and try again.`);return}t(e),r(!1)},[i,t]),c=y4(e);return(0,U.jsxs)(TD,{open:n,onOpenChange:o,children:[(0,U.jsx)(ED,{children:(0,U.jsxs)(Ud,{children:[(0,U.jsx)(Wd,{children:(0,U.jsxs)(Yn,{"aria-label":`Request body`,title:`Request body — JSON merged into each chat request (tool execution context)`,size:`icon-sm`,variant:`outline`,className:`relative`,children:[(0,U.jsx)(Vu,{className:`size-4`}),c&&(0,U.jsx)(`span`,{className:`absolute -top-1 -right-1 flex h-2.5 w-2.5 items-center justify-center rounded-full bg-blue-500`})]})}),(0,U.jsx)(Gd,{children:(0,U.jsx)(`p`,{children:`Request body params`})})]})}),(0,U.jsxs)(kD,{className:`!w-2xl !max-w-2xl`,children:[(0,U.jsx)(AD,{children:(0,U.jsx)(MD,{children:`Request body`})}),(0,U.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,U.jsxs)(`p`,{className:`text-xs text-muted-foreground`,children:[`JSON object merged into the body of every chat request. Available in tool`,` `,(0,U.jsx)(`code`,{className:`font-mono`,children:`execute`}),` functions via`,` `,(0,U.jsx)(`code`,{className:`font-mono`,children:`experimental_context`}),`.`]}),(0,U.jsx)(ZD,{className:`font-mono text-xs min-h-32 max-h-72 break-all w-full`,placeholder:b4,value:i,onChange:e=>a(e.target.value),spellCheck:!1})]}),(0,U.jsx)(jD,{showCloseButton:!0,children:(0,U.jsx)(Yn,{size:`sm`,onClick:s,children:`Save`})})]})]})}function S4(e){if(!e||e===`{}`)return null;let t;try{t=JSON.parse(e)}catch{return null}if(typeof t!=`object`||!t||Array.isArray(t))return null;let n=t;for(let e of Object.values(n))if(typeof e!=`string`)return null;return n}function C4(e,t){if(!t?.length)return;let n=e??{};for(let e of t)n[e]?.trim()||nt.warning(`Query param "${e}" is required for this playground session.`)}function w4(e,t,n){let r=n?.declaredQueryKeys;if(!e||e===`{}`)return C4(null,r),t(e),!0;let i=S4(e);return i===null?(nt.error(`Invalid query params — use only flat string key/value pairs.`),!1):(C4(i,r),t(e),!0)}function T4(e){let t=S4(e.trim());return!t||Object.keys(t).length===0?[{id:ik(),key:``,value:``}]:Object.entries(t).map(([e,t])=>({id:ik(),key:e,value:t}))}function E4(e){let t={},n=new Set;for(let r of e){let e=r.key.trim();if(e){if(n.has(e))return`duplicate`;n.add(e),t[e]=r.value}}return t}function D4({query:e,onChange:t,declaredQueryKeys:n,userId:r,onUserIdChange:i,token:a,onTokenChange:o,welcomeMessage:s,onWelcomeMessageChange:c}){let[l,u]=(0,B.useState)(!1),[d,f]=(0,B.useState)(r),[p,m]=(0,B.useState)(a),[h,g]=(0,B.useState)(s),[_,v]=(0,B.useState)(!1),[y,b]=(0,B.useState)(()=>T4(e)),x=(0,B.useCallback)(t=>{t&&(f(r),m(a),g(s),b(T4(e))),u(t)},[e,r,a,s]),S=(0,B.useCallback)(()=>{b(e=>[...e,{id:ik(),key:``,value:``}])},[]),C=(0,B.useCallback)(e=>{b(t=>{let n=t.filter(t=>t.id!==e);return n.length>0?n:[{id:ik(),key:``,value:``}]})},[]),w=(0,B.useCallback)((e,t,n)=>{b(r=>r.map(r=>r.id===e?{...r,[t]:n}:r))},[]),T=(0,B.useCallback)(()=>{let e=d.trim();if(!e){nt.error(`User ID is required.`);return}let r=E4(y);if(r===`duplicate`){nt.error(`Duplicate parameter keys are not allowed.`);return}w4(JSON.stringify(r),e=>t(e),{declaredQueryKeys:n})&&(i(e),o(p.trim()),c(h.trim()),u(!1))},[y,t,n,d,p,h,i,o,c]),E=y4(e)||!!r||!!a;return(0,U.jsxs)(TD,{open:l,onOpenChange:x,children:[(0,U.jsx)(ED,{children:(0,U.jsxs)(Ud,{children:[(0,U.jsx)(Wd,{children:(0,U.jsxs)(Yn,{"aria-label":`Connection settings`,title:`Connection settings — user ID, auth token, and query params`,size:`icon-sm`,variant:`outline`,className:`relative`,children:[(0,U.jsx)(Mu,{className:`size-4`}),E&&(0,U.jsx)(`span`,{className:`absolute -top-1 -right-1 flex h-2.5 w-2.5 items-center justify-center rounded-full bg-blue-500`})]})}),(0,U.jsx)(Gd,{children:(0,U.jsx)(`p`,{children:`Connection settings`})})]})}),(0,U.jsxs)(kD,{className:`!w-2xl !max-w-2xl`,children:[(0,U.jsx)(AD,{children:(0,U.jsx)(MD,{children:`Connection settings`})}),(0,U.jsxs)(`div`,{className:`flex flex-col gap-4`,children:[(0,U.jsx)(`p`,{className:`text-xs text-muted-foreground`,children:`Configure your User ID, auth token, and any additional query params for the WebSocket connection. Changes take effect on the next connection after saving, such as starting a new chat or refreshing the page.`}),(0,U.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,U.jsxs)(`label`,{className:`text-xs font-medium text-foreground`,htmlFor:`params-user-id`,children:[`User ID `,(0,U.jsx)(`span`,{className:`text-destructive font-normal`,children:`(required)`})]}),(0,U.jsx)(XD,{autoComplete:`off`,className:`font-mono text-xs`,id:`params-user-id`,onChange:e=>f(e.target.value),placeholder:`e.g. user_123`,spellCheck:!1,value:d})]}),(0,U.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,U.jsxs)(`label`,{className:`text-xs font-medium text-foreground`,htmlFor:`params-token`,children:[`Auth Token `,(0,U.jsx)(`span`,{className:`text-muted-foreground font-normal`,children:`(optional)`})]}),(0,U.jsxs)(`div`,{className:`relative`,children:[(0,U.jsx)(XD,{autoComplete:`off`,className:`font-mono text-xs pr-10`,id:`params-token`,onChange:e=>m(e.target.value),placeholder:`Bearer token for authentication`,spellCheck:!1,type:_?`text`:`password`,value:p}),(0,U.jsx)(Yn,{className:`absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7`,onClick:()=>v(e=>!e),size:`icon-sm`,type:`button`,variant:`ghost`,children:_?(0,U.jsx)(Du,{className:`size-4`}):(0,U.jsx)(Ou,{className:`size-4`})})]})]}),(0,U.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,U.jsxs)(`label`,{className:`text-xs font-medium text-foreground`,htmlFor:`params-welcome-message`,children:[`Welcome Message `,(0,U.jsx)(`span`,{className:`text-muted-foreground font-normal`,children:`(optional)`})]}),(0,U.jsx)(ZD,{className:`text-xs min-h-16 max-h-32`,id:`params-welcome-message`,onChange:e=>g(e.target.value),placeholder:`Hello! How can I help you today?`,spellCheck:!1,value:h})]}),(0,U.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,U.jsx)(`p`,{className:`text-xs font-medium text-foreground`,children:`Additional query params`}),(0,U.jsx)(`p`,{className:`text-xs text-muted-foreground`,children:`Flat string key/value pairs appended to the WebSocket URL.`}),(0,U.jsxs)(`div`,{className:`grid grid-cols-[minmax(0,1fr)_minmax(0,2fr)_auto] gap-2 text-xs font-medium text-muted-foreground px-0.5`,children:[(0,U.jsx)(`span`,{children:`Name`}),(0,U.jsx)(`span`,{children:`Value`}),(0,U.jsx)(`span`,{className:`sr-only`,children:`Remove`})]}),y.map(e=>(0,U.jsxs)(`div`,{className:`grid grid-cols-1 sm:grid-cols-[minmax(0,1fr)_minmax(0,2fr)_auto] gap-2 items-center`,children:[(0,U.jsx)(XD,{"aria-label":`Parameter name`,className:`font-mono text-xs h-9`,onChange:t=>w(e.id,`key`,t.target.value),placeholder:`e.g. token`,spellCheck:!1,value:e.key}),(0,U.jsx)(XD,{"aria-label":`Value for ${e.key||`parameter`}`,className:`font-mono text-xs h-9`,onChange:t=>w(e.id,`value`,t.target.value),placeholder:`value`,spellCheck:!1,value:e.value}),(0,U.jsx)(Yn,{"aria-label":`Remove row`,className:`shrink-0 justify-self-end sm:justify-self-center`,onClick:()=>C(e.id),size:`icon-sm`,type:`button`,variant:`ghost`,children:(0,U.jsx)(Uu,{className:`size-4 text-muted-foreground`})})]},e.id)),(0,U.jsxs)(Yn,{className:`self-start gap-1.5`,onClick:S,size:`sm`,type:`button`,variant:`outline`,children:[(0,U.jsx)(zu,{className:`size-4`}),`Add param`]})]})]}),(0,U.jsx)(jD,{showCloseButton:!0,children:(0,U.jsx)(Yn,{size:`sm`,onClick:T,children:`Save`})})]})]})}var O4=`playground:url`,k4=`playground:body`,A4=`playground:query`,j4=`playground:userId`,M4=`playground:token`,N4=`playground:welcomeMessage`,P4=`playground:userMode`,F4=`{{agent_name}}`,I4=`http://localhost:8787/agents/${F4}`;function L4(e){if(!e?.trim())return[];let t=new Set,n=[];for(let r of e.split(`,`)){let e=r.trim();e&&(t.has(e)||(t.add(e),n.push(e)))}return n}function R4(e){return e?.length?L4(e.join(`,`)):[]}function z4(){let e=window.__PLAYGROUND_CONFIG__,t=R4(e?.queryParamKeys),n=L4(void 0),r=t.length>0?t:n;return{agentName:e?.agentName,port:e?.port,queryParamKeys:r}}function B4(e,t){if(t.length===0)return!0;let n=S4(e.trim());return n?t.every(e=>!!n[e]?.trim()):!1}function V4(e,t){return S4(e.trim())?.[t]?.trim()??``}function H4(e){return`setup-query-${e.replace(/[^a-zA-Z0-9_-]/g,`_`)}`}function U4(){return localStorage.getItem(k4)??``}function W4(){return localStorage.getItem(A4)??``}function G4(){return new URLSearchParams(window.location.search).get(`user`)??``}function K4(){return G4()||(localStorage.getItem(j4)??``)}function q4(){return localStorage.getItem(M4)??``}function J4(){return localStorage.getItem(N4)??``}function Y4(e){try{let t=new URL(e.includes(`://`)?e:`http://${e}`),n=t.pathname.split(`/`).filter(Boolean);return n[0]===`agents`&&n[1]?{host:t.host,agent:n[1]}:null}catch{return null}}function X4(e){return e?Y4(e)||(nt.error(`Invalid agent URL — expected http://<host>/agents/<name>`),null):null}function Z4({open:e,urlDraft:t,setUrlDraft:n,onCommitUrl:r,query:i,onPersistQuery:a,requiredParamKeys:o,userId:s,onUserIdChange:c,token:l,onTokenChange:u,welcomeMessage:d,onWelcomeMessageChange:f}){let[p,m]=(0,B.useState)(s),[h,g]=(0,B.useState)(l),[_,v]=(0,B.useState)(d),[y,b]=(0,B.useState)(!1),[x,S]=(0,B.useState)(()=>Object.fromEntries(o.map(e=>[e,V4(i,e)])));(0,B.useEffect)(()=>{m(s)},[s]),(0,B.useEffect)(()=>{g(l)},[l]),(0,B.useEffect)(()=>{v(d)},[d]),(0,B.useEffect)(()=>{S(Object.fromEntries(o.map(e=>[e,V4(i,e)])))},[i,o]);let C=(0,B.useCallback)(()=>{let e=p.trim();if(!e){nt.error(`User ID is required.`);return}if(r()){if(o.length>0){for(let e of o)if(!x[e]?.trim()){nt.error(`"${e}" is required for this playground session (WebSocket query param).`);return}let e={...S4(i.trim())??{},...Object.fromEntries(o.map(e=>[e,x[e].trim()]))};a(JSON.stringify(e))}c(e),u(h.trim()),f(_.trim())}},[p,h,_,r,o,x,i,a,c,u,f]);return(0,U.jsx)(TD,{open:e,onOpenChange:e=>{},children:(0,U.jsxs)(kD,{className:`!w-2xl !max-w-2xl`,showCloseButton:!1,children:[(0,U.jsx)(AD,{children:(0,U.jsx)(MD,{children:`Initial setup`})}),(0,U.jsxs)(`div`,{className:`flex flex-col gap-4`,children:[(0,U.jsxs)(`p`,{className:`text-xs text-muted-foreground`,children:[`Set your User ID, a valid agent URL, and optionally an auth token.`,` `,o.length>0?(0,U.jsxs)(U.Fragment,{children:[`This CLI session also requires query params:`,` `,(0,U.jsx)(`code`,{className:`font-mono`,children:o.join(`, `)}),`.`]}):(0,U.jsx)(U.Fragment,{children:`Additional query params can be added later via the settings icon in the header.`}),` `,`Fields are pre-filled from saved settings when possible.`]}),(0,U.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,U.jsxs)(`label`,{className:`text-xs font-medium text-foreground`,htmlFor:`setup-user-id`,children:[`User ID `,(0,U.jsx)(`span`,{className:`text-destructive font-normal`,children:`(required)`})]}),(0,U.jsx)(XD,{autoComplete:`off`,className:`font-mono text-xs`,id:`setup-user-id`,onChange:e=>m(e.target.value),placeholder:`e.g. user_123`,spellCheck:!1,value:p})]}),(0,U.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,U.jsxs)(`label`,{className:`text-xs font-medium text-foreground`,htmlFor:`setup-token`,children:[`Auth Token `,(0,U.jsx)(`span`,{className:`text-muted-foreground font-normal`,children:`(optional)`})]}),(0,U.jsxs)(`div`,{className:`relative`,children:[(0,U.jsx)(XD,{autoComplete:`off`,className:`font-mono text-xs pr-10`,id:`setup-token`,onChange:e=>g(e.target.value),placeholder:`Bearer token for authentication`,spellCheck:!1,type:y?`text`:`password`,value:h}),(0,U.jsx)(Yn,{className:`absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7`,onClick:()=>b(e=>!e),size:`icon-sm`,type:`button`,variant:`ghost`,children:y?(0,U.jsx)(Du,{className:`size-4`}):(0,U.jsx)(Ou,{className:`size-4`})})]})]}),(0,U.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,U.jsx)(`label`,{className:`text-xs font-medium text-foreground`,htmlFor:`setup-agent-url`,children:`Agent URL`}),(0,U.jsx)(XD,{className:`font-mono text-xs`,id:`setup-agent-url`,onChange:e=>n(e.target.value),placeholder:`http://localhost:8787/agents/my-agent`,spellCheck:!1,value:t})]}),(0,U.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,U.jsxs)(`label`,{className:`text-xs font-medium text-foreground`,htmlFor:`setup-welcome-message`,children:[`Welcome Message `,(0,U.jsx)(`span`,{className:`text-muted-foreground font-normal`,children:`(optional)`})]}),(0,U.jsx)(ZD,{className:`text-xs min-h-16 max-h-32`,id:`setup-welcome-message`,onChange:e=>v(e.target.value),placeholder:`Hello! How can I help you today?`,spellCheck:!1,value:_})]}),o.length>0?(0,U.jsxs)(`div`,{className:`flex flex-col gap-3`,children:[(0,U.jsx)(`p`,{className:`text-xs font-medium text-foreground`,children:`Required query params`}),o.map(e=>(0,U.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,U.jsxs)(`label`,{className:`text-xs font-medium text-foreground`,htmlFor:H4(e),children:[(0,U.jsx)(`code`,{className:`font-mono`,children:e}),` `,(0,U.jsx)(`span`,{className:`text-destructive font-normal`,children:`(required)`})]}),(0,U.jsx)(XD,{autoComplete:`off`,className:`font-mono text-xs`,id:H4(e),onChange:t=>S(n=>({...n,[e]:t.target.value})),placeholder:e,spellCheck:!1,value:x[e]??``})]},e)),(0,U.jsx)(`p`,{className:`text-xs text-muted-foreground`,children:`Use the key icon in the header to add more key/value pairs if you need keys beyond this list.`})]}):null]}),(0,U.jsx)(jD,{children:(0,U.jsx)(Yn,{size:`sm`,onClick:C,children:`Continue`})})]})})}function Q4(){let e=z4();return e.agentName?`http://localhost:${e.port??8787}/agents/${e.agentName}`:I4}function $4(){return localStorage.getItem(O4)??Q4()}function e3(){return new URLSearchParams(window.location.search).get(`chat`)??void 0}function t3(){return ik()}function n3(){let[e,t]=(0,B.useState)(()=>e3()??t3()),[n,r]=(0,B.useState)(K4),[i,a]=(0,B.useState)(q4),[o,s]=(0,B.useState)(J4),[c,l]=(0,B.useState)($4),[u,d]=(0,B.useState)(c),[f,p]=(0,B.useState)(`connecting`),[m,h]=(0,B.useState)(null),[g,_]=(0,B.useState)(U4),[v,y]=(0,B.useState)(W4),[b,x]=(0,B.useState)(null),[S,C]=(0,B.useState)(()=>localStorage.getItem(P4)===`true`),w=(0,B.useRef)(!1),T=(0,B.useMemo)(()=>z4().queryParamKeys??[],[]);(0,B.useEffect)(()=>{p(`connecting`),h(null)},[e]);let E=c.includes(F4),D=E?null:Y4(c),O=!E&&D!==null,k=B4(v,T),A=!O||!k||!n;(0,B.useEffect)(()=>{let t=new URLSearchParams(window.location.search);e&&t.get(`chat`)!==e&&(t.set(`chat`,e),history.replaceState(null,``,`?${t}`))},[e]),(0,B.useEffect)(()=>{let e=new URLSearchParams(window.location.search);n&&e.get(`user`)!==n&&(e.set(`user`,n),history.replaceState(null,``,`?${e}`))},[n]);let j=(0,B.useCallback)(()=>{let e=t3(),n=new URLSearchParams(window.location.search);n.set(`chat`,e),history.pushState(null,``,`?${n}`),t(e),nt.success(`New chat started`)},[]),M=(0,B.useCallback)(()=>{let e=u.trim();return X4(e)?(localStorage.setItem(O4,e),l(e),d(e),w.current=!0,t(t3()),!0):!1},[u]),N=(0,B.useCallback)(e=>{localStorage.setItem(j4,e),r(e)},[]),P=(0,B.useCallback)(e=>{localStorage.setItem(M4,e),a(e)},[]),F=(0,B.useCallback)(e=>{localStorage.setItem(N4,e),s(e)},[]);return(0,U.jsxs)(`div`,{className:`relative flex h-screen overflow-hidden`,children:[(0,U.jsx)(Z4,{open:A,query:v,requiredParamKeys:T,setUrlDraft:d,urlDraft:u,onCommitUrl:M,onPersistQuery:(0,B.useCallback)(e=>w4(e,e=>{localStorage.setItem(A4,e),y(e)},{declaredQueryKeys:T}),[T]),userId:n,onUserIdChange:N,token:i,onTokenChange:P,welcomeMessage:o,onWelcomeMessageChange:F}),(0,U.jsxs)(`div`,{className:`flex-1 flex flex-col`,children:[(0,U.jsx)(`div`,{className:`border-b-2 border-zinc-200 flex items-center justify-between bg-zinc-50`,children:(0,U.jsxs)(`div`,{className:`h-20 flex items-center w-6xl mx-auto border-x-2 border-zinc-200/40 py-6 px-6 justify-between`,children:[(0,U.jsx)(`div`,{className:`flex items-center`,children:c?(0,U.jsx)(U.Fragment,{children:(0,U.jsxs)(`div`,{children:[(0,U.jsxs)(`h2`,{className:`text-sm font-semibold mb-0 flex items-center`,children:[(0,U.jsx)(`div`,{className:[`h-2 w-2 rounded-full mr-2`,f===`connected`&&`bg-green-500`,f===`connecting`&&`bg-amber-400 animate-pulse`,(f===`disconnected`||f===`unauthorized`)&&`bg-red-500 animate-pulse`].filter(Boolean).join(` `)}),f===`connected`&&`Connected to agent`,f===`connecting`&&`Connecting...`,f===`disconnected`&&`Unable to connect to agent`,f===`unauthorized`&&`Unauthorized to connect to agent`]}),(0,U.jsx)(`input`,{className:`-ml-1.5 text-xs text-muted-foreground mb-0 py-1 pl-2 pr-10 field-sizing-content rounded-md hover:text-foreground focus:text-foreground hover:bg-white focus:bg-white hover:outline hover:outline-zinc-200 focus:outline focus:outline-zinc-300`,value:u,onChange:e=>d(e.target.value),onKeyDown:e=>{e.key===`Enter`?(M(),e.currentTarget.blur()):e.key===`Escape`&&(d(c),e.currentTarget.blur())},onBlur:()=>{if(w.current){w.current=!1;return}d(c)}})]})}):(0,U.jsxs)(U.Fragment,{children:[(0,U.jsx)(`div`,{className:`h-2 w-2 bg-muted-foreground/50 rounded-full mr-3`}),(0,U.jsxs)(`div`,{children:[(0,U.jsx)(`h2`,{className:`text-sm font-semibold text-muted-foreground mb-0`,children:`Not Connected`}),(0,U.jsx)(`p`,{className:`text-xs text-muted-foreground mb-0`,children:`Enter an agent URL and click Connect`})]})]})}),(0,U.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,U.jsx)(Yn,{onClick:j,size:`icon-sm`,variant:`outline`,children:(0,U.jsx)(Pu,{className:`size-4`})}),(0,U.jsx)(_4,{agent:b,connectionStatus:f,currentChatId:e,onConversationClick:t}),(0,U.jsx)(D4,{declaredQueryKeys:T,query:v,onChange:e=>{localStorage.setItem(A4,e),y(e)},userId:n,onUserIdChange:N,token:i,onTokenChange:P,welcomeMessage:o,onWelcomeMessageChange:F}),(0,U.jsx)(x4,{body:g,onChange:e=>{localStorage.setItem(k4,e),_(e)}}),(0,U.jsxs)(Ud,{children:[(0,U.jsx)(Wd,{children:(0,U.jsx)(Yn,{"aria-label":`View chat as a user would`,title:`View chat as a user would`,onClick:()=>C(e=>{let t=!e;return localStorage.setItem(P4,String(t)),t}),size:`icon-sm`,variant:S?`default`:`outline`,children:S?(0,U.jsx)(Ou,{className:`size-4`}):(0,U.jsx)(Du,{className:`size-4`})})}),(0,U.jsx)(Gd,{children:(0,U.jsx)(`p`,{children:`View chat as a user would`})})]})]})]})}),(0,U.jsx)(`div`,{className:`flex-1 overflow-hidden min-h-0 grow`,children:(0,U.jsxs)(`div`,{className:`max-w-6xl w-full mx-auto border-x-2 border-zinc-100 h-full`,children:[f===`unauthorized`&&O&&k&&(0,U.jsx)(`div`,{className:`flex size-full flex-col items-center justify-center gap-4 text-muted-foreground`,children:(0,U.jsxs)(`div`,{className:`flex flex-col items-center gap-2 text-center`,children:[(0,U.jsx)(`div`,{className:`h-10 w-10 rounded-full bg-red-50 flex items-center justify-center`,children:(0,U.jsx)(`div`,{className:`h-4 w-4 rounded-full bg-red-400`})}),(0,U.jsx)(`h3`,{className:`text-sm font-semibold text-foreground`,children:`Unauthorized`}),m?(0,U.jsx)(`p`,{className:`text-xs max-w-xs`,children:m}):(0,U.jsx)(`p`,{className:`text-xs max-w-xs`,children:`You are not authorized to connect to this agent.`})]})}),O&&k&&D?(0,U.jsx)(v4,{children:(0,U.jsx)($2,{agentName:D.agent,host:D.host,chatId:n?`${n}:${e}`:e,agentUrl:c,authToken:i||void 0,body:g?JSON.parse(g):void 0,query:v?S4(v.trim())??void 0:void 0,welcomeMessage:o||void 0,onAgentChange:x,onConnectionStatusChange:p,onUnauthorized:h,userMode:S},`${n}:${e}:${v}`)},`${n}:${e}:${v}`):(0,U.jsx)(`div`,{className:`flex size-full flex-col items-center justify-center gap-3 text-muted-foreground px-4`,children:O?(0,U.jsxs)(`p`,{className:`text-sm text-center max-w-md`,children:[`Set required WebSocket query params in the setup dialog`,T.length>0?(0,U.jsxs)(U.Fragment,{children:[`: `,(0,U.jsx)(`code`,{className:`font-mono text-xs`,children:T.join(`, `)})]}):null,`.`]}):(0,U.jsxs)(U.Fragment,{children:[(0,U.jsx)(`p`,{className:`text-sm text-center`,children:`Enter an agent URL in the bar above or in the setup dialog.`}),(0,U.jsx)(`p`,{className:`text-xs font-mono text-muted-foreground/60`,children:`e.g. http://localhost:8787/agents/my-agent`})]})})]})})]})]})}(0,Be.createRoot)(document.getElementById(`app`)).render((0,U.jsx)(B.StrictMode,{children:(0,U.jsxs)(Hd,{children:[(0,U.jsx)(_t,{}),(0,U.jsx)(n3,{})]})}));
340
+ }`;function x4({body:e,onChange:t}){let[n,r]=(0,B.useState)(!1),[i,a]=(0,B.useState)(e),o=(0,B.useCallback)(t=>{t&&a(e),r(t)},[e]),s=(0,B.useCallback)(()=>{let e=i.trim();if(e&&e!==`{}`)try{JSON.parse(e)}catch{nt.error(`Invalid JSON — check the syntax and try again.`);return}t(e),r(!1)},[i,t]),c=y4(e);return(0,U.jsxs)(TD,{open:n,onOpenChange:o,children:[(0,U.jsxs)(Ud,{children:[(0,U.jsxs)(Wd,{render:(0,U.jsx)(ED,{render:(0,U.jsx)(Yn,{"aria-label":`Request body`,title:`Request body — JSON merged into each chat request (tool execution context)`,size:`icon-sm`,variant:`outline`,className:`relative`})}),children:[(0,U.jsx)(Vu,{className:`size-4`}),c&&(0,U.jsx)(`span`,{className:`absolute -top-1 -right-1 flex h-2.5 w-2.5 items-center justify-center rounded-full bg-blue-500`})]}),(0,U.jsx)(Gd,{children:(0,U.jsx)(`p`,{children:`Request body params`})})]}),(0,U.jsxs)(kD,{className:`!w-2xl !max-w-2xl`,children:[(0,U.jsx)(AD,{children:(0,U.jsx)(MD,{children:`Request body`})}),(0,U.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,U.jsxs)(`p`,{className:`text-xs text-muted-foreground`,children:[`JSON object merged into the body of every chat request. Available in tool`,` `,(0,U.jsx)(`code`,{className:`font-mono`,children:`execute`}),` functions via`,` `,(0,U.jsx)(`code`,{className:`font-mono`,children:`experimental_context`}),`.`]}),(0,U.jsx)(ZD,{className:`font-mono text-xs min-h-32 max-h-72 break-all w-full`,placeholder:b4,value:i,onChange:e=>a(e.target.value),spellCheck:!1})]}),(0,U.jsx)(jD,{showCloseButton:!0,children:(0,U.jsx)(Yn,{size:`sm`,onClick:s,children:`Save`})})]})]})}function S4(e){if(!e||e===`{}`)return null;let t;try{t=JSON.parse(e)}catch{return null}if(typeof t!=`object`||!t||Array.isArray(t))return null;let n=t;for(let e of Object.values(n))if(typeof e!=`string`)return null;return n}function C4(e,t){if(!t?.length)return;let n=e??{};for(let e of t)n[e]?.trim()||nt.warning(`Query param "${e}" is required for this playground session.`)}function w4(e,t,n){let r=n?.declaredQueryKeys;if(!e||e===`{}`)return C4(null,r),t(e),!0;let i=S4(e);return i===null?(nt.error(`Invalid query params — use only flat string key/value pairs.`),!1):(C4(i,r),t(e),!0)}function T4(e){let t=S4(e.trim());return!t||Object.keys(t).length===0?[{id:ik(),key:``,value:``}]:Object.entries(t).map(([e,t])=>({id:ik(),key:e,value:t}))}function E4(e){let t={},n=new Set;for(let r of e){let e=r.key.trim();if(e){if(n.has(e))return`duplicate`;n.add(e),t[e]=r.value}}return t}function D4({query:e,onChange:t,declaredQueryKeys:n,userId:r,onUserIdChange:i,token:a,onTokenChange:o,welcomeMessage:s,onWelcomeMessageChange:c}){let[l,u]=(0,B.useState)(!1),[d,f]=(0,B.useState)(r),[p,m]=(0,B.useState)(a),[h,g]=(0,B.useState)(s),[_,v]=(0,B.useState)(!1),[y,b]=(0,B.useState)(()=>T4(e)),x=(0,B.useCallback)(t=>{t&&(f(r),m(a),g(s),b(T4(e))),u(t)},[e,r,a,s]),S=(0,B.useCallback)(()=>{b(e=>[...e,{id:ik(),key:``,value:``}])},[]),C=(0,B.useCallback)(e=>{b(t=>{let n=t.filter(t=>t.id!==e);return n.length>0?n:[{id:ik(),key:``,value:``}]})},[]),w=(0,B.useCallback)((e,t,n)=>{b(r=>r.map(r=>r.id===e?{...r,[t]:n}:r))},[]),T=(0,B.useCallback)(()=>{let e=d.trim();if(!e){nt.error(`User ID is required.`);return}let r=E4(y);if(r===`duplicate`){nt.error(`Duplicate parameter keys are not allowed.`);return}w4(JSON.stringify(r),e=>t(e),{declaredQueryKeys:n})&&(i(e),o(p.trim()),c(h.trim()),u(!1))},[y,t,n,d,p,h,i,o,c]),E=y4(e)||!!r||!!a;return(0,U.jsxs)(TD,{open:l,onOpenChange:x,children:[(0,U.jsxs)(Ud,{children:[(0,U.jsxs)(Wd,{render:(0,U.jsx)(ED,{render:(0,U.jsx)(Yn,{"aria-label":`Connection settings`,title:`Connection settings — user ID, auth token, and query params`,size:`icon-sm`,variant:`outline`,className:`relative`})}),children:[(0,U.jsx)(Mu,{className:`size-4`}),E&&(0,U.jsx)(`span`,{className:`absolute -top-1 -right-1 flex h-2.5 w-2.5 items-center justify-center rounded-full bg-blue-500`})]}),(0,U.jsx)(Gd,{children:(0,U.jsx)(`p`,{children:`Connection settings`})})]}),(0,U.jsxs)(kD,{className:`!w-2xl !max-w-2xl`,children:[(0,U.jsx)(AD,{children:(0,U.jsx)(MD,{children:`Connection settings`})}),(0,U.jsxs)(`div`,{className:`flex flex-col gap-4`,children:[(0,U.jsx)(`p`,{className:`text-xs text-muted-foreground`,children:`Configure your User ID, auth token, and any additional query params for the WebSocket connection. Changes take effect on the next connection after saving, such as starting a new chat or refreshing the page.`}),(0,U.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,U.jsxs)(`label`,{className:`text-xs font-medium text-foreground`,htmlFor:`params-user-id`,children:[`User ID `,(0,U.jsx)(`span`,{className:`text-destructive font-normal`,children:`(required)`})]}),(0,U.jsx)(XD,{autoComplete:`off`,className:`font-mono text-xs`,id:`params-user-id`,onChange:e=>f(e.target.value),placeholder:`e.g. user_123`,spellCheck:!1,value:d})]}),(0,U.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,U.jsxs)(`label`,{className:`text-xs font-medium text-foreground`,htmlFor:`params-token`,children:[`Auth Token `,(0,U.jsx)(`span`,{className:`text-muted-foreground font-normal`,children:`(optional)`})]}),(0,U.jsxs)(`div`,{className:`relative`,children:[(0,U.jsx)(XD,{autoComplete:`off`,className:`font-mono text-xs pr-10`,id:`params-token`,onChange:e=>m(e.target.value),placeholder:`Bearer token for authentication`,spellCheck:!1,type:_?`text`:`password`,value:p}),(0,U.jsx)(Yn,{className:`absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7`,onClick:()=>v(e=>!e),size:`icon-sm`,type:`button`,variant:`ghost`,children:_?(0,U.jsx)(Du,{className:`size-4`}):(0,U.jsx)(Ou,{className:`size-4`})})]})]}),(0,U.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,U.jsxs)(`label`,{className:`text-xs font-medium text-foreground`,htmlFor:`params-welcome-message`,children:[`Welcome Message `,(0,U.jsx)(`span`,{className:`text-muted-foreground font-normal`,children:`(optional)`})]}),(0,U.jsx)(ZD,{className:`text-xs min-h-16 max-h-32`,id:`params-welcome-message`,onChange:e=>g(e.target.value),placeholder:`Hello! How can I help you today?`,spellCheck:!1,value:h})]}),(0,U.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,U.jsx)(`p`,{className:`text-xs font-medium text-foreground`,children:`Additional query params`}),(0,U.jsx)(`p`,{className:`text-xs text-muted-foreground`,children:`Flat string key/value pairs appended to the WebSocket URL.`}),(0,U.jsxs)(`div`,{className:`grid grid-cols-[minmax(0,1fr)_minmax(0,2fr)_auto] gap-2 text-xs font-medium text-muted-foreground px-0.5`,children:[(0,U.jsx)(`span`,{children:`Name`}),(0,U.jsx)(`span`,{children:`Value`}),(0,U.jsx)(`span`,{className:`sr-only`,children:`Remove`})]}),y.map(e=>(0,U.jsxs)(`div`,{className:`grid grid-cols-1 sm:grid-cols-[minmax(0,1fr)_minmax(0,2fr)_auto] gap-2 items-center`,children:[(0,U.jsx)(XD,{"aria-label":`Parameter name`,className:`font-mono text-xs h-9`,onChange:t=>w(e.id,`key`,t.target.value),placeholder:`e.g. token`,spellCheck:!1,value:e.key}),(0,U.jsx)(XD,{"aria-label":`Value for ${e.key||`parameter`}`,className:`font-mono text-xs h-9`,onChange:t=>w(e.id,`value`,t.target.value),placeholder:`value`,spellCheck:!1,value:e.value}),(0,U.jsx)(Yn,{"aria-label":`Remove row`,className:`shrink-0 justify-self-end sm:justify-self-center`,onClick:()=>C(e.id),size:`icon-sm`,type:`button`,variant:`ghost`,children:(0,U.jsx)(Uu,{className:`size-4 text-muted-foreground`})})]},e.id)),(0,U.jsxs)(Yn,{className:`self-start gap-1.5`,onClick:S,size:`sm`,type:`button`,variant:`outline`,children:[(0,U.jsx)(zu,{className:`size-4`}),`Add param`]})]})]}),(0,U.jsx)(jD,{showCloseButton:!0,children:(0,U.jsx)(Yn,{size:`sm`,onClick:T,children:`Save`})})]})]})}var O4=`playground:url`,k4=`playground:body`,A4=`playground:query`,j4=`playground:userId`,M4=`playground:token`,N4=`playground:welcomeMessage`,P4=`playground:userMode`,F4=`{{agent_name}}`,I4=`http://localhost:8787/agents/${F4}`;function L4(e){if(!e?.trim())return[];let t=new Set,n=[];for(let r of e.split(`,`)){let e=r.trim();e&&(t.has(e)||(t.add(e),n.push(e)))}return n}function R4(e){return e?.length?L4(e.join(`,`)):[]}function z4(){let e=window.__PLAYGROUND_CONFIG__,t=R4(e?.queryParamKeys),n=L4(void 0),r=t.length>0?t:n;return{agentName:e?.agentName,port:e?.port,queryParamKeys:r}}function B4(e,t){if(t.length===0)return!0;let n=S4(e.trim());return n?t.every(e=>!!n[e]?.trim()):!1}function V4(e,t){return S4(e.trim())?.[t]?.trim()??``}function H4(e){return`setup-query-${e.replace(/[^a-zA-Z0-9_-]/g,`_`)}`}function U4(){return localStorage.getItem(k4)??``}function W4(){return localStorage.getItem(A4)??``}function G4(){return new URLSearchParams(window.location.search).get(`user`)??``}function K4(){return G4()||(localStorage.getItem(j4)??``)}function q4(){return localStorage.getItem(M4)??``}function J4(){return localStorage.getItem(N4)??``}function Y4(e){try{let t=new URL(e.includes(`://`)?e:`http://${e}`),n=t.pathname.split(`/`).filter(Boolean);return n[0]===`agents`&&n[1]?{host:t.host,agent:n[1]}:null}catch{return null}}function X4(e){return e?Y4(e)||(nt.error(`Invalid agent URL — expected http://<host>/agents/<name>`),null):null}function Z4({open:e,urlDraft:t,setUrlDraft:n,onCommitUrl:r,query:i,onPersistQuery:a,requiredParamKeys:o,userId:s,onUserIdChange:c,token:l,onTokenChange:u,welcomeMessage:d,onWelcomeMessageChange:f}){let[p,m]=(0,B.useState)(s),[h,g]=(0,B.useState)(l),[_,v]=(0,B.useState)(d),[y,b]=(0,B.useState)(!1),[x,S]=(0,B.useState)(()=>Object.fromEntries(o.map(e=>[e,V4(i,e)])));(0,B.useEffect)(()=>{m(s)},[s]),(0,B.useEffect)(()=>{g(l)},[l]),(0,B.useEffect)(()=>{v(d)},[d]),(0,B.useEffect)(()=>{S(Object.fromEntries(o.map(e=>[e,V4(i,e)])))},[i,o]);let C=(0,B.useCallback)(()=>{let e=p.trim();if(!e){nt.error(`User ID is required.`);return}if(r()){if(o.length>0){for(let e of o)if(!x[e]?.trim()){nt.error(`"${e}" is required for this playground session (WebSocket query param).`);return}let e={...S4(i.trim())??{},...Object.fromEntries(o.map(e=>[e,x[e].trim()]))};a(JSON.stringify(e))}c(e),u(h.trim()),f(_.trim())}},[p,h,_,r,o,x,i,a,c,u,f]);return(0,U.jsx)(TD,{open:e,onOpenChange:e=>{},children:(0,U.jsxs)(kD,{className:`!w-2xl !max-w-2xl`,showCloseButton:!1,children:[(0,U.jsx)(AD,{children:(0,U.jsx)(MD,{children:`Initial setup`})}),(0,U.jsxs)(`div`,{className:`flex flex-col gap-4`,children:[(0,U.jsxs)(`p`,{className:`text-xs text-muted-foreground`,children:[`Set your User ID, a valid agent URL, and optionally an auth token.`,` `,o.length>0?(0,U.jsxs)(U.Fragment,{children:[`This CLI session also requires query params:`,` `,(0,U.jsx)(`code`,{className:`font-mono`,children:o.join(`, `)}),`.`]}):(0,U.jsx)(U.Fragment,{children:`Additional query params can be added later via the settings icon in the header.`}),` `,`Fields are pre-filled from saved settings when possible.`]}),(0,U.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,U.jsxs)(`label`,{className:`text-xs font-medium text-foreground`,htmlFor:`setup-user-id`,children:[`User ID `,(0,U.jsx)(`span`,{className:`text-destructive font-normal`,children:`(required)`})]}),(0,U.jsx)(XD,{autoComplete:`off`,className:`font-mono text-xs`,id:`setup-user-id`,onChange:e=>m(e.target.value),placeholder:`e.g. user_123`,spellCheck:!1,value:p})]}),(0,U.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,U.jsxs)(`label`,{className:`text-xs font-medium text-foreground`,htmlFor:`setup-token`,children:[`Auth Token `,(0,U.jsx)(`span`,{className:`text-muted-foreground font-normal`,children:`(optional)`})]}),(0,U.jsxs)(`div`,{className:`relative`,children:[(0,U.jsx)(XD,{autoComplete:`off`,className:`font-mono text-xs pr-10`,id:`setup-token`,onChange:e=>g(e.target.value),placeholder:`Bearer token for authentication`,spellCheck:!1,type:y?`text`:`password`,value:h}),(0,U.jsx)(Yn,{className:`absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7`,onClick:()=>b(e=>!e),size:`icon-sm`,type:`button`,variant:`ghost`,children:y?(0,U.jsx)(Du,{className:`size-4`}):(0,U.jsx)(Ou,{className:`size-4`})})]})]}),(0,U.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,U.jsx)(`label`,{className:`text-xs font-medium text-foreground`,htmlFor:`setup-agent-url`,children:`Agent URL`}),(0,U.jsx)(XD,{className:`font-mono text-xs`,id:`setup-agent-url`,onChange:e=>n(e.target.value),placeholder:`http://localhost:8787/agents/my-agent`,spellCheck:!1,value:t})]}),(0,U.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,U.jsxs)(`label`,{className:`text-xs font-medium text-foreground`,htmlFor:`setup-welcome-message`,children:[`Welcome Message `,(0,U.jsx)(`span`,{className:`text-muted-foreground font-normal`,children:`(optional)`})]}),(0,U.jsx)(ZD,{className:`text-xs min-h-16 max-h-32`,id:`setup-welcome-message`,onChange:e=>v(e.target.value),placeholder:`Hello! How can I help you today?`,spellCheck:!1,value:_})]}),o.length>0?(0,U.jsxs)(`div`,{className:`flex flex-col gap-3`,children:[(0,U.jsx)(`p`,{className:`text-xs font-medium text-foreground`,children:`Required query params`}),o.map(e=>(0,U.jsxs)(`div`,{className:`flex flex-col gap-2`,children:[(0,U.jsxs)(`label`,{className:`text-xs font-medium text-foreground`,htmlFor:H4(e),children:[(0,U.jsx)(`code`,{className:`font-mono`,children:e}),` `,(0,U.jsx)(`span`,{className:`text-destructive font-normal`,children:`(required)`})]}),(0,U.jsx)(XD,{autoComplete:`off`,className:`font-mono text-xs`,id:H4(e),onChange:t=>S(n=>({...n,[e]:t.target.value})),placeholder:e,spellCheck:!1,value:x[e]??``})]},e)),(0,U.jsx)(`p`,{className:`text-xs text-muted-foreground`,children:`Use the key icon in the header to add more key/value pairs if you need keys beyond this list.`})]}):null]}),(0,U.jsx)(jD,{children:(0,U.jsx)(Yn,{size:`sm`,onClick:C,children:`Continue`})})]})})}function Q4(){let e=z4();return e.agentName?`http://localhost:${e.port??8787}/agents/${e.agentName}`:I4}function $4(){return localStorage.getItem(O4)??Q4()}function e3(){return new URLSearchParams(window.location.search).get(`chat`)??void 0}function t3(){return ik()}function n3(){let[e,t]=(0,B.useState)(()=>e3()??t3()),[n,r]=(0,B.useState)(K4),[i,a]=(0,B.useState)(q4),[o,s]=(0,B.useState)(J4),[c,l]=(0,B.useState)($4),[u,d]=(0,B.useState)(c),[f,p]=(0,B.useState)(`connecting`),[m,h]=(0,B.useState)(null),[g,_]=(0,B.useState)(U4),[v,y]=(0,B.useState)(W4),[b,x]=(0,B.useState)(null),[S,C]=(0,B.useState)(()=>localStorage.getItem(P4)===`true`),w=(0,B.useRef)(!1),T=(0,B.useMemo)(()=>z4().queryParamKeys??[],[]);(0,B.useEffect)(()=>{p(`connecting`),h(null)},[e]);let E=c.includes(F4),D=E?null:Y4(c),O=!E&&D!==null,k=B4(v,T),A=!O||!k||!n;(0,B.useEffect)(()=>{let t=new URLSearchParams(window.location.search);e&&t.get(`chat`)!==e&&(t.set(`chat`,e),history.replaceState(null,``,`?${t}`))},[e]),(0,B.useEffect)(()=>{let e=new URLSearchParams(window.location.search);n&&e.get(`user`)!==n&&(e.set(`user`,n),history.replaceState(null,``,`?${e}`))},[n]);let j=(0,B.useCallback)(()=>{let e=t3(),n=new URLSearchParams(window.location.search);n.set(`chat`,e),history.pushState(null,``,`?${n}`),t(e),nt.success(`New chat started`)},[]),M=(0,B.useCallback)(()=>{let e=u.trim();return X4(e)?(localStorage.setItem(O4,e),l(e),d(e),w.current=!0,t(t3()),!0):!1},[u]),N=(0,B.useCallback)(e=>{localStorage.setItem(j4,e),r(e)},[]),P=(0,B.useCallback)(e=>{localStorage.setItem(M4,e),a(e)},[]),F=(0,B.useCallback)(e=>{localStorage.setItem(N4,e),s(e)},[]);return(0,U.jsxs)(`div`,{className:`relative flex h-screen overflow-hidden`,children:[(0,U.jsx)(Z4,{open:A,query:v,requiredParamKeys:T,setUrlDraft:d,urlDraft:u,onCommitUrl:M,onPersistQuery:(0,B.useCallback)(e=>w4(e,e=>{localStorage.setItem(A4,e),y(e)},{declaredQueryKeys:T}),[T]),userId:n,onUserIdChange:N,token:i,onTokenChange:P,welcomeMessage:o,onWelcomeMessageChange:F}),(0,U.jsxs)(`div`,{className:`flex-1 flex flex-col`,children:[(0,U.jsx)(`div`,{className:`border-b-2 border-zinc-200 flex items-center justify-between bg-zinc-50`,children:(0,U.jsxs)(`div`,{className:`h-20 flex items-center w-6xl mx-auto border-x-2 border-zinc-200/40 py-6 px-6 justify-between`,children:[(0,U.jsx)(`div`,{className:`flex items-center`,children:c?(0,U.jsx)(U.Fragment,{children:(0,U.jsxs)(`div`,{children:[(0,U.jsxs)(`h2`,{className:`text-sm font-semibold mb-0 flex items-center`,children:[(0,U.jsx)(`div`,{className:[`h-2 w-2 rounded-full mr-2`,f===`connected`&&`bg-green-500`,f===`connecting`&&`bg-amber-400 animate-pulse`,(f===`disconnected`||f===`unauthorized`)&&`bg-red-500 animate-pulse`].filter(Boolean).join(` `)}),f===`connected`&&`Connected to agent`,f===`connecting`&&`Connecting...`,f===`disconnected`&&`Unable to connect to agent`,f===`unauthorized`&&`Unauthorized to connect to agent`]}),(0,U.jsx)(`input`,{className:`-ml-1.5 text-xs text-muted-foreground mb-0 py-1 pl-2 pr-10 field-sizing-content rounded-md hover:text-foreground focus:text-foreground hover:bg-white focus:bg-white hover:outline hover:outline-zinc-200 focus:outline focus:outline-zinc-300`,value:u,onChange:e=>d(e.target.value),onKeyDown:e=>{e.key===`Enter`?(M(),e.currentTarget.blur()):e.key===`Escape`&&(d(c),e.currentTarget.blur())},onBlur:()=>{if(w.current){w.current=!1;return}d(c)}})]})}):(0,U.jsxs)(U.Fragment,{children:[(0,U.jsx)(`div`,{className:`h-2 w-2 bg-muted-foreground/50 rounded-full mr-3`}),(0,U.jsxs)(`div`,{children:[(0,U.jsx)(`h2`,{className:`text-sm font-semibold text-muted-foreground mb-0`,children:`Not Connected`}),(0,U.jsx)(`p`,{className:`text-xs text-muted-foreground mb-0`,children:`Enter an agent URL and click Connect`})]})]})}),(0,U.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,U.jsx)(Yn,{onClick:j,size:`icon-sm`,variant:`outline`,children:(0,U.jsx)(Pu,{className:`size-4`})}),(0,U.jsx)(_4,{agent:b,connectionStatus:f,currentChatId:e,onConversationClick:t}),(0,U.jsx)(D4,{declaredQueryKeys:T,query:v,onChange:e=>{localStorage.setItem(A4,e),y(e)},userId:n,onUserIdChange:N,token:i,onTokenChange:P,welcomeMessage:o,onWelcomeMessageChange:F}),(0,U.jsx)(x4,{body:g,onChange:e=>{localStorage.setItem(k4,e),_(e)}}),(0,U.jsxs)(Ud,{children:[(0,U.jsx)(Wd,{render:(0,U.jsx)(Yn,{"aria-label":`View chat as a user would`,title:`View chat as a user would`,onClick:()=>C(e=>{let t=!e;return localStorage.setItem(P4,String(t)),t}),size:`icon-sm`,variant:S?`default`:`outline`}),children:S?(0,U.jsx)(Ou,{className:`size-4`}):(0,U.jsx)(Du,{className:`size-4`})}),(0,U.jsx)(Gd,{children:(0,U.jsx)(`p`,{children:`View chat as a user would`})})]})]})]})}),(0,U.jsx)(`div`,{className:`flex-1 overflow-hidden min-h-0 grow`,children:(0,U.jsxs)(`div`,{className:`max-w-6xl w-full mx-auto border-x-2 border-zinc-100 h-full`,children:[f===`unauthorized`&&O&&k&&(0,U.jsx)(`div`,{className:`flex size-full flex-col items-center justify-center gap-4 text-muted-foreground`,children:(0,U.jsxs)(`div`,{className:`flex flex-col items-center gap-2 text-center`,children:[(0,U.jsx)(`div`,{className:`h-10 w-10 rounded-full bg-red-50 flex items-center justify-center`,children:(0,U.jsx)(`div`,{className:`h-4 w-4 rounded-full bg-red-400`})}),(0,U.jsx)(`h3`,{className:`text-sm font-semibold text-foreground`,children:`Unauthorized`}),m?(0,U.jsx)(`p`,{className:`text-xs max-w-xs`,children:m}):(0,U.jsx)(`p`,{className:`text-xs max-w-xs`,children:`You are not authorized to connect to this agent.`})]})}),O&&k&&D?(0,U.jsx)(v4,{children:(0,U.jsx)($2,{agentName:D.agent,host:D.host,chatId:n?`${n}:${e}`:e,agentUrl:c,authToken:i||void 0,body:g?JSON.parse(g):void 0,query:v?S4(v.trim())??void 0:void 0,welcomeMessage:o||void 0,onAgentChange:x,onConnectionStatusChange:p,onUnauthorized:h,userMode:S},`${n}:${e}:${v}`)},`${n}:${e}:${v}`):(0,U.jsx)(`div`,{className:`flex size-full flex-col items-center justify-center gap-3 text-muted-foreground px-4`,children:O?(0,U.jsxs)(`p`,{className:`text-sm text-center max-w-md`,children:[`Set required WebSocket query params in the setup dialog`,T.length>0?(0,U.jsxs)(U.Fragment,{children:[`: `,(0,U.jsx)(`code`,{className:`font-mono text-xs`,children:T.join(`, `)})]}):null,`.`]}):(0,U.jsxs)(U.Fragment,{children:[(0,U.jsx)(`p`,{className:`text-sm text-center`,children:`Enter an agent URL in the bar above or in the setup dialog.`}),(0,U.jsx)(`p`,{className:`text-xs font-mono text-muted-foreground/60`,children:`e.g. http://localhost:8787/agents/my-agent`})]})})]})})]})]})}(0,Be.createRoot)(document.getElementById(`app`)).render((0,U.jsx)(B.StrictMode,{children:(0,U.jsxs)(Hd,{children:[(0,U.jsx)(_t,{}),(0,U.jsx)(n3,{})]})}));
package/dist/index.html CHANGED
@@ -5,7 +5,7 @@
5
5
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
7
  <title>website</title>
8
- <script type="module" crossorigin src="/assets/index-CNPSk-AE.js"></script>
8
+ <script type="module" crossorigin src="/assets/index-CJXc8PMM.js"></script>
9
9
  <link rel="modulepreload" crossorigin href="/assets/chunk-CFjPhJqf.js">
10
10
  <link rel="modulepreload" crossorigin href="/assets/preload-helper-D4M6sveU.js">
11
11
  <link rel="modulepreload" crossorigin href="/assets/src-Bn-kKzs7.js">
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@economic/agents-playground",
3
- "version": "1.2.1",
3
+ "version": "1.2.2",
4
4
  "description": "A local chat UI for testing agents built with @economic/agents.",
5
5
  "license": "MIT",
6
6
  "bin": {