Add Ask AI button in header & hero box (#1485)

* feat: add ask ai hero box

* fix: prevent search scroll

* feat: add search to header

* chore: revert order

* fix: tests

* Change 'Platforms' to 'Deployments' in header

Author: dgarcia360

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.
 

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>

sphinx_scylladb_theme/static/css/main.css

@@ -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 {

sphinx_scylladb_theme/static/js/main.bundle.js

@@ -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/base/_variables.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;
   }