Desk

Đoạn mã dưới đây ví dụ về cách sử dụng các component Desk trong SDK

import { useState } from "react";
import {
  PSChatProvider,
  PSThreadList,
  PSConversation,
  PSDeskFilter,
  PSDeskInfo,
} from "@communi/chat-react";
import axios from "axios";

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

  // Demo
  const fetchCommuniToken = async () => {
    try {
      const response = await axios.get("YOUR_FETCH_TOKEN_ENDPOINT");
      const { token } = response.data;
      return token;
    } catch (e) {
      console.warn(e);
    }
  };

  const handleThreadChange = (id) => setThreadId(id);

  return (
    <PSChatProvider appId="YOUR_APP_ID" fetchToken={fetchCommuniToken}>
      <div className="width-full flex">
        <PSDeskFilter style={{ width: 280 }} />
        <PSThreadList
          className="thread-list"
          style={{ width: 400 }}
          threadId={threadId}
          onThreadSelected={handleThreadChange}
          onSearchItemSelected={handleThreadChange}
          onFrequentlyItemSelected={handleThreadChange}
        />
        {threadId ? (
          <>
            <PSConversation
              className="flex-1"
              threadId={threadId}
              onThreadChange={handleThreadChange}
            />
            <PSDeskInfo threadId={threadId} style={{ width: 400 }} />
          </>
        ) : null}
      </div>
    </PSChatProvider>
  );
};