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

package/lib/components/Search/SearchAiNegativeFeedbackForm.js

@@ -0,0 +1,170 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchAiNegativeFeedbackForm = SearchAiNegativeFeedbackForm;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const types_1 = require("../../core/types");
+const Button_1 = require("../../components/Button/Button");
+const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
+const ArrowLeftIcon_1 = require("../../icons/ArrowLeftIcon/ArrowLeftIcon");
+const SendIcon_1 = require("../../icons/SendIcon/SendIcon");
+const hooks_1 = require("../../core/hooks");
+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',
+];
+function SearchAiNegativeFeedbackForm({ messageId, onClose, onSubmit, formRef, }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const [showMoreInput, setShowMoreInput] = (0, react_1.useState)(false);
+    const [detailedFeedback, setDetailedFeedback] = (0, react_1.useState)('');
+    const textAreaRef = react_1.default.useRef(null);
+    const adjustTextAreaHeight = () => {
+        const textArea = textAreaRef.current;
+        if (textArea) {
+            textArea.style.height = 'auto';
+            textArea.style.height = `${textArea.scrollHeight}px`;
+        }
+    };
+    const handleTextChange = (e) => {
+        setDetailedFeedback(e.target.value);
+        adjustTextAreaHeight();
+    };
+    (0, react_1.useEffect)(() => {
+        if (showMoreInput) {
+            adjustTextAreaHeight();
+        }
+    }, [showMoreInput]);
+    return (react_1.default.createElement(FeedbackFormWrapper, { "data-component-name": "Search/SearchAiNegativeFeedbackForm", ref: formRef },
+        react_1.default.createElement(FeedbackHeader, null,
+            showMoreInput ? (react_1.default.createElement(BackButton, { variant: "text", size: "small", icon: react_1.default.createElement(ArrowLeftIcon_1.ArrowLeftIcon, null), onClick: () => setShowMoreInput(false), "aria-label": "Back to feedback reasons" })) : null,
+            react_1.default.createElement(FeedbackTitle, { "data-translation-key": "search.ai.feedback.title" }, translate('search.ai.feedback.title', "What didn't you like about this response?")),
+            react_1.default.createElement(CloseButton, { variant: "text", size: "small", icon: react_1.default.createElement(CloseIcon_1.CloseIcon, null), onClick: () => onClose(messageId, types_1.FeedbackType.Dislike, undefined), "aria-label": "Close feedback form" })),
+        !showMoreInput ? (react_1.default.createElement(FeedbackReasonsWrapper, null,
+            NEGATIVE_FEEDBACK_DEFAULT_REASONS.map((reason) => (react_1.default.createElement(Button_1.Button, { key: reason, variant: "outlined", size: "small", onClick: () => onSubmit(reason) }, reason))),
+            react_1.default.createElement(Button_1.Button, { variant: "outlined", size: "small", onClick: () => setShowMoreInput(true) }, translate('search.ai.feedback.more', 'More...')))) : (react_1.default.createElement(FeedbackInputWrapper, null,
+            react_1.default.createElement(FeedbackTextArea, { ref: textAreaRef, placeholder: translate('search.ai.feedback.detailsPlaceholder', 'Add specific details'), value: detailedFeedback, onChange: handleTextChange, rows: 1, autoFocus: true }),
+            react_1.default.createElement(SendButton, { size: "small", icon: react_1.default.createElement(SendIcon_1.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" })))));
+}
+const FeedbackFormWrapper = styled_components_1.default.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_components_1.default.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-sm);
+`;
+const FeedbackTitle = styled_components_1.default.div `
+  font-size: var(--font-size-base);
+  color: var(--text-color);
+  flex: 1;
+`;
+const BackButton = (0, styled_components_1.default)(Button_1.Button) `
+  flex-shrink: 0;
+`;
+const CloseButton = (0, styled_components_1.default)(Button_1.Button) `
+  flex-shrink: 0;
+`;
+const FeedbackReasonsWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-xs);
+`;
+const FeedbackInputWrapper = styled_components_1.default.div `
+  position: relative;
+  width: 100%;
+`;
+const FeedbackTextArea = styled_components_1.default.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 = (0, styled_components_1.default)(Button_1.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);
+  }
+`;
+//# sourceMappingURL=SearchAiNegativeFeedbackForm.js.map

package/lib/components/Search/SearchDialog.js

@@ -66,14 +66,25 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
     const products = useProducts();
     const currentProduct = useCurrentProduct();
     const [product, setProduct] = (0, react_1.useState)(currentProduct);
+    const searchSessionId = `search-${Date.now()}-${Math.random().toString(36).substring(2, 8)}`;
     const [mode, setMode] = (0, react_1.useState)(initialMode);
     const autoSearchDisabled = mode !== 'search';
-    const { query, setQuery, filter, setFilter, items, isSearchLoading, facets, setLoadMore, advancedSearch, askAi, groupField, } = useSearch(product === null || product === void 0 ? void 0 : product.name, autoSearchDisabled);
+    const { query, setQuery, filter, setFilter, items, isSearchLoading, facets, setLoadMore, advancedSearch, askAi, groupField, } = useSearch(product === null || product === void 0 ? void 0 : product.name, autoSearchDisabled, searchSessionId);
     const { isFilterOpen, onFilterToggle, onFilterChange, onFilterReset, onFacetReset, onQuickFilterReset, } = (0, hooks_1.useSearchFilter)(filter, setFilter);
     const { addSearchHistoryItem } = (0, hooks_1.useRecentSearches)();
-    const aiSearch = useAiSearch({ filter });
+    const aiSearch = useAiSearch({ filter }, searchSessionId);
     const searchInputRef = (0, react_1.useRef)(null);
     const modalRef = (0, react_1.useRef)(null);
+    const [isMobile, setIsMobile] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        const mediaQuery = window.matchMedia(`(max-width: ${utils_1.breakpoints.small})`);
+        setIsMobile(mediaQuery.matches);
+        const handleChange = (e) => {
+            setIsMobile(e.matches);
+        };
+        mediaQuery.addEventListener('change', handleChange);
+        return () => mediaQuery.removeEventListener('change', handleChange);
+    }, []);
     const aiQueryRef = (0, react_1.useRef)(null);
     const firstSearchResultRef = (0, react_1.useRef)(null);
     const searchKeysWithResults = items ? Object.keys(items).filter((key) => { var _a; return (_a = items[key]) === null || _a === void 0 ? void 0 : _a.length; }) : [];
@@ -126,10 +137,11 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
                     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 = (0, react_1.useCallback)((groupKey, currentCount = 0) => {
         const groupFacet = facets.find((facet) => facet.field === groupField);
         let needLoadMore = false;
@@ -174,14 +186,21 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
                                 if (query.trim()) {
                                     aiSearch.askQuestion(query);
                                 }
+                                telemetry.sendSearchAiOpenedMessage({
+                                    method: 'ai_search_button',
+                                });
                             } }, translate('search.ai.button', 'Search with AI'))) : null,
                         showSearchFilterButton && (react_1.default.createElement(SearchFilterToggleButton, { icon: react_1.default.createElement(SettingsIcon_1.SettingsIcon, null), onClick: onFilterToggle })))))) : (react_1.default.createElement(AiDialogHeaderWrapper, null,
                     react_1.default.createElement(Button_1.Button, { variant: "secondary", onClick: () => {
                             setMode('search');
                             aiSearch.clearConversation();
                             focusSearchInput();
-                        }, tabIndex: 0, icon: react_1.default.createElement(ChevronLeftIcon_1.ChevronLeftIcon, null) }, translate('search.ai.backToSearch', 'Back to search')),
-                    react_1.default.createElement(Button_1.Button, { variant: "secondary", disabled: !aiSearch.conversation.length, onClick: () => aiSearch.clearConversation(), tabIndex: 0, icon: react_1.default.createElement(EditIcon_1.EditIcon, null) }, translate('search.ai.newConversation', 'New conversation'))))),
+                        }, tabIndex: 0, icon: react_1.default.createElement(ChevronLeftIcon_1.ChevronLeftIcon, null) }, isMobile
+                        ? translate('search.ai.back', 'Back')
+                        : translate('search.ai.backToSearch', 'Back to search')),
+                    react_1.default.createElement(AiDialogHeaderActionsWrapper, null,
+                        react_1.default.createElement(Button_1.Button, { variant: "secondary", disabled: !aiSearch.conversation.length, onClick: () => aiSearch.clearConversation(), tabIndex: 0, icon: react_1.default.createElement(EditIcon_1.EditIcon, null) }, translate('search.ai.newConversation', 'New conversation')),
+                        isMobile && react_1.default.createElement(Button_1.Button, { variant: "text", icon: react_1.default.createElement(CloseIcon_1.CloseIcon, null), onClick: handleClose }))))),
             react_1.default.createElement(SearchDialogBody, null, mode === 'search' ? (react_1.default.createElement(react_1.default.Fragment, null,
                 advancedSearch && isFilterOpen && (react_1.default.createElement(SearchDialogBodyFilterView, null,
                     react_1.default.createElement(SearchFilter_1.SearchFilter, { facets: facets, filter: filter, query: query, quickFilterFields: [groupField], onFilterChange: onFilterChange, onFilterReset: onFilterReset, onFacetReset: onFacetReset }))),
@@ -192,12 +211,18 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
                             if (query.trim()) {
                                 aiSearch.askQuestion(query);
                             }
+                            telemetry.sendSearchAiOpenedMessage({
+                                method: 'ai_search_input',
+                            });
                         }, onKeyDown: (e) => {
                             if (e.key === 'Enter') {
                                 setMode('ai-dialog');
                                 if (query.trim()) {
                                     aiSearch.askQuestion(query);
                                 }
+                                telemetry.sendSearchAiOpenedMessage({
+                                    method: 'ai_search_input',
+                                });
                             }
                         }, ref: aiQueryRef, tabIndex: 0, role: "option", "aria-selected": "true" },
                         react_1.default.createElement(AiStarsIcon_1.AiStarsIcon, { style: { flexShrink: 0 }, color: "var(--search-ai-icon-color)", size: "36px", background: "var(--search-ai-icon-bg-color)", margin: "0 var(--spacing-md) 0 0", borderRadius: "var(--border-radius-lg)" }),
@@ -234,6 +259,7 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
                                 telemetry.sendSearchRecentClickedMessage({
                                     query,
                                     index: index.toString(),
+                                    searchSessionId,
                                 });
                                 setQuery(query);
                                 focusSearchInput();
@@ -309,6 +335,10 @@ const AiDialogHeaderWrapper = styled_components_1.default.div `
   align-items: center;
   width: 100%;
 `;
+const AiDialogHeaderActionsWrapper = styled_components_1.default.div `
+  display: flex;
+  gap: var(--spacing-xxs);
+`;
 const SearchDialogBody = styled_components_1.default.div `
   display: flex;
   flex-direction: row-reverse;
@@ -410,6 +440,7 @@ const AiDisclaimer = styled_components_1.default.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_components_1.default.div `
   display: flex;

package/lib/components/Search/SearchGroups.js

@@ -40,8 +40,11 @@ exports.SearchGroups = SearchGroups;
 const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Tag_1 = require("../../components/Tag/Tag");
+const hooks_1 = require("../../core/hooks");
 function SearchGroups({ facets, searchFilter, groupField, onFilterChange, onQuickFilterReset, }) {
     const groupFacets = facets.filter((facet) => facet.field === groupField);
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
     const handleGroupTagClick = (value, fieldId, active, currentValues) => {
         const values = active
             ? currentValues.filter((item) => item !== value)
@@ -49,14 +52,14 @@ function SearchGroups({ facets, searchFilter, groupField, onFilterChange, onQuic
         onFilterChange(fieldId, values, true);
     };
     return (React.createElement(SearchGroupsWrapper, null,
-        React.createElement(GroupTag, { borderless: true, active: !searchFilter.some((item) => item.isQuickFilter), onClick: () => searchFilter.some((item) => item.isQuickFilter) && onQuickFilterReset() }, "All"),
+        React.createElement(GroupTag, { borderless: true, active: !searchFilter.some((item) => item.isQuickFilter), onClick: () => searchFilter.some((item) => item.isQuickFilter) && onQuickFilterReset(), selectable: true }, translate('search.groups.all', 'All')),
         React.createElement(Divider, null),
         groupFacets.flatMap((facet) => facet.values.map((facetCount, index) => {
             var _a;
             const { value, count, isCounterVisible } = facetCount;
             const currentValues = ((_a = searchFilter.find((item) => item.field === facet.field)) === null || _a === void 0 ? void 0 : _a.values) || [];
             const active = currentValues === null || currentValues === void 0 ? void 0 : currentValues.includes(value);
-            return (React.createElement(GroupTag, { key: `${facet.field}-${index}`, onClick: () => handleGroupTagClick(value, facet.field, active, currentValues), active: active, borderless: true },
+            return (React.createElement(GroupTag, { key: `${facet.field}-${index}`, onClick: () => handleGroupTagClick(value, facet.field, active, currentValues), active: active, borderless: true, selectable: true },
                 value,
                 " ",
                 isCounterVisible && React.createElement("span", null, count)));

package/lib/components/Search/SearchHighlight.js

@@ -39,6 +39,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.searchHighlight = searchHighlight;
 const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 function slicer(str, arr) {
     const markOpenIndex = str.indexOf('<mark>');
     const markCloseIndex = str.indexOf('</mark>');

package/lib/components/Search/SearchItem.js

@@ -46,9 +46,12 @@ const SearchHighlight_1 = require("../../components/Search/SearchHighlight");
 const Badge_1 = require("../../components/Badge/Badge");
 const utils_1 = require("../../core/utils");
 const ReturnKeyIcon_1 = require("../../icons/ReturnKeyIcon/ReturnKeyIcon");
+const hooks_1 = require("../../core/hooks");
 function SearchItem({ onClick, item, className, product, innerRef, }) {
     var _a, _b, _c, _d;
     const ref = (0, react_1.useRef)(null);
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
     (0, react_1.useEffect)(() => {
         var _a;
         if (item.active) {
@@ -58,6 +61,10 @@ function SearchItem({ onClick, item, className, product, innerRef, }) {
     const { document, highlight } = item;
     const parameter = highlight.parameters && highlight.parameters.length ? highlight.parameters[0] : null;
     const shouldShowPath = document.path && ((_a = document.path) === null || _a === void 0 ? void 0 : _a.length) > 1;
+    const httpColor = (0, utils_1.getOperationColor)({
+        isAdditionalOperation: document.isAdditionalOperation,
+        httpVerb: document.httpMethod || '',
+    });
     return (react_1.default.createElement(SearchItemWrapper, { className: className, to: document.url, onClick: onClick, tabIndex: 0, innerRef: (el) => {
             ref.current = el;
             if (!innerRef)
@@ -75,11 +82,11 @@ function SearchItem({ onClick, item, className, product, innerRef, }) {
                     react_1.default.createElement(Image_1.Image, { src: product.icon }),
                     product.name)),
                 document.httpMethod ? (react_1.default.createElement(SearchItemOperation, null,
-                    react_1.default.createElement(SearchItemOperationTag, { color: document.httpMethod }, document.httpMethod.toUpperCase()),
+                    react_1.default.createElement(SearchItemOperationTag, { color: httpColor }, document.httpMethod.toUpperCase()),
                     highlight.httpPath ? (0, SearchHighlight_1.searchHighlight)(highlight.httpPath) : document.httpPath)) : null,
                 react_1.default.createElement(SearchItemTitleWrapper, null,
                     react_1.default.createElement(SearchItemTitle, null, highlight.title ? (0, SearchHighlight_1.searchHighlight)(highlight.title) : document.title),
-                    document.deprecated ? react_1.default.createElement(SearchItemBadge, { deprecated: true }, "Deprecated") : null,
+                    document.deprecated ? (react_1.default.createElement(SearchItemBadge, { deprecated: true }, translate('search.searchItem.deprecated', 'Deprecated'))) : null,
                     document.badges
                         ? document.badges.map(({ name, color }) => (react_1.default.createElement(SearchItemBadge, { color: color || 'var(--color-info-base)', key: name }, name)))
                         : null),

package/lib/components/Search/variables.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.search = void 0;
 const styled_components_1 = require("styled-components");
+/* eslint-disable theme/no-raw-colors-in-styles */
 exports.search = (0, styled_components_1.css) `
   /**
     * @tokens Search
@@ -146,68 +147,76 @@ exports.search = (0, styled_components_1.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);
@@ -234,6 +243,7 @@ exports.search = (0, styled_components_1.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);
@@ -243,52 +253,16 @@ exports.search = (0, styled_components_1.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 */
 //# sourceMappingURL=variables.js.map

package/lib/components/Segmented/Segmented.d.ts

@@ -1,12 +1,5 @@
 import type { ForwardedRef, ReactElement } from 'react';
-import type { SelectOption } from '../../core/types/select';
-export type SegmentedProps<T> = {
-    options: SelectOption<T>[];
-    value: T;
-    onChange: ({ label, value }: SelectOption<T>) => void;
-    className?: string;
-    size?: 'regular' | 'small';
-};
+import type { SegmentedProps } from '../../core/types';
 export declare const Segmented: <T>(props: SegmentedProps<T> & {
     ref?: ForwardedRef<HTMLDivElement>;
 }) => ReactElement;

package/lib/components/Segmented/Segmented.js

@@ -36,11 +36,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Segmented = void 0;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
-const typedMemo_1 = require("../../core/hoc/typedMemo");
+const typed_memo_1 = require("../../core/hoc/typed-memo");
 function SegmentedComponent({ options, onChange, value, className = '', size = 'regular' }, ref) {
-    return (react_1.default.createElement(SegmentedGroup, { ref: ref, "data-component-name": "Segmented/Segmented", className: `tag-grey ${size} ${className}`, role: "tablist" }, options.map((opt) => (react_1.default.createElement(SegmentedItem, { key: opt.label, role: "tab", title: opt.label, onClick: () => onChange(opt), "$isActive": value == opt.value, "$size": size }, opt.label)))));
+    return (react_1.default.createElement(SegmentedGroup, { ref: ref, "data-component-name": "Segmented/Segmented", className: `tag-grey ${size} ${className}`, role: "tablist" }, options.map((opt, index) => (react_1.default.createElement(react_1.default.Fragment, { key: index },
+        opt.divider,
+        react_1.default.createElement(SegmentedItem, { key: opt.label, role: "tab", title: opt.label, onClick: () => onChange(opt), "$isActive": value == opt.value, "$size": size }, opt.element || opt.label))))));
 }
-exports.Segmented = (0, typedMemo_1.typedMemo)((0, react_1.forwardRef)(SegmentedComponent));
+exports.Segmented = (0, typed_memo_1.typedMemo)((0, react_1.forwardRef)(SegmentedComponent));
 const SegmentedGroup = styled_components_1.default.div `
   display: flex;
   background: var(--segmented-buttons-bg-color-main);

package/lib/components/Select/Select.d.ts

@@ -1,5 +1,5 @@
 import type { JSX } from 'react';
-import type { SelectProps } from '../../core/types/select';
+import type { SelectProps } from '../../core/types';
 export declare function Select<T>(props: SelectProps<T>): JSX.Element;
 export declare const SelectWrapper: import("styled-components").StyledComponent<"div", any, {
     disabled?: boolean;

package/lib/components/Select/Select.js

@@ -48,6 +48,8 @@ const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem")
 const hooks_1 = require("../../core/hooks");
 function Select(props) {
     const { className, value, options, dataAttributes, withArrow = true, triggerEvent = 'click', placement, alignment, icon, onlyIcon, disabled, placeholder, hideCheckmarkIcon, checkmarkIconPosition, dataTestId = 'select', multiple, searchable, clearable, footer, onChange, onSearch, renderInput, renderDivider, } = props;
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
     const getSelectedOptionsFromPropsValue = () => {
         const values = Array.isArray(value) ? value : [value];
         return values
@@ -176,7 +178,7 @@ function Select(props) {
             e.preventDefault();
         } }),
         react_1.default.createElement(SelectDropdown, { closeOnClick: !multiple, withArrow: withArrow, trigger: renderInput ? renderInput() : renderDefaultInput(selectInputRef), triggerEvent: triggerEvent, placement: placement, alignment: alignment, active: !renderInput ? dropdownActive : undefined },
-            react_1.default.createElement(SelectDropdownMenu, { role: "listbox", footer: footer }, filteredOptions.length === 0 ? (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { disabled: true }, "No results")) : (filteredOptions.map((option, index) => {
+            react_1.default.createElement(SelectDropdownMenu, { role: "listbox", footer: footer }, filteredOptions.length === 0 ? (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { disabled: true }, translate('select.noResults', 'No results'))) : (filteredOptions.map((option, index) => {
                 return (react_1.default.createElement(react_1.Fragment, { key: index },
                     react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { onAction: () => selectHandler(option), prefix: !hideCheckmarkIcon &&
                             (checkmarkIconPosition ? checkmarkIconPosition === 'start' : false) &&
@@ -184,7 +186,7 @@ function Select(props) {
                             (checkmarkIconPosition ? checkmarkIconPosition === 'end' : true) &&
                             isSelected(option) && react_1.default.createElement(CheckmarkIcon_1.CheckmarkIcon, null) }, typeof option.element === 'string' ? (react_1.default.createElement("div", null, option.element)) : (option.element)),
                     renderDivider && index !== options.length - 1 ? renderDivider() : null));
-            }) || 'No results')))));
+            }) || translate('select.noResults', 'No results'))))));
 }
 exports.SelectWrapper = styled_components_1.default.div `
   display: flex;

package/lib/components/Select/SelectInput.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { SelectOption } from '../../core/types/select';
+import type { SelectOption } from '../../core/types';
 type SelectInputProps<T> = {
     id?: string;
     listboxId?: string;

package/lib/components/Select/SelectInput.js

@@ -46,11 +46,13 @@ const Button_1 = require("../../components/Button/Button");
 function SelectInput(props) {
     const { id, listboxId, onlyIcon, icon, customIcon, selectedOptions, placeholder, stickyValue, multiple, searchable, clearable, clearHandler, searchHandler, clickHandler, searchValue, inputBlurHandler, inputFocusHandler, } = props;
     const inputRef = (0, react_1.useRef)(null);
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     const onChangeHandler = (e) => {
         var _a;
         searchHandler === null || searchHandler === void 0 ? void 0 : searchHandler(e);
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     const onKeyDownHandler = (e) => {
         var _a;
         if (e.key === 'Backspace' && !searchValue && selectedOptions.length) {
@@ -73,7 +75,7 @@ function SelectInput(props) {
         e.stopPropagation();
         clearHandler === null || clearHandler === void 0 ? void 0 : clearHandler();
     };
-    const selectTags = selectedOptions.map((option, index) => (react_1.default.createElement(SelectInputTag, { closable: true, key: index, onClose: () => {
+    const selectTags = selectedOptions.map((option, index) => (react_1.default.createElement(SelectInputTag, { closable: true, tabIndex: 0, key: index, onClose: () => {
             var _a;
             clearHandler === null || clearHandler === void 0 ? void 0 : clearHandler(option);
             (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();