Blazor Chat (チャット) の概要

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

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

インストール

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

Install-Package IgniteUI.Blazor

または .NET CLI を使用します:

dotnet add package IgniteUI.Blazor

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

// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbChatModule));

IgbChat コンポーネントにスタイルを適用するには、追加の CSS ファイルをリンクする必要があります。

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

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

使用方法

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

 public IgbChatOptions Options = new IgbChatOptions()
 {
  CurrentUserId = "user",
  HeaderText = "Support Chat"
 };

<IgbChat @ref="Chat" Options="Options">
</IgbChat>

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

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

<IgbChat @ref="Chat" Options="Options" Messages="Messages" MessageCreated="OnMessageCreated" Height="100%"></IgbChat>

 public IgbChatMessage[] Messages = new IgbChatMessage[]
 {
     new IgbChatMessage()
     {
         Id = "1",
         Text = "Hi, I have a question about my recent order, #7890.",
         Sender = "user",
         Timestamp = (DateTime.Now - TimeSpan.FromMilliseconds(3500000)).ToString()
     }
 }

その後、messageCreated イベントにフックして、作成されたメッセージをコレクションに追加することで、クライアントから送信されたメッセージを同期できます。

public void OnMessageCreated(IgbChatMessageEventArgs e)
{
  Messages = Messages.Append(e.Detail).ToArray();
}

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

プロパティ

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

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

サジェスト

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

public IgbChatOptions Options = new IgbChatOptions
{
  CurrentUserId = "me",
  Suggestions = new string[] { "Yes", "No", "Maybe later" },
  SuggestionsPosition = ChatSuggestionsPosition.BelowInput
};

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

入力中インジケーター

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

public IgbChatOptions Options = new IgbChatOptions
{
  IsTyping = true
};

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

カスタム レンダラー

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

ChatTemplateRenderer

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

igRegisterScript("MyTemplate", (ctx) => {
}, false);

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

レンダラー コンテキスト

利用可能なレンダラー

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

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

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

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

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

public IgbChatOptions Options = new IgbChatOptions
{
    Renderers = new IgbChatRenderers()
    {
        MessageContentScript = "MessageContentScript"
    }
};

igRegisterScript("MessageContentScript", (ctx) => {
    var html = window.igTemplating.html;
    return  html`<div className="bubble custom">${ctx.message.text}</div>`;
}, false);

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

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

public IgbChatOptions Options = new IgbChatOptions
{
    Renderers = new IgbChatRenderers()
    {
        InputScript = "InputTemplate"
    }
};

igRegisterScript("InputTemplate", (ctx) => {
    var html = window.igTemplating.html;
    return html`<textarea placeholder=${ctx.instance?.options?.inputPlaceholder || 'Type here...'}>${ctx.value}</textarea>
    <button @click=${() => alert('Voice input!')}>🎤</button>`;
}, false);

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

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

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

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

public IgbChatOptions Options = new IgbChatOptions
{
  Renderers = new IgbChatRenderers()
  {
    InputActionsStartScript = "InputActionsStartTemplate",
    InputActionsEndScript = "InputActionsEndTemplate",
    SendButtonScript = "SendButtonTemplate"
  }
};

igRegisterScript("SendButtonTemplate", (ctx) => {
    var html = window.igTemplating.html;
    return html``;
}, false);


igRegisterScript("InputActionsStartTemplate", (ctx) => {
    var html = window.igTemplating.html;
    return html`<igc-icon-button variant="flat">🎤</igc-icon-button>`;
}, false);

igRegisterScript("InputActionsEndTemplate", (ctx) => {
    var html = window.igTemplating.html;
    return html`<div>
    <igc-button @click=${() => handleCustomSendClick(ctx.instance)}>Ask</igc-button>
    <igc-icon-button variant="flat" name="more_horiz"></igc-icon-button>
  </div>`;
}, false);

この設定では:

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

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

イベント

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

• MessageCreated - 新しいメッセージ作成時
• MessageReact - メッセージにリアクションした時
• TypingChange - 入力状態変更時
• InputFocus / onInputBlur - 入力フォーカス イベント
• InputChange - 入力値変更時

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

<IgbChat MessageCreated="OnMessageCreated"></IgbChat>

public void OnMessageCreated(IgbChatMessageEventArgs e)
{
  Console.WriteLine($"Message: {e.Detail.Text}");
}

スタイル設定

IgbChat コンポーネントは、外観や構造を詳細にカスタマイズできる 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);
}

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

API リファレンス

• IgbChat
• IgbChatOptions
• IgbChatMessage
• IgbChatMessageAttachment
• IgbChatRenderers
• IgbChatTemplateRenderer
• スタイル設定およびテーマ

その他のリソース

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