help line

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

@@ -49,6 +49,7 @@ const NodeSelector: FC<NodeSelectorProps> = ({
   asChild,
 }) => {
   const { t } = useTranslation()
+  const [searchText, setSearchText] = useState('')
   const [localOpen, setLocalOpen] = useState(false)
   const open = openFromProps === undefined ? localOpen : openFromProps
   const handleOpenChange = useCallback((newOpen: boolean) => {
@@ -103,12 +104,17 @@ const NodeSelector: FC<NodeSelectorProps> = ({
             >
               <SearchLg className='shrink-0 ml-[1px] mr-[5px] w-3.5 h-3.5 text-gray-400' />
               <input
+                value={searchText}
                 className='grow px-0.5 py-[7px] text-[13px] bg-transparent appearance-none outline-none'
                 placeholder={t('workflow.tabs.searchBlock') || ''}
+                onChange={e => setSearchText(e.target.value)}
               />
             </div>
           </div>
-          <Tabs onSelect={handleSelect} />
+          <Tabs
+            onSelect={handleSelect}
+            searchText={searchText}
+          />
         </div>
       </PortalToFollowElemContent>
     </PortalToFollowElem>

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

@@ -18,9 +18,11 @@ import { TabsEnum } from './types'
 import Tools from './tools'
 
 export type TabsProps = {
+  searchText: string
   onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
 }
 const Tabs: FC<TabsProps> = ({
+  searchText,
   onSelect,
 }) => {
   const { t } = useTranslation()
@@ -31,14 +33,16 @@ const Tabs: FC<TabsProps> = ({
 
   return (
     <div onClick={e => e.stopPropagation()}>
-      <div className='flex items-center px-3 h-[34px] border-b-[0.5px] border-b-black/5'>
+      <div className='flex items-center px-3 border-b-[0.5px] border-b-black/5'>
         {
           tabs.map(tab => (
             <div
               key={tab.key}
               className={`
-                mr-4 text-[13px] font-medium cursor-pointer
-                ${activeTab === tab.key ? 'text-gray-700' : 'text-gray-500'}
+              relative mr-4 h-[34px] leading-[34px] text-[13px] font-medium cursor-pointer
+              ${activeTab === tab.key
+              ? 'text-gray-700 after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-full after:bg-primary-600'
+              : 'text-gray-500'}
               `}
               onClick={() => setActiveTab(tab.key)}
             >

web/app/components/workflow/block-selector/tools/item.tsx

@@ -104,6 +104,7 @@ const Item = ({
             onClick={() => onSelect(BlockEnum.Tool, {
               provider_id: data.id,
               provider_type: data.type,
+              provider_name: data.name,
               tool_name: tool.name,
               title: tool.label[language],
             })}

web/app/components/workflow/block-selector/types.ts

@@ -28,6 +28,7 @@ export type ToolsMap = Record<string, ToolInWorkflow[]>
 export type ToolDefaultValue = {
   provider_id: string
   provider_type: string
+  provider_name: string
   tool_name: string
   title: string
 }