@redocly/theme 0.59.0-next.0 → 0.59.0-next.10

package/src/components/Search/SearchAiNegativeFeedbackForm.tsx

@@ -0,0 +1,210 @@
+import React, { useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+import type { FeedbackType } from '@redocly/theme/core/types';
+
+import { Button } from '@redocly/theme/components/Button/Button';
+import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
+import { ArrowLeftIcon } from '@redocly/theme/icons/ArrowLeftIcon/ArrowLeftIcon';
+import { SendIcon } from '@redocly/theme/icons/SendIcon/SendIcon';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+
+export type SearchAiNegativeFeedbackFormProps = {
+  messageId: string;
+  onClose: (messageId: string, feedback: FeedbackType | undefined) => void;
+  onSubmit: (reason: string) => void;
+};
+
+const NEGATIVE_FEEDBACK_DEFAULT_REASONS = [
+  "Didn't answer my question",
+  "Couldn't find what I was looking for",
+  'Wrong topic',
+  'Partially helpful, but missing details',
+];
+
+export function SearchAiNegativeFeedbackForm({
+  messageId,
+  onClose,
+  onSubmit,
+}: SearchAiNegativeFeedbackFormProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  const [showMoreInput, setShowMoreInput] = useState(false);
+  const [detailedFeedback, setDetailedFeedback] = useState('');
+  const textAreaRef = React.useRef<HTMLTextAreaElement>(null);
+
+  const adjustTextAreaHeight = () => {
+    const textArea = textAreaRef.current;
+    if (textArea) {
+      textArea.style.height = 'auto';
+      textArea.style.height = `${textArea.scrollHeight}px`;
+    }
+  };
+
+  const handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setDetailedFeedback(e.target.value);
+    adjustTextAreaHeight();
+  };
+
+  useEffect(() => {
+    if (showMoreInput) {
+      adjustTextAreaHeight();
+    }
+  }, [showMoreInput]);
+
+  return (
+    <FeedbackFormWrapper data-component-name="Search/SearchAiNegativeFeedbackForm">
+      <FeedbackHeader>
+        {showMoreInput ? (
+          <BackButton
+            variant="text"
+            size="small"
+            icon={<ArrowLeftIcon />}
+            onClick={() => setShowMoreInput(false)}
+            aria-label="Back to feedback reasons"
+          />
+        ) : null}
+        <FeedbackTitle data-translation-key="search.ai.feedback.title">
+          {translate('search.ai.feedback.title', "What didn't you like about this response?")}
+        </FeedbackTitle>
+        <CloseButton
+          variant="text"
+          size="small"
+          icon={<CloseIcon />}
+          onClick={() => onClose(messageId, undefined)}
+          aria-label="Close feedback form"
+        />
+      </FeedbackHeader>
+
+      {!showMoreInput ? (
+        <FeedbackReasonsWrapper>
+          {NEGATIVE_FEEDBACK_DEFAULT_REASONS.map((reason) => (
+            <Button key={reason} variant="outlined" size="small" onClick={() => onSubmit(reason)}>
+              {reason}
+            </Button>
+          ))}
+          <Button variant="outlined" size="small" onClick={() => setShowMoreInput(true)}>
+            More...
+          </Button>
+        </FeedbackReasonsWrapper>
+      ) : (
+        <FeedbackInputWrapper>
+          <FeedbackTextArea
+            ref={textAreaRef}
+            placeholder={translate('search.ai.feedback.detailsPlaceholder', 'Add specific details')}
+            value={detailedFeedback}
+            onChange={handleTextChange}
+            rows={1}
+            autoFocus
+          />
+          <SendButton
+            size="small"
+            icon={
+              <SendIcon
+                color={
+                  !detailedFeedback.trim()
+                    ? '--button-content-color-disabled'
+                    : 'var(--search-ai-conversation-input-send-button-icon-color)'
+                }
+              />
+            }
+            onClick={() => onSubmit(detailedFeedback)}
+            disabled={!detailedFeedback.trim()}
+            aria-label="Send feedback"
+          />
+        </FeedbackInputWrapper>
+      )}
+    </FeedbackFormWrapper>
+  );
+}
+
+const FeedbackFormWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-xs);
+  background: var(--search-ai-feedback-form-bg-color);
+  border: 1px solid var(--search-ai-feedback-form-border-color);
+  border-radius: var(--border-radius-lg);
+`;
+
+const FeedbackHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-sm);
+`;
+
+const FeedbackTitle = styled.div`
+  font-size: var(--font-size-base);
+  color: var(--text-color);
+  flex: 1;
+`;
+
+const BackButton = styled(Button)`
+  flex-shrink: 0;
+`;
+
+const CloseButton = styled(Button)`
+  flex-shrink: 0;
+`;
+
+const FeedbackReasonsWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-xs);
+`;
+
+const FeedbackInputWrapper = styled.div`
+  position: relative;
+  width: 100%;
+`;
+
+const FeedbackTextArea = styled.textarea`
+  width: 100%;
+  min-height: 5rem;
+  max-height: 12.5rem;
+  padding: var(--spacing-xs);
+  padding-right: 3rem;
+  border: 1px solid var(--border-color-primary);
+  border-radius: var(--border-radius-md);
+  font-family: inherit;
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  background: var(--background-color);
+  color: var(--text-color);
+  resize: none;
+  overflow-y: auto;
+
+  &:focus {
+    outline: 1px solid var(--button-border-color-focused);
+    border-color: var(--button-border-color-focused);
+  }
+
+  &::placeholder {
+    color: var(--text-color-helper);
+  }
+`;
+
+const SendButton = styled(Button)`
+  position: absolute;
+  right: var(--search-ai-conversation-input-send-button-right);
+  bottom: var(--spacing-sm);
+  transition: background-color 0.2s ease;
+  background-color: var(--search-ai-conversation-input-send-button-bg-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--search-ai-conversation-input-send-button-border-radius);
+  padding: var(--search-ai-conversation-input-send-button-padding);
+
+  &:hover {
+    background-color: var(--search-ai-conversation-input-send-button-bg-color-hover);
+  }
+
+  &:disabled {
+    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/SearchAiResponse.tsx

@@ -34,7 +34,7 @@ export function SearchAiResponse(props: SearchAiResponseProps): JSX.Element {
   const { useMarkdownText } = useThemeHooks();
   const { question, response, isGeneratingResponse, resources, error, onSuggestionClick } = props;
 
-  const { search } = useThemeConfig();
+  const { aiAssistant } = useThemeConfig();
   const { useTranslate } = useThemeHooks();
 
   const { translate } = useTranslate();
@@ -42,7 +42,7 @@ export function SearchAiResponse(props: SearchAiResponseProps): JSX.Element {
 
   let responseContainer = null;
 
-  const suggestions = search?.ai?.suggestions;
+  const suggestions = aiAssistant?.suggestions;
 
   const hasPendingOrReceivedResponse = response || isGeneratingResponse || error;
   if (hasPendingOrReceivedResponse) {

package/src/components/Search/SearchDialog.tsx

@@ -34,16 +34,22 @@ import { AiStarsGradientIcon } from '@redocly/theme/icons/AiStarsGradientIcon/Ai
 export type SearchDialogProps = {
   onClose: () => void;
   className?: string;
+  initialMode?: 'search' | 'ai-dialog';
 };
 
-export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Element {
+export function SearchDialog({
+  onClose,
+  className,
+  initialMode = 'search',
+}: SearchDialogProps): JSX.Element {
   const { useTranslate, useCurrentProduct, useSearch, useProducts, useAiSearch, useTelemetry } =
     useThemeHooks();
   const telemetry = useTelemetry();
   const products = useProducts();
   const currentProduct = useCurrentProduct();
   const [product, setProduct] = useState(currentProduct);
-  const [mode, setMode] = useState<'search' | 'ai-dialog'>('search');
+  const searchSessionId = `search-${Date.now()}-${Math.random().toString(36).substring(2, 8)}`;
+  const [mode, setMode] = useState<'search' | 'ai-dialog'>(initialMode);
   const autoSearchDisabled = mode !== 'search';
   const {
     query,
@@ -57,7 +63,7 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
     advancedSearch,
     askAi,
     groupField,
-  } = useSearch(product?.name, autoSearchDisabled);
+  } = useSearch(product?.name, autoSearchDisabled, searchSessionId);
   const {
     isFilterOpen,
     onFilterToggle,
@@ -67,10 +73,24 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
     onQuickFilterReset,
   } = useSearchFilter(filter, setFilter);
   const { addSearchHistoryItem } = useRecentSearches();
-  const aiSearch = useAiSearch({ filter });
+  const aiSearch = useAiSearch({ filter }, searchSessionId);
 
   const searchInputRef = useRef<HTMLInputElement>(null);
   const modalRef = useRef<HTMLDivElement>(null);
+
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(`(max-width: ${breakpoints.small})`);
+    setIsMobile(mediaQuery.matches);
+
+    const handleChange = (e: MediaQueryListEvent) => {
+      setIsMobile(e.matches);
+    };
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, []);
+
   const aiQueryRef = useRef<HTMLDivElement>(null);
   const firstSearchResultRef = useRef<HTMLAnchorElement>(null);
   const searchKeysWithResults = items ? Object.keys(items).filter((key) => items[key]?.length) : [];
@@ -145,13 +165,14 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
               totalResults: results.length.toString(),
               index: index.toString(),
               searchEngine: mode,
+              searchSessionId,
             });
             onClose();
           }}
         />
       );
     },
-    [onClose, product, products, addSearchHistoryItem, query, telemetry, mode],
+    [onClose, product, products, addSearchHistoryItem, query, telemetry, mode, searchSessionId],
   );
 
   const showLoadMore = useCallback(
@@ -221,6 +242,9 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
                         if (query.trim()) {
                           aiSearch.askQuestion(query);
                         }
+                        telemetry.sendSearchAiOpenedMessage({
+                          method: 'ai_search_button',
+                        });
                       }}
                     >
                       {translate('search.ai.button', 'Search with AI')}
@@ -244,17 +268,22 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
                 tabIndex={0}
                 icon={<ChevronLeftIcon />}
               >
-                {translate('search.ai.backToSearch', 'Back to search')}
-              </Button>
-              <Button
-                variant="secondary"
-                disabled={!aiSearch.conversation.length}
-                onClick={() => aiSearch.clearConversation()}
-                tabIndex={0}
-                icon={<EditIcon />}
-              >
-                {translate('search.ai.newConversation', 'New conversation')}
+                {isMobile
+                  ? translate('search.ai.back', 'Back')
+                  : translate('search.ai.backToSearch', 'Back to search')}
               </Button>
+              <AiDialogHeaderActionsWrapper>
+                <Button
+                  variant="secondary"
+                  disabled={!aiSearch.conversation.length}
+                  onClick={() => aiSearch.clearConversation()}
+                  tabIndex={0}
+                  icon={<EditIcon />}
+                >
+                  {translate('search.ai.newConversation', 'New conversation')}
+                </Button>
+                {isMobile && <Button variant="text" icon={<CloseIcon />} onClick={handleClose} />}
+              </AiDialogHeaderActionsWrapper>
             </AiDialogHeaderWrapper>
           )}
         </SearchDialogHeader>
