src/components/MessageBubble.jsx

export default function MessageBubble({ role, content }) {
  const isUser = role === "user";
  const bubbleStyle = {
    backgroundColor: isUser ? "#e0f7fa" : "#f1f1f1",
    color: "#333",
    padding: "10px",
    borderRadius: "8px",
    whiteSpace: "pre-wrap",
    marginBottom: "4px",
  };

  const labelStyle = {
    fontWeight: "bold",
    marginBottom: "4px",
  };

  return (
    <div>
      <div style={labelStyle}>{isUser ? "User:" : "Assistant:"}</div>
      <div style={bubbleStyle}>{content}</div>
    </div>
  );
}