<template>
  <details ref="detailsEl" class="thinking-card" open>
    <summary>
      <i class="ph ph-brain"></i>
      Thinking
      <span v-if="!msg.thinking.done" class="spinner"></span>
      <i class="ph ph-caret-down thinking-chevron"></i>
    </summary>
    <div class="thinking-body">{{ msg.thinking.text }}</div>
  </details>
</template>

<script setup>
import { ref } from 'vue'

defineProps({ msg: { type: Object, required: true } })

const detailsEl = ref(null)
</script>