Disable the tools button if the provider cannot handle it

Author: brichet

schema/chat.json

@@ -22,12 +22,6 @@
       "title": "AI persona name",
       "description": "The name of the AI persona",
       "default": "Jupyternaut"
-    },
-    "UseTool": {
-      "type": "boolean",
-      "title": "Use tool",
-      "description": "Whether tools are available in chat or not",
-      "default": false
     }
   },
   "additionalProperties": false

schema/provider-registry.json

@@ -11,6 +11,12 @@
       "description": "Whether to use or not the secrets manager. If not, secrets will be stored in the browser (local storage)",
       "default": true
     },
+    "AllowToolsUsage": {
+      "type": "boolean",
+      "title": "Allow tools usage",
+      "description": "Whether tools are available in chat or not",
+      "default": true
+    },
     "UniqueProvider": {
       "type": "boolean",
       "title": "Use the same provider for chat and completer",

src/chat-handler.ts

@@ -24,11 +24,10 @@ import {
   SystemMessage
 } from '@langchain/core/messages';
 import { UUID } from '@lumino/coreutils';
-import { ISignal, Signal } from '@lumino/signaling';
 
 import { DEFAULT_CHAT_SYSTEM_PROMPT } from './default-prompts';
 import { jupyternautLiteIcon } from './icons';
-import { IAIProviderRegistry, IToolRegistry, Tool } from './tokens';
+import { IAIProviderRegistry, IToolRegistry } from './tokens';
 import { AIChatModel } from './types/ai-model';
 
 /**
@@ -66,6 +65,13 @@ export class ChatHandler extends AbstractChatModel {
     });
   }
 
+  /**
+   * The provider registry.
+   */
+  get providerRegistry(): IAIProviderRegistry {
+    return this._providerRegistry;
+  }
+
   /**
    * Get the tool registry.
    */
@@ -104,44 +110,13 @@ export class ChatHandler extends AbstractChatModel {
     this._personaName = value;
   }
 
-  /**
-   * Getter/setter for the use of tools.
-   */
-  get useTool(): boolean {
-    return this._useTool;
-  }
-  set useTool(value: boolean) {
-    if (this._useTool !== value) {
-      this._useTool = value;
-      this._useToolChanged.emit(this._useTool);
-    }
-  }
-
-  /**
-   * Get/set a tool, which will build an agent.
-   */
-  get tools(): Tool[] {
-    return this._tools;
-  }
-  set tools(value: Tool[]) {
-    this._tools = value;
-    this._providerRegistry.buildAgent(this._tools);
-  }
-
-  /**
-   * A signal triggered when the setting on tool usage has changed.
-   */
-  get useToolChanged(): ISignal<ChatHandler, boolean> {
-    return this._useToolChanged;
-  }
-
   /**
    * Get the system prompt for the chat.
    */
   get systemPrompt(): string {
     let prompt =
       this._providerRegistry.chatSystemPrompt ?? DEFAULT_CHAT_SYSTEM_PROMPT;
-    if (this.useTool && this.agent !== null) {
+    if (this.agent !== null) {
       prompt = prompt.concat('\nPlease use the tool that is provided');
     }
     return prompt;
@@ -194,7 +169,7 @@ export class ChatHandler extends AbstractChatModel {
     const sender = { username: this._personaName, avatar_url: AI_AVATAR };
     this.updateWriters([{ user: sender }]);
 
-    if (this._useTool && this.agent !== null) {
+    if (this.agent !== null) {
       return this._sendAgentMessage(this.agent, messages, sender);
     }
 
@@ -337,10 +312,7 @@ export class ChatHandler extends AbstractChatModel {
   private _history: IChatHistory = { messages: [] };
   private _defaultErrorMessage = 'AI provider not configured';
   private _controller: AbortController | null = null;
-  private _useTool: boolean = false;
-  private _tools: Tool[] = [];
   private _toolRegistry?: IToolRegistry;
-  private _useToolChanged = new Signal<ChatHandler, boolean>(this);
 }
 
 export namespace ChatHandler {
@@ -359,34 +331,17 @@ export namespace ChatHandler {
     users = [];
 
     /**
-     * The tool registry.
-     */
-    get toolsRegistry(): IToolRegistry | undefined {
-      return (this._model as ChatHandler).toolRegistry;
-    }
-
-    /**
-     * Whether to use or not the tool.
+     * The provider registry.
      */
-    get useTool(): boolean {
-      return (this._model as ChatHandler).useTool;
+    get providerRegistry(): IAIProviderRegistry {
+      return (this._model as ChatHandler).providerRegistry;
     }
 
     /**
-     * A signal triggered when the setting on tool usage has changed.
-     */
-    get useToolChanged(): ISignal<ChatHandler, boolean> {
-      return (this._model as ChatHandler).useToolChanged;
-    }
-
-    /**
-     * Getter/setter of the tool to use.
+     * The tool registry.
      */
-    get tools(): Tool[] {
-      return (this._model as ChatHandler).tools;
-    }
-    set tools(value: Tool[]) {
-      (this._model as ChatHandler).tools = value;
+    get toolsRegistry(): IToolRegistry | undefined {
+      return (this._model as ChatHandler).toolRegistry;
     }
   }
 

src/components/tool-select.tsx

@@ -10,7 +10,7 @@ import { Menu, MenuItem, Tooltip, Typography } from '@mui/material';
 import React, { useCallback, useEffect, useState } from 'react';
 
 import { ChatHandler } from '../chat-handler';
-import { Tool } from '../tokens';
+import { IAIProviderRegistry, Tool } from '../tokens';
 
 const SELECT_ITEM_CLASS = 'jp-AIToolSelect-item';
 
@@ -22,8 +22,10 @@ export function toolSelect(
 ): JSX.Element {
   const chatContext = props.model.chatContext as ChatHandler.ChatContext;
   const toolRegistry = chatContext.toolsRegistry;
+  const providerRegistry = chatContext.providerRegistry;
 
-  const [useTool, setUseTool] = useState<boolean>(chatContext.useTool);
+  const [allowTools, setAllowTools] = useState<boolean>(true);
+  const [agentAvailable, setAgentAvailable] = useState<boolean | undefined>();
   const [selectedTools, setSelectedTools] = useState<Tool[]>([]);
   const [tools, setTools] = useState<Tool[]>(toolRegistry?.tools || []);
   const [menuAnchorEl, setMenuAnchorEl] = useState<HTMLElement | null>(null);
@@ -47,7 +49,9 @@ export function toolSelect(
       currentTools.push(tool);
     }
     setSelectedTools(currentTools);
-    chatContext.tools = currentTools;
+    if (!providerRegistry.setTools(currentTools)) {
+      setSelectedTools([]);
+    }
   };
 
   useEffect(() => {
@@ -59,21 +63,37 @@ export function toolSelect(
   }, [toolRegistry]);
 
   useEffect(() => {
-    const updateUseTool = (_: ChatHandler, value: boolean) => setUseTool(value);
-    chatContext.useToolChanged.connect(updateUseTool);
+    const updateAllowTools = (_: IAIProviderRegistry, value: boolean) =>
+      setAllowTools(value);
+
+    const updateAgentAvailable = () =>
+      setAgentAvailable(providerRegistry.isAgentAvailable());
+
+    providerRegistry.allowToolsChanged.connect(updateAllowTools);
+    providerRegistry.providerChanged.connect(updateAgentAvailable);
+
+    setAllowTools(providerRegistry.allowTools);
+    setAgentAvailable(providerRegistry.isAgentAvailable());
     return () => {
-      chatContext.useToolChanged.disconnect(updateUseTool);
+      providerRegistry.allowToolsChanged.disconnect(updateAllowTools);
+      providerRegistry.providerChanged.disconnect(updateAgentAvailable);
     };
-  }, [chatContext]);
+  }, [providerRegistry]);
 
-  return useTool && tools.length ? (
+  return allowTools && tools.length ? (
     <>
       <TooltippedButton
         onClick={e => {
           openMenu(e.currentTarget);
         }}
-        disabled={!tools.length}
-        tooltip="Tool"
+        disabled={!agentAvailable}
+        tooltip={
+          agentAvailable === undefined
+            ? 'The provider is not set'
+            : agentAvailable
+              ? 'Tools'
+              : 'The provider or model cannot use tools'
+        }
         buttonProps={{
           variant: 'contained',
           onKeyDown: e => {

src/index.ts

@@ -83,19 +83,16 @@ const chatPlugin: JupyterFrontEndPlugin<void> = {
     let sendWithShiftEnter = false;
     let enableCodeToolbar = true;
     let personaName = 'AI';
-    let useTool = false;
 
     function loadSetting(setting: ISettingRegistry.ISettings): void {
       sendWithShiftEnter = setting.get('sendWithShiftEnter')
         .composite as boolean;
       enableCodeToolbar = setting.get('enableCodeToolbar').composite as boolean;
       personaName = setting.get('personaName').composite as string;
-      useTool = (setting.get('UseTool').composite as boolean) ?? false;
 
       // set the properties
       chatHandler.config = { sendWithShiftEnter, enableCodeToolbar };
       chatHandler.personaName = personaName;
-      chatHandler.useTool = useTool;
     }
 
     Promise.all([app.restored, settingsRegistry?.load(chatPlugin.id)])
@@ -208,16 +205,23 @@ const providerRegistryPlugin: JupyterFrontEndPlugin<IAIProviderRegistry> =
         })
       );
 
+      let allowToolsUsage = true;
+
       settingRegistry
         .load(providerRegistryPlugin.id)
         .then(settings => {
           if (!secretsManager) {
             delete settings.schema.properties?.['UseSecretsManager'];
           }
 
-          const updateProvider = () => {
+          const loadSetting = (setting: ISettingRegistry.ISettings) => {
+            // Allowing usage of tools in the chat.
+            allowToolsUsage =
+              (setting.get('AllowToolsUsage').composite as boolean) ?? false;
+            providerRegistry.allowTools = allowToolsUsage;
+
             // Get the Ai provider settings.
-            const providerSettings = settings.get('AIproviders')
+            const providerSettings = setting.get('AIproviders')
               .composite as ReadonlyPartialJSONObject;
 
             // Update completer provider.
@@ -239,8 +243,8 @@ const providerRegistryPlugin: JupyterFrontEndPlugin<IAIProviderRegistry> =
             }
           };
 
-          settings.changed.connect(() => updateProvider());
-          updateProvider();
+          settings.changed.connect(loadSetting);
+          loadSetting(settings);
         })
         .catch(reason => {
           console.error(