refactor(frontend): update sidebar components to use useRouter for na… (#184)

https://jam.dev/c/c3718687-e412-4189-a082-3f3a6687c6fb
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary by CodeRabbit

- **New Features**
- Streamlined sidebar navigation: deleting a chat now smoothly redirects
you to the home view.
- Enhanced chat selection behavior for more intuitive and responsive
transitions.
- Added functionality to navigate to a new URL after successfully
creating a project.

- **Refactor**
- Refined sidebar interactions to ensure consistent and seamless updates
during chat management.
- Improved type safety and internal logic within the ChatRow component.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: Sma1lboy

frontend/src/app/(main)/page.tsx

@@ -30,8 +30,9 @@ export default function HomePage() {
     if (!message.trim()) return;
 
     try {
-      await createProjectFromPrompt(message, isPublic, model);
+      const chatId = await createProjectFromPrompt(message, isPublic, model);
       promptFormRef.current.clearMessage();
+      router.push(`/chat?id=${chatId}`);
     } catch (error) {
       logger.error('Error creating project:', error);
     }

frontend/src/components/chat/code-engine/project-context.tsx

@@ -28,7 +28,7 @@ export interface ProjectContextType {
   setProjects: React.Dispatch<React.SetStateAction<Project[]>>;
   curProject: Project | undefined;
   setCurProject: React.Dispatch<React.SetStateAction<Project | undefined>>;
-  projectLoading: boolean; // 新增字段
+  projectLoading: boolean;
   filePath: string | null;
   setFilePath: React.Dispatch<React.SetStateAction<string | null>>;
   createNewProject: (projectName: string, description: string) => Promise<void>;
@@ -404,15 +404,6 @@ export function ProjectProvider({ children }: { children: ReactNode }) {
   const [createProject] = useMutation(CREATE_PROJECT, {
     onCompleted: (data) => {
       if (!isMounted.current) return;
-
-      // Navigate to chat page after project creation
-      if (data?.createProject?.id) {
-        toast.success('Project created successfully!');
-        router.push(`/chat?id=${data.createProject.id}`);
-
-        // Refresh the projects list
-        refreshProjects();
-      }
     },
     onError: (error) => {
       if (isMounted.current) {
@@ -723,8 +714,9 @@ export function ProjectProvider({ children }: { children: ReactNode }) {
             },
           },
         });
+        console.log('creatae a project result:', result);
 
-        return !!result.data?.createProject;
+        return result.data.id;
       } catch (error) {
         logger.error('Error creating project:', error);
         if (isMounted.current) {

frontend/src/components/sidebar-item.tsx

@@ -41,6 +41,7 @@ function SideBarItemComponent({
 }: SideBarItemProps) {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const router = useRouter();
 
   const isSelected = currentChatId === id;
   const variant = isSelected ? 'secondary' : 'ghost';
@@ -49,7 +50,7 @@ function SideBarItemComponent({
     onCompleted: () => {
       toast.success('Chat deleted successfully');
       if (isSelected) {
-        window.history.replaceState({}, '', '/');
+        router.push('/');
         const event = new Event(EventEnum.NEW_CHAT);
         window.dispatchEvent(event);
       }
@@ -77,9 +78,6 @@ function SideBarItemComponent({
 
   const handleChatClick = (e: React.MouseEvent) => {
     if (!(e.target as HTMLElement).closest('.dropdown-trigger')) {
-      window.history.replaceState({}, '', `/chat?id=${id}`);
-      const event = new Event(EventEnum.CHAT);
-      window.dispatchEvent(event);
       onSelect(id);
     }
   };

frontend/src/components/sidebar.tsx

@@ -1,5 +1,4 @@
 'use client';
-
 import { Button } from '@/components/ui/button';
 import Image from 'next/image';
 import { memo, useCallback, useContext, useState } from 'react';
@@ -9,7 +8,7 @@ import { SideBarItem } from './sidebar-item';
 import { Chat } from '@/graphql/type';
 import { EventEnum } from '../const/EventEnum';
 import { useRouter } from 'next/navigation';
-import { FixedSizeList } from 'react-window';
+import { FixedSizeList, ListChildComponentProps } from 'react-window';
 
 import {
   SidebarContent,
@@ -36,37 +35,41 @@ interface SidebarProps {
   setChatListUpdated: (value: boolean) => void;
   chats: Chat[];
   loading: boolean;
-  error: any;
+  error: unknown;
+  onRefetch: () => void;
+}
+
+interface ChatRowData {
+  chats: Chat[];
+  currentChatId: string;
+  onSelect: (chatId: string) => void;
   onRefetch: () => void;
 }
 
+interface ChatRowProps extends ListChildComponentProps {
+  data: ChatRowData;
+}
+
 // Row renderer for react-window
 const ChatRow = memo(
-  ({ index, style, data }: any) => {
-    const { chats, currentChatId, setCurProject, pollChatProject } = data;
+  ({ index, style, data }: ChatRowProps) => {
+    const { onSelect, chats, currentChatId, onRefetch } = data;
     const chat = chats[index];
 
-    const handleSelect = useCallback(() => {
-      setCurProject(null);
-      pollChatProject(chat.id).then((p) => {
-        setCurProject(p);
-      });
-    }, [chat.id, setCurProject, pollChatProject]);
-
     return (
       <div style={style}>
         <SideBarItem
           key={chat.id}
           id={chat.id}
           currentChatId={currentChatId}
           title={chat.title}
-          onSelect={handleSelect}
-          refetchChats={data.onRefetch}
+          onSelect={() => onSelect(chat.id)}
+          refetchChats={onRefetch}
         />
       </div>
     );
   },
-  (prevProps, nextProps) => {
+  (prevProps: ChatRowProps, nextProps: ChatRowProps) => {
     return (
       prevProps.data.chats[prevProps.index].id ===
         nextProps.data.chats[nextProps.index].id &&
@@ -91,18 +94,24 @@ function ChatSideBarComponent({
   const { setCurProject, pollChatProject } = useContext(ProjectContext);
 
   const handleNewChat = useCallback(() => {
-    window.history.replaceState({}, '', '/');
+    router.push('/');
     setCurrentChatid('');
     const event = new Event(EventEnum.NEW_CHAT);
     window.dispatchEvent(event);
-  }, []);
+  }, [router]);
 
   const handleChatSelect = useCallback(
     (chatId: string) => {
-      router.push(`/chat?id=${chatId}`);
       setCurrentChatid(chatId);
+      router.push(`/chat?id=${chatId}`);
+      setCurProject(null);
+      pollChatProject(chatId).then((p) => {
+        setCurProject(p);
+      });
+      const event = new Event(EventEnum.CHAT);
+      window.dispatchEvent(event);
     },
-    [router]
+    [router, setCurProject, pollChatProject]
   );
 
   if (loading) return <SidebarSkeleton />;
@@ -215,10 +224,8 @@ function ChatSideBarComponent({
                   itemData={{
                     chats,
                     currentChatId: currentChatid,
-                    setCurProject,
-                    pollChatProject,
-                    onRefetch,
                     onSelect: handleChatSelect,
+                    onRefetch,
                   }}
                 >
                   {ChatRow}
@@ -247,7 +254,7 @@ function ChatSideBarComponent({
 // Optimized memo comparison
 export const ChatSideBar = memo(
   ChatSideBarComponent,
-  (prevProps, nextProps) => {
+  (prevProps: SidebarProps, nextProps: SidebarProps) => {
     if (prevProps.isCollapsed !== nextProps.isCollapsed) return false;
     if (prevProps.loading !== nextProps.loading) return false;
     if (prevProps.error !== nextProps.error) return false;