diff --git a/src/components/app/AppContent.tsx b/src/components/app/AppContent.tsx index 100129df..ab436aa3 100644 --- a/src/components/app/AppContent.tsx +++ b/src/components/app/AppContent.tsx @@ -106,7 +106,7 @@ export default function AppContent() { )} -
+
{ + setIsInputFocused(focused); onInputFocusChange?.(focused); }, [onInputFocusChange], @@ -953,5 +956,6 @@ export function useChatComposerState({ handlePermissionDecision, handleGrantToolPermission, handleInputFocusChange, + isInputFocused, }; } diff --git a/src/components/chat/tools/components/CollapsibleSection.tsx b/src/components/chat/tools/components/CollapsibleSection.tsx index f83135cb..0d6615d4 100644 --- a/src/components/chat/tools/components/CollapsibleSection.tsx +++ b/src/components/chat/tools/components/CollapsibleSection.tsx @@ -24,7 +24,7 @@ export const CollapsibleSection: React.FC = ({ }) => { return (
- + void; onTextareaInput: (event: FormEvent) => void; onInputFocusChange?: (focused: boolean) => void; + isInputFocused?: boolean; placeholder: string; isTextareaExpanded: boolean; sendByCtrlEnter?: boolean; @@ -143,6 +144,7 @@ export default function ChatComposer({ onTextareaScrollSync, onTextareaInput, onInputFocusChange, + isInputFocused, placeholder, isTextareaExpanded, sendByCtrlEnter, @@ -162,8 +164,13 @@ export default function ChatComposer({ (r) => r.toolName === 'AskUserQuestion' ); + // On mobile, when input is focused, float the input box at the bottom + const mobileFloatingClass = isInputFocused + ? 'max-sm:fixed max-sm:bottom-0 max-sm:left-0 max-sm:right-0 max-sm:z-50 max-sm:bg-background max-sm:shadow-[0_-4px_20px_rgba(0,0,0,0.15)]' + : ''; + return ( -
+
{!hasQuestionPanel && (
) : showChatNewSession ? (
-

{t('mainContent.newSession')}

-
{selectedProject.displayName}
+

{t('mainContent.newSession')}

+
{selectedProject.displayName}
) : (