@redocly/theme 0.70.0-next.1 → 0.70.0-next.11

package/src/components/Search/SearchAiActivity.tsx

@@ -0,0 +1,318 @@
+import React, { useId, useState, type ComponentType, type JSX } from 'react';
+import styled, { css, keyframes } from 'styled-components';
+
+import type { ToolCall, SearchAiActivityKind } from '@redocly/theme/core/types';
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { useSearchAiActivity } from '@redocly/theme/core/hooks';
+import { searchAiAppearAnimation } from '@redocly/theme/core/styles';
+import { AiStarsIcon } from '@redocly/theme/icons/AiStarsIcon/AiStarsIcon';
+import { ChatIcon } from '@redocly/theme/icons/ChatIcon/ChatIcon';
+import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
+import { CodeIcon } from '@redocly/theme/icons/CodeIcon/CodeIcon';
+import { SearchIcon } from '@redocly/theme/icons/SearchIcon/SearchIcon';
+
+const ACTIVITY_KIND_ICONS: Record<SearchAiActivityKind, ComponentType<IconProps>> = {
+  thinking: AiStarsIcon,
+  search: SearchIcon,
+  support: ChatIcon,
+  code: CodeIcon,
+};
+
+export type SearchAiActivityProps = {
+  /** One run of consecutive tool calls; an empty list means the assistant has not called a tool yet. */
+  toolCalls: ToolCall[];
+  /** The assistant works on this group now; once it moves on, a call without a result counts as finished. */
+  isActive: boolean;
+  className?: string;
+};
+
+export function SearchAiActivity({
+  toolCalls,
+  isActive,
+  className,
+}: SearchAiActivityProps): JSX.Element {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const listId = useId();
+  const { status, steps } = useSearchAiActivity({ toolCalls, isActive });
+  const StatusIcon = ACTIVITY_KIND_ICONS[status.kind];
+
+  const header = (
+    <>
+      <IconWrapper aria-hidden>
+        <StatusIcon size="var(--search-ai-activity-icon-size)" />
+      </IconWrapper>
+      <StatusLabel
+        key={`${status.label}${status.detail ?? ''}`}
+        title={status.detail ? `${status.label} “${status.detail}”` : status.label}
+        $isRunning={status.isRunning}
+      >
+        {status.label}
+        {status.detail && <StatusDetail> “{status.detail}”</StatusDetail>}
+      </StatusLabel>
+      {steps.length > 1 && (
+        <>
+          {' '}
+          <ToolCallCount>{steps.length}</ToolCallCount>
+        </>
+      )}
+      {steps.length > 0 && (
+        <ExpandIcon size="var(--search-ai-activity-icon-size)" $isExpanded={isExpanded} />
+      )}
+    </>
+  );
+
+  return (
+    <SearchAiActivityWrapper
+      data-component-name="Search/SearchAiActivity"
+      data-testid="tool-calls-info"
+      className={className}
+    >
+      {steps.length > 0 ? (
+        <>
+          <HeaderButton
+            type="button"
+            aria-expanded={isExpanded}
+            aria-controls={listId}
+            onClick={() => setIsExpanded((expanded) => !expanded)}
+          >
+            {header}
+          </HeaderButton>
+          <StepsWrapper id={listId} $isExpanded={isExpanded}>
+            <StepList>
+              {steps.map((step) => {
+                const StepIcon = ACTIVITY_KIND_ICONS[step.kind];
+                return (
+                  <StepItem key={step.id}>
+                    <StepIconWrapper aria-hidden>
+                      <StepIcon size="var(--search-ai-activity-icon-size)" />
+                    </StepIconWrapper>
+                    <StepText $isRunning={step.isRunning && isExpanded}>{step.label}</StepText>
+                  </StepItem>
+                );
+              })}
+            </StepList>
+          </StepsWrapper>
+        </>
+      ) : (
+        <HeaderWrapper>{header}</HeaderWrapper>
+      )}
+    </SearchAiActivityWrapper>
+  );
+}
+
+const labelIn = keyframes`
+  from {
+    opacity: 0.35;
+  }
+`;
+
+const shimmerSweep = keyframes`
+  from {
+    background-position: 100% 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+`;
+
+const shimmer = css`
+  @supports (background-clip: text) or (-webkit-background-clip: text) {
+    @media (prefers-reduced-motion: no-preference) {
+      background:
+        linear-gradient(
+            90deg,
+            transparent 0%,
+            transparent 40%,
+            var(--search-ai-activity-shimmer-color) 50%,
+            transparent 60%,
+            transparent 100%
+          )
+          100% 0 / 250% 100% no-repeat,
+        linear-gradient(currentColor, currentColor);
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+      animation:
+        ${labelIn} var(--search-ai-activity-fade-duration) ease-out,
+        ${shimmerSweep} var(--search-ai-activity-shimmer-duration) linear
+          infinite;
+    }
+  }
+`;
+
+const SearchAiActivityWrapper = styled.div`
+  font-size: var(--search-ai-activity-font-size);
+  line-height: var(--search-ai-activity-line-height);
+  color: var(--search-ai-activity-text-color);
+`;
+
+const headerStyles = css`
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  max-width: 100%;
+  min-height: var(--search-ai-activity-line-height);
+  white-space: nowrap;
+`;
+
+const HeaderWrapper = styled.div`
+  ${headerStyles}
+`;
+
+const HeaderButton = styled.button`
+  ${headerStyles}
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--border-radius);
+  background: none;
+  font: inherit;
+  color: inherit;
+  text-align: start;
+  cursor: pointer;
+  transition: color var(--search-ai-activity-fade-duration) ease-out;
+
+  &:hover {
+    color: var(--search-ai-activity-text-color-hover);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--button-border-color-focused);
+    outline-offset: 2px;
+  }
+`;
+
+const IconWrapper = styled.span`
+  display: inline-flex;
+  flex-shrink: 0;
+  width: var(--search-ai-activity-icon-size);
+  height: var(--search-ai-activity-icon-size);
+`;
+
+const StatusLabel = styled.span<{ $isRunning: boolean }>`
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: var(--font-weight-regular);
+  animation: ${labelIn} var(--search-ai-activity-fade-duration) ease-out;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+
+  ${({ $isRunning }) => $isRunning && shimmer}
+`;
+
+const StatusDetail = styled.span`
+  color: var(--search-ai-activity-detail-color);
+`;
+
+const ToolCallCount = styled.span`
+  flex-shrink: 0;
+  min-width: calc(var(--search-ai-activity-line-height) - 4px);
+  padding: 0 var(--spacing-xxs);
+  border-radius: calc(var(--search-ai-activity-line-height) / 2);
+  background: var(--search-ai-activity-count-bg-color);
+  font-size: var(--search-ai-activity-count-font-size);
+  line-height: calc(var(--search-ai-activity-line-height) - 4px);
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+`;
+
+const ExpandIcon = styled(ChevronDownIcon)<{ $isExpanded: boolean }>`
+  flex-shrink: 0;
+  margin-inline-start: calc(var(--spacing-xxs) * -1);
+  transform: rotate(${({ $isExpanded }) => ($isExpanded ? '180deg' : '0deg')});
+  transition: transform var(--search-ai-activity-expand-duration)
+    var(--search-ai-activity-easing);
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+`;
+
+const StepsWrapper = styled.div<{ $isExpanded: boolean }>`
+  display: grid;
+  grid-template-rows: ${({ $isExpanded }) => ($isExpanded ? '1fr' : '0fr')};
+  opacity: ${({ $isExpanded }) => ($isExpanded ? 1 : 0)};
+  visibility: ${({ $isExpanded }) => ($isExpanded ? 'visible' : 'hidden')};
+  ${({ $isExpanded }) =>
+    !$isExpanded &&
+    css`
+      contain: inline-size;
+    `}
+  transition:
+    grid-template-rows var(--search-ai-activity-expand-duration) var(--search-ai-activity-easing),
+    opacity var(--search-ai-activity-expand-duration) ease-out,
+    visibility var(--search-ai-activity-expand-duration);
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+`;
+
+const STEP_GAP = 'var(--spacing-xs)';
+const ICON_OFFSET =
+  'calc((var(--search-ai-activity-line-height) - var(--search-ai-activity-icon-size)) / 2)';
+const RAIL_GAP = '3px';
+const RAIL_INSET = 'calc(var(--search-ai-activity-icon-size) / 2 - 0.5px)';
+
+const StepList = styled.ol`
+  min-height: 0;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  /* Padding would stay visible while the list is collapsed; the spacer collapses with it. */
+  &::before {
+    content: "";
+    display: block;
+    height: ${STEP_GAP};
+  }
+`;
+
+const StepItem = styled.li`
+  position: relative;
+  display: flex;
+  gap: var(--spacing-xs);
+  padding-bottom: ${STEP_GAP};
+  ${searchAiAppearAnimation}
+
+  &:last-child {
+    padding-bottom: 0;
+  }
+
+  &:first-child::before,
+  &:not(:last-child)::after {
+    content: "";
+    position: absolute;
+    inset-inline-start: ${RAIL_INSET};
+    width: 1px;
+    background: var(--search-ai-activity-rail-color);
+  }
+
+  &:first-child::before {
+    top: calc(${STEP_GAP} * -1 - ${ICON_OFFSET} + ${RAIL_GAP});
+    height: calc(${STEP_GAP} + ${ICON_OFFSET} * 2 - ${RAIL_GAP} * 2);
+  }
+
+  &:not(:last-child)::after {
+    top: calc(
+      ${ICON_OFFSET} + var(--search-ai-activity-icon-size) + ${RAIL_GAP}
+    );
+    bottom: calc(${RAIL_GAP} - ${ICON_OFFSET});
+  }
+`;
+
+const StepIconWrapper = styled(IconWrapper)`
+  margin-top: ${ICON_OFFSET};
+`;
+
+const StepText = styled.span<{ $isRunning: boolean }>`
+  min-width: 0;
+  overflow-wrap: anywhere;
+
+  ${({ $isRunning }) => $isRunning && shimmer}
+`;

