KHẢ NĂNG TRÒ CHUYỆN REACT
Các tính năng của React Chat SDK
Từ thao tác tin nhắn đến nội dung tùy chỉnh, hãy chọn những tính năng ứng dụng của bạn cần.
- Cuộc trò chuyện trực tiếp và theo nhóm
- Bản xem trước tin nhắn gần đây
- Số cuộc trò chuyện chưa đọc
- Văn bản, hình ảnh, âm thanh và video
- Chia sẻ tệp trong cuộc trò chuyện
- Payload tùy chỉnh cho sản phẩm hoặc đơn hàng
- Sao chép, trích dẫn và chuyển tiếp
- Thao tác thu hồi và xóa
- Nhóm và căn chỉnh theo người gửi
- Trình chọn hình ảnh, video và tệp
- Thao tác nhập có thể cấu hình
- Placeholder và thanh công cụ riêng của bạn
- Chủ đề sáng và tối
- Bản xem trước cuộc trò chuyện tùy chỉnh
- Tiếng Anh, tiếng Trung, tiếng Nhật, tiếng Hàn
- Thông báo đã đọc: bật và cấu hình
- Cloud Search: plugin trả phí
- Thoại và video: thêm TUICallKit
Khám phá React Chat Components
Khám phá giao diện, từ danh sách cuộc trò chuyện đến trình soạn tin nhắn.
Chọn cách tin nhắn hoạt động
Kiểm soát cách căn chỉnh tin nhắn, nhóm các tin nhắn liên tiếp và chọn thao tác có sẵn cho từng tin nhắn.
const actions = useMessageActions([
'copy', 'quote', 'forward',
]);
<MessageList
alignment="two-sided"
messageAggregationTime={300}
messageActionList={actions}
/>Xây dựng trình soạn tin nhắn bạn cần
Chọn bộ chọn hình ảnh, tệp và video. Đặt văn bản giữ chỗ và quyết định có hiển thị nút gửi hay không.
<MessageInput
placeholder="Message your community"
autoFocus={false}
hideSendButton={false}
actions={[
'ImagePicker', 'FilePicker', 'VideoPicker',
]}
/>Đặt các thao tác hữu ích trong tầm tay
Thêm một nút điều khiển cài đặt bên cạnh tiêu đề cuộc trò chuyện. Kết nối nút đó với bảng điều khiển hoặc thanh điều hướng của bạn.
const [showSettings, setShowSettings] = useState(false);
<ChatHeader
ChatHeaderRight={
<button onClick={() => setShowSettings(true)}>
Settings
</button>
}
/>TÙY CHỈNH
Tùy chỉnh UI trò chuyện React
Điều chỉnh kiểu dáng của UI Kit cho phù hợp với tích hợp React Chat SDK và nội dung của riêng bạn.
BẮT ĐẦU
Tích hợp React Chat SDK
- 01
- 02
- 03
npm install @tencentcloud/chat-uikit-react<UIKitProvider theme="light">
<ConversationList />
<Chat>
<ChatHeader />
<MessageList />
<MessageInput />
</Chat>
</UIKitProvider>Câu hỏi thường gặp về React Chat SDK
React Chat SDK khác React UI Kit như thế nào?
Tôi có thể tùy chỉnh các thành phần và bố cục tin nhắn không?
Tôi nên sử dụng UI Kit nào cho React web, web di động hoặc React Native?
Sử dụng React UI Kit cho các ứng dụng chạy trên trình duyệt. Hướng dẫn web di động (H5) sử dụng các thành phần như ConversationListH5 và MessageListH5 trong gói React. Với các ứng dụng iOS và Android native được xây dựng bằng React Native, hãy sử dụng React Native UI Kit riêng cùng hướng dẫn thiết lập native.
Làm cách nào để tích hợp React Chat SDK với Next.js hoặc SSR?
Lập kế hoạch cho giao diện trò chuyện tương tác trên trình duyệt. Trong Next.js App Router, hãy tách mã phụ thuộc vào trình duyệt vào một Client Component; Next.js hỗ trợ tải động chỉ ở phía máy khách với ssr: false. Tạo UserSig trên máy chủ. Kiểm tra phiên bản và các phần phụ thuộc của UI Kit đã cài đặt, đồng thời kiểm thử bản dựng production, quy trình đăng nhập và điều hướng trước khi phát hành.
React UI Kit mã nguồn mở liên quan như thế nào đến dịch vụ Chat được lưu trữ?
Mã nguồn React UI Kit có trên GitHub. Các thành phần nhắn tin có kết nối sử dụng Tencent RTC Chat và yêu cầu một ứng dụng Chat cùng người dùng đã xác thực. Việc cung cấp mã nguồn thành phần không bao gồm dịch vụ nhắn tin lưu trữ không giới hạn: mức sử dụng dịch vụ và quyền truy cập tính năng tuân theo gói Chat của bạn. Bạn có thể chạy bản xem trước UI cục bộ mà không cần kết nối trực tiếp.
Tôi có thể bắt đầu sử dụng React Chat SDK miễn phí không?
React UI Kit có hỗ trợ cuộc gọi thoại và video không?
Cloud Search có nằm trong gói miễn phí không?
Làm thế nào để tích hợp Chat SDK React với React?
Khởi tạo provider theo tài liệu và kết hợp các thành phần đã kết nối. Đồng bộ đăng ký sự kiện và dọn dẹp với vòng đời React, rồi kiểm thử điều hướng và mount lặp lại trong ứng dụng thực tế.
Làm thế nào để kiểm thử Chat SDK React trước khi phát hành ứng dụng?
Kiểm tra đăng nhập, SDK sẵn sàng, sự kiện gửi nhận và trạng thái tin nhắn sau kết nối lại.
Làm thế nào để tùy chỉnh giao diện Chat SDK React?
Bao các thành phần chat trong UIKitProvider và đặt theme="light" hoặc theme="dark". Thành phần con có thể dùng useUIKit().setTheme để chuyển giao diện; hook phải chạy trong ngữ cảnh của provider. Với thẻ sản phẩm, cung cấp trình hiển thị tin nhắn tùy chỉnh qua MessageList.messageRenderers. Giữ phương án hiển thị dự phòng cho payload không nhận diện được, và để ứng dụng xử lý việc tra cứu sản phẩm cùng thanh toán, thay vì xem đó là tính năng của Chat.