@redocly/theme 0.59.0-rc.3 → 0.60.0-custom.2

package/src/components/Search/SearchAiNegativeFeedbackForm.tsx

@@ -0,0 +1,212 @@
+import React, { useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+
+import { 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, reason?: string) => void;
+  onSubmit: (reason: string) => void;
+  formRef?: React.Ref<HTMLDivElement>;
+};
+
+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,
+  formRef,
+}: 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" ref={formRef}>
+      <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, FeedbackType.Dislike, 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)}>
+            {translate('search.ai.feedback.more', '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

@@ -9,6 +9,7 @@ import {
   type SearchFilterItem,
 } from '@redocly/theme/core/types';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 type SearchGroupsProps = {
   facets: SearchFacet[];
@@ -26,6 +27,8 @@ export function SearchGroups({
   onQuickFilterReset,
 }: SearchGroupsProps): JSX.Element {
   const groupFacets = facets.filter((facet) => facet.field === groupField);
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
 
   const handleGroupTagClick = (
     value: string,
@@ -45,8 +48,9 @@ export function SearchGroups({
         borderless
         active={!searchFilter.some((item) => item.isQuickFilter)}
         onClick={() => searchFilter.some((item) => item.isQuickFilter) && onQuickFilterReset()}
+        selectable
       >
-        All
+        {translate('search.groups.all', 'All')}
       </GroupTag>
       <Divider />
       {groupFacets.flatMap((facet) =>
@@ -61,6 +65,7 @@ export function SearchGroups({
               onClick={() => handleGroupTagClick(value, facet.field, active, currentValues)}
               active={active}
               borderless
+              selectable
             >
               {value} {isCounterVisible && <span>{count}</span>}
             </GroupTag>

package/src/components/Search/SearchHighlight.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 function slicer(str: string, arr: string[]): any[] {
   const markOpenIndex = str.indexOf('<mark>');
   const markCloseIndex = str.indexOf('</mark>');

package/src/components/Search/SearchItem.tsx

@@ -9,8 +9,9 @@ import { Link } from '@redocly/theme/components/Link/Link';
 import { Image } from '@redocly/theme/components/Image/Image';
 import { searchHighlight } from '@redocly/theme/components/Search/SearchHighlight';
 import { Badge } from '@redocly/theme/components/Badge/Badge';
-import { trimText } from '@redocly/theme/core/utils';
+import { trimText, getOperationColor } from '@redocly/theme/core/utils';
 import { ReturnKeyIcon } from '@redocly/theme/icons/ReturnKeyIcon/ReturnKeyIcon';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 type ActiveItem<T> = T & { active?: boolean };
 export type SearchItemProps = {
@@ -32,6 +33,8 @@ export function SearchItem({
   innerRef,
 }: SearchItemProps): JSX.Element {
   const ref = useRef<HTMLAnchorElement>(null);
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
 
   useEffect(() => {
     if (item.active) {
@@ -45,6 +48,11 @@ export function SearchItem({
     highlight.parameters && highlight.parameters.length ? highlight.parameters[0] : null;
   const shouldShowPath = document.path && document.path?.length > 1;
 
+  const httpColor = getOperationColor({
+    isAdditionalOperation: document.isAdditionalOperation,
+    httpVerb: document.httpMethod || '',
+  });
+
   return (
     <SearchItemWrapper
       className={className}
@@ -74,7 +82,7 @@ export function SearchItem({
           )}
           {document.httpMethod ? (
             <SearchItemOperation>
-              <SearchItemOperationTag color={document.httpMethod}>
+              <SearchItemOperationTag color={httpColor}>
                 {document.httpMethod.toUpperCase()}
               </SearchItemOperationTag>
               {highlight.httpPath ? searchHighlight(highlight.httpPath) : document.httpPath}
@@ -84,7 +92,11 @@ export function SearchItem({
             <SearchItemTitle>
               {highlight.title ? searchHighlight(highlight.title) : document.title}
             </SearchItemTitle>
-            {document.deprecated ? <SearchItemBadge deprecated>Deprecated</SearchItemBadge> : null}
+            {document.deprecated ? (
+              <SearchItemBadge deprecated>
+                {translate('search.searchItem.deprecated', 'Deprecated')}
+              </SearchItemBadge>
+            ) : null}
             {document.badges
               ? document.badges.map(({ name, color }) => (
                   <SearchItemBadge color={color || 'var(--color-info-base)'} key={name}>

package/src/components/Search/variables.ts

@@ -1,5 +1,6 @@
 import { css } from 'styled-components';
 
+/* eslint-disable theme/no-raw-colors-in-styles */
 export const search = css`
   /**
     * @tokens Search
@@ -144,68 +145,76 @@ 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);
   --search-ai-assistant-bg-color: var(--layer-color);
   --search-ai-assistant-text-color: var(--text-color-primary);
   --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);
@@ -232,6 +241,7 @@ export const search = css`
   * @tokens AI Search Conversation Input
   */
   --search-ai-conversation-input-bg-color: var(--bg-color);
+  --search-ai-conversation-input-bg-color-disabled: var(--color-warm-grey-1);
   --search-ai-conversation-input-padding: var(--spacing-sm) var(--spacing-md);
   --search-ai-conversation-input-border: 1px solid var(--border-color-secondary);
   --search-ai-conversation-input-border-radius: var(--border-radius-lg);
@@ -241,51 +251,15 @@ export const search = css`
   --search-ai-conversation-input-border-color-disabled: var(--border-color-secondary);
 
   --search-ai-conversation-input-send-button-right: 12px;
-  --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-padding: 5px;
+  --search-ai-conversation-input-send-button-border-radius: var(--border-radius);
   --search-ai-conversation-input-send-button-border-disabled: 1px solid var(--button-border-color-disabled);
 
-  /**
-  * @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-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-spinner-icon-color: var(--icon-color-interactive);
-  --search-ai-checkmark-icon-color: var(--icon-color-interactive);
+  --search-ai-conversation-input-min-height: 48px;
+  --search-ai-conversation-input-max-height: 120px;
+  --search-ai-conversation-input-padding-right: calc(var(--search-ai-conversation-input-send-button-right) + 30px);
+  --search-ai-conversation-input-send-button-bottom: calc(var(--search-ai-conversation-input-min-height) / 2);
 
   // @tokens End
 `;
+/* eslint-enable theme/no-raw-colors-in-styles */

package/src/components/Segmented/Segmented.tsx

@@ -2,17 +2,9 @@ import React, { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 
 import type { ForwardedRef, ReactElement } from 'react';
-import type { SelectOption } from '@redocly/theme/core/types/select';
+import type { SegmentedProps } from '@redocly/theme/core/types';
 
-import { typedMemo } from '@redocly/theme/core/hoc/typedMemo';
-
-export type SegmentedProps<T> = {
-  options: SelectOption<T>[];
-  value: T;
-  onChange: ({ label, value }: SelectOption<T>) => void;
-  className?: string;
-  size?: 'regular' | 'small';
-};
+import { typedMemo } from '@redocly/theme/core/hoc/typed-memo';
 
 function SegmentedComponent<T>(
   { options, onChange, value, className = '', size = 'regular' }: SegmentedProps<T>,
@@ -25,17 +17,20 @@ function SegmentedComponent<T>(
       className={`tag-grey ${size} ${className}`}
       role="tablist"
     >
-      {options.map((opt) => (
-        <SegmentedItem
-          key={opt.label}
-          role="tab"
-          title={opt.label}
-          onClick={() => onChange(opt)}
-          $isActive={value == opt.value}
-          $size={size}
-        >
-          {opt.label}
-        </SegmentedItem>
+      {options.map((opt, index) => (
+        <React.Fragment key={index}>
+          {opt.divider}
+          <SegmentedItem
+            key={opt.label}
+            role="tab"
+            title={opt.label}
+            onClick={() => onChange(opt)}
+            $isActive={value == opt.value}
+            $size={size}
+          >
+            {opt.element || opt.label}
+          </SegmentedItem>
+        </React.Fragment>
       ))}
     </SegmentedGroup>
   );