<template>
  <el-button type="primary" link @click="$emit('toggle')" class="evaluation-toggle-btn">
    改进建议
    <el-icon v-if="!['pingfen', 'zongjie'].includes(respondingType)">
      <component :is="showEvaluation ? CaretBottom : CaretRight" />
    </el-icon>
    <span v-else class="typing-indicator evaluation-icon">
      <span></span><span></span><span></span>
    </span>
  </el-button>
</template>

<script setup>
import { CaretBottom, CaretRight } from '@element-plus/icons-vue'

defineProps({
  showEvaluation: {
    type: Boolean,
    default: false
  },
  respondingType: {
    type: String,
    default: ''
  }
})

defineEmits(['toggle'])
</script>

<style lang="scss" scoped>
.evaluation-toggle-btn {
  padding: 6px 0;
  font-size: 13px;

  .el-icon {
    margin-left: 4px;
    vertical-align: middle;
  }

  .evaluation-icon {
    &.typing-indicator {
      padding: 0;
      display: inline-flex;
      align-items: center;
      gap: 2px;
      margin-left: 4px;
      vertical-align: middle;
    }
  }
}
</style> 