I want to develop a chat system with ProChat without streaming and socket just by running API continuously. I get many error about buffers and not getting “ok” message when I send message. Also I have problem in styling it. I appreciate any kind of guidance. TNX

import { Button, ConfigProvider, Input } from "antd";
import { useState } from "react";
import { postApi } from "./hooks/api";
import { ProChat } from "@ant-design/pro-chat";

const Chat = ({ requireUsername, chat_background, messageApi }) => {
  const [username, setUsername] = useState("");
  const [showChat, setShowChat] = useState(false);
  const [loading, setLoading] = useState(false);
  const [messageLoading, setMessageLoading] = useState(false);

  const handleStartChat = () => {
    if (requireUsername && username.trim() === "") {
      messageApi.open({
        type: "warning",
        content: "نام کاربری خود را وارد کنید!",
        style: {
          fontFamily: "VazirFD",
          direction: "rtl",
        },
      });
      return;
    }
    setLoading(true);
    postApi(
      `api/Chat/start-chat?configUsername=${localStorage.getItem(
        "configUsername"
      )}&configPassword=${localStorage.getItem(
        "configPassword"
      )}&username=${username}`
    )
      .then((data) => {
        localStorage.setItem("chatId", data);
        setShowChat(true);
        setLoading(false);
        postApi(
          `api/Chat/email-new-chat?customerId=${localStorage.getItem(
            "customerId"
          )}`
        );
      })
      .catch((err) => {
        setLoading(false);
        console.log(err);
        messageApi.open({
          type: "error",
          content: "خطایی رخ داد!",
          style: {
            fontFamily: "VazirFD",
            direction: "rtl",
          },
        });
      });
  };

  const handleSendMessage = (messages) => {
    const m = messages[messages.length - 1];
    if (m) {
      return postApi(
        `api/Chat/send-user-message?chatId=${localStorage.getItem(
          "chatId"
        )}&message=${m.content}`
      ).catch((err) => {
        setLoading(false);
        console.log(err);
        messageApi.open({
          type: "error",
          content: "خطایی رخ داد!",
          style: {
            fontFamily: "VazirFD",
            direction: "rtl",
          },
        });
      });
    }
  };

  return showChat ? (
    <ProChat
      loading={messageLoading}
      placeholder=""
      helloMessage="بفرمایید!"
      displayMode="chat"
      className="w-full h-screen font"
      request={async (messages) => {
        setTimeout(() => {
          return "ok";
        }, 2000);
      }}
      // request={handleSendMessage}
    />
  ) : (
    <div className="w-full flex justify-center flex-col">
      <Input
        className="ml-4 my-2"
        placeholder="نام کاربری"
        style={{
          direction: "ltr",
        }}
        required={requireUsername}
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <Button
        type="primary"
        htmlType="submit"
        loading={loading}
        className="mx-16 my-4 bg-green-500"
        onClick={handleStartChat}
      >
        شروع چت
      </Button>
    </div>
  );
};

export default Chat;

I wanted to send message and call getLastMessageAPI until I get a new message from other side. then add it messages. introduce me any alternative way or library for chat. tnx