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	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;
                 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;
+}