Various clean ups (#3413)

* tbd * minor * prettify * update sidebar values
2025-04-07 19:38:19 +02:00 · 2024-12-11 09:19:14 -08:00 · 2024-12-11 09:19:14 -08:00 · 264df3441b
commit 264df3441b
parent b9bad8b7a0
10 changed files with 125 additions and 98 deletions
--- 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"
--- 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" }}
--- 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) => {
--- 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}
--- 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>
    </>
  );
--- 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">
--- 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">
--- 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>
--- 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>
  );
--- 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>