@redocly/theme 0.51.0-next.2 → 0.51.0-next.4

package/src/components/Search/SearchAiDialog.tsx

@@ -0,0 +1,238 @@
+import React, { useEffect } from 'react';
+import styled from 'styled-components';
+
+import { useThemeConfig, useThemeHooks } from '@redocly/theme/core/hooks';
+import { Button } from '@redocly/theme/components/Button/Button';
+import { SearchAiConversationInput } from '@redocly/theme/components/Search/SearchAiConversationInput';
+import {
+  AiSearchError,
+  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';
+
+export type SearchAiDialogProps = {
+  response: string | undefined;
+  isGeneratingResponse: boolean;
+  error: AiSearchError | null;
+  resources: {
+    url: string;
+    title: string;
+  }[];
+  initialMessage?: string;
+  className?: string;
+  conversation: AiSearchConversationItem[];
+  setConversation: React.Dispatch<React.SetStateAction<AiSearchConversationItem[]>>;
+  onMessageSent: (message: string, history?: AiSearchConversationItem[]) => void;
+};
+
+export function SearchAiDialog({
+  isGeneratingResponse,
+  response,
+  initialMessage,
+  error,
+  resources,
+  onMessageSent,
+  className,
+  conversation,
+  setConversation,
+}: SearchAiDialogProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { search } = useThemeConfig();
+  const { translate } = useTranslate();
+
+  const conversationEndRef = React.useRef<HTMLDivElement>(null);
+
+  const suggestions = search?.ai?.suggestions;
+
+  const placeholder = isGeneratingResponse
+    ? translate('search.ai.generatingResponse', 'Generating response...')
+    : conversation.length > 0
+      ? translate('search.ai.followUpQuestion', 'Ask a follow up question?')
+      : translate('search.ai.placeholder', 'Ask a question...');
+
+  const scrollToBottom = () => {
+    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 }]);
+  };
+
+  useEffect(() => {
+    if (!initialMessage?.trim().length) {
+      return;
+    }
+    setConversation((prev) => [
+      ...prev,
+      { role: AiSearchConversationRole.USER, content: initialMessage },
+    ]);
+  }, [initialMessage, setConversation]);
+
+  useEffect(() => {
+    if (response === undefined || conversation.length === 0 || error) {
+      return;
+    }
+
+    setConversation((prev) => {
+      const lastMessage = prev[prev.length - 1];
+      const content: string = response || '';
+
+      if (lastMessage && lastMessage.role === AiSearchConversationRole.ASSISTANT) {
+        return [
+          ...prev.slice(0, -1),
+          { role: AiSearchConversationRole.ASSISTANT, content, resources },
+        ];
+      }
+
+      return [...prev, { role: AiSearchConversationRole.ASSISTANT, content }];
+    });
+  }, [response, conversation.length, error, resources, setConversation]);
+
+  useEffect(() => {
+    if (error) {
+      setConversation((prev) => prev.slice(0, -1));
+    }
+  }, [error, setConversation]);
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [conversation, isGeneratingResponse]);
+
+  return (
+    <SearchAiDialogWrapper data-component-name="Search/SearchAiDialog" className={className}>
+      {!conversation.length && (
+        <WelcomeWrapper>
+          <AiStarsIcon
+            color="var(--search-ai-icon-color)"
+            size="32px"
+            background="var(--search-ai-icon-bg-color)"
+            borderRadius="var(--border-radius-lg)"
+            margin="0 var(--spacing-xs) 0 0"
+          />
+          {translate(
+            'search.ai.welcomeText',
+            'Welcome to AI search! Feel free to ask me anything. How can I help you? ',
+          )}
+        </WelcomeWrapper>
+      )}
+
+      <ConversationWrapper>
+        {conversation.map((item, index) => (
+          <SearchAiMessage
+            key={`search-ai-message-${index}`}
+            role={item.role}
+            content={item.content}
+            isThinking={
+              item.role === AiSearchConversationRole.ASSISTANT &&
+              isGeneratingResponse &&
+              index === conversation.length - 1
+            }
+            resources={item.resources}
+          />
+        ))}
+
+        {error && (
+          <Admonition
+            type="danger"
+            name={translate(ERROR_CONFIG[error].headerKey, ERROR_CONFIG[error].headerDefault)}
+          >
+            {translate(ERROR_CONFIG[error].messageKey, ERROR_CONFIG[error].messageDefault)}
+          </Admonition>
+        )}
+
+        {!conversation.length && !error && (
+          <SuggestionsWrapper>
+            {suggestions?.map((suggestion) => (
+              <Button
+                key={suggestion}
+                variant="outlined"
+                onClick={() => handleOnMessageSent(suggestion)}
+              >
+                {suggestion}
+              </Button>
+            ))}
+          </SuggestionsWrapper>
+        )}
+
+        <div ref={conversationEndRef} />
+      </ConversationWrapper>
+
+      <ConversationInputWrapper>
+        <SearchAiConversationInput
+          onMessageSent={handleOnMessageSent}
+          isGeneratingResponse={isGeneratingResponse}
+          placeholder={placeholder}
+        />
+      </ConversationInputWrapper>
+    </SearchAiDialogWrapper>
+  );
+}
+
+const SearchAiDialogWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  position: relative;
+  background: var(--search-ai-dialog-bg-color);
+  overflow: hidden;
+`;
+
+const ConversationWrapper = styled.div`
+  flex: 1 1 auto;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: var(--search-ai-dialog-body-padding);
+  padding-bottom: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--search-ai-dialog-body-gap);
+  min-height: 0;
+
+  > :first-child {
+    margin-top: auto;
+  }
+  > :last-child {
+    margin-bottom: 0;
+    gap: 0;
+  }
+`;
+
+const SuggestionsWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--search-ai-suggestions-gap);
+  align-items: center;
+  justify-content: center;
+`;
+
+const ConversationInputWrapper = styled.div`
+  padding: var(--search-ai-dialog-input-padding);
+  border-top: var(--search-ai-dialog-input-border);
+  background: var(--search-ai-dialog-input-bg-color);
+`;
+
+const WelcomeWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: auto;
+  margin: var(--search-ai-welcome-margin);
+  position: relative;
+`;

package/src/components/Search/SearchAiMessage.tsx

@@ -0,0 +1,209 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Link } from '@redocly/theme/components/Link/Link';
+import { Tag } from '@redocly/theme/components/Tag/Tag';
+import { AiSearchConversationRole } from '@redocly/theme/core/constants';
+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';
+
+export type SearchAiMessageProps = {
+  role: AiSearchConversationRole;
+  content: string;
+  isThinking?: boolean;
+  resources?: {
+    url: string;
+    title: string;
+  }[];
+  className?: string;
+};
+
+export function SearchAiMessage({
+  role,
+  content,
+  isThinking,
+  resources,
+  className,
+}: SearchAiMessageProps): JSX.Element {
+  const { useMarkdownText, useTranslate } = useThemeHooks();
+  const markDownContent = useMarkdownText(content || '');
+  const { translate } = useTranslate();
+
+  return (
+    <SearchAiMessageWrapper
+      data-component-name="Search/SearchAiMessage"
+      role={role}
+      className={className}
+    >
+      {role === AiSearchConversationRole.ASSISTANT && (
+        <AiStarsIcon
+          size="32px"
+          background="var(--search-ai-icon-bg-color)"
+          borderRadius="var(--border-radius-lg)"
+          color="var(--search-ai-icon-color)"
+          margin="0 var(--spacing-xs) 0 0"
+        />
+      )}
+      <MessageWrapper role={role}>
+        {role === AiSearchConversationRole.ASSISTANT ? (
+          <>
+            <ResponseText as="div" children={markDownContent} />
+            {!isThinking && resources && resources.length > 0 && (
+              <ResourcesWrapper>
+                <ResourcesTitle data-translation-key="search.ai.resourcesFound">
+                  {resources.length} {translate('search.ai.resourcesFound', 'resources found')}
+                </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
+        )}
+        {isThinking && content.length === 0 && (
+          <ThinkingDotsWrapper>
+            <ThinkingDot />
+            <ThinkingDot />
+            <ThinkingDot />
+          </ThinkingDotsWrapper>
+        )}
+      </MessageWrapper>
+    </SearchAiMessageWrapper>
+  );
+}
+
+const SearchAiMessageWrapper = styled.div<{ role: string }>`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  width: 100%;
+  justify-content: ${({ role }) =>
+    role === AiSearchConversationRole.USER ? 'flex-end' : 'flex-start'};
+`;
+
+const ResponseText = styled(Markdown)`
+  color: var(--search-ai-text-color);
+  font-size: var(--search-ai-text-font-size);
+  line-height: var(--search-ai-text-line-height);
+  font-family: inherit;
+  white-space: break-spaces;
+
+  article {
+    > *:first-child {
+      margin-top: 0;
+    }
+    > *:last-child {
+      margin-bottom: 0;
+    }
+  }
+`;
+
+const MessageWrapper = styled.div<{ role: string }>`
+  padding: ${({ role }) =>
+      role === AiSearchConversationRole.USER ? 'var(--spacing-sm)' : 'var(--spacing-xs)'}
+    var(--spacing-sm);
+  border-radius: var(--border-radius-lg);
+  max-width: 80%;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  background-color: ${({ role }) =>
+    role === AiSearchConversationRole.USER
+      ? 'var(--search-ai-user-bg-color)'
+      : 'var(--search-ai-assistant-bg-color)'};
+  border: ${({ role }) =>
+    role === AiSearchConversationRole.USER ? 'none' : 'var(--search-ai-assistant-border)'};
+  color: ${({ role }) =>
+    role === AiSearchConversationRole.USER
+      ? 'var(--search-ai-user-text-color)'
+      : 'var(--search-ai-assistant-text-color)'};
+`;
+
+const ResourcesWrapper = styled.div`
+  gap: var(--search-ai-resources-gap);
+  display: flex;
+  flex-direction: column;
+  margin: var(--spacing-xs) 0;
+`;
+
+const ResourcesTitle = styled.div`
+  font-weight: var(--search-ai-resources-title-font-weight);
+  font-size: var(--search-ai-resources-title-font-size);
+  line-height: var(--search-ai-resources-title-line-height);
+`;
+
+const ResourceTagsWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--search-ai-resource-tags-gap);
+`;
+
+const ResourceTag = styled(Tag)`
+  .tag-default {
+    --tag-color: var(--search-ai-resource-tag-text-color);
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    display: inline-block;
+  }
+  svg {
+    min-width: var(--search-ai-resource-tag-icon-size);
+    min-height: var(--search-ai-resource-tag-icon-size);
+    flex-shrink: 0;
+  }
+  > div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+  }
+`;
+
+const ThinkingDotsWrapper = styled.div`
+  display: flex;
+  gap: var(--search-ai-thinking-dots-gap);
+  padding: var(--search-ai-thinking-dots-padding);
+`;
+
+const ThinkingDot = styled.div`
+  width: var(--search-ai-thinking-dot-size);
+  height: var(--search-ai-thinking-dot-size);
+  border-radius: 50%;
+  background: var(--search-ai-thinking-dot-color);
+  animation: bounce 1.4s infinite ease-in-out;
+
+  &:nth-child(1) {
+    animation-delay: -0.32s;
+  }
+  &:nth-child(2) {
+    animation-delay: -0.16s;
+  }
+  &:nth-child(3) {
+    animation-delay: 0s;
+  }
+
+  @keyframes bounce {
+    0%,
+    80%,
+    100% {
+      opacity: 0.2;
+      transform: scale(0.8);
+    }
+    40% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+`;

