Add AiConfigIndicator component and integrate it into AI settings page

Author: Roman Snapko

packages/react-ui/src/app/features/ai/ai-config-indicator.tsx

@@ -0,0 +1,28 @@
+import { t } from 'i18next';
+import { CircleCheck, CircleMinus } from 'lucide-react';
+
+type AiConfigIndicatorProps = {
+  enabled: boolean;
+};
+
+const AiConfigIndicator = ({ enabled }: AiConfigIndicatorProps) => {
+  return (
+    <div className="flex items-center gap-[6px] text-primary-900 font-medium">
+      {enabled ? (
+        <>
+          <CircleCheck className="text-success-300" size={24} />
+          <span>{t('OpenOps AI is enabled')}</span>
+        </>
+      ) : (
+        <>
+          <CircleMinus className="text-muted-foreground" size={24} />
+          <span>
+            {t('OpenOps AI is disabled - Configure a connection to enable it')}
+          </span>
+        </>
+      )}
+    </div>
+  );
+};
+
+export { AiConfigIndicator };

packages/react-ui/src/app/features/ai/ai-settings-form.tsx

@@ -4,10 +4,9 @@ import {
   BlockMetadataModelSummary,
 } from '@openops/blocks-framework';
 import { Form } from '@openops/components/ui';
-import { removeConnectionBrackets } from '@openops/shared';
 import equal from 'fast-deep-equal';
 import debounce from 'lodash.debounce';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
 
 type AiSettingsFormProps = {
@@ -78,7 +77,7 @@ const AiSettingsForm = ({
 
   return (
     <Form {...form}>
-      <form className="max-w-[516px]">
+      <form>
         <ConnectionSelect
           disabled={disabled}
           allowDynamicValues={false}

packages/react-ui/src/app/routes/settings/ai/index.tsx

@@ -1,4 +1,5 @@
 import { QueryKeys } from '@/app/constants/query-keys';
+import { AiConfigIndicator } from '@/app/features/ai/ai-config-indicator';
 import { AiSettingsForm } from '@/app/features/ai/ai-settings-form';
 import {
   AI_SETTINGS_SAVED_SUCCESSFULLY_TOAST,
@@ -9,7 +10,7 @@ import { aiSettingsApi } from '@/app/features/ai/lib/ai-settings-api';
 import { aiSettingsHooks } from '@/app/features/ai/lib/ai-settings-hooks';
 import { mcpSettingsHooks } from '@/app/features/ai/lib/mcp-settings-hooks';
 import { blocksHooks } from '@/app/features/blocks/lib/blocks-hook';
-import { INTERNAL_ERROR_TOAST, toast } from '@openops/components/ui';
+import { INTERNAL_ERROR_TOAST, Skeleton, toast } from '@openops/components/ui';
 import {
   ApplicationErrorParams,
   ErrorCode,
@@ -85,7 +86,7 @@ const AiSettingsPage = () => {
 
   return (
     <div className="flex w-full flex-col items-center justify-center gap-4">
-      <div className="mx-auto w-full flex-col">
+      <div className="mx-auto w-full flex flex-col gap-4">
         <h1 className="text-[24px] font-bold text-primary-900">
           {t('OpenOps AI')}
         </h1>
@@ -94,47 +95,56 @@ const AiSettingsPage = () => {
             'Enable OpenOps Assistant and other AI-powered features such as the CLI command generation.',
           )}
         </p>
-        <div className="flex flex-col gap-8 p-6 border rounded-[11px]">
-          {aiBlockModel && (
-            <AiSettingsForm
-              block={aiBlockModel}
-              providerKey={'AI'}
-              initialConnection={aiSettings?.[0]?.connection}
-              onSave={(connectionName) =>
-                onSaveAiSettings({
-                  ...aiSettings?.[0],
-                  enabled: !!connectionName,
-                  connection: connectionName,
-                })
-              }
-              disabled={isSavingAiSettings}
-              displayName={t('Select Connection')}
-            />
-          )}
-
-          {awsBlockModel && (
-            <AiSettingsForm
-              block={awsBlockModel}
-              providerKey={'AWS'}
-              initialConnection={mcpSettings?.awsCost?.connectionName}
-              onSave={(connectionName: string) =>
-                onSaveMcpSettings({
-                  ...mcpSettings,
-                  awsCost: {
+        <AiConfigIndicator enabled={!!aiSettings?.[0]?.connection} />
+        <div className="p-6 border rounded-[11px]">
+          <div className="max-w-[648px] flex flex-col gap-4">
+            <h3 className="text-base font-bold">{t('AI connection')}</h3>
+            {aiBlockModel ? (
+              <AiSettingsForm
+                block={aiBlockModel}
+                providerKey={'AI'}
+                initialConnection={aiSettings?.[0]?.connection}
+                onSave={(connectionName) =>
+                  onSaveAiSettings({
+                    ...aiSettings?.[0],
                     enabled: !!connectionName,
-                    connectionName:
-                      removeConnectionBrackets(connectionName) ?? '',
-                  },
-                })
-              }
-              disabled={
-                isSavingMcpSettings ||
-                !aiSettings?.[0]?.connection ||
-                isSavingAiSettings
-              }
-              displayName={t('AWS Cost')}
-            />
-          )}
+                    connection: connectionName,
+                  })
+                }
+                disabled={isSavingAiSettings}
+                displayName={t('Select Connection')}
+              />
+            ) : (
+              <Skeleton className="h-[78px]" />
+            )}
+
+            <h3 className="text-sm font-normal">{t('MCP')}</h3>
+            {awsBlockModel ? (
+              <AiSettingsForm
+                block={awsBlockModel}
+                providerKey={'AWS'}
+                initialConnection={mcpSettings?.awsCost?.connectionName}
+                onSave={(connectionName: string) =>
+                  onSaveMcpSettings({
+                    ...mcpSettings,
+                    awsCost: {
+                      enabled: !!connectionName,
+                      connectionName:
+                        removeConnectionBrackets(connectionName) ?? '',
+                    },
+                  })
+                }
+                disabled={
+                  isSavingMcpSettings ||
+                  !aiSettings?.[0]?.connection ||
+                  isSavingAiSettings
+                }
+                displayName={t('AWS Cost')}
+              />
+            ) : (
+              <Skeleton className="h-[78px]" />
+            )}
+          </div>
         </div>
       </div>
     </div>