zoeissleeping/veridian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: custom tool renderers

Browse Source
This commit is contained in:
Zoe
2026-09-25 19:46:00 -05:00
parent 3f81f96bda
commit bb5795e00d
18 changed files with 1294 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Message/Agent/Tool/index.vue
+16 -32
View File
@@ -1,44 +1,28 @@
<script setup lang="ts">
import type { ToolCall } from '~/composables/useChat';
import Debug from './Debug.vue';
import type { MessagePart, ToolCall } from "~/composables/useChat";
import { computed } from "vue";
import Generic from "./Generic.vue";
import { resolveToolRenderer } from "./renderers";
const props = defineProps<{
toolCall: Readonly<ToolCall>;
part?: MessagePart;
}>();
const deubgToolCallOpen = ref(false);
const emit = defineEmits<{
retry: [];
}>();
const toggleDebugToolCall = () => {
deubgToolCallOpen.value = !deubgToolCallOpen.value;
};
const renderer = computed(() => resolveToolRenderer(props.toolCall.toolName));
</script>
<template>
<div class="flex flex-col gap-2">
<div
class="select-none w-full @hover:bg-[var(--color-hover)] group rounded-lg p-1 flex justify-between items-center text-[--text-tertiary] transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
<div class="flex items-center justify-between w-full">
<div class="flex items-center gap-1">
<div
class="w-[24px] h-[24px] flex-shrink-0 rounded-lg overflow-hidden bg-[var(--bg-surface)] flex items-center justify-center">
<span class="w-3 h-3" :class="{
'i-svg-spinners-180-ring-with-bg': toolCall.status === 'pending',
'i-mynaui-x-solid text-[#ff3b3b]': toolCall.status === 'failed',
'i-mynaui-tool': toolCall.status !== 'pending' && toolCall.status !== 'failed',
}"></span>
</div>
{{ toolCall.toolName }}
</div>
<div
class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
<button @click="toggleDebugToolCall"
class="w-[24px] h-[24px] flex-shrink-0 rounded-lg overflow-hidden @hover:bg-[var(--color-hover)] flex items-center justify-center transition-colors duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]">
<span class="i-mynaui-search w-3 h-3 text-[var(--text-secondary)]"></span>
</button>
</div>
</div>
</div>
<Debug v-if="deubgToolCallOpen" :toolCall="toolCall" />
<div class="flex flex-col min-w-0">
<NuxtErrorBoundary :key="toolCall.id + ':' + toolCall.toolName">
<component :is="renderer" :tool-call="toolCall" :part="part" @retry="emit('retry')"></component>
<template #error>
<Generic :tool-call="toolCall" :part="part" @retry="emit('retry')"></Generic>
</template>
</NuxtErrorBoundary>
</div>
</template>