Added top banner for Cody

src/components/Layout.tsx

@@ -13,6 +13,7 @@ import { LogoMark } from './LogoMark';
 import VersionSelector from './VersionSelector';
 import { Search } from './search/Search';
 import { DemoLayout } from '@/components/DemoLayout';
+import { TopBanner } from './TopBanner';
 
 function GitHubIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
 	return (
@@ -103,11 +104,31 @@ function Header() {
 export function Layout({ children }: { children: React.ReactNode }) {
 	let pathname = usePathname();
 	let isHomePage = pathname === '/';
+	let isCodyDocs = pathname.includes('/cody');
+	let isopenCtxDocs = pathname.includes('/cody/capabilities/openctx');
 
 	return (
 		<div className="flex w-full flex-col">
 			<Header />
 
+			{/* Cody docs banner */}
+			{/* {isCodyDocs && !isopenCtxDocs && <TopBanner
+				text="NEW: Introducing chat and search in a single input with Sourcegraph 6.0."
+				link="https://sourcegraph.com/blog/combining-chat-and-search"
+				linkText="Read here"
+				textColor="#ffffff"
+				backgroundColor="#F34E3F"
+			/>} */}
+
+			{/* Openctx docs banner */}
+			{isopenCtxDocs && <TopBanner
+				text="NEW: MCP is the recommended method for adding external context in Cody due to its broad community adoption and extensive tool support."
+				link="https://sourcegraph.com/docs/cody/capabilities/agentic-context-fetching#mcp-support"
+				linkText="Read docs to learn more about configuring MCP."
+				textColor="#ffffff"
+				backgroundColor="#F34E3F"
+			/>}
+
 			{isHomePage && <Hero />}
 			{/* {isHomePage && <DemoLayout />} */}
 

src/components/TopBanner.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+
+interface TopBannerProps {
+  text?: string;
+  link?: string;
+  backgroundColor?: string;
+  textColor?: string;
+  linkText?: string;
+}
+
+export function TopBanner({
+  text = "",
+  link = "https://sourcegraph.com/",
+  backgroundColor = "#F34E3F",
+  textColor = "white",
+  linkText = 'new docs',
+}: TopBannerProps) {
+  const [isVisible, setIsVisible] = useState(true);
+
+  if (!isVisible) return null;
+
+  return (
+    <div
+      style={{ backgroundColor, color: textColor }}
+      className="fixed top-0 z-[100] min-h-[42px] w-full flex items-center justify-center px-4 py-2 md:py-0 md:h-[42px]"
+    >
+      <div className="flex items-center gap-2 text-xs sm:text-sm max-w-[90%] md:max-w-none text-center">
+        <span className="line-clamp-2 md:line-clamp-1">{text}</span>
+        <Link href={link} target="_blank" className="flex items-center hover:opacity-80 whitespace-nowrap">
+          {linkText && <span>{linkText}</span>}
+          <svg className="lucide lucide-arrow-right w-3 h-3 ml-1 sm:w-4 sm:h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" >
+            <path d="M5 12h14" />
+            <path d="m12 5 7 7-7 7" />
+          </svg>
+        </Link>
+      </div>
+      <button
+        onClick={() => setIsVisible(false)}
+        className="absolute right-2 sm:right-4 hover:opacity-80"
+      >
+        <svg
+          className="h-3 w-3 sm:h-4 sm:w-4"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M6 18L18 6M6 6l12 12"
+          />
+        </svg>
+      </button>
+    </div>
+  );
+}