@redocly/theme 0.61.0 → 0.62.0-custom.0

package/src/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar.tsx

@@ -6,8 +6,8 @@ import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { MenuContainer } from '@redocly/theme/components/Menu/MenuContainer';
 import { transformRevisionsToVersionHistory } from '@redocly/theme/core/utils';
-
-import { CatalogEntityVersionItem } from './CatalogEntityVersionItem';
+import { DEFAULT_LOCALE_PLACEHOLDER } from '@redocly/theme/core/constants';
+import { CatalogEntityVersionItem } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityVersionItem';
 
 export type CatalogHistorySidebarProps = {
   entityKey: string;
@@ -31,15 +31,18 @@ export function CatalogEntityHistorySidebar({
 
   const { items: revisions } = useFetchCatalogEntityRevisions({ entityKey });
 
+  const normalizedLocale =
+    currentLocale && currentLocale !== DEFAULT_LOCALE_PLACEHOLDER ? currentLocale : 'en-US';
+
   const versionHistoryItems = useMemo(
     () =>
       transformRevisionsToVersionHistory({
         revisions,
         currentRevisionDate: revision,
         currentVersion: version,
-        locale: currentLocale,
+        locale: normalizedLocale,
       }),
-    [revisions, revision, version, currentLocale],
+    [revisions, revision, version, normalizedLocale],
   );
   const activeRevisionLabel = useMemo(() => {
     const itemWithActiveRevision = versionHistoryItems.find((item) =>

package/src/components/Catalog/CatalogEntity/CatalogEntityProperties/TagsProperty.tsx

@@ -2,7 +2,7 @@ import React, { JSX } from 'react';
 
 import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { TagsIcon } from '@redocly/theme/icons/TagsIcon/TagsIcon';
-import { CatalogTagsWithTooltip } from '@redocly/theme';
+import { CatalogTagsWithTooltip } from '@redocly/theme/components/Catalog/CatalogTagsWithTooltip';
 import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable.tsx

@@ -62,17 +62,19 @@ export function CatalogEntityRelationsTable({
 
   const onRowClick = (relatedEntity: BffCatalogRelatedEntity) => {
     if (searchQuery) {
-      telemetry.sendCatalogEntitiesRelatedEntitiesListSearchResultClickMessage({
-        id: relatedEntity.id,
-        object: 'catalog_entity',
-        uri: getEntityDetailsLink(relatedEntity),
-        query: searchQuery,
-        entityKey: entity.key,
-        entityType: entity.type,
-        relationType: reverseRelationMap[relatedEntity.relationType],
-        relatedEntityKey: relatedEntity.key,
-        relatedEntityType: relatedEntity.type,
-      });
+      telemetry.sendCatalogEntitiesRelatedEntitiesListSearchResultClickMessage([
+        {
+          id: relatedEntity.id,
+          object: 'catalog_entity',
+          uri: getEntityDetailsLink(relatedEntity),
+          query: searchQuery,
+          entityKey: entity.key,
+          entityType: entity.type,
+          relationType: reverseRelationMap[relatedEntity.relationType],
+          relatedEntityKey: relatedEntity.key,
+          relatedEntityType: relatedEntity.type,
+        },
+      ]);
     }
   };
 

package/src/components/Catalog/CatalogEntity/CatalogEntitySchema.tsx

@@ -52,11 +52,13 @@ export function CatalogEntitySchema({
             iconPosition="right"
             size="medium"
             onCopyClick={() =>
-              telemetry.sendCatalogEntitiesCopyDataSchemaClickedMessage({
-                id: entity.id,
-                object: 'catalog_entity',
-                uri: getEntityDetailsLink(entity),
-              })
+              telemetry.sendCatalogEntitiesCopyDataSchemaClickedMessage([
+                {
+                  id: entity.id,
+                  object: 'catalog_entity',
+                  uri: getEntityDetailsLink(entity),
+                },
+              ])
             }
           ></CopyButton>
         )}

package/src/components/Catalog/CatalogFilter/CatalogFilterCheckboxes.tsx

@@ -102,13 +102,15 @@ export function CatalogFilterCheckboxes({
                 role="link"
                 onClick={() => {
                   filter.toggleOption(value);
-                  telemetry.sendCatalogEntitiesFilterCheckboxToggledMessage({
-                    id: filter.property + '--' + value,
-                    object: 'checkbox',
-                    uri: window.location.href,
-                    category: filter.property,
-                    value: value,
-                  });
+                  telemetry.sendCatalogEntitiesFilterCheckboxToggledMessage([
+                    {
+                      id: filter.property + '--' + value,
+                      object: 'checkbox',
+                      uri: window.location.href,
+                      category: filter.property,
+                      value: value,
+                    },
+                  ]);
                 }}
               >
                 <CheckboxIcon

package/src/components/Catalog/CatalogTableView/CatalogTableViewRow.tsx

@@ -10,8 +10,7 @@ import { CatalogEntityCell } from '@redocly/theme/components/Catalog/CatalogTabl
 import { CatalogTagsCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTagsCell';
 import { useCatalogEntityDetails } from '@redocly/theme/core/hooks';
 import { CatalogEntityTypeTag } from '@redocly/theme/components/Catalog/CatalogEntityTypeTag';
-
-import { Link } from '../../Link/Link';
+import { Link } from '@redocly/theme/components/Link/Link';
 
 export type BaseEntity = {
   id: string;

package/src/components/Catalog/CatalogTagsWithTooltip.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { CATALOG_TAG_MAX_LENGTH } from '@redocly/theme/core/constants';
 import { Tag, TagProps } from '@redocly/theme/components/Tag/Tag';
-import { TooltipComponent } from '@redocly/theme/components/Tooltip/Tooltip';
+import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
 import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 
@@ -27,8 +27,12 @@ export function CatalogTagsWithTooltip({
     if (showPlaceholder) {
       return (
         <CatalogTagsWrapper data-component-name="Catalog/CatalogTagsWithTooltip">
-          {/* eslint-disable-next-line theme/require-translate */}
-          <Tag style={{ backgroundColor: 'var(--catalog-tags-placeholder-bg-color)' }} color="grey">
+          <Tag
+            variant="outline"
+            style={{ backgroundColor: 'var(--catalog-tags-placeholder-bg-color)' }}
+            color="grey"
+            // eslint-disable-next-line theme/require-translate
+          >
             N/A
           </Tag>
         </CatalogTagsWrapper>
@@ -53,7 +57,7 @@ export function CatalogTagsWithTooltip({
   const remainingCount = items.length - itemsToShow;
 
   return (
-    <TooltipComponent tip={items.join(', ')} placement="bottom" className="catalog" width="400px">
+    <Tooltip tip={items.join(', ')} placement="bottom" className="catalog" width="400px">
       <CatalogTagsWrapper data-component-name="Catalog/CatalogTagsWithTooltip">
         {displayedItems.map((item, index) => (
           <Tag
@@ -70,7 +74,7 @@ export function CatalogTagsWithTooltip({
           +{remainingCount} {translate('catalog.tags.more', 'more')}
         </MoreTagsButton>
       </CatalogTagsWrapper>
-    </TooltipComponent>
+    </Tooltip>
   );
 }
 

package/src/components/CatalogClassic/CatalogClassicInfoBlock.tsx

@@ -52,7 +52,9 @@ function ScorecardBadge(props: {
   return (
     <Link to={slug}>
       <Tag
-        onClick={() => telemetry.sendScorecardLinkClickedMessage({ action: 'click' })}
+        onClick={() =>
+          telemetry.sendScorecardLinkClickedMessage([{ object: 'link', action: 'click' }])
+        }
         withStatusDot
         statusDotColor={`var(${colorVariable})`}
       >

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -6,7 +6,7 @@ import type { CodeBlockItems } from '@redocly/theme/components/CodeBlock/CodeBlo
 
 import { CodeBlockTabs } from '@redocly/theme/components/CodeBlock/CodeBlockTabs';
 import { CopyButton } from '@redocly/theme/components/Buttons/CopyButton';
-import { TooltipWrapper } from '@redocly/theme/components/Tooltip/TooltipWrapper';
+import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
 import { useThemeHooks, useThemeConfig } from '@redocly/theme/core/hooks';
 import { DeselectIcon } from '@redocly/theme/icons/DeselectIcon/DeselectIcon';
 import { MaximizeIcon } from '@redocly/theme/icons/MaximizeIcon/MaximizeIcon';
@@ -86,9 +86,10 @@ export function CodeBlockControls({
       <ControlsWrapper>
         {dropdown && <CodeBlockDropdown {...dropdown} />}
         {report && !report.hidden && !report?.props?.hide ? (
-          <TooltipWrapper
+          <Tooltip
             tip={translate('codeSnippet.report.tooltipText', 'Report a problem')}
             placement="top"
+            arrowPosition="right"
           >
             <ControlButton
               variant="text"
@@ -99,13 +100,14 @@ export function CodeBlockControls({
             >
               {controlsType != 'icon' && (report.props?.buttonText || 'Report')}
             </ControlButton>
-          </TooltipWrapper>
+          </Tooltip>
         ) : null}
 
         {expand && !codeSnippet?.expand?.hide ? (
-          <TooltipWrapper
+          <Tooltip
             tip={translate('codeSnippet.expand.tooltipText', 'Expand all')}
             placement="top"
+            arrowPosition="right"
           >
             <ControlButton
               variant="text"
@@ -116,13 +118,14 @@ export function CodeBlockControls({
             >
               {controlsType !== 'icon' && (expand?.label || 'Expand all')}
             </ControlButton>
-          </TooltipWrapper>
+          </Tooltip>
         ) : null}
 
         {collapse && !codeSnippet?.collapse?.hide ? (
-          <TooltipWrapper
+          <Tooltip
             tip={translate('codeSnippet.collapse.tooltipText', 'Collapse all')}
             placement="top"
+            arrowPosition="right"
           >
             <ControlButton
               variant="text"
@@ -133,7 +136,7 @@ export function CodeBlockControls({
             >
               {controlsType !== 'icon' && (expand?.label || 'Collapse all')}
             </ControlButton>
-          </TooltipWrapper>
+          </Tooltip>
         ) : null}
 
         {select ? (
@@ -161,9 +164,10 @@ export function CodeBlockControls({
         ) : null}
 
         {copy && !codeSnippet?.copy?.hide ? (
-          <TooltipWrapper
+          <Tooltip
             tip={translate('codeSnippet.copy.tooltipText', 'Copy to clipboard')}
             placement="top"
+            arrowPosition="right"
           >
             <StyledCopyButton
               data={copy.data}
@@ -178,11 +182,13 @@ export function CodeBlockControls({
                 if (copy?.onClick) {
                   copy?.onClick?.();
                 } else {
-                  telemetry.sendCopyCodeSnippetClickedMessage({ snippetType: 'copy' });
+                  telemetry.sendCopyCodeSnippetClickedMessage([
+                    { object: 'code_snippet', snippetType: 'copy' },
+                  ]);
                 }
               }}
             />
-          </TooltipWrapper>
+          </Tooltip>
         ) : null}
       </ControlsWrapper>
     </>

package/src/components/Filter/FilterCheckboxes.tsx

@@ -36,7 +36,7 @@ export function FilterCheckboxes({
               role="link"
               onClick={() => {
                 filter.toggleOption(value);
-                telemetry.sendFilterCheckboxToggledMessage({ id });
+                telemetry.sendFilterCheckboxToggledMessage([{ object: 'checkbox', id }]);
               }}
             >
               <CheckboxIcon

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}
           />
         ))}