feat(web): PromptInput component (Send/Cancel toggle)

2026-05-07 17:52:06 +08:00
parent fa43d2ed32
commit 22e3c6cbf3
1 changed files with 60 additions and 0 deletions
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps<{
+  disabled: boolean
+  isPrompting: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'send', text: string): void
+  (e: 'cancel'): void
+}>()
+
+const text = ref('')
+
+function submit() {
+  if (props.disabled) return
+  if (props.isPrompting) {
+    emit('cancel')
+    return
+  }
+  const t = text.value.trim()
+  if (!t) return
+  emit('send', t)
+  text.value = ''
+}
+
+function onKeydown(ev: KeyboardEvent) {
+  // Enter (no Shift) → submit. Shift+Enter → newline.
+  if (ev.key === 'Enter' && !ev.shiftKey) {
+    ev.preventDefault()
+    submit()
+  }
+}
+</script>
+
+<template>
+  <form class="flex gap-2 items-end" @submit.prevent="submit">
+    <textarea
+      v-model="text"
+      class="flex-1 resize-none border rounded px-2 py-1 text-sm"
+      rows="2"
+      :placeholder="disabled ? 'Session ended' : 'Type a prompt...'"
+      :disabled="disabled || isPrompting"
+      @keydown="onKeydown"
+    />
+    <button
+      type="submit"
+      class="px-3 py-1 rounded text-sm font-medium border"
+      :class="
+        isPrompting
+          ? 'bg-yellow-100 border-yellow-300 text-yellow-800 hover:bg-yellow-200'
+          : 'bg-blue-600 border-blue-600 text-white hover:bg-blue-700 disabled:bg-gray-300 disabled:border-gray-300 disabled:text-gray-500'
+      "
+      :disabled="disabled || (!isPrompting && !text.trim())"
+    >
+      {{ isPrompting ? 'Cancel' : 'Send' }}
+    </button>
+  </form>
+</template>