Implementation:FlowiseAI Flowise ChatFeedback

Knowledge Sources	FlowiseAI Flowise
Domains	Chatbot Configuration, User Feedback
Last Updated	2026-02-12 07:00 GMT

Overview

ChatFeedback is a React component that provides a toggle switch for enabling or disabling the chat feedback feature on a chatflow's chatbot widget.

Description

This component renders a simple configuration panel with a SwitchInput toggle labeled "Enable chat feedback" and a Save button. When saved, it updates the chatflow's chatbotConfig JSON by setting the chatFeedback.status property via chatflowsApi.updateChatflow, then dispatches a SET_CHATFLOW Redux action to update the application state. It initializes the toggle state from the existing chatbotConfig.chatFeedback.status value parsed from the chatflow's configuration. The component uses Redux-based snackbar notifications for success and error feedback.

Usage

Use this component within the chatflow settings panel to let users enable or disable the thumbs-up/thumbs-down feedback mechanism on the chat interface.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/ui-component/extended/ChatFeedback.jsx
• Lines: 1-110

Signature

const ChatFeedback = ({ dialogProps, onConfirm }) => { ... }

ChatFeedback.propTypes = {
    dialogProps: PropTypes.object,
    onConfirm: PropTypes.func
}

export default ChatFeedback

Import

import ChatFeedback from '@/ui-component/extended/ChatFeedback'

I/O Contract

Inputs

Name	Type	Required	Description
dialogProps	object	Yes	Configuration object containing chatflow (object with id and chatbotConfig JSON string)
onConfirm	func	No	Optional callback invoked after a successful save operation

Outputs

Name	Type	Description
React Element	JSX.Element	Renders a Box with a SwitchInput toggle and a Save button

Usage Examples

Basic Usage

import ChatFeedback from '@/ui-component/extended/ChatFeedback'

const MyComponent = () => {
    const dialogProps = {
        chatflow: {
            id: 'chatflow-123',
            chatbotConfig: JSON.stringify({
                chatFeedback: { status: true }
            })
        }
    }

    return (
        <ChatFeedback
            dialogProps={dialogProps}
            onConfirm={() => console.log('Chat feedback settings saved')}
        />
    )
}

Related Pages

• Principle:FlowiseAI_Flowise_Chatbot_Appearance_Customization