@redocly/theme 0.58.1 → 0.59.0-next.1

package/src/core/hooks/use-tabs.ts

@@ -1,115 +1,59 @@
-import { useCallback, useRef, useState, useEffect } from 'react';
+import { useCallback, useRef, useState, useEffect, useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
 
 type UseTabsProps = {
-  initialTab: string;
+  activeTab: string;
+  onTabChange: (tab: string) => void;
   totalTabs: number;
   containerRef?: React.RefObject<HTMLElement | null>;
 };
 
-export function useTabs({ initialTab, totalTabs, containerRef }: UseTabsProps) {
-  const [activeTab, setActiveTab] = useState(initialTab);
-  const [visibleTabs, setVisibleTabs] = useState<number[]>(
-    Array.from({ length: totalTabs }, (_, i) => i),
-  );
-  const [overflowTabs, setOverflowTabs] = useState<number[]>([]);
-  const [allTabsHidden, setAllTabsHidden] = useState<boolean>(false);
+type Tabs = {
+  visible: number[];
+  overflow: number[];
+};
+
+const MORE_BUTTON_WIDTH = 80;
+const TABS_GAP = 8;
+
+export function useTabs({ activeTab, onTabChange, totalTabs, containerRef }: UseTabsProps) {
+  const [tabs, setTabs] = useState<Tabs>({
+    visible: Array.from({ length: totalTabs }, (_, i) => i),
+    overflow: [],
+  });
+
   const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
+  const tabWidthsRef = useRef<number[]>([]);
   const tabLabelsRef = useRef<string[]>([]);
-  const resizeTimeoutRef = useRef<number | undefined>(undefined);
-  const [ready, setReady] = useState<boolean>(false);
-  const hasCalculatedOnce = useRef(false);
-  const lastWidthRef = useRef<number>(0);
-  const originalOrderRef = useRef<number[]>([]);
 
-  useEffect(() => {
-    originalOrderRef.current = Array.from({ length: totalTabs }, (_, i) => i);
-  }, [totalTabs]);
+  const allTabsHidden = useMemo(() => tabs.visible.length === 0, [tabs.visible]);
 
   const setTabRef = useCallback((element: HTMLButtonElement | null, index: number) => {
     tabRefs.current[index] = element;
-    if (element) {
-      const label = element.getAttribute('data-label');
-      if (label) {
-        tabLabelsRef.current[index] = label;
-      }
+
+    const width = element?.offsetWidth;
+    if (width) {
+      tabWidthsRef.current[index] = width;
     }
-  }, []);
 
-  const getTabId = useCallback((label: string, index: number) => {
-    const cleanLabel = label.replace(/\s+/g, '-').toLowerCase();
-    return `${cleanLabel}-${index}`;
+    const label = element?.getAttribute('data-label');
+    if (label) {
+      tabLabelsRef.current[index] = label;
+    }
   }, []);
 
   const focusTab = (index: number) => {
     const currentElement = tabRefs.current[index];
-    if (currentElement) {
-      currentElement.focus();
-    }
+    currentElement?.focus();
   };
 
-  const onTabSelect = useCallback((index: number) => {
-    focusTab(index);
-    const label = tabRefs.current[index]?.getAttribute('data-label');
-    if (label) setActiveTab(label);
-  }, []);
-
-  const onTabClick = useCallback(
-    (labelOrIndex: string | number) => {
-      let clickedIndex: number;
-
-      if (typeof labelOrIndex === 'string') {
-        clickedIndex = tabRefs.current.findIndex(
-          (ref) => ref?.getAttribute('data-label') === labelOrIndex,
-        );
-        if (clickedIndex === -1) return;
-      } else {
-        clickedIndex = labelOrIndex;
-      }
-
-      if (allTabsHidden) {
-        const label = tabLabelsRef.current[clickedIndex];
-        if (label) {
-          setActiveTab(label);
-          focusTab(clickedIndex);
-        }
-        return;
-      }
-
-      if (overflowTabs.includes(clickedIndex)) {
-        const newVisibleTabs = [...visibleTabs];
-        const newOverflowTabs = [...overflowTabs];
-
-        const clickedIdxInOverflow = newOverflowTabs.indexOf(clickedIndex);
-        if (clickedIdxInOverflow !== -1) {
-          newOverflowTabs.splice(clickedIdxInOverflow, 1);
-        }
-
-        const lastVisible = newVisibleTabs.pop();
-        if (lastVisible !== undefined) {
-          newOverflowTabs.unshift(lastVisible);
-        }
-
-        newVisibleTabs.push(clickedIndex);
-
-        setVisibleTabs(newVisibleTabs);
-        setOverflowTabs(newOverflowTabs);
-
-        requestAnimationFrame(() => {
-          const label = tabRefs.current[clickedIndex]?.getAttribute('data-label');
-          if (label) {
-            setActiveTab(label);
-            focusTab(clickedIndex);
-          }
-        });
-      } else {
-        const label = tabRefs.current[clickedIndex]?.getAttribute('data-label');
-        if (label) {
-          setActiveTab(label);
-          focusTab(clickedIndex);
-        }
-      }
+  const onTabSelect = useCallback(
+    (index: number) => {
+      focusTab(index);
+      const label = tabRefs.current[index]?.getAttribute('data-label');
+      if (label) onTabChange(label);
     },
-    [visibleTabs, overflowTabs, allTabsHidden],
+    [onTabChange],
   );
 
   const handleKeyboard = useCallback(
@@ -133,196 +77,174 @@ export function useTabs({ initialTab, totalTabs, containerRef }: UseTabsProps) {
     [totalTabs, onTabSelect],
   );
 
-  const calculateVisibleTabs = useCallback(() => {
-    const container = containerRef?.current;
-    if (!container) return;
+  const replaceLastVisibleTabWithClickedOverflowTab = useCallback(
+    (clickedIndex: number) => {
+      const { visible: visibleTabs, overflow: overflowTabs } = tabs;
+
+      // Indexes of visible tabs should be sorted(asc), to replace the last visible tab with the clicked tab
+      const newVisibleTabs = [...visibleTabs].sort((a, b) => a - b);
+      const newOverflowTabs = [...overflowTabs];
+
+      const clickedIdxInOverflow = newOverflowTabs.indexOf(clickedIndex);
+      if (clickedIdxInOverflow !== -1) {
+        const lastVisible = newVisibleTabs[newVisibleTabs.length - 1];
+        newOverflowTabs.splice(clickedIdxInOverflow, 1);
+        newOverflowTabs.unshift(lastVisible);
+        newVisibleTabs.splice(newVisibleTabs.length - 1, 1);
+        newVisibleTabs.unshift(clickedIndex);
+      }
 
-    const contentWrapper = container.closest('div');
-    if (!contentWrapper) {
-      setVisibleTabs(Array.from({ length: totalTabs }, (_, i) => i));
-      setOverflowTabs([]);
-      setAllTabsHidden(false);
-      return;
-    }
+      setTabs({
+        visible: newVisibleTabs,
+        overflow: newOverflowTabs,
+      });
+    },
+    [tabs],
+  );
 
-    const containerWidth = container.offsetWidth - 60;
-    const tabElements = container.querySelectorAll('[role="tab"]');
-    const moreButtonWidth = 80;
-    const safetyMargin = 20;
+  const onTabClick = useCallback(
+    (labelOrIndex: string | number) => {
+      const clickedIndex =
+        typeof labelOrIndex === 'string'
+          ? tabRefs.current.findIndex((ref) => ref?.getAttribute('data-label') === labelOrIndex)
+          : labelOrIndex;
+
+      if (clickedIndex === -1) return;
+
+      const hasOverflowTabs = tabs.overflow.length > 0;
+      if (hasOverflowTabs && !allTabsHidden && tabs.overflow.includes(clickedIndex)) {
+        replaceLastVisibleTabWithClickedOverflowTab(clickedIndex);
+      }
 
-    const tabWidths = Array.from(tabElements).map((el) => (el as HTMLElement).offsetWidth);
-    const tabLabels = Array.from(tabElements).map((el) => el.getAttribute('data-label') || '');
-    const tabTypes = Array.from(tabElements).map((el) => el.getAttribute('data-type') || '');
+      const label = tabLabelsRef.current[clickedIndex];
+      if (label) {
+        onTabChange(label);
+        focusTab(clickedIndex);
+      }
+    },
+    [allTabsHidden, tabs.overflow, onTabChange, replaceLastVisibleTabWithClickedOverflowTab],
+  );
 
-    const hasLongLabels = tabLabels.some((label) => label.length > 30);
-    const minVisibleTabs = hasLongLabels ? 1 : 2;
+  const calculateVisibleTabs = useCallback(() => {
+    const container = containerRef?.current;
+    if (!container) return;
 
+    const containerWidth = container.offsetWidth;
+    const tabWidths = tabWidthsRef.current;
     const activeTabIndex = tabRefs.current.findIndex(
       (ref) => ref?.getAttribute('data-label') === activeTab,
     );
 
-    let currentWidth = 0;
-    const visible: number[] = [];
-    const overflow: number[] = [];
+    // Active tab should always be visible, so we include it at the beginning of the array
+    let tabsWidth = activeTabIndex !== -1 ? tabWidths[activeTabIndex] : 0;
+    const visible = activeTabIndex !== -1 ? [activeTabIndex] : [];
+    const overflow = [];
 
-    let minTabsWidth = 0;
-    Array.from({ length: minVisibleTabs }).forEach((_, i) => {
-      if (i < tabWidths.length) {
-        minTabsWidth += tabWidths[i] + (i > 0 ? moreButtonWidth + safetyMargin : 0);
+    for (let i = 0; i < tabWidths.length; i++) {
+      // Skip active tab, it was added initially
+      if (i === activeTabIndex) {
+        continue;
       }
-    });
 
-    if (minTabsWidth > containerWidth) {
-      setVisibleTabs([]);
-      setOverflowTabs(Array.from({ length: totalTabs }, (_, i) => i));
-      setAllTabsHidden(true);
-      return;
-    }
+      const tabWidthWithGap = tabWidths[i] + TABS_GAP;
+      const projectedWidth = tabsWidth + tabWidthWithGap;
 
-    const tabsByType = new Map<string, number[]>();
-    Array.from({ length: totalTabs }).forEach((_, i) => {
-      const type = tabTypes[i] || 'default';
-      if (!tabsByType.has(type)) {
-        tabsByType.set(type, []);
+      if (projectedWidth <= containerWidth) {
+        visible.push(i);
+        tabsWidth += tabWidthWithGap;
+      } else {
+        overflow.push(i);
       }
-      tabsByType.get(type)?.push(i);
-    });
-
-    tabsByType.forEach((tabIndices) => {
-      let typeCurrentWidth = currentWidth;
-      const typeVisible: number[] = [];
-      const typeOverflow: number[] = [];
-
-      tabIndices.slice(0, minVisibleTabs).forEach((tabIndex) => {
-        const tabWidth = tabWidths[tabIndex];
-        const projectedWidth =
-          typeCurrentWidth +
-          tabWidth +
-          (typeVisible.length > 0 ? moreButtonWidth + safetyMargin : 0);
-
-        if (projectedWidth <= containerWidth) {
-          typeVisible.push(tabIndex);
-          typeCurrentWidth += tabWidth;
-        } else {
-          typeOverflow.push(tabIndex);
-        }
-      });
-
-      tabIndices.slice(minVisibleTabs).forEach((tabIndex) => {
-        const tabWidth = tabWidths[tabIndex];
-        const projectedWidth = typeCurrentWidth + tabWidth + moreButtonWidth + safetyMargin;
-
-        if (projectedWidth <= containerWidth) {
-          typeVisible.push(tabIndex);
-          typeCurrentWidth += tabWidth;
-        } else {
-          typeOverflow.push(tabIndex);
-        }
-      });
+    }
 
-      visible.push(...typeVisible);
-      overflow.push(...typeOverflow);
-      currentWidth = typeCurrentWidth;
-    });
+    if (overflow.length > 0) {
+      tabsWidth += MORE_BUTTON_WIDTH;
 
-    if (activeTabIndex !== -1 && !visible.includes(activeTabIndex)) {
-      if (visible.length > 0) {
+      // Remove tabs starting from the end of the array until the width of the visible tabs is less than the container width
+      while (tabsWidth > containerWidth && visible.length) {
         const removed = visible.pop();
         if (removed !== undefined) {
           overflow.unshift(removed);
+          tabsWidth -= tabWidths[removed];
         }
       }
-
-      visible.push(activeTabIndex);
-      const activeOverflowIndex = overflow.indexOf(activeTabIndex);
-      if (activeOverflowIndex !== -1) overflow.splice(activeOverflowIndex, 1);
     }
 
-    setVisibleTabs(visible);
-    setOverflowTabs(overflow);
-    setAllTabsHidden(visible.length === 0);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [containerRef, totalTabs]);
+    setTabs({
+      visible,
+      overflow,
+    });
+  }, [containerRef, activeTab]);
 
   useEffect(() => {
     if (!containerRef?.current) return;
 
-    const ensureTabsReady = () => {
-      const allTabsReady =
-        tabRefs.current.length === totalTabs && tabRefs.current.every((tab) => tab?.offsetWidth);
-
-      if (!allTabsReady) {
-        resizeTimeoutRef.current = requestAnimationFrame(ensureTabsReady);
-        return;
-      }
-
-      calculateVisibleTabs();
-      hasCalculatedOnce.current = true;
-    };
-
-    resizeTimeoutRef.current = requestAnimationFrame(ensureTabsReady);
-
-    let resizeTimeout: number;
+    let resizeTimeout = requestAnimationFrame(calculateVisibleTabs);
     const handleResize = () => {
-      if (!hasCalculatedOnce.current) return;
-
       if (resizeTimeout) {
         cancelAnimationFrame(resizeTimeout);
       }
-
-      resizeTimeout = requestAnimationFrame(() => {
-        if (resizeTimeoutRef.current) {
-          cancelAnimationFrame(resizeTimeoutRef.current);
-        }
-        resizeTimeoutRef.current = requestAnimationFrame(() => {
-          const container = containerRef?.current;
-          if (!container) return;
-
-          const currentWidth = container.offsetWidth;
-
-          if (Math.abs(lastWidthRef.current - currentWidth) > 5) {
-            lastWidthRef.current = currentWidth;
-            calculateVisibleTabs();
-          }
-        });
-      });
+      resizeTimeout = requestAnimationFrame(calculateVisibleTabs);
     };
 
-    const resizeObserver = new ResizeObserver(handleResize);
-    resizeObserver.observe(containerRef.current);
     window.addEventListener('resize', handleResize);
-
     return () => {
-      resizeObserver.disconnect();
       window.removeEventListener('resize', handleResize);
-      if (resizeTimeoutRef.current) {
-        cancelAnimationFrame(resizeTimeoutRef.current);
-      }
-      if (resizeTimeout) {
-        cancelAnimationFrame(resizeTimeout);
-      }
+      cancelAnimationFrame(resizeTimeout);
     };
   }, [containerRef, totalTabs, calculateVisibleTabs]);
 
-  useEffect(() => {
-    const raf = requestAnimationFrame(() => {
-      setReady(true);
-      calculateVisibleTabs();
-    });
-
-    return () => cancelAnimationFrame(raf);
-  }, [calculateVisibleTabs]);
-
   return {
-    activeTab,
-    setActiveTab,
     setTabRef,
     onTabClick,
     handleKeyboard,
-    getTabId,
-    visibleTabs,
-    overflowTabs,
-    ready,
+    visibleTabs: tabs.visible,
+    overflowTabs: tabs.overflow,
     allTabsHidden,
   };
 }
+
+type UseActiveTabProps = {
+  initialTab: string;
+  tabsId?: string;
+};
+
+export const useActiveTab = ({ initialTab, tabsId }: UseActiveTabProps) => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [activeTab, setActiveTab] = useState(getInitialTab({ initialTab, searchParams, tabsId }));
+  const prevActiveTabRef = useRef(activeTab);
+
+  useEffect(() => {
+    const hasActiveTabChanged = prevActiveTabRef.current !== activeTab;
+    if (!tabsId || !hasActiveTabChanged) {
+      return;
+    }
+
+    prevActiveTabRef.current = activeTab;
+
+    setSearchParams((searchParams) => {
+      searchParams.set(tabsId, activeTab);
+      return searchParams;
+    });
+  }, [activeTab, setSearchParams, tabsId]);
+
+  return {
+    activeTab,
+    setActiveTab,
+  };
+};
+
+type GetInitialTabProps = {
+  initialTab: string;
+  searchParams: URLSearchParams;
+  tabsId?: string;
+};
+
+const getInitialTab = ({ initialTab, searchParams, tabsId }: GetInitialTabProps) => {
+  let resultTab = initialTab;
+  if (tabsId) {
+    const tabFromUrl = searchParams.get(tabsId);
+    resultTab = tabFromUrl ? tabFromUrl : resultTab;
+  }
+  return resultTab;
+};

package/src/core/styles/dark.ts

@@ -4,6 +4,7 @@ import { scorecardDarkMode } from '@redocly/theme/components/Scorecard/variables
 import { mermaidDarkMode } from '@redocly/theme/markdoc/components/Mermaid/variables.dark'
 import { menuDarkMode } from '@redocly/theme/components/Menu/variables.dark';
 import { buttonDarkMode } from '@redocly/theme/components/Button/variables.dark';
+import { aiAssistantButtonDarkMode } from '@redocly/theme/components/Buttons/variables.dark';
 import { segmentedButtonsDarkMode } from '@redocly/theme/components/Segmented/variables.dark';
 import { checkboxDarkMode } from '@redocly/theme/icons/CheckboxIcon/variables.dark';
 import { tagDarkMode } from '@redocly/theme/components/Tag/variables.dark';
@@ -137,14 +138,15 @@ export const darkMode = css`
 
   --color-green-1: #1a4d40;
   --color-green-2: #195848;
-  --color-green-3: #0e8450;
-  --color-green-4: #149e53;
-  --color-green-5: #1cb854;
-  --color-green-6: #4dd470;
-  --color-green-7: #72e985;
-  --color-green-8: #a3f7a9;
-  --color-green-9: #d2fbd0;
-  --color-green-10: #edfbec;
+  --color-green-3: #136a4d;
+  --color-green-4: #0e8450;
+  --color-green-5: #149e53;
+  --color-green-6: #1cb854;
+  --color-green-7: #4dd470;
+  --color-green-8: #72e985;
+  --color-green-9: #a3f7a9;
+  --color-green-10: #d2fbd0;
+  --color-green-11: #edfbec;
 
   --color-grass-1: #1f4d2d;
   --color-grass-2: #164f29;
@@ -309,6 +311,7 @@ export const darkMode = css`
 
   ${segmentedButtonsDarkMode}
   ${buttonDarkMode}
+  ${aiAssistantButtonDarkMode}
   ${checkboxDarkMode}
   ${tagDarkMode}
   ${statusCodeDarkMode}

package/src/core/styles/global.ts

@@ -11,6 +11,7 @@ import { catalog } from '@redocly/theme/components/Catalog/variables';
 import { filter } from '@redocly/theme/components/Filter/variables';
 import { catalogClassic } from '@redocly/theme/components/CatalogClassic/variables';
 import { apiReferencePanels, responsePanelColors } from '@redocly/theme/components/Panel/variables';
+import { accordion } from '@redocly/theme/components/Accordion/variables';
 import { select } from '@redocly/theme/components/Select/variables';
 import { dropdown } from '@redocly/theme/components/Dropdown/variables';
 import { tooltip } from '@redocly/theme/components/Tooltip/variables';
@@ -18,6 +19,7 @@ import { checkbox } from '@redocly/theme/icons/CheckboxIcon/variables';
 import { admonition } from '@redocly/theme/components/Admonition/variables';
 import { footer } from '@redocly/theme/components/Footer/variables';
 import { button } from '@redocly/theme/components/Button/variables';
+import { aiAssistantButton } from '@redocly/theme/components/Buttons/variables';
 import { navbar } from '@redocly/theme/components/Navbar/variables';
 import { search } from '@redocly/theme/components/Search/variables';
 import { menu, mobileMenu } from '@redocly/theme/components/Menu/variables';
@@ -141,8 +143,9 @@ const themeColors = css`
   --color-green-6: #1cb854;
   --color-green-7: #149e53;
   --color-green-8: #0e8450;
-  --color-green-9: #195848;
-  --color-green-10: #1a4d40;
+  --color-green-9: #136a4d;
+  --color-green-10: #195848;
+  --color-green-11: #1a4d40;
 
   --color-grass-1: #f0faeb;
   --color-grass-2: #e3fad6;
@@ -1227,6 +1230,7 @@ const replay = css`
 
 export const styles = css`
   :root {
+    ${accordion}
     ${admonition}
     ${apiReferenceDocs}
     ${apiReferencePanels}
@@ -1234,6 +1238,7 @@ export const styles = css`
     ${borders}
     ${breadcrumbs}
     ${button}
+    ${aiAssistantButton}
     ${cards}
     ${catalog}
     ${catalogClassic}

package/src/core/types/l10n.ts

@@ -103,6 +103,7 @@ export type TranslationKey =
   | 'search.ai.error.header'
   | 'search.ai.error.header.forbidden'
   | 'search.ai.error.header.unauthorized'
+  | 'aiAssistant.trigger'
   | 'toc.header'
   | 'footer.copyrightText'
   | 'page.homeButton'

package/src/core/utils/index.ts

@@ -37,3 +37,4 @@ export * from './lang-to-name';
 export * from './enhanced-smoothstep';
 export * from './icon-resolver';
 export * from './dynamic';
+export * from './tabs';

package/src/core/utils/tabs.ts

@@ -0,0 +1,4 @@
+export function getTabId(label: string, index: number) {
+  const cleanLabel = label.replace(/\s+/g, '-').toLowerCase();
+  return `${cleanLabel}-${index}`;
+}

package/src/icons/RedoclyIcon/RedoclyIcon.tsx

@@ -0,0 +1,44 @@
+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
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#clip0_4053_1165)">
+      <path
+        d="M14.625 6.19973C14.625 8.69176 12.6173 10.712 10.1406 10.712H2.8125V10.2717C5.04753 10.2717 6.85938 8.44864 6.85938 6.19973C6.85938 3.95082 5.04753 2.12772 2.8125 2.12772V1.6875H10.1406C12.6173 1.6875 14.625 3.70769 14.625 6.19973Z"
+        fill="#2467F2"
+      />
+      <path
+        d="M14.625 16.875C14.625 14.383 12.6173 12.3628 10.1406 12.3628H2.8125V12.803C5.04753 12.803 6.85938 14.6261 6.85938 16.875H14.625Z"
+        fill="#2467F2"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_4053_1165">
+        <rect width="18" height="18" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export const RedoclyIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/RedoclyIcon/RedoclyIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/index.ts

@@ -32,6 +32,7 @@ export * from '@redocly/theme/components/Buttons/CopyButton';
 export * from '@redocly/theme/components/Buttons/EditPageButton';
 export * from '@redocly/theme/components/Buttons/EmailButton';
 export * from '@redocly/theme/components/Buttons/NewTabButton';
+export * from '@redocly/theme/components/Buttons/AIAssistantButton';
 /* Markdown */
 export * from '@redocly/theme/components/Markdown/Markdown';
 export * from '@redocly/theme/components/Markdown/styles/baseTable';
@@ -282,6 +283,7 @@ 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/RedoclyIcon/RedoclyIcon';
 export * from '@redocly/theme/icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon';
 export * from '@redocly/theme/icons/GenericIcon/GenericIcon';
 export * from '@redocly/theme/icons/ShareIcon/ShareIcon';

package/src/layouts/RootLayout.tsx

@@ -5,18 +5,24 @@ import type { JSX } from 'react';
 import { Navbar } from '@redocly/theme/components/Navbar/Navbar';
 import { Footer } from '@redocly/theme/components/Footer/Footer';
 import { SkipContent } from '@redocly/theme/components/SkipContent/SkipContent';
+import { AIAssistantButton } from '@redocly/theme/components/Buttons/AIAssistantButton';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type LayoutConfig = {
   children: React.ReactNode;
 };
 
 export function RootLayout({ children }: LayoutConfig): JSX.Element {
+  const { useSearch } = useThemeHooks();
+  const { askAi } = useSearch();
+
   return (
     <div data-component-name="layouts/RootLayout">
       <SkipContent />
       <Navbar />
       {children}
       <Footer />
+      {askAi && <AIAssistantButton />}
     </div>
   );
 }

package/src/markdoc/components/Tabs/Tab.tsx

@@ -34,6 +34,7 @@ export function TabComponent({
     <TabItem data-component-name="Markdoc/Tabs/Tab" size={size} tabIndex={0}>
       <TabButtonLink
         id={`tab-${tabId}`}
+        data-label={label}
         role="tab"
         aria-selected="false"
         aria-controls={`panel-${tabId}`}