Refactor/agent align (#10276)

* Refactor agent streaming from EventEmitter to ReadableStream Replaced EventEmitter-based agent streaming with ReadableStream for better compatibility with AI SDK patterns. Modified SessionMessageService to return stream/completion pair instead of event emitter, updated HTTP handlers to use stream pumping, and added IPC contract for renderer-side message persistence. * Add accessible paths management to agent configuration Move accessible paths functionality from session modal to agent modal, add validation requiring at least one path, and update form handling to inherit agent paths in sessions. * Add provider_name field to model objects and improve display - Add provider_name field to ApiModel schema and transformation logic - Update model options to include providerName for better display - Improve provider label fallback chain in model transformation - Fix agent hook to use proper SWR key and conditional fetching - Enhance option rendering with better truncation and provider display * fix(i18n): Auto update translations for PR #10276 * Optimize chat components with memoization and shared layout - Wrap `SessionMessages` and `SessionInputBar` in `useMemo` to prevent unnecessary re-renders - Refactor `AgentSessionMessages` to use shared layout components and message grouping - Extract common styled components to `shared.tsx` for reuse across message components * Add smooth animations to SessionsTab and Sessions components - Replace static conditional rendering with Framer Motion animations for no-agent and session states - Animate session list items with staggered entrance and exit transitions - Add loading spinner animation with fade effect - Apply motion to session creation button with delayed entrance * Add loading state with spinner and i18n support to SessionsTab - Replace static "No active agent" message with a spinner and loading text - Integrate react-i18next for translation of loading message - Adjust animation timing and styling for smoother loading state transition * Support API models with provider_name field in getModelName - Add ApiModel type import and update function signature to accept ApiModel - Return formatted name using provider_name field for API models - Maintain backward compatibility for legacy models by looking up provider in store * Simplify provider display name logic and add debug logging - Replace complex fallback chain for provider display name with direct provider name access - Add console.log for model debugging in getModelName function * Extract model name from session model string - Use split and pop to isolate the model name after the colon - Fall back to the full model string if no colon is present - Maintain provider and group identifiers for model object consistency * Improve model name resolution for agent sessions - Extract actual model ID from session model string and resolve model details - Use resolved model name, provider, and group when available instead of defaults - Remove redundant API model handling in getModelName function * Set default active agent and session on load - Automatically select first agent if none active after loading - Automatically select first session per agent if none active after loading - Prevent empty selection states in UI components --------- Co-authored-by: GitHub Action <action@github.com>
2025-09-20 16:56:53 +08:00
parent fcacc50fdc
commit 36f86ff2b9
42 changed files with 1653 additions and 1142 deletions
@@ -1,5 +1,4 @@
 import { loggerService } from '@logger'
-import { AgentStreamEvent } from '@main/services/agents/interfaces/AgentStreamInterface'
 import { Request, Response } from 'express'

 import { agentService, sessionMessageService, sessionService } from '../../../../services/agents'
@@ -44,7 +43,12 @@ export const createMessage = async (req: Request, res: Response): Promise<void>
    res.setHeader('Access-Control-Allow-Headers', 'Cache-Control')

    const abortController = new AbortController()
-    const messageStream = sessionMessageService.createSessionMessage(session, messageData, abortController)
+    const { stream, completion } = await sessionMessageService.createSessionMessage(
+      session,
+      messageData,
+      abortController
+    )
+    const reader = stream.getReader()

    // Track stream lifecycle so we keep the SSE connection open until persistence finishes
    let responseEnded = false
@@ -61,7 +65,7 @@ export const createMessage = async (req: Request, res: Response): Promise<void>

      responseEnded = true
      try {
-        res.write('data: {"type":"finish"}\n\n')
+        // res.write('data: {"type":"finish"}\n\n')
        res.write('data: [DONE]\n\n')
      } catch (writeError) {
        logger.error('Error writing final sentinel to SSE stream:', { error: writeError as Error })
@@ -92,93 +96,78 @@ export const createMessage = async (req: Request, res: Response): Promise<void>
      if (responseEnded) return
      logger.info(`Client disconnected from streaming message for session: ${sessionId}`)
      responseEnded = true
-      messageStream.removeAllListeners()
      abortController.abort('Client disconnected')
+      reader.cancel('Client disconnected').catch(() => {})
    }

    req.on('close', handleDisconnect)
    req.on('aborted', handleDisconnect)
    res.on('close', handleDisconnect)

-    // Handle stream events
-    messageStream.on('data', (event: AgentStreamEvent) => {
-      if (responseEnded) return
-
+    const pumpStream = async () => {
      try {
-        switch (event.type) {
-          case 'chunk':
-            // Format UIMessageChunk as SSE event following AI SDK protocol
-            res.write(`data: ${JSON.stringify(event.chunk)}\n\n`)
+        while (!responseEnded) {
+          const { done, value } = await reader.read()
+          if (done) {
            break
+          }

-          case 'error': {
-            // Send error as AI SDK error chunk
-            const errorChunk = {
+          res.write(`data: ${JSON.stringify(value)}\n\n`)
+        }
+
+        streamFinished = true
+        finalizeResponse()
+      } catch (error) {
+        if (responseEnded) return
+        logger.error('Error reading agent stream:', { error })
+        try {
+          res.write(
+            `data: ${JSON.stringify({
              type: 'error',
-              errorText: event.error?.message || 'Stream processing error'
-            }
-            res.write(`data: ${JSON.stringify(errorChunk)}\n\n`)
-            logger.error(`Streaming message error for session: ${sessionId}:`, event.error)
-
-            streamFinished = true
-            finalizeResponse()
-            break
-          }
-
-          case 'complete': {
-            logger.info(`Streaming message completed for session: ${sessionId}`)
-            // res.write(`data: ${JSON.stringify({ type: 'complete', result: event.result })}\n\n`)
-
-            streamFinished = true
-            finalizeResponse()
-            break
-          }
-
-          case 'cancelled': {
-            logger.info(`Streaming message cancelled for session: ${sessionId}`)
-            // res.write(`data: ${JSON.stringify({ type: 'cancelled' })}\n\n`)
-            streamFinished = true
-            finalizeResponse()
-            break
-          }
-
-          default:
-            // Handle other event types as generic data
-            logger.info(`Streaming message event for session: ${sessionId}:`, { event })
-            // res.write(`data: ${JSON.stringify(event)}\n\n`)
-            break
-        }
-      } catch (writeError) {
-        logger.error('Error writing to SSE stream:', { error: writeError })
-        if (!responseEnded) {
-          responseEnded = true
-          res.end()
+              error: {
+                message: (error as Error).message || 'Stream processing error',
+                type: 'stream_error',
+                code: 'stream_processing_failed'
+              }
+            })}\n\n`
+          )
+        } catch (writeError) {
+          logger.error('Error writing stream error to SSE:', { error: writeError })
        }
+        responseEnded = true
+        res.end()
      }
+    }
+
+    pumpStream().catch((error) => {
+      logger.error('Pump stream failure:', { error })
    })

-    // Handle stream errors
-    messageStream.on('error', (error: Error) => {
-      if (responseEnded) return
-
-      logger.error(`Stream error for session: ${sessionId}:`, { error })
-      try {
-        res.write(
-          `data: ${JSON.stringify({
-            type: 'error',
-            error: {
-              message: error.message || 'Stream processing error',
-              type: 'stream_error',
-              code: 'stream_processing_failed'
-            }
-          })}\n\n`
-        )
-      } catch (writeError) {
-        logger.error('Error writing error to SSE stream:', { error: writeError })
-      }
-      responseEnded = true
-      res.end()
-    })
+    completion
+      .then(() => {
+        streamFinished = true
+        finalizeResponse()
+      })
+      .catch((error) => {
+        if (responseEnded) return
+        logger.error(`Streaming message error for session: ${sessionId}:`, error)
+        try {
+          res.write(
+            `data: ${JSON.stringify({
+              type: 'error',
+              error: {
+                message: (error as { message?: string })?.message || 'Stream processing error',
+                type: 'stream_error',
+                code: 'stream_processing_failed'
+              }
+            })}\n\n`
+          )
+        } catch (writeError) {
+          logger.error('Error writing completion error to SSE stream:', { error: writeError })
+        }
+        responseEnded = true
+        res.end()
+      })

    // Set a timeout to prevent hanging indefinitely
    const timeout = setTimeout(
@@ -199,6 +188,8 @@ export const createMessage = async (req: Request, res: Response): Promise<void>
          } catch (writeError) {
            logger.error('Error writing timeout to SSE stream:', { error: writeError })
          }
+          abortController.abort('stream timeout')
+          reader.cancel('stream timeout').catch(() => {})
          responseEnded = true
          res.end()
        }
@@ -190,13 +190,15 @@ export async function validateModelId(

 export function transformModelToOpenAI(model: Model, providers: Provider[]): ApiModel {
  const provider = providers.find((p) => p.id === model.provider)
+  const providerDisplayName = provider?.name
  return {
    id: `${model.provider}:${model.id}`,
    object: 'model',
    name: model.name,
    created: Math.floor(Date.now() / 1000),
-    owned_by: model.owned_by || model.provider,
+    owned_by: model.owned_by || providerDisplayName || model.provider,
    provider: model.provider,
+    provider_name: providerDisplayName,
    provider_type: provider?.type,
    provider_model_id: model.id
  }