sidebar collapsed properly

2023-04-01 10:26:46 +08:00 · 2023-04-01 10:26:46 +08:00 · 045dc0c63e
parent 8b4db412d8
commit 045dc0c63e
8 changed files with 5462 additions and 7693 deletions
--- a/app/components/home.module.scss
+++ b/app/components/home.module.scss
@ -38,6 +38,17 @@
  }
 }

+.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);
@ -93,6 +104,9 @@
  padding-top: 20px;
  padding-bottom: 20px;
 }
+.sidebar-header-collapse {
+  display: none;
+}

 .sidebar-logo {
  position: absolute;
@ -100,6 +114,22 @@
  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.5;
+}
+
 .sidebar-title {
  font-size: 20px;
  font-weight: bold;
@ -114,10 +144,24 @@
  flex: 1;
  overflow: auto;
 }
+.chat-list-collapse {
+}

 .chat-list {
 }
-
+.chat-item-collapse {
+  padding: 4px 11px;
+  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);
@ -143,6 +187,9 @@
    transform: translateY(0px);
  }
 }
+.chat-item-collapse:hover {
+  background-color: var(--hover-color);
+}

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

+.chat-item-title-collapse {
+  display: hide;
+}
+
 .chat-item-delete {
  position: absolute;
  top: 10px;
@ -170,15 +221,29 @@
  opacity: 0;
 }

+.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;
@ -187,6 +252,10 @@
  margin-top: 8px;
 }

+.chat-item-info-collapse {
+  color: rgb(166, 166, 166);
+}
+
 .chat-item-count {
 }

