feat: enhance AppStatusModal with AI debugging capabilities and update types for improved context handling

Author: AbhishekA1509

src/Shared/Components/AppStatusModal/AppStatusBody.tsx

@@ -20,6 +20,7 @@ import { getAIAnalyticsEvents } from '@Common/Helper'
 import { Tooltip } from '@Common/Tooltip'
 import { ComponentSizeType } from '@Shared/constants'
 import { getAppDetailsURL } from '@Shared/Helpers'
+import { MainContext, useMainContext } from '@Shared/Providers'
 
 import { Button, ButtonComponentType, ButtonVariantType } from '../Button'
 import { DeploymentStatusDetailBreakdown } from '../CICDHistory'
@@ -86,7 +87,10 @@ export const AppStatusBody = ({
     deploymentStatusDetailsBreakdownData,
     selectedTab,
     debugWithAIButton: ExplainWithAIButton,
+    handleClose,
 }: AppStatusBodyProps) => {
+    const { aiAgentContext } = useMainContext()
+
     const appStatus = appDetails.resourceTree?.status?.toUpperCase() || appDetails.appStatus
 
     const getAppStatusInfoCardItems = (): (Omit<ComponentProps<typeof InfoCardItem>, 'isLast'> & { id: string })[] => {
@@ -101,6 +105,29 @@ export const AppStatusBody = ({
         )
         const debugObject = `${debugNode?.kind}/${debugNode?.name}`
 
+        const intelligenceConfig: MainContext['intelligenceConfig'] = {
+            clusterId: appDetails.clusterId,
+            metadata: {
+                ...(debugNode ? { object: debugObject } : { message }),
+                namespace: appDetails.namespace,
+                status: debugNode?.health?.status ?? appStatus,
+            },
+            prompt: `Debug ${message || 'error'} ${debugNode ? `of ${debugObject}` : ''} in ${appDetails.namespace}`,
+            analyticsCategory: getAIAnalyticsEvents('APP_STATUS', appDetails.appType),
+        }
+
+        const debugAgentContext = {
+            ...aiAgentContext,
+            prompt: `Why is application '${appDetails.appName}' of '${appDetails.environmentName}' env ${appStatus}?`,
+            data: {
+                ...aiAgentContext.data,
+                ...(debugNode ? { debugNodeKind: debugNode.kind, debugNodeName: debugNode.name } : {}),
+                ...(message ? { additionalMessage: message } : {}),
+                namespace: appDetails.namespace,
+                status: debugNode?.health?.status ?? appStatus,
+            },
+        } as MainContext['debugAgentContext']
+
         return [
             {
                 id: 'app-status-row',
@@ -115,16 +142,9 @@ export const AppStatusBody = ({
                             appStatus?.toLowerCase() !== StatusType.HEALTHY.toLowerCase() &&
                             (debugNode || message) ? (
                                 <ExplainWithAIButton
-                                    intelligenceConfig={{
-                                        clusterId: appDetails.clusterId,
-                                        metadata: {
-                                            ...(debugNode ? { object: debugObject } : { message }),
-                                            namespace: appDetails.namespace,
-                                            status: debugNode?.health?.status ?? appStatus,
-                                        },
-                                        prompt: `Debug ${message || 'error'} ${debugNode ? `of ${debugObject}` : ''} in ${appDetails.namespace}`,
-                                        analyticsCategory: getAIAnalyticsEvents('APP_STATUS', appDetails.appType),
-                                    }}
+                                    intelligenceConfig={intelligenceConfig}
+                                    debugAgentContext={debugAgentContext}
+                                    onClick={handleClose}
                                 />
                             ) : null
                         }

src/Shared/Components/AppStatusModal/AppStatusModal.component.tsx

@@ -315,6 +315,7 @@ const AppStatusModal = ({
                     deploymentStatusDetailsBreakdownData={deploymentStatusDetailsBreakdownData}
                     selectedTab={selectedTab}
                     debugWithAIButton={debugWithAIButton}
+                    handleClose={handleClose}
                 />
 
                 {type === 'stack-manager' && (

src/Shared/Components/AppStatusModal/types.ts

@@ -17,6 +17,7 @@
 import { FunctionComponent, PropsWithChildren, ReactNode } from 'react'
 
 import { APIOptions, DeploymentAppTypes } from '@Common/Types'
+import { MainContext } from '@Shared/Providers'
 import {
     AppDetails,
     ConfigDriftModalProps,
@@ -38,7 +39,11 @@ export type AppStatusModalProps = {
     processVirtualEnvironmentDeploymentData: (
         data?: DeploymentStatusDetailsType,
     ) => DeploymentStatusDetailsBreakdownDataType
-    debugWithAIButton: FunctionComponent<{ intelligenceConfig: IntelligenceConfig }>
+    debugWithAIButton: FunctionComponent<{
+        intelligenceConfig: IntelligenceConfig
+        debugAgentContext: MainContext['debugAgentContext']
+        onClick?: () => void
+    }>
 } & (
     | {
           type: 'release'
@@ -59,7 +64,7 @@ export type AppStatusModalProps = {
 )
 
 export interface AppStatusBodyProps
-    extends Required<Pick<AppStatusModalProps, 'appDetails' | 'type' | 'debugWithAIButton'>> {
+    extends Required<Pick<AppStatusModalProps, 'appDetails' | 'type' | 'debugWithAIButton' | 'handleClose'>> {
     handleShowConfigDriftModal: () => void
     selectedTab: AppStatusModalTabType
     deploymentStatusDetailsBreakdownData: DeploymentStatusDetailsBreakdownDataType

src/Shared/Providers/MainContextProvider/types.ts

@@ -66,16 +66,20 @@ export type AIAgentContextType =
               envName: string
               clusterId: number
               appType: 'devtronApp' | 'devtronHelmChart'
-          }
+          } & Record<string, unknown>
       }
     | {
           source: AIAgentContextSourceType.RESOURCE_BROWSER_CLUSTER
           data: {
               clusterId: number
               clusterName: string
-          }
+          } & Record<string, unknown>
       }
 
+export type DebugAgentContextType = AIAgentContextType & {
+    prompt?: string
+}
+
 export interface TempAppWindowConfig {
     /** Whether the temporary window is open */
     open: boolean
@@ -139,6 +143,8 @@ type CommonMainContextProps = {
     setLicenseData: Dispatch<SetStateAction<DevtronLicenseInfo>>
     canFetchHelmAppStatus: boolean
     setIntelligenceConfig: Dispatch<SetStateAction<IntelligenceConfig>>
+    debugAgentContext: DebugAgentContextType | null
+    setDebugAgentContext: (aiAgentContext: DebugAgentContextType | null) => void
     setAIAgentContext: (aiAgentContext: AIAgentContextType) => void
     setSidePanelConfig: Dispatch<SetStateAction<SidePanelConfig>>
 } & Pick<EnvironmentDataValuesDTO, 'isResourceRecommendationEnabled'>

src/Shared/types.ts

@@ -1327,7 +1327,7 @@ export interface DeploymentStatusDetailsBreakdownDataType {
 
 export interface IntelligenceConfig {
     clusterId: number
-    metadata: Record<string, string>
+    metadata: Record<string, string | number>
     prompt: string
     analyticsCategory: string
 }

src/index.ts

@@ -187,6 +187,7 @@ export interface customEnv {
      * @default false
      */
     FEATURE_STORAGE_ENABLE?: boolean
+    FEATURE_ATHENA_DEBUG_MODE_ENABLE?: boolean
 }
 declare global {
     interface Window {