https://studio.d-id.com/v0.1309.0/assets/agent-playground-CrWMnj2e.js

1import{bx as j,by as F,bz as D,bA as M,b as U,r as c,j as d,a5 as f,e as t,bK as u,bj as G,x as N,c7 as b,am as Y,an as J,ao as Q,aT as S,f7 as X,bo as Z,f8 as ee,b$ as te,ar as ae,u as re,f as T,f9 as ne,B as P,R as W,fa as ie,a7 as oe}from"./index-yQyqfSHr.js";import{l as le}from"./loadAgentsClientScript-C-GCL1QE.js";import{S as p}from"./Stack-Ckki6SWh.js";import{A as K}from"./Alert-DPbPzh2b.js";import{C as de}from"./Container-CkXRG7ex.js";import"./styled-BlPcXvYz.js";import"./chunk-Bd1qRqEj.js";var k={},q;function se(){if(q)return k;q=1;var e=j();Object.defineProperty(k,"__esModule",{value:!0}),k.default=void 0;var n=e(F()),a=D();return k.default=(0,n.default)((0,a.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"),k}var ue=se();const ce=M(ue);var I={},$;function pe(){if($)return I;$=1;var e=j();Object.defineProperty(I,"__esModule",{value:!0}),I.default=void 0;var n=e(F()),a=D();return I.default=(0,n.default)((0,a.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"),I}var ge=pe();const B=M(ge);var A={},H;function he(){if(H)return A;H=1;var e=j();Object.defineProperty(A,"__esModule",{value:!0}),A.default=void 0;var n=e(F()),a=D();return A.default=(0,n.default)((0,a.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"),A}var ve=he();const me=M(ve),V={agentId:"",clientKey:"",mode:"fabio",openMode:"compact",orientation:"horizontal",position:"right",theme:"light",runtime:"auto",viewport:"desktop"},z={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 L(e,n){return n!=="auto"?n==="v2":e.trim().startsWith("v2_")}const fe=S(f)(({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(${b(e.palette.text.primary,.035)} 1px, transparent 1px), linear-gradient(90deg, ${b(e.palette.text.primary,.035)} 1px, transparent 1px)`,backgroundSize:"24px 24px",backgroundColor:e.palette.background.default})),be=S(f,{shouldForwardProp:e=>e!=="previewTheme"})(({theme:e,previewTheme:n})=>({position:"relative",flexShrink:0,overflow:"hidden",border:`1px solid ${n==="dark"?b("#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 xe({config:e,runId:n}){const{accessToken:a,user:i}=U(),g=c.useRef(null),[o,x]=c.useState("loading"),[C,w]=c.useState(""),h=z[e.viewport];return c.useEffect(()=>{let y=!1,l;async function _(){const R=e.agentId.trim(),r=e.clientKey.trim();if(!(!R||!r&&!a)){x("loading"),w("");try{const{init:s}=await le({isV2:L(R,e.runtime)});if(y)return;const v=s({agentId:R,...r?{clientKey:r}:{token:a,isOwner:!0,verbose:!0},mode:e.mode,openMode:e.openMode,orientation:e.orientation,position:e.position,lightMode:e.theme==="light",targetElement:e.mode==="full"?g.current:void 0,didSocketApiUrl:Q,didApiUrl:J,monitor:!1,track:!1,customMixpanelKey:Y,externalId:(i==null?void 0:i.sub)??"",mixpanelAdditionalProperties:{plan:i==null?void 0:i.planGroup},onError:E=>{y||(x("error"),w(E.message||"The agent preview reported an error."))}});l=v==null?void 0:v.destroy,x("running")}catch(s){if(y)return;x("error"),w(s instanceof Error?s.message:"Could not load the agent preview.")}}}return _(),()=>{y=!0,l==null||l()}},[a,e,n,i==null?void 0:i.planGroup,i==null?void 0:i.sub]),d(p,{spacing:2,children:[d(p,{direction:"row",alignItems:"center",justifyContent:"space-between",gap:2,children:[d(f,{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.":`${h.label} preview surface`})]}),t(G,{size:"small",color:o==="error"?"error":o==="running"?"success":"default",label:o==="loading"?"Loading":o==="running"?"Running":"Error"})]}),C&&t(K,{severity:"error",children:C}),t(fe,{children:t(be,{ref:g,previewTheme:e.theme,sx:{width:e.mode==="full"?h.width:"min(100%, 760px)",height:e.mode==="full"?h.height:460,maxWidth:e.mode==="fabio"?"100%":"none"},children:e.mode==="fabio"&&d(p,{alignItems:"center",justifyContent:"center",sx:{height:"100%",px:4,textAlign:"center"},spacing:1.5,children:[o==="loading"&&t(N,{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"?b("#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 m({label:e,value:n,options:a,disabled:i,onChange:g}){return d(te,{fullWidth:!0,size:"small",disabled:i,children:[t(X,{children:e}),t(ee,{label:e,value:n,onChange:o=>g(o.target.value),children:a.map(o=>t(Z,{value:o.value,children:o.label},o.value))})]})}const O="backoffice-agent-playground-id",we=S(f)(({theme:e})=>({padding:e.spacing(3),border:`1px solid ${e.palette.divider}`,borderRadius:24,background:`linear-gradient(135deg, ${b(e.palette.primary.main,.12)}, ${b(e.palette.background.paper,.94)} 52%)`})),ye=S("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 Re(){return{...V,agentId:window.localStorage.getItem(O)??""}}function Pe(){const e=ae("backoffice_is_enabled",!1),n=re(),[a,i]=c.useState(Re),[g,o]=c.useState(null),[x,C]=c.useState(0),[w,h]=c.useState(""),y=c.useMemo(()=>L(a.agentId,a.runtime)?"V2 runtime":"V1 runtime",[a.agentId,a.runtime]);if(!e)return t(ne,{to:T.Home,replace:!0});const l=(r,s)=>{i(v=>({...v,[r]:s}))},_=r=>{r.preventDefault();const s=a.agentId.trim();if(!s){h("Enter an agent ID to start the preview.");return}const v={...a,agentId:s,clientKey:a.clientKey.trim()};window.localStorage.setItem(O,s),h(""),o(v),C(E=>E+1)},R=()=>{const r={...V,agentId:a.agentId,clientKey:a.clientKey};i(r),o(null),h("")};return t(de,{maxWidth:!1,sx:{py:4,px:{xs:2,md:4},maxWidth:1800},children:d(p,{spacing:3,children:[d(we,{children:[d(p,{alignItems:"flex-start",spacing:2,children:[t(P,{startIcon:t(ce,{}),onClick:()=>n(T.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."})]}),d(f,{sx:{display:"grid",gridTemplateColumns:{xs:"1fr",lg:"340px minmax(0, 1fr)"}

1,alignItems:"start",gap:3},children:[t(ye,{onSubmit:_,children:d(p,{spacing:2.25,children:[d(f,{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(W,{label:"Agent ID",value:a.agentId,onChange:r=>l("agentId",r.target.value),placeholder:"agt_… or v2_agt_…",size:"small",required:!0,autoComplete:"off"}),t(W,{label:"Client key (optional)",value:a.clientKey,onChange:r=>l("clientKey",r.target.value),helperText:"Leave empty to use your Backoffice session.",size:"small",type:"password",autoComplete:"off"}),t(ie,{}),t(m,{label:"Display mode",value:a.mode,onChange:r=>l("mode",r),options:[{value:"fabio",label:"Fabio widget"},{value:"full",label:"Full embed"}]}),t(m,{label:"Fabio open mode",value:a.openMode,disabled:a.mode!=="fabio",onChange:r=>l("openMode",r),options:[{value:"compact",label:"Compact"},{value:"expanded",label:"Expanded"}]}),t(m,{label:"Fabio orientation",value:a.orientation,disabled:a.mode!=="fabio",onChange:r=>l("orientation",r),options:[{value:"horizontal",label:"Horizontal"},{value:"vertical",label:"Vertical"}]}),t(m,{label:"Fabio position",value:a.position,disabled:a.mode!=="fabio",onChange:r=>l("position",r),options:[{value:"right",label:"Right"},{value:"left",label:"Left"}]}),t(m,{label:"Preview viewport",value:a.viewport,disabled:a.mode!=="full",onChange:r=>l("viewport",r),options:Object.entries(z).map(([r,s])=>({value:r,label:s.label}))}),t(m,{label:"Theme",value:a.theme,onChange:r=>l("theme",r),options:[{value:"light",label:"Light"},{value:"dark",label:"Dark"}]}),t(m,{label:"Agent UI runtime",value:a.runtime,onChange:r=>l("runtime",r),options:[{value:"auto",label:`Auto · ${y}`},{value:"v1",label:"Force V1"},{value:"v2",label:"Force V2"}]}),w&&t(K,{severity:"error",children:w}),d(p,{direction:"row",spacing:1,children:[t(P,{type:"submit",variant:"contained",startIcon:t(B,{}),fullWidth:!0,children:"Run preview"}),t(P,{"aria-label":"Reset configuration",variant:"outlined",onClick:R,sx:{minWidth:44,px:1.25},children:t(me,{})})]})]})}),t(oe,{variant:"outlined",sx:{p:{xs:2,md:3},borderRadius:5,minWidth:0,boxShadow:r=>r.palette.mode==="dark"?"none":r.shadows[1]},children:g?t(xe,{config:g,runId:x}):d(p,{alignItems:"center",justifyContent:"center",textAlign:"center",sx:{minHeight:520,px:3},spacing:1.5,children:[t(f,{sx:{width:64,height:64,display:"grid",placeItems:"center",borderRadius:"50%",color:"primary.main",bgcolor:r=>b(r.palette.primary.main,.12)},children:t(B,{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{Pe as AgentPlaygroundPage};