chat-container

A Web Component that provides a chat interface. Supports both text and voice input modes.

Usage

<chat-container delay="50"></chat-container>

Attributes

Attribute	Type	Default	Description
type	string	"text"	Input mode. "text" | "voice"
delay	number	30	Response text typing effect delay (ms per character). Even when set to 0, characters are displayed one per rendering frame (not instantly).
isShowCount	boolean	true	Whether to show character count in text mode
scrollbar	boolean	false	Whether to show scrollbar in the message area. Omit the attribute to hide the scrollbar.

Setting Boolean Attributes

isShowCount and scrollbar follow different rules when written as HTML attributes.

Attribute	Attribute omitted	="false"	Any other value (="", ="true", etc.)
isShowCount	true (default)	false	true
scrollbar	false (default)	true	true

• isShowCount can be turned off with isShowCount="false". Omitting the attribute keeps the default true, and any string other than "false" is read as true.
• scrollbar is true whenever the attribute is present, regardless of its value. To turn it off, do not write the attribute at all.
• HTML attribute names are case-insensitive, so isShowCount and isshowcount behave the same. Browser devtools display it in lowercase (isshowcount).

scrollbar="false" does not hide the scrollbar

scrollbar becomes true simply because the attribute is present, so scrollbar="false" still shows the scrollbar. To hide it, omit the attribute or set the JavaScript property to false.

Attributes omitted (defaults)

<!-- isShowCount: true (counter shown), scrollbar: false (scrollbar hidden) -->
<chat-container></chat-container>

Set via HTML attribute

<!-- Hide the character counter -->
<chat-container isShowCount="false"></chat-container>

<!-- Show the scrollbar (present attribute means true) -->
<chat-container scrollbar></chat-container>

Set via JavaScript property

const el = document.querySelector('chat-container');

// Properties accept false directly.
el.isShowCount = false; // hide the counter
el.scrollbar = false;   // hide the scrollbar
el.scrollbar = true;    // show the scrollbar

Input Modes

Text Mode (type="text")

Displays a text input field and send button.

• Send: Press Enter or click the send icon
• Line break: Shift + Enter
• IME handling: Enter does not send during CJK composition (Korean, Japanese, etc.)
• Character limit: 350 characters max
• Mobile: On mobile devices, Enter acts as a line break (use the send button instead).
• Auto-focus: The text input is automatically focused after the avatar finishes responding.

Click the microphone icon on the right to switch to voice mode.

Voice Mode (type="voice")

Displays a microphone button.

• Start recording: Click the microphone button
• Stop recording: Click the stop button, or automatically ends after 10 seconds
• Visual feedback: Waveform animation and countdown timer displayed during recording
• Internally calls SDK.startListening() and SDK.endListening().

Click the keyboard icon on the left to switch to text mode.

Message Display

• Automatically displays messages from the SDK (via sendMessage, speak, STT results, and avatar responses).
• Uses virtual scrolling to render large numbers of messages without performance degradation.
• Automatically scrolls to the bottom when new messages are received.

Typing Effect

• Avatar response messages are displayed character by character at the interval specified by the delay attribute.
• User messages (requests) are displayed instantly without the typing effect.
• When a new message arrives, any in-progress typing completes immediately and the new message starts typing.

Loading Indicator

A loading animation appears below the last user message while the avatar is preparing a response (RESPONSE_PREPARING signal).

Disabled State

Input is disabled when the SDK status is not CONNECTED_FINISH or when the avatar is responding. Input is re-enabled when one of the following signals is received:

• RESPONSE_ENDED — Avatar response complete
• ERROR — Error received
• REJECTED — Request rejected

Styling

Shadow DOM

Encapsulated with Shadow DOM, the style attribute only applies to the component's external layout such as size, position, and border. Internal element styles (background color, message bubbles, etc.) cannot be changed.

<chat-container
  style="
    height: 300px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
  "
></chat-container>