Function VariableInput

packages/agentflow/src/atoms/VariableInput.tsx:159–267

({
    value,
    onChange,
    placeholder,
    disabled = false,
    rows,
    suggestionItems,
    autoFocus = false,
    onEditorReady
}: VariableInputProps)

 * This is the agentflow equivalent of the UI package's RichInput component.
 */
export function VariableInput({
    value,
    onChange,
    placeholder,
    disabled = false,
    rows,
    suggestionItems,
    autoFocus = false,
    onEditorReady
}: VariableInputProps) {
    const onChangeRef = useRef(onChange)
    useEffect(() => {
        onChangeRef.current = onChange
    }, [onChange])

    // Track the last value we emitted (or loaded) to avoid re-setting content
    // when the parent echoes our own onChange value back as the new prop.
    const lastEmittedRef = useRef<string>(value || '')

    // Capture initial value for the mount effect below so we can depend only on
    // `editor` without suppressing the exhaustive-deps rule.
    const initialValueRef = useRef(value)

    const useMarkdown = !!rows

    const suggestionConfig = useMemo(
        () => (suggestionItems?.length ? createSuggestionConfig(suggestionItems) : undefined),
        [suggestionItems]
    )
    const suggestionConfigRef = useRef(suggestionConfig)
    useEffect(() => {
        suggestionConfigRef.current = suggestionConfig
    }, [suggestionConfig])

    const extensions = useMemo(
        () => [
            Markdown,
            StarterKit.configure({
                codeBlock: false,
                ...(!useMarkdown && { link: false })
            }),
            CodeBlockLowlight.configure({ lowlight, enableTabIndentation: true, tabSize: 2 }),
            ...(placeholder ? [Placeholder.configure({ placeholder })] : []),
            ...(suggestionConfig
                ? [
                      CustomMention.configure({
                          HTMLAttributes: { class: 'mention' },
                          renderHTML({ options, node }) {
                              return [
                                  'span',
                                  mergeAttributes(this.HTMLAttributes ?? {}, options.HTMLAttributes),
                                  `${options.suggestion?.char ?? '{{'}${node.attrs.id ?? node.attrs.label}}}`
                              ]
                          },
                          suggestion: suggestionConfig,
                          deleteTriggerWithBackspace: true
                      })
                  ]