<script setup lang="ts">
import { ref } from 'vue'

import { Button } from '@/components/ui/button'
import { useMarkdown } from '@/composables/useMarkdown'
import { getRoleColorClass } from '@/utils/roleColors'

const props = defineProps<{
  role: string
  content: string
}>()

const isExpanded = ref(false)
const { render: renderMarkdown } = useMarkdown()
</script>

<template>
  <div class="contents">
    <div class="flex-none">
      <span
        class="font-medium text-xs uppercase leading-8 py-0.5 px-2 rounded-sm"
        :class="getRoleColorClass(role)"
      >
        {{ role }}
      </span>
    </div>

    <div class="flex-1 truncate flex items-center pt-[4px]" v-if="!isExpanded">
      <div class="max-w-none truncate">{{ content }}</div>
    </div>
    <div class="flex-1" v-else>
      <div class="max-w-none markdown-content pt-[3.5px]" v-html="renderMarkdown(content)"></div>
    </div>

    <div class="flex">
      <Button @click="isExpanded = !isExpanded" variant="ghost" size="icon-sm">
        <i
          class="dku-icon-chevron-right-16 transition-transform duration-200"
          :class="{ 'rotate-90': isExpanded }"
        />
      </Button>
    </div>
  </div>
</template>
