use plain text for get model answer

Author: peanut996

app/api/openai/route.ts

@@ -1,6 +1,6 @@
 import { type NextRequest, NextResponse } from "next/server"
 import { createOpenAI } from '@ai-sdk/openai'
-import { LanguageModel, streamObject } from 'ai'
+import {LanguageModel, streamObject, streamText} from 'ai'
 import { z } from 'zod'
 
 // Define the schema for the Question object
@@ -71,9 +71,13 @@ export async function POST(req: NextRequest) {
     }
 
     // Update system prompt to reflect we're using structured data
-    const enhancedSystemPrompt = systemPrompt 
-      ? `${systemPrompt}\n\nIMPORTANT: Return a valid structured object according to the provided schema. DO NOT use markdown formatting such as code blocks with backticks (\`\`\`). The response must be pure, parseable JSON without any markdown formatting or extra text surrounding it. Ensure all special characters in strings are properly escaped according to JSON standards.`
-      : "IMPORTANT: Return a valid structured object according to the provided schema. DO NOT use markdown formatting such as code blocks with backticks (```). The response must be pure, parseable JSON without any markdown formatting or extra text surrounding it. Ensure all special characters in strings are properly escaped according to JSON standards.";
+    const enhancedSystemPrompt = requestType === "modelAnswerText"
+      ? systemPrompt ? 
+        `${systemPrompt}\n\nIMPORTANT: Format your response as pure markdown. DO NOT wrap your entire response in markdown code blocks with \`\`\`markdown tags. The output should be directly renderable as markdown.` 
+        : "Format your response as pure markdown. DO NOT wrap your entire response in markdown code blocks with ```markdown tags. The output should be directly renderable as markdown."
+      : systemPrompt 
+        ? `${systemPrompt}\n\nIMPORTANT: Return a valid structured object according to the provided schema. DO NOT use markdown formatting such as code blocks with backticks (\`\`\`). The response must be pure, parseable JSON without any markdown formatting or extra text surrounding it. Ensure all special characters in strings are properly escaped according to JSON standards.`
+        : "IMPORTANT: Return a valid structured object according to the provided schema. DO NOT use markdown formatting such as code blocks with backticks (```). The response must be pure, parseable JSON without any markdown formatting or extra text surrounding it. Ensure all special characters in strings are properly escaped according to JSON standards.";
 
     const messages = [
       { role: "system" as const, content: enhancedSystemPrompt },
@@ -97,6 +101,14 @@ export async function POST(req: NextRequest) {
         mode: "json",
       });
       streamResult = result.textStream;
