React AI 组件设计：构建可复用的 AI 界面

function MessageBubble({ role, content }) {
  const isUser = role === 'user';
  return (
    <div className={isUser ? 'user-msg' : 'ai-msg'}>
      {content}
    </div>
  );
}

function StreamingText({ text }) {
  const [displayed, setDisplayed] = useState('');
  // 逐字渲染逻辑
  return <span>{displayed}</span>;
}