src/ChatMessage.jsx

import React, { useState } from 'react';

export default function ChatMessage({ message }) {
  const [showThinking, setShowThinking] = useState(false);

  return (
    <div className={`message ${message.role === 'user' ? 'user' : 'bot'}`}>
      {message.role === 'assistant' && message.thinking && (
        <div className="thinking-block">
          <div className="thinking-toggle" onClick={() => setShowThinking(!showThinking)}>
            🧠 {showThinking ? 'إخفاء التفكير' : 'عرض التفكير'}
          </div>
          {showThinking && <p style={{ marginTop: '10px', whiteSpace: 'pre-wrap' }}>{message.thinking}</p>}
        </div>
      )}
      <div style={{ whiteSpace: 'pre-wrap' }}>
        {message.content || '...'}
      </div>
    </div>
  );
}