mirror of
https://github.com/rowboatlabs/rowboat.git
synced 2026-04-28 09:56:23 +02:00
Fix compose box issues
This commit is contained in:
parent
8e16ac6204
commit
ef378ba802
4 changed files with 48 additions and 4 deletions
|
|
@ -20,6 +20,8 @@ interface ComposeBoxCopilotProps {
|
|||
loading: boolean;
|
||||
disabled?: boolean;
|
||||
initialFocus?: boolean;
|
||||
shouldAutoFocus?: boolean;
|
||||
onFocus?: () => void;
|
||||
}
|
||||
|
||||
export function ComposeBoxCopilot({
|
||||
|
|
@ -28,18 +30,29 @@ export function ComposeBoxCopilot({
|
|||
loading,
|
||||
disabled = false,
|
||||
initialFocus = false,
|
||||
shouldAutoFocus = false,
|
||||
onFocus,
|
||||
}: ComposeBoxCopilotProps) {
|
||||
const [input, setInput] = useState('');
|
||||
const [isFocused, setIsFocused] = useState(false);
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
const previousMessagesLength = useRef(messages.length);
|
||||
|
||||
// Add effect to handle initial focus
|
||||
// Handle initial focus
|
||||
useEffect(() => {
|
||||
if (initialFocus && textareaRef.current) {
|
||||
textareaRef.current.focus();
|
||||
}
|
||||
}, [initialFocus]);
|
||||
|
||||
// Handle auto-focus when new messages arrive
|
||||
useEffect(() => {
|
||||
if (shouldAutoFocus && messages.length > previousMessagesLength.current && textareaRef.current) {
|
||||
textareaRef.current.focus();
|
||||
}
|
||||
previousMessagesLength.current = messages.length;
|
||||
}, [messages.length, shouldAutoFocus]);
|
||||
|
||||
function handleInput() {
|
||||
const prompt = input.trim();
|
||||
if (!prompt) {
|
||||
|
|
@ -56,6 +69,11 @@ export function ComposeBoxCopilot({
|
|||
}
|
||||
}
|
||||
|
||||
const handleFocus = () => {
|
||||
setIsFocused(true);
|
||||
onFocus?.();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative group">
|
||||
{/* Keyboard shortcut hint */}
|
||||
|
|
@ -74,7 +92,7 @@ export function ComposeBoxCopilot({
|
|||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={handleInputKeyDown}
|
||||
onFocus={() => setIsFocused(true)}
|
||||
onFocus={handleFocus}
|
||||
onBlur={() => setIsFocused(false)}
|
||||
disabled={disabled || loading}
|
||||
placeholder="Type a message..."
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { useState, useRef } from 'react';
|
||||
import { useState, useRef, useEffect } from 'react';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Button, Spinner } from "@heroui/react";
|
||||
|
||||
|
|
@ -7,6 +7,8 @@ interface ComposeBoxPlaygroundProps {
|
|||
messages: any[];
|
||||
loading: boolean;
|
||||
disabled?: boolean;
|
||||
shouldAutoFocus?: boolean;
|
||||
onFocus?: () => void;
|
||||
}
|
||||
|
||||
export function ComposeBoxPlayground({
|
||||
|
|
@ -14,10 +16,21 @@ export function ComposeBoxPlayground({
|
|||
messages,
|
||||
loading,
|
||||
disabled = false,
|
||||
shouldAutoFocus = false,
|
||||
onFocus,
|
||||
}: ComposeBoxPlaygroundProps) {
|
||||
const [input, setInput] = useState('');
|
||||
const [isFocused, setIsFocused] = useState(false);
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
const previousMessagesLength = useRef(messages.length);
|
||||
|
||||
// Handle auto-focus when new messages arrive
|
||||
useEffect(() => {
|
||||
if (shouldAutoFocus && messages.length > previousMessagesLength.current && textareaRef.current) {
|
||||
textareaRef.current.focus();
|
||||
}
|
||||
previousMessagesLength.current = messages.length;
|
||||
}, [messages.length, shouldAutoFocus]);
|
||||
|
||||
function handleInput() {
|
||||
const prompt = input.trim();
|
||||
|
|
@ -35,6 +48,11 @@ export function ComposeBoxPlayground({
|
|||
}
|
||||
};
|
||||
|
||||
const handleFocus = () => {
|
||||
setIsFocused(true);
|
||||
onFocus?.();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative group">
|
||||
{/* Keyboard shortcut hint */}
|
||||
|
|
@ -53,7 +71,7 @@ export function ComposeBoxPlayground({
|
|||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={handleInputKeyDown}
|
||||
onFocus={() => setIsFocused(true)}
|
||||
onFocus={handleFocus}
|
||||
onBlur={() => setIsFocused(false)}
|
||||
disabled={disabled || loading}
|
||||
placeholder="Type a message..."
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue