feat(docs): DR-7571 Add floating Ask AI input

Author: ArthurGamby

apps/docs/src/app/(docs)/(default)/layout.tsx

@@ -9,12 +9,14 @@ import { StatusIndicator } from "@/components/status-indicator";
 import { SidebarBannerCarousel } from "@/components/sidebar-banner";
 import { fetchOgImage } from "@/lib/og-image";
 import { cn } from "@prisma-docs/ui/lib/cn";
+import { FloatingAsk } from "@/components/floating-ask";
 
 // Sidebar announcement slides — set to [] to hide the banner
 const SIDEBAR_SLIDES = [
   {
     title: "The Next Evolution of Prisma ORM",
-    description: "Prisma Next: a full TypeScript rewrite with a new query API, SQL builder, and extensible architecture.",
+    description:
+      "Prisma Next: a full TypeScript rewrite with a new query API, SQL builder, and extensible architecture.",
     href: "https://pris.ly/pn-anouncement",
     gradient: "orm" as const,
     badge: "New",
@@ -44,23 +46,26 @@ export default async function Layout({ children }: { children: React.ReactNode }
   );
 
   return (
-    <DocsLayout
-      {...base}
-      links={navbarLinks}
-      nav={{ ...nav }}
-      sidebar={{
-        collapsible: false,
-        footer: ({ className, ...props }: ComponentProps<"div">) => (
-          <div className={cn("flex flex-col p-4 pt-2 gap-3", className)} {...props}>
-            <SidebarBannerCarousel slides={slides} />
-            <StatusIndicator />
-            {props.children}
-          </div>
-        ),
-      }}
-      tree={source.pageTree}
-    >
-      {children}
-    </DocsLayout>
+    <>
+      <DocsLayout
+        {...base}
+        links={navbarLinks}
+        nav={{ ...nav }}
+        sidebar={{
+          collapsible: false,
+          footer: ({ className, ...props }: ComponentProps<"div">) => (
+            <div className={cn("flex flex-col p-4 pt-2 gap-3", className)} {...props}>
+              <SidebarBannerCarousel slides={slides} />
+              <StatusIndicator />
+              {props.children}
+            </div>
+          ),
+        }}
+        tree={source.pageTree}
+      >
+        {children}
+      </DocsLayout>
+      <FloatingAsk />
+    </>
   );
 }

apps/docs/src/components/ai-chat-sidebar.tsx

@@ -1,11 +1,6 @@
 "use client";
 
-import {
-  useChat,
-  useDeepThinking,
-  type Reaction,
-  type Source,
-} from "@kapaai/react-sdk";
+import { useChat, useDeepThinking, type Reaction, type Source } from "@kapaai/react-sdk";
 import {
   AlertCircleIcon,
   ChevronRightIcon,
@@ -20,11 +15,7 @@ import { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import { cn } from "@prisma-docs/ui/lib/cn";
 import { buttonVariants } from "@/components/ui/button";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@prisma-docs/ui/components/tooltip";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@prisma-docs/ui/components/tooltip";
 import {
   Drawer,
   DrawerContent,
@@ -46,28 +37,17 @@ import {
   ConversationContent,
   ConversationScrollButton,
 } from "@/components/ai-elements/conversation";
-import {
-  Message,
-  MessageContent,
-  MessageResponseMarkdown,
-} from "@/components/ai-elements/message";
+import { Message, MessageContent, MessageResponseMarkdown } from "@/components/ai-elements/message";
 import { Shimmer } from "@/components/ai-elements/shimmer";
 import { Spinner } from "@/components/ai-elements/spinner";
-import {
-  PromptInput,
-  PromptInputFooter,
-} from "@/components/ai-elements/prompt-input";
+import { PromptInput, PromptInputFooter } from "@/components/ai-elements/prompt-input";
 import { CopyChat } from "@/components/ai-elements/copy-chat";
 
 interface AIChatSidebarProps {
   exampleQuestions?: string[];
 }
 
-const SourcesDisplay = ({
-  sources,
-}: {
-  sources: (Source | StoredSource)[];
-}) => {
+const SourcesDisplay = ({ sources }: { sources: (Source | StoredSource)[] }) => {
   const [showAll, setShowAll] = useState(false);
   const displayedSources = showAll ? sources : sources.slice(0, 3);
   const hasMore = sources.length > 3;
@@ -132,14 +112,11 @@ const FeedbackButtons = ({
                 "h-7 w-7",
                 currentReaction === "upvote" &&
                   "text-green-600 dark:text-green-400 bg-green-50 dark:bg-green-950",
-                disabled && "opacity-50 cursor-not-allowed"
+                disabled && "opacity-50 cursor-not-allowed",
               )}
             >
               <ThumbsUpIcon
-                className={cn(
-                  "size-3.5",
-                  currentReaction === "upvote" && "fill-current"
-                )}
+                className={cn("size-3.5", currentReaction === "upvote" && "fill-current")}
               />
             </button>
           )}
@@ -159,14 +136,11 @@ const FeedbackButtons = ({
                 "h-7 w-7",
                 currentReaction === "downvote" &&
                   "text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-950",
-                disabled && "opacity-50 cursor-not-allowed"
+                disabled && "opacity-50 cursor-not-allowed",
               )}
             >
               <ThumbsDownIcon
-                className={cn(
-                  "size-3.5",
-                  currentReaction === "downvote" && "fill-current"
-                )}
+                className={cn("size-3.5", currentReaction === "downvote" && "fill-current")}
               />
             </button>
           )}
@@ -185,6 +159,7 @@ const ChatInner = ({
   onClose: () => void;
 }) => {
   const [inputValue, setInputValue] = useState("");
+  const { pendingMessage, setPendingMessage } = useAIChatContext();
   const {
     initialMessages,
     isLoading: isPersistenceLoading,
@@ -205,6 +180,14 @@ const ChatInner = ({
 
   const deepThinking = useDeepThinking();
 
+  // Auto-submit pending message from the floating input
+  useEffect(() => {
+    if (pendingMessage && !isGeneratingAnswer) {
+      submitQuery(pendingMessage);
+      setPendingMessage("");
+    }
+  }, [pendingMessage, isGeneratingAnswer, submitQuery, setPendingMessage]);
+
   useEffect(() => {
     if (conversation.length === 0) return;
 
@@ -258,9 +241,7 @@ const ChatInner = ({
   };
 
   const messagesForCopy: ChatMessage[] = conversation.flatMap((qa) => {
-    const msgs: ChatMessage[] = [
-      { id: `${qa.id}-user`, role: "user", content: qa.question },
-    ];
+    const msgs: ChatMessage[] = [{ id: `${qa.id}-user`, role: "user", content: qa.question }];
     if (qa.answer) {
       msgs.push({
         id: `${qa.id}-assistant`,
@@ -273,30 +254,24 @@ const ChatInner = ({
 
   const hasActiveConversation = conversation.length > 0;
   const hasPersistedMessages = initialMessages.length > 0;
-  const showEmptyState =
-    !hasActiveConversation && !hasPersistedMessages && !isPersistenceLoading;
+  const showEmptyState = !hasActiveConversation && !hasPersistedMessages && !isPersistenceLoading;
 
   return (
     <div className="flex size-full w-full flex-col overflow-hidden bg-fd-background">
       <div className="flex items-center justify-between px-4 py-2.5 border-b shrink-0">
         <h2 className="font-semibold text-sm">Chat</h2>
         <div className="flex items-center gap-1">
-          <CopyChat
-            messages={hasActiveConversation ? messagesForCopy : initialMessages}
-          />
+          <CopyChat messages={hasActiveConversation ? messagesForCopy : initialMessages} />
           <Tooltip>
             <TooltipTrigger
               render={(props) => (
                 <button
                   {...props}
                   onClick={handleClearChat}
-                  disabled={
-                    (!hasActiveConversation && !hasPersistedMessages) ||
-                    isGeneratingAnswer
-                  }
+                  disabled={(!hasActiveConversation && !hasPersistedMessages) || isGeneratingAnswer}
                   className={cn(
                     buttonVariants({ variant: "ghost", size: "icon-sm" }),
-                    "disabled:opacity-50"
+                    "disabled:opacity-50",
                   )}
                 >
                   <Trash2 className="size-3.5" />
@@ -311,9 +286,7 @@ const ChatInner = ({
                 <button
                   {...props}
                   onClick={onClose}
-                  className={cn(
-                    buttonVariants({ variant: "ghost", size: "icon-sm" })
-                  )}
+                  className={cn(buttonVariants({ variant: "ghost", size: "icon-sm" }))}
                 >
                   <ChevronRightIcon className="size-3.5" />
                 </button>
@@ -333,9 +306,7 @@ const ChatInner = ({
                   <MessagesSquareIcon className="size-6 text-fd-primary" />
                 </div>
                 <div>
-                  <h3 className="font-semibold text-fd-foreground">
-                    How can I help?
-                  </h3>
+                  <h3 className="font-semibold text-fd-foreground">How can I help?</h3>
                   <p className="text-sm text-fd-muted-foreground mt-1">
                     Ask me anything about Prisma
                   </p>
@@ -373,8 +344,7 @@ const ChatInner = ({
             <>
               {conversation.map((qa, index) => {
                 const isLastItem = index === conversation.length - 1;
-                const isLoading =
-                  isLastItem && (isGeneratingAnswer || isPreparingAnswer);
+                const isLoading = isLastItem && (isGeneratingAnswer || isPreparingAnswer);
                 const hasAnswer = !!qa.answer;
                 const isComplete = qa.id && !isLoading;
 
@@ -387,9 +357,7 @@ const ChatInner = ({
                     <Message from="assistant">
                       <MessageContent>
                         {hasAnswer ? (
-                          <MessageResponseMarkdown>
-                            {qa.answer}
-                          </MessageResponseMarkdown>
+                          <MessageResponseMarkdown>{qa.answer}</MessageResponseMarkdown>
                         ) : isLoading ? (
                           <div className="flex items-center gap-2 overflow-hidden">
                             <Spinner />
@@ -443,18 +411,14 @@ const ChatInner = ({
                 <Message key={message.id} from={message.role}>
                   <MessageContent>
                     {message.role === "assistant" ? (
-                      <MessageResponseMarkdown>
-                        {message.content}
-                      </MessageResponseMarkdown>
+                      <MessageResponseMarkdown>{message.content}</MessageResponseMarkdown>
                     ) : (
                       message.content
                     )}
                   </MessageContent>
                   {message.role === "assistant" &&
                     message.sources &&
-                    message.sources.length > 0 && (
-                      <SourcesDisplay sources={message.sources} />
-                    )}
+                    message.sources.length > 0 && <SourcesDisplay sources={message.sources} />}
                 </Message>
               ))}
             </>
@@ -523,14 +487,18 @@ export const AIChatSidebar = ({
         onClick={() => setIsOpen(!isOpen)}
         className={cn(
           buttonVariants({ variant: "outline" }),
-          "hidden shrink-0 shadow-none md:inline-flex items-center gap-2 h-8 group cursor-pointer"
+          "hidden shrink-0 shadow-none md:inline-flex items-center gap-2 h-8 group cursor-pointer",
         )}
       >
         <MessagesSquareIcon className="size-4 text-fd-muted-foreground group-hover:text-fd-accent-foreground" />
         <span>Ask AI</span>
         <div className="ms-auto inline-flex gap-0.5">
-          <kbd className="rounded-md border bg-fd-background px-1.5 text-fd-muted-foreground group-hover:text-fd-accent-foreground">{isMac ? "⌘" : "Ctrl"}</kbd>
-          <kbd className="rounded-md border bg-fd-background px-1.5 text-fd-muted-foreground group-hover:text-fd-accent-foreground">I</kbd>
+          <kbd className="rounded-md border bg-fd-background px-1.5 text-fd-muted-foreground group-hover:text-fd-accent-foreground">
+            {isMac ? "⌘" : "Ctrl"}
+          </kbd>
+          <kbd className="rounded-md border bg-fd-background px-1.5 text-fd-muted-foreground group-hover:text-fd-accent-foreground">
+            I
+          </kbd>
         </div>
       </button>
 
@@ -542,28 +510,22 @@ export const AIChatSidebar = ({
               "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-[500px]",
               "translate-x-full data-[state=open]:translate-x-0",
               "pointer-events-none data-[state=open]:pointer-events-auto",
-              "hidden md:flex"
+              "hidden md:flex",
             )}
             data-state={isOpen ? "open" : "closed"}
           >
-            <ChatInner
-              exampleQuestions={exampleQuestions}
-              onClose={() => setIsOpen(false)}
-            />
+            <ChatInner exampleQuestions={exampleQuestions} onClose={() => setIsOpen(false)} />
           </div>,
-          document.body
+          document.body,
         )}
 
       <div className="md:hidden">
-        <Drawer
-          open={isMobile ? isOpen : false}
-          onOpenChange={isMobile ? setIsOpen : undefined}
-        >
+        <Drawer open={isMobile ? isOpen : false} onOpenChange={isMobile ? setIsOpen : undefined}>
           <DrawerTrigger asChild>
             <button
               className={cn(
                 buttonVariants({ variant: "outline", size: "sm" }),
-                "shadow-none inline-flex items-center gap-1.5"
+                "shadow-none inline-flex items-center gap-1.5",
               )}
             >
               <MessagesSquareIcon className="size-3.5 text-fd-muted-foreground" />
@@ -575,10 +537,7 @@ export const AIChatSidebar = ({
               <DrawerTitle>AI Chat</DrawerTitle>
               <DrawerDescription>Ask questions about Prisma</DrawerDescription>
             </DrawerHeader>
-            <ChatInner
-              exampleQuestions={exampleQuestions}
-              onClose={() => setIsOpen(false)}
-            />
+            <ChatInner exampleQuestions={exampleQuestions} onClose={() => setIsOpen(false)} />
           </DrawerContent>
         </Drawer>
       </div>