enhance: don't allow tools to be removed from the catalog modal

Don't allow tools to be removed from an assistant from the catalog modal. Also, ensure the modal closes after selecting a tool to add. Signed-off-by: Nick Hale <4175918+njhale@users.noreply.github.com>
gptscript-ai · Aug 26, 2024 · 4b9965f · 4b9965f
1 parent f077725
commit 4b9965f
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 52 deletions.
diff --git a/components/chat/chatBar/commands.tsx b/components/chat/chatBar/commands.tsx
@@ -204,22 +204,6 @@ export default function Commands({
           ]);
           setToolCatalogOpen(false);
         }}
-        removeTool={(tool) => {
-          socket?.emit('removeTool', tool);
-          setMessages((prev) => [
-            ...prev,
-            {
-              type: MessageType.Alert,
-              icon: <GoTools className="mt-1" />,
-              name: prev ? prev[prev.length - 1].name : undefined,
-              message: `Removed ${tool
-                .split('/')
-                .pop()
-                ?.replace(/-/g, ' ')
-                .replace(/\b\w/g, (c) => c.toUpperCase())}`,
-            },
-          ]);
-        }}
         isOpen={toolCatalogOpen}
         setIsOpen={setToolCatalogOpen}
       />

diff --git a/components/chat/chatBar/toolCatalog.tsx b/components/chat/chatBar/toolCatalog.tsx
@@ -6,15 +6,13 @@ interface ToolCatalogModalProps {
   isOpen: boolean;
   setIsOpen: (open: boolean) => void;
   addTool: (tool: string) => void;
-  removeTool: (tool: string) => void;
 }
 
 const ToolCatalogModal: React.FC<ToolCatalogModalProps> = ({
   tools,
   isOpen,
   setIsOpen,
   addTool,
-  removeTool,
 }) => {
   return (
     <Modal
@@ -31,11 +29,7 @@ const ToolCatalogModal: React.FC<ToolCatalogModalProps> = ({
     >
       <ModalContent>
         <ModalBody>
-          <ToolCatalog
-            tools={tools}
-            addTool={addTool}
-            removeTool={removeTool}
-          />
+          <ToolCatalog tools={tools} addTool={addTool} />
         </ModalBody>
       </ModalContent>
     </Modal>

diff --git a/components/edit/configure/imports.tsx b/components/edit/configure/imports.tsx
@@ -173,13 +173,6 @@ const Imports: React.FC<ImportsProps> = ({
           addTool={(tool) => {
             setTools([...(tools || []), tool]);
           }}
-          removeTool={(tool) => {
-            if (isRemote(tool)) {
-              deleteRemoteTool(tool);
-            } else {
-              setTools(tools?.filter((t) => t !== tool) || []);
-            }
-          }}
         />
         {enableLocal && (
           <Button

diff --git a/components/edit/configure/imports/toolCatalog.tsx b/components/edit/configure/imports/toolCatalog.tsx
@@ -374,18 +374,13 @@ const featuredTools: FeaturedTools = {
 interface ToolCatalogProps {
   tools: string[] | undefined;
   addTool: (tool: string) => void;
-  removeTool: (tool: string) => void;
 }
 
 interface ToolsSiteResponse {
   tools: Record<string, Tool[]>;
 }
 
-const ToolCatalog: React.FC<ToolCatalogProps> = ({
-  tools,
-  addTool,
-  removeTool,
-}) => {
+const ToolCatalog: React.FC<ToolCatalogProps> = ({ tools, addTool }) => {
   const [url, setUrl] = useState('');
   const [query, setQuery] = useState('');
   const [searchResults, setSearchResults] = useState({} as ToolsSiteResponse);
@@ -478,11 +473,10 @@ const ToolCatalog: React.FC<ToolCatalogProps> = ({
                         startContent={
                           tools?.includes(repo) ? <GoCheck /> : <GoPlus />
                         }
+                        disabled={tools?.includes(repo)}
                         color={tools?.includes(repo) ? 'success' : 'primary'}
                         onPress={() => {
-                          if (tools?.includes(repo)) {
-                            removeTool(repo);
-                          } else {
+                          if (!tools?.includes(repo)) {
                             addTool(repo);
                           }
                         }}
@@ -576,7 +570,6 @@ const ToolCatalog: React.FC<ToolCatalogProps> = ({
                                   icon: <GoTools className="text-2xl" />,
                                 });
                               } else {
-                                removeTool(url);
                                 priorityTools['From URL'] = priorityTools[
                                   'From URL'
                                 ].filter((t) => t.url !== url);
@@ -621,16 +614,15 @@ const ToolCatalog: React.FC<ToolCatalogProps> = ({
                           isIconOnly
                           radius="full"
                           variant="flat"
+                          disabled={tools?.includes(tool.url)}
                           startContent={
                             tools?.includes(tool.url) ? <GoCheck /> : <GoPlus />
                           }
                           color={
                             tools?.includes(tool.url) ? 'success' : 'primary'
                           }
                           onPress={() => {
-                            if (tools?.includes(tool.url)) {
-                              removeTool(tool.url);
-                            } else {
+                            if (!tools?.includes(tool.url)) {
                               addTool(tool.url);
                             }
                           }}

diff --git a/components/edit/configure/imports/toolCatalogModal.tsx b/components/edit/configure/imports/toolCatalogModal.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { Button, Modal, ModalBody, ModalContent } from '@nextui-org/react';
 import { GoTools } from 'react-icons/go';
 import ToolCatalog from '@/components/edit/configure/imports/toolCatalog';
@@ -7,16 +7,22 @@ import PropTypes from 'prop-types';
 interface ToolCatalogModalProps {
   tools: string[] | undefined;
   addTool: (tool: string) => void;
-  removeTool: (tool: string) => void;
 }
 
 const ToolCatalogModal: React.FC<ToolCatalogModalProps> = ({
   tools,
   addTool,
-  removeTool,
 }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
 
+  const addToolAndClose = useCallback(
+    (tool: string) => {
+      setIsModalOpen(false);
+      addTool(tool);
+    },
+    [addTool, isModalOpen, setIsModalOpen]
+  );
+
   return (
     <>
       <Button
@@ -44,11 +50,7 @@ const ToolCatalogModal: React.FC<ToolCatalogModalProps> = ({
       >
         <ModalContent>
           <ModalBody>
-            <ToolCatalog
-              tools={tools}
-              addTool={addTool}
-              removeTool={removeTool}
-            />
+            <ToolCatalog tools={tools} addTool={addToolAndClose} />
           </ModalBody>
         </ModalContent>
       </Modal>
@@ -60,7 +62,6 @@ ToolCatalogModal.propTypes = {
   // @ts-ignore
   tools: PropTypes.arrayOf(PropTypes.string).isRequired,
   addTool: PropTypes.func.isRequired,
-  removeTool: PropTypes.func.isRequired,
 };
 
 export default ToolCatalogModal;