@ -198,15 +267,28 @@
  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-actions-collapse {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.sidebar-action-collapse {
+  margin-top: 15px;
+}
 .sidebar-action:not(:last-child) {
  margin-right: 15px;
 }
-
 .chat {
  display: flex;
  flex-direction: column;
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@ -17,12 +17,14 @@ import AddIcon from "../icons/add.svg";
 import DeleteIcon from "../icons/delete.svg";
 import LoadingIcon from "../icons/three-dots.svg";
 import MenuIcon from "../icons/menu.svg";
-import CloseIcon from "../icons/close.svg";
+//import CloseIcon from "../icons/close.svg";
 import CopyIcon from "../icons/copy.svg";
 import DownloadIcon from "../icons/download.svg";
+import LeftIcon from "../icons/left.svg";
+import RightIcon from "../icons/right.svg";

 import { Message, SubmitKey, useChatStore, ChatSession } from "../store";
-import { showModal, showToast } from "./ui-lib";
+import { showModal } from "./ui-lib";
 import { copyToClipboard, downloadAs, isIOS, selectOrCopy } from "../utils";
 import Locale from "../locales";

@ -74,14 +76,36 @@ export function ChatItem(props: {
  time: string;
  selected: boolean;
 }) {
-  return (
+  const [sidebarCollapse] = useChatStore((state) => [state.sidebarCollapse]);
+  return sidebarCollapse ? (
+    <div
+      className={`${styles["chat-item-collapse"]} ${
+        props.selected && styles["chat-item-selected"]
+      }`}
+      onClick={props.onClick}
+    >
+      <div className={styles["chat-item-info-collapse"]}>
+        {Locale.ChatItem.ChatItemCount(props.count).replace(/[^0-9]/g, "")}
+      </div>
+      <div
+        className={
+          sidebarCollapse
+            ? styles["chat-item-delete-collapse"]
+            : styles["chat-item-delete"]
+        }
+        onClick={props.onDelete}
+      >
+        <DeleteIcon />
+      </div>
+    </div>
+  ) : (
    <div
      className={`${styles["chat-item"]} ${
        props.selected && styles["chat-item-selected"]
      }`}
      onClick={props.onClick}
    >
-      <div className={styles["chat-item-title"]}>{props.title}</div>
+      <div>{props.title}</div>
      <div className={styles["chat-item-info"]}>
        <div className={styles["chat-item-count"]}>
          {Locale.ChatItem.ChatItemCount(props.count)}
@ -96,29 +120,40 @@ export function ChatItem(props: {
 }

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

  return (
-    <div className={styles["chat-list"]}>
-      {sessions.map((item, i) => (
-        <ChatItem
-          title={item.topic}
-          time={item.lastUpdate}
-          count={item.messages.length}
-          key={i}
-          selected={i === selectedIndex}
-          onClick={() => selectSession(i)}
-          onDelete={() => removeSession(i)}
-        />
-      ))}
-    </div>
+    <>
+      <div className={styles["gpt-logo-collapse"]}>
+        {sidebarCollapse ? <BotIcon /> : null}
+      </div>
+
+      <div className={styles["chat-list-collapse"]}>
+        {sessions.map((item, i) => (
+          <ChatItem
+            title={item.topic}
+            time={item.lastUpdate}
+            count={item.messages.length}
+            key={i}
+            selected={i === selectedIndex}
+            onClick={() => selectSession(i)}
+            onDelete={() => removeSession(i)}
+          />
+        ))}
+      </div>
+    </>
  );
 }

@ -172,7 +207,7 @@ export function PromptHints(props: {

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

@ -475,7 +510,7 @@ export function Chat(props: {
              setAutoScroll(false);
              setTimeout(() => setPromptHints([]), 100);
            }}
-            autoFocus={!props?.sideBarShowing}
+            autoFocus={!props?.sidebarShowing}
          />
          <IconButton
            icon={<SendWhiteIcon />}
@ -588,6 +623,10 @@ export function Home() {
  );
  const loading = !useHasHydrated();
  const [showSideBar, setShowSideBar] = useState(true);
+  const [sidebarCollapse, setSideBarCollapse] = useChatStore((state) => [
+    state.sidebarCollapse,
+    state.setSidebarCollapse,
+  ]);

  // setting
  const [openSettings, setOpenSettings] = useState(false);
@ -606,16 +645,36 @@ export function Home() {
      }`}
    >
      <div
-        className={styles.sidebar + ` ${showSideBar && styles["sidebar-show"]}`}
+        className={
+          sidebarCollapse
+            ? ` ${styles["sidebar-collapse"]}`
+            : styles.sidebar + ` ${showSideBar && styles["sidebar-show"]}`
+        }
      >
-        <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
+          className={
+            sidebarCollapse
+              ? styles["sidebar-header-collapse"]
+              : styles["sidebar-header"]
+          }
+        >
+          {sidebarCollapse ? null : (
+            <>
+              <div className={styles["sidebar-title"]}>ChatGPT Next</div>
+              <div className={styles["sidebar-sub-title"]}>
+                Build your own AI assistant.
+              </div>
+            </>
+          )}
+          {sidebarCollapse ? (
+            <div className={styles["sidebar-logo-collapse"]}>
+              <ChatGptIcon />
+            </div>
+          ) : (
+            <div className={styles["sidebar-logo"]}>
+              <ChatGptIcon />
+            </div>
+          )}
        </div>

        <div
@ -628,8 +687,21 @@ export function Home() {
          <ChatList />
        </div>

-        <div className={styles["sidebar-tail"]}>
-          <div className={styles["sidebar-actions"]}>
+        <div
+          className={
+            sidebarCollapse
+              ? styles["sidebar-tail-collapse"]
+              : styles["sidebar-tail"]
+          }
+        >
+          <div
+            className={
+              sidebarCollapse
+                ? styles["sidebar-actions-collapse"]
+                : styles["sidebar-actions"]
+            }
+          >
+            {/*
            <div className={styles["sidebar-action"] + " " + styles.mobile}>
              <IconButton
                icon={<CloseIcon />}
@ -639,8 +711,37 @@ export function Home() {
                  }
                }}
              />
+							</div>*/}
+            <div
+              className={
+                sidebarCollapse
+                  ? styles["sidebar-action-collapse"]
+                  : styles["sidebar-action"]
+              }
+            >
+              {sidebarCollapse ? (
+                <IconButton
+                  icon={<RightIcon />}
+                  onClick={() => {
+                    setSideBarCollapse(false);
+                  }}
+                />
+              ) : (
+                <IconButton
+                  icon={<LeftIcon />}
+                  onClick={() => {
+                    setSideBarCollapse(true);
+                  }}
+                />
+              )}
            </div>
-            <div className={styles["sidebar-action"]}>
+            <div
+              className={
+                sidebarCollapse
+                  ? styles["sidebar-action-collapse"]
+                  : styles["sidebar-action"]
+              }
+            >
              <IconButton
                icon={<SettingsIcon />}
                onClick={() => {
@ -649,16 +750,26 @@ export function Home() {
                }}
              />
            </div>
-            <div className={styles["sidebar-action"]}>
+            <div
+              className={
+                sidebarCollapse
+                  ? styles["sidebar-action-collapse"]
+                  : styles["sidebar-action"]
+              }
+            >
              <a href={REPO_URL} target="_blank">
                <IconButton icon={<GithubIcon />} />
              </a>
            </div>
          </div>
-          <div>
+          <div
+            className={
+              sidebarCollapse ? styles["sidebar-action-collapse"] : undefined
+            }
+          >
            <IconButton
              icon={<AddIcon />}
-              text={Locale.Home.NewChat}
+              text={sidebarCollapse ? undefined : Locale.Home.NewChat}
              onClick={() => {
                createNewSession();
                setShowSideBar(false);
@ -680,7 +791,7 @@ export function Home() {
          <Chat
            key="chat"
            showSideBar={() => setShowSideBar(true)}
-            sideBarShowing={showSideBar}
+            sidebarShowing={showSideBar}
          />
        )}
      </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,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAAAXNSR0IB2cksfwAAAuJQTFRFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAmA8F4wAAAPZ0Uk5TABFTD8n+bAvC/28Kv3q+fQe2iAazBbGLA6iVAaaYAqOaoXvRE9cYk9kZ2hqF4B+D4SB+4iJy5CNw6Clu6Stj6ixh/e8zX/A0Vfs29D1R+vU/SPhBRvf2Q0T5SzxNOvNPOfL8WDHuWjDtXC7sZShoJuZqJeV3Ht55HN18F38W1RXUjs2QEMzKnA7InsCgqgQJvay0rrKwuAinuqSixAyZxQ2Wx5TOEonQhhSE2IBzcSFkYlZUUklHRTsyLy3rJ+ck3x3c1tPBtY+N0nh2a2lmXVtQOEDjYM/Gw7u5t6+tq6mfnYwbZ15ZV05MSkI+8Tc1KnSBh5uXHrV20gAABzpJREFUeJztnXmU1nMYxWeqV/0aMovh1VujZMrWIoqIiChlkKQky9gpe0SS3VgjxZBWiWlsIaEs2Xci+x7Z9+V/h5Sa7u+cJ/ec557jfT7/f865386pps5z76+gIAiCIAiCIAiCIAiCwJ/CRlpfTeMmmXWUvpqmzZIk01znqylaN/mL9VS+mqIWyXLW1/hqikuSFZQqfDVlGyQJ8wLWV1O+YbIqG3n7arIbJ6vTMufqq8m2ShrSusLRV5PdZI38SdLG/gLWV1PRFuRPkk29fDW51jB/u82cfDW5ljB/ZXsnX02uA8y/+RZOvpxSmH/Lrbx8NVvD/B07eflqOsP8Xbbx8tV0hfm33c7LV9MN5u++vZevZgeYv8eOXr6anWD+njt7+Wp2yaD8vXb18tXs1hvl330PL19NH5h/z728fDV9+8H8e3v5ahrB/P0HePlq9qlC+ffdz8tXs/9AmP8AL1/NoANR/sEHeflqhsD8Qw/28tUM6w/zH+Llqxl+KMpfdZiXr+bwI1D+6iO9fDVHHQ3zH+Plqzn2OJj/eC9fzQknovyZEV6+mpE9YP6TvHw1J58C85/q5as57XSY33zUxfpqOnVE+ZMzvHw1o86E+c/y8tWMPhvmP8fLVzOmEuY/18tXM/Y8mN98yMT6asadD/Nf4OWrKbwQ5r/Iy1dz8SUwfxvrGRvrq2l8Kcx/mTU/66upuRzmv8J6wsb6aoquhPmvsuZnfTUrD9hX5+prnHw146+F+a+z5md9NWUTYP7ry518NWUTYf6SYidfTfkkmP+GG518NdlamP8ma37WV5O9GeZv1tTJV1MxGea/ZYqTryY3FeafNt3JV5ObAfPPrHHy1eRuhfln3ebky5kN899uLnCwvpo7YP52dV6+mjkwf725wML6au6E+e0FFtZXcxfMby+wsL6au2F+e4GF9dU0h/m73OPlq7kXHrDbCyysr2YuPOC2F1hYXw0+YLcXWFhfzX3VKL+9wML6au7vh/LbCyysr+YBmN9eYGF9NfPgAbu9wML6ah7E+c0FFtZXMx8esNsLLKyvZgA8YLcXWFhfzUPwgN1eYGF9NfiA3V5gYX01D8MDdnuBhfXV4AN2e4GF9dU8Ag/Y7QUW1lezYCHKby+wsL6aRx+D+c0FFtZXgw/Y7QUW1lfzeHeU315gYX01o56A+c0FFtZXswge8NsLLKyvZvSTML+5wML6asY8hfLbCyysr2YsPmA3F1hYX824p2F+c4GF9dWkHLCbCyysryblgN1cYGF9NTVNYH5zgYX11TR9BuY3F1hYX80/C/YNMRdYWF9NygG7ucDC+mrKnoX5zQUW1lez2oL9v5gLLKyvpsGC/QrMBRbWV7PGgv1yzAUW1peT978Aef9bIP4QjL8G4weh+FE49R8zz3n5elL63M97+Xry/T9EUv9Lq6uXr6fuBfgC82dtWF9Pyq7Li16+npRln5e8fD142ynzspevB697ZV7x8vXgfbfMq16+Hrzw1/s1L19PyonL616+HrzyaT/yYn09+MyrarGXrwcv/doPPVlfT8qpq/nUl/X14LXvgfO8fD1vwHN3+7k/6+sZjl/wppevZxisfNgrP6yvZ8hg9AJ76Yv19eDal732x/p68Jd/7MVP1teDq5/26i/r68HlX3v5m/X14Pq3vf7P+nrwAMAS8wAE6+t5C05A2CdAWF8PHgGxfwWZ9fXgGRj7DBDr68FDQPYhKNbXg6eg6s1TYKyvB4+BVY7x8vXgObh25jlE1tfTGb7gbfMgJuvrwZOQswq9fD2l8AXvTPfy5eQ6wBdMs84is76eXEv4gnfNvwKkryfXGr7gvfFOvp6KtvAF71vH4VlfT8o8/AfWzyOwvp5sK/iCD60fyGB9PSkFiY/IgoXZ15NSkPiYLFiYfT0pBYlPsk6+nmJckPjUWpBgfT0pBYnPrC9gfT1RsMj3tnnsDaQWJJZ6+XryfXOkoKCOXI1hfT35vjsUy1MFBZ+T22Gsr2cRLkjY1+dIX0/KfuAXXr6elILEMi9fT75vkKYWJL708vWM7AFf8JWXrwcXJKq+9vL1pBQkvvHy9eCCxNBvvXw9Kd8T+M7L1zMcf1HCXrAgfT0pBYnvvXw9Q2A94IcfvXw9g3BB4icvX08ULBZXoRcsXODl68EFiV5kwcLu6+kLX9DzZy9fzzL8hcmRXr4eXJBYQhYs7L6eubAeYP/KLuvrGUEWJFhfTxQscEHC/q111tfzC3xBfXsvX8+v8AX2ggTr65kDX2AvSLC+nt/gC+wFCdbXMxu+YGaNly8npR5g3thkfT25GSB/rf0klvX15Kaukf/3tTmGZH09FZMb5P9j7fKzvp4GBYmla3sKyvp6srWr5C/19/WUT1qZ/z+dALK+nrKJy+Nnuml8PWUT/s7fXOXrKS7hDr9YX09Ri+o+Sl/PlPlaPwiCIAiCIAiCIAiCIAiCIAiCIAiCIAiC/zl/AmwZR7SlSeiAAAAAAElFTkSuQmCC"/>
+	</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,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAAAXNSR0IB2cksfwAAAuJQTFRFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAmA8F4wAAAPZ0Uk5TABFTD8n+bAvC/28Kv3q+fQe2iAazBbGLA6iVAaaYAqOaoXvRE9cYk9kZ2hqF4B+D4SB+4iJy5CNw6Clu6Stj6ixh/e8zX/A0Vfs29D1R+vU/SPhBRvf2Q0T5SzxNOvNPOfL8WDHuWjDtXC7sZShoJuZqJeV3Ht55HN18F38W1RXUjs2QEMzKnA7InsCgqgQJvay0rrKwuAinuqSixAyZxQ2Wx5TOEonQhhSE2IBzcSFkYlZUUklHRTsyLy3rJ+ck3x3c1tPBtY+N0nh2a2lmXVtQOEDjYM/Gw7u5t6+tq6mfnYwbZ15ZV05MSkI+8Tc1KnSBh5uXHrV20gAABzpJREFUeJztnXmU1nMYxWeqV/0aMovh1VujZMrWIoqIiChlkKQky9gpe0SS3VgjxZBWiWlsIaEs2Xci+x7Z9+V/h5Sa7u+cJ/ec557jfT7/f865386pps5z76+gIAiCIAiCIAiCIAiCwJ/CRlpfTeMmmXWUvpqmzZIk01znqylaN/mL9VS+mqIWyXLW1/hqikuSFZQqfDVlGyQJ8wLWV1O+YbIqG3n7arIbJ6vTMufqq8m2ShrSusLRV5PdZI38SdLG/gLWV1PRFuRPkk29fDW51jB/u82cfDW5ljB/ZXsnX02uA8y/+RZOvpxSmH/Lrbx8NVvD/B07eflqOsP8Xbbx8tV0hfm33c7LV9MN5u++vZevZgeYv8eOXr6anWD+njt7+Wp2yaD8vXb18tXs1hvl330PL19NH5h/z728fDV9+8H8e3v5ahrB/P0HePlq9qlC+ffdz8tXs/9AmP8AL1/NoANR/sEHeflqhsD8Qw/28tUM6w/zH+Llqxl+KMpfdZiXr+bwI1D+6iO9fDVHHQ3zH+Plqzn2OJj/eC9fzQknovyZEV6+mpE9YP6TvHw1J58C85/q5as57XSY33zUxfpqOnVE+ZMzvHw1o86E+c/y8tWMPhvmP8fLVzOmEuY/18tXM/Y8mN98yMT6asadD/Nf4OWrKbwQ5r/Iy1dz8SUwfxvrGRvrq2l8Kcx/mTU/66upuRzmv8J6wsb6aoquhPmvsuZnfTUrD9hX5+prnHw146+F+a+z5md9NWUTYP7ry518NWUTYf6SYidfTfkkmP+GG518NdlamP8ma37WV5O9GeZv1tTJV1MxGea/ZYqTryY3FeafNt3JV5ObAfPPrHHy1eRuhfln3ebky5kN899uLnCwvpo7YP52dV6+mjkwf725wML6au6E+e0FFtZXcxfMby+wsL6au2F+e4GF9dU0h/m73OPlq7kXHrDbCyysr2YuPOC2F1hYXw0+YLcXWFhfzX3VKL+9wML6au7vh/LbCyysr+YBmN9eYGF9NfPgAbu9wML6ah7E+c0FFtZXMx8esNsLLKyvZgA8YLcXWFhfzUPwgN1eYGF9NfiA3V5gYX01D8MDdnuBhfXV4AN2e4GF9dU8Ag/Y7QUW1lezYCHKby+wsL6aRx+D+c0FFtZXgw/Y7QUW1lfzeHeU315gYX01o56A+c0FFtZXswge8NsLLKyvZvSTML+5wML6asY8hfLbCyysr2YsPmA3F1hYX824p2F+c4GF9dWkHLCbCyysryblgN1cYGF9NTVNYH5zgYX11TR9BuY3F1hYX80/C/YNMRdYWF9NygG7ucDC+mrKnoX5zQUW1lez2oL9v5gLLKyvpsGC/QrMBRbWV7PGgv1yzAUW1peT978Aef9bIP4QjL8G4weh+FE49R8zz3n5elL63M97+Xry/T9EUv9Lq6uXr6fuBfgC82dtWF9Pyq7Li16+npRln5e8fD142ynzspevB697ZV7x8vXgfbfMq16+Hrzw1/s1L19PyonL616+HrzyaT/yYn09+MyrarGXrwcv/doPPVlfT8qpq/nUl/X14LXvgfO8fD1vwHN3+7k/6+sZjl/wppevZxisfNgrP6yvZ8hg9AJ76Yv19eDal732x/p68Jd/7MVP1teDq5/26i/r68HlX3v5m/X14Pq3vf7P+nrwAMAS8wAE6+t5C05A2CdAWF8PHgGxfwWZ9fXgGRj7DBDr68FDQPYhKNbXg6eg6s1TYKyvB4+BVY7x8vXgObh25jlE1tfTGb7gbfMgJuvrwZOQswq9fD2l8AXvTPfy5eQ6wBdMs84is76eXEv4gnfNvwKkryfXGr7gvfFOvp6KtvAF71vH4VlfT8o8/AfWzyOwvp5sK/iCD60fyGB9PSkFiY/IgoXZ15NSkPiYLFiYfT0pBYlPsk6+nmJckPjUWpBgfT0pBYnPrC9gfT1RsMj3tnnsDaQWJJZ6+XryfXOkoKCOXI1hfT35vjsUy1MFBZ+T22Gsr2cRLkjY1+dIX0/KfuAXXr6elILEMi9fT75vkKYWJL708vWM7AFf8JWXrwcXJKq+9vL1pBQkvvHy9eCCxNBvvXw9Kd8T+M7L1zMcf1HCXrAgfT0pBYnvvXw9Q2A94IcfvXw9g3BB4icvX08ULBZXoRcsXODl68EFiV5kwcLu6+kLX9DzZy9fzzL8hcmRXr4eXJBYQhYs7L6eubAeYP/KLuvrGUEWJFhfTxQscEHC/q111tfzC3xBfXsvX8+v8AX2ggTr65kDX2AvSLC+nt/gC+wFCdbXMxu+YGaNly8npR5g3thkfT25GSB/rf0klvX15Kaukf/3tTmGZH09FZMb5P9j7fKzvp4GBYmla3sKyvp6srWr5C/19/WUT1qZ/z+dALK+nrKJy+Nnuml8PWUT/s7fXOXrKS7hDr9YX09Ri+o+Sl/PlPlaPwiCIAiCIAiCIAiCIAiCIAiCIAiCIAiC/zl/AmwZR7SlSeiAAAAAAElFTkSuQmCC"/>
+	</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
@ -204,6 +204,8 @@ interface ChatStore {
  resetConfig: () => void;
  updateConfig: (updater: (config: ChatConfig) => void) => void;
  clearAllData: () => void;
+  sidebarCollapse: boolean;
+  setSidebarCollapse: (value: boolean) => void;
 }

 function countMessages(msgs: Message[]) {
@ -480,6 +482,12 @@ 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
@ -51,6 +51,7 @@
  --window-width: 90vw;
  --window-height: 90vh;
  --sidebar-width: 300px;
+  --sidebar-collapse-width: 8vh;
  --window-content-width: calc(100% - var(--sidebar-width));
  --message-max-width: 80%;
 }
@ -87,7 +88,7 @@ body {
  align-items: center;
  user-select: none;
  font-family: "Noto Sans SC", "SF Pro SC", "SF Pro Text", "SF Pro Icons",
-  "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+    "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;

  @media only screen and (max-width: 600px) {
    background-color: var(--second);
--- a/bun.lockb
+++ b/bun.lockb
--- a/yarn.lock
+++ b/yarn.lock