Create src/ChatMessage.jsx

src/ChatMessage.jsx

@@ -0,0 +1,21 @@
+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>
+  );
+}