CodeFox-Repo · Sma1lboy · Feb 26, 2025 · Feb 26, 2025 · Feb 26, 2025 · Feb 26, 2025
diff --git a/frontend/src/app/(main)/chat/layout.tsx b/frontend/src/app/(main)/chat/layout.tsx
diff --git a/frontend/src/app/(main)/chat/page.tsx b/frontend/src/app/(main)/chat/page.tsx
diff --git a/frontend/src/app/(main)/layout.tsx b/frontend/src/app/(main)/layout.tsx
diff --git a/frontend/src/app/chat/layout.tsx b/frontend/src/app/chat/layout.tsx
@@ -0,0 +1,9 @@
+import ChatLayout from '../../components/chat/chat-layout';
+
+export default function Layout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return <ChatLayout>{children}</ChatLayout>;
+}
diff --git a/frontend/src/app/chat/page.tsx b/frontend/src/app/chat/page.tsx
@@ -0,0 +1,5 @@
+import Chat from '@/components/chat';
+
+export default function Page() {
+  return <Chat />;
+}
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -1,15 +1,21 @@
-import type { Metadata } from 'next';
+import type { Metadata, Viewport } from 'next';
 import { Inter } from 'next/font/google';
 import './globals.css';
 import { BaseProviders } from '@/providers/BaseProvider';
 
 const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
-  title: 'Codefox',
+  title: 'Codefox - The best dev project generator',
   description: 'The best dev project generator',
 };
 
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+};
 export default function RootLayout({
   children,
 }: {
@@ -18,7 +24,11 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body className={inter.className}>
-        <BaseProviders>{children}</BaseProviders>
+        <BaseProviders>
+          <div className="min-h-screen w-full bg-gray-50 dark:bg-gray-900 transition-colors">
+            {children}
+          </div>
+        </BaseProviders>
       </body>
     </html>
   );

diff --git a/frontend/src/app/(main)/page.tsx → frontend/src/app/page.tsx b/frontend/src/app/(main)/page.tsx → frontend/src/app/page.tsx
diff --git a/frontend/src/components/chat/chat-bottombar.tsx b/frontend/src/components/chat/chat-bottombar.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useEffect } from 'react';
-import { ChatProps } from './chat';
+import { ChatProps } from './chat-panel';
 import Link from 'next/link';
 import { cn } from '@/lib/utils';
 import { Button, buttonVariants } from '../ui/button';

diff --git a/frontend/src/components/chat/chat-layout.tsx b/frontend/src/components/chat/chat-layout.tsx
@@ -0,0 +1,129 @@
+'use client';
+import React, { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';
+import { SidebarProvider } from '@/components/ui/sidebar';
+import { ChatSideBar } from '@/components/sidebar';
+
+import ProjectModal from '@/components/chat/project-modal';
+import { useQuery } from '@apollo/client';
+import { useChatList } from '@/hooks/useChatList';
+import { GET_USER_PROJECTS } from '@/graphql/request';
+import { useAuthContext } from '@/providers/AuthProvider';
+import { ProjectProvider } from './code-engine/project-context';
+
+export default function ChatLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const { isAuthorized, isChecking } = useAuthContext();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+
+  const defaultLayout = [25, 75]; // [sidebar, main]
+  const navCollapsedSize = 5;
+
+  const { refetch } = useQuery(GET_USER_PROJECTS);
+  const {
+    chats,
+    loading,
+    error,
+    chatListUpdated,
+    setChatListUpdated,
+    refetchChats,
+  } = useChatList();
+
+  const router = useRouter();
+
+  useEffect(() => {
+    if (isChecking || !isAuthorized) {
+      router.push('/');
+    }
+  }, [isChecking, isAuthorized, router]);
+
+  useEffect(() => {
+    document.cookie = `react-resizable-panels:collapsed=${JSON.stringify(
+      isCollapsed
+    )}; path=/; max-age=604800`;
+  }, [isCollapsed]);
+
+  useEffect(() => {
+    const checkScreenWidth = () => {
+      setIsMobile(window.innerWidth <= 1023);
+    };
+    checkScreenWidth();
+    window.addEventListener('resize', checkScreenWidth);
+    return () => window.removeEventListener('resize', checkScreenWidth);
+  }, []);
+
+  if (isChecking) {
+    return (
+      <div className="flex h-screen items-center justify-center">
+        Loading...
+      </div>
+    );
+  }
+
+  if (!isAuthorized) {
+    return null;
+  }
+
+  return (
+    <main className="flex h-[calc(100dvh)] flex-col items-center">
+      <ResizablePanelGroup
+        direction="horizontal"
+        autoSaveId="main-layout"
+        onLayout={(sizes: number[]) => {
+          const sidebarSize = sizes[0];
+          const isNowCollapsed = sidebarSize < 10;
+          setIsCollapsed(isNowCollapsed);
+
+          if (isNowCollapsed && sizes.length > 1) {
+            const newSizes = [navCollapsedSize, 100 - navCollapsedSize];
+            document.cookie = `react-resizable-panels:layout=${JSON.stringify(
+              newSizes
+            )}; path=/; max-age=604800`;
+            return newSizes;
+          }
+
+          document.cookie = `react-resizable-panels:layout=${JSON.stringify(
+            sizes
+          )}; path=/; max-age=604800`;
+          return sizes;
+        }}
+        className="h-screen items-stretch w-full"
+      >
+        <ProjectProvider>
+          <SidebarProvider>
+            <ProjectModal
+              isOpen={isModalOpen}
+              onClose={() => setIsModalOpen(false)}
+              refetchProjects={refetch}
+            />
+            <ChatSideBar
+              setIsModalOpen={setIsModalOpen}
+              isCollapsed={isCollapsed}
+              setIsCollapsed={setIsCollapsed}
+              isMobile={isMobile}
+              chatListUpdated={chatListUpdated}
+              setChatListUpdated={setChatListUpdated}
+              chats={chats}
+              loading={loading}
+              error={error}
+              onRefetch={refetchChats}
+            />
+
+            <ResizablePanel
+              className="h-full w-full flex justify-center"
+              defaultSize={defaultLayout[1]}
+            >
+              {children}
+            </ResizablePanel>
+          </SidebarProvider>
+        </ProjectProvider>
+      </ResizablePanelGroup>
+    </main>
+  );
+}
diff --git a/frontend/src/components/chat/chat-list.tsx b/frontend/src/components/chat/chat-list.tsx
@@ -7,7 +7,7 @@ import { Avatar, AvatarFallback, AvatarImage, SmallAvatar } from '../ui/avatar';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import CodeDisplayBlock from '../code-display-block';
-import { Message } from '../types';
+import { Message } from '../../const/MessageType';
 import { Button } from '../ui/button';
 import { Pencil } from 'lucide-react';
 import { useAuth } from '@/hooks/useAuth';

