syncfusion-react-chat-ui

Install @syncfusion/ej2-react-interactive-chat via npm, import the required Syncfusion CSS theme files, then render ChatUIComponent with a user prop containing an id and user name. Add initial messages using MessagesDirective and MessageDirective children.

Set enableAttachments to true and provide attachmentSettings with saveUrl and removeUrl endpoints. You can also restrict file types with allowedFileTypes, limit size with maxFileSize, and enable drag-and-drop uploads.

Yes. Pass a typingUsers array to show who is typing, and use the userTyping event to broadcast typing status in real time. For mentions, provide mentionUsers and optionally customize mentionTriggerChar; users appear when typing @.

Yes. Set enableRtl to true and choose an RTL locale such as ar, he, or fa via the locale prop. The component adjusts layout direction, and typing indicator strings are localized for supported languages.

Use the cssClass prop to apply custom CSS, set width and height props for dimensions, and enable compact mode with enableCompactMode for left-aligned dense layouts. You can also switch between Material, Bootstrap 5, Fluent, and Tailwind themes.