<template>
    <div class="toolCall">
        <div class="toolCall__header">
            <svg class="toolCall__icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
            <span class="toolCall__name">{{ functionName }}</span>
        </div>
        <div class="toolCall__id">
            <span class="toolCall__idLabel">ID:</span> {{ call.id }}
        </div>
        <div class="toolCall__arguments">
            <span class="toolCall__argumentsLabel">Arguments:</span>
            <div class="toolCall__argumentsContent">
                <json-viewer :data="functionArguments" />
            </div>
        </div>
    </div>
</template>

<script>
import JsonViewer from './JsonViewer.vue';

export default {
    name: 'ToolCall',
    components: {
        JsonViewer
    },
    props: {
        call: {
            type: Object,
            required: true
        }
    },
    computed: {
        functionName() {
            return this.call.function && this.call.function.name;
        },
        functionArguments() {
            return this.call.function && this.call.function.arguments;
        }
    }
};
</script>

<style lang="less">
@import "../../../../styles/admin/elements/chat/ToolCall.less";
</style>
