DIBUAT UNTUK React

React Chat SDK & UI Kit

Bangun perpesanan pribadi dan grup dengan React Chat SDK dan UI Kit dari Tencent RTC. Tambahkan daftar percakapan, pesan, dan kolom penulisan pesan yang saling terhubung, lalu sesuaikan untuk produk Anda.

Mulai Tutorial React Coba Demo Chat

SUMBER DAYA DEVELOPER

Dokumentasi dan Contoh React Chat SDK

Referensi API

Jelajahi API React Chat SDK serta props dan hooks UI Kit.

ConversationList API MessageList API API Klien JavaScript

Panduan Integrasi

Integrasikan React Chat SDK dan UI Kit ke aplikasi Anda.

Integrasikan React Chat Tambahkan Chat Mandiri

Contoh & Source

Jelajahi kode sumber React Chat SDK dan contoh pesan produk lokal.

Contoh resmi React Contoh Pesan Produk

Chat Komunitas React

Bangunchat komunitas dengan React Chat SDK: pesan langsung, percakapan grup, dan media yang dibagikan.

Coba Demo Chat Lihat kode sumber React

Pesan Produk Kustom

Hubungkan pesan kustom React Chat SDK ke kartu produk di chat dukungan.

Dapatkan contoh React

KEMAMPUAN CHAT REACT

Fitur React Chat SDK

Dari tindakan pesan hingga konten kustom, pilih kemampuan yang dibutuhkan aplikasi Anda.

Chat satu lawan satu dan grup

Percakapan satu lawan satu dan grup
Pratinjau pesan terbaru
Jumlah percakapan belum dibaca

Jenis pesan kaya

Teks, gambar, audio, dan video
Berbagi file dalam percakapan
Payload produk atau pesanan khusus

Kontrol pesan

Salin, kutip, dan teruskan
Tindakan menarik kembali dan menghapus
Pengelompokan dan perataan berdasarkan pengirim

Komposisi fleksibel

Pemilih gambar, video, dan file
Tindakan input yang dapat dikonfigurasi
Placeholder dan toolbar Anda sendiri

Produk Anda, UI Anda

Tema terang dan gelap
Pratinjau percakapan kustom
Bahasa Inggris, Tionghoa, Jepang, Korea

Perluas saat dibutuhkan

Tanda dibaca: aktifkan dan konfigurasikan
Cloud Search: plugin berbayar
Suara dan video: tambahkan TUICallKit

Jelajahi React Chat Components

Jelajahi antarmuka, mulai dari daftar percakapan hingga editor pesan.

Daftar Percakapan

Kotak masuk yang sesuai dengan produk Anda

Tampilkan pesan terbaru dan jumlah pesan yang belum dibaca. Ganti komponen pratinjau untuk mengubah tampilan setiap percakapan.

ConversationList API

<ConversationList
  style={{ width: 300, height: '100%' }}
  enableSearch={false}
/>

MessageList

Pilih cara kerja pesan

Atur perataan pesan, kelompokkan pesan yang berurutan, dan pilih tindakan yang tersedia pada setiap pesan.

MessageList API

const actions = useMessageActions([
  'copy', 'quote', 'forward',
]);

<MessageList
  alignment="two-sided"
  messageAggregationTime={300}
  messageActionList={actions}
/>

MessageInput

Bangun editor pesan yang Anda perlukan

Pilih pemilih gambar, file, dan video. Atur placeholder dan tentukan apakah tombol kirim ditampilkan.

MessageInput API

<MessageInput
  placeholder="Message your community"
  autoFocus={false}
  hideSendButton={false}
  actions={[
    'ImagePicker', 'FilePicker', 'VideoPicker',
  ]}
/>

ChatHeader

Tempatkan tindakan yang berguna agar mudah dijangkau

Tambahkan kontrol pengaturan di samping judul percakapan. Hubungkan kontrol tersebut ke panel atau navigasi Anda sendiri.

