fix: implement server-side search for Agentflows page

[xxiaoxiong]

Description

Fixes #5868

The Agentflows page previously used client-side filtering which only searched within the currently loaded page. If a target agentflow existed on a different page, it would not be found, leading to a poor user experience.

Problem

Current behavior:

• Search only works on the currently displayed page
• If an agentflow exists on page 2, searching for it while on page 1 returns no results
• Users must manually navigate through pages to find agentflows

Root cause:

// Client-side filter only works on loaded data
function filterFlows(data) {
    return data.name.toLowerCase().indexOf(search.toLowerCase()) > -1 || ...
}
getAllAgentflows.data?.data.filter(filterFlows).map(...)

Solution

Implement server-side search with debounced API calls.

Backend Changes

packages/server/src/services/chatflows/index.ts

• Add optional search parameter to getAllChatflows()
• Implement case-insensitive LIKE search across name, category, and id
• Use TypeORM Brackets for proper OR grouping

if (search) {
    queryBuilder.andWhere(
        new Brackets((qb) => {
            qb.where('LOWER(chat_flow.name) LIKE LOWER(:search)', { search: `%${search}%` })
                .orWhere('LOWER(chat_flow.category) LIKE LOWER(:search)', { search: `%${search}%` })
                .orWhere('LOWER(chat_flow.id) LIKE LOWER(:search)', { search: `%${search}%` })
        })
    )
}

packages/server/src/controllers/chatflows/index.ts

• Extract search query parameter
• Pass to service layer

Frontend Changes

packages/ui/src/views/agentflows/index.jsx

• Remove client-side filterFlows function
• Add 300ms debounced search with setTimeout
• Reset to page 1 when search term changes
• Pass search parameter to API call
• Remove .filter(filterFlows) from card view
• Remove filterFunction prop from table view

const onSearchChange = (event) => {
    const searchValue = event.target.value
    setSearch(searchValue)
    setCurrentPage(1)  // Reset to page 1
    // Debounce API call
    if (window.searchTimeout) clearTimeout(window.searchTimeout)
    window.searchTimeout = setTimeout(() => {
        refresh(1, pageLimit, agentflowVersion, searchValue)
    }, 300)
}

Benefits

• ✅ Search works across all pages: Finds agentflows regardless of pagination
• ✅ Debouncing: Reduces API calls during typing (300ms delay)
• ✅ Case-insensitive: Better UX, matches user expectations
• ✅ Consistent behavior: Works the same in card and table views
• ✅ Auto-reset pagination: Jumps to page 1 on new search
• ✅ Minimal changes: No breaking changes, backward compatible

Testing

Test Scenario

1. Create 20+ agentflows (enough to span multiple pages)
2. Navigate to page 1
3. Search for an agentflow that exists on page 2
4. ✅ Verify the agentflow is found and displayed
5. ✅ Verify pagination resets to page 1
6. ✅ Verify debouncing works (no API call on every keystroke)

Edge Cases

• Empty search: returns all agentflows
• Special characters: properly escaped in SQL LIKE
• Case variations: "Test" finds "test", "TEST", "TeSt"
• Partial matches: "flow" finds "myflow", "flowtest"

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature
• Breaking change

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• Backend and frontend changes are synchronized
• Search is case-insensitive and uses proper SQL escaping
• Debouncing is implemented to reduce API load
• Pagination resets correctly on search
• Works in both card and table views

[gemini-code-assist]

Code Review

This pull request introduces server-side search for chatflows, improves Docker security by adopting non-root user practices, and integrates session history into follow-up prompt generation. It also adds URL validation for tool icons and pagination for chat messages. Review feedback identifies a pagination indexing bug in the message utility, a lack of character escaping in SQL search queries, and the use of non-idiomatic React patterns for debouncing. Furthermore, the reviewer suggests using .replaceAll() to ensure all template placeholders are correctly substituted.

[gemini-code-assist]

The pagination logic here assumes 0-indexed pages (page * pageSize), but the rest of the application (including handleFeedbackQuery in this same file and getAllChatflows in the service layer) uses 1-indexed pages. If a user requests page 1, this implementation will skip the first page entirely. It should be updated to (page - 1) * pageSize to maintain consistency and correctness.

Suggested change

	skip: page > -1 && pageSize > -1 ? page * pageSize : undefined,
	skip: page > 0 && pageSize > 0 ? (page - 1) * pageSize : undefined,

References

1. Maintain consistency with existing code patterns, even if they are not considered best practice.

[gemini-code-assist]

When using the LIKE operator, special characters such as % and _ in the user's search input should be escaped to prevent them from being interpreted as wildcards. Additionally, applying LOWER() to chat_flow.id is redundant for UUIDs and can hinder index usage. Use simple chained .replace() calls for escaping to maintain readability and avoid complex regex.

                    const escapedSearch = search.replace('%', '\\%').replace('_', '\\_')
                    qb.where('LOWER(chat_flow.name) LIKE LOWER(:search)', { search: '%' + escapedSearch + '%' })
                        .orWhere('LOWER(chat_flow.category) LIKE LOWER(:search)', { search: '%' + escapedSearch + '%' })
                        .orWhere('chat_flow.id LIKE :search', { search: '%' + escapedSearch + '%' })

References

1. Prioritize code readability and understandability over conciseness. A series of simple, chained operations can be preferable to a single, more complex one (e.g., a complex regex with a replacer function) if it improves understandability and reduces the potential for future errors.

[gemini-code-assist]

Attaching a timeout to the window object is not idiomatic in React and can lead to side effects or conflicts if multiple components use the same property name. It is better to use a useRef hook to persist the timeout ID across renders without triggering re-renders or polluting the global namespace.

[gemini-code-assist]

The .replace() method only replaces the first occurrence of a substring. If the prompt template contains multiple placeholders for {history} or {session_history}, only the first one will be substituted. Using .replaceAll() ensures all instances are correctly replaced.

Suggested change

	let followUpPromptsPrompt = providerConfig.prompt.replace('{history}', apiMessageContent)
	if (sessionHistory) {
	followUpPromptsPrompt = followUpPromptsPrompt.replace('{session_history}', sessionHistory)
	let followUpPromptsPrompt = providerConfig.prompt.replaceAll('{history}', apiMessageContent)
	if (sessionHistory) {
	followUpPromptsPrompt = followUpPromptsPrompt.replaceAll('{session_history}', sessionHistory)
	}

References

1. Prioritize code readability and understandability over conciseness.