From 2c0cb145d2ecca2dd4fca22770c13d9188abbb05 Mon Sep 17 00:00:00 2001
From: Bereket Engida <Bekacru@gmail.com>
Date: Tue, 11 Nov 2025 16:12:14 -0800
Subject: [PATCH] docs: change ask ai button placement

---
 docs/components/floating-ai-search.tsx | 15 +++++++++------
 docs/components/search-dialog.tsx      |  6 ++++--
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/docs/components/floating-ai-search.tsx b/docs/components/floating-ai-search.tsx
index e47b9105df..3c9e826855 100644
--- a/docs/components/floating-ai-search.tsx
+++ b/docs/components/floating-ai-search.tsx
@@ -5,7 +5,7 @@ import { Presence } from "@radix-ui/react-presence";
 import { DefaultChatTransport } from "ai";
 import Link from "fumadocs-core/link";
 import { buttonVariants } from "fumadocs-ui/components/ui/button";
-import { InfoIcon, Loader2, SearchIcon, Send, Trash2, X } from "lucide-react";
+import { Bot, InfoIcon, Loader2, Send, Trash2, X } from "lucide-react";
 import {
 	type ComponentProps,
 	createContext,
@@ -546,11 +546,11 @@ export function AISearchTrigger() {
 				<Presence present={open}>
 					<div
 						className={cn(
-							"fixed inset-0 flex flex-col items-center bg-fd-background/80 backdrop-blur-sm z-30",
+							"absolute inset-0 flex flex-col items-center bg-fd-background/80 backdrop-blur-sm z-30",
 							isMobile
 								? "p-4 pb-40"
 								: "p-2 right-(--removed-body-scroll-bar-size,0) pb-[8.375rem]",
-							open ? "animate-fd-fade-in" : "animate-fd-fade-out",
+							open ? "animate-fd-fade-in" : "animate-fd-fade-out flex",
 						)}
 						onClick={(e) => {
 							if (e.target === e.currentTarget) {
@@ -636,18 +636,21 @@ export function AISearchTrigger() {
 							: "w-26 h-10 bg-fd-secondary/80 backdrop-blur-sm text-fd-secondary-foreground shadow-fd-background rounded-2xl overflow-hidden active:scale-97 hover:scale-103 transition-transform",
 					)}
 					style={{
-						left: "calc(50% - var(--removed-body-scroll-bar-size,0px)/2)",
+						left: open
+							? "calc(50% - var(--removed-body-scroll-bar-size,0px)/2)"
+							: "",
+						right: open ? "" : "-35px",
 					}}
 				>
 					{!open && (
 						<button
 							className={cn(
-								"absolute inset-0 flex items-center justify-between px-3 transition-colors text-fd-muted-foreground hover:bg-fd-accent hover:text-fd-accent-foreground rounded-2xl text-sm",
+								"absolute inset-0 flex items-center justify-between px-3 py-4 transition-colors text-fd-muted-foreground hover:bg-fd-accent hover:text-fd-accent-foreground rounded-none text-sm",
 							)}
 							onClick={() => setOpen(true)}
 						>
 							<div className="flex items-center gap-2 flex-1 justify-center mr-2">
-								<SearchIcon className={cn(isMobile ? "size-4" : "size-4")} />
+								<Bot className={cn(isMobile ? "size-4" : "size-4")} />
 								<span>Ask AI</span>
 							</div>
 						</button>
diff --git a/docs/components/search-dialog.tsx b/docs/components/search-dialog.tsx
index 4a6f03acd4..5496f04bc6 100644
--- a/docs/components/search-dialog.tsx
+++ b/docs/components/search-dialog.tsx
@@ -16,7 +16,10 @@ import {
 } from "fumadocs-ui/components/dialog/search";
 import { useI18n } from "fumadocs-ui/contexts/i18n";
 import { useAtom } from "jotai";
+import { Bot } from "lucide-react";
+import { Button } from "@/components/ui/button";
 import { AIChatModal, aiChatModalAtom } from "./ai-chat-modal";
+import { AISearchTrigger } from "./floating-ai-search";
 
 const client = new OramaClient({
 	endpoint: process.env.NEXT_PUBLIC_ORAMA_ENDPOINT!,
@@ -55,6 +58,7 @@ export function CustomSearchDialog(props: SharedProps) {
 					<SearchDialogHeader>
 						<SearchDialogIcon />
 						<SearchDialogInput />
+
 						<SearchDialogClose className="hidden md:block" />
 					</SearchDialogHeader>
 					<SearchDialogList
@@ -71,8 +75,6 @@ export function CustomSearchDialog(props: SharedProps) {
 					</SearchDialogFooter>
 				</SearchDialogContent>
 			</SearchDialog>
-
-			<AIChatModal isOpen={isAIModalOpen} onClose={handleAIModalClose} />
 		</>
 	);
 }