102 lines
2.7 KiB
TypeScript
102 lines
2.7 KiB
TypeScript
/**
|
|
* React hook for using AgentController
|
|
*/
|
|
import type { AgentActivity, AgentStatus, HistoricalEvent } from '@page-agent/core'
|
|
import { useCallback, useEffect, useRef, useState } from 'react'
|
|
|
|
import { type AgentController, type LLMConfig, getAgentController } from './AgentController'
|
|
|
|
export interface UseAgentResult {
|
|
status: AgentStatus
|
|
history: HistoricalEvent[]
|
|
activity: AgentActivity | null
|
|
currentTask: string
|
|
config: LLMConfig
|
|
execute: (task: string) => Promise<void>
|
|
stop: () => void
|
|
configure: (config: LLMConfig) => Promise<void>
|
|
}
|
|
|
|
export function useAgent(): UseAgentResult {
|
|
const controllerRef = useRef<AgentController | null>(null)
|
|
const [status, setStatus] = useState<AgentStatus>('idle')
|
|
const [history, setHistory] = useState<HistoricalEvent[]>([])
|
|
const [activity, setActivity] = useState<AgentActivity | null>(null)
|
|
const [currentTask, setCurrentTask] = useState('')
|
|
const [config, setConfig] = useState<LLMConfig>({
|
|
apiKey: '',
|
|
baseURL: '',
|
|
model: '',
|
|
})
|
|
|
|
useEffect(() => {
|
|
const controller = getAgentController()
|
|
controllerRef.current = controller
|
|
|
|
controller.init().then(() => {
|
|
setConfig(controller.getConfig())
|
|
})
|
|
|
|
const handleStatusChange = (e: Event) => {
|
|
const newStatus = (e as CustomEvent).detail as AgentStatus
|
|
setStatus(newStatus)
|
|
if (newStatus === 'idle' || newStatus === 'completed' || newStatus === 'error') {
|
|
setActivity(null)
|
|
}
|
|
}
|
|
|
|
const handleHistoryChange = (e: Event) => {
|
|
const newHistory = (e as CustomEvent).detail as HistoricalEvent[]
|
|
setHistory([...newHistory])
|
|
}
|
|
|
|
const handleActivity = (e: Event) => {
|
|
const newActivity = (e as CustomEvent).detail as AgentActivity
|
|
setActivity(newActivity)
|
|
}
|
|
|
|
controller.addEventListener('statuschange', handleStatusChange)
|
|
controller.addEventListener('historychange', handleHistoryChange)
|
|
controller.addEventListener('activity', handleActivity)
|
|
|
|
return () => {
|
|
controller.removeEventListener('statuschange', handleStatusChange)
|
|
controller.removeEventListener('historychange', handleHistoryChange)
|
|
controller.removeEventListener('activity', handleActivity)
|
|
controller.dispose()
|
|
}
|
|
}, [])
|
|
|
|
const execute = useCallback(async (task: string) => {
|
|
const controller = controllerRef.current
|
|
if (!controller) return
|
|
|
|
setCurrentTask(task)
|
|
setHistory([])
|
|
await controller.execute(task)
|
|
}, [])
|
|
|
|
const stop = useCallback(() => {
|
|
controllerRef.current?.stop()
|
|
}, [])
|
|
|
|
const configure = useCallback(async (newConfig: LLMConfig) => {
|
|
const controller = controllerRef.current
|
|
if (!controller) return
|
|
|
|
await controller.configure(newConfig)
|
|
setConfig(newConfig)
|
|
}, [])
|
|
|
|
return {
|
|
status,
|
|
history,
|
|
activity,
|
|
currentTask,
|
|
config,
|
|
execute,
|
|
stop,
|
|
configure,
|
|
}
|
|
}
|