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({
  html: `<button class="deep-chat-button deep-chat-suggestion-button deep-chat-temporary-message">What is your name?</button>`,
  role: 'user',
});
tip

This can be used to add suggestion buttons after message.

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 text.
This is useful for setting the placeholder text after the user sends a message.

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