refactor: useMergedWorkers

ee/tabby-ui/lib/hooks/use-remote-worker.ts

@@ -1,4 +1,4 @@
-import { groupBy, findIndex } from 'lodash-es'
+import { groupBy, findIndex, slice } from 'lodash-es'
 import {
   GetWorkersDocument,
   Worker,
@@ -6,6 +6,7 @@ import {
 } from '@/lib/gql/generates/graphql'
 import { useGraphQL } from './use-graphql'
 import type { HealthInfo } from './use-health'
+import React from 'react'
 
 function useRemoteWorkers() {
   return useGraphQL(GetWorkersDocument)
@@ -33,20 +34,27 @@ function transformHealthInfoToWorker(
 
 function useMergedWorkers(healthInfo: HealthInfo | undefined) {
   const { data } = useRemoteWorkers()
-  let workers = data?.workers || []
+  let workers = data?.workers
 
+  const groupedWorkers = React.useMemo(() => {
+    const _workers = slice(workers)
     const haveRemoteCompletionWorkers =
       findIndex(workers, { kind: WorkerKind.Completion }) > -1
     const haveRemoteChatWorkers =
       findIndex(workers, { kind: WorkerKind.Chat }) > -1
 
     if (!haveRemoteCompletionWorkers && healthInfo?.model) {
-    workers.push(transformHealthInfoToWorker(healthInfo, WorkerKind.Completion))
+      _workers.push(
+        transformHealthInfoToWorker(healthInfo, WorkerKind.Completion)
+      )
     }
     if (!haveRemoteChatWorkers && healthInfo?.chat_model) {
-    workers.push(transformHealthInfoToWorker(healthInfo, WorkerKind.Chat))
+      _workers.push(transformHealthInfoToWorker(healthInfo, WorkerKind.Chat))
     }
-  return groupBy(workers, worker => worker.kind)
+    return groupBy(_workers, 'kind')
+  }, [healthInfo, workers])
+
+  return groupedWorkers
 }
 
 export { useRemoteWorkers, useMergedWorkers }