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

package/src/components/Search/SearchAiMessage.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { memo, useState } from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
 
+import { FeedbackType, type SearchAiMessageResource } from '@redocly/theme/core/types';
 import { Link } from '@redocly/theme/components/Link/Link';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { AiSearchConversationRole } from '@redocly/theme/core/constants';
@@ -10,28 +11,72 @@ import { useThemeHooks } from '@redocly/theme/core/hooks';
 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 './SearchAiActionButtons';
+import { SearchAiNegativeFeedbackForm } from './SearchAiNegativeFeedbackForm';
 
 export type SearchAiMessageProps = {
   role: AiSearchConversationRole;
   content: string;
   isThinking?: boolean;
-  resources?: {
-    url: string;
-    title: string;
-  }[];
+  resources?: SearchAiMessageResource[];
   className?: string;
+  messageId?: string;
+  feedback?: FeedbackType;
+  onFeedbackChange: (messageId: string, feedback: FeedbackType | undefined) => void;
 };
 
-export function SearchAiMessage({
+function SearchAiMessageComponent({
   role,
   content,
   isThinking,
   resources,
   className,
+  messageId,
+  feedback,
+  onFeedbackChange,
 }: SearchAiMessageProps): JSX.Element {
-  const { useMarkdownText, useTranslate } = useThemeHooks();
+  const { useMarkdownText, useTranslate, useTelemetry } = useThemeHooks();
   const markDownContent = useMarkdownText(content || '');
   const { translate } = useTranslate();
+  const telemetry = useTelemetry();
+  const [feedbackSent, setFeedbackSent] = useState(false);
+
+  const hasResources = !isThinking && resources && resources.length > 0;
+  const resourcesCount = resources?.length ?? 0;
+
+  const showSuccessMessage = feedbackSent && feedback;
+
+  const sendFeedbackTelemetry = (feedbackValue: FeedbackType, dislikeReason?: string) => {
+    if (!messageId) return;
+
+    try {
+      telemetry.sendSearchAIFeedbackMessage({
+        feedback: feedbackValue,
+        messageId,
+        reason: dislikeReason,
+      });
+    } catch (error) {
+      console.error('Error sending feedback', error);
+    }
+  };
+
+  const handleFeedbackClick = (feedbackValue: FeedbackType, reason?: string) => {
+    if (!messageId) {
+      return;
+    }
+
+    if (!reason) {
+      onFeedbackChange(messageId, feedbackValue);
+    }
+
+    sendFeedbackTelemetry(feedbackValue, reason);
+
+    if (feedbackValue === FeedbackType.Like || reason) {
+      setFeedbackSent(true);
+    }
+  };
 
   return (
     <SearchAiMessageWrapper
@@ -49,46 +94,99 @@ export function SearchAiMessage({
           margin="0 var(--spacing-xs) 0 0"
         />
       )}
-      <MessageWrapper role={role}>
-        {role === AiSearchConversationRole.ASSISTANT ? (
-          <>
-            <ResponseText as="div" children={markDownContent} data-testid="response-text" />
-            {!isThinking && resources && resources.length > 0 && (
-              <ResourcesWrapper data-testid="resources-wrapper">
-                <ResourcesTitle data-translation-key="search.ai.resourcesFound">
-                  {translate('search.ai.resourcesFound.basedOn', 'Based on')} {resources.length}{' '}
-                  {translate('search.ai.resourcesFound.resources', 'resources')}
-                </ResourcesTitle>
-                <ResourceTagsWrapper>
-                  {resources.map((resource, idx) => (
-                    <Link key={idx} to={resource.url} target="_blank">
-                      <ResourceTag
-                        borderless
-                        icon={<DocumentIcon color="--search-ai-resource-tag-icon-color" />}
-                      >
-                        {resource.title}
-                      </ResourceTag>
-                    </Link>
-                  ))}
-                </ResourceTagsWrapper>
-              </ResourcesWrapper>
-            )}
-          </>
-        ) : (
-          content
+      <MessageContentWrapper>
+        <MessageWrapper role={role}>
+          {role === AiSearchConversationRole.ASSISTANT ? (
+            <>
+              <ResponseText as="div" children={markDownContent} data-testid="response-text" />
+              {hasResources && (
+                <>
+                  <ResourcesWrapper data-testid="resources-wrapper">
+                    <ResourcesTitle data-translation-key="search.ai.resourcesFound">
+                      {translate('search.ai.resourcesFound.basedOn', 'Based on')} {resourcesCount}{' '}
+                      {translate('search.ai.resourcesFound.resources', 'resources')}
+                    </ResourcesTitle>
+                    <ResourceTagsWrapper>
+                      {resources?.map((resource, idx) => (
+                        <Link key={`${resource.url}-${idx}`} to={resource.url} target="_blank">
+                          <ResourceTag
+                            borderless
+                            icon={<DocumentIcon color="--search-ai-resource-tag-icon-color" />}
+                          >
+                            {resource.title}
+                          </ResourceTag>
+                        </Link>
+                      ))}
+                    </ResourceTagsWrapper>
+                  </ResourcesWrapper>
+                  <FeedbackWrapper>
+                    <SearchAiActionButtons
+                      content={content}
+                      feedback={feedback}
+                      onFeedback={handleFeedbackClick}
+                      disabled={feedbackSent}
+                    />
+                  </FeedbackWrapper>
+                </>
+              )}
+            </>
+          ) : (
+            content
+          )}
+          {isThinking && content.length === 0 && (
+            <ThinkingDotsWrapper data-testid="thinking-dots-wrapper">
+              <ThinkingDot />
+              <ThinkingDot />
+              <ThinkingDot />
+            </ThinkingDotsWrapper>
+          )}
+        </MessageWrapper>
+        {messageId && feedback === FeedbackType.Dislike && !showSuccessMessage && (
+          <SearchAiNegativeFeedbackForm
+            messageId={messageId}
+            onClose={onFeedbackChange}
+            onSubmit={(reason) => handleFeedbackClick(FeedbackType.Dislike, reason)}
+          />
         )}
-        {isThinking && content.length === 0 && (
-          <ThinkingDotsWrapper data-testid="thinking-dots-wrapper">
-            <ThinkingDot />
-            <ThinkingDot />
-            <ThinkingDot />
-          </ThinkingDotsWrapper>
+        {showSuccessMessage && (
+          <SuccessMessageWrapper data-component-name="Search/SearchAiMessage/Success">
+            <CheckmarkOutlineIcon size="20px" color="var(--color-success-base)" />
+            <SuccessMessageText>
+              {translate('search.ai.feedback.thanks', 'Thank you for your feedback!')}
+            </SuccessMessageText>
+          </SuccessMessageWrapper>
         )}
-      </MessageWrapper>
+      </MessageContentWrapper>
     </SearchAiMessageWrapper>
   );
 }
 
+function areResourcesEqual(
+  prev?: SearchAiMessageResource[],
+  next?: SearchAiMessageResource[],
+): boolean {
+  if (prev === next) return true;
+
+  if (!prev || !next || prev.length !== next.length) return false;
+
+  return prev.every((resource, index) => {
+    const nextResource = next[index];
+    return resource.url === nextResource.url && resource.title === nextResource.title;
+  });
+}
+
+export const SearchAiMessage = memo(SearchAiMessageComponent, (prevProps, nextProps) => {
+  return (
+    prevProps.role === nextProps.role &&
+    prevProps.content === nextProps.content &&
+    prevProps.isThinking === nextProps.isThinking &&
+    prevProps.messageId === nextProps.messageId &&
+    prevProps.feedback === nextProps.feedback &&
+    prevProps.onFeedbackChange === nextProps.onFeedbackChange &&
+    areResourcesEqual(prevProps.resources, nextProps.resources)
+  );
+});
+
 const SearchAiMessageWrapper = styled.div<{ role: string }>`
   display: flex;
   flex-direction: row;
@@ -98,6 +196,14 @@ const SearchAiMessageWrapper = styled.div<{ role: string }>`
     role === AiSearchConversationRole.USER ? 'flex-end' : 'flex-start'};
 `;
 
+const MessageContentWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  max-width: 80%;
+  min-width: 0;
+`;
+
 const ResponseText = styled(Markdown)`
   color: var(--search-ai-text-color);
   font-size: var(--search-ai-text-font-size);
@@ -120,7 +226,8 @@ const MessageWrapper = styled.div<{ role: string }>`
       role === AiSearchConversationRole.USER ? 'var(--spacing-sm)' : 'var(--spacing-xs)'}
     var(--spacing-sm);
   border-radius: var(--border-radius-lg);
-  max-width: 80%;
+  width: fit-content;
+  max-width: 100%;
   word-wrap: break-word;
   white-space: pre-wrap;
   background-color: ${({ role }) =>
@@ -139,7 +246,13 @@ const ResourcesWrapper = styled.div`
   gap: var(--search-ai-resources-gap);
   display: flex;
   flex-direction: column;
-  margin: var(--spacing-xs) 0;
+  margin: 0;
+`;
+const FeedbackWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: var(--search-ai-feedback-gap);
+  margin-top: var(--spacing-sm);
 `;
 
 const ResourcesTitle = styled.div`
@@ -210,3 +323,19 @@ const ThinkingDot = styled.div`
     }
   }
 `;
+
+const SuccessMessageWrapper = styled.div`
+  max-width: fit-content;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm);
+  background: var(--color-success-bg);
+  border: 1px solid var(--color-success-border);
+  border-radius: var(--border-radius-lg);
+`;
+
+const SuccessMessageText = styled.div`
+  font-size: var(--font-size-base);
+  color: var(--color-success-darker);
+`;

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/SearchDialog.tsx

@@ -48,6 +48,7 @@ export function SearchDialog({
   const products = useProducts();
   const currentProduct = useCurrentProduct();
   const [product, setProduct] = useState(currentProduct);
+  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 {
@@ -62,7 +63,7 @@ export function SearchDialog({
     advancedSearch,
     askAi,
     groupField,
-  } = useSearch(product?.name, autoSearchDisabled);
+  } = useSearch(product?.name, autoSearchDisabled, searchSessionId);
   const {
     isFilterOpen,
     onFilterToggle,
@@ -72,10 +73,24 @@ export function SearchDialog({
     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) : [];
@@ -150,13 +165,14 @@ export function SearchDialog({
               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(
@@ -226,6 +242,9 @@ export function SearchDialog({
                         if (query.trim()) {
                           aiSearch.askQuestion(query);
                         }
+                        telemetry.sendSearchAiOpenedMessage({
+                          method: 'ai_search_button',
+                        });
                       }}
                     >
                       {translate('search.ai.button', 'Search with AI')}
@@ -249,17 +268,22 @@ export function SearchDialog({
                 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>
@@ -296,6 +320,9 @@ export function SearchDialog({
                       if (query.trim()) {
                         aiSearch.askQuestion(query);
                       }
+                      telemetry.sendSearchAiOpenedMessage({
+                        method: 'ai_search_input',
+                      });
                     }}
                     onKeyDown={(e) => {
                       if (e.key === 'Enter') {
@@ -303,6 +330,9 @@ export function SearchDialog({
                         if (query.trim()) {
                           aiSearch.askQuestion(query);
                         }
+                        telemetry.sendSearchAiOpenedMessage({
+                          method: 'ai_search_input',
+                        });
                       }
                     }}
                     ref={aiQueryRef}
@@ -389,6 +419,7 @@ export function SearchDialog({
                         telemetry.sendSearchRecentClickedMessage({
                           query,
                           index: index.toString(),
+                          searchSessionId,
                         });
                         setQuery(query);
                         focusSearchInput();
@@ -524,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;
@@ -640,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>