@redocly/theme 0.61.1 → 0.62.0-custom.0

package/src/components/JsonViewer/JsonViewer.tsx

@@ -5,8 +5,7 @@ import type { JSX } from 'react';
 import type { CodeBlockControlsProps } from '@redocly/theme/components/CodeBlock/CodeBlockControls';
 
 import { CodeBlock } from '@redocly/theme/components/CodeBlock/CodeBlock';
-
-import { JsonValue } from './Helpers';
+import { JsonValue } from '@redocly/theme/components/JsonViewer/helpers';
 
 export type PanelType = 'request' | 'responses' | 'request-samples' | 'response-samples';
 

package/src/components/JsonViewer/{Helpers.tsx → helpers.tsx}

@@ -1,3 +1,4 @@
+/* eslint-disable check-file/filename-naming-convention */
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
 

package/src/components/LanguagePicker/LanguagePicker.tsx

@@ -40,7 +40,7 @@ export function LanguagePicker(props: LanguagePickerProps): JSX.Element | null {
     onAction: () => {
       setLocale(locale.code);
       props.onChangeLanguage(locale.code);
-      telemetry.sendLanguagePickerLocaleChangedMessage({ locale: locale.code });
+      telemetry.sendLanguagePickerLocaleChangedMessage([{ object: 'locale', locale: locale.code }]);
     },
     active: locale.code === currentLocale.code,
     suffix: locale.code === currentLocale.code && <CheckmarkIcon />,

package/src/components/Markdown/Markdown.tsx

@@ -58,7 +58,7 @@ export const Markdown = styled.main.attrs<{
   ${markdownLinksCss}
 
   a[name], [id] {
-    scroll-margin-top: var(--navbar-height);
+    scroll-margin-top: calc(var(--navbar-height) + var(--banner-height));
   }
 
   img,
@@ -76,7 +76,7 @@ export const Markdown = styled.main.attrs<{
     font-family: var(--heading-font-family);
     position: relative;
 
-    scroll-margin-top: var(--navbar-height);
+    scroll-margin-top: calc(var(--navbar-height) + var(--banner-height));
   }
 
   strong {

package/src/components/Menu/MenuItem.tsx

@@ -13,8 +13,8 @@ import { HttpTag } from '@redocly/theme/components/Tags/HttpTag';
 import { MenuItemType } from '@redocly/theme/core/constants';
 import { getMenuItemType, getOperationColor } from '@redocly/theme/core/utils';
 import { ArrowRightIcon } from '@redocly/theme/icons/ArrowRightIcon/ArrowRightIcon';
-import { Badge } from '@redocly/theme/components/Badge/Badge';
 import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';
+import { Tag, ContentWrapper } from '@redocly/theme/components/Tag/Tag';
 
 export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Element {
   const { item, depth, className, onClick } = props;
@@ -37,10 +37,13 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
   const hasHttpTag = !!item.httpVerb || type === MenuItemType.Operation;
 
   const handleOnClick = () => {
-    telemetry.sendSidebarItemClickedMessage({
-      label: item.label,
-      type: item.type === 'link' || item.type === 'group' ? item.type : undefined,
-    });
+    telemetry.sendSidebarItemClickedMessage([
+      {
+        object: 'sidebar_item',
+        label: item.label,
+        type: item.type === 'link' || item.type === 'group' ? item.type : undefined,
+      },
+    ]);
     onClick?.();
     if (isNested) {
       handleExpand();
@@ -92,12 +95,31 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
       <MenuItemIcon icon={item.icon} srcSet={item.srcSet} />
       <MenuItemLabelTextWrapper>
         <MenuItemLabel>
+          {item.badges
+            ?.filter(({ position }) => position === 'before')
+            .map(({ name, color, icon }) => (
+              <SidebarTag
+                color={isDirectColorValue(color) ? undefined : color}
+                $bgColor={isDirectColorValue(color) ? color : undefined}
+                key={name}
+                icon={icon && <BadgeIcon icon={icon} />}
+              >
+                {name}
+              </SidebarTag>
+            ))}
           <span>{translate(item.labelTranslationKey, item.label)}</span>
-          {item.badges?.map(({ name, color }) => (
-            <MenuItemBadge color={color} key={name}>
-              {name}
-            </MenuItemBadge>
-          ))}
+          {item.badges
+            ?.filter(({ position }) => position !== 'before')
+            .map(({ name, color, icon }) => (
+              <SidebarTag
+                color={isDirectColorValue(color) ? undefined : color}
+                $bgColor={isDirectColorValue(color) ? color : undefined}
+                key={name}
+                icon={icon && <BadgeIcon icon={icon} />}
+              >
+                {name}
+              </SidebarTag>
+            ))}
           {item.external ? <LaunchIcon size="var(--menu-item-external-icon-size)" /> : null}
         </MenuItemLabel>
         {item.sublabel ? (
@@ -146,6 +168,12 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
   );
 }
 
+/* for backward compatibility */
+function isDirectColorValue(color?: string) {
+  if (!color) return false;
+  return color.startsWith('#') || color.startsWith('rgb') || color.startsWith('hsl');
+}
+
 function generateClassName({
   type,
   item,
@@ -359,14 +387,31 @@ const MenuItemLabel = styled.span`
   }
 `;
 
-const MenuItemBadge = styled(Badge)<{ color?: string }>`
+const SidebarTag = styled(Tag)<{ $bgColor?: string; icon?: React.ReactNode }>`
+  ${({ $bgColor }) => $bgColor && `background-color: ${$bgColor};`} /* for backward compatibility */
   margin-left: 0;
-  background-color: ${({ color }) => color || 'var(--color-info-base)'};
   font-size: var(--font-size-sm);
   line-height: var(--line-height-sm);
   padding: 0 var(--spacing-xxs);
-  max-width: 80px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
+  max-width: 90px;
+
+  --tag-padding: 0 var(--spacing-xxs);
+  --tag-content-padding: 0;
+  --tag-font-size: var(--font-size-sm);
+  --tag-line-height: var(--line-height-sm);
+  vertical-align: middle;
+
+  ${ContentWrapper} {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    display: block;
+  }
+`;
+
+const BadgeIcon = styled(GenericIcon)`
+  --icon-width: var(--font-size-sm);
+  --icon-height: var(--font-size-sm);
+  margin-right: var(--spacing-xxs);
+  flex-shrink: 0;
 `;

package/src/components/Navbar/NavbarItem.tsx

@@ -47,7 +47,9 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
       as={item.link ? Link : undefined}
       active={isActive}
       className={className}
-      onClick={() => telemetry.sendNavbarMenuItemClickedMessage({ type: item.type })}
+      onClick={() =>
+        telemetry.sendNavbarMenuItemClickedMessage([{ object: 'menu_item', type: item.type }])
+      }
       external={item.external}
       target={item.target}
       to={item.link}

package/src/components/OpenApiDocs/hooks/AdditionalOverviewInfo.tsx

@@ -0,0 +1,10 @@
+// interface AdditionalOverviewInfoProps {
+//   info: any;
+// }
+
+// export function AdditionalOverviewInfo(_props: AdditionalOverviewInfoProps) {
+//   return null;
+// }
+
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+export const AdditionalOverviewInfo: any = null;

package/src/components/OpenApiDocs/hooks/AfterOpenApiDescription.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+export const AfterOpenApiDescription: any = null;

package/src/components/PageActions/PageActions.tsx

@@ -3,9 +3,9 @@ import styled from 'styled-components';
 
 import type { JSX } from 'react';
 import type { PageAction } from '@redocly/theme/core/types';
-import type { DropdownMenuItemProps } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
 
 import { PageActionsMenuItem } from '@redocly/theme/components/PageActions/PageActionsMenuItem';
+import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
 import { Link } from '@redocly/theme/components/Link/Link';
 import { ButtonGroup } from '@redocly/theme/components/Button/ButtonGroup';
 import { Button } from '@redocly/theme/components/Button/Button';
@@ -52,20 +52,27 @@ export function PageActions(props: PageActionProps): JSX.Element | null {
     }, ACTION_DONE_DISPLAY_DURATION);
   };
 
-  const menuItems: DropdownMenuItemProps[] = actions.map((action) => ({
-    content:
-      'link' in action ? (
-        <LinkMenuItem to={action.link} external>
-          <PageActionsMenuItem pageAction={action} />
-        </LinkMenuItem>
-      ) : (
+  const menuItems = actions.map((action, index) => {
+    const key = `${action.title}-${index}`;
+    const hasLink = 'link' in action;
+
+    const content = hasLink ? (
+      <LinkMenuItem key={`${key}-link`} to={action.link} tabIndex={-1} external>
         <PageActionsMenuItem pageAction={action} />
-      ),
-    onAction: 'onClick' in action ? () => handleActionClick(action) : undefined,
-  }));
+      </LinkMenuItem>
+    ) : (
+      <PageActionsMenuItem pageAction={action} />
+    );
+
+    return (
+      <StyledDropdownMenuItem key={key} onAction={() => handleActionClick(action)}>
+        {content}
+      </StyledDropdownMenuItem>
+    );
+  });
 
   return (
-    <PageActionsWrapper>
+    <PageActionsWrapper data-component-name="PageActions/PageActions">
       <ButtonGroup variant="outlined" size="medium">
         <Button
           icon={renderIcon(buttonAction, actionState)}
@@ -76,9 +83,9 @@ export function PageActions(props: PageActionProps): JSX.Element | null {
           {buttonAction.buttonText}
         </Button>
         {actions.length > 1 ? (
-          <Dropdown withArrow trigger={<Button />} placement="bottom" alignment="end">
-            <StyledDropdownMenu items={menuItems} />
-          </Dropdown>
+          <StyledDropdown withArrow trigger={<Button />} placement="bottom" alignment="end">
+            <StyledDropdownMenu>{menuItems}</StyledDropdownMenu>
+          </StyledDropdown>
         ) : null}
       </ButtonGroup>
     </PageActionsWrapper>
@@ -111,6 +118,22 @@ const LinkMenuItem = styled(Link)`
   --link-decoration-hover: none;
 `;
 
+const StyledDropdown = styled(Dropdown)`
+  z-index: calc(var(--z-index-raised) - 1);
+`;
+
 const StyledDropdownMenu = styled(DropdownMenu)`
   --dropdown-menu-max-height: var(--page-actions-dropdown-max-height);
 `;
+
+const StyledDropdownMenuItem = styled(DropdownMenuItem)`
+  &:has(a) {
+    padding: 0;
+    & > a {
+      display: inline-block;
+      width: 100%;
+      padding: var(--dropdown-menu-item-padding-vertical)
+        var(--dropdown-menu-item-padding-horizontal);
+    }
+  }
+`;

package/src/components/Search/SearchAiDialog.tsx

@@ -6,6 +6,8 @@ import type {
   AiSearchConversationItem,
   SearchAiMessageResource,
   FeedbackType,
+  ToolCall,
+  ContentSegment,
 } from '@redocly/theme/core/types';
 
 import { useThemeConfig, useThemeHooks } from '@redocly/theme/core/hooks';
@@ -34,6 +36,8 @@ export type SearchAiDialogProps = {
     history?: AiSearchConversationItem[],
     messageId?: string,
   ) => void;
+  toolCalls?: ToolCall[];
+  contentSegments?: ContentSegment[];
 };
 
 export function SearchAiDialog({
@@ -46,6 +50,8 @@ export function SearchAiDialog({
   className,
   conversation,
   setConversation,
+  toolCalls = [],
+  contentSegments,
 }: SearchAiDialogProps): JSX.Element {
   const { useTranslate } = useThemeHooks();
   const { aiAssistant } = useThemeConfig();
@@ -111,13 +117,32 @@ export function SearchAiDialog({
             content,
             resources,
             messageId: lastMessage.messageId,
+            toolCalls,
+            contentSegments,
           },
         ];
       }
 
-      return [...prev, { role: AiSearchConversationRole.ASSISTANT, content, resources }];
+      return [
+        ...prev,
+        {
+          role: AiSearchConversationRole.ASSISTANT,
+          content,
+          resources,
+          toolCalls,
+          contentSegments,
+        },
+      ];
     });
-  }, [response, conversation.length, error, resources, setConversation]);
+  }, [
+    response,
+    conversation.length,
+    error,
+    resources,
+    toolCalls,
+    contentSegments,
+    setConversation,
+  ]);
 
   useEffect(() => {
     if (error) {
@@ -171,6 +196,10 @@ export function SearchAiDialog({
             messageId={item.messageId}
             feedback={item.feedback}
             onFeedbackChange={handleFeedbackChange}
+            toolCalls={
+              item.toolCalls || (index === conversation.length - 1 ? toolCalls : undefined)
+            }
+            contentSegments={item.contentSegments}
           />
         ))}
 

package/src/components/Search/SearchAiMessage.tsx

@@ -3,7 +3,13 @@ import styled from 'styled-components';
 
 import type { JSX } from 'react';
 
-import { FeedbackType, type SearchAiMessageResource } from '@redocly/theme/core/types';
+import {
+  FeedbackType,
+  type SearchAiMessageResource,
+  type ToolCall,
+  type ContentSegment,
+} from '@redocly/theme/core/types';
+import { TOOL_CALL_DISPLAY_TEXT } from '@redocly/theme/core/constants';
 import { Link } from '@redocly/theme/components/Link/Link';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { AiSearchConversationRole } from '@redocly/theme/core/constants';
@@ -12,9 +18,14 @@ import { Markdown } from '@redocly/theme/components/Markdown/Markdown';
 import { DocumentIcon } from '@redocly/theme/icons/DocumentIcon/DocumentIcon';
 import { AiStarsIcon } from '@redocly/theme/icons/AiStarsIcon/AiStarsIcon';
 import { CheckmarkOutlineIcon } from '@redocly/theme/icons/CheckmarkOutlineIcon/CheckmarkOutlineIcon';
+import { SearchAiActionButtons } from '@redocly/theme/components/Search/SearchAiActionButtons';
+import { SearchAiNegativeFeedbackForm } from '@redocly/theme/components/Search/SearchAiNegativeFeedbackForm';
 
-import { SearchAiActionButtons } from './SearchAiActionButtons';
-import { SearchAiNegativeFeedbackForm } from './SearchAiNegativeFeedbackForm';
+function MarkdownSegment({ text }: { text: string }): JSX.Element {
+  const { useMarkdownText } = useThemeHooks();
+  const markdown = useMarkdownText(text);
+  return <ResponseText as="div" children={markdown} data-testid="response-text" />;
+}
 
 export type SearchAiMessageProps = {
   role: AiSearchConversationRole;
@@ -25,6 +36,8 @@ export type SearchAiMessageProps = {
   messageId?: string;
   feedback?: FeedbackType;
   onFeedbackChange: (messageId: string, feedback: FeedbackType | undefined) => void;
+  toolCalls?: ToolCall[];
+  contentSegments?: ContentSegment[];
 };
 
 function SearchAiMessageComponent({
@@ -36,9 +49,10 @@ function SearchAiMessageComponent({
   messageId,
   feedback,
   onFeedbackChange,
+  toolCalls = [],
+  contentSegments = [{ type: 'text' as const, text: content }],
 }: SearchAiMessageProps): JSX.Element {
-  const { useMarkdownText, useTranslate, useTelemetry } = useThemeHooks();
-  const markDownContent = useMarkdownText(content || '');
+  const { useTranslate, useTelemetry } = useThemeHooks();
   const { translate } = useTranslate();
   const telemetry = useTelemetry();
   const [feedbackSent, setFeedbackSent] = useState(false);
@@ -48,15 +62,20 @@ function SearchAiMessageComponent({
 
   const showSuccessMessage = feedbackSent && feedback;
 
+  const isLoading = isThinking && content.length === 0 && toolCalls.length === 0;
+
   const sendFeedbackTelemetry = (feedbackValue: FeedbackType, dislikeReason?: string) => {
     if (!messageId) return;
 
     try {
-      telemetry.sendSearchAIFeedbackMessage({
-        feedback: feedbackValue,
-        messageId,
-        reason: dislikeReason,
-      });
+      telemetry.sendSearchAIFeedbackMessage([
+        {
+          object: 'feedback',
+          feedback: feedbackValue,
+          messageId,
+          reason: dislikeReason,
+        },
+      ]);
     } catch (error) {
       console.error('Error sending feedback', error);
     }
@@ -98,7 +117,36 @@ function SearchAiMessageComponent({
         {role === AiSearchConversationRole.ASSISTANT ? (
           <>
             <MessageWrapper role={role}>
-              <ResponseText as="div" children={markDownContent} data-testid="response-text" />
+              {contentSegments.map((segment, index) => {
+                if (segment.type === 'tool') {
+                  const toolCallCompleted = Boolean(segment.toolCall.result);
+
+                  const toolCallCompletedText =
+                    TOOL_CALL_DISPLAY_TEXT[segment.toolCall.name]?.completedText ??
+                    `${translate('search.ai.toolResult.found', 'Found')} ${segment.toolCall.result?.documentCount ?? 0} ${translate('search.ai.toolResult.found.documents', 'documents')}`;
+
+                  const toolCallInProgressText =
+                    TOOL_CALL_DISPLAY_TEXT[segment.toolCall.name]?.inProgressText ??
+                    translate('search.ai.toolCall.searching', 'Searching...');
+
+                  const toolCallDisplayText = toolCallCompleted
+                    ? toolCallCompletedText
+                    : toolCallInProgressText;
+
+                  return (
+                    <ToolCallsInfoWrapper key={`tool-${index}`} data-testid="tool-calls-info">
+                      <ToolCallInfoItem>
+                        <DocumentIcon size="14px" color="--search-ai-text-color" />
+                        <ToolCallText $isSearching={!toolCallCompleted}>
+                          {toolCallDisplayText}
+                        </ToolCallText>
+                      </ToolCallInfoItem>
+                    </ToolCallsInfoWrapper>
+                  );
+                }
+
+                return <MarkdownSegment key={`text-${index}`} text={segment.text} />;
+              })}
               {hasResources && (
                 <>
                   <ResourcesWrapper data-testid="resources-wrapper">
@@ -107,8 +155,8 @@ function SearchAiMessageComponent({
                       {translate('search.ai.resourcesFound.resources', 'resources')}
                     </ResourcesTitle>
                     <ResourceTagsWrapper>
-                      {resources?.map((resource, idx) => (
-                        <Link key={`${resource.url}-${idx}`} to={resource.url} target="_blank">
+                      {resources?.map((resource, index) => (
+                        <Link key={`${resource.url}-${index}`} to={resource.url} target="_blank">
                           <ResourceTag
                             borderless
                             icon={<DocumentIcon color="--search-ai-resource-tag-icon-color" />}
@@ -121,7 +169,7 @@ function SearchAiMessageComponent({
                   </ResourcesWrapper>
                 </>
               )}
-              {isThinking && content.length === 0 && (
+              {isLoading && (
                 <ThinkingDotsWrapper data-testid="thinking-dots-wrapper">
                   <ThinkingDot />
                   <ThinkingDot />
@@ -188,7 +236,9 @@ export const SearchAiMessage = memo(SearchAiMessageComponent, (prevProps, nextPr
     prevProps.messageId === nextProps.messageId &&
     prevProps.feedback === nextProps.feedback &&
     prevProps.onFeedbackChange === nextProps.onFeedbackChange &&
-    areResourcesEqual(prevProps.resources, nextProps.resources)
+    areResourcesEqual(prevProps.resources, nextProps.resources) &&
+    prevProps.toolCalls?.length === nextProps.toolCalls?.length &&
+    prevProps.contentSegments === nextProps.contentSegments
   );
 });
 
@@ -228,8 +278,9 @@ const ResponseText = styled(Markdown)`
 
 const MessageWrapper = styled.div<{ role: string }>`
   padding: ${({ role }) =>
-      role === AiSearchConversationRole.USER ? 'var(--spacing-sm)' : 'var(--spacing-xs)'}
-    var(--spacing-sm);
+    role === AiSearchConversationRole.USER
+      ? 'var(--spacing-sm)'
+      : 'var(--spacing-sm) var(--spacing-sm) var(--spacing-xs) var(--spacing-sm)'};
   border-radius: var(--border-radius-lg);
   width: fit-content;
   max-width: 100%;
@@ -344,3 +395,38 @@ const SuccessMessageText = styled.div`
   font-size: var(--font-size-base);
   color: var(--color-success-darker);
 `;
+
+const ToolCallsInfoWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xxs);
+  margin: 0 0 var(--spacing-sm) 0;
+  font-size: var(--font-size-xs);
+  color: var(--search-ai-text-color);
+  opacity: 0.6;
+`;
+
+const ToolCallInfoItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+`;
+
+const ToolCallText = styled.span<{ $isSearching?: boolean }>`
+  font-weight: var(--font-weight-regular);
+
+  ${({ $isSearching }) =>
+    $isSearching &&
+    `
+    animation: pulse 1.5s ease-in-out infinite;
+    
+    @keyframes pulse {
+      0%, 100% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.4;
+      }
+    }
+  `}
+`;