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

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

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