feat: sidepanel experience

apps/docs/content/docs/experiences/ask-ai/sidepanel-askai.mdx

@@ -0,0 +1,153 @@
+---
+title: Sidepanel Ask AI
+description: "Sidepanel chat experience with Ask AI, powered by Algolia's Ask AI. Opens as a side panel that doesn't block the rest of the page."
+---
+
+import { File, Folder, Files } from 'fumadocs-ui/components/files';
+import { Tabs, TabsList, TabsTrigger, TabsContent, TabsContents } from '@/components/animate-ui/components/animate/tabs';
+import { LogosShadcn } from '@/components/icons/shadcn';
+import { TypeTable } from 'fumadocs-ui/components/type-table';
+
+A sidepanel chat experience that opens from the right side of the screen, allowing users to interact with [Algolia's Ask AI](https://www.algolia.com/products/ai/ask-ai) without blocking the rest of the page. Perfect for documentation sites, help centers, or any context where users need quick AI assistance while browsing.
+
+## Use cases
+
+- Documentation site AI assistant
+- Help center chat support
+- Non-blocking AI chat interface
+- Side-by-side browsing and AI interaction
+- Keyboard-accessible chat experience
+
+## Preview
+
+<PreviewSidepanelAskAI />
+
+<Tabs>
+  <div className="flex items-center justify-between gap-2 mt-20 mb-2">
+    <h2 className="!my-0 mr-4">Usage</h2>
+    <TabsList className="flex items-center gap-2">
+      <TabsTrigger value="shadcn" className="flex items-center gap-2 px-2"> <LogosShadcn /> <span>shadcn/ui</span></TabsTrigger>
+    </TabsList>
+  </div>
+  <TabsContents>
+    <TabsContent value="shadcn">
+```tsx
+npx shadcn@latest add @algolia/sidepanel-askai
+```
+
+This will add the `Sidepanel Ask AI` experience to your project under `components/sidepanel-askai`. Use it like this:
+
+```tsx
+import SidepanelExperience from "@/components/sidepanel-askai";
+
+<SidepanelExperience
+  applicationId="06YAZFOHSQ"
+  apiKey="94b6afdc316917b6e6cdf2763fa561df"
+  indexName="algolia_podcast_sample_dataset"
+  assistantId="UpR727VnXnoG"
+/>
+```
+
+### Configuration
+
+Required props for using the `SidepanelExperience` component:
+
+- `applicationId`: The Algolia application ID
+- `apiKey`: The Algolia API key
+- `indexName`: The Algolia index name
+- `assistantId`: The Ask AI assistant ID
+
+### Structure
+
+<Files>
+  <Folder name="app">
+    <File name="page.tsx" />
+  </Folder>
+  <Folder name="components" defaultOpen>
+    <File name="sidepanel-ai.tsx" />
+  </Folder>
+  <Folder name="hooks" defaultOpen>
+    <File name="use-askai.ts" />
+  </Folder>
+  <File name="package.json" />
+</Files>
+    </TabsContent>
+  </TabsContents>
+</Tabs>
+
+## Behavior
+
+- **Opens via button or keyboard**: Click the "Ask AI" button or press `Cmd+I` (Mac) / `Ctrl+I` (Windows)
+- **Non-blocking**: The rest of the page remains interactive while the sidepanel is open
+- **Resizable**: Toggle between 360px (default) and 580px (maximized) width on desktop
+- **Keyboard accessible**: Press `Escape` to close, `Enter` to send messages
+- **Auto-scroll**: Chat automatically scrolls to show new messages
+- **Mobile responsive**: Full-width on mobile, fixed width on desktop
+
+## References
+<TypeTable
+  type={{
+    applicationId: {
+      description: "Algolia Application ID (required)",
+      type: "string",
+      required: true,
+    },
+    apiKey: {
+      description: "Algolia API Key (required)",
+      type: "string",
+      required: true,
+    },
+    indexName: {
+      description: "Algolia Index Name (required)",
+      type: "string",
+      required: true,
+    },
+    assistantId: {
+      description: "AI Assistant ID (required for chat functionality)",
+      type: "string",
+      required: true,
+    },
+    baseAskaiUrl: {
+      description: "Base URL for AI chat API (optional, defaults to beta endpoint)",
+      type: "string",
+      default: "\"https://askai.algolia.com\"",
+      required: false,
+    },
+    placeholder: {
+      description: "Placeholder text for input (optional, defaults to \"Ask AI anything\")",
+      type: "string",
+      default: "\"Ask AI anything\"",
+      required: false,
+    },
+    buttonText: {
+      description: "Custom button text (optional, defaults to \"Ask AI\")",
+      type: "string",
+      default: "\"Ask AI\"",
+      required: false,
+    },
+    buttonProps: {
+      description: "Custom button props (optional)",
+      type: "ComponentProps<typeof Button>",
+      parameters: [
+        {
+          name: "onClick",
+          description: "The function to call when the button is clicked",
+        },
+        {
+          name: "children",
+          description: "The children to render in the button (optional)",
+        },
+      ],
+      required: false,
+    },
+  }}
+/>
+
+## Extending further
+
+- Change the styling to match your brand
+- Customize the sidepanel width and animations
+- Add custom message handlers
+- Integrate with your analytics system
+- Open in v0 for more customization
+

apps/docs/content/docs/meta.json

@@ -11,6 +11,7 @@
     "experiences/search-askai",
     "experiences/dropdown-search",
     "---Ask AI Experiences---",
+    "experiences/ask-ai/sidepanel-askai",
     "experiences/ask-ai/highlight-to-askai"
   ]
 }

