<script setup lang="ts">
import { ref, computed } from 'vue'

// Props
const props = defineProps<{
  disabled?: boolean
  placeholder?: string
  status?: 'ready' | 'submitted' | 'streaming' | 'error'
}>()

// Emits
const emit = defineEmits<{
  send: [content: string]
  stop: []
}>()

// 输入内容
const inputValue = ref('')

// 计算 status
const chatStatus = computed(() => {
  if (props.disabled) {
    return props.status || 'submitted'
  }
  return 'ready'
})

// 发送消息
function handleSubmit() {
  if (!inputValue.value.trim() || props.disabled) return

  emit('send', inputValue.value.trim())
  inputValue.value = ''
}

// 停止生成
function handleStop() {
  emit('stop')
}
</script>

<template>
  <div class="shrink-0 border-t border-gray-200 p-4 dark:border-gray-800">
    <div class="mx-auto max-w-2xl">
      <UChatPrompt
        v-model="inputValue"
        :placeholder="placeholder || '输入你的问题...'"
        :disabled="disabled"
        variant="subtle"
        @submit="handleSubmit"
      >
        <UChatPromptSubmit :status="chatStatus" class="rounded-full" color="primary" @stop="handleStop" />
      </UChatPrompt>
    </div>
  </div>
</template>
