
<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { Delete, Star } from '@element-plus/icons-vue'
import { useChatStore } from './store/useChatStore'
import { clean } from '@/api/new-ai/chat'
import ModelSelect from '@/views/common/ModelSelect.vue'

defineProps<{
  title: string
}>()

const emits = defineEmits(['reload'])
const chatStore = useChatStore()

function handleClear() {
  if (chatStore.conversationId == null) {
    return
  }

  ElMessageBox.confirm('确认清除聊天', '清除聊天', {
    confirmButtonText: '是',
    cancelButtonText: '否',
    type: 'warning',
  }).then(async () => {
    try {
      await clean(chatStore.conversationId!)
      emits('reload')
      ElMessage.success('聊天记录清除成功')
    } catch (error) {
      ElMessage.error('清除聊天记录失败')
    }
  }).catch(() => {})
}
</script>

<template>
  <div class="mb-10px flex flex-wrap justify-between items-center pl-10px">
    <div class="font-bold flex justify-center items-center flex-wrap gap-2">
      <SvgIcon class="text-lg" icon="ion:sparkles-outline" />
      <span>{{ title }}</span>
    </div>
    <div class="flex items-center gap-2">
      <ModelSelect :id="chatStore.modelId" class="w-auto min-w-[180px]" />

      <el-button type="warning" plain @click="handleClear">
        <template #icon>
          <el-icon><Delete /></el-icon>
        </template>
        清空聊天
      </el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.el-icon {
  font-size: 14px;
}
</style>
