Javascript React中dialogbox聊天机器人的自定义UI

我正在尝试使用dialogflow为我的React网站创建聊天室。 它目前正在使用一些默认代码。其中显示了一个模板chatbot用户界面。 我需要添加一个关闭/最小化按钮吗？ 有人能帮忙吗

我当前的聊天机器人代码使用这个iframe

<iframe
       allow="microphone;"
        width="100%"
        height="300vh"
    src="https://console.dialogflow.com/api-client/demo/embedded/<some keycde>"
></iframe>

---

''

只需创建一个布尔值来切换iframe jsx，如下所示

import React, { useState } from "react";
import "./styles.css";
import ParentComp from "./ParentComp";
export default function App() {
  const [bool, handleBool] = useState(true);
  return (
    <div className="App">
      <ParentComp>
        <div>I am div</div>
      </ParentComp>
      {bool && (
        <iframe
          title="I frameva"
          allow="microphone;"
          width="50%"
          height="100vh"
          src="https://console.dialogflow.com/api-client/demo/embedded/<some keycde>"
        />
        // onClick={() => console.log("Toggle bool")}
      )}
    </div>
  );
}

import React，{useState}来自“React”；
导入“/styles.css”；
从“/ParentComp”导入ParentComp；
导出默认函数App（）{
const[bool，handleBool]=使用状态（true）；
返回(
我是迪夫
{bool&&(
//onClick={（）=>console.log（“Toggle bool”）}
)}
);
}