From e7f227d91bb5188fc497fa4e12015f24106505e9 Mon Sep 17 00:00:00 2001
From: Sma1lboy <541898146chen@gmail.com>
Date: Sat, 15 Mar 2025 18:45:54 -0500
Subject: [PATCH 1/2] refactor(frontend): update sidebar components to use
useRouter for navigation
---
frontend/src/components/sidebar-item.tsx | 6 +--
frontend/src/components/sidebar.tsx | 53 ++++++++++++++----------
2 files changed, 32 insertions(+), 27 deletions(-)
diff --git a/frontend/src/components/sidebar-item.tsx b/frontend/src/components/sidebar-item.tsx
index 9a7c3b7f..895dab91 100644
--- a/frontend/src/components/sidebar-item.tsx
+++ b/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);
}
};
diff --git a/frontend/src/components/sidebar.tsx b/frontend/src/components/sidebar.tsx
index da3dfefe..547bc4c2 100644
--- a/frontend/src/components/sidebar.tsx
+++ b/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,23 +35,27 @@ 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 (
onSelect(chat.id)}
+ refetchChats={onRefetch}
/>
);
},
- (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 ;
@@ -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;
From 6a1af865a3d6e4ded86c2242b27bdac832c48101 Mon Sep 17 00:00:00 2001
From: Sma1lboy <541898146chen@gmail.com>
Date: Sat, 15 Mar 2025 18:57:23 -0500
Subject: [PATCH 2/2] feat(frontend): navigate to chat page after project
creation
---
frontend/src/app/(main)/page.tsx | 3 ++-
.../chat/code-engine/project-context.tsx | 14 +++-----------
2 files changed, 5 insertions(+), 12 deletions(-)
diff --git a/frontend/src/app/(main)/page.tsx b/frontend/src/app/(main)/page.tsx
index db0b1b31..0be78895 100644
--- a/frontend/src/app/(main)/page.tsx
+++ b/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);
}
diff --git a/frontend/src/components/chat/code-engine/project-context.tsx b/frontend/src/components/chat/code-engine/project-context.tsx
index 17c407b2..869065fd 100644
--- a/frontend/src/components/chat/code-engine/project-context.tsx
+++ b/frontend/src/components/chat/code-engine/project-context.tsx
@@ -28,7 +28,7 @@ export interface ProjectContextType {
setProjects: React.Dispatch>;
curProject: Project | undefined;
setCurProject: React.Dispatch>;
- projectLoading: boolean; // 新增字段
+ projectLoading: boolean;
filePath: string | null;
setFilePath: React.Dispatch>;
createNewProject: (projectName: string, description: string) => Promise;
@@ -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) {