<script setup lang="ts">
import { computed } from "vue";
import type { ChatMessage } from "@/types";
import { traceExplorerHref } from "@/config/runtime";
import { canCancelMessage, canRetryMessage, messageTraceId } from "./message-rendering";

const props = defineProps<{ message: ChatMessage }>();
const emit = defineEmits<{
  cancel: [message: ChatMessage];
  retry: [message: ChatMessage];
  copyTrace: [message: ChatMessage];
}>();

const traceId = computed(() => messageTraceId(props.message));
const traceHref = computed(() => traceExplorerHref(traceId.value));
const canCancel = computed(() => canCancelMessage(props.message));
const canRetry = computed(() => canRetryMessage(props.message));
const hasTrace = computed(() => props.message.role === "agent" && Boolean(traceId.value));
</script>

<template>
  <div v-if="message.role === 'agent'" class="message-actions" role="toolbar" aria-label="消息操作">
    <button v-if="canCancel" class="btn btn-secondary btn-sm" type="button" @click="emit('cancel', message)">取消</button>
    <button v-if="canRetry" class="btn btn-secondary btn-sm" type="button" @click="emit('retry', message)">重试</button>
    <button v-if="hasTrace" class="btn btn-secondary btn-sm" type="button" @click="emit('copyTrace', message)">复制 Trace</button>
    <a v-if="traceHref" class="btn btn-secondary btn-sm" :href="traceHref" target="_blank" rel="noreferrer">打开 Trace</a>
  </div>
</template>
