apunkt/rowboat
1
0
Fork 0
mirror of https://github.com/rowboatlabs/rowboat.git synced 2026-04-28 09:56:23 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Change copilot and background panels to distinguish from playground (#204)

Browse source
This commit is contained in:
Akhilesh Sudhakar 2025-08-15 15:07:39 +08:00 • committed by GitHub
parent 9304c1e5fd
commit 8488255d6d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 327 additions and 301 deletions
Download patch file Download diff file Expand all files Collapse all files

7
apps/rowboat/components/common/compose-box-copilot.tsx
View file

@ -100,13 +100,12 @@ export function ComposeBoxCopilot({
disabled={loading}
placeholder="Type a message..."
autoResize={true}
maxHeight={120}
maxHeight={200}
className={`
min-h-0!
min-h-6
border-0! shadow-none! ring-0!
bg-transparent
resize-none
overflow-y-auto
[&::-webkit-scrollbar]:w-1
[&::-webkit-scrollbar-track]:bg-transparent
[&::-webkit-scrollbar-thumb]:bg-gray-300
@ -294,7 +293,7 @@ function CopilotStatusBar({
);
};
return (
<div className="w-auto max-w-[calc(100%-16px)] mx-auto flex items-center px-3 py-1 pt-2.5 pb-5 mt-2 -mb-3 rounded-xl bg-zinc-50 dark:bg-zinc-900/90 border border-zinc-300 dark:border-zinc-700 shadow-md dark:shadow-zinc-950/10 backdrop-blur-sm transition-all z-0 relative mx-2 overflow-visible">
<div className="w-auto max-w-[calc(100%-16px)] mx-auto flex items-center px-3 py-1 pt-2.5 pb-5 mt-2 -mb-3 rounded-xl bg-white/90 dark:bg-zinc-800/90 border border-zinc-300 dark:border-zinc-700 shadow-md dark:shadow-zinc-950/10 backdrop-blur-sm transition-all z-0 relative mx-2 overflow-visible">
{/* Left: context + status/ticker, flex-1, truncate as needed */}
<div className="flex items-center gap-2 flex-1 min-w-0 overflow-visible">
{renderContext()}

40
apps/rowboat/components/common/panel-common.tsx
View file

@ -33,6 +33,8 @@ export function ActionButton({
interface PanelProps {
title: React.ReactNode;
subtitle?: string;
icon?: React.ReactNode;
rightActions?: React.ReactNode;
actions?: React.ReactNode;
children: React.ReactNode;
@ -47,6 +49,8 @@ interface PanelProps {
export function Panel({
title,
subtitle,
icon,
rightActions,
actions,
children,
@ -65,8 +69,8 @@ export function Panel({
"flex flex-col rounded-xl border relative w-full",
// Only apply overflow-hidden if no custom overflow is set (for backward compatibility)
overflow ? undefined : "overflow-hidden",
variant === 'copilot' ? "border-blue-200 dark:border-blue-800" : "border-zinc-200 dark:border-zinc-800",
"bg-white dark:bg-zinc-900",
variant === 'copilot' ? "border-transparent" : "border-zinc-200 dark:border-zinc-800",
variant === 'copilot' ? "bg-zinc-50 dark:bg-zinc-900" : "bg-white dark:bg-zinc-900",
maxHeight ? "max-h-(--panel-height)" : "h-full",
className
)}
@ -93,7 +97,8 @@ export function Panel({
)}
<div
className={clsx(
"shrink-0 border-b border-zinc-100 dark:border-zinc-800 relative",
"shrink-0 border-b relative",
variant === 'copilot' ? "border-zinc-300 dark:border-zinc-700" : "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,
@ -113,7 +118,34 @@ export function Panel({
) : variant === 'copilot' ? (
<>
<div className="flex items-center gap-2">
{title}
{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}
</>
) : variant === 'playground' ? (
<>
<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}
</>