Web Components Chat (チャット) の概要

Ignite UI for Web Components チャット コンポーネントは、アプリケーションで会話型インターフェースを構築するための完全なソリューションを提供します。カスタマー サポート ツール、コラボレーション ワークスペース、チャットボット アシスタントなどを作成する場合でも、チャット コンポーネントは必要な機能を提供します: テキスト メッセージの送受信、ファイル添付のアップロード、クイック リプライサジェストの表示、他の参加者が入力中であることを示す入力中インジケーター。

Chat コンポーネントは静的なメッセージ リストではなく、リアルタイム通信を想定したインタラクティブな設計です。入力やレンダリング、ユーザー操作を管理しつつ、メッセージや添付の表示方法は完全にカスタマイズ可能です。また、レイアウトやビジュアルの任意部分をオーバーライドできる広範なレンダリング API も提供されています。

インストール

Ignite UI for Web Components を使用するには、以下のコマンドでインストールします。

npm install igniteui-webcomponents

インストール後、プロジェクトにコンポーネントをインポートし、カスタム要素として登録すると利用可能になります。

import { defineComponents, IgcChatComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcChatComponent);

CSS ファイルにはデフォルト テーマが含まれています。Chat をアプリケーションのブランドに合わせて変更したい場合は、別のテーマに置き換えたり、カスタム テーマを作成したりできます。

使用方法

最も簡単な使用方法は、以下のように直接 Chat を宣言することです。

const options: IgcChatOptions = {
  currentUserId: 'me',
  headerText: 'Support Chat',
};

<igc-chat id="myChat" .options=${options}>
</igc-chat>

ここで、currentUserId プロパティは、どのメッセージが「送信済み」 (現在のユーザー) で、どれ「受信済み」 (他のユーザー) かをコンポーネントに判定します。headerText はチャット ウィンドウのタイトルを提供します。

レンダリング後は、プログラムからメッセージを追加することも可能です。

const chat = document.getElementById('myChat');
const newMessage = {
  id: '1',
  sender: 'me',
  text: 'Hello! How can I help you?',
  timestamp: Date.now().toString()
};
chat.messages = [...chat.messages, newMessage ];

この方法により、サーバー エンドポイント、チャットボット エンジン、コラボレーション アプリのバックエンドなど、任意のデータ ソースと簡単に統合できます。

プロパティ

Chat コンポーネントは、その状態と構成を制御できるいくつかの重要なプロパティを公開します。

上記のプロパティを使用することで、Chat の UI をアプリケーションの状態やバックエンドと簡単に同期させることができます。

添付

モダンな会話ではテキストだけに限られません。Chat コンポーネントはファイル添付機能のサポートが組み込まれており、ユーザーは画像、ドキュメント、その他のファイルを共有できます。 デフォルトでは入力領域に添付ボタンが表示されます。acceptedFiles プロパティで許可されるファイル タイプを制御可能です。

const options: IgcChatOptions = {
  acceptedFiles="image/*,.pdf",
};

この例では、ユーザーは画像と PDF ファイルのみをアップロードできます。 添付が不要なユースケースの場合は、簡単にオフにすることができます。

const options: IgcChatOptions = {
  disableInputAttachments: true,
};

サジェスト

クイック リプライのサジェストは、ユーザーがすぐにタップして返信できる事前定義の応答を提供します。この機能は、チャットボットやカスタマー サービスのフロー、あるいはユーザーを構造化されたプロセスに案内する場合に特に有用です。 サジェストは、文字列の配列を suggestions プロパティにバインドすることで提供できます。suggestions-position 属性を使用すると、表示位置を入力領域の下またはメッセージ リストの下に制御できます。

const options: IgcChatOptions = {
  currentUserId: "me",
  suggestions: ['Yes', 'No', 'Maybe later'],
  suggestionsPosition: "below-input"
};

<igc-chat
  .options=${options}>
</igc-chat>

この方法により、繰り返し入力する必要が減り、ガイド付きの会話でユーザー体験を向上させることができます。

入力中インジケーター

相手が入力中であることが見えると、会話はより自然に感じられます。Chat コンポーネントでは、オプション オブジェクトの isTyping プロパティを通じてこの動作を提供します。 true に設定すると、メッセージ下にさりげない入力中インジケーターが表示されます。

const options: IgcChatOptions = {
  isTyping: true
};