diff --git a/frontend/src/components/chat/chat.tsx → frontend/src/components/chat/chat-panel.tsx b/frontend/src/components/chat/chat.tsx → frontend/src/components/chat/chat-panel.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ChatBottombar from './chat-bottombar';
 import ChatTopbar from './chat-topbar';
-import { ChatRequestOptions, Message } from '../types';
+import { ChatRequestOptions, Message } from '../../const/MessageType';
 import ChatList from './chat-list';
 
 export interface ChatProps {

diff --git a/...rc/components/code-engine/code-engine.tsx → ...mponents/chat/code-engine/code-engine.tsx b/...rc/components/code-engine/code-engine.tsx → ...mponents/chat/code-engine/code-engine.tsx
diff --git a/...ents/code-engine/file-explorer-button.tsx → ...chat/code-engine/file-explorer-button.tsx b/...ents/code-engine/file-explorer-button.tsx → ...chat/code-engine/file-explorer-button.tsx
diff --git a/...components/code-engine/file-structure.tsx → ...nents/chat/code-engine/file-structure.tsx b/...components/code-engine/file-structure.tsx → ...nents/chat/code-engine/file-structure.tsx
diff --git a/...omponents/code-engine/project-context.tsx → ...ents/chat/code-engine/project-context.tsx b/...omponents/code-engine/project-context.tsx → ...ents/chat/code-engine/project-context.tsx
@@ -8,13 +8,13 @@ import React, {
   useEffect,
 } from 'react';
 import { useLazyQuery, useMutation, useQuery } from '@apollo/client';
-import { Project } from '../project-modal';
 import { useAuth } from '@/hooks/useAuth';
 import {
   CREATE_PROJECT,
   GET_CHAT_DETAILS,
   GET_USER_PROJECTS,
 } from '@/graphql/request';
+import { Project } from '../project-modal';
 
 export interface ProjectContextType {
   projects: Project[];

diff --git a/...d/src/components/code-engine/web-view.tsx → .../components/chat/code-engine/web-view.tsx b/...d/src/components/code-engine/web-view.tsx → .../components/chat/code-engine/web-view.tsx
diff --git a/frontend/src/app/(main)/chat/Home.tsx → frontend/src/components/chat/index.tsx b/frontend/src/app/(main)/chat/Home.tsx → frontend/src/components/chat/index.tsx
@@ -6,18 +6,18 @@ import {
   ResizablePanel,
   ResizableHandle,
 } from '@/components/ui/resizable';
-import { CodeEngine } from '@/components/code-engine/code-engine';
 import { GET_CHAT_HISTORY } from '@/graphql/request';
 import { useQuery } from '@apollo/client';
 import { toast } from 'sonner';
-import { EventEnum } from '@/components/enum';
-import { useModels } from '../../../hooks/useModels';
-import { useChatList } from '../../../hooks/useChatList';
-import { useChatStream } from '../../../hooks/useChatStream';
+import { EventEnum } from '@/const/EventEnum';
 import EditUsernameForm from '@/components/edit-username-form';
-import ChatContent from '@/components/chat/chat';
+import ChatContent from '@/components/chat/chat-panel';
+import { useModels } from '@/hooks/useModels';
+import { useChatList } from '@/hooks/useChatList';
+import { useChatStream } from '@/hooks/useChatStream';
+import { CodeEngine } from './code-engine/code-engine';
 
-export default function Home() {
+export default function Chat() {
   // Initialize state, refs, and custom hooks
   const urlParams = new URLSearchParams(window.location.search);
   const [chatId, setChatId] = useState('');

diff --git a/frontend/src/app/(main)/chat/main-layout.tsx → frontend/src/components/chat/main-layout.tsx b/frontend/src/app/(main)/chat/main-layout.tsx → frontend/src/components/chat/main-layout.tsx
@@ -5,14 +5,15 @@ import { ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';
 import { SidebarProvider } from '@/components/ui/sidebar';
 import { ChatSideBar } from '@/components/sidebar';
 
-import ProjectModal from '@/components/project-modal';
+import ProjectModal from '@/components/chat/project-modal';
 import { useQuery } from '@apollo/client';
-import { ProjectProvider } from '@/components/code-engine/project-context';
+
 import { useChatList } from '@/hooks/useChatList';
 import { GET_USER_PROJECTS } from '@/graphql/request';
 import { useAuthContext } from '@/providers/AuthProvider';
+import { ProjectProvider } from './code-engine/project-context';
 
-export default function MainLayout({
+export default function ChatLayout({
   children,
 }: {
   children: React.ReactNode;

diff --git a/frontend/src/components/project-modal.tsx → ...end/src/components/chat/project-modal.tsx b/frontend/src/components/project-modal.tsx → ...end/src/components/chat/project-modal.tsx
diff --git a/frontend/src/components/file-sidebar.tsx b/frontend/src/components/file-sidebar.tsx
@@ -8,7 +8,7 @@ import SidebarSkeleton from './sidebar-skeleton';
 import UserSettings from './user-settings';
 import { SideBarItem } from './sidebar-item';
 import { Chat } from '@/graphql/type';
-import { EventEnum } from './enum';
+import { EventEnum } from '../const/EventEnum';
 import {
   SidebarContent,
   SidebarGroup,

diff --git a/frontend/src/components/sidebar-item.tsx b/frontend/src/components/sidebar-item.tsx
@@ -22,7 +22,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'sonner';
-import { EventEnum } from './enum';
+import { EventEnum } from '../const/EventEnum';
 
 interface SideBarItemProps {
   id: string;

diff --git a/frontend/src/components/sidebar.tsx b/frontend/src/components/sidebar.tsx
@@ -7,7 +7,7 @@ import SidebarSkeleton from './sidebar-skeleton';
 import UserSettings from './user-settings';
 import { SideBarItem } from './sidebar-item';
 import { Chat } from '@/graphql/type';
-import { EventEnum } from './enum';
+import { EventEnum } from '../const/EventEnum';
 import {
   SidebarContent,
   SidebarGroup,
@@ -18,7 +18,7 @@ import {
   SidebarFooter,
 } from './ui/sidebar';
 import { cn } from '@/lib/utils';
-import { ProjectContext } from './code-engine/project-context';
+import { ProjectContext } from './chat/code-engine/project-context';
 
 interface SidebarProps {
   setIsModalOpen: (value: boolean) => void; // Parent setter to update collapse state

diff --git a/frontend/src/components/user-settings.tsx b/frontend/src/components/user-settings.tsx
@@ -18,7 +18,7 @@ import { Button } from '@/components/ui/button';
 import { useAuth } from '@/hooks/useAuth';
 import { useRouter } from 'next/navigation';
 import { useMemo, useState, memo } from 'react';
-import { EventEnum } from './enum';
+import { EventEnum } from '../const/EventEnum';
 
 interface UserSettingsProps {
   isSimple: boolean;

diff --git a/frontend/src/components/enum.ts → frontend/src/const/EventEnum.ts b/frontend/src/components/enum.ts → frontend/src/const/EventEnum.ts
diff --git a/frontend/src/components/types.ts → frontend/src/const/MessageType.ts b/frontend/src/components/types.ts → frontend/src/const/MessageType.ts
diff --git a/frontend/src/hooks/useChatStream.ts b/frontend/src/hooks/useChatStream.ts
@@ -1,7 +1,7 @@
 import { useState, useCallback } from 'react';
 import { useMutation, useSubscription } from '@apollo/client';
 import { CHAT_STREAM, CREATE_CHAT, TRIGGER_CHAT } from '@/graphql/request';
-import { Message } from '@/components/types';
+import { Message } from '@/const/MessageType';
 import { toast } from 'sonner';
 import { useRouter } from 'next/navigation';
 enum StreamStatus {