<template>
  <details class="compression-notice" :open="!msg.summary">
    <summary>
      <i class="ph ph-arrows-in"></i>
      Context compressed
      <span v-if="msg.before != null && msg.after != null" class="compression-counts">
        ({{ msg.before }} → {{ msg.after }} messages)
      </span>
      <i v-if="msg.summary" class="ph ph-caret-down compression-chevron"></i>
    </summary>
    <div v-if="msg.summary" class="compression-body" v-html="renderMarkdown(msg.summary)" />
  </details>
</template>

<script setup>
import { renderMarkdown } from '@/composables/useMarkdown.js'
defineProps({ msg: { type: Object, required: true } })
</script>