Add ChatArea component to integrate ChatScreen and Sidebar with toggle functionality

src/pages/chatArea/index.tsx

@@ -0,0 +1,46 @@
+import { Box } from "@mui/material";
+import React, { useState } from "react";
+
+import ChatScreen from "./components/ChatScreen";
+import Sidebar from "./components/Sidebar";
+
+export default function ChatArea() {
+  const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(false);
+
+  const toggleSidebar = () => {
+    setIsSidebarOpen(!isSidebarOpen);
+  };
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        height: "100vh",
+        bgcolor: "#f9f9f9",
+        transition: "all 0.3s ease-in-out",
+      }}
+    >
+      <Box
+        sx={{
+          width: isSidebarOpen ? "250px" : "0",
+          overflow: "hidden",
+          transition: "width 0.3s ease-in-out",
+          bgcolor: "#ffffff",
+          borderRight: "1px solid #e0e0e0",
+        }}
+      >
+        <Sidebar isOpen={isSidebarOpen} toggleSidebar={toggleSidebar} />
+      </Box>
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          flexGrow: 1,
+          transition: "all 0.3s ease-in-out",
+        }}
+      >
+        <ChatScreen isOpen={isSidebarOpen} toggleSidebar={toggleSidebar} />
+      </Box>
+    </Box>
+  );
+}

src/pages/chatArea/interfaces/index.ts

@@ -0,0 +1,19 @@
+export interface IMessage {
+  text: string;
+  sender: "user" | "bot";
+}
+
+export interface IChatScreenProps {
+  isOpen: boolean;
+  toggleSidebar: () => void;
+}
+
+export interface ISidebarProps {
+  isOpen: boolean;
+  toggleSidebar: () => void;
+}
+
+export interface IChat {
+  id: number;
+  name: string;
+}