Create MessageBubble.tsx

frontend/src/components/ai-tutor/MessageBubble.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const MessageBubble = ({ content, role, timestamp }) => (
+  <div className={`flex ${role === 'user' ? 'justify-end' : 'justify-start'} mb-4`}>
+    <div className={`max-w-[80%] rounded-lg p-4 ${
+      role === 'user' 
+        ? 'bg-blue-500 text-white' 
+        : 'bg-gray-100 text-gray-900'
+    }`}>
+      <div className="text-sm">{content}</div>
+      <div className="text-xs mt-1 opacity-70">
+        {new Date(timestamp).toLocaleTimeString()}
+      </div>
+    </div>
+  </div>
+);
+
+export default MessageBubble;