Styling tools selection shortcut buttons (#11)

This pull request includes updates to the `ToolsToggle` component and
the `toolIcons` configuration to enhance the styling and functionality
of tool icons. The most important changes include adding color
properties to the tool icon mappings and updating the `ToolsToggle`
component to use these new properties.

Improvements to tool icon styling:

*
[`src/components/ChatInputButton/toolIcons.tsx`](diffhunk://#diff-f9c7082cb98bf0b9e486b971e75e43b385a100093e611408d2e6cb356ec3f655L1-R94):
Added `colors` property to each tool icon mapping, which includes `bg`,
`hoverBg`, and `text` color classes.
*
[`src/components/ChatInputButton/ToolsToggle.tsx`](diffhunk://#diff-5e81be1e28b3637aa2337dde6d10a306e31c56a504ee3c59747f301d1f3fc2e1L74-R74):
Updated the `ToolsToggle` component to use the new `colors` property
from the tool icon mappings for background and text colors.
[[1]](diffhunk://#diff-5e81be1e28b3637aa2337dde6d10a306e31c56a504ee3c59747f301d1f3fc2e1L74-R74)
[[2]](diffhunk://#diff-5e81be1e28b3637aa2337dde6d10a306e31c56a504ee3c59747f301d1f3fc2e1L91-R92)

Author: shahariaazam

src/components/ChatInputButton/ToolsToggle.tsx

@@ -71,7 +71,7 @@ export const ToolsToggle: React.FC<ToolsToggleButtonProps> = ({
             />
 
             {/* Quick access tool icons */}
-            {toolIconMappings.map(({ pattern, icon: Icon, title }) => {
+            {toolIconMappings.map(({ pattern, icon: Icon, title, colors }) => {
                 // Check if there are any available tools matching this pattern
                 const hasMatchingTools = availableTools.some(tool =>
                     tool.toLowerCase().includes(pattern.toLowerCase())
@@ -88,8 +88,8 @@ export const ToolsToggle: React.FC<ToolsToggleButtonProps> = ({
                             selectedTools.some(tool =>
                                 tool.toLowerCase().includes(pattern.toLowerCase())
                             )
-                                ? 'bg-gray-800 text-white hover:bg-gray-700'
-                                : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+                                ? `${colors.bg} ${colors.text} ${colors.hoverBg}`
+                                : `bg-gray-400 ${colors.text} ${colors.hoverBg}`
                         }`}
                     >
                         <Icon className="h-4 w-4" />

src/components/ChatInputButton/toolIcons.tsx

@@ -1,56 +1,96 @@
-import { IconType } from 'react-icons';
-import { SiGmail } from 'react-icons/si';
-import {FaDatabase, FaDocker, FaGithub, FaGitSquare, FaRegFolderOpen} from 'react-icons/fa';
+import {SiGmail} from "react-icons/si";
 import {MdOutlineHttp} from "react-icons/md";
+import {IconType} from "react-icons";
+import {FaDatabase, FaDocker, FaGithub, FaGitSquare, FaRegFolderOpen} from "react-icons/fa";
 
 interface ToolIconMapping {
     pattern: string;
     icon: IconType;
     title: string;
-    regex: RegExp;  // Make regex required since we're using it for all
+    regex: RegExp;
+    colors: {
+        bg: string;
+        hoverBg: string;
+        text: string;
+    };
 }
 
 export const toolIconMappings: ToolIconMapping[] = [
     {
         pattern: 'gmail',
         icon: SiGmail,
         title: 'Access Gmail',
-        regex: /^gmail\w*/
+        regex: /^gmail\w*/,
+        colors: {
+            bg: 'bg-red-600',
+            hoverBg: 'hover:bg-red-700',
+            text: 'text-white'
+        }
     },
     {
         pattern: 'curl',
         icon: MdOutlineHttp,
         title: 'HTTP Tools using cURL',
-        regex: /^curl\w*/
+        regex: /^curl\w*/,
+        colors: {
+            bg: 'bg-purple-600',
+            hoverBg: 'hover:bg-purple-700',
+            text: 'text-white'
+        }
     },
     {
-        pattern: 'sql',
+        pattern: 'postgresql',
         icon: FaDatabase,
-        title: 'Database Tools',
-        regex: /^sql\w*/
+        title: 'PostgreSQL Tools',
+        regex: /^postgresql\w*/,
+        colors: {
+            bg: 'bg-blue-600',
+            hoverBg: 'hover:bg-blue-700',
+            text: 'text-white'
+        }
     },
     {
         pattern: 'git',
         icon: FaGitSquare,
         title: 'Git Tools',
-        regex: /^git(?!hub)\w*/
+        regex: /^git(?!hub)\w*/,
+        colors: {
+            bg: 'bg-orange-600',
+            hoverBg: 'hover:bg-orange-700',
+            text: 'text-white'
+        }
     },
     {
         pattern: 'github',
         icon: FaGithub,
         title: 'GitHub Tools',
-        regex: /^github\w*/
+        regex: /^github\w*/,
+        colors: {
+            bg: 'bg-gray-800',
+            hoverBg: 'hover:bg-gray-900',
+            text: 'text-white'
+        }
     },
     {
         pattern: 'docker',
         icon: FaDocker,
         title: 'Docker Tools',
-        regex: /^docker\w*/
+        regex: /^docker\w*/,
+        colors: {
+            bg: 'bg-sky-600',
+            hoverBg: 'hover:bg-sky-700',
+            text: 'text-white'
+        }
     },
     {
         pattern: 'filesystem',
         icon: FaRegFolderOpen,
         title: 'Manage Filesystem',
-        regex: /^filesystem\w*/
+        regex: /^filesystem\w*/,
+        colors: {
+            bg: 'bg-amber-500',
+            hoverBg: 'hover:bg-amber-600',
+            text: 'text-white'
+        }
     }
 ];