mirror of
https://github.com/rowboatlabs/rowboat.git
synced 2026-06-06 19:35:44 +02:00
Merge pull request #36 from rowboatlabs/refactor
Extend dark mode to copilot
This commit is contained in:
Akhilesh Sudhakar
GitHub
commit
8c1b5346f3
2 changed files with 28 additions and 28 deletions
|
|
@ -92,7 +92,7 @@ function ComposeBox({
|
|||
size="sm"
|
||||
isIconOnly
|
||||
onClick={handleInput}
|
||||
className="bg-gray-100"
|
||||
className="bg-gray-100 dark:bg-gray-800"
|
||||
>
|
||||
<CornerDownLeftIcon size={16} />
|
||||
</Button>}
|
||||
|
|
@ -107,12 +107,12 @@ function RawJsonResponse({
|
|||
const [expanded, setExpanded] = useState(false);
|
||||
return <div className="flex flex-col gap-2">
|
||||
<button
|
||||
className="w-4 text-gray-300 hover:text-gray-600"
|
||||
className="w-4 text-gray-300 hover:text-gray-600 dark:hover:text-gray-300"
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-rectangle-ellipsis"><rect width="20" height="12" x="2" y="6" rx="2" /><path d="M12 12h.01" /><path d="M17 12h.01" /><path d="M7 12h.01" /></svg>
|
||||
</button>
|
||||
<pre className={clsx("text-sm bg-gray-50 border border-gray-200 rounded-sm p-2 overflow-x-auto", {
|
||||
<pre className={clsx("text-sm bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-sm p-2 overflow-x-auto", {
|
||||
'hidden': !expanded,
|
||||
})}>
|
||||
{JSON.stringify(message.content, null, 2)}
|
||||
|
|
@ -164,7 +164,7 @@ function UserMessage({
|
|||
}: {
|
||||
message: z.infer<typeof CopilotUserMessage>;
|
||||
}) {
|
||||
return <div className="bg-gray-50 border border-gray-200 rounded-sm px-2 text-sm">
|
||||
return <div className="bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-sm px-2 text-sm">
|
||||
<MarkdownContent content={message.content} />
|
||||
</div>
|
||||
}
|
||||
|
|
@ -449,7 +449,7 @@ function App({
|
|||
)}
|
||||
</>;
|
||||
})}
|
||||
{loadingResponse && <div className="px-2 py-1 flex items-center animate-pulse text-gray-600 text-xs">
|
||||
{loadingResponse && <div className="px-2 py-1 flex items-center animate-pulse text-gray-600 dark:text-gray-400 text-xs">
|
||||
<div>
|
||||
{loadingMessage}
|
||||
</div>
|
||||
|
|
@ -459,8 +459,8 @@ function App({
|
|||
</div>
|
||||
<div className="shrink-0">
|
||||
{responseError && (
|
||||
<div className="max-w-[768px] mx-auto mb-4 p-2 bg-red-50 border border-red-200 rounded-lg flex gap-2 justify-between items-center text-sm">
|
||||
<p className="text-red-600">{responseError}</p>
|
||||
<div className="max-w-[768px] mx-auto mb-4 p-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg flex gap-2 justify-between items-center text-sm">
|
||||
<p className="text-red-600 dark:text-red-400">{responseError}</p>
|
||||
<Button
|
||||
size="sm"
|
||||
color="danger"
|
||||
|
|
@ -473,7 +473,7 @@ function App({
|
|||
</div>
|
||||
)}
|
||||
{effectiveContext && <div className="flex items-start">
|
||||
<div className="flex items-center gap-1 bg-gray-100 text-sm px-2 py-1 rounded-sm shadow-sm 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 mb-2">
|
||||
<div>
|
||||
{effectiveContext.type === 'chat' && "Chat"}
|
||||
{effectiveContext.type === 'agent' && `Agent: ${effectiveContext.name}`}
|
||||
|
|
@ -481,7 +481,7 @@ function App({
|
|||
{effectiveContext.type === 'prompt' && `Prompt: ${effectiveContext.name}`}
|
||||
</div>
|
||||
<button
|
||||
className="text-gray-500 hover:text-gray-600"
|
||||
className="text-gray-500 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-300"
|
||||
onClick={() => setDiscardContext(true)}
|
||||
>
|
||||
<svg className="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
|
||||
|
|
|
|||
|
|
@ -50,17 +50,17 @@ export function Action({
|
|||
}
|
||||
|
||||
return <div className={clsx('flex flex-col rounded-sm border border-t-4', {
|
||||
'bg-gray-50 border-gray-400 border-t-blue-500 shadow': !stale && !allApplied && action.action == 'create_new',
|
||||
'bg-gray-50 border-gray-400 border-t-orange-500 shadow': !stale && !allApplied && action.action == 'edit',
|
||||
'bg-gray-100 border-gray-400 border-t-gray-400': stale || allApplied || action.error,
|
||||
'bg-gray-50 dark:bg-gray-800/50 border-gray-400 dark:border-gray-600 border-t-blue-500 shadow': !stale && !allApplied && action.action == 'create_new',
|
||||
'bg-gray-50 dark:bg-gray-800/50 border-gray-400 dark:border-gray-600 border-t-orange-500 shadow': !stale && !allApplied && action.action == 'edit',
|
||||
'bg-gray-100 dark:bg-gray-800/30 border-gray-400 dark:border-gray-600 border-t-gray-400': stale || allApplied || action.error,
|
||||
})}>
|
||||
<ActionContext.Provider value={{ msgIndex, actionIndex, action, workflow, handleApplyChange, appliedFields, stale }}>
|
||||
<ActionHeader />
|
||||
<ActionSummary />
|
||||
{expanded && <PreviewModalProvider>
|
||||
{action.error && <div className="flex flex-col gap-1 px-1 text-xs bg-red-50 rounded-sm">
|
||||
<div className="text-red-500 font-medium text-xs">This configuration is invalid and cannot be applied:</div>
|
||||
<div className="text-xs font-mono">{action.error}</div>
|
||||
{action.error && <div className="flex flex-col gap-1 px-1 text-xs bg-red-50 dark:bg-red-900/20 rounded-sm">
|
||||
<div className="text-red-500 dark:text-red-400 font-medium text-xs">This configuration is invalid and cannot be applied:</div>
|
||||
<div className="text-xs font-mono dark:text-gray-300">{action.error}</div>
|
||||
</div>}
|
||||
<div className="flex flex-col gap-2 px-1">
|
||||
{Object.entries(action.config_changes).map(([key, value]) => {
|
||||
|
|
@ -69,14 +69,14 @@ export function Action({
|
|||
</div>
|
||||
</PreviewModalProvider>}
|
||||
<div className="flex items-center">
|
||||
{action.error && <div className="grow rounded-l-sm bg-red-100 text-red-500 flex flex-col items-center justify-center h-8">
|
||||
{action.error && <div className="grow rounded-l-sm bg-red-100 dark:bg-red-900/20 text-red-500 dark:text-red-400 flex flex-col items-center justify-center h-8">
|
||||
<div className="flex items-center gap-2 justify-center">
|
||||
<AlertTriangleIcon size={16} />
|
||||
<div className="font-medium text-xs">Error</div>
|
||||
</div>
|
||||
</div>}
|
||||
{!action.error && <button
|
||||
className="grow rounded-l-sm bg-blue-100 text-blue-500 hover:bg-blue-200 disabled:bg-gray-100 disabled:text-gray-300 flex flex-col items-center justify-center h-8"
|
||||
className="grow rounded-l-sm bg-blue-100 dark:bg-blue-900/20 text-blue-500 dark:text-blue-400 hover:bg-blue-200 dark:hover:bg-blue-900/30 disabled:bg-gray-100 dark:disabled:bg-gray-800/30 disabled:text-gray-300 dark:disabled:text-gray-600 flex flex-col items-center justify-center h-8"
|
||||
onClick={applyChangeHandler}
|
||||
disabled={stale || allApplied}
|
||||
>
|
||||
|
|
@ -86,10 +86,10 @@ export function Action({
|
|||
</div>
|
||||
</button>}
|
||||
<button
|
||||
className="w-10 shrink-0 flex flex-col items-center h-8 rounded-r-sm bg-gray-100 text-gray-600 hover:bg-gray-200 justify-center"
|
||||
className="w-10 shrink-0 flex flex-col items-center h-8 rounded-r-sm bg-gray-100 dark:bg-gray-800/50 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-800 justify-center"
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
>
|
||||
<div className="flex items-center gap-2 justify-center text-gray-400">
|
||||
<div className="flex items-center gap-2 justify-center text-gray-400 dark:text-gray-500">
|
||||
{expanded ? (
|
||||
<ChevronsUpIcon size={16} />
|
||||
) : (
|
||||
|
|
@ -107,7 +107,7 @@ export function ActionSummary() {
|
|||
if (!action || !workflow) return null;
|
||||
|
||||
return <div className="px-1 my-1">
|
||||
<div className="bg-white rounded-sm p-2 text-sm">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-sm p-2 text-sm">
|
||||
{action.change_description}
|
||||
</div>
|
||||
</div>;
|
||||
|
|
@ -193,20 +193,20 @@ export function ActionField({
|
|||
}
|
||||
}
|
||||
|
||||
return <div className="flex flex-col bg-white rounded-sm">
|
||||
return <div className="flex flex-col bg-white dark:bg-gray-800 rounded-sm">
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="text-xs font-semibold px-2 py-1 text-gray-600">{field}</div>
|
||||
{previewCondition && <div className="flex gap-4 items-center bg-gray-50 rounded-bl-sm rounded-tr-sm px-2 py-1">
|
||||
<div className="text-xs font-semibold px-2 py-1 text-gray-600 dark:text-gray-300">{field}</div>
|
||||
{previewCondition && <div className="flex gap-4 items-center bg-gray-50 dark:bg-gray-700 rounded-bl-sm rounded-tr-sm px-2 py-1">
|
||||
<button
|
||||
className="text-gray-500 hover:text-black"
|
||||
className="text-gray-500 dark:text-gray-400 hover:text-black dark:hover:text-white"
|
||||
onClick={previewModalHandler}
|
||||
>
|
||||
<EyeIcon size={16} />
|
||||
</button>
|
||||
{action.action === 'edit' && !action.error && <button
|
||||
className={clsx("text-gray-500 hover:text-black", {
|
||||
'text-green-600': applied,
|
||||
'text-gray-600': stale,
|
||||
className={clsx("text-gray-500 dark:text-gray-400 hover:text-black dark:hover:text-white", {
|
||||
'text-green-600 dark:text-green-400': applied,
|
||||
'text-gray-600 dark:text-gray-400': stale,
|
||||
})}
|
||||
onClick={applyChangeHandler}
|
||||
disabled={stale || applied}
|
||||
|
|
@ -216,7 +216,7 @@ export function ActionField({
|
|||
</div>}
|
||||
</div>
|
||||
<div className="px-2 pb-1">
|
||||
<div className="text-sm italic truncate">
|
||||
<div className="text-sm italic truncate dark:text-gray-300">
|
||||
{JSON.stringify(newValue)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue