refactor(web): align search input with dify ui (#37101)

web/app/components/workflow/nodes/_base/components/__tests__/agent-strategy-selector.spec.tsx

@@ -42,20 +42,20 @@ vi.mock('@/app/components/plugins/install-plugin/base/use-get-icon', () => ({
 }))
 
 vi.mock('@/app/components/base/search-input', () => ({
-  default: ({
+  SearchInput: ({
     value,
-    onChange,
+    onValueChange,
     placeholder,
   }: {
     value: string
-    onChange: (value: string) => void
+    onValueChange: (value: string) => void
     placeholder?: string
     className?: string
   }) => (
     <input
       aria-label={placeholder}
       value={value}
-      onChange={e => onChange(e.target.value)}
+      onChange={e => onValueChange(e.target.value)}
     />
   ),
 }))
@@ -220,14 +220,14 @@ vi.mock('@langgenius/dify-ui/popover', async () => {
     }
 
     return (
-      <PopoverContext.Provider value={{ open, setOpen }}>
+      <PopoverContext value={{ open, setOpen }}>
         {children}
-      </PopoverContext.Provider>
+      </PopoverContext>
     )
   }
 
   const PopoverTrigger = ({ render }: { render: React.ReactNode }) => {
-    const { open, setOpen } = React.useContext(PopoverContext)
+    const { open, setOpen } = React.use(PopoverContext)
     return (
       <div data-testid="agent-strategy-trigger" onClick={() => setOpen(!open)}>
         {render}
@@ -236,7 +236,7 @@ vi.mock('@langgenius/dify-ui/popover', async () => {
   }
 
   const PopoverContent = ({ children }: { children: React.ReactNode }) => {
-    const { open } = React.useContext(PopoverContext)
+    const { open } = React.use(PopoverContext)
     return open ? <div data-testid="agent-strategy-popover">{children}</div> : null
   }
 

web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx

@@ -14,11 +14,10 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '@langgenius/dify-ui/tooltip'
-import { RiArrowDownSLine, RiErrorWarningFill } from '@remixicon/react'
 import { useSuspenseQuery } from '@tanstack/react-query'
 import { memo, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import SearchInput from '@/app/components/base/search-input'
+import { SearchInput } from '@/app/components/base/search-input'
 import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
 import { useMarketplacePlugins } from '@/app/components/plugins/marketplace/hooks'
 import { PluginCategoryEnum } from '@/app/components/plugins/types'
@@ -45,7 +44,7 @@ const NotFoundWarn = (props: {
   return (
     <Tooltip>
       <TooltipTrigger
-        render={<div><RiErrorWarningFill className="size-4 text-text-destructive" /></div>}
+        render={<div><span className="i-ri-error-warning-fill size-4 text-text-destructive" aria-hidden="true" /></div>}
       />
       <TooltipContent className="w-[180px]">
         <div className="space-y-1 text-xs">
@@ -204,7 +203,7 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
                         description={t('nodes.agent.strategyNotFoundDesc', { ns: 'workflow' })}
                       />
                     )
-                  : <RiArrowDownSLine className="size-4 text-text-tertiary" />}
+                  : <span className="i-ri-arrow-down-s-line size-4 text-text-tertiary" aria-hidden="true" />}
               {showSwitchVersion && value && (
                 <SwitchPluginVersion
                   uniqueIdentifier={value.plugin_unique_identifier}
@@ -234,7 +233,7 @@ export const AgentStrategySelector = memo((props: AgentStrategySelectorProps) =>
       >
         <div className="w-[388px] overflow-hidden rounded-md border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow">
           <header className="flex gap-1 p-2">
-            <SearchInput placeholder={t('nodes.agent.strategy.searchPlaceholder', { ns: 'workflow' })} value={query} onChange={setQuery} className="w-full" />
+            <SearchInput placeholder={t('nodes.agent.strategy.searchPlaceholder', { ns: 'workflow' })} value={query} onValueChange={setQuery} className="w-full" />
             <ViewTypeSelect viewType={viewType} onChange={setViewType} />
           </header>
           <main className="relative flex w-full flex-col overflow-hidden md:max-h-[300px] xl:max-h-[400px] 2xl:max-h-[564px]" ref={wrapElemRef}>