Methods
Method properties that can be called directly on the Deep Chat element.
Make sure the Deep Chat component has been fully rendered on the DOM before using these.
getMessages
- Type:
() => MessageContent[]
Returns details of messages inside the chat.
Example
- Code
chatElementRef.getMessages();
clearMessages
- Type: (
isReset?: boolean
) =>void
Clear all messages in the chat. By default - introPanel
and introMessage
are displayed again, however you can pass
a false argument to prevent this.
Example
- Code
chatElementRef.clearMessages();
submitUserMessage
- Type: (
message: UserMessage
) =>void
Send a new user message.
Example
- Code
chatElementRef.submitUserMessage({text: "User message"});
UserMessage
- Type: {
text?: string
,files?: File[] | FileList
}
text
is the text content of the outgoing message.
files
is an array containing files that are going to be part of the outgoing message. This can either be an array
of File
objects or a FileList
object which typically comes from a file input.
Files Example
- Code
// html
<input type="file" id="files-input" accept="image/png, image/jpeg" />
// javascript
const filesInput = document.getElementById('files-input');
filesInput.onchange = (event) => {
chatElement.submitUserMessage({files: event.target.files});
};
addMessage
- Type: (
message: Response
,isUpdate?: boolean
) =>void
Add a message to the chat.
message
is an object containing message details.
isUpdate
identifies whether the message should be treated as new - e.g. should onMessage
event
and textToSpeech
be triggered.
Example
- Code
chatElementRef.addMessage({text: `New message`, role: 'user'});
This can be used to add suggestion buttons after message.
updateMessage
- Type: (
message: MessageContent
,index: number
) =>void
Updates an existing message in the chat.
message
is an object containing new message details. If the previous version of message contains multiple properties such as text
and html
, this will overwrite them both.
index
is the index number of the message to be updated from the top. If you are not sure about the index, use getMessages
to find the index of your target message.
Example
- Code
chatElementRef.updateMessage({text: `New text.`}, 0);
scrollToBottom
- Type:
() => void
Moves the chat's scrollbar to the bottom.
Example
- Code
chatElementRef.scrollToBottom();
focusInput
- Type:
() => void
Focuses the cursor on the text input.
Example
- Code
chatElementRef.focusInput();
setPlaceholderText
- Type: (
text: string
) =>void
Dynamically change the text input placeholder.
Example
- Code
chatElementRef.setPlaceholderText("New placeholder text");
Default placeholder text should be set using the placeholder
property in textInput
.
disableSubmitButton
- Type: (
override?: boolean
) =>void
Disables the submit button. To re-enable automatic state handling - call this method again with a boolean argument of false.
Example
- Code
chatElementRef.disableSubmitButton();
refreshMessages
- Type:
() => void
If your text
messages contain Code and you are using the higlight.js
module to highlight them
(as per external module guidelines), sometimes the module may load after the messages have been rendered, leaving the code without a highlight. In such instances, you can use this
method to highlight the code with the loaded module.
Example
- Code
chatElementRef.refreshMessages();