feat: implement dynamic tool creation with deferred webpack rebuild and AI integration

Added runtime tool registry to Agent.ts for dynamic tool lookup

Implemented CreateNewTool agent tool for AI-driven code analysis and tool generation

Enabled deferred saving to avoid interrupting AI workflows with immediate rebuilds

Introduced user-controlled modal for confirming tool installation and page reload

Added REST API and secure server-side persistence for dynamic tools

Built TypeScript validation, transpilation, and sandboxed execution for safe tool handling

UI enhancements: modal with blur, responsive design, clear messaging

Ensured compatibility with Webpack using dynamic require() calls

Full error handling, code validation, and secure storage on client and server sides

1 files changed, 80 insertions, 0 deletions

diff --git a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx
index 470f94a8d..df6c5627c 100644
--- a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx
+++ b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx
@@ -79,6 +79,7 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     @observable private _citationPopup: { text: string; visible: boolean } = { text: '', visible: false };
     @observable private _isFontSizeModalOpen: boolean = false;
     @observable private _fontSize: 'small' | 'normal' | 'large' | 'xlarge' = 'normal';
+    @observable private _toolReloadModal: { visible: boolean; toolName: string } = { visible: false, toolName: '' };
 
     // Private properties for managing OpenAI API, vector store, agent, and UI elements
     private openai!: OpenAI; // Using definite assignment assertion
@@ -125,6 +126,9 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         // Create an agent with the vectorstore
         this.agent = new Agent(this.vectorstore, this.retrieveFormattedHistory.bind(this), this.retrieveCSVData.bind(this), this.createImageInDash.bind(this), this.createCSVInDash.bind(this), this.docManager);
 
+        // Set up the tool created callback
+        this.agent.setToolCreatedCallback(this.handleToolCreated);
+
         // Add event listeners
         this.addScrollListener();
 
@@ -1159,6 +1163,56 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         this._inputValue = question;
     };
 
+    /**
+     * Handles tool creation notification and shows the reload modal
+     * @param toolName The name of the tool that was created
+     */
+    @action
+    handleToolCreated = (toolName: string) => {
+        this._toolReloadModal = {
+            visible: true,
+            toolName: toolName,
+        };
+    };
+
+    /**
+     * Closes the tool reload modal
+     */
+    @action
+    closeToolReloadModal = () => {
+        this._toolReloadModal = {
+            visible: false,
+            toolName: '',
+        };
+    };
+
+    /**
+     * Handles the reload confirmation and triggers page reload
+     */
+    @action
+    handleReloadConfirmation = async () => {
+        // Close the modal first
+        this.closeToolReloadModal();
+
+        try {
+            // Perform the deferred tool save operation
+            const saveSuccess = await this.agent.performDeferredToolSave();
+
+            if (saveSuccess) {
+                console.log('Tool saved successfully, proceeding with reload...');
+            } else {
+                console.warn('Tool save failed, but proceeding with reload anyway...');
+            }
+        } catch (error) {
+            console.error('Error during deferred tool save:', error);
+        }
+
+        // Trigger page reload to rebuild webpack and load the new tool
+        setTimeout(() => {
+            window.location.reload();
+        }, 100);
+    };
+
     _dictation: DictationButton | null = null;
 
     /**
@@ -1434,6 +1488,32 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                         <div className="citation-content">{this._citationPopup.text}</div>
                     </div>
                 )}
+
+                {/* Tool Reload Modal */}
+                {this._toolReloadModal.visible && (
+                    <div className="tool-reload-modal-overlay">
+                        <div className="tool-reload-modal">
+                            <div className="tool-reload-modal-header">
+                                <h3>Tool Created Successfully!</h3>
+                            </div>
+                            <div className="tool-reload-modal-content">
+                                <p>
+                                    The tool <strong>{this._toolReloadModal.toolName}</strong> has been created and saved successfully.
+                                </p>
+                                <p>To make the tool available for future use, the page needs to be reloaded to rebuild the application bundle.</p>
+                                <p>Click "Reload Page" to complete the tool installation.</p>
+                            </div>
+                            <div className="tool-reload-modal-actions">
+                                <button className="reload-button primary" onClick={this.handleReloadConfirmation}>
+                                    Reload Page
+                                </button>
+                                <button className="close-button secondary" onClick={this.closeToolReloadModal}>
+                                    Later
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                )}
             </div>
         );
     }