mirror of
https://github.com/Yidadaa/ChatGPT-Next-Web.git
synced 2025-09-03 13:56:55 +08:00
feat: seperate chat page
This commit is contained in:
butterfly
214
app/containers/Sidebar/SessionList.tsx
Normal file
214
app/containers/Sidebar/SessionList.tsx
Normal file
@@ -0,0 +1,214 @@
|
||||
import {
|
||||
DragDropContext,
|
||||
Droppable,
|
||||
Draggable,
|
||||
OnDragEndResponder,
|
||||
} from "@hello-pangea/dnd";
|
||||
|
||||
import { useAppConfig, useChatStore } from "@/app/store";
|
||||
|
||||
import Locale from "@/app/locales";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
import { Path } from "@/app/constant";
|
||||
import { Mask } from "@/app/store/mask";
|
||||
import { useRef, useEffect, useMemo } from "react";
|
||||
import { showConfirm } from "@/app/components/ui-lib";
|
||||
|
||||
import AddIcon from "@/app/icons/addIcon.svg";
|
||||
import NextChatTitle from "@/app/icons/nextchatTitle.svg";
|
||||
import { ListHoodProps } from "./types";
|
||||
import useMobileScreen from "@/app/hooks/useMobileScreen";
|
||||
import { getTime } from "@/app/utils";
|
||||
import DeleteIcon from "@/app/icons/deleteIcon.svg";
|
||||
import LogIcon from "@/app/icons/logIcon.svg";
|
||||
|
||||
export function SessionItem(props: {
|
||||
onClick?: () => void;
|
||||
onDelete?: () => void;
|
||||
title: string;
|
||||
count: number;
|
||||
time: string;
|
||||
selected: boolean;
|
||||
id: string;
|
||||
index: number;
|
||||
narrow?: boolean;
|
||||
mask: Mask;
|
||||
}) {
|
||||
const draggableRef = useRef<HTMLDivElement | null>(null);
|
||||
useEffect(() => {
|
||||
if (props.selected && draggableRef.current) {
|
||||
draggableRef.current?.scrollIntoView({
|
||||
block: "center",
|
||||
});
|
||||
}
|
||||
}, [props.selected]);
|
||||
|
||||
const { pathname: currentPath } = useLocation();
|
||||
|
||||
return (
|
||||
<Draggable draggableId={`${props.id}`} index={props.index}>
|
||||
{(provided) => (
|
||||
<div
|
||||
className={`group relative flex p-3 items-center gap-2 self-stretch rounded-md hover:bg-gray-200 mb-2 ${
|
||||
props.selected &&
|
||||
(currentPath === Path.Chat || currentPath === Path.Home)
|
||||
? `bg-blue-100 border-blue-200 border`
|
||||
: `bg-gray-100`
|
||||
}`}
|
||||
onClick={props.onClick}
|
||||
ref={(ele) => {
|
||||
draggableRef.current = ele;
|
||||
provided.innerRef(ele);
|
||||
}}
|
||||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
title={`${props.title}\n${Locale.ChatItem.ChatItemCount(
|
||||
props.count,
|
||||
)}`}
|
||||
>
|
||||
<div className=" flex-shrink-0">
|
||||
<LogIcon />
|
||||
</div>
|
||||
<div className="flex flex-col flex-1">
|
||||
<div className={`flex justify-between items-center`}>
|
||||
<div
|
||||
className={` text-gray-900 text-sm-title line-clamp-1 flex-1`}
|
||||
>
|
||||
{props.title}
|
||||
</div>
|
||||
<div
|
||||
className={`text-gray-500 text-sm group-hover:opacity-0 pl-3`}
|
||||
>
|
||||
{getTime(props.time)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={`text-gray-500 text-sm`}>
|
||||
{Locale.ChatItem.ChatItemCount(props.count)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`absolute top-[50%] translate-y-[-50%] right-3 pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100`}
|
||||
onClickCapture={(e) => {
|
||||
props.onDelete?.();
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<DeleteIcon />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Draggable>
|
||||
);
|
||||
}
|
||||
|
||||
export default function SessionList(props: ListHoodProps) {
|
||||
const [sessions, selectedIndex, selectSession, moveSession] = useChatStore(
|
||||
(state) => [
|
||||
state.sessions,
|
||||
state.currentSessionIndex,
|
||||
state.selectSession,
|
||||
state.moveSession,
|
||||
],
|
||||
);
|
||||
const chatStore = useChatStore();
|
||||
const navigate = useNavigate();
|
||||
const isMobileScreen = useMobileScreen();
|
||||
|
||||
const config = useAppConfig();
|
||||
|
||||
const onDragEnd: OnDragEndResponder = (result) => {
|
||||
const { destination, source } = result;
|
||||
if (!destination) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
destination.droppableId === source.droppableId &&
|
||||
destination.index === source.index
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
moveSession(source.index, destination.index);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div data-tauri-drag-region>
|
||||
<div
|
||||
className="flex items-center justify-between py-7 px-0"
|
||||
data-tauri-drag-region
|
||||
>
|
||||
<div className="">
|
||||
<NextChatTitle />
|
||||
</div>
|
||||
<div
|
||||
className=""
|
||||
onClick={() => {
|
||||
if (config.dontShowMaskSplashScreen) {
|
||||
chatStore.newSession();
|
||||
navigate(Path.Chat);
|
||||
} else {
|
||||
navigate(Path.NewChat);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<AddIcon />
|
||||
</div>
|
||||
</div>
|
||||
<div className={`pb-3 text-sm sm:text-sm-mobile text-blue-500`}>
|
||||
Build your own AI assistant.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`flex overflow-y-auto overflow-x-hidden`}
|
||||
onClick={(e) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
navigate(Path.Home);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<DragDropContext onDragEnd={onDragEnd}>
|
||||
<Droppable droppableId="chat-list">
|
||||
{(provided) => (
|
||||
<div
|
||||
ref={provided.innerRef}
|
||||
{...provided.droppableProps}
|
||||
className="w-[100%]"
|
||||
>
|
||||
{sessions.map((item, i) => (
|
||||
<SessionItem
|
||||
title={item.topic}
|
||||
time={new Date(item.lastUpdate).toLocaleString()}
|
||||
count={item.messages.length}
|
||||
key={item.id}
|
||||
id={item.id}
|
||||
index={i}
|
||||
selected={i === selectedIndex}
|
||||
onClick={() => {
|
||||
navigate(Path.Chat);
|
||||
selectSession(i);
|
||||
}}
|
||||
onDelete={async () => {
|
||||
if (
|
||||
!isMobileScreen ||
|
||||
(await showConfirm(Locale.Home.DeleteChat))
|
||||
) {
|
||||
chatStore.deleteSession(i);
|
||||
}
|
||||
}}
|
||||
mask={item.mask}
|
||||
/>
|
||||
))}
|
||||
{provided.placeholder}
|
||||
</div>
|
||||
)}
|
||||
</Droppable>
|
||||
</DragDropContext>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
5
app/containers/Sidebar/SettingList.tsx
Normal file
5
app/containers/Sidebar/SettingList.tsx
Normal file
@@ -0,0 +1,5 @@
|
||||
import { ListHoodProps } from "./types";
|
||||
|
||||
export default function SettingList(props: ListHoodProps) {
|
||||
return <></>;
|
||||
}
|
||||
148
app/containers/Sidebar/index.tsx
Normal file
148
app/containers/Sidebar/index.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
import { useMemo } from "react";
|
||||
import DragIcon from "@/app/icons/drag.svg";
|
||||
import DiscoverIcon from "@/app/icons/discoverActive.svg";
|
||||
import AssistantActiveIcon from "@/app/icons/assistantActive.svg";
|
||||
import GitHubIcon from "@/app/icons/githubIcon.svg";
|
||||
import SettingIcon from "@/app/icons/settingActive.svg";
|
||||
import DiscoverInactiveIcon from "@/app/icons/discoverInactive.svg";
|
||||
import AssistantInactiveIcon from "@/app/icons/assistantInactive.svg";
|
||||
import SettingInactiveIcon from "@/app/icons/settingInactive.svg";
|
||||
|
||||
import { useAppConfig, useChatStore } from "@/app/store";
|
||||
|
||||
import { Path, REPO_URL } from "@/app/constant";
|
||||
|
||||
import { useNavigate, useLocation } from "react-router-dom";
|
||||
import { isIOS } from "@/app/utils";
|
||||
import dynamic from "next/dynamic";
|
||||
import useHotKey from "@/app/hooks/useHotKey";
|
||||
import useDragSideBar from "@/app/hooks/useDragSideBar";
|
||||
import useMobileScreen from "@/app/hooks/useMobileScreen";
|
||||
import TabActions from "@/app/components/TabActions";
|
||||
|
||||
const SessionList = dynamic(async () => await import("./SessionList"), {
|
||||
loading: () => null,
|
||||
});
|
||||
|
||||
const SettingList = dynamic(async () => await import("./SettingList"), {
|
||||
loading: () => null,
|
||||
});
|
||||
|
||||
export function SideBar(props: { className?: string }) {
|
||||
const chatStore = useChatStore();
|
||||
|
||||
// drag side bar
|
||||
const { onDragStart } = useDragSideBar();
|
||||
|
||||
const navigate = useNavigate();
|
||||
const loc = useLocation();
|
||||
|
||||
const config = useAppConfig();
|
||||
const isMobileScreen = useMobileScreen();
|
||||
const isIOSMobile = useMemo(
|
||||
() => isIOS() && isMobileScreen,
|
||||
[isMobileScreen],
|
||||
);
|
||||
|
||||
useHotKey();
|
||||
|
||||
let selectedTab: string;
|
||||
|
||||
switch (loc.pathname) {
|
||||
case Path.Masks:
|
||||
case Path.NewChat:
|
||||
selectedTab = Path.Masks;
|
||||
break;
|
||||
case Path.Settings:
|
||||
selectedTab = Path.Settings;
|
||||
break;
|
||||
default:
|
||||
selectedTab = Path.Chat;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={` inline-flex h-[100%] ${props.className} relative`}
|
||||
style={{
|
||||
// #3016 disable transition on ios mobile screen
|
||||
transition: isMobileScreen && isIOSMobile ? "none" : undefined,
|
||||
}}
|
||||
>
|
||||
<TabActions
|
||||
actionsShema={[
|
||||
{
|
||||
id: Path.Masks,
|
||||
icons: {
|
||||
active: <DiscoverIcon />,
|
||||
inactive: <DiscoverInactiveIcon />,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: Path.Chat,
|
||||
icons: {
|
||||
active: <AssistantActiveIcon />,
|
||||
inactive: <AssistantInactiveIcon />,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "github",
|
||||
icons: <GitHubIcon />,
|
||||
className: "p-2",
|
||||
},
|
||||
{
|
||||
id: Path.Settings,
|
||||
icons: {
|
||||
active: <SettingIcon />,
|
||||
inactive: <SettingInactiveIcon />,
|
||||
},
|
||||
className: "p-2",
|
||||
},
|
||||
]}
|
||||
onSelect={(id) => {
|
||||
if (id === "github") {
|
||||
return window.open(REPO_URL, "noopener noreferrer");
|
||||
}
|
||||
if (id !== Path.Masks) {
|
||||
return navigate(id);
|
||||
}
|
||||
if (config.dontShowMaskSplashScreen !== true) {
|
||||
navigate(Path.NewChat, { state: { fromHome: true } });
|
||||
} else {
|
||||
navigate(Path.Masks, { state: { fromHome: true } });
|
||||
}
|
||||
}}
|
||||
groups={[
|
||||
[Path.Chat, Path.Masks],
|
||||
["github", Path.Settings],
|
||||
]}
|
||||
selected={selectedTab}
|
||||
className="px-5 py-6"
|
||||
/>
|
||||
|
||||
<div
|
||||
className={`flex flex-col w-md lg:w-lg 2xl:w-2xl px-6 pb-6 max-md:px-4 max-md:pb-4 bg-gray-50 rounded-md my-2.5 ${
|
||||
isMobileScreen && `bg-gray-300`
|
||||
}`}
|
||||
onClick={(e) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
navigate(Path.Home);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{selectedTab === Path.Chat && <SessionList />}
|
||||
{loc.pathname === Path.Settings && <SettingList />}
|
||||
</div>
|
||||
|
||||
{!isMobileScreen && (
|
||||
<div
|
||||
className={`group absolute right-0 h-[100%] flex items-center`}
|
||||
onPointerDown={(e) => onDragStart(e as any)}
|
||||
>
|
||||
<div className="opacity-0 group-hover:bg-[rgba($color: #000000, $alpha: 0.01) group-hover:opacity-20">
|
||||
<DragIcon />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
4
app/containers/Sidebar/types.ts
Normal file
4
app/containers/Sidebar/types.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export interface ListHoodProps {
|
||||
// narrow?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
Reference in New Issue
Block a user