formatierung überarbeitet

math-tutor/backend/app/services/chat_engine.py

@@ -11,7 +11,10 @@ from app.services import vector_store
 
 SYSTEM_PROMPT = """Du bist ein Mathe-Tutor. Antworte auf Deutsch, klar und korrekt.
 Nutze ausschließlich den bereitgestellten Kontext. Wenn nichts zur Frage im Kontext steht, antworte mit "Dazu steht nichts im Material" und nichts weiter.
-Gib wenn möglich eine kurze Struktur: (1) Idee, (2) Definition, (3) kurzer Begründungs-/Rechenweg, (4) Mini-Beispiel.
+Gib wenn möglich eine kurze Struktur: (1) Idee, 
+(2) Definition, 
+(3) kurzer Begründungs-/Rechenweg, 
+(4) Mini-Beispiel.
 Zitiere Quellen inline mit den eckigen Klammern, die im Kontext vorangestellt sind, z.B. [s2/ss1/c3 | definition | ...].
 """
 

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

 import { useEffect, useRef } from "react";
+import ReactMarkdown from "react-markdown";
 
 type MessageBubbleProps = {
   role: "user" | "assistant";
@@ -17,15 +18,30 @@ export default function MessageBubble({ role, text }: MessageBubbleProps) {
   const bubbleRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
-    if (window.MathJax?.typesetPromise && bubbleRef.current) {
-      window.MathJax.typesetPromise([bubbleRef.current]).catch(() => undefined);
+    const typeset = () => {
+      if (window.MathJax?.typesetPromise && bubbleRef.current) {
+        window.MathJax.typesetPromise([bubbleRef.current]).catch(() => undefined);
+      }
+    };
+
+    if (window.MathJax?.typesetPromise) {
+      typeset();
+      return;
+    }
+
+    const script = document.getElementById("mathjax-script");
+    if (script) {
+      script.addEventListener("load", typeset);
+      return () => script.removeEventListener("load", typeset);
     }
   }, [text]);
 
   return (
     <div className={`message-bubble ${role}`} ref={bubbleRef}>
       <div className="message-role">{role}</div>
-      <div className="message-text">{text}</div>
+      <div className="message-text">
+        <ReactMarkdown>{text}</ReactMarkdown>
+      </div>
     </div>
   );
 }

math-tutor/frontend/src/components/Retrieval/DocCard.tsx

@@ -31,8 +31,21 @@ export default function DocCard({
   const contentRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
-    if (window.MathJax?.typesetPromise && contentRef.current) {
-      window.MathJax.typesetPromise([contentRef.current]).catch(() => undefined);
+    const typeset = () => {
+      if (window.MathJax?.typesetPromise && contentRef.current) {
+        window.MathJax.typesetPromise([contentRef.current]).catch(() => undefined);
+      }
+    };
+
+    if (window.MathJax?.typesetPromise) {
+      typeset();
+      return;
+    }
+
+    const script = document.getElementById("mathjax-script");
+    if (script) {
+      script.addEventListener("load", typeset);
+      return () => script.removeEventListener("load", typeset);
     }
   }, [snippetMarkdown]);