Skip to content

fix(chat): restore recent conversation resizing with many projects #52

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
su-fen merged 1 commit into from
Jun 1, 2026
Merged

fix(chat): restore recent conversation resizing with many projects #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 23 additions & 6 deletions crates/agent-gateway/web/src/components/chat/ChatHistorySidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,10 +114,10 @@ const PROJECT_ICON_BUTTON_CLASS =
"h-7 w-7 rounded-lg text-muted-foreground transition-colors hover:!bg-foreground/[0.08] hover:text-foreground active:!bg-foreground/[0.1] focus-visible:!bg-foreground/[0.08] data-[state=open]:!bg-foreground/[0.08] data-[state=open]:text-foreground";
const SIDEBAR_SECTION_ROWS_TRANSITION_CLASS =
"transition-[grid-template-rows] duration-300 ease-out motion-reduce:transition-none";
const SIDEBAR_SECTION_BODY_CLASS =
"min-h-0 overflow-hidden transition-opacity duration-300 ease-out motion-reduce:transition-none";
const SIDEBAR_SECTION_CHEVRON_CLASS =
"h-3.5 w-3.5 shrink-0 transition-transform duration-300 ease-out motion-reduce:transition-none";
const SIDEBAR_PROJECT_MIN_BODY_HEIGHT = 96;
const SIDEBAR_RECENT_MIN_BODY_HEIGHT = 160;
const EMPTY_PROJECT_PATH_KEYS = new Set<string>();
const EMPTY_PROJECT_ACTIVITY_UPDATED_ATS = new Map<string, number>();
const HISTORY_LOADING_SKELETON_ROWS = [
Expand Down Expand Up @@ -1140,7 +1140,6 @@ export const ChatHistorySidebar = memo(function ChatHistorySidebar(props: ChatHi
runningProjectPathKeys,
});
}, [projectActivityUpdatedAts, projects, runningProjectPathKeys]);
const canResizeProjectSections = showProjects && !projectsCollapsed && !recentCollapsed;
const sidebarSectionLayout = useMemo(() => {
const {
containerHeight,
Expand All @@ -1154,8 +1153,21 @@ export const ChatHistorySidebar = memo(function ChatHistorySidebar(props: ChatHi
0,
containerHeight - projectsHeaderHeight - recentHeaderHeight - handleHeight,
);
const resizeMaxHeight = Math.floor(available / 2);
const resizeMinHeight = Math.max(0, Math.min(projectsContentHeight, resizeMaxHeight));
const projectMinBodyHeight = Math.min(SIDEBAR_PROJECT_MIN_BODY_HEIGHT, available);
const recentMinBodyHeight = Math.min(
SIDEBAR_RECENT_MIN_BODY_HEIGHT,
Math.max(0, available - projectMinBodyHeight),
);
const resizeMaxHeight = Math.max(0, available - recentMinBodyHeight);
const resizeMinHeight = Math.max(
0,
Math.min(projectsContentHeight, projectMinBodyHeight, resizeMaxHeight),
);
const defaultProjectsBodyHeight = clampSidebarSectionHeight(
Math.min(projectsContentHeight, Math.floor(available / 2)),
resizeMinHeight,
resizeMaxHeight,
);

let projectsBodyHeight = 0;
if (showProjects && !projectsCollapsed) {
Expand All @@ -1168,7 +1180,7 @@ export const ChatHistorySidebar = memo(function ChatHistorySidebar(props: ChatHi
resizeMaxHeight,
);
} else {
projectsBodyHeight = resizeMinHeight;
projectsBodyHeight = defaultProjectsBodyHeight;
}
}
const recentBodyHeight = recentCollapsed ? 0 : Math.max(0, available - projectsBodyHeight);
Expand Down Expand Up @@ -1196,6 +1208,11 @@ export const ChatHistorySidebar = memo(function ChatHistorySidebar(props: ChatHi
showProjects,
sidebarSectionMetrics,
]);
const canResizeProjectSections =
showProjects &&
!projectsCollapsed &&
!recentCollapsed &&
sidebarSectionLayout.resizeMaxHeight > sidebarSectionLayout.resizeMinHeight;
sidebarSectionLayoutRef.current = {
projectsBodyHeight: sidebarSectionLayout.projectsBodyHeight,
resizeMinHeight: sidebarSectionLayout.resizeMinHeight,
Expand Down
31 changes: 23 additions & 8 deletions crates/agent-gui/src/components/chat/ChatHistorySidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,10 +104,10 @@ const PROJECT_ICON_BUTTON_CLASS =
"h-7 w-7 rounded-lg text-muted-foreground transition-colors hover:!bg-foreground/[0.08] hover:text-foreground active:!bg-foreground/[0.1] focus-visible:!bg-foreground/[0.08] data-[state=open]:!bg-foreground/[0.08] data-[state=open]:text-foreground";
const SIDEBAR_SECTION_ROWS_TRANSITION_CLASS =
"transition-[grid-template-rows] duration-300 ease-out motion-reduce:transition-none";
const SIDEBAR_SECTION_BODY_CLASS =
"min-h-0 overflow-hidden transition-opacity duration-300 ease-out motion-reduce:transition-none";
const SIDEBAR_SECTION_CHEVRON_CLASS =
"h-3.5 w-3.5 shrink-0 transition-transform duration-300 ease-out motion-reduce:transition-none";
const SIDEBAR_PROJECT_MIN_BODY_HEIGHT = 96;
const SIDEBAR_RECENT_MIN_BODY_HEIGHT = 160;
const EMPTY_PROJECT_PATH_KEYS = new Set<string>();
const EMPTY_PROJECT_ACTIVITY_UPDATED_ATS = new Map<string, number>();
const HISTORY_LOADING_SKELETON_ROWS = [
Expand Down Expand Up @@ -923,7 +923,6 @@ export const ChatHistorySidebar = memo(function ChatHistorySidebar(props: ChatHi
runningProjectPathKeys,
});
}, [projectActivityUpdatedAts, projects, runningProjectPathKeys]);
const canResizeProjectSections = showProjects && !projectsCollapsed && !recentCollapsed;
const sidebarSectionLayout = useMemo(() => {
const {
containerHeight,
Expand All @@ -937,10 +936,21 @@ export const ChatHistorySidebar = memo(function ChatHistorySidebar(props: ChatHi
0,
containerHeight - projectsHeaderHeight - recentHeaderHeight - handleHeight,
);
// Upper bound: workspace and recent split the available space evenly.
const resizeMaxHeight = Math.floor(available / 2);
// Lower bound: hug the workspace content (but never beyond the even split).
const resizeMinHeight = Math.max(0, Math.min(projectsContentHeight, resizeMaxHeight));
const projectMinBodyHeight = Math.min(SIDEBAR_PROJECT_MIN_BODY_HEIGHT, available);
const recentMinBodyHeight = Math.min(
SIDEBAR_RECENT_MIN_BODY_HEIGHT,
Math.max(0, available - projectMinBodyHeight),
);
const resizeMaxHeight = Math.max(0, available - recentMinBodyHeight);
const resizeMinHeight = Math.max(
0,
Math.min(projectsContentHeight, projectMinBodyHeight, resizeMaxHeight),
);
const defaultProjectsBodyHeight = clampSidebarSectionHeight(
Math.min(projectsContentHeight, Math.floor(available / 2)),
resizeMinHeight,
resizeMaxHeight,
);

let projectsBodyHeight = 0;
if (showProjects && !projectsCollapsed) {
Expand All @@ -953,7 +963,7 @@ export const ChatHistorySidebar = memo(function ChatHistorySidebar(props: ChatHi
resizeMaxHeight,
);
} else {
projectsBodyHeight = resizeMinHeight;
projectsBodyHeight = defaultProjectsBodyHeight;
}
}
const recentBodyHeight = recentCollapsed ? 0 : Math.max(0, available - projectsBodyHeight);
Expand Down Expand Up @@ -981,6 +991,11 @@ export const ChatHistorySidebar = memo(function ChatHistorySidebar(props: ChatHi
showProjects,
sidebarSectionMetrics,
]);
const canResizeProjectSections =
showProjects &&
!projectsCollapsed &&
!recentCollapsed &&
sidebarSectionLayout.resizeMaxHeight > sidebarSectionLayout.resizeMinHeight;
sidebarSectionLayoutRef.current = {
projectsBodyHeight: sidebarSectionLayout.projectsBodyHeight,
resizeMinHeight: sidebarSectionLayout.resizeMinHeight,
Expand Down
Loading