feat: add more options for cortex popup (#3236)

update

web/screens/HubScreen2/components/DownloadLocalModelModal.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useState } from 'react'
+import { Fragment, useEffect, useState, useCallback } from 'react'
 
 import { Modal } from '@janhq/joi'
 import { useAtom } from 'jotai'
@@ -13,6 +13,7 @@ import Tab, { ModelTab } from './Tab'
 import { localModelModalStageAtom } from '@/helpers/atoms/DownloadLocalModel.atom'
 
 const DownloadLocalModelModal: React.FC = () => {
+  const [availableModels, setAvailableModels] = useState<string[]>([])
   const [{ stage, modelHandle }, setLocalModelModalStage] = useAtom(
     localModelModalStageAtom
   )
@@ -31,9 +32,21 @@ const DownloadLocalModelModal: React.FC = () => {
   }, [])
 
   const modelName = modelHandle?.split('/')[1] ?? ''
-  if (!modelHandle) return null
+  const isFromCortexHub = modelHandle?.includes('cortexso') ?? false
 
-  const isFromCortexHub = modelHandle.includes('cortexso')
+  const onModelBranchChanged = useCallback(
+    (models: string[]) => {
+      const isFromCortexHub = modelHandle?.includes('cortexso') ?? false
+      if (isFromCortexHub) {
+        setAvailableModels(models)
+      } else {
+        setAvailableModels(modelHandle != null ? [modelHandle] : [])
+      }
+    },
+    [modelHandle]
+  )
+
+  if (!modelHandle) return null
 
   return (
     <Modal
@@ -43,11 +56,11 @@ const DownloadLocalModelModal: React.FC = () => {
       content={
         <Fragment>
           <HeaderModal
-            modelId={modelHandle}
+            modelHandle={modelHandle}
             name={modelName}
             onActionClick={() => {}}
-            modelIdVariants={[modelHandle]}
             isLocalModel={true}
+            availableModels={availableModels}
           />
           <Tab
             tab={tab}
@@ -55,7 +68,10 @@ const DownloadLocalModelModal: React.FC = () => {
           />
           {tab === 'Versions' &&
             (isFromCortexHub ? (
-              <ListModel modelHandle={modelHandle} />
+              <ListModel
+                modelHandle={modelHandle}
+                onBranchSelected={onModelBranchChanged}
+              />
             ) : (
               <HfListModel modelHandle={modelHandle} />
             ))}

web/screens/HubScreen2/components/HeaderModal.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useCallback, useRef, useState } from 'react'
+import { Fragment, useCallback, useEffect, useRef, useState } from 'react'
 
 import Image from 'next/image'
 
@@ -10,27 +10,60 @@ import { twMerge } from 'tailwind-merge'
 import DropdownModal from './DropdownModal'
 
 type Props = {
-  modelIdVariants: string[]
-  modelId: string
   name: string
+  modelHandle?: string
+  availableModels: string[]
   onActionClick: () => void
   isLocalModel?: boolean
 }
 
 const HeaderModal: React.FC<Props> = ({
-  modelIdVariants,
-  modelId,
   name,
+  modelHandle,
+  availableModels,
   onActionClick,
   isLocalModel = false,
 }) => {
-  const [selectedVariant, setSelectedVariant] = useState<string>(modelId)
+  const [options, setOptions] = useState<{ name: string; value: string }[]>([])
+  const [selectedVariant, setSelectedVariant] = useState<string | undefined>()
   const textRef = useRef<HTMLDivElement>(null)
 
-  const options = modelIdVariants.map((variant) => ({
-    name: variant,
-    value: variant,
-  }))
+  useEffect(() => {
+    const isFromCortexHub = modelHandle?.includes('cortexso') ?? false
+    if (!isLocalModel) {
+      setOptions(
+        availableModels.map((variant) => ({
+          name: variant,
+          value: variant,
+        }))
+      )
+      if (availableModels.length > 0) {
+        setSelectedVariant(availableModels[0])
+      }
+      return
+    }
+
+    if (isLocalModel && !isFromCortexHub) {
+      setOptions([
+        {
+          name: modelHandle ?? '',
+          value: modelHandle ?? '',
+        },
+      ])
+      setSelectedVariant(modelHandle)
+      return
+    }
+
+    setOptions(
+      availableModels.map((variant) => ({
+        name: `${name}:${variant}`,
+        value: `${name}:${variant}`,
+      }))
+    )
+    if (availableModels.length > 0) {
+      setSelectedVariant(`${name}:${availableModels[0]}`)
+    }
+  }, [availableModels, name, modelHandle, isLocalModel])
 
   const onCopyClicked = useCallback(() => {
     navigator.clipboard.writeText(textRef.current?.innerText ?? '')
@@ -38,6 +71,8 @@ const HeaderModal: React.FC<Props> = ({
 
   const title = name.charAt(0).toUpperCase() + name.slice(1)
 
+  if (!selectedVariant) return null
+
   return (
     <div className="flex items-center">
       <span className="text-xl font-semibold leading-8">{title}</span>

web/screens/HubScreen2/components/ListModel.tsx

@@ -33,14 +33,16 @@ import { downloadedModelsAtom } from '@/helpers/atoms/Model.atom'
 
 type Props = {
   modelHandle: string
+  onBranchSelected?: (availableSelections: string[]) => void
 }
 
-const ListModel: React.FC<Props> = ({ modelHandle }) => {
+const ListModel: React.FC<Props> = ({ modelHandle, onBranchSelected }) => {
   const { data: engineData } = useEngineQuery()
+  const { data, isLoading } = useHfEngineToBranchesQuery(modelHandle)
+
   const [engineFilter, setEngineFilter] = useState<EngineType | undefined>(
     undefined
   )
-  const { data, isLoading } = useHfEngineToBranchesQuery(modelHandle)
 
   const engineSelections: { name: string; value: string }[] = useMemo(() => {
     if (!data || !engineData) return []
@@ -63,17 +65,26 @@ const ListModel: React.FC<Props> = ({ modelHandle }) => {
     return result
   }, [data, engineData])
 
+  const modelBranches: CortexHubModel[] = useMemo((): CortexHubModel[] => {
+    if (!data) return []
+    return (data[engineFilter as EngineType] as CortexHubModel[]) ?? []
+  }, [data, engineFilter])
+
   useEffect(() => {
     if (engineSelections.length === 0) return
     setEngineFilter(engineSelections[0].value as EngineType)
-  }, [engineSelections])
+    const models = modelBranches.map((m) => m.name)
+    onBranchSelected?.(models)
+  }, [engineSelections, modelBranches, onBranchSelected])
 
-  const modelBranches: CortexHubModel[] = []
-  if (data) {
-    const branches = data[engineFilter as EngineType] as CortexHubModel[]
-    if (!branches || branches.length === 0) return
-    modelBranches.push(...branches)
-  }
+  const onSelectionChanged = useCallback(
+    (selectionValue: string) => {
+      setEngineFilter(selectionValue as EngineType)
+      const models = modelBranches.map((m) => m.name)
+      onBranchSelected?.(models)
+    },
+    [setEngineFilter, onBranchSelected, modelBranches]
+  )
 
   if (isLoading)
     return (
@@ -90,7 +101,7 @@ const ListModel: React.FC<Props> = ({ modelHandle }) => {
           value={engineFilter}
           className="gap-1.5 whitespace-nowrap px-4 py-2 font-semibold"
           options={engineSelections}
-          onValueChange={(value) => setEngineFilter(value as EngineType)}
+          onValueChange={onSelectionChanged}
         />
       </div>
       <div className="mt-3 w-full overflow-hidden rounded-md border border-[hsla(var(--app-border))]">

web/screens/HubScreen2/components/SetUpRemoteModelModal.tsx

@@ -31,8 +31,7 @@ const SetUpRemoteModelModal: React.FC = () => {
           <HeaderModal
             name={modelName}
             onActionClick={navigateToSetUpApiKey}
-            modelId={modelId}
-            modelIdVariants={[modelId]}
+            availableModels={[modelId]}
           />
           <ModelTitle
             className="text-[hsla(var(--text-secondary)] my-4"

web/screens/Settings/ImportingModelModal/ImportingModelItem.tsx

@@ -20,7 +20,6 @@ const ImportingModelItem = ({ model }: Props) => {
   }, [])
 
   const onDeleteModelClick = useCallback(() => {}, [])
-  console.log('namh model', model)
   const displayStatus = useMemo(() => {
     if (model.status === 'FAILED') {
       return 'Failed'

web/screens/Settings/ImportingModelModal/index.tsx

@@ -29,14 +29,6 @@ const ImportingModelModal = () => {
     const importModels = async () => {
       for (const model of importingModels) {
         await downloadModel(model.path)
-        // const parsedResult = await result?.json()
-        // if (
-        //   parsedResult['message'] &&
-        //   parsedResult['message'] === 'Download model started successfully.'
-        // ) {
-        //   // update importingModels
-        // }
-        // console.log(`NamH result ${JSON.stringify(parsedResult)}`)
       }
     }
     importModels()