Methods in React Chat UI component
28 Aug 202523 minutes to read
Add message
The addMessage method programmatically adds a new message to the chat. You can provide the new message as either a string or a MessageModel object.
The following sample demonstrates how to add a new message using both a string and a MessageModel object.
import { ChatUIComponent, MessagesDirective, MessageDirective } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
const chatInstance = React.useRef(null);
const addNewMessage = () => {
chatInstance.current.addMessage(
{
author: michaleUserModel,
text: "Great! Let me know if there’s anything that needs adjustment."
});
}
const currentUserModel = {
id: "user1",
user: "Albert"
};
const michaleUserModel = {
id: "user2",
user: "Michale Suyama"
};
return (
// specifies the tag for render the Chat UI component
<div className="chat-container">
<button id="addMessageModel" style= className="e-btn e-primary" onClick={addNewMessage}>Add Message as Object</button>
<ChatUIComponent ref={chatInstance} user={currentUserModel} height="360px">
<MessagesDirective>
<MessageDirective text="Hi Michale, are we on track for the deadline?" author={currentUserModel} ></MessageDirective>
<MessageDirective text="Yes, the design phase is complete." author={michaleUserModel} ></MessageDirective>
<MessageDirective text="I’ll review it and send feedback by today." author={currentUserModel} ></MessageDirective>
</MessagesDirective>
</ChatUIComponent>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('container'));import { ChatUIComponent, MessagesDirective, MessageDirective, UserModel } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
const chatInstance = React.useRef<ChatUIComponent>(null);
const currentUserModel: UserModel = {
id: "user1",
user: "Albert"
};
const michaleUserModel: UserModel = {
id: "user2",
user: "Michale Suyama"
};
const addNewMessage = () => {
chatInstance.current.addMessage(
{
author: michaleUserModel,
text: "Great! Let me know if there’s anything that needs adjustment."
});
}
return (
// specifies the tag for render the Chat UI component
<div className="chat-container">
<button id="addMessageModel" style= className="e-btn e-primary" onClick={addNewMessage}>Add Message as Object</button>
<ChatUIComponent ref={chatInstance} user={currentUserModel} height="360px">
<MessagesDirective>
<MessageDirective text="Hi Michale, are we on track for the deadline?" author={currentUserModel} ></MessageDirective>
<MessageDirective text="Yes, the design phase is complete." author={michaleUserModel} ></MessageDirective>
<MessageDirective text="I’ll review it and send feedback by today." author={currentUserModel} ></MessageDirective>
</MessagesDirective>
</ChatUIComponent>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('container'));import { ChatUIComponent, MessagesDirective, MessageDirective } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
const chatInstance = React.useRef(null);
const addNewMessage = () => {
chatInstance.current.addMessage('Also, let me know if there are any blockers we should address before the next phase.');
}
const currentUserModel = {
id: "user1",
user: "Albert"
};
const michaleUserModel = {
id: "user2",
user: "Michale Suyama"
};
return (
// specifies the tag for render the Chat UI component
<div className="chat-container">
<button id="addMessageString" style= className="e-btn e-primary" onClick={addNewMessage}>Add Message as string</button>
<ChatUIComponent ref={chatInstance} user={currentUserModel} height="360px">
<MessagesDirective>
<MessageDirective text="Hi Michale, are we on track for the deadline?" author={currentUserModel} ></MessageDirective>
<MessageDirective text="Yes, the design phase is complete." author={michaleUserModel} ></MessageDirective>
<MessageDirective text="I’ll review it and send feedback by today." author={currentUserModel} ></MessageDirective>
</MessagesDirective>
</ChatUIComponent>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('container'));import { ChatUIComponent, MessagesDirective, MessageDirective, UserModel } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
const chatInstance = React.useRef<ChatUIComponent>(null);
const currentUserModel: UserModel = {
id: "user1",
user: "Albert"
};
const michaleUserModel: UserModel = {
id: "user2",
user: "Michale Suyama"
};
const addNewMessage = () => {
chatInstance.current.addMessage('Also, let me know if there are any blockers we should address before the next phase.');
}
return (
// specifies the tag for render the Chat UI component
<div className="chat-container">
<button id="addMessageString" style= className="e-btn e-primary" onClick={addNewMessage}>Add Message as string</button>
<ChatUIComponent ref={chatInstance} user={currentUserModel} height="360px">
<MessagesDirective>
<MessageDirective text="Hi Michale, are we on track for the deadline?" author={currentUserModel} ></MessageDirective>
<MessageDirective text="Yes, the design phase is complete." author={michaleUserModel} ></MessageDirective>
<MessageDirective text="I’ll review it and send feedback by today." author={currentUserModel} ></MessageDirective>
</MessagesDirective>
</ChatUIComponent>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('container'));Update message
The updateMessage method modifies an existing message in the Chat UI, which is useful for editing or correcting previously sent messages.
import { ChatUIComponent, MessagesDirective, MessageDirective } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
const chatInstance = React.useRef(null);
const updateMessage = () => {
chatInstance.current.updateMessage({text: "Hi Michael, are we still on schedule to meet the deadline?", author: currentUserModel},'msg1');
}
const currentUserModel = {
id: "user1",
user: "Albert"
};
const michaleUserModel = {
id: "user2",
user: "Michale Suyama"
};
return (
// specifies the tag for render the Chat UI component
<div className="chat-container">
<button id="updateMessage" style= className="e-btn e-primary" onClick={updateMessage}>Update Message</button>
<ChatUIComponent ref={chatInstance} user={currentUserModel} height="360px">
<MessagesDirective>
<MessageDirective text="Hi Michale, are we on track for the deadline?" author={currentUserModel} id="msg1"></MessageDirective>
<MessageDirective text="Yes, the design phase is complete." author={michaleUserModel} id="msg2"></MessageDirective>
<MessageDirective text="I’ll review it and send feedback by today." author={currentUserModel} id="msg3"></MessageDirective>
</MessagesDirective>
</ChatUIComponent>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('container'));import { ChatUIComponent, MessagesDirective, MessageDirective, UserModel } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
const chatInstance = React.useRef<ChatUIComponent>(null);
const currentUserModel: UserModel = {
id: "user1",
user: "Albert"
};
const michaleUserModel: UserModel = {
id: "user2",
user: "Michale Suyama"
};
const updateMessage = () => {
chatInstance.current.updateMessage({text: "Hi Michael, are we still on schedule to meet the deadline?", author: currentUserModel},'msg1');;
}
return (
// specifies the tag for render the Chat UI component
<div className="chat-container">
<button id="updateMessage" style= className="e-btn e-primary" onClick={updateMessage}>Update Message</button>
<ChatUIComponent ref={chatInstance} user={currentUserModel} height="360px">
<MessagesDirective>
<MessageDirective text="Hi Michale, are we on track for the deadline?" author={currentUserModel} id="msg1"></MessageDirective>
<MessageDirective text="Yes, the design phase is complete." author={michaleUserModel} id="msg2"></MessageDirective>
<MessageDirective text="I’ll review it and send feedback by today." author={currentUserModel} id="msg3"></MessageDirective>
</MessagesDirective>
</ChatUIComponent>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('container'));Scroll to the bottom
The scrollToBottom method scrolls the chat view to the most recent message, ensuring that the latest content is visible to the user.
import { ChatUIComponent, MessagesDirective, MessageDirective } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
const chatInstance = React.useRef(null);
const scrollToBottom = () => {
chatInstance.current.scrollToBottom();
}
const currentUserModel = {
id: "user1",
user: "Albert"
};
const michaleUserModel = {
id: "user2",
user: "Michale Suyama"
};
return (
// specifies the tag for render the Chat UI component
<div className="chat-container">
<button id="scrollToBottom" style= className="e-btn e-primary" onClick={scrollToBottom}>Scroll to bottom</button>
<ChatUIComponent ref={chatInstance} user={currentUserModel} height="360px">
<MessagesDirective>
<MessageDirective text="Want to get coffee tomorrow?" author={currentUserModel} ></MessageDirective>
<MessageDirective text="Sure! What time?" author={michaleUserModel} ></MessageDirective>
<MessageDirective text="How about 10 AM?" author={currentUserModel} ></MessageDirective>
<MessageDirective text="Perfect" author={michaleUserModel} ></MessageDirective>
<MessageDirective text="See you!" author={currentUserModel} ></MessageDirective>
<MessageDirective text="Bye!" author={michaleUserModel} ></MessageDirective>
</MessagesDirective>
</ChatUIComponent>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('container'));import { ChatUIComponent, MessagesDirective, MessageDirective, UserModel } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
const chatInstance = React.useRef<ChatUIComponent>(null);
const currentUserModel: UserModel = {
id: "user1",
user: "Albert"
};
const michaleUserModel: UserModel = {
id: "user2",
user: "Michale Suyama"
};
const scrollToBottom = () => {
chatInstance.current.scrollToBottom();
}
return (
// specifies the tag for render the Chat UI component
<div className="chat-container">
<button id="scrollToBottom" style= className="e-btn e-primary" onClick={scrollToBottom}>Scroll to bottom</button>
<ChatUIComponent ref={chatInstance} user={currentUserModel} height="360px">
<MessagesDirective>
<MessageDirective text="Want to get coffee tomorrow?" author={currentUserModel} ></MessageDirective>
<MessageDirective text="Sure! What time?" author={michaleUserModel} ></MessageDirective>
<MessageDirective text="How about 10 AM?" author={currentUserModel} ></MessageDirective>
<MessageDirective text="Perfect" author={michaleUserModel} ></MessageDirective>
<MessageDirective text="See you!" author={currentUserModel} ></MessageDirective>
<MessageDirective text="Bye!" author={michaleUserModel} ></MessageDirective>
</MessagesDirective>
</ChatUIComponent>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('container'));