Copilot: HTML Tile

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Minimal React Widget</title>
    <!-- External React libraries -->
    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>

    <script type="text/babel">
      const { useState } = React;

      // this event listener processes incoming data updates
      window.addEventListener("message", function (event) {
        console.log("Content of message: " + event.data);
      });

      function ReactWidget() {
        const [name, setName] = useState('');
        const [message, setMessage] = useState('');

        const handleData = () => {
          if (name) {
            setMessage('Your name is ' + name);
          } else {
            setMessage('Please enter your name.');
          }
        };

        return (
          <div>
            <input
              type="text"
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="Name"
            />
            <button onClick={handleData}>Submit</button>
            <p>{message}</p>
          </div>
        );
      }

      ReactDOM.render(<ReactWidget />, document.getElementById('root'));
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Minimal React Widget</title>
<!-- External React libraries -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
        const { useState } = React;

        // This event listener processes incoming data updates
        window.addEventListener("message", function (event) {
            console.log("Content of message: " + event.data);
        });

        function ReactWidget() {
            const [name, setName] = useState('');
            const [message, setMessage] = useState('');

            const handleData = () => {
                if (name) {
                    setMessage('Your name is ' + name);
                    SDK.postback(name);
                } else {
                    setMessage('Please enter your name.');
                }
            };

            return (
                <div>
                    <input
                        type="text"
                        value={name}
                        onChange={(e) => setName(e.target.value)}
                        placeholder="Name"
                    />
                    <button onClick={handleData}>Submit</button>
                    <p>{message}</p>
                </div>
            );
        }

        ReactDOM.render(<ReactWidget />, document.getElementById('root'));
    </script>
<button type="button" onclick="SDK.postback('yes');">yes</button>
</body>
</html>

<p id="status"></p>
<input type="text" id="text" placeholder="Enter your text..." />
<button type="button" onclick="SDK.postback({ name: document.getElementById('text').value });">Submit</button>
<button type="button" onclick="handleEndSession();">End session</button>

<script>
    // Displays the data that the Agent Copilot Flow sends back
    window.addEventListener("message", (event) => {
        if (event.data && event.data.name) {
            document.getElementById("status").textContent = event.data.name;
        }
    });

    function handleEndSession() {
        SDK.endSession()
            .then(() => {
                document.getElementById("status").textContent = "End session request accepted";
            })
            .catch(() => {
                document.getElementById("status").textContent = "End session request rejected";
            });
    }
</script>