apps/docs/registry.json

@@ -151,6 +151,49 @@
         }
       ],
       "categories": ["ai"]
+    },
+    {
+      "name": "sidepanel-askai",
+      "type": "registry:block",
+      "title": "Sidepanel Ask AI",
+      "description": "Sidepanel chat experience with Ask AI, powered by Algolia's Ask AI",
+      "registryDependencies": ["button"],
+      "devDependencies": ["tw-animate-css"],
+      "dependencies": [
+        "@ai-sdk/react@^2.0.4",
+        "ai@^5.0.30",
+        "lucide-react",
+        "marked",
+        "tw-animate-css"
+      ],
+      "css": {
+        "@import \"tw-animate-css\"": {},
+        "@keyframes shiny-text": {
+          "0%,90%,100%": "{\nbackground-position: calc(-100% - var(--shiny-width)) 0;\n}",
+          "30%,60%": "{\nbackground-position: calc(100% + var(--shiny-width)) 0;\n}"
+        }
+      },
+      "cssVars": {
+        "theme": {
+          "animate-shiny-text": "shiny-text 8s infinite"
+        }
+      },
+      "files": [
+        {
+          "path": "src/registry/experiences/sidepanel-askai/components/sidepanel-ai.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "src/registry/experiences/sidepanel-askai/hooks/use-askai.ts",
+          "type": "registry:hook"
+        },
+        {
+          "path": "src/registry/experiences/sidepanel-askai/page.tsx",
+          "type": "registry:page",
+          "target": "app/sidepanel-askai/page.tsx"
+        }
+      ],
+      "categories": ["ai", "chat"]
     }
   ]
 }

apps/docs/src/app/(home)/demo/page.tsx

@@ -3,6 +3,7 @@
 import { SearchIcon, SparklesIcon } from "lucide-react";
 import Search from "@/registry/experiences/search/components/search";
 import SearchAskAI from "@/registry/experiences/search-askai/components/search-ai";
