fix(ui): Improve Question Tool UX (Enter Key & Auto-focus)

[bizzkoot]

Bug Report: Question Tool Custom Answer Submission

Description

When using the 'question' tool with a custom answer input, pressing the "Enter" key does not trigger the submission of the answer. The user is required to manually click the submit button.

Affected Component

packages/ui/src/components/tool-call/question-block.tsx

Root Cause

The <input> element for the custom answer field lacked an onKeyDown event handler to listen for the "Enter" key press.

Fix

Added an onKeyDown handler to the input element that triggers props.onSubmit() when the "Enter" key is pressed, provided that submission is not disabled.

Code Change

// packages/ui/src/components/tool-call/question-block.tsx

<input
  // ... existing props
  onKeyDown={(e) => {
    if (e.key === "Enter" && !e.isComposing) {
      if (!submitDisabled()) {
        props.onSubmit()
      }
    }
  }}
/>

Reproduction Steps

1. Trigger a tool call that uses the question tool.
2. Select the "Custom" option (or type in the custom input field if available).
3. Type an answer.
4. Press "Enter".
5. Observe that nothing happens (expected behavior: answer should be submitted).

---

Feature: Auto-focus Question Options for Keyboard Navigation

Description

To improve UX and enable immediate keyboard navigation (arrow keys), the first option of the first question is now automatically focused/highlighted when the question tool becomes active.

Implementation Details

1. Introduced let firstInputRef: HTMLInputElement | undefined in QuestionToolBlock.
2. Used createEffect to focus firstInputRef when props.active() becomes true.
3. Updated the render loop to capture the ref of the first option (or custom input if no options exist).

Code Changes (Summary)

// packages/ui/src/components/tool-call/question-block.tsx
import { createMemo, Show, For, createEffect, type Accessor } from "solid-js"

export function QuestionToolBlock(props: QuestionToolBlockProps) {
  // ...
  let firstInputRef: HTMLInputElement | undefined

  createEffect(() => {
    if (props.active() && firstInputRef) {
      firstInputRef.focus()
    }
  })

  // ...

  // Inside Options Loop
  <input
    ref={(el) => {
      if (i() === 0 && optIndex() === 0) firstInputRef = el
    }}
    // ...
  />

  // Inside Custom Input (Fallback)
  <input
    ref={(el) => {
      if (i() === 0 && (q?.options?.length ?? 0) === 0) firstInputRef = el
    }}
    // ...
  />
}

[shantur]

Thanks for the PR.