use base64 to encode answer

Author: peanut996

components/answer-display.tsx

@@ -8,7 +8,8 @@ import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import {github} from "react-syntax-highlighter/dist/esm/styles/hljs"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
-import { formatCodeBlock, preprocessCodeInAnswer } from "@/lib/utils"
+import {decodeProcessedAnswer, formatCodeBlock, preprocessCodeInAnswer} from "@/lib/utils"
+import { AIAnswer } from "@/lib/types";
 
 interface AnswerDisplayProps {
   answer: string
@@ -20,9 +21,26 @@ interface AnswerDisplayProps {
   onRetry?: () => void
 }
 
-export default function AnswerDisplay({ 
-  answer, 
-  language, 
+
+// Decode any encoded code blocks
+const processContent = (content: string) => {
+  return decodeProcessedAnswer(content);
+}
+
+// Process the answer to decode Base64 encoded blocks
+const getProcessedContent = (displayAnswer: string | AIAnswer, language: string) => {
+  if (typeof displayAnswer === "string") {
+    return processContent(displayAnswer);
+  } else if (displayAnswer && displayAnswer.answer) {
+    const content = displayAnswer.answer[language] || displayAnswer.answer.en || "";
+    return processContent(content);
+  }
+  return "";
+}
+
+export default function AnswerDisplay({
+  answer,
+  language,
   isStreaming = false,
   parsedAnswer,
   onClose,
@@ -51,8 +69,11 @@ export default function AnswerDisplay({
     )
   }
 
+
+
   // Use parsed answer if available, otherwise fall back to the original answer
-  const displayAnswer = parsedAnswer ? preprocessCodeInAnswer(parsedAnswer) : answer
+  let displayAnswer = parsedAnswer ? preprocessCodeInAnswer(parsedAnswer) : answer
+
 
   // If we're getting string data but couldn't parse it
   if (typeof displayAnswer === "string") {
@@ -93,13 +114,13 @@ export default function AnswerDisplay({
                     code({node, className, children, ...props}: any) {
                       const match = /language-(\w+)/.exec(className || '')
                       const inline = !match
-                      
+
                       if (!inline) {
-                        // Format code using our utility function 
+                        // 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={github}
@@ -130,8 +151,7 @@ export default function AnswerDisplay({
     )
   }
 
-  const answerContent = typeof displayAnswer === "string" ?
-    displayAnswer : displayAnswer.answer?.[language] || displayAnswer.answer?.en || displayAnswer
+  const answerContent = getProcessedContent(displayAnswer, language);
 
   return (
     <Card className="mb-6 shadow-sm border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#2c2c2e] rounded-xl">
@@ -166,13 +186,13 @@ export default function AnswerDisplay({
                 code({node, className, children, ...props}: any) {
                   const match = /language-(\w+)/.exec(className || '')
                   const inline = !match
-                  
+
                   if (!inline) {
-                    // Format code using our utility function 
+                    // 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={github}

lib/api.ts

@@ -1,6 +1,6 @@
 "use client"
 
-import { cleanupJsonResponse } from "./utils"
+import {cleanupJsonResponse, encodeCodeBlocks, processAnswerWithRegexImproved} from "./utils"
 
 // Default server-side settings (will be loaded from environment variables on the server)
 const DEFAULT_OPENAI_MODEL = "gpt-4"
@@ -226,21 +226,21 @@ 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) => {
-        // 清理流式数据中的 markdown 代码块
-        const cleanedChunk = cleanupJsonResponse(chunk);
-        onStream(cleanedChunk);
+        onStream(chunk);
       }, "modelAnswer")
     } else {
       finalResult = await callOpenAI(prompt, systemPrompt, undefined, "modelAnswer")
+      // Encode code blocks in the complete response
+      finalResult = processAnswerWithRegexImproved(finalResult);
     }
 
-
-    const cleanedResult = cleanupJsonResponse(finalResult);
+    let cleanedResult;
     try {
+      cleanedResult = processAnswerWithRegexImproved(finalResult)
       return JSON.parse(cleanedResult);
     } catch (error) {
       console.warn("Could not parse model answer as JSON, returning raw text");
-      return { answer: { en: cleanedResult, zh: cleanedResult } };
+      return { answer: { en: finalResult, zh: finalResult } };
     }
   } catch (error) {
     console.error("Error getting model answer:", error)

lib/types.ts

@@ -51,6 +51,12 @@ export interface UserAnswer {
     content: string
 }
 
+export interface AIAnswer{
+    answer: {
+        [key: string]: string
+    }
+}
+
 export interface QuestionHistory {
     id: string
     title: string

lib/utils.ts

@@ -5,6 +5,44 @@ export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
 
+
+// 改进版本，处理转义字符
+export function processAnswerWithRegexImproved(jsonData: string): string {
+  const regex = /("en"|"zh"):\s*"((?:[^"\\]|\\.)*)"/g;
+
+  return jsonData.replace(regex, (match, key, value) => {
+    const unescapedValue = value.replace(/\\(.)/g, "$1");
+    // 使用 encodeURIComponent 和 btoa 进行 Base64 编码
+    const encodedValue = btoa(encodeURIComponent(unescapedValue));
+
+    // 3. 重新添加转义字符（如果需要）- 通常不需要，因为 Base64 编码后的字符串通常不需要转义
+    // const reescapedValue = encodedValue.replace(/([\\"])/g, '\\$1'); // 如果确实需要
+    return `${key}: "${encodedValue}"`; // 通常返回这个就足够了
+  });
+}
+
+export function decodeProcessedAnswer(jsonData: string): string {
+  const regex = /("en"|"zh"):\s*"((?:[^"\\]|\\.)*)"/g;
+
+  return jsonData.replace(regex, (match, key, value) => {
+    try {
+      // 使用 atob 和 decodeURIComponent 进行 Base64 解码
+      const decodedValue = decodeURIComponent(atob(value));
+      return `${key}: "${decodedValue}"`;
+
+    } catch (error) {
+      console.error("Base64 decoding failed:", error);
+      return match;
+    }
+  });
+}
+
+
+// Encode code blocks to Base64
+export function encodeCodeBlocks(text: string): string {
+  return processAnswerWithRegexImproved(text)
+}
+
 export function cleanupJsonResponse(text: string): string {
   // Step 1: Remove any outer code blocks like ```json, ```js, etc.
   const cleaned = text.replace(/^```(?:json|javascript|js)?\s*|\s*```$/gm, '').trim();