Fix #5742: Chat UI in Agentic Flow shows delayed responses, duplicated/

[danielalanbates]

Fixes #5742

Summary

This PR addresses: Chat UI in Agentic Flow shows delayed responses, duplicated/infinite executions, and incomplete chat clearing

Changes

packages/ui/src/views/chatmessage/ChatMessage.jsx | 209 ++++++++++++----------
 packages/ui/src/views/chatmessage/ChatPopUp.jsx   |  20 +++
 2 files changed, 138 insertions(+), 91 deletions(-)

Testing

Please review the changes carefully. The fix was verified against the existing test suite.

---

This PR was created with the assistance of Claude Sonnet 4.6 by Anthropic | effort: low. Happy to make any adjustments!

By submitting this pull request, I confirm that my contribution is made under the terms of the project's license (contributor license agreement).

[gemini-code-assist]

Summary of Changes

Hello @danielalanbates, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly improves the stability and responsiveness of the chat UI within agentic flows. By introducing robust stream cancellation mechanisms and enhancing the chat clearing process to include agent executions, it resolves critical issues such as delayed responses, unintended duplicate executions, and incomplete chat history resets, leading to a more predictable and reliable user experience.

Highlights

• Stream Cancellation: Implemented AbortController to manage fetchEventSource calls, ensuring that any in-flight streaming responses are properly cancelled when a new request is made or the chat component unmounts. This prevents delayed responses and duplicated executions.
• Enhanced Chat Clearing: Modified the chat clearing logic for agentic flows to also delete associated agent executions, addressing issues with incomplete chat clearing and preventing old executions from being re-loaded.
• Error Handling: Wrapped the fetchEventSource call in a try...catch block to gracefully handle AbortError exceptions, which are intentionally raised during stream cancellation.

Changelog

• packages/ui/src/views/chatmessage/ChatMessage.jsx
  • Added abortControllerRef using useRef to store an AbortController instance.
  • Modified the fetchEventSource call to utilize the AbortController's signal for stream cancellation.
  • Implemented logic to abort any existing stream before initiating a new one.
  • Added abortControllerRef.current?.abort() calls within the abort and end event handlers to ensure streams are properly terminated.
  • Wrapped the fetchEventSource call in a try...catch block to handle AbortError gracefully.
  • Added cleanup logic in the useEffect return function to abort any in-flight stream when the component unmounts or the chatflow changes.
• packages/ui/src/views/chatmessage/ChatPopUp.jsx
  • Imported the executionsApi for managing agent executions.
  • Extended the handleClearChat function to conditionally delete agent executions associated with the current chat session when isAgentCanvas is true.
  • Added error handling for the execution deletion process, making it non-fatal if deletion fails.

Activity

• The pull request was created with the assistance of Claude Sonnet 4.6 by Anthropic, indicating a low effort for the author.
• The author is open to making adjustments based on feedback.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces important fixes for the Agentic Flow chat UI. The use of AbortController to manage fetchEventSource requests in ChatMessage.jsx is a solid approach to prevent delayed responses and duplicate executions. This correctly handles request cancellation when the component unmounts, the chatflow changes, or a new request is initiated. The addition of logic in ChatPopUp.jsx to clear associated executions for agentic flows is also a crucial fix for ensuring complete chat history clearing. The suggestion for improvement in ChatPopUp.jsx to make the execution deletion more robust by paginating through all results is a valid and important point.

[gemini-code-assist]

The current implementation fetches up to 100 executions to delete. If a session has more than 100 executions, not all of them will be cleared. To ensure all executions are deleted, you should paginate through all results from the getAllExecutions API.

                        const executionsToDelete = [];
                        let page = 1;
                        const limit = 100;
                        let hasMore = true;

                        while (hasMore) {
                            const executionsRes = await executionsApi.getAllExecutions({
                                agentflowId: chatflowid,
                                sessionId: objChatDetails.chatId,
                                limit,
                                page
                            });
                            const executions = executionsRes.data?.data ?? [];
                            if (executions.length > 0) {
                                executionsToDelete.push(...executions);
                            }
                            if (executions.length < limit) {
                                hasMore = false;
                            }
                            page += 1;
                        }

                        if (executionsToDelete.length > 0) {
                            await executionsApi.deleteExecutions(executionsToDelete.map((e) => e.id));
                        }