diff --git a/packages/browseros-agent/apps/agent/entrypoints/app/agent-command/ConversationInput.tsx b/packages/browseros-agent/apps/agent/entrypoints/app/agent-command/ConversationInput.tsx index 199c933d2..36f24b082 100644 --- a/packages/browseros-agent/apps/agent/entrypoints/app/agent-command/ConversationInput.tsx +++ b/packages/browseros-agent/apps/agent/entrypoints/app/agent-command/ConversationInput.tsx @@ -8,7 +8,14 @@ import { Mic, Square, } from 'lucide-react' -import { type FC, type ReactNode, useEffect, useState } from 'react' +import { + type FC, + type ReactNode, + useEffect, + useLayoutEffect, + useRef, + useState, +} from 'react' import { AppSelector } from '@/components/elements/AppSelector' import { TabPickerPopover } from '@/components/elements/tab-picker-popover' import { WorkspaceSelector } from '@/components/elements/workspace-selector' @@ -264,9 +271,22 @@ export const ConversationInput: FC = ({ const [input, setInput] = useState('') const [selectedTabs, setSelectedTabs] = useState([]) const voice = useVoiceInput() + const textareaRef = useRef(null) const selectedAgent = agents.find( (agent) => agent.agentId === selectedAgentId, ) + const isConversation = variant === 'conversation' + + useLayoutEffect(() => { + const element = textareaRef.current + if (!element) return + + const maxHeight = isConversation ? 176 : 224 + element.style.height = '0px' + element.style.height = `${Math.min(element.scrollHeight, maxHeight)}px` + element.style.overflowY = + element.scrollHeight > maxHeight ? 'auto' : 'hidden' + }) useEffect(() => { if (voice.transcript && !voice.isTranscribing) { @@ -306,6 +326,7 @@ export const ConversationInput: FC = ({