Pfeiltasten um History zu navigieren. Bisher noch nicht Fertig

math-tutor/frontend/src/components/Chat/ChatWindow.tsx

@@ -9,6 +9,7 @@ type ChatWindowProps = {
   draft: string;
   onDraftChange: (value: string) => void;
   onSend: () => void;
+  onHistoryNavigate?: (direction: "older" | "newer") => boolean;
   onToggleCanvas?: () => void;
   onInspectDoc?: (doc: RetrievedDoc) => void;
   docIndex?: Record<string, RetrievedDoc>;
@@ -20,6 +21,7 @@ export default function ChatWindow({
   draft,
   onDraftChange,
   onSend,
+  onHistoryNavigate,
   onToggleCanvas,
   onInspectDoc,
   docIndex,
@@ -38,6 +40,7 @@ export default function ChatWindow({
         value={draft}
         onChange={onDraftChange}
         onSend={onSend}
+        onHistoryNavigate={onHistoryNavigate}
         onToggleCanvas={onToggleCanvas}
       />
     </div>

math-tutor/frontend/src/components/Chat/MessageInput.tsx

@@ -5,6 +5,7 @@ type MessageInputProps = {
   value: string;
   onChange: (value: string) => void;
   onSend: () => void;
+  onHistoryNavigate?: (direction: "older" | "newer") => boolean;
   onToggleCanvas?: () => void;
 };
 
@@ -12,6 +13,7 @@ export default function MessageInput({
   value,
   onChange,
   onSend,
+  onHistoryNavigate,
   onToggleCanvas,
 }: MessageInputProps) {
   const canSend = value.trim().length > 0;
@@ -46,6 +48,19 @@ export default function MessageInput({
         value={value}
         onChange={(event) => onChange(event.target.value)}
         onKeyDown={(event) => {
+          const isCursorAtStart =
+            event.currentTarget.selectionStart === 0 && event.currentTarget.selectionEnd === 0;
+
+          if (event.key === "ArrowUp" && isCursorAtStart && onHistoryNavigate?.("older")) {
+            event.preventDefault();
+            return;
+          }
+
+          if (event.key === "ArrowDown" && isCursorAtStart && onHistoryNavigate?.("newer")) {
+            event.preventDefault();
+            return;
+          }
+
           if (event.key === "Enter" && !event.shiftKey) {
             event.preventDefault();
             onSend();

math-tutor/frontend/src/pages/ChatPage.tsx

@@ -134,6 +134,8 @@ export default function ChatPage() {
 
   const [messages, setMessages] = useState<ChatMessage[]>(initialMessages);
   const [draft, setDraft] = useState("");
+  const [draftHistoryIndex, setDraftHistoryIndex] = useState<number | null>(null);
+  const [draftBeforeHistory, setDraftBeforeHistory] = useState<string | null>(null);
   const [isArchiving, setIsArchiving] = useState(false);
   const [archivedChats, setArchivedChats] = useState<ArchivedChatSummary[]>([]);
   const [selectedArchiveId, setSelectedArchiveId] = useState("");
@@ -345,6 +347,58 @@ export default function ChatPage() {
     return { fileId: selectedTaskFile.file_id, taskId: previousTask.task_id };
   }, [selectedTaskFile, selectedTaskRef]);
 
+  const userMessageHistory = useMemo(
+    () => messages.filter((message) => message.role === "user").map((message) => message.text),
+    [messages]
+  );
+
+  const resetDraftHistoryNavigation = () => {
+    setDraftHistoryIndex(null);
+    setDraftBeforeHistory(null);
+  };
+
+  const handleDraftChange = (value: string) => {
+    if (draftHistoryIndex !== null) {
+      resetDraftHistoryNavigation();
+    }
+    setDraft(value);
+  };
+
+  const handleHistoryNavigate = (direction: "older" | "newer") => {
+    if (!userMessageHistory.length) {
+      return false;
+    }
+
+    if (direction === "older") {
+      const nextIndex =
+        draftHistoryIndex === null
+          ? userMessageHistory.length - 1
+          : Math.max(0, draftHistoryIndex - 1);
+
+      if (draftHistoryIndex === null) {
+        setDraftBeforeHistory(draft);
+      }
+      setDraftHistoryIndex(nextIndex);
+      setDraft(userMessageHistory[nextIndex]);
+      return true;
+    }
+
+    if (draftHistoryIndex === null) {
+      return false;
+    }
+
+    const nextIndex = draftHistoryIndex + 1;
+    if (nextIndex >= userMessageHistory.length) {
+      setDraft(draftBeforeHistory ?? "");
+      resetDraftHistoryNavigation();
+      return true;
+    }
+
+    setDraftHistoryIndex(nextIndex);
+    setDraft(userMessageHistory[nextIndex]);
+    return true;
+  };
+
   const handleSend = async () => {
     const trimmed = draft.trim();
     if (!trimmed) {
@@ -359,6 +413,7 @@ export default function ChatPage() {
 
     setMessages((prev) => [...prev, userMessage]);
     setDraft("");
+    resetDraftHistoryNavigation();
 
     setRetrievalLoading(true);
     setRetrievalError(null);
@@ -491,6 +546,7 @@ export default function ChatPage() {
   const resetChatState = () => {
     setMessages(initialMessages);
     setDraft("");
+    resetDraftHistoryNavigation();
     setDirectChildren([]);
     setTaskChildren([]);
     setIndirectChildren([]);
@@ -831,8 +887,9 @@ export default function ChatPage() {
           <ChatWindow
             messages={messages}
             draft={draft}
-            onDraftChange={setDraft}
+            onDraftChange={handleDraftChange}
             onSend={handleSend}
+            onHistoryNavigate={handleHistoryNavigate}
             onToggleCanvas={handleToggleCanvas}
             onInspectDoc={handleInspectDoc}
             docIndex={docIndexes.bySourceKey}