Panduan integrasi header

const [showSettings, setShowSettings] = useState(false);

<ChatHeader
  ChatHeaderRight={
    <button onClick={() => setShowSettings(true)}>
      Settings
    </button>
  }
/>

Kontak

Hubungkan orang dengan percakapan

Gabungkan daftar kontak dan detail profil. Kembali ke tampilan percakapan saat pengguna mulai mengirim pesan.

Panduan integrasi kontak

<ContactList />
<ContactInfo
  onSendMessage={() => setActiveTab('conversations')}
  onEnterGroup={() => setActiveTab('conversations')}
/>

ChatSetting

Sediakan ruang untuk pengaturan percakapan

Tempatkan komponen pengaturan di bilah samping atau panel tarik. Aplikasi Anda mengontrol kapan panel dibuka dan ditutup.

Panduan penyiapan integrasi

{showSettings && (
  <aside className="chat-settings">
    <ChatSetting
      onClose={() => setShowSettings(false)}
    />
  </aside>
)}

PENYESUAIAN

Sesuaikan UI Chat React Anda

Sesuaikan gaya UI Kit dengan integrasi React Chat SDK dan konten Anda sendiri.

Tema

Atur tema pada provider. Pertahankan satu alur percakapan saat beralih antara tampilan terang dan gelap.

Panduan integrasi tema

MULAI

Integrasikan React Chat SDK

01
Buat aplikasi Anda
Buat aplikasi Chat untuk integrasi React Chat SDK Anda.
Buka Konsol Chat
02
Tambahkan React UI Kit
Instal paketnya. Sesuaikan komponen dengan kebutuhan Anda.
Ikuti Tutorial React
03
Kirim pesan pertama Anda
Masuk ke dua akun pengguna React Chat SDK dan kirim pesan uji.
Hubungkan Pengguna Anda

React Chat UI Kit

Terminal

npm install @tencentcloud/chat-uikit-react

<UIKitProvider theme="light">
  <ConversationList />
  <Chat>
    <ChatHeader />
    <MessageList />
    <MessageInput />
  </Chat>
</UIKitProvider>

CHAT + CALL

Beberapa percakapan memerlukan panggilan

Hubungkan suara dan video melalui TUICallKit dan header chat React Anda.

Panggilan memerlukan integrasi TUICallKit dan pengaktifan layanan Call. Tinjau harga Call secara terpisah dari Chat.

Lihat integrasi panggilan

FAQ React Chat SDK

Apa perbedaan React Chat SDK dan React UI Kit?

React Chat SDK menyediakan kemampuan perpesanan melalui JavaScript SDK. React UI Kit menambahkan komponen siap pakai untuk antarmuka chat. Gunakan UI Kit untuk memulai dengan komponen yang sudah terhubung, atau bangun antarmuka Anda sendiri di atas SDK yang mendasarinya.

Jelajahi React UI Kit Jelajahi JavaScript SDK

Bisakah saya menyesuaikan komponen dan tata letak pesan?

Ya. Gunakan props dan titik ekstensi yang didokumentasikan untuk mengatur perilaku komponen, menyesuaikan pratinjau percakapan, dan merender pesan kustom. Perubahan yang tersedia bergantung pada komponennya; periksa API komponen sebelum merencanakan penggantian.

Lihat Opsi MessageList Buat Pesan Kustom

UI Kit mana yang harus saya gunakan untuk web React, web seluler, atau React Native?

Gunakan React UI Kit untuk aplikasi browser. Panduan web seluler (H5) menggunakan komponen seperti ConversationListH5 dan MessageListH5 dari paket React. Untuk aplikasi native iOS dan Android yang dibuat dengan React Native, gunakan React Native UI Kit terpisah beserta panduan penyiapan native-nya.

Integrasi web React Panduan web seluler React Jelajahi React Native UI Kit Penyiapan React Native

Bagaimana cara mengintegrasikan React Chat SDK dengan Next.js atau SSR?

