Base Code For this project

<!DOCTYPE html>
<html>
  <head>
    <title>Chatbot</title>
  </head>
  <body>
    <div class="js-container"></div>
    

    <script src="https://unpkg.com/supersimpledev/react.js"></script>
    <script src="https://unpkg.com/supersimpledev/react-dom.js"></script>
    <script src="https://unpkg.com/supersimpledev/babel.js"></script>
 
  <script type="text/babel">
    
       function ChatInput(){
        return (
       /*  <div>
            <input />
            <button>Send</button>
          </div>   */
          
          <> {/* using fragment to remove extra div elements */}
             <input placeholder="Send a message to chatbot" size="30"/>
             <button>Send</button>
          </>

        );
       }

    

      function ChatMessage({message, sender}){
          

      /*    if (sender === 'robot') {
              return (
                <div> {
               
                  <img src="robot.jpeg" width= "50"/>
                  {message}
                  </div>
              )
          } */

          
              return (
              <div> {/* use div element to put the ChatMessage on a new line */}
              {sender === 'robot' && <img src="robot.jpeg" width= "50"/>}
                {message}
              {sender === 'user' && <img src="human.jpeg" width= "50"/>}
                </div>

              )
          
       }  

      function App (){
        return (<>
        <ChatInput />
        <ChatMessage message="hello chatbot message" sender="user"/>
        <ChatMessage message="Hello! How can I help you?" sender="robot"/>
        <ChatMessage message="Can you get me today's date?" sender="user"/>
        <ChatMessage message="Today is September 26" sender="robot"/> 
      </>)  

      } 
      //const app = ( App );
      const container = document.querySelector('.js-container');
      ReactDOM.createRoot(container).render(<App />);
    </script>
  </body>
</html>