上面的代码帮我封装成一个组件

好的，下面是一个简单的组件代码，你可以根据需要进行修改和扩展：

import React, { useState } from "react";
import ChitGPT from "./ChitGPT"; // 引入 ChitGPT 组件

const Chatbot = () => {
  const [chatHistory, setChatHistory] = useState([]); // 用于保存对话记录
  const [inputText, setInputText] = useState(""); // 用于保存用户输入的文本

  // 处理用户输入的文本
  const handleInputChange = (e) => {
    setInputText(e.target.value);
  };

  // 处理用户提交的文本
  const handleSubmit = (e) => {
    e.preventDefault();
    if (inputText.trim() !== "") {
      setChatHistory([...chatHistory, { speaker: "user", text: inputText }]);
      ChitGPT.getReply(inputText).then((reply) => {
        setChatHistory([...chatHistory, { speaker: "bot", text: reply }]);
      });
      setInputText("");
    }
  };

  return (
    <div>
      <h1>ChitGPT Chatbot</h1>
      <div style={{ height: "400px", overflowY: "scroll" }}>
        {chatHistory.map((item, index) => (
          <div key={index} className={`chat-item ${item.speaker}`}>
            <span>{item.text}</span>
          </div>
        ))}
      </div>
      <form onSubmit={handleSubmit}>
        <input type="text" value={inputText} onChange={handleInputChange} />
        <button type="submit">发送</button>
      </form>
    </div>
  );
};

export default Chatbot;

在上面的代码中，我们使用了`useState`来定义了两个状态：`chatHistory`和`inputText`。`chatHistory`用于保存对话记录，`inputText`用于保存用户输入的文本。

我们在`handleInputChange`函数中处理用户输入的文本，然后在`handleSubmit`函数中处理用户提交的文本。在`handleSubmit`函数中，我们首先将用户输入的文本添加到`chatHistory`数组中，然后调用`ChitGPT.getReply`方法获取机器人的回复，最后将回复添加到`chatHistory`数组中。

最后，我们将`chatHistory`数组中的对话记录渲染在页面上，同时提供了一个表单用于用户输入文本。