feat: collapsible sidebar

2025-10-09 03:26:38 +08:00 · 2023-04-16 11:20:43 +08:00 · 2023-04-16 11:20:43 +08:00 · 37c62e1b7e
commit 37c62e1b7e
parent e0f6c801d5
8 changed files with 401 additions and 106 deletions
--- a/app/components/chat-list.tsx
+++ b/app/components/chat-list.tsx
@ -1,5 +1,6 @@
 import DeleteIcon from "../icons/delete.svg";
 import styles from "./home.module.scss";
+import BotIcon from "../icons/bot.svg";
 import {
  DragDropContext,
  Droppable,
@ -22,7 +23,38 @@ export function ChatItem(props: {
  id: 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}>
      {(provided) => (
        <div
@ -51,14 +83,21 @@ export function ChatItem(props: {
 }

 export function ChatList() {
-  const [sessions, selectedIndex, selectSession, removeSession, moveSession] =
-    useChatStore((state) => [
-      state.sessions,
-      state.currentSessionIndex,
-      state.selectSession,
-      state.removeSession,
-      state.moveSession,
-    ]);
+  const [
+    sidebarCollapse,
+    sessions,
+    selectedIndex,
+    selectSession,
+    removeSession,
+    moveSession,
+  ] = useChatStore((state) => [
+    state.sidebarCollapse,
+    state.sessions,
+    state.currentSessionIndex,
+    state.selectSession,
+    state.removeSession,
+    state.moveSession,
+  ]);
  const chatStore = useChatStore();

  const onDragEnd: OnDragEndResponder = (result) => {
@ -78,31 +117,39 @@ export function ChatList() {
  };

  return (
-    <DragDropContext onDragEnd={onDragEnd}>
-      <Droppable droppableId="chat-list">
-        {(provided) => (
-          <div
-            className={styles["chat-list"]}
-            ref={provided.innerRef}
-            {...provided.droppableProps}
-          >
-            {sessions.map((item, i) => (
-              <ChatItem
-                title={item.topic}
-                time={item.lastUpdate}
-                count={item.messages.length}
-                key={item.id}
-                id={item.id}
-                index={i}
-                selected={i === selectedIndex}
-                onClick={() => selectSession(i)}
-                onDelete={() => chatStore.deleteSession(i)}
-              />
-            ))}
-            {provided.placeholder}
-          </div>
-        )}
-      </Droppable>
-    </DragDropContext>
+    <>
+      {sidebarCollapse && (
+        <div className={styles["gpt-logo-collapse"]}>
+          <BotIcon />
+        </div>
+      )}
+      <DragDropContext onDragEnd={onDragEnd}>
+        <Droppable droppableId="chat-list">
+          {(provided: any) => (
+            <div
+              className={styles["chat-list"]}
+              ref={provided.innerRef}
+              {...provided.droppableProps}
+            >
+              {sessions.map((item, i) => (
+                <ChatItem
+                  title={item.topic}
+                  time={item.lastUpdate}
+                  count={item.messages.length}
+                  key={item.id}
+                  id={item.id}
+                  index={i}
+                  selected={i === selectedIndex}
+                  onClick={() => selectSession(i)}
+                  onDelete={chatStore.deleteSession}
+                />
+              ))}
+
+              {provided.placeholder}
+            </div>
+          )}
+        </Droppable>
+      </DragDropContext>
+    </>
  );
 }
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@ -400,17 +400,17 @@ export function ChatActions(props: {
  );
 }

-export function Chat(props: {
-  showSideBar?: () => void;
-  sideBarShowing?: boolean;
-}) {
+export function Chat() {
  type RenderMessage = Message & { preview?: boolean };

  const chatStore = useChatStore();
-  const [session, sessionIndex] = useChatStore((state) => [
-    state.currentSession(),
-    state.currentSessionIndex,
-  ]);
+  const [sidebarCollapse, setSideBarCollapse, session, sessionIndex] =
+    useChatStore((state) => [
+      state.sidebarCollapse,
+      state.setSidebarCollapse,
+      state.currentSession(),
+      state.currentSessionIndex,
+    ]);
  const fontSize = useChatStore((state) => state.config.fontSize);

  const inputRef = useRef<HTMLTextAreaElement>(null);
@ -599,7 +599,7 @@ export function Chat(props: {

  // Auto focus
  useEffect(() => {
-    if (props.sideBarShowing && isMobileScreen()) return;
+    if (isMobileScreen() && sidebarCollapse) return;
    inputRef.current?.focus();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
@ -624,7 +624,9 @@ export function Chat(props: {
              icon={<ReturnIcon />}
              bordered
              title={Locale.Chat.Actions.ChatList}
-              onClick={props?.showSideBar}
+              onClick={() => {
+                setSideBarCollapse(!sidebarCollapse);
+              }}
            />
          </div>
          <div className={styles["window-action-button"]}>
@ -775,7 +777,7 @@ export function Chat(props: {
              setAutoScroll(false);
              setTimeout(() => setPromptHints([]), 500);
            }}
-            autoFocus={!props?.sideBarShowing}
+            autoFocus={sidebarCollapse}
            rows={inputRows}
          />
          <IconButton
--- a/app/components/home.module.scss
+++ b/app/components/home.module.scss
@ -39,7 +39,16 @@
    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 {
  top: 0;
  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 {
  width: var(--window-content-width);
  height: 100%;
@ -95,13 +110,22 @@

  .sidebar {
    position: absolute;
-    left: -100%;
+    //left: -100%;
    z-index: 1000;
    height: var(--full-height);
    transition: all ease 0.3s;
    box-shadow: none;
  }
+  .sidebar-collapse {
+    display: none;
+  }

+  .window-content-collapse {
+    width: var(--window-content-width);
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
  .sidebar-show {
    left: 0;
  }
@ -116,12 +140,29 @@
  padding-top: 20px;
  padding-bottom: 20px;
 }
-
+.sidebar-header-collapse {
+  display: none;
+}
 .sidebar-logo {
  position: absolute;
  right: 0;
  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 {
  font-size: 20px;
@ -141,6 +182,27 @@
 .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 {
  padding: 10px 14px;
  background-color: var(--white);
@ -155,6 +217,10 @@
  overflow: hidden;
 }

+.chat-item-collapse:hover {
+  background-color: var(--hover-color);
+}
+
 .chat-item:hover {
  background-color: var(--hover-color);
 }
@ -173,6 +239,10 @@
  white-space: nowrap;
 }

+.chat-item-title-collapse {
+  display: hide;
+}
+
 .chat-item-delete {
  position: absolute;
  top: 10px;
@ -181,16 +251,32 @@
  opacity: 0;
  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 {
  opacity: 0.5;
  right: 10px;
 }

+.chat-item-collapse:hover > .chat-item-delete-collapse {
+  opacity: 0.5;
+  right: 0px;
+}
+
 .chat-item:hover > .chat-item-delete:hover {
  opacity: 1;
 }

+.chat-item-collapse:hover > .chat-item-delete-collapse:hover {
+  opacity: 1;
+}
+
 .chat-item-info {
  display: flex;
  justify-content: space-between;
@ -199,6 +285,10 @@
  margin-top: 8px;
 }

+.chat-item-info-collapse {
+  color: rgb(166, 166, 166);
+}
+
 .chat-item-count,
 .chat-item-date {
  overflow: hidden;
@ -212,14 +302,45 @@
  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 {
  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;
 }

+.sidebar-action-collapse {
+  margin-top: 15px;
+}
+
+.sidebar-addIcon-collapse {
+  margin-top: 15px;
+}
+
 .chat {
  display: flex;
  flex-direction: column;
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@ -16,6 +16,9 @@ import AddIcon from "../icons/add.svg";
 import LoadingIcon from "../icons/three-dots.svg";
 import CloseIcon from "../icons/close.svg";

+import LeftIcon from "../icons/left.svg";
+import RightIcon from "../icons/right.svg";
+
 import { useChatStore } from "../store";
 import { getCSSVar, isMobileScreen } from "../utils";
 import Locale from "../locales";
@ -131,17 +134,21 @@ const useHasHydrated = () => {
 };

 function _Home() {
-  const [createNewSession, currentIndex, removeSession] = useChatStore(
-    (state) => [
-      state.newSession,
-      state.currentSessionIndex,
-      state.removeSession,
-    ],
-  );
+  const [
+    sidebarCollapse,
+    setSideBarCollapse,
+    createNewSession,
+    currentIndex,
+    removeSession,
+  ] = useChatStore((state) => [
+    state.sidebarCollapse,
+    state.setSidebarCollapse,
+    state.newSession,
+    state.currentSessionIndex,
+    state.removeSession,
+  ]);
  const chatStore = useChatStore();
  const loading = !useHasHydrated();
-  const [showSideBar, setShowSideBar] = useState(true);
-
  // setting
  const [openSettings, setOpenSettings] = useState(false);
  const config = useChatStore((state) => state.config);
@ -164,85 +171,163 @@ function _Home() {
      }`}
    >
      <div
-        className={styles.sidebar + ` ${showSideBar && styles["sidebar-show"]}`}
+        className={
+          sidebarCollapse ? styles["sidebar-collapse"] : styles["sidebar"]
+        }
      >
-        <div className={styles["sidebar-header"]}>
-          <div className={styles["sidebar-title"]}>ChatGPT Next</div>
-          <div className={styles["sidebar-sub-title"]}>
-            Build your own AI assistant.
+        {!sidebarCollapse && (
+          <div className={styles["sidebar-header"]}>
+            <div className={styles["sidebar-title"]}>ChatGPT Next</div>
+            <div className={styles["sidebar-sub-title"]}>
+              Build your own AI assistant.
+            </div>
+            <div className={styles["sidebar-logo"]}>
+              <ChatGptIcon />
+            </div>
          </div>
-          <div className={styles["sidebar-logo"]}>
-            <ChatGptIcon />
-          </div>
-        </div>
+        )}

        <div
          className={styles["sidebar-body"]}
          onClick={() => {
            setOpenSettings(false);
-            setShowSideBar(false);
+            if (window.innerWidth < 768) {
+              setSideBarCollapse(true);
+            }
          }}
        >
          <ChatList />
        </div>
-
-        <div className={styles["sidebar-tail"]}>
-          <div className={styles["sidebar-actions"]}>
-            <div className={styles["sidebar-action"] + " " + styles.mobile}>
-              <IconButton
-                icon={<CloseIcon />}
-                onClick={chatStore.deleteSession}
-              />
+        {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 className={styles["sidebar-action"]}>
+            <div>
              <IconButton
-                icon={<SettingsIcon />}
+                className={styles["sidebar-addIcon-collapse"]}
+                icon={<AddIcon />}
+                text={""}
                onClick={() => {
-                  setOpenSettings(true);
-                  setShowSideBar(false);
+                  createNewSession();
+                  setSideBarCollapse(true);
                }}
                shadow
              />
            </div>
-            <div className={styles["sidebar-action"]}>
-              <a href={REPO_URL} target="_blank">
-                <IconButton icon={<GithubIcon />} shadow />
-              </a>
+          </div>
+        ) : (
+          <div className={styles["sidebar-tail"]}>
+            <div className={styles["sidebar-actions"]}>
+              <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
+                  icon={<CloseIcon />}
+                  onClick={chatStore.deleteSession}
+                />
+              </div>
+              <div className={styles["sidebar-action"]}>
+                <IconButton
+                  icon={<SettingsIcon />}
+                  onClick={() => {
+                    setOpenSettings(true);
+                    setSideBarCollapse(true);
+                  }}
+                  shadow
+                />
+              </div>
+              <div className={styles["sidebar-action"]}>
+                <a href={REPO_URL} target="_blank">
+                  <IconButton icon={<GithubIcon />} shadow />
+                </a>
+              </div>
+            </div>
+            <div>
+              <IconButton
+                icon={<AddIcon />}
+                // Auto hide Text 'Next Chat' when sidebar width shrinks
+                text={
+                  !isMobileScreen()
+                    ? chatStore.config.sidebarWidth <= 340
+                      ? ""
+                      : Locale.Home.NewChat
+                    : Locale.Home.NewChat
+                }
+                onClick={() => {
+                  createNewSession();
+                  setSideBarCollapse(true);
+                }}
+                shadow
+              />
            </div>
          </div>
-          <div>
-            <IconButton
-              icon={<AddIcon />}
-              text={Locale.Home.NewChat}
-              onClick={() => {
-                createNewSession();
-                setShowSideBar(false);
-              }}
-              shadow
-            />
-          </div>
-        </div>
+        )}

        <div
          className={styles["sidebar-drag"]}
          onMouseDown={(e) => onDragMouseDown(e as any)}
        ></div>
      </div>
-
-      <div className={styles["window-content"]}>
+      <div
+        className={
+          sidebarCollapse
+            ? styles["window-content-collapse"]
+            : styles["window-content"]
+        }
+      >
        {openSettings ? (
          <Settings
            closeSettings={() => {
              setOpenSettings(false);
-              setShowSideBar(true);
+              setSideBarCollapse(false);
            }}
          />
        ) : (
-          <Chat
-            key="chat"
-            showSideBar={() => setShowSideBar(true)}
-            sideBarShowing={showSideBar}
-          />
+          <Chat key="chat" />
        )}
      </div>
    </div>
--- a/app/icons/left.svg
+++ b/app/icons/left.svg
@ -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>
--- a/app/icons/right.svg
+++ b/app/icons/right.svg
@ -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>
--- a/app/store/app.ts
+++ b/app/store/app.ts
@ -227,6 +227,8 @@ interface ChatStore {
  resetConfig: () => void;
  updateConfig: (updater: (config: ChatConfig) => void) => void;
  clearAllData: () => void;
+  sidebarCollapse: boolean;
+  setSidebarCollapse: (value: boolean) => void;
 }

 function countMessages(msgs: Message[]) {
@ -585,6 +587,13 @@ export const useChatStore = create<ChatStore>()(
          location.reload();
        }
      },
+
+      sidebarCollapse: false,
+      setSidebarCollapse(value) {
+        set({
+          sidebarCollapse: value,
+        });
+      },
    }),
    {
      name: LOCAL_KEY,
--- a/app/styles/globals.scss
+++ b/app/styles/globals.scss
@ -59,8 +59,10 @@
  --window-width: 90vw;
  --window-height: 90vh;
  --sidebar-width: 300px;
+  --sidebar-collapse-width: 75px;
  --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%;
 }

@ -103,6 +105,7 @@ body {

  @media only screen and (max-width: 600px) {
    background-color: var(--second);
+    --sidebar-width: 100vw;
  }
 }