Skip to main content

Methods

Method properties that can be called directly on the Deep Chat element.

info

Make sure the Deep Chat component has been fully rendered on the DOM before using these.

getMessages​

Returns details of messages inside the chat.

Example​

Method results:
> 
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​

chatElementRef.clearMessages();

submitUserMessage​

Send a new user message.

Example​

chatElementRef.submitUserMessage({text: "User message"});

UserMessage​

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.
custom encapsulates any custom data.

Files Example​

// 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​

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​

chatElementRef.addMessage({text: `New message`, role: 'user'});
tip

This can be used to add suggestion buttons after message.

updateMessage​

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​

chatElementRef.updateMessage({text: `New text.`}, 0);

scrollToBottom​

  • Type: () => void

Moves the chat's scrollbar to the bottom.

Example​

chatElementRef.scrollToBottom();

focusInput​

  • Type: () => void

Focuses the cursor on the text input.

Example​

chatElementRef.focusInput();

setPlaceholderText​

  • Type: (text: string) => void

Dynamically change the text input placeholder.

Example​

chatElementRef.setPlaceholderText("New placeholder text");
info

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​

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​

chatElementRef.refreshMessages();