From 22e3c6cbf3674455a1a2f411d6a633d1e87ef384 Mon Sep 17 00:00:00 2001
From: Jerry Yan <792602257@qq.com>
Date: Thu, 7 May 2026 17:52:06 +0800
Subject: [PATCH] feat(web): PromptInput component (Send/Cancel toggle)

---
 web/src/components/acp/PromptInput.vue | 60 ++++++++++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 web/src/components/acp/PromptInput.vue

diff --git a/web/src/components/acp/PromptInput.vue b/web/src/components/acp/PromptInput.vue
new file mode 100644
index 0000000..567d04e
--- /dev/null
+++ b/web/src/components/acp/PromptInput.vue
@@ -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>