various niceties (#3348)

onyx-dot-app · Dec 5, 2024 · c81e704 · c81e704
1 parent 3266ef6
commit c81e704
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 21 deletions.
diff --git a/web/src/app/chat/ChatPage.tsx b/web/src/app/chat/ChatPage.tsx
@@ -982,7 +982,7 @@ export function ChatPage({
     ) {
       setDocumentSidebarToggled(false);
     }
-  }, [selectedDocuments, filtersToggled]);
+  }, [chatSessionIdRef.current]);
 
   useEffect(() => {
     adjustDocumentSidebarWidth(); // Adjust the width on initial render
@@ -1610,14 +1610,14 @@ export function ChatPage({
       }
     });
   };
-  const [showDocSidebar, setShowDocSidebar] = useState(false); // State to track if sidebar is open
+  const [showHistorySidebar, setShowHistorySidebar] = 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 [loadingError, setLoadingError] = useState<string | null>(null);
 
   const explicitlyUntoggle = () => {
-    setShowDocSidebar(false);
+    setShowHistorySidebar(false);
 
     setUntoggled(true);
     setTimeout(() => {
@@ -1636,7 +1636,7 @@ export function ChatPage({
     toggle();
   };
   const removeToggle = () => {
-    setShowDocSidebar(false);
+    setShowHistorySidebar(false);
     toggle(false);
   };
 
@@ -1646,8 +1646,8 @@ export function ChatPage({
   useSidebarVisibility({
     toggledSidebar,
     sidebarElementRef,
-    showDocSidebar,
-    setShowDocSidebar,
+    showDocSidebar: showHistorySidebar,
+    setShowDocSidebar: setShowHistorySidebar,
     setToggled: removeToggle,
     mobile: settings?.isMobile,
   });
@@ -2098,7 +2098,7 @@ export function ChatPage({
                 duration-300
                 ease-in-out
                 ${
-                  !untoggled && (showDocSidebar || toggledSidebar)
+                  !untoggled && (showHistorySidebar || toggledSidebar)
                     ? "opacity-100 w-[250px] translate-x-0"
                     : "opacity-0 w-[200px] pointer-events-none -translate-x-10"
                 }`}
@@ -2112,7 +2112,7 @@ export function ChatPage({
                   ref={innerSidebarElementRef}
                   toggleSidebar={toggleSidebar}
                   toggled={toggledSidebar && !settings?.isMobile}
-                  backgroundToggled={toggledSidebar || showDocSidebar}
+                  backgroundToggled={toggledSidebar || showHistorySidebar}
                   existingChats={chatSessions}
                   currentChatSession={selectedChatSession}
                   folders={folders}
@@ -2171,7 +2171,7 @@ export function ChatPage({
           )}
 
           <BlurBackground
-            visible={!untoggled && (showDocSidebar || toggledSidebar)}
+            visible={!untoggled && (showHistorySidebar || toggledSidebar)}
           />
 
           <div
@@ -2831,7 +2831,7 @@ export function ChatPage({
               )}
             </div>
           </div>
-          <FixedLogo backgroundToggled={toggledSidebar || showDocSidebar} />
+          <FixedLogo backgroundToggled={toggledSidebar || showHistorySidebar} />
         </div>
         {/* Right Sidebar - DocumentSidebar */}
       </div>

diff --git a/web/src/app/chat/documentSidebar/DocumentSelector.tsx b/web/src/app/chat/documentSidebar/DocumentSelector.tsx
@@ -12,7 +12,8 @@ export function DocumentSelector({
 }) {
   const [popupDisabled, setPopupDisabled] = useState(false);
 
-  function onClick() {
+  function onClick(e: React.MouseEvent<HTMLInputElement>) {
+    e.stopPropagation();
     if (!isDisabled) {
       setPopupDisabled(true);
       handleSelect();

diff --git a/web/src/components/chat_search/AssistantSelector.tsx b/web/src/components/chat_search/AssistantSelector.tsx
@@ -1,4 +1,10 @@
-import React, { useState, useRef, useCallback, useEffect } from "react";
+import React, {
+  useState,
+  useRef,
+  useCallback,
+  useEffect,
+  useContext,
+} from "react";
 import { useAssistants } from "@/components/context/AssistantsContext";
 import { useChatContext } from "@/components/context/ChatContext";
 import { useUser } from "@/components/user/UserProvider";
@@ -35,6 +41,7 @@ import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { restrictToParentElement } from "@dnd-kit/modifiers";
 import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from "../ui/drawer";
 import { truncateString } from "@/lib/utils";
+import { SettingsContext } from "../settings/SettingsProvider";
 
 const AssistantSelector = ({
   liveAssistant,
@@ -96,6 +103,8 @@ const AssistantSelector = ({
     localStorage.setItem("assistantSelectorSelectedTab", index.toString());
   };
 
+  const settings = useContext(SettingsContext);
+
   // Get the user's default model
   const userDefaultModel = user?.preferences.default_model;
 
@@ -280,7 +289,13 @@ const AssistantSelector = ({
 
   return (
     <div className="pointer-events-auto relative" ref={dropdownRef}>
-      <div className="flex justify-center">
+      <div
+        className={
+          (settings?.enterpriseSettings?.two_lines_for_chat_header
+            ? "mt-20 "
+            : "mt-8") + " flex justify-center"
+        }
+      >
         <div
           onClick={() => {
             setIsOpen(!isOpen);

diff --git a/web/src/components/chat_search/Header.tsx b/web/src/components/chat_search/Header.tsx
@@ -119,7 +119,6 @@ export default function FunctionalHeader({
               <FiShare2 size="18" />
             </div>
           )}
-
           <div className="mobile:hidden flex my-auto">
             <UserDropdown page={page} toggleUserSettings={toggleUserSettings} />
           </div>
@@ -137,11 +136,12 @@ export default function FunctionalHeader({
               <NewChatIcon size={20} />
             </div>
           </Link>
-          <div
-            style={{ transition: "width 0.30s ease-out" }}
-            className={`
-            mobile:hidden
-            flex-none 
+        </div>
+        <div
+          style={{ transition: "width 0.30s ease-out" }}
+          className={`
+            hidden
+            md:flex 
             mx-auto
             overflow-y-hidden 
             transition-all 
@@ -150,8 +150,7 @@ export default function FunctionalHeader({
             h-full
             ${documentSidebarToggled ? "w-[400px]" : "w-[0px]"}
             `}
-          />
-        </div>
+        />
 
         {page != "assistants" && (
           <div