feat: manage cloud models from threads screen (#3223)

* feat: allow user to setup and manage cloud model from model dropdown

* feat: add setup apikey modal for model dropdown

* chore: remove console log

* chore: update new function onSettingClick

* chore: fix div

web/containers/ModelDropdown/ModelSection.tsx

@@ -1,15 +1,21 @@
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
 import Image from 'next/image'
 
-import { LlmEngine, Model } from '@janhq/core'
+import { LlmEngine, Model, RemoteEngine } from '@janhq/core'
+
+import { Button } from '@janhq/joi'
+import { useSetAtom } from 'jotai'
+import { SettingsIcon } from 'lucide-react'
 
 import useGetModelsByEngine from '@/hooks/useGetModelsByEngine'
 
 import { getTitleByCategory } from '@/utils/model-engine'
 
 import ModelLabel from '../ModelLabel'
 
+import { setUpRemoteModelStageAtom } from '@/helpers/atoms/SetupRemoteModel.atom'
+
 type Props = {
   engine: LlmEngine
   searchText: string
@@ -23,6 +29,22 @@ const ModelSection: React.FC<Props> = ({
 }) => {
   const [models, setModels] = useState<Model[]>([])
   const { getModelsByEngine } = useGetModelsByEngine()
+  const setUpRemoteModelStage = useSetAtom(setUpRemoteModelStageAtom)
+
+  const engineLogo: string | undefined = models.find(
+    (entry) => entry?.metadata?.logo != null
+  )?.metadata?.logo
+
+  const apiKeyUrl: string | undefined = models.find(
+    (entry) => entry?.metadata?.api_key_url != null
+  )?.metadata?.api_key_url
+
+  const onSettingClick = useCallback(() => {
+    setUpRemoteModelStage('SETUP_API_KEY', engine as unknown as RemoteEngine, {
+      logo: engineLogo,
+      api_key_url: apiKeyUrl,
+    })
+  }, [apiKeyUrl, engine, engineLogo, setUpRemoteModelStage])
 
   useEffect(() => {
     const matchedModels = getModelsByEngine(engine, searchText)
@@ -44,16 +66,30 @@ const ModelSection: React.FC<Props> = ({
             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 && (
+            {model.metadata?.logo ? (
               <Image
                 className="rounded-full object-cover"
                 width={20}
                 height={20}
                 src={model.metadata?.logo}
                 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" />
+              )
             )}
-            <p className="line-clamp-1">{model.name ?? model.model}</p>
+            <div className="flex w-full items-center justify-between">
+              <p className="line-clamp-1">{model.name ?? model.model}</p>
+              {!model.engine?.includes('cortex.') && (
+                <Button theme="icon" onClick={onSettingClick}>
+                  <SettingsIcon
+                    size={14}
+                    className="text-[hsla(var(--text-secondary))]"
+                  />
+                </Button>
+              )}
+            </div>
             <ModelLabel metadata={model.metadata} compact />
           </li>
         ))}