mirror of
https://github.com/rowboatlabs/rowboat.git
synced 2026-05-16 18:25:17 +02:00
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:
parent
431f835ba1
commit
ee02d61996
16 changed files with 900 additions and 400 deletions
|
|
@ -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 ? (
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
}
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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]);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue