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,32 +50,75 @@ 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-role">
-        {role === "user" ? t("roleUser") : t("roleAssistant")}
+      <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">
-        <ReactMarkdown
-          urlTransform={(url) => {
-            if (url.startsWith("doc://")) {
-              return url;
-            }
-            return defaultUrlTransform(url);
-          }}
-          components={{
-            a: ({ href, children, ...props }) => {
-              const target = href || "";
-              if (!target.startsWith("doc://")) {
-                const mdMatch = target.match(/([^/]+)\.md$/i);
-                if (!mdMatch) {
+        {isRawView ? (
+          <pre className="message-raw-text">{text}</pre>
+        ) : (
+          <ReactMarkdown
+            urlTransform={(url) => {
+              if (url.startsWith("doc://")) {
+                return url;
+              }
+              return defaultUrlTransform(url);
+            }}
+            components={{
+              a: ({ href, children, ...props }) => {
+                const target = href || "";
+                if (!target.startsWith("doc://")) {
+                  const mdMatch = target.match(/([^/]+)\.md$/i);
+                  if (!mdMatch) {
+                    return (
+                      <a
+                        href={href}
+                        target="_blank"
+                        rel="noreferrer"
+                        {...props}
+                      >
+                        {children}
+                      </a>
+                    );
+                  }
+
+                  const file = mdMatch[1] || "";
+                  const slugFromFile = file
+                    .toLowerCase()
+                    .replace(/ä/g, "ae")
+                    .replace(/ö/g, "oe")
+                    .replace(/ü/g, "ue")
+                    .replace(/ß/g, "ss")
+                    .replace(/[^a-z0-9]+/g, "-")
+                    .replace(/^-+|-+$/g, "");
+                  const slug = slugFromFile.split("-").pop() || slugFromFile;
+                  const doc = docSlugIndex ? docSlugIndex[slug] : undefined;
+
                   return (
                     <a
                       href={href}
-                      target="_blank"
-                      rel="noreferrer"
+                      onClick={(event) => {
+                        if (!doc || !onInspectDoc) {
+                          return;
+                        }
+                        event.preventDefault();
+                        onInspectDoc(doc);
+                      }}
                       {...props}
                     >
                       {children}
@@ -78,18 +126,8 @@ export default function MessageBubble({
                   );
                 }
 
-                const file = mdMatch[1] || "";
-                const slugFromFile = file
-                  .toLowerCase()
-                  .replace(/ä/g, "ae")
-                  .replace(/ö/g, "oe")
-                  .replace(/ü/g, "ue")
-                  .replace(/ß/g, "ss")
-                  .replace(/[^a-z0-9]+/g, "-")
-                  .replace(/^-+|-+$/g, "");
-                const slug = slugFromFile.split("-").pop() || slugFromFile;
-                const doc = docSlugIndex ? docSlugIndex[slug] : undefined;
-
+                const key = decodeURIComponent(target.slice("doc://".length));
+                const doc = docIndex ? docIndex[key] : undefined;
                 return (
                   <a
                     href={href}
@@ -105,30 +143,12 @@ export default function MessageBubble({
                     {children}
                   </a>
                 );
-              }
-
-              const key = decodeURIComponent(target.slice("doc://".length));
-              const doc = docIndex ? docIndex[key] : undefined;
-              return (
-                <a
-                  href={href}
-                  onClick={(event) => {
-                    if (!doc || !onInspectDoc) {
-                      return;
-                    }
-                    event.preventDefault();
-                    onInspectDoc(doc);
-                  }}
-                  {...props}
-                >
-                  {children}
-                </a>
-              );
-            },
-          }}
-        >
-          {text}
-        </ReactMarkdown>
+              },
+            }}
+          >
+            {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;