PSConversation

Cuộc hội thoại là một chức năng quan trọng trong UI SDK cho phép người dùng trả lời tin nhắn của nhau trong một kênh. Để hiển thị đầy đủ một cuộc hội thoại, hãy sử dụng component PSConversation.

PSConversation chứa nhiều các tính năng cho một cuộc hội thoại, gửi tin nhắn, gửi tệp, trả lời, ghim, thư viện...

Cách sử dụng

import { PSConversation } from "@communi/chat-react";
import { useState } from "react";

export const Component = () => {
  const [threadId, setThreadId] = useState(null);

  if(!threadId) return <EmptyConversation>
  return (
    <PSConversation
      className="ps-conversation"
      style={{ width: 600, height: '100%' }}
      threadId="YOUR_THREAD_ID"
      threadId={threadId}
      onThreadChange={setThreadId}
      config={{
            features: {
              [FEATURE_KEYS.TAG]: false, // Tắt hiển thị tag
            },
          }}
    />
  );
};

Props API

Thuộc tính	Mô tả	Kiểu dữ liệu	Bắt buộc
className	Tùy chỉnh class CSS	string	Không
config	Cài đặt enable/disable các tính năng Xem chi tiết	object	Không
conversationId	Tham số để xác định PSConversation hiện tại đang được liên kết với PSThreadList hay PSDeskInfo nào trong trường hợp vẽ nhiều PSConversation trên cùng một màn hình, các component được liên kết phải có cùng conversationId	string	Không
deskMode	Hiển thị giao diện dành cho CS Team	boolean	Không
enableRTF	Tùy chỉnh có sử dụng rich text editor hay không (Mặc định: true)	boolean	Không
onBackButtonClick	Xử lý sự kiện người dùng nhấn nút trở về trên header	function	Không
onGroupNameClick	Xử lý sự kiện người dùng click vào tên cuộc hội thoại	function(threadInfo: object)	Không
onThreadChange	Xử lý sự kiện chuyển sang một cuộc hội thoại khác	function(id: string)	Không
renderInvitationLink	Chỉnh sửa link mời tham gia nhóm được hiển thị	(invitationKey: string) => string	Không
renderToolbar	Chỉnh sửa button trên toolbar Xem ví dụ	(defaultButtons: Array) => Array	Không
showBackButton	Xác định xem có hiển thị back button. (Mặc định: false)	boolean	Không
style	Tùy chỉnh style CSS	object	Không
threadId	Id của cuộc hội thoại.	string	Không
userId	Id của đối tác trong cuộc hội thoại cá nhân	string	Không
renderCustomMessage	Tùy chỉnh render custom message	function(data: MessageData) => ReactNode	Không
renderThreadViewBottom	Tùy chỉnh thêm một vùng giao diện vào phía dưới conversation	function() => ReactNode	Không
onMessagesLoaded	Hàm được gọi khi conversation đã tải xong message	function() => void	Không
onSendMessage	Hàm được gọi lại khi gửi một message bất kỳ	function() => void	Không
onBeforeSendMessage	Hàm được gọi lại ngay trước khi gửi một message bất kỳ	function() => void	Không
onAfterSendMessage	Hàm được gọi lại ngay sau khi gửi một message bất kỳ	function() => void	không
domainLinkMessage	Đường dẫn đến màn hình chat (VD: https://demo-web.piscale.com/chat)	string	không
targetMessageId	ID của tin nhắn muốn jump đến	string	không

Feature configs

Keys	Mô tả chức năng	Kiểu	Mặc định
FEATURE_KEYS.ADD_GROUP_MEMBER	Thêm thành viên vào trong nhóm	boolean	true
FEATURE_KEYS.BLOCK_MEMBER	Chặn thành viên vào nhóm	boolean	true
FEATURE_KEYS.BLOCK_USER	Block thành viên trong hệ thống	boolean	true
FEATURE_KEYS.BLOCKED_LIST	Danh sách người dùng bị chặn khỏi nhóm	boolean	true
FEATURE_KEYS.BOT_COMMANDS	Danh sách command với bot	boolean	true
FEATURE_KEYS.CHANGE_GROUP_AVATAR	Thay đổi avatar của nhóm	boolean	true
FEATURE_KEYS.CHANGE_GROUP_NAME	Thay đổi tên của nhóm	boolean	true
FEATURE_KEYS.COMMENT_MESSAGE	Bình luận tin nhắn (sub-thread)	boolean	true
FEATURE_KEYS.GRANT_ADMIN	Cấp quyền admin nhóm	boolean	true
FEATURE_KEYS.GRANT_OWNER	Chuyển quyền sở hữu nhóm	boolean	true
FEATURE_KEYS.LEAVE_THREAD	Rời khỏi nhóm	boolean	true
FEATURE_KEYS.MUTED_GROUP_MEMBER	Tắt quyền gửi tin nhắn của thành viên	boolean	true
FEATURE_KEYS.MUTED_LIST	Danh sách các thành viên bị chặn gửi tin nhắn	boolean	true
FEATURE_KEYS.PIN_MESSAGE	Ghim tin nhắn	boolean	true
FEATURE_KEYS.PRIVATE_MESSAGE	Gửi tin nhắn các nhân giữa các user	boolean	true
FEATURE_KEYS.RECALL_MESSAGE	Thu hồi tin nhắn	boolean	true
FEATURE_KEYS.REMOVE_ADMIN	Xóa quyền admin của thành viên	boolean	true
FEATURE_KEYS.REMOVE_GROUP_MEMBER	Xóa thành viên khỏi nhóm	boolean	true
FEATURE_KEYS.REMOVE_MESSAGE_FOR_YOU	Xóa tin nhắn với bản thân	boolean	true
FEATURE_KEYS.REMOVE_THREAD	Xóa cuộc hội thoại khỏi danh sách	boolean	true
FEATURE_KEYS.SEARCH_THREAD	Tìm kiếm các cuộc hội thoại	boolean	true
FEATURE_KEYS.SETUP_INVITATION_LINK	Cài đặt link mời tham gia nhóm	boolean	true
FEATURE_KEYS.SHOW_INVITATION_LINK	Hiển thị link mời tham gia nhóm	boolean	true
FEATURE_KEYS.UN_MUTED_GROUP_MEMBER	Bật lại quyền gửi tin nhắn của thành viên	boolean	true
FEATURE_KEYS.UNBLOCK_MEMBER	Bỏ chặn thành viên vào nhóm	boolean	true
FEATURE_KEYS.UNPIN_MESSAGE	Bỏ ghim tin nhắn	boolean	true

Customization

1. Tùy chỉnh Toolbar

Chúng tôi cho phép người dùng có thể thay đổi các button trên thanh toolbar bằng thuộc tính renderToolbar

import { PSConversation } from "@communi/chat-react";

const handleRenderToolbar = (defaultButtons) => {
  // Modify the defaultButtons array, then return the newButtons array
  const newButtons = [
    ...defaultButtons,
    {
      id: "foo",
      icon: <div>foo</div>,
      tooltip: "foo",
      onClick: handleClickFooButton,
    },
    {
      id: "bar",
      icon: <div>bar</div>,
      tooltip: "bar",
      onClick: handleClickBarButton,
    },
  ];
  return newButtons;
};

export const Component = () => {
  return (
    <PSConversation
      className="flex-1"
      threadId="YOUR_THREAD_ID"
      renderToolbar={handleRenderToolbar}
      onThreadChange={handleThreadChange}
    />
  );
};

2. Custom message

Để tăng tính linh hoạt phục vụ cho nhiều nghiệp vụ của khách hàng, chúng tôi cho phép hiển thị UI phụ thuộc hoàn toàn vào dữ liệu tùy chỉnh của các bạn.

import { PSConversation } from "@communi/chat-react";
import { useState,useCallback } from "react";

export const Component = () => {
  const [threadId, setThreadId] = useState(null);

  const renderCustomMessage = useCallback((messageData)=> {
    const messageId = messageData.messageId
    const data = messageData.data
    return <div>{`Đây là custom message, data: ${JSON.stringify(data)}`}</div>
  },[]);

  if(!threadId) return <EmptyConversation>;

  return (
    <PSConversation
      className="ps-conversation"
      style={{ width: 600, height: '100%' }}
      threadId="YOUR_THREAD_ID"
      threadId={threadId}
      onThreadChange={setThreadId}
      renderCustomMessage={renderCustomMessage}
      config={{
            features: {
              [FEATURE_KEYS.TAG]: false, // Tắt hiển thị tag
            },
          }}
    />
  );
};

Ghi chú

Một customMessage sẽ có thể ở một trong 2 dạng:

• tempMessage chỉ tồn tại trên thiết bị của người dùng có messageId ở dạng chuỗi string ngẫu nhiên.
• Tin nhắn thực tế đã được gửi với tất cả người dùng trong cuộc hội thoại, có messageId ở dạng number

Để tạo một customMessage, hãy sử dụng createCustomMessage hoặc appendTempMessage, Xem chi tiết