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

package/lib/components/Link/Link.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 __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)

package/lib/components/Markdown/Markdown.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;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Markdown = void 0;
 const styled_components_1 = __importStar(require("styled-components"));

package/lib/components/Marker/Marker.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/Menu/MenuContainer.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/Menu/MenuItem.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;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuItem = MenuItem;
 const react_1 = __importStar(require("react"));
@@ -71,7 +81,7 @@ function MenuItem(props) {
     };
     const chevron = hasChevron ? (isExpanded ? (react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, { size: "var(--menu-item-label-chevron-size)", color: "--tree-content-color-default" })) : (react_1.default.createElement(ChevronRightIcon_1.ChevronRightIcon, { size: "var(--menu-item-label-chevron-size)", color: "--tree-content-color-default" }))) : null;
     const httpColor = item.deprecated ? 'http-deprecated' : item.httpVerb;
-    const label = item.label && (react_1.default.createElement(MenuItemLabelWrapper, { active: item.active, deprecated: item.deprecated, depth: depth, withChevron: hasChevron, isSeparator: isSeparator, onClick: handleOnClick, onKeyDown: handleExpandOnEnter, ref: labelRef, role: item.link ? 'none' : 'link', tabIndex: !item.link ? 0 : undefined, "data-testid": "menu-item-label" },
+    const label = item.label && (react_1.default.createElement(MenuItemLabelWrapper, { active: item.active, deprecated: item.deprecated, depth: depth, withChevron: hasChevron, isSeparator: isSeparator, onClick: handleOnClick, onKeyDown: handleExpandOnEnter, ref: labelRef, role: item.link ? 'none' : 'link', tabIndex: !item.link ? 0 : undefined, "data-testid": "menu-item-label", "data-active": item.active },
         hasChevron ? react_1.default.createElement(ChevronWrapper, null, chevron) : null,
         react_1.default.createElement(MenuItemIcon, { icon: item.icon, srcSet: item.srcSet }),
         react_1.default.createElement(MenuItemLabelTextWrapper, null,

package/lib/components/Menu/MenuMobile.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/Navbar/NavbarItem.js

@@ -24,9 +24,9 @@ function NavbarItem({ navItem, className }) {
     if (navItem.type !== 'link' && !navItem.items)
         return null;
     const item = navItem;
-    const normalizedPath = (item.link && item.link !== '/' ? (0, utils_1.removeTrailingSlash)(item.link) : item.link) || '';
-    const isActive = pathname ===
-        (0, utils_1.withPathPrefix)((0, utils_1.getPathnameForLocale)(normalizedPath, defaultLocale, currentLocale, locales));
+    const normalizedPath = (item.link ? (0, utils_1.removeTrailingSlash)(item.link) : item.link) || '';
+    const pathWithPathPrefix = (0, utils_1.withPathPrefix)((0, utils_1.getPathnameForLocale)(normalizedPath, defaultLocale, currentLocale, locales));
+    const isActive = (0, utils_1.removeTrailingSlash)(pathname) === (0, utils_1.removeTrailingSlash)(pathWithPathPrefix);
     const itemContent = (react_1.default.createElement(NavbarMenuItem, { as: item.link ? Link_1.Link : undefined, active: isActive, className: className, onClick: () => telemetry.sendNavbarMenuItemClickedMessage({ type: item.type }), external: item.external, target: item.target, to: item.link },
         react_1.default.createElement(NavbarIcon, { icon: item.icon, srcSet: item.srcSet }),
         react_1.default.createElement(NavbarLabel, { "data-translation-key": item.labelTranslationKey }, translate(item.labelTranslationKey, item.label)),

package/lib/components/PageActions/PageActions.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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -76,7 +86,7 @@ function PageActions(props) {
         react_1.default.createElement(ButtonGroup_1.ButtonGroup, { variant: "outlined", size: "medium" },
             react_1.default.createElement(Button_1.Button, { icon: renderIcon(buttonAction, actionState), to: 'link' in buttonAction ? buttonAction.link : undefined, external: true, onClick: () => handleActionClick(buttonAction) }, buttonAction.buttonText),
             actions.length > 1 ? (react_1.default.createElement(Dropdown_1.Dropdown, { withArrow: true, trigger: react_1.default.createElement(Button_1.Button, null), placement: "bottom", alignment: "end" },
-                react_1.default.createElement(DropdownMenu_1.DropdownMenu, { items: menuItems }))) : null)));
+                react_1.default.createElement(StyledDropdownMenu, { items: menuItems }))) : null)));
 }
 function renderIcon(buttonAction, actionState) {
     switch (actionState) {
@@ -101,4 +111,7 @@ const LinkMenuItem = (0, styled_components_1.default)(Link_1.Link) `
   text-decoration: none;
   --link-decoration-hover: none;
 `;
+const StyledDropdownMenu = (0, styled_components_1.default)(DropdownMenu_1.DropdownMenu) `
+  --dropdown-menu-max-height: var(--page-actions-dropdown-max-height);
+`;
 //# sourceMappingURL=PageActions.js.map

package/lib/components/PageActions/variables.js

@@ -9,6 +9,8 @@ exports.pageActions = (0, styled_components_1.css) `
   --page-actions-button-text-color: var(--text-color-secondary);
   --page-actions-button-padding: 5px 14px 5px var(--spacing-sm);
 
+  --page-actions-dropdown-max-height: fit-content;
+
   --page-actions-menu-item-padding: 3px 0;
   --page-actions-menu-item-gap: var(--spacing-xs);
   --page-actions-menu-item-icon-color: var(--icon-color-secondary);

package/lib/components/PageNavigation/NextButton.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;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NextButton = NextButton;
 const React = __importStar(require("react"));

package/lib/components/Panel/Panel.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/Panel/PanelBody.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;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PanelBody = void 0;
 const styled_components_1 = __importStar(require("styled-components"));

package/lib/components/Search/FilterFields/SearchFilterFieldSelect.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/FilterFields/SearchFilterFieldTags.js

@@ -23,7 +23,7 @@ function SearchFilterFieldTags({ className, facet, selectedValues, onChange, })
                 if (e.key === 'Enter') {
                     updateSelectedValues();
                 }
-            }, active: active, borderless: true },
+            }, active: active, borderless: true, selectable: true },
             value,
             " ",
             isCounterVisible && react_1.default.createElement("span", null, count)));
@@ -37,7 +37,6 @@ const FilterTagsWrapper = styled_components_1.default.div `
 const FilterTagWrapper = (0, styled_components_1.default)(Tag_1.Tag) `
   text-transform: uppercase;
   cursor: pointer;
-  ${({ color }) => color && `background-color: var(--tag-operation-bg-color-${color});`}
   margin: var(--search-filter-field-tags-tag-margin);
 `;
 //# sourceMappingURL=SearchFilterFieldTags.js.map

package/lib/components/Search/SearchAiActionButtons.d.ts

@@ -0,0 +1,10 @@
+import type { JSX } from 'react';
+import { FeedbackType } from '../../core/types';
+export type SearchAiActionButtonsProps = {
+    content: string;
+    className?: string;
+    feedback?: FeedbackType;
+    onFeedback: (feedback: FeedbackType) => void;
+    disabled?: boolean;
+};
+export declare function SearchAiActionButtons({ content, className, feedback, onFeedback, disabled, }: SearchAiActionButtonsProps): JSX.Element;

package/lib/components/Search/SearchAiActionButtons.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchAiActionButtons = SearchAiActionButtons;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const types_1 = require("../../core/types");
+const Button_1 = require("../../components/Button/Button");
+const ThumbUpIcon_1 = require("../../icons/ThumbUpIcon/ThumbUpIcon");
+const ThumbUpFilledIcon_1 = require("../../icons/ThumbUpFilledIcon/ThumbUpFilledIcon");
+const ThumbDownIcon_1 = require("../../icons/ThumbDownIcon/ThumbDownIcon");
+const ThumbDownFilledIcon_1 = require("../../icons/ThumbDownFilledIcon/ThumbDownFilledIcon");
+const CopyButton_1 = require("../../components/Buttons/CopyButton");
+function SearchAiActionButtons({ content, className, feedback, onFeedback, disabled, }) {
+    return (react_1.default.createElement(ActionButtonsWrapper, { className: className, "data-component-name": "Search/SearchAiActionButtons" },
+        react_1.default.createElement(CopyButton_1.CopyButton, { data: content }),
+        react_1.default.createElement(FeedbackButton, { variant: "text", size: "small", icon: feedback === types_1.FeedbackType.Like ? react_1.default.createElement(ThumbUpFilledIcon_1.ThumbUpFilledIcon, null) : react_1.default.createElement(ThumbUpIcon_1.ThumbUpIcon, null), onClick: () => !disabled && onFeedback(types_1.FeedbackType.Like), extraClass: feedback === types_1.FeedbackType.Like ? 'active' : '', "aria-label": "Like this response", disabled: disabled }),
+        react_1.default.createElement(FeedbackButton, { variant: "text", size: "small", icon: feedback === types_1.FeedbackType.Dislike ? react_1.default.createElement(ThumbDownFilledIcon_1.ThumbDownFilledIcon, null) : react_1.default.createElement(ThumbDownIcon_1.ThumbDownIcon, null), onClick: () => !disabled && onFeedback(types_1.FeedbackType.Dislike), extraClass: feedback === types_1.FeedbackType.Dislike ? 'active' : '', "aria-label": "Dislike this response", disabled: disabled })));
+}
+const ActionButtonsWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: var(--search-ai-feedback-gap);
+`;
+const FeedbackButton = (0, styled_components_1.default)(Button_1.Button) `
+  &:disabled {
+    pointer-events: none;
+    cursor: default;
+    opacity: 1;
+    background-color: var(--button-bg-color);
+    color: var(--button-color);
+    border-color: var(--button-border-color);
+  }
+
+  &:disabled.active {
+    background-color: var(--button-bg-color-active);
+    border-color: var(--button-border-color-active);
+    color: var(--button-color-active);
+  }
+`;
+//# sourceMappingURL=SearchAiActionButtons.js.map

package/lib/components/Search/SearchAiConversationInput.d.ts

@@ -4,6 +4,8 @@ type SearchAiConversationInputProps = {
     isGeneratingResponse: boolean;
     placeholder?: string;
     className?: string;
+    disabled?: boolean;
+    multiline?: boolean;
 };
-export declare function SearchAiConversationInput({ isGeneratingResponse, onMessageSent, className, placeholder, }: SearchAiConversationInputProps): JSX.Element;
+export declare function SearchAiConversationInput({ isGeneratingResponse, onMessageSent, className, placeholder, disabled, multiline, }: SearchAiConversationInputProps): JSX.Element;
 export {};

package/lib/components/Search/SearchAiConversationInput.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 };
 };
@@ -33,7 +43,7 @@ const constants_1 = require("../../core/constants");
 const Button_1 = require("../../components/Button/Button");
 const SendIcon_1 = require("../../icons/SendIcon/SendIcon");
 const hooks_1 = require("../../core/hooks");
-function SearchAiConversationInput({ isGeneratingResponse, onMessageSent, className, placeholder, }) {
+function SearchAiConversationInput({ isGeneratingResponse, onMessageSent, className, placeholder, disabled, multiline = false, }) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const inputRef = (0, react_1.useRef)(null);
@@ -47,17 +57,31 @@ function SearchAiConversationInput({ isGeneratingResponse, onMessageSent, classN
         }
     }, [isGeneratingResponse]);
     const handleSendMessage = () => {
+        if (disabled)
+            return;
         setQuery('');
         onMessageSent(query);
     };
-    const handleOnKeyUp = (e) => {
+    const handleOnKeyDown = (e) => {
         if (e.key === 'Enter' && !isGeneratingResponse) {
+            if (multiline && e.shiftKey) {
+                return; // Allow new line in textarea
+            }
+            e.preventDefault();
             handleSendMessage();
         }
     };
-    const isDisabled = isGeneratingResponse || query.trim().length === 0;
+    const isDisabled = disabled || isGeneratingResponse || query.trim().length === 0;
+    const commonProps = {
+        placeholder: placeholder || translate('search.ai.followUpQuestion', 'Ask a follow up question?'),
+        onChange: (e) => setQuery(e.target.value),
+        onKeyDown: handleOnKeyDown,
+        value: query,
+        disabled: disabled || isGeneratingResponse,
+        maxLength: constants_1.AI_SEARCH_MAX_MESSAGE_LENGTH,
+    };
     return (react_1.default.createElement(SearchAiConversationInputWrapper, { "data-component-name": "Search/SearchAiConversationInput", className: className },
-        react_1.default.createElement(ConversationInput, { ref: inputRef, type: "text", placeholder: placeholder || translate('search.ai.followUpQuestion', 'Ask a follow up question?'), onChange: (e) => setQuery(e.target.value), onKeyUp: handleOnKeyUp, value: query, disabled: isGeneratingResponse, maxLength: constants_1.AI_SEARCH_MAX_MESSAGE_LENGTH }),
+        multiline ? (react_1.default.createElement(ConversationTextarea, Object.assign({ ref: inputRef }, commonProps))) : (react_1.default.createElement(ConversationInput, Object.assign({ ref: inputRef, type: "text" }, commonProps))),
         react_1.default.createElement(SendButton, { disabled: isDisabled, size: "small", icon: react_1.default.createElement(SendIcon_1.SendIcon, { color: isDisabled
                     ? '--button-content-color-disabled'
                     : 'var(--search-ai-conversation-input-send-button-icon-color)' }), onClick: handleSendMessage })));
@@ -70,9 +94,10 @@ const SearchAiConversationInputWrapper = styled_components_1.default.div `
   background-color: var(--search-ai-conversation-input-bg-color);
   position: relative;
 `;
-const ConversationInput = styled_components_1.default.input `
+const inputStyles = `
   width: 100%;
   padding: var(--search-ai-conversation-input-padding);
+  padding-right: var(--search-ai-conversation-input-padding-right, 52px);
   border: var(--search-ai-conversation-input-border);
   border-radius: var(--search-ai-conversation-input-border-radius);
   background-color: var(--search-ai-conversation-input-bg-color);
@@ -88,20 +113,37 @@ const ConversationInput = styled_components_1.default.input `
     border-color: var(--search-ai-conversation-input-border-color-focus);
   }
 
+  &:disabled {
+    background-color: var(--search-ai-conversation-input-bg-color-disabled);
+  }
+
   &:focus:disabled {
     border-color: var(--search-ai-conversation-input-border-color-disabled);
   }
 `;
+const ConversationInput = styled_components_1.default.input `
+  ${inputStyles}
+  height: var(--search-ai-conversation-input-min-height);
+`;
+const ConversationTextarea = styled_components_1.default.textarea `
+  ${inputStyles}
+  min-height: var(--search-ai-conversation-input-min-height);
+  max-height: var(--search-ai-conversation-input-max-height);
+  resize: none;
+  field-sizing: content;
+`;
 const SendButton = (0, styled_components_1.default)(Button_1.Button) `
   position: absolute;
   right: var(--search-ai-conversation-input-send-button-right);
-  top: 50%;
-  transform: translateY(-50%);
+  bottom: var(--search-ai-conversation-input-send-button-bottom);
+  transform: translateY(50%);
   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);

package/lib/components/Search/SearchAiDialog.d.ts

@@ -1,19 +1,16 @@
 import React from 'react';
 import type { JSX } from 'react';
+import type { AiSearchConversationItem, SearchAiMessageResource } from '../../core/types';
 import { AiSearchError } from '../../core/constants';
-import { AiSearchConversationItem } from '../../core/types';
 export type SearchAiDialogProps = {
     response: string | undefined;
     isGeneratingResponse: boolean;
     error: AiSearchError | null;
-    resources: {
-        url: string;
-        title: string;
-    }[];
+    resources: SearchAiMessageResource[];
     initialMessage?: string;
     className?: string;
     conversation: AiSearchConversationItem[];
     setConversation: React.Dispatch<React.SetStateAction<AiSearchConversationItem[]>>;
-    onMessageSent: (message: string, history?: AiSearchConversationItem[]) => void;
+    onMessageSent: (message: string, history?: AiSearchConversationItem[], messageId?: string) => void;
 };
 export declare function SearchAiDialog({ isGeneratingResponse, response, initialMessage, error, resources, onMessageSent, className, conversation, setConversation, }: SearchAiDialogProps): JSX.Element;