@redocly/theme 0.61.0 → 0.62.0-custom.0

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

package/src/components/Search/SearchDialog.tsx

@@ -16,6 +16,7 @@ import {
   useDialogHotKeys,
   useSearchFilter,
   useRecentSearches,
+  useModalScrollLock,
 } from '@redocly/theme/core/hooks';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
@@ -75,7 +76,7 @@ export function SearchDialog({
   } = useSearchFilter(filter, setFilter);
   const { addSearchHistoryItem } = useRecentSearches();
   const aiSearch = useAiSearch({ filter });
-
+  useModalScrollLock(true);
   const searchInputRef = useRef<HTMLInputElement>(null);
   const modalRef = useRef<HTMLDivElement>(null);
 
@@ -163,14 +164,17 @@ export function SearchDialog({
           innerRef={innerRef}
           onClick={() => {
             addSearchHistoryItem(query);
-            telemetry.sendSearchResultClickedMessage({
-              query,
-              url: item.document.url,
-              totalResults: results.length.toString(),
-              index: index.toString(),
-              searchEngine: mode,
-              searchSessionId,
-            });
+            telemetry.sendSearchResultClickedMessage([
+              {
+                object: 'search',
+                query: query,
+                url: item.document.url,
+                totalResults: results.length.toString(),
+                index: index.toString(),
+                searchEngine: mode,
+                searchSessionId,
+              },
+            ]);
             onClose();
           }}
         />
@@ -246,9 +250,12 @@ export function SearchDialog({
                         if (query.trim()) {
                           aiSearch.askQuestion(query);
                         }
-                        telemetry.sendSearchAiOpenedMessage({
-                          method: 'ai_search_button',
-                        });
+                        telemetry.sendSearchAiOpenedMessage([
+                          {
+                            object: 'search',
+                            method: 'ai_search_button',
+                          },
+                        ]);
                       }}
                     >
                       {translate('search.ai.button', 'Search with AI')}
@@ -262,20 +269,27 @@ export function SearchDialog({
             </>
           ) : (
             <AiDialogHeaderWrapper>
-              <Button
-                variant="secondary"
-                onClick={() => {
-                  setMode('search');
-                  aiSearch.clearConversation();
-                  focusSearchInput();
-                }}
-                tabIndex={0}
-                icon={<ChevronLeftIcon />}
-              >
-                {isMobile
-                  ? translate('search.ai.back', 'Back')
-                  : translate('search.ai.backToSearch', 'Back to search')}
-              </Button>
+              {initialMode === 'ai-dialog' ? (
+                <AiDialogHeaderTitle>
+                  <AiStarsGradientIcon color="var(--search-ai-button-icon-color)" size="1.25rem" />
+                  {translate('search.ai.assistant', 'Assistant')}
+                </AiDialogHeaderTitle>
+              ) : (
+                <Button
+                  variant="secondary"
+                  onClick={() => {
+                    setMode('search');
+                    aiSearch.clearConversation();
+                    focusSearchInput();
+                  }}
+                  tabIndex={0}
+                  icon={<ChevronLeftIcon />}
+                >
+                  {isMobile
+                    ? translate('search.ai.back', 'Back')
+                    : translate('search.ai.backToSearch', 'Back to search')}
+                </Button>
+              )}
               <AiDialogHeaderActionsWrapper>
                 <Button
                   variant="secondary"
@@ -327,9 +341,12 @@ export function SearchDialog({
                       if (query.trim()) {
                         aiSearch.askQuestion(query);
                       }
-                      telemetry.sendSearchAiOpenedMessage({
-                        method: 'ai_search_input',
-                      });
+                      telemetry.sendSearchAiOpenedMessage([
+                        {
+                          object: 'search',
+                          method: 'ai_search_input',
+                        },
+                      ]);
                     }}
                     onKeyDown={(e) => {
                       if (e.key === 'Enter') {
@@ -337,9 +354,12 @@ export function SearchDialog({
                         if (query.trim()) {
                           aiSearch.askQuestion(query);
                         }
-                        telemetry.sendSearchAiOpenedMessage({
-                          method: 'ai_search_input',
-                        });
+                        telemetry.sendSearchAiOpenedMessage([
+                          {
+                            object: 'search',
+                            method: 'ai_search_input',
+                          },
+                        ]);
                       }
                     }}
                     ref={aiQueryRef}
@@ -423,11 +443,14 @@ export function SearchDialog({
                   <>
                     <SearchRecent
                       onSelect={(query, index) => {
-                        telemetry.sendSearchRecentClickedMessage({
-                          query,
-                          index: index.toString(),
-                          searchSessionId,
-                        });
+                        telemetry.sendSearchRecentClickedMessage([
+                          {
+                            object: 'search',
+                            query,
+                            index: index.toString(),
+                            searchSessionId,
+                          },
+                        ]);
                         setQuery(query);
                         focusSearchInput();
                       }}
@@ -447,6 +470,8 @@ export function SearchDialog({
               conversation={aiSearch.conversation}
               setConversation={aiSearch.setConversation}
               onMessageSent={aiSearch.askQuestion}
+              toolCalls={aiSearch.toolCalls}
+              contentSegments={aiSearch.contentSegments}
             />
           )}
         </SearchDialogBody>
@@ -567,6 +592,14 @@ const AiDialogHeaderActionsWrapper = styled.div`
   gap: var(--spacing-xxs);
 `;
 
+const AiDialogHeaderTitle = styled.span`
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-lg);
+`;
+
 const SearchDialogBody = styled.div`
   display: flex;
   flex-direction: row-reverse;

package/src/components/Select/variables.ts

@@ -10,7 +10,7 @@ export const select = css`
   --select-text-color: var(--text-color-secondary); // @presenter Color
   --select-border-radius: var(--border-radius); // @presenter BorderRadius
   --select-border: var(--border-width) var(--border-style) var(--border-color-primary); // @presenter Border
-  
+
   --select-input-padding-vertical: 6px; // @presenter Spacing
   --select-input-padding-horizontal: 6px; // @presenter Spacing
   --select-input-padding: var(--select-input-padding-vertical) var(--select-input-padding-horizontal);
@@ -38,7 +38,7 @@ export const select = css`
   --select-list-item-border-radius: var(--border-radius); // @presenter BorderRadius
   --select-list-item-bg-color-active: transparent; // @presenter Color
   --select-list-item-bg-color-hover: var(--menu-item-bg-color-hover); // @presenter Color
-  --select-list-item-font-weight-active: var(--font-weight-medium); // @presenter Color  
+  --select-list-item-font-weight-active: var(--font-weight-medium); // @presenter Color
 
   --select-placeholder-color: var(--color-warm-grey-6); // @presenter Color
   // @tokens End