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

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) {

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;

package/lib/components/Search/SearchAiDialog.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 };
 };
@@ -47,11 +57,11 @@ function SearchAiDialog({ isGeneratingResponse, response, initialMessage, error,
         : conversation.length > 0
             ? translate('search.ai.followUpQuestion', 'Ask a follow up question?')
             : translate('search.ai.placeholder', 'Ask a question...');
-    const scrollToBottom = () => {
+    const scrollToBottom = (0, react_1.useCallback)(() => {
         var _a;
         (_a = conversationEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'end' });
-    };
-    const handleOnMessageSent = (message) => {
+    }, []);
+    const handleOnMessageSent = (0, react_1.useCallback)((message) => {
         if (!message.trim()) {
             return;
         }
@@ -60,8 +70,11 @@ function SearchAiDialog({ isGeneratingResponse, response, initialMessage, error,
             content,
         }));
         onMessageSent(message, mappedHistory);
-        setConversation((prev) => [...prev, { role: constants_1.AiSearchConversationRole.USER, content: message }]);
-    };
+        setConversation((prev) => [
+            ...prev,
+            { role: constants_1.AiSearchConversationRole.USER, content: message },
+        ]);
+    }, [conversation, onMessageSent, setConversation]);
     (0, react_1.useEffect)(() => {
         if (!(initialMessage === null || initialMessage === void 0 ? void 0 : initialMessage.trim().length)) {
             return;
@@ -81,10 +94,15 @@ function SearchAiDialog({ isGeneratingResponse, response, initialMessage, error,
             if (lastMessage && lastMessage.role === constants_1.AiSearchConversationRole.ASSISTANT) {
                 return [
                     ...prev.slice(0, -1),
-                    { role: constants_1.AiSearchConversationRole.ASSISTANT, content, resources },
+                    {
+                        role: constants_1.AiSearchConversationRole.ASSISTANT,
+                        content,
+                        resources,
+                        messageId: lastMessage.messageId,
+                    },
                 ];
             }
-            return [...prev, { role: constants_1.AiSearchConversationRole.ASSISTANT, content }];
+            return [...prev, { role: constants_1.AiSearchConversationRole.ASSISTANT, content, resources }];
         });
     }, [response, conversation.length, error, resources, setConversation]);
     (0, react_1.useEffect)(() => {
@@ -94,7 +112,10 @@ function SearchAiDialog({ isGeneratingResponse, response, initialMessage, error,
     }, [error, setConversation]);
     (0, react_1.useEffect)(() => {
         scrollToBottom();
-    }, [conversation, isGeneratingResponse]);
+    }, [conversation, isGeneratingResponse, scrollToBottom]);
+    const handleFeedbackChange = (0, react_1.useCallback)((messageId, feedback) => {
+        setConversation((prev) => prev.map((item) => (item.messageId === messageId ? Object.assign(Object.assign({}, item), { feedback }) : item)));
+    }, [setConversation]);
     return (react_1.default.createElement(SearchAiDialogWrapper, { "data-component-name": "Search/SearchAiDialog", className: className },
         !conversation.length && (react_1.default.createElement(WelcomeWrapper, null,
             react_1.default.createElement(AiStarsIcon_1.AiStarsIcon, { color: "var(--search-ai-icon-color)", size: "32px", background: "var(--search-ai-icon-bg-color)", borderRadius: "var(--border-radius-lg)", margin: "0 var(--spacing-xs) 0 0" }),
@@ -102,7 +123,7 @@ function SearchAiDialog({ isGeneratingResponse, response, initialMessage, error,
         react_1.default.createElement(ConversationWrapper, null,
             conversation.map((item, index) => (react_1.default.createElement(SearchAiMessage_1.SearchAiMessage, { key: `search-ai-message-${index}`, role: item.role, content: item.content, isThinking: item.role === constants_1.AiSearchConversationRole.ASSISTANT &&
                     isGeneratingResponse &&
-                    index === conversation.length - 1, resources: item.resources }))),
+                    index === conversation.length - 1, resources: item.resources, messageId: item.messageId, feedback: item.feedback, onFeedbackChange: handleFeedbackChange }))),
             error && (react_1.default.createElement(Admonition_1.Admonition, { type: "danger", name: translate(constants_1.AI_SEARCH_ERROR_CONFIG[error].headerKey, constants_1.AI_SEARCH_ERROR_CONFIG[error].headerDefault) }, translate(constants_1.AI_SEARCH_ERROR_CONFIG[error].messageKey, constants_1.AI_SEARCH_ERROR_CONFIG[error].messageDefault))),
             !conversation.length && !error && (react_1.default.createElement(SuggestionsWrapper, null, suggestions === null || suggestions === void 0 ? void 0 : suggestions.map((suggestion) => (react_1.default.createElement(Button_1.Button, { key: suggestion, variant: "outlined", onClick: () => handleOnMessageSent(suggestion) }, suggestion))))),
             react_1.default.createElement("div", { ref: conversationEndRef })),

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

@@ -1,13 +1,17 @@
+import React from 'react';
 import type { JSX } from 'react';
+import { FeedbackType, type SearchAiMessageResource } from '../../core/types';
 import { AiSearchConversationRole } from '../../core/constants';
 export type SearchAiMessageProps = {
     role: AiSearchConversationRole;
     content: string;
     isThinking?: boolean;
-    resources?: {
-        url: string;
-        title: string;
-    }[];
+    resources?: SearchAiMessageResource[];
     className?: string;
+    messageId?: string;
+    feedback?: FeedbackType;
+    onFeedbackChange: (messageId: string, feedback: FeedbackType | undefined) => void;
 };
-export declare function SearchAiMessage({ role, content, isThinking, resources, className, }: SearchAiMessageProps): JSX.Element;
+declare function SearchAiMessageComponent({ role, content, isThinking, resources, className, messageId, feedback, onFeedbackChange, }: SearchAiMessageProps): JSX.Element;
+export declare const SearchAiMessage: React.MemoExoticComponent<typeof SearchAiMessageComponent>;
+export {};