@redocly/theme 0.64.0-next.5 → 0.64.0-next.6

package/lib/components/Banner/Banner.d.ts

@@ -1,6 +1,11 @@
+import type { ResolvedBannerConfig } from '@redocly/config';
 import type { JSX } from 'react';
 type BannerProps = {
     className?: string;
 };
+export type DisplayBanner = ResolvedBannerConfig & {
+    color: NonNullable<ResolvedBannerConfig['color']>;
+    dismissible: NonNullable<ResolvedBannerConfig['dismissible']>;
+};
 export declare function Banner({ className }: BannerProps): JSX.Element | null;
 export {};

package/lib/components/Banner/Banner.js

@@ -38,10 +38,15 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 const utils_1 = require("../../core/utils");
+const contexts_1 = require("../../core/contexts");
 const Markdown_1 = require("../../components/Markdown/Markdown");
 const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
 const Button_1 = require("../../components/Button/Button");
 const ANIMATION_DURATION = 0.4;
+function toDisplayBanner(banner) {
+    var _a, _b;
+    return Object.assign(Object.assign({}, banner), { color: (_a = banner.color) !== null && _a !== void 0 ? _a : 'info', dismissible: (_b = banner.dismissible) !== null && _b !== void 0 ? _b : false });
+}
 function setBannerHeight(height) {
     document.documentElement.style.setProperty('--banner-height', `${height}px`);
 }