Rencanakan tampilan chat interaktif untuk browser. Di Next.js App Router, pisahkan kode yang bergantung pada browser ke dalam Client Component; Next.js mendukung pemuatan dinamis khusus klien dengan ssr: false. Buat UserSig di server Anda. Periksa versi dan dependensi UI Kit yang terinstal, lalu uji build produksi, proses login, dan navigasi sebelum dirilis.

Pemuatan Next.js khusus di sisi klien Persyaratan integrasi React

Bagaimana hubungan React UI Kit sumber terbuka dengan layanan Chat yang dihosting?

Kode sumber React UI Kit tersedia di GitHub. Komponen perpesanan terhubungnya menggunakan Tencent RTC Chat dan memerlukan aplikasi Chat serta pengguna yang telah diautentikasi. Ketersediaan kode sumber komponen tidak mencakup layanan perpesanan terkelola tanpa batas: penggunaan layanan dan akses fitur mengikuti paket Chat Anda. Pratinjau UI lokal dapat dijalankan tanpa koneksi langsung.

Kode sumber React UI Kit Detail paket Chat Perkirakan biaya layanan

Bisakah saya mulai menggunakan React Chat SDK secara gratis?

Tencent RTC Chat menawarkan paket gratis dengan 1,000 pengguna aktif bulanan. Tinjau detail paket dan harga untuk fitur serta penggunaan yang Anda perlukan.

Lihat Free Plan Perkirakan Biaya Anda

Apakah React UI Kit mencakup panggilan suara dan video?

Anda dapat menambahkan panggilan dengan mengintegrasikan TUICallKit dan mengaktifkan layanan Call. Contoh integrasi lengkap React saat ini mencakup ekstensi ini; penyiapan dan harga panggilan tetap terpisah dari perpesanan.

Lihat integrasi panggilan

Apakah Cloud Search termasuk dalam paket gratis?

Cloud Search adalah fitur bernilai tambah yang memerlukan plugin Cloud Search. Tinjau persyaratannya sebelum mengaktifkan pencarian di antarmuka chat Anda.

Baca Panduan Integrasi React

Bagaimana cara mengintegrasikan Chat SDK React dengan React?

Inisialisasi provider sesuai dokumentasi dan susun komponen yang terhubung. Sesuaikan subscription dan cleanup dengan siklus hidup React, lalu uji navigasi serta mounting berulang pada aplikasi nyata.

Bagaimana cara menguji Chat SDK React sebelum merilis aplikasi?

Periksa login, kesiapan SDK, peristiwa kirim dan terima, serta status pesan setelah tersambung kembali.

Bagaimana cara menyesuaikan antarmuka Chat SDK React?

Bungkus komponen chat dalam UIKitProvider dan atur theme="light" atau theme="dark". Komponen anak dapat menggunakan useUIKit().setTheme untuk mengganti tampilan; hook tersebut harus dijalankan dalam konteks provider. Untuk kartu produk, sediakan renderer pesan kustom melalui MessageList.messageRenderers. Siapkan tampilan fallback untuk payload yang tidak dikenali, dan biarkan aplikasi Anda menangani pencarian produk serta checkout tanpa menganggapnya sebagai fitur Chat.

Baca panduan penyesuaian

Temukan dukungan yang tepat untuk langkah berikutnya

Pertanyaan teknis

Tinjau contoh React Chat SDK atau laporkan masalah yang dapat direproduksi.

Lihat GitHub Issues

Pertanyaan tentang produk dan harga

Diskusikan aplikasi, perkiraan penggunaan, dan kebutuhan integrasi Anda dengan tim kami.

Hubungi Tim Penjualan

Percakapan Anda berikutnya dimulai di sini

Bangun dengan React Chat SDK dan UI Kit. Mulai gratis dengan 1.000 pengguna aktif bulanan.

Mulai secara gratis Mulai Tutorial React