Improve the both frontend and backend for CodeActAgent (#1494)

* improve the both frontend and backend for CodeActAgent

* fix linter

* update integration test

agenthub/codeact_agent/codeact_agent.py

@@ -34,6 +34,14 @@ def parse_response(response) -> str:
             action += f'</execute_{lang}>'
     return action
 
+def truncate_observation(observation: str, max_chars: int=5000) -> str:
+    """
+    Truncate the middle of the observation if it is too long.
+    """
+    if len(observation) <= max_chars:
+        return observation
+    half = max_chars // 2
+    return observation[:half] + '\n[... Observation truncated due to length ...]\n' + observation[-half:]
 
 class CodeActAgent(Agent):
     """
@@ -117,9 +125,10 @@ class CodeActAgent(Agent):
                     if obs.content.strip() == '/exit':
                         return AgentFinishAction()
                 elif isinstance(obs, CmdOutputObservation):
-                    content = 'OBSERVATION:\n' + obs.content
+                    content = 'OBSERVATION:\n' + truncate_observation(obs.content)
                     content += f'\n[Command {obs.command_id} finished with exit code {obs.exit_code}]]'
                     self.messages.append({'role': 'user', 'content': content})
+
                 elif isinstance(obs, IPythonRunCellObservation):
                     content = 'OBSERVATION:\n' + obs.content
                     # replace base64 images with a placeholder
@@ -128,6 +137,7 @@ class CodeActAgent(Agent):
                         if '![image](data:image/png;base64,' in line:
                             splited[i] = '![image](data:image/png;base64, ...) already displayed to user'
                     content = '\n'.join(splited)
+                    content = truncate_observation(content)
                     self.messages.append({'role': 'user', 'content': content})
                 else:
                     raise NotImplementedError(

agenthub/codeact_agent/prompt.py

@@ -40,9 +40,9 @@ The assistant should stop <execute> and provide an answer when they have already
 
 {_COMMAND_DOCS}
 
-Whenever possible, execute the code for the user using <execute_ipython> or <execute_bash> instead of providing it.
 The assistant's response should be concise, but do express their thoughts.
 Try to include one of <execute_ipython> or <execute_bash> in each of your responses, unless it is a direct answer to a question OR a message to the user.
+IMPORTANT: Whenever possible, execute the code for the user using <execute_ipython> or <execute_bash> instead of providing it.
 """
 
 EXAMPLES = """

docs/modules/python/agenthub/codeact_agent/codeact_agent.md

@@ -3,6 +3,14 @@ sidebar_label: codeact_agent
 title: agenthub.codeact_agent.codeact_agent
 ---
 
+#### truncate\_observation
+
+```python
+def truncate_observation(observation: str, max_chars: int = 5000) -> str
+```
+
+Truncate the middle of the observation if it is too long.
+
 ## CodeActAgent Objects
 
 ```python

frontend/src/components/Jupyter.tsx

@@ -28,6 +28,21 @@ function JupyterCell({ cell }: IJupyterCell): JSX.Element {
       </div>
     );
   }
+
+  // aggregate all the NON-image lines into a single plaintext.
+  const lines: { type: "plaintext" | "image"; content: string }[] = [];
+  let current = "";
+  for (const line of code.split("\n")) {
+    if (line.startsWith("![image](data:image/png;base64,")) {
+      lines.push({ type: "plaintext", content: current });
+      lines.push({ type: "image", content: line });
+      current = "";
+    } else {
+      current += `${line}\n`;
+    }
+  }
+  lines.push({ type: "plaintext", content: current });
+
   return (
     <div className="rounded-lg bg-gray-800 dark:bg-gray-900 p-2 text-xs">
       <div className="mb-1 text-gray-400">STDOUT/STDERR</div>
@@ -35,25 +50,22 @@ function JupyterCell({ cell }: IJupyterCell): JSX.Element {
         className="scrollbar-custom scrollbar-thumb-gray-500 hover:scrollbar-thumb-gray-400 dark:scrollbar-thumb-white/10 dark:hover:scrollbar-thumb-white/20 overflow-auto px-5 max-h-[60vh] bg-gray-800"
         style={{ padding: 0, marginBottom: 0, fontSize: "0.75rem" }}
       >
-        {/* split code by newline and render each line as a plaintext, except it starts with `![image]` so we render it as markdown */}
-        {code.split("\n").map((line, index) => {
-          if (line.startsWith("![image](data:image/png;base64,")) {
-            // add new line before and after the image
+        {/* display the lines as plaintext or image */}
+        {lines.map((line, index) => {
+          if (line.type === "image") {
             return (
               <div key={index}>
                 <Markdown urlTransform={(value: string) => value}>
-                  {line}
+                  {line.content}
                 </Markdown>
-                <br />
               </div>
             );
           }
           return (
             <div key={index}>
               <SyntaxHighlighter language="plaintext" style={atomOneDark}>
-                {line}
+                {line.content}
               </SyntaxHighlighter>
-              <br />
             </div>
           );
         })}

frontend/src/components/file-explorer/FileExplorer.tsx

@@ -6,7 +6,11 @@ import {
   IoIosCloudUpload,
 } from "react-icons/io";
 import { twMerge } from "tailwind-merge";
-import { WorkspaceFile, getWorkspace, uploadFile } from "#/services/fileService";
+import {
+  WorkspaceFile,
+  getWorkspace,
+  uploadFile,
+} from "#/services/fileService";
 import IconButton from "../IconButton";
 import ExplorerTree from "./ExplorerTree";
 import { removeEmptyNodes } from "./utils";

frontend/src/components/modals/settings/SettingsModal.tsx

@@ -76,14 +76,14 @@ function SettingsModal({ isOpen, onOpenChange }: SettingsProps) {
     i18next.changeLanguage(settings.LANGUAGE);
     initializeAgent(settings); // reinitialize the agent with the new settings
 
-    const sensitiveKeys = ['LLM_API_KEY'];
+    const sensitiveKeys = ["LLM_API_KEY"];
 
     Object.entries(updatedSettings).forEach(([key, value]) => {
-        if (!sensitiveKeys.includes(key)) {
-            toast.settingsChanged(`${key} set to "${value}"`);
-        } else {
-            toast.settingsChanged(`${key} has been updated securely.`);
-        }
+      if (!sensitiveKeys.includes(key)) {
+        toast.settingsChanged(`${key} set to "${value}"`);
+      } else {
+        toast.settingsChanged(`${key} has been updated securely.`);
+      }
     });
 
     localStorage.setItem(

tests/integration/mock/CodeActAgent/test_write_simple_script/prompt_001.log

@@ -28,9 +28,9 @@ edit <start_line>:<end_line>
 end_of_edit - replaces lines <start_line> through <end_line> (inclusive) with the given text in the open file. The replacement text is terminated by a line with only end_of_edit on it. All of the <replacement text> will be entered, so make sure your indentation is formatted properly. Python files will be checked for syntax errors after the edit. If the system detects a syntax error, the edit will not be executed. Simply try to edit the file again, but make sure to read the error message and modify the edit command you issue accordingly. Issuing the same command a second time will just lead to the same error message again.
 Please note that THE EDIT COMMAND REQUIRES PROPER INDENTATION. If you'd like to add the line '        print(x)' you must fully write that out, with all those spaces before the code! Indentation is important and code that is not indented correctly will fail and require fixing before it can be run.
 
-Whenever possible, execute the code for the user using <execute_ipython> or <execute_bash> instead of providing it.
 The assistant's response should be concise, but do express their thoughts.
 Try to include one of <execute_ipython> or <execute_bash> in each of your responses, unless it is a direct answer to a question OR a message to the user.
+IMPORTANT: Whenever possible, execute the code for the user using <execute_ipython> or <execute_bash> instead of providing it.
 
 
 ----------

tests/integration/mock/CodeActAgent/test_write_simple_script/prompt_002.log

@@ -28,9 +28,9 @@ edit <start_line>:<end_line>
 end_of_edit - replaces lines <start_line> through <end_line> (inclusive) with the given text in the open file. The replacement text is terminated by a line with only end_of_edit on it. All of the <replacement text> will be entered, so make sure your indentation is formatted properly. Python files will be checked for syntax errors after the edit. If the system detects a syntax error, the edit will not be executed. Simply try to edit the file again, but make sure to read the error message and modify the edit command you issue accordingly. Issuing the same command a second time will just lead to the same error message again.
 Please note that THE EDIT COMMAND REQUIRES PROPER INDENTATION. If you'd like to add the line '        print(x)' you must fully write that out, with all those spaces before the code! Indentation is important and code that is not indented correctly will fail and require fixing before it can be run.
 
-Whenever possible, execute the code for the user using <execute_ipython> or <execute_bash> instead of providing it.
 The assistant's response should be concise, but do express their thoughts.
 Try to include one of <execute_ipython> or <execute_bash> in each of your responses, unless it is a direct answer to a question OR a message to the user.
+IMPORTANT: Whenever possible, execute the code for the user using <execute_ipython> or <execute_bash> instead of providing it.
 
 
 ----------
@@ -216,7 +216,7 @@ Write a shell script 'hello.sh' that prints 'hello'.
 
 ----------
 
-Let's start by creating the shell script `hello.sh` that prints "hello". I'll write the script and save it to a file.
+Sure, I'll create a shell script named `hello.sh` that prints "hello". Let's start by writing the script.
 
 <execute_bash>
 echo "echo 'hello'" > hello.sh

tests/integration/mock/CodeActAgent/test_write_simple_script/prompt_003.log

@@ -28,9 +28,9 @@ edit <start_line>:<end_line>
 end_of_edit - replaces lines <start_line> through <end_line> (inclusive) with the given text in the open file. The replacement text is terminated by a line with only end_of_edit on it. All of the <replacement text> will be entered, so make sure your indentation is formatted properly. Python files will be checked for syntax errors after the edit. If the system detects a syntax error, the edit will not be executed. Simply try to edit the file again, but make sure to read the error message and modify the edit command you issue accordingly. Issuing the same command a second time will just lead to the same error message again.
 Please note that THE EDIT COMMAND REQUIRES PROPER INDENTATION. If you'd like to add the line '        print(x)' you must fully write that out, with all those spaces before the code! Indentation is important and code that is not indented correctly will fail and require fixing before it can be run.
 
-Whenever possible, execute the code for the user using <execute_ipython> or <execute_bash> instead of providing it.
 The assistant's response should be concise, but do express their thoughts.
 Try to include one of <execute_ipython> or <execute_bash> in each of your responses, unless it is a direct answer to a question OR a message to the user.
+IMPORTANT: Whenever possible, execute the code for the user using <execute_ipython> or <execute_bash> instead of providing it.
 
 
 ----------
@@ -216,7 +216,7 @@ Write a shell script 'hello.sh' that prints 'hello'.
 
 ----------
 
-Let's start by creating the shell script `hello.sh` that prints "hello". I'll write the script and save it to a file.
+Sure, I'll create a shell script named `hello.sh` that prints "hello". Let's start by writing the script.
 
 <execute_bash>
 echo "echo 'hello'" > hello.sh
@@ -230,7 +230,7 @@ OBSERVATION:
 
 ----------
 
-The shell script `hello.sh` has been successfully created. Would you like to run the script to see the output, or is there anything else you'd like to do with it?
+The shell script `hello.sh` has been successfully created. If you'd like, I can run the script to show you the output. Would you like me to proceed with executing the script?
 
 ----------
 

tests/integration/mock/CodeActAgent/test_write_simple_script/prompt_004.log

@@ -28,9 +28,9 @@ edit <start_line>:<end_line>
 end_of_edit - replaces lines <start_line> through <end_line> (inclusive) with the given text in the open file. The replacement text is terminated by a line with only end_of_edit on it. All of the <replacement text> will be entered, so make sure your indentation is formatted properly. Python files will be checked for syntax errors after the edit. If the system detects a syntax error, the edit will not be executed. Simply try to edit the file again, but make sure to read the error message and modify the edit command you issue accordingly. Issuing the same command a second time will just lead to the same error message again.
 Please note that THE EDIT COMMAND REQUIRES PROPER INDENTATION. If you'd like to add the line '        print(x)' you must fully write that out, with all those spaces before the code! Indentation is important and code that is not indented correctly will fail and require fixing before it can be run.
 
-Whenever possible, execute the code for the user using <execute_ipython> or <execute_bash> instead of providing it.
 The assistant's response should be concise, but do express their thoughts.
 Try to include one of <execute_ipython> or <execute_bash> in each of your responses, unless it is a direct answer to a question OR a message to the user.
+IMPORTANT: Whenever possible, execute the code for the user using <execute_ipython> or <execute_bash> instead of providing it.
 
 
 ----------
@@ -216,7 +216,7 @@ Write a shell script 'hello.sh' that prints 'hello'.
 
 ----------
 
-Let's start by creating the shell script `hello.sh` that prints "hello". I'll write the script and save it to a file.
+Sure, I'll create a shell script named `hello.sh` that prints "hello". Let's start by writing the script.
 
 <execute_bash>
 echo "echo 'hello'" > hello.sh
@@ -230,7 +230,7 @@ OBSERVATION:
 
 ----------
 
-The shell script `hello.sh` has been successfully created. Would you like to run the script to see the output, or is there anything else you'd like to do with it?
+The shell script `hello.sh` has been successfully created. If you'd like, I can run the script to show you the output. Would you like me to proceed with executing the script?
 
 ----------
 
@@ -238,7 +238,7 @@ can you run it to make sure it is working?
 
 ----------
 
-Sure, let's run the script `hello.sh` to ensure it's working correctly.
+Certainly! Let's run the `hello.sh` script to ensure it's working as expected.
 
 <execute_bash>
 bash hello.sh

tests/integration/mock/CodeActAgent/test_write_simple_script/prompt_005.log

@@ -1,259 +0,0 @@
-
-
-----------
-
-A chat between a curious user and an artificial intelligence assistant. The assistant gives helpful, detailed, and polite answers to the user's questions.
-The assistant can interact with an interactive Python (Jupyter Notebook) environment and receive the corresponding output when needed. The code should be enclosed using "<execute_ipython>" tag, for example:
-<execute_ipython>
-print("Hello World!")
-</execute_ipython>
-The assistant can execute bash commands on behalf of the user by wrapping them with <execute_bash> and </execute_bash>.
-For example, you can list the files in the current directory by <execute_bash> ls </execute_bash>.
-The assistant should attempt fewer things at a time instead of putting too much commands OR code in one "execute" block.
-The assistant can install Python packages through bash by <execute_bash> pip install [package needed] </execute_bash> and should always import packages and define variables before starting to use them.
-The assistant should stop <execute> and provide an answer when they have already obtained the answer from the execution result.
-
-
-Apart from the standard bash commands, you can also use the following special commands in <execute_bash> environment:
-open <path> [<line_number>] - opens the file at the given path in the editor. If line_number is provided, the window will be move to include that line
-goto <line_number> - moves the window to show <line_number>
-scroll_down - moves the window down {WINDOW} lines
-scroll_up - moves the window down {WINDOW} lines
-create <filename> - creates and opens a new file with the given name
-search_dir <search_term> [<dir>] - searches for search_term in all files in dir. If dir is not provided, searches in the current directory
-search_file <search_term> [<file>] - searches for search_term in file. If file is not provided, searches in the current open file
-find_file <file_name> [<dir>] - finds all files with the given name in dir. If dir is not provided, searches in the current directory
-edit <start_line>:<end_line>
-<replacement_text>
-end_of_edit - replaces lines <start_line> through <end_line> (inclusive) with the given text in the open file. The replacement text is terminated by a line with only end_of_edit on it. All of the <replacement text> will be entered, so make sure your indentation is formatted properly. Python files will be checked for syntax errors after the edit. If the system detects a syntax error, the edit will not be executed. Simply try to edit the file again, but make sure to read the error message and modify the edit command you issue accordingly. Issuing the same command a second time will just lead to the same error message again.
-Please note that THE EDIT COMMAND REQUIRES PROPER INDENTATION. If you'd like to add the line '        print(x)' you must fully write that out, with all those spaces before the code! Indentation is important and code that is not indented correctly will fail and require fixing before it can be run.
-
-Whenever possible, execute the code for the user using <execute_ipython> or <execute_bash> instead of providing it.
-The assistant's response should be concise, but do express their thoughts.
-Try to include one of <execute_ipython> or <execute_bash> in each of your responses, unless it is a direct answer to a question OR a message to the user.
-
-
-----------
-
-Here is an example of how you can interact with the environment for task solving:
-
---- START OF EXAMPLE ---
-
-USER: Can you create a list of numbers from 1 to 10, and create a web page to display them at port 5000?
-
-ASSISTANT:
-Sure! Let me write the Python code for starting a web server and save it to a file `app.py`:
-<execute_ipython>
-CODE='''
-from flask import Flask
-app = Flask(__name__)
-
-@app.route('/')
-def index():
-    numbers = list(range(1, 11))
-    return str(numbers)
-
-if __name__ == '__main__':
-    app.run(port=5000)
-'''
-with open('app.py', 'w') as f:
-    f.write(CODE)
-</execute_ipython>
-
-USER:
-Observation:
-[Code executed successfully with no output]
-
-ASSISTANT:
-I have created a Python file `app.py` that will display a list of numbers from 1 to 10 when you run it. Let me run the Python file for you:
-<execute_bash>
-python3 app.py > server.log 2>&1 &
-</execute_bash>
-
-USER:
-Observation:
-[1] 121[1]+  Exit 1                  python3 app.py > server.log 2>&1
-
-ASSISTANT: Looks like the server is running with PID 121 then crashed. Let me check the server log:
-<execute_bash>
-cat server.log
-</execute_bash>
-
-USER:
-Observation:
-Traceback (most recent call last):
-  File "/workspace/app.py", line 2, in <module>
-    from flask import Flask
-ModuleNotFoundError: No module named 'flask'
-
-ASSISTANT:
-It seems that Flask is not installed. Let me install Flask for you:
-<execute_bash>
-pip install flask
-</execute_bash>
-
-USER:
-Observation:
-Defaulting to user installation because normal site-packages is not writeable
-Collecting flask
-  Using cached flask-3.0.3-py3-none-any.whl (101 kB)
-Collecting blinker>=1.6.2
-  Using cached blinker-1.7.0-py3-none-any.whl (13 kB)
-Collecting Werkzeug>=3.0.0
-  Using cached werkzeug-3.0.2-py3-none-any.whl (226 kB)
-Collecting click>=8.1.3
-  Using cached click-8.1.7-py3-none-any.whl (97 kB)
-Collecting itsdangerous>=2.1.2
-  Using cached itsdangerous-2.2.0-py3-none-any.whl (16 kB)
-Requirement already satisfied: Jinja2>=3.1.2 in /home/opendevin/.local/lib/python3.10/site-packages (from flask) (3.1.3)
-Requirement already satisfied: MarkupSafe>=2.0 in /home/opendevin/.local/lib/python3.10/site-packages (from Jinja2>=3.1.2->flask) (2.1.5)
-Installing collected packages: Werkzeug, itsdangerous, click, blinker, flask
-Successfully installed Werkzeug-3.0.2 blinker-1.7.0 click-8.1.7 flask-3.0.3 itsdangerous-2.2.0
-
-ASSISTANT:
-Now that Flask is installed, let me run the Python file again:
-<execute_bash>
-python3 app.py > server.log 2>&1 &
-</execute_bash>
-
-USER:
-Observation:
-[1] 124
-
-ASSISTANT:
-Let me check the server log again:
-<execute_bash>
-cat server.log
-</execute_bash>
-
-USER:
-Observation:
-* Serving Flask app 'app'
- * Debug mode: off
-WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
- * Running on http://127.0.0.1:5000
-Press CTRL+C to quit
-
-ASSISTANT:
-The server is running on port 5000 with PID 124. You can access the list of numbers by visiting http://127.0.0.1:5000. If you have any further questions, feel free to ask!
-
-USER: Now kill the server, make it display the numbers in a table format.
-
-ASSISTANT:
-Sure! Let me stop the server first:
-<execute_bash>
-kill 124
-</execute_bash>
-
-USER:
-Observation:
-[1]+  Terminated              python3 app.py > server.log 2>&1
-
-ASSISTANT:
-The server has been stopped. Let me open the Python file and modify it.
-<execute_bash>
-open app.py
-</execute_bash>
-
-USER:
-[File: /workspace/app.py (11 lines total)]
-1:
-2:from flask import Flask
-3:app = Flask(__name__)
-4:
-5:@app.route('/')
-6:def index():
-7:    numbers = list(range(1, 11))
-8:    return str(numbers)
-9:
-10:if __name__ == '__main__':
-11:    app.run(port=5000)
-
-ASSISTANT:
-I should edit the file to display the numbers in a table format. Let me do that for you:
-
-<execute_bash>
-edit 8:8 <<EOF
-    return '<table>' + ''.join([f'<tr><td>{i}</td></tr>' for i in numbers]) + '</table>'
-EOF
-</execute_bash>
-
-USER:
-Observation:
-[File: /workspace/app.py (11 lines total)]
-1:
-2:from flask import Flask
-3:app = Flask(__name__)
-4:
-5:@app.route('/')
-6:def index():
-7:    numbers = list(range(1, 11))
-8:    return '<table>' + ''.join([f'<tr><td>{i}</td></tr>' for i in numbers]) + '</table>'
-9:
-10:if __name__ == '__main__':
-11:    app.run(port=5000)
-File updated. Please review the changes and make sure they are correct (correct indentation, no duplicate lines, etc). Edit the file again if necessary.
-
-ASSISTANT:
-The file has been updated. Let me run the Python file again with the new changes:
-<execute_bash>
-python3 app.py > server.log 2>&1 &
-</execute_bash>
-
-USER:
-Observation:
-[1] 126
-
-ASSISTANT:
-The server is running on port 5000 with PID 126. You can access the list of numbers in a table format by visiting http://127.0.0.1:5000. Free free to let me know if you have any further requests!
-
---- END OF EXAMPLE ---
-
-
-NOW, LET'S START!
-
-Write a shell script 'hello.sh' that prints 'hello'.
-
-----------
-
-Let's start by creating the shell script `hello.sh` that prints "hello". I'll write the script and save it to a file.
-
-<execute_bash>
-echo "echo 'hello'" > hello.sh
-</execute_bash>
-
-----------
-
-OBSERVATION:
-
-[Command -1 finished with exit code 0]]
-
-----------
-
-The shell script `hello.sh` has been successfully created. Would you like to run the script to see the output, or is there anything else you'd like to do with it?
-
-----------
-
-can you run it to make sure it is working?
-
-----------
-
-Sure, let's run the script `hello.sh` to ensure it's working correctly.
-
-<execute_bash>
-bash hello.sh
-</execute_bash>
-
-----------
-
-OBSERVATION:
-hello
-[Command -1 finished with exit code 0]]
-
-----------
-
-The script `hello.sh` is working correctly as it printed "hello". If you have any more tasks or need further modifications, feel free to let me know!
-
-----------
-
-can you run it to make sure it is working?

tests/integration/mock/CodeActAgent/test_write_simple_script/response_001.log

@@ -1,4 +1,4 @@
-Let's start by creating the shell script `hello.sh` that prints "hello". I'll write the script and save it to a file.
+Sure, I'll create a shell script named `hello.sh` that prints "hello". Let's start by writing the script.
 
 <execute_bash>
 echo "echo 'hello'" > hello.sh

tests/integration/mock/CodeActAgent/test_write_simple_script/response_002.log

@@ -1 +1 @@
-The shell script `hello.sh` has been successfully created. Would you like to run the script to see the output, or is there anything else you'd like to do with it?
+The shell script `hello.sh` has been successfully created. If you'd like, I can run the script to show you the output. Would you like me to proceed with executing the script?

tests/integration/mock/CodeActAgent/test_write_simple_script/response_003.log

@@ -1,4 +1,4 @@
-Sure, let's run the script `hello.sh` to ensure it's working correctly.
+Certainly! Let's run the `hello.sh` script to ensure it's working as expected.
 
 <execute_bash>
 bash hello.sh

tests/integration/mock/CodeActAgent/test_write_simple_script/response_004.log

@@ -1 +1 @@
-The script `hello.sh` is working correctly as it printed "hello". If you have any more tasks or need further modifications, feel free to let me know!
+The script `hello.sh` is working correctly and prints "hello" as expected. If you have any more tasks or need further modifications, feel free to let me know!

tests/integration/mock/CodeActAgent/test_write_simple_script/response_005.log

@@ -1 +0,0 @@
-The script `hello.sh` was just run and it successfully printed "hello". If you need any further assistance or have another task in mind, please let me know!