From f5dd44c4cbc944d470aaabf2afaedf3001d9a6ea Mon Sep 17 00:00:00 2001
From: Louis <louis@jan.ai>
Date: Wed, 15 Jan 2025 19:46:17 +0700
Subject: [PATCH 1/2] feat: move cortex extension settings to local engine page

---
 .../Settings/Engines/LocalEngineSettings.tsx      |  7 +++++++
 web/screens/Settings/ExtensionSetting/index.tsx   | 15 ++++++++++-----
 .../SettingDetailTextInputItem/index.tsx          |  2 +-
 .../SettingDetail/SettingDetailItem/index.tsx     |  2 +-
 web/screens/Settings/SettingDetail/index.tsx      |  6 +++++-
 web/screens/Settings/SettingLeftPanel/index.tsx   |  1 +
 6 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/web/screens/Settings/Engines/LocalEngineSettings.tsx b/web/screens/Settings/Engines/LocalEngineSettings.tsx
index c9522a743..96227ad90 100644
--- a/web/screens/Settings/Engines/LocalEngineSettings.tsx
+++ b/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>
   )
diff --git a/web/screens/Settings/ExtensionSetting/index.tsx b/web/screens/Settings/ExtensionSetting/index.tsx
index c8e80a6de..d73f1674d 100644
--- a/web/screens/Settings/ExtensionSetting/index.tsx
+++ b/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,
diff --git a/web/screens/Settings/SettingDetail/SettingDetailItem/SettingDetailTextInputItem/index.tsx b/web/screens/Settings/SettingDetail/SettingDetailItem/SettingDetailTextInputItem/index.tsx
index 7027425aa..3a1bad961 100644
--- a/web/screens/Settings/SettingDetail/SettingDetailItem/SettingDetailTextInputItem/index.tsx
+++ b/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
diff --git a/web/screens/Settings/SettingDetail/SettingDetailItem/index.tsx b/web/screens/Settings/SettingDetail/SettingDetailItem/index.tsx
index 93636a28a..33a0d0b03 100644
--- a/web/screens/Settings/SettingDetail/SettingDetailItem/index.tsx
+++ b/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}
diff --git a/web/screens/Settings/SettingDetail/index.tsx b/web/screens/Settings/SettingDetail/index.tsx
index d0dc8c7b3..1e4b79282 100644
--- a/web/screens/Settings/SettingDetail/index.tsx
+++ b/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>
+      )
   }
 }
 
diff --git a/web/screens/Settings/SettingLeftPanel/index.tsx b/web/screens/Settings/SettingLeftPanel/index.tsx
index fc797873b..c785f3c11 100644
--- a/web/screens/Settings/SettingLeftPanel/index.tsx
+++ b/web/screens/Settings/SettingLeftPanel/index.tsx
@@ -144,6 +144,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}

From 0f4b35d179c595b38ff385ba1c73db80b565346f Mon Sep 17 00:00:00 2001
From: Louis <louis@jan.ai>
Date: Wed, 15 Jan 2025 19:51:48 +0700
Subject: [PATCH 2/2] fix: engines in settings sometime not populated properly

---
 web/screens/Settings/Engines/index.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/web/screens/Settings/Engines/index.tsx b/web/screens/Settings/Engines/index.tsx
index 8a797f46f..6d8f68b78 100644
--- a/web/screens/Settings/Engines/index.tsx
+++ b/web/screens/Settings/Engines/index.tsx
@@ -2,8 +2,7 @@ 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'
 
@@ -11,8 +10,10 @@ 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">