feat: ai assistant placeholders (#2483)

Author: astandrik

src/components/ComponentsProvider/componentsRegistry.ts

@@ -6,11 +6,15 @@ import {StaffCard} from '../User/StaffCard';
 import type {ComponentsRegistryTemplate} from './registry';
 import {Registry} from './registry';
 
+const EmptyPlaceholder = () => null;
+
 const componentsRegistryInner = new Registry()
     .register('StaffCard', StaffCard)
     .register('AsideNavigation', AsideNavigation)
     .register('ErrorBoundary', ErrorBoundaryInner)
-    .register('ShardsTable', ShardsTable);
+    .register('ShardsTable', ShardsTable)
+    .register('AIAssistantButton', EmptyPlaceholder)
+    .register('ChatPanel', EmptyPlaceholder);
 
 export type ComponentsRegistry = ComponentsRegistryTemplate<typeof componentsRegistryInner>;
 

src/containers/App/App.tsx

@@ -5,6 +5,7 @@ import type {History} from 'history';
 import {Helmet} from 'react-helmet-async';
 import {connect} from 'react-redux';
 
+import {componentsRegistry} from '../../components/ComponentsProvider/componentsRegistry';
 import {ErrorBoundary} from '../../components/ErrorBoundary/ErrorBoundary';
 import type {RootState} from '../../store';
 import {Navigation} from '../AsideNavigation/Navigation';
@@ -32,6 +33,8 @@ function App({
     children,
     userSettings = getUserSettings({singleClusterMode}),
 }: AppProps) {
+    const ChatPanel = componentsRegistry.get('ChatPanel');
+
     return (
         <Providers store={store} history={history}>
             <Helmet defaultTitle="YDB Monitoring" titleTemplate="%s — YDB Monitoring" />
@@ -43,6 +46,7 @@ function App({
                     </ErrorBoundary>
                 </Navigation>
             </ContentWrapper>
+            {ChatPanel && <ChatPanel />}
             <ReduxTooltip />
         </Providers>
     );

src/containers/Header/Header.tsx

@@ -4,6 +4,7 @@ import {ArrowUpRightFromSquare, CirclePlus, PlugConnection} from '@gravity-ui/ic
 import {Breadcrumbs, Button, Divider, Flex, Icon} from '@gravity-ui/uikit';
 import {useLocation} from 'react-router-dom';
 
+import {componentsRegistry} from '../../components/ComponentsProvider/componentsRegistry';
 import {getConnectToDBDialog} from '../../components/ConnectToDB/ConnectToDBDialog';
 import {InternalLink} from '../../components/InternalLink';
 import {useAddClusterFeatureAvailable} from '../../store/reducers/capabilities/hooks';
@@ -38,6 +39,8 @@ function Header() {
     const isAddClusterAvailable =
         useAddClusterFeatureAvailable() && uiFactory.onAddCluster !== undefined;
 
+    const AIAssistantButton = componentsRegistry.get('AIAssistantButton');
+
     const breadcrumbItems = React.useMemo(() => {
         let options = {...pageBreadcrumbsOptions, singleClusterMode};
 
@@ -76,6 +79,10 @@ function Header() {
             );
         }
 
+        if (AIAssistantButton) {
+            elements.push(<AIAssistantButton key="ai-assistant" />);
+        }
+
         if (!isClustersPage && isUserAllowedToMakeChanges) {
             elements.push(
                 <Button view="flat" href={createDeveloperUIInternalPageHref()} target="_blank">