Пользовательский интерфейс для диалогового окна чата в React

Question

Я пытаюсь создать окно чата для диалогового потока моего веб-сайта React. В настоящее время используется некоторый код по умолчанию. который показывает шаблон интерфейса пользователя чата. Мне нужно добавить кнопку закрытия / минимизации? Кто-нибудь может помочь?

Мой текущий код для чат-бота использует этот iframe

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

'' '

Answer 1

просто создайте логическое значение для переключения 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>
  );
}