help

src/components/graph/NodeFooterEdgeIndicators.tsx

@@ -1,6 +1,7 @@
 import React, { useContext, useMemo } from 'react'
 import FlowContext from '../../lib/flowContext'
 import { ArrowDownLeft, ArrowUpRight } from 'lucide-react'
+import { NodeHelpPopover } from './NodeHelpPopover'
 
 const NODE_HAS_INPUT: Record<string, boolean> = {
     config: true,
@@ -58,6 +59,9 @@ export function NodeFooterEdgeIndicators({ nodeId, nodeType, children }: Props)
                     <span className="min-w-0 truncate">{children}</span>
                 </>
             )}
+            <span className="shrink-0 ml-auto">
+                <NodeHelpPopover nodeType={nodeType} />
+            </span>
         </div>
     )
 }

src/components/graph/NodeHelpPopover.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { HelpCircle } from 'lucide-react'
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'
+import { getNodeHelp, type NodeType } from '../../lib/nodeHelp'
+import { cn } from '../../lib/utils'
+
+type Props = {
+    nodeType: NodeType
+    className?: string
+}
+
+export function NodeHelpPopover({ nodeType, className }: Props) {
+    const { title, content } = getNodeHelp(nodeType)
+
+    return (
+        <Popover>
+            <PopoverTrigger
+                asChild
+                className={cn(
+                    'shrink-0 rounded p-0.5 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+                    className
+                )}
+                aria-label={`Help: ${title}`}
+            >
+                <button type="button">
+                    <HelpCircle className="size-3.5" />
+                </button>
+            </PopoverTrigger>
+            <PopoverContent side="top" align="end" className="w-80 max-h-[70vh] overflow-y-auto">
+                <h3 className="text-sm font-semibold text-foreground">{title}</h3>
+                <div className="mt-2">{content}</div>
+            </PopoverContent>
+        </Popover>
+    )
+}

src/components/ui/popover.tsx

@@ -0,0 +1,31 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverAnchor = PopoverPrimitive.Anchor
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }