Alrighty. Little disclaimer. I am still new to React, but I can help you a bit.
Idea of a high-level approach you can take:
1. In your Botpress chatbot, collect the user's preferences through a series of questions and store the responses in variables within the chatbot's context.
2. Once all the questions are answered instead of displaying the results inside the chatbot using a carousel you can make an API call from the chatbot to your Node.js server. This API call will send the collected user preferences to the server.
3. In your Node.js server create an API endpoint that receives the user preferences from the chatbot. Use these preferences to query your database and retrieve the relevant results.
4. After retrieving the results from the database your Node.js server can send a response back to the chatbot indicating that the data is ready and providing a unique identifier or token associated with the user's session.
5. Upon receiving the response from the server the chatbot can display a message to the user informing them that their results are ready and provide a link or button to navigate to the results page.
6. When the user clicks on the link or button you can redirect them to a new route in your React application, passing the unique identifier or token as a parameter in the URL.
7. In your React application create a new component or page for displaying the search results. When this component mounts, it can make another API call to your Node.js server, passing the unique identifier or token from the URL.
8. Your Node.js server can then use the identifier or token to retrieve the previously stored search results associated with the user's session and send them back to the React component.
9. Finally your React component can render the search results on the page allowing the user to view them outside of the chatbot interface.
Simplified flow:
User -> Chatbot -> Node.js Server -> Database -> Node.js Server -> React App (Results Page)