feat: custom tool renderers

app/components/Message/Agent/Tool/Debug.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ToolCall } from '~/composables/useChat';
+import { formatToolValue, parseToolValue } from '~/utils/tool-rendering';
 
 const props = defineProps<{
     toolCall: Readonly<ToolCall>;
@@ -28,21 +29,21 @@ const input: ComputedRef<string> = computed(() => {
         case 'input':
             if (props.toolCall.input === null || props.toolCall.input === undefined) return '';
             if (props.toolCall.input!.type === 'json') {
-                return JSON.stringify(JSON.parse(props.toolCall.input!.value), null, 2);
+                return formatToolValue(props.toolCall.input);
             }
 
             return props.toolCall.input!.value;
         case 'output':
             if (props.toolCall.output === null || props.toolCall.output === undefined) return '';
             if (props.toolCall.output!.type === 'json') {
-                return JSON.stringify(JSON.parse(props.toolCall.output!.value), null, 2);
+                return formatToolValue(props.toolCall.output);
             }
 
             return props.toolCall.output!.value;
         case 'error':
             if (props.toolCall.error === null || props.toolCall.error === undefined) return '';
             if (props.toolCall.error!.type === 'json') {
-                return JSON.stringify(JSON.parse(props.toolCall.error!.value), null, 2);
+                return formatToolValue(props.toolCall.error);
             }
 
             return props.toolCall.error!.value;
@@ -55,7 +56,7 @@ const input: ComputedRef<string> = computed(() => {
                     traceObj.input = traceObj.input.value;
                     break;
                 case 'json':
-                    traceObj.input = JSON.parse(traceObj.input.value);
+                    traceObj.input = parseToolValue(props.toolCall.input);
                     break;
             }
 
@@ -64,7 +65,7 @@ const input: ComputedRef<string> = computed(() => {
                     traceObj.output = traceObj.output.value;
                     break;
                 case 'json':
-                    traceObj.output = JSON.parse(traceObj.output.value);
+                    traceObj.output = parseToolValue(props.toolCall.output);
                     break;
             }
 
@@ -73,7 +74,7 @@ const input: ComputedRef<string> = computed(() => {
                     traceObj.error = traceObj.error.value;
                     break;
                 case 'json':
-                    traceObj.error = JSON.parse(traceObj.error.value);
+                    traceObj.error = parseToolValue(props.toolCall.error);
                     break;
             }