fix: image upload button does not work - refresh models list persist current selected engine (#4768)

web/hooks/useEngineManagement.ts

@@ -477,20 +477,23 @@ export const useRefreshModelList = (engine: string) => {
   const [refreshingModels, setRefreshingModels] = useState(false)
   const { mutate: fetchRemoteModels } = useGetRemoteModels(engine)
 
-  const refreshModels = useCallback(() => {
-    setRefreshingModels(true)
-    fetchRemoteModels()
-      .then((remoteModelList) =>
-        Promise.all(
-          remoteModelList?.data?.map((model: { id?: string }) =>
-            model?.id
-              ? addRemoteEngineModel(model.id, engine).catch(() => {})
-              : {}
-          ) ?? []
+  const refreshModels = useCallback(
+    (engine: string) => {
+      setRefreshingModels(true)
+      fetchRemoteModels()
+        .then((remoteModelList) =>
+          Promise.all(
+            remoteModelList?.data?.map((model: { id?: string }) =>
+              model?.id
+                ? addRemoteEngineModel(model.id, engine).catch(() => {})
+                : {}
+            ) ?? []
+          )
         )
-      )
-      .finally(() => setRefreshingModels(false))
-  }, [fetchRemoteModels])
+        .finally(() => setRefreshingModels(false))
+    },
+    [fetchRemoteModels]
+  )
 
   return { refreshingModels, refreshModels }
 }

web/screens/Hub/ModelPage/RemoteModelRefresh.tsx

@@ -6,15 +6,15 @@ import Spinner from '@/containers/Loader/Spinner'
 
 import { useRefreshModelList } from '@/hooks/useEngineManagement'
 
-function RemoteModelRefresh({ id }: { id: string }) {
-  const { refreshingModels, refreshModels } = useRefreshModelList(id)
+function RemoteModelRefresh({ engine }: { engine: string }) {
+  const { refreshingModels, refreshModels } = useRefreshModelList(engine)
 
   return (
     <Button
       theme={'ghost'}
       variant={'outline'}
       className="h-7 px-2"
-      onClick={() => refreshModels()}
+      onClick={() => refreshModels(engine)}
     >
       {refreshingModels ? (
         <Spinner size={16} strokeWidth={2} className="mr-2" />

web/screens/Hub/ModelPage/index.tsx

@@ -158,7 +158,7 @@ const ModelPage = ({ model, onGoBack }: Props) => {
                       )}
                       <th className="w-[120px]">
                         {model.type === 'cloud' && (
-                          <RemoteModelRefresh id={model.id} />
+                          <RemoteModelRefresh engine={model.id} />
                         )}
                       </th>
                     </tr>

web/screens/Hub/index.tsx

@@ -368,10 +368,10 @@ const HubScreen = () => {
                         {hubBannerOption === 'upload' && (
                           <div
                             className={`mx-2 mb-2 flex h-[172px] cursor-pointer items-center justify-center rounded-md border`}
+                            {...getRootProps()}
                             onClick={() => {
                               imageInputRef.current?.click()
                             }}
-                            {...getRootProps()}
                           >
                             <div className="flex flex-col items-center justify-center">
                               <div className="mx-auto inline-flex h-10 w-10 items-center justify-center rounded-full bg-gray-200">

web/screens/Settings/Engines/RemoteEngineSettings.tsx

@@ -52,25 +52,25 @@ import { showScrollBarAtom } from '@/helpers/atoms/Setting.atom'
 import { threadsAtom } from '@/helpers/atoms/Thread.atom'
 
 const RemoteEngineSettings = ({
-  engine: name,
+  engine: engineName,
 }: {
   engine: InferenceEngine
 }) => {
   const { engines, mutate } = useGetEngines()
   const downloadedModels = useAtomValue(downloadedModelsAtom)
   const [showApiKey, setShowApiKey] = useState(false)
-  const remoteModels = downloadedModels.filter((e) => e.engine === name)
+  const remoteModels = downloadedModels.filter((e) => e.engine === engineName)
   const [isActiveAdvanceSetting, setisActiveAdvanceSetting] = useState(false)
   const setSelectedModel = useSetAtom(selectedModelAtom)
-  const customEngineLogo = getLogoEngine(name)
+  const customEngineLogo = getLogoEngine(engineName)
   const threads = useAtomValue(threadsAtom)
-  const { refreshingModels, refreshModels } = useRefreshModelList(name)
+  const { refreshingModels, refreshModels } = useRefreshModelList(engineName)
   const showScrollBar = useAtomValue(showScrollBarAtom)
 
   const engine =
     engines &&
     Object.entries(engines)
-      .filter(([key]) => key === name)
+      .filter(([key]) => key === engineName)
       .flatMap(([_, engineArray]) => engineArray as EngineConfig)[0]
 
   const debounceRef = useRef<NodeJS.Timeout | null>(null)
@@ -92,12 +92,12 @@ const RemoteEngineSettings = ({
       debounceRef.current = setTimeout(async () => {
         const updatedEngine = { ...engine }
         set(updatedEngine, field, value)
-        await updateEngine(name, updatedEngine)
+        await updateEngine(engineName, updatedEngine)
         mutate()
         events.emit(EngineEvent.OnEngineUpdate, {})
       }, 300)
     },
-    [engine, name, mutate]
+    [engine, engineName, mutate]
   )
 
   const [data, setData] = useState({
@@ -237,7 +237,7 @@ const RemoteEngineSettings = ({
                   <Button
                     theme={'ghost'}
                     variant={'outline'}
-                    onClick={() => refreshModels()}
+                    onClick={() => refreshModels(engineName)}
                   >
                     {refreshingModels ? (
                       <Spinner size={16} strokeWidth={2} className="mr-2" />
@@ -246,7 +246,7 @@ const RemoteEngineSettings = ({
                     )}
                     Refresh
                   </Button>
-                  <ModalAddModel engine={name} />
+                  <ModalAddModel engine={engineName} />
                 </div>
               </div>