From 264df3441b51067ed7158b959c6f95dd8c40cd25 Mon Sep 17 00:00:00 2001
From: pablonyx <pablo@danswer.ai>
Date: Wed, 11 Dec 2024 09:19:14 -0800
Subject: [PATCH] Various clean ups (#3413)

* tbd

* minor

* prettify

* update sidebar values
---
 web/src/app/chat/ChatBanner.tsx               |  12 +-
 web/src/app/chat/ChatPage.tsx                 |   2 +-
 .../app/chat/documentSidebar/ChatFilters.tsx  |   2 +-
 .../chat/sessionSidebar/HistorySidebar.tsx    |   2 +-
 .../app/chat/shared_chat_search/FixedLogo.tsx |   6 +-
 web/src/components/admin/ClientLayout.tsx     |   4 +-
 .../admin/connectors/AdminSidebar.tsx         |  40 +++---
 .../chat_search/AssistantSelector.tsx         |  24 ++--
 web/src/components/chat_search/Header.tsx     | 122 ++++++++++--------
 web/src/components/header/LogoType.tsx        |   9 +-
 10 files changed, 125 insertions(+), 98 deletions(-)

diff --git a/web/src/app/chat/ChatBanner.tsx b/web/src/app/chat/ChatBanner.tsx
index 59fc8bd32..3479b7f1e 100644
--- a/web/src/app/chat/ChatBanner.tsx
+++ b/web/src/app/chat/ChatBanner.tsx
@@ -60,7 +60,11 @@ export function ChatBanner() {
           <div className={`flex justify-center w-full overflow-hidden pr-8`}>
             <div
               ref={contentRef}
-              className={`overflow-hidden ${settings.enterpriseSettings.two_lines_for_chat_header ? "line-clamp-2" : "line-clamp-1"} text-center max-w-full`}
+              className={`overflow-hidden ${
+                settings.enterpriseSettings.two_lines_for_chat_header
+                  ? "line-clamp-2"
+                  : "line-clamp-1"
+              } text-center max-w-full`}
             >
               <MinimalMarkdown
                 className="prose text-sm max-w-full"
@@ -71,7 +75,11 @@ export function ChatBanner() {
           <div className="absolute top-0 left-0 invisible flex justify-center max-w-full">
             <div
               ref={fullContentRef}
-              className={`overflow-hidden invisible ${settings.enterpriseSettings.two_lines_for_chat_header ? "line-clamp-2" : "line-clamp-1"} text-center max-w-full`}
+              className={`overflow-hidden invisible ${
+                settings.enterpriseSettings.two_lines_for_chat_header
+                  ? "line-clamp-2"
+                  : "line-clamp-1"
+              } text-center max-w-full`}
             >
               <MinimalMarkdown
                 className="prose text-sm max-w-full"
diff --git a/web/src/app/chat/ChatPage.tsx b/web/src/app/chat/ChatPage.tsx
index 090cccb08..0fcdafc19 100644
--- a/web/src/app/chat/ChatPage.tsx
+++ b/web/src/app/chat/ChatPage.tsx
@@ -2230,7 +2230,7 @@ export function ChatPage({
                           ref={scrollableDivRef}
                         >
                           {liveAssistant && onAssistantChange && (
-                            <div className="z-20 fixed top-4 pointer-events-none left-0 w-full flex justify-center overflow-visible">
+                            <div className="z-20 fixed top-0 pointer-events-none left-0 w-full flex justify-center overflow-visible">
                               {!settings?.isMobile && (
                                 <div
                                   style={{ transition: "width 0.30s ease-out" }}
diff --git a/web/src/app/chat/documentSidebar/ChatFilters.tsx b/web/src/app/chat/documentSidebar/ChatFilters.tsx
index b6801b348..a5761e810 100644
--- a/web/src/app/chat/documentSidebar/ChatFilters.tsx
+++ b/web/src/app/chat/documentSidebar/ChatFilters.tsx
@@ -85,7 +85,7 @@ export const ChatFilters = forwardRef<HTMLDivElement, ChatFiltersProps>(
     return (
       <div
         id="danswer-chat-sidebar"
-        className={`relative py-2 max-w-full ${
+        className={`relative  max-w-full ${
           !modal ? "border-l h-full border-sidebar-border" : ""
         }`}
         onClick={(e) => {
diff --git a/web/src/app/chat/sessionSidebar/HistorySidebar.tsx b/web/src/app/chat/sessionSidebar/HistorySidebar.tsx
index 04f945353..3ab76d499 100644
--- a/web/src/app/chat/sessionSidebar/HistorySidebar.tsx
+++ b/web/src/app/chat/sessionSidebar/HistorySidebar.tsx
@@ -101,7 +101,7 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
             flex-col relative
             h-screen
             transition-transform 
-            pt-2`}
+            `}
         >
           <LogoType
             showArrow={true}
diff --git a/web/src/app/chat/shared_chat_search/FixedLogo.tsx b/web/src/app/chat/shared_chat_search/FixedLogo.tsx
index c7e7a7d2a..d05917b25 100644
--- a/web/src/app/chat/shared_chat_search/FixedLogo.tsx
+++ b/web/src/app/chat/shared_chat_search/FixedLogo.tsx
@@ -22,7 +22,7 @@ export default function FixedLogo({
     <>
       <Link
         href="/chat"
-        className="fixed cursor-pointer flex z-40 left-2.5 top-2"
+        className="fixed cursor-pointer flex z-40 left-4 top-2 h-8"
       >
         <div className="max-w-[200px] mobile:hidden flex items-center gap-x-1 my-auto">
           <div className="flex-none my-auto">
@@ -46,8 +46,8 @@ export default function FixedLogo({
           </div>
         </div>
       </Link>
-      <div className="mobile:hidden fixed left-2.5 bottom-4">
-        {/* <FiSidebar className="text-text-mobile-sidebar" /> */}
+      <div className="mobile:hidden fixed left-4 bottom-4">
+        <FiSidebar className="text-text-mobile-sidebar" />
       </div>
     </>
   );
diff --git a/web/src/components/admin/ClientLayout.tsx b/web/src/components/admin/ClientLayout.tsx
index 53130da99..c85a0f7fe 100644
--- a/web/src/components/admin/ClientLayout.tsx
+++ b/web/src/components/admin/ClientLayout.tsx
@@ -58,7 +58,7 @@ export function ClientLayout({
   return (
     <div className="h-screen overflow-y-hidden">
       <div className="flex h-full">
-        <div className="flex-none text-text-settings-sidebar bg-background-sidebar w-[250px] z-20 pt-4 pb-8 h-full border-r border-border miniscroll overflow-auto">
+        <div className="flex-none text-text-settings-sidebar bg-background-sidebar w-[250px] overflow-x-hidden z-20 pt-2 pb-8 h-full border-r border-border miniscroll overflow-auto">
           <AdminSidebar
             collections={[
               {
@@ -405,7 +405,7 @@ export function ClientLayout({
           />
         </div>
         <div className="pb-8 relative h-full overflow-y-auto w-full">
-          <div className="fixed bg-background left-0 gap-x-4 mb-8 px-4 py-2 w-full items-center flex justify-end">
+          <div className="fixed left-0 gap-x-4 px-4 top-2 h-8 px-2 w-full items-center flex justify-end">
             <UserDropdown />
           </div>
           <div className="pt-20 flex overflow-y-auto overflow-x-hidden h-full px-4 md:px-12">
diff --git a/web/src/components/admin/connectors/AdminSidebar.tsx b/web/src/components/admin/connectors/AdminSidebar.tsx
index a510a63fd..cb1dbca5e 100644
--- a/web/src/components/admin/connectors/AdminSidebar.tsx
+++ b/web/src/components/admin/connectors/AdminSidebar.tsx
@@ -38,31 +38,25 @@ export function AdminSidebar({ collections }: { collections: Collection[] }) {
   return (
     <div className="text-text-settings-sidebar pl-0">
       <nav className="space-y-2">
-        <div className="w-full justify-center mb-4 flex">
-          <div className="w-52">
-            <Link className="flex flex-col" href="/chat">
-              <div className="max-w-[200px] w-full flex gap-x-1 my-auto">
-                <div className="flex-none mb-auto">
-                  <Logo />
-                </div>
-                <div className="flex-grow min-w-0 my-auto">
-                  {enterpriseSettings && enterpriseSettings.application_name ? (
-                    <div className="w-full">
-                      <HeaderTitle backgroundToggled={true}>
-                        {enterpriseSettings.application_name}
-                      </HeaderTitle>
-                      {!NEXT_PUBLIC_DO_NOT_USE_TOGGLE_OFF_DANSWER_POWERED && (
-                        <p className="text-xs text-subtle">
-                          Powered by Danswer
-                        </p>
-                      )}
-                    </div>
-                  ) : (
-                    <HeaderTitle backgroundToggled={true}>Danswer</HeaderTitle>
+        <div className="w-full ml-4  h-8 justify-start mb-4 flex">
+          <div className="flex items-center gap-x-1 my-auto">
+            <div className="flex-none my-auto">
+              <Logo height={24} width={24} />
+            </div>
+            <div className="w-full">
+              {enterpriseSettings && enterpriseSettings.application_name ? (
+                <div>
+                  <HeaderTitle>
+                    {enterpriseSettings.application_name}
+                  </HeaderTitle>
+                  {!NEXT_PUBLIC_DO_NOT_USE_TOGGLE_OFF_DANSWER_POWERED && (
+                    <p className="text-xs text-subtle">Powered by Danswer</p>
                   )}
                 </div>
-              </div>
-            </Link>
+              ) : (
+                <HeaderTitle>Danswer</HeaderTitle>
+              )}
+            </div>
           </div>
         </div>
         <div className="flex w-full justify-center">
diff --git a/web/src/components/chat_search/AssistantSelector.tsx b/web/src/components/chat_search/AssistantSelector.tsx
index 61a39c506..69072f178 100644
--- a/web/src/components/chat_search/AssistantSelector.tsx
+++ b/web/src/components/chat_search/AssistantSelector.tsx
@@ -135,7 +135,7 @@ const AssistantSelector = ({
           </Tab>
           <Tab
             className={({ selected }) =>
-              `w-full py-2.5 text-sm leading-5 font-medium rounded-md
+              `w-full py-2.5  text-sm leading-5 font-medium rounded-md
                  ${
                    selected
                      ? "bg-white text-gray-700 shadow"
@@ -290,11 +290,14 @@ const AssistantSelector = ({
   return (
     <div className="pointer-events-auto relative" ref={dropdownRef}>
       <div
-        className={
-          (settings?.enterpriseSettings?.two_lines_for_chat_header
-            ? "mt-20 "
-            : "mt-8") + " flex justify-center"
-        }
+        className={`h-12 items-end flex justify-center 
+          ${
+            settings?.enterpriseSettings?.custom_header_content &&
+            (settings?.enterpriseSettings?.two_lines_for_chat_header
+              ? "mt-16 "
+              : "mt-10")
+          }
+        `}
       >
         <div
           onClick={() => {
@@ -307,20 +310,23 @@ const AssistantSelector = ({
           }}
           className="flex items-center gap-x-2 justify-between px-6 py-3 text-sm font-medium text-white bg-black rounded-full shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer"
         >
-          <div className="flex gap-x-2 items-center">
+          <div className="h-4 flex gap-x-2 items-center">
             <AssistantIcon assistant={liveAssistant} size="xs" />
             <span className="font-bold">{liveAssistant.name}</span>
           </div>
-          <div className="flex items-center">
+          <div className="h-4 flex items-center">
             <span className="mr-2 text-xs">
               {truncateString(getDisplayNameForModel(currentLlm), 30)}
             </span>
             <FiChevronDown
-              className={`w-5 h-5 text-white transition-transform duration-300 transform ${
+              className={`w-3 h-3 text-white transition-transform duration-300 transform ${
                 isOpen ? "rotate-180" : ""
               }`}
               aria-hidden="true"
             />
+            <div className="invisible w-0">
+              <AssistantIcon assistant={liveAssistant} size="xs" />
+            </div>
           </div>
         </div>
       </div>
diff --git a/web/src/components/chat_search/Header.tsx b/web/src/components/chat_search/Header.tsx
index de0f4699f..40ed344a5 100644
--- a/web/src/components/chat_search/Header.tsx
+++ b/web/src/components/chat_search/Header.tsx
@@ -74,18 +74,18 @@ export default function FunctionalHeader({
     router.push(newChatUrl);
   };
   return (
-    <div className="left-0  sticky top-0 z-20 w-full relative flex">
-      <div className="mt-2 cursor-pointer text-text-700 relative flex w-full">
+    <div className="left-0 sticky top-0 z-20 w-full relative flex">
+      <div className="items-end flex  cursor-pointer text-text-700 relative flex w-full">
         <LogoType
           assistantId={currentChatSession?.persona_id}
           page={page}
           toggleSidebar={toggleSidebar}
           handleNewChat={handleNewChat}
         />
-
-        <div
-          style={{ transition: "width 0.30s ease-out" }}
-          className={`
+        <div className="mt-2 flex w-full h-8">
+          <div
+            style={{ transition: "width 0.30s ease-out" }}
+            className={`
             mobile:hidden
             flex-none 
             mx-auto
@@ -96,50 +96,67 @@ export default function FunctionalHeader({
             h-full
             ${sidebarToggled ? "w-[250px]" : "w-[0px]"}
             `}
-        />
-
-        <div className="w-full mobile:-mx-20 desktop:px-4">
-          <ChatBanner />
-        </div>
-
-        <div className="invisible">
-          <LogoType
-            page={page}
-            toggleSidebar={toggleSidebar}
-            handleNewChat={handleNewChat}
           />
-        </div>
 
-        <div className="absolute right-0 top-0 flex gap-x-2">
-          {setSharingModalVisible && (
-            <div
-              onClick={() => setSharingModalVisible(true)}
-              className="mobile:hidden my-auto rounded cursor-pointer hover:bg-hover-light"
-            >
-              <FiShare2 size="18" />
-            </div>
-          )}
-          <div className="mobile:hidden flex my-auto">
-            <UserDropdown page={page} toggleUserSettings={toggleUserSettings} />
+          <div className="w-full mobile:-mx-20 desktop:px-4">
+            <ChatBanner />
           </div>
-          <Link
-            className="desktop:hidden my-auto"
-            href={
-              `/${page}` +
-              (NEXT_PUBLIC_NEW_CHAT_DIRECTS_TO_SAME_PERSONA &&
-              currentChatSession
-                ? `?assistantId=${currentChatSession.persona_id}`
-                : "")
-            }
-          >
-            <div className="cursor-pointer mr-4 flex-none text-text-700 hover:text-text-600 transition-colors duration-300">
-              <NewChatIcon size={20} />
+
+          <div className="invisible">
+            <LogoType
+              page={page}
+              toggleSidebar={toggleSidebar}
+              handleNewChat={handleNewChat}
+            />
+          </div>
+
+          <div className="absolute right-0 top-2 h-8 items-end flex gap-x-2">
+            {setSharingModalVisible && (
+              <div
+                onClick={() => setSharingModalVisible(true)}
+                className="mobile:hidden p-1 my-auto rounded cursor-pointer hover:bg-hover-light"
+              >
+                <FiShare2 size="16" />
+              </div>
+            )}
+            <div className="mobile:hidden flex my-auto">
+              <UserDropdown
+                page={page}
+                toggleUserSettings={toggleUserSettings}
+              />
             </div>
-          </Link>
-        </div>
-        <div
-          style={{ transition: "width 0.30s ease-out" }}
-          className={`
+            <Link
+              className="desktop:hidden my-auto"
+              href={
+                `/${page}` +
+                (NEXT_PUBLIC_NEW_CHAT_DIRECTS_TO_SAME_PERSONA &&
+                currentChatSession
+                  ? `?assistantId=${currentChatSession.persona_id}`
+                  : "")
+              }
+            >
+              <div className="cursor-pointer mr-4 flex-none text-text-700 hover:text-text-600 transition-colors duration-300">
+                <NewChatIcon size={20} />
+              </div>
+            </Link>
+            <div
+              style={{ transition: "width 0.30s ease-out" }}
+              className={`
+              hidden
+              md:flex 
+              mx-auto
+              overflow-y-hidden 
+              transition-all 
+              duration-300 
+              ease-in-out
+              h-full
+              ${documentSidebarToggled ? "w-[400px]" : "w-[0px]"}
+              `}
+            />
+          </div>
+          <div
+            style={{ transition: "width 0.30s ease-out" }}
+            className={`
             hidden
             md:flex 
             mx-auto
@@ -150,11 +167,11 @@ export default function FunctionalHeader({
             h-full
             ${documentSidebarToggled ? "w-[400px]" : "w-[0px]"}
             `}
-        />
+          />
 
-        {page != "assistants" && (
-          <div
-            className={`
+          {page != "assistants" && (
+            <div
+              className={`
               h-20 absolute top-0 z-10 w-full sm:w-[90%] lg:w-[70%]
               bg-gradient-to-b via-50% z-[-1] from-background via-background to-background/10 flex
               transition-all duration-300 ease-in-out
@@ -164,8 +181,9 @@ export default function FunctionalHeader({
                   : "left-1/2 transform -translate-x-1/2"
               }
             `}
-          />
-        )}
+            />
+          )}
+        </div>
       </div>
     </div>
   );
diff --git a/web/src/components/header/LogoType.tsx b/web/src/components/header/LogoType.tsx
index b235d112d..6c0f32736 100644
--- a/web/src/components/header/LogoType.tsx
+++ b/web/src/components/header/LogoType.tsx
@@ -44,12 +44,12 @@ export default function LogoType({
     <div
       className={`${
         hideOnMobile && "mobile:hidden"
-      } z-[100] mb-auto shrink-0 flex items-center text-xl`}
+      } z-[100] mt-2 h-8 mb-auto shrink-0 flex items-center text-xl`}
     >
       {toggleSidebar && page == "chat" ? (
         <button
           onClick={() => toggleSidebar()}
-          className="pt-[2px] flex  gap-x-2 items-center ml-4 desktop:invisible mb-auto"
+          className="flex gap-x-2 items-center ml-4 desktop:invisible "
         >
           <FiSidebar size={20} className="text-text-mobile-sidebar" />
           {!showArrow && (
@@ -87,7 +87,7 @@ export default function LogoType({
           <Tooltip>
             <TooltipTrigger asChild>
               <Link
-                className="my-auto mobile:hidden"
+                className="my-auto pt-1 mobile:hidden"
                 href={
                   `/${page}` +
                   (NEXT_PUBLIC_NEW_CHAT_DIRECTS_TO_SAME_PERSONA && assistantId
@@ -103,7 +103,7 @@ export default function LogoType({
                   }
                 }}
               >
-                <div className="cursor-pointer ml-2 flex-none text-text-700 hover:text-text-600 transition-colors duration-300">
+                <div className="cursor-pointer ml-2 my-auto  text-text-700 hover:text-text-600 transition-colors duration-300">
                   <NewChatIcon size={20} />
                 </div>
               </Link>
@@ -112,6 +112,7 @@ export default function LogoType({
           </Tooltip>
         </TooltipProvider>
       )}
+
       {showArrow && toggleSidebar && (
         <TooltipProvider delayDuration={0}>
           <Tooltip>