咒語:幫我用mui元件寫一個留言板 先有一些假資料 並且輸入時可以用暱稱欄位產生AVstrar頭像 留言的功能區塊改成收合或彈窗功能

import React, { useState } from "react";
import {
  Avatar,
  Box,
  Button,
  Container,
  Divider,
  Typography,
  Accordion,
  AccordionSummary,
  AccordionDetails,
  TextField,
} from "@mui/material";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";

const generateAvatar = (nickname) => {
  // 通过昵称生成头像
  const initials = nickname
    .split(" ")
    .map((word) => word.charAt(0))
    .join("")
    .toUpperCase();
  const backgroundColors = ["#f44336", "#2196F3", "#4CAF50", "#FFC107"];
  const randomColor =
    backgroundColors[Math.floor(Math.random() * backgroundColors.length)];

  return <Avatar sx={{ bgcolor: randomColor }}>{initials}</Avatar>;
};

const generateRandomMessages = () => {
  // 生成假留言数据
  const messages = [
    {
      nickname: "留言1",
      message: "這是一個很棒的留言板示例。",
    },
  ];
  return messages;
};

const MessageBoard = () => {
  const [messages, setMessages] = useState(generateRandomMessages());
  const [newMessage, setNewMessage] = useState("");
  const [nickname, setNickname] = useState("");
  const [isFormOpen, setIsFormOpen] = useState(false);

  const handleAddMessage = () => {
    if (newMessage && nickname) {
      const newMessages = [...messages];
      newMessages.push({ nickname, message: newMessage });
      setMessages(newMessages);
      setNewMessage("");
    }
  };

  return (
    <Container maxWidth="md">
      <Typography variant="h4" align="center" gutterBottom>
        留言板
      </Typography>
      <Accordion
        expanded={isFormOpen}
        onChange={() => setIsFormOpen(!isFormOpen)}
      >
        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
          <Typography>添加留言</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Box width="100%">
            <TextField
              label="暱稱"
              fullWidth
              variant="outlined"
              value={nickname}
              onChange={(e) => setNickname(e.target.value)}
            />
            <TextField
              label="留言"
              fullWidth
              multiline
              rows={4}
              variant="outlined"
              value={newMessage}
              onChange={(e) => setNewMessage(e.target.value)}
            />
            <Button
              variant="contained"
              color="primary"
              onClick={handleAddMessage}
              sx={{ mt: 2 }}
            >
              發送留言
            </Button>
          </Box>
        </AccordionDetails>
      </Accordion>
      <Divider sx={{ my: 2 }} />
      <Box>
        {messages.map((message, index) => (
          <Box key={index} display="flex" alignItems="center" mt={2}>
            {generateAvatar(message.nickname)}
            <Box ml={2}>
              <Typography variant="subtitle1" fontWeight="bold">
                {message.nickname}
              </Typography>
              <Typography variant="body1">{message.message}</Typography>
            </Box>
          </Box>
        ))}
      </Box>
    </Container>
  );
};

export default MessageBoard;

發現他給了一個留言

咒語:請給我一個物件 包含十個比較真實的留言及暱稱

const messages = [
    {
      nickname: "小明",
      message: "這是一個很棒的留言板示例。",
    },
    {
      nickname: "Alice",
      message: "你好！留言板看起來很不错。",
    },
    {
      nickname: "John",
      message: "大家有什麼想討論的嗎？",
    },
    {
      nickname: "Linda",
      message: "我喜歡這個留言板的設計。",
    },
    {
      nickname: "David",
      message: "有沒有人聊聊今天的新聞？",
    },
    {
      nickname: "Emily",
      message: "我有一個問題需要幫助。",
    },
    {
      nickname: "Bob",
      message: "看起來這個留言板很熱鬧。",
    },
    {
      nickname: "Sara",
      message: "大家有推薦的書嗎？",
    },
    {
      nickname: "Mike",
      message: "我在這裡！",
    },
    {
      nickname: "Sophia",
      message: "這個頭像是如何生成的？",
    },
  ];

這樣 比較像樣的留言板就完成了