Nicely format message for tool calls

2b7c03f3b0c9662471880b25b1ee83ea90f51860

Cohee <18619528+Cohee1207@users.noreply.github.com>

Parents: 2dad86e0769f803f674995a3b15ca48369144c36

public/scripts/tool-calling.js+23 -3 Viewed

         const definition = new ToolDefinition(name, description, parameters, action);
         this.#tools.set(name, definition);
+        console.log('[ToolManager] Registered function tool:', definition);
+    }
     /**

@@ -121,6 +122,7 @@ export class ToolManager {
121	}	122	}
122		123
123	this.#tools.delete(name);	124	this.#tools.delete(name);
		125	console.log(`[ToolManager] Unregistered function tool: ${name}`);
124	}	126	}
125		127
126	/**	128	/**

                 const parameters = toolCall.function.arguments;
                 const name = toolCall.function.name;
-                toastr.info('Invoking function tool: ' + name);
+                const toast = toastr.info(`Invoking function tool: ${name}`);
                 const result = await ToolManager.invokeFunctionTool(name, parameters);
+                toastr.clear(toast);
                 console.log('Function tool result:', result);
                 // Save a successful invocation

+    }
     /**
+     * Formats a message with tool invocations.
+     * @param {ToolInvocation[]} invocations Tool invocations.
+     * @returns {string} Formatted message with tool invocations.
+     */
+    static #formatMessage(invocations) {
+        const toolNames = invocations.map(i => i.name).join(', ');
+        const detailsElement = document.createElement('details');
+        const summaryElement = document.createElement('summary');
+        const preElement = document.createElement('pre');
+        const codeElement = document.createElement('code');
+        codeElement.textContent = JSON.stringify(invocations, null, 2);
+        summaryElement.textContent = `Performed tool calls: ${toolNames}`;
+        preElement.append(codeElement);
+        detailsElement.append(summaryElement, preElement);
+        return detailsElement.outerHTML;
+    }
+    /**
      * Saves function tool invocations to the last user chat message extra metadata.
      * @param {ToolInvocation[]} invocations Successful tool invocations
      */
     static saveFunctionToolInvocations(invocations) {
-        const toolNames = invocations.map(i => i.name).join(', ');
         const message = {
             name: systemUserName,
             force_avatar: system_avatar,
             is_system: true,
             is_user: false,
-            mes: `Performed tool calls: ${toolNames}`,
+            mes: ToolManager.#formatMessage(invocations),
             extra: {
                 isSmallSys: true,
                 tool_invocations: invocations,

public/style.css+9 -0 Viewed

     text-align: center;
+}
+.mes.smallSysMes pre {
+    text-align: initial;
+    word-break: break-all;
+}
+.mes.smallSysMes summary {
+    cursor: pointer;
+}
 .mes.smallSysMes .mes_text p:last-child {
     margin: 0;
+}