+import SidePanel from "@/registry/experiences/sidepanel-askai/components/sidepanel-ai";
 
 export default function DemoPage() {
   return (
@@ -11,19 +12,17 @@ export default function DemoPage() {
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
           {/* Search Component Card */}
           <div className="group relative overflow-hidden rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 p-6 hover:border-gray-300 dark:hover:border-gray-700 transition-all duration-200">
-            <div className="flex items-start gap-3 mb-4">
+            <div className="flex items-center gap-3 mb-4">
               <div className="p-2 rounded-lg bg-indigo-100 dark:bg-indigo-900/30">
                 <SearchIcon className="h-5 w-5 text-indigo-600 dark:text-indigo-400" />
               </div>
-              <div className="flex-1">
-                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
-                  Instant Search
-                </h3>
-              </div>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+                Instant Search
+              </h3>
             </div>
 
             {/* Interactive Demo */}
-            <div className="mt-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900 p-6 overflow-hidden">
+            <div className="mt-4 flex items-center justify-center rounded-xl border border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900 p-6 overflow-hidden">
               <Search
                 applicationId="06YAZFOHSQ"
                 apiKey="94b6afdc316917b6e6cdf2763fa561df"
@@ -41,19 +40,17 @@ export default function DemoPage() {
 
           {/* Search AI Component Card */}
           <div className="group relative overflow-hidden rounded-2xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 p-6 hover:border-gray-300 dark:hover:border-gray-700 transition-all duration-200">
-            <div className="flex items-start gap-3 mb-4">
+            <div className="flex items-center gap-3 mb-4">
               <div className="p-2 rounded-lg bg-purple-100 dark:bg-purple-900/30">
                 <SparklesIcon className="h-5 w-5 text-purple-600 dark:text-purple-400" />
               </div>
-              <div className="flex-1">
-                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
-                  Search with Ask AI
-                </h3>
-              </div>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+                Search with Ask AI
+              </h3>
             </div>
 
             {/* Interactive Demo */}
-            <div className="mt-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900 p-6 overflow-hidden">
+            <div className="mt-4 rounded-xl items-center flex justify-center gap-4 border border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900 p-6 overflow-hidden">
               <SearchAskAI
                 applicationId="06YAZFOHSQ"
                 apiKey="94b6afdc316917b6e6cdf2763fa561df"
@@ -67,6 +64,12 @@ export default function DemoPage() {
                   image: "imageUrl",
                 }}
               />
+              <SidePanel
+                applicationId="06YAZFOHSQ"
+                apiKey="94b6afdc316917b6e6cdf2763fa561df"
+                indexName="algolia_podcast_sample_dataset"
+                assistantId="UpR727VnXnoG"
+              />
             </div>
           </div>
         </div>

apps/docs/src/components/previews.tsx

@@ -5,6 +5,7 @@ import DropdownSearch from "@/registry/experiences/dropdown-search/components/dr
 import { HighlightAskAI } from "@/registry/experiences/highlight-to-askai/components/highlight-to-askai";
 import Search from "@/registry/experiences/search/components/search";
 import SearchWithAskAi from "@/registry/experiences/search-askai/components/search-ai";
+import SidepanelExperience from "@/registry/experiences/sidepanel-askai/components/sidepanel-ai";
 import { CopyCodeButton } from "./copy-code-button";
 import { OpenInV0Button } from "./open-in-v0";
 import { GridPattern } from "./ui/grid-pattern";
@@ -202,3 +203,39 @@ export function PreviewDropdownSearch() {
     </>
   );
 }
+
+export function PreviewSidepanelAskAI() {
+  return (
+    <>
+      <div className="flex justify-between items-center mb-2 ">
+        <div>
+          <CopyCodeButton
+            code={`npx shadcn@latest add @algolia/sidepanel-askai`}
+            title="Copy install command"
+          ></CopyCodeButton>
+        </div>
+        <div>
+          <OpenInV0Button name="sidepanel-askai"></OpenInV0Button>
+        </div>
+      </div>
+      <div className="bg-background relative flex h-[400px] items-center justify-center overflow-hidden rounded-lg border p-20">
+        <GridPattern
+          width={40}
+          height={40}
+          x={-1}
+          y={-1}
+          className={cn(
+            "[mask-image:linear-gradient(to_bottom_right,white,transparent,transparent)]",
+          )}
+        />
+        <SidepanelExperience
+          applicationId="06YAZFOHSQ"
+          apiKey="94b6afdc316917b6e6cdf2763fa561df"
+          indexName="algolia_podcast_sample_dataset"
+          assistantId="UpR727VnXnoG"
+          buttonText="Ask AI"
+        />
+      </div>
+    </>
+  );
+}

apps/docs/src/mdx-components.tsx

@@ -4,6 +4,7 @@ import type { MDXComponents } from "mdx/types";
 import {
   PreviewDropdownSearch,
   PreviewSearchNoAskAI,
+  PreviewSidepanelAskAI,
   PreviewSiteSearch,
 } from "@/components/previews";
 
@@ -19,6 +20,7 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents {
     PreviewSiteSearch,
     PreviewSearchNoAskAI,
     PreviewDropdownSearch,
+    PreviewSidepanelAskAI,
     ...components,
   };
 }