updates to config and available tools map

Author: samolego

tools/server/webui/src/Config.ts

@@ -1,7 +1,5 @@
 import daisyuiThemes from 'daisyui/theme/object';
 import { isNumeric } from './utils/misc';
-import { AVAILABLE_TOOLS } from './utils/tool_calling/register_tools';
-import { AgentTool } from './utils/tool_calling/agent_tool';
 
 export const isDev = import.meta.env.MODE === 'development';
 
@@ -43,13 +41,7 @@ export const CONFIG_DEFAULT = {
   custom: '', // custom json-stringified object
   // experimental features
   pyIntepreterEnabled: false,
-  // Fields for tool calling
-  ...Object.fromEntries(
-    Array.from(AVAILABLE_TOOLS.values()).map((tool: AgentTool) => [
-      `tool_${tool.id}_enabled`,
-      false,
-    ])
-  ),
+  toolJsReplEnabled: false,
 };
 export const CONFIG_INFO: Record<string, string> = {
   apiKey: 'Set the API Key if you are using --api-key option for the server.',

tools/server/webui/src/components/SettingDialog.tsx

@@ -14,8 +14,6 @@ import {
   WrenchScrewdriverIcon,
 } from '@heroicons/react/24/outline';
 import { OpenInNewTab } from '../utils/common';
-import { AVAILABLE_TOOLS } from '../utils/tool_calling/register_tools';
-import { AgentTool } from '../utils/tool_calling/agent_tool';
 
 type SettKey = keyof typeof CONFIG_DEFAULT;
 
@@ -180,24 +178,21 @@ const SETTING_SECTIONS: SettingSection[] = [
       </>
     ),
     fields: [
-      ...Array.from(AVAILABLE_TOOLS.values()).map(
-        (tool: AgentTool) =>
-          ({
-            type: SettingInputType.CHECKBOX,
-            label: (
-              <>
-                <span className="font-semibold">{tool.name || tool.id}</span>
-                {tool.toolDescription && (
-                  <small className="text-xs block mt-1 opacity-70">
-                    <strong>Agent tool description: </strong>
-                    {tool.toolDescription}
-                  </small>
-                )}
-              </>
-            ),
-            key: `tool_${tool.id}_enabled` as SettKey,
-          }) as SettingFieldInput
-      ),
+      {
+        type: SettingInputType.CHECKBOX,
+        label: (
+          <>
+            <span className="font-semibold">JavaScript Interpreter</span>
+            <small className="text-xs block mt-1 opacity-70">
+              <strong>Agent tool description: </strong>
+              Executes JavaScript code in a sandboxed iframe. The code should be
+              self-contained valid javascript. Only console.log(variable) and
+              final result are included in response content.
+            </small>
+          </>
+        ),
+        key: 'toolJsReplEnabled',
+      },
     ],
   },
   {
@@ -559,13 +554,11 @@ function SettingsModalCheckbox({
   value,
   onChange,
   label,
-  disabled,
 }: {
   configKey: SettKey;
   value: boolean;
   onChange: (value: boolean) => void;
-  label: React.ReactElement | string;
-  disabled?: boolean;
+  label: string;
 }) {
   return (
     <div className="flex flex-row items-center mb-2">
@@ -574,7 +567,6 @@ function SettingsModalCheckbox({
         className="toggle"
         checked={value}
         onChange={(e) => onChange(e.target.checked)}
-        disabled={disabled}
       />
       <span className="ml-4">{label || configKey}</span>
     </div>

tools/server/webui/src/components/tool_calling/ToolCallArgsDisplay.tsx

@@ -7,15 +7,21 @@ export const ToolCallArgsDisplay = ({
   toolCall: ToolCallRequest;
   baseClassName?: string;
 }) => {
+  let parsedArgs = toolCall.function.arguments;
+  try {
+    parsedArgs = JSON.stringify(JSON.parse(parsedArgs), null, 2);
+  } catch (e) {
+    // Might still be generating
+  }
   return (
     <details className={baseClassName} open={false}>
       <summary className="collapse-title">
         <b>Tool call:</b> {toolCall.function.name}
       </summary>
       <div className="collapse-content">
-        <div className="font-bold mb-1">Arguments:</div>
+        <div className="mb-1">Arguments:</div>
         <pre className="whitespace-pre-wrap bg-base-300 p-2 rounded">
-          {toolCall.function.arguments}
+          {parsedArgs}
         </pre>
       </div>
     </details>

tools/server/webui/src/utils/app.context.tsx

@@ -1,6 +1,7 @@
 import React, { createContext, useContext, useEffect, useState } from 'react';
 import {
   APIMessage,
+  AvailableToolId,
   CanvasData,
   Conversation,
   LlamaCppServerProps,
@@ -312,7 +313,7 @@ export const AppContextProvider = ({
 
               // Process tool call
               const toolResult = await AVAILABLE_TOOLS.get(
-                toolCall.function.name
+                toolCall.function.name as AvailableToolId
               )?.processCall(toolCall);
 
               const toolMsg: PendingMessage = {

tools/server/webui/src/utils/tool_calling/agent_tool.ts

@@ -3,11 +3,12 @@ import {
   ToolCallOutput,
   ToolCallParameters,
   ToolCallSpec,
+  AvailableToolId,
 } from '../types';
 
 export abstract class AgentTool {
   constructor(
-    public readonly id: string,
+    public readonly id: AvailableToolId,
     public readonly name: string,
     public readonly toolDescription: string,
     public readonly parameters: ToolCallParameters,

tools/server/webui/src/utils/tool_calling/js_repl_tool.ts

@@ -3,6 +3,7 @@ import { AgentTool } from './agent_tool';
 
 // Import the HTML content as a raw string
 import iframeHTMLContent from '../../assets/iframe_sandbox.html?raw';
+import StorageUtils from '../storage';
 
 interface IframeMessage {
   call_id: string;
@@ -39,7 +40,7 @@ export class JSReplAgentTool extends AgentTool {
         },
         required: ['code'],
       } as ToolCallParameters,
-      () => true
+      () => StorageUtils.getConfig().toolJsReplEnabled
     );
     this.initIframe();
   }

tools/server/webui/src/utils/tool_calling/register_tools.ts

@@ -1,11 +1,12 @@
+import { AvailableToolId } from '../types';
 import { AgentTool } from './agent_tool';
 import { JSReplAgentTool } from './js_repl_tool';
 
 /**
  * Map of available tools for function calling.
  * Note that these tools are not necessarily enabled by the user.
  */
-export const AVAILABLE_TOOLS = new Map<string, AgentTool>();
+export const AVAILABLE_TOOLS = new Map<AvailableToolId, AgentTool>();
 
 function registerTool<T extends AgentTool>(tool: T): T {
   AVAILABLE_TOOLS.set(tool.id, tool);

tools/server/webui/src/utils/types.ts

@@ -115,6 +115,7 @@ export interface CanvasPyInterpreter {
 
 export type CanvasData = CanvasPyInterpreter;
 
+// The request for a tool call, which is received from the model.
 export interface ToolCallRequest {
   id: string;
   type: 'function';
@@ -125,6 +126,7 @@ export interface ToolCallRequest {
   };
 }
 
+// The specification of a tool call, which is sent to the model.
 export interface ToolCallSpec {
   type: 'function';
   function: {
@@ -134,18 +136,23 @@ export interface ToolCallSpec {
   };
 }
 
+// The parameters for a tool call, which defines the structure of the arguments.
 export interface ToolCallParameters {
   type: 'object';
   properties: object;
   required: string[];
 }
 
+// The output of a tool call, which is returned to the model.
 export interface ToolCallOutput {
   type: 'function_call_output';
   call_id: string;
   output: string;
 }
 
+// A list of available builtin tool IDs.
+export type AvailableToolId = 'javascript_interpreter';
+
 // a non-complete list of props, only contains the ones we need
 export interface LlamaCppServerProps {
   build_info: string;