From bf560625c9d6ea8383ae3f201706b46bd9c0b9cc Mon Sep 17 00:00:00 2001
From: Zhang Minghan <zmh13054618081@dingtalk.com>
Date: Wed, 25 Oct 2023 11:05:57 +0800
Subject: [PATCH] add user container in sidebar

---
 app/src/assets/home.less                  |  38 ++
 app/src/assets/main.less                  |   2 +
 app/src/assets/ui.less                    |   4 +-
 app/src/components/SelectGroup.tsx        |   7 +-
 app/src/components/app/MenuBar.tsx        |  86 ++++
 app/src/components/app/NavBar.tsx         |  87 +---
 app/src/components/home/ModelSelector.tsx |  13 +-
 app/src/components/home/SideBar.tsx       | 555 ++++++++++++----------
 app/src/conf.ts                           |   2 +-
 9 files changed, 456 insertions(+), 338 deletions(-)
 create mode 100644 app/src/components/app/MenuBar.tsx

diff --git a/app/src/assets/home.less b/app/src/assets/home.less
index 4ffc3ce5..ab8ef1d6 100644
--- a/app/src/assets/home.less
+++ b/app/src/assets/home.less
@@ -53,6 +53,44 @@
     opacity: 1;
   }
 
+  .sidebar-menu {
+    height: max-content;
+    width: 100%;
+
+    .sidebar-wrapper {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      height: max-content;
+      width: calc(100% - 0.5rem);
+      margin: 0.25rem;
+
+      img {
+        width: 2.5rem;
+        height: 2.5rem;
+        padding: 0.2rem;
+        border-radius: .5rem;
+        transform: translateY(0.05rem);
+        flex-shrink: 0;
+      }
+
+      .username {
+        margin: 0 auto 0 8px;
+        color: hsl(var(--text));
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-size: 14px;
+        font-family: var(--font-family-normal);
+      }
+
+      svg {
+        color: hsl(var(--text-secondary));
+      }
+    }
+  }
+
   .conversation-list {
     position: relative;
     display: flex;
diff --git a/app/src/assets/main.less b/app/src/assets/main.less
index 4ac19bb9..96de0ac4 100644
--- a/app/src/assets/main.less
+++ b/app/src/assets/main.less
@@ -1,5 +1,6 @@
 @import "ui";
 @font-family: Andika,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
+@font-family-normal: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
 @line-height: 1.5;
 @font-weight: 400;
 
@@ -35,6 +36,7 @@ html, body {
   -moz-osx-font-smoothing: @-moz-osx-font-smoothing;
   -webkit-text-size-adjust: @-webkit-text-size-adjust;
   --font-family: @font-family;
+  --font-family-normal: @font-family-normal;
 }
 
 * {
diff --git a/app/src/assets/ui.less b/app/src/assets/ui.less
index 59c7aa4e..ea4ea1af 100644
--- a/app/src/assets/ui.less
+++ b/app/src/assets/ui.less
@@ -65,8 +65,8 @@
       }
 
       &.badge-gold {
-        color: rgb(146, 114, 1) !important;
-        background: rgb(250, 230, 158) !important;
+        color: rgb(164, 128, 0) !important;
+        background: rgb(255, 231, 145) !important;
       }
     }
   }
