Use logotypes where feasible (onyx-dot-app#3478)

* Use logotypes where feasible * quick nit * minor cleanup
aronszanto · Dec 23, 2024 · 162fe26 · 162fe26
1 parent 4985bc5
commit 162fe26
Show file tree

Hide file tree

Showing 16 changed files with 127 additions and 173 deletions.
diff --git a/web/src/app/admin/connectors/[connector]/Sidebar.tsx b/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";

diff --git a/web/src/app/auth/verify-email/Verify.tsx b/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();

diff --git a/web/src/app/auth/waiting-on-verification/page.tsx b/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

diff --git a/web/src/app/chat/ChatPage.tsx b/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}
                 />
               )}
 

diff --git a/web/src/app/chat/sessionSidebar/HistorySidebar.tsx b/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 {
-  AssistantsIconSkeleton,
-  ClosedBookIcon,
-} from "@/components/icons/icons";
+import { AssistantsIconSkeleton } 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
-            showArrow={true}
-            toggled={toggled}
-            page={page}
-            toggleSidebar={toggleSidebar}
-            explicitlyUntoggle={explicitlyUntoggle}
-          />
+          <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

diff --git a/web/src/app/chat/shared_chat_search/FixedLogo.tsx b/web/src/app/chat/shared_chat_search/FixedLogo.tsx
@@ -1,50 +1,69 @@
 "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 function LogoComponent({
+  enterpriseSettings,
+  backgroundToggled,
+  show,
+}: {
+  enterpriseSettings: EnterpriseSettings | null;
+  backgroundToggled?: boolean;
+  show?: boolean;
+}) {
+  return (
+    <div
+      className={`max-w-[200px] ${
+        !show && "mobile:hidden"
+      } flex items-center gap-x-1`}
+    >
+      {enterpriseSettings && enterpriseSettings.application_name ? (
+        <>
+          <div className="flex-none my-auto">
+            <Logo height={24} width={24} />
+          </div>
+          <div className="w-full">
+            <HeaderTitle backgroundToggled={backgroundToggled}>
+              {enterpriseSettings.application_name}
+            </HeaderTitle>
+            {!NEXT_PUBLIC_DO_NOT_USE_TOGGLE_OFF_DANSWER_POWERED && (
+              <p className="text-xs text-subtle">Powered by Onyx</p>
+            )}
+          </div>
+        </>
+      ) : (
+        <LogoType />
+      )}
+    </div>
+  );
+}
 
 export default function FixedLogo({
-  // Whether the sidebar is toggled or not
   backgroundToggled,
 }: {
   backgroundToggled?: boolean;
 }) {
   const combinedSettings = useContext(SettingsContext);
-  const settings = combinedSettings?.settings;
   const enterpriseSettings = combinedSettings?.enterpriseSettings;
 
   return (
     <>
       <Link
         href="/chat"
-        className="fixed cursor-pointer flex z-40 left-4 top-2 h-8"
+        className="fixed cursor-pointer flex z-40 left-4 top-3 h-8"
       >
-        <div className="max-w-[200px] mobile:hidden 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 backgroundToggled={backgroundToggled}>
-                  {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={backgroundToggled}>
-                Onyx
-              </HeaderTitle>
-            )}
-          </div>
-        </div>
+        <LogoComponent
+          enterpriseSettings={enterpriseSettings!}
+          backgroundToggled={backgroundToggled}
+        />
       </Link>
       <div className="mobile:hidden fixed left-4 bottom-4">
         <FiSidebar

diff --git a/web/src/app/layout.tsx b/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,16 +115,16 @@ 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>
-          <Logo height={40} width={40} />
+          <LogoType />
         </div>
 
         <CardSection className="max-w-md">
           <h1 className="text-2xl font-bold mb-4 text-error">Error</h1>
           <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>
-          <Logo height={40} width={40} />
+          <LogoType />
         </div>
         <CardSection className="w-full max-w-md">
           <h1 className="text-2xl font-bold mb-4 text-error">

diff --git a/web/src/components/LogoType.tsx b/web/src/components/LogoType.tsx
diff --git a/web/src/components/OnyxInitializingLoader.tsx b/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";
 

diff --git a/web/src/components/admin/connectors/AdminSidebar.tsx b/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="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 Onyx</p>
-                  )}
-                </div>
-              ) : (
-                <HeaderTitle>Onyx</HeaderTitle>
-              )}
-            </div>
-          </div>
+        <div className="w-full ml-4  mt-1 h-8 justify-start mb-4 flex">
+          <LogoComponent
+            show={true}
+            enterpriseSettings={enterpriseSettings!}
+            backgroundToggled={false}
+          />
         </div>
         <div className="flex w-full justify-center">
           <Link href="/chat">

diff --git a/web/src/components/auth/AuthFlowContainer.tsx b/web/src/components/auth/AuthFlowContainer.tsx
@@ -1,4 +1,4 @@
-import { Logo } from "../Logo";
+import { Logo } from "../logo/Logo";
 
 export default function AuthFlowContainer({
   children,