Detaysoft / react-chat-elements

Reactjs chat elements chat UI, react chat components
MIT License
1.22k stars 218 forks source link

Support HTMl tags in message #208

Open hamidpak013 opened 11 months ago

hamidpak013 commented 11 months ago

here is the message that I want to show Please select the Service Provider\n0. Main Menu\n1. Back\n2. CarSpa Experts\n3. DriveShine Services\n4. SwiftLube & Wash\n5. AutoCare Pros\n6. Greenwheels Maintenance;

  1. I want to show the asterisk message in Bold.
  2. \n should be added to the new line

so I wrote a method that reads the text from the backend and converts it into HTML tags like this: <----Please select the Service Provider
0. Main Menu
1. Back
2. CarSpa Experts
3. DriveShine Services
4. SwiftLube & Wash
5. AutoCare Pros
6. Greenwheels Maintenance"---->

when I tried to provide my div element to text in MessageBox it popped up with this error

error: Type 'Element' is not assignable to type 'string'.

Please provide support for the HTML tags or provide a way to achieve this in Reactjs and Typescript

last-Programmer commented 11 months ago

the text property accepts React.Element. It seems to be that the typescript defintion of text property is just string only. that is the reason we are getting the error. it would be nice if it is updated some thing like this text: string | React.Element in IMessage inteface in type.d.ts

Thanks

soerennielsen commented 2 months ago

You can add a message to your datasource with html like this: const response = { position: "left", title: "bot", type: "text", text: Stub response from backend with a link, }; setMessages((prevMessages) => [...prevMessages, response]);

where "messages" is my datasource state.