fix: main-chat-page: warnings from React (#4855)

* fix/home-page: warnings from React

* minor changes

* minor changes

* update electron/package.json

web/containers/ModelDropdown/index.tsx

@@ -1,4 +1,11 @@
-import { useState, useMemo, useEffect, useCallback, useRef } from 'react'
+import {
+  useState,
+  useMemo,
+  useEffect,
+  useCallback,
+  useRef,
+  Fragment,
+} from 'react'
 
 import Image from 'next/image'
 
@@ -553,10 +560,9 @@ const ModelDropdown = ({
                               (c) => c.id === model.id
                             )
                             return (
-                              <>
+                              <Fragment key={model.id}>
                                 {isDownloaded && (
                                   <li
-                                    key={model.id}
                                     className={twMerge(
                                       'flex items-center justify-between gap-4 px-3 py-2 hover:bg-[hsla(var(--dropdown-menu-hover-bg))]',
                                       !isConfigured
@@ -634,7 +640,7 @@ const ModelDropdown = ({
                                     </div>
                                   </li>
                                 )}
-                              </>
+                              </Fragment>
                             )
                           })}
                       </ul>

web/hooks/useHardwareManagement.ts

@@ -57,24 +57,20 @@ export function useGetHardwareInfo(updatePeriodically: boolean = true) {
       revalidateOnFocus: false,
       revalidateOnReconnect: false,
       refreshInterval: updatePeriodically ? 2000 : undefined,
+      onSuccess(data) {
+        const usedMemory = data.ram.total - data.ram.available
+        setUsedRam(usedMemory)
+
+        setTotalRam(data.ram.total)
+
+        const ramUtilitized = (usedMemory / data.ram.total) * 100
+        setRamUtilitized(Math.round(ramUtilitized))
+
+        setCpuUsage(Math.round(data.cpu.usage))
+      },
     }
   )
 
-  const usedMemory =
-    Number(hardware?.ram.total) - Number(hardware?.ram.available)
-
-  if (hardware?.ram?.total && hardware?.ram?.available)
-    setUsedRam(Number(usedMemory))
-
-  if (hardware?.ram?.total) setTotalRam(hardware.ram.total)
-
-  const ramUtilitized =
-    ((Number(usedMemory) ?? 0) / (hardware?.ram.total ?? 1)) * 100
-
-  setRamUtilitized(Math.round(ramUtilitized))
-
-  setCpuUsage(Math.round(hardware?.cpu.usage ?? 0))
-
   return { hardware, error, mutate }
 }