Workflow Widgets

Learn how to add interactive widgets to your workflow to enable additional capabilities.

Getting Started

Navigate to the corresponding folder:

Terminal

cd step-4-workflow-widgets

Install the dependencies:

Terminal

npm install

Then run the project:

Terminal

npm run dev

To enable richer interactivity, a sidebar is introduced to support actions such as adding and modifying elements. In Workflow Kit, this sidebar is called a widget.

The workflow state holds information about the active widget, if any, and it is rendered using the widgetView function, as shown below.

TSX

// src/shared/kits/workflow/components/workflow-view.tsx

// ...

interface WorkflowViewProps {
  workflow: Workflow;
  onWorkflowChange: OnWorkflowChange;
}

export function WorkflowView({
  workflow,
  onWorkflowChange,
}: WorkflowViewProps) {
  const flows = useMemo(
    () => workflowView(workflow, onWorkflowChange),
    [workflow, onWorkflowChange],
  );

  const onFlowsChange = useCallback(
    (changes: TypedFlowsChange[]) => {
      const array = toWorkflowChanges(changes, workflow, flows);
      if (array.length) onWorkflowChange(array);
    },
    [onWorkflowChange, workflow, flows],
  );

  return (
    <>
      <FlowsView
        flows={flows}
        onFlowsChange={onFlowsChange}
        nodeTypes={nodeTypes}
        edgeTypes={edgeTypes}
      />
      {widgetView(workflow, onWorkflowChange)}
    </>
  );
}