minor changes, renames

Author: samolego

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

@@ -81,7 +81,6 @@ export default function ChatMessage({
 
       // Process <tool> tags (after thoughts are processed)
       const toolParts = currentContent.split('<tool>');
-      console.log(toolParts);
       currentContent = toolParts[0];
       if (toolParts.length > 1) {
         const tempToolOutputArray: string[] = [];

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

@@ -16,7 +16,7 @@ import {
 } from './misc';
 import { BASE_URL, CONFIG_DEFAULT, isDev } from '../Config';
 import { matchPath, useLocation, useNavigate } from 'react-router';
-import { AVAILABLE_TOOLS } from './tool_calling/available_tools';
+import { AVAILABLE_TOOLS } from './tool_calling/register_tools';
 
 interface AppContextValue {
   // conversations and messages
@@ -212,9 +212,9 @@ export const AppContextProvider = ({
         max_tokens: config.max_tokens,
         timings_per_token: !!config.showTokensPerSecond,
         tools: config.jsInterpreterToolUse
-          ? Array.from(AVAILABLE_TOOLS, ([_name, tool], _index) => tool).filter(
-              (tool) => tool.enabled()
-            )
+          ? Array.from(AVAILABLE_TOOLS, ([_name, tool], _index) => tool)
+              .filter((tool) => tool.enabled())
+              .map((tool) => tool.specs())
           : undefined,
         ...(config.custom.length ? JSON.parse(config.custom) : {}),
       };

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

@@ -22,7 +22,6 @@ export async function* getSSEStreamAsync(fetchResponse: Response) {
     .pipeThrough(new TextLineStream());
   // @ts-expect-error asyncIterator complains about type, but it should work
   for await (const line of asyncIterator(lines)) {
-    //if (isDev) console.log({ line });
     if (line.startsWith('data:') && !line.endsWith('[DONE]')) {
       const data = JSON.parse(line.slice(5));
       yield data;

tools/server/webui/src/utils/tool_calling/available_tools.ts renamed to tools/server/webui/src/utils/tool_calling/agent_tool.ts

@@ -1,19 +1,26 @@
-import { ToolCall, ToolCallOutput, ToolCallSpec } from '../types';
-
-/**
- * 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>();
+import {
+  ToolCall,
+  ToolCallOutput,
+  ToolCallParameters,
+  ToolCallSpec,
+} from '../types';
 
 export abstract class AgentTool {
   id: string;
   isEnabled: () => boolean;
+  toolDescription: string;
+  parameters: ToolCallParameters;
 
-  constructor(id: string, enabled: () => boolean) {
+  constructor(
+    id: string,
+    enabled: () => boolean,
+    toolDescription: string,
+    parameters: ToolCallParameters
+  ) {
     this.id = id;
     this.isEnabled = enabled;
-    AVAILABLE_TOOLS.set(id, this);
+    this.toolDescription = toolDescription;
+    this.parameters = parameters;
   }
 
   /**
@@ -43,7 +50,16 @@ export abstract class AgentTool {
    * https://github.com/ggml-org/llama.cpp/blob/master/docs/function-calling.md
    * https://platform.openai.com/docs/guides/function-calling?api-mode=responses#defining-functions
    */
-  public abstract specs(): ToolCallSpec;
+  public specs(): ToolCallSpec {
+    return {
+      type: 'function',
+      function: {
+        name: this.id,
+        description: this.toolDescription,
+        parameters: this.parameters,
+      },
+    };
+  }
 
   /**
    * The actual tool call processing logic.

tools/server/webui/src/utils/tool_calling/js_tool_call.ts renamed to tools/server/webui/src/utils/tool_calling/js_repl_tool.ts

@@ -1,23 +1,32 @@
 import StorageUtils from '../storage';
-import { ToolCall, ToolCallOutput, ToolCallSpec } from '../types';
-import { AgentTool } from './available_tools';
+import { ToolCall, ToolCallOutput, ToolCallParameters } from '../types';
+import { AgentTool } from './agent_tool';
 
-class JSReplAgentTool extends AgentTool {
+export class JSReplAgentTool extends AgentTool {
   private static readonly id = 'javascript_interpreter';
   private fakeLogger: FakeConsoleLog;
 
   constructor() {
     super(
       JSReplAgentTool.id,
-      () => StorageUtils.getConfig().jsInterpreterToolUse
+      () => StorageUtils.getConfig().jsInterpreterToolUse,
+      'Executes JavaScript code in the browser console. The code should be self-contained valid javascript. You can use console.log(variable) to print out intermediate values..',
+      {
+        type: 'object',
+        properties: {
+          code: {
+            type: 'string',
+            description: 'Valid JavaScript code to execute.',
+          },
+        },
+        required: ['code'],
+      } as ToolCallParameters
     );
     this.fakeLogger = new FakeConsoleLog();
   }
 
   _process(tc: ToolCall): ToolCallOutput {
     const args = JSON.parse(tc.function.arguments);
-    console.log('Arguments for tool call:');
-    console.log(args);
 
     // Redirect console.log which agent will use to
     // the fake logger so that later we can get the content
@@ -30,40 +39,16 @@ class JSReplAgentTool extends AgentTool {
       result = eval(args.code);
     } catch (err) {
       result = String(err);
-    } finally {
-      // Ensure original console.log is restored even if eval throws
-      console.log = originalConsoleLog;
     }
 
+    console.log = originalConsoleLog;
     result = this.fakeLogger.content + result;
 
     this.fakeLogger.clear();
 
     return { call_id: tc.call_id, output: result } as ToolCallOutput;
   }
-
-  public specs(): ToolCallSpec {
-    return {
-      type: 'function',
-      function: {
-        name: this.id,
-        description:
-          'Executes JavaScript code in the browser console. The code should be self-contained valid javascript. You can use console.log(variable) to print out intermediate values..',
-        parameters: {
-          type: 'object',
-          properties: {
-            code: {
-              type: 'string',
-              description: 'Valid JavaScript code to execute.',
-            },
-          },
-          required: ['code'],
-        },
-      },
-    };
-  }
 }
-export const jsAgentTool = new JSReplAgentTool();
 
 class FakeConsoleLog {
   private _content: string = '';

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

@@ -0,0 +1,21 @@
+import { isDev } from '../../Config';
+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>();
+
+function registerTool(tool: AgentTool): AgentTool {
+  AVAILABLE_TOOLS.set(tool.id, tool);
+  if (isDev)
+    console.log(
+      `Successfully registered tool: ${tool.id}, enabled: ${tool.isEnabled()}`
+    );
+  return tool;
+}
+
+// Available agent tools
+export const jsReplTool = registerTool(new JSReplAgentTool());

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

@@ -39,7 +39,7 @@ export interface Message {
   convId: string;
   type: 'text' | 'root';
   timestamp: number; // timestamp from Date.now()
-  role: 'user' | 'assistant' | 'system';
+  role: 'user' | 'assistant' | 'system' | 'tool';
   content: string;
   timings?: TimingReport;
   extra?: MessageExtra[];
@@ -105,14 +105,16 @@ export interface ToolCallSpec {
   function: {
     name: string;
     description: string;
-    parameters: {
-      type: 'object';
-      properties: object;
-      required: string[];
-    };
+    parameters: ToolCallParameters;
   };
 }
 
+export interface ToolCallParameters {
+  type: 'object';
+  properties: object;
+  required: string[];
+}
+
 export interface ToolCallOutput {
   type: 'function_call_output';
   call_id: string;