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

package/src/components/Search/variables.ts

@@ -144,27 +144,24 @@ 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);
@@ -173,40 +170,50 @@ export const search = css`
   --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);
@@ -244,52 +251,8 @@ export const search = css`
 
   --search-ai-conversation-input-send-button-right: 12px;
   --search-ai-conversation-input-send-button-padding: 5px;
-  --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-border-disabled: 1px solid var(--button-border-color-disabled);
   --search-ai-conversation-input-send-button-border-radius: var(--border-radius);
-
-  /**
-  * @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-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-spinner-icon-color: var(--icon-color-interactive);
-  --search-ai-checkmark-icon-color: var(--icon-color-interactive);
+  --search-ai-conversation-input-send-button-border-disabled: 1px solid var(--button-border-color-disabled);
 
   // @tokens End
 `;

package/src/core/hooks/index.ts

@@ -26,6 +26,7 @@ export * from './use-language-picker';
 export * from './use-product-picker';
 export * from './search/use-search-dialog';
 export * from './search/use-search-filter';
+export * from './search/use-feedback-tooltip';
 export * from './use-controlled-state';
 export * from './use-codeblock-tabs-controls';
 export * from './code-walkthrough/use-code-walkthrough';

package/src/core/hooks/search/use-feedback-tooltip.ts

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+
+import { useControl } from '../use-control';
+
+type UseFeedbackTooltipReturn = {
+  isOpen: boolean;
+  showTooltip: () => void;
+};
+
+const DEFAULT_TOOLTIP_DURATION = 1500;
+
+export function useFeedbackTooltip(): UseFeedbackTooltipReturn {
+  const [closeTooltipTimeout, setCloseTooltipTimeout] = useState<NodeJS.Timeout | null>(null);
+  const tooltipControl = useControl();
+
+  const showTooltip = () => {
+    tooltipControl.handleOpen();
+    if (closeTooltipTimeout) {
+      clearTimeout(closeTooltipTimeout);
+    }
+    const newCloseTooltipTimeout = setTimeout(() => {
+      tooltipControl.handleClose();
+      setCloseTooltipTimeout(null);
+    }, DEFAULT_TOOLTIP_DURATION);
+    setCloseTooltipTimeout(newCloseTooltipTimeout);
+  };
+
+  return {
+    isOpen: tooltipControl.isOpened,
+    showTooltip,
+  };
+}

package/src/core/hooks/use-telemetry-fallback.ts

@@ -39,6 +39,7 @@ export const useTelemetryFallback = () => ({
   sendSearchQueryMessage: () => {},
   sendSearchAiOpenedMessage: () => {},
   sendSearchAIQueryMessage: () => {},
+  sendSearchAIFeedbackMessage: () => {},
   sendFeedbackMessage: () => {},
   sendSearchResultClickedMessage: () => {},
   sendRedirectMessage: () => {},

package/src/core/types/l10n.ts

@@ -95,6 +95,9 @@ export type TranslationKey =
   | 'search.ai.resourcesFound'
   | 'search.ai.resourcesFound.basedOn'
   | 'search.ai.resourcesFound.resources'
+  | 'search.ai.feedback.title'
+  | 'search.ai.feedback.detailsPlaceholder'
+  | 'search.ai.feedback.thanks'
   | 'search.ai.button'
   | 'search.ai.label'
   | 'search.ai.disclaimer'

package/src/core/types/search.ts

@@ -93,11 +93,20 @@ export type AiSearchErrorConfig = {
   messageDefault: string;
 };
 
+export enum FeedbackType {
+  Like = 'like',
+  Dislike = 'dislike',
+}
+
+export type SearchAiMessageResource = {
+  url: string;
+  title: string;
+};
+
 export type AiSearchConversationItem = {
   role: AiSearchConversationRole;
   content: string;
-  resources?: {
-    url: string;
-    title: string;
-  }[];
+  resources?: SearchAiMessageResource[];
+  messageId?: string;
+  feedback?: FeedbackType;
 };

package/src/core/utils/frontmatter-translate.ts

@@ -0,0 +1,9 @@
+/**
+ * Utility function for use in React frontmatter
+ * This function creates a string that will be processed by the frontmatter loader
+ * to convert it into a translation key object
+ */
+export const frontmatterTranslate = (key: string, defaultValue: string): string => {
+  const escapedDefaultValue = defaultValue.replace(/'/g, "\\'");
+  return `frontmatterTranslate('${key}', '${escapedDefaultValue}')`;
+};

package/src/core/utils/index.ts

@@ -38,3 +38,4 @@ export * from './enhanced-smoothstep';
 export * from './icon-resolver';
 export * from './dynamic';
 export * from './tabs';
+export * from './frontmatter-translate';

package/src/icons/ThumbDownFilledIcon/ThumbDownFilledIcon.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => {
+  const { color, ...restProps } = props;
+
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...restProps}
+    >
+      <path
+        d="M3.0625 0.875H0.875V7H3.0625V0.875Z"
+        fill={getCssColorVariable(color) || '#DCDDE5'}
+      />
+      <path
+        d="M10.0625 0.875H3.9375V7.35118L5.26846 9.34771L5.63828 11.9362C5.66886 12.1443 5.77308 12.3346 5.932 12.4725C6.09092 12.6103 6.29402 12.6866 6.5044 12.6875H6.5625C6.91048 12.6871 7.2441 12.5487 7.49016 12.3027C7.73621 12.0566 7.87462 11.723 7.875 11.375V8.75H11.375C11.839 8.74948 12.2838 8.56494 12.6119 8.23686C12.9399 7.90879 13.1245 7.46397 13.125 7V3.9375C13.1241 3.12555 12.8012 2.34712 12.227 1.77298C11.6529 1.19885 10.8744 0.875903 10.0625 0.875Z"
+        fill={getCssColorVariable(color) || '#DCDDE5'}
+      />
+    </svg>
+  );
+};
+
+export const ThumbDownFilledIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ThumbDownFilledIcon/ThumbDownFilledIcon',
+}))<IconProps>`
+  height: ${({ size }) => size || '14px'};
+  width: ${({ size }) => size || '14px'};
+  color: ${({ color }) => color && getCssColorVariable(color)};
+`;