この機能は通常、バックエンド サービスからの入力イベントを受け取ったときなど、プログラムで切り替えます。

カスタム レンダラー

Chat コンポーネントはデフォルトの UI ですぐに使用できますが、多くのアプリケーションでは外観と操作性をカスタマイズする必要があります。たとえば、既読通知を追加したり、アバターを表示したり、入力領域を音声録音ボタンに置き換えたりする場合です。 Chat コンポーネントはレンダラー システムでこのニーズに対応します。レンダラーは、UI の特定の部分のテンプレートを返す関数です。必要に応じて、任意の数のレンダラーをオーバーライドできます。

ChatTemplateRenderer

すべてのレンダラーは同じ関数シグネチャに従います。

export type ChatTemplateRenderer<T> = (ctx: T) => unknown;

ctx パラメーターは、レンダリングされる対象に応じたさまざまなコンテキスト データを提供します。

レンダラー コンテキスト

利用可能なレンダラー

Chat のカスタマイズ可能な部分は次の通りです:

• Message レベル: message、messageHeader、messageContent、messageAttachments、messageActions
• Attachment レベル: attachment、attachmentHeader、attachmentContent
• Input レベル: input、inputActions、inputActionsStart、inputActionsEnd、inputAttachments、fileUploadButton、sendButton
• Suggestion: suggestionPrefix

この粒度により、添付の表示方法など、特定の部分だけを変更してもチャット全体のレイアウトを書き換える必要はありません。

例: メッセージ内容のカスタマイズ

メッセージ バブルを独自のテンプレートに置き換える例です。

const options = {
  renderers: {
    messageContent: (ctx) => {
      const { message } = ctx;
      return html`<div class="bubble custom">${message.content}</div>`;
    }
  }
};

例: 入力領域のカスタマイズ

デフォルトでは、チャット入力はテキスト領域です。音声入力ボタンなど、より適した体験を提供するためにオーバーライドできます。

const options = {
  renderers: {
    input: (ctx) => html`
      <textarea placeholder=${ctx.instance?.options?.inputPlaceholder || 'Type here...'}>${ctx.value}</textarea>
      <button @click=${() => alert('Voice input!')}>🎤</button>
    `
  }
};

例: 入力アクションの拡張

Chat コンポーネントには、デフォルトのアクション (アップロードと送信) を保持しつつ追加のコントロールを拡張できるレンダラーがあります:

• inputActionsStart - デフォルトのアップロード ボタンの後にカスタム コンテンツを挿入可能。
• inputActionsEnd - デフォルトの送信ボタンの後にカスタム コンテンツを挿入可能。

例えば、他のボタンの前に音声録音ボタンを追加したり、送信ボタンの後に追加オプション メニューを追加したりできます。 次の例では、デフォルトのアップロード ボタンはそのままですが、その隣にマイク ボタンが追加されています。一方、デフォルトの送信ボタンを削除し、カスタムの「質問」ボタンと「その他」メニューに置き換えます。

const _actionsStartTemplate = () => html`
  <igc-icon-button variant="flat">🎤</igc-icon-button>
`;

const _actionsEndTemplate = (ctx: ChatRenderContext) => html`
  <div>
    <igc-button @click=${() => handleCustomSendClick(ctx.instance)}>Ask</igc-button>
    <igc-icon-button variant="flat" name="more_horiz"></igc-icon-button>
  </div>
`;

const options = {
  renderers: {
    inputActionsStart: _actionsStartTemplate,
    inputActionsEnd: _actionsEndTemplate,
    sendButton: () => nothing,
  },
};

この設定では:

• アップロード ボタンはそのまま残ります。

• その後にマイク ボタンが追加されます (inputActionsStart)。

• デフォルトの送信ボタンが削除され、カスタムの「質問」ボタンと「その他」アイコン (inputActionsEnd) に置き換えられました。

この方法により、チャット入力バーの柔軟性が完全に向上し、入力領域を最初から再構築することなく、アクションを追加、削除、または並べ替えることができます。

Markdown レンダリング

Chat コンポーネントは igniteui-webcomponents/extras からエクスポートされる createMarkdownRenderer ヘルパーを通じて Markdown をサポートします。これにより、書式付きテキスト、リンク、リスト、シンタックス ハイライト付きコードブロックを表示しつつ、安全に HTML をサニタイズできます。