package/src/components/Search/SearchAiConversationInput.tsx

@@ -30,18 +30,24 @@ export function SearchAiConversationInput({
   const { translate } = useTranslate();
 
   const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);
+  const wasGeneratingResponseRef = useRef(isGeneratingResponse);
   const [query, setQuery] = useState('');
 
   useEffect(() => {
-    if (!isGeneratingResponse && inputRef.current) {
+    const wasGeneratingResponse = wasGeneratingResponseRef.current;
+    wasGeneratingResponseRef.current = isGeneratingResponse;
+
+    if (wasGeneratingResponse && !isGeneratingResponse) {
       requestAnimationFrame(() => {
         inputRef.current?.focus();
       });
     }
   }, [isGeneratingResponse]);
 
+  const isDisabled = disabled || isGeneratingResponse || query.trim().length === 0;
+
   const handleSendMessage = () => {
-    if (disabled) return;
+    if (isDisabled) return;
 
     setQuery('');
     onMessageSent(query);
@@ -59,8 +65,6 @@ export function SearchAiConversationInput({
     }
   };
 
-  const isDisabled = disabled || isGeneratingResponse || query.trim().length === 0;
-
   const commonProps = {
     placeholder:
       placeholder || translate('search.ai.followUpQuestion', 'Ask a follow up question?'),
@@ -91,7 +95,8 @@ export function SearchAiConversationInput({
       )}
 
       <SendButton
-        disabled={isDisabled}
+        aria-label={translate('search.ai.send', 'Send question')}
+        aria-disabled={isDisabled}
         size="small"
         icon={
           <SendIcon
@@ -176,11 +181,12 @@ const SendButton = styled(Button)`
   border-radius: var(--search-ai-conversation-input-send-button-border-radius);
   padding: var(--search-ai-conversation-input-send-button-padding);
 
-  &:hover {
+  &:hover:not([aria-disabled='true']) {
     background-color: var(--search-ai-conversation-input-send-button-bg-color-hover);
   }
 
-  &:disabled {
+  &[aria-disabled='true'] {
+    cursor: default;
     background-color: var(--search-ai-conversation-input-send-button-bg-color-disabled);
     border: var(--search-ai-conversation-input-send-button-border-disabled);
   }

package/src/components/Search/SearchAiDialog.tsx

@@ -58,6 +58,17 @@ export function SearchAiDialog({
   const { translate } = useTranslate();
 
   const conversationEndRef = React.useRef<HTMLDivElement>(null);
+  const wrapperRef = React.useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      wrapperRef.current
+        ?.querySelector<HTMLElement>(
+          '[data-component-name="Search/SearchAiConversationInput"] :is(input, textarea):not(:disabled)',
+        )
+        ?.focus();
+    });
+  }, []);
 
   const suggestions = aiAssistant?.suggestions ?? [];
 
@@ -108,6 +119,10 @@ export function SearchAiDialog({
 
     // oxlint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent -- merges the streamed assistant response into the lifted conversation state as chunks arrive
     setConversation((prev) => {
+      // A reset can land between this effect's render and its update.
+      if (prev.length === 0) {
+        return prev;
+      }
       const lastMessage = prev[prev.length - 1];
       const content: string = response || '';
 
@@ -167,7 +182,11 @@ export function SearchAiDialog({
   );
 
   return (
-    <SearchAiDialogWrapper data-component-name="Search/SearchAiDialog" className={className}>
+    <SearchAiDialogWrapper
+      ref={wrapperRef}
+      data-component-name="Search/SearchAiDialog"
+      className={className}
+    >
       {!conversation.length && (
         <WelcomeWrapper>
           <AiStarsIcon
@@ -199,9 +218,6 @@ export function SearchAiDialog({
             messageId={item.messageId}
             feedback={item.feedback}
             onFeedbackChange={handleFeedbackChange}
-            toolCalls={
-              item.toolCalls || (index === conversation.length - 1 ? toolCalls : undefined)
-            }
             contentSegments={item.contentSegments}
           />
         ))}