feat(docs): Add version warning for old docs subdomains

docs/site/app/[lang]/docs/[[...slug]]/page.tsx

@@ -15,6 +15,7 @@ import { getMDXComponents } from "@/components/geistdocs/mdx-components";
 import { OpenInChat } from "@/components/geistdocs/open-in-chat";
 import { RemoteCacheCounter } from "@/components/remote-cache-counter";
 import { ScrollTop } from "@/components/geistdocs/scroll-top";
+
 import { Separator } from "@/components/ui/separator";
 import { getLLMText, getPageImage, source } from "@/lib/geistdocs/source";
 

docs/site/components/ai-elements/prompt-input.tsx

@@ -984,13 +984,15 @@ export const PromptInputActionMenuItem = ({
 
 export type PromptInputSubmitProps = ComponentProps<typeof InputGroupButton> & {
   status?: ChatStatus;
+  onStop?: () => void;
 };
 
 export const PromptInputSubmit = ({
   className,
   variant = "default",
   size = "icon-sm",
   status,
+  onStop,
   children,
   ...props
 }: PromptInputSubmitProps) => {
@@ -1004,12 +1006,22 @@ export const PromptInputSubmit = ({
     Icon = <XIcon className="size-4" />;
   }
 
+  const isStreaming = status === "streaming" || status === "submitted";
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    if (isStreaming && onStop) {
+      e.preventDefault();
+      onStop();
+    }
+  };
+
   return (
     <InputGroupButton
-      aria-label="Submit"
+      aria-label={isStreaming ? "Stop" : "Submit"}
       className={cn(className)}
+      onClick={handleClick}
       size={size}
-      type="submit"
+      type={isStreaming ? "button" : "submit"}
       variant={variant}
       {...props}
     >

docs/site/components/geistdocs/chat.tsx

@@ -129,7 +129,7 @@ const ChatInner = ({ basePath, suggestions }: ChatProps) => {
   const { initialMessages, isLoading, saveMessages, clearMessages } =
     useChatPersistence();
 
-  const { messages, sendMessage, status, setMessages } = useChat({
+  const { messages, sendMessage, status, setMessages, stop } = useChat({
     transport: new DefaultChatTransport({
       api: basePath ? `${basePath}/api/chat` : "/api/chat"
     }),
@@ -188,6 +188,8 @@ const ChatInner = ({ basePath, suggestions }: ChatProps) => {
 
   const handleClearChat = async () => {
     try {
+      // Cancel any active stream first
+      stop();
       await clearMessages();
       setMessages([]);
       toast.success("Chat history cleared");
@@ -342,7 +344,7 @@ const ChatInner = ({ basePath, suggestions }: ChatProps) => {
               <p className="text-muted-foreground text-xs">
                 {localPrompt.length} / 1000
               </p>
-              <PromptInputSubmit status={status} />
+              <PromptInputSubmit onStop={stop} status={status} />
             </PromptInputFooter>
           </PromptInput>
         </PromptInputProvider>

docs/site/components/geistdocs/sidebar.tsx

@@ -25,6 +25,7 @@ import {
 import { github, nav } from "@/geistdocs";
 import { useSidebarContext } from "@/hooks/geistdocs/use-sidebar";
 import { SearchButton } from "./search";
+import { VersionWarning } from "@/components/version-warning";
 
 export const Sidebar = () => {
   const { root } = useTreeContext();
@@ -55,6 +56,7 @@ export const Sidebar = () => {
         data-sidebar-placeholder
       >
         <div className="px-4 pt-12 pb-4 h-full overflow-y-auto">
+          <VersionWarning />
           <Fragment key={root.$id}>{renderSidebarList(root.children)}</Fragment>
         </div>
       </div>
@@ -104,7 +106,10 @@ export const Sidebar = () => {
                 </a>
               ) : null}
             </nav>
-            <div className="px-4 pb-4">{renderSidebarList(root.children)}</div>
+            <div className="px-4 pb-4">
+              <VersionWarning />
+              {renderSidebarList(root.children)}
+            </div>
           </div>
         </SheetContent>
       </Sheet>

docs/site/components/version-warning.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { TriangleAlert } from "lucide-react";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+
+const PRODUCTION_DOMAIN = "turborepo.dev";
+const NPM_REGISTRY_URL = "https://registry.npmjs.org/turbo/latest";
+
+/**
+ * Convert subdomain format to semver for comparison.
+ * Subdomain format: "v2-3-1" -> "2.3.1"
+ */
+function subdomainToSemver(subdomain: string): string {
+  return subdomain.replace(/^v/, "").replace(/-/g, ".");
+}
+
+/**
+ * Compare two semver strings.
+ * Returns true if `a` is older than `b`.
+ */
+function isOlderVersion(a: string, b: string): boolean {
+  const aParts = a.split(".").map(Number);
+  const bParts = b.split(".").map(Number);
+
+  for (let i = 0; i < Math.max(aParts.length, bParts.length); i++) {
+    const aVal = aParts[i] || 0;
+    const bVal = bParts[i] || 0;
+    if (aVal < bVal) return true;
+    if (aVal > bVal) return false;
+  }
+  return false;
+}
+
+export function VersionWarning() {
+  const [isOldVersion, setIsOldVersion] = useState(false);
+  const [subdomainVersion, setSubdomainVersion] = useState("");
+
+  useEffect(() => {
+    const host = window.location.host;
+
+    // Check if we're on a subdomain of turborepo.dev (e.g., v2-3-1.turborepo.dev)
+    if (host === PRODUCTION_DOMAIN || !host.endsWith(`.${PRODUCTION_DOMAIN}`)) {
+      return;
+    }
+
+    // Extract version from subdomain (e.g., "v2-3-1" from "v2-3-1.turborepo.dev")
+    const subdomain = host.replace(`.${PRODUCTION_DOMAIN}`, "");
+    setSubdomainVersion(subdomain);
+
+    const currentSemver = subdomainToSemver(subdomain);
+
+    // Fetch latest version from npm to compare
+    fetch(NPM_REGISTRY_URL)
+      .then((res) => res.json())
+      .then((data) => {
+        const latestVersion = data.version as string;
+
+        if (isOlderVersion(currentSemver, latestVersion)) {
+          setIsOldVersion(true);
+        }
+      })
+      .catch(() => {
+        // If we can't fetch npm, assume it's old to be safe
+        setIsOldVersion(true);
+      });
+  }, []);
+
+  if (!isOldVersion) {
+    return null;
+  }
+
+  return (
+    <div className="mb-4 rounded-lg border border-amber-500/50 bg-amber-500/10 p-3 text-sm">
+      <div className="flex items-center gap-2 font-medium text-amber-600 dark:text-amber-500">
+        <TriangleAlert className="size-4" />
+        <span>Old Version ({subdomainVersion})</span>
+      </div>
+      <p className="mt-2 text-muted-foreground">
+        You&apos;re viewing docs for an out-of-date version of Turborepo.{" "}
+        <Link
+          href={`https://${PRODUCTION_DOMAIN}`}
+          className="block mt-2 font-medium text-amber-600 underline underline-offset-2 hover:text-amber-500 dark:text-amber-500 dark:hover:text-amber-400"
+        >
+          View latest docs →
+        </Link>
+      </p>
+    </div>
+  );
+}