Implementation:FlowiseAI Flowise ExpandedChunkDialog

Knowledge Sources	FlowiseAI Flowise
Domains	Document Store, Dialogs
Last Updated	2026-02-12 07:00 GMT

Overview

ExpandedChunkDialog is a React dialog component that displays the full content and metadata of a document chunk in a read-only or editable view, with a code editor for the page content and a JSON viewer/editor for metadata, plus permission-gated edit and delete actions.

Description

This component renders a Material UI Dialog via createPortal into the #portal element. The dialog header shows the chunk number and ID, with conditional action buttons: an edit icon button (PermissionIconButton requiring 'documentStores:preview-process' permission), a delete icon button (requiring 'documentStores:delete-loader'), and a close button. In read-only mode, the chunk's page content is displayed in a disabled CodeEditor and its metadata in a collapsed ReactJson viewer. When the user toggles edit mode, the CodeEditor becomes editable with a change handler, and the ReactJson component enables inline editing, deletion, and clipboard operations on metadata properties. A character count badge with a language icon is shown above the content. The edit can be saved (invoking onChunkEdit with the updated content and metadata) or cancelled (reverting to the original values). The component manages its state from dialogProps.data.selectedChunk and dialogProps.data.selectedChunkNumber.

Usage

Use this component in the document store chunk preview/processing views to allow users to inspect, edit, or delete individual document chunks. It is opened when the user clicks on a chunk row to expand its details.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/views/docstore/ExpandedChunkDialog.jsx
• Lines: 1-255

Signature

const ExpandedChunkDialog = ({ show, dialogProps, onCancel, onChunkEdit, onDeleteChunk, isReadOnly }) => { ... }

export default ExpandedChunkDialog

Import

import ExpandedChunkDialog from '@/views/docstore/ExpandedChunkDialog'

I/O Contract

Inputs

Name	Type	Required	Description
show	boolean	Yes	Controls dialog visibility
dialogProps	object	Yes	Dialog configuration containing data with selectedChunk (object with id, pageContent, metadata) and selectedChunkNumber (number)
onCancel	function	Yes	Callback invoked when the dialog is closed
onChunkEdit	function	Yes	Callback invoked with (contentValue, metadata, selectedChunk) when the user saves edits
onDeleteChunk	function	Yes	Callback invoked with the selectedChunk object when the user clicks the delete button
isReadOnly	boolean	No	When true, hides the edit and delete buttons entirely

Outputs

Name	Type	Description
Rendered JSX (portal)	React Element	A Dialog with a CodeEditor for page content, ReactJson viewer/editor for metadata, character count badge, and permission-gated action buttons
onChunkEdit callback	void	Called with the updated content string, metadata object, and original chunk object on save
onDeleteChunk callback	void	Called with the chunk object when the delete button is clicked

Usage Examples

Basic Usage

import ExpandedChunkDialog from '@/views/docstore/ExpandedChunkDialog'

<ExpandedChunkDialog
  show={showDialog}
  dialogProps={{
    data: {
      selectedChunk: {
        id: 'chunk-001',
        pageContent: 'This is the document content...',
        metadata: '{"source": "file.pdf", "page": 1}'
      },
      selectedChunkNumber: 1
    }
  }}
  onCancel={() => setShowDialog(false)}
  onChunkEdit={(content, metadata, chunk) => handleChunkEdit(content, metadata, chunk)}
  onDeleteChunk={(chunk) => handleDeleteChunk(chunk)}
  isReadOnly={false}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Chunk_Management