Feat/update process flow display by HenryHengZJ · Pull Request #347 · FlowiseAI/FlowiseChatEmbed

HenryHengZJ · 2026-03-06T11:45:32Z

pf1-ezgif.com-crop-video.mp4

pf2-ezgif.com-crop-video.mp4

gemini-code-assist · 2026-03-06T11:46:07Z

Summary of Changes

Hello, 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 introduces a significant upgrade to how agent process flow data is visualized and interacted with. By implementing a dedicated NodeDetailsDialog, users can now access rich, structured, and interactive details for each node in a workflow, moving beyond raw JSON. This includes displaying various data types like images and HTML, along with performance metrics and tool usage. The integration of custom AgentflowIcons further enhances the clarity and visual appeal of the workflow tree, making complex agent executions easier to understand and debug. The changes streamline the UI by centralizing node detail presentation and improving overall data accessibility.

Highlights

Enhanced Node Details Display: Introduced a new NodeDetailsDialog component that provides a comprehensive, rendered view of individual workflow node data in a modal, replacing the previous inline JSON display. This dialog supports various content types, including markdown, images, and HTML, along with performance metrics (time, tokens, cost), tool calls, artifacts, and file annotations.
Standardized Agentflow Icons: Developed a new AgentflowIcons utility component that defines and provides a set of distinct SVG icons for various agentflow node types (e.g., Condition, Start, LLM, Agent, Tool). These icons are now integrated into the WorkflowTreeView for improved visual identification and clarity.
Refactored WorkflowTreeView: The WorkflowTreeView component was significantly refactored to integrate the new NodeDetailsDialog for displaying node details and to utilize the AgentflowIcons for visual representation. Internal JSON display logic, node selection state, and related functions were removed, streamlining the component's responsibilities.
Improved TreeView Styling and Data Flow: The RichTreeView and TreeItem components were updated to manage styling (hover, selected, highlighted states, and border colors) directly through inline styles and dynamic class assignments, removing the dependency on an external CSS file. Additionally, apiHost, chatflowid, and chatId props are now passed down to support dynamic content loading within the new node details dialog.

Changelog

.claude/settings.json
- Added Claude plugin settings to enable the frontend-design plugin.
.claude/settings.local.json
- Added local Claude permissions for Bash commands related to development tools.
dist/components/bubbles/BotBubble.d.ts.map
- Updated the source map for BotBubble.d.ts.
dist/components/treeview/AgentflowIcons.d.ts
- Added type definitions for agentflow icons and related utilities.
dist/components/treeview/AgentflowIcons.d.ts.map
- Added the source map for AgentflowIcons.d.ts.
dist/components/treeview/NodeDetailsDialog.d.ts
- Added type definitions for the NodeDetailsDialog component.
dist/components/treeview/NodeDetailsDialog.d.ts.map
- Added the source map for NodeDetailsDialog.d.ts.
dist/components/treeview/RichTreeView.d.ts
- Updated type definitions for RichTreeView and TreeItem to include borderColor and remove TreeView.css import.
dist/components/treeview/RichTreeView.d.ts.map
- Updated the source map for RichTreeView.d.ts.
dist/components/treeview/WorkflowTreeView.d.ts
- Updated type definitions for WorkflowTreeView to include apiHost, chatflowid, and chatId props.
dist/components/treeview/WorkflowTreeView.d.ts.map
- Updated the source map for WorkflowTreeView.d.ts.
src/components/bubbles/BotBubble.tsx
- Passed new API-related props (apiHost, chatflowid, chatId) to the WorkflowTreeView component.
src/components/treeview/AgentflowIcons.tsx
- Created a new component defining various SVG icons for agentflow nodes and a utility to retrieve them.
src/components/treeview/NodeDetailsDialog.tsx
- Created a new modal component to display detailed information for individual workflow nodes, including rendered content, metrics, and tool details.
src/components/treeview/RichTreeView.tsx
- Removed external CSS import, added inline styling for tree item interactions, and updated TreeItem to accept a borderColor prop.
src/components/treeview/TreeView.css
- Removed the dedicated CSS file for the tree view.
src/components/treeview/WorkflowTreeView.tsx
- Integrated AgentflowIcons and NodeDetailsDialog.
- Removed internal JSON display logic, selectedNode state, handleNodeSelect, copyToClipboard, and getHighlightedJson functions.
- Added openNodeDialog function.
- Passed apiHost, chatflowid, and chatId props to NodeDetailsDialog.

Activity

