Use logotypes where feasible (#3478)

* Use logotypes where feasible

* quick nit

* minor cleanup

web/src/app/admin/connectors/[connector]/Sidebar.tsx

@@ -2,7 +2,7 @@ import { useFormContext } from "@/components/context/FormContext";
 import { HeaderTitle } from "@/components/header/HeaderTitle";
 
 import { SettingsIcon } from "@/components/icons/icons";
-import { Logo } from "@/components/Logo";
+import { Logo } from "@/components/logo/Logo";
 import { SettingsContext } from "@/components/settings/SettingsProvider";
 import { credentialTemplates } from "@/lib/connectors/credentials";
 import Link from "next/link";

web/src/app/auth/verify-email/Verify.tsx

@@ -6,7 +6,7 @@ import { useCallback, useEffect, useState } from "react";
 import Text from "@/components/ui/text";
 import { RequestNewVerificationEmail } from "../waiting-on-verification/RequestNewVerificationEmail";
 import { User } from "@/lib/types";
-import { Logo } from "@/components/Logo";
+import { Logo } from "@/components/logo/Logo";
 
 export function Verify({ user }: { user: User | null }) {
   const searchParams = useSearchParams();

web/src/app/auth/waiting-on-verification/page.tsx

@@ -8,7 +8,7 @@ import { HealthCheckBanner } from "@/components/health/healthcheck";
 import { User } from "@/lib/types";
 import Text from "@/components/ui/text";
 import { RequestNewVerificationEmail } from "./RequestNewVerificationEmail";
-import { Logo } from "@/components/Logo";
+import { Logo } from "@/components/logo/Logo";
 
 export default async function Page() {
   // catch cases where the backend is completely unreachable here

web/src/app/chat/ChatPage.tsx

@@ -2123,7 +2123,7 @@ export function ChatPage({
                   page="chat"
                   ref={innerSidebarElementRef}
                   toggleSidebar={toggleSidebar}
-                  toggled={toggledSidebar && !settings?.isMobile}
+                  toggled={toggledSidebar}
                   backgroundToggled={toggledSidebar || showHistorySidebar}
                   existingChats={chatSessions}
                   currentChatSession={selectedChatSession}
@@ -2194,8 +2194,6 @@ export function ChatPage({
               {liveAssistant && (
                 <FunctionalHeader
                   toggleUserSettings={() => setUserSettingsToggled(true)}
-                  liveAssistant={liveAssistant}
-                  onAssistantChange={onAssistantChange}
                   sidebarToggled={toggledSidebar}
                   reset={() => setMessage("")}
                   page="chat"
@@ -2207,7 +2205,6 @@ export function ChatPage({
                   toggleSidebar={toggleSidebar}
                   currentChatSession={selectedChatSession}
                   documentSidebarToggled={documentSidebarToggled}
-                  llmOverrideManager={llmOverrideManager}
                 />
               )}
 

web/src/app/chat/sessionSidebar/HistorySidebar.tsx

@@ -11,13 +11,10 @@ import { createFolder } from "../folders/FolderManagement";
 import { usePopup } from "@/components/admin/connectors/Popup";
 import { SettingsContext } from "@/components/settings/SettingsProvider";
 
-import {
+import { AssistantsIconSkeleton } from "@/components/icons/icons";
-  AssistantsIconSkeleton,
-  ClosedBookIcon,
-} from "@/components/icons/icons";
 import { PagesTab } from "./PagesTab";
 import { pageType } from "./types";
-import LogoType from "@/components/header/LogoType";
+import LogoWithText from "@/components/header/LogoWithText";
 
 interface HistorySidebarProps {
   page: pageType;
@@ -100,16 +97,19 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
             flex 
             flex-col relative
             h-screen
+            pt-2
             transition-transform 
             `}
         >
-          <LogoType
+          <div className="pl-2">
+            <LogoWithText
               showArrow={true}
               toggled={toggled}
               page={page}
               toggleSidebar={toggleSidebar}
               explicitlyUntoggle={explicitlyUntoggle}
             />
+          </div>
           {page == "chat" && (
             <div className="mx-3 mt-4 gap-y-1 flex-col text-text-history-sidebar-button flex gap-x-1.5 items-center items-center">
               <Link

web/src/app/chat/shared_chat_search/FixedLogo.tsx

@@ -1,36 +1,36 @@
 "use client";
 
 import { HeaderTitle } from "@/components/header/HeaderTitle";
-import { Logo } from "@/components/Logo";
+import { Logo } from "@/components/logo/Logo";
 import { SettingsContext } from "@/components/settings/SettingsProvider";
 import { NEXT_PUBLIC_DO_NOT_USE_TOGGLE_OFF_DANSWER_POWERED } from "@/lib/constants";
 import Link from "next/link";
 import { useContext } from "react";
 import { FiSidebar } from "react-icons/fi";
+import { LogoType } from "@/components/logo/Logo";
+import { EnterpriseSettings } from "@/app/admin/settings/interfaces";
 
-export default function FixedLogo({
+export function LogoComponent({
-  // Whether the sidebar is toggled or not
+  enterpriseSettings,
   backgroundToggled,
+  show,
 }: {
+  enterpriseSettings: EnterpriseSettings | null;
   backgroundToggled?: boolean;
+  show?: boolean;
 }) {
-  const combinedSettings = useContext(SettingsContext);
-  const settings = combinedSettings?.settings;
-  const enterpriseSettings = combinedSettings?.enterpriseSettings;
-
   return (
-    <>
+    <div
-      <Link
+      className={`max-w-[200px] ${
-        href="/chat"
+        !show && "mobile:hidden"
-        className="fixed cursor-pointer flex z-40 left-4 top-2 h-8"
+      } flex items-center gap-x-1`}
     >
-        <div className="max-w-[200px] mobile:hidden flex items-center gap-x-1 my-auto">
+      {enterpriseSettings && enterpriseSettings.application_name ? (
+        <>
           <div className="flex-none my-auto">
             <Logo height={24} width={24} />
           </div>
           <div className="w-full">
-            {enterpriseSettings && enterpriseSettings.application_name ? (
-              <div>
             <HeaderTitle backgroundToggled={backgroundToggled}>
               {enterpriseSettings.application_name}
             </HeaderTitle>
@@ -38,13 +38,32 @@ export default function FixedLogo({
               <p className="text-xs text-subtle">Powered by Onyx</p>
             )}
           </div>
+        </>
       ) : (
-              <HeaderTitle backgroundToggled={backgroundToggled}>
+        <LogoType />
-                Onyx
-              </HeaderTitle>
       )}
     </div>
-        </div>
+  );
+}
+
+export default function FixedLogo({
+  backgroundToggled,
+}: {
+  backgroundToggled?: boolean;
+}) {
+  const combinedSettings = useContext(SettingsContext);
+  const enterpriseSettings = combinedSettings?.enterpriseSettings;
+
+  return (
+    <>
+      <Link
+        href="/chat"
+        className="fixed cursor-pointer flex z-40 left-4 top-3 h-8"
+      >
+        <LogoComponent
+          enterpriseSettings={enterpriseSettings!}
+          backgroundToggled={backgroundToggled}
+        />
       </Link>
       <div className="mobile:hidden fixed left-4 bottom-4">
         <FiSidebar

web/src/app/layout.tsx

@@ -14,7 +14,6 @@ import { buildClientUrl } from "@/lib/utilsSS";
 import { Inter } from "next/font/google";
 import { EnterpriseSettings, GatingType } from "./admin/settings/interfaces";
 import { HeaderTitle } from "@/components/header/HeaderTitle";
-import { Logo } from "@/components/Logo";
 import { fetchAssistantData } from "@/lib/chat/fetchAssistantdata";
 import { AppProvider } from "@/components/context/AppProvider";
 import { PHProvider } from "./providers";
@@ -23,6 +22,7 @@ import CardSection from "@/components/admin/CardSection";
 import { Suspense } from "react";
 import PostHogPageView from "./PostHogPageView";
 import Script from "next/script";
+import { LogoType } from "@/components/logo/Logo";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -115,8 +115,7 @@ export default async function RootLayout({
     return getPageContent(
       <div className="flex flex-col items-center justify-center min-h-screen">
         <div className="mb-2 flex items-center max-w-[175px]">
-          <HeaderTitle>Onyx</HeaderTitle>
+          <LogoType />
-          <Logo height={40} width={40} />
         </div>
 
         <CardSection className="max-w-md">
@@ -124,7 +123,8 @@ export default async function RootLayout({
           <p className="text-text-500">
             Your Onyx instance was not configured properly and your settings
             could not be loaded. This could be due to an admin configuration
-            issue or an incomplete setup.
+            issue, an incomplete setup, or backend services that may not be up
+            and running yet.
           </p>
           <p className="mt-4">
             If you&apos;re an admin, please check{" "}
@@ -144,7 +144,7 @@ export default async function RootLayout({
             community on{" "}
             <a
               className="text-link"
-              href="https://onyx.app?utm_source=app&utm_medium=error_page&utm_campaign=config_error"
+              href="https://join.slack.com/t/danswer/shared_invite/zt-1w76msxmd-HJHLe3KNFIAIzk_0dSOKaQ"
               target="_blank"
               rel="noopener noreferrer"
             >
@@ -160,8 +160,7 @@ export default async function RootLayout({
     return getPageContent(
       <div className="flex flex-col items-center justify-center min-h-screen">
         <div className="mb-2 flex items-center max-w-[175px]">
-          <HeaderTitle>Onyx</HeaderTitle>
+          <LogoType />
-          <Logo height={40} width={40} />
         </div>
         <CardSection className="w-full max-w-md">
           <h1 className="text-2xl font-bold mb-4 text-error">

web/src/components/LogoType.tsx

@@ -1,38 +0,0 @@
-import { NEXT_PUBLIC_DO_NOT_USE_TOGGLE_OFF_DANSWER_POWERED } from "@/lib/constants";
-import { HeaderTitle } from "./header/HeaderTitle";
-import LogoType, { Logo } from "./Logo";
-import { EnterpriseSettings } from "@/app/admin/settings/interfaces";
-
-export default function LogoTypeContainer({
-  enterpriseSettings,
-}: {
-  enterpriseSettings: EnterpriseSettings | null;
-}) {
-  const onlyLogo =
-    !enterpriseSettings ||
-    !enterpriseSettings.use_custom_logo ||
-    !enterpriseSettings.application_name;
-
-  return (
-    <div className="flex justify-start items-start  w-full gap-x-1 my-auto">
-      <div className="flex-none w-fit  mr-auto  my-auto">
-        {onlyLogo ? <LogoType /> : <Logo height={24} width={24} />}
-      </div>
-
-      {!onlyLogo && (
-        <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 Onyx</p>
-              )}
-            </div>
-          ) : (
-            <HeaderTitle>Onyx</HeaderTitle>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}

web/src/components/OnyxInitializingLoader.tsx

@@ -1,4 +1,4 @@
-import { Logo } from "./Logo";
+import { Logo } from "./logo/Logo";
 import { useContext } from "react";
 import { SettingsContext } from "./settings/SettingsProvider";
 

web/src/components/admin/connectors/AdminSidebar.tsx

@@ -2,7 +2,7 @@
 "use client";
 import React, { useContext } from "react";
 import Link from "next/link";
-import { Logo } from "@/components/Logo";
+import { Logo } from "@/components/logo/Logo";
 import { NEXT_PUBLIC_DO_NOT_USE_TOGGLE_OFF_DANSWER_POWERED } from "@/lib/constants";
 import { HeaderTitle } from "@/components/header/HeaderTitle";
 import { SettingsContext } from "@/components/settings/SettingsProvider";
@@ -14,6 +14,8 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { CgArrowsExpandUpLeft } from "react-icons/cg";
+import LogoWithText from "@/components/header/LogoWithText";
+import { LogoComponent } from "@/app/chat/shared_chat_search/FixedLogo";
 
 interface Item {
   name: string | JSX.Element;
@@ -32,32 +34,17 @@ export function AdminSidebar({ collections }: { collections: Collection[] }) {
     return null;
   }
 
-  const settings = combinedSettings.settings;
   const enterpriseSettings = combinedSettings.enterpriseSettings;
 
   return (
     <div className="text-text-settings-sidebar pl-0">
       <nav className="space-y-2">
-        <div className="w-full ml-4  h-8 justify-start mb-4 flex">
+        <div className="w-full ml-4  mt-1 h-8 justify-start mb-4 flex">
-          <div className="flex items-center gap-x-1 my-auto">
+          <LogoComponent
-            <div className="flex-none my-auto">
+            show={true}
-              <Logo height={24} width={24} />
+            enterpriseSettings={enterpriseSettings!}
-            </div>
+            backgroundToggled={false}
-            <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 Onyx</p>
-                  )}
-                </div>
-              ) : (
-                <HeaderTitle>Onyx</HeaderTitle>
-              )}
-            </div>
-          </div>
         </div>
         <div className="flex w-full justify-center">
           <Link href="/chat">

web/src/components/auth/AuthFlowContainer.tsx

@@ -1,4 +1,4 @@
-import { Logo } from "../Logo";
+import { Logo } from "../logo/Logo";
 
 export default function AuthFlowContainer({
   children,

web/src/components/chat_search/Header.tsx

@@ -1,18 +1,16 @@
 "use client";
-import { User } from "@/lib/types";
 import { UserDropdown } from "../UserDropdown";
 import { FiShare2 } from "react-icons/fi";
 import { SetStateAction, useContext, useEffect } from "react";
-import { NewChatIcon } from "../icons/icons";
 import { NEXT_PUBLIC_NEW_CHAT_DIRECTS_TO_SAME_PERSONA } from "@/lib/constants";
 import { ChatSession } from "@/app/chat/interfaces";
 import Link from "next/link";
 import { pageType } from "@/app/chat/sessionSidebar/types";
 import { useRouter } from "next/navigation";
 import { ChatBanner } from "@/app/chat/ChatBanner";
-import LogoType from "../header/LogoType";
+import LogoWithText from "../header/LogoWithText";
-import { Persona } from "@/app/admin/assistants/interfaces";
+import { NewChatIcon } from "../icons/icons";
-import { LlmOverrideManager } from "@/lib/hooks";
+import { SettingsContext } from "../settings/SettingsProvider";
 
 export default function FunctionalHeader({
   page,
@@ -21,9 +19,6 @@ export default function FunctionalHeader({
   toggleSidebar = () => null,
   reset = () => null,
   sidebarToggled,
-  liveAssistant,
-  onAssistantChange,
-  llmOverrideManager,
   documentSidebarToggled,
   toggleUserSettings,
 }: {
@@ -34,11 +29,9 @@ export default function FunctionalHeader({
   currentChatSession?: ChatSession | null | undefined;
   setSharingModalVisible?: (value: SetStateAction<boolean>) => void;
   toggleSidebar?: () => void;
-  liveAssistant?: Persona;
-  onAssistantChange?: (assistant: Persona) => void;
-  llmOverrideManager?: LlmOverrideManager;
   toggleUserSettings?: () => void;
 }) {
+  const settings = useContext(SettingsContext);
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.metaKey || event.ctrlKey) {
@@ -76,10 +69,11 @@ export default function FunctionalHeader({
   return (
     <div className="left-0 sticky top-0 z-20 w-full relative flex">
       <div className="items-end flex mt-2 cursor-pointer text-text-700 relative flex w-full">
-        <LogoType
+        <LogoWithText
           assistantId={currentChatSession?.persona_id}
           page={page}
           toggleSidebar={toggleSidebar}
+          toggled={sidebarToggled && !settings?.isMobile}
           handleNewChat={handleNewChat}
         />
         <div className="mt-2 flex w-full h-8">
@@ -103,18 +97,19 @@ export default function FunctionalHeader({
           </div>
 
           <div className="invisible">
-            <LogoType
+            <LogoWithText
               page={page}
+              toggled={sidebarToggled}
               toggleSidebar={toggleSidebar}
               handleNewChat={handleNewChat}
             />
           </div>
 
-          <div className="absolute right-0 top-0 flex gap-x-2">
+          <div className="absolute  right-0 mobile:top-2 desktop:top-0 flex">
             {setSharingModalVisible && (
               <div
                 onClick={() => setSharingModalVisible(true)}
-                className="mobile:hidden my-auto rounded cursor-pointer hover:bg-hover-light"
+                className="mobile:hidden ml-2 my-auto rounded cursor-pointer hover:bg-hover-light"
               >
                 <FiShare2 size="18" />
               </div>

web/src/components/embedding/EmbeddingSidebar.tsx

@@ -2,7 +2,7 @@ import { useEmbeddingFormContext } from "@/components/context/EmbeddingContext";
 import { HeaderTitle } from "@/components/header/HeaderTitle";
 
 import { SettingsIcon } from "@/components/icons/icons";
-import { Logo } from "@/components/Logo";
+import { Logo } from "@/components/logo/Logo";
 import { SettingsContext } from "@/components/settings/SettingsProvider";
 import Link from "next/link";
 import { useContext } from "react";

web/src/components/header/HeaderTitle.tsx

@@ -10,7 +10,10 @@ export function HeaderTitle({
   backgroundToggled?: boolean;
 }) {
   const isString = typeof children === "string";
-  const textSize = isString && children.length > 10 ? "text-xl" : "text-2xl";
+  const textSize =
+    isString && children.length > 10
+      ? "text-lg pb-[4px] -mb-[4px]"
+      : "text-2xl";
 
   return (
     <h1
@@ -18,7 +21,7 @@ export function HeaderTitle({
         backgroundToggled
           ? "text-text-sidebar-toggled-header"
           : "text-text-sidebar-header"
-      } break-words line-clamp-2 ellipsis text-strong overflow-visible leading-none font-bold`}
+      } break-words line-clamp-2 ellipsis text-strong overflow-hidden leading-none font-bold`}
     >
       {children}
     </h1>

web/src/components/header/LogoWithText.tsx

@@ -2,10 +2,7 @@
 import { useContext } from "react";
 import { FiSidebar } from "react-icons/fi";
 import { SettingsContext } from "../settings/SettingsProvider";
-import {
+import { NEXT_PUBLIC_NEW_CHAT_DIRECTS_TO_SAME_PERSONA } from "@/lib/constants";
-  NEXT_PUBLIC_DO_NOT_USE_TOGGLE_OFF_DANSWER_POWERED,
-  NEXT_PUBLIC_NEW_CHAT_DIRECTS_TO_SAME_PERSONA,
-} from "@/lib/constants";
 import { LeftToLineIcon, NewChatIcon, RightToLineIcon } from "../icons/icons";
 import {
   Tooltip,
@@ -14,11 +11,11 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { pageType } from "@/app/chat/sessionSidebar/types";
-import { Logo } from "../Logo";
+import { Logo } from "../logo/Logo";
-import { HeaderTitle } from "./HeaderTitle";
 import Link from "next/link";
+import { LogoComponent } from "@/app/chat/shared_chat_search/FixedLogo";
 
-export default function LogoType({
+export default function LogoWithText({
   toggleSidebar,
   hideOnMobile,
   handleNewChat,
@@ -39,57 +36,48 @@ export default function LogoType({
 }) {
   const combinedSettings = useContext(SettingsContext);
   const enterpriseSettings = combinedSettings?.enterpriseSettings;
-  const useLogoType =
-    !enterpriseSettings?.use_custom_logo &&
-    !enterpriseSettings?.application_name;
-
   return (
     <div
       className={`${
         hideOnMobile && "mobile:hidden"
-      } z-[100] mt-2 h-8 mb-auto shrink-0 flex  items-center text-xl`}
+      } z-[100] ml-2 mt-1 h-8 mb-auto shrink-0 flex gap-x-0  items-center text-xl`}
     >
       {toggleSidebar && page == "chat" ? (
         <button
           onClick={() => toggleSidebar()}
-          className="flex gap-x-2 items-center ml-4 desktop:invisible "
+          className="flex gap-x-2 items-center ml-0  desktop:hidden "
         >
+          {!toggled ? (
+            <Logo className="desktop:hidden -my-2" height={24} width={24} />
+          ) : (
+            <LogoComponent
+              show={toggled}
+              enterpriseSettings={enterpriseSettings!}
+              backgroundToggled={toggled}
+            />
+          )}
+
           <FiSidebar
             size={20}
-            className={`${
+            className={`text-text-mobile-sidebar ${toggled && "mobile:hidden"}`}
-              toggled
-                ? "text-text-mobile-sidebar-toggled"
-                : "text-text-mobile-sidebar-untoggled"
-            }`}
           />
-          {!showArrow && (
-            <Logo className="desktop:hidden -my-2" height={24} width={24} />
-          )}
         </button>
       ) : (
         <div className="mr-1 invisible mb-auto h-6 w-6">
           <Logo height={24} width={24} />
+          lll
         </div>
       )}
+
       <div
         className={`${
           showArrow ? "desktop:invisible" : "invisible"
-        } break-words inline-block w-fit ml-2 text-text-700 text-xl`}
+        } break-words inline-block w-fit text-text-700 text-xl`}
       >
-        <div className="max-w-[175px]">
+        <LogoComponent
-          {enterpriseSettings && enterpriseSettings.application_name ? (
+          enterpriseSettings={enterpriseSettings!}
-            <div className="w-full">
+          backgroundToggled={toggled}
-              <HeaderTitle backgroundToggled={toggled}>
+        />
-                {enterpriseSettings.application_name}
-              </HeaderTitle>
-              {!NEXT_PUBLIC_DO_NOT_USE_TOGGLE_OFF_DANSWER_POWERED && (
-                <p className="text-xs text-subtle">Powered by Onyx</p>
-              )}
-            </div>
-          ) : (
-            <HeaderTitle backgroundToggled={toggled}>Onyx</HeaderTitle>
-          )}
-        </div>
       </div>
 
       {page == "chat" && !showArrow && (
@@ -97,7 +85,7 @@ export default function LogoType({
           <Tooltip>
             <TooltipTrigger asChild>
               <Link
-                className="mb-auto mobile:hidden"
+                className="my-auto mobile:hidden"
                 href={
                   `/${page}` +
                   (NEXT_PUBLIC_NEW_CHAT_DIRECTS_TO_SAME_PERSONA && assistantId
@@ -137,10 +125,14 @@ export default function LogoType({
                 }}
               >
                 {!toggled && !combinedSettings?.isMobile ? (
-                  <RightToLineIcon className="text-sidebar-toggle" />
+                  <RightToLineIcon className="mobile:hidden text-sidebar-toggle" />
                 ) : (
-                  <LeftToLineIcon className="text-sidebar-toggle" />
+                  <LeftToLineIcon className="mobile:hidden text-sidebar-toggle" />
                 )}
+                <FiSidebar
+                  size={20}
+                  className="hidden mobile:block text-text-mobile-sidebar"
+                />
               </button>
             </TooltipTrigger>
             <TooltipContent>

web/src/components/logo/Logo.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useContext } from "react";
-import { SettingsContext } from "./settings/SettingsProvider";
+import { SettingsContext } from "../settings/SettingsProvider";
 import Image from "next/image";
 
 export function Logo({
@@ -45,10 +45,10 @@ export function Logo({
   );
 }
 
-export default function LogoType() {
+export function LogoType() {
   return (
     <Image
-      className="max-h-8 mr-auto "
+      className="max-h-8 w-full mr-auto "
       src="/logotype.png"
       alt="Logo"
       width={2640}