From 360f257b6daa0b75431cfad4049bb6dc656b6054 Mon Sep 17 00:00:00 2001 From: Taesu <166604494+bytaesu@users.noreply.github.com> Date: Wed, 29 Oct 2025 07:49:30 +0900 Subject: [PATCH] docs: improve UX for floating-ai-search component (#5653) --- docs/components/floating-ai-search.tsx | 146 +++++++++++++------------ 1 file changed, 77 insertions(+), 69 deletions(-) diff --git a/docs/components/floating-ai-search.tsx b/docs/components/floating-ai-search.tsx index 7307a2ad8a..bf43ecf104 100644 --- a/docs/components/floating-ai-search.tsx +++ b/docs/components/floating-ai-search.tsx @@ -9,7 +9,6 @@ import { InfoIcon, Loader2, SearchIcon, Send, Trash2, X } from "lucide-react"; import { type ComponentProps, createContext, - SVGProps, type SyntheticEvent, use, useEffect, @@ -97,6 +96,8 @@ function SearchAIInput(props: ComponentProps<"form"> & { isMobile?: boolean }) { if (isLoading) document.getElementById("nd-ai-input")?.focus(); }, [isLoading]); + const { isMobile, ...formProps } = props; + return (
& { isMobile?: boolean }) { )} >
@@ -162,10 +163,7 @@ function SearchAIInput(props: ComponentProps<"form"> & { isMobile?: boolean }) {

{suggestions.slice(0, 4).map((suggestion, i) => ( @@ -173,10 +171,7 @@ function SearchAIInput(props: ComponentProps<"form"> & { isMobile?: boolean }) { key={i} onClick={() => handleSuggestionClick(suggestion)} className={cn( - "bg-fd-muted/30 hover:bg-fd-muted/50 text-fd-muted-foreground hover:text-fd-foreground rounded-full border border-fd-border/50 hover:border-fd-border transition-all duration-200 text-left", - props.isMobile - ? "text-xs px-2.5 py-1 whitespace-nowrap flex-shrink-0" - : "text-xs px-3 py-1.5", + "bg-fd-muted/30 hover:bg-fd-muted/50 text-fd-muted-foreground hover:text-fd-foreground rounded-full border border-fd-border/50 hover:border-fd-border transition-all duration-200 text-left text-nowrap text-xs px-3 py-1.5 whitespace-nowrap flex-shrink-0", )} > {suggestion} @@ -187,7 +182,7 @@ function SearchAIInput(props: ComponentProps<"form"> & { isMobile?: boolean }) { )} {showSuggestions && (
-
+
Powered by{" "} container.removeEventListener("scroll", handleScroll); }, []); + const { messageCount, ...divProps } = props; + return (
); } -const InKeepLogo = (props: SVGProps) => { - return ( - - - - - - - - - - - ); -}; +// const InKeepLogo = (props: SVGProps) => { +// return ( +// +// +// +// +// +// +// +// +// +// +// ); +// }; export function AISearchTrigger() { const [open, setOpen] = useState(false); + const [contentVisible, setContentVisible] = useState(false); const isMobile = useIsMobile(); const chat = useChat({ id: "search", @@ -530,6 +528,18 @@ export function AISearchTrigger() { return () => window.removeEventListener("keydown", listener); }, []); + // Delay showing content for smooth transition + useEffect(() => { + if (open) { + const timer = setTimeout(() => { + setContentVisible(true); + }, 100); + return () => clearTimeout(timer); + } else { + setContentVisible(false); + } + }, [open]); + return ( ({ chat, open, setOpen }), [chat, open])}> @@ -617,15 +627,13 @@ export function AISearchTrigger() {
setOpen(true)} > - - Ask AI +
+ + Ask AI +
)} {open && ( -
+
)}