feat: add AIChat in devtron app details

Author: Elessar1802

.env

@@ -69,3 +69,4 @@ FEATURE_DEFAULT_AUTHENTICATED_VIEW_ENABLE=false
 GATEKEEPER_URL=https://license.devtron.ai/dashboard
 FEATURE_AI_INTEGRATION_ENABLE=false
 LOGIN_PAGE_IMAGE=
+FEATURE_AI_APP_DETAILS_ENABLE=false

src/components/app/details/main.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { lazy, Suspense, useEffect, useState } from 'react'
+import { lazy, Suspense, useEffect, useRef, useState } from 'react'
 import { Switch, Route, Redirect, useParams, useRouteMatch } from 'react-router-dom'
 import {
     showError,
@@ -35,6 +35,7 @@ import { MultiValue } from 'react-select'
 import {
     ErrorBoundary,
     getAndSetAppGroupFilters,
+    importComponentFromFELibrary,
     setAppGroupFilterInLocalStorage,
     sortOptionsByLabel,
 } from '../../common'
@@ -59,6 +60,8 @@ const CIDetails = lazy(() => import('./cIDetails/CIDetails'))
 const AppDetails = lazy(() => import('./appDetails/AppDetails'))
 const CDDetails = lazy(() => import('./cdDetails/CDDetails'))
 
+const AIChat = importComponentFromFELibrary('AIChat', null, 'function')
+
 export default function AppDetailsPage() {
     const { path } = useRouteMatch()
     const { appId } = useParams<{ appId }>()
@@ -81,6 +84,8 @@ export default function AppDetailsPage() {
     const [apiError, setApiError] = useState(null)
     const [initLoading, setInitLoading] = useState<boolean>(false)
 
+    const parentRef = useRef<HTMLDivElement>(null)
+
     const { fetchRecentlyVisitedParsedApps } = useUserPreferences({})
 
     const getAppMetaInfoRes = async (shouldResetAppName: boolean = false): Promise<AppMetaInfo> => {
@@ -344,7 +349,7 @@ export default function AppDetailsPage() {
     const _filteredEnvIds = selectedAppList.length > 0 ? selectedAppList.map((app) => +app.value).join(',') : null
 
     return (
-        <div className="app-details-page flexbox-col w-100 h-100 dc__overflow-auto">
+        <div ref={parentRef} className="app-details-page flexbox-col w-100 h-100 dc__overflow-auto">
             <AppHeader
                 appName={appName}
                 appMetaInfo={appMetaInfo}
@@ -380,6 +385,8 @@ export default function AppDetailsPage() {
                 />
             )}
 
+            {AIChat && window._env_?.FEATURE_AI_APP_DETAILS_ENABLE && (<AIChat parentRef={parentRef} />)}
+
             <ErrorBoundary>
                 <Suspense fallback={<Progressing pageLoader />}>
                     <Switch>

src/index.tsx

@@ -170,8 +170,9 @@ if (!window || !window._env_) {
         FEATURE_APPLICATION_TEMPLATES_ENABLE: true,
         FEATURE_DEFAULT_AUTHENTICATED_VIEW_ENABLE: false,
         GATEKEEPER_URL: 'https://license.devtron.ai/dashboard',
-        FEATURE_AI_INTEGRATION_ENABLE: false,
+        FEATURE_AI_INTEGRATION_ENABLE: true,
         LOGIN_PAGE_IMAGE: '',
+        FEATURE_AI_APP_DETAILS_ENABLE: false,
     }
 }