diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/filters/filters.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/filters/filters.tsx index bb32a0baa..7d0fb7eb3 100644 --- a/apps/sim/app/workspace/[workspaceId]/logs/components/filters/filters.tsx +++ b/apps/sim/app/workspace/[workspaceId]/logs/components/filters/filters.tsx @@ -58,20 +58,20 @@ export function Filters() {

Filters

- {/* Timeline Filter */} - } /> - {/* Level Filter */} } /> - {/* Trigger Filter */} - } /> + {/* Workflow Filter */} + } /> {/* Folder Filter */} } /> - {/* Workflow Filter */} - } /> + {/* Trigger Filter */} + } /> + + {/* Timeline Filter */} + } /> ) } diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/search/search.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/search/search.tsx index b019a6373..3ed2acc38 100644 --- a/apps/sim/app/workspace/[workspaceId]/logs/components/search/search.tsx +++ b/apps/sim/app/workspace/[workspaceId]/logs/components/search/search.tsx @@ -1,6 +1,6 @@ 'use client' -import { useEffect, useMemo } from 'react' +import { useEffect, useMemo, useState } from 'react' import { Loader2, Search, X } from 'lucide-react' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' @@ -89,6 +89,16 @@ export function AutocompleteSearch({ } }, [state.isOpen, state.highlightedIndex]) + const [showSpinner, setShowSpinner] = useState(false) + useEffect(() => { + if (!state.pendingQuery) { + setShowSpinner(false) + return + } + const t = setTimeout(() => setShowSpinner(true), 200) + return () => clearTimeout(t) + }, [state.pendingQuery]) + const onInputChange = (e: React.ChangeEvent) => { const newValue = e.target.value const cursorPos = e.target.selectionStart || 0 @@ -126,7 +136,7 @@ export function AutocompleteSearch({ state.isOpen && 'ring-1 ring-ring' )} > - {state.pendingQuery ? ( + {showSpinner ? ( ) : ( diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/tool-input/components/tool-command/tool-command.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/tool-input/components/tool-command/tool-command.tsx index 8d35df1cc..6147db78d 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/tool-input/components/tool-command/tool-command.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/tool-input/components/tool-command/tool-command.tsx @@ -12,7 +12,6 @@ import { import { Search } from 'lucide-react' import { cn } from '@/lib/utils' -// Context for the command component type CommandContextType = { searchQuery: string setSearchQuery: (value: string) => void @@ -26,7 +25,6 @@ type CommandContextType = { const CommandContext = createContext(undefined) -// Hook to use the command context const useCommandContext = () => { const context = useContext(CommandContext) if (!context) { @@ -35,7 +33,6 @@ const useCommandContext = () => { return context } -// Types for the components interface CommandProps { children: ReactNode className?: string @@ -76,17 +73,14 @@ interface CommandSeparatorProps { className?: string } -// Main Command component export function Command({ children, className, filter }: CommandProps) { const [searchQuery, setSearchQuery] = useState('') const [activeIndex, setActiveIndex] = useState(-1) const [items, setItems] = useState([]) const [filteredItems, setFilteredItems] = useState([]) - // Register and unregister items - memoize to prevent infinite loops const registerItem = useCallback((id: string) => { setItems((prev) => { - // Only add if not already in the array if (prev.includes(id)) return prev return [...prev, id] }) @@ -96,7 +90,6 @@ export function Command({ children, className, filter }: CommandProps) { setItems((prev) => prev.filter((item) => item !== id)) }, []) - // Handle item selection const selectItem = useCallback( (id: string) => { const index = filteredItems.indexOf(id) @@ -107,7 +100,6 @@ export function Command({ children, className, filter }: CommandProps) { [filteredItems] ) - // Filter items based on search query useEffect(() => { if (!searchQuery) { setFilteredItems(items) @@ -127,7 +119,6 @@ export function Command({ children, className, filter }: CommandProps) { setActiveIndex(filtered.length > 0 ? 0 : -1) }, [searchQuery, items, filter]) - // Default filter function const defaultFilter = useCallback((value: string, search: string): number => { const normalizedValue = value.toLowerCase() const normalizedSearch = search.toLowerCase() @@ -138,7 +129,6 @@ export function Command({ children, className, filter }: CommandProps) { return 0 }, []) - // Handle keyboard navigation const handleKeyDown = useCallback( (e: React.KeyboardEvent) => { if (filteredItems.length === 0) return @@ -163,7 +153,6 @@ export function Command({ children, className, filter }: CommandProps) { [filteredItems, activeIndex] ) - // Memoize context value to prevent unnecessary re-renders const contextValue = useMemo( () => ({ searchQuery, @@ -193,7 +182,6 @@ export function Command({ children, className, filter }: CommandProps) { ) } -// Command Input component export function CommandInput({ placeholder = 'Search...', className, @@ -208,7 +196,6 @@ export function CommandInput({ onValueChange?.(value) } - // Focus input on mount useEffect(() => { inputRef.current?.focus() }, []) @@ -230,7 +217,6 @@ export function CommandInput({ ) } -// Command List component export function CommandList({ children, className }: CommandListProps) { return (
@@ -239,7 +225,6 @@ export function CommandList({ children, className }: CommandListProps) { ) } -// Command Empty component export function CommandEmpty({ children, className }: CommandEmptyProps) { const { filteredItems } = useCommandContext() @@ -252,7 +237,6 @@ export function CommandEmpty({ children, className }: CommandEmptyProps) { ) } -// Command Group component export function CommandGroup({ children, className, heading }: CommandGroupProps) { return (
{ - // Only register if value is defined if (value) { registerItem(value) return () => unregisterItem(value) } }, [value, registerItem, unregisterItem]) - // Check if item should be displayed based on search const shouldDisplay = filteredItems.includes(value) if (!shouldDisplay) return null @@ -315,12 +295,10 @@ export function CommandItem({ ) } -// Command Separator component export function CommandSeparator({ className }: CommandSeparatorProps) { return
} -// Export all components export const ToolCommand = { Root: Command, Input: CommandInput, diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/tool-input/tool-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/tool-input/tool-input.tsx index 108bd9a8f..dcc48297e 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/tool-input/tool-input.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/tool-input/tool-input.tsx @@ -1189,7 +1189,13 @@ export function ToolInput({
- + @@ -1749,7 +1755,13 @@ export function ToolInput({ Add Tool - + diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/logs-filters/logs-filters.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/logs-filters/logs-filters.tsx index 6f8f40fde..0e99d4fef 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/logs-filters/logs-filters.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/logs-filters/logs-filters.tsx @@ -10,11 +10,11 @@ import Workflow from '@/app/workspace/[workspaceId]/logs/components/filters/comp export function LogsFilters() { const sections = [ - { key: 'timeline', title: 'Timeline', component: }, { key: 'level', title: 'Level', component: }, - { key: 'trigger', title: 'Trigger', component: }, - { key: 'folder', title: 'Folder', component: }, { key: 'workflow', title: 'Workflow', component: }, + { key: 'folder', title: 'Folder', component: }, + { key: 'trigger', title: 'Trigger', component: }, + { key: 'timeline', title: 'Timeline', component: }, ] return ( diff --git a/apps/sim/components/ui/dropdown-menu.tsx b/apps/sim/components/ui/dropdown-menu.tsx index 851ff4207..ae4bb8c33 100644 --- a/apps/sim/components/ui/dropdown-menu.tsx +++ b/apps/sim/components/ui/dropdown-menu.tsx @@ -56,11 +56,13 @@ DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayNam const DropdownMenuContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef ->(({ className, sideOffset = 4, ...props }, ref) => ( +>(({ className, sideOffset = 4, avoidCollisions = false, sticky = 'always', ...props }, ref) => (