feat: populate settings tool calling section

Author: samolego

tools/server/webui/src/Config.ts

@@ -1,5 +1,7 @@
 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';
 
@@ -37,7 +39,11 @@ export const CONFIG_DEFAULT = {
   custom: '', // custom json-stringified object
   // experimental features
   pyIntepreterEnabled: false,
-  jsInterpreterToolUse: false,
+  // Fields for tool calling
+  streamResponse: true,
+  ...Array.from(AVAILABLE_TOOLS.values()).map((tool: AgentTool) => {
+    return `tool_${tool.id}_enabled`;
+  }),
 };
 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

@@ -11,8 +11,11 @@ import {
   FunnelIcon,
   HandRaisedIcon,
   SquaresPlusIcon,
+  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;
 
@@ -159,6 +162,40 @@ const SETTING_SECTIONS: SettingSection[] = [
       },
     ],
   },
+  {
+    title: (
+      <>
+        <WrenchScrewdriverIcon className={ICON_CLASSNAME} />
+        Tool Calling
+      </>
+    ),
+    fields: [
+      {
+        type: SettingInputType.CHECKBOX,
+        label: 'Enable response streaming',
+        key: 'streamResponse',
+      },
+      // Fields will be dynamically generated based on AVAILABLE_TOOLS
+      ...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
+      ),
+    ],
+  },
   {
     title: (
       <>
@@ -254,21 +291,6 @@ const SETTING_SECTIONS: SettingSection[] = [
         ),
         key: 'pyIntepreterEnabled',
       },
-      {
-        type: SettingInputType.CHECKBOX,
-        label: (
-          <>
-            <b>Enable JavaScript tool use</b>
-            <br />
-            <small className="text-xs">
-              This alows LLM to use browser your browser console as tool. If
-              model supports function calling, it can use the console to do e.g.
-              data analysis etc. by itself.
-            </small>
-          </>
-        ),
-        key: 'jsInterpreterToolUse',
-      },
     ],
   },
 ];

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

@@ -191,13 +191,10 @@ export const AppContextProvider = ({
         .filter((tool) => tool.enabled)
         .map((tool) => tool.specs);
 
-      // stream does not support tool-use (yet?)
-      const streamResponse = enabledTools.length === 0;
-
       // prepare params
       const params = {
         messages,
-        stream: streamResponse,
+        stream: config.streamResponse,
         cache_prompt: true,
         samplers: config.samplers,
         temperature: config.temperature,
@@ -246,7 +243,7 @@ export const AppContextProvider = ({
       let lastMsgId = pendingMsg.id;
       let shouldContinueChain = false;
 
-      if (streamResponse) {
+      if (params.stream) {
         const chunks = getSSEStreamAsync(fetchResponse);
         for await (const chunk of chunks) {
           // const stop = chunk.stop;

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

@@ -1,3 +1,4 @@
+import StorageUtils from '../storage';
 import {
   ToolCallRequest,
   ToolCallOutput,
@@ -8,7 +9,7 @@ import {
 export abstract class AgentTool {
   constructor(
     public readonly id: string,
-    private readonly isEnabledCallback: () => boolean,
+    public readonly name: string,
     public readonly toolDescription: string,
     public readonly parameters: ToolCallParameters
   ) {}
@@ -42,7 +43,7 @@ export abstract class AgentTool {
    * @returns enabled status.
    */
   public get enabled(): boolean {
-    return this.isEnabledCallback();
+    return StorageUtils.getConfig()[`tool_${this.id}_enabled`] ?? false;
   }
 
   /**

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

@@ -28,7 +28,7 @@ export class JSReplAgentTool extends AgentTool {
   constructor() {
     super(
       JSReplAgentTool.ID,
-      () => StorageUtils.getConfig().jsInterpreterToolUse,
+      'Javascript interpreter',
       'Executes JavaScript code in a sandboxed iframe. The code should be self-contained valid javascript. You can use console.log(variable) to print out intermediate values, which will be captured.',
       {
         type: 'object',

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

@@ -1,4 +1,3 @@
-import { isDev } from '../../Config';
 import { AgentTool } from './agent_tool';
 import { JSReplAgentTool } from './js_repl_tool';
 
@@ -10,11 +9,6 @@ export const AVAILABLE_TOOLS = new Map<string, AgentTool>();
 
 function registerTool<T extends AgentTool>(tool: T): T {
   AVAILABLE_TOOLS.set(tool.id, tool);
-  if (isDev) {
-    console.log(
-      `Successfully registered tool: ${tool.id}, enabled: ${tool.enabled}`
-    );
-  }
   return tool;
 }