feat: ai assistant component placeholders

Author: astandrik

src/components/ComponentsProvider/chatPlaceholderTypes.ts

@@ -0,0 +1,26 @@
+import type React from 'react';
+
+// Placeholder types for chat components
+// These will be properly typed when implemented in external packages
+
+export interface AIAssistantButtonProps {
+    className?: string;
+}
+
+export interface ChatPanelProps {
+    config?: {
+        backendUrl?: string;
+        showQuota?: boolean;
+        enableContext?: boolean;
+        customActions?: any[];
+        maxMessages?: number;
+        welcomeMessage?: string;
+        suggestions?: string[];
+    };
+    context?: any;
+    formatContext?: (context: any) => string;
+}
+
+// Placeholder components that do nothing
+export const AIAssistantButtonPlaceholder: React.FC<AIAssistantButtonProps> = () => null;
+export const ChatPanelPlaceholder: React.FC<ChatPanelProps> = () => null;

src/components/ComponentsProvider/componentsRegistry.ts

@@ -1,16 +1,27 @@
+import type React from 'react';
+
 import {AsideNavigation} from '../../containers/AsideNavigation/AsideNavigation';
 import {ErrorBoundaryInner} from '../ErrorBoundary/ErrorBoundary';
 import {ShardsTable} from '../ShardsTable/ShardsTable';
 import {StaffCard} from '../User/StaffCard';
 
+import {AIAssistantButtonPlaceholder, ChatPanelPlaceholder} from './chatPlaceholderTypes';
+import type {AIAssistantButtonProps, ChatPanelProps} from './chatPlaceholderTypes';
 import type {ComponentsRegistryTemplate} from './registry';
 import {Registry} from './registry';
 
 const componentsRegistryInner = new Registry()
     .register('StaffCard', StaffCard)
     .register('AsideNavigation', AsideNavigation)
     .register('ErrorBoundary', ErrorBoundaryInner)
-    .register('ShardsTable', ShardsTable);
+    .register('ShardsTable', ShardsTable)
+    // Placeholder registrations for chat components
+    // These will be overridden by external implementations
+    .register(
+        'AIAssistantButton',
+        AIAssistantButtonPlaceholder as React.ComponentType<AIAssistantButtonProps>,
+    )
+    .register('ChatPanel', ChatPanelPlaceholder as React.ComponentType<ChatPanelProps>);
 
 export type ComponentsRegistry = ComponentsRegistryTemplate<typeof componentsRegistryInner>;
 

src/components/ComponentsProvider/index.ts

@@ -0,0 +1,6 @@
+export {ComponentsProvider} from './ComponentsProvider';
+export {componentsRegistry} from './componentsRegistry';
+export type {ComponentsRegistry} from './componentsRegistry';
+
+// Export chat component types for external packages to use
+export type {AIAssistantButtonProps, ChatPanelProps} from './chatPlaceholderTypes';

src/containers/App/App.tsx

@@ -5,8 +5,8 @@ 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 {ChatPanel} from '../../features/chat';
 import type {RootState} from '../../store';
 import {Navigation} from '../AsideNavigation/Navigation';
 import ReduxTooltip from '../ReduxTooltip/ReduxTooltip';
@@ -33,6 +33,9 @@ function App({
     children,
     userSettings = getUserSettings({singleClusterMode}),
 }: AppProps) {
+    // Get ChatPanel from registry if it exists
+    const ChatPanel = componentsRegistry.get('ChatPanel');
+
     return (
         <Providers store={store} history={history}>
             <Helmet defaultTitle="YDB Monitoring" titleTemplate="%s — YDB Monitoring" />
@@ -44,7 +47,8 @@ function App({
                     </ErrorBoundary>
                 </Navigation>
             </ContentWrapper>
-            <ChatPanel />
+            {/* Render ChatPanel only if it's registered */}
+            {ChatPanel && <ChatPanel />}
             <ReduxTooltip />
         </Providers>
     );

src/containers/Header/Header.tsx

@@ -4,16 +4,16 @@ 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 {AIAssistantButton} from '../../features/chat/components/AIAssistantButton/AIAssistantButton';
 import {useAddClusterFeatureAvailable} from '../../store/reducers/capabilities/hooks';
 import {useClusterBaseInfo} from '../../store/reducers/cluster/cluster';
 import {uiFactory} from '../../uiFactory/uiFactory';
 import {cn} from '../../utils/cn';
-import {DEVELOPER_UI_TITLE, ENABLE_AI_ASSISTANT} from '../../utils/constants';
+import {DEVELOPER_UI_TITLE} from '../../utils/constants';
 import {createDeveloperUIInternalPageHref} from '../../utils/developerUI/developerUI';
-import {useSetting, useTypedSelector} from '../../utils/hooks';
+import {useTypedSelector} from '../../utils/hooks';
 import {useDatabaseFromQuery} from '../../utils/hooks/useDatabaseFromQuery';
 import {useIsUserAllowedToMakeChanges} from '../../utils/hooks/useIsUserAllowedToMakeChanges';
 
@@ -28,7 +28,6 @@ function Header() {
     const {page, pageBreadcrumbsOptions} = useTypedSelector((state) => state.header);
     const singleClusterMode = useTypedSelector((state) => state.singleClusterMode);
     const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
-    const [isAiAssistantEnabled] = useSetting(ENABLE_AI_ASSISTANT);
 
     const {title: clusterTitle} = useClusterBaseInfo();
 
@@ -40,6 +39,9 @@ function Header() {
     const isAddClusterAvailable =
         useAddClusterFeatureAvailable() && uiFactory.onAddCluster !== undefined;
 
+    // Get AIAssistantButton from registry if it exists
+    const AIAssistantButton = componentsRegistry.get('AIAssistantButton');
+
     const breadcrumbItems = React.useMemo(() => {
         let options = {...pageBreadcrumbsOptions, singleClusterMode};
 
@@ -78,8 +80,9 @@ function Header() {
             );
         }
 
-        if (isAiAssistantEnabled) {
-            elements.push(<AIAssistantButton />);
+        // Add AI Assistant button if component is registered
+        if (AIAssistantButton) {
+            elements.push(<AIAssistantButton key="ai-assistant" />);
         }
 
         if (!isClustersPage && isUserAllowedToMakeChanges) {

src/containers/UserSettings/settings.tsx

@@ -8,7 +8,6 @@ import {
     AUTOCOMPLETE_ON_ENTER,
     AclSyntax,
     BINARY_DATA_IN_PLAIN_TEXT_DISPLAY,
-    ENABLE_AI_ASSISTANT,
     ENABLE_AUTOCOMPLETE,
     ENABLE_CODE_ASSISTANT,
     ENABLE_NETWORK_TABLE_KEY,
@@ -133,12 +132,6 @@ export const enableCodeAssistantSetting: SettingProps = {
     description: i18n('settings.editor.codeAssistant.description'),
 };
 
-export const enableAiAssistantSetting: SettingProps = {
-    settingKey: ENABLE_AI_ASSISTANT,
-    title: i18n('settings.editor.aiAssistant.title'),
-    description: i18n('settings.editor.aiAssistant.title'),
-};
-
 export const enableQueryStreamingSetting: SettingProps = {
     settingKey: ENABLE_QUERY_STREAMING,
     title: i18n('settings.editor.queryStreaming.title'),