Implementation:FlowiseAI Flowise SuggestionOption

Knowledge Sources	FlowiseAI Flowise
Domains	UI Components, Variable Interpolation
Last Updated	2026-02-12 07:00 GMT

Overview

The suggestionOption module provides the Tiptap mention suggestion configuration that supplies categorized variable items and manages the Tippy.js popup lifecycle for the RichInput editor.

Description

This module exports suggestionOptions, a factory function that returns a Tiptap suggestion configuration object with a {{ trigger character. The items async function assembles suggestion entries from multiple sources: default chat context variables (question, chat_history, current_date_time, etc.), flow variables ($flow.sessionId, $flow.chatId), state variables, form inputs, node output references, and custom variables fetched from the API. All items are filtered by the user's query. The render lifecycle manages a ReactRenderer wrapping SuggestionList and a Tippy.js popup for positioning. The module also exports refreshVariablesCache to force a re-fetch of custom variables.

Usage

This module is consumed by RichInput to configure the CustomMention Tiptap extension's suggestion behavior. It is not used directly by application code.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/ui-component/input/suggestionOption.js
• Lines: 1-235

Signature

export const suggestionOptions = (
    availableNodesForVariable,
    availableState,
    acceptNodeOutputAsVariable,
    nodes,
    nodeData,
    isNodeInsideInteration
) => ({
    char: '{{',
    items: async ({ query }) => { /* ... */ },
    render: () => { /* onStart, onUpdate, onKeyDown, onExit */ }
})

export const refreshVariablesCache = () => {
    return fetchVariables()
}

Import

import { suggestionOptions, refreshVariablesCache } from '@/ui-component/input/suggestionOption'

I/O Contract

Inputs

Name	Type	Required	Description
availableNodesForVariable	array	Yes	Upstream nodes whose outputs can be referenced as variables
availableState	array	No	State keys from the startAgentflow node's startState configuration
acceptNodeOutputAsVariable	bool	No	When true, includes the current node's output in suggestions
nodes	array	Yes	All canvas nodes, used to look up startAgentflow for form inputs and state
nodeData	object	No	Current node's data, used to extract structured outputs
isNodeInsideInteration	bool	No	When true, adds the $iteration variable to suggestions

Outputs

Name	Type	Description
Suggestion config	object	A Tiptap suggestion configuration with char, items, and render properties

Usage Examples

Basic Usage

// Inside RichInput editor configuration:
CustomMention.configure({
    suggestion: suggestionOptions(
        availableNodesForVariable,
        availableState,
        inputParam?.acceptNodeOutputAsVariable,
        nodes,
        nodeData,
        isNodeInsideInteration
    )
})

Related Pages

• Principle:FlowiseAI_Flowise_Node_Parameter_Configuration