Added top banner for Cody (#1157)

<!-- Explain the changes introduced in your PR -->

## Pull Request approval

You will need to get your PR approved by at least one member of the
Sourcegraph team. For reviews of docs formatting, styles, and component
usage, please tag the docs team via the #docs Slack channel.

---------

Co-authored-by: Maedah Batool <[email protected]>

Author: zahidalidev

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>
+  );
+}