Unify SearchBox styles with Input component and add autoFocus

web/app/components/plugins/marketplace/search-box/index.tsx

@@ -19,6 +19,7 @@ type SearchBoxProps = {
   usedInMarketplace?: boolean
   onShowAddCustomCollectionModal?: () => void
   onAddedCustomTool?: () => void
+  autoFocus?: boolean
 }
 const SearchBox = ({
   search,
@@ -32,6 +33,7 @@ const SearchBox = ({
   usedInMarketplace = false,
   supportAddCustomTool,
   onShowAddCustomCollectionModal,
+  autoFocus = false,
 }: SearchBoxProps) => {
   return (
     <div
@@ -40,7 +42,7 @@ const SearchBox = ({
       <div className={
         cn('flex items-center',
           usedInMarketplace && 'rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur p-1.5 shadow-md',
-          !usedInMarketplace && 'rounded-lg bg-components-input-bg-normal p-0.5',
+          !usedInMarketplace && 'radius-md border border-transparent bg-components-input-bg-normal focus-within:border-components-input-border-active hover:border-components-input-border-hover',
           inputClassName,
         )
       }>
@@ -82,11 +84,12 @@ const SearchBox = ({
         {
           !usedInMarketplace && (
             <>
-              <div className='flex grow items-center p-2'>
+              <div className='flex grow items-center py-[7px] pl-2 pr-3'>
                 <RiSearchLine className='size-4 text-components-input-text-placeholder' />
                 <input
+                  autoFocus={autoFocus}
                   className={cn(
-                    'body-md-medium ml-1.5 mr-1 inline-block grow appearance-none bg-transparent text-text-secondary outline-none',
+                    'system-sm-regular ml-1.5 mr-1 inline-block grow appearance-none bg-transparent text-components-input-text-filled outline-none placeholder:text-components-input-text-placeholder',
                     search && 'mr-2',
                   )}
                   value={search}

web/app/components/workflow/block-selector/main.tsx

@@ -168,6 +168,7 @@ const NodeSelector: FC<NodeSelectorProps> = ({
               <div className='relative m-2' onClick={e => e.stopPropagation()}>
                 {activeTab === TabsEnum.Start && (
                   <SearchBox
+                    autoFocus
                     search={searchText}
                     onSearchChange={setSearchText}
                     tags={tags}
@@ -200,6 +201,7 @@ const NodeSelector: FC<NodeSelectorProps> = ({
                 )}
                 {activeTab === TabsEnum.Tools && (
                   <SearchBox
+                    autoFocus
                     search={searchText}
                     onSearchChange={setSearchText}
                     tags={tags}