react-chatbot-kit icon indicating copy to clipboard operation
react-chatbot-kit copied to clipboard

How to display widgets only using createChatBotMessage method?

Open VeenaMalali13 opened this issue 4 years ago • 5 comments

When we don't have any message to display and we want to display widgets only, then what should be first parameter to createChatBotMessage method? e.g. createChatBotMessage (what should go here,{widget: widgetName});

VeenaMalali13 avatar Jun 02 '21 12:06 VeenaMalali13

I am also looking solution for this query. As i am doing fetch call inside widget component and have to update chat bot message only when API respond back.

vijay-kumar-singh avatar Jun 16 '21 07:06 vijay-kumar-singh

I am also using fetch call, and in response I am getting buttons only(which I am using as widgets in chatbot). But here I want to show widget only and no text message. Please update if you get any solution. Thanks in advance.

VeenaMalali13 avatar Jun 16 '21 07:06 VeenaMalali13

You can't currently do this. I'm working on expanding this for v2, but right now you can't render widgets alone. They must always be attached to a chatbot message. A hacky solution would be to modify the existing previous message provided that it does not have a widget:

// on fetch response 

this.setState(prev => {
     const lastMessage = prev.messages[prev.messages.length - 1];
     lastMessage.widget = "myWidget"
     
     return {
          ...prev, messages: [prev.slice(0, prev.messages.length - 1), lastMessage]
     }
})

@vijay-kumar-singh is this the same problem? If you are doing a fetch call in a rendered widget you can use the provided setState method to update the state once you get a response in the widget. All widgets receive the internal setState function as props, which you can access from the widget and update state.

FredrikOseberg avatar Jun 16 '21 08:06 FredrikOseberg

Any update as to whether this has been addressed? The workaround I've used is to call createChatBotMessage with a string with a single space and then style my widget to have the same background colour as the chatbot message. It's a bit of a hack.

greendinosaur avatar Sep 13 '23 18:09 greendinosaur

The workaround that I've built uses the createCustomMessage, rather than createChatBoxMessage, for certain answer types. This allows you to build a widget type of response via a custom message type, and does not use the standard massage response.

sean-cedar avatar Sep 13 '23 19:09 sean-cedar