Hide prompts via feature flag and allow auto-resizing of entity lists

This commit is contained in:
akhisud3195 2025-08-07 10:44:52 +05:30
parent 96d87b6bdb
commit 5e706f0684
2 changed files with 107 additions and 94 deletions

View file

@ -15,3 +15,4 @@ export const USE_VOICE_FEATURE = false;
export const USE_TRANSFER_CONTROL_OPTIONS = true; export const USE_TRANSFER_CONTROL_OPTIONS = true;
export const USE_PRODUCT_TOUR = true; export const USE_PRODUCT_TOUR = true;
export const SHOW_COPILOT_MARQUEE = false; export const SHOW_COPILOT_MARQUEE = false;
export const SHOW_PROMPTS_SECTION = false;

View file

@ -25,6 +25,7 @@ import { deleteDataSource } from '../../../actions/datasource_actions';
import { ToolkitAuthModal } from '../tools/components/ToolkitAuthModal'; import { ToolkitAuthModal } from '../tools/components/ToolkitAuthModal';
import { deleteConnectedAccount } from '@/app/actions/composio_actions'; import { deleteConnectedAccount } from '@/app/actions/composio_actions';
import { ProjectWideChangeConfirmationModal } from '@/components/common/project-wide-change-confirmation-modal'; import { ProjectWideChangeConfirmationModal } from '@/components/common/project-wide-change-confirmation-modal';
import { SHOW_PROMPTS_SECTION } from '../../../lib/feature_flags';
// Reduced gap size to match Cursor's UI // Reduced gap size to match Cursor's UI
const GAP_SIZE = 4; // 1 unit * 4px (tailwind's default spacing unit) const GAP_SIZE = 4; // 1 unit * 4px (tailwind's default spacing unit)
@ -516,6 +517,7 @@ export const EntityList = forwardRef<
// Calculate panel sizes based on expanded state // Calculate panel sizes based on expanded state
const getPanelSize = (panelName: 'agents' | 'tools' | 'data' | 'prompts') => { const getPanelSize = (panelName: 'agents' | 'tools' | 'data' | 'prompts') => {
// If this panel is collapsed, return minimum size
if (!expandedPanels[panelName]) { if (!expandedPanels[panelName]) {
return 8; // Collapsed height (53px equivalent) return 8; // Collapsed height (53px equivalent)
} }
@ -523,28 +525,35 @@ export const EntityList = forwardRef<
// Base size when expanded // Base size when expanded
let size = DEFAULT_SIZES[panelName]; let size = DEFAULT_SIZES[panelName];
// Redistribute space from collapsed panels to the panel above // Calculate total space available from collapsed/hidden panels
if (panelName === 'agents') { let availableSpace = 0;
// Add space from collapsed panels and hidden prompts
if (!expandedPanels.tools) { if (!expandedPanels.tools) {
size += DEFAULT_SIZES.tools; availableSpace += DEFAULT_SIZES.tools;
} }
if (!expandedPanels.data) { if (!expandedPanels.data) {
size += DEFAULT_SIZES.data; availableSpace += DEFAULT_SIZES.data;
} }
if (!expandedPanels.prompts) { if (!expandedPanels.prompts || !SHOW_PROMPTS_SECTION) {
size += DEFAULT_SIZES.prompts; availableSpace += DEFAULT_SIZES.prompts;
} }
} else if (panelName === 'tools') { if (!expandedPanels.agents) {
if (!expandedPanels.data && expandedPanels.agents) { availableSpace += DEFAULT_SIZES.agents;
size += DEFAULT_SIZES.data;
} }
if (!expandedPanels.prompts && expandedPanels.agents) {
size += DEFAULT_SIZES.prompts; // Find the topmost expanded panel to give it the extra space
} const panelOrder = ['agents', 'tools', 'data', 'prompts'] as const;
} else if (panelName === 'data') { const expandedVisiblePanels = panelOrder.filter(panel => {
if (!expandedPanels.prompts && (expandedPanels.agents || expandedPanels.tools)) { if (panel === 'prompts') {
size += DEFAULT_SIZES.prompts; return expandedPanels[panel] && SHOW_PROMPTS_SECTION;
} }
return expandedPanels[panel];
});
// If this is the topmost expanded panel, give it all the available space
if (expandedVisiblePanels.length > 0 && expandedVisiblePanels[0] === panelName) {
size += availableSpace;
} }
return size; return size;
@ -637,6 +646,7 @@ export const EntityList = forwardRef<
return ( return (
<div ref={containerRef} className="flex flex-col h-full min-h-0"> <div ref={containerRef} className="flex flex-col h-full min-h-0">
<ResizablePanelGroup <ResizablePanelGroup
key={`${expandedPanels.agents}-${expandedPanels.tools}-${expandedPanels.data}-${expandedPanels.prompts}-${SHOW_PROMPTS_SECTION}`}
direction="vertical" direction="vertical"
className="flex-1 min-h-0 flex flex-col" className="flex-1 min-h-0 flex flex-col"
style={{ gap: `${GAP_SIZE}px` }} style={{ gap: `${GAP_SIZE}px` }}
@ -1084,9 +1094,10 @@ export const EntityList = forwardRef<
</Panel> </Panel>
</ResizablePanel> </ResizablePanel>
<ResizableHandle withHandle className="w-[3px] bg-transparent" /> {SHOW_PROMPTS_SECTION && <ResizableHandle withHandle className="w-[3px] bg-transparent" />}
{/* Prompts Panel */} {/* Prompts Panel */}
{SHOW_PROMPTS_SECTION && (
<ResizablePanel <ResizablePanel
defaultSize={getPanelSize('prompts')} defaultSize={getPanelSize('prompts')}
minSize={expandedPanels.prompts ? 20 : 8} minSize={expandedPanels.prompts ? 20 : 8}
@ -1160,6 +1171,7 @@ export const EntityList = forwardRef<
)} )}
</Panel> </Panel>
</ResizablePanel> </ResizablePanel>
)}
</ResizablePanelGroup> </ResizablePanelGroup>
<AgentTypeModal <AgentTypeModal