xinyin025/ChatGPT-Next-Web
1
0
Fork 0
mirror of https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web.git synced 2025-10-09 11:36:38 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat: collapsible sidebar

Browse Source
This commit is contained in:
Dakai 2023-04-16 11:20:43 +08:00
parent e0f6c801d5
commit 37c62e1b7e
8 changed files with 401 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
app/components/chat-list.tsx
View File

@ -1,5 +1,6 @@
import DeleteIcon from "../icons/delete.svg"; import DeleteIcon from "../icons/delete.svg";
import styles from "./home.module.scss"; import styles from "./home.module.scss";
import BotIcon from "../icons/bot.svg";
import { import {
DragDropContext, DragDropContext,
Droppable, Droppable,
@ -22,7 +23,38 @@ export function ChatItem(props: {
id: number; id: number;
index: number; index: number;
}) { }) {
return ( const [sidebarCollapse] = useChatStore((state) => [state.sidebarCollapse]);
return sidebarCollapse ? (
<Draggable draggableId={`${props.id}`} index={props.index}>
{(provided) => (
<div
className={`${styles["chat-item-collapse"]} ${
props.selected && styles["chat-item-selected"]
}`}
onClick={props.onClick}
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<div className={styles["chat-item-info-collapse"]}>
{Locale.ChatItem.ChatItemCount(props.count).replace(/[^0-9]/g, "")
.length <= 3
? Locale.ChatItem.ChatItemCount(props.count).replace(
/[^0-9]/g,
"",
)
: ":)"}
</div>
<div
className={styles["chat-item-delete-collapse"]}
onClick={props.onDelete}
>
<DeleteIcon />
</div>
</div>
)}
</Draggable>
) : (
<Draggable draggableId={`${props.id}`} index={props.index}> <Draggable draggableId={`${props.id}`} index={props.index}>
{(provided) => ( {(provided) => (
<div <div
@ -51,8 +83,15 @@ export function ChatItem(props: {
} }
export function ChatList() { export function ChatList() {
const [sessions, selectedIndex, selectSession, removeSession, moveSession] = const [
useChatStore((state) => [ sidebarCollapse,
sessions,
selectedIndex,
selectSession,
removeSession,
moveSession,
] = useChatStore((state) => [
state.sidebarCollapse,
state.sessions, state.sessions,
state.currentSessionIndex, state.currentSessionIndex,
state.selectSession, state.selectSession,
@ -78,9 +117,15 @@ export function ChatList() {
}; };
return ( return (
<>
{sidebarCollapse && (
<div className={styles["gpt-logo-collapse"]}>
<BotIcon />
</div>
)}
<DragDropContext onDragEnd={onDragEnd}> <DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="chat-list"> <Droppable droppableId="chat-list">
{(provided) => ( {(provided: any) => (
<div <div
className={styles["chat-list"]} className={styles["chat-list"]}
ref={provided.innerRef} ref={provided.innerRef}
@ -96,13 +141,15 @@ export function ChatList() {
index={i} index={i}
selected={i === selectedIndex} selected={i === selectedIndex}
onClick={() => selectSession(i)} onClick={() => selectSession(i)}
onDelete={() => chatStore.deleteSession(i)} onDelete={chatStore.deleteSession}
/> />
))} ))}
{provided.placeholder} {provided.placeholder}
</div> </div>
)} )}
</Droppable> </Droppable>
</DragDropContext> </DragDropContext>
</>
); );
} }

18
app/components/chat.tsx
View File

@ -400,14 +400,14 @@ export function ChatActions(props: {
); );
} }
export function Chat(props: { export function Chat() {
showSideBar?: () => void;
sideBarShowing?: boolean;
}) {
type RenderMessage = Message & { preview?: boolean }; type RenderMessage = Message & { preview?: boolean };
const chatStore = useChatStore(); const chatStore = useChatStore();
const [session, sessionIndex] = useChatStore((state) => [ const [sidebarCollapse, setSideBarCollapse, session, sessionIndex] =
useChatStore((state) => [
state.sidebarCollapse,
state.setSidebarCollapse,
state.currentSession(), state.currentSession(),
state.currentSessionIndex, state.currentSessionIndex,
]); ]);
@ -599,7 +599,7 @@ export function Chat(props: {
// Auto focus // Auto focus
useEffect(() => { useEffect(() => {
if (props.sideBarShowing && isMobileScreen()) return; if (isMobileScreen() && sidebarCollapse) return;
inputRef.current?.focus(); inputRef.current?.focus();
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, []);
@ -624,7 +624,9 @@ export function Chat(props: {
icon={<ReturnIcon />} icon={<ReturnIcon />}
bordered bordered
title={Locale.Chat.Actions.ChatList} title={Locale.Chat.Actions.ChatList}
onClick={props?.showSideBar} onClick={() => {
setSideBarCollapse(!sidebarCollapse);
}}
/> />
</div> </div>
<div className={styles["window-action-button"]}> <div className={styles["window-action-button"]}>
@ -775,7 +777,7 @@ export function Chat(props: {
setAutoScroll(false); setAutoScroll(false);
setTimeout(() => setPromptHints([]), 500); setTimeout(() => setPromptHints([]), 500);
}} }}
autoFocus={!props?.sideBarShowing} autoFocus={sidebarCollapse}
rows={inputRows} rows={inputRows}
/> />
<IconButton <IconButton

129
app/components/home.module.scss
View File

@ -39,7 +39,16 @@
border: 0; border: 0;
} }
} }
.sidebar-collapse {
top: 0;
width: var(--sidebar-collapse-width);
box-sizing: border-box;
padding: 20px;
background-color: var(--second);
display: flex;
flex-direction: column;
box-shadow: inset -2px 0px 2px 0px rgb(0, 0, 0, 0.05);
}
.sidebar { .sidebar {
top: 0; top: 0;
width: var(--sidebar-width); width: var(--sidebar-width);
@ -72,6 +81,12 @@
} }
} }
.window-content-collapse {
width: var(--window-content-width-collapse);
height: 100%;
display: flex;
flex-direction: column;
}
.window-content { .window-content {
width: var(--window-content-width); width: var(--window-content-width);
height: 100%; height: 100%;
@ -95,13 +110,22 @@
.sidebar { .sidebar {
position: absolute; position: absolute;
left: -100%; //left: -100%;
z-index: 1000; z-index: 1000;
height: var(--full-height); height: var(--full-height);
transition: all ease 0.3s; transition: all ease 0.3s;
box-shadow: none; box-shadow: none;
} }
.sidebar-collapse {
display: none;
}
.window-content-collapse {
width: var(--window-content-width);
height: 100%;
display: flex;
flex-direction: column;
}
.sidebar-show { .sidebar-show {
left: 0; left: 0;
} }
@ -116,12 +140,29 @@
padding-top: 20px; padding-top: 20px;
padding-bottom: 20px; padding-bottom: 20px;
} }
.sidebar-header-collapse {
display: none;
}
.sidebar-logo { .sidebar-logo {
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 18px; bottom: 18px;
} }
.sidebar-logo-collapse {
//position: absolute;
//width: 30px;
display: none;
}
.gpt-logo-collapse {
margin-left: 2px;
margin-bottom: 25px;
margin-top: 10px;
}
.gpt-logo-collapse svg {
transform: scale(1.3);
opacity: 0.2;
}
.sidebar-title { .sidebar-title {
font-size: 20px; font-size: 20px;
@ -141,6 +182,27 @@
.chat-list { .chat-list {
} }
.chat-item-collapse {
//make content center
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
padding-top: 4px;
padding-bottom: 4px;
background-color: var(--white);
border-radius: 10px;
margin-bottom: 10px;
box-shadow: var(--card-shadow);
transition: all 0.3s ease;
cursor: pointer;
user-select: none;
border: 2px solid transparent;
position: relative;
overflow: hidden;
}
.chat-item { .chat-item {
padding: 10px 14px; padding: 10px 14px;
background-color: var(--white); background-color: var(--white);
@ -155,6 +217,10 @@
overflow: hidden; overflow: hidden;
} }
.chat-item-collapse:hover {
background-color: var(--hover-color);
}
.chat-item:hover { .chat-item:hover {
background-color: var(--hover-color); background-color: var(--hover-color);
} }
@ -173,6 +239,10 @@
white-space: nowrap; white-space: nowrap;
} }
.chat-item-title-collapse {
display: hide;
}
.chat-item-delete { .chat-item-delete {
position: absolute; position: absolute;
top: 10px; top: 10px;
@ -181,16 +251,32 @@
opacity: 0; opacity: 0;
cursor: pointer; cursor: pointer;
} }
.chat-item-delete-collapse {
position: absolute;
top: -4px;
right: -20px;
transition: all ease 0.3s;
opacity: 0;
}
.chat-item:hover > .chat-item-delete { .chat-item:hover > .chat-item-delete {
opacity: 0.5; opacity: 0.5;
right: 10px; right: 10px;
} }
.chat-item-collapse:hover > .chat-item-delete-collapse {
opacity: 0.5;
right: 0px;
}
.chat-item:hover > .chat-item-delete:hover { .chat-item:hover > .chat-item-delete:hover {
opacity: 1; opacity: 1;
} }
.chat-item-collapse:hover > .chat-item-delete-collapse:hover {
opacity: 1;
}
.chat-item-info { .chat-item-info {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -199,6 +285,10 @@
margin-top: 8px; margin-top: 8px;
} }
.chat-item-info-collapse {
color: rgb(166, 166, 166);
}
.chat-item-count, .chat-item-count,
.chat-item-date { .chat-item-date {
overflow: hidden; overflow: hidden;
@ -212,14 +302,45 @@
padding-top: 20px; padding-top: 20px;
} }
.sidebar-tail-narrow {
display: flex;
flex-direction: column-reverse;
justify-content: space-between;
padding-top: 20px;
}
.sidebar-tail-collapse {
display: flex;
justify-content: space-between;
//padding-top: 20px;
flex-direction: column-reverse;
}
.sidebar-actions { .sidebar-actions {
display: inline-flex; display: inline-flex;
} }
.sidebar-action:not(:last-child) { .sidebar-actions-collapse {
display: flex;
flex-direction: column-reverse;
}
//.sidebar-action:not(:last-child) {
// margin-right: 15px;
//}
.sidebar-action {
margin-right: 15px; margin-right: 15px;
} }
.sidebar-action-collapse {
margin-top: 15px;
}
.sidebar-addIcon-collapse {
margin-top: 15px;
}
.chat { .chat {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

127
app/components/home.tsx
View File

@ -16,6 +16,9 @@ import AddIcon from "../icons/add.svg";
import LoadingIcon from "../icons/three-dots.svg"; import LoadingIcon from "../icons/three-dots.svg";
import CloseIcon from "../icons/close.svg"; import CloseIcon from "../icons/close.svg";
import LeftIcon from "../icons/left.svg";
import RightIcon from "../icons/right.svg";
import { useChatStore } from "../store"; import { useChatStore } from "../store";
import { getCSSVar, isMobileScreen } from "../utils"; import { getCSSVar, isMobileScreen } from "../utils";
import Locale from "../locales"; import Locale from "../locales";
@ -131,17 +134,21 @@ const useHasHydrated = () => {
}; };
function _Home() { function _Home() {
const [createNewSession, currentIndex, removeSession] = useChatStore( const [
(state) => [ sidebarCollapse,
setSideBarCollapse,
createNewSession,
currentIndex,
removeSession,
] = useChatStore((state) => [
state.sidebarCollapse,
state.setSidebarCollapse,
state.newSession, state.newSession,
state.currentSessionIndex, state.currentSessionIndex,
state.removeSession, state.removeSession,
], ]);
);
const chatStore = useChatStore(); const chatStore = useChatStore();
const loading = !useHasHydrated(); const loading = !useHasHydrated();
const [showSideBar, setShowSideBar] = useState(true);
// setting // setting
const [openSettings, setOpenSettings] = useState(false); const [openSettings, setOpenSettings] = useState(false);
const config = useChatStore((state) => state.config); const config = useChatStore((state) => state.config);
@ -164,8 +171,11 @@ function _Home() {
}`} }`}
> >
<div <div
className={styles.sidebar + ` ${showSideBar && styles["sidebar-show"]}`} className={
sidebarCollapse ? styles["sidebar-collapse"] : styles["sidebar"]
}
> >
{!sidebarCollapse && (
<div className={styles["sidebar-header"]}> <div className={styles["sidebar-header"]}>
<div className={styles["sidebar-title"]}>ChatGPT Next</div> <div className={styles["sidebar-title"]}>ChatGPT Next</div>
<div className={styles["sidebar-sub-title"]}> <div className={styles["sidebar-sub-title"]}>
@ -175,20 +185,86 @@ function _Home() {
<ChatGptIcon /> <ChatGptIcon />
</div> </div>
</div> </div>
)}
<div <div
className={styles["sidebar-body"]} className={styles["sidebar-body"]}
onClick={() => { onClick={() => {
setOpenSettings(false); setOpenSettings(false);
setShowSideBar(false); if (window.innerWidth < 768) {
setSideBarCollapse(true);
}
}} }}
> >
<ChatList /> <ChatList />
</div> </div>
{sidebarCollapse ? (
<div className={styles["sidebar-tail-collapse"]}>
<div className={styles["sidebar-actions-collapse"]}>
<div className={styles["sidebar-action-collapse"]}>
<IconButton
icon={<RightIcon />}
onClick={() => {
setSideBarCollapse(false);
}}
/>
</div>
<div className={styles["sidebar-action-collapse"]}>
<IconButton
icon={<CloseIcon />}
onClick={chatStore.deleteSession}
/>
</div>
<div className={styles["sidebar-action-collapse"]}>
<IconButton
icon={<SettingsIcon />}
onClick={() => {
setOpenSettings(true);
setSideBarCollapse(true);
}}
shadow
/>
</div>
<div className={styles["sidebar-action-collapse"]}>
<a href={REPO_URL} target="_blank">
<IconButton icon={<GithubIcon />} shadow />
</a>
</div>
</div>
<div>
<IconButton
className={styles["sidebar-addIcon-collapse"]}
icon={<AddIcon />}
text={""}
onClick={() => {
createNewSession();
setSideBarCollapse(true);
}}
shadow
/>
</div>
</div>
) : (
<div className={styles["sidebar-tail"]}> <div className={styles["sidebar-tail"]}>
<div className={styles["sidebar-actions"]}> <div className={styles["sidebar-actions"]}>
<div className={styles["sidebar-action"] + " " + styles.mobile}> <div className={styles["sidebar-action"]}>
{sidebarCollapse ? (
<IconButton
icon={<RightIcon />}
onClick={() => {
setSideBarCollapse(false);
}}
/>
) : (
<IconButton
icon={<LeftIcon />}
onClick={() => {
setSideBarCollapse(true);
}}
/>
)}
</div>
<div className={styles["sidebar-action"]}>
<IconButton <IconButton
icon={<CloseIcon />} icon={<CloseIcon />}
onClick={chatStore.deleteSession} onClick={chatStore.deleteSession}
@ -199,7 +275,7 @@ function _Home() {
icon={<SettingsIcon />} icon={<SettingsIcon />}
onClick={() => { onClick={() => {
setOpenSettings(true); setOpenSettings(true);
setShowSideBar(false); setSideBarCollapse(true);
}} }}
shadow shadow
/> />
@ -213,36 +289,45 @@ function _Home() {
<div> <div>
<IconButton <IconButton
icon={<AddIcon />} icon={<AddIcon />}
text={Locale.Home.NewChat} // Auto hide Text 'Next Chat' when sidebar width shrinks
text={
!isMobileScreen()
? chatStore.config.sidebarWidth <= 340
? ""
: Locale.Home.NewChat
: Locale.Home.NewChat
}
onClick={() => { onClick={() => {
createNewSession(); createNewSession();
setShowSideBar(false); setSideBarCollapse(true);
}} }}
shadow shadow
/> />
</div> </div>
</div> </div>
)}
<div <div
className={styles["sidebar-drag"]} className={styles["sidebar-drag"]}
onMouseDown={(e) => onDragMouseDown(e as any)} onMouseDown={(e) => onDragMouseDown(e as any)}
></div> ></div>
</div> </div>
<div
<div className={styles["window-content"]}> className={
sidebarCollapse
? styles["window-content-collapse"]
: styles["window-content"]
}
>
{openSettings ? ( {openSettings ? (
<Settings <Settings
closeSettings={() => { closeSettings={() => {
setOpenSettings(false); setOpenSettings(false);
setShowSideBar(true); setSideBarCollapse(false);
}} }}
/> />
) : ( ) : (
<Chat <Chat key="chat" />
key="chat"
showSideBar={() => setShowSideBar(true)}
sideBarShowing={showSideBar}
/>
)} )}
</div> </div>
</div> </div>

14
app/icons/left.svg Normal file
View File

@ -0,0 +1,14 @@
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
<title>left</title>
<defs>
<image width="256" height="256" id="img1" href="data:image/png;base64,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"/>
</defs>
<style>
.s0 { fill: none;stroke: #000000 }
</style>
<use id="Layer 1" href="#img1" x="0" y="0"/>
<g id="Folder 1">
<path id="Shape 1" class="s0" d="m8 3l-5 5.1 5 5.1"/>
<path id="Shape 1 copy" class="s0" d="m12 3l-5 5.1 5 5.1"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

14
app/icons/right.svg Normal file
View File

@ -0,0 +1,14 @@
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
<title>left</title>
<defs>
<image width="256" height="256" id="img1" href="data:image/png;base64,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"/>
</defs>
<style>
.s0 { fill: none;stroke: #000000 }
</style>
<use id="Layer 1" href="#img1" x="0" y="0"/>
<g id="RIght">
<path id="Shape 1" class="s0" d="m7 3l5 5.1-5 5.1"/>
<path id="Shape 1 copy" class="s0" d="m3 3l5 5.1-5 5.1"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

9
app/store/app.ts
View File

@ -227,6 +227,8 @@ interface ChatStore {
resetConfig: () => void; resetConfig: () => void;
updateConfig: (updater: (config: ChatConfig) => void) => void; updateConfig: (updater: (config: ChatConfig) => void) => void;
clearAllData: () => void; clearAllData: () => void;
sidebarCollapse: boolean;
setSidebarCollapse: (value: boolean) => void;
} }
function countMessages(msgs: Message[]) { function countMessages(msgs: Message[]) {
@ -585,6 +587,13 @@ export const useChatStore = create<ChatStore>()(
location.reload(); location.reload();
} }
}, },
sidebarCollapse: false,
setSidebarCollapse(value) {
set({
sidebarCollapse: value,
});
},
}), }),
{ {
name: LOCAL_KEY, name: LOCAL_KEY,

5
app/styles/globals.scss
View File

@ -59,8 +59,10 @@
--window-width: 90vw; --window-width: 90vw;
--window-height: 90vh; --window-height: 90vh;
--sidebar-width: 300px; --sidebar-width: 300px;
--sidebar-collapse-width: 75px;
--window-content-width: calc(100% - var(--sidebar-width)); --window-content-width: calc(100% - var(--sidebar-width));
--message-max-width: 80%; --window-content-width-collapse: calc(100% - var(--sidebar-collapse-width));
--message-max-width: 90%;
--full-height: 100%; --full-height: 100%;
} }
@ -103,6 +105,7 @@ body {
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
background-color: var(--second); background-color: var(--second);
--sidebar-width: 100vw;
} }
} }