feat: collapsible sidebar

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] =
+  const [
-    useChatStore((state) => [
+    sidebarCollapse,
-      state.sessions,
+    sessions,
-      state.currentSessionIndex,
+    selectedIndex,
-      state.selectSession,
+    selectSession,
-      state.removeSession,
+    removeSession,
-      state.moveSession,
+    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">
+      {sidebarCollapse && (
-        {(provided) => (
+        <div className={styles["gpt-logo-collapse"]}>
-          <div
+          <BotIcon />
-            className={styles["chat-list"]}
+        </div>
-            ref={provided.innerRef}
+      )}
-            {...provided.droppableProps}
+      <DragDropContext onDragEnd={onDragEnd}>
-          >
+        <Droppable droppableId="chat-list">
-            {sessions.map((item, i) => (
+          {(provided: any) => (
-              <ChatItem
+            <div
-                title={item.topic}
+              className={styles["chat-list"]}
-                time={item.lastUpdate}
+              ref={provided.innerRef}
-                count={item.messages.length}
+              {...provided.droppableProps}
-                key={item.id}
+            >
-                id={item.id}
+              {sessions.map((item, i) => (
-                index={i}
+                <ChatItem
-                selected={i === selectedIndex}
+                  title={item.topic}
-                onClick={() => selectSession(i)}
+                  time={item.lastUpdate}
-                onDelete={() => chatStore.deleteSession(i)}
+                  count={item.messages.length}
-              />
+                  key={item.id}
-            ))}
+                  id={item.id}
-            {provided.placeholder}
+                  index={i}
-          </div>
+                  selected={i === selectedIndex}
-        )}
+                  onClick={() => selectSession(i)}
-      </Droppable>
+                  onDelete={chatStore.deleteSession}
-    </DragDropContext>
+                />
+              ))}
+
+              {provided.placeholder}
+            </div>
+          )}
+        </Droppable>
+      </DragDropContext>
+    </>
   );
 }

app/components/chat.tsx

@@ -400,17 +400,17 @@ export function ChatActions(props: {
   );
 }
 
-export function Chat(props: {
+export function Chat() {
-  showSideBar?: () => void;
-  sideBarShowing?: boolean;
-}) {
   type RenderMessage = Message & { preview?: boolean };
 
   const chatStore = useChatStore();
-  const [session, sessionIndex] = useChatStore((state) => [
+  const [sidebarCollapse, setSideBarCollapse, session, sessionIndex] =
-    state.currentSession(),
+    useChatStore((state) => [
-    state.currentSessionIndex,
+      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

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;

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(
+  const [
-    (state) => [
+    sidebarCollapse,
-      state.newSession,
+    setSideBarCollapse,
-      state.currentSessionIndex,
+    createNewSession,
-      state.removeSession,
+    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"]}>
+        {!sidebarCollapse && (
-          <div className={styles["sidebar-title"]}>ChatGPT Next</div>
+          <div className={styles["sidebar-header"]}>
-          <div className={styles["sidebar-sub-title"]}>
+            <div className={styles["sidebar-title"]}>ChatGPT Next</div>
-            Build your own AI assistant.
+            <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>
-
+        {sidebarCollapse ? (
-        <div className={styles["sidebar-tail"]}>
+          <div className={styles["sidebar-tail-collapse"]}>
-          <div className={styles["sidebar-actions"]}>
+            <div className={styles["sidebar-actions-collapse"]}>
-            <div className={styles["sidebar-action"] + " " + styles.mobile}>
+              <div className={styles["sidebar-action-collapse"]}>
-              <IconButton
+                <IconButton
-                icon={<CloseIcon />}
+                  icon={<RightIcon />}
-                onClick={chatStore.deleteSession}
+                  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);
+                  createNewSession();
-                  setShowSideBar(false);
+                  setSideBarCollapse(true);
                 }}
                 shadow
               />
             </div>
-            <div className={styles["sidebar-action"]}>
+          </div>
-              <a href={REPO_URL} target="_blank">
+        ) : (
-                <IconButton icon={<GithubIcon />} shadow />
+          <div className={styles["sidebar-tail"]}>
-              </a>
+            <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
-      <div className={styles["window-content"]}>
+        className={
+          sidebarCollapse
+            ? styles["window-content-collapse"]
+            : styles["window-content"]
+        }
+      >
         {openSettings ? (
           <Settings
             closeSettings={() => {
               setOpenSettings(false);
-              setShowSideBar(true);
+              setSideBarCollapse(false);
             }}
           />
         ) : (
-          <Chat
+          <Chat key="chat" />
-            key="chat"
-            showSideBar={() => setShowSideBar(true)}
-            sideBarShowing={showSideBar}
-          />
         )}
       </div>
     </div>

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>

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>

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,

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;
   }
 }