diff --git a/app/src/components/SelectGroup.tsx b/app/src/components/SelectGroup.tsx
index ebcd432a..bf5a6e2b 100644
--- a/app/src/components/SelectGroup.tsx
+++ b/app/src/components/SelectGroup.tsx
@@ -12,7 +12,7 @@ import { Badge } from "./ui/badge.tsx";
 export type SelectItemBadgeProps = {
   variant: "default" | "gold";
   name: string;
-}
+};
 
 export type SelectItemProps = {
   name: string;
@@ -32,12 +32,11 @@ function GroupSelectItem(props: SelectItemProps) {
   return (
     <>
       {props.value}
-      {
-        props.badge &&
+      {props.badge && (
         <Badge className={`badge ml-1 badge-${props.badge.variant}`}>
           {props.badge.name}
         </Badge>
-      }
+      )}
     </>
   );
 }
diff --git a/app/src/components/app/MenuBar.tsx b/app/src/components/app/MenuBar.tsx
new file mode 100644
index 00000000..dbf43196
--- /dev/null
+++ b/app/src/components/app/MenuBar.tsx
@@ -0,0 +1,86 @@
+import { useTranslation } from "react-i18next";
+import { useDispatch, useSelector } from "react-redux";
+import { logout, selectUsername } from "../../store/auth.ts";
+import {
+  openDialog as openQuotaDialog,
+  quotaSelector,
+} from "../../store/quota.ts";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu.tsx";
+import { Button } from "../ui/button.tsx";
+import {
+  BadgeCent,
+  Boxes,
+  CalendarPlus,
+  Cloud,
+  ListStart,
+  Plug,
+} from "lucide-react";
+import { openDialog as openSub } from "../../store/subscription.ts";
+import { openDialog as openPackageDialog } from "../../store/package.ts";
+import { openDialog as openSharingDialog } from "../../store/sharing.ts";
+import { openDialog as openApiDialog } from "../../store/api.ts";
+
+type MenuBarProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+function MenuBar({ children, className }: MenuBarProps) {
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
+  const username = useSelector(selectUsername);
+  const quota = useSelector(quotaSelector);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
+      <DropdownMenuContent className={className} align={`end`}>
+        <DropdownMenuLabel className={`username`}>{username}</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={() => dispatch(openQuotaDialog())}>
+          <Cloud className={`h-4 w-4 mr-1`} />
+          {quota}
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => dispatch(openQuotaDialog())}>
+          <BadgeCent className={`h-4 w-4 mr-1`} />
+          {t("quota")}
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => dispatch(openSub())}>
+          <CalendarPlus className={`h-4 w-4 mr-1`} />
+          {t("sub.title")}
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => dispatch(openPackageDialog())}>
+          <Boxes className={`h-4 w-4 mr-1`} />
+          {t("pkg.title")}
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => dispatch(openSharingDialog())}>
+          <ListStart className={`h-4 w-4 mr-1`} />
+          {t("share.manage")}
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => dispatch(openApiDialog())}>
+          <Plug className={`h-4 w-4 mr-1`} />
+          {t("api.title")}
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem asChild>
+          <Button
+            size={`sm`}
+            className={`action-button`}
+            onClick={() => dispatch(logout())}
+          >
+            {t("logout")}
+          </Button>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export default MenuBar;
diff --git a/app/src/components/app/NavBar.tsx b/app/src/components/app/NavBar.tsx
index 6e04c679..a817bfae 100644
--- a/app/src/components/app/NavBar.tsx
+++ b/app/src/components/app/NavBar.tsx
@@ -2,37 +2,12 @@ import "@/assets/navbar.less";
 import { useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
 import {
-  logout,
   selectAuthenticated,
   selectUsername,
   validateToken,
 } from "../../store/auth.ts";
-import {
-  openDialog as openQuotaDialog,
-  quotaSelector,
-} from "../../store/quota.ts";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "../ui/dropdown-menu.tsx";
 import { Button } from "../ui/button.tsx";
-import {
-  BadgeCent,
-  Boxes,
-  CalendarPlus,
-  Cloud,
-  ListStart,
-  Menu,
-  Plug,
-} from "lucide-react";
-import { openDialog as openSub } from "../../store/subscription.ts";
-import { openDialog as openPackageDialog } from "../../store/package.ts";
-import { openDialog as openSharingDialog } from "../../store/sharing.ts";
-import { openDialog as openApiDialog } from "../../store/api.ts";
+import { Menu } from "lucide-react";
 import { useEffect } from "react";
 import { login, tokenField } from "../../conf.ts";
 import { toggleMenu } from "../../store/menu.ts";
@@ -40,62 +15,18 @@ import ProjectLink from "../ProjectLink.tsx";
 import ModeToggle from "../ThemeProvider.tsx";
 import I18nProvider from "../I18nProvider.tsx";
 import router from "../../router.tsx";
+import MenuBar from "./MenuBar.tsx";
 
-function MenuBar() {
-  const { t } = useTranslation();
-  const dispatch = useDispatch();
+function NavMenu() {
   const username = useSelector(selectUsername);
-  const quota = useSelector(quotaSelector);
 
   return (
     <div className={`avatar`}>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant={`ghost`} size={`icon`}>
-            <img src={`https://api.deeptrain.net/avatar/${username}`} alt="" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align={`end`}>
-          <DropdownMenuLabel className={`username`}>
-            {username}
-          </DropdownMenuLabel>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem onClick={() => dispatch(openQuotaDialog())}>
-            <Cloud className={`h-4 w-4 mr-1`} />
-            {quota}
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => dispatch(openQuotaDialog())}>
-            <BadgeCent className={`h-4 w-4 mr-1`} />
-            {t("quota")}
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => dispatch(openSub())}>
-            <CalendarPlus className={`h-4 w-4 mr-1`} />
-            {t("sub.title")}
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => dispatch(openPackageDialog())}>
-            <Boxes className={`h-4 w-4 mr-1`} />
-            {t("pkg.title")}
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => dispatch(openSharingDialog())}>
-            <ListStart className={`h-4 w-4 mr-1`} />
-            {t("share.manage")}
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={() => dispatch(openApiDialog())}>
-            <Plug className={`h-4 w-4 mr-1`} />
-            {t("api.title")}
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem asChild>
-            <Button
-              size={`sm`}
-              className={`action-button`}
-              onClick={() => dispatch(logout())}
-            >
-              {t("logout")}
-            </Button>
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
+      <MenuBar>
+        <Button variant={`ghost`} size={`icon`}>
+          <img src={`https://api.deeptrain.net/avatar/${username}`} alt="" />
+        </Button>
+      </MenuBar>
     </div>
   );
 }
