Custom Component

[jerinjohn1412]

Hi All,

Please find the flow i am using
const flow = { start: { message: "", options: ["What questions i can ask?", "Option2", "Option 3"], path: "custom_component" }, custom_component: { message: "Here's a custom component with a button:", component: CustomButtonComponent, path: "handle_input" }, ask_question: { message: "How can I help you today?", path: "handle_input" }, handle_input: { message: async (params: any) => { console.log(params.userInput); // const result = await resolve_input(params); // return result.message }, path : 'handle_input' }, }

Here is my customConponent

`const CustomButtonComponent = (params: any) => {
console.log('Custom component params:', params);

return (
    <div className="flex flex-col gap-2 p-2">
        <button 
            onClick={() => {
                console.log('Button clicked, params:', params);
                params.injectMessage("Custom Button Clicked", "user");
                setTimeout(() => {
                    params.goToPath("handle_input");
                }, 1000);
            }}
            className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition-colors"
        >
            Click Me
        </button>
    </div>
);

};`

When i click on button in custom compoent, and when i check in handle_input step, the userInput is always the option i clicked at the start step.

Expectation: Once user clicks on button, the userInput should change as per the added.

[tjtanjin]

Hey @jerinjohn1412, I introduced a bug fix for this in beta.35. Please give it a try, thanks!

[jerinjohn1412]

Thanks 😊

Can you share me a sample usage

[tjtanjin]

Thanks 😊

Can you share me a sample usage

No problem! Your current code should actually just work 😊 (after bumping up to beta.35 of course)