package/src/components/Search/SearchAiResponse.tsx

@@ -6,14 +6,16 @@ import { CheckmarkFilledIcon } from '@redocly/theme/icons/CheckmarkFilledIcon/Ch
 import { DocumentIcon } from '@redocly/theme/icons/DocumentIcon/DocumentIcon';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { Link } from '@redocly/theme/components/Link/Link';
-import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { useThemeConfig, useThemeHooks } from '@redocly/theme/core/hooks';
 import { Markdown } from '@redocly/theme/components/Markdown/Markdown';
+import { Typography } from '@redocly/theme/components/Typography/Typography';
 import { Admonition } from '@redocly/theme/components/Admonition/Admonition';
 import { ErrorFilledIcon } from '@redocly/theme/icons/ErrorFilledIcon/ErrorFilledIcon';
 import {
   AiSearchError,
   AI_SEARCH_ERROR_CONFIG as ERROR_CONFIG,
 } from '@redocly/theme/core/constants';
+import { ChatIcon } from '@redocly/theme/icons/ChatIcon/ChatIcon';
 
 export type SearchAiResponseProps = {
   question: string;
@@ -24,17 +26,22 @@ export type SearchAiResponseProps = {
     url: string;
     title: string;
   }[];
+  onSuggestionClick: (suggestion: string) => void;
 };
 export function SearchAiResponse(props: SearchAiResponseProps): JSX.Element {
   const { useMarkdownText } = useThemeHooks();
-  const { question, response, isGeneratingResponse, resources, error } = props;
+  const { question, response, isGeneratingResponse, resources, error, onSuggestionClick } = props;
 
+  const { search } = useThemeConfig();
   const { useTranslate } = useThemeHooks();
+
   const { translate } = useTranslate();
   const markdownResponse = useMarkdownText(response || '');
 
   let responseContainer = null;
 
+  const suggestions = search?.ai?.suggestions;
+
   const hasPendingOrReceivedResponse = response || isGeneratingResponse || error;
   if (hasPendingOrReceivedResponse) {
     let icon;
@@ -96,6 +103,28 @@ export function SearchAiResponse(props: SearchAiResponseProps): JSX.Element {
 
   return (
     <ResponseWrapper data-component-name="Search/SearchAiResponse">
+      {!question && (
+        <>
+          {suggestions?.length && (
+            <SuggestionsWrapper>
+              <SuggestionsTitle>
+                {translate('search.ai.suggestionsTitle', 'Suggestions')}
+              </SuggestionsTitle>
+              {suggestions.map((suggestion, idx) => (
+                <SuggestionItem
+                  key={idx.toString()}
+                  onClick={() => {
+                    onSuggestionClick(suggestion);
+                  }}
+                >
+                  <ChatIcon color="--color-blueberry-6" />
+                  <Typography color="--search-ai-suggestions-text-color">{suggestion}</Typography>
+                </SuggestionItem>
+              ))}
+            </SuggestionsWrapper>
+          )}
+        </>
+      )}
       {responseContainer}
     </ResponseWrapper>
   );
@@ -180,11 +209,38 @@ const ResourceTags = styled.div`
   flex-wrap: wrap;
   gap: var(--search-ai-resource-tags-gap);
 `;
+
 const ResourceTag = styled(Tag).attrs({
   className: 'tag-resource',
-  'data-component-name': 'Tags/SearchAiResourceTag',
 })`
   .tag-default {
     --tag-color: --search-ai-resource-tag-text-color;
   }
 `;
+
+const SuggestionsWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+
+  gap: var(--spacing-sm);
+  margin-left: var(--spacing-xs);
+`;
+
+const SuggestionsTitle = styled(Typography)`
+  font-size: var(--search-ai-suggestions-title-font-size);
+  line-height: var(--search-ai-suggestions-title-line-height);
+  font-weight: var(--search-ai-suggestions-title-font-weight);
+
+  color: var(--search-ai-suggestions-title-text-color);
+`;
+
+const SuggestionItem = styled.div`
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+
+  gap: var(--spacing-xs);
+`;