PSDeskThreadList

Hiển thị danh sách đầy đủ các cuộc hội thoại mà người dùng hiện tại là thành viên bằng cách sử dụng component PSDeskThreadList. Sau khi ứng dụng khách được kết nối với máy chủ Communi, bạn có thể hiển thị danh sách cuộc hội thoại.

Cách sử dụng

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

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

  const handleThreadChange = (threadId) => {
    setThreadId(threadId);
    // Điều khiển thread thay đổi, ví dụ navigate đến màn hình conversation...
  };

  const config = {
    features: {
      [FEATURE_KEYS.TAG]: false, // Tắt hiển thị tag
      [FEATURE_KEYS.CS_GROUP]: true, // Hiển thị các cuộc hội thoại cho CS team (tab inbox chung)
    },
  };

  return (
    <PSDeskThreadList
      className="ps-threadList"
      style={{ width: 600 }}
      threadId={threadId}
      config={config}
      onThreadSelected={handleThreadChange}
      onSearchItemSelected={handleThreadChange}
      onFrequentlyItemSelected={handleThreadChange}
    />
  );
};

Props API

Thuộc tính	Mô tả	Kiểu	Bắt buộc
className	Tùy chỉnh class CSS	string	Không
style	Tùy chỉnh style CSS	object	Không
threadId	Id của cuộc hội thoại hiện tại	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 PSDeskThreadList 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
isSearchOnlyJoinedThreads	Chỉ cho phép tìm kiếm các cuộc hội thoại đã tham gia. Mặc định: false	boolean	Không
onThreadSelected	Hàm gọi lại khi một cuộc hội thoại được chọn để thực hiện các thao tác tuỳ chỉnh	function(id: string)	Có
onSearchItemSelected	Hàm gọi lại khi một cuộc hội thoại trong tìm kiếm được chọn.	function(id: string)	Có
onFrequentlyItemSelected	Hàm gọi lại khi một cuộc hội thoại gần đây được chọn.	function(id: string)	Có
setToggleDeskFilter	Hàm xử lý ẩn/hiện DeskFilter component	function(value: boolean)	Không

Feature configs

Key	Mô tả chức năng	Kiểu	Mặc định
FEATURE_KEYS.TAG	Hiển thị tag của cuộc hội thoại	boolean	true
FEATURE_KEYS.PERSONAL_THREAD	Hiển thị tab Tin nhắn	boolean	true
FEATURE_KEYS.UNREAD_THREAD	Hiển thị tab Chưa đọc	boolean	true
FEATURE_KEYS.PUBLIC_CHAT_LIST	Hiển thị tab Public	boolean	true
FEATURE_KEYS.CS_GROUP	Hiển thị tab Inbox chung	boolean	false
FEATURE_KEYS.LEAVE_THREAD	Rời khỏi nhóm	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.CREATE_GROUP	Tạo nhóm chat	boolean	true
FEATURE_KEYS.CREATE_THREAD	Tạo cuộc hội thoại mới	boolean	true