https://studio.d-id.com/v0.1262.0/assets/agent-playground-DwxaZVNG.js

1import{by as M,bz as q,bA as T,R as W,b as G,am as j,r as c,j as o,a5 as b,e as t,bK as u,bl as Y,x as J,cH as x,an as Q,ao as X,ap as Z,aT as _,f5 as ee,bq as te,f6 as ae,c1 as re,u as ne,f as H,f7 as ie,B as F,Q as B,f8 as oe,a7 as le}from"./index-dK-KQR3u.js";import{l as de}from"./loadAgentsClientScript-XJeYhoW0.js";import{S as g}from"./Stack-Dm43KxsF.js";import{A as D}from"./Alert-DdPxodJE.js";import{C as se}from"./Container-C_iVjRIl.js";import"./styled-DURT3pbh.js";import"./chunk-hHWxwtHM.js";var I={},K;function ue(){if(K)return I;K=1;var e=M();Object.defineProperty(I,"__esModule",{value:!0}),I.default=void 0;var n=e(q()),l=T();return I.default=(0,n.default)((0,l.jsx)("path",{d:"M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42a.9959.9959 0 0 0-1.41 0l-6.59 6.59c-.39.39-.39 1.02 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1"}),"ArrowBackRounded"),I}var ce=ue();const pe=W(ce);var A={},V;function ge(){if(V)return A;V=1;var e=M();Object.defineProperty(A,"__esModule",{value:!0}),A.default=void 0;var n=e(q()),l=T();return A.default=(0,n.default)((0,l.jsx)("path",{d:"M8 6.82v10.36c0 .79.87 1.27 1.54.84l8.14-5.18c.62-.39.62-1.29 0-1.69L9.54 5.98C8.87 5.55 8 6.03 8 6.82"}),"PlayArrowRounded"),A}var he=ge();const $=W(he);var C={},L;function ve(){if(L)return C;L=1;var e=M();Object.defineProperty(C,"__esModule",{value:!0}),C.default=void 0;var n=e(q()),l=T();return C.default=(0,n.default)((0,l.jsx)("path",{d:"M12 5V3.21c0-.45-.54-.67-.85-.35l-2.8 2.79c-.2.2-.2.51 0 .71l2.79 2.79c.32.31.86.09.86-.36V7c3.31 0 6 2.69 6 6 0 2.72-1.83 5.02-4.31 5.75-.42.12-.69.52-.69.95 0 .65.62 1.16 1.25.97C17.57 19.7 20 16.64 20 13c0-4.42-3.58-8-8-8m-6 8c0-1.34.44-2.58 1.19-3.59.3-.4.26-.95-.09-1.31-.42-.42-1.14-.38-1.5.1-1 1.34-1.6 3-1.6 4.8 0 3.64 2.43 6.7 5.75 7.67.63.19 1.25-.32 1.25-.97 0-.43-.27-.83-.69-.95C7.83 18.02 6 15.72 6 13"}),"RestartAltRounded"),C}var me=ve();const fe=W(me),z={agentId:"",clientKey:"",mode:"fabio",openMode:"compact",orientation:"horizontal",position:"right",theme:"light",runtime:"auto",viewport:"desktop"},O={desktop:{label:"Desktop · 1200 × 675",width:1200,height:675},narrow:{label:"Narrow · 600 × 720",width:600,height:720},mobile:{label:"Mobile · 390 × 720",width:390,height:720}};function N(e,n){return n!=="auto"?n==="v2":e.trim().startsWith("v2_")}const be=_(b)(({theme:e})=>({minHeight:520,padding:e.spacing(3),overflow:"auto",display:"flex",alignItems:"flex-start",justifyContent:"center",border:`1px solid ${e.palette.divider}`,borderRadius:20,backgroundImage:`linear-gradient(${x(e.palette.text.primary,.035)} 1px, transparent 1px), linear-gradient(90deg, ${x(e.palette.text.primary,.035)} 1px, transparent 1px)`,backgroundSize:"24px 24px",backgroundColor:e.palette.background.default})),xe=_(b,{shouldForwardProp:e=>e!=="previewTheme"})(({theme:e,previewTheme:n})=>({position:"relative",flexShrink:0,overflow:"hidden",border:`1px solid ${n==="dark"?x("#ffffff",.18):e.palette.divider}`,borderRadius:24,backgroundColor:n==="dark"?"#171717":"#f8f7f4",boxShadow:e.palette.mode==="dark"?"none":"0 24px 60px rgba(23, 22, 20, 0.12)"}));function we({config:e,runId:n}){const{accessToken:l,user:a}=G(),h=j("agents_ui_redesign",!1),s=c.useRef(null),[p,w]=c.useState("loading"),[S,y]=c.useState(""),v=O[e.viewport];return c.useEffect(()=>{let R=!1,i;async function E(){const k=e.agentId.trim(),r=e.clientKey.trim();if(!(!k||!r&&!l)){w("loading"),y("");try{const{init:d}=await de({isV2:N(k,e.runtime)});if(R)return;const m=d({agentId:k,...r?{clientKey:r}:{token:l,isOwner:!0,verbose:!0},mode:e.mode,openMode:e.openMode,orientation:e.orientation,position:e.position,lightMode:e.theme==="light",newDesign:h,targetElement:e.mode==="full"?s.current:void 0,didSocketApiUrl:Z,didApiUrl:X,monitor:!1,track:!1,customMixpanelKey:Q,externalId:(a==null?void 0:a.sub)??"",mixpanelAdditionalProperties:{plan:a==null?void 0:a.planGroup},onError:P=>{R||(w("error"),y(P.message||"The agent preview reported an error."))}});i=m==null?void 0:m.destroy,w("running")}catch(d){if(R)return;w("error"),y(d instanceof Error?d.message:"Could not load the agent preview.")}}}return E(),()=>{R=!0,i==null||i()}},[l,e,h,n,a==null?void 0:a.planGroup,a==null?void 0:a.sub]),o(g,{spacing:2,children:[o(g,{direction:"row",alignItems:"center",justifyContent:"space-between",gap:2,children:[o(b,{children:[t(u,{variant:"h6",children:"Live preview"}),t(u,{variant:"body2",color:"text.secondary",sx:{lineHeight:1.4},children:e.mode==="fabio"?"Fabio renders over this page so you can test its real fixed positioning and drag behavior.":`${v.label} preview surface`})]}),t(Y,{size:"small",color:p==="error"?"error":p==="running"?"success":"default",label:p==="loading"?"Loading":p==="running"?"Running":"Error"})]}),S&&t(D,{severity:"error",children:S}),t(be,{children:t(xe,{ref:s,previewTheme:e.theme,sx:{width:e.mode==="full"?v.width:"min(100%, 760px)",height:e.mode==="full"?v.height:460,maxWidth:e.mode==="fabio"?"100%":"none"},children:e.mode==="fabio"&&o(g,{alignItems:"center",justifyContent:"center",sx:{height:"100%",px:4,textAlign:"center"},spacing:1.5,children:[p==="loading"&&t(J,{size:28}),t(u,{variant:"h6",color:e.theme==="dark"?"common.white":"text.primary",children:"Fabio preview canvas"}),t(u,{variant:"body2",sx:{maxWidth:430,lineHeight:1.45,color:e.theme==="dark"?x("#ffffff",.68):"text.secondary"},children:"The live widget is attached to the browser viewport. Use it exactly as an embedded customer widget, then return here to change its configuration."})]})})})]})}function f({label:e,value:n,options:l,disabled:a,onChange:h}){return o(re,{fullWidth:!0,size:"small",disabled:a,children:[t(ee,{children:e}),t(ae,{label:e,value:n,onChange:s=>h(s.target.value),children:l.map(s=>t(te,{value:s.value,children:s.label},s.value))})]})}const U="backoffice-agent-playground-id",ye=_(b)(({theme:e})=>({padding:e.spacing(3),border:`1px solid ${e.palette.divider}`,borderRadius:24,background:`linear-gradient(135deg, ${x(e.palette.primary.main,.12)}, ${x(e.palette.background.paper,.94)} 52%)`})),Re=_("form")(({theme:e})=>({position:"sticky",top:e.spacing(2),padding:e.spacing(3),border:`1px solid ${e.palette.divider}`,borderRadius:20,color:e.palette.text.primary,backgroundColor:e.palette.background.paper,boxShadow:e.palette.mode==="dark"?"none":"0 16px 40px rgba(23, 22, 20, 0.08)"}));function ke(){return{...z,agentId:window.localStorage.getItem(U)??""}}function Fe(){const e=j("backoffice_is_enabled",!1),n=j("agents_ui_redesign",!1),l=ne(),[a,h]=c.useState(ke),[s,p]=c.useState(null),[w,S]=c.useState(0),[y,v]=c.useState(""),R=c.useMemo(()=>N(a.agentId,a.runtime)?"V2 runtime":"V1 runtime",[a.agentId,a.runtime]);if(!e)return t(ie,{to:H.Home,replace:!0});const i=(r,d)=>{h(m=>({...m,[r]:d}))},E=r=>{r.preventDefault();const d=a.agentId.trim();if(!d){v("Enter an agent ID to start the preview.");return}const m={...a,agentId:d,clientKey:a.clientKey.trim()};window.localStorage.setItem(U,d),v(""),p(m),S(P=>P+1)},k=()=>{const r={...z,agentId:a.agentId,clientKey:a.clientKey};h(r),p(null),v("")};return t(se,{maxWidth:!1,sx:{py:4,px:{xs:2,md:4},maxWidth:1800},children:o(g,{spacing:3,children:[o(ye,{children:[o(g,{alignItems:"flex-start",spacing:2,children:[t(F,{startIcon:t(pe,{}),onClick:()=>l(H.Backoffice),children:"Back to Backoffice"}),t(u,{variant:"overline",color:"primary",sx:{fontWeight:700,letterSpacing:"0.12em",lineHeight:1.3},children:"Internal testing utility"})]}),t(u,{variant:"h3",component:"h1",sx:{mt:.5,mb:1,fontWeight:700},children:"Agent variant playground"}),t(u,{color:"text.secondary",sx:{maxWidth:760,lineHeight:1.45},children:"Run an agent with real embed settings without publishing a share page. Analytics and monitoring are disabled for every preview."})]}),o(b,{sx:{display:"grid",gridTemplateColumns:{xs:"1fr",lg:"340px minmax(0, 1fr)"}

1,alignItems:"start",gap:3},children:[t(Re,{onSubmit:E,children:o(g,{spacing:2.25,children:[o(b,{children:[t(u,{variant:"h6",children:"Configuration"}),t(u,{variant:"body2",color:"text.secondary",sx:{lineHeight:1.4},children:"Settings are applied together when you run the preview."})]}),t(B,{label:"Agent ID",value:a.agentId,onChange:r=>i("agentId",r.target.value),placeholder:"agt_… or v2_agt_…",size:"small",required:!0,autoComplete:"off"}),t(B,{label:"Client key (optional)",value:a.clientKey,onChange:r=>i("clientKey",r.target.value),helperText:"Leave empty to use your Backoffice session.",size:"small",type:"password",autoComplete:"off"}),t(oe,{}),t(f,{label:"Display mode",value:a.mode,onChange:r=>i("mode",r),options:[{value:"fabio",label:"Fabio widget"},{value:"full",label:"Full embed"}]}),t(f,{label:"Fabio open mode",value:a.openMode,disabled:a.mode!=="fabio",onChange:r=>i("openMode",r),options:[{value:"compact",label:"Compact"},{value:"expanded",label:"Expanded"}]}),t(f,{label:"Fabio orientation",value:a.orientation,disabled:a.mode!=="fabio",onChange:r=>i("orientation",r),options:[{value:"horizontal",label:"Horizontal"},{value:"vertical",label:"Vertical"}]}),t(f,{label:"Fabio position",value:a.position,disabled:a.mode!=="fabio",onChange:r=>i("position",r),options:[{value:"right",label:"Right"},{value:"left",label:"Left"}]}),t(f,{label:"Preview viewport",value:a.viewport,disabled:a.mode!=="full",onChange:r=>i("viewport",r),options:Object.entries(O).map(([r,d])=>({value:r,label:d.label}))}),t(f,{label:"Theme",value:a.theme,onChange:r=>i("theme",r),options:[{value:"light",label:"Light"},{value:"dark",label:"Dark"}]}),o(D,{severity:"info",icon:!1,children:["Design: ",t("strong",{children:n?"New":"Legacy"})," · controlled by the existing feature flag"]}),t(f,{label:"Agent UI runtime",value:a.runtime,onChange:r=>i("runtime",r),options:[{value:"auto",label:`Auto · ${R}`},{value:"v1",label:"Force V1"},{value:"v2",label:"Force V2"}]}),y&&t(D,{severity:"error",children:y}),o(g,{direction:"row",spacing:1,children:[t(F,{type:"submit",variant:"contained",startIcon:t($,{}),fullWidth:!0,children:"Run preview"}),t(F,{"aria-label":"Reset configuration",variant:"outlined",onClick:k,sx:{minWidth:44,px:1.25},children:t(fe,{})})]})]})}),t(le,{variant:"outlined",sx:{p:{xs:2,md:3},borderRadius:5,minWidth:0,boxShadow:r=>r.palette.mode==="dark"?"none":r.shadows[1]},children:s?t(we,{config:s,runId:w}):o(g,{alignItems:"center",justifyContent:"center",textAlign:"center",sx:{minHeight:520,px:3},spacing:1.5,children:[t(b,{sx:{width:64,height:64,display:"grid",placeItems:"center",borderRadius:"50%",color:"primary.main",bgcolor:r=>x(r.palette.primary.main,.12)},children:t($,{sx:{fontSize:34}})}),t(u,{variant:"h5",children:"Ready for a test run"}),t(u,{color:"text.secondary",sx:{maxWidth:520,lineHeight:1.45},children:"Enter an agent ID, choose the embed variant, and run the preview. Fabio attaches to the browser viewport; Full renders inside the selected test surface."})]})})]})]})})}export{Fe as AgentPlaygroundPage};