Allow for dynamic header (#2955)

* Update root component to allow optional children that will render as
dynamic header of UI
* Export additional components (logo & themeChanger) for use in said
dynamic header (more to come here)

invokeai/frontend/web/dist/assets/ThemeLocaleProvider-51f66919.js

@@ -1,4 +1,4 @@
-import{j as y,cN as Ie,r as _,cO as bt,q as Lr,cP as o,cQ as b,cR as v,cS as S,cT as Vr,cU as ut,cV as vt,cM as ft,cW as mt,n as gt,cX as ht,E as pt}from"./index-2ad84bef.js";import{d as yt,i as St,T as xt,j as $t,h as kt}from"./storeHooks-e63a2dc4.js";var Or=`
+import{j as y,cN as Ie,r as _,cO as bt,q as Lr,cP as o,cQ as b,cR as v,cS as S,cT as Vr,cU as ut,cV as vt,cM as ft,cW as mt,n as gt,cX as ht,E as pt}from"./index-d64f4654.js";import{d as yt,i as St,T as xt,j as $t,h as kt}from"./storeHooks-0eed8e9f.js";var Or=`
   :root {
     --chakra-vh: 100vh;
   }

invokeai/frontend/web/dist/index.html

@@ -12,7 +12,7 @@
         margin: 0;
       }
     </style>
-    <script type="module" crossorigin src="./assets/index-2ad84bef.js"></script>
+    <script type="module" crossorigin src="./assets/index-d64f4654.js"></script>
     <link rel="stylesheet" href="./assets/index-5483945c.css">
   </head>
 

invokeai/frontend/web/index.d.ts

@@ -1,3 +1,5 @@
+import React, { PropsWithChildren } from 'react';
+
 export {};
 
 declare module 'redux-socket.io-middleware';
@@ -40,5 +42,17 @@ declare global {
   /* eslint-enable @typescript-eslint/no-explicit-any */
 }
 
-declare function Invoke(): React.JSX;
+declare module '@invoke-ai/invoke-ai-ui' {
+  declare class ThemeChanger extends React.Component<ThemeChangerProps> {
+    public constructor(props: ThemeChangerProps);
+  }
+
+  declare class InvokeAiLogoComponent extends React.Component<InvokeAILogoComponentProps> {
+    public constructor(props: InvokeAILogoComponentProps);
+  }
+}
+
+declare function Invoke(props: PropsWithChildren): JSX.Element;
+
+export { ThemeChanger, InvokeAiLogoComponent };
 export = Invoke;

invokeai/frontend/web/src/app/App.tsx

@@ -14,11 +14,11 @@ import { APP_HEIGHT, APP_WIDTH } from 'theme/util/constants';
 import ImageGalleryPanel from 'features/gallery/components/ImageGalleryPanel';
 import Lightbox from 'features/lightbox/components/Lightbox';
 import { useAppSelector } from './storeHooks';
-import { useEffect } from 'react';
+import { PropsWithChildren, useEffect } from 'react';
 
 keepGUIAlive();
 
-const App = () => {
+const App = (props: PropsWithChildren) => {
   useToastWatcher();
 
   const currentTheme = useAppSelector((state) => state.ui.currentTheme);
@@ -40,7 +40,7 @@ const App = () => {
           w={APP_WIDTH}
           h={APP_HEIGHT}
         >
-          <SiteHeader />
+          {props.children || <SiteHeader />}
           <Flex gap={4} w="full" h="full">
             <InvokeTabs />
             <ImageGalleryPanel />

invokeai/frontend/web/src/component.tsx

@@ -1,4 +1,4 @@
-import React, { lazy } from 'react';
+import React, { lazy, PropsWithChildren } from 'react';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
 import { store } from './app/store';
@@ -21,14 +21,14 @@ import './i18n';
 const App = lazy(() => import('./app/App'));
 const ThemeLocaleProvider = lazy(() => import('./app/ThemeLocaleProvider'));
 
-export default function Component() {
+export default function Component(props: PropsWithChildren) {
   return (
     <React.StrictMode>
       <Provider store={store}>
         <PersistGate loading={<Loading />} persistor={persistor}>
           <React.Suspense fallback={<Loading showText />}>
             <ThemeLocaleProvider>
-              <App />
+              <App>{props.children}</App>
             </ThemeLocaleProvider>
           </React.Suspense>
         </PersistGate>

invokeai/frontend/web/src/exports.tsx

@@ -0,0 +1,7 @@
+import Component from './component';
+
+import InvokeAiLogoComponent from './features/system/components/InvokeAILogoComponent';
+import ThemeChanger from './features/system/components/ThemeChanger';
+
+export default Component;
+export { InvokeAiLogoComponent, ThemeChanger };

invokeai/frontend/web/vite.config.ts

@@ -64,7 +64,7 @@ export default defineConfig(({ mode }) => {
       build: {
         ...common.build,
         lib: {
-          entry: path.resolve(__dirname, 'src/component.tsx'),
+          entry: path.resolve(__dirname, 'src/exports.tsx'),
           name: 'InvokeAI UI',
           fileName: (format) => `invoke-ai-ui.${format}.js`,
         },