chore: add sidepanel example + update top banner on website (#2873)

Co-authored-by: Natan Yagudayev <natanyagudayev@gmail.com>
Co-authored-by: Dylan Tientcheu <dylan.tientcheu@algolia.com>

Author: 3 people

packages/website/docs/examples.mdx

@@ -5,7 +5,10 @@ description: live demos showing how to use and extend docsearch beyond documenta
 ---
 
 import { DocSearch } from '@docsearch/react';
+import { DocSearchSidepanel } from '@docsearch/react/sidepanel';
+import BrowserOnly from '@docusaurus/BrowserOnly';
 import '@docsearch/css/dist/style.css';
+import '@docsearch/css/dist/sidepanel.css';
 
 > These examples are interactive. click a button to open the modal and try a query.
 
@@ -69,6 +72,32 @@ Add algolia askai to get synthesized answers grounded in your indexed content. y
 
 ---
 
+## Sidepanel: persistent AI chat
+
+The sidepanel provides a persistent chat interface anchored to the side of the page, ideal for documentation sites where users want to ask follow-up questions without losing their place. Look for the button on the bottom right of the screen to try the demo.
+
+```jsx
+<DocSearchSidepanel
+  appId="PMZUYBQDAK"
+  apiKey="24b09689d5b4223813d9b8e48563c8f6"
+  indexName="docsearch"
+  assistantId="askAIDemo"
+/>
+```
+
+<BrowserOnly>
+  {() => (
+    <DocSearchSidepanel
+      appId="PMZUYBQDAK"
+      apiKey="24b09689d5b4223813d9b8e48563c8f6"
+      indexName="docsearch"
+      assistantId="askAIDemo"
+    />
+  )}
+</BrowserOnly>
+
+---
+
 ## Custom hit rendering (`hitComponent`)
 
 Replace the default hit markup to match your brand and layout. below is a minimal example of a custom component.

packages/website/docusaurus.config.mjs

@@ -136,7 +136,7 @@ export default {
       announcementBar: {
         id: 'announcement-bar',
         content:
-          '🚀 Get Ask AI now! Turn your docs site search into an AI-powered assistant – faster answers, fewer tickets, better self-serve. <a target="_blank" rel="noopener noreferrer" href="https://dashboard.algolia.com/ask-ai">Get Started Now</a>',
+          'Ask AI is now part of <strong>Agent Studio</strong> - We\'re integrating Ask AI into Agent Studio, our centralized space to build and manage AI agents.<a target="_blank" rel="noopener noreferrer" href="https://www.algolia.com/doc/guides/algolia-ai/agent-studio">Explore Agent Studio</a>',
       },
       colorMode: {
         defaultMode: 'light',

packages/website/src/css/custom.css

@@ -287,12 +287,12 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
 /* hide on mobile */
 .theme-announcement-bar {
   z-index: 100;
-  min-height: 3rem !important;
+  min-height: 4rem !important;
   font-size: 1.1rem !important;
   font-family: 'Sora', sans-serif !important;
   font-weight: 400 !important;
   line-height: 1.5;
-  padding: 0.5rem 1rem !important;
+  padding: 0.75rem 1rem !important;
   background-color: var(--ifm-announcement-bar-background-color) !important;
   color: #fff !important;
   white-space: normal !important; /* Allow text to wrap */