Add options to hide panes (#244)

* Add multiple pane views

* Fix rendering issues

* Fix copilot apply selection pane error and remove old debug logs

* Make top bar more compact

* Fix copilot generation from starting prompt

* Fix panel resizing issues

* Fix content preservation upon hiding panes

* Added changes on top of pane_layouts branch to remove example agent from the workflow editor

* Grey out options for changing pane layout during zero agents state

* Add zero-agent state for playground and publish buttons

* Fix pane sizes and bugs

---------

Co-authored-by: tusharmagar <tushmag@gmail.com>
This commit is contained in:
Akhilesh Sudhakar 2025-09-12 00:37:44 +04:00 committed by GitHub
parent 431f835ba1
commit ee02d61996
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
16 changed files with 900 additions and 400 deletions

View file

@ -132,7 +132,7 @@ export function ComposeBoxCopilot({
scale-100 hover:scale-105 active:scale-95
disabled:opacity-50 disabled:scale-95
hover:shadow-md dark:hover:shadow-indigo-950/10
mb-0.5
mb-1.5 mr-2
`}
>
{loading ? (

View file

@ -83,14 +83,13 @@ export function Panel({
>
<div
className={clsx(
// For copilot and playground, mimic TopBar appearance
(variant === 'copilot' || variant === 'playground')
? "shrink-0 relative rounded-xl bg-white/70 dark:bg-zinc-800/70 shadow-sm backdrop-blur-sm border border-zinc-200 dark:border-zinc-800 px-0 pt-0 pb-2 mx-0 mt-0 mb-2 flex items-center justify-between"
: "shrink-0 border-b relative",
(variant !== 'copilot' && variant !== 'playground') && "border-zinc-100 dark:border-zinc-800",
"shrink-0 border-b relative",
// Use the same header treatment as entity list/default for playground/copilot
"border-zinc-100 dark:border-zinc-800",
{
"flex flex-col gap-3 px-4 py-3": variant === 'projects',
"flex items-center justify-between h-[53px] p-3": isEntityList,
"flex items-center justify-between px-3 py-2": variant === 'copilot' || variant === 'playground',
"flex items-center justify-between px-6 py-3": !isEntityList && variant !== 'projects' && variant !== 'copilot' && variant !== 'playground'
}
)}

View file

@ -22,18 +22,17 @@ export function SectionCard({ icon, title, children, labelWidth = 'md:w-32', cla
React.useEffect(() => {
const btn = document.getElementById(`section-card-header-${title && typeof title === 'string' ? title : ''}`);
if (btn) {
console.log('SectionCard header button:', btn, btn.getBoundingClientRect(), window.getComputedStyle(btn));
const chevron = btn.querySelector('svg');
if (chevron) {
console.log('Chevron:', chevron, chevron.getBoundingClientRect(), window.getComputedStyle(chevron));
// Chevron positioning logic can go here if needed
}
const iconEl = btn.querySelector('.section-card-icon');
if (iconEl) {
console.log('Icon:', iconEl, iconEl.getBoundingClientRect(), window.getComputedStyle(iconEl));
// Icon positioning logic can go here if needed
}
const label = btn.querySelector('span');
if (label) {
console.log('Label:', label, label.getBoundingClientRect(), window.getComputedStyle(label));
// Label positioning logic can go here if needed
}
}
}, [title]);

View file

@ -28,28 +28,23 @@ export function ProgressBar({ steps, className, onStepClick }: ProgressBarProps)
};
return (
<nav aria-label="Workflow progress" className={cn("flex items-center gap-4", className)}>
{/* Progress Label */}
<span className="text-sm font-medium text-gray-700 dark:text-gray-300 mr-2">
Progress:
</span>
<nav aria-label="Workflow progress" className={cn("flex items-center", className)}>
{/* Steps */}
<ol role="list" className="flex items-center gap-2">
<ol role="list" className="flex items-center gap-1.5">
{steps.map((step, index) => {
const isLast = index === steps.length - 1;
const tooltipText = (() => {
switch (step.id) {
case 1:
return 'Build your assistant - click for tour';
return 'Let skipper build your assistant for you';
case 2:
return 'Test your assistant - click for tour';
return 'Chat with your assistant to test it';
case 3:
return 'Make assistant live - click for tour';
return 'Make your assistant live';
case 4:
return 'Interact with your assistant - click for tour';
return 'Interact with your assistant';
default:
return 'Click for tour';
return '';
}
})();
@ -77,7 +72,7 @@ export function ProgressBar({ steps, className, onStepClick }: ProgressBarProps)
}
} : undefined}
className={cn(
"w-6 h-6 rounded-full border-2 flex items-center justify-center text-xs font-semibold transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-indigo-400",
"w-5 h-5 rounded-full border-2 flex items-center justify-center text-xs font-semibold transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-indigo-400",
step.completed
? "bg-green-500 border-green-500 text-white"
: step.isCurrent
@ -88,7 +83,7 @@ export function ProgressBar({ steps, className, onStepClick }: ProgressBarProps)
{step.completed ? "✓" : step.isCurrent ? "⚡" : "○"}
</div>
</Tooltip>
<span className="hidden md:block mt-1 text-[11px] leading-none text-gray-700 dark:text-gray-300 font-medium">
<span className="hidden md:block mt-0.5 text-[10px] leading-none text-gray-700 dark:text-gray-300 font-medium">
{step.shortLabel ?? getShortLabel(step.label)}
</span>
</div>