Fix compose box issues

This commit is contained in:
akhisud3195 2025-04-15 13:22:26 +04:00 committed by Ramnique Singh
parent 8e16ac6204
commit ef378ba802
4 changed files with 48 additions and 4 deletions

View file

@ -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..."

View file

@ -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..."