import HistoryIcon from '@mui/icons-material/History';
import {
  IconButton,
  Menu,
  MenuItem,
  Stack,
  Theme,
  Typography,
  useMediaQuery
} from '@mui/material';


...

export default function InputHistoryButton({ onClick }: Props) {

...

  const handleHistoryButtonClick = (
      event: React.MouseEvent<HTMLButtonElement>
    ) => {
      setAnchorEl(event.currentTarget);
      toggleChatHistoryMenu(true);
    };
  
    const size = useMediaQuery<Theme>((theme) => theme.breakpoints.down('sm'))
      ? 'small'
      : 'medium';
  
    return (
      <div ref={ref}>
        <IconButton
          color="inherit"
          size={size}
          onClick={handleHistoryButtonClick}
        >
          <HistoryIcon />
        </IconButton>
        {menu}
      </div>
    );
}