<template>
  <details ref="detailsEl" class="thinking-card">
    <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">{{ cleanedText }}</div>
  </details>
</template>

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

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

const detailsEl = ref(null)

const cleanedText = computed(() => {
  const raw = props.msg.thinking?.text ?? ''
  return raw
    // Strip <thought> / </thought> XML tags (Ollama sometimes leaks these)
    .replace(/^<thought>\s*/i, '')
    .replace(/\s*<\/thought>\s*$/i, '')
    // Strip a bare "thought" or "thought:" that appears alone on the first line
    .replace(/^thought\s*:?\s*\n+/i, '')
    .trim()
})
</script>