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.

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();