React Chat SDK & UI Kit

React Chat SDK は JavaScript SDK を通じてメッセージング機能を提供します。React UI Kit には、チャットインターフェース向けの既製コンポーネントが用意されています。UI Kit で接続済みコンポーネントから始めることも、基盤となる SDK を使って独自のインターフェースを構築することもできます。

はい。ドキュメントに記載された props と拡張ポイントを使用して、コンポーネントの動作設定、会話プレビューの調整、カスタムメッセージのレンダリングが可能です。変更できる内容はコンポーネントによって異なるため、置き換えを計画する前に API を確認してください。

ブラウザアプリケーションには React UI Kit を使用してください。モバイル Web（H5）ガイドでは、React パッケージの ConversationListH5 や MessageListH5 などのコンポーネントを使用します。React Native で構築するネイティブ iOS および Android アプリケーションには、別途提供される React Native UI Kit とそのネイティブ設定ガイドを使用してください。

ブラウザ向けのインタラクティブなチャット画面を設計します。Next.js App Router では、ブラウザに依存するコードを Client Component に分離してください。Next.js は ssr: false によるクライアント専用の動的読み込みをサポートしています。UserSig はサーバーで生成します。インストール済みの UI Kit のバージョンと依存関係を確認し、リリース前に本番ビルド、ログイン、ナビゲーションをテストしてください。

React UI Kit のソースコードは GitHub で公開されています。接続型メッセージングコンポーネントは Tencent RTC Chat を使用するため、Chat アプリケーションと認証済みユーザーが必要です。コンポーネントのソースコードが利用できても、ホスト型メッセージングを無制限に利用できるわけではありません。サービス利用量と機能へのアクセスは Chat プランに従います。ローカル UI プレビューはライブ接続なしでも実行できます。

Tencent RTC Chatには、月間アクティブユーザー1,000人まで利用できる無料プランがあります。必要な機能と使用量に応じて、プランの詳細と料金をご確認ください。

TUICallKit を統合して Call サービスを有効にすると、通話機能を追加できます。現在の完全な React 統合サンプルにはこの拡張機能が含まれていますが、通話の設定と料金はメッセージングとは別です。

Cloud Search は、Cloud Search プラグインを必要とする付加価値機能です。チャットインターフェースで検索を有効にする前に、要件を確認してください。

ドキュメントに記載された provider を初期化し、接続済みコンポーネントを組み合わせます。購読とクリーンアップを React のライフサイクルに合わせ、実際のアプリでナビゲーションと繰り返しマウントをテストします。

ログイン、SDK の準備完了、送受信イベント、再接続後のメッセージ状態を確認します。

チャットコンポーネントを UIKitProvider で囲み、theme="light" または theme="dark" を設定します。子コンポーネントは useUIKit().setTheme で表示を切り替えられますが、この hook は provider のコンテキスト内で呼び出す必要があります。商品カードには、MessageList.messageRenderers からカスタムメッセージレンダラーを渡します。認識できないペイロードにはフォールバック表示を用意してください。商品検索と購入手続きは Chat の機能として扱わず、アプリケーション側で実装します。