feat(reasoning): add full problem reasoning modal with streaming, correlated steps, regenerate, and KaTeX underscore fix

ardzz · ardzz · commit dd42cd329377 · 2025-12-26T17:31:32.000+07:00
diff --git a/src/app/problem/[id]/page.tsx b/src/app/problem/[id]/page.tsx
@@ -11,7 +11,7 @@ import { SideQuestModal } from "@/components/SideQuestModal";
 import PlaygroundViewer from "@/components/PlaygroundViewer";
 import { ReasoningPanel } from "@/components/ReasoningPanel";
 import { TestResultsPanel } from "@/components/TestResultsPanel";
-import { HiBookOpen, HiLightBulb, HiExclamationCircle, HiClock, HiTrash, HiChevronLeft, HiPlay, HiRefresh, HiSave } from "react-icons/hi";
+import { HiBookOpen, HiLightBulb, HiExclamationCircle, HiClock, HiTrash, HiChevronLeft, HiPlay, HiRefresh, HiSave, HiSparkles } from "react-icons/hi";
 import { executeCode, isAuthenticated, TestResult, getHint, getSubmissions, SubmissionRecord, saveSubmission, deleteSubmission, getSolution } from "@/lib/api";
 import { getEditorSettings, getMonacoTheme, EditorSettings, defineMonacoThemes } from "@/lib/settings";
 
