refactor(workflow): persist the debug state of the chatflow preview panel to the zustand store and split useChat hook into modular files

[lyzno1]

Closes #31554

Summary

• Split 535-line useChat hook into 7 focused modules
• Add chat-preview-slice to Zustand store for centralized state
• Fix race condition with runId protection in callbacks

Changes

File	Purpose
use-chat.ts	Main orchestrator
use-chat-list.ts	Chat list with opening statement
use-chat-flow-control.ts	Stop/restart handlers
use-chat-message-sender.ts	Message sending logic
use-chat-tree-operations.ts	Tree BFS mutations
use-workflow-event-handlers.ts	Workflow event callbacks
chat-preview-slice.ts	Zustand store slice

Test plan

• Debug panel chat works normally
• Stop/restart functions work
• Suggested questions appear after response
• Variable panel updates after run completes

[gemini-code-assist]

Summary of Changes

Hello @lyzno1, 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 enhances the maintainability and readability of the chat functionality within the workflow debug and preview panel. By breaking down a large, complex React hook into several specialized hooks and integrating a dedicated Zustand store slice, the changes promote better separation of concerns and a more robust state management approach. This refactoring also includes a crucial fix for a race condition, leading to a more stable user experience.

Highlights

• Modular Refactoring: The monolithic 535-line useChat hook has been refactored and split into 7 smaller, more focused, and modular custom hooks, significantly improving code organization and maintainability.
• Centralized State Management: A new chat-preview-slice has been introduced to the Zustand store, centralizing chat-related state such as chatTree, isResponding, and suggestedQuestions.
• Race Condition Fix: A race condition related to runId protection in workflow event callbacks has been identified and fixed, ensuring more reliable chat interactions.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

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

The pull request successfully refactors the large useChat hook into several modular and focused files, significantly improving maintainability and readability. The introduction of a Zustand store slice for chat preview state centralizes state management, which is a good architectural decision. The fix for the race condition with runId protection in callbacks is a critical improvement for correctness. My feedback primarily focuses on enhancing type safety and clarity in the newly introduced types and event handlers.

[Copilot]

Pull request overview

This pull request modularizes the workflow debug-and-preview chat logic and moves chat preview state into the centralized workflow Zustand store, improving separation of concerns and enabling shared state across components.

Changes:

• Introduces a chat-preview-slice in the workflow store to hold chat tree, conversation id, suggested questions, target message, and responding state, and wires it into createWorkflowStore.
• Replaces the monolithic hooks.ts debug-and-preview chat hook with focused hooks: use-chat, use-chat-list, use-chat-flow-control, use-chat-message-sender, use-chat-tree-operations, and use-workflow-event-handlers.
• Updates the debug-and-preview ChatWrapper to use the new useChat hook path and removes now-unneeded ESLint suppressions tied to the old monolithic hooks file.

Reviewed changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
web/eslint-suppressions.json	Removes obsolete ESLint suppression entry for the deleted monolithic debug-and-preview hooks file.
web/app/components/workflow/store/workflow/index.ts	Extends the workflow store Shape with ChatPreviewSliceShape and composes createChatPreviewSlice into createWorkflowStore.
web/app/components/workflow/store/workflow/chat-preview-slice.ts	Adds a new Zustand slice to manage chat preview state (chat tree, target message id, suggested questions, conversation id, responding flag) and exposes update/reset actions.
web/app/components/workflow/panel/debug-and-preview/hooks/use-workflow-event-handlers.ts	Extracts workflow event-handling logic into a dedicated factory that mutates a response item’s workflow tracing and updates the chat tree.
web/app/components/workflow/panel/debug-and-preview/hooks/use-chat.ts	New orchestrator hook for workflow chat: wires store-backed chat preview state into list computation, flow control, message sending, and tree operations.
web/app/components/workflow/panel/debug-and-preview/hooks/use-chat-tree-operations.ts	Encapsulates immutable BFS-based chat-tree mutation (produceChatTreeNode) and QA node updates for the tree.
web/app/components/workflow/panel/debug-and-preview/hooks/use-chat-message-sender.ts	Encapsulates message sending, streaming callbacks, run lifecycle, suggested questions fetching, and workflow event wiring, now using the centralized chat preview slice.
web/app/components/workflow/panel/debug-and-preview/hooks/use-chat-list.ts	Computes threadMessages and the rendered chatList, including opening statement injection and suggested questions expansion.
web/app/components/workflow/panel/debug-and-preview/hooks/use-chat-flow-control.ts	Centralizes stop/restart logic (including iteration/loop reset, aborting suggested questions, and resetting chat preview state).
web/app/components/workflow/panel/debug-and-preview/hooks/types.ts	Introduces shared types (ChatConfig, SendParams, SendCallback, UpdateCurrentQAParams, ChatTreeUpdater) for the new hooks.
web/app/components/workflow/panel/debug-and-preview/hooks.ts	Removes the previous 500+ line monolithic useChat hook implementation, now replaced by modular hooks.
web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx	Updates the import to use the new useChat module path while keeping the component API and behavior aligned with the refactored hooks.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.