https://cocoding.ai/_next/static/chunks/4335.30b335a2a3a58f10.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4335],{35169:(e,s,t)=>{t.d(s,{A:()=>a});let a=(0,t(19946).A)("arrow-left",[["path",{d:"m12 19-7-7 7-7",key:"1l729n"}],["path",{d:"M19 12H5",key:"x3x0zl"}]])},74335:(e,s,t)=>{t.r(s),t.d(s,{PreviewStatus:()=>f});var a=t(95155),l=t(17652),r=t(55028),i=t(12115),n=t(51591),c=t(42355),m=t(35169),d=t(35695),o=t(10357),x=t(65799),p=t(25055),u=t(43329);let h=e=>{let{isOpen:s,onClose:t}=e,{session_id:r}=(0,d.useParams)(),h=(0,l.c3)("public.editor_build_instructions"),{setEditorStore:b}=(0,p.Yd)(),{sessions:f}=(0,p.q_)(["sessions"]),g=(0,i.useMemo)(()=>f[r]||[],[r,f]),j=(0,i.useMemo)(()=>(0,n.E4)(g),[g]),y=(0,i.useMemo)(()=>j[0],[j]),[N,w]=(0,i.useState)(null),[v,k]=(0,i.useState)([]),C=e=>{w(e),k(e.commands.map(e=>({command:e,executed:!1})))},_=()=>{w(null),k([]),t()},S=e=>{let s=v[e];(0,n.Pt)(u.I.SEND_COMMAND,{command:"cd /".concat(null==y?void 0:y.name," && ").concat(s.command),terminal_id:1});let t=[...v];t[e]={...s,executed:!0},k(t),e===v.length-1&&(b({mode:"code"}),setTimeout(()=>{_()},1e3))};return(0,a.jsx)(x.AnimatePresence,{children:s&&(0,a.jsx)(x.m.div,{className:"fixed inset-0 z-40 bg-black/50 flex items-center justify-center p-1 sm:p-4",initial:{opacity:0}

1,animate:{opacity:1},exit:{opacity:0},children:(0,a.jsxs)(x.m.div,{className:"bg-white border border-purple-300/50 rounded-md w-full sm:w-11/12 max-w-3xl h-full sm:h-auto sm:max-h-[90vh] shadow-lg flex flex-col",initial:{scale:.9,y:20},animate:{scale:1,y:0},exit:{scale:.9,y:20},transition:{type:"spring",damping:25,stiffness:300},children:[(0,a.jsx)("div",{className:"px-4 py-3 sm:px-5 sm:py-4 border-b border-gray-200 flex-shrink-0",children:(0,a.jsxs)("div",{className:"flex justify-between items-center",children:[(0,a.jsx)("button",{type:"button",onClick:N?()=>{w(null),k([])}:_,className:"text-midnight-900 hover:text-purple-600 transition-colors flex items-center gap-2","aria-label":N?"Back to framework selection":"Close",children:N?(0,a.jsx)(c.A,{className:"size-5 stroke-[2px]"}):(0,a.jsx)(m.A,{className:"size-5 stroke-[2px]"})}),(0,a.jsx)("h3",{className:"font-semibold text-sm sm:text-base text-midnight-950 truncate px-2",children:N?"".concat(N.name," Build Instructions"):h("title",{default:"Select Framework"})}),(0,a.jsx)("button",{type:"button",onClick:_,className:"text-midnight-900 hover:text-purple-600 transition-colors","aria-label":"Close modal",children:"✕"})]})}),(0,a.jsx)("div",{className:"px-4 py-4 sm:px-5 sm:py-5 flex flex-col gap-4 sm:gap-5 flex-1 min-h-0 overflow-y-auto",children:N?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)("div",{className:"flex items-center gap-2 sm:gap-3 p-2.5 sm:p-3 bg-purple-50 rounded-lg",children:[(0,a.jsx)("img",{src:N.icon,alt:N.name,className:"w-6 h-6 sm:w-8 sm:h-8 flex-shrink-0"}),(0,a.jsxs)("div",{className:"min-w-0 flex-1",children:[(0,a.jsx)("h4",{className:"font-medium text-xs sm:text-sm text-midnight-950 truncate",children:N.name}),(0,a.jsx)("p",{className:"text-xs text-gray-500 truncate sm:text-wrap",children:N.description})]})]}),(0,a.jsxs)("div",{className:"space-y-3",children:[(0,a.jsx)("p",{className:"text-gray-500 text-sm",children:"These commands will execute automatically to build and run your application:"}),(0,a.jsx)("div",{className:"p-2.5 sm:p-3 bg-amber-50 border border-amber-200 rounded-md",children:(0,a.jsxs)("p",{className:"text-xs text-amber-800",children:[(0,a.jsx)("strong",{children:"Important:"})," If automatic execution fails, you may need to run these commands manually in your terminal. Some projects use different script names in their package.json."]})})]}),(0,a.jsx)("div",{className:"flex flex-col gap-4",children:v.map((e,s)=>(0,a.jsxs)(x.m.div,{className:"flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4",initial:{opacity:0,x:-10},animate:{opacity:1,x:0},transition:{delay:.1*s},children:[(0,a.jsxs)("div",{className:"flex items-center gap-2 flex-1 min-w-0",children:[(0,a.jsx)("span",{className:"flex items-center justify-center rounded-full bg-purple-100 w-2 h-2 flex-shrink-0"}),(0,a.jsx)("code",{className:"font-ibm-plex-mono text-xs text-black break-all overflow-hidden",children:e.command})]}),(0,a.jsxs)(x.m.button,{onClick:()=>S(s),disabled:e.executed,className:(0,n.cn)("flex items-center justify-center px-2.5 py-1.5 text-xs rounded-sm border shadow-xs whitespace-nowrap flex-shrink-0",e.executed?"bg-gray-100 text-gray-400 border-gray-300 cursor-not-allowed":"bg-white text-black border-purple-300/50 hover:bg-purple-50"),children:[(0,a.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"14",viewBox:"0 0 24 24",fill:"currentColor",className:"mr-1 sm:mr-1.5 text-ash-300",children:(0,a.jsx)("polygon",{points:"5 3 19 12 5 21 5 3"})}),(0,a.jsx)("span",{className:"text-xs",children:h("execute",{default:"Run"})})]})]},s))})]}):(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)("div",{className:"space-y-3",children:[(0,a.jsx)("p",{className:"text-gray-500 text-sm",children:"Choose your application framework to see the appropriate build commands:"}),(0,a.jsx)("div",{className:"p-2.5 sm:p-3 bg-blue-50 border border-blue-200 rounded-md",children:(0,a.jsxs)("p",{className:"text-xs text-blue-800",children:[(0,a.jsx)("strong",{children:"Note:"})," These commands will execute automatically, but some libraries may have different script names in package.json. Check your package.json scripts if needed and run commands manually if automatic execution fails."]})})]}),(0,a.jsx)("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-3",children:o.PI.map(e=>(0,a.jsxs)(x.m.button,{onClick:()=>C(e),className:"flex flex-col items-center gap-2 p-3 sm:p-4 border border-gray-200 rounded-lg hover:border-purple-300 hover:bg-purple-50 transition-colors text-left",children:[(0,a.jsx)("img",{src:e.icon,alt:e.name,className:"w-6 h-6 sm:w-8 sm:h-8"}),(0,a.jsxs)("div",{className:"text-center",children:[(0,a.jsx)("h4",{className:"font-medium text-xs sm:text-sm text-midnight-950",children:e.name}),(0,a.jsx)("p",{className:"text-xs text-gray-500 mt-1 hidden sm:block",children:e.description})]})]},e.id))})]})})]})})})},b=(0,r.default)(()=>t.e(6617).then(t.bind(t,66617)),{loadableGenerated:{webpack:()=>[66617]},loading:()=>(0,a.jsx)("div",{className:"h-full bg-white flex items-center justify-center",children:(0,a.jsxs)("div",{className:"flex flex-col items-center gap-4",children:[(0,a.jsx)("div",{className:"animate-spin rounded-full h-10 w-10 border-t-2 border-b-2 border-purple-900"}),(0,a.jsx)("p",{className:"text-gray-700",children:"Loading error state..."})]})}),ssr:!1}),f=e=>{let{status:s,errorMessage:t,previewUrl:r,onRefresh:c,isFullScreen:m=!1,className:d,children:o}=e,x=(0,l.c3)("public.editor_preview"),[p,u]=(0,i.useState)(!1),f=(0,i.useCallback)(()=>{u(!0)},[]);if("loading"===s)return(0,a.jsx)("div",{className:(0,n.cn)("size-full bg-white flex flex-col items-center justify-center p-4 text-center",d),children:(0,a.jsxs)("div",{className:"flex flex-col items-center gap-4",children:[(0,a.jsx)("div",{className:"animate-spin rounded-full h-10 w-10 border-t-2 border-b-2 border-purple-900"}),(0,a.jsx)("p",{className:"text-gray-700",children:x("loading")})]})});if("error"===s){let e=t.includes("needs to be built"),s=e?x("build_error_message"):t;return(0,a.jsxs)("div",{className:(0,n.cn)("size-full bg-white grid place-items-center relative",d),children:[(0,a.jsx)(b,{type:e?"build":"preview",message:s,previewUrl:r,onPrimaryAction:e?f:c,onSecondaryAction:f,isFullScreen:m}),(0,a.jsx)(h,{isOpen:p,onClose:()=>u(!1)})]})}return(0,a.jsx)(a.Fragment,{children:o})}}}]);