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