fix: refresh channel test dialog status

web/default/src/features/channels/components/dialogs/channel-test-dialog.tsx

@@ -16,7 +16,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useQueryClient } from '@tanstack/react-query'
 import {
   type ColumnDef,
   type RowSelectionState,
@@ -67,7 +68,11 @@ import {
   sideDrawerHeaderClassName,
 } from '@/components/drawer-layout'
 import { StatusBadge } from '@/components/status-badge'
-import { formatResponseTime, handleTestChannel } from '../../lib'
+import {
+  channelsQueryKeys,
+  formatResponseTime,
+  handleTestChannel,
+} from '../../lib'
 import { useChannels } from '../channels-provider'
 
 type ChannelTestDialogProps = {
@@ -77,6 +82,8 @@ type ChannelTestDialogProps = {
 
 type ModelRow = {
   model: string
+  testResult?: TestResult
+  isTesting: boolean
 }
 
 type TestStatus = 'idle' | 'testing' | 'success' | 'error'
@@ -203,7 +210,9 @@ export function ChannelTestDialog({
   onOpenChange,
 }: ChannelTestDialogProps) {
   const { t } = useTranslation()
-  const { currentRow } = useChannels()
+  const queryClient = useQueryClient()
+  const { currentRow, setCurrentRow } = useChannels()
+  const currentRowRef = useRef(currentRow)
   const [endpointType, setEndpointType] = useState('auto')
   const [isStreamTest, setIsStreamTest] = useState(false)
   const [searchTerm, setSearchTerm] = useState('')
@@ -228,6 +237,10 @@ export function ChannelTestDialog({
     [t]
   )
 
+  useEffect(() => {
+    currentRowRef.current = currentRow
+  }, [currentRow])
+
   const resetState = useCallback(() => {
     setEndpointType('auto')
     setIsStreamTest(false)
@@ -277,8 +290,13 @@ export function ChannelTestDialog({
   }, [searchTerm, modelsValue])
 
   const tableData = useMemo<ModelRow[]>(
-    () => filteredModels.map((model) => ({ model })),
-    [filteredModels]
+    () =>
+      filteredModels.map((model) => ({
+        model,
+        testResult: testResults[model],
+        isTesting: testingModels.has(model),
+      })),
+    [filteredModels, testResults, testingModels]
   )
 
   const markModelTesting = useCallback((key: string, isTesting: boolean) => {
@@ -303,15 +321,16 @@ export function ChannelTestDialog({
 
   const testSingleModel = useCallback(
     async (model: string, silent = false): Promise<TestResult | undefined> => {
-      if (!currentRow) return
+      const testChannelRow = currentRow
+      if (!testChannelRow) return
 
       markModelTesting(model, true)
       updateTestResult(model, { status: 'testing' })
       let finalResult: TestResult | undefined
 
       try {
         await handleTestChannel(
-          currentRow.id,
+          testChannelRow.id,
           {
             testModel: model,
             endpointType: endpointType === 'auto' ? undefined : endpointType,
@@ -326,6 +345,20 @@ export function ChannelTestDialog({
               errorCode,
             }
             updateTestResult(model, finalResult)
+            if (success && typeof responseTime === 'number') {
+              const activeRow = currentRowRef.current
+              if (activeRow?.id !== testChannelRow.id) {
+                return
+              }
+              setCurrentRow({
+                ...activeRow,
+                response_time: responseTime,
+                test_time: Math.floor(Date.now() / 1000),
+              })
+              queryClient.invalidateQueries({
+                queryKey: channelsQueryKeys.lists(),
+              })
+            }
           }
         )
       } catch (error: unknown) {
@@ -344,6 +377,8 @@ export function ChannelTestDialog({
       endpointType,
       isStreamTest,
       markModelTesting,
+      queryClient,
+      setCurrentRow,
       t,
       updateTestResult,
     ]
@@ -455,7 +490,7 @@ export function ChannelTestDialog({
         header: t('Status'),
         cell: ({ row }) => {
           const model = row.original.model
-          const result = testResults[model]
+          const result = row.original.testResult
           return (
             <TestStatusCell
               result={result}
@@ -472,7 +507,7 @@ export function ChannelTestDialog({
         header: t('Actions'),
         cell: ({ row }) => {
           const model = row.original.model
-          const isTestingModel = testingModels.has(model)
+          const isTestingModel = row.original.isTesting
 
           return (
             <Button
@@ -492,14 +527,7 @@ export function ChannelTestDialog({
         size: 120,
       },
     ],
-    [
-      defaultTestModel,
-      isBatchTesting,
-      t,
-      testResults,
-      testingModels,
-      testSingleModel,
-    ]
+    [defaultTestModel, isBatchTesting, t, testSingleModel]
   )
 
   const { table } = useDataTable({

web/default/src/features/channels/lib/channel-actions.ts

@@ -237,11 +237,18 @@ export async function handleTestChannel(
 
   try {
     const response = await testChannel(id, payload)
+    let responseTime: number | undefined
+    if (typeof response.data?.response_time === 'number') {
+      responseTime = response.data.response_time
+    } else if (typeof response.time === 'number') {
+      responseTime = response.time * 1000
+    }
+
     if (response.success) {
       if (!options?.silent) {
         toast.success(i18next.t(SUCCESS_MESSAGES.TESTED))
       }
-      onTestComplete?.(true, response.data?.response_time)
+      onTestComplete?.(true, responseTime)
     } else {
       if (!options?.silent) {
         toast.error(response.message || i18next.t(ERROR_MESSAGES.TEST_FAILED))

web/default/src/features/channels/types.ts

@@ -143,6 +143,7 @@ export interface ChannelTestResponse {
   success: boolean
   message?: string
   error_code?: string
+  time?: number
   data?: {
     response_time?: number
     error?: string