web_app/frontend/src/components/ChatInput.jsx

import React from 'react';
import { TextField, Button, Box, IconButton, CircularProgress } from '@mui/material';
import PaperPlaneIcon from '@mui/icons-material/Send';
import RefreshIcon from '@mui/icons-material/Refresh';
import { grey } from '@mui/material/colors';

const ChatInput = ({
  inputText,
  handleInputChange,
  handleKeyDown,
  handleFormSubmit,
  loading,
  clearChatHistory,
}) => {
  return (
    <Box
      component="form"
      onSubmit={handleFormSubmit}
      sx={{
        position: 'flex',
        bottom: 0,
        left: 0,
        right: 0,
        backgroundColor: '#1D5B79',
        borderTop: '1px solid #DDD',
        py: 1,
        px: 2,
        display: 'flex',
        justifyContent: 'space-between',
        minHeight: 80,
        borderRadius:'15px'
      }}
    >
      <TextField
        value={inputText}
        onChange={handleInputChange}
        onKeyDown={(e) => handleKeyDown(e, handleFormSubmit)}
        placeholder="Type your message here and press Command+Enter to send"
        multiline
        rows={2}
        rowsmax={2}
        variant="outlined"
        disabled={loading}
        sx={{ flexGrow: 1, maxHeight: '80%', mr: 1, ml: -1, backgroundColor: 'rgba(255, 255, 255, 0.8)',
        borderRadius:'15px'}}
      />

      <Box sx={{ display: 'flex', alignItems: 'center' }}>
        <Button type="submit" color="primary" variant="contained" disabled={loading} sx={{ backgroundColor:'#5499de' , height: '100%', mr: 1, borderRadius:'15px'}}>
          {loading ? <CircularProgress size={24} /> : <PaperPlaneIcon />}
        </Button>
        
        <IconButton
          color="primary"
          onClick={clearChatHistory}
          disabled={loading}
          sx={{
            height: '100%',
            width: 50,
            backgroundColor: grey[300],
            borderRadius:'15px'
          }}
        >
          <RefreshIcon />
        </IconButton>
      </Box>
    </Box>
  );
};

export default ChatInput;