@@ -129,7 +60,7 @@ function NavBar() {
         <ModeToggle />
         <I18nProvider />
         {auth ? (
-          <MenuBar />
+          <NavMenu />
         ) : (
           <Button size={`sm`} onClick={login}>
             {t("login")}
diff --git a/app/src/components/home/ModelSelector.tsx b/app/src/components/home/ModelSelector.tsx
index 61b2b916..4d565e35 100644
--- a/app/src/components/home/ModelSelector.tsx
+++ b/app/src/components/home/ModelSelector.tsx
@@ -8,7 +8,7 @@ import { useToast } from "../ui/use-toast.ts";
 import { useEffect } from "react";
 import { Model } from "../../conversation/types.ts";
 import { modelEvent } from "../../events/model.ts";
-import {isSubscribedSelector} from "../../store/subscription.ts";
+import { isSubscribedSelector } from "../../store/subscription.ts";
 
 function GetModel(name: string): Model {
   return supportModels.find((model) => model.id === name) as Model;
@@ -39,10 +39,13 @@ function ModelSelector() {
     (model: Model): SelectItemProps => ({
       name: model.id,
       value: model.name,
-      badge: (model.free || (subscription && model.id === "gpt-4")) ? {
-        variant: model.free ? "default" : "gold",
-        name: model.free ? "free" : "plus",
-      } : undefined,
+      badge:
+        model.free || (subscription && model.id === "gpt-4")
+          ? {
+              variant: model.free ? "default" : "gold",
+              name: model.free ? "free" : "plus",
+            }
+          : undefined,
     }),
   );
 
diff --git a/app/src/components/home/SideBar.tsx b/app/src/components/home/SideBar.tsx
index bbba7d24..84f84f57 100644
--- a/app/src/components/home/SideBar.tsx
+++ b/app/src/components/home/SideBar.tsx
@@ -1,7 +1,7 @@
 import { useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "../../store";
-import { selectAuthenticated } from "../../store/auth.ts";
+import { selectAuthenticated, selectUsername } from "../../store/auth.ts";
 import { selectCurrent, selectHistory } from "../../store/chat.ts";
 import { useRef, useState } from "react";
 import { ConversationInstance } from "../../conversation/types.ts";
@@ -22,7 +22,14 @@ import {
 } from "../../conversation/history.ts";
 import { Button } from "../ui/button.tsx";
 import { setMenu } from "../../store/menu.ts";
-import { Copy, Eraser, LogIn, Plus, RotateCw } from "lucide-react";
+import {
+  Copy,
+  Eraser,
+  LogIn,
+  MoreHorizontal,
+  Plus,
+  RotateCw,
+} from "lucide-react";
 import ConversationSegment from "./ConversationSegment.tsx";
 import {
   AlertDialog,
@@ -41,273 +48,325 @@ import {
 } from "../../conversation/sharing.ts";
 import { Input } from "../ui/input.tsx";
 import { login } from "../../conf.ts";
+import MenuBar from "../app/MenuBar.tsx";
+import { Separator } from "../ui/separator.tsx";
 
-function SideBar() {
+type Operation = {
+  target: ConversationInstance | null;
+  type: string;
+};
+
+type SidebarActionProps = {
+  setOperateConversation: (operation: Operation) => void;
+};
+
+type ConversationListProps = {
+  operateConversation: Operation;
+  setOperateConversation: (operation: Operation) => void;
+};
+
+function SidebarAction({ setOperateConversation }: SidebarActionProps) {
   const { t } = useTranslation();
   const dispatch = useDispatch();
-  const open = useSelector((state: RootState) => state.menu.open);
-  const auth = useSelector(selectAuthenticated);
-  const current = useSelector(selectCurrent);
-  const [operateConversation, setOperateConversation] = useState<{
-    target: ConversationInstance | null;
-    type: string;
-  }>({ target: null, type: "" });
   const { toast } = useToast();
-  const history: ConversationInstance[] = useSelector(selectHistory);
   const refresh = useRef(null);
-  const [shared, setShared] = useState<string>("");
   const [removeAll, setRemoveAll] = useState<boolean>(false);
-  useEffectAsync(async () => {
-    await updateConversationList(dispatch);
-  }, []);
 
-  // @ts-ignore
   return (
-    <div className={`sidebar ${open ? "open" : ""}`}>
-      {auth ? (
-        <div className={`sidebar-content`}>
-          <div className={`sidebar-action`}>
-            <Button
-              variant={`ghost`}
-              size={`icon`}
-              onClick={async () => {
-                await toggleConversation(dispatch, -1);
-                if (mobile) dispatch(setMenu(false));
+    <div className={`sidebar-action`}>
+      <Button
+        variant={`ghost`}
+        size={`icon`}
+        onClick={async () => {
+          await toggleConversation(dispatch, -1);
+          if (mobile) dispatch(setMenu(false));
+        }}
+      >
+        <Plus className={`h-4 w-4`} />
+      </Button>
+      <div className={`grow`} />
+      <AlertDialog open={removeAll} onOpenChange={setRemoveAll}>
+        <AlertDialogTrigger asChild>
+          <Button variant={`ghost`} size={`icon`}>
+            <Eraser className={`h-4 w-4`} />
+          </Button>
+        </AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {t("conversation.remove-all-title")}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {t("conversation.remove-all-description")}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t("conversation.cancel")}</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={async (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+
+                if (await deleteAllConversations(dispatch))
+                  toast({
+                    title: t("conversation.delete-success"),
+                    description: t("conversation.delete-success-prompt"),
+                  });
+                else
+                  toast({
+                    title: t("conversation.delete-failed"),
+                    description: t("conversation.delete-failed-prompt"),
+                  });
+
+                await updateConversationList(dispatch);
+                setOperateConversation({ target: null, type: "" });
+                setRemoveAll(false);
               }}
             >
-              <Plus className={`h-4 w-4`} />
-            </Button>
-            <div className={`grow`} />
-            <AlertDialog open={removeAll} onOpenChange={setRemoveAll}>
-              <AlertDialogTrigger asChild>
-                <Button variant={`ghost`} size={`icon`}>
-                  <Eraser className={`h-4 w-4`} />
-                </Button>
-              </AlertDialogTrigger>
-              <AlertDialogContent>
-                <AlertDialogHeader>
-                  <AlertDialogTitle>
-                    {t("conversation.remove-all-title")}
-                  </AlertDialogTitle>
-                  <AlertDialogDescription>
-                    {t("conversation.remove-all-description")}
-                  </AlertDialogDescription>
-                </AlertDialogHeader>
-                <AlertDialogFooter>
-                  <AlertDialogCancel>
-                    {t("conversation.cancel")}
-                  </AlertDialogCancel>
-                  <AlertDialogAction
-                    onClick={async (e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
+              {t("conversation.delete")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+      <Button
+        className={`refresh-action`}
+        variant={`ghost`}
+        size={`icon`}
+        id={`refresh`}
+        ref={refresh}
+        onClick={() => {
+          const hook = useAnimation(refresh, "active", 500);
+          updateConversationList(dispatch)
+            .catch(() =>
+              toast({
+                title: t("conversation.refresh-failed"),
+                description: t("conversation.refresh-failed-prompt"),
+              }),
+            )
+            .finally(hook);
+        }}
+      >
+        <RotateCw className={`h-4 w-4`} />
+      </Button>
+    </div>
+  );
+}
 
-                      if (await deleteAllConversations(dispatch))
-                        toast({
-                          title: t("conversation.delete-success"),
-                          description: t("conversation.delete-success-prompt"),
-                        });
-                      else
-                        toast({
-                          title: t("conversation.delete-failed"),
-                          description: t("conversation.delete-failed-prompt"),
-                        });
-                      setOperateConversation({ target: null, type: "" });
-                      setRemoveAll(false);
-                    }}
-                  >
-                    {t("conversation.delete")}
-                  </AlertDialogAction>
-                </AlertDialogFooter>
-              </AlertDialogContent>
-            </AlertDialog>
-            <Button
-              className={`refresh-action`}
-              variant={`ghost`}
-              size={`icon`}
-              id={`refresh`}
-              ref={refresh}
-              onClick={() => {
-                const hook = useAnimation(refresh, "active", 500);
-                updateConversationList(dispatch)
-                  .catch(() =>
-                    toast({
-                      title: t("conversation.refresh-failed"),
-                      description: t("conversation.refresh-failed-prompt"),
-                    }),
+function SidebarConversationList({
+  operateConversation,
+  setOperateConversation,
+}: ConversationListProps) {
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
+  const { toast } = useToast();
+  const history: ConversationInstance[] = useSelector(selectHistory);
+  const [shared, setShared] = useState<string>("");
+  const current = useSelector(selectCurrent);
+
+  return (
+    <>
+      <div className={`conversation-list`}>
+        {history.length ? (
+          history.map((conversation, i) => (
+            <ConversationSegment
+              operate={setOperateConversation}
+              conversation={conversation}
+              current={current}
+              key={i}
+            />
+          ))
+        ) : (
+          <div className={`empty`}>{t("conversation.empty")}</div>
+        )}
+      </div>
+      <AlertDialog
+        open={
+          operateConversation.type === "delete" && !!operateConversation.target
+        }
+        onOpenChange={(open) => {
+          if (!open) setOperateConversation({ target: null, type: "" });
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {t("conversation.remove-title")}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {t("conversation.remove-description")}
+              <strong className={`conversation-name`}>
+                {extractMessage(
+                  filterMessage(operateConversation?.target?.name || ""),
+                )}
+              </strong>
+              {t("end")}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t("conversation.cancel")}</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={async (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+
+                if (
+                  await deleteConversation(
+                    dispatch,
+                    operateConversation?.target?.id || -1,
                   )
-                  .finally(hook);
+                )
+                  toast({
+                    title: t("conversation.delete-success"),
+                    description: t("conversation.delete-success-prompt"),
+                  });
+                else
+                  toast({
+                    title: t("conversation.delete-failed"),
+                    description: t("conversation.delete-failed-prompt"),
+                  });
+                setOperateConversation({ target: null, type: "" });
               }}
             >
-              <RotateCw className={`h-4 w-4`} />
-            </Button>
-          </div>
-          <div className={`conversation-list`}>
-            {history.length ? (
-              history.map((conversation, i) => (
-                <ConversationSegment
-                  operate={setOperateConversation}
-                  conversation={conversation}
-                  current={current}
-                  key={i}
-                />
-              ))
-            ) : (
-              <div className={`empty`}>{t("conversation.empty")}</div>
-            )}
-          </div>
-          <AlertDialog
-            open={
-              operateConversation.type === "delete" &&
-              !!operateConversation.target
-            }
-            onOpenChange={(open) => {
-              if (!open) setOperateConversation({ target: null, type: "" });
-            }}
-          >
-            <AlertDialogContent>
-              <AlertDialogHeader>
-                <AlertDialogTitle>
-                  {t("conversation.remove-title")}
-                </AlertDialogTitle>
-                <AlertDialogDescription>
-                  {t("conversation.remove-description")}
-                  <strong className={`conversation-name`}>
-                    {extractMessage(
-                      filterMessage(operateConversation?.target?.name || ""),
-                    )}
-                  </strong>
-                  {t("end")}
-                </AlertDialogDescription>
-              </AlertDialogHeader>
-              <AlertDialogFooter>
-                <AlertDialogCancel>
-                  {t("conversation.cancel")}
-                </AlertDialogCancel>
-                <AlertDialogAction
-                  onClick={async (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
+              {t("conversation.delete")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
 
-                    if (
-                      await deleteConversation(
-                        dispatch,
-                        operateConversation?.target?.id || -1,
-                      )
-                    )
-                      toast({
-                        title: t("conversation.delete-success"),
-                        description: t("conversation.delete-success-prompt"),
-                      });
-                    else
-                      toast({
-                        title: t("conversation.delete-failed"),
-                        description: t("conversation.delete-failed-prompt"),
-                      });
-                    setOperateConversation({ target: null, type: "" });
-                  }}
-                >
-                  {t("conversation.delete")}
-                </AlertDialogAction>
-              </AlertDialogFooter>
-            </AlertDialogContent>
-          </AlertDialog>
+      <AlertDialog
+        open={
+          operateConversation.type === "share" && !!operateConversation.target
+        }
+        onOpenChange={(open) => {
+          if (!open) setOperateConversation({ target: null, type: "" });
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t("share.title")}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t("share.description")}
+              <strong className={`conversation-name`}>
+                {extractMessage(
+                  filterMessage(operateConversation?.target?.name || ""),
+                )}
+              </strong>
+              {t("end")}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t("conversation.cancel")}</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={async (e) => {
+                e.preventDefault();
+                e.stopPropagation();
 
-          <AlertDialog
-            open={
-              operateConversation.type === "share" &&
-              !!operateConversation.target
-            }
-            onOpenChange={(open) => {
-              if (!open) setOperateConversation({ target: null, type: "" });
-            }}
-          >
-            <AlertDialogContent>
-              <AlertDialogHeader>
-                <AlertDialogTitle>{t("share.title")}</AlertDialogTitle>
-                <AlertDialogDescription>
-                  {t("share.description")}
-                  <strong className={`conversation-name`}>
-                    {extractMessage(
-                      filterMessage(operateConversation?.target?.name || ""),
-                    )}
-                  </strong>
-                  {t("end")}
-                </AlertDialogDescription>
-              </AlertDialogHeader>
-              <AlertDialogFooter>
-                <AlertDialogCancel>
-                  {t("conversation.cancel")}
-                </AlertDialogCancel>
-                <AlertDialogAction
-                  onClick={async (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
+                const resp = await shareConversation(
+                  operateConversation?.target?.id || -1,
+                );
+                if (resp.status) setShared(getSharedLink(resp.data));
+                else
+                  toast({
+                    title: t("share.failed"),
+                    description: resp.message,
+                  });
 
-                    const resp = await shareConversation(
-                      operateConversation?.target?.id || -1,
-                    );
-                    if (resp.status) setShared(getSharedLink(resp.data));
-                    else
-                      toast({
-                        title: t("share.failed"),
-                        description: resp.message,
-                      });
+                setOperateConversation({ target: null, type: "" });
+              }}
+            >
+              {t("share.title")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
 
-                    setOperateConversation({ target: null, type: "" });
+      <AlertDialog
+        open={shared.length > 0}
+        onOpenChange={(open) => {
+          if (!open) {
+            setShared("");
+            setOperateConversation({ target: null, type: "" });
+          }
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t("share.success")}</AlertDialogTitle>
+            <AlertDialogDescription>
+              <div className={`share-wrapper mt-4 mb-2`}>
+                <Input value={shared} />
+                <Button
+                  variant={`default`}
+                  size={`icon`}
+                  onClick={async () => {
+                    await copyClipboard(shared);
+                    toast({
+                      title: t("share.copied"),
+                      description: t("share.copied-description"),
+                    });
                   }}
                 >
-                  {t("share.title")}
-                </AlertDialogAction>
-              </AlertDialogFooter>
-            </AlertDialogContent>
-          </AlertDialog>
+                  <Copy className={`h-4 w-4`} />
+                </Button>
+              </div>
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t("close")}</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={async (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                window.open(shared, "_blank");
+              }}
+            >
+              {t("share.view")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}
 
-          <AlertDialog
-            open={shared.length > 0}
-            onOpenChange={(open) => {
-              if (!open) {
-                setShared("");
-                setOperateConversation({ target: null, type: "" });
-              }
-            }}
-          >
-            <AlertDialogContent>
-              <AlertDialogHeader>
-                <AlertDialogTitle>{t("share.success")}</AlertDialogTitle>
-                <AlertDialogDescription>
-                  <div className={`share-wrapper mt-4 mb-2`}>
-                    <Input value={shared} />
-                    <Button
-                      variant={`default`}
-                      size={`icon`}
-                      onClick={async () => {
-                        await copyClipboard(shared);
-                        toast({
-                          title: t("share.copied"),
-                          description: t("share.copied-description"),
-                        });
-                      }}
-                    >
-                      <Copy className={`h-4 w-4`} />
-                    </Button>
-                  </div>
-                </AlertDialogDescription>
-              </AlertDialogHeader>
-              <AlertDialogFooter>
-                <AlertDialogCancel>{t("close")}</AlertDialogCancel>
-                <AlertDialogAction
-                  onClick={async (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    window.open(shared, "_blank");
-                  }}
-                >
-                  {t("share.view")}
-                </AlertDialogAction>
-              </AlertDialogFooter>
-            </AlertDialogContent>
-          </AlertDialog>
+function SidebarMenu() {
+  const username = useSelector(selectUsername);
+  return (
+    <div className={`sidebar-menu`}>
+      <Separator orientation={`horizontal`} className={`mb-2`} />
+      <MenuBar className={`menu-bar`}>
+        <Button variant={`ghost`} className={`sidebar-wrapper`}>
+          <img src={`https://api.deeptrain.net/avatar/${username}`} alt="" />
+          <span className={`username`}>{username}</span>
+          <MoreHorizontal className={`h-4 w-4`} />
+        </Button>
+      </MenuBar>
+    </div>
+  );
+}
+function SideBar() {
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
+  const open = useSelector((state: RootState) => state.menu.open);
+  const auth = useSelector(selectAuthenticated);
+  const [operateConversation, setOperateConversation] = useState<Operation>({
+    target: null,
+    type: "",
+  });
+  useEffectAsync(async () => {
+    await updateConversationList(dispatch);
+  }, []);
+
+  return (
+    <div className={`sidebar ${open ? "open" : ""}`}>
+      {auth ? (
+        <div className={`sidebar-content`}>
+          <SidebarAction setOperateConversation={setOperateConversation} />
+          <SidebarConversationList
+            operateConversation={operateConversation}
+            setOperateConversation={setOperateConversation}
+          />
+          <SidebarMenu />
         </div>
       ) : (
         <Button className={`login-action`} variant={`default`} onClick={login}>
diff --git a/app/src/conf.ts b/app/src/conf.ts
index 3a572a5c..c8521b57 100644
--- a/app/src/conf.ts
+++ b/app/src/conf.ts
@@ -1,7 +1,7 @@
 import axios from "axios";
 import { Model } from "./conversation/types.ts";
 
-export const version = "3.5.8";
+export const version = "3.5.9";
 export const dev: boolean = window.location.hostname === "localhost";
 export const deploy: boolean = true;
 export let rest_api: string = "http://localhost:8094";