package/src/icons/ThumbUpFilledIcon/ThumbUpFilledIcon.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => {
+  const { color, ...restProps } = props;
+
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...restProps}
+    >
+      <path d="M3.0625 7H0.875V13.125H3.0625V7Z" fill={getCssColorVariable(color) || '#DCDDE5'} />
+      <path
+        d="M10.0625 13.125H3.9375V6.64882L5.26846 4.65229L5.63828 2.06382C5.66886 1.85567 5.77308 1.66539 5.932 1.52753C6.09092 1.38967 6.29402 1.31338 6.5044 1.3125H6.5625C6.91048 1.31288 7.2441 1.45129 7.49016 1.69734C7.73621 1.9434 7.87462 2.27702 7.875 2.625V5.25H11.375C11.839 5.25052 12.2838 5.43506 12.6119 5.76314C12.9399 6.09121 13.1245 6.53603 13.125 7V10.0625C13.1241 10.8744 12.8012 11.6529 12.227 12.227C11.6529 12.8012 10.8744 13.1241 10.0625 13.125Z"
+        fill={getCssColorVariable(color) || '#DCDDE5'}
+      />
+    </svg>
+  );
+};
+
+export const ThumbUpFilledIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ThumbUpFilledIcon/ThumbUpFilledIcon',
+}))<IconProps>`
+  height: ${({ size }) => size || '14px'};
+  width: ${({ size }) => size || '14px'};
+  color: ${({ color }) => color && getCssColorVariable(color)};
+`;