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

import { Box, useTheme } from "@mui/material";
import Grid from "@mui/material/Unstable_Grid2";
import MessageBubble from "../messageBubble";

export default function ChunkInteface({ chunkTest }) {
  const theme = useTheme();
  return (
    <>
      <Box
        display="flex"
        flexDirection="column"
        flexGrow={1}
        padding={2}
        style={{
          border: "2px solid black",
          overflow: "hidden",
          overflowY: "scroll",
          borderRadius: "8px",
          border: "1px solid #ccc",
          backgroundColor: theme.palette.background.default,
          height: "50%",
        }}
      >
        {chunkTest ? (
          <MessageBubble text={chunkTest.text} isSender={false} />
        ) : null}
      </Box>
    </>
  );
}