@@ -50,11 +55,12 @@ function Banner({ className }) {
     const { banner, dismissBanner } = useBanner();
     const [displayBanner, setDisplayBanner] = (0, react_1.useState)(undefined);
     const [isVisible, setIsVisible] = (0, react_1.useState)(false);
+    const { sendBannerViewedMessage, sendBannerDismissedMessage, sendBannerLinkClickedMessage } = (0, hooks_1.useBannerTelemetry)(displayBanner);
     const markdownContent = useMarkdocRenderer(displayBanner === null || displayBanner === void 0 ? void 0 : displayBanner.ast);
     const bannerRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         if (banner) {
-            setDisplayBanner(banner);
+            setDisplayBanner(toDisplayBanner(banner));
             requestAnimationFrame(() => {
                 requestAnimationFrame(() => {
                     setIsVisible(true);
@@ -110,14 +116,25 @@ function Banner({ className }) {
             resizeObserver.disconnect();
         };
     }, [displayBanner, isVisible]);
+    (0, react_1.useEffect)(() => {
+        if (isVisible) {
+            sendBannerViewedMessage();
+        }
+    }, [isVisible, sendBannerViewedMessage]);
+    const markdownLinkContextValue = (0, react_1.useMemo)(() => ({
+        onMarkdownLinkClick: sendBannerLinkClickedMessage,
+    }), [sendBannerLinkClickedMessage]);
     if (!displayBanner) {
         return null;
     }
-    const bannerColor = displayBanner.color || 'info';
-    return (react_1.default.createElement(BannerWrapper, { ref: bannerRef, "data-component-name": "Banner/Banner", className: className, "$color": bannerColor, "$isVisible": isVisible },
+    return (react_1.default.createElement(BannerWrapper, { ref: bannerRef, "data-component-name": "Banner/Banner", className: className, "$color": displayBanner.color, "$isVisible": isVisible },
         react_1.default.createElement(BannerContent, null,
-            react_1.default.createElement(Markdown_1.Markdown, { compact: true }, markdownContent)),
-        displayBanner.dismissible && (react_1.default.createElement(DismissButton, { variant: "ghost", size: "var(--banner-button-size)", icon: react_1.default.createElement(CloseIcon_1.CloseIcon, { color: `var(--banner-${bannerColor}-icon-color)`, size: "16px" }), onClick: () => dismissBanner(displayBanner.hash), "aria-label": "Dismiss banner" }))));
+            react_1.default.createElement(contexts_1.MarkdownLinkContext.Provider, { value: markdownLinkContextValue },
+                react_1.default.createElement(Markdown_1.Markdown, { compact: true }, markdownContent))),
+        displayBanner.dismissible && (react_1.default.createElement(DismissButton, { variant: "ghost", size: "var(--banner-button-size)", icon: react_1.default.createElement(CloseIcon_1.CloseIcon, { color: `var(--banner-${displayBanner.color}-icon-color)`, size: "16px" }), onClick: () => {
+                dismissBanner(displayBanner.hash);
+                sendBannerDismissedMessage();
+            }, "aria-label": "Dismiss banner" }))));
 }
 const BannerContent = styled_components_1.default.div `
   flex: 1;

package/lib/components/Sidebar/Sidebar.js

@@ -74,8 +74,8 @@ const SidebarContent = styled_components_1.default.aside `
   flex-direction: column;
   width: 100%;
   -webkit-font-smoothing: antialiased;
-  top: var(--navbar-height);
-  height: calc(100vh - var(--navbar-height));
+  top: calc(var(--navbar-height) + var(--banner-height));
+  height: calc(100vh - var(--navbar-height) - var(--banner-height));
   overflow-x: hidden;
   ${({ opened }) => `
     display: ${opened ? 'flex' : 'none'}

package/lib/core/contexts/MarkdownLinkContext.d.ts

@@ -1,4 +1,4 @@
-export type MarkdownLinkClickHandler = () => void;
+export type MarkdownLinkClickHandler = (href: string) => void;
 export type MarkdownLinkContextValue = {
     onMarkdownLinkClick?: MarkdownLinkClickHandler;
 };

package/lib/core/hooks/index.d.ts

@@ -53,3 +53,4 @@ export * from './use-store';
 export * from './use-is-truncated';
 export * from './use-toast';
 export * from './use-toast-logic';
+export * from './use-banner-telemetry';

package/lib/core/hooks/index.js

@@ -69,4 +69,5 @@ __exportStar(require("./use-store"), exports);
 __exportStar(require("./use-is-truncated"), exports);
 __exportStar(require("./use-toast"), exports);
 __exportStar(require("./use-toast-logic"), exports);
+__exportStar(require("./use-banner-telemetry"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/hooks/use-banner-telemetry.d.ts

@@ -0,0 +1,7 @@
+import type { DisplayBanner } from '../../components/Banner/Banner';
+export type BannerTelemetryActions = {
+    sendBannerViewedMessage: () => void;
+    sendBannerDismissedMessage: () => void;
+    sendBannerLinkClickedMessage: (href: string) => void;
+};
+export declare function useBannerTelemetry(displayBanner: DisplayBanner | undefined): BannerTelemetryActions;

package/lib/core/hooks/use-banner-telemetry.js

@@ -0,0 +1,64 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBannerTelemetry = useBannerTelemetry;
+const react_1 = require("react");
+const use_theme_hooks_1 = require("./use-theme-hooks");
+const noop = () => { };
+const noopLink = (_href) => { };
+function getCurrentPageUri() {
+    return window.location.href;
+}
+function useBannerTelemetry(displayBanner) {
+    const { useTelemetry } = (0, use_theme_hooks_1.useThemeHooks)();
+    const telemetry = useTelemetry();
+    return (0, react_1.useMemo)(() => {
+        if (!displayBanner) {
+            return {
+                sendBannerViewedMessage: noop,
+                sendBannerDismissedMessage: noop,
+                sendBannerLinkClickedMessage: noopLink,
+            };
+        }
+        const bannerUri = 'urn:redocly:realm:ui:banner:banner-id';
+        const payload = {
+            id: 'banner-id',
+            object: 'banner',
+            uri: bannerUri,
+            trackingId: displayBanner.trackingId,
+            hash: displayBanner.hash,
+            color: displayBanner.color,
+            target: displayBanner.target,
+            dismissible: displayBanner.dismissible,
+        };
+        return {
+            sendBannerViewedMessage: () => {
+                const pageUri = getCurrentPageUri();
+                const page = { id: pageUri, object: 'page', uri: pageUri };
+                telemetry.sendBannerViewedMessage([payload, page]);
+            },
+            sendBannerDismissedMessage: () => {
+                const pageUri = getCurrentPageUri();
+                const page = { id: pageUri, object: 'page', uri: pageUri };
+                const { dismissible: _ } = payload, dismissedPayload = __rest(payload, ["dismissible"]);
+                telemetry.sendBannerDismissedMessage([dismissedPayload, page]);
+            },
+            sendBannerLinkClickedMessage: (href) => {
+                const pageUri = getCurrentPageUri();
+                const page = { id: pageUri, object: 'page', uri: pageUri };
+                telemetry.sendBannerLinkClickedMessage([Object.assign(Object.assign({}, payload), { href }), page]);
+            },
+        };
+    }, [displayBanner, telemetry]);
+}
+//# sourceMappingURL=use-banner-telemetry.js.map

package/lib/core/hooks/use-telemetry-fallback.d.ts

@@ -68,4 +68,7 @@ export declare const useTelemetryFallback: () => {
     sendGraphqlDocsReferencedInLinkClickedMessage: () => void;
     sendGraphqlDocsRequiredScopesModalOpenedMessage: () => void;
     sendGraphqlDocsDownloadDefinitionClickedMessage: () => void;
+    sendBannerViewedMessage: () => void;
+    sendBannerLinkClickedMessage: () => void;
+    sendBannerDismissedMessage: () => void;
 };

package/lib/core/hooks/use-telemetry-fallback.js

@@ -73,6 +73,9 @@ const useTelemetryFallback = () => ({
     sendGraphqlDocsReferencedInLinkClickedMessage: () => { },
     sendGraphqlDocsRequiredScopesModalOpenedMessage: () => { },
     sendGraphqlDocsDownloadDefinitionClickedMessage: () => { },
+    sendBannerViewedMessage: () => { },
+    sendBannerLinkClickedMessage: () => { },
+    sendBannerDismissedMessage: () => { },
 });
 exports.useTelemetryFallback = useTelemetryFallback;
 //# sourceMappingURL=use-telemetry-fallback.js.map

package/lib/icons/AnthropicIcon/AnthropicIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const AnthropicIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/AnthropicIcon/AnthropicIcon.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnthropicIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("g", { transform: "translate(2.15065 3.876255)" },
+        react_1.default.createElement("path", { d: "M8.43781 0.000244141H6.64874L9.90967 8.24774H11.6987L8.43781 0.000244141ZM3.26092 0.000244141L-7.62939e-06 8.24774H1.82713L2.49962 6.52211H5.91281L6.57261 8.24774H8.39975L5.13881 0.000244141H3.26092ZM3.08329 4.9868L4.19987 2.09384L5.31645 4.9868H3.08329Z", fill: "currentColor" }))));
+exports.AnthropicIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/AnthropicIcon/AnthropicIcon',
+})) `
+  color: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=AnthropicIcon.js.map

package/lib/icons/BotIcon/BotIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const BotIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/BotIcon/BotIcon.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BotIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ viewBox: "0 0 10.5 12.25", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M7 3.5H6.125V4.375H7V3.5Z", fill: "currentColor" }),
+    react_1.default.createElement("path", { d: "M4.375 3.5H3.5V4.375H4.375V3.5Z", fill: "currentColor" }),
+    react_1.default.createElement("path", { d: "M9.625 7.875H7.4375V7H7.875C8.10698 6.99973 8.32939 6.90746 8.49342 6.74342C8.65746 6.57939 8.74973 6.35698 8.75 6.125V4.375H9.625V3.5H8.75V2.625C8.74973 2.39302 8.65746 2.17061 8.49342 2.00658C8.32939 1.84254 8.10698 1.75027 7.875 1.75H7V0H6.125V1.75H4.375V0H3.5V1.75H2.625C2.39302 1.75027 2.17061 1.84254 2.00658 2.00658C1.84254 2.17061 1.75027 2.39302 1.75 2.625V3.5H0.875V4.375H1.75V6.125C1.75027 6.35698 1.84254 6.57939 2.00658 6.74342C2.17061 6.90746 2.39302 6.99973 2.625 7H3.0625V7.875H0.875C0.643017 7.87527 0.420612 7.96754 0.256576 8.13158C0.092539 8.29561 0.000266321 8.51802 0 8.75V12.25H0.875V8.75H9.625V12.25H10.5V8.75C10.4997 8.51802 10.4075 8.29561 10.2434 8.13158C10.0794 7.96754 9.85698 7.87527 9.625 7.875ZM2.625 2.625H7.875V6.125H2.625V2.625ZM3.9375 7H6.5625V7.875H3.9375V7Z", fill: "currentColor" })));
+exports.BotIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/BotIcon/BotIcon',
+})) `
+  color: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=BotIcon.js.map

package/lib/icons/GeminiIcon/GeminiIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const GeminiIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/GeminiIcon/GeminiIcon.js

@@ -0,0 +1,95 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GeminiIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("g", { clipPath: "url(#clip0_5333_7017)" },
+        react_1.default.createElement("mask", { id: "mask0_5333_7017", style: { maskType: 'alpha' }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "14", height: "14" },
+            react_1.default.createElement("path", { d: "M6.98858 0.876221C7.11667 0.876221 7.22837 0.96381 7.25964 1.08813C7.3552 1.46837 7.48112 1.84033 7.63618 2.20043C8.04154 3.14225 8.59778 3.96654 9.30396 4.67271C10.0105 5.37908 10.8346 5.93532 11.7763 6.34069C12.1364 6.4957 12.5085 6.62162 12.8887 6.71723C13.0131 6.7485 13.1005 6.86001 13.1005 6.9881C13.1005 7.11618 13.0131 7.22788 12.8885 7.25915C12.5083 7.35471 12.1363 7.48063 11.7763 7.63569C10.8344 8.04106 10.0103 8.5973 9.30396 9.30348C8.59778 10.01 8.04154 10.8341 7.63618 11.7758C7.48109 12.1359 7.35511 12.508 7.25945 12.8882C7.24431 12.9487 7.20945 13.0023 7.16038 13.0406C7.11132 13.079 7.05086 13.0999 6.98858 13.1C6.8605 13.1 6.74898 13.0126 6.71772 12.8881C6.62209 12.5078 6.49611 12.1359 6.34099 11.7758C5.93581 10.8339 5.37976 10.0098 4.6732 9.30348C3.96684 8.5973 3.14274 8.04106 2.20091 7.63569C1.8408 7.48062 1.46885 7.35464 1.08862 7.25896C1.02821 7.24387 0.974561 7.20905 0.936177 7.16002C0.897792 7.11099 0.876864 7.05055 0.876709 6.98828C0.876709 6.8602 0.964299 6.74868 1.08862 6.71742C1.46887 6.6218 1.84082 6.49582 2.20091 6.34069C3.14274 5.93551 3.96702 5.37927 4.6732 4.6729C5.37957 3.96672 5.93581 3.14244 6.34117 2.20061C6.49619 1.8405 6.62211 1.46854 6.71772 1.08832C6.73278 1.02784 6.76762 0.97413 6.81669 0.935705C6.86576 0.89728 6.92626 0.876345 6.98858 0.876221Z", fill: "black" }),
+            react_1.default.createElement("path", { d: "M6.98858 0.876221C7.11667 0.876221 7.22837 0.96381 7.25964 1.08813C7.3552 1.46837 7.48112 1.84033 7.63618 2.20043C8.04154 3.14225 8.59778 3.96654 9.30396 4.67271C10.0105 5.37908 10.8346 5.93532 11.7763 6.34069C12.1364 6.4957 12.5085 6.62162 12.8887 6.71723C13.0131 6.7485 13.1005 6.86001 13.1005 6.9881C13.1005 7.11618 13.0131 7.22788 12.8885 7.25915C12.5083 7.35471 12.1363 7.48063 11.7763 7.63569C10.8344 8.04106 10.0103 8.5973 9.30396 9.30348C8.59778 10.01 8.04154 10.8341 7.63618 11.7758C7.48109 12.1359 7.35511 12.508 7.25945 12.8882C7.24431 12.9487 7.20945 13.0023 7.16038 13.0406C7.11132 13.079 7.05086 13.0999 6.98858 13.1C6.8605 13.1 6.74898 13.0126 6.71772 12.8881C6.62209 12.5078 6.49611 12.1359 6.34099 11.7758C5.93581 10.8339 5.37976 10.0098 4.6732 9.30348C3.96684 8.5973 3.14274 8.04106 2.20091 7.63569C1.8408 7.48062 1.46885 7.35464 1.08862 7.25896C1.02821 7.24387 0.974561 7.20905 0.936177 7.16002C0.897792 7.11099 0.876864 7.05055 0.876709 6.98828C0.876709 6.8602 0.964299 6.74868 1.08862 6.71742C1.46887 6.6218 1.84082 6.49582 2.20091 6.34069C3.14274 5.93551 3.96702 5.37927 4.6732 4.6729C5.37957 3.96672 5.93581 3.14244 6.34117 2.20061C6.49619 1.8405 6.62211 1.46854 6.71772 1.08832C6.73278 1.02784 6.76762 0.97413 6.81669 0.935705C6.86576 0.89728 6.92626 0.876345 6.98858 0.876221Z", fill: "url(#paint0_linear_5333_7017)" })),
+        react_1.default.createElement("g", { mask: "url(#mask0_5333_7017)" },
+            react_1.default.createElement("g", { filter: "url(#filter0_f_5333_7017)" },
+                react_1.default.createElement("path", { d: "M-0.227015 10.4326C1.18534 10.9342 2.80867 9.99369 3.39882 8.33193C3.98897 6.67037 3.32234 4.91669 1.90998 4.41507C0.497625 3.91346 -1.1257 4.85396 -1.71604 6.51553C-2.306 8.17729 -1.63937 9.93096 -0.227015 10.4326Z", fill: "#FFE432" })),
+            react_1.default.createElement("g", { filter: "url(#filter1_f_5333_7017)" },
+                react_1.default.createElement("path", { d: "M6.04409 4.95442C7.98425 4.95442 9.55728 3.34672 9.55728 1.3638C9.55728 -0.619301 7.98443 -2.22681 6.04409 -2.22681C4.10374 -2.22681 2.53052 -0.619113 2.53052 1.3638C2.53052 3.34672 4.10355 4.95442 6.04409 4.95442Z", fill: "#FC413D" })),
+            react_1.default.createElement("g", { filter: "url(#filter2_f_5333_7017)" },
+                react_1.default.createElement("path", { d: "M4.67843 16.4367C6.70392 16.3378 8.24192 14.1304 8.11364 11.5065C7.98556 8.88254 6.23941 6.83558 4.21393 6.93466C2.18844 7.03374 0.650439 9.241 0.778715 11.8649C0.906992 14.4888 2.65295 16.5358 4.67843 16.4367Z", fill: "#00B95C" })),
+            react_1.default.createElement("g", { filter: "url(#filter3_f_5333_7017)" },
+                react_1.default.createElement("path", { d: "M4.67843 16.4367C6.70392 16.3378 8.24192 14.1304 8.11364 11.5065C7.98556 8.88254 6.23941 6.83558 4.21393 6.93466C2.18844 7.03374 0.650439 9.241 0.778715 11.8649C0.906992 14.4888 2.65295 16.5358 4.67843 16.4367Z", fill: "#00B95C" })),
+            react_1.default.createElement("g", { filter: "url(#filter4_f_5333_7017)" },
+                react_1.default.createElement("path", { d: "M6.70714 14.8494C8.40506 13.8162 8.85958 11.4634 7.72223 9.59402C6.58489 7.7245 4.28627 7.04658 2.58816 8.07957C0.890051 9.11294 0.435527 11.4658 1.57287 13.3353C2.7106 15.2047 5.00903 15.8826 6.70714 14.8494Z", fill: "#00B95C" })),
+            react_1.default.createElement("g", { filter: "url(#filter5_f_5333_7017)" },
+                react_1.default.createElement("path", { d: "M13.5707 8.97502C15.4792 8.97502 17.0265 7.48505 17.0265 5.64736C17.0265 3.80949 15.4792 2.31952 13.5707 2.31952C11.6622 2.31952 10.115 3.80949 10.115 5.64736C10.115 7.48524 11.6622 8.97502 13.5707 8.97502Z", fill: "#3186FF" })),
+            react_1.default.createElement("g", { filter: "url(#filter6_f_5333_7017)" },
+                react_1.default.createElement("path", { d: "M-1.5844 8.58873C0.17304 9.92499 2.74027 9.50587 4.1498 7.65218C5.55933 5.79867 5.27754 3.2126 3.5201 1.87634C1.76265 0.539895 -0.804385 0.959007 -2.21411 2.81271C-3.62364 4.66622 -3.34166 7.25247 -1.5844 8.58873Z", fill: "#FBBC04" })),
+            react_1.default.createElement("g", { filter: "url(#filter7_f_5333_7017)" },
+                react_1.default.createElement("path", { d: "M7.42033 10.5639C9.51777 12.006 12.2982 11.6044 13.6303 9.66653C14.9626 7.72883 14.3422 4.98906 12.2445 3.54694C10.1469 2.10444 7.36664 2.50641 6.03434 4.44393C4.70222 6.38183 5.32251 9.12159 7.42014 10.5639H7.42033Z", fill: "#3186FF" })),
+            react_1.default.createElement("g", { filter: "url(#filter8_f_5333_7017)" },
+                react_1.default.createElement("path", { d: "M11.2336 0.436156C11.7673 1.16174 11.0814 2.57221 9.70202 3.58694C8.32243 4.60166 6.77163 4.83598 6.23799 4.11059C5.70435 3.38482 6.39 1.97416 7.76939 0.959622C9.14898 -0.0550994 10.7 -0.289425 11.2334 0.435968L11.2336 0.436156Z", fill: "#749BFF" })),
+            react_1.default.createElement("g", { filter: "url(#filter9_f_5333_7017)" },
+                react_1.default.createElement("path", { d: "M6.85291 3.9097C8.98633 1.93074 9.7185 -0.748558 8.48848 -2.07465C7.25846 -3.40074 4.53169 -2.87181 2.39827 -0.892846C0.264845 1.08612 -0.467518 3.76542 0.762693 5.09151C1.99272 6.41759 4.71949 5.88867 6.85291 3.9097Z", fill: "#FC413D" })),
+            react_1.default.createElement("g", { filter: "url(#filter10_f_5333_7017)" },
+                react_1.default.createElement("path", { d: "M2.47959 11.0173C3.74766 11.9248 5.20334 12.0627 5.73114 11.3254C6.25894 10.588 5.65881 9.25455 4.39074 8.34701C3.12285 7.43947 1.66698 7.30159 1.13937 8.03885C0.611574 8.77629 1.21152 10.1097 2.47959 11.0173Z", fill: "#FFEE48" })))),
+    react_1.default.createElement("defs", null,
+        react_1.default.createElement("filter", { id: "filter0_f_5333_7017", x: "-2.85766", y: "3.3534", width: "7.39819", height: "8.14086", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
+            react_1.default.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }),
+            react_1.default.createElement("feGaussianBlur", { stdDeviation: "0.463378", result: "effect1_foregroundBlur_5333_7017" })),
+        react_1.default.createElement("filter", { id: "filter1_f_5333_7017", x: "-1.94918", y: "-6.7065", width: "15.9862", height: "16.1406", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
+            react_1.default.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }),
+            react_1.default.createElement("feGaussianBlur", { stdDeviation: "2.23985", result: "effect1_foregroundBlur_5333_7017" })),
+        react_1.default.createElement("filter", { id: "filter2_f_5333_7017", x: "-3.03712", y: "3.12285", width: "14.9666", height: "17.1257", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
+            react_1.default.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }),
+            react_1.default.createElement("feGaussianBlur", { stdDeviation: "1.90418", result: "effect1_foregroundBlur_5333_7017" })),
+        react_1.default.createElement("filter", { id: "filter3_f_5333_7017", x: "-3.03712", y: "3.12285", width: "14.9666", height: "17.1257", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
+            react_1.default.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }),
+            react_1.default.createElement("feGaussianBlur", { stdDeviation: "1.90418", result: "effect1_foregroundBlur_5333_7017" })),
+        react_1.default.createElement("filter", { id: "filter4_f_5333_7017", x: "-2.86183", y: "3.78807", width: "15.0188", height: "15.3529", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
+            react_1.default.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }),
+            react_1.default.createElement("feGaussianBlur", { stdDeviation: "1.90418", result: "effect1_foregroundBlur_5333_7017" })),
+        react_1.default.createElement("filter", { id: "filter5_f_5333_7017", x: "6.49612", y: "-1.29935", width: "14.1491", height: "13.8932", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
+            react_1.default.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }),
+            react_1.default.createElement("feGaussianBlur", { stdDeviation: "1.80943", result: "effect1_foregroundBlur_5333_7017" })),
+        react_1.default.createElement("filter", { id: "filter6_f_5333_7017", x: "-6.39114", y: "-2.1852", width: "14.7181", height: "14.8353", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
+            react_1.default.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }),
+            react_1.default.createElement("feGaussianBlur", { stdDeviation: "1.6399", result: "effect1_foregroundBlur_5333_7017" })),
+        react_1.default.createElement("filter", { id: "filter7_f_5333_7017", x: "2.40345", y: "-0.247677", width: "14.8579", height: "14.606", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
+            react_1.default.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }),
+            react_1.default.createElement("feGaussianBlur", { stdDeviation: "1.46454", result: "effect1_foregroundBlur_5333_7017" })),
+        react_1.default.createElement("filter", { id: "filter8_f_5333_7017", x: "3.43598", y: "-2.60638", width: "10.5997", height: "9.75933", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
+            react_1.default.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }),
+            react_1.default.createElement("feGaussianBlur", { stdDeviation: "1.31045", result: "effect1_foregroundBlur_5333_7017" })),
+        react_1.default.createElement("filter", { id: "filter9_f_5333_7017", x: "-2.04789", y: "-5.01896", width: "13.3468", height: "13.0548", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
+            react_1.default.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }),
+            react_1.default.createElement("feGaussianBlur", { stdDeviation: "1.10683", result: "effect1_foregroundBlur_5333_7017" })),
+        react_1.default.createElement("filter", { id: "filter10_f_5333_7017", x: "-1.7922", y: "4.82486", width: "10.455", height: "9.71453", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
+            react_1.default.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }),
+            react_1.default.createElement("feGaussianBlur", { stdDeviation: "1.36998", result: "effect1_foregroundBlur_5333_7017" })),
+        react_1.default.createElement("linearGradient", { id: "paint0_linear_5333_7017", x1: "4.35148", y1: "9.05502", x2: "10.7005", y2: "3.70245", gradientUnits: "userSpaceOnUse" },
+            react_1.default.createElement("stop", { stopColor: "#4893FC" }),
+            react_1.default.createElement("stop", { offset: "0.27", stopColor: "#4893FC" }),
+            react_1.default.createElement("stop", { offset: "0.777", stopColor: "#969DFF" }),
+            react_1.default.createElement("stop", { offset: "1", stopColor: "#BD99FE" })),
+        react_1.default.createElement("clipPath", { id: "clip0_5333_7017" },
+            react_1.default.createElement("rect", { width: "14", height: "14", fill: "white" })))));
+exports.GeminiIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/GeminiIcon/GeminiIcon',
+})) `
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=GeminiIcon.js.map

package/lib/index.d.ts

@@ -266,6 +266,9 @@ export * from './icons/RabbitMQIcon/RabbitMQIcon';
 export * from './icons/CurveAutoColonIcon/CurveAutoColonIcon';
 export * from './icons/AiStarsIcon/AiStarsIcon';
 export * from './icons/AiStarsGradientIcon/AiStarsGradientIcon';
+export * from './icons/BotIcon/BotIcon';
+export * from './icons/AnthropicIcon/AnthropicIcon';
+export * from './icons/GeminiIcon/GeminiIcon';
 export * from './icons/RedoclyIcon/RedoclyIcon';
 export * from './icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon';
 export * from './icons/GenericIcon/GenericIcon';

package/lib/index.js

@@ -329,6 +329,9 @@ __exportStar(require("./icons/RabbitMQIcon/RabbitMQIcon"), exports);
 __exportStar(require("./icons/CurveAutoColonIcon/CurveAutoColonIcon"), exports);
 __exportStar(require("./icons/AiStarsIcon/AiStarsIcon"), exports);
 __exportStar(require("./icons/AiStarsGradientIcon/AiStarsGradientIcon"), exports);
+__exportStar(require("./icons/BotIcon/BotIcon"), exports);
+__exportStar(require("./icons/AnthropicIcon/AnthropicIcon"), exports);
+__exportStar(require("./icons/GeminiIcon/GeminiIcon"), exports);
 __exportStar(require("./icons/RedoclyIcon/RedoclyIcon"), exports);
 __exportStar(require("./icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon"), exports);
 __exportStar(require("./icons/GenericIcon/GenericIcon"), exports);

package/lib/layouts/PageLayout.js

@@ -16,7 +16,7 @@ function PageLayout({ sidebar, children, }) {
 const Container = styled_components_1.default.div `
   display: flex;
   flex-direction: row;
-  min-height: calc(100vh - var(--navbar-height));
+  min-height: calc(100vh - var(--navbar-height) - var(--banner-height));
 
   @media screen and (min-width: ${utils_1.breakpoints.max}) {
     max-width: var(--container-max-width);

package/lib/markdoc/components/MarkdownLink/MarkdownLink.js

@@ -53,8 +53,8 @@ function MarkdownLink(_a) {
     const markdownLinkContext = (0, react_1.useContext)(contexts_1.MarkdownLinkContext);
     const onClick = (0, react_1.useCallback)(() => {
         var _a;
-        (_a = markdownLinkContext === null || markdownLinkContext === void 0 ? void 0 : markdownLinkContext.onMarkdownLinkClick) === null || _a === void 0 ? void 0 : _a.call(markdownLinkContext);
-    }, [markdownLinkContext]);
+        (_a = markdownLinkContext === null || markdownLinkContext === void 0 ? void 0 : markdownLinkContext.onMarkdownLinkClick) === null || _a === void 0 ? void 0 : _a.call(markdownLinkContext, href);
+    }, [markdownLinkContext, href]);
     const linkProps = Object.assign(Object.assign({}, props), { languageInsensitive: true, onClick });
     return react_1.default.createElement(Link_1.Link, Object.assign({ to: href }, linkProps));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.64.0-next.5",
+  "version": "0.64.0-next.6",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -63,7 +63,7 @@
     "vitest": "4.0.10",
     "vitest-when": "0.6.2",
     "webpack": "5.105.2",
-    "@redocly/realm-asyncapi-sdk": "0.10.0-next.2"
+    "@redocly/realm-asyncapi-sdk": "0.10.0-next.3"
   },
   "dependencies": {
     "@tanstack/react-query": "5.62.3",
@@ -81,7 +81,7 @@
     "openapi-sampler": "^1.7.2",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.47.0"
+    "@redocly/config": "0.48.0"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Banner/Banner.tsx

@@ -1,23 +1,35 @@
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState, useMemo } from 'react';
 import styled, { css } from 'styled-components';
 
 import type { ResolvedBannerConfig } from '@redocly/config';
 import type { JSX } from 'react';
 
-import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { useThemeHooks, useBannerTelemetry } from '@redocly/theme/core/hooks';
 import { getNavbarElement } from '@redocly/theme/core/utils';
+import { MarkdownLinkContext } from '@redocly/theme/core/contexts';
 import { Markdown } from '@redocly/theme/components/Markdown/Markdown';
 import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
 import { Button } from '@redocly/theme/components/Button/Button';
 
 const ANIMATION_DURATION = 0.4;
 
-type BannerColor = 'info' | 'success' | 'warning' | 'error';
-
 type BannerProps = {
   className?: string;
 };
 
+export type DisplayBanner = ResolvedBannerConfig & {
+  color: NonNullable<ResolvedBannerConfig['color']>;
+  dismissible: NonNullable<ResolvedBannerConfig['dismissible']>;
+};
+
+function toDisplayBanner(banner: ResolvedBannerConfig): DisplayBanner {
+  return {
+    ...banner,
+    color: banner.color ?? 'info',
+    dismissible: banner.dismissible ?? false,
+  };
+}
+
 function setBannerHeight(height: number): void {
   document.documentElement.style.setProperty('--banner-height', `${height}px`);
 }
@@ -25,15 +37,18 @@ function setBannerHeight(height: number): void {
 export function Banner({ className }: BannerProps): JSX.Element | null {
   const { useBanner, useMarkdocRenderer } = useThemeHooks();
   const { banner, dismissBanner } = useBanner();
-  const [displayBanner, setDisplayBanner] = useState<ResolvedBannerConfig | undefined>(undefined);
+  const [displayBanner, setDisplayBanner] = useState<DisplayBanner | undefined>(undefined);
   const [isVisible, setIsVisible] = useState(false);
 
+  const { sendBannerViewedMessage, sendBannerDismissedMessage, sendBannerLinkClickedMessage } =
+    useBannerTelemetry(displayBanner);
+
   const markdownContent = useMarkdocRenderer(displayBanner?.ast);
   const bannerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (banner) {
-      setDisplayBanner(banner);
+      setDisplayBanner(toDisplayBanner(banner));
       requestAnimationFrame(() => {
         requestAnimationFrame(() => {
           setIsVisible(true);
@@ -98,29 +113,45 @@ export function Banner({ className }: BannerProps): JSX.Element | null {
     };
   }, [displayBanner, isVisible]);
 
+  useEffect(() => {
+    if (isVisible) {
+      sendBannerViewedMessage();
+    }
+  }, [isVisible, sendBannerViewedMessage]);
+
+  const markdownLinkContextValue = useMemo(
+    () => ({
+      onMarkdownLinkClick: sendBannerLinkClickedMessage,
+    }),
+    [sendBannerLinkClickedMessage],
+  );
+
   if (!displayBanner) {
     return null;
   }
 
-  const bannerColor = displayBanner.color || 'info';
-
   return (
     <BannerWrapper
       ref={bannerRef}
       data-component-name="Banner/Banner"
       className={className}
-      $color={bannerColor}
+      $color={displayBanner.color}
       $isVisible={isVisible}
     >
       <BannerContent>
-        <Markdown compact>{markdownContent}</Markdown>
+        <MarkdownLinkContext.Provider value={markdownLinkContextValue}>
+          <Markdown compact>{markdownContent}</Markdown>
+        </MarkdownLinkContext.Provider>
       </BannerContent>
       {displayBanner.dismissible && (
         <DismissButton
           variant="ghost"
           size="var(--banner-button-size)"
-          icon={<CloseIcon color={`var(--banner-${bannerColor}-icon-color)`} size="16px" />}
-          onClick={() => dismissBanner(displayBanner.hash)}
+          icon={<CloseIcon color={`var(--banner-${displayBanner.color}-icon-color)`} size="16px" />}
+          onClick={() => {
+            dismissBanner(displayBanner.hash);
+            sendBannerDismissedMessage();
+          }}
           aria-label="Dismiss banner"
         />
       )}
@@ -162,7 +193,7 @@ const BannerContent = styled.div`
   }
 `;
 
-const BannerWrapper = styled.div<{ $color?: BannerColor; $isVisible?: boolean }>`
+const BannerWrapper = styled.div<{ $color?: DisplayBanner['color']; $isVisible?: boolean }>`
   display: flex;
   align-items: center;
   justify-content: space-between;

package/src/components/Sidebar/Sidebar.tsx

@@ -88,8 +88,8 @@ const SidebarContent = styled.aside<{ opened?: boolean; collapsed?: boolean }>`
   flex-direction: column;
   width: 100%;
   -webkit-font-smoothing: antialiased;
-  top: var(--navbar-height);
-  height: calc(100vh - var(--navbar-height));
+  top: calc(var(--navbar-height) + var(--banner-height));
+  height: calc(100vh - var(--navbar-height) - var(--banner-height));
   overflow-x: hidden;
   ${({ opened }) => `
     display: ${opened ? 'flex' : 'none'}

package/src/core/contexts/MarkdownLinkContext.tsx

@@ -1,6 +1,6 @@
 import { createContext } from 'react';
 
-export type MarkdownLinkClickHandler = () => void;
+export type MarkdownLinkClickHandler = (href: string) => void;
 
 export type MarkdownLinkContextValue = {
   onMarkdownLinkClick?: MarkdownLinkClickHandler;

package/src/core/hooks/index.ts

@@ -53,3 +53,4 @@ export * from './use-store';
 export * from './use-is-truncated';
 export * from './use-toast';
 export * from './use-toast-logic';
+export * from './use-banner-telemetry';

package/src/core/hooks/use-banner-telemetry.ts

@@ -0,0 +1,66 @@
+import { useMemo } from 'react';
+
+import type { DisplayBanner } from '@redocly/theme/components/Banner/Banner';
+
+import { useThemeHooks } from './use-theme-hooks';
+
+const noop = (): void => {};
+const noopLink = (_href: string): void => {};
+
+export type BannerTelemetryActions = {
+  sendBannerViewedMessage: () => void;
+  sendBannerDismissedMessage: () => void;
+  sendBannerLinkClickedMessage: (href: string) => void;
+};
+
+function getCurrentPageUri(): string {
+  return window.location.href;
+}
+
+export function useBannerTelemetry(
+  displayBanner: DisplayBanner | undefined,
+): BannerTelemetryActions {
+  const { useTelemetry } = useThemeHooks();
+  const telemetry = useTelemetry();
+
+  return useMemo(() => {
+    if (!displayBanner) {
+      return {
+        sendBannerViewedMessage: noop,
+        sendBannerDismissedMessage: noop,
+        sendBannerLinkClickedMessage: noopLink,
+      };
+    }
+
+    const bannerUri = 'urn:redocly:realm:ui:banner:banner-id';
+    const payload = {
+      id: 'banner-id' as const,
+      object: 'banner' as const,
+      uri: bannerUri,
+      trackingId: displayBanner.trackingId,
+      hash: displayBanner.hash,
+      color: displayBanner.color,
+      target: displayBanner.target,
+      dismissible: displayBanner.dismissible,
+    };
+
+    return {
+      sendBannerViewedMessage: () => {
+        const pageUri = getCurrentPageUri();
+        const page = { id: pageUri, object: 'page' as const, uri: pageUri };
+        telemetry.sendBannerViewedMessage([payload, page]);
+      },
+      sendBannerDismissedMessage: () => {
+        const pageUri = getCurrentPageUri();
+        const page = { id: pageUri, object: 'page' as const, uri: pageUri };
+        const { dismissible: _, ...dismissedPayload } = payload;
+        telemetry.sendBannerDismissedMessage([dismissedPayload, page]);
+      },
+      sendBannerLinkClickedMessage: (href: string) => {
+        const pageUri = getCurrentPageUri();
+        const page = { id: pageUri, object: 'page' as const, uri: pageUri };
+        telemetry.sendBannerLinkClickedMessage([{ ...payload, href }, page]);
+      },
+    };
+  }, [displayBanner, telemetry]);
+}

package/src/core/hooks/use-telemetry-fallback.ts

@@ -70,4 +70,7 @@ export const useTelemetryFallback = () => ({
   sendGraphqlDocsReferencedInLinkClickedMessage: () => {},
   sendGraphqlDocsRequiredScopesModalOpenedMessage: () => {},
   sendGraphqlDocsDownloadDefinitionClickedMessage: () => {},
+  sendBannerViewedMessage: () => {},
+  sendBannerLinkClickedMessage: () => {},
+  sendBannerDismissedMessage: () => {},
 });

package/src/icons/AnthropicIcon/AnthropicIcon.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <g transform="translate(2.15065 3.876255)">
+      <path
+        d="M8.43781 0.000244141H6.64874L9.90967 8.24774H11.6987L8.43781 0.000244141ZM3.26092 0.000244141L-7.62939e-06 8.24774H1.82713L2.49962 6.52211H5.91281L6.57261 8.24774H8.39975L5.13881 0.000244141H3.26092ZM3.08329 4.9868L4.19987 2.09384L5.31645 4.9868H3.08329Z"
+        fill="currentColor"
+      />
+    </g>
+  </svg>
+);
+
+export const AnthropicIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/AnthropicIcon/AnthropicIcon',
+}))<IconProps>`
+  color: ${({ color }) => getCssColorVariable(color)};
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/BotIcon/BotIcon.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 10.5 12.25" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M7 3.5H6.125V4.375H7V3.5Z" fill="currentColor" />
+    <path d="M4.375 3.5H3.5V4.375H4.375V3.5Z" fill="currentColor" />
+    <path
+      d="M9.625 7.875H7.4375V7H7.875C8.10698 6.99973 8.32939 6.90746 8.49342 6.74342C8.65746 6.57939 8.74973 6.35698 8.75 6.125V4.375H9.625V3.5H8.75V2.625C8.74973 2.39302 8.65746 2.17061 8.49342 2.00658C8.32939 1.84254 8.10698 1.75027 7.875 1.75H7V0H6.125V1.75H4.375V0H3.5V1.75H2.625C2.39302 1.75027 2.17061 1.84254 2.00658 2.00658C1.84254 2.17061 1.75027 2.39302 1.75 2.625V3.5H0.875V4.375H1.75V6.125C1.75027 6.35698 1.84254 6.57939 2.00658 6.74342C2.17061 6.90746 2.39302 6.99973 2.625 7H3.0625V7.875H0.875C0.643017 7.87527 0.420612 7.96754 0.256576 8.13158C0.092539 8.29561 0.000266321 8.51802 0 8.75V12.25H0.875V8.75H9.625V12.25H10.5V8.75C10.4997 8.51802 10.4075 8.29561 10.2434 8.13158C10.0794 7.96754 9.85698 7.87527 9.625 7.875ZM2.625 2.625H7.875V6.125H2.625V2.625ZM3.9375 7H6.5625V7.875H3.9375V7Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const BotIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/BotIcon/BotIcon',
+}))<IconProps>`
+  color: ${({ color }) => getCssColorVariable(color)};
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/GeminiIcon/GeminiIcon.tsx

@@ -0,0 +1,265 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <g clipPath="url(#clip0_5333_7017)">
+      <mask
+        id="mask0_5333_7017"
+        style={{ maskType: 'alpha' }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="14"
+        height="14"
+      >
+        <path
+          d="M6.98858 0.876221C7.11667 0.876221 7.22837 0.96381 7.25964 1.08813C7.3552 1.46837 7.48112 1.84033 7.63618 2.20043C8.04154 3.14225 8.59778 3.96654 9.30396 4.67271C10.0105 5.37908 10.8346 5.93532 11.7763 6.34069C12.1364 6.4957 12.5085 6.62162 12.8887 6.71723C13.0131 6.7485 13.1005 6.86001 13.1005 6.9881C13.1005 7.11618 13.0131 7.22788 12.8885 7.25915C12.5083 7.35471 12.1363 7.48063 11.7763 7.63569C10.8344 8.04106 10.0103 8.5973 9.30396 9.30348C8.59778 10.01 8.04154 10.8341 7.63618 11.7758C7.48109 12.1359 7.35511 12.508 7.25945 12.8882C7.24431 12.9487 7.20945 13.0023 7.16038 13.0406C7.11132 13.079 7.05086 13.0999 6.98858 13.1C6.8605 13.1 6.74898 13.0126 6.71772 12.8881C6.62209 12.5078 6.49611 12.1359 6.34099 11.7758C5.93581 10.8339 5.37976 10.0098 4.6732 9.30348C3.96684 8.5973 3.14274 8.04106 2.20091 7.63569C1.8408 7.48062 1.46885 7.35464 1.08862 7.25896C1.02821 7.24387 0.974561 7.20905 0.936177 7.16002C0.897792 7.11099 0.876864 7.05055 0.876709 6.98828C0.876709 6.8602 0.964299 6.74868 1.08862 6.71742C1.46887 6.6218 1.84082 6.49582 2.20091 6.34069C3.14274 5.93551 3.96702 5.37927 4.6732 4.6729C5.37957 3.96672 5.93581 3.14244 6.34117 2.20061C6.49619 1.8405 6.62211 1.46854 6.71772 1.08832C6.73278 1.02784 6.76762 0.97413 6.81669 0.935705C6.86576 0.89728 6.92626 0.876345 6.98858 0.876221Z"
+          fill="black"
+        />
+        <path
+          d="M6.98858 0.876221C7.11667 0.876221 7.22837 0.96381 7.25964 1.08813C7.3552 1.46837 7.48112 1.84033 7.63618 2.20043C8.04154 3.14225 8.59778 3.96654 9.30396 4.67271C10.0105 5.37908 10.8346 5.93532 11.7763 6.34069C12.1364 6.4957 12.5085 6.62162 12.8887 6.71723C13.0131 6.7485 13.1005 6.86001 13.1005 6.9881C13.1005 7.11618 13.0131 7.22788 12.8885 7.25915C12.5083 7.35471 12.1363 7.48063 11.7763 7.63569C10.8344 8.04106 10.0103 8.5973 9.30396 9.30348C8.59778 10.01 8.04154 10.8341 7.63618 11.7758C7.48109 12.1359 7.35511 12.508 7.25945 12.8882C7.24431 12.9487 7.20945 13.0023 7.16038 13.0406C7.11132 13.079 7.05086 13.0999 6.98858 13.1C6.8605 13.1 6.74898 13.0126 6.71772 12.8881C6.62209 12.5078 6.49611 12.1359 6.34099 11.7758C5.93581 10.8339 5.37976 10.0098 4.6732 9.30348C3.96684 8.5973 3.14274 8.04106 2.20091 7.63569C1.8408 7.48062 1.46885 7.35464 1.08862 7.25896C1.02821 7.24387 0.974561 7.20905 0.936177 7.16002C0.897792 7.11099 0.876864 7.05055 0.876709 6.98828C0.876709 6.8602 0.964299 6.74868 1.08862 6.71742C1.46887 6.6218 1.84082 6.49582 2.20091 6.34069C3.14274 5.93551 3.96702 5.37927 4.6732 4.6729C5.37957 3.96672 5.93581 3.14244 6.34117 2.20061C6.49619 1.8405 6.62211 1.46854 6.71772 1.08832C6.73278 1.02784 6.76762 0.97413 6.81669 0.935705C6.86576 0.89728 6.92626 0.876345 6.98858 0.876221Z"
+          fill="url(#paint0_linear_5333_7017)"
+        />
+      </mask>
+      <g mask="url(#mask0_5333_7017)">
+        <g filter="url(#filter0_f_5333_7017)">
+          <path
+            d="M-0.227015 10.4326C1.18534 10.9342 2.80867 9.99369 3.39882 8.33193C3.98897 6.67037 3.32234 4.91669 1.90998 4.41507C0.497625 3.91346 -1.1257 4.85396 -1.71604 6.51553C-2.306 8.17729 -1.63937 9.93096 -0.227015 10.4326Z"
+            fill="#FFE432"
+          />
+        </g>
+        <g filter="url(#filter1_f_5333_7017)">
+          <path
+            d="M6.04409 4.95442C7.98425 4.95442 9.55728 3.34672 9.55728 1.3638C9.55728 -0.619301 7.98443 -2.22681 6.04409 -2.22681C4.10374 -2.22681 2.53052 -0.619113 2.53052 1.3638C2.53052 3.34672 4.10355 4.95442 6.04409 4.95442Z"
+            fill="#FC413D"
+          />
+        </g>
+        <g filter="url(#filter2_f_5333_7017)">
+          <path
+            d="M4.67843 16.4367C6.70392 16.3378 8.24192 14.1304 8.11364 11.5065C7.98556 8.88254 6.23941 6.83558 4.21393 6.93466C2.18844 7.03374 0.650439 9.241 0.778715 11.8649C0.906992 14.4888 2.65295 16.5358 4.67843 16.4367Z"
+            fill="#00B95C"
+          />
+        </g>
+        <g filter="url(#filter3_f_5333_7017)">
+          <path
+            d="M4.67843 16.4367C6.70392 16.3378 8.24192 14.1304 8.11364 11.5065C7.98556 8.88254 6.23941 6.83558 4.21393 6.93466C2.18844 7.03374 0.650439 9.241 0.778715 11.8649C0.906992 14.4888 2.65295 16.5358 4.67843 16.4367Z"
+            fill="#00B95C"
+          />
+        </g>
+        <g filter="url(#filter4_f_5333_7017)">
+          <path
+            d="M6.70714 14.8494C8.40506 13.8162 8.85958 11.4634 7.72223 9.59402C6.58489 7.7245 4.28627 7.04658 2.58816 8.07957C0.890051 9.11294 0.435527 11.4658 1.57287 13.3353C2.7106 15.2047 5.00903 15.8826 6.70714 14.8494Z"
+            fill="#00B95C"
+          />
+        </g>
+        <g filter="url(#filter5_f_5333_7017)">
+          <path
+            d="M13.5707 8.97502C15.4792 8.97502 17.0265 7.48505 17.0265 5.64736C17.0265 3.80949 15.4792 2.31952 13.5707 2.31952C11.6622 2.31952 10.115 3.80949 10.115 5.64736C10.115 7.48524 11.6622 8.97502 13.5707 8.97502Z"
+            fill="#3186FF"
+          />
+        </g>
+        <g filter="url(#filter6_f_5333_7017)">
+          <path
+            d="M-1.5844 8.58873C0.17304 9.92499 2.74027 9.50587 4.1498 7.65218C5.55933 5.79867 5.27754 3.2126 3.5201 1.87634C1.76265 0.539895 -0.804385 0.959007 -2.21411 2.81271C-3.62364 4.66622 -3.34166 7.25247 -1.5844 8.58873Z"
+            fill="#FBBC04"
+          />
+        </g>
+        <g filter="url(#filter7_f_5333_7017)">
+          <path
+            d="M7.42033 10.5639C9.51777 12.006 12.2982 11.6044 13.6303 9.66653C14.9626 7.72883 14.3422 4.98906 12.2445 3.54694C10.1469 2.10444 7.36664 2.50641 6.03434 4.44393C4.70222 6.38183 5.32251 9.12159 7.42014 10.5639H7.42033Z"
+            fill="#3186FF"
+          />
+        </g>
+        <g filter="url(#filter8_f_5333_7017)">
+          <path
+            d="M11.2336 0.436156C11.7673 1.16174 11.0814 2.57221 9.70202 3.58694C8.32243 4.60166 6.77163 4.83598 6.23799 4.11059C5.70435 3.38482 6.39 1.97416 7.76939 0.959622C9.14898 -0.0550994 10.7 -0.289425 11.2334 0.435968L11.2336 0.436156Z"
+            fill="#749BFF"
+          />
+        </g>
+        <g filter="url(#filter9_f_5333_7017)">
+          <path
+            d="M6.85291 3.9097C8.98633 1.93074 9.7185 -0.748558 8.48848 -2.07465C7.25846 -3.40074 4.53169 -2.87181 2.39827 -0.892846C0.264845 1.08612 -0.467518 3.76542 0.762693 5.09151C1.99272 6.41759 4.71949 5.88867 6.85291 3.9097Z"
+            fill="#FC413D"
+          />
+        </g>
+        <g filter="url(#filter10_f_5333_7017)">
+          <path
+            d="M2.47959 11.0173C3.74766 11.9248 5.20334 12.0627 5.73114 11.3254C6.25894 10.588 5.65881 9.25455 4.39074 8.34701C3.12285 7.43947 1.66698 7.30159 1.13937 8.03885C0.611574 8.77629 1.21152 10.1097 2.47959 11.0173Z"
+            fill="#FFEE48"
+          />
+        </g>
+      </g>
+    </g>
+    <defs>
+      <filter
+        id="filter0_f_5333_7017"
+        x="-2.85766"
+        y="3.3534"
+        width="7.39819"
+        height="8.14086"
+        filterUnits="userSpaceOnUse"
+        colorInterpolationFilters="sRGB"
+      >
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+        <feGaussianBlur stdDeviation="0.463378" result="effect1_foregroundBlur_5333_7017" />
+      </filter>
+      <filter
+        id="filter1_f_5333_7017"
+        x="-1.94918"
+        y="-6.7065"
+        width="15.9862"
+        height="16.1406"
+        filterUnits="userSpaceOnUse"
+        colorInterpolationFilters="sRGB"
+      >
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+        <feGaussianBlur stdDeviation="2.23985" result="effect1_foregroundBlur_5333_7017" />
+      </filter>
+      <filter
+        id="filter2_f_5333_7017"
+        x="-3.03712"
+        y="3.12285"
+        width="14.9666"
+        height="17.1257"
+        filterUnits="userSpaceOnUse"
+        colorInterpolationFilters="sRGB"
+      >
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+        <feGaussianBlur stdDeviation="1.90418" result="effect1_foregroundBlur_5333_7017" />
+      </filter>
+      <filter
+        id="filter3_f_5333_7017"
+        x="-3.03712"
+        y="3.12285"
+        width="14.9666"
+        height="17.1257"
+        filterUnits="userSpaceOnUse"
+        colorInterpolationFilters="sRGB"
+      >
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+        <feGaussianBlur stdDeviation="1.90418" result="effect1_foregroundBlur_5333_7017" />
+      </filter>
+      <filter
+        id="filter4_f_5333_7017"
+        x="-2.86183"
+        y="3.78807"
+        width="15.0188"
+        height="15.3529"
+        filterUnits="userSpaceOnUse"
+        colorInterpolationFilters="sRGB"
+      >
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+        <feGaussianBlur stdDeviation="1.90418" result="effect1_foregroundBlur_5333_7017" />
+      </filter>
+      <filter
+        id="filter5_f_5333_7017"
+        x="6.49612"
+        y="-1.29935"
+        width="14.1491"
+        height="13.8932"
+        filterUnits="userSpaceOnUse"
+        colorInterpolationFilters="sRGB"
+      >
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+        <feGaussianBlur stdDeviation="1.80943" result="effect1_foregroundBlur_5333_7017" />
+      </filter>
+      <filter
+        id="filter6_f_5333_7017"
+        x="-6.39114"
+        y="-2.1852"
+        width="14.7181"
+        height="14.8353"
+        filterUnits="userSpaceOnUse"
+        colorInterpolationFilters="sRGB"
+      >
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+        <feGaussianBlur stdDeviation="1.6399" result="effect1_foregroundBlur_5333_7017" />
+      </filter>
+      <filter
+        id="filter7_f_5333_7017"
+        x="2.40345"
+        y="-0.247677"
+        width="14.8579"
+        height="14.606"
+        filterUnits="userSpaceOnUse"
+        colorInterpolationFilters="sRGB"
+      >
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+        <feGaussianBlur stdDeviation="1.46454" result="effect1_foregroundBlur_5333_7017" />
+      </filter>
+      <filter
+        id="filter8_f_5333_7017"
+        x="3.43598"
+        y="-2.60638"
+        width="10.5997"
+        height="9.75933"
+        filterUnits="userSpaceOnUse"
+        colorInterpolationFilters="sRGB"
+      >
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+        <feGaussianBlur stdDeviation="1.31045" result="effect1_foregroundBlur_5333_7017" />
+      </filter>
+      <filter
+        id="filter9_f_5333_7017"
+        x="-2.04789"
+        y="-5.01896"
+        width="13.3468"
+        height="13.0548"
+        filterUnits="userSpaceOnUse"
+        colorInterpolationFilters="sRGB"
+      >
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+        <feGaussianBlur stdDeviation="1.10683" result="effect1_foregroundBlur_5333_7017" />
+      </filter>
+      <filter
+        id="filter10_f_5333_7017"
+        x="-1.7922"
+        y="4.82486"
+        width="10.455"
+        height="9.71453"
+        filterUnits="userSpaceOnUse"
+        colorInterpolationFilters="sRGB"
+      >
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+        <feGaussianBlur stdDeviation="1.36998" result="effect1_foregroundBlur_5333_7017" />
+      </filter>
+      <linearGradient
+        id="paint0_linear_5333_7017"
+        x1="4.35148"
+        y1="9.05502"
+        x2="10.7005"
+        y2="3.70245"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#4893FC" />
+        <stop offset="0.27" stopColor="#4893FC" />
+        <stop offset="0.777" stopColor="#969DFF" />
+        <stop offset="1" stopColor="#BD99FE" />
+      </linearGradient>
+      <clipPath id="clip0_5333_7017">
+        <rect width="14" height="14" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export const GeminiIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/GeminiIcon/GeminiIcon',
+}))<IconProps>`
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/index.ts

