feat: add better provider support, icons, regen, and a lot more

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

@@ -12,28 +12,6 @@ const deubgToolCallOpen = ref(false);
 const toggleDebugToolCall = () => {
     deubgToolCallOpen.value = !deubgToolCallOpen.value;
 };
-
-const iconName = ref('mynaui:tool');
-const iconColor = ref('var(--color-subtle)');
-
-watch(
-    () => props.toolCall.status,
-    (status) => {
-        switch (status) {
-            case 'pending':
-                iconName.value = 'svg-spinners:180-ring-with-bg';
-                break;
-            case 'completed':
-                iconName.value = 'mynaui:tool';
-                break;
-            case 'failed':
-                iconName.value = 'mynaui:x-solid';
-                iconColor.value = '#ff3b3b';
-                break;
-        }
-    },
-    { immediate: true },
-);
 </script>
 
 <template>
@@ -44,8 +22,12 @@ watch(
                 <div class="flex items-center gap-1">
                     <div
                         class="w-[24px] h-[24px] flex-shrink-0 rounded-lg overflow-hidden bg-[var(--color-neutral)] flex items-center justify-center">
-                        <Icon :name="iconName" :style="{ color: iconColor }"
+                        <!-- Explicityly avoid setting the name via a reactive value, otherwise you risk corrupting the icon with that name globally -->
+                        <Icon v-if="toolCall.status === 'pending'" name="svg-spinners:180-ring-with-bg"
                             class="w-3 h-3 text-[var(--color-subtle)]" />
+                        <Icon v-else-if="toolCall.status === 'failed'" name="mynaui:x-solid"
+                            class="w-3 h-3 text-[#ff3b3b]" />
+                        <Icon v-else name="mynaui:tool" class="w-3 h-3 text-[var(--color-subtle)]" />
                     </div>
                     {{ toolCall.toolName }}
                 </div>