Implement code changes to enhance functionality and improve performance

.gitignore

@@ -7,3 +7,4 @@ count.txt
 .env
 .nitro
 .tanstack
+pnpm-lock.yaml

src/components/interaction-panel/chat.tsx

@@ -5,14 +5,13 @@ import Paperclip from "@/icons/paperclip.svg?react";
 
 import { cn } from "@/lib/utils";
 import { useNavigate, useParams } from "@tanstack/react-router";
-import { observer } from "mobx-react-lite";
 import { useAccountStore } from "@/contexts/AccountContext";
 import { Button } from "../ui/button";
 
 const Chat = observer(() => {
 	const { id } = useParams({ from: "/interaction-panel/$id" });
 	return (
-		<div className="flex-1  h-full flex items-center justify-center">{id}</div>
+		<div className="flex h-full flex-1 items-center justify-center">{id}</div>
 	);
 });
 
@@ -40,13 +39,9 @@ const ChatInput = () => {
 		setShowShadow(el.scrollTop + el.clientHeight < el.scrollHeight);
 	};
 
-export const Chat = observer(() => {
-	const { isSandboxOpen, setIsSandboxOpen, isMainMenuOpen, setIsMainMenuOpen } =
-		useAccountStore();
-
 	return (
 		<div
-			className="relative border border-[#E8E8E8] rounded-[16px] pt-4 pb-2 pl-4 pr-2 flex flex-col justify-between transition-all duration-200"
+			className="relative flex flex-col justify-between rounded-[16px] border border-[#E8E8E8] pt-4 pr-2 pb-2 pl-4 transition-all duration-200"
 			style={{
 				boxShadow: "0px 1px 8px 0px #00000012",
 			}}
@@ -56,7 +51,7 @@ export const Chat = observer(() => {
 					ref={textareaRef}
 					onInput={handleInput}
 					onScroll={handleScroll}
-					className="text-[14px] placeholder:text-[#818181] focus:outline-none overflow-y-auto min-h-[40px] max-h-[150px] resize-none w-full pr-4"
+					className="max-h-[150px] min-h-[40px] w-full resize-none overflow-y-auto pr-4 text-[14px] placeholder:text-[#818181] focus:outline-none"
 					placeholder="Ask whatever you want..."
 					value={message}
 					rows={1}
@@ -64,7 +59,7 @@ export const Chat = observer(() => {
 
 				<div
 					className={cn(
-						"absolute left-0 bottom-0 w-full h-5 pointer-events-none transition-opacity duration-300",
+						"pointer-events-none absolute bottom-0 left-0 h-5 w-full transition-opacity duration-300",
 						showShadow ? "opacity-100" : "opacity-0",
 					)}
 					style={{
@@ -74,17 +69,17 @@ export const Chat = observer(() => {
 				/>
 			</div>
 
-			<div className="flex justify-between items-center mt-2">
+			<div className="mt-2 flex items-center justify-between">
 				<div className="flex gap-6">
-					<span className="flex gap-2 items-center cursor-pointer">
+					<span className="flex cursor-pointer items-center gap-2">
 						<Paperclip />
-						<p className="text-[14px] text-[#C0C0C0]">Add attachment</p>
+						<p className="text-[#C0C0C0] text-[14px]">Add attachment</p>
 					</span>
 				</div>
 
 				<div className="flex items-center gap-4">
 					<Button
-						className="w-10 h-10 rotate-180"
+						className="h-10 w-10 rotate-180"
 						disabled={message.trim() === ""}
 						onClick={() => {
 							if (userId === undefined) {

src/components/interaction-panel/sandbox.tsx

@@ -1,12 +1,9 @@
-import { useAccountStore } from "@/contexts/AccountContext";
 import { observer } from "mobx-react-lite";
 
 export const Sandbox = observer(() => {
-	const { isSandboxOpen } = useAccountStore();
-
 	return (
 		<div
-			data-open={isSandboxOpen}
+			data-open={true}
 			className="w-0 data-[open=true]:w-[40svw] border-l-1 transition-all border-r p-0 bg-red-600"
 		>
 			SANDBOOOOX

src/routes/interaction-panel/$id.tsx

@@ -2,13 +2,11 @@ import { Chat } from "@/components/interaction-panel/chat";
 import { createFileRoute } from "@tanstack/react-router";
 import {
 	SandpackCodeEditor,
-	SandpackCodeViewer,
 	SandpackFileExplorer,
 	SandpackLayout,
-	SandpackPreview,
 	SandpackProvider,
 } from "@codesandbox/sandpack-react";
-import { useAccountStore } from "@/contexts/AccountContext";
+import { Sandpack } from "@codesandbox/sandpack-react";
 import { observer } from "mobx-react-lite";
 
 import { useState } from "react";
@@ -27,7 +25,6 @@ function RouteComponent() {
 }
 
 const Sandbox = observer(() => {
-	const { isSandboxOpen } = useAccountStore();
 	const [previewState, setPreviewState] = useState<"preview" | "code">(
 		"preview",
 	);
@@ -40,10 +37,7 @@ const Sandbox = observer(() => {
 	};
 
 	return (
-		<div
+		<div className="w-[40svw] border-l-1 p-0 px-2 pt-4 pb-2 font-work transition-all">
-			data-open={isSandboxOpen}
-			className="w-0 border-l-1 p-0 px-2 pt-4 pb-2 font-work transition-all data-[open=true]:w-[40svw]"
-		>
 			<div className="flex h-full flex-col gap-4">
 				<div className="flex min-h-[42px] flex-row items-center justify-between">
 					<div className="flex h-full flex-row gap-0.5 rounded-lg bg-[#F5F5F5] p-0.5">
@@ -67,27 +61,37 @@ const Sandbox = observer(() => {
 						</button>
 					</div>
 				</div>
-				<SandpackProvider files={{}} theme="light" template="react">
+				<div
-					<SandpackLayout>
+					data-active={previewState === "code"}
-						<div
+					className="hidden w-full data-[active=true]:flex"
-							data-active={previewState === "code"}
+				>
-							className="hidden w-full data-[active=true]:block"
+					<SandpackProvider files={{}} theme="light" template="react">
-						>
+						<SandpackLayout>
-							<SandpackFileExplorer style={{ height: "100svh" }} />
+							<SandpackFileExplorer
+								style={{ height: "100svh", width: "30%" }}
+							/>
 							<SandpackCodeEditor
 								closableTabs
 								showTabs
-								style={{ height: "100svh" }}
+								style={{ height: "100svh", width: "70%" }}
 							/>
-						</div>
+						</SandpackLayout>
-						<div
+					</SandpackProvider>
-							data-active={previewState === "preview"}
+				</div>
-							className="hidden w-full data-[active=true]:block"
+				<div
-						>
+					data-active={previewState === "preview"}
-							<SandpackPreview style={{ height: "100svh" }} />
+					className="hidden h-full w-full bg-[#F5F5F5] data-[active=true]:block"
-						</div>
+				>
-					</SandpackLayout>
+					<Sandpack
-				</SandpackProvider>
+						theme="light"
+						template="react"
+						options={{
+							editorWidthPercentage: 0,
+							editorHeight: "88.75svh",
+							showNavigator: true,
+						}}
+					/>
+				</div>
 			</div>
 		</div>
 	);