tjtanjin / react-chatbotify

A modern React library for creating a flexible and extensible chatbot.
https://react-chatbotify.com
MIT License
135 stars 65 forks source link

[Help] How to support new lines in message content #13

Closed ahetawal-p closed 6 months ago

ahetawal-p commented 6 months ago

Hello, My api returns some content which is formatted with new lines and some lists. Something like this:

Details for the product:
 - A 
 - B
 - C
Another detail:
 - X
 - Y

How can I suppose this in the message rendering when a bot responds ?

tjtanjin commented 6 months ago

Hi @ahetawal-p, there's 2 approaches to this:

1) Use params.injectMessage multiple times to send each detail as a different message and hence distinguishing between lines. 2) Use the render attribute to include your own custom react component - which means you can write a component that handles parsing/formatting however you wish.

ahetawal-p commented 6 months ago

Thanks @tjtanjin Could you provide me an example of how to use the render attribute, when using the api response. Here is the step I use:

allIncidents: {
      message: async (_params: Params) => {
        const data = await makeApiCall('allIncidents')
        return data
      },
      transition: { duration: 0 },
      path: 'repeat',
    },
tjtanjin commented 6 months ago

@ahetawal-p The render component example gives you an idea of how it can be done. See if it's helpful for you.

ahetawal-p commented 6 months ago

@tjtanjin i did look at it, i guess my question is how do i pass the response from

const data = await makeApiCall('allIncidents')
        return data

To pass to render function so it can render the data with the <pre></pre> tags...

tjtanjin commented 6 months ago

@ahetawal-p You can refer to the table listing the attributes. For your case, since render takes in a function as well, you would make your API call within the render attribute rather than within message. That way there's no need to consider passing information.

tjtanjin commented 6 months ago

Hey @ahetawal-p! May I assume this is resolved?

ahetawal-p commented 6 months ago

Yes, thank you