foreign-sapphire•2y ago
Issue Report: Inability to Interact with Buttons in "@voiceflow/react-chat" Component
Description:
I am encountering an issue while utilizing the "@voiceflow/react-chat" component version "^1.46.1". The problem arises when buttons are displayed within the chat interface – despite attempting to interact with them by clicking, they do not respond or trigger any intended actions.
Steps to Reproduce:
Integrate the "@voiceflow/react-chat" component version "^1.46.1" into the application.
Initiate a conversation or session where buttons are presented within the chat interface.
Attempt to interact with the buttons by clicking on them.
Expected Behavior:
Upon clicking the buttons within the chat interface, they should respond accordingly and trigger the associated actions or responses within the application.
Actual Behavior:
Despite clicking on the buttons, they do not respond or trigger any action, leading to a non-functional user interaction experience.
Additional Information:
This issue persists across different browsers and devices.
The rest of the functionality within the "@voiceflow/react-chat" component appears to be working as expected.
No error messages or warnings are displayed in the console, indicating a potential underlying issue with the button interaction event handling.
1 Reply
The issue you're experiencing with the "@voiceflow/react-chat" component seems to be related to the button interaction event handling. As you've mentioned, the buttons within the chat interface are not responding or triggering any actions when clicked, despite the rest of the functionality within the component working as expected.
The "@voiceflow/react-chat" library is a component library that contains all of the Voiceflow Web Chat's out-of-the-box user interface elements like buttons, message bubbles, and other building blocks that can be composed together to build a chat interface. It's designed to be used in other codebases, such as the widget package found in the react-chat repository or the demo-react-chat demo application.
Given your expertise level, you might want to inspect the available components in our Storybook or check out our open-source code and simple demo project repository for further instructions. You can find these resources in the react-chat package on npm and the Demo React project that uses the react-chat package.
If the issue persists, it might be beneficial to review the integration of the "@voiceflow/react-chat" component into your application, ensuring that it aligns with the guidelines provided in our documentation.
Sources:
- Advanced Webchat
- Live Chat Handoff