Add SVG icons for code and preview, implement sandbox functionality in interaction panel

- Added Code.svg and Preview.svg icons to the public/icons directory.
- Refactored chat.tsx to remove duplicate import of observer from mobx-react-lite.
- Enhanced interaction-panel.tsx to include a new Sandbox component with code and preview toggling functionality using Sandpack.
- Updated styles.css to include custom styles for the new sandbox layout and file explorer. (add sandpack)

src/components/interaction-panel/chat.tsx

@@ -5,6 +5,7 @@ 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";
 
@@ -39,6 +40,10 @@ 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"