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

package/lib/components/Search/FilterFields/SearchFilterFieldTags.js

@@ -7,6 +7,8 @@ exports.SearchFilterFieldTags = SearchFilterFieldTags;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Tag_1 = require("../../../components/Tag/Tag");
+const utils_1 = require("../../../core/utils");
+const constants_1 = require("../../../core/constants");
 function SearchFilterFieldTags({ className, facet, selectedValues, onChange, }) {
     return (react_1.default.createElement(FilterTagsWrapper, { "data-component-name": "Search/FilterFields/SearchFilterFieldTags", className: className }, facet.values.map((facetCount, index) => {
         const { value, count, isCounterVisible } = facetCount;
@@ -17,13 +19,17 @@ function SearchFilterFieldTags({ className, facet, selectedValues, onChange, })
                 : [...selectedValues, value];
             onChange(values);
         };
-        return (react_1.default.createElement(FilterTagWrapper, { key: `${count}-${index}`, tabIndex: 0, color: value, onClick: () => {
+        const color = (0, utils_1.getOperationColor)({
+            httpVerb: value,
+            isAdditionalOperation: !constants_1.REQUEST_METHODS.includes(value.toUpperCase()),
+        });
+        return (react_1.default.createElement(FilterTagWrapper, { key: `${count}-${index}`, tabIndex: 0, color: color, onClick: () => {
                 updateSelectedValues();
             }, onKeyDown: (e) => {
                 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 +43,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

@@ -43,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);
@@ -57,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 })));
@@ -80,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);
@@ -98,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

@@ -57,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;
         }
@@ -70,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;
@@ -91,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)(() => {
@@ -104,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" }),
@@ -112,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 {};

package/lib/components/Search/SearchAiMessage.js

@@ -1,11 +1,45 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SearchAiMessage = SearchAiMessage;
-const react_1 = __importDefault(require("react"));
+exports.SearchAiMessage = void 0;
+const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
+const types_1 = require("../../core/types");
 const Link_1 = require("../../components/Link/Link");
 const Tag_1 = require("../../components/Tag/Tag");
 const constants_1 = require("../../core/constants");
@@ -13,29 +47,93 @@ const hooks_1 = require("../../core/hooks");
 const Markdown_1 = require("../../components/Markdown/Markdown");
 const DocumentIcon_1 = require("../../icons/DocumentIcon/DocumentIcon");
 const AiStarsIcon_1 = require("../../icons/AiStarsIcon/AiStarsIcon");
-function SearchAiMessage({ role, content, isThinking, resources, className, }) {
-    const { useMarkdownText, useTranslate } = (0, hooks_1.useThemeHooks)();
+const CheckmarkOutlineIcon_1 = require("../../icons/CheckmarkOutlineIcon/CheckmarkOutlineIcon");
+const SearchAiActionButtons_1 = require("./SearchAiActionButtons");
+const SearchAiNegativeFeedbackForm_1 = require("./SearchAiNegativeFeedbackForm");
+function SearchAiMessageComponent({ role, content, isThinking, resources, className, messageId, feedback, onFeedbackChange, }) {
+    var _a;
+    const { useMarkdownText, useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const markDownContent = useMarkdownText(content || '');
     const { translate } = useTranslate();
+    const telemetry = useTelemetry();
+    const [feedbackSent, setFeedbackSent] = (0, react_1.useState)(false);
+    const hasResources = !isThinking && resources && resources.length > 0;
+    const resourcesCount = (_a = resources === null || resources === void 0 ? void 0 : resources.length) !== null && _a !== void 0 ? _a : 0;
+    const showSuccessMessage = feedbackSent && feedback;
+    const sendFeedbackTelemetry = (feedbackValue, dislikeReason) => {
+        if (!messageId)
+            return;
+        try {
+            telemetry.sendSearchAIFeedbackMessage({
+                feedback: feedbackValue,
+                messageId,
+                reason: dislikeReason,
+            });
+        }
+        catch (error) {
+            console.error('Error sending feedback', error);
+        }
+    };
+    const handleFeedbackClick = (feedbackValue, reason) => {
+        if (!messageId) {
+            return;
+        }
+        if (!reason) {
+            onFeedbackChange(messageId, feedbackValue);
+        }
+        sendFeedbackTelemetry(feedbackValue, reason);
+        if (feedbackValue === types_1.FeedbackType.Like || reason) {
+            setFeedbackSent(true);
+        }
+    };
     return (react_1.default.createElement(SearchAiMessageWrapper, { "data-component-name": "Search/SearchAiMessage", role: role, className: className, "data-testid": "search-ai-message" },
         role === constants_1.AiSearchConversationRole.ASSISTANT && (react_1.default.createElement(AiStarsIcon_1.AiStarsIcon, { size: "32px", background: "var(--search-ai-icon-bg-color)", borderRadius: "var(--border-radius-lg)", color: "var(--search-ai-icon-color)", margin: "0 var(--spacing-xs) 0 0" })),
-        react_1.default.createElement(MessageWrapper, { role: role },
-            role === constants_1.AiSearchConversationRole.ASSISTANT ? (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(MessageContentWrapper, null, role === constants_1.AiSearchConversationRole.ASSISTANT ? (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(MessageWrapper, { role: role },
                 react_1.default.createElement(ResponseText, { as: "div", children: markDownContent, "data-testid": "response-text" }),
-                !isThinking && resources && resources.length > 0 && (react_1.default.createElement(ResourcesWrapper, { "data-testid": "resources-wrapper" },
-                    react_1.default.createElement(ResourcesTitle, { "data-translation-key": "search.ai.resourcesFound" },
-                        translate('search.ai.resourcesFound.basedOn', 'Based on'),
-                        " ",
-                        resources.length,
-                        ' ',
-                        translate('search.ai.resourcesFound.resources', 'resources')),
-                    react_1.default.createElement(ResourceTagsWrapper, null, resources.map((resource, idx) => (react_1.default.createElement(Link_1.Link, { key: idx, to: resource.url, target: "_blank" },
-                        react_1.default.createElement(ResourceTag, { borderless: true, icon: react_1.default.createElement(DocumentIcon_1.DocumentIcon, { color: "--search-ai-resource-tag-icon-color" }) }, resource.title))))))))) : (content),
-            isThinking && content.length === 0 && (react_1.default.createElement(ThinkingDotsWrapper, { "data-testid": "thinking-dots-wrapper" },
-                react_1.default.createElement(ThinkingDot, null),
-                react_1.default.createElement(ThinkingDot, null),
-                react_1.default.createElement(ThinkingDot, null))))));
+                hasResources && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(ResourcesWrapper, { "data-testid": "resources-wrapper" },
+                        react_1.default.createElement(ResourcesTitle, { "data-translation-key": "search.ai.resourcesFound" },
+                            translate('search.ai.resourcesFound.basedOn', 'Based on'),
+                            " ",
+                            resourcesCount,
+                            ' ',
+                            translate('search.ai.resourcesFound.resources', 'resources')),
+                        react_1.default.createElement(ResourceTagsWrapper, null, resources === null || resources === void 0 ? void 0 : resources.map((resource, idx) => (react_1.default.createElement(Link_1.Link, { key: `${resource.url}-${idx}`, to: resource.url, target: "_blank" },
+                            react_1.default.createElement(ResourceTag, { borderless: true, icon: react_1.default.createElement(DocumentIcon_1.DocumentIcon, { color: "--search-ai-resource-tag-icon-color" }) }, resource.title)))))))),
+                isThinking && content.length === 0 && (react_1.default.createElement(ThinkingDotsWrapper, { "data-testid": "thinking-dots-wrapper" },
+                    react_1.default.createElement(ThinkingDot, null),
+                    react_1.default.createElement(ThinkingDot, null),
+                    react_1.default.createElement(ThinkingDot, null))),
+                content.length > 0 && (react_1.default.createElement(FeedbackWrapper, null,
+                    react_1.default.createElement(SearchAiActionButtons_1.SearchAiActionButtons, { content: content, feedback: feedback, onFeedback: handleFeedbackClick, disabled: !!feedback })))),
+            messageId && feedback === types_1.FeedbackType.Dislike && !showSuccessMessage && (react_1.default.createElement(SearchAiNegativeFeedbackForm_1.SearchAiNegativeFeedbackForm, { messageId: messageId, onClose: (messageId, feedback) => {
+                    onFeedbackChange(messageId, feedback);
+                    setFeedbackSent(true);
+                }, onSubmit: (reason) => handleFeedbackClick(types_1.FeedbackType.Dislike, reason) })),
+            showSuccessMessage && (react_1.default.createElement(SuccessMessageWrapper, { "data-component-name": "Search/SearchAiMessage/Success" },
+                react_1.default.createElement(CheckmarkOutlineIcon_1.CheckmarkOutlineIcon, { size: "20px", color: "var(--color-success-base)" }),
+                react_1.default.createElement(SuccessMessageText, null, translate('search.ai.feedback.thanks', 'Thank you for your feedback!')))))) : (react_1.default.createElement(MessageWrapper, { role: role }, content)))));
+}
+function areResourcesEqual(prev, next) {
+    if (prev === next)
+        return true;
+    if (!prev || !next || prev.length !== next.length)
+        return false;
+    return prev.every((resource, index) => {
+        const nextResource = next[index];
+        return resource.url === nextResource.url && resource.title === nextResource.title;
+    });
 }
+exports.SearchAiMessage = (0, react_1.memo)(SearchAiMessageComponent, (prevProps, nextProps) => {
+    return (prevProps.role === nextProps.role &&
+        prevProps.content === nextProps.content &&
+        prevProps.isThinking === nextProps.isThinking &&
+        prevProps.messageId === nextProps.messageId &&
+        prevProps.feedback === nextProps.feedback &&
+        prevProps.onFeedbackChange === nextProps.onFeedbackChange &&
+        areResourcesEqual(prevProps.resources, nextProps.resources));
+});
 const SearchAiMessageWrapper = styled_components_1.default.div `
   display: flex;
   flex-direction: row;
@@ -43,6 +141,13 @@ const SearchAiMessageWrapper = styled_components_1.default.div `
   width: 100%;
   justify-content: ${({ role }) => role === constants_1.AiSearchConversationRole.USER ? 'flex-end' : 'flex-start'};
 `;
+const MessageContentWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  max-width: 80%;
+  min-width: 0;
+`;
 const ResponseText = (0, styled_components_1.default)(Markdown_1.Markdown) `
   color: var(--search-ai-text-color);
   font-size: var(--search-ai-text-font-size);
@@ -63,7 +168,8 @@ const MessageWrapper = styled_components_1.default.div `
   padding: ${({ role }) => role === constants_1.AiSearchConversationRole.USER ? 'var(--spacing-sm)' : 'var(--spacing-xs)'}
     var(--spacing-sm);
   border-radius: var(--border-radius-lg);
-  max-width: 80%;
+  width: fit-content;
+  max-width: 100%;
   word-wrap: break-word;
   white-space: pre-wrap;
   background-color: ${({ role }) => role === constants_1.AiSearchConversationRole.USER
@@ -78,7 +184,13 @@ const ResourcesWrapper = styled_components_1.default.div `
   gap: var(--search-ai-resources-gap);
   display: flex;
   flex-direction: column;
-  margin: var(--spacing-xs) 0;
+  margin: 0;
+`;
+const FeedbackWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: row;
+  gap: var(--search-ai-feedback-gap);
+  margin-top: var(--spacing-sm);
 `;
 const ResourcesTitle = styled_components_1.default.div `
   font-weight: var(--search-ai-resources-title-font-weight);
@@ -144,4 +256,18 @@ const ThinkingDot = styled_components_1.default.div `
     }
   }
 `;
+const SuccessMessageWrapper = styled_components_1.default.div `
+  max-width: fit-content;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm);
+  background: var(--color-success-bg);
+  border: 1px solid var(--color-success-border);
+  border-radius: var(--border-radius-lg);
+`;
+const SuccessMessageText = styled_components_1.default.div `
+  font-size: var(--font-size-base);
+  color: var(--color-success-darker);
+`;
 //# sourceMappingURL=SearchAiMessage.js.map

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { JSX } from 'react';
+import { FeedbackType } from '../../core/types';
+export type SearchAiNegativeFeedbackFormProps = {
+    messageId: string;
+    onClose: (messageId: string, feedback: FeedbackType, reason?: string) => void;
+    onSubmit: (reason: string) => void;
+    formRef?: React.Ref<HTMLDivElement>;
+};
+export declare function SearchAiNegativeFeedbackForm({ messageId, onClose, onSubmit, formRef, }: SearchAiNegativeFeedbackFormProps): JSX.Element;