Klleon SDK

日本語

한국어
English

日本語

한국어
English

Appearance

chat-container ​

チャットインターフェースを提供するWeb Componentです。テキスト入力と音声入力モードをサポートします。

使用方法 ​

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

属性 ​

属性型デフォルト説明
typestring"text"入力モード。"text" | "voice"
delaynumber30応答テキストタイピングエフェクト遅延（1文字あたりms）。0で即時表示。
isShowCountbooleantrueテキストモードで文字数カウンター表示の有無
scrollbarbooleanfalseメッセージ領域のスクロールバー表示の有無。falseでスクロールバーを非表示にします。

入力モード ​

テキストモード (type="text") ​

テキスト入力欄と送信ボタンを表示します。

  • 送信: Enterキーまたは送信アイコンクリック
  • 改行: Shift + Enter
  • IME処理: 日本語・韓国語などの変換中はEnterで送信されません。
  • 文字数制限: 最大350文字
  • モバイル: モバイル環境ではEnterキーが改行として動作します（送信ボタンを使用）。
  • 自動フォーカス: アバターの応答完了後、テキスト入力欄に自動フォーカスされます。

右側のマイクアイコンをクリックすると音声モードに切り替わります。

音声モード (type="voice") ​

マイクボタンを表示します。

  • 録音開始: マイクボタンクリック
  • 録音終了: 停止ボタンクリック、または10秒経過で自動終了
  • 視覚フィードバック: 録音中は波形アニメーションとカウントダウンタイマーを表示
  • 内部的に SDK.startListening()、SDK.endListening() を呼び出します。

左側のキーボードアイコンをクリックするとテキストモードに切り替わります。

メッセージ表示 ​

  • SDKのメッセージ一覧（sendMessage、speak、STT結果、アバター応答）を自動的に表示します。
  • 仮想スクロールを使用し、大量のメッセージもパフォーマンス低下なくレンダリングします。
  • 新しいメッセージ受信時、自動的に下部にスクロールされます。

タイピングエフェクト ​

  • アバター応答（response）メッセージは delay 属性で指定された間隔で1文字ずつ表示されます。
  • ユーザーメッセージ（request）はタイピングエフェクトなしで即時表示されます。
  • 新しいメッセージが到着すると、進行中のタイピングが即時完了し、新しいメッセージのタイピングが開始されます。

ローディング表示 ​

アバターが応答を準備中の時（RESPONSE_PREPARING シグナル）、最後のユーザーメッセージの下にローディングアニメーションが表示されます。

無効状態 ​

SDKステータスが CONNECTED_FINISH でない場合、またはアバターが応答中の場合、入力が無効化されます。 以下のシグナルが受信されると入力が再有効化されます：

  • RESPONSE_ENDED — アバター応答完了
  • ERROR — エラー受信
  • REJECTED — リクエスト拒否
  • SLEEP_STARTED / SLEEP_ENDED — スリープ状態変更

スタイリング ​

Shadow DOM

Shadow DOMでカプセル化されているため、style 属性はコンポーネントのサイズ・位置・ボーダーなど外部レイアウトにのみ適用されます。内部要素（背景色、メッセージバブルなど）のスタイルは変更できません。

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