diff --git a/src/app/page.tsx b/src/app/page.tsx
index a1f9ba1..790b69f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -23,9 +23,9 @@ export default function Home() {
{/* Header */}
- {/* Main Content - Clean Single Panel */}
-
-
+ {/* Main Content - Full Height Chat Interface */}
+
+
diff --git a/src/components/MissionControl.tsx b/src/components/MissionControl.tsx
index 6b94db8..2361ffd 100644
--- a/src/components/MissionControl.tsx
+++ b/src/components/MissionControl.tsx
@@ -1,172 +1,238 @@
'use client';
-import { useState } from 'react';
+import { useState, useRef, useEffect } from 'react';
import { useLanguage } from './LanguageProvider';
+interface ChatMessage {
+ id: string;
+ type: 'user' | 'ai';
+ content: string;
+ timestamp: Date;
+}
+
export default function MissionControl() {
const { language } = useLanguage();
const [question, setQuestion] = useState('');
const [isThinking, setIsThinking] = useState(false);
- const [response, setResponse] = useState(null);
+ const [chatMessages, setChatMessages] = useState([]);
+ const messagesEndRef = useRef(null);
+ const textareaRef = useRef(null);
- const messages = {
+ const uiTexts = {
en: {
- title: "AI Learning Center",
- subtitle: "Ask About Anything!",
- placeholder: "What would you like to explore today?",
- launch: "🚀 Start Learning",
- thinking: "🤔 Thinking...",
+ title: "AI Learning Chat",
+ subtitle: "Ask me anything!",
+ placeholder: "Type your question here...",
+ send: "Send",
+ thinking: "AI is thinking...",
examples: ["How do plants grow?", "What's gravity?", "Tell me about art!", "Why is the sky blue?"],
- askAnother: "Ask Another Question"
+ clearChat: "Clear Chat",
+ you: "You",
+ ai: "AI Assistant"
},
de: {
- title: "KI-Lernzentrale",
- subtitle: "Frag nach allem!",
- placeholder: "Was möchtest du heute erforschen?",
- launch: "🚀 Lernen starten",
- thinking: "🤔 Denke nach...",
+ title: "KI-Lern-Chat",
+ subtitle: "Frag mich alles!",
+ placeholder: "Stelle hier deine Frage...",
+ send: "Senden",
+ thinking: "KI denkt nach...",
examples: ["Wie wachsen Pflanzen?", "Was ist Schwerkraft?", "Erzähl mir über Kunst!", "Warum ist der Himmel blau?"],
- askAnother: "Neue Frage stellen"
+ clearChat: "Chat löschen",
+ you: "Du",
+ ai: "KI-Assistent"
}
};
- // Simple function to ask AI
- const askAI = async (questionText: string) => {
- if (!questionText.trim()) return;
+ // Auto-scroll to bottom when new messages arrive
+ useEffect(() => {
+ messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+ }, [chatMessages, isThinking]);
+
+ // Focus textarea when component mounts
+ useEffect(() => {
+ textareaRef.current?.focus();
+ }, []);
+
+ const addMessage = (type: 'user' | 'ai', content: string) => {
+ const newMessage: ChatMessage = {
+ id: Date.now().toString(),
+ type,
+ content,
+ timestamp: new Date()
+ };
+ setChatMessages(prev => [...prev, newMessage]);
+ };
+
+ const askAI = async () => {
+ if (!question.trim() || isThinking) return;
+ const userQuestion = question.trim();
+
+ // Add user message to chat
+ addMessage('user', userQuestion);
+
+ // Clear input and show thinking
+ setQuestion('');
setIsThinking(true);
try {
const res = await fetch('/api/chat', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ question: questionText.trim(), language }),
+ body: JSON.stringify({ question: userQuestion, language }),
});
if (res.ok) {
const aiResponse = await res.json();
- setResponse(aiResponse.message || "Great question! Let me help you think about this...");
+ addMessage('ai', aiResponse.message || "Great question! Let me help you think about this...");
} else {
- setResponse(language === 'en' ? "Sorry, I had trouble with that. Try again!" : "Entschuldigung, da gab es ein Problem. Versuch es nochmal!");
+ addMessage('ai', language === 'en' ? "Sorry, I had trouble with that. Try again!" : "Entschuldigung, da gab es ein Problem. Versuch es nochmal!");
}
} catch (err) {
- setResponse(language === 'en' ? "Oops! Something went wrong." : "Ups! Etwas ist schiefgelaufen.");
+ addMessage('ai', language === 'en' ? "Oops! Something went wrong." : "Ups! Etwas ist schiefgelaufen.");
} finally {
setIsThinking(false);
- setQuestion(''); // Clear input after submitting
+ // Focus back to input
+ setTimeout(() => textareaRef.current?.focus(), 100);
}
};
- // ALWAYS show both the input AND response (if exists)
+ const handleKeyPress = (e: React.KeyboardEvent) => {
+ if (e.key === 'Enter' && !e.shiftKey) {
+ e.preventDefault();
+ askAI();
+ }
+ };
+
+ const clearChat = () => {
+ setChatMessages([]);
+ setQuestion('');
+ textareaRef.current?.focus();
+ };
+
return (
-
+
{/* Header */}
-
+
- {(messages as any)[language].title}
+ {(uiTexts as any)[language].title}
-
{(messages as any)[language].subtitle}
+
{(uiTexts as any)[language].subtitle}
+ {chatMessages.length > 0 && (
+
+ )}
-
- {/* ALWAYS SHOW: Input area */}
-
-
-
- {response ?
- (language === 'en' ? '🤔 Ask another question:' : '🤔 Stelle eine weitere Frage:') :
- (language === 'en' ? '🌟 What would you like to know?' : '🌟 Was möchtest du wissen?')
- }
-