Add Ask AI button in header & hero box

docs/source/examples/hero-box.rst

@@ -87,6 +87,11 @@ The ``hero-box`` directive supports the following options:
     -
     -
     - If present, adds vertical padding suitable for content pages. By default (without this flag), the hero box is optimized for landing pages.
+  * - ``ai_chatbot_id``
+    - string
+    -
+    - my-chatbot-id
+    - AI chatbot ID to use for the Ask AI button. Requires the ``search_box`` option to be present.
 
 Link resolution
 ---------------
@@ -220,6 +225,29 @@ Results in:
     :search_box:
     :content_page:
 
+With custom AI chatbot ID
+..........................
+
+Using:
+
+.. code-block:: rst
+
+    .. hero-box::
+        :title: Lorem Ipsum
+        :text: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        :search_box:
+        :ai_chatbot_id: my-custom-chatbot-id
+        :content_page:
+
+Results in:
+
+.. hero-box::
+    :title: Lorem Ipsum
+    :text: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    :search_box:
+    :ai_chatbot_id: ddfdo8m94k
+    :content_page:
+
 With bold button
 .................
 

docs/source/index.rst

@@ -12,10 +12,10 @@
 .. hero-box::
   :button_icon: icon-github
   :button_style: bold
-  :button_url: https://github.com/scylladb/sphinx-scylladb-theme
-  :button_text: Source code
   :title: Welcome to ScyllaDB Sphinx Theme documentation
   :image: /_static/img/mascots-2/docs.svg
+  :search_box:
+  :ai_chatbot_id: ddfdo8m94k
 
   The documentation toolchain for ScyllaDB projects.
 

extensions/sphinx-multiversion/README.md

@@ -58,6 +58,7 @@ See https://github.com/scylladb/sphinx-scylladb-theme/pull/891
 The following properties can be defined on a per-version basis.
 
 * `rst_prolog`
+* `myst_substitutions`: Introduced in 0.3.3
 * `exclude_patterns`: Introduced in 0.3.2
 
 ## License

extensions/sphinx-multiversion/setup.py

@@ -21,7 +21,7 @@
     author="Jan Holthuis",
     author_email="holthuis.jan@googlemail.com",
     url="https://holzhaus.github.io/sphinx-multiversion/",
-    version="0.3.2",
+    version="0.3.3",
     install_requires=["sphinx >= 2.1"],
     license="BSD",
     packages=["sphinx_multiversion"],

extensions/sphinx-multiversion/sphinx_multiversion/__init__.py

@@ -2,7 +2,7 @@
 from .main import main
 from .sphinx import setup
 
