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

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/Catalog/CatalogTags.tsx

@@ -48,7 +48,6 @@ export function CatalogTags({
   if (shouldUseVariantWithTooltip) {
     const displayedItems = items.slice(0, itemsToShow);
     const remainingCount = items.length - itemsToShow;
-    const moreLabel = translate('catalog.tags.more', 'more');
 
     return (
       <Tooltip tip={items.join(', ')} placement="bottom" className="catalog">
@@ -71,11 +70,7 @@ export function CatalogTags({
             </Tag>
           ))}
 
-          {remainingCount > 0 && (
-            <MoreTagsButton>
-              + {remainingCount} <span data-translation-key="catalog.tags.more">{moreLabel}</span>
-            </MoreTagsButton>
-          )}
+          {remainingCount > 0 && <MoreTagsButton>+ {remainingCount}</MoreTagsButton>}
         </CatalogTagsWrapper>
       </Tooltip>
     );

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/constants/search.ts

@@ -61,6 +61,10 @@ export const TOOL_CALL_DISPLAY_TEXT: Partial<
     inProgressText: 'Browsing endpoints for API...',
     completedText: 'Browsed endpoints for API',
   },
+  [ToolCallName.GetEndpointInfo]: {
+    inProgressText: 'Reading endpoint details...',
+    completedText: 'Read endpoint details',
+  },
   [ToolCallName.GetSecuritySchemes]: {
     inProgressText: 'Browsing security schemes for API...',
     completedText: 'Browsed security schemes for API',

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/core/types/l10n.ts

@@ -161,7 +161,6 @@ export type TranslationKey =
   | 'catalog.entity.properties.apiDescription.title'
   | 'catalog.backToAllLabel'
   | 'catalog.notConnected'
-  | 'catalog.tags.more'
   | 'catalog.tags.label'
   | 'catalog.sort'
   | 'catalog.catalogs.label'

package/src/core/types/search.ts

@@ -106,10 +106,11 @@ export type SearchAiMessageResource = {
 };
 
 export type ToolCall = {
+  id: string;
   name: string;
   args: unknown;
   position: number;
-  result?: { documentCount: number };
+  result?: { toolCallId: string; documentCount?: number };
 };
 
 export type ContentSegment = { type: 'text'; text: string } | { type: 'tool'; toolCall: ToolCall };
@@ -128,6 +129,7 @@ export enum ToolCallName {
   SearchDocumentation = 'search_documentation',
   ListApis = 'list-apis',
   GetEndpoints = 'get-endpoints',
+  GetEndpointInfo = 'get-endpoint-info',
   GetSecuritySchemes = 'get-security-schemes',
   GetFullApiDescription = 'get-full-api-description',
 }

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