Klleon SDK

日本語

한국어
English

日本語

한국어
English

Appearance

chat-container ​

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

使用方法 ​

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

属性 ​

属性型デフォルト説明
typestring"text"入力モード。"text" | "voice"
delaynumber30応答テキストタイピングエフェクト遅延（1文字あたりms）。0に設定してもレンダリングフレームごとに1文字ずつ表示されます（即時表示ではありません）。
isShowCountbooleantrueテキストモードで文字数カウンター表示の有無
scrollbarbooleanfalseメッセージ領域のスクロールバー表示の有無。スクロールバーを非表示にするには属性を書きません。

boolean属性の指定方法 ​

isShowCount と scrollbar は、HTML属性として書いたときの解釈ルールが異なります。

属性属性を省略="false"その他の値（=""、="true" など）
isShowCounttrue（デフォルト）falsetrue
scrollbarfalse（デフォルト）truetrue
  • isShowCount は isShowCount="false" で無効にできます。属性を省略するとデフォルトの true になり、"false" 以外の文字列はすべて true として解釈されます。
  • scrollbar は属性が存在するだけで、値に関係なく true になります。無効にするには属性自体を書かないでください。
  • HTML属性名は大文字・小文字を区別しないため、isShowCount と isshowcount は同じように動作します。ブラウザの開発者ツールには小文字（isshowcount）で表示されます。

scrollbar="false" はスクロールバーを非表示にしません

scrollbar は属性が付いているというだけで true になるため、scrollbar="false" と書いてもスクロールバーは表示されます。非表示にするには属性を省略するか、JavaScriptのプロパティで false を指定してください。

html
<!-- isShowCount: true（カウンター表示）、scrollbar: false（スクロールバー非表示） -->
<chat-container></chat-container>
html
<!-- 文字数カウンターを非表示にする -->
<chat-container isShowCount="false"></chat-container>

<!-- スクロールバーを表示する（属性があれば true） -->
<chat-container scrollbar></chat-container>
js
const el = document.querySelector('chat-container');

// プロパティには false をそのまま指定できます。
el.isShowCount = false; // カウンター非表示
el.scrollbar = false;   // スクロールバー非表示
el.scrollbar = true;    // スクロールバー表示

入力モード ​

テキストモード (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 — リクエスト拒否

スタイリング ​

Shadow DOM

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

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