The pull request introduces a new feature to update the process flow display, as indicated by the title.
New components for node details and agentflow icons were added, suggesting a significant UI/UX improvement.
Existing tree view components were refactored to integrate the new features and streamline styling.

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.

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 a new, more detailed process flow display, adding a NodeDetailsDialog to show comprehensive information about each node in the workflow and improving user experience. A high-severity Cross-Site Scripting (XSS) vulnerability was identified in the NodeDetailsDialog component where HTML artifacts are rendered without sanitization, which must be addressed before merging. Additionally, a critical issue with a hardcoded path in a configuration file needs attention. Further suggestions include improving the maintainability of the NodeDetailsDialog by breaking it down and reverting inlined CSS styles in RichTreeView for better separation of concerns.

.claude/settings.local.json

src/components/treeview/NodeDetailsDialog.tsx

src/components/treeview/RichTreeView.tsx

# Conflicts: # dist/web.js # dist/web.umd.js

mmattu-wd

Looks good! I did notice when we open the chat as a widget (not full page) the modal is opening in the widget. We probably want to open the modal as a portal when this happens.

Pushed up some changes here: fc1cd63

mmattu-wd · 2026-03-07T01:01:11Z

src/components/bubbles/AgentReasoningBubble.tsx

      return (
        <div class="mt-2">
-          <div innerHTML={src} />
+          <div innerHTML={DOMPurify.sanitize(src)} />


src/components/treeview/NodeDetailsDialog.tsx

HenryHengZJ · 2026-03-09T10:59:38Z

The top part of the modal is blocked:

mmattu-wd

LGTM!

Made some small changes so the responsive behaviour is a bit cleaner and so scroll behaviour matches what we have in the flowise agent chat.

Widget:

Screen.Recording.2026-03-09.at.12.22.19.PM.mov

Full Page:

Screen.Recording.2026-03-09.at.12.42.33.PM.mov

mmattu-wd · 2026-03-09T19:38:48Z

src/components/treeview/NodeDetailsDialog.tsx

+              <NodeIcon name={props.node!.name} apiHost={props.apiHost} size={36} />
+              <div style={{ 'font-weight': '600', 'font-size': '1.05rem' }}>{props.node!.label}</div>
+            </div>
+            <div style={{ display: 'flex', 'justify-content': 'flex-end', 'align-items': 'center', gap: '8px', 'flex-wrap': 'wrap', flex: '1' }}>


Updated the styles to support stacking the duration + token count when the container width is smaller:

there is a PR that will start bringing in the total costs, can we have these metrics at the bottom of the node title instead of stacking to the right?

Sure! Updated to look like the following:
Widget:

We have to stack on the widget since the 3 pills will occupy too much horizontal space otherwise

Full Page:

looks good!

mmattu-wd · 2026-03-09T19:39:51Z

src/components/treeview/NodeDetailsDialog.tsx

+          </div>
+
+          {/* Content */}
+          <div class="node-dialog-body" style={{ padding: '16px 20px', 'overflow-y': 'initial', 'max-height': '100%' }}>


small change so scroll behaviour is like the flowise agent chat:

HenryHengZJ · 2026-03-09T21:39:01Z

thanks @mmattu-wd ! lmk when its good to merge

update process flow display

ff8803c

gemini-code-assist bot reviewed Mar 6, 2026

View reviewed changes

.claude/settings.local.json Show resolved Hide resolved

src/components/treeview/NodeDetailsDialog.tsx Outdated Show resolved Hide resolved

src/components/treeview/NodeDetailsDialog.tsx Show resolved Hide resolved

src/components/treeview/RichTreeView.tsx Show resolved Hide resolved

HenryHengZJ added 2 commits March 6, 2026 14:08

lint fix

8127db5

Merge branch 'main' into feature/Process-Flow

dcc4364

# Conflicts: # dist/web.js # dist/web.umd.js

HenryHengZJ mentioned this pull request Mar 7, 2026

Feat/add thinking message #349

Open

mmattu-wd reviewed Mar 8, 2026

View reviewed changes

fix layout when opening in widget

d9b88eb

mmattu-wd approved these changes Mar 9, 2026

View reviewed changes

update pill styles to render below node title

b8c6025

Conversation

HenryHengZJ commented Mar 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gemini-code-assist bot commented Mar 6, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mmattu-wd left a comment

Choose a reason for hiding this comment

Uh oh!

mmattu-wd Mar 7, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

HenryHengZJ commented Mar 9, 2026

Uh oh!

mmattu-wd left a comment

Choose a reason for hiding this comment

Uh oh!

mmattu-wd Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

HenryHengZJ Mar 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mmattu-wd Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

HenryHengZJ Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

mmattu-wd Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

HenryHengZJ commented Mar 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

HenryHengZJ commented Mar 6, 2026 •

edited

Loading

HenryHengZJ Mar 9, 2026 •

edited

Loading