diff --git a/packages/ui/src/components/chat/ChatContainer.tsx b/packages/ui/src/components/chat/ChatContainer.tsx index 3b2fc7a7..8bf2783d 100644 --- a/packages/ui/src/components/chat/ChatContainer.tsx +++ b/packages/ui/src/components/chat/ChatContainer.tsx @@ -45,6 +45,7 @@ import { getSessionMaterializationStatus } from '@/sync/materialization'; import { usePlanDetection } from '@/hooks/usePlanDetection'; import { getAllSyncSessions } from '@/sync/sync-refs'; import { useI18n } from '@/lib/i18n'; +import { isVSCodeRuntime } from '@/lib/desktop'; const EMPTY_MESSAGES: Array<{ info: Message; parts: Part[] }> = []; const EMPTY_PERMISSIONS: PermissionRequest[] = []; @@ -527,8 +528,10 @@ export const ChatContainer: React.FC = ({ autoOpenDraft = tr }, [currentSessionId, sessionMessages.length, sessionPrefetchInfo, sync]); const { isMobile } = useDeviceInfo(); + const isVSCode = isVSCodeRuntime(); const draftOpen = Boolean(newSessionDraft?.open); const isDesktopExpandedInput = isExpandedInput && !isMobile; + const useCompactDraftLayout = isMobile || isVSCode; const messageListRef = React.useRef(null); const draftProjectLabel = React.useMemo(() => { const selectedProject = newSessionDraft?.selectedProjectId @@ -787,7 +790,7 @@ export const ChatContainer: React.FC = ({ autoOpenDraft = tr if (!currentSessionId && draftOpen) { return (
- {isMobile && !isDesktopExpandedInput ? ( + {useCompactDraftLayout && !isDesktopExpandedInput ? (

{draftProjectLabel @@ -801,7 +804,7 @@ export const ChatContainer: React.FC = ({ autoOpenDraft = tr 'relative z-10 flex min-h-0', isDesktopExpandedInput ? 'flex-1 bg-background' - : isMobile + : useCompactDraftLayout ? 'bg-background px-0' : 'flex-1 items-center justify-center bg-background px-0 pb-[6vh]' )} diff --git a/packages/ui/src/components/chat/ChatInput.tsx b/packages/ui/src/components/chat/ChatInput.tsx index f72799de..edc548ec 100644 --- a/packages/ui/src/components/chat/ChatInput.tsx +++ b/packages/ui/src/components/chat/ChatInput.tsx @@ -3787,7 +3787,7 @@ const ChatInputComponent: React.FC = ({ onOpenSettings, scrollTo )} style={isMobile && inputBarOffset > 0 ? { marginBottom: `${inputBarOffset}px` } : undefined} > - {newSessionDraftOpen && !isDesktopExpanded && !isMobile ? ( + {newSessionDraftOpen && !isDesktopExpanded && !isMobile && !isVSCode ? (

{draftProjectLabel diff --git a/packages/ui/src/components/session/SessionSidebar.tsx b/packages/ui/src/components/session/SessionSidebar.tsx index 8d1e1e8f..29c74507 100644 --- a/packages/ui/src/components/session/SessionSidebar.tsx +++ b/packages/ui/src/components/session/SessionSidebar.tsx @@ -1010,7 +1010,7 @@ export const SessionSidebar: React.FC = ({ }); const sectionsForSidebarRender = React.useMemo(() => { - if (!isVSCode || hasSessionSearchQuery || recentSessionIds.size === 0) { + if (isVSCode || hasSessionSearchQuery || recentSessionIds.size === 0) { return sectionsForRender; } @@ -1355,7 +1355,7 @@ export const SessionSidebar: React.FC = ({ ], ); - const topContent = showRecentSection && !hasSessionSearchQuery ? ( + const topContent = showRecentSection && !isVSCode && !hasSessionSearchQuery ? ( = ({ > 0} diff --git a/packages/ui/src/components/session/sidebar/SidebarHeader.tsx b/packages/ui/src/components/session/sidebar/SidebarHeader.tsx index 893665f7..7b08f953 100644 --- a/packages/ui/src/components/session/sidebar/SidebarHeader.tsx +++ b/packages/ui/src/components/session/sidebar/SidebarHeader.tsx @@ -15,7 +15,7 @@ import { useI18n } from '@/lib/i18n'; type Props = { hideDirectoryControls: boolean; - mobileVariant: boolean; + showRecentControls: boolean; handleOpenDirectoryDialog: () => void; openNewSessionDraft: () => void; canOpenMultiRun: boolean; @@ -40,7 +40,7 @@ export function SidebarHeader(props: Props): React.ReactNode { const { t } = useI18n(); const { hideDirectoryControls, - mobileVariant, + showRecentControls, handleOpenDirectoryDialog, openNewSessionDraft, canOpenMultiRun, @@ -89,21 +89,19 @@ export function SidebarHeader(props: Props): React.ReactNode {

{t('sessions.sidebar.header.actions.addProject')}

- {mobileVariant ? ( - - - - -

{t('sessions.sidebar.header.actions.newSession')}

-
- ) : null} + + + + +

{t('sessions.sidebar.header.actions.newSession')}

+
@@ -202,14 +200,18 @@ export function SidebarHeader(props: Props): React.ReactNode { {t('sessions.sidebar.header.displayMode.minimal')} {displayMode === 'minimal' ? : null} - - - {t('sessions.sidebar.header.displayMode.showRecent')} - {showRecentSection ? : null} - + {showRecentControls ? ( + <> + + + {t('sessions.sidebar.header.displayMode.showRecent')} + {showRecentSection ? : null} + + + ) : null}