-__version__ = "0.3.1"
+__version__ = "0.3.3"
 
 __all__ = [
     "setup",

extensions/sphinx-multiversion/sphinx_multiversion/main.py

@@ -308,11 +308,15 @@ def main(argv=None):
 
             current_sourcedir = os.path.join(repopath, sourcedir)
             project = sphinx_project.Project(current_sourcedir, source_suffixes)
+
+            myst_substitutions = getattr(current_config, 'myst_substitutions', {})
+
             metadata[gitref.name] = {
                 "name": gitref.name,
                 "version": current_config.version,
                 "release": current_config.release,
                 "rst_prolog": current_config.rst_prolog,
+                "myst_substitutions": myst_substitutions,
                 "exclude_patterns": current_config.exclude_patterns,
                 "is_released": bool(
                     re.match(config.smv_released_pattern, gitref.refname)

extensions/sphinx-multiversion/sphinx_multiversion/sphinx.py

@@ -181,6 +181,7 @@ def config_inited(app, config):
     config.version = data["version"]
     config.release = data["release"]
     config.rst_prolog = data["rst_prolog"]
+    config.myst_substitutions = data["myst_substitutions"]
     config.exclude_patterns = data["exclude_patterns"]
     config.today = old_config.today
     if not config.today:

sphinx_scylladb_theme/extensions/hero_box.py

@@ -24,6 +24,7 @@ class HeroBox(Directive):
         "button_text": directives.path,
         "search_box": directives.flag,
         "content_page": directives.flag,
+        "ai_chatbot_id": directives.unchanged,
     }
 
     def run(self):
@@ -88,18 +89,34 @@ def run(self):
         )
 
         has_search_box = "search_box" in self.options
-        search_box = (
-            generate_template(
+
+        ai_chatbot_id = self.options.get("ai_chatbot_id")
+
+        ask_ai_section = ""
+        if ai_chatbot_id:
+            ask_ai_section = """
+                <div class="{class_name}__ask-ai">
+                    <biel-button project="{ai_chatbot_id}"
+                        header-title="ScyllaDB chatbot (beta)"
+                        button-position="default"
+                        modal-position="bottom-right"
+                        button-style="dark">Ask AI</biel-button>
+                </div>""".format(class_name=class_name, ai_chatbot_id=ai_chatbot_id)
+
+        if has_search_box:
+            search_box = generate_template(
                 """
-                <div class="{class_name}__search-box search-box search-box--hero">
-                <ci-search></ci-search>
+                <div class="{class_name}__search-wrapper">
+                    <div class="{class_name}__search-box search-box search-box--hero">
+                        <ci-search></ci-search>
+                    </div>{ask_ai_section}
                 </div>
                 """,
                 class_name=class_name,
+                ask_ai_section=ask_ai_section,
             )
-            if has_search_box
-            else ""
-        )
+        else:
+            search_box = ""
 
         html_tag_open = generate_template(
             """

sphinx_scylladb_theme/footer.html

@@ -58,7 +58,7 @@
         </div>
     </div>
     {% if theme_hide_ai_chatbot|lower != 'true' %}
-        <biel-button project="{{theme_ai_chatbot_id}}" 
+        <biel-button class="footer-ask-ai" project="{{theme_ai_chatbot_id}}" 
             header-title="ScyllaDB chatbot (beta)"
             button-position="bottom-right"
             modal-position="bottom-right"

sphinx_scylladb_theme/header.html

@@ -11,10 +11,17 @@
     <div class="header-navigation">
         <ul class="dropdown menu scylla-dropdown scylla-dropdown--header" data-dropdown-menu>
             <li class="scylla-dropdown__item">
-                <a href="https://docs.scylladb.com/manual/" class="scylla-dropdown__title">Server</a>
-            </li>
-            <li class="scylla-dropdown__item">
-                <a href="https://docs.scylladb.com/scylla-cloud/" class="scylla-dropdown__title">Cloud</a>
+                <a href="#" class="scylla-dropdown__title">Deployments <i class="chevron icon-arrow-dropdown"></i></a>
+                <ul class="menu scylla-dropdown__content">
+                    <li>
+                        <a href="https://docs.scylladb.com/scylla-cloud/">
+                            <i class="icon-docs-cloud"></i>Cloud</a>
+                    </li>
+                    <li>
+                        <a href="https://docs.scylladb.com/manual/">
+                            <i class="icon-server"></i>Server</a>
+                    </li>
+                </ul>
             </li>
             <li class="scylla-dropdown__item">
                 <a href="#" class="scylla-dropdown__title">Tools <i class="chevron icon-arrow-dropdown"></i></a>
@@ -84,6 +91,15 @@
         <div class="search-box">
             <ci-search></ci-search>
         </div>
+        {% if theme_hide_ai_chatbot|lower != 'true' %}
+            <biel-button class="header-ask-ai" project="{{theme_ai_chatbot_id}}" 
+                header-title="ScyllaDB chatbot (beta)"
+                button-position="default"
+                modal-position="bottom-right"
+                button-style="dark">
+                Ask AI
+            </biel-button>
+        {% endif %}
     </div>
     {% include 'side-nav-toggle.html' %}
 </header>

src/css/base/_variables.scss

@@ -185,6 +185,11 @@ $product-title-height: $spacer-md;
     --brand-self-hosted: #{$brand-self-hosted};
 
     --biel-primary-color: #{$link-color};
+    --biel-button-dark-bg-color: #{$link-color};
+    --biel-input-button-bg-color: #{$link-color};
+    --biel-button-border-radius: 4px;
+    --biel-button-padding: 12px 15px;
+    --biel-font-family: "Roboto", sans-serif;
   }
 
   .dark {
@@ -218,6 +223,8 @@ $product-title-height: $spacer-md;
     --brand-text: #{$gray-100};
 
     --biel-primary-color: #{$primary};
+    --biel-button-dark-bg-color: #{$primary};
+    --biel-input-button-bg-color: #{$primary};
   }
 
   @each $key, $styles in $brand-colors {

src/css/components/_footer.scss

@@ -104,6 +104,9 @@
   }
 }
 
+.footer-ask-ai {
+  display: block;
+}
 
 @media screen and (min-width: $large) {
   .footer {
@@ -145,3 +148,9 @@
     }
   }
 }
+
+@media screen and (min-width: $xlarge) {
+  .footer-ask-ai {
+    display: none;
+  }
+}

src/css/components/_header.scss

@@ -68,6 +68,27 @@
 .header-search-box {
   display: none;
   width: 200px;
+  align-items: center;
+  gap: 15px;
+
+  .search-box {
+    flex: 1;
+    width: 160px;
+    transition: width 0.2s ease;
+
+    ci-search {
+      width: 100%;
+      display: block;
+    }
+  }
+
+  .header-ask-ai {
+    white-space: nowrap;
+    display: none;
+    width: 100.56px;
+    flex-shrink: 0;
+    text-align: center;
+  }
 }
 
 .scylla-dropdown__content {
@@ -119,19 +140,38 @@
     flex-direction: row;
     align-items: center;
     gap: 20px;
+    max-width: 180px;
+    width: 180px;
+  }
+}
+
+// Intermediate screen sizes - optimize for space efficiency
+@media screen and (min-width: $large) and (max-width: 1199px) {
+  .header-search-box {
+    gap: 15px; // Reduce gap between elements
+    max-width: 160px; // Make even smaller to prevent wrapping
+    width: 160px;
   }
 }
 
 @media screen and (min-width: $xlarge) {
   .header-logo {
-    width: $side-nav-width - $spacer;
+    width: auto;
   }
 
   .header-search-box {
-    max-width: 20%;
-    width: $search-box-width;
+    max-width: 25%;
+    width: auto;
+    min-width: 300px;
+    gap: 20px;
+
+    .header-ask-ai {
+      display: block;
+    }
   }
+}
 
+@media screen and (min-width: 1320px) {
   .header-button {
     display: block;
   }

src/css/components/_hero.scss

@@ -79,6 +79,24 @@
   &__search-box {
     margin-top: 20px;
     box-shadow: 0 4px 25px rgb(0 0 0 / 2%);
+    flex: 0 1 320px;
+  }
+
+  &__search-wrapper {
+    display: flex;
+    align-items: center;
+    gap: $spacer-xs;
+    max-width: 600px;
+  }
+
+  &__ask-ai {
+    margin-top: 20px;
+    flex: 0 0 auto;
+
+    biel-button {
+      white-space: nowrap !important;
+      display: inline-block !important;
+    }
   }
 }
 
@@ -93,7 +111,6 @@
 @media screen and (min-width: $medium) {
   .hero {
 
-
     &__title {
       font-size: 32px;
       line-height: 42px;
@@ -106,6 +123,10 @@
       line-height: 26px;
     }
 
+    &__search-box {
+      flex-basis: 360px;
+    }
+
     &__img {
       display: block;
       position: initial;
@@ -129,5 +150,9 @@
 @media screen and (min-width: $large) {
   .hero {
     padding: 60px 60px;
+
+    &__search-box {
+      flex-basis: 420px;
+    }
   }
 }