fix: more specific CodeEditor.WRITE description prompt (#16)

* fix: more specific CodeEditor.WRITE description propmt

* fix: example might be confusing

* fix: handle \n on start of input

* fix: web ui html escape

* fix: put empty string if there's no observation on web

core/tools/editor/__init__.py

@@ -74,13 +74,16 @@ class CodeEditor(BaseToolSet):
         name="CodeEditor.WRITE",
         description="Write code to create a new tool. "
         "If the code is completed, use the Terminal tool to execute it, if not, append the code through the CodeEditor.APPEND tool. "
-        "Input should be filename and code. This file must be in playground folder. "
+        "Input should be formatted like: "
-        "ex. test.py\nprint('hello world')\n "
+        "<filename>\n<code>\n\n"
-        "and the output will be last 3 lines.",
+        "Here is an example: "
+        "test.py\nmessage = 'hello world'\nprint(message)\n"
+        "\n"
+        "The output will be last 3 lines you wrote.",
     )
     def write(self, inputs: str) -> str:
         try:
-            code = CodeWriter.write(inputs)
+            code = CodeWriter.write(inputs.lstrip())
             output = "Last 3 line was:\n" + "\n".join(code.split("\n")[-3:])
         except Exception as e:
             output = str(e)

static/execute.js

@@ -1,4 +1,12 @@
 const $ = (selector) => document.querySelector(selector);
+const escapeHtml = (unsafe) => {
+  return unsafe
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+};
 
 const setLoader = (isLoading) => {
   const button = $("#submit");
@@ -144,10 +152,10 @@ const submit = async () => {
     w.innerHTML = createActionCard(
       info.index,
       info.action,
-      info.action_input,
+      escapeHtml(info.action_input || ""),
       info.what_i_did,
       info.plan,
-      info.observation
+      escapeHtml(info.observation || "")
     );
     actions.appendChild(w);
   };
@@ -210,7 +218,7 @@ const createActionCard = (
               action !== "Final Answer"
                 ? `<tr>
                   <th style="width: 100px">Input</th>
-                  <td><div>${input}</div></td>
+                  <td><div style="white-space: pre-wrap">${input}</div></td>
                 </tr>`
                 : ""
             }
@@ -264,7 +272,7 @@ const createActionCard = (
             <tbody>
               <tr>
                 <td>
-                  <div>${observation}</div>
+                  <div style="white-space: pre-wrap">${observation}</div>
                 </td>
               </tr>
             </tbody>