From 6bd1e12d9aa482dccbb01dccfc98cf8e0836d0cf Mon Sep 17 00:00:00 2001
From: Dogtiti <499960698@qq.com>
Date: Sat, 22 Apr 2023 14:26:41 +0800
Subject: [PATCH] feat: add custom language for prompts

---
 src/components/AutonomousAgent.ts |  5 ---
 src/components/Drawer.tsx         | 11 ++----
 src/pages/index.tsx               | 63 ++++++++++++++++++++-----------
 src/services/agent-service.ts     |  3 ++
 src/utils/prompts.ts              | 12 +++---
 src/utils/types.ts                |  1 +
 6 files changed, 54 insertions(+), 41 deletions(-)

diff --git a/src/components/AutonomousAgent.ts b/src/components/AutonomousAgent.ts
index 614c9321..0cf4fa3c 100644
--- a/src/components/AutonomousAgent.ts
+++ b/src/components/AutonomousAgent.ts
@@ -54,11 +54,6 @@ class AutonomousAgent {
       }
     } catch (e) {
       console.log(e);
-      // this.sendErrorMessage(
-      //   this.modelSettings.customApiKey !== ""
-      //     ? "errors.run-with-filled-customApiKey"
-      //     : "errors.run-with-empty-customApiKey"
-      // );
       this.sendErrorMessage(getMessageFromError(e));
       this.shutdown();
       return;
diff --git a/src/components/Drawer.tsx b/src/components/Drawer.tsx
index f65c2fe7..6bda394c 100644
--- a/src/components/Drawer.tsx
+++ b/src/components/Drawer.tsx
@@ -16,7 +16,6 @@ import {
   FaQq,
   FaGlobe,
 } from "react-icons/fa";
-import { BiPlus } from "react-icons/bi";
 import clsx from "clsx";
 import { useAuth } from "../hooks/useAuth";
 import type { Session } from "next-auth";
@@ -32,12 +31,14 @@ const Drawer = ({
   showWeChat,
   showQQ,
   showKnowledgePlanet,
+  handleLanguageChange,
 }: {
   showHelp: () => void;
   showSettings: () => void;
   showWeChat: () => void;
   showQQ: () => void;
   showKnowledgePlanet: () => void;
+  handleLanguageChange: () => void;
 }) => {
   const [showDrawer, setShowDrawer] = useState(false);
   const { session, signIn, signOut, status } = useAuth();
@@ -75,12 +76,6 @@ const Drawer = ({
     setShowDrawer((prevState) => !prevState);
   };
 
-  const onToggleLanguageClick = () => {
-    const { pathname, asPath, query, locale } = router;
-    router.push({ pathname, query }, asPath, {
-      locale: locale === "en" ? "zh" : "en",
-    });
-  };
   const userAgents = query.data ?? [];
 
   return (
@@ -180,7 +175,7 @@ const Drawer = ({
           <DrawerItem
             icon={<FaLanguage />}
             text="language"
-            onClick={onToggleLanguageClick}
+            onClick={handleLanguageChange}
           />
           {env.NEXT_PUBLIC_FF_SUB_ENABLED ||
             (router.query.pro && (
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 7c8e5d61..737c9dff 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { type NextPage, type GetStaticProps } from "next";
 import DefaultLayout from "../layout/default";
 import ChatWindow from "../components/ChatWindow";
@@ -22,32 +22,35 @@ import WeChatPayDialog from "../components/WeChatPayDialog";
 import QQDialog from "../components/QQDialog";
 import KnowlegePlanetDialog from "../components/KnowlegePlanetDialog";
 import { useTranslation } from "next-i18next";
+import { useRouter } from "next/router";
 
 const Home: NextPage = () => {
   const { session, status } = useAuth();
-  const [name, setName] = React.useState<string>("");
-  const [goalInput, setGoalInput] = React.useState<string>("");
-  const [agent, setAgent] = React.useState<AutonomousAgent | null>(null);
-  const [customApiKey, setCustomApiKey] = React.useState<string>("");
-  const [customModelName, setCustomModelName] =
-    React.useState<string>(GPT_35_TURBO);
-  const [customTemperature, setCustomTemperature] = React.useState<number>(0.9);
-  const [customMaxLoops, setCustomMaxLoops] = React.useState<number>(
+  const [name, setName] = useState<string>("");
+  const [goalInput, setGoalInput] = useState<string>("");
+  const [agent, setAgent] = useState<AutonomousAgent | null>(null);
+  const [customApiKey, setCustomApiKey] = useState<string>("");
+  const [customModelName, setCustomModelName] = useState<string>(GPT_35_TURBO);
+  const [customTemperature, setCustomTemperature] = useState<number>(0.9);
+  const [customMaxLoops, setCustomMaxLoops] = useState<number>(
     DEFAULT_MAX_LOOPS_FREE
   );
-  const [shouldAgentStop, setShouldAgentStop] = React.useState(false);
-
-  const [messages, setMessages] = React.useState<Message[]>([]);
-
-  const [showHelpDialog, setShowHelpDialog] = React.useState(false);
-  const [showSettingsDialog, setShowSettingsDialog] = React.useState(false);
-  const [hasSaved, setHasSaved] = React.useState(false);
-  const [showWeChatDialog, setShowWeChatDialog] = React.useState(false);
-  const [showWeChatPayDialog, setShowWeChatPayDialog] = React.useState(false);
-  const [showQQDialog, setShowQQDialog] = React.useState(false);
+  const [shouldAgentStop, setShouldAgentStop] = useState(false);
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [showHelpDialog, setShowHelpDialog] = useState(false);
+  const [showSettingsDialog, setShowSettingsDialog] = useState(false);
+  const [hasSaved, setHasSaved] = useState(false);
+  const [showWeChatDialog, setShowWeChatDialog] = useState(false);
+  const [showWeChatPayDialog, setShowWeChatPayDialog] = useState(false);
+  const [showQQDialog, setShowQQDialog] = useState(false);
   const [showKnowlegePlanetDialog, setShowKnowlegePlanetDialog] =
-    React.useState(false);
-  const { t } = useTranslation();
+    useState(false);
+  const { t, i18n } = useTranslation();
+  const [customLanguage, setCustomLanguage] = React.useState<string>(
+    i18n.language
+  );
+
+  const router = useRouter();
 
   const agentUtils = useAgent();
 
@@ -90,7 +93,13 @@ const Home: NextPage = () => {
       goalInput,
       handleAddMessage,
       () => setAgent(null),
-      { customApiKey, customModelName, customTemperature, customMaxLoops },
+      {
+        customApiKey,
+        customModelName,
+        customTemperature,
+        customMaxLoops,
+        customLanguage,
+      },
       session ?? undefined
     );
     setAgent(agent);
@@ -110,6 +119,15 @@ const Home: NextPage = () => {
     agent?.stopAgent();
   };
 
+  const handleLanguageChange = () => {
+    const { pathname, asPath, query, locale } = router;
+    const lng = locale === "en" ? "zh" : "en";
+    router.push({ pathname, query }, asPath, {
+      locale: lng,
+    });
+    setCustomLanguage(lng);
+  };
+
   const proTitle = (
     <>
       AutoGPT Next Web<span className="ml-1 text-amber-500/90">Pro</span>
@@ -162,6 +180,7 @@ const Home: NextPage = () => {
           showWeChat={() => setShowWeChatDialog(true)}
           showQQ={() => setShowQQDialog(true)}
           showKnowledgePlanet={() => setShowKnowlegePlanetDialog(true)}
+          handleLanguageChange={handleLanguageChange}
         />
         <div
           id="content"
diff --git a/src/services/agent-service.ts b/src/services/agent-service.ts
index 689917fa..be99106c 100644
--- a/src/services/agent-service.ts
+++ b/src/services/agent-service.ts
@@ -15,6 +15,7 @@ async function startGoalAgent(modelSettings: ModelSettings, goal: string) {
     prompt: startGoalPrompt,
   }).call({
     goal,
+    customLanguage: modelSettings.customLanguage,
   });
   console.log("Completion:" + (completion.text as string));
   return extractTasks(completion.text as string, []);
@@ -31,6 +32,7 @@ async function executeTaskAgent(
   }).call({
     goal,
     task,
+    customLanguage: modelSettings.customLanguage,
   });
 
   return completion.text as string;
@@ -52,6 +54,7 @@ async function createTasksAgent(
     tasks,
     lastTask,
     result,
+    customLanguage: modelSettings.customLanguage,
   });
 
   return extractTasks(completion.text as string, completedTasks || []);
diff --git a/src/utils/prompts.ts b/src/utils/prompts.ts
index 4633e140..85fbada6 100644
--- a/src/utils/prompts.ts
+++ b/src/utils/prompts.ts
@@ -17,18 +17,18 @@ export const createModel = (settings: ModelSettings) =>
 
 export const startGoalPrompt = new PromptTemplate({
   template:
-    "You are an autonomous task creation AI called AgentGPT. You have the following objective `{goal}`. Create a list of zero to three tasks to be completed by your AI system such that your goal is more closely reached or completely reached. Return the response as an array of strings that can be used in JSON.parse()",
-  inputVariables: ["goal"],
+    "You are an autonomous task creation AI called AgentGPT. You have the following objective `{goal}`. Create a list of zero to three tasks to be completed by your AI system such that your goal is more closely reached or completely reached. Use the `{customLanguage}` language and respond only with the Array which has the following syntax:`[1...3 tasks on the given language]`",
+  inputVariables: ["goal", "customLanguage"],
 });
 
 export const executeTaskPrompt = new PromptTemplate({
   template:
-    "You are an autonomous task execution AI called AgentGPT. You have the following objective `{goal}`. You have the following tasks `{task}`. Execute the task and return the response as a string.",
-  inputVariables: ["goal", "task"],
+    "You are an autonomous task execution AI called AgentGPT. You have the following objective `{goal}`. You have the following tasks `{task}`.You have to use the `{customLanguage}` language. Execute the given task and respond only with a one-line text as solution for the given task on the given language.",
+  inputVariables: ["goal", "task", "customLanguage"],
 });
 
 export const createTasksPrompt = new PromptTemplate({
   template:
-    "You are an AI task creation agent. You have the following objective `{goal}`. You have the following incomplete tasks `{tasks}` and have just executed the following task `{lastTask}` and received the following result `{result}`. Based on this, create a new task to be completed by your AI system ONLY IF NEEDED such that your goal is more closely reached or completely reached. Return the response as an array of strings that can be used in JSON.parse() and NOTHING ELSE",
-  inputVariables: ["goal", "tasks", "lastTask", "result"],
+    "You are an AI task creation agent and your objective  is to `{goal}`. You have the following incomplete tasks `{tasks}` and have just executed the following task `{lastTask}` and received the following solution `{result}`. Based on this, create a new task to be completed by your AI system ONLY IF NEEDED such that your goal is more closely reached or completely reached. Use the `{customLanguage}` language to create the new task. Respond only with an Array of the new task or tasks which has the following syntax:`[the remaining and appropriate new task or tasks on the language you have to use]`",
+  inputVariables: ["goal", "tasks", "lastTask", "result", "customLanguage"],
 });
diff --git a/src/utils/types.ts b/src/utils/types.ts
index c15c5296..6e7b5ae3 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -3,4 +3,5 @@ export type ModelSettings = {
   customModelName: string;
   customTemperature: number;
   customMaxLoops: number;
+  customLanguage: string;
 };