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

package/src/components/Search/SearchAiConversationInput.tsx

@@ -13,6 +13,8 @@ type SearchAiConversationInputProps = {
   isGeneratingResponse: boolean;
   placeholder?: string;
   className?: string;
+  disabled?: boolean;
+  multiline?: boolean;
 };
 
 export function SearchAiConversationInput({
@@ -20,11 +22,13 @@ export function SearchAiConversationInput({
   onMessageSent,
   className,
   placeholder,
+  disabled,
+  multiline = false,
 }: SearchAiConversationInputProps): JSX.Element {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
-  const inputRef = useRef<HTMLInputElement>(null);
+  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);
   const [query, setQuery] = useState('');
 
   useEffect(() => {
@@ -36,35 +40,54 @@ export function SearchAiConversationInput({
   }, [isGeneratingResponse]);
 
   const handleSendMessage = () => {
+    if (disabled) return;
+
     setQuery('');
     onMessageSent(query);
   };
 
-  const handleOnKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
+  const handleOnKeyDown = (
+    e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ): void => {
     if (e.key === 'Enter' && !isGeneratingResponse) {
+      if (multiline && e.shiftKey) {
+        return; // Allow new line in textarea
+      }
+      e.preventDefault();
       handleSendMessage();
     }
   };
 
-  const isDisabled = isGeneratingResponse || query.trim().length === 0;
+  const isDisabled = disabled || isGeneratingResponse || query.trim().length === 0;
+
+  const commonProps = {
+    placeholder:
+      placeholder || translate('search.ai.followUpQuestion', 'Ask a follow up question?'),
+    onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
+      setQuery(e.target.value),
+    onKeyDown: handleOnKeyDown,
+    value: query,
+    disabled: disabled || isGeneratingResponse,
+    maxLength: AI_SEARCH_MAX_MESSAGE_LENGTH,
+  };
 
   return (
     <SearchAiConversationInputWrapper
       data-component-name="Search/SearchAiConversationInput"
       className={className}
     >
-      <ConversationInput
-        ref={inputRef}
-        type="text"
-        placeholder={
-          placeholder || translate('search.ai.followUpQuestion', 'Ask a follow up question?')
-        }
-        onChange={(e) => setQuery(e.target.value)}
-        onKeyUp={handleOnKeyUp}
-        value={query}
-        disabled={isGeneratingResponse}
-        maxLength={AI_SEARCH_MAX_MESSAGE_LENGTH}
-      />
+      {multiline ? (
+        <ConversationTextarea
+          ref={inputRef as React.RefObject<HTMLTextAreaElement>}
+          {...commonProps}
+        />
+      ) : (
+        <ConversationInput
+          ref={inputRef as React.RefObject<HTMLInputElement>}
+          type="text"
+          {...commonProps}
+        />
+      )}
 
       <SendButton
         disabled={isDisabled}
@@ -93,9 +116,10 @@ const SearchAiConversationInputWrapper = styled.div`
   position: relative;
 `;
 
-const ConversationInput = styled.input`
+const inputStyles = `
   width: 100%;
   padding: var(--search-ai-conversation-input-padding);
+  padding-right: var(--search-ai-conversation-input-padding-right, 52px);
   border: var(--search-ai-conversation-input-border);
   border-radius: var(--search-ai-conversation-input-border-radius);
   background-color: var(--search-ai-conversation-input-bg-color);
@@ -111,21 +135,40 @@ const ConversationInput = styled.input`
     border-color: var(--search-ai-conversation-input-border-color-focus);
   }
 
+  &:disabled {
+    background-color: var(--search-ai-conversation-input-bg-color-disabled);
+  }
+
   &:focus:disabled {
     border-color: var(--search-ai-conversation-input-border-color-disabled);
   }
 `;
 
+const ConversationInput = styled.input`
+  ${inputStyles}
+  height: var(--search-ai-conversation-input-min-height);
+`;
+
+const ConversationTextarea = styled.textarea`
+  ${inputStyles}
+  min-height: var(--search-ai-conversation-input-min-height);
+  max-height: var(--search-ai-conversation-input-max-height);
+  resize: none;
+  field-sizing: content;
+`;
+
 const SendButton = styled(Button)`
   position: absolute;
   right: var(--search-ai-conversation-input-send-button-right);
-  top: 50%;
-  transform: translateY(-50%);
+  bottom: var(--search-ai-conversation-input-send-button-bottom);
+  transform: translateY(50%);
   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);

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