fix: engine logo on model dropdown (#3291)

* fix: render logo each engine instead each model engine

* chore: disabled option when engine isn't ready

web/containers/ModelDropdown/ModelSection.tsx

@@ -2,12 +2,15 @@ import { useCallback, useEffect, useState } from 'react'
 
 import Image from 'next/image'
 
-import { LlmEngine, Model, RemoteEngine } from '@janhq/core'
+import { EngineStatus, LlmEngine, Model, RemoteEngine } from '@janhq/core'
 
 import { Button } from '@janhq/joi'
 import { useSetAtom } from 'jotai'
 import { SettingsIcon } from 'lucide-react'
 
+import { twMerge } from 'tailwind-merge'
+
+import useEngineQuery from '@/hooks/useEngineQuery'
 import useGetModelsByEngine from '@/hooks/useGetModelsByEngine'
 
 import { getTitleByCategory } from '@/utils/model-engine'
@@ -30,6 +33,7 @@ const ModelSection: React.FC<Props> = ({
   const [models, setModels] = useState<Model[]>([])
   const { getModelsByEngine } = useGetModelsByEngine()
   const setUpRemoteModelStage = useSetAtom(setUpRemoteModelStageAtom)
+  const { data: engineData } = useEngineQuery()
 
   const engineLogo: string | undefined = models.find(
     (entry) => entry?.metadata?.logo != null
@@ -56,43 +60,55 @@ const ModelSection: React.FC<Props> = ({
 
   return (
     <div className="w-full pt-2">
-      <h6 className="mb-1 px-3 font-medium text-[hsla(var(--text-secondary))]">
+      <div className="flex justify-between pr-2">
-        {engineName}
+        <div className="flex gap-2 pl-3">
-      </h6>
+          {engineLogo && (
-      <ul className="pb-2">
-        {models.map((model) => (
-          <li
-            key={model.model}
-            className="flex cursor-pointer items-center gap-2 px-3 py-2 hover:bg-[hsla(var(--dropdown-menu-hover-bg))]"
-            onClick={() => onModelSelected(model)}
-          >
-            {model.metadata?.logo ? (
             <Image
-                className="rounded-full object-cover"
+              className="h-5 w-5 flex-shrink-0 rounded-full object-cover"
-                width={20}
+              width={40}
-                height={20}
+              height={40}
-                src={model.metadata?.logo}
+              src={engineLogo}
               alt="logo"
             />
-            ) : (
-              !model.engine?.includes('cortex.') && (
-                <div className="flex h-5 w-5 items-center justify-center rounded-full border border-[hsla(var(--app-border))] bg-gradient-to-r from-cyan-500 to-blue-500" />
-              )
           )}
-            <div className="flex w-full items-center justify-between">
+          <h6 className="mb-1 pr-3 font-medium text-[hsla(var(--text-secondary))]">
-              <p className="line-clamp-1">{model.name ?? model.model}</p>
+            {engineName}
-              {!model.engine?.includes('cortex.') && (
+          </h6>
+        </div>
         <Button theme="icon" onClick={onSettingClick}>
           <SettingsIcon
             size={14}
             className="text-[hsla(var(--text-secondary))]"
           />
         </Button>
+      </div>
+      <ul className="pb-2">
+        {models.map((model) => {
+          const isEngineReady =
+            engineData?.find((e) => e.name === model.engine)?.status ===
+            EngineStatus.Ready
+          return (
+            <li
+              key={model.model}
+              className={twMerge(
+                'flex cursor-pointer items-center gap-2 px-3 py-2 hover:bg-[hsla(var(--dropdown-menu-hover-bg))]',
+                isEngineReady
+                  ? 'text-[hsla(var(--text-primary))]'
+                  : 'cursor-not-allowed text-[hsla(var(--text-tertiary))]'
               )}
+              onClick={() => {
+                if (isEngineReady) {
+                  onModelSelected(model)
+                }
+              }}
+            >
+              <div className="flex w-full items-center justify-between">
+                <p className="line-clamp-1">{model.name ?? model.model}</p>
               </div>
               <ModelLabel metadata={model.metadata} compact />
             </li>
-        ))}
+          )
+        })}
       </ul>
     </div>
   )