feat: add ability to dynamically add tools and add dep management

Signed-off-by: tylerslaton <[email protected]>

Author: tylerslaton

components/edit/configure.tsx

@@ -33,6 +33,8 @@ const Configure: React.FC<ConfigureProps> = ({className, collapsed}) => {
         setVisibility,
         dynamicInstructions,
         setDynamicInstructions,
+        dependencies,
+        setDependencies,
     } = useContext(EditContext);
 
     const abbreviate = (name: string) => {
@@ -108,7 +110,12 @@ const Configure: React.FC<ConfigureProps> = ({className, collapsed}) => {
                                 Augment your instructions with code that can pull information from local or remote systems.
                             </p>
                         </div>
-                        <Code label="Code" code={dynamicInstructions} onChange={setDynamicInstructions} />
+                        <Code 
+                            code={dynamicInstructions}
+                            onChange={setDynamicInstructions}
+                            dependencies={dependencies.find((d) => d.forTool === 'dynamic-instructions')?.content || ''}
+                            onDependenciesChange={(code, type) => setDependencies([...dependencies.filter((d) => d.forTool !== 'dynamic-instructions'), {forTool: 'dynamic-instructions', content: code, type: type}])}
+                        />
                         {/* <div className="my-4"/>
                         <Code label="Dependencies" code={'// package.json'} onChange={(code) => {}} /> */}
                     </AccordionItem>

components/edit/configure/code.tsx

@@ -45,7 +45,9 @@ const CustomTool: React.FC<ConfigureProps> = ({className, tool}) => {
         setTools,
         tools,
         scriptPath,
-        models
+        models,
+        dependencies,
+        setDependencies,
     } = useContext(EditContext)
 
     useEffect(() => {
@@ -89,6 +91,15 @@ const CustomTool: React.FC<ConfigureProps> = ({className, tool}) => {
             return prevRoot;
         });
 
+        setDependencies((prevDeps) => {
+            return prevDeps.map((dep) => {
+                if (dep.forTool === customTool.name) {
+                    dep.forTool = name;
+                }
+                return dep;
+            });
+        });
+
         setTools((prevTools) => {
             let updatedTools = prevTools.map((t: Tool) => {
                 // replace all instances of the old name with the new name
@@ -98,6 +109,7 @@ const CustomTool: React.FC<ConfigureProps> = ({className, tool}) => {
             });
             return updatedTools;
         });
+
     }, [name])
 
     const setCustomToolTools = useCallback((newTools: string[]) => {
@@ -271,8 +283,12 @@ const CustomTool: React.FC<ConfigureProps> = ({className, tool}) => {
                                 }
                                 {instructionsType === "code" &&
                                     <>
-                                        <Code code={customTool.instructions || ''} onChange={(e) => setCustomTool({...customTool, instructions: e})}
- />
+                                        <Code 
+                                            code={customTool.instructions || ''}
+                                            onChange={(e) => setCustomTool({...customTool, instructions: e})}
+                                            dependencies={dependencies.find((d) => d.forTool === customTool.name)?.content || ''}
+                                            onDependenciesChange={(code, type) => setDependencies([...dependencies.filter((d) => d.forTool !== customTool.name), {forTool: customTool.name ||'', content: code, type: type}])}
+                                        />
                                     </>
                                 }
                             </div>

components/edit/configure/customTool.tsx

@@ -1,10 +1,11 @@
 import { Card, Listbox, ListboxItem, Menu } from "@nextui-org/react";
 import React, { useEffect, useContext } from "react";
-import { GoInbox, GoIssueReopened } from "react-icons/go";
+import { GoInbox, GoIssueReopened, GoTools } from "react-icons/go";
 import { PiToolbox } from "react-icons/pi";
 import { ScriptContext } from "@/contexts/script";
 import Upload from "@/components/script/chatBar/upload";
 import ToolCatalog from "@/components/script/chatBar/toolCatalog";
+import { MessageType } from "@/components/script/messages";
 
 /*
     note(tylerslaton):
@@ -56,7 +57,7 @@ export default function Commands({text, setText, isOpen, setIsOpen, children }:
     const [filteredOptions, setFilteredOptions] = React.useState<typeof options>(options);
     const [uploadOpen, setUploadOpen] = React.useState(false);
     const [toolCatalogOpen, setToolCatalogOpen] = React.useState(false);
-    const {restartScript} = useContext(ScriptContext);
+    const {restartScript, socket, setMessages, tools} = useContext(ScriptContext);
 
     useEffect(() => {
         if (!text.startsWith("/")) {
@@ -90,7 +91,37 @@ export default function Commands({text, setText, isOpen, setIsOpen, children }:
     return (
         <div className="relative w-full command-options">
             <Upload isOpen={uploadOpen} setIsOpen={setUploadOpen}/>
-            <ToolCatalog tools={[]} addTool={() => {}} removeTool={() => {}} isOpen={toolCatalogOpen} setIsOpen={setToolCatalogOpen}/>
+            <ToolCatalog 
+                tools={tools}
+                addTool={(tool) => {
+                    socket?.emit("addTool", tool);
+                    setMessages((prev) => [
+                        ...prev, 
+                        {
+                            type: MessageType.Alert,
+                            icon: <GoTools className="mt-1"/>,
+                            message: `Added ${
+                                tool.split("/").pop()?.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())
+                            }`
+                        }
+                    ]);
+                }}
+                removeTool={(tool) => {
+                    socket?.emit("removeTool", tool);
+                    setMessages((prev) => [
+                        ...prev, 
+                        {
+                            type: MessageType.Alert,
+                            icon: <GoTools className="mt-1"/>,
+                            message: `Removed ${
+                                tool.split("/").pop()?.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())
+                            }`
+                        }
+                    ]);
+                }}
+                isOpen={toolCatalogOpen}
+                setIsOpen={setToolCatalogOpen}
+            />
             {isOpen && !!filteredOptions.length && (
                 <Card className="absolute bottom-14 w-full p-4">
                     <Listbox aria-label="commands">

components/script/chatBar/commands.tsx

@@ -16,6 +16,7 @@ export enum MessageType {
 
 export type Message = {
     type: MessageType;
+    icon?: ReactNode;
     message?: string;
     error?: string;
     name?: string;
@@ -123,10 +124,16 @@ const Message = ({message, noAvatar, restart}: { message: Message, noAvatar?: bo
                 <div className="flex flex-col items-start mb-10">
                     <div className="flex gap-2 w-full">
                         <div
-                            className="w-full flex justify-center space-x-2 rounded-2xl text-black text-sm bg-gray-50 shadow text-center py-2 px-4 dark:text-white dark:border-zinc-800 dark:border dark:bg-black"
+                            className="w-full flex justify-center space-x-2 rounded-2xl text-black text-sm bg-zinc-50 shadow text-center py-2 px-4 dark:text-white dark:border-zinc-800 dark:border dark:bg-black"
                         >
-                            <div className="w-2 h-2 my-auto bg-green-500 rounded-full"></div>
-                            <p>{message.message}</p>
+                            {message.icon ? message.icon : <div className="w-2 h-2 my-auto bg-green-500 rounded-full"/>}
+                            <Markdown
+                                    className={`!text-wrap prose overflow-x-auto dark:prose-invert prose-thead:text-left prose-p:text-sm prose-img:rounded-xl prose-img:shadow-lg`}
+                                    remarkPlugins={[remarkGfm]}
+                                    rehypePlugins={[[rehypeExternalLinks, {target: "_blank"}]]}
+                            >
+                                {message.message}
+                            </Markdown>
                         </div>
                     </div>
                 </div>

components/script/messages.tsx

@@ -13,6 +13,7 @@ const useChatSocket = (isEmpty?: boolean) => {
     const [generating, setGenerating] = useState(false);
     const [running, setRunning] = useState(false);
     const [error, setError] = useState<string | null>(null);
+    const [tools, setTools] = useState<string[]>([]);
 
     // Refs
     const socketRef = useRef<Socket | null>(null);
@@ -173,6 +174,18 @@ const useChatSocket = (isEmpty?: boolean) => {
         }
     }, []);
 
+    const handleAddingTool = () => setRunning(false);
+    const handleToolAdded = (tools: string[]) => {
+        setTools(tools);
+        setRunning(true);
+    }
+
+    const handleRemovingTool = () => setRunning(false);
+    const handleToolRemoved = (tools: string[]) => {
+        setTools(tools);
+        setRunning(true);
+    }
+
     const parseToolCall = (toolCall: string): { tool: string, params: string } => {
         const [tool, params] = toolCall.replace('<tool call> ', '').split(' -> ');
         return {tool, params};
@@ -243,16 +256,17 @@ const useChatSocket = (isEmpty?: boolean) => {
         socket.on("running", () => setRunning(true));
         socket.on("progress", (data: { frame: CallFrame, state: any }) => handleProgress(data));
         socket.on("error", (data: string) => handleError(data));
-        socket.on("promptRequest", (data: { frame: PromptFrame, state: any }) => {
-            handlePromptRequest(data)
+        socket.on("promptRequest", (data: { frame: PromptFrame, state: any }) => handlePromptRequest(data));
+        socket.on("confirmRequest", (data: { frame: CallFrame, state: any }) => handleConfirmRequest(data));
+        socket.on("toolAdded", handleToolAdded);
+        socket.on("addingTool", handleAddingTool);
+        socket.on("toolRemoved", handleToolRemoved);
+        socket.on("removingTool", handleRemovingTool);
+        socket.on("loaded", (data: {messages: Message[], tools: string[]},) => {
+            setMessages(data.messages);
+            setTools(data.tools);
         });
-        socket.on("confirmRequest", (data: { frame: CallFrame, state: any }) => {
-            handleConfirmRequest(data)
-        });
-        socket.on("loaded", (data: Message[]) => {
-            setMessages(data)
-        });
-
+        
         setSocket(socket);
     }
 
@@ -294,14 +308,19 @@ const useChatSocket = (isEmpty?: boolean) => {
 
     return {
         error,
-        socket, setSocket,
-        connected, setConnected,
-        messages, setMessages,
+        socket, 
+        setSocket,
+        connected,
+        setConnected,
+        messages,
+        setMessages,
         restart,
         interrupt,
         generating,
         running,
         setRunning,
+        tools,
+        setTools,
     };
 };
 

components/script/useChatSocket.tsx

@@ -62,7 +62,7 @@ const Threads: React.FC<ThreadsProps> = ({className}) => {
                                     >
                                         <div className="flex justify-between items-center">
                                             <h2 className="text-sm truncate">{thread.meta.name}</h2>
-                                            <Menu thread={thread.meta.id}/>
+                                            <Menu thread={thread.meta.id} className={isSelected(thread.meta.id) ? 'text-white' : ''}/>
                                         </div>
                                     </div>
                                 </Tooltip>

components/threads.tsx

@@ -8,6 +8,11 @@ const DEBOUNCE_TIME = 1000; // milliseconds
 const DYNAMIC_INSTRUCTIONS = "dynamic-instructions";
 
 export type ToolType = "tool" | "context" | "agent";
+export type DependencyBlock = {
+    content: string;
+    forTool: string;
+    type: string;
+}
 
 interface EditContextProps {
     scriptPath: string,
@@ -18,6 +23,7 @@ interface EditContextState {
     loading: boolean;
     setLoading: (loading: boolean) => void;
     root: Tool;
+    dependencies: DependencyBlock[]; setDependencies: React.Dispatch<React.SetStateAction<DependencyBlock[]>>;
     models: string[], setModels: React.Dispatch<React.SetStateAction<string[]>>;
     setRoot: React.Dispatch<React.SetStateAction<Tool>>;
     tools: Tool[];
@@ -52,12 +58,16 @@ const EditContextProvider: React.FC<EditContextProps> = ({scriptPath, children})
     const [visibility, setVisibility] = useState<'public' | 'private' | 'protected'>('private');
     const [models, setModels] = useState<string[]>([]);
     const debounceTimer = useRef<NodeJS.Timeout | null>(null);
-
+    
     // Dynamic instructions are simply a text tool with the name "dynamic-instructions" that is 
     // imported as a context in the root tool. This field is used to store the instructions for
     // that tool.
     const [dynamicInstructions, setDynamicInstructions] = useState<string>('');
 
+    // Dependencies are special text tools that reference a tool, type, and content. They are used
+    // to store requirements.txt and package.json files for the script.
+    const [dependencies, setDependencies] = useState<DependencyBlock[]>([]);
+
     useEffect(() => {
         getModels().then((m) => {
             setModels(m)
@@ -85,7 +95,25 @@ const EditContextProvider: React.FC<EditContextProps> = ({scriptPath, children})
     useEffect(() => {
         if (loading) return;
         update();
-    }, [root, tools, visibility])
+    }, [root, tools, dependencies, visibility])
+
+    useEffect(() => {
+        setTools((prevTools) => {
+            return [
+                ...prevTools.filter((t) => t.name !== DYNAMIC_INSTRUCTIONS),
+                {name: DYNAMIC_INSTRUCTIONS, type: 'tool', instructions: dynamicInstructions}
+            ] as Tool[];
+        });
+
+        setRoot((prevRoot) => {
+            if (prevRoot.context?.includes(DYNAMIC_INSTRUCTIONS)) return prevRoot;
+            return {...prevRoot, context: [...(prevRoot.context || []), DYNAMIC_INSTRUCTIONS]};
+        });
+    }, [dynamicInstructions]);
+
+    useEffect(() => {
+
+    }, [dependencies])
 
     // The first tool in the script is not always the root tool, so we find it
     // by finding the first non-text tool in the script.
@@ -119,11 +147,11 @@ const EditContextProvider: React.FC<EditContextProps> = ({scriptPath, children})
         debounceTimer.current = setTimeout(async () => {
             await updateScript({
                 visibility: visibility,
-                content: await stringify([root, ...tools]),
+                content: await stringify([root, ...tools, ...dependenciesToText(dependencies)]),
                 id: scriptId,
             }).catch((error) => console.error(error));
         }, DEBOUNCE_TIME);
-    }, [scriptId, root, tools, visibility]);
+    }, [scriptId, root, tools, dependencies, visibility]);
 
     const newestToolName = useCallback(() => {
         let num = 1
@@ -171,25 +199,26 @@ const EditContextProvider: React.FC<EditContextProps> = ({scriptPath, children})
         });
     }
 
-    useEffect(() => {
-        setTools((prevTools) => {
-            return [
-                ...prevTools.filter((t) => t.name !== DYNAMIC_INSTRUCTIONS),
-                {name: DYNAMIC_INSTRUCTIONS, type: 'tool', instructions: dynamicInstructions}
-            ] as Tool[];
-        });
-
-        setRoot((prevRoot) => {
-            if (prevRoot.context?.includes(DYNAMIC_INSTRUCTIONS)) return prevRoot;
-            return {...prevRoot, context: [...(prevRoot.context || []), DYNAMIC_INSTRUCTIONS]};
-        });
-    }, [dynamicInstructions])
+    const dependenciesToText = (dependencies: DependencyBlock[]): Text[] => {
+        return dependencies
+            .filter((dep) => dep.content.trim() !== '') // Filter out empty dependencies
+            .map((dep) => {
+                return {
+                    id: `${dep.forTool}-${dep.type}`,
+                    format: `metadata:${dep.forTool}:${dep.type}`,
+                    type: 'text',
+                    content: dep.content,
+                    name: dep.forTool,
+                }
+            });
+    }
 
     // Provide the context value to the children components
     return (
         <EditContext.Provider
             value={{
                 scriptPath,
+                dependencies, setDependencies,
                 dynamicInstructions, setDynamicInstructions,
                 models, setModels,
                 loading, setLoading,

contexts/edit.tsx

@@ -22,6 +22,8 @@ interface ScriptContextState {
     scriptId?: string;
     scriptContent: ToolDef[] | null;
     workspace: string;
+    tools: string[];
+    setTools: React.Dispatch<React.SetStateAction<string[]>>;
     setWorkspace: React.Dispatch<React.SetStateAction<string>>;
     subTool: string;
     setSubTool: React.Dispatch<React.SetStateAction<string>>;
@@ -79,7 +81,7 @@ const ScriptContextProvider: React.FC<ScriptContextProps> = ({children, initialS
     const [initialFetch, setInitialFetch] = useState(false);
     const [subTool, setSubTool] = useState(initialSubTool || '');
     const { 
-        socket, connected, running, messages, setMessages, restart, interrupt, generating, error, setRunning
+        socket, connected, running, messages, setMessages, restart, interrupt, generating, error, setRunning, tools, setTools
     } = useChatSocket(isEmpty);
 
     // need to initialize the workspace from the env variable with serves
@@ -187,6 +189,8 @@ const ScriptContextProvider: React.FC<ScriptContextProps> = ({children, initialS
                 interrupt,
                 fetchThreads,
                 restartScript,
+                tools,
+                setTools,
             }}
         >
             {children}