7x31/ChatGPT-Next-Web
1
0
Fork 0
mirror of https://github.com/Yidadaa/ChatGPT-Next-Web.git synced 2025-09-10 00:38:39 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: init switching to nextjs router

Browse Source
This commit is contained in:
Fred
2024-05-10 14:57:55 +08:00
parent 00b1a9781d
commit 0c53579996
25 changed files with 473 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/containers/Chat/components/ChatActions.tsx
View File

@@ -1,5 +1,3 @@
import { useNavigate } from "react-router-dom";
import { ModelType, Theme, useAppConfig } from "@/app/store/config";
import { useChatStore } from "@/app/store/chat";
import { ChatControllerPool } from "@/app/client/controller";
@@ -22,6 +20,7 @@ import AddCircleIcon from "@/app/icons/addCircle.svg";
import Popover from "@/app/components/Popover";
import ModelSelect from "./ModelSelect";
import { useRouter } from "next/navigation";
export interface Action {
onClick?: () => void;
@@ -46,7 +45,7 @@ export function ChatActions(props: {
className?: string;
}) {
const config = useAppConfig();
const navigate = useNavigate();
const router = useRouter();
const chatStore = useChatStore();
// switch themes
@@ -146,7 +145,7 @@ export function ChatActions(props: {
},
{
onClick: () => {
navigate(Path.Masks);
router.push(Path.Masks);
},
text: Locale.Chat.InputActions.Masks,
isShow: true,
@@ -206,7 +205,7 @@ export function ChatActions(props: {
placement="rt"
noArrow
popoverClassName="border border-chat-actions-popover-mobile rounded-md shadow-chat-actions-popover-mobile w-actions-popover bg-chat-actions-popover-panel-mobile "
className=" cursor-pointer follow-parent-svg default-icon-color"
className="cursor-pointer follow-parent-svg default-icon-color"
>
<AddCircleIcon />
</Popover>

10
app/containers/Chat/components/ChatHeader.tsx
View File

@@ -1,4 +1,4 @@
import { useNavigate } from "react-router-dom";
import { useRouter } from "next/navigation";
import Locale from "@/app/locales";
import { Path } from "@/app/constant";
import { DEFAULT_TOPIC, useChatStore } from "@/app/store/chat";
@@ -17,8 +17,8 @@ export interface ChatHeaderProps {
export default function ChatHeader(props: ChatHeaderProps) {
const { isMobileScreen, setIsEditingMessage, setShowExport } = props;
const navigate = useNavigate();
// const navigate = useNavigate();
const router = useRouter();
const chatStore = useChatStore();
const session = chatStore.currentSession();
@@ -39,8 +39,8 @@ export default function ChatHeader(props: ChatHeaderProps) {
{isMobileScreen ? (
<div
className=" cursor-pointer follow-parent-svg default-icon-color"
onClick={() => navigate(Path.Home)}
className="cursor-pointer follow-parent-svg default-icon-color"
onClick={() => router.push(Path.Home)}
>
<GobackIcon />
</div>

7
app/containers/Chat/components/ChatInputPanel.tsx
View File

@@ -10,6 +10,7 @@ import { ChatCommandPrefix, useChatCommand } from "@/app/command";
import { useChatStore } from "@/app/store/chat";
import { usePromptStore } from "@/app/store/prompt";
import { useAppConfig } from "@/app/store/config";
import { useRouter } from "next/navigation";
import usePaste from "@/app/hooks/usePaste";
import { ChatActions } from "./ChatActions";
@@ -71,7 +72,7 @@ export default forwardRef<ChatInputPanelInstance, ChatInputPanelProps>(
const [promptHints, setPromptHints] = useState<RenderPompt[]>([]);
const chatStore = useChatStore();
const navigate = useNavigate();
const router = useRouter();
const config = useAppConfig();
const { uploadImage } = useUploadImage(attachImages, {
@@ -85,7 +86,7 @@ export default forwardRef<ChatInputPanelInstance, ChatInputPanelProps>(
// chat commands shortcuts
const chatCommands = useChatCommand({
new: () => chatStore.newSession(),
newm: () => navigate(Path.NewChat),
newm: () => router.push(Path.NewChat),
prev: () => chatStore.nextSession(-1),
next: () => chatStore.nextSession(1),
clear: () =>
@@ -299,7 +300,7 @@ export default forwardRef<ChatInputPanelInstance, ChatInputPanelProps>(
}}
/>
{!isMobileScreen && (
<div className="flex items-center justify-center text-sm gap-3">
<div className="flex items-center justify-center gap-3 text-sm">
<div className="flex-1">&nbsp;</div>
<div className="text-text-chat-input-placeholder font-common line-clamp-1">
{Locale.Chat.Input(submitKey)}

14
app/containers/Chat/components/ChatMessagePanel.tsx
View File

@@ -1,4 +1,4 @@
import { Fragment, useMemo } from "react";
import { Fragment, useEffect, useMemo } from "react";
import { ChatMessage, useChatStore } from "@/app/store/chat";
import { CHAT_PAGE_SIZE } from "@/app/constant";
import Locale from "@/app/locales";
@@ -88,11 +88,13 @@ export default function ChatMessagePanel(props: ChatMessagePanelProps) {
? session.clearContextIndex! + context.length - msgRenderIndex
: -1;
if (!MarkdownLoadedCallback) {
MarkdownLoadedCallback = () => {
window.setTimeout(scrollDomToBottom, 100);
};
}
useEffect(() => {
if (!MarkdownLoadedCallback) {
MarkdownLoadedCallback = () => {
window.setTimeout(scrollDomToBottom, 100);
};
}
}, [scrollDomToBottom]);
const messages = useMemo(() => {
const endRenderIndex = Math.min(

10
app/containers/Chat/components/SessionItem.tsx
View File

@@ -1,11 +1,10 @@
import { Draggable } from "@hello-pangea/dnd";
import Locale from "@/app/locales";
import { useLocation } from "react-router-dom";
import { Path } from "@/app/constant";
import { Mask } from "@/app/store/mask";
import { useRef, useEffect } from "react";
import { usePathname } from "next/navigation";
import DeleteChatIcon from "@/app/icons/deleteChatIcon.svg";
import { getTime } from "@/app/utils";
@@ -36,8 +35,7 @@ export default function SessionItem(props: {
});
}
}, [props.selected]);
const { pathname: currentPath } = useLocation();
const pathname = usePathname();
return (
<Draggable draggableId={`${props.id}`} index={props.index}>
@@ -51,7 +49,7 @@ export default function SessionItem(props: {
md:bg-chat-menu-session-unselected md:border-chat-menu-session-unselected
${
props.selected &&
(currentPath === Path.Chat || currentPath === Path.Home)
(pathname === Path.Chat || pathname === Path.Home)
? `
md:!bg-chat-menu-session-selected md:!border-chat-menu-session-selected
!bg-chat-menu-session-selected-mobile !border-chat-menu-session-selected-mobile
@@ -70,7 +68,7 @@ export default function SessionItem(props: {
props.count,
)}`}
>
<div className=" flex-shrink-0">
<div className="flex-shrink-0 ">
<LogIcon />
</div>
<div className="flex flex-col flex-1">

22
app/containers/Chat/index.tsx
View File

@@ -7,7 +7,6 @@ import {
import { useAppConfig, useChatStore } from "@/app/store";
import Locale from "@/app/locales";
import { useLocation, useNavigate } from "react-router-dom";
import { Path } from "@/app/constant";
import { useEffect } from "react";
@@ -18,6 +17,7 @@ import MenuLayout from "@/app/components/MenuLayout";
import Panel from "./ChatPanel";
import Modal from "@/app/components/Modal";
import SessionItem from "./components/SessionItem";
import { usePathname, useRouter } from "next/navigation";
export default MenuLayout(function SessionList(props) {
const { setShowPanel } = props;
@@ -30,17 +30,16 @@ export default MenuLayout(function SessionList(props) {
state.moveSession,
],
);
const navigate = useNavigate();
const config = useAppConfig();
const { isMobileScreen } = config;
const chatStore = useChatStore();
const { pathname: currentPath } = useLocation();
const router = useRouter();
const pathname = usePathname();
useEffect(() => {
setShowPanel?.(currentPath === Path.Chat);
}, [currentPath]);
setShowPanel?.(pathname === Path.Chat);
}, [pathname]);
const onDragEnd: OnDragEndResponder = (result) => {
const { destination, source } = result;
@@ -77,13 +76,15 @@ export default MenuLayout(function SessionList(props) {
<NextChatTitle />
</div>
<div
className=" cursor-pointer"
className="cursor-pointer "
onClick={() => {
if (config.dontShowMaskSplashScreen) {
chatStore.newSession();
navigate(Path.Chat);
// navigate(Path.Chat);
router.push(Path.Chat);
} else {
navigate(Path.NewChat);
// navigate(Path.NewChat);
router.push(Path.NewChat);
}
}}
>
@@ -116,8 +117,9 @@ export default MenuLayout(function SessionList(props) {
index={i}
selected={i === selectedIndex}
onClick={() => {
navigate(Path.Chat);
// navigate(Path.Chat);
selectSession(i);
router.push(Path.Chat);
}}
onDelete={async () => {
if (

22
app/containers/Sidebar/index.tsx
View File

@@ -14,13 +14,14 @@ import AssistantMobileInactive from "@/app/icons/assistantMobileInactive.svg";
import { useAppConfig } from "@/app/store";
import { Path, REPO_URL } from "@/app/constant";
import { useNavigate, useLocation } from "react-router-dom";
import useHotKey from "@/app/hooks/useHotKey";
import ActionsBar from "@/app/components/ActionsBar";
import { usePathname, useRouter } from "next/navigation";
export function SideBar(props: { className?: string }) {
const navigate = useNavigate();
const loc = useLocation();
// const navigate = useNavigate();
const pathname = usePathname();
const router = useRouter();
const config = useAppConfig();
const { isMobileScreen } = config;
@@ -28,8 +29,7 @@ export function SideBar(props: { className?: string }) {
useHotKey();
let selectedTab: string;
switch (loc.pathname) {
switch (pathname) {
case Path.Masks:
case Path.NewChat:
selectedTab = Path.Masks;
@@ -40,6 +40,7 @@ export function SideBar(props: { className?: string }) {
default:
selectedTab = Path.Home;
}
console.log("======", selectedTab);
return (
<div
@@ -98,12 +99,17 @@ export function SideBar(props: { className?: string }) {
return window.open(REPO_URL, "noopener noreferrer");
}
if (id !== Path.Masks) {
return navigate(id);
router.push(id);
return;
}
if (config.dontShowMaskSplashScreen !== true) {
navigate(Path.NewChat, { state: { fromHome: true } });
// navigate(Path.NewChat, { state: { fromHome: true } });
router.push(Path.NewChat);
return;
} else {
navigate(Path.Masks, { state: { fromHome: true } });
// navigate(Path.Masks, { state: { fromHome: true } });
router.push(Path.Masks);
return;
}
}}
groups={{