<script setup lang="ts">
import { ref } from "vue";

defineProps<{
  loading: boolean;
  disabled: boolean;
}>();

const emit = defineEmits<{
  send: [message: string];
  stop: [];
}>();

const input = ref("");

function send() {
  const text = input.value.trim();
  if (!text) return;
  emit("send", text);
  input.value = "";
}

function onKeydown(event: KeyboardEvent) {
  if (event.key === "Enter" && !event.shiftKey) {
    event.preventDefault();
    send();
  }
}
</script>

<template>
  <form class="composer" @submit.prevent="send">
    <textarea
      v-model="input"
      rows="1"
      placeholder="请输入你的问题"
      :disabled="disabled"
      @keydown="onKeydown"
    />
    <button v-if="loading" type="button" class="stop-btn" @click="emit('stop')">停止</button>
    <button v-else type="submit" class="send-btn" :disabled="disabled || !input.trim()">发送</button>
  </form>
</template>