@@ -291,6 +320,9 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
                       if (query.trim()) {
                         aiSearch.askQuestion(query);
                       }
+                      telemetry.sendSearchAiOpenedMessage({
+                        method: 'ai_search_input',
+                      });
                     }}
                     onKeyDown={(e) => {
                       if (e.key === 'Enter') {
@@ -298,6 +330,9 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
                         if (query.trim()) {
                           aiSearch.askQuestion(query);
                         }
+                        telemetry.sendSearchAiOpenedMessage({
+                          method: 'ai_search_input',
+                        });
                       }
                     }}
                     ref={aiQueryRef}
@@ -384,6 +419,7 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
                         telemetry.sendSearchRecentClickedMessage({
                           query,
                           index: index.toString(),
+                          searchSessionId,
                         });
                         setQuery(query);
                         focusSearchInput();
@@ -519,6 +555,10 @@ const AiDialogHeaderWrapper = styled.div`
   align-items: center;
   width: 100%;
 `;
+const AiDialogHeaderActionsWrapper = styled.div`
+  display: flex;
+  gap: var(--spacing-xxs);
+`;
 
 const SearchDialogBody = styled.div`
   display: flex;
@@ -635,6 +675,7 @@ const AiDisclaimer = styled.div`
   line-height: var(--search-ai-disclaimer-line-height);
   color: var(--search-ai-disclaimer-text-color);
   margin: 0 auto;
+  text-align: center;
 `;
 
 const SearchWithAI = styled.div`

package/src/components/Search/SearchGroups.tsx

