Skip to main content

ps-conversation

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 ps-conversation.

ps-conversation 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​

Bạn hãy gán id có giá trị là ps-conversation cho 1 thẻ HTML, sau đó chúng tôi sẽ lấy thẻ HTML đó để tạo ra component ps-conversation. Các thuộc tính của ps-conversation sẽ được truyền vào ps-chat-provider. Bạn có thể thêm các thuộc tính CSS vào thẻ HTML có chứa id là ps-conversation.

<body>
  <ps-chat-provider
    app-id="YOUR_APP_ID"
    fetch-token="fetchToken"
    {...psConversationAttributes}
  >
  </ps-chat-provider>

  <div>
    <div id="ps-conversation"></div>
  </div>

  <script>
    async function fetchToken() {
      return "YOUR_TOKEN";
    }
  </script>
</body>

Attributes​

Thuộc tínhMô tảKiểu dữ liệuBắt buộc
conversation-configCài đặt enable/disable các tính năng Xem chi tiếtobjectKhông
desk-modeHiển thị giao diện dành cho CS TeambooleanKhông
enable-RTFTùy chỉnh có sử dụng rich text editor hay không (Mặc định: true)booleanKhông
on-back-button-clickXử lý sự kiện người dùng nhấn nút trở về trên headerfunctionKhông
on-group-name-clickXử lý sự kiện người dùng click vào tên cuộc hội thoạifunction(threadInfo: object)Không
on-thread-changeXử lý sự kiện chuyển sang một cuộc hội thoại khácfunction(id: string)Không
render-invitation-linkChỉnh sửa link mời tham gia nhóm được hiển thị(invitationKey: string) => stringKhông
render-toolbarChỉnh sửa button trên toolbar Xem ví dụ(defaultButtons: Array) => ArrayKhông
show-back-buttonXác định xem có hiển thị back button. (Mặc định: false)booleanKhông
thread_idId của cuộc hội thoại.stringKhông
render-custom-messageTùy chỉnh render custom messagefunction(data: MessageData) => ReactNodeKhông
render-thread-view-bottomTùy chỉnh thêm một vùng giao diện vào phía dưới conversationfunction() => ReactNodeKhông
on-message-loadedHàm được gọi khi conversation đã tải xong messagefunction() => voidKhông
on-send-messageHàm được gọi lại khi gửi một message bất kỳfunction() => voidKhông
before-send-messageHàm được gọi lại ngay trước khi gửi một message bất kỳfunction() => voidKhông
after-send-messageHàm được gọi lại ngay sau khi gửi một message bất kỳfunction() => voidkhông
domain-link-messageĐường dẫn đến màn hình chat (VD: https://demo-web.piscale.com/chat)stringkhông
target-message-idID của tin nhắn muốn jump đếnstringkhông

Feature configs​

KeysMô tả chức năngKiểuMặc định
FEATURE_KEYS.ADD_GROUP_MEMBERThêm thành viên vào trong nhómbooleantrue
FEATURE_KEYS.BLOCK_MEMBERChặn thành viên vào nhómbooleantrue
FEATURE_KEYS.BLOCK_USERBlock thành viên trong hệ thốngbooleantrue
FEATURE_KEYS.BLOCKED_LISTDanh sách người dùng bị chặn khỏi nhómbooleantrue
FEATURE_KEYS.BOT_COMMANDSDanh sách command với botbooleantrue
FEATURE_KEYS.CHANGE_GROUP_AVATARThay đổi avatar của nhómbooleantrue
FEATURE_KEYS.CHANGE_GROUP_NAMEThay đổi tên của nhómbooleantrue
FEATURE_KEYS.COMMENT_MESSAGEBình luận tin nhắn (sub-thread)booleantrue
FEATURE_KEYS.GRANT_ADMINCấp quyền admin nhómbooleantrue
FEATURE_KEYS.GRANT_OWNERChuyển quyền sở hữu nhómbooleantrue
FEATURE_KEYS.LEAVE_THREADRời khỏi nhómbooleantrue
FEATURE_KEYS.MUTED_GROUP_MEMBERTắt quyền gửi tin nhắn của thành viênbooleantrue
FEATURE_KEYS.MUTED_LISTDanh sách các thành viên bị chặn gửi tin nhắnbooleantrue
FEATURE_KEYS.PIN_MESSAGEGhim tin nhắnbooleantrue
FEATURE_KEYS.PRIVATE_MESSAGEGửi tin nhắn các nhân giữa các userbooleantrue
FEATURE_KEYS.RECALL_MESSAGEThu hồi tin nhắnbooleantrue
FEATURE_KEYS.REMOVE_ADMINXóa quyền admin của thành viênbooleantrue
FEATURE_KEYS.REMOVE_GROUP_MEMBERXóa thành viên khỏi nhómbooleantrue
FEATURE_KEYS.REMOVE_MESSAGE_FOR_YOUXóa tin nhắn với bản thânbooleantrue
FEATURE_KEYS.REMOVE_THREADXóa cuộc hội thoại khỏi danh sáchbooleantrue
FEATURE_KEYS.SEARCH_THREADTìm kiếm các cuộc hội thoạibooleantrue
FEATURE_KEYS.SETUP_INVITATION_LINKCài đặt link mời tham gia nhómbooleantrue
FEATURE_KEYS.SHOW_INVITATION_LINKHiển thị link mời tham gia nhómbooleantrue
FEATURE_KEYS.UN_MUTED_GROUP_MEMBERBật lại quyền gửi tin nhắn của thành viênbooleantrue
FEATURE_KEYS.UNBLOCK_MEMBERBỏ chặn thành viên vào nhómbooleantrue
FEATURE_KEYS.UNPIN_MESSAGEBỏ ghim tin nhắnbooleantrue
<body>
  <ps-chat-provider
    app-id="YOUR_APP_ID"
    fetch-token="fetchToken"
    {...psConversationAttributes}
  >
  </ps-chat-provider>

  <div>
    <div id="ps-conversation"></div>
  </div>

  <script>
    const psChatProvider = document.querySelector("ps-chat-provider");

    document.addEventListener("DOMContentLoaded", function () {
      const conversationConfig = JSON.stringify({
        features: {
          [window.FEATURE_KEYS.ADD_GROUP_MEMBER]: false,
          // Các config khác
        },
      });
      psChatProvider.setAttribute("conversation-config", conversationConfig);
    });
  </script>
</body>

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 data-render-toolbar

<body>
  <ps-chat-provider
    app-id="YOUR_APP_ID"
    fetch-token="fetchToken"
    render-toolbar="handleRenderToolbar"
    {...psConversationAttributes}
  >
  </ps-chat-provider>

  <div>
    <div id="ps-conversation"></div>
  </div>

  <script>
    function 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;
    }
  </script>
</body>

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.

<body>
  <ps-chat-provider
    app-id="YOUR_APP_ID"
    fetch-token="fetchToken"
    render-custom-message="handleRenderCustomMessage"
    {...psConversationAttributes}
  >
  </ps-chat-provider>

  <div>
    <div id="ps-conversation"></div>
  </div>

  <script>
    function handleRenderCustomMessage(messageData) {
      const messageId = messageData.messageId;
      const data = messageData.data;
      return (
        <div>{`Đây là custom message, data: ${JSON.stringify(data)}`}</div>
      );
    }
  </script>
</body>
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