feat: add biel search

docs/source/conf.py

@@ -118,6 +118,7 @@
     "hide_feedback_buttons": "false",
     "github_issues_repository": "scylladb/sphinx-scylladb-theme",
     "github_repository": "scylladb/sphinx-scylladb-theme",
+    "search_engine": "bielai",
     "site_description": "Sphinx Theme for ScyllaDB projects.",
     "hide_version_dropdown": ["master"],
     "zendesk_tag": "gq6ltsh3nfex3cnwfy4aj9",

docs/source/configuration/ai-chatbot.rst

@@ -48,6 +48,10 @@ Configuration options
     - string
     - ddfdo8m94k
     - Biel.ai project ID.
+  * - ``search_engine``
+    - string
+    - expertrec
+    - Set to ``bielai`` to use the Biel.ai chatbot.
 
 Troubleshooting
 ---------------

sphinx_scylladb_theme/extensions/hero_box.py

@@ -88,18 +88,51 @@ def run(self):
         )
 
         has_search_box = "search_box" in self.options
-        search_box = (
-            generate_template(
-                """
-                <div class="{class_name}__search-box search-box search-box--hero">
-                <ci-search></ci-search>
-                </div>
-                """,
-                class_name=class_name,
+        if has_search_box:
+            env = self.state.document.settings.env
+            raw_theme_options = getattr(env.config, "html_theme_options", {}) or {}
+            theme_options = (
+                raw_theme_options if isinstance(raw_theme_options, dict) else {}
             )
-            if has_search_box
-            else ""
-        )
+            search_engine_raw = theme_options.get("search_engine", "expertrec")
+            search_engine = (
+                search_engine_raw.lower()
+                if isinstance(search_engine_raw, str)
+                else "expertrec"
+            )
+
+            if search_engine == "expertrec":
+                search_box = generate_template(
+                    """
+                    <div class="{class_name}__search-box search-box search-box--hero">
+                    <ci-search></ci-search>
+                    </div>
+                    """,
+                    class_name=class_name,
+                )
+            else:
+                ai_chatbot_id_raw = theme_options.get("ai_chatbot_id", "")
+                ai_chatbot_id = (
+                    ai_chatbot_id_raw if isinstance(ai_chatbot_id_raw, str) else ""
+                )
+                search_box = generate_template(
+                    """
+                    <div class="{class_name}__search-box">
+                    <biel-search-button
+                        project="{ai_chatbot_id}"
+                        header-title="ScyllaDB chatbot (beta)"
+                        button-position="bottom-right"
+                        modal-position="bottom-right"
+                        button-style="rounded">
+                            Search
+                    </biel-search-button>
+                    </div>
+                    """,
+                    class_name=class_name,
+                    ai_chatbot_id=ai_chatbot_id,
+                )
+        else:
+            search_box = ""
 
         html_tag_open = generate_template(
             """

sphinx_scylladb_theme/header.html

@@ -81,9 +81,20 @@
     </div>
     <div class="header-search-box">
         <i class="dark-theme-toggler icon-theme"></i>
-        <div class="search-box">
-            <ci-search></ci-search>
-        </div>
+        {% if theme_search_engine|lower == 'expertrec' %}
+            <div class="search-box">
+                <ci-search></ci-search>
+            </div>
+        {% else %}
+            <biel-search-button
+                project="{{theme_ai_chatbot_id}}"
+                button-style="rounded"
+                hide-filters="false"
+                header-title="ScyllaDB chatbot (beta)"
+                modal-position="top-center">
+                Search
+            </biel-search-button>
+        {% endif %}
     </div>
     {% include 'side-nav-toggle.html' %}
-</header>
+</header>

sphinx_scylladb_theme/layout.html

@@ -12,10 +12,10 @@
         {% endfor %}
     {% endmacro %}
     {% macro css() %}
-        <!-- increase expertrec loading priority-->
-        <link rel="dns-prefetch" href="https://cse.expertrec.com">
+        {% if theme_search_engine|lower == 'expertrec' %}
+            <link rel="dns-prefetch" href="https://cse.expertrec.com">
+        {% endif %}
 
-        <!-- increase font loading priority -->
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
         <link rel="preload" as="style"
               href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap" />

sphinx_scylladb_theme/scylladb-scripts.html

@@ -35,6 +35,7 @@
 <!-- End Google Tag Manager -->
 
 <!-- Expertrec -->
+{% if theme_search_engine|lower == 'expertrec' %}
 <script>
     var id = "e2077224-9ccf-11e9-a0c9-0242ac130002";
     var ci_search = document.createElement("script");
@@ -44,4 +45,5 @@
     var s = document.getElementsByTagName("script")[0];
     s.parentNode.insertBefore(ci_search, s);
 </script>
+{% endif %}
 <!-- End Expertrec -->

sphinx_scylladb_theme/side-nav.html

@@ -8,9 +8,21 @@
                 project }}</a>
         </div>
         <div class="side-nav__search">
+            {% if theme_search_engine|lower == 'expertrec' %}
             <div class="search-box">
                 <ci-search></ci-search>
             </div>
+            {% else %}
+            <biel-search-button
+                project="{{theme_ai_chatbot_id}}"
+                button-style="rounded"
+                hide-filters="false"
+                hide-ctrl-k="true"
+                header-title="ScyllaDB chatbot (beta)"
+                modal-position="top-center">
+                Search
+            </biel-search-button>
+            {% endif %}
         </div>
         <div class="side-nav__versions">{% if versions and not theme_hide_versions_dropdown|tobool %}{% include
             'versions.html' %}{% endif %}</div>

sphinx_scylladb_theme/theme.conf

@@ -31,4 +31,5 @@ versions_deprecated=
 brand=product
 zendesk_tag=
 skip_warnings=
+search_engine=expertrec
 redirect=

src/css/base/_variables.scss

@@ -185,6 +185,14 @@ $product-title-height: $spacer-md;
     --brand-self-hosted: #{$brand-self-hosted};
 
     --biel-primary-color: #{$link-color};
+    --biel-search-filter-selected-bg-color: #{$link-color};
+    --biel-search-button-border-radius: #{$border-radius} !important;
+    --biel-search-button-padding: 8px 20px;
+    --biel-search-button-text-display: block !important;
+    --biel-search-button-icon-margin-right: 5px !important;
+    --biel-search-body-max-height: 400px;
+    --biel-search-content-max-height: 90vh;
+    --biel-search-button-max-width: -webkit-fill-available;
   }
 
   .dark {
@@ -218,6 +226,8 @@ $product-title-height: $spacer-md;
     --brand-text: #{$gray-100};
 
     --biel-primary-color: #{$primary};
+    --biel-search-filter-selected-bg-color: #{$primary};
+    --biel-search-result-mark-color: #{$primary};
   }
 
   @each $key, $styles in $brand-colors {
@@ -238,3 +248,9 @@ $product-title-height: $spacer-md;
       background-color: map.get($styles, bg);
     }
   }
+
+  @media (min-width: 1024px) {
+    :root {
+      --biel-search-button-max-width: 100%;
+    }
+  }