@@ -45,6 +45,7 @@ export function SearchGroups({
         borderless
         active={!searchFilter.some((item) => item.isQuickFilter)}
         onClick={() => searchFilter.some((item) => item.isQuickFilter) && onQuickFilterReset()}
+        selectable
       >
         All
       </GroupTag>
@@ -61,6 +62,7 @@ export function SearchGroups({
               onClick={() => handleGroupTagClick(value, facet.field, active, currentValues)}
               active={active}
               borderless
+              selectable
             >
               {value} {isCounterVisible && <span>{count}</span>}
             </GroupTag>

package/src/components/Search/variables.ts

@@ -144,68 +144,76 @@ export const search = css`
   /**
   * @tokens AI Search
   */
-  
+
   --search-ai-gradient: linear-gradient(to right, #715efe, #ff5cdc);
 
-  --search-ai-spinner-icon-color: var(--icon-color-interactive);
-  --search-ai-checkmark-icon-color: var(--icon-color-interactive);
   --search-ai-response-padding: var(--spacing-lg);
   --search-ai-response-gap: var(--spacing-sm);
-
   --search-ai-response-header-gap: var(--spacing-md);
+  --search-ai-response-body-gap: var(--spacing-xl);
+  --search-ai-response-body-padding: 0 40px;
 
   --search-ai-question-font-size: var(--font-size-xl);
   --search-ai-question-font-weight: var(--font-weight-semibold);
   --search-ai-question-line-height: var(--line-height-xl);
   --search-ai-question-text-color: var(--text-color-primary);
 
-  --search-ai-response-body-gap: var(--spacing-xl);
-  --search-ai-response-body-padding: 0 40px;
-
   --search-ai-text-color: var(--text-color-secondary);
   --search-ai-text-font-size: var(--font-size-lg);
   --search-ai-text-line-height: var(--line-height-lg);
+  --search-ai-thinking-text-margin: var(--md-pre-margin) 0;
 
   --search-ai-user-bg-color: var(--color-blue-6);
   --search-ai-user-text-color: var(--color-static-white);
   --search-ai-assistant-bg-color: var(--layer-color);
   --search-ai-assistant-text-color: var(--text-color-primary);
   --search-ai-assistant-border: 1px solid var(--border-color-primary);
+  --search-ai-assistant-message-max-width: 80%;
 
-  --search-ai-resources-gap: var(--spacing-base);
+  --search-ai-icon-size: 32px;
+  --search-ai-icon-bg-color: var(--search-ai-gradient);
+  --search-ai-icon-color: var(--color-static-white);
+  --search-ai-icon-wrapper-padding: var(--spacing-xs);
+
+  --search-ai-resources-gap: var(--spacing-xxs);
   --search-ai-resources-title-font-weight: var(--font-weight-medium);
   --search-ai-resources-title-font-size: var(--font-size-lg);
   --search-ai-resources-title-line-height: var(--line-height-lg);
 
-  --search-ai-resource-tags-gap: var(--spacing-base);
+  --search-ai-resource-tags-gap: var(--spacing-xxs);
   --search-ai-resource-tag-text-color: var(--text-color-secondary);
   --search-ai-resource-tag-icon-color: var(--text-color-secondary);
   --search-ai-resource-tag-icon-size: 16px;
 
-  --search-ai-icon-size: 32px;
-  --search-ai-icon-bg-color: var(--search-ai-gradient);
-  --search-ai-icon-color: var(--color-static-white);
-
-  --search-ai-button-icon-color: none;
+  --search-ai-suggestions-gap: var(--spacing-sm);
+  --search-ai-suggestions-margin-left: var(--spacing-xs);
+  --search-ai-suggestion-item-gap: var(--spacing-xxs);
+  --search-ai-suggestions-title-text-color: var(--text-color-description);
+  --search-ai-suggestions-title-font-size: var(--font-size-base);
+  --search-ai-suggestions-title-line-height: var(--line-height-base);
+  --search-ai-suggestions-title-font-weight: var(--font-weight-light);
+  --search-ai-suggestions-text-color: var(--text-color-description);
 
   --search-ai-thinking-dots-gap: 4px;
   --search-ai-thinking-dots-padding: 4px 0;
   --search-ai-thinking-dot-size: 6px;
   --search-ai-thinking-dot-color: var(--search-ai-gradient);
 
+  --search-ai-spinner-icon-color: var(--icon-color-interactive);
+  --search-ai-checkmark-icon-color: var(--icon-color-interactive);
+
+  --search-ai-feedback-gap: var(--spacing-xxs);
+
+  --search-ai-feedback-form-bg-color: var(--background-color-secondary);
+  --search-ai-feedback-form-border-color: var(--border-color-primary);
+
   --search-ai-disclaimer-font-size: var(--font-size-sm);
   --search-ai-disclaimer-line-height: var(--line-height-sm);
   --search-ai-disclaimer-text-color: var(--text-color-secondary);
 
-
   --search-ai-welcome-margin: var(--spacing-md);
-  --search-ai-icon-wrapper-padding: var(--spacing-xs);
 
-  --search-ai-suggestions-title-text-color: var(--text-color-description);
-  --search-ai-suggestions-title-font-size: var(--font-size-base);
-  --search-ai-suggestions-title-line-height: var(--line-height-base);
-  --search-ai-suggestions-title-font-weight: var(--font-weight-light);
-  --search-ai-suggestions-text-color: var(--text-color-description);
+  --search-ai-button-icon-color: none;
 
   --search-ai-conversation-input-send-button-bg-color: var(--button-bg-color-primary);
   --search-ai-conversation-input-send-button-bg-color-hover: var(--button-bg-color-primary-hover);
@@ -232,6 +240,7 @@ export const search = css`
   * @tokens AI Search Conversation Input
   */
   --search-ai-conversation-input-bg-color: var(--bg-color);
+  --search-ai-conversation-input-bg-color-disabled: var(--color-warm-grey-1);
   --search-ai-conversation-input-padding: var(--spacing-sm) var(--spacing-md);
   --search-ai-conversation-input-border: 1px solid var(--border-color-secondary);
   --search-ai-conversation-input-border-radius: var(--border-radius-lg);
@@ -241,51 +250,14 @@ export const search = css`
   --search-ai-conversation-input-border-color-disabled: var(--border-color-secondary);
 
   --search-ai-conversation-input-send-button-right: 12px;
-  --search-ai-conversation-input-send-button-bg-color: var(--button-bg-color-primary);
-  --search-ai-conversation-input-send-button-bg-color-hover: var(--button-bg-color-primary-hover);
-  --search-ai-conversation-input-send-button-bg-color-disabled: var(--button-bg-color-disabled);
+  --search-ai-conversation-input-send-button-padding: 5px;
+  --search-ai-conversation-input-send-button-border-radius: var(--border-radius);
   --search-ai-conversation-input-send-button-border-disabled: 1px solid var(--button-border-color-disabled);
 
-  /**
-  * @tokens AI Search Response
-  */
-  --search-ai-response-padding: var(--spacing-lg);
-  --search-ai-response-gap: var(--spacing-sm);
-  --search-ai-response-header-gap: var(--spacing-md);
-  --search-ai-response-body-gap: var(--spacing-xl);
-  --search-ai-response-body-padding: 0 40px;
-
-  --search-ai-text-color: var(--text-color-secondary);
-  --search-ai-text-font-size: var(--font-size-lg);
-  --search-ai-text-line-height: var(--line-height-lg);
-
-  --search-ai-thinking-text-margin: var(--md-pre-margin) 0;
-
-  --search-ai-question-font-size: var(--font-size-xl);
-  --search-ai-question-font-weight: var(--font-weight-semibold);
-  --search-ai-question-line-height: var(--line-height-xl);
-  --search-ai-question-text-color: var(--text-color-primary);
-
-  --search-ai-resources-gap: var(--spacing-base);
-  --search-ai-resources-title-font-weight: var(--font-weight-medium);
-  --search-ai-resources-title-font-size: var(--font-size-lg);
-  --search-ai-resources-title-line-height: var(--line-height-lg);
-
-  --search-ai-resource-tags-gap: var(--spacing-base);
-  --search-ai-resource-tag-text-color: var(--text-color-secondary);
-  --search-ai-resource-tag-icon-color: var(--text-color-secondary);
-
-  --search-ai-suggestions-gap: var(--spacing-sm);
-  --search-ai-suggestions-margin-left: var(--spacing-xs);
-  --search-ai-suggestion-item-gap: var(--spacing-xs);
-
-  --search-ai-suggestions-title-text-color: var(--text-color-description);
-  --search-ai-suggestions-title-font-size: var(--font-size-base);
-  --search-ai-suggestions-title-line-height: var(--line-height-base);
-  --search-ai-suggestions-title-font-weight: var(--font-weight-light);
-
-  --search-ai-spinner-icon-color: var(--icon-color-interactive);
-  --search-ai-checkmark-icon-color: var(--icon-color-interactive);
+  --search-ai-conversation-input-min-height: 48px;
+  --search-ai-conversation-input-max-height: 120px;
+  --search-ai-conversation-input-padding-right: calc(var(--search-ai-conversation-input-send-button-right) + 30px);
+  --search-ai-conversation-input-send-button-bottom: calc(var(--search-ai-conversation-input-min-height) / 2);
 
   // @tokens End
 `;

package/src/components/Select/SelectInput.tsx

@@ -83,6 +83,7 @@ export function SelectInput<T>(props: SelectInputProps<T>): React.ReactNode {
   const selectTags = selectedOptions.map((option, index) => (
     <SelectInputTag
       closable
+      tabIndex={0}
       key={index}
       onClose={() => {
         clearHandler?.(option);