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). 0 for instant display.
isShowCount	boolean	true	Whether to show character count in text mode
scrollbar	boolean	false	Whether to show scrollbar in the message area. false hides 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
• SLEEP_STARTED / SLEEP_ENDED — Sleep state change

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>