Merge pull request #4457 from janhq/feat/move-cortex-extension-settings-to-engine

feat: move cortex extension settings to local engine page

Author: louis-jan

web/screens/Settings/Engines/LocalEngineSettings.tsx

@@ -23,6 +23,8 @@ import {
 
 import { formatDownloadPercentage } from '@/utils/converter'
 
+import ExtensionSetting from '../ExtensionSetting'
+
 import DeleteEngineVariant from './DeleteEngineVariant'
 const os = () => {
   switch (PLATFORM) {
@@ -339,6 +341,11 @@ const LocalEngineSettings = ({ engine }: { engine: InferenceEngine }) => {
             </div>
           </div>
         </div>
+        <div className="border-b border-[hsla(var(--app-border))]" />
+        <div className="flex w-full border-b border-[hsla(var(--app-border))]">
+          {/* TODO: Pull settings from engine when it's supported */}
+          <ExtensionSetting extensionName="@janhq/inference-cortex-extension" />
+        </div>
       </div>
     </ScrollArea>
   )

web/screens/Settings/Engines/index.tsx

@@ -2,17 +2,18 @@ import React from 'react'
 
 import { InferenceEngine } from '@janhq/core'
 import { ScrollArea } from '@janhq/joi'
-
-import { useGetEngines } from '@/hooks/useEngineManagement'
+import { useAtomValue } from 'jotai'
 
 import { isLocalEngine } from '@/utils/modelEngine'
 
 import LocalEngineItems from './LocalEngineItem'
 import ModalAddRemoteEngine from './ModalAddRemoteEngine'
 import RemoteEngineItems from './RemoteEngineItem'
 
+import { installedEnginesAtom } from '@/helpers/atoms/Engines.atom'
+
 const Engines = () => {
-  const { engines } = useGetEngines()
+  const engines = useAtomValue(installedEnginesAtom)
 
   return (
     <ScrollArea className="h-full w-full">

web/screens/Settings/ExtensionSetting/index.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect, useState } from 'react'
+import React, { Fragment, useEffect, useMemo, useState } from 'react'
 
 import {
   BaseExtension,
@@ -14,7 +14,7 @@ import SettingDetailItem from '../SettingDetail/SettingDetailItem'
 import { extensionManager } from '@/extension'
 import { selectedSettingAtom } from '@/helpers/atoms/Setting.atom'
 
-const ExtensionSetting = () => {
+const ExtensionSetting = ({ extensionName }: { extensionName?: string }) => {
   const selectedExtensionName = useAtomValue(selectedSettingAtom)
   const [settings, setSettings] = useState<SettingComponentProps[]>([])
   const [installationState, setInstallationState] =
@@ -23,11 +23,16 @@ const ExtensionSetting = () => {
     undefined
   )
 
+  const currentExtensionName = useMemo(
+    () => extensionName ?? selectedExtensionName,
+    [selectedExtensionName, extensionName]
+  )
+
   useEffect(() => {
     const getExtensionSettings = async () => {
-      if (!selectedExtensionName) return
+      if (!currentExtensionName) return
       const allSettings: SettingComponentProps[] = []
-      const baseExtension = extensionManager.getByName(selectedExtensionName)
+      const baseExtension = extensionManager.getByName(currentExtensionName)
       if (!baseExtension) return
 
       setBaseExtension(baseExtension)
@@ -40,7 +45,7 @@ const ExtensionSetting = () => {
       setInstallationState(await baseExtension.installationState())
     }
     getExtensionSettings()
-  }, [selectedExtensionName])
+  }, [currentExtensionName])
 
   const onValueChanged = async (
     key: string,

web/screens/Settings/SettingDetail/SettingDetailItem/SettingDetailTextInputItem/index.tsx

@@ -87,7 +87,7 @@ const SettingDetailTextInputItem = ({
       <div
         className={twMerge(
           'w-full flex-shrink-0 pr-1 sm:w-1/2',
-          type === 'number' && 'sm:w-22 w-24'
+          type === 'number' && 'sm:w-22 w-50'
         )}
       >
         <Input

web/screens/Settings/SettingDetail/SettingDetailItem/index.tsx

@@ -56,7 +56,7 @@ const SettingDetailItem = ({ componentProps, onValueUpdated }: Props) => {
     <div className="flex h-full w-full flex-col overflow-y-auto">
       {components.map((component, index) => (
         <div
-          className={`mx-4 ${index === components.length - 1 ? '' : 'border-b border-[hsla(var(--app-border))]'}`}
+          className={`${index === components.length - 1 ? '' : 'border-b border-[hsla(var(--app-border))]'}`}
           key={index}
         >
           {component}

web/screens/Settings/SettingDetail/index.tsx

@@ -59,7 +59,11 @@ const SettingDetail = () => {
           <RemoteEngineSettings engine={selectedSetting as InferenceEngine} />
         )
       }
-      return <ExtensionSetting />
+      return (
+        <div className="mx-4">
+          <ExtensionSetting />
+        </div>
+      )
   }
 }
 

web/screens/Settings/SettingLeftPanel/index.tsx

@@ -148,6 +148,7 @@ const SettingLeftPanel = () => {
 
         {extensionHasSettings
           .sort((a, b) => String(a.name).localeCompare(String(b.name)))
+          .filter((e) => !e.name?.includes('Cortex'))
           .map((item) => (
             <SettingItem
               key={item.name}