From a5d0ca6e1c0bc773b7fc00cf5a4618dfb2035921 Mon Sep 17 00:00:00 2001
From: Debanjum <debanjum@gmail.com>
Date: Mon, 28 Oct 2024 01:19:37 -0700
Subject: [PATCH] Use selected agent color to theme the chat input area on home
 page

---
 src/interface/web/app/common/colorUtils.ts    |  7 +++
 .../chatInputArea/chatInputArea.tsx           | 12 ++++-
 src/interface/web/app/page.tsx                |  2 +
 src/interface/web/tailwind.config.ts          | 50 +++++++++++--------
 4 files changed, 48 insertions(+), 23 deletions(-)

diff --git a/src/interface/web/app/common/colorUtils.ts b/src/interface/web/app/common/colorUtils.ts
index c534097f..6cd57a64 100644
--- a/src/interface/web/app/common/colorUtils.ts
+++ b/src/interface/web/app/common/colorUtils.ts
@@ -42,6 +42,13 @@ export function converColorToBgGradient(color: string) {
     return `${convertToBGGradientClass(color)} dark:border dark:border-neutral-700`;
 }
 
+export function convertColorToRingClass(color: string | undefined) {
+    if (color && tailwindColors.includes(color)) {
+        return `focus-visible:ring-${color}-500`;
+    }
+    return `focus-visible:ring-orange-500`;
+}
+
 export function convertColorToBorderClass(color: string) {
     if (tailwindColors.includes(color)) {
         return `border-${color}-500`;
diff --git a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
index 14eaed1e..84adbb24 100644
--- a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
+++ b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
@@ -37,7 +37,12 @@ import { Popover, PopoverContent } from "@/components/ui/popover";
 import { PopoverTrigger } from "@radix-ui/react-popover";
 import { Textarea } from "@/components/ui/textarea";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
-import { convertColorToTextClass, convertToBGClass } from "@/app/common/colorUtils";
+import {
+    convertColorToTextClass,
+    convertToBGClass,
+    convertColorToBorderClass,
+    convertColorToRingClass,
+} from "@/app/common/colorUtils";
 
 import LoginPrompt from "../loginPrompt/loginPrompt";
 import { uploadDataForIndexing } from "../../common/chatFunctions";
@@ -480,7 +485,10 @@ export const ChatInputArea = forwardRef<HTMLTextAreaElement, ChatInputProps>((pr
                         </div>
                         <Textarea
                             ref={chatInputRef}
-                            className={`border-none w-full h-16 min-h-16 max-h-[128px] md:py-4 rounded-lg resize-none dark:bg-neutral-700 ${props.isMobileWidth ? "text-md" : "text-lg"}`}
+                            className={`border ${props.agentColor ? convertColorToBorderClass(props.agentColor) : "border-orange-300"} focus:border-none
+                                focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 ${convertColorToRingClass(props.agentColor)}
+                                w-full h-16 min-h-16 max-h-[128px] md:py-4 rounded-lg resize-none dark:bg-neutral-700
+                                ${props.isMobileWidth ? "text-md" : "text-lg"}`}
                             placeholder="Type / to see a list of commands"
                             id="message"
                             autoFocus={true}
diff --git a/src/interface/web/app/page.tsx b/src/interface/web/app/page.tsx
index b570e86c..2c8ff718 100644
--- a/src/interface/web/app/page.tsx
+++ b/src/interface/web/app/page.tsx
@@ -305,6 +305,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
                             conversationId={null}
                             isMobileWidth={props.isMobileWidth}
                             setUploadedFiles={props.setUploadedFiles}
+                            agentColor={agents.find((agent) => agent.slug === selectedAgent)?.color}
                             ref={chatInputRef}
                         />
                     </div>
@@ -386,6 +387,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
                             conversationId={null}
                             isMobileWidth={props.isMobileWidth}
                             setUploadedFiles={props.setUploadedFiles}
+                            agentColor={agents.find((agent) => agent.slug === selectedAgent)?.color}
                             ref={chatInputRef}
                         />
                     </div>
diff --git a/src/interface/web/tailwind.config.ts b/src/interface/web/tailwind.config.ts
index 853b7486..cea53e8e 100644
--- a/src/interface/web/tailwind.config.ts
+++ b/src/interface/web/tailwind.config.ts
@@ -1,34 +1,44 @@
-import type { Config } from "tailwindcss"
+import type { Config } from "tailwindcss";
 
 const config = {
     safelist: [
         {
-            pattern: /to-(blue|yellow|green|pink|purple|orange|red|slate|gray|zinc|neutral|stone|amber|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|fuchsia|rose)-(50|100|200|950)/,
-            variants: ['dark'],
+            pattern:
+                /to-(blue|yellow|green|pink|purple|orange|red|slate|gray|zinc|neutral|stone|amber|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|fuchsia|rose)-(50|100|200|950)/,
+            variants: ["dark"],
         },
         {
-            pattern: /text-(blue|yellow|green|pink|purple|orange|red|slate|gray|zinc|neutral|stone|amber|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|fuchsia|rose)-(50|100|200|950)/,
-            variants: ['dark'],
+            pattern:
+                /text-(blue|yellow|green|pink|purple|orange|red|slate|gray|zinc|neutral|stone|amber|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|fuchsia|rose)-(50|100|200|950)/,
+            variants: ["dark"],
         },
         {
-            pattern: /border-(blue|yellow|green|pink|purple|orange|red|slate|gray|zinc|neutral|stone|amber|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|fuchsia|rose)-(50|100|200|950)/,
-            variants: ['dark'],
+            pattern:
+                /border-(blue|yellow|green|pink|purple|orange|red|slate|gray|zinc|neutral|stone|amber|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|fuchsia|rose)-(50|100|200|950)/,
+            variants: ["dark"],
         },
         {
-            pattern: /border-l-(blue|yellow|green|pink|purple|orange|red|slate|gray|zinc|neutral|stone|amber|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|fuchsia|rose)-(50|100|200|400|500|950)/,
-            variants: ['dark'],
+            pattern:
+                /border-l-(blue|yellow|green|pink|purple|orange|red|slate|gray|zinc|neutral|stone|amber|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|fuchsia|rose)-(50|100|200|400|500|950)/,
+            variants: ["dark"],
         },
         {
-            pattern: /bg-(blue|yellow|green|pink|purple|orange|red|slate|gray|zinc|neutral|stone|amber|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|fuchsia|rose)-(50|100|200|400|500|950)/,
-            variants: ['dark'],
-        }
+            pattern:
+                /bg-(blue|yellow|green|pink|purple|orange|red|slate|gray|zinc|neutral|stone|amber|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|fuchsia|rose)-(50|100|200|400|500|950)/,
+            variants: ["dark"],
+        },
+        {
+            pattern:
+                /ring-(blue|yellow|green|pink|purple|orange|red|slate|gray|zinc|neutral|stone|amber|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|fuchsia|rose)-(50|100|200|400|500|950)/,
+            variants: ["focus-visible", "dark"],
+        },
     ],
     darkMode: ["class"],
     content: [
-        './pages/**/*.{ts,tsx}',
-        './components/**/*.{ts,tsx}',
-        './app/**/*.{ts,tsx}',
-        './src/**/*.{ts,tsx}',
+        "./pages/**/*.{ts,tsx}",
+        "./components/**/*.{ts,tsx}",
+        "./app/**/*.{ts,tsx}",
+        "./src/**/*.{ts,tsx}",
     ],
     prefix: "",
     theme: {
@@ -101,9 +111,7 @@ const config = {
             },
         },
     },
-    plugins: [
-        require("tailwindcss-animate"),
-    ],
-} satisfies Config
+    plugins: [require("tailwindcss-animate")],
+} satisfies Config;
 
-export default config
+export default config;