feat(agentflow): add chat panel for real-time flow testing

[j-sanaa]

Add TestFlowDialog — an SSE-driven chat panel for testing agentflows. Messages stream in real time using @microsoft/fetch-event-source, with node execution status badges updating live as the flow runs.

Key additions:

• TestFlowDialog: streaming chat, HITL action buttons, history load
• TestFlowButton container: FAB with expand/clear controls
• StyledFab moved from node-palette to atoms (shared use)
• Agentflow.tsx: flowId prop + isChatOpen to hide toolbar while testing
• chatflows.ts: abortMessage for stopping in-progress streams
• jest mocks for react-markdown, remark-gfm, uuid, and image assets
• vite proxy config fixed for cross-origin dev

[gemini-code-assist]

Code Review

This pull request introduces a chat-based testing interface for Agentflow, enabling real-time interaction with flows through a new floating action button. Key additions include the TestFlowButton and TestFlowDialog components, which leverage Server-Sent Events (SSE) for streaming responses and include support for chat history retrieval and message abortion. The build and test configurations have been updated with necessary proxies, dependencies (like react-markdown), and Jest mocks. Review feedback highlights the need to reset history state when the chatflowId changes to prevent stale data, the addition of a missing onClick handler for the 'Expand Chat' button, and the inclusion of handleSendCore in several useCallback dependency arrays to avoid stale closures.

[gemini-code-assist]

The chat history loading logic does not account for changes to chatflowId while the component remains mounted. If the user switches to a different flow, historyLoaded will still be true, preventing the new flow's history from loading. Reset the state in the main useEffect body when chatflowId changes to avoid stale data. Additionally, ensure that any API failures during history retrieval are handled with user-facing feedback rather than just console logging.

    useEffect(() => {
        setHistoryLoaded(false)
        setMessages([{ id: uuidv4(), type: 'bot', text: WELCOME_MESSAGE }])
        chatIdRef.current = uuidv4()
    }, [chatflowId])

    useEffect(() => {
        if (!open || historyLoaded) return

References

1. Avoid calling setState in a useEffect cleanup function for components that do not unmount. Reset state in the main useEffect body instead.
2. Implement user-facing error handling for all API calls to provide feedback to the user when requests fail, rather than just logging errors to the console.

[gemini-code-assist]

The 'Expand Chat' button is currently non-functional as it lacks an onClick handler. If this feature is intended for a future update, consider hiding the button or adding a placeholder action to avoid a broken user experience.

[gemini-code-assist]

The handleActionClick callback is missing handleSendCore in its dependency array. Since handleSendCore is created via useCallback and depends on external state (like token), omitting it can lead to stale closures if those dependencies change. Please include handleSendCore in the dependency array and remove the lint suppression.

    const handleActionClick = useCallback(
        (elem: ActionElement, action: ActionPayload) => {
            // Clear the action buttons from the last bot message
            setMessages((prev) => {
                const last = prev[prev.length - 1]
                if (!last || last.type !== 'bot') return prev
                return [...prev.slice(0, -1), { ...last, action: undefined }]
            })
            void handleSendCore(elem.label, action)
        },
        [handleSendCore]
    )

[gemini-code-assist]

The handleSend callback is missing handleSendCore in its dependency array. This can cause the function to use a stale version of the core sending logic if the component re-renders with updated context values. Please add handleSendCore to the dependencies.

    const handleSend = useCallback(() => {
        const input = userInput.trim()
        if (!input || loading) return
        setFollowUpPrompts([])
        void handleSendCore(input)
    }, [userInput, loading, handleSendCore])