From 919110a65578c53b0dc0dc68c0fa84c568310457 Mon Sep 17 00:00:00 2001
From: pablodanswer <pablo@danswer.ai>
Date: Tue, 20 Aug 2024 12:19:17 -0700
Subject: [PATCH] Untoggle sidebar fully on untoggling (#2179)

* add explicit untoggle

* add to all history sidebars

* add back commented out line

* add comment
---
 web/src/app/assistants/SidebarWrapper.tsx         | 15 +++++++++++++--
 web/src/app/chat/ChatPage.tsx                     | 14 +++++++++++++-
 .../app/chat/sessionSidebar/HistorySidebar.tsx    |  3 +++
 web/src/components/chat_search/Header.tsx         |  1 -
 web/src/components/header/LogoType.tsx            | 14 ++++++++++++--
 web/src/components/search/SearchSection.tsx       | 15 ++++++++++++++-
 6 files changed, 55 insertions(+), 7 deletions(-)

diff --git a/web/src/app/assistants/SidebarWrapper.tsx b/web/src/app/assistants/SidebarWrapper.tsx
index c027e05e62c5..682f5d3c07ef 100644
--- a/web/src/app/assistants/SidebarWrapper.tsx
+++ b/web/src/app/assistants/SidebarWrapper.tsx
@@ -42,8 +42,18 @@ export default function SidebarWrapper<T extends object>({
   size = "sm",
 }: SidebarWrapperProps<T>) {
   const [toggledSidebar, setToggledSidebar] = useState(initiallyToggled);
-
   const [showDocSidebar, setShowDocSidebar] = useState(false); // State to track if sidebar is open
+  // Used to maintain a "time out" for history sidebar so our existing refs can have time to process change
+  const [untoggled, setUntoggled] = useState(false);
+
+  const explicitlyUntoggle = () => {
+    setShowDocSidebar(false);
+
+    setUntoggled(true);
+    setTimeout(() => {
+      setUntoggled(false);
+    }, 200);
+  };
 
   const toggleSidebar = () => {
     Cookies.set(
@@ -103,7 +113,7 @@ export default function SidebarWrapper<T extends object>({
             duration-300
             ease-in-out
             ${
-              showDocSidebar || toggledSidebar
+              !untoggled && (showDocSidebar || toggledSidebar)
                 ? "opacity-100 w-[250px] translate-x-0"
                 : "opacity-0 w-[200px] pointer-events-none -translate-x-10"
             }`}
@@ -111,6 +121,7 @@ export default function SidebarWrapper<T extends object>({
         <div className="w-full relative">
           <HistorySidebar
             page={page}
+            explicitlyUntoggle={explicitlyUntoggle}
             ref={innerSidebarElementRef}
             toggleSidebar={toggleSidebar}
             toggled={toggledSidebar}
diff --git a/web/src/app/chat/ChatPage.tsx b/web/src/app/chat/ChatPage.tsx
index 52f92593463a..dbc361512a5d 100644
--- a/web/src/app/chat/ChatPage.tsx
+++ b/web/src/app/chat/ChatPage.tsx
@@ -1202,6 +1202,17 @@ export function ChatPage({
 
   const [showDocSidebar, setShowDocSidebar] = useState(false); // State to track if sidebar is open
 
+  // Used to maintain a "time out" for history sidebar so our existing refs can have time to process change
+  const [untoggled, setUntoggled] = useState(false);
+
+  const explicitlyUntoggle = () => {
+    setShowDocSidebar(false);
+
+    setUntoggled(true);
+    setTimeout(() => {
+      setUntoggled(false);
+    }, 200);
+  };
   const toggleSidebar = () => {
     Cookies.set(
       SIDEBAR_TOGGLED_COOKIE_NAME,
@@ -1393,13 +1404,14 @@ export function ChatPage({
                 duration-300
                 ease-in-out
                 ${
-                  showDocSidebar || toggledSidebar
+                  !untoggled && (showDocSidebar || toggledSidebar)
                     ? "opacity-100 w-[250px] translate-x-0"
                     : "opacity-0 w-[200px] pointer-events-none -translate-x-10"
                 }`}
             >
               <div className="w-full relative">
                 <HistorySidebar
+                  explicitlyUntoggle={explicitlyUntoggle}
                   stopGenerating={stopGeneration}
                   reset={() => setMessage("")}
                   page="chat"
diff --git a/web/src/app/chat/sessionSidebar/HistorySidebar.tsx b/web/src/app/chat/sessionSidebar/HistorySidebar.tsx
index a7189b434a4b..374ff4049b21 100644
--- a/web/src/app/chat/sessionSidebar/HistorySidebar.tsx
+++ b/web/src/app/chat/sessionSidebar/HistorySidebar.tsx
@@ -41,6 +41,7 @@ interface HistorySidebarProps {
   showShareModal?: (chatSession: ChatSession) => void;
   showDeleteModal?: (chatSession: ChatSession) => void;
   stopGenerating?: () => void;
+  explicitlyUntoggle: () => void;
 }
 
 export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
@@ -53,6 +54,7 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
       currentChatSession,
       folders,
       openedFolders,
+      explicitlyUntoggle,
       toggleSidebar,
       removeToggle,
       stopGenerating = () => null,
@@ -114,6 +116,7 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
             toggled={toggled}
             page={page}
             toggleSidebar={toggleSidebar}
+            explicitlyUntoggle={explicitlyUntoggle}
           />
           {page == "chat" && (
             <div className="mx-3 mt-4 gap-y-1 flex-col flex gap-x-1.5 items-center items-center">
diff --git a/web/src/components/chat_search/Header.tsx b/web/src/components/chat_search/Header.tsx
index 48a0ba42cc6b..0cb99745d826 100644
--- a/web/src/components/chat_search/Header.tsx
+++ b/web/src/components/chat_search/Header.tsx
@@ -73,7 +73,6 @@ export default function FunctionalHeader({
           toggleSidebar={toggleSidebar}
           handleNewChat={handleNewChat}
         />
-
         <div
           style={{ transition: "width 0.30s ease-out" }}
           className={`
diff --git a/web/src/components/header/LogoType.tsx b/web/src/components/header/LogoType.tsx
index b1ea82c45045..b4dcc8dae013 100644
--- a/web/src/components/header/LogoType.tsx
+++ b/web/src/components/header/LogoType.tsx
@@ -21,6 +21,7 @@ export default function LogoType({
   toggled,
   showArrow,
   assistantId,
+  explicitlyUntoggle = () => null,
 }: {
   hideOnMobile?: boolean;
   toggleSidebar?: () => void;
@@ -29,6 +30,7 @@ export default function LogoType({
   toggled?: boolean;
   showArrow?: boolean;
   assistantId?: number;
+  explicitlyUntoggle?: () => void;
 }) {
   const combinedSettings = useContext(SettingsContext);
   const enterpriseSettings = combinedSettings?.enterpriseSettings;
@@ -91,12 +93,20 @@ export default function LogoType({
           </Link>
         </Tooltip>
       )}
-      {showArrow && (
+      {showArrow && toggleSidebar && (
         <Tooltip
           delayDuration={0}
           content={toggled ? `Unpin sidebar` : "Pin sidebar"}
         >
-          <button className="mr-3 my-auto ml-auto" onClick={toggleSidebar}>
+          <button
+            className="mr-3 my-auto ml-auto"
+            onClick={() => {
+              toggleSidebar();
+              if (toggled) {
+                explicitlyUntoggle();
+              }
+            }}
+          >
             {!toggled && !combinedSettings?.isMobile ? (
               <RightToLineIcon />
             ) : (
diff --git a/web/src/components/search/SearchSection.tsx b/web/src/components/search/SearchSection.tsx
index eedc74a16132..264803355c17 100644
--- a/web/src/components/search/SearchSection.tsx
+++ b/web/src/components/search/SearchSection.tsx
@@ -512,6 +512,18 @@ export const SearchSection = ({
   const [firstSearch, setFirstSearch] = useState(true);
   const [searchState, setSearchState] = useState<searchState>("input");
 
+  // Used to maintain a "time out" for history sidebar so our existing refs can have time to process change
+  const [untoggled, setUntoggled] = useState(false);
+
+  const explicitlyUntoggle = () => {
+    setShowDocSidebar(false);
+
+    setUntoggled(true);
+    setTimeout(() => {
+      setUntoggled(false);
+    }, 200);
+  };
+
   useSidebarVisibility({
     toggledSidebar,
     sidebarElementRef,
@@ -600,7 +612,7 @@ export const SearchSection = ({
             duration-300 
             ease-in-out
             ${
-              showDocSidebar || toggledSidebar
+              !untoggled && (showDocSidebar || toggledSidebar)
                 ? "opacity-100 w-[250px] translate-x-0"
                 : "opacity-0 w-[200px] pointer-events-none -translate-x-10"
             }
@@ -608,6 +620,7 @@ export const SearchSection = ({
         >
           <div className="w-full relative">
             <HistorySidebar
+              explicitlyUntoggle={explicitlyUntoggle}
               reset={() => setQuery("")}
               page="search"
               ref={innerSidebarElementRef}