From 6b08d8bfcd53d73f4aa6af7844367793e33a8eb5 Mon Sep 17 00:00:00 2001 From: Madison Date: Tue, 14 Oct 2025 15:03:56 -0500 Subject: [PATCH] update AI button w/ text (#947) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Enhances AI chat button, and adds it to search as well. image image ## High-level PR Summary This PR enhances the AI chat button across the documentation site by adding text labels alongside the sparkles icon, making it more discoverable. The button now displays "AI Chat" text and has been updated consistently across the home layout and shared header. Additionally, an "Ask AI" fallback button has been added to the search dialog footer to help users who can't find what they're looking for through regular search. ⏱️ Estimated Review Time: 15-30 minutes
💡 Review Order Suggestion | Order | File Path | |-------|-----------| | 1 | `docs/src/components/layouts/home-layout.tsx` | | 2 | `docs/src/components/layouts/shared-header.tsx` | | 3 | `docs/src/components/layout/custom-search-dialog.tsx` |
[![Need help? Join our Discord](https://img.shields.io/badge/Need%20help%3F%20Join%20our%20Discord-5865F2?style=plastic&logo=discord&logoColor=white)](https://discord.gg/n3SsVDAW6U) [![Analyze latest changes](https://img.shields.io/badge/Analyze%20latest%20changes-238636?style=plastic)](https://squash-322339097191.europe-west3.run.app/interactive/ba7372824c36c80c2bff14f2602c6e7f03e00e9ed4fed3db9e9b1250f0839610/?repo_owner=stack-auth&repo_name=stack-auth&pr_number=947) ---- > [!IMPORTANT] > Enhances AI chat button with text labels and adds an "Ask AI" fallback button to the search dialog, improving discoverability and user experience. > > - **AI Chat Button Enhancements**: > - Added text label "AI Chat" to the button in `home-layout.tsx` and `shared-header.tsx`. > - Introduced compact icon-only variant for tighter spaces in `home-layout.tsx`. > - Updated styling for better visibility and state-awareness when chat is open. > - **Search Dialog**: > - Added "Ask AI" fallback button in the footer of `custom-search-dialog.tsx` to open AI chat if search results are insufficient. > - **Styling Adjustments**: > - Adjusted header spacing and layout for better alignment in `shared-header.tsx`. > - Refined footer structure in `custom-search-dialog.tsx` to accommodate AI fallback. > > This description was created by [Ellipsis](https://www.ellipsis.dev?ref=stack-auth%2Fstack-auth&utm_source=github&utm_medium=referral) for 6e13d5a894d6a7bfbd36d84e0833caf7bb75fae9. You can [customize](https://app.ellipsis.dev/stack-auth/settings/summaries) this summary. It will automatically update as commits are pushed. ---- ## Summary by CodeRabbit * **New Features** * Added an “Ask AI” option in the search dialog footer that opens AI chat as a fallback. * Introduced a compact icon-only variant of the AI Chat toggle for tighter spaces. * **Style** * Updated AI Chat controls with an inline label, smaller icon, and state-aware styling when chat is open. * Adjusted header spacing and layout for better alignment and readability. * Refined search dialog footer structure to accommodate the AI fallback row. --------- Co-authored-by: Konsti Wohlwend --- .../layout/custom-search-dialog.tsx | 55 +++++++++++++++---- docs/src/components/layouts/home-layout.tsx | 21 +++++-- docs/src/components/layouts/shared-header.tsx | 15 +++-- 3 files changed, 70 insertions(+), 21 deletions(-) diff --git a/docs/src/components/layout/custom-search-dialog.tsx b/docs/src/components/layout/custom-search-dialog.tsx index 8d3ad7aa4..2e4ca3d60 100644 --- a/docs/src/components/layout/custom-search-dialog.tsx +++ b/docs/src/components/layout/custom-search-dialog.tsx @@ -1,9 +1,10 @@ 'use client'; -import { AlignLeft, ChevronDown, ExternalLink, FileText, Hash, Search, X } from 'lucide-react'; +import { AlignLeft, ChevronDown, ExternalLink, FileText, Hash, Search, Sparkles, X } from 'lucide-react'; import Link from 'next/link'; import { useCallback, useEffect, useRef, useState } from 'react'; import { cn } from '../../lib/cn'; +import { useSidebar } from '../layouts/sidebar-context'; // Platform colors matching your theme const PLATFORM_COLORS = { @@ -137,10 +138,28 @@ export function CustomSearchDialog({ open, onOpenChange }: CustomSearchDialogPro const dropdownRef = useRef(null); const searchTimeoutRef = useRef(); + const sidebarContext = useSidebar(); // Available platforms for the dropdown const availablePlatforms = ['all', 'next', 'react', 'js', 'python', 'api']; + // Handle AI chat opening + const handleOpenAIChat = () => { + onOpenChange(false); // Close search dialog first + if (!sidebarContext) { + return; + } + + const { toggleChat } = sidebarContext; + + // Small delay to ensure search dialog closes smoothly + setTimeout(() => { + if (!sidebarContext.isChatOpen) { + toggleChat(); + } + }, 100); + }; + // Close dropdown when clicking outside useEffect(() => { const handleClickOutside = (event: MouseEvent) => { @@ -436,16 +455,30 @@ export function CustomSearchDialog({ open, onOpenChange }: CustomSearchDialogPro {/* Footer */} -
- Use ↑↓ to navigate, Enter to select, Esc to close - - {filteredResults.length} result group{filteredResults.length !== 1 ? 's' : ''} - {selectedPlatformFilter !== 'all' && filteredResults.length > 0 && ( - - • {PLATFORM_NAMES[selectedPlatformFilter as keyof typeof PLATFORM_NAMES]} only - - )} - +
+
+ Use ↑↓ to navigate, Enter to select, Esc to close + + {filteredResults.length} result group{filteredResults.length !== 1 ? 's' : ''} + {selectedPlatformFilter !== 'all' && filteredResults.length > 0 && ( + + • {PLATFORM_NAMES[selectedPlatformFilter as keyof typeof PLATFORM_NAMES]} only + + )} + +
+ + {/* AI Chat Fallback */} +
+ Can't find what you're looking for? + +
diff --git a/docs/src/components/layouts/home-layout.tsx b/docs/src/components/layouts/home-layout.tsx index 3de8c5941..4f4772960 100644 --- a/docs/src/components/layouts/home-layout.tsx +++ b/docs/src/components/layouts/home-layout.tsx @@ -45,20 +45,33 @@ function StackAuthLogo() { } // AI Chat Toggle Button for Home Layout -function HomeAIChatToggleButton() { +function HomeAIChatToggleButton({ compact = false }: { compact?: boolean }) { const sidebarContext = useSidebar(); const { isChatOpen, toggleChat } = sidebarContext || { isChatOpen: false, toggleChat: () => {}, }; + if (compact) { + return ( + + ); + } + return ( ); } @@ -248,7 +261,7 @@ function HomeNavbar() { {/* Compact AI Chat Toggle */} - + {/* Compact User Button */} diff --git a/docs/src/components/layouts/shared-header.tsx b/docs/src/components/layouts/shared-header.tsx index 082a3b56d..6f0d7d777 100644 --- a/docs/src/components/layouts/shared-header.tsx +++ b/docs/src/components/layouts/shared-header.tsx @@ -81,18 +81,21 @@ function AIChatToggleButton() { return null; } - const { toggleChat } = sidebarContext; + const { toggleChat, isChatOpen } = sidebarContext; return ( ); } @@ -312,7 +315,7 @@ export function SharedHeader({ {/* Right side - Mobile Menu and Search */} -
+
{/* Search Bar - Responsive sizing */} {showSearch && ( <> @@ -344,7 +347,7 @@ export function SharedHeader({
{/* User Button */} -
+