Merge copilot and playground into single pane and prevent edits in live mode

* Display copilot and playground as toggles

* Auto-switch live mode to draft mode when changes are made to workflow or build mode is toggled on

* Show playground / copilot alongside entity config in 3-pane

* Make tool params non-bold

* Fix panel resizing issues

* Fix logic around transitions back to draft mode from live mode

* Change test to chat in the toggle

* Fix workflow consistency issues while switching between live and draft modes
This commit is contained in:
Akhilesh Sudhakar 2025-09-04 11:05:43 +04:00 committed by GitHub
parent 3d36884c73
commit 122d83d8f7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 487 additions and 253 deletions

View file

@ -85,11 +85,11 @@ export function ComposeBoxCopilot({
group-hover:opacity-100 transition-opacity">
Press + Enter to send
</div>
{/* Outer container with padding */}
<div className="rounded-2xl border-[1.5px] border-gray-200 dark:border-[#2a2d31] p-3 relative
{/* Outer container without external padding; textarea grows to fill */}
<div className="rounded-2xl border-[1.5px] border-gray-200 dark:border-[#2a2d31] relative
bg-white dark:bg-[#1e2023] flex items-end gap-2">
{/* Textarea */}
<div className="flex-1">
<div className="flex-1 p-3">
<Textarea
ref={textareaRef}
value={input}

View file

@ -83,12 +83,15 @@ export function Panel({
>
<div
className={clsx(
"shrink-0 border-b relative",
variant === 'copilot' ? "border-zinc-300 dark:border-zinc-700" : "border-zinc-100 dark:border-zinc-800",
// 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",
{
"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-6 py-3": !isEntityList && variant !== 'projects'
"flex items-center justify-between px-6 py-3": !isEntityList && variant !== 'projects' && variant !== 'copilot' && variant !== 'playground'
}
)}
>
@ -102,39 +105,27 @@ export function Panel({
</div>}
</>
) : variant === 'copilot' ? (
<>
<div className="w-full flex items-center justify-between px-3 pt-2">
<div className="flex items-center gap-2">
{icon && icon}
<div className="flex flex-col">
<div className="font-semibold text-zinc-700 dark:text-zinc-300">
{title}
</div>
{subtitle && (
<div className="text-xs text-zinc-500 dark:text-zinc-400">
{subtitle}
</div>
)}
</div>
</div>
{rightActions}
</>
</div>
) : variant === 'playground' ? (
<>
<div className="w-full flex items-center justify-between px-3 pt-2">
<div className="flex items-center gap-2">
{icon && icon}
<div className="flex flex-col">
<div className="font-semibold text-zinc-700 dark:text-zinc-300">
{title}
</div>
{subtitle && (
<div className="text-xs text-zinc-500 dark:text-zinc-400">
{subtitle}
</div>
)}
</div>
</div>
{rightActions}
</>
</div>
) : isEntityList ? (
<div className="flex items-center justify-between w-full">
{title}

View file

@ -45,7 +45,7 @@ export function ToolParamCard({
aria-expanded={expanded}
>
{expanded ? <ChevronDown className="w-4 h-4 text-gray-400" /> : <ChevronRight className="w-4 h-4 text-gray-400" />}
<span className="text-sm font-semibold text-gray-900 dark:text-gray-100 flex-1 text-left truncate">{param.name}</span>
<span className="text-sm font-normal text-gray-900 dark:text-gray-100 flex-1 text-left truncate">{param.name}</span>
{!readOnly && (
<Button
variant="tertiary"