From 1e076a3e4367cc228bb63cadaed3812298897308 Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Wed, 2 Oct 2024 23:32:29 +0300
Subject: [PATCH] Prettify displayed message

---
 public/scripts/tool-calling.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/public/scripts/tool-calling.js b/public/scripts/tool-calling.js
index b3c8ac1b1..dd1d1d8c4 100644
--- a/public/scripts/tool-calling.js
+++ b/public/scripts/tool-calling.js
@@ -342,7 +342,7 @@ export class ToolManager {
 
                 // Save a successful invocation
                 if (result) {
-                    invocations.push({ id, name, result, parameters });
+                    invocations.push({ id, name, parameters, result });
                 }
             }
         }
@@ -383,12 +383,16 @@ export class ToolManager {
      * @returns {string} Formatted message with tool invocations.
      */
     static #formatMessage(invocations) {
-        const toolNames = invocations.map(i => i.name).join(', ');
+        const tryParse = (x) => { try { return JSON.parse(x); } catch { return x; } };
+        const data = structuredClone(invocations);
         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);
+        codeElement.classList.add('language-json');
+        data.forEach(i => i.parameters = tryParse(i.parameters));
+        codeElement.textContent = JSON.stringify(data, null, 2);
+        const toolNames = data.map(i => i.name).join(', ');
         summaryElement.textContent = `Performed tool calls: ${toolNames}`;
         preElement.append(codeElement);
         detailsElement.append(summaryElement, preElement);