Customization

Customization UI

Hãy sử dụng các Component được cũng cấp sẵn trong SDK của chúng tôi để có thể tạo ra giao diện ứng dụng theo ý muốn của bạn.

import { useState } from "react";
import {
  PSChatProvider,
  PSThreadList,
  PSConversation,
} 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">
        <PSThreadList
          className="thread-list"
          containerStyle={{ width: 400 }}
          onThreadSelected={handleThreadChange}
          onSearchItemSelected={handleThreadChange}
          onFrequentlyItemSelected={handleThreadChange}
        />
        {threadId ? (
          <PSConversation className="flex-1" threadId={threadId} />
        ) : null}
      </div>
    </PSChatProvider>
  );
};

Router

Các chức năng trong các thành phần của chúng tôi sẽ không can thiệp tới các trạng thái của trình duyệt. Vì vậy, nếu bạn muốn kết hợp với router của trình duyệt, hãy triển khai thêm một thành phần bao ngoài để xử lý việc này.

import { PSChatProvider, PSConversation } from "@communi/chat-react";
import { useParams } from "react-router-dom";

const ConversationWrapper = () => {
  const { thread_id } = useParams();
  return <PSConversation threadId={thread_id} />;
};

export const App = () => {
  const fetchCommuniToken = () => {
    return "YOUR_COMMUNI_TOKEN";
  };

  return (
    <PSChatProvider appId="YOUR_APP_ID" fetchToken={fetchCommuniToken}>
      <ConversationWrapper />
    </PSChatProvider>
  );
};