From 046ebcf524aec051be1321f18becc0a8109b5f32 Mon Sep 17 00:00:00 2001
From: akhisud3195 <akhileshs.s4@gmail.com>
Date: Mon, 24 Feb 2025 16:40:40 +0530
Subject: [PATCH] Extend dark mode to copilot

---
 .../projects/[projectId]/workflow/copilot.tsx | 18 ++++-----
 .../workflow/copilot_action_components.tsx    | 38 +++++++++----------
 2 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/apps/rowboat/app/projects/[projectId]/workflow/copilot.tsx b/apps/rowboat/app/projects/[projectId]/workflow/copilot.tsx
index 6f3717c0..568e4d59 100644
--- a/apps/rowboat/app/projects/[projectId]/workflow/copilot.tsx
+++ b/apps/rowboat/app/projects/[projectId]/workflow/copilot.tsx
@@ -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">
diff --git a/apps/rowboat/app/projects/[projectId]/workflow/copilot_action_components.tsx b/apps/rowboat/app/projects/[projectId]/workflow/copilot_action_components.tsx
index 49ee0fc8..14b54ced 100644
--- a/apps/rowboat/app/projects/[projectId]/workflow/copilot_action_components.tsx
+++ b/apps/rowboat/app/projects/[projectId]/workflow/copilot_action_components.tsx
@@ -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>