thinkging hinter einem Button

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

@@ -29,54 +29,32 @@ export default function MessageBubble({
 }: MessageBubbleProps) {
   const bubbleRef = useRef<HTMLDivElement | null>(null);
   const [isRawView, setIsRawView] = useState(false);
-  const renderedText = useMemo(
-    () => escapeAsterisksInsideMath(text.replaceAll("</think>", "\n --- \n")),
-    [text]
-  );
+  const [isThinkingExpanded, setIsThinkingExpanded] = useState(false);
 
-  useEffect(() => {
-    if (isRawView) {
-      return;
+  const { thinkingText, answerText } = useMemo(() => {
+    const parts = text.split("</think>");
+    if (role !== "assistant" || parts.length < 2) {
+      return {
+        thinkingText: "",
+        answerText: escapeAsterisksInsideMath(text),
+      };
     }
 
-    const typeset = () => {
-      if (window.MathJax?.typesetPromise && bubbleRef.current) {
-        window.MathJax.typesetPromise([bubbleRef.current]).catch(() => undefined);
-      }
+    const rawThinking = parts.slice(0, -1).join("</think>").trim();
+    const rawAnswer = parts[parts.length - 1].trim();
+    return {
+      thinkingText: escapeAsterisksInsideMath(rawThinking),
+      answerText: escapeAsterisksInsideMath(rawAnswer),
     };
+  }, [role, text]);
 
-    if (window.MathJax?.typesetPromise) {
-      typeset();
-      return;
-    }
+  const hasThinking = Boolean(thinkingText);
 
-    const script = document.getElementById("mathjax-script");
-    if (script) {
-      script.addEventListener("load", typeset);
-      return () => script.removeEventListener("load", typeset);
-    }
-  }, [text, isRawView]);
+  useEffect(() => {
+    setIsThinkingExpanded(false);
+  }, [text]);
 
-  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>
-        ) : (
+  const renderMarkdown = (value: string) => (
     <ReactMarkdown
       urlTransform={(url) => {
         if (url.startsWith("doc://")) {
@@ -91,12 +69,7 @@ export default function MessageBubble({
             const mdMatch = target.match(/([^/]+)\.md$/i);
             if (!mdMatch) {
               return (
-                      <a
-                        href={href}
-                        target="_blank"
-                        rel="noreferrer"
-                        {...props}
-                      >
+                <a href={href} target="_blank" rel="noreferrer" {...props}>
                   {children}
                 </a>
               );
@@ -105,10 +78,10 @@ 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(/ä/g, "ae")
+              .replace(/ö/g, "oe")
+              .replace(/ü/g, "ue")
+              .replace(/ß/g, "ss")
               .replace(/[^a-z0-9]+/g, "-")
               .replace(/^-+|-+$/g, "");
             const slug = slugFromFile.split("-").pop() || slugFromFile;
@@ -151,8 +124,71 @@ export default function MessageBubble({
         },
       }}
     >
-            {renderedText}
+      {value}
     </ReactMarkdown>
+  );
+
+  useEffect(() => {
+    if (isRawView) {
+      return;
+    }
+
+    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);
+    }
+  }, [answerText, isRawView, isThinkingExpanded, thinkingText]);
+
+  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>
+        ) : (
+          <>
+            {hasThinking ? (
+              <div className="message-thinking">
+                <button
+                  type="button"
+                  className="message-thinking-toggle"
+                  aria-expanded={isThinkingExpanded}
+                  onClick={() => setIsThinkingExpanded((prev) => !prev)}
+                >
+                  {isThinkingExpanded ? t("hideThinking") : t("showThinking")}
+                </button>
+                {isThinkingExpanded ? (
+                  <div className="message-thinking-content">{renderMarkdown(thinkingText)}</div>
+                ) : null}
+              </div>
+            ) : null}
+            <div className="message-answer">{renderMarkdown(answerText)}</div>
+          </>
         )}
       </div>
     </div>

math-tutor/frontend/src/i18n.ts

@@ -40,6 +40,8 @@
     roleAssistant: "assistant",
     showSource: "Show source",
     showRendered: "Show rendered",
+    showThinking: "Show thinking",
+    hideThinking: "Hide thinking",
     noTasksAvailable: "No tasks available",
     noTaskSelected: "No task selected.",
     savedChats: "Saved Chats",
@@ -117,6 +119,8 @@
     roleAssistant: "assistent",
     showSource: "Formeltext anzeigen",
     showRendered: "Gerendert anzeigen",
+    showThinking: "Thinking anzeigen",
+    hideThinking: "Thinking ausblenden",
     noTasksAvailable: "Keine Aufgaben verfügbar",
     noTaskSelected: "Keine Aufgabe ausgewählt.",
     savedChats: "Gespeicherte Chats",

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

@@ -466,6 +466,34 @@ body {
   overflow-wrap: anywhere;
 }
 
+.message-thinking {
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px dashed #d8d1c4;
+}
+
+.message-thinking-toggle {
+  border: 1px solid #d8d1c4;
+  background: #f6f0e4;
+  color: #6f675d;
+  border-radius: 999px;
+  padding: 4px 10px;
+  font-size: 11px;
+  cursor: pointer;
+}
+
+.message-thinking-toggle:hover {
+  background: #efe6d4;
+}
+
+.message-thinking-content {
+  margin-top: 10px;
+  padding: 10px 12px;
+  border-radius: 10px;
+  background: #fffaf0;
+  border: 1px solid #e2ded5;
+}
+
 .composer {
   display: flex;
   flex-direction: column;