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

package/lib/components/Search/SearchDialog.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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 };
 };
@@ -56,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; }) : [];
@@ -116,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;
@@ -164,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 }))),
@@ -182,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)" }),
@@ -224,6 +259,7 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
                                 telemetry.sendSearchRecentClickedMessage({
                                     query,
                                     index: index.toString(),
+                                    searchSessionId,
                                 });
                                 setQuery(query);
                                 focusSearchInput();
@@ -299,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;
@@ -400,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/SearchFilter.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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 };
 };

package/lib/components/Search/SearchGroups.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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 };
 };
@@ -39,14 +49,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 }, "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

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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 };
 };

package/lib/components/Search/SearchItem.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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 };
 };

package/lib/components/Search/SearchRecent.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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 };
 };

package/lib/components/Search/SearchShortcut.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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 };
 };

package/lib/components/Search/SearchSuggestedPages.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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 };
 };

package/lib/components/Search/SearchTrigger.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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 };
 };

package/lib/components/Search/variables.js

@@ -146,68 +146,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 +242,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,51 +252,14 @@ 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
 `;

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/segmented';
 export declare const Segmented: <T>(props: SegmentedProps<T> & {
     ref?: ForwardedRef<HTMLDivElement>;
 }) => ReactElement;

package/lib/components/Segmented/Segmented.js

@@ -15,20 +15,32 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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;
+    };
+})();
 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");
 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));
 const SegmentedGroup = styled_components_1.default.div `