mirror of
https://github.com/rowboatlabs/rowboat.git
synced 2026-07-03 20:41:07 +02:00
add auto-focus feature to chat input and prompt textarea
This commit is contained in:
parent
2d5a5fc8f7
commit
1b76d5a486
2 changed files with 16 additions and 1 deletions
|
|
@ -322,6 +322,7 @@ function ChatInputInner({
|
||||||
placeholder="Type your message..."
|
placeholder="Type your message..."
|
||||||
disabled={isProcessing}
|
disabled={isProcessing}
|
||||||
onKeyDown={handleKeyDown}
|
onKeyDown={handleKeyDown}
|
||||||
|
autoFocus
|
||||||
className="min-h-6 py-0 border-0 shadow-none focus-visible:ring-0 rounded-none"
|
className="min-h-6 py-0 border-0 shadow-none focus-visible:ring-0 rounded-none"
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
|
|
|
||||||
|
|
@ -904,13 +904,16 @@ export const PromptInputBody = ({
|
||||||
|
|
||||||
export type PromptInputTextareaProps = ComponentProps<
|
export type PromptInputTextareaProps = ComponentProps<
|
||||||
typeof InputGroupTextarea
|
typeof InputGroupTextarea
|
||||||
>;
|
> & {
|
||||||
|
autoFocus?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
export const PromptInputTextarea = ({
|
export const PromptInputTextarea = ({
|
||||||
onChange,
|
onChange,
|
||||||
className,
|
className,
|
||||||
placeholder = "What would you like to know?",
|
placeholder = "What would you like to know?",
|
||||||
onKeyDown: externalOnKeyDown,
|
onKeyDown: externalOnKeyDown,
|
||||||
|
autoFocus = false,
|
||||||
...props
|
...props
|
||||||
}: PromptInputTextareaProps) => {
|
}: PromptInputTextareaProps) => {
|
||||||
const controller = useOptionalPromptInputController();
|
const controller = useOptionalPromptInputController();
|
||||||
|
|
@ -920,6 +923,17 @@ export const PromptInputTextarea = ({
|
||||||
const [isComposing, setIsComposing] = useState(false);
|
const [isComposing, setIsComposing] = useState(false);
|
||||||
|
|
||||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||||
|
|
||||||
|
// Auto-focus the textarea when requested
|
||||||
|
useEffect(() => {
|
||||||
|
if (autoFocus) {
|
||||||
|
// Small delay to ensure the element is fully mounted and visible
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
textareaRef.current?.focus();
|
||||||
|
}, 50);
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}
|
||||||
|
}, [autoFocus]);
|
||||||
const containerRef = useRef<HTMLDivElement>(null);
|
const containerRef = useRef<HTMLDivElement>(null);
|
||||||
const highlightRef = useRef<HTMLDivElement>(null);
|
const highlightRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue