chore: add DBHubBanner

tianzhou · tianzhou · commit b9df834fd895 · 2025-03-17T14:49:50.000+08:00
diff --git a/src/components/ConversationView/index.tsx b/src/components/ConversationView/index.tsx
@@ -22,6 +22,7 @@ import MessageView from "./MessageView";
 import ClearConversationButton from "../ClearConversationButton";
 import MessageTextarea from "./MessageTextarea";
 import DataStorageBanner from "../DataStorageBanner";
+import DBHubBanner from "../DBHubBanner";
 import SchemaDrawer from "../SchemaDrawer";
 import Icon from "../Icon";
 import { useTranslation } from "react-i18next";
@@ -320,6 +321,7 @@ const ConversationView = () => {
       } relative w-full h-full max-h-full flex flex-col justify-start items-start overflow-y-auto bg-white dark:bg-zinc-800`}
     >
       <div className="sticky top-0 z-1 bg-white dark:bg-zinc-800 w-full flex flex-col justify-start items-start">
+        <DBHubBanner />
         <DataStorageBanner />
         <Header className={showHeaderShadow ? "shadow" : ""} />
       </div>
diff --git a/src/components/DBHubBanner.tsx b/src/components/DBHubBanner.tsx
@@ -0,0 +1,41 @@
+import { useTranslation } from "react-i18next";
+import { useLocalStorage } from "react-use";
+import Icon from "./Icon";
+
+interface Props {
+  className?: string;
+  alwaysShow?: boolean;
+}
+
+const DBHubBanner = (props: Props) => {
+  const { className, alwaysShow } = props;
+  const { t } = useTranslation();
+  const [hideBanner, setHideBanner] = useLocalStorage("hide-github-banner", false);
+  const show = alwaysShow || !hideBanner;
+
+  return (
+    <div
+      className={`${!show && "!hidden"} ${
+        className || ""
+      } relative w-full flex flex-row justify-start sm:justify-center items-center px-4 py-1 bg-blue-50 dark:bg-blue-900`}
+    >
+      <span className="text-sm leading-6 pr-4">
+        <a
+          href="https://github.com/bytebase/dbhub"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-blue-600 dark:text-blue-300 hover:underline font-medium"
+        >
+          Check out DBHub - a universal database MCP server to be used by Cursor, Claude Desktop, and more
+        </a>
+      </span>
+      {!alwaysShow && (
+        <button className="absolute right-2 sm:right-4 opacity-60 hover:opacity-100" onClick={() => setHideBanner(true)}>
+          <Icon.BiX className="w-6 h-auto" />
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default DBHubBanner;
