Allow input while chatbot is pending (#1993)

* Allow input during pending state in ct-prompt-input

Changes the ct-prompt-input component to match ChatGPT/Claude UX patterns
where users can continue typing and preparing their next message while
waiting for a response. Previously, the textarea was completely blocked
during pending state, which was frustrating for users.

Now during pending:
- Textarea remains fully interactive for typing and editing
- File upload button remains available
- Model picker stays disabled (to prevent reactive re-execution)
- Submit actions (Enter, Cmd/Ctrl+Enter, Send button) are blocked
- Stop button is shown to cancel the pending operation

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* Format pass

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: bfollington

packages/ui/src/v2/components/ct-prompt-input/ct-prompt-input.ts

@@ -46,7 +46,7 @@ export interface ModelItem {
  * @attr {string} placeholder - Placeholder text for the textarea
  * @attr {string} buttonText - Text for the send button (default: "Send")
  * @attr {boolean} disabled - Whether the textarea and button are disabled (prevents any action)
- * @attr {boolean} pending - Whether the component is in pending state (blocks editing, shows stop button)
+ * @attr {boolean} pending - Whether the component is in pending state (blocks submit, shows stop button)
  * @attr {string} value - Current textarea value
  * @attr {boolean} autoResize - Whether textarea auto-resizes to fit content (default: true)
  * @attr {number} rows - Initial number of rows for the textarea (default: 1)
@@ -182,11 +182,8 @@ export class CTPromptInput extends BaseElement {
             padding: 0 0.75rem;
           }
 
-          /* Pending state - blocks editing but allows stop */
-          :host([pending]) textarea {
-            opacity: 0.7;
-            pointer-events: none;
-          }
+          /* Pending state - allow editing, just block submit */
+          :host([pending]) textarea {}
 
           /* Disabled state */
           :host([disabled]) .container {
@@ -499,26 +496,30 @@ export class CTPromptInput extends BaseElement {
         }
 
         private _handleKeyDown(event: KeyboardEvent) {
-          // Don't handle shortcuts if disabled or pending
-          if (this.disabled || this.pending) return;
+          // Don't handle shortcuts if disabled
+          if (this.disabled) return;
 
           // Let mention controller handle keyboard events first
           if (this.mentionController.handleKeyDown(event)) {
             return;
           }
 
-          // Enter without Shift sends the message
+          // Enter without Shift sends the message (blocked if pending)
           if (event.key === "Enter" && !event.shiftKey) {
             event.preventDefault();
-            this._handleSend();
+            if (!this.pending) {
+              this._handleSend();
+            }
             return;
           }
 
           // Shift+Enter adds new line (default textarea behavior)
-          // Ctrl/Cmd+Enter also sends (alternative shortcut)
+          // Ctrl/Cmd+Enter also sends (alternative shortcut, blocked if pending)
           if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
             event.preventDefault();
-            this._handleSend();
+            if (!this.pending) {
+              this._handleSend();
+            }
             return;
           }
         }
@@ -753,19 +754,15 @@ export class CTPromptInput extends BaseElement {
                     : ""}
 
                   <!-- Upload button -->
-                  ${!this.pending
-                    ? html`
-                      <div
-                        class="upload-button"
-                        @click="${this._handleUploadClick}"
-                        role="button"
-                        aria-label="Upload file"
-                        title="Upload file"
-                      >
-                        📎
-                      </div>
-                    `
-                    : ""}
+                  <div
+                    class="upload-button"
+                    @click="${this._handleUploadClick}"
+                    role="button"
+                    aria-label="Upload file"
+                    title="Upload file"
+                  >
+                    📎
+                  </div>
                 </div>
               </div>
             </div>