feat: agents route replacing chatbots

- Removed API Keys tab from SettingsBar and adjusted tab layout.
- Improved styling for tab scrolling buttons and gradient indicators.
- Introduced AgentDetailsModal for displaying agent access details.
- Updated Analytics component to fetch agent data and handle analytics for selected agent.
- Refactored Logs component to accept agentId as a prop for filtering logs.
- Enhanced type definitions for InputProps to include textSize.
- Cleaned up unused imports and optimized component structure across various files.

frontend/src/components/Input.tsx

@@ -13,6 +13,7 @@ const Input = ({
   className = '',
   colorVariant = 'silver',
   borderVariant = 'thick',
+  textSize = 'medium',
   children,
   labelBgClassName = 'bg-white dark:bg-raisin-black',
   onChange,
@@ -28,6 +29,10 @@ const Input = ({
     thin: 'border',
     thick: 'border-2',
   };
+  const textSizeStyles = {
+    small: 'text-sm',
+    medium: 'text-base',
+  };
 
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -35,15 +40,7 @@ const Input = ({
     <div className={`relative ${className}`}>
       <input
         ref={inputRef}
-        className={`peer h-[42px] w-full rounded-full px-3 py-1 
-          bg-transparent outline-none 
-          text-jet dark:text-bright-gray
-          placeholder-transparent 
-          ${colorStyles[colorVariant]} 
-          ${borderStyles[borderVariant]}
-          [&:-webkit-autofill]:bg-transparent
-          [&:-webkit-autofill]:appearance-none
-          [&:-webkit-autofill_selected]:bg-transparent`}
+        className={`peer h-[42px] w-full rounded-full bg-transparent px-3 py-1 text-jet placeholder-transparent outline-none dark:text-bright-gray ${colorStyles[colorVariant]} ${borderStyles[borderVariant]} ${textSizeStyles[textSize]} [&:-webkit-autofill]:appearance-none [&:-webkit-autofill]:bg-transparent [&:-webkit-autofill_selected]:bg-transparent`}
         type={type}
         id={id}
         name={name}
@@ -61,15 +58,11 @@ const Input = ({
       {placeholder && (
         <label
           htmlFor={id}
-          className={`absolute left-3 -top-2.5 px-2 text-xs transition-all 
-            peer-placeholder-shown:top-2.5 peer-placeholder-shown:left-3 peer-placeholder-shown:text-base 
-            peer-placeholder-shown:text-gray-4000 peer-focus:-top-2.5 peer-focus:left-3 peer-focus:text-xs 
-            peer-focus:text-gray-4000 dark:text-silver dark:peer-placeholder-shown:text-gray-400 
-            cursor-none pointer-events-none ${labelBgClassName}`}
+          className={`absolute -top-2.5 left-3 px-2 ${textSizeStyles[textSize]} transition-all peer-placeholder-shown:left-3 peer-placeholder-shown:top-2.5 peer-placeholder-shown:${textSizeStyles[textSize]} pointer-events-none cursor-none peer-placeholder-shown:text-gray-4000 peer-focus:-top-2.5 peer-focus:left-3 peer-focus:text-xs peer-focus:text-gray-4000 dark:text-silver dark:peer-placeholder-shown:text-gray-400 ${labelBgClassName}`}
         >
           {placeholder}
           {required && (
-            <span className="text-[#D30000] dark:text-[#D42626] ml-0.5">*</span>
+            <span className="ml-0.5 text-[#D30000] dark:text-[#D42626]">*</span>
           )}
         </label>
       )}