@@ -293,6 +293,9 @@ export * from '@redocly/theme/icons/RabbitMQIcon/RabbitMQIcon';
 export * from '@redocly/theme/icons/CurveAutoColonIcon/CurveAutoColonIcon';
 export * from '@redocly/theme/icons/AiStarsIcon/AiStarsIcon';
 export * from '@redocly/theme/icons/AiStarsGradientIcon/AiStarsGradientIcon';
+export * from '@redocly/theme/icons/BotIcon/BotIcon';
+export * from '@redocly/theme/icons/AnthropicIcon/AnthropicIcon';
+export * from '@redocly/theme/icons/GeminiIcon/GeminiIcon';
 export * from '@redocly/theme/icons/RedoclyIcon/RedoclyIcon';
 export * from '@redocly/theme/icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon';
 export * from '@redocly/theme/icons/GenericIcon/GenericIcon';

package/src/layouts/PageLayout.tsx

@@ -27,7 +27,7 @@ export function PageLayout({
 const Container = styled.div`
   display: flex;
   flex-direction: row;
-  min-height: calc(100vh - var(--navbar-height));
+  min-height: calc(100vh - var(--navbar-height) - var(--banner-height));
 
   @media screen and (min-width: ${breakpoints.max}) {
     max-width: var(--container-max-width);

package/src/markdoc/components/MarkdownLink/MarkdownLink.tsx

@@ -12,8 +12,8 @@ type MarkdownLinkProps = Omit<ComponentProps<typeof Link>, 'to' | 'onClick'> & {
 export function MarkdownLink({ href, ...props }: MarkdownLinkProps): ReactElement {
   const markdownLinkContext = useContext(MarkdownLinkContext);
   const onClick = useCallback(() => {
-    markdownLinkContext?.onMarkdownLinkClick?.();
-  }, [markdownLinkContext]);
+    markdownLinkContext?.onMarkdownLinkClick?.(href);
+  }, [markdownLinkContext, href]);
 
   const linkProps = { ...props, languageInsensitive: true, onClick };