typsense patches (#1511)

* typsense patches

* more updates

* more updates to typesense

* Revert "more updates to typesense"

This reverts commit dec926e.

Revert

* updates

* better query and dynamics

* more updates to typesense

* ui changes

* final fix for blog & docs url

* remove last hard coded snippet

Author: LineIndent

pcweb/components/docpage/navbar/typesense.py

@@ -1,8 +1,9 @@
-"""Typesense search component for the navbar."""
+"""Improved Typesense search component with better component search handling."""
 
 import reflex as rx
 import typesense
 import os
+import re
 
 # Constants
 TYPESENSE_CONFIG = {
@@ -15,12 +16,16 @@
     'connection_timeout_seconds': 10
 }
 
-SEARCH_PARAMS = {
-    'query_by': 'title,content,headings',
-    'per_page': 8,
-    'highlight_full_fields': 'title,content',
+# Enhanced search parameters with component-aware boosting
+BASE_SEARCH_PARAMS = {
+    'per_page': 20,
+    'highlight_full_fields': 'title,content,components',
     'snippet_threshold': 30,
-    'num_typos': 2
+    'num_typos': 2,
+    'typo_tokens_threshold': 1,
+    'drop_tokens_threshold': 1,
+    'prioritize_exact_match': True,
+    'prioritize_token_position': True,
 }
 
 FILTER_CATEGORIES = [
@@ -42,46 +47,26 @@
     "Blogs": ["Blog"]
 }
 
-SECTION_DISPLAY_NAMES = {
-    'getting_started': 'Getting Started',
-    'library': 'Components',
-    'api-reference': 'API Reference',
-    'hosting': 'Hosting',
-    'events': 'Events',
-    'styling': 'Styling',
-    'state': 'State',
-    'vars': 'Variables',
-    'database': 'Database',
-    'authentication': 'Authentication',
-    'custom-components': 'Custom Components',
-    'wrapping-react': 'Wrapping React',
-    'ai_builder': 'AI Builder',
-    'recipes': 'Recipes',
-    'advanced_onboarding': 'Advanced',
-    'enterprise': 'Enterprise',
-    'utility_methods': 'Utilities',
-    'client_storage': 'Client Storage',
-    'components': 'Components',
-    'pages': 'Pages',
-    'assets': 'Assets',
-    'api-routes': 'API Routes',
-    'ui': 'UI',
-    'state_structure': 'State Structure',
-    'Blog': 'Blog'
-}
-
 DEFAULT_SUGGESTIONS = [
     {"title": "Getting Started with Reflex", "url": "/docs/getting-started/introduction"},
     {"title": "Components Overview", "url": "/docs/library"},
     {"title": "State Management", "url": "/docs/state/overview"},
-    {"title": "Event Handlers", "url": "/docs/events/event-handlers"},
+    {"title": "Events Overview", "url": "/docs/events/events-overview"},
     {"title": "Styling and Theming", "url": "/docs/styling/overview"},
-    {"title": "Deployment Guide", "url": "/docs/hosting/deploy"},
+    {"title": "Deployment Guide", "url": "/docs/hosting/deploy-quick-start"},
 ]
 
+# Precompiled regex patterns for component highlighting fixes
+PATTERN_PARTIAL_WORD = re.compile(r'<mark>([^<]*?)</mark>([a-zA-Z0-9_]*)')
+PATTERN_COMPONENT_NAME = re.compile(r'((?:rx|reflex)\.)<mark>([^<]*?)</mark>')
+PATTERN_NAMESPACE = re.compile(r'<mark>(rx|reflex)</mark>\.([a-zA-Z0-9_]+)')
+PATTERN_CHAINED = re.compile(r'<mark>((?:rx|reflex)\.[a-zA-Z0-9_]+)</mark>\.([a-zA-Z0-9_]+)')
+
+# Styling for highlights
+HIGHLIGHT_STYLE = '<span style="background-color: var(--violet-3); color: var(--violet-11); padding: 2px 4px; border-radius: 3px;">'
 
 class TypesenseSearchState(rx.State):
-    """State management for the Typesense search component."""
+    """Enhanced state management for the Typesense search component."""
 
     # State variables
     search_query: str = ""
@@ -93,7 +78,6 @@ class TypesenseSearchState(rx.State):
     filter_categories: list[str] = FILTER_CATEGORIES
     suggestions: list[dict] = DEFAULT_SUGGESTIONS
 
-    # Modal management
     def open_modal(self):
         """Open the search modal and reset filter state."""
         self.show_modal = True
@@ -112,7 +96,6 @@ def _reset_search_state(self):
         self.search_results = []
         self.selected_filter = "All"
 
-    # Filter management
     async def set_filter(self, filter_name: str):
         """Set the selected filter and re-run search if there's an active query."""
         self.selected_filter = filter_name
@@ -123,9 +106,18 @@ def _get_filter_sections(self) -> list[str]:
         """Get sections for current filter."""
         return FILTER_SECTION_MAPPING.get(self.selected_filter, [])
 
-    # Search functionality
+    def _clean_component_query(self, query: str) -> str:
+        """Normalize component query by removing rx./reflex. prefix."""
+        return re.sub(r'^(rx\.|reflex\.)', '', query.lower()).strip()
+
+    def _expand_query_variants(self, query: str) -> str:
+        """Return query string with rx./reflex. variants for flexible matching."""
+        cleaned = self._clean_component_query(query)
+        variants = {cleaned, f"rx.{cleaned}", f"reflex.{cleaned}"}
+        return " ".join(sorted(variants))  # Order doesn't matter
+
     async def search_docs(self, query: str):
-        """Search the documentation using Typesense."""
+        """Enhanced search with component-aware logic."""
         self.search_query = query
 
         if not query.strip():
@@ -135,7 +127,7 @@ async def search_docs(self, query: str):
         self.is_searching = True
 
         try:
-            results = await self._perform_search(query)
+            results = await self._perform_unified_search(query)
             self.search_results = self._format_search_results(results)
             self.show_results = True
         except Exception as e:
@@ -144,99 +136,101 @@ async def search_docs(self, query: str):
 
         self.is_searching = False
 
-    def _clear_search_results(self):
-        """Clear search results and hide results display."""
-        self.search_results = []
-        self.show_results = False
-
-    async def _perform_search(self, query: str) -> dict:
-        """Perform the actual Typesense search."""
+    async def _perform_unified_search(self, query: str) -> dict:
+        """Perform a single search using is_component metadata for boosting/filtering."""
         client = typesense.Client(TYPESENSE_CONFIG)
 
+        expanded_query = self._expand_query_variants(query)
+
         search_parameters = {
-            'q': query,
-            **SEARCH_PARAMS,
+            'q': expanded_query,
+            **BASE_SEARCH_PARAMS,
+            'query_by': 'title,content,headings,components',
+            'query_by_weights': '10,3,3,6',
             'highlight_start_tag': '<mark>',
-            'highlight_end_tag': '</mark>'
+            'highlight_end_tag': '</mark>',
+            'sort_by': 'weight:desc, is_component:desc, _text_match:desc',
         }
 
         # Apply filter if not "All"
         if self.selected_filter != "All":
-            sections = self._get_filter_sections()
-            if sections:
-                filter_conditions = [f'section:={section}' for section in sections]
-                search_parameters['filter_by'] = ' || '.join(filter_conditions)
+            if self.selected_filter == "Components":
+                search_parameters["filter_by"] = "is_component:=true"
+            else:
+                sections = self._get_filter_sections()
+                if sections:
+                    search_parameters['filter_by'] = ' || '.join(f"section:={s}" for s in sections)
 
         return client.collections['docs'].documents.search(search_parameters)
 
+    def _clear_search_results(self):
+        """Clear search results and hide results display."""
+        self.search_results = []
+        self.show_results = False
+
     def _format_search_results(self, result: dict) -> list[dict]:
-        """Format search results for display."""
-        return [
-            {
-                'title': hit['document']['title'],
-                'content': self._get_highlighted_content(hit),  # <-- use highlight-aware content
-                'url': hit['document']['url'],
-                'path': hit['document']['path'],
-                'section': hit['document'].get('section', ''),
-                'subsection': hit['document'].get('subsection', ''),
-                'breadcrumb': self._create_breadcrumb(hit['document'])
+        """Format search results for display with enhanced component info."""
+        formatted_results = []
+
+        for hit in result['hits']:
+            doc = hit['document']
+            components = doc.get('components', [])
+            component_info = None
+            if components:
+                component_info = f"Components: {', '.join(components)}"
+            formatted_result = {
+                'title': doc['title'],
+                'content': self._get_highlighted_content(hit),
+                'url': doc['url'],
+                'path': doc['path'],
+                'section': doc.get('section', ''),
+                'subsection': doc.get('subsection', ''),
+                'breadcrumb': doc.get('breadcrumb', ''),
+                'components': components,
+                'component_info': component_info,
+                'score': hit.get('text_match', 0)
             }
-            for hit in result['hits']
-        ]
+            formatted_results.append(formatted_result)
+
+        return formatted_results
 
 
     def _get_highlighted_content(self, hit: dict) -> str:
-        """Get highlighted content snippet."""
+        """Get highlighted content snippet with component-aware highlighting."""
         highlights = hit.get('highlights', [])
-        if highlights:
-            for highlight in highlights:
-                if highlight.get('field') == 'content':
-                    # Prefer the short 'snippet' if available, else fallback to 'value'
-                    content = highlight.get('snippet') or highlight.get('value')
-                    if content and '<mark>' in content:
-                        content = content.replace(
-                            '<mark>', '<span style="background-color: var(--violet-3); color: var(--violet-11); padding: 2px 4px; border-radius: 3px;">'
-                        ).replace('</mark>', '</span>')
-
-                        return content
+
+        def fix_component_highlighting(text):
+            """Fix incomplete word and component highlighting patterns."""
+            text = PATTERN_PARTIAL_WORD.sub(r'<mark>\1\2</mark>', text)
+            text = PATTERN_COMPONENT_NAME.sub(r'<mark>\1\2</mark>', text)
+            text = PATTERN_NAMESPACE.sub(r'<mark>\1.\2</mark>', text)
+            text = PATTERN_CHAINED.sub(r'<mark>\1.\2</mark>', text)
+            return text
+
+        for highlight in highlights:
+            field = highlight.get('field')
+            if field == 'components':
+                values = highlight.get('values', [])
+                if values:
+                    fixed_values = [fix_component_highlighting(value) for value in values]
+                    highlighted_components = ', '.join(fixed_values)
+                    styled = f"<span style='font-weight: 600;'>Components:</span> {highlighted_components}"
+                    return styled.replace('<mark>', HIGHLIGHT_STYLE).replace('</mark>', '</span>')
+            elif field in ['content', 'title']:
+                content = highlight.get('snippet') or highlight.get('value', '')
+                if content and '<mark>' in content:
+                    content = fix_component_highlighting(content)
+                    return content.replace('<mark>', HIGHLIGHT_STYLE).replace('</mark>', '</span>')
 
         # Fallback to truncated plain content
         return self._truncate_content(hit['document']['content'])
 
-
     def _truncate_content(self, content: str, max_length: int = 150) -> str:
         """Truncate content to specified length."""
         if len(content) <= max_length:
             return content
         return content[:max_length] + '...'
 
-    def _create_breadcrumb(self, document: dict) -> str:
-        """Create a breadcrumb string from document metadata."""
-        parts = []
-
-        # Add section
-        section = document.get('section', '')
-        if section:
-            section_display = SECTION_DISPLAY_NAMES.get(
-                section,
-                section.replace('-', ' ').replace('_', ' ').title()
-            )
-            parts.append(section_display)
-
-        # Add subsection
-        subsection = document.get('subsection', '')
-        if subsection:
-            subsection_display = subsection.replace('-', ' ').replace('_', ' ').title()
-            parts.append(subsection_display)
-
-        # Add title if different from last part
-        title = document.get('title', '')
-        if title and (not parts or title.lower() != parts[-1].lower()):
-            parts.append(title)
-
-        return ' › '.join(parts)
-
-    # Navigation
     def hide_results(self):
         """Hide search results."""
         self.show_results = False
@@ -248,7 +242,7 @@ def navigate_to_result(self, url: str):
         return rx.redirect(url)
 
 
-# Component functions
+# Component functions (keeping your existing UI components)
 def filter_pill(filter_name: str) -> rx.Component:
     """Render a single filter pill."""
     is_selected = TypesenseSearchState.selected_filter == filter_name
@@ -333,7 +327,7 @@ def suggestions_section() -> rx.Component:
 
 
 def search_result_item(result: rx.Var) -> rx.Component:
-    """Render a single search result item with breadcrumb navigation."""
+    """Enhanced search result item with component information."""
     return rx.box(
         rx.vstack(
             rx.text(
@@ -345,14 +339,14 @@ def search_result_item(result: rx.Var) -> rx.Component:
                 rx.html(
                     result['title'],
                     class_name="text-md font-medium !text-slate-12",
+                    word_break= "keep-all",
                 ),
                 spacing="2",
                 align_items="center",
                 margin_bottom="4px"
             ),
             rx.html(
                 result['content'],
-                # color="var(--c-slate-11)",
                 font_size="14px",
                 line_height="1.5",
                 class_name="prose prose-sm text-slate-12"
@@ -386,7 +380,7 @@ def search_input() -> rx.Component:
             on_click=rx.run_script("document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))"),
         ),
         rx.el.input(
-            placeholder="What are you searching for?",
+            placeholder="Search components, docs, or features...",
             on_change=TypesenseSearchState.search_docs.debounce(500),
             id="search-input",
             auto_focus=True,