Add first-pass implementation of LLM ReAct pattern

- <https://arxiv.org/pdf/2210.03629>
- <https://til.simonwillison.net/llms/python-react-pattern>

Author: jstrieb

TODO.md

@@ -42,6 +42,7 @@
     - ChatGPT
     - Huggingface
     - Ollama
+  - Tool function exception handling
 - Clipboard integration
   - Cut
   - Fix "put" behavior to copy formulas around to selection
@@ -85,6 +86,7 @@
   - Namespaced formula functions
   - Make parsing faster
     - Hand-written recursive descent
+  - Add <> as alternative for !=
 - Local storage
   - Save sheets
   - Load sheets

src/Llm.svelte

@@ -66,44 +66,49 @@
   let responsePromise = $state();
   let modelName = $state("Gemini");
   let template =
-    $state(`You modify a spreadsheet by executing JavaScript code. You output JavaScript code in Markdown blocks. You do not output any explanation or comments. You are concise and succinct. You are a technical expert with extensive experience with JavaScript and data science. You query the spreadsheet for more information if it would improve your response.
+    $state(`You modify a spreadsheet by executing JavaScript code. You output JavaScript code to run in Markdown blocks. You are a broadly knowledgeable, technical expert. 
+    
+First you plan. Then, you operate in a loop of think, query/action, PAUSE, result (sent by the user). You loop until the plan is complete, or until the user gives new instructions. Only the first message contains a plan, steps of the loop do not. If the user gives new instructions, make a new plan.
+
+
+You can run the following functions:
+- \${Object.entries(llmToolFunctions).map(([name, f]) => {
+  const args = f.toString().replaceAll("\\n", " ").replaceAll(/  */g, " ").match(/\\([^)]*\\)/)?.[0] ?? "";
+  return \`llmToolFunctions.\${name}\${args} \${f.description ?? ""}\`;
+}).join("\\n- ")}
+
 
 Formulas begin with an equals sign (\\\`=\\\`), and can contain:
 - Numbers such as \\\`123\\\` and \\\`-3.21\\\`
 - Strings such as \\\`"asdf"\\\` and \\\`"multi\\\\nline"\\\`
 - Singleton references in R1C1 notation such as \\\`R10C3\\\` (zero-indexed) and \\\`RC0\\\` for absolute references, \\\`R[-1]c[2]\\\` for relative references, and \\\`RC\\\` for self-references
+  - Row and column indices are zero-indexed
   - Negative absolute references start from the end of a row or column, such as \\\`R-1C-1\\\` to select the cell in the bottom right corner of the sheet, and \\\`R1C0:R1C-1\\\` to select all of row 1
 - Ranges such as \\\`R[-3]C:R[-1]C\\\`
 - References and ranges across sheets like \\\`S1!R1C1\\\` and \\\`S[1]!R2C2:R2C-1\\\` and \\\`S-1R2C3\\\` (the exclamation point is optional)
+  - Sheet indices are zero-indexed
 - Function calls (case insensitive) containing expressions as arguments such as \\\`sum(RC0:RC[-1])\\\`, \\\`sLiDeR(0, 10, 1)\\\`, and \\\`DOLLARS(PRODUCT(1 * 2 + 3, 4, 3, R[-1]C))\\\`
-- Optionally parenthesized binary operations combining any of the expressions above such as \\\`(RC[-2] + RC[-3]) * 100\\\` and \\\`1 + -2 + 3 ** 5\\\`
+- Optionally parenthesized binary operations combining any of the expressions above using standard JavaScript arithmetic operations such as \\\`(RC[-2] + RC[-3]) * 100\\\` and \\\`1 + -2 + 3 ** 5\\\`
 
 Formula function definitions have access to a \\\`this\\\` object with:
 - this.row and this.col - readonly
 - this.set(value)
 - this.element - writable with the HTML DOMElement that will be displayed in the cell (e.g., buttons, checkboxes, canvas, SVG, etc.)
 - this.style - writable with the CSS style string for the containing \\\`<td>\\\`
 
-You define any formula functions you use that do not already exist. To define formula functions, they must be assigned like: "functions.formula_name = function() {}" in a call to \\\`addFunction\\\`.
-
-
-The currently available formula functions are all of the JavaScript Math.* functions and: \${Object.keys(formulaFunctions).filter(k => !(k in Math)).join(", ")}.
-
-You can run the following functions:
-- \${Object.entries(llmToolFunctions).map(([name, f]) => {
-  const args = f.toString().replaceAll("\\n", " ").replaceAll(/  */g, " ").match(/\\([^)]*\\)/)?.[0] ?? "";
-  return \`llmToolFunctions.\${name}\${args} \${f.description ?? ""}\`;
-}).join("\\n- ")}
-
-Querying can only be used to get data from the environment. It cannot be used to ask the user questions. You can query multiple things at once.
+You add any formula functions you use if they do not already exist.
 
 
 Example:
 
 User:
-Find the receipt items that contain seafood items and make them red.
+Find the receipt items that contain seafood and make them red.
 
 Model:
+Plan: First, I should learn about the current sheets through a query. Then, I should find the items with seafood using another query. Then, I should check if there is already a formula to make items red. If not, I should add one. Finally, I should modify the formulas for the seafood item cells to wrap them in calls to the new red formula.
+
+Thought: I should learn more about the current sheets using a query.
+
 \\\`\\\`\\\`javascript
 const sheets = llmToolFunctions.getSheets();
 llmToolFunctions.query("Sheets", sheets);
@@ -116,21 +121,41 @@ sheets.forEach((sheet, sheetIndex) => {
 llmToolFunctions.query("First rows", firstRows);
 \\\`\\\`\\\`
 
+PAUSE
+
 User:
 Sheets: [{"name": "Sheet 1", "rows": 10, "cols": 3}, {"name": "Receipt", "rows": 6, "cols": 2}]
 First rows: {"Sheet 1": [null, null, null], "Receipt": ["=BOLD(\\\\"Item\\\\")", "=BOLD(\\\\"Cost\\\\")"]}
 
 Model:
+Thought: I should find the cells that might contain seafood. I now know that I can identify them by the "Item" column.
+
 \\\`\\\`\\\`javascript
 llmToolFunctions.query("Items", new Array(6).fill().map(
   (_, i) => llmToolFunctions.getCellFormula(1, i, 0)
 ));
 \\\`\\\`\\\`
 
+PAUSE
+
 User:
 Items: ["=BOLD(\\\\"Items\\\\")", "shrimp", "chicken", "vegetables", "scallops", "cups"]
 
 Model:
+Thought: Now that I know which rows contain seafood, I should check to see if there is already a formula to make items red.
+
+\\\`\\\`\\\`javascript
+llmToolFunctions.query("Formulas", llmToolFunctions.getFormulaFunctionsList());
+\\\`\\\`\\\`
+
+PAUSE
+
+User:
+Formulas: [ "abs", "acos", ..., "average", "rand", "slider", "bold", "center", "dollars", "sparkbars", "checkbox" ]
+
+Model:
+Thought: Since there is no formula to make items red, I should add one. And I can make the seafood item cells red to complete my task.
+
 \\\`\\\`\\\`javascript
 llmToolFunctions.addFunction(\\\`
 functions.red = function (s) {

src/llm.svelte.js

@@ -11,6 +11,14 @@ llmToolFunctions.newSheet = function (name, cells) {
 llmToolFunctions.newSheet.description =
   "takes a 2D array of strings containing formulas";
 
+llmToolFunctions.addRow = function (sheetIndex, offset) {
+  this.globals.sheets[sheetIndex]?.addRows(1, offset);
+};
+
+llmToolFunctions.addCol = function (sheetIndex, offset) {
+  this.globals.sheets[sheetIndex]?.addCols(1, offset);
+};
+
 llmToolFunctions.addFunction = function (code) {
   this.globals.formulaCode += `\n${code}\n`;
 };
@@ -29,6 +37,10 @@ llmToolFunctions.setCellFormula = function (sheetIndex, row, col, formula) {
   this.globals.sheets[sheetIndex].cells[row][col].formula = formula;
 };
 
+llmToolFunctions.getFormulaFunctionsList = function () {
+  return Object.keys(functions);
+};
+
 llmToolFunctions.getFormulaFunction = function (name) {
   return functions[name].toString();
 };
@@ -59,6 +71,10 @@ llmModels.Gemini = {
           "Content-Type": "application/json",
         },
         body: JSON.stringify({
+          generation_config: {
+            temperature: 0.3,
+            stop_sequences: ["PAUSE"],
+          },
           system_instruction: {
             parts: conversation
               .filter(({ role }) => role == "system")
@@ -89,6 +105,8 @@ llmModels.Gemini = {
         console.error(e);
         throw e;
       });
-    return response?.candidates?.[0]?.content?.parts?.map(({ text }) => text);
+    return response?.candidates?.[0]?.content?.parts
+      ?.map(({ text }) => text.trim())
+      .filter((text) => text);
   },
 };