@redocly/theme 0.59.0-next.7 → 0.59.0-next.8

package/src/components/Search/SearchAiDialog.tsx

@@ -1,7 +1,12 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useCallback } from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
+import type {
+  AiSearchConversationItem,
+  SearchAiMessageResource,
+  FeedbackType,
+} from '@redocly/theme/core/types';
 
 import { useThemeConfig, useThemeHooks } from '@redocly/theme/core/hooks';
 import { Button } from '@redocly/theme/components/Button/Button';
@@ -11,7 +16,6 @@ import {
   AI_SEARCH_ERROR_CONFIG as ERROR_CONFIG,
   AiSearchConversationRole,
 } from '@redocly/theme/core/constants';
-import { AiSearchConversationItem } from '@redocly/theme/core/types';
 import { SearchAiMessage } from '@redocly/theme/components/Search/SearchAiMessage';
 import { Admonition } from '@redocly/theme/components/Admonition/Admonition';
 import { AiStarsIcon } from '@redocly/theme/icons/AiStarsIcon/AiStarsIcon';
@@ -20,15 +24,16 @@ export type SearchAiDialogProps = {
   response: string | undefined;
   isGeneratingResponse: boolean;
   error: AiSearchError | null;
-  resources: {
-    url: string;
-    title: string;
-  }[];
+  resources: SearchAiMessageResource[];
   initialMessage?: string;
   className?: string;
   conversation: AiSearchConversationItem[];
   setConversation: React.Dispatch<React.SetStateAction<AiSearchConversationItem[]>>;
-  onMessageSent: (message: string, history?: AiSearchConversationItem[]) => void;
+  onMessageSent: (
+    message: string,
+    history?: AiSearchConversationItem[],
+    messageId?: string,
+  ) => void;
 };
 
 export function SearchAiDialog({
@@ -56,21 +61,28 @@ export function SearchAiDialog({
       ? translate('search.ai.followUpQuestion', 'Ask a follow up question?')
       : translate('search.ai.placeholder', 'Ask a question...');
 
-  const scrollToBottom = () => {
+  const scrollToBottom = useCallback(() => {
     conversationEndRef.current?.scrollIntoView({ block: 'end' });
-  };
+  }, []);
 
-  const handleOnMessageSent = (message: string) => {
-    if (!message.trim()) {
-      return;
-    }
-    const mappedHistory = conversation.map(({ role, content }) => ({
-      role,
-      content,
-    }));
-    onMessageSent(message, mappedHistory);
-    setConversation((prev) => [...prev, { role: AiSearchConversationRole.USER, content: message }]);
-  };
+  const handleOnMessageSent = useCallback(
+    (message: string) => {
+      if (!message.trim()) {
+        return;
+      }
+      const mappedHistory = conversation.map(({ role, content }) => ({
+        role,
+        content,
+      }));
+
+      onMessageSent(message, mappedHistory);
+      setConversation((prev) => [
+        ...prev,
+        { role: AiSearchConversationRole.USER, content: message },
+      ]);
+    },
+    [conversation, onMessageSent, setConversation],
+  );
 
   useEffect(() => {
     if (!initialMessage?.trim().length) {
@@ -94,11 +106,16 @@ export function SearchAiDialog({
       if (lastMessage && lastMessage.role === AiSearchConversationRole.ASSISTANT) {
         return [
           ...prev.slice(0, -1),
-          { role: AiSearchConversationRole.ASSISTANT, content, resources },
+          {
+            role: AiSearchConversationRole.ASSISTANT,
+            content,
+            resources,
+            messageId: lastMessage.messageId,
+          },
         ];
       }
 
-      return [...prev, { role: AiSearchConversationRole.ASSISTANT, content }];
+      return [...prev, { role: AiSearchConversationRole.ASSISTANT, content, resources }];
     });
   }, [response, conversation.length, error, resources, setConversation]);
 
@@ -110,7 +127,16 @@ export function SearchAiDialog({
 
   useEffect(() => {
     scrollToBottom();
-  }, [conversation, isGeneratingResponse]);
+  }, [conversation, isGeneratingResponse, scrollToBottom]);
+
+  const handleFeedbackChange = useCallback(
+    (messageId: string, feedback: FeedbackType | undefined) => {
+      setConversation((prev) =>
+        prev.map((item) => (item.messageId === messageId ? { ...item, feedback } : item)),
+      );
+    },
+    [setConversation],
+  );
 
   return (
     <SearchAiDialogWrapper data-component-name="Search/SearchAiDialog" className={className}>
@@ -142,6 +168,9 @@ export function SearchAiDialog({
               index === conversation.length - 1
             }
             resources={item.resources}
+            messageId={item.messageId}
+            feedback={item.feedback}
+            onFeedbackChange={handleFeedbackChange}
           />
         ))}
 

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