react/chatbot.html at main · Calpas/react · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html>

  <head>
    <title>TutoChatbot</title>
  </head>

  <body>
    <div class="js-container"></div>

    <script src="https://unpkg.com/supersimpledev/dayjs.js"></script>
    <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({chatMessages, setChatMessages}){
        const[inputText, setInputText] = React.useState('');
        function SaveInputText(event){setInputText(event.target.value);}
        function sendMessage(){
          setChatMessages([
            ...chatMessages,
            {
              message:inputText,
              sender:'user',
              id: crypto.randomUUID()
            }
          ]);
        }
        return(
          <>
            <input placeholder='Enter a message' size='30' onChange={SaveInputText}/>
            <button onClick ={sendMessage}> Send</button>
          </>
        );
      }

      function ChatMessage({message, sender}){
        return(
          <div>
            {sender == 'robot' && (<img src='/image/robot.png' width='40'/>)}
            {message}
            {sender == 'user' && (<img src='/image/user.png' width='40'/>)}
          </div>
        );
      }

      function ChatMessages({chatMessages}){
        return(
          <>
            {chatMessages.map((chatMessage)=>{
              return(<ChatMessage
                      message={chatMessage.message}
                      sender={chatMessage.sender}
                      key={chatMessage.id}/>);
            })}
          </>
        );
      }

      function App(){
        const [chatMessages, setChatMessages] = React.useState([{message:'Hello', sender:'user', id:'id1'},
                                      {message:'Hi, ar r u?', sender:'robot', id:'id2'},
                                      {message:'fine & u', sender:'user', id:'id3'},
                                      {message:'Thx', sender:'robot', id:'id4'}]);
        return(
          <>
            <ChatInput
              chatMessages={chatMessages}
              setChatMessages={setChatMessages}
            />
            <ChatMessages
              chatMessages={chatMessages}
            />
          </>
        );
      }


      const container = document.querySelector('.js-container');
      const root = ReactDOM.createRoot(container);
      root.render(<App/>);

    </script>
  </body>
</html>