chore: add description for apo node

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

@@ -12,22 +12,28 @@ import BlockIcon from '../block-icon'
 type APOToolsProps = {
   searchText: string;
   onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void;
-  apoNodes?: ToolWithProvider[]
+  apoNodes?: ToolWithProvider[];
 }
 
 const APOTools = ({ searchText, onSelect, apoNodes = [] }: APOToolsProps) => {
   const language = useGetLanguage()
   const [openKey, setOpenKey] = useState<Record<string, boolean>>({})
-
+  const [hoveredKey, setHoveredKey] = useState<Record<string, boolean>>({})
   const filteredApoNodes = useMemo(() => {
     const lowerCaseSearch = searchText.toLowerCase()
-    return apoNodes.filter(node => node.label[language]?.toLowerCase().includes(lowerCaseSearch))
+    return apoNodes.filter(node =>
+      node.label[language]?.toLowerCase().includes(lowerCaseSearch),
+    )
   }, [searchText, apoNodes, language])
 
   const handleOpenChange = (key: ApoToolTypeInfo, newOpen: boolean) => {
     setOpenKey(prev => ({ ...prev, [key]: newOpen }))
+    setHoveredKey({})
+  }
+  const handleHoverChange = (key: ApoToolTypeInfo, newOpen: boolean) => {
+    setHoveredKey(prev => ({ ...prev, [key]: newOpen }))
+    setOpenKey({})
   }
-
   const hide = (key: ApoToolTypeInfo) => {
     setOpenKey(prev => ({ ...prev, [key]: false }))
   }
@@ -37,19 +43,52 @@ const APOTools = ({ searchText, onSelect, apoNodes = [] }: APOToolsProps) => {
       {filteredApoNodes.map(node => (
         <Popover
           key={node.id}
-          placement='rightTop'
+          placement="rightTop"
-          trigger={['click']}
+          style={{ width: 500 }}
-          open={openKey[node.id]}
+          arrow={false}
-          onOpenChange={newOpen => handleOpenChange(node.id, newOpen)}
+          content={ <div>
-          content={
+            <BlockIcon
-            <ApoToolsPreview onSelect={onSelect} apoToolType={node.name} hidePopover={() => hide(node.name)} />
+              size='md'
-          }
+              className='mb-2'
+              type={BlockEnum.Tool}
+              toolIcon={node.icon}
+            />
+            <div className='mb-1 system-md-medium text-text-primary'> {node.label[language]}</div>
+            <div className='text-text-tertiary system-xs-regular'> {node.description[language]}</div>
+          </div>}
+          trigger="hover"
+          open={hoveredKey[node.id]}
+          onOpenChange={newOpen => handleHoverChange(node.id, newOpen)}
         >
-          <div className="flex items-center px-3 w-full h-8 rounded-lg hover:bg-state-base-hover cursor-pointer">
+          <Popover
-            <BlockIcon size="md" className="mr-2 shrink-0" type={BlockEnum.Tool} toolIcon={node.icon} />
+            key={node.id}
-            <div className={cn('grow text-sm text-gray-900 truncate')}>{node.label[language]}</div>
+            placement="rightTop"
-          </div>
+            trigger={['click']}
+            open={openKey[node.id]}
+            onOpenChange={newOpen => handleOpenChange(node.id, newOpen)}
+            content={
+              <ApoToolsPreview
+                onSelect={onSelect}
+                apoToolType={node.name}
+                hidePopover={() => hide(node.name)}
+              />
+            }
+          >
+
+            <div className="flex items-center px-3 w-full h-8 rounded-lg hover:bg-state-base-hover cursor-pointer">
+              <BlockIcon
+                size="md"
+                className="mr-2 shrink-0"
+                type={BlockEnum.Tool}
+                toolIcon={node.icon}
+              />
+              <div className={cn('grow text-sm text-gray-900 truncate')}>
+                {node.label[language]}
+              </div>
+            </div>
+          </Popover>
         </Popover>
+
       ))}
     </div>
   )