Merge pull request #16 from Dogtiti/feature/custom-prompts-language

feat: add custom language for prompts

Author: Dogtiti

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;

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 && (

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"

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 || []);

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"],
 });

src/utils/types.ts

@@ -3,4 +3,5 @@ export type ModelSettings = {
   customModelName: string;
   customTemperature: number;
   customMaxLoops: number;
+  customLanguage: string;
 };