Create ChatInterface.tsx

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

@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+import { Card, CardContent } from '@/components/ui/card';
+import TutorAvatar from './TutorAvatar';
+import MessageBubble from './MessageBubble';
+
+const ChatInterface = () => {
+  const [messages, setMessages] = useState([]);
+  const [input, setInput] = useState('');
+  const [tutorState, setTutorState] = useState('neutral');
+
+  const handleSendMessage = async () => {
+    if (!input.trim()) return;
+
+    const newMessage = {
+      role: 'user',
+      content: input,
+      timestamp: new Date().toISOString()
+    };
+
+    setMessages(prev => [...prev, newMessage]);
+    setInput('');
+    setTutorState('thinking');
+
+    try {
+      const response = await fetch('/api/chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ message: input })
+      });
+
+      const data = await response.json();
+      
+      setMessages(prev => [...prev, {
+        role: 'assistant',
+        content: data.response,
+        timestamp: new Date().toISOString()
+      }]);
+      
+      setTutorState('happy');
+    } catch (error) {
+      console.error('Chat error:', error);
+      setTutorState('neutral');
+    }
+  };
+
+  return (
+    <Card className="h-[600px] flex flex-col">
+      <CardContent className="flex-1 flex flex-col p-4">
+        <TutorAvatar state={tutorState} />
+        
+        <div className="flex-1 overflow-y-auto mb-4 space-y-4">
+          {messages.map((msg, idx) => (
+            <MessageBubble key={idx} {...msg} />
+          ))}
+        </div>
+
+        <div className="flex gap-2 mt-auto">
+          <input
+            type="text"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
+            placeholder="Ask your question..."
+            className="flex-1 p-2 border rounded"
+          />
+          <button
+            onClick={handleSendMessage}
+            className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
+          >
+            Send
+          </button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default ChatInterface;