plain text und render für Nachrichten

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

-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import ReactMarkdown, { defaultUrlTransform } from "react-markdown";
 import type { RetrievedDoc } from "../Retrieval/DocPanel";
 import { t } from "../../i18n";
@@ -27,8 +27,13 @@ export default function MessageBubble({
   docSlugIndex,
 }: MessageBubbleProps) {
   const bubbleRef = useRef<HTMLDivElement | null>(null);
+  const [isRawView, setIsRawView] = useState(false);
 
   useEffect(() => {
+    if (isRawView) {
+      return;
+    }
+
     const typeset = () => {
       if (window.MathJax?.typesetPromise && bubbleRef.current) {
         window.MathJax.typesetPromise([bubbleRef.current]).catch(() => undefined);
@@ -45,14 +50,28 @@ export default function MessageBubble({
       script.addEventListener("load", typeset);
       return () => script.removeEventListener("load", typeset);
     }
-  }, [text]);
+  }, [text, isRawView]);
 
   return (
     <div className={`message-bubble ${role}`} ref={bubbleRef}>
+      <div className="message-header">
         <div className="message-role">
           {role === "user" ? t("roleUser") : t("roleAssistant")}
         </div>
+        <button
+          type="button"
+          className="message-toggle"
+          aria-pressed={isRawView}
+          title={isRawView ? t("showRendered") : t("showSource")}
+          onClick={() => setIsRawView((prev) => !prev)}
+        >
+          {isRawView ? t("showRendered") : t("showSource")}
+        </button>
+      </div>
       <div className="message-text">
+        {isRawView ? (
+          <pre className="message-raw-text">{text}</pre>
+        ) : (
           <ReactMarkdown
             urlTransform={(url) => {
               if (url.startsWith("doc://")) {
@@ -129,6 +148,7 @@ export default function MessageBubble({
           >
             {text}
           </ReactMarkdown>
+        )}
       </div>
     </div>
   );

math-tutor/frontend/src/i18n.ts

@@ -36,6 +36,8 @@
     send: "Send",
     roleUser: "user",
     roleAssistant: "assistant",
+    showSource: "Show source",
+    showRendered: "Show rendered",
     noTasksAvailable: "No tasks available",
     noTaskSelected: "No task selected.",
     savedChats: "Saved Chats",
@@ -107,6 +109,8 @@
     send: "Senden",
     roleUser: "nutzer",
     roleAssistant: "assistent",
+    showSource: "Formeltext anzeigen",
+    showRendered: "Gerendert anzeigen",
     noTasksAvailable: "Keine Aufgaben verfügbar",
     noTaskSelected: "Keine Aufgabe ausgewählt.",
     savedChats: "Gespeicherte Chats",

math-tutor/frontend/src/styles/theme.css

@@ -420,6 +420,44 @@ body {
   color: #6f675d;
 }
 
+.message-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.message-toggle {
+  border: 1px solid #d8d1c4;
+  background: #fef9f0;
+  color: #6f675d;
+  border-radius: 999px;
+  padding: 3px 8px;
+  font-size: 11px;
+  cursor: pointer;
+}
+
+.message-toggle:hover {
+  background: #f6f0e4;
+}
+
+.message-text {
+  margin-top: 8px;
+}
+
+.message-raw-text {
+  margin: 0;
+  padding: 10px;
+  border-radius: 10px;
+  border: 1px solid #e2ded5;
+  background: #fffdf8;
+  font-family: "Fira Code", "Consolas", "Courier New", monospace;
+  font-size: 13px;
+  line-height: 1.45;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
 .composer {
   display: flex;
   flex-direction: column;