@@ -29,7 +29,7 @@ export default function ProblemPage({ params }: { params: Promise<{ id: string }
     const [running, setRunning] = useState(false);
     const [sideQuestsOpen, setSideQuestsOpen] = useState(false);
     const [activeStep, setActiveStep] = useState(1);
-    const [activeTab, setActiveTab] = useState<"problem" | "solution" | "playground" | "reasoning">("problem");
+    const [activeTab, setActiveTab] = useState<"problem" | "solution" | "playground">("problem");
     const [showQuestModal, setShowQuestModal] = useState(false);
     const [learnOpen, setLearnOpen] = useState(false);
     const [hint, setHint] = useState<string | null>(null);
@@ -44,6 +44,7 @@ export default function ProblemPage({ params }: { params: Promise<{ id: string }
     const [solution, setSolution] = useState<string | null>(null);
     const [loadingSolution, setLoadingSolution] = useState(false);
     const [showPlaygroundModal, setShowPlaygroundModal] = useState(false);
+    const [showReasoningModal, setShowReasoningModal] = useState(false);
 
     // Load editor settings
     useEffect(() => {
@@ -358,13 +359,11 @@ export default function ProblemPage({ params }: { params: Promise<{ id: string }
                         )}
                         {quest && (
                             <button
-                                onClick={() => setActiveTab("reasoning")}
-                                className={`px-4 py-3 text-sm font-bold flex items-center gap-1 transition-colors ${activeTab === "reasoning"
-                                    ? "text-purple-400 border-b-2 border-purple-400 -mb-[2px]"
-                                    : "text-purple-400/60 hover:text-purple-400"
-                                    }`}
+                                onClick={() => setShowReasoningModal(true)}
+                                className="px-4 py-3 text-sm font-bold flex items-center gap-1 transition-colors text-purple-400 hover:text-purple-300 hover:bg-purple-400/10"
                             >
-                                [Reasoning] 🧠
+                                <HiSparkles className="w-4 h-4" />
+                                [Reasoning]
                             </button>
                         )}
                     </div>
@@ -527,12 +526,6 @@ export default function ProblemPage({ params }: { params: Promise<{ id: string }
                             )
                         )}
 
-                        {activeTab === "reasoning" && quest && (
-                            <ReasoningPanel
-                                problemId={problemId}
-                                totalSteps={quest.sub_quests?.length || 0}
-                            />
-                        )}
                     </div>
                 </div>
 
@@ -747,6 +740,36 @@ export default function ProblemPage({ params }: { params: Promise<{ id: string }
                     </div>
                 </div>
             )}
+
+            {/* Fullscreen Reasoning Modal */}
+            {showReasoningModal && quest && (
+                <div className="fixed inset-0 z-50 bg-black/90 flex flex-col">
+                    {/* Modal Header */}
+                    <div className="flex items-center justify-between px-6 py-4 border-b-2 border-gray-700 bg-[#0d0d14]">
+                        <div className="flex items-center gap-3">
+                            <HiSparkles className="text-purple-400 text-xl" />
+                            <div>
+                                <h2 className="text-lg font-bold text-purple-400">[Reasoning] {problem?.title}</h2>
+                                <p className="text-sm text-gray-500">// Step-by-step mathematical solution path</p>
+                            </div>
+                        </div>
+                        <button
+                            onClick={() => setShowReasoningModal(false)}
+                            className="px-4 py-2 text-sm font-bold text-gray-400 hover:text-white border-2 border-gray-700 hover:border-purple-400 transition-colors"
+                        >
+                            [ESC] Close
+                        </button>
+                    </div>
+
+                    {/* Modal Content */}
+                    <div className="flex-1 overflow-auto p-6">
+                        <ReasoningPanel
+                            problemId={problemId}
+                            totalSteps={quest.sub_quests?.length || 0}
+                        />
+                    </div>
+                </div>
+            )}
         </div>
     );
 }
diff --git a/src/components/MathRenderer.tsx b/src/components/MathRenderer.tsx
@@ -19,10 +19,24 @@ export function MathRenderer({ content, className = "", inline = false }: MathRe
         // Process the content to render LaTeX
         let processedContent = content;
 
+        // Helper function to escape underscores in \text{} blocks for KaTeX
+        const escapeTextUnderscores = (latex: string): string => {
+            // Replace underscores in \text{...} with \_
+            return latex.replace(/\\text\{([^}]*)\}/g, (match, text) => {
+                // Replace underscores with escaped underscores
+                const escapedText = text.replace(/_/g, '\\_');
+                return `\\text{${escapedText}}`;
+            }).replace(/\\texttt\{([^}]*)\}/g, (match, text) => {
+                const escapedText = text.replace(/_/g, '\\_');
+                return `\\texttt{${escapedText}}`;
+            });
+        };
+
         // Render display math ($$...$$ or \[...\])
         processedContent = processedContent.replace(/\$\$([\s\S]+?)\$\$/g, (_, latex) => {
             try {
-                return `<span class="block my-4 overflow-x-auto">${katex.renderToString(latex.trim(), {
+                const escapedLatex = escapeTextUnderscores(latex.trim());
+                return `<span class="block my-4 overflow-x-auto">${katex.renderToString(escapedLatex, {
                     displayMode: true,
                     throwOnError: false,
                     trust: true,
@@ -35,7 +49,8 @@ export function MathRenderer({ content, className = "", inline = false }: MathRe
         // Render display math with \[...\]
         processedContent = processedContent.replace(/\\\[([\s\S]+?)\\\]/g, (_, latex) => {
             try {
-                return `<span class="block my-4 overflow-x-auto">${katex.renderToString(latex.trim(), {
+                const escapedLatex = escapeTextUnderscores(latex.trim());
+                return `<span class="block my-4 overflow-x-auto">${katex.renderToString(escapedLatex, {
                     displayMode: true,
                     throwOnError: false,
                     trust: true,
@@ -48,7 +63,8 @@ export function MathRenderer({ content, className = "", inline = false }: MathRe
         // Render inline math ($...$)
         processedContent = processedContent.replace(/\$([^$\n]+?)\$/g, (_, latex) => {
             try {
-                return katex.renderToString(latex.trim(), {
+                const escapedLatex = escapeTextUnderscores(latex.trim());
+                return katex.renderToString(escapedLatex, {
                     displayMode: false,
                     throwOnError: false,
                     trust: true,
@@ -61,7 +77,8 @@ export function MathRenderer({ content, className = "", inline = false }: MathRe
         // Render inline math with \(...\) - use lazy match up to \)
         processedContent = processedContent.replace(/\\\(([\s\S]+?)\\\)/g, (_, latex) => {
             try {
-                return katex.renderToString(latex.trim(), {
+                const escapedLatex = escapeTextUnderscores(latex.trim());
+                return katex.renderToString(escapedLatex, {
                     displayMode: false,
                     throwOnError: false,
                     trust: true,
@@ -71,13 +88,27 @@ export function MathRenderer({ content, className = "", inline = false }: MathRe
             }
         });
 
-        // Convert markdown-style headers
-        processedContent = processedContent.replace(/^### (.+)$/gm, '<span class="block text-lg font-semibold mt-6 mb-2 text-white">$1</span>');
+        // Convert code blocks (```python ... ``` or ``` ... ```)
+        processedContent = processedContent.replace(/```(\w*)\n?([\s\S]*?)```/g, (_, lang, code) => {
+            const langClass = lang ? `language-${lang}` : '';
+            return `<pre class="bg-[#0a0a0f] border border-gray-700 p-3 my-3 overflow-x-auto text-sm ${langClass}"><code class="text-cyan-300">${code.trim().replace(/</g, '&lt;').replace(/>/g, '&gt;')}</code></pre>`;
+        });
+
+        // Convert inline code (`...`)
+        processedContent = processedContent.replace(/`([^`]+)`/g, '<code class="bg-gray-800 text-cyan-400 px-1 py-0.5 text-sm">$1</code>');
+
+        // Convert markdown-style headers (order matters - more # first)
+        processedContent = processedContent.replace(/^#### (.+)$/gm, '<span class="block text-base font-semibold mt-4 mb-2 text-purple-400">$1</span>');
+        processedContent = processedContent.replace(/^### (.+)$/gm, '<span class="block text-lg font-semibold mt-5 mb-2 text-cyan-400">$1</span>');
         processedContent = processedContent.replace(/^## (.+)$/gm, '<span class="block text-xl font-bold mt-6 mb-3 text-white">$1</span>');
 
         // Convert **bold** to <strong>
         processedContent = processedContent.replace(/\*\*([^*]+)\*\*/g, '<strong class="text-white">$1</strong>');
 
+        // Convert bullet points
+        processedContent = processedContent.replace(/^- (.+)$/gm, '<span class="block ml-4">• $1</span>');
+        processedContent = processedContent.replace(/^\d+\. (.+)$/gm, '<span class="block ml-4 text-gray-300">$&</span>');
+
         // Convert newlines to <br> for better readability
         processedContent = processedContent.replace(/\n\n/g, '<br/><br/>');
         processedContent = processedContent.replace(/\n/g, '<br/>');
diff --git a/src/components/ReasoningPanel.tsx b/src/components/ReasoningPanel.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from "react";
 import { MathRenderer } from "@/components/MathRenderer";
-import { HiSparkles, HiCheck, HiRefresh } from "react-icons/hi";
+import { HiSparkles, HiCheck, HiRefresh, HiExclamationCircle } from "react-icons/hi";
 import { streamFullReasoning, getCachedFullReasoning, FullReasoningStep, isAuthenticated } from "@/lib/api";
 
 interface ReasoningPanelProps {
@@ -38,7 +38,7 @@ export function ReasoningPanel({ problemId, totalSteps }: ReasoningPanelProps) {
         checkCached();
     }, [problemId]);
 
-    const handleGenerate = async () => {
+    const handleGenerate = async (force: boolean = false) => {
         if (!isAuthenticated()) {
             setError("Please login to generate reasoning");
             return;
@@ -49,9 +49,10 @@ export function ReasoningPanel({ problemId, totalSteps }: ReasoningPanelProps) {
         setSteps([]);
         setSummary("");
         setCurrentStep(0);
+        setIsCached(false);
 
         try {
-            for await (const event of streamFullReasoning(problemId)) {
+            for await (const event of streamFullReasoning(problemId, force)) {
                 if (event.type === 'step') {
                     setSteps(prev => [...prev, event.data]);
                     setCurrentStep(event.data.step);
@@ -71,6 +72,10 @@ export function ReasoningPanel({ problemId, totalSteps }: ReasoningPanelProps) {
         }
     };
 
+    const handleRegenerate = () => {
+        handleGenerate(true);  // Force regenerate
+    };
+
     return (
         <div className="space-y-4">
             {/* Header */}
@@ -86,10 +91,24 @@ export function ReasoningPanel({ problemId, totalSteps }: ReasoningPanelProps) {
                 )}
             </div>
 
+            {/* Description */}
+            {!hasGenerated && !loading && (
+                <div className="border-l-2 border-purple-400/50 pl-4 py-2 bg-purple-400/5">
+                    <p className="text-sm text-gray-400">
+                        Generate a step-by-step mathematical reasoning path that explains how each quest step
+                        contributes to solving the overall problem. The AI will analyze each step sequentially
+                        and provide a comprehensive explanation with formulas.
+                    </p>
+                    <p className="text-xs text-gray-500 mt-2">
+                        // Reasoning is generated once and cached for future visits
+                    </p>
+                </div>
+            )}
+
             {/* Generate Button */}
             {!hasGenerated && !loading && (
                 <button
-                    onClick={handleGenerate}
+                    onClick={() => handleGenerate(false)}
                     className="w-full py-4 border-2 border-purple-400 bg-purple-400/10 hover:bg-purple-400 hover:text-black font-bold text-purple-400 transition-all flex items-center justify-center gap-2"
                 >
                     <HiSparkles className="w-5 h-5" />
@@ -100,7 +119,7 @@ export function ReasoningPanel({ problemId, totalSteps }: ReasoningPanelProps) {
             {/* Regenerate Button */}
             {hasGenerated && !loading && (
                 <button
-                    onClick={handleGenerate}
+                    onClick={handleRegenerate}
                     className="flex items-center gap-2 px-3 py-1 text-xs border border-gray-600 text-gray-400 hover:border-purple-400 hover:text-purple-400 transition-colors"
                 >
                     <HiRefresh className="w-3 h-3" />
@@ -110,8 +129,9 @@ export function ReasoningPanel({ problemId, totalSteps }: ReasoningPanelProps) {
 
             {/* Error */}
             {error && (
-                <div className="border-2 border-red-400/30 bg-red-400/5 p-3 text-red-400 text-sm">
-                    ❌ {error}
+                <div className="border-2 border-red-400/30 bg-red-400/5 p-3 text-red-400 text-sm flex items-center gap-2">
+                    <HiExclamationCircle className="w-4 h-4 flex-shrink-0" />
+                    {error}
                 </div>
             )}
 
diff --git a/src/lib/api.ts b/src/lib/api.ts
@@ -295,13 +295,14 @@ export type ReasoningStreamEvent =
     | { type: 'done'; cached: boolean }
     | { type: 'error'; message: string };
 
-export async function* streamFullReasoning(problemId: number): AsyncGenerator<ReasoningStreamEvent> {
+export async function* streamFullReasoning(problemId: number, force: boolean = false): AsyncGenerator<ReasoningStreamEvent> {
     const token = getAuthToken();
     const API_BASE = typeof window !== 'undefined'
         ? `http://${window.location.hostname}:8000`
         : 'http://localhost:8000';
 
-    const response = await fetch(`${API_BASE}/api/quest/full-reasoning/${problemId}/stream`, {
+    const url = `${API_BASE}/api/quest/full-reasoning/${problemId}/stream${force ? '?force=true' : ''}`;
+    const response = await fetch(url, {
         headers: {
             'Authorization': `Bearer ${token}`,
         },
