Angular Chat (チャット) の概要

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

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

インストール

はじめに、Ignite UI for Angular パッケージと、UI を提供する Ignite UI for Web Components パッケージをインストールします。

npm install igniteui-angular igniteui-webcomponents

IgxChat は Angular のバインディング (イベント、テンプレート、DI、変更検出、パイプ) を提供し、視覚的なチャット UI は Web Components によってレンダリングされます。両方をインストールすることで、Angular でネイティブに動作するチャットを実現しつつ、Web Components の完全な UI を活用できます。

Ignite UI for Angular については、「はじめに」トピックををご覧ください。

インストールが完了したら、プロジェクトにコンポーネントをインポートできます。

import { Component } from '@angular/core';
import { IgxChatComponent } from "igniteui-angular/chat";

@Component({
  ...
})
export class AppComponent { ... }

使用方法

チャット オプションを定義し、テンプレートにバインドします。

import { IgxChatComponent, IgxChatOptions } from "igniteui-angular/chat";

public options: IgxChatOptions  = {
  currentUserId: 'me',
  headerText: 'Support Chat',
};

<igx-chat 
    [options]="options"
    [messages]="messages">
</igx-chat>

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

レンダリングされたら、バインドされたメッセージ配列を更新することで、プログラムでメッセージを追加できます。

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

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

入力

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

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

添付

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

public options: IgxChatOptions = {
  acceptedFiles="image/*,.pdf",
};

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

public options: IgxChatOptions = {
  disableInputAttachments: true,
};

サジェスト

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

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

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

入力中インジケーター

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

public options: IgxChatOptions = {
  isTyping: true
};

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

カスタム テンプレート

Chat コンポーネントはデフォルトの UI ですぐに使用できますが、多くのアプリケーションでは外観と操作性をカスタマイズする必要があります。たとえば、既読通知を追加したり、アバターを表示したり、入力領域を音声録音ボタンに置き換えたりする場合です。 Chat コンポーネントは、このニーズに対して Angular テンプレートを使用して対応します。テンプレートは templates 入力プロパティ経由で提供され、強く型付けされた Angular ディレクティブを使用します。

利用可能なテンプレート

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

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

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

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

<igx-chat
        [options]="options"
        [messages]="messages"
        [templates]="{ messageContent: messageContent }">
</igx-chat>
<ng-template #messageContent let-message igxChatMessageContext>
  <div class="custom-message">
    <strong>{{ message.sender }}:</strong> {{ message.text }}
  </div>
</ng-template>

上記の例では:

• let-message はメッセージ オブジェクトを公開します。
• igxChatMessageContext ディレクティブは、メッセージ テンプレートの適切な入力を保証します。

入力領域のカスタマイズ

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

<igx-chat
  [options]="options"
  [templates]="{ input: customInput }">
</igx-chat>

<ng-template #customInput let-input igxChatInputContext>
  <div class="custom-input">
    <textarea [(ngModel)]="input.value"></textarea>
    <button (click)="speechToText()">🎤</button>
  </div>
</ng-template>

入力アクションの拡張

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

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

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

<igx-chat
  [options]="options"
  [templates]="{
    inputActionsStart: inputStart,
    inputActionsEnd: inputEnd
  }">
</igx-chat>

<ng-template #inputStart>
  <button class="icon-btn">🎤</button>
</ng-template>

<ng-template #inputEnd>
  <button (click)="ask()">Ask</button>
  <button class="icon-btn">⋮</button>
</ng-template>

この設定では:

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

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

Markdown のサポート

Chat コンポーネントには、fromMarkdown パイプによる Markdown コンテンツの組み込みサポートがあり、メッセージ テキストを安全な HTML に変換します。これにより、書式付きテキスト、リンク、リスト、シンタックス ハイライト付きコードブロックを表示しつつ、安全に HTML をサニタイズできます。

Markdown のレンダリングはパフォーマンス上の理由から非同期で実行されるため、fromMarkdown パイプは Angular の async パイプと組み合わせて使用する必要があります。

例 - テンプレート内で Markdown をレンダリングする場合:

<ng-template #messageContent let-message igxChatMessageContext>
    <div [innerHTML]="message.text | fromMarkdown | async"></div>
</ng-template>

例:

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

構文のハイライト表示

fromMarkdown パイプはコード ブロックのシンタックス ハイライトにも対応しています。メッセージにフェンス付きコード (js...) が含まれている場合、VS Code でも使用されている高精度ハイライター Shiki を使用してレンダリングされます。デフォルトでは JavaScript、TypeScript、HTML、CSS に対して github-light テーマでハイライト表示されます。

例 - メッセージに次の内容が含まれている場合:

Here is a JavaScript example:
\`\`\`ts
function greet(name: string) {
  return `Hello, ${name}!`;
}
\`\`\`

チャット メッセージ内の出力は次のように表示されます。

• 自動的な構文のハイライト
• テーマ対応のスタイル (github-light / github-dark)
• 適切なインデントと等幅フォント
• 追加の設定は不要で、既定のテーマは自動的に読み込まれます。

出力 (イベント)

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

• messageCreated - 新しいメッセージ作成時
• messageReact - メッセージにリアクションした時
• attachmentClick - 添付クリック時
• attachmentAdded - 添付が追加された時
• attachmentRemoved - 添付が削除された時
• attachmentDrag - 添付ドラッグ中
• attachmentDrop - 添付ドロップ時
• typingChange - 入力状態変更時
• inputFocus / inputBlur - 入力フォーカス イベント
• inputChange - 入力値変更時

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

<igx-chat
        [options]="options"
        [messages]="messages"
        (messageCreated)="onMessageCreated($event)">
</igx-chat>

スタイル設定

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

CSS パーツ

例

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 の機能を置き換えることなく、ブランドに合わせたスタイルを適用できます。

スロット

これらのスロットを使用すると、ヘッダーまたは提案領域にカスタム UI を挿入できます。

<igx-chat>
  <span slot="actions">
    <button class="icon">⚙️</button>
  </span>
</igx-chat>

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

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

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

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

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

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

API リファレンス

• IgxChat
• IgxChatOptions
• IgxChatTemplates
• IgxChatMessageContextDirective
• IgxChatInputContextDirective
• IgxChatAttachmentContextDirective
• スタイル設定およびテーマ

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。