+    } else if (requestType === "modelAnswerText") {
+      // For text/markdown response, use the raw completion without schema validation
+      const result = await streamText({
+        model: completion as LanguageModel,
+        messages,
+        temperature: 0.7,
+      });
+      streamResult = result.textStream;
     } else if (requestType === "evaluation") {
       const result = await streamObject({
         model: completion as LanguageModel,

app/page.tsx

@@ -433,8 +433,7 @@ export default function Page() {
       // Once streaming is complete, try to parse the final answer
       try {
         if (answer) {
-          const parsed = JSON.parse(jsonrepair(answer))
-          setParsedAnswer(parsed)
+          setParsedAnswer(answer)
         }
       } catch (e) {
         // Keep using the raw answer if parsing fails

components/answer-display.tsx

@@ -70,88 +70,7 @@ export default function AnswerDisplay({
   }
 
 
-
-  // Use parsed answer if available, otherwise fall back to the original answer
-  let displayAnswer = parsedAnswer ? preprocessCodeInAnswer(parsedAnswer) : answer
-
-
-  // If we're getting string data but couldn't parse it
-  if (typeof displayAnswer === "string") {
-    return (
-      <Card className="mb-6 shadow-sm border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#2c2c2e] rounded-xl">
-        <CardContent className="p-6">
-          <div className="flex items-center justify-between mb-4">
-            <h3 className="text-lg font-medium">{t("answer.modalTitle")}</h3>
-            <div className="flex items-center space-x-2">
-              <Badge variant="outline" className="bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 border-blue-200 dark:border-blue-800">
-                AI
-              </Badge>
-              {onRetry && (
-                <Button variant="ghost" size="icon" onClick={onRetry} className="h-8 w-8" title={t("answer.regenerate")}>
-                  <Loader2 className={`h-4 w-4 ${isStreaming ? 'animate-spin' : ''}`} />
-                </Button>
-              )}
-              {onEdit && (
-                <Button variant="ghost" size="icon" onClick={onEdit} className="h-8 w-8" title={t("answer.editAnswer")}>
-                  <Edit className="h-4 w-4" />
-                </Button>
-              )}
-              {onClose && (
-                <Button variant="ghost" size="icon" onClick={onClose} className="h-8 w-8" title={t("answer.closeAnswer")}>
-                  <X className="h-4 w-4" />
-                </Button>
-              )}
-            </div>
-          </div>
-          <div className="p-4">
-            <div className="mb-4 p-2 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-200 rounded-md">
-              <p>{t("answer.processFailure")}</p>
-            </div>
-            <div className="prose dark:prose-invert max-w-none">
-              <div className="markdown-content">
-                <ReactMarkdown
-                  components={{
-                    code({node, className, children, ...props}: any) {
-                      const match = /language-(\w+)/.exec(className || '')
-                      const inline = !match
-
-                      if (!inline) {
-                        // Format code using our utility function
-                        const { code, language: detectedLanguage } = formatCodeBlock(String(children));
-                        // Use either the detected language or the one from className
-                        const langToUse = match ? match[1] : detectedLanguage;
-
-                        return (
-                          <SyntaxHighlighter
-                            style={githubGist}
-                            language={langToUse}
-                            PreTag="div"
-                            {...props}
-                          >
-                            {code}
-                          </SyntaxHighlighter>
-                        );
-                      } else {
-                        return (
-                          <code className={className} {...props}>
-                            {children}
-                          </code>
-                        );
-                      }
-                    }
-                  }}
-                >
-                  {displayAnswer}
-                </ReactMarkdown>
-              </div>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-    )
-  }
-
-  const answerContent = getProcessedContent(displayAnswer, language);
+  const answerContent = answer;
 
   return (
     <Card className="mb-6 shadow-sm border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#2c2c2e] rounded-xl">

lib/api.ts

@@ -181,6 +181,14 @@ export async function evaluateAnswer(
   }
 }
 
+// Function to clean markdown response by removing unnecessary markdown code block tags
+function cleanMarkdownResponse(response: string): string {
+  // Remove ```markdown at start and ``` at end if they exist
+  return response
+    .replace(/^```(markdown|md)?\s*\n/i, '') // Remove opening markdown tag
+    .replace(/\n```\s*$/i, '');              // Remove closing tag
+}
+
 export async function getModelAnswer(question: any, language: string, onStream?: (chunk: string) => void, codeLanguage?: string) {
   // Use custom system prompt if available
   const customSystemPrompt = getCustomSystemPrompt('answer');
@@ -189,32 +197,28 @@ export async function getModelAnswer(question: any, language: string, onStream?:
   Your answer should be clear, efficient, and follow best practices.
   If it's a coding question, include well-commented code.
   If it's a conceptual question, provide a comprehensive explanation.
-  Return your answer in both English and Chinese.
-  
-  IMPORTANT: Return pure, parseable JSON without any markdown formatting. DO NOT wrap your response in code blocks with backticks (\`\`\`json or any other format).
-  The response MUST be directly parseable as JSON without any cleanup needed.
-  Ensure all special characters in strings are properly escaped according to JSON standards.
   
-  When including code examples in your answer, make sure to properly escape them as JSON strings.
-  For example, if you need to include a code snippet with backticks, escape them properly in the JSON.${codeLanguage ? `\n\nIf code is required in the answer, prefer to use ${codeLanguage} programming language unless the question specifically requires a different language.` : ''}`;
+  IMPORTANT: You should format your response as markdown text. Use markdown features like **bold**, *italic*, code blocks with \`\`\` for code examples, and other formatting to make your answer clear and readable.
+  When including code examples, use proper markdown code blocks with language specification, e.g. \`\`\`javascript.
+  DO NOT wrap your entire response in a markdown code block. Your response should be pure markdown without outer \`\`\`markdown tags.
+  ${codeLanguage ? `\n\nIf code is required in the answer, prefer to use ${codeLanguage} programming language unless the question specifically requires a different language.` : ''}`;
 
   const questionTitle = question.translations[language]?.title || question.translations.en.title
   const questionDescription = question.translations[language]?.description || question.translations.en.description
 
+  // Determine language for the output
+  const outputLanguage = language === 'zh' ? 'Chinese' : 'English';
+  const languageComment = language === 'zh' ? '请用中文回答' : 'Please answer in English';
+
   const prompt = `
   Question: ${questionTitle}
   Description: ${questionDescription}
   ${question.testCases ? `Test Cases: ${JSON.stringify(question.testCases)}` : ""}
   ${codeLanguage ? `\nPreferred Code Language: ${codeLanguage}\n` : ""}
   
-  Provide a model answer to this question in both English and Chinese.
-  Format your response as a JSON object with this structure:
-  {
-    "answer": {
-      "en": "Your English answer here",
-      "zh": "Your Chinese answer here"
-    }
-  }
+  ${languageComment}. Provide a model answer to this question in ${outputLanguage}.
+  Format your response as markdown text with appropriate formatting.
+  IMPORTANT: DO NOT wrap your entire response in a markdown code block with \`\`\`markdown tags. Just provide the raw markdown content.
   `
 
   try {
@@ -223,31 +227,23 @@ export async function getModelAnswer(question: any, language: string, onStream?:
     // If we have a streaming handler, use it
     if (onStream) {
       finalResult = await callOpenAI(prompt, systemPrompt, (chunk) => {
-        onStream(chunk);
-      }, "modelAnswer")
+        // Clean the markdown tags from each chunk before sending to stream handler
+        onStream((chunk));
+      }, "modelAnswerText")
     } else {
-      finalResult = await callOpenAI(prompt, systemPrompt, undefined, "modelAnswer")
-      // Encode code blocks in the complete response
-      finalResult = processAnswerWithRegexImproved(finalResult);
+      finalResult = await callOpenAI(prompt, systemPrompt, undefined, "modelAnswerText")
     }
 
-    let cleanedResult;
-    try {
-      cleanedResult = processAnswerWithRegexImproved(finalResult)
-      return JSON.parse(jsonrepair(cleanedResult));
-    } catch (error) {
-      console.warn("Could not parse model answer as JSON, returning raw text");
-      return { answer: { en: finalResult, zh: finalResult } };
-    }
+    // Return the raw markdown text directly
+    return finalResult
   } catch (error) {
     console.error("Error getting model answer:", error)
     // Return a fallback answer if API call fails
-    return {
-      answer: {
-        en: "We couldn't generate a model answer due to an error. Please check your OpenAI API settings.",
-        zh: "由于错误，我们无法生成模型答案。请检查您的 OpenAI API 设置。",
-      },
-    }
+    const fallbackMessage = language === 'zh' 
+      ? "由于错误，我们无法生成模型答案。请检查您的 OpenAI API 设置。" 
+      : "We couldn't generate a model answer due to an error. Please check your OpenAI API settings.";
+    
+    return fallbackMessage;
   }
 }