[front] - feat: toggle sidebar

front/components/assistant/conversation/ConversationLayout.tsx

@@ -79,7 +79,6 @@ export default function ConversationLayout({
         <AppLayout
           subscription={subscription}
           owner={owner}
-          isWideMode={!!conversation}
           pageTitle={
             conversation?.title
               ? `Dust - ${conversation?.title}`

front/components/assistant/conversation/input_bar/InputBar.tsx

@@ -375,8 +375,8 @@ export function FixedAssistantInputBar({
   disableAutoFocus?: boolean;
 }) {
   return (
-    <div className="4xl:px-0 fixed bottom-0 left-0 right-0 z-20 flex-initial lg:left-80">
-      <div className="mx-auto max-h-screen max-w-4xl pb-0 sm:pb-8">
+    <div className="4xl:px-0 fixed bottom-0 z-20 w-full flex-initial">
+      <div className="max-h-screen max-w-4xl pb-0 sm:pb-8">
         <AssistantInputBar
           owner={owner}
           onSubmit={onSubmit}

front/components/assistant_builder/AssistantBuilder.tsx

@@ -545,7 +545,6 @@ export default function AssistantBuilder({
       <AppLayout
         subscription={subscription}
         hideSidebar
-        isWideMode
         owner={owner}
         gaTrackingId={gaTrackingId}
         topNavigationCurrent="assistants"

front/components/sparkle/AppLayout.tsx

@@ -1,4 +1,11 @@
-import { Banner, Item, Logo, Tab, XMarkIcon } from "@dust-tt/sparkle";
+import {
+  Banner,
+  CollapseButton,
+  Item,
+  Logo,
+  Tab,
+  XMarkIcon,
+} from "@dust-tt/sparkle";
 import type { SubscriptionType, WorkspaceType } from "@dust-tt/types";
 import { Dialog, Transition } from "@headlessui/react";
 import { Bars3Icon } from "@heroicons/react/20/solid";
@@ -7,7 +14,14 @@ import Link from "next/link";
 import type { NextRouter } from "next/router";
 import { useRouter } from "next/router";
 import Script from "next/script";
-import React, { Fragment, useContext, useEffect, useState } from "react";
+import React, {
+  Fragment,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 
 import { CONVERSATION_PARENT_SCROLL_DIV_ID } from "@app/components/assistant/conversation/lib";
 import type {
@@ -26,6 +40,36 @@ import { classNames } from "@app/lib/utils";
  */
 const SHOW_INCIDENT_BANNER = false;
 
+function ToggleSideBarButton({
+  navigationBarOpen,
+  toggleNavigationBarVisibility,
+}: {
+  navigationBarOpen: boolean;
+  toggleNavigationBarVisibility: (open: boolean) => void;
+}) {
+  const buttonRef = useRef<HTMLDivElement>(null);
+  const [direction, setDirection] = useState<"left" | "right">("left");
+
+  const handleClick = useCallback(() => {
+    toggleNavigationBarVisibility(!navigationBarOpen);
+    setDirection((prevDirection) =>
+      prevDirection === "left" ? "right" : "left"
+    );
+  }, [navigationBarOpen, toggleNavigationBarVisibility]);
+
+  return (
+    <div
+      ref={buttonRef}
+      onClick={handleClick}
+      className={`hidden lg:fixed lg:top-1/2 lg:flex lg:h-10 lg:w-5 ${
+        navigationBarOpen ? "lg:left-80" : "lg:left-2"
+      }`}
+    >
+      <CollapseButton direction={direction} />
+    </div>
+  );
+}
+
 function NavigationBar({
   owner,
   subscription,
@@ -191,7 +235,6 @@ export const appLayoutBack = async (
 export default function AppLayout({
   owner,
   subscription,
-  isWideMode = false,
   hideSidebar = false,
   topNavigationCurrent,
   subNavigation,
@@ -214,6 +257,7 @@ export default function AppLayout({
   children: React.ReactNode;
 }) {
   const { sidebarOpen, setSidebarOpen } = useContext(SidebarContext);
+  const [navigationBarOpen, setNavigationBarOpen] = useState(true);
   const [loaded, setLoaded] = useState(false);
   const router = useRouter();
   const user = useUser();
@@ -355,7 +399,7 @@ export default function AppLayout({
           </Transition.Root>
         )}
 
-        {!hideSidebar && (
+        {!hideSidebar && navigationBarOpen && (
           <div className="hidden lg:fixed lg:inset-y-0 lg:z-0 lg:flex lg:w-80 lg:flex-col">
             {loaded && (
               <NavigationBar
@@ -373,7 +417,7 @@ export default function AppLayout({
         <div
           className={classNames(
             "mt-0 h-full flex-1",
-            !hideSidebar ? "lg:pl-80" : ""
+            !hideSidebar ? (navigationBarOpen ? "lg:pl-80" : "lg:pl-0") : ""
           )}
         >
           <div
@@ -417,16 +461,18 @@ export default function AppLayout({
               titleChildren ? "" : "lg:pt-8"
             )}
           >
-            <div
-              className={classNames(
-                "mx-auto h-full",
-                isWideMode ? "w-full" : "max-w-4xl px-6"
-              )}
-            >
-              {loaded && children}
-            </div>
+            <div className="mx-auto h-full max-w-4xl">{loaded && children}</div>
           </main>
         </div>
+
+        <div>
+          <ToggleSideBarButton
+            navigationBarOpen={navigationBarOpen}
+            toggleNavigationBarVisibility={(isVisible) =>
+              setNavigationBarOpen(isVisible)
+            }
+          />
+        </div>
       </div>
       <>
         <Script

front/package.json

@@ -18,7 +18,7 @@
     "@amplitude/analytics-browser": "^2.5.2",
     "@amplitude/analytics-node": "^1.3.5",
     "@auth0/nextjs-auth0": "^3.5.0",
-    "@dust-tt/sparkle": "0.2.151",
+    "@dust-tt/sparkle": "0.2.152",
     "@dust-tt/types": "file:../types",
     "@emoji-mart/data": "^1.1.2",
     "@emoji-mart/react": "^1.1.1",

front/pages/w/[wId]/assistant/new.tsx

@@ -242,7 +242,7 @@ export default function AssistantNew({
           onClose={() => setConversationHelperModal(null)}
         />
       )}
-      <div className="flex h-full items-center pb-20">
+      <div className="flex h-full items-center px-6 pb-20">
         <div className="flex text-sm font-normal text-element-800">
           <Page.Vertical gap="md" align="left">
             {/* FEATURED AGENTS */}