docs: change ask ai button placement

This commit is contained in:
Bereket Engida
2025-11-11 16:12:14 -08:00
parent 1ebc6faab0
commit 2c0cb145d2
2 changed files with 13 additions and 8 deletions
+9 -6
View File
@@ -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>
+4 -2
View File
@@ -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} />
</>
);
}