Use selected agent color to theme the chat input area on home page

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`;

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}

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>

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)/,
+            pattern:
-            variants: ['dark'],
+                /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)/,
+            pattern:
-            variants: ['dark'],
+                /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)/,
+            pattern:
-            variants: ['dark'],
+                /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)/,
+            pattern:
-            variants: ['dark'],
+                /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)/,
+            pattern:
-            variants: ['dark'],
+                /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}',
+        "./pages/**/*.{ts,tsx}",
-        './components/**/*.{ts,tsx}',
+        "./components/**/*.{ts,tsx}",
-        './app/**/*.{ts,tsx}',
+        "./app/**/*.{ts,tsx}",
-        './src/**/*.{ts,tsx}',
+        "./src/**/*.{ts,tsx}",
     ],
     prefix: "",
     theme: {
@@ -101,9 +111,7 @@ const config = {
             },
         },
     },
-    plugins: [
+    plugins: [require("tailwindcss-animate")],
-        require("tailwindcss-animate"),
+} satisfies Config;
-    ],
-} satisfies Config
 
-export default config
+export default config;