feat(frontend): Add advanced block search with relevance ranking

[Abhi1992002]

• fix Upgrade block search functionality #9425

• Enhancing the functionality of searching blocks on the build page

Currently, it only performs exact matching on the block name and description. I added a scoring mechanism for searching.

• The scoring algorithm works as follows:
  • Returns 1 if no query (all blocks match equally)
  • Normalized query for case-insensitive matching
  • Returns 3 for exact substring matches in block name (highest priority)
  • Returns 2 when all query words appear in the block name (regardless of order)
  • Returns 1.X for blocks with names similar to query using Jaro-Winkler distance (X is similarity score)
  • Returns 0.5 when all query words appear in the block description (lowest priority)
  • Returns 0 for no match

Higher scores will appear first in search results.

I have used an external library for Jaro-Winkler distance - link

Before

After

[deepsource-io]

Here's the code health analysis summary for commits 73d4331..1c46bf5. View details on DeepSource ↗.

Analysis Summary

Analyzer	Status	Summary	Link
JavaScript	✅ Success		View Check ↗
Python	✅ Success		View Check ↗

---

💡 If you’re a repository administrator, you can configure the quality gates from the settings.

[qodo-code-review]

Qodo Merge was enabled for this repository. To continue using it, please link your Git account with your Qodo account here.

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

🎫 Ticket compliance analysis ✅ 9425 - Fully compliant Compliant requirements: • Upgrade block search functionality to be more forgiving • Use string similarity algorithm instead of checking exactly (e.g. The Levenshtein Distance algorithm) • Disregard word search order • Search in block description (as a lower priority)

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Performance Concern The Levenshtein distance algorithm implementation has O(n*m) time complexity and could be inefficient for large strings. Consider using a memoized version or a library implementation. const calculateSimilarity = (str1: string, str2: string): number => { const len1 = str1.length; const len2 = str2.length; const matrix: number[][] = Array(len1 + 1) .fill(null) .map(() => Array(len2 + 1).fill(null)); for (let i = 0; i <= len1; i++) matrix[i][0] = i; for (let j = 0; j <= len2; j++) matrix[0][j] = j; for (let i = 1; i <= len1; i++) { for (let j = 1; j <= len2; j++) { const cost = str1[i - 1] === str2[j - 1] ? 0 : 1; matrix[i][j] = Math.min( matrix[i - 1][j] + 1, matrix[i][j - 1] + 1, matrix[i - 1][j - 1] + cost, ); } } // Convert distance to similarity score return 1 - matrix[len1][len2] / Math.max(len1, len2); }; Edge Case Handling The search algorithm might not handle edge cases like empty strings or very short queries optimally. Consider adding specific handling for these cases. const matchesSearch = (block: Block, query: string): number => { if (!query) return 1; const normalizedQuery = query.toLowerCase().trim(); const queryWords = normalizedQuery.split(/\s+/); const blockName = block.name.toLowerCase(); const beautifiedName = beautifyString(block.name).toLowerCase(); const description = block.description.toLowerCase(); // 1. Exact match in name (highest priority) if ( blockName.includes(normalizedQuery) || beautifiedName.includes(normalizedQuery) ) { return 3; } // 2. All query words in name (regardless of order) const allWordsInName = queryWords.every( (word) => blockName.includes(word) || beautifiedName.includes(word), ); if (allWordsInName) return 2; // 3. Similarity with name (Levenshtein) const similarityThreshold = 0.3; const nameSimilarity = calculateSimilarity(blockName, normalizedQuery); const beautifiedSimilarity = calculateSimilarity( beautifiedName, normalizedQuery, ); const maxSimilarity = Math.max(nameSimilarity, beautifiedSimilarity); if (maxSimilarity > similarityThreshold) { return 1 + maxSimilarity; // Score between 1 and 2 } // 4. All query words in description (lower priority) const allWordsInDescription = queryWords.every((word) => description.includes(word), ); if (allWordsInDescription) return 0.5; return 0; };

[netlify]

✅ Deploy Preview for auto-gpt-docs-dev ready!

Name	Link
🔨 Latest commit	1c46bf5
🔍 Latest deploy log	https://app.netlify.com/sites/auto-gpt-docs-dev/deploys/67f3460ebb3f130008bc697b
😎 Deploy Preview	https://deploy-preview-9711--auto-gpt-docs-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for auto-gpt-docs ready!

Name	Link
🔨 Latest commit	1c46bf5
🔍 Latest deploy log	https://app.netlify.com/sites/auto-gpt-docs/deploys/67f3460ee555670008b2f9b2
😎 Deploy Preview	https://deploy-preview-9711--auto-gpt-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[majdyz]

Thank you! This is a really cool feature.