TNT-Flo/sandbox-web-ide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: aichat and preview/terminal layout

Browse Source
This commit is contained in:
Akhileshrangani4 2024-10-14 13:51:17 -04:00
parent 1365fecb08
commit bfc687a3e6
1 changed files with 160 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/components/editor/index.tsx
View File

@ -970,7 +970,6 @@ export default function CodeEditor({
/> />
) : null} ) : null}
</div> </div>
{/* Main editor components */} {/* Main editor components */}
<Sidebar <Sidebar
sandboxData={sandboxData} sandboxData={sandboxData}
@ -984,14 +983,16 @@ export default function CodeEditor({
addNew={(name, type) => addNew(name, type, setFiles, sandboxData)} addNew={(name, type) => addNew(name, type, setFiles, sandboxData)}
deletingFolderId={deletingFolderId} deletingFolderId={deletingFolderId}
/> />
{/* Outer ResizablePanelGroup for main layout */}
{/* Shadcn resizeable panels: https://ui.shadcn.com/docs/components/resizable */} <ResizablePanelGroup direction="horizontal">
{/* Left side: Editor and Preview/Terminal */}
<ResizablePanel defaultSize={isAIChatOpen ? 80 : 100} minSize={50}>
<ResizablePanelGroup direction={isHorizontalLayout ? "vertical" : "horizontal"}> <ResizablePanelGroup direction={isHorizontalLayout ? "vertical" : "horizontal"}>
<ResizablePanel <ResizablePanel
className="p-2 flex flex-col" className="p-2 flex flex-col"
maxSize={80} maxSize={80}
minSize={30} minSize={30}
defaultSize={isHorizontalLayout ? 70 : 60} defaultSize={70}
ref={editorPanelRef} ref={editorPanelRef}
> >
<div className="h-10 w-full flex gap-2 overflow-auto tab-scroll"> <div className="h-10 w-full flex gap-2 overflow-auto tab-scroll">
@ -1082,18 +1083,20 @@ export default function CodeEditor({
</div> </div>
</ResizablePanel> </ResizablePanel>
<ResizableHandle /> <ResizableHandle />
<ResizablePanel defaultSize={isHorizontalLayout ? 30 : 30}> <ResizablePanel defaultSize={30}>
{isAIChatOpen ? ( <ResizablePanelGroup direction={
<AIChat /> isAIChatOpen && isHorizontalLayout ? "horizontal" :
) : ( isAIChatOpen ? "vertical" :
<ResizablePanelGroup direction={isHorizontalLayout ? "horizontal" : "vertical"}> isHorizontalLayout ? "horizontal" :
"vertical"
}>
<ResizablePanel <ResizablePanel
ref={previewPanelRef} ref={previewPanelRef}
defaultSize={4} defaultSize={isPreviewCollapsed ? 4 : 20}
collapsedSize={isHorizontalLayout ? 20 : 4}
minSize={25} minSize={25}
collapsible collapsedSize={isHorizontalLayout ? 20 : 4}
className="p-2 flex flex-col" className="p-2 flex flex-col"
collapsible
onCollapse={() => setIsPreviewCollapsed(true)} onCollapse={() => setIsPreviewCollapsed(true)}
onExpand={() => setIsPreviewCollapsed(false)} onExpand={() => setIsPreviewCollapsed(false)}
> >
@ -1134,9 +1137,19 @@ export default function CodeEditor({
)} )}
</ResizablePanel> </ResizablePanel>
</ResizablePanelGroup> </ResizablePanelGroup>
)}
</ResizablePanel> </ResizablePanel>
</ResizablePanelGroup> </ResizablePanelGroup>
</ResizablePanel>
{/* Right side: AIChat (if open) */}
{isAIChatOpen && (
<>
<ResizableHandle />
<ResizablePanel defaultSize={30} minSize={15}>
<AIChat />
</ResizablePanel>
</>
)}
</ResizablePanelGroup>
</PreviewProvider> </PreviewProvider>
</> </>
) )