diff --git a/apps/fabro-web/app/components/steer-bar.tsx b/apps/fabro-web/app/components/steer-bar.tsx index 0745fe9eb..db3bb5bb7 100644 --- a/apps/fabro-web/app/components/steer-bar.tsx +++ b/apps/fabro-web/app/components/steer-bar.tsx @@ -1,13 +1,33 @@ -import { useState, type FormEvent, type KeyboardEvent } from "react"; +import { + forwardRef, + useImperativeHandle, + useRef, + useState, + type FormEvent, + type KeyboardEvent, +} from "react"; import { CheckIcon } from "@heroicons/react/16/solid"; export interface SteerBarProps { runId: string; } -export function SteerBar({ runId: _runId }: SteerBarProps) { +export interface SteerBarHandle { + focus(): void; +} + +export const SteerBar = forwardRef(function SteerBar( + { runId: _runId }, + ref, +) { const [text, setText] = useState(""); const [interrupt, setInterrupt] = useState(false); + const textareaRef = useRef(null); + useImperativeHandle(ref, () => ({ + focus() { + textareaRef.current?.focus(); + }, + })); const trimmed = text.trim(); const canSubmit = trimmed.length > 0; @@ -33,6 +53,7 @@ export function SteerBar({ runId: _runId }: SteerBarProps) { className="mx-auto flex max-w-4xl items-end gap-2 px-4 py-3 sm:px-6 lg:px-8" >