From bca7ea1674430b8ee76c6d63d6f4d81090b5fd43 Mon Sep 17 00:00:00 2001
From: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
Date: Thu, 4 Jan 2024 12:46:57 -0500
Subject: [PATCH] option to override logo component

---
 .../frontend/web/src/app/components/InvokeAIUI.tsx | 14 +++++++-------
 .../web/src/app/store/nanostores/customAppInfo.ts  |  3 ---
 .../frontend/web/src/app/store/nanostores/logo.ts  |  4 ++++
 .../system/components/InvokeAILogoComponent.tsx    | 14 +++++++-------
 4 files changed, 18 insertions(+), 17 deletions(-)
 delete mode 100644 invokeai/frontend/web/src/app/store/nanostores/customAppInfo.ts
 create mode 100644 invokeai/frontend/web/src/app/store/nanostores/logo.ts

diff --git a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
index 16164ee0a2..cc2c945898 100644
--- a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
+++ b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx
@@ -4,7 +4,6 @@ import type { Middleware } from '@reduxjs/toolkit';
 import { $socketOptions } from 'app/hooks/useSocketIO';
 import { $authToken } from 'app/store/nanostores/authToken';
 import { $baseUrl } from 'app/store/nanostores/baseUrl';
-import { $customAppInfo } from 'app/store/nanostores/customAppInfo';
 import { $customNavComponent } from 'app/store/nanostores/customNavComponent';
 import type { CustomStarUi } from 'app/store/nanostores/customStarUI';
 import { $customStarUI } from 'app/store/nanostores/customStarUI';
@@ -22,6 +21,7 @@ import React, { lazy, memo, useEffect, useMemo } from 'react';
 import { Provider } from 'react-redux';
 import { addMiddleware, resetMiddlewares } from 'redux-dynamic-middlewares';
 import type { ManagerOptions, SocketOptions } from 'socket.io-client';
+import { $logo } from 'app/store/nanostores/logo';
 
 const App = lazy(() => import('./App'));
 const ThemeLocaleProvider = lazy(() => import('./ThemeLocaleProvider'));
@@ -42,7 +42,7 @@ interface Props extends PropsWithChildren {
   customStarUi?: CustomStarUi;
   socketOptions?: Partial<ManagerOptions & SocketOptions>;
   isDebugging?: boolean;
-  customAppInfo?: string;
+  logo?: ReactNode;
 }
 
 const InvokeAIUI = ({
@@ -58,7 +58,7 @@ const InvokeAIUI = ({
   customStarUi,
   socketOptions,
   isDebugging = false,
-  customAppInfo,
+  logo,
 }: Props) => {
   useEffect(() => {
     // configure API client token
@@ -134,14 +134,14 @@ const InvokeAIUI = ({
   }, [galleryHeader]);
 
   useEffect(() => {
-    if (customAppInfo) {
-      $customAppInfo.set(customAppInfo);
+    if (logo) {
+      $logo.set(logo);
     }
 
     return () => {
-      $customAppInfo.set(undefined);
+      $logo.set(undefined);
     };
-  }, [customAppInfo]);
+  }, [logo]);
 
   useEffect(() => {
     if (socketOptions) {
diff --git a/invokeai/frontend/web/src/app/store/nanostores/customAppInfo.ts b/invokeai/frontend/web/src/app/store/nanostores/customAppInfo.ts
deleted file mode 100644
index 0f7b73e38a..0000000000
--- a/invokeai/frontend/web/src/app/store/nanostores/customAppInfo.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { atom } from 'nanostores';
-
-export const $customAppInfo = atom<string | undefined>();
diff --git a/invokeai/frontend/web/src/app/store/nanostores/logo.ts b/invokeai/frontend/web/src/app/store/nanostores/logo.ts
new file mode 100644
index 0000000000..5fd94ebd90
--- /dev/null
+++ b/invokeai/frontend/web/src/app/store/nanostores/logo.ts
@@ -0,0 +1,4 @@
+import { atom } from 'nanostores';
+import type { ReactNode } from 'react';
+
+export const $logo = atom<ReactNode | undefined>(undefined);
diff --git a/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx b/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx
index 3f3e075c59..d296926269 100644
--- a/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx
+++ b/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx
@@ -1,27 +1,27 @@
 /* eslint-disable i18next/no-literal-string */
 import { Image } from '@chakra-ui/react';
 import { useStore } from '@nanostores/react';
-import { $customAppInfo } from 'app/store/nanostores/customAppInfo';
 import InvokeLogoYellow from 'assets/images/invoke-key-ylw-sm.svg';
 import { InvText } from 'common/components/InvText/wrapper';
 import { InvTooltip } from 'common/components/InvTooltip/InvTooltip';
 import { memo, useMemo, useRef } from 'react';
 import { useGetAppVersionQuery } from 'services/api/endpoints/appInfo';
+import { $logo } from '../../../app/store/nanostores/logo';
 
 const InvokeAILogoComponent = () => {
   const { data: appVersion } = useGetAppVersionQuery();
   const ref = useRef(null);
-  const customAppInfo = useStore($customAppInfo);
+  const logoOverride = useStore($logo);
   const tooltip = useMemo(() => {
-    if (customAppInfo) {
-      return <InvText fontWeight="semibold">{customAppInfo}</InvText>;
-    }
-
     if (appVersion) {
       return <InvText fontWeight="semibold">v{appVersion.version}</InvText>;
     }
     return null;
-  }, [appVersion, customAppInfo]);
+  }, [appVersion]);
+
+  if (logoOverride) {
+    return logoOverride;
+  }
 
   return (
     <InvTooltip placement="right" label={tooltip} p={1} px={2} gutter={16}>