<script setup lang="ts">
import type {AiChatMessage, AiToolApprovalPayload} from './types';

import AiErrorNotice from './AiErrorNotice.vue';
import AiKnowledgeCard from './AiKnowledgeCard.vue';
import AiReasoningCard from './AiReasoningCard.vue';
import AiToolApprovalCard from './AiToolApprovalCard.vue';
import AiToolCallCard from './AiToolCallCard.vue';

defineProps<{
  approvalLoading?: boolean;
  message: AiChatMessage;
}>();

const emit = defineEmits<{
  approve: [payload: AiToolApprovalPayload];
  reject: [payload: AiToolApprovalPayload];
}>();
</script>

<template>
  <div class="ai-message" :class="`ai-message--${message.role}`">
    <div class="ai-message__bubble">
      <template v-for="(part, index) in message.parts" :key="index">
        <div v-if="part.type === 'text'" class="ai-message__text">
          {{ part.text }}
        </div>
        <AiReasoningCard
          v-else-if="part.type === 'reasoning'"
          :text="part.text"
          :collapsed="part.collapsed"
        />
        <AiKnowledgeCard
          v-else-if="part.type === 'knowledge'"
          :items="part.items"
        />
        <AiToolCallCard
          v-else-if="part.type === 'tool_call'"
          :tool-name="part.toolName"
          :status="part.status"
          :input="part.input"
          :output="part.output"
        />
        <AiToolApprovalCard
          v-else-if="part.type === 'tool_approval'"
          :request-id="part.requestId"
          :resume-token="part.resumeToken"
          :tool-name="part.toolName"
          :tool-display-name="part.toolDisplayName"
          :tool-call-id="part.toolCallId"
          :tool-type="part.toolType"
          :input="part.input"
          :expires-at="part.expiresAt"
          :metadata="part.metadata"
          :loading="approvalLoading"
          @approve="emit('approve', $event)"
          @reject="emit('reject', $event)"
        />
        <AiErrorNotice
          v-else-if="part.type === 'error'"
          :message="part.message"
        />
      </template>
      <span
        v-if="message.status === 'streaming'"
        class="ai-message__cursor"
      ></span>
    </div>
  </div>
</template>

<style scoped>
.ai-message {
  display: flex;
  width: 100%;
}

.ai-message--user {
  justify-content: flex-end;
}

.ai-message--assistant,
.ai-message--system {
  justify-content: flex-start;
}

.ai-message__bubble {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(88%, 640px);
  padding: 12px 14px;
  color: var(--el-text-color-primary);
  background: var(--el-bg-color);
  background: color-mix(in srgb, var(--el-bg-color) 88%, transparent);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 8px;
}

.ai-message--user .ai-message__bubble {
  color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
  border-color: var(--el-color-primary-light-7);
}

.ai-message__text {
  font-size: 14px;
  line-height: 22px;
  white-space: pre-wrap;
}

.ai-message__cursor {
  width: 6px;
  height: 16px;
  margin-left: 2px;
  background: var(--el-color-primary);
  border-radius: 2px;
  animation: ai-chat-cursor 0.9s infinite;
}

@keyframes ai-chat-cursor {
  50% {
    opacity: 0.2;
  }
}
</style>
