App/my-app/src/Components/messageBubble/index.jsx

import { Typography, useTheme } from "@mui/material";
import Grid from "@mui/material/Unstable_Grid2";

export default function MessageBubble({ text, isSender }) {
  const theme = useTheme();
  
  
  return (
    <>
      <Grid
        item
        xs={12}
        container
        justifyContent={isSender ? "flex-end" : "flex-start"}
        sx={{ flexGrow: 0 }}
        mb={1}
      >
        <Grid
          item
          sx={{
            backgroundColor: isSender ? "#d1e7dd" : "#f5f5f5",
            padding: "8px 12px",
            borderRadius: "20px",
            maxWidth: "80%",
            border: "1px solid #ccc",
          }}
        >
          <Typography variant="h5">{text}</Typography>
        </Grid>
      </Grid>
    </>
  );
}