feat: add translate mode

app/api/chat/route.ts

@@ -3,6 +3,7 @@ import { streamText } from "ai";
 import { getLocaleTime } from "@/lib/utils";
 import { tools } from "@/app/api/chat/tools";
 import { NextResponse } from "next/server";
+import { MODE_TRANSLATE } from "@/lib/constants";
 
 export async function POST(req: Request) {
   const { messages, config } = await req.json();
@@ -29,9 +30,17 @@ function getSystem(prompt: any) {
   if (prompt === true) {
     return systemPrompt();
   }
+  switch (prompt) {
+    case MODE_TRANSLATE:
+      return translatePrompt();
+  }
 }
 
 function systemPrompt(): string {
   return `You are an AI assistant, your duty is to provide accurate and rigorous answers. When encountering questions that cannot be handled, you need to clearly inform and guide the user to propose new questions. Please reply in Chinese.
 Current time: ${getLocaleTime()}`;
 }
+
+function translatePrompt(): string {
+  return "You are a professional, authentic translation engine. You only return the translated text, please do not explain or understand original text. (Chinese-English bidirectional translation)";
+}

components/chat-input.tsx

@@ -2,15 +2,19 @@ import React, { ChangeEventHandler, useState } from "react";
 import Textarea from "@/components/textarea";
 import { Button } from "@/components/ui/button";
 import {
-  MessageCircleOff,
+  Languages,
+  ListRestart,
   PauseCircle,
   RefreshCcw,
   SendHorizontal,
 } from "lucide-react";
-import TooltipWrap from "@/components/tooltip-wrap";
 import { cn } from "@/lib/utils";
 import { useChatStore } from "@/lib/store/chat";
 import { toast } from "sonner";
+import { Separator } from "@/components/ui/separator";
+import { useConfig } from "@/lib/store/config-chat";
+import { clsx } from "clsx";
+import { MODE_TRANSLATE } from "@/lib/constants";
 
 function ChatInput({
   isLoading,
@@ -28,6 +32,7 @@ function ChatInput({
   stop: () => void;
 }) {
   const resetSession = useChatStore((state) => state.resetSession);
+  const [mode, update] = useConfig((state) => [state.mode, state.update]);
 
   const [lastInput, setLastInput] = useState<string>();
 
@@ -53,38 +58,52 @@ function ChatInput({
     input && setLastInput(input);
   }
 
+  function onTranslateMode() {
+    update((cfg) => (cfg.mode = mode ? "" : MODE_TRANSLATE));
+  }
+
   return (
-    <form onSubmit={handleSubmit} className="relative p-3 pt-1">
-      <div className="mb-1.5">
+    <form onSubmit={handleSubmit} className="relative p-3 pt-1.5">
+      <div className="mb-1.5 flex items-center gap-1">
+        <Button
+          type="button"
+          className={clsx(
+            "h-8 gap-1 px-2",
+            mode == MODE_TRANSLATE &&
+              "bg-muted-foreground/20 hover:bg-muted-foreground/20",
+          )}
+          size="sm"
+          variant="ghost"
+          onClick={onTranslateMode}
+        >
+          <Languages strokeWidth={1.5} size={22} />
+          翻译模式
+        </Button>
+        <Separator orientation="vertical" className="h-6" />
         {!isLoading && (
-          <TooltipWrap
-            content="重置聊天"
-            triggerAsChild={true}
-            trigger={
-              <Button
-                type="button"
-                className="h-8"
-                size="icon"
-                variant="ghost"
-                onClick={() => {
-                  resetSession();
-                  toast.success("聊天已重置");
-                }}
-              >
-                <MessageCircleOff strokeWidth={1.5} size={22} />
-              </Button>
-            }
-          />
+          <Button
+            type="button"
+            className="h-8 gap-1 px-2"
+            size="sm"
+            variant="ghost"
+            onClick={() => {
+              resetSession();
+              toast.success("聊天已重置");
+            }}
+          >
+            <ListRestart strokeWidth={1.5} size={22} />
+            重置聊天
+          </Button>
         )}
         {isLoading && (
           <Button
             type="button"
-            className="h-8"
-            size="icon"
+            className="h-8 gap-1 px-2"
+            size="sm"
             variant="ghost"
             onClick={stop}
           >
-            <PauseCircle strokeWidth={1.5} size={22} />
+            <PauseCircle strokeWidth={1.5} size={22} /> 停止输出
           </Button>
         )}
       </div>

components/chat.tsx

@@ -50,7 +50,10 @@ function Chat() {
   });
 
   const apiConfig = useConfig((state) => state.apiConfig);
-  const autoTitle = useConfig((state) => state.autoGenerateTitle);
+  const [autoTitle, mode] = useConfig((state) => [
+    state.autoGenerateTitle,
+    state.mode,
+  ]);
 
   useEffect(() => {
     emitter.on(mittKey.STOP_LOADING, stop);
@@ -60,10 +63,13 @@ function Chat() {
   const options = useMemo(
     () => ({
       body: {
-        config: apiConfig,
+        config: {
+          ...apiConfig,
+          systemPrompt: mode ? mode : apiConfig.systemPrompt,
+        },
       },
     }),
-    [apiConfig],
+    [apiConfig, mode],
   );
 
   // save message

lib/constants.ts

@@ -12,6 +12,8 @@ export const models: SelectInfo[] = [
   { name: "OpenAI", list: ["gpt-3.5-turbo", "gpt-4"] },
 ];
 
+export const MODE_TRANSLATE = "translate";
+
 export const GITHUB_URL = "https://github.com/sunls24/nextai";
 
 export const TOPIC_MAX_LENGTH = 12;

lib/store/config-chat.ts

@@ -8,6 +8,7 @@ const defaultPlugins = {
 const defaultConfig = {
   autoGenerateTitle: true,
   customModels: "",
+  mode: "",
   apiConfig: {
     apiKey: "",
     model: "gpt-3.5-turbo",

package.json

@@ -31,7 +31,7 @@
     "react-dom": "^18.3.1",
     "react-markdown": "8.0.7",
     "react-syntax-highlighter": "^15.6.1",
-    "react-textarea-autosize": "^8.5.5",
+    "react-textarea-autosize": "^8.5.6",
     "remark-breaks": "3.0.3",
     "remark-gfm": "3.0.1",
     "sonner": "^1.7.1",