例:

• 各メッセージの text プロパティが marked ライブラリを使用して Markdown として解析されます。
• レンダラーは DOMPurify を使用して出力をサニタイズします。
• リンクは自動的に新しいタブで開き、安全な rel 属性が付与されます。

npm install marked marked-shiki shiki dompurify

By default, messages are rendered as plain text. If you want to enable Markdown support, you can override the messageContent renderer and use the Markdown renderer as shown below:

import { createMarkdownRenderer } from 'igniteui-webcomponents/extras';

// Create a reusable Markdown renderer instance
const markdownRenderer = await createMarkdownRenderer();

const options = {
  renderers: {
    messageContent: async ({ message }) => markdownRenderer(message),
  }
};

In this example:

• Each message’s text property will be parsed as Markdown using the marked library.
• The renderer sanitizes the output using DOMPurify
• Links automatically open in a new tab with safe rel attributes.

構文のハイライト表示

Markdown レンダラーは、Shiki を使用したコード ブロックの構文のハイライト表示もサポートします。デフォルトでは JavaScript、TypeScript、HTML、CSS に対して github-light テーマでハイライト表示されます。この動作は、MarkdownRendererOptions を通じてカスタマイズできます。

const markdownRenderer = await createMarkdownRenderer({
  theme: { light: 'min-light' },
  languages: ['javascript', 'python']
});

これにより、GitHub のダーク テーマでスタイル設定された、JavaScript、Python、Go のハイライト表示されたコード ブロックが有効になります。

構成オプション

イベント

アプリケーション ロジックと統合するために、Chat コンポーネントは一連のイベントを発行します。

• igcMessageCreated - 新しいメッセージ作成時
• igcMessageReact - メッセージにリアクションした時
• igcAttachmentClick - 添付クリック時
• igcAttachmentDrop - 添付が追加された時
• igcAttachmentDrop - 添付が削除された時
• igcAttachmentDrag - 添付ドラッグ中
• igcAttachmentDrop - 添付ドロップ時
• igcTypingChange - 入力状態変更時
• igcInputFocus / igcInputBlur - 入力フォーカス イベント
• igcInputChange - 入力値変更時

これらのイベントをリッスンし、バックエンドと同期することができます。

chat.addEventListener('igcMessageCreated', (e) => {
  console.log('Message:', e.detail);
});

スタイル設定

Chat コンポーネントは、外観や構造を詳細にカスタマイズできる CSS パーツとスロットを提供します。

CSS パーツ

スロット

ルート スタイルの採用 (adoptRootStyles)

Chat コンポーネントのオプションには、高度なスタイル設定シナリオ用の特別なフラグが含まれています。

このプロパティは、カスタム レンダリングされたテンプレートにグローバル CSS を適用するときに Shadow DOM カプセル化を処理したくない場合に役立ちます。 ただし、以下のトレードオフがあります:

• ✅ 利便性: ドキュメントのグローバル スタイルがカスタム メッセージ レンダラーに適用されます。
• ⚠️ 危険: カプセル化が破られ、グローバル CSS によって内部の表示が意図せず変更される可能性があります。
• 🔒 1 回限りの設定: このオプションは初期化時のみ設定可能で、実行時に変更しても効果はありません。

このプロパティに使用する前に、標準の Web Component スタイル設定アプローチを使用することを強くお勧めします。

• CSS 変数と ::part API - 公開されたパーツと変数を使用したカスタマイズを優先します。
• <link> 要素 – 大きなスタイルシートの場合は、Shadow DOM 内に挿入します。
• インライン <style> タグ – 小さなスコープのスタイル オーバーライド用。

例

igc-chat::part(header) {
  background: var(--ig-primary-100);
}

igc-chat::part(message-container) {
  border-radius: 12px;
  padding: 0.5rem;
}

igc-chat::part(empty-state) {
  font-style: italic;
  color: var(--ig-gray-500);
}

これにより、Chat の機能を置き換えることなく、ブランドに合わせたスタイルを適用できます。

API リファレンス

• Chat
• IgcChatOptions
• IgcChatMessage
• IgcChatMessageAttachment
• ChatRenderers
• ChatTemplateRenderer
• スタイル設定およびテーマ

その他のリソース

• Ignite UI for Web Components フォーラム (英語)
• Ignite UI for Web Components GitHub (英語)