Spaces:
Paused
Paused
File size: 9,829 Bytes
320828e |
1 |
(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[405],{8312:function(e,s,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/",function(){return t(6667)}])},6667:function(e,s,t){"use strict";t.r(s),t.d(s,{default:function(){return R}});var n=t(5893),a=t(7294),r=t(2192),i=t(4093),l=t(2645),o=t(6196),c=t(6678),d=t(4531),u=t(5152);const m=t.n(u)()(t.e(456).then(t.t.bind(t,9456,23)),{loadableGenerated:{webpack:()=>[9456]},ssr:!1}),x=e=>{let{logs:s}=e;const{theme:t}=(0,i.C)(c.FS),a=(0,i.T)();return(0,n.jsxs)("div",{className:"text-gray-300 relative h-full",children:[(0,n.jsx)("div",{className:"flex items-center justify-between px-3 h-9",children:(0,n.jsx)("button",{onClick:()=>a((0,o.M2)()),className:"editor-button h-5 mr-3",children:"Clear"})}),(0,n.jsx)("div",{className:"h-80 overflow-auto",children:(0,n.jsx)(m,{styles:{BASE_FONT_FAMILY:'"Rubik", sans-serif;',BASE_FONT_SIZE:14,BASE_BACKGROUND_COLOR:t.background,LOG_BORDER:t.border},logs:s,variant:"dark"})})]})};var v=a.memo(x);const h=()=>(0,n.jsxs)("div",{className:"boxes",children:[(0,n.jsxs)("div",{className:"box",children:[(0,n.jsx)("div",{}),(0,n.jsx)("div",{}),(0,n.jsx)("div",{}),(0,n.jsx)("div",{})]}),(0,n.jsxs)("div",{className:"box",children:[(0,n.jsx)("div",{}),(0,n.jsx)("div",{}),(0,n.jsx)("div",{}),(0,n.jsx)("div",{})]}),(0,n.jsxs)("div",{className:"box",children:[(0,n.jsx)("div",{}),(0,n.jsx)("div",{}),(0,n.jsx)("div",{}),(0,n.jsx)("div",{})]}),(0,n.jsxs)("div",{className:"box",children:[(0,n.jsx)("div",{}),(0,n.jsx)("div",{}),(0,n.jsx)("div",{}),(0,n.jsx)("div",{})]})]}),p=e=>{let{err:s}=e;return(0,n.jsx)("div",{className:"px-5 pt-10 text-red-600 tracking-wide absolute h-full w-full z-50 backdrop-filter backdrop-blur",children:s})},f=e=>{let{tabs:s,output:r,isCompiling:c,esbuildStatus:d}=e;var u,m;const x=(0,a.useRef)(),v=(0,i.T)(),f=(j=null===(u=s.css)||void 0===u?void 0:u.data,b=null===(m=s.html)||void 0===m?void 0:m.data,'\n <html lang="en">\n <head>\n <title>Codetree </title>\n <style>\n '.concat(j,'\n </style>\n </head>\n <body>\n <div id="root">\n ').concat(b,'\n </div>\n <script>\n //====== send massage to iframe\n window.onerror = function (err) {\n window.parent.postMessage(\n { source: "iframe", type: "iframe_error", message: err },\n "*"\n );\n };\n\n window.onunhandledrejection = function (err) {\n window.parent.postMessage(\n { source: "iframe", type: "iframe_error", message: err.reason },\n "*"\n );\n };\n\n //====== listen to income message of parent\n window.onmessage = function (event) {\n try {\n eval(event.data);\n } catch (error) {\n throw error;\n }\n };\n <\/script>\n </body>\n</html>\n '));var j,b;return(0,a.useEffect)((()=>{window.onmessage=function(e){if(e.data&&"iframe"===e.data.source){let s={method:"error",id:Date.now(),data:["".concat(e.data.message)]};v((0,o.N4)(s))}},s.javascript&&d.isReady&&setTimeout((async()=>{v((0,l.gm)(s.javascript.data,s.javascript.entryPoints))}),50)}),[v,s,d.isReady]),(0,a.useEffect)((()=>{x.current.srcdoc=f,setTimeout((async()=>{var e,s,t;null===(t=x)||void 0===t||null===(s=t.current)||void 0===s||null===(e=s.contentWindow)||void 0===e||e.postMessage(r.code,"*")}),40)}),[f,r]),(0,n.jsxs)("div",{className:"iframe-container",children:[r.error?(0,n.jsx)(p,{err:r.error}):"",c?(0,n.jsx)("div",{className:"absolute h-full w-full bg-gray-50 z-40",children:(0,n.jsx)(h,{})}):"",(0,n.jsx)("iframe",{id:"super-iframe",sandbox:"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation",allow:"accelerometer; camera; encrypted-media; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write",scrolling:"auto",frameBorder:"0",ref:x,title:"previewWindow",srcDoc:f,onLoad:async()=>{(0,(await Promise.all([t.e(456),t.e(552)]).then(t.t.bind(t,6582,23))).Hook)(x.current.contentWindow.console,(e=>{v((0,o.N4)(e))}),!1)}})]})};var j=a.memo(f),b=t(6083),g=t(9967),w=t(6578);const y=e=>{let{monacoLanguage:s,tab:t}=e;var r;const l=(0,i.T)(),{monacoInputValue:c,options:d}=(0,i.C)(o.UT),{onChange:u,onMount:m,code:x}=(0,w.I)();return(0,a.useEffect)((()=>{var e;x&&(null===(e=x)||void 0===e?void 0:e.length)>=1&&l((0,o.CH)({type:t,content:x}))}),[x,l,t]),(0,n.jsx)(g.ZP,{onChange:u,onMount:m,language:s,theme:"vs-dark",options:d,className:"h-full",value:(null===(r=c.tabs[t])||void 0===r?void 0:r.data)||""})},N=e=>{let{editorValue:s}=e;const[t,r]=(0,a.useState)(s);(0,a.useEffect)((()=>{r(s)}),[s]);const i=Object.entries(t.tabs).map(((e,s)=>(0,n.jsx)(b.J,{tab:(0,n.jsx)("div",{children:e[1].title}),children:(0,n.jsx)(y,{tab:e[0],monacoLanguage:e[1].monacoLanguage})},s)));return(0,n.jsx)(b.Z,{className:"editor-input-tabs",tabPosition:"top",tabBarGutter:16,defaultActiveKey:"javascript",children:i})};var C=a.memo(N),k=t(1686);var E=()=>{const{logs:e}=(0,i.C)(o.UT),{isCompiling:s}=(0,i.C)(l.eX),t=(0,i.T)();return(0,n.jsxs)("div",{style:{height:"2rem"},className:"h-full w-full flex items-center justify-between bg-tree-hard border-t-2 border-black text-gray-300 pl-5 pb-0.5 flex-shrink-0 z-50",children:[(0,n.jsx)("div",{className:"flex items-center",children:s&&(0,n.jsx)("div",{className:"ml-10",children:(0,n.jsx)("span",{className:"loader --1"})})}),(0,n.jsxs)("div",{className:"flex justify-center items-center",children:[(0,n.jsx)("div",{onClick:()=>t((0,o.sU)()),className:"flex items-center cursor-pointer text-gray-400",children:(0,n.jsx)(k.bge,{size:20})}),(0,n.jsx)("div",{className:"ml-2 w-6",children:e.length>0&&(0,n.jsxs)("div",{className:"h-5 w-5 flex justify-center items-center",children:[(0,n.jsx)("div",{className:"absolute p-1.5 bg-teal-400 rounded-full animate-ping"}),(0,n.jsx)("div",{className:"absolute p-1 bg-teal-400 border-white rounded-full"})]})})]})]})},_=t(524);var S=e=>{let{panelA:s,panelB:t,panelC:a,lastPanelVisibility:r}=e;return(0,n.jsx)("div",{style:{height:"calc(100vh - 8rem)"},children:(0,n.jsxs)(_.oL,{children:[(0,n.jsx)(_.oL.Pane,{children:s}),(0,n.jsxs)(_.oL,{onVisibleChange:function(){},vertical:!0,children:[(0,n.jsx)(_.oL.Pane,{priority:"HIGH",preferredSize:"70%",visible:!0,children:t}),(0,n.jsx)(_.oL.Pane,{preferredSize:"30%",priority:"LOW",snap:!0,visible:r,children:a})]})]})})};const L=e=>{let{className:s}=e;return(0,n.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",fill:"none",className:s,strokeWidth:"2",children:(0,n.jsx)("path",{d:"M.5 1.163A1 1 0 0 1 1.97.28l12.868 6.837a1 1 0 0 1 0 1.766L1.969 15.72A1 1 0 0 1 .5 14.836V10.33a1 1 0 0 1 .816-.983L8.5 8 1.316 6.653A1 1 0 0 1 .5 5.67V1.163Z",fill:"currentColor"})})};var T=t(5299);var P=()=>{var e;const s=(0,i.T)(),t=(0,a.useRef)(null),u=(0,a.useRef)(null),{theme:m}=(0,i.C)(c.FS),{esbuildStatus:x,isCompiling:h,output:p}=(0,i.C)(l.eX),{logs:f,editorValue:b,isLogTabOpen:g}=(0,i.C)(o.UT),[w,y]=(0,a.useState)(""),[N,k]=(0,a.useState)(w),_=e=>e&&e.length>10&&e.includes("\n");(0,a.useEffect)((()=>{const e=setInterval((()=>{_(w)&&w!==N&&(s((0,o.CH)({type:"javascript",content:w})),k(w))}),2e3);return()=>{clearInterval(e)}}),[w,N,s]);const{messages:P,input:A,setInput:R,handleSubmit:O}=(0,r.R)({onError:e=>{console.error(e)}});return(0,a.useEffect)((()=>{x.isReady||s((0,l.kC)())}),[s,x]),(0,a.useEffect)((()=>{s((0,d.Ib)(d.oV.TEMPLATE))}),[s]),(0,a.useEffect)((()=>{if(_(w)){const e={name:"React",description:"By codetree",public:!0,iconSrc:"/icons/reactjs.svg",tabs:{javascript:{title:"JS/JSX",entryPoints:"index.js",monacoLanguage:"javascript",data:w},html:{title:"index.html",entryPoints:"index.html",monacoLanguage:"html",data:""},css:{title:"main.css",entryPoints:"main.css",monacoLanguage:"css",data:""}}};s((0,o.Vi)(e))}}),[w,s]),(0,n.jsxs)("div",{style:{background:m.background},children:[(0,n.jsxs)("div",{className:"flex flex-col",children:[(0,n.jsx)("div",{className:"px-4 pb-2 pt-3 shadow-lg sm:pb-3 sm:pt-4",children:(0,n.jsxs)("form",{ref:t,onSubmit:O,className:"relative w-full",children:[(0,n.jsx)("textarea",{ref:u,onChange:e=>R(e.target.value),placeholder:"Chat with GPT-4 and code blocks will automatically render in the editor! Codetree uses WebAssembly and Esbuild to compile in the browser.",onKeyDown:e=>{var s;"Enter"!==e.key||e.shiftKey||(null===(s=t.current)||void 0===s||s.requestSubmit(),e.preventDefault())},spellCheck:!1,className:"textarea",value:A}),(0,n.jsx)("button",{type:"submit",className:"absolute inset-y-0 right-3 my-auto flex h-8 w-8 items-center justify-center rounded-md transition-all",children:(0,n.jsx)(L,{className:"h-4 w-4"})})]})}),(0,n.jsx)("div",{className:"flex flex-col items-start space-y-4 overflow-y-auto max-h-[20vh]",children:null===(e=P)||void 0===e?void 0:e.map(((e,s)=>(0,n.jsx)("p",{className:"messages-text",children:(0,n.jsx)(T.D,{className:"prose mt-1 w-full break-words prose-p:leading-relaxed",components:{a:e=>(0,n.jsx)("a",{...e,target:"_blank",rel:"noopener noreferrer"}),code:e=>{let{node:s,...t}=e;const n=t.children[0]||"";return y(n),null}},children:e.content})},s)))})]}),(0,n.jsx)(S,{panelA:(0,n.jsx)(C,{editorValue:b}),panelB:(0,n.jsx)(j,{tabs:b.tabs,output:p,isCompiling:h,esbuildStatus:x}),panelC:(0,n.jsx)(v,{logs:f}),lastPanelVisibility:g}),(0,n.jsx)(E,{})]})};const A=()=>{(0,i.T)();const{theme:e}=(0,i.C)(c.FS);return(0,n.jsx)("div",{style:{height:"3rem",background:e.background},className:"flex items-center pl-5 pr-12 justify-between",children:(0,n.jsx)("div",{children:(0,n.jsx)("div",{className:"text-2xl font-medium text-gray-200",children:"Codetree AI"})})})};var R=()=>(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(A,{}),(0,n.jsx)(P,{})]})}},function(e){e.O(0,[493,774,888,179],(function(){return s=8312,e(e.s=s);var s}));var s=e.O();_N_E=s}]); |