logos-messaging-js/web-chat/src/MessageInput.tsx

import React, { ChangeEvent, KeyboardEvent, useState } from 'react';
import { Button, Grid, TextField } from '@material-ui/core';

interface Props {
  messageHandler: (msg: string) => void;
  sendMessage: () => void;
}

export default function MessageInput(props: Props) {
  const [inputText, setInputText] = useState<string>('');

  const sendMessage = () => {
    props.sendMessage();
    setInputText('');
  };

  const messageHandler = (event: ChangeEvent<HTMLInputElement>) => {
    setInputText(event.target.value);
    props.messageHandler(event.target.value);
  };

  const keyPressHandler = (event: KeyboardEvent<HTMLInputElement>) => {
    if (event.key === 'Enter') {
      sendMessage();
    }
  };

  return (
    <Grid container spacing={2} direction='row' alignItems='center'>
      <Grid item xs={11}>
        <TextField variant='outlined'
                   label='Send a message'
                   value={inputText}
                   fullWidth
                   style={{ margin: 8 }}
                   margin='normal'
                   InputLabelProps={{
                     shrink: true
                   }}
                   onChange={messageHandler}
                   onKeyPress={keyPressHandler}
        />
      </Grid>
      <Grid item xs={1}>
        <Button variant='contained' color='primary' size='large'
                onClick={sendMessage}>
          Send
        </Button>
      </Grid>
    </Grid>
  );
}