diff --git a/src/components/FloatingActionBar.tsx b/src/components/FloatingActionBar.tsx index 5371dcd7..f51d1c34 100644 --- a/src/components/FloatingActionBar.tsx +++ b/src/components/FloatingActionBar.tsx @@ -2,7 +2,7 @@ import { useRef, useState, useEffect, useMemo } from "react"; import { useWorkflowStore } from "@/store/workflowStore"; -import { NodeType } from "@/types"; +import { NodeType, ProviderType } from "@/types"; import { useReactFlow } from "@xyflow/react"; // Get the center of the React Flow pane in screen coordinates @@ -141,6 +141,28 @@ function GenerateComboButton() { ); } +function ProviderIconButton({ provider, onClick }: { provider: ProviderType; onClick: () => void }) { + return ( + + ); +} + export function FloatingActionBar() { const { nodes, @@ -151,6 +173,9 @@ export function FloatingActionBar() { validateWorkflow, edgeStyle, setEdgeStyle, + providerSettings, + setModelSearchOpen, + modelSearchOpen, } = useWorkflowStore(); const [runMenuOpen, setRunMenuOpen] = useState(false); const runMenuRef = useRef(null); @@ -215,6 +240,22 @@ export function FloatingActionBar() { + {/* Provider model browser icons */} +
+ + {/* Replicate icon - only show if API key is configured */} + {providerSettings.providers.replicate?.apiKey && ( + setModelSearchOpen(true, "replicate")} + /> + )} + {/* fal.ai icon - always show (works without key but rate limited) */} + setModelSearchOpen(true, "fal")} + /> +