<template>
    <div class="toolResult">
        <div class="toolResult__header">
            <div class="toolResult__headerLeft">
                <svg class="toolResult__icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
                </svg>
                <span class="toolResult__name">{{ tool.name }}</span>
            </div>
        </div>

        <p v-if="tool.description" class="toolResult__description">{{ tool.description }}</p>

        <div class="toolResult__data">
            <div class="toolResult__dataColumn">
                <span class="toolResult__dataLabel">Inputs:</span>
                <div class="toolResult__dataContent">
                    <json-viewer :data="tool.inputs" />
                </div>
            </div>
            <div class="toolResult__dataColumn">
                <span class="toolResult__dataLabel">Result:</span>
                <div class="toolResult__dataContent">
                    <json-viewer :data="tool.result" :collapsed="true" />
                </div>
            </div>
        </div>

        <div class="toolResult__callId">
            Call ID: {{ tool.callId }}
        </div>
    </div>
</template>

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

export default {
    name: 'ToolResult',
    components: {
        JsonViewer
    },
    props: {
        tool: {
            type: Object,
            required: true
        }
    }
};
</script>

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