fix: search tools ui and some ui problem

web/app/components/workflow/block-selector/market-place-plugin/list.tsx

@@ -1,5 +1,5 @@
 'use client'
-import React, { forwardRef, useImperativeHandle, useMemo, useRef } from 'react'
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import useStickyScroll, { ScrollPosition } from '../use-sticky-scroll'
 import Item from './item'
@@ -30,7 +30,6 @@ const List = ({
     wrapElemRef,
     nextToStickyELemRef,
   })
-
   const stickyClassName = useMemo(() => {
     switch (scrollPosition) {
       case ScrollPosition.aboveTheWrap:
@@ -38,7 +37,7 @@ const List = ({
       case ScrollPosition.showing:
         return 'bottom-0 pt-3 pb-1'
       case ScrollPosition.belowTheWrap:
-        return 'bottom-0 items-center rounded-b-xl border-t border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg cursor-pointer'
+        return 'bottom-0 items-center rounded-b-xl border-t border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg rounded-b-lg cursor-pointer'
     }
   }, [scrollPosition])
 
@@ -46,6 +45,11 @@ const List = ({
     handleScroll,
   }))
 
+  useEffect(() => {
+    handleScroll()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [list])
+
   const handleHeadClick = () => {
     if (scrollPosition === ScrollPosition.belowTheWrap) {
       nextToStickyELemRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
@@ -57,7 +61,7 @@ const List = ({
   if (hasSearchText) {
     return (
       <Link
-        className='sticky bottom-0 z-10 flex h-8 px-4 py-1 system-sm-medium items-center rounded-b-xl border-t border-[0.5px] border-components-panel-border bg-components-panel-bg-blur  shadow-lg text-text-accent-light-mode-only cursor-pointer'
+        className='sticky bottom-0 z-10 flex h-8 px-4 py-1 system-sm-medium items-center border-t border-[0.5px] border-components-panel-border bg-components-panel-bg-blur rounded-b-lg shadow-lg text-text-accent-light-mode-only cursor-pointer'
         href={`${marketplaceUrlPrefix}/plugins`}
         target='_blank'
       >

web/app/components/workflow/block-selector/tool-picker.tsx

@@ -20,6 +20,7 @@ import {
 } from '@/service/tools'
 import type { BlockEnum, ToolWithProvider } from '@/app/components/workflow/types'
 import SearchBox from '@/app/components/plugins/marketplace/search-box'
+import { useTranslation } from 'react-i18next'
 
 type Props = {
   disabled: boolean
@@ -42,6 +43,7 @@ const ToolPicker: FC<Props> = ({
   onSelect,
   supportAddCustomTool,
 }) => {
+  const { t } = useTranslation()
   const [searchText, setSearchText] = useState('')
 
   const [buildInTools, setBuildInTools] = useState<ToolWithProvider[]>([])
@@ -83,15 +85,17 @@ const ToolPicker: FC<Props> = ({
       </PortalToFollowElemTrigger>
 
       <PortalToFollowElemContent className='z-[1000]'>
-        <div className="relative w-[320px] min-h-20 bg-white">
+        <div className="relative w-[320px] min-h-20 rounded-xl bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg">
-          <SearchBox
+          <div className='p-2 pb-1'>
-            search={searchText}
+            <SearchBox
-            onSearchChange={setSearchText}
+              search={searchText}
-            tags={[]}
+              onSearchChange={setSearchText}
-            onTagsChange={() => {}}
+              tags={[]}
-            size='small'
+              onTagsChange={() => { }}
-            placeholder='Search tools...'
+              size='small'
-          />
+              placeholder={t('plugin.searchTools')!}
+            />
+          </div>
           <AllTools
             className='mt-1'
             searchText={searchText}

web/i18n/en-US/plugin.ts

@@ -4,6 +4,7 @@ const translation = {
   searchInMarketplace: 'Search in Marketplace',
   fromMarketplace: 'From Marketplace',
   endpointsEnabled: '{{num}} sets of endpoints enabled',
+  searchTools: 'Search tools...',
   detailPanel: {
     categoryTip: {
       marketplace: 'Installed from Marketplace',

web/i18n/zh-Hans/plugin.ts

@@ -4,6 +4,7 @@ const translation = {
   searchInMarketplace: '在 Marketplace 中搜索',
   fromMarketplace: '来自市场',
   endpointsEnabled: '{{num}} 组端点已启用',
+  searchTools: '搜索工具...',
   detailPanel: {
     categoryTip: {
       marketplace: '从 Marketplace 安装',