ros/automaker
1
0
Fork 0
mirror of https://github.com/AutoMaker-Org/automaker.git synced 2026-02-04 09:13:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #296 from ugurkellecioglu/feat/agent-view-multiline-input

Browse Source 
feat: enhance AgentView with adjustable textarea and improved input handling #294
This commit is contained in:
Shirone
2025-12-28 18:13:34 +01:00
committed by GitHub
parent 85dfabec0a 1321a8bd4d
commit 61881d99e2
1 changed files with 23 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
apps/ui/src/components/views/agent-view.tsx
View File

@@ -51,6 +51,7 @@ import {
DropdownMenuTrigger, DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'; } from '@/components/ui/dropdown-menu';
import { CLAUDE_MODELS } from '@/components/views/board-view/shared/model-constants'; import { CLAUDE_MODELS } from '@/components/views/board-view/shared/model-constants';
import { Textarea } from '@/components/ui/textarea';
export function AgentView() { export function AgentView() {
const { currentProject, setLastSelectedSession, getLastSelectedSession } = useAppStore(); const { currentProject, setLastSelectedSession, getLastSelectedSession } = useAppStore();
@@ -73,7 +74,7 @@ export function AgentView() {
const [isUserAtBottom, setIsUserAtBottom] = useState(true); const [isUserAtBottom, setIsUserAtBottom] = useState(true);
// Input ref for auto-focus // Input ref for auto-focus
const inputRef = useRef<HTMLInputElement>(null); const inputRef = useRef<HTMLTextAreaElement>(null);
// Ref for quick create session function from SessionManager // Ref for quick create session function from SessionManager
const quickCreateSessionRef = useRef<(() => Promise<void>) | null>(null); const quickCreateSessionRef = useRef<(() => Promise<void>) | null>(null);
@@ -368,13 +369,24 @@ export function AgentView() {
[processDroppedFiles] [processDroppedFiles]
); );
const handleKeyPress = (e: React.KeyboardEvent) => { const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (e.key === 'Enter' && !e.shiftKey) { if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault(); e.preventDefault();
handleSend(); handleSend();
} }
}; };
const adjustTextareaHeight = useCallback(() => {
const textarea = inputRef.current;
if (!textarea) return;
textarea.style.height = 'auto';
textarea.style.height = `${textarea.scrollHeight}px`;
}, []);
useEffect(() => {
adjustTextareaHeight();
}, [input, adjustTextareaHeight]);
const handleClearChat = async () => { const handleClearChat = async () => {
if (!confirm('Are you sure you want to clear this conversation?')) return; if (!confirm('Are you sure you want to clear this conversation?')) return;
await clearHistory(); await clearHistory();
@@ -878,7 +890,7 @@ export function AgentView() {
onDrop={handleDrop} onDrop={handleDrop}
> >
<div className="flex-1 relative"> <div className="flex-1 relative">
<Input <Textarea
ref={inputRef} ref={inputRef}
placeholder={ placeholder={
isDragOver isDragOver
@@ -889,12 +901,13 @@ export function AgentView() {
} }
value={input} value={input}
onChange={(e) => setInput(e.target.value)} onChange={(e) => setInput(e.target.value)}
onKeyPress={handleKeyPress} onKeyDown={handleKeyDown}
onPaste={handlePaste} onPaste={handlePaste}
disabled={!isConnected} disabled={!isConnected}
data-testid="agent-input" data-testid="agent-input"
rows={1}
className={cn( className={cn(
'h-11 bg-background border-border rounded-xl pl-4 pr-20 text-sm transition-all', 'min-h-11 bg-background border-border rounded-xl pl-4 pr-20 text-sm transition-all resize-none max-h-36 overflow-y-auto py-2.5',
'focus:ring-2 focus:ring-primary/20 focus:border-primary/50', 'focus:ring-2 focus:ring-primary/20 focus:border-primary/50',
(selectedImages.length > 0 || selectedTextFiles.length > 0) && (selectedImages.length > 0 || selectedTextFiles.length > 0) &&
'border-primary/30', 'border-primary/30',
@@ -1000,7 +1013,11 @@ export function AgentView() {
<p className="text-[11px] text-muted-foreground mt-2 text-center"> <p className="text-[11px] text-muted-foreground mt-2 text-center">
Press{' '} Press{' '}
<kbd className="px-1.5 py-0.5 bg-muted rounded text-[10px] font-medium">Enter</kbd> to <kbd className="px-1.5 py-0.5 bg-muted rounded text-[10px] font-medium">Enter</kbd> to
send send,{' '}
<kbd className="px-1.5 py-0.5 bg-muted rounded text-[10px] font-medium">
Shift+Enter
</kbd>{' '}
for new line
</p> </p>
</div> </div>
)} )}