allow custom prompt

peanut996 · peanut996 · commit 6d3b96270acf · 2025-03-12T05:16:23.000+08:00
diff --git a/components/modals/settings-modal.tsx b/components/modals/settings-modal.tsx
@@ -36,6 +36,7 @@ import {
   safeLocalStorage
 } from "@/lib/question";
 import { PlusIcon, XIcon } from "lucide-react";
+import { Textarea } from "@/components/ui/textarea";
 
 interface SettingsModalProps {
   language: string;
@@ -63,6 +64,12 @@ export default function SettingsModal({
     !["gpt-4", "gpt-4o", "gpt-3.5-turbo"].includes(openAISettings.model),
   );
 
+  // Load system prompts from localStorage
+  const [systemPrompts, setSystemPrompts] = useState({
+    questionPrompt: safeLocalStorage.getItem("system_prompt_question") || "",
+    answerPrompt: safeLocalStorage.getItem("system_prompt_answer") || "",
+  });
+
   const [questionSettings, setQuestionSettings] = useState({
     type: safeLocalStorage.getItem("question_type") || "all",
     category: safeLocalStorage.getItem("question_category") || "all",
@@ -162,6 +169,14 @@ export default function SettingsModal({
       safeLocalStorage.setItem("openai_token", openAISettings.token);
     }
 
+    // Save system prompts if they exist
+    if (systemPrompts.questionPrompt) {
+      safeLocalStorage.setItem("system_prompt_question", systemPrompts.questionPrompt);
+    }
+    if (systemPrompts.answerPrompt) {
+      safeLocalStorage.setItem("system_prompt_answer", systemPrompts.answerPrompt);
+    }
+
     toast({
       title: t("toast.settings.title"),
       description: t("toast.settings.description"),
@@ -258,6 +273,12 @@ export default function SettingsModal({
       token: "",
     });
 
+    // Reset system prompts
+    setSystemPrompts({
+      questionPrompt: "",
+      answerPrompt: "",
+    });
+
     // Reset custom model flag
     setIsCustomModel(false);
     
@@ -279,6 +300,8 @@ export default function SettingsModal({
     safeLocalStorage.removeItem("openai_endpoint");
     safeLocalStorage.removeItem("openai_model");
     safeLocalStorage.removeItem("openai_token");
+    safeLocalStorage.removeItem("system_prompt_question");
+    safeLocalStorage.removeItem("system_prompt_answer");
 
     setShowResetConfirmation(false);
 
@@ -304,11 +327,12 @@ export default function SettingsModal({
           </DialogHeader>
 
           <Tabs defaultValue="questions" onValueChange={setActiveTab}>
-            <TabsList className="grid grid-cols-2 mb-4">
+            <TabsList className="grid grid-cols-3 mb-4">
               <TabsTrigger value="questions">
                 {t("settings.questions")}
               </TabsTrigger>
               <TabsTrigger value="openai">{t("settings.openai")}</TabsTrigger>
+              <TabsTrigger value="prompts">{t("settings.prompts")}</TabsTrigger>
             </TabsList>
 
             <TabsContent value="questions" className="space-y-4">
@@ -675,6 +699,66 @@ export default function SettingsModal({
                 </div>
               </div>
             </TabsContent>
+
+            <TabsContent value="prompts" className="space-y-4">
+              <div className="space-y-4">
+                <div className="space-y-2">
+                  <Label>{t("settings.questionSystemPrompt") || "Question Generation System Prompt"}</Label>
+                  <Textarea
+                    placeholder={t("settings.questionSystemPromptPlaceholder") || "Enter system prompt for question generation..."}
+                    value={systemPrompts.questionPrompt}
+                    onChange={(e) => 
+                      setSystemPrompts({
+                        ...systemPrompts,
+                        questionPrompt: e.target.value
+                      })
+                    }
+                    className="min-h-24"
+                  />
+                  <p className="text-xs text-muted-foreground">
+                    {t("settings.questionSystemPromptHelp") || "This prompt guides the AI in generating interview questions."}
+                  </p>
+                </div>
+
+                <div className="space-y-2">
+                  <Label>{t("settings.answerSystemPrompt") || "Answer Generation System Prompt"}</Label>
+                  <Textarea
+                    placeholder={t("settings.answerSystemPromptPlaceholder") || "Enter system prompt for answer generation..."}
+                    value={systemPrompts.answerPrompt}
+                    onChange={(e) => 
+                      setSystemPrompts({
+                        ...systemPrompts,
+                        answerPrompt: e.target.value
+                      })
+                    }
+                    className="min-h-24"
+                  />
+                  <p className="text-xs text-muted-foreground">
+                    {t("settings.answerSystemPromptHelp") || "This prompt guides the AI in generating model answers to questions."}
+                  </p>
+                </div>
+
+                <Button 
+                  variant="outline" 
+                  onClick={() => {
+                    setSystemPrompts({
+                      questionPrompt: "",
+                      answerPrompt: ""
+                    });
+                    safeLocalStorage.removeItem("system_prompt_question");
+                    safeLocalStorage.removeItem("system_prompt_answer");
+                    toast({
+                      title: t("settings.promptsReset") || "Prompts Reset",
+                      description: t("settings.promptsResetDesc") || "System prompts have been reset to default",
+                      duration: 3000,
+                    });
+                  }}
+                  className="w-full"
+                >
+                  {t("settings.resetPrompts") || "Reset Prompts to Default"}
+                </Button>
+              </div>
+            </TabsContent>
           </Tabs>
 
           <DialogFooter>
diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx
@@ -2,21 +2,23 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-const Textarea = React.forwardRef<
-  HTMLTextAreaElement,
-  React.ComponentProps<"textarea">
->(({ className, ...props }, ref) => {
-  return (
-    <textarea
-      className={cn(
-        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        className
-      )}
-      ref={ref}
-      {...props}
-    />
-  )
-})
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
 Textarea.displayName = "Textarea"
 
 export { Textarea }
diff --git a/lib/api.ts b/lib/api.ts
@@ -22,6 +22,16 @@ function getCustomSettings() {
   return Object.keys(settings).length > 0 ? settings : null
 }
 
+// Helper function to get custom system prompts
+function getCustomSystemPrompt(type: 'question' | 'answer'): string | undefined {
+  if (typeof window === "undefined") return undefined
+
+  const key = type === 'question' ? "system_prompt_question" : "system_prompt_answer"
+  const customPrompt = localStorage.getItem(key)
+  
+  return customPrompt || undefined
+}
+
 // Function to call our backend API endpoint
 export async function callOpenAI(prompt: string, systemPrompt?: string, onStream?: (chunk: string) => void) {
   try {
@@ -170,11 +180,14 @@ export async function evaluateAnswer(
 }
 
 export async function getModelAnswer(question: any, language: string, onStream?: (chunk: string) => void) {
-  const systemPrompt = `You are an expert in technical interviews. Provide a model answer to the following question.
+  // Use custom system prompt if available
+  const customSystemPrompt = getCustomSystemPrompt('answer');
+  
+  const systemPrompt = customSystemPrompt || `You are an expert in technical interviews. Provide a model answer to the following question.
   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.`
+  Return your answer in both English and Chinese.`;
 
   const questionTitle = question.translations[language]?.title || question.translations.en.title
   const questionDescription = question.translations[language]?.description || question.translations.en.description
@@ -230,10 +243,13 @@ export async function getModelAnswer(question: any, language: string, onStream?:
 
 export async function generateQuestion(type: string, category: string, difficulty: string, language: string = 'en') {
   
-  const systemPrompt = `You are an expert at creating technical interview questions. 
+  // Use custom system prompt if available
+  const customSystemPrompt = getCustomSystemPrompt('question');
+  
+  const systemPrompt = customSystemPrompt || `You are an expert at creating technical interview questions. 
   Generate a new ${type} question in the ${category} category with ${difficulty} difficulty.
   The question should be challenging but solvable within a reasonable time frame.
-  Return your response in JSON format exactly matching the structure provided, with no additional text.`
+  Return your response in JSON format exactly matching the structure provided, with no additional text.`;
 
   const prompt = `
   Create a new technical interview question with the following parameters:
diff --git a/lib/i18n.tsx b/lib/i18n.tsx
@@ -118,6 +118,16 @@ const translations = {
     "settings.codingCustomCategories": "Custom Coding Categories",
     "settings.questionCustomCategories": "Custom Question Categories",
     "settings.cannotAddCategory": "Cannot Add Category",
+    "settings.prompts": "AI Prompts",
+    "settings.questionSystemPrompt": "Question Generation System Prompt",
+    "settings.questionSystemPromptPlaceholder": "Enter system prompt for question generation...",
+    "settings.questionSystemPromptHelp": "This prompt guides the AI in generating interview questions.",
+    "settings.answerSystemPrompt": "Answer Generation System Prompt",
+    "settings.answerSystemPromptPlaceholder": "Enter system prompt for answer generation...",
+    "settings.answerSystemPromptHelp": "This prompt guides the AI in generating model answers to questions.",
+    "settings.resetPrompts": "Reset Prompts to Default",
+    "settings.promptsReset": "Prompts Reset",
+    "settings.promptsResetDesc": "System prompts have been reset to default",
     "editor.loading": "Loading editor...",
     "editor.language": "Language",
     "editor.theme": "Theme",
@@ -240,6 +250,16 @@ const translations = {
     "settings.codingCustomCategories": "自定义编程类别",
     "settings.questionCustomCategories": "自定义问答类别",
     "settings.cannotAddCategory": "无法添加类别",
+    "settings.prompts": "AI 提示词",
+    "settings.questionSystemPrompt": "问题生成系统提示词",
+    "settings.questionSystemPromptPlaceholder": "输入问题生成的系统提示词...",
+    "settings.questionSystemPromptHelp": "该提示词引导 AI 生成面试问题。",
+    "settings.answerSystemPrompt": "答案生成系统提示词",
+    "settings.answerSystemPromptPlaceholder": "输入答案生成的系统提示词...",
+    "settings.answerSystemPromptHelp": "该提示词引导 AI 生成问题的模型答案。",
+    "settings.resetPrompts": "重置提示词为默认值",
+    "settings.promptsReset": "提示词已重置",
+    "settings.promptsResetDesc": "系统提示词已重置为默认值",
     "editor.loading": "正在加载编辑器...",
     "editor.language": "编程语言",
     "editor.theme": "主题",
