apunkt/rowboat
1
0
Fork 0
mirror of https://github.com/rowboatlabs/rowboat.git synced 2026-05-13 17:22:37 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Expand chat in playground and imrpove design of copilot context bubble

Browse source
This commit is contained in:
akhisud3195 2025-07-11 21:06:49 +05:30
parent 9e44dcb939
commit 5f1b85e03b
5 changed files with 39 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

50
apps/rowboat/app/projects/[projectId]/copilot/app.tsx
View file

@ -181,22 +181,40 @@ const App = forwardRef<{ handleCopyChat: () => void; handleUserMessage: (message
</Button>
</div>
)}
{effectiveContext && <div className="flex items-start mb-2">
<div className="flex items-center gap-1 bg-gray-100 dark:bg-gray-800 text-sm px-2 py-1 rounded-sm shadow-sm">
<div>
{effectiveContext.type === 'chat' && "Chat"}
{effectiveContext.type === 'agent' && `Agent: ${effectiveContext.name}`}
{effectiveContext.type === 'tool' && `Tool: ${effectiveContext.name}`}
{effectiveContext.type === 'prompt' && `Prompt: ${effectiveContext.name}`}
{effectiveContext && (
<div className="flex items-start mb-2">
<div className="flex items-center gap-2 px-3 py-1 rounded-full border border-zinc-200 dark:border-zinc-700 bg-zinc-50/70 dark:bg-zinc-800/40 shadow-sm text-sm font-medium text-zinc-700 dark:text-zinc-200 transition-all">
{/* Context icon (no background) */}
{effectiveContext.type === 'chat' && (
<svg className="w-4 h-4 text-blue-500 dark:text-blue-300 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M18 10c0 3.866-3.582 7-8 7a8.96 8.96 0 01-4.39-1.11L2 17l1.11-2.61A8.96 8.96 0 012 10c0-3.866 3.582-7 8-7s8 3.134 8 7z" /></svg>
)}
{effectiveContext.type === 'agent' && (
<svg className="w-4 h-4 text-green-500 dark:text-green-300 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a6 6 0 016 6c0 2.21-1.343 4.09-3.25 5.25A4.992 4.992 0 0110 18a4.992 4.992 0 01-2.75-4.75C5.343 12.09 4 10.21 4 8a6 6 0 016-6z" /></svg>
)}
{effectiveContext.type === 'tool' && (
<svg className="w-4 h-4 text-yellow-500 dark:text-yellow-300 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M13.293 2.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-8.5 8.5a1 1 0 01-.293.207l-4 2a1 1 0 01-1.316-1.316l2-4a1 1 0 01.207-.293l8.5-8.5z" /></svg>
)}
{effectiveContext.type === 'prompt' && (
<svg className="w-4 h-4 text-purple-500 dark:text-purple-300 mr-1" fill="currentColor" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" /></svg>
)}
{/* Context label */}
<span>
{effectiveContext.type === 'chat' && "Chat"}
{effectiveContext.type === 'agent' && `Agent: ${effectiveContext.name}`}
{effectiveContext.type === 'tool' && `Tool: ${effectiveContext.name}`}
{effectiveContext.type === 'prompt' && `Prompt: ${effectiveContext.name}`}
</span>
{/* Close button */}
<button
className="ml-2 text-zinc-400 hover:text-zinc-600 dark:text-zinc-400 dark:hover:text-zinc-100 transition-colors duration-150 rounded-full p-1 focus:outline-none focus:ring-2 focus:ring-blue-200"
onClick={() => setDiscardContext(true)}
aria-label="Close context"
>
<XIcon size={16} />
</button>
</div>
<button
className="text-gray-500 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-300"
onClick={() => setDiscardContext(true)}
>
<XIcon size={16} />
</button>
</div>
</div>}
)}
<ComposeBoxCopilot
handleUserMessage={handleUserMessage}
messages={messages}
@ -273,8 +291,8 @@ export const Copilot = forwardRef<{ handleUserMessage: (message: string) => void
title={
<div className="flex items-center gap-3">
<div className="flex items-center gap-2">
<div className="text-sm font-medium text-gray-900 dark:text-gray-100">
SKIPPER
<div className="font-semibold text-zinc-700 dark:text-zinc-300">
Skipper
</div>
<Tooltip content="A copilot to help you build and modify your workflow">
<InfoIcon className="w-4 h-4 text-gray-400 cursor-help" />

4
apps/rowboat/app/projects/[projectId]/playground/app.tsx
View file

@ -101,8 +101,8 @@ export function App({
title={
<div className="flex items-center gap-3">
<div className="flex items-center gap-2">
<div className="text-sm font-medium text-gray-900 dark:text-gray-100">
PLAYGROUND
<div className="font-semibold text-zinc-700 dark:text-zinc-300">
Playground
</div>
<Tooltip content="Test your workflow and chat with your agents in real-time">
<InfoIcon className="w-4 h-4 text-gray-400 cursor-help" />

2
apps/rowboat/app/projects/[projectId]/playground/components/chat.tsx
View file

@ -271,7 +271,7 @@ export function Chat({
projectTools,
]);
return <div className="relative max-w-3xl mx-auto h-full flex flex-col">
return <div className="w-11/12 max-w-6xl mx-auto h-full flex flex-col relative">
<div className="sticky top-0 z-10 bg-white dark:bg-zinc-900 pt-4 pb-4">
{USE_TESTING_FEATURE && (
<ProfileContextBox

2
apps/rowboat/app/projects/[projectId]/playground/components/messages.tsx
View file

@ -452,7 +452,7 @@ export function Messages({
// Just render the messages, no scroll container or unread bubble
return (
<div className="max-w-4xl mx-auto px-2 sm:px-6 relative">
<div className="max-w-7xl mx-auto px-2 sm:px-8 relative">
{messages.map((message, index) => {
const renderedMessage = renderMessage(message, index);
if (renderedMessage) {