@redocly/theme 0.51.0-next.2 → 0.51.0-next.4

package/lib/components/Catalog/Catalog.js

@@ -10,13 +10,12 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../core/utils");
 const hooks_1 = require("../../core/hooks");
 const H2_1 = require("../../components/Typography/H2");
-const CatalogCard_1 = require("../../components/Catalog/CatalogCard");
 const FilterContent_1 = require("../../components/Filter/FilterContent");
 const FilterPopover_1 = require("../../components/Filter/FilterPopover");
 const CatalogHighlight_1 = require("../../components/Catalog/CatalogHighlight");
 const CatalogActions_1 = require("../../components/Catalog/CatalogActions");
 const Sidebar_1 = require("../../components/Sidebar/Sidebar");
-const CounterTag_1 = require("../../components/Tags/CounterTag");
+const CatalogVirtualizedGroups_1 = require("../../components/Catalog/CatalogVirtualizedGroups");
 function Catalog(props) {
     const { catalogConfig } = props.pageProps;
     const { useTranslate, useCatalog } = (0, hooks_1.useThemeHooks)();
@@ -39,25 +38,8 @@ function Catalog(props) {
                         ' ',
                         translate(catalogConfig.descriptionTranslationKey, catalogConfig.description),
                         ' ')) : null),
-                groups.map((group) => (react_1.default.createElement(react_1.default.Fragment, { key: group.title },
-                    react_1.default.createElement(CatalogSeparator, { "data-testid": "catalog-separator" },
-                        react_1.default.createElement(CatalogSeparatorLabel, null, group.title),
-                        react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, group.items.length)),
-                    react_1.default.createElement(CatalogCards, null, group.items.map((item) => (react_1.default.createElement(CatalogCard_1.CatalogCard, { item: item, key: item.link })))))))))));
+                react_1.default.createElement(CatalogVirtualizedGroups_1.CatalogVirtualizedGroups, { groups: groups })))));
 }
-const CatalogSeparator = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-  color: var(--catalog-separator-color);
-  font-size: var(--catalog-separator-font-size);
-  font-weight: var(--catalog-separator-font-weight);
-  border-top: 1px solid var(--catalog-separator-border-color);
-  margin: var(--catalog-separator-margin);
-  padding: var(--catalog-separator-padding);
-`;
-const CatalogSeparatorLabel = styled_components_1.default.div `
-  margin: var(--catalog-separator-label-margin);
-`;
 exports.CatalogPageContent = styled_components_1.default.main `
   flex: 1;
   width: 90%;
@@ -68,12 +50,6 @@ exports.CatalogPageContent = styled_components_1.default.main `
     padding: var(--catalog-page-padding);
   }
 `;
-const CatalogCards = styled_components_1.default.div `
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(var(--api-catalog-card-min-width), 1fr));
-  gap: 32px;
-  margin: var(--catalog-cards-group-margin);
-`;
 exports.CatalogTitle = (0, styled_components_1.default)(H2_1.H2) `
   color: var(--catalog-title-text-color);
   font-weight: var(--catalog-title-font-weight);

package/lib/components/Catalog/CatalogVirtualizedGroups.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { CatalogItem } from '../../core/types';
+type Group = {
+    title: string;
+    items: CatalogItem[];
+};
+type CatalogVirtualizedGroupsProps = {
+    groups: Group[];
+};
+export declare function CatalogVirtualizedGroups({ groups }: CatalogVirtualizedGroupsProps): React.JSX.Element;
+export {};

package/lib/components/Catalog/CatalogVirtualizedGroups.js

@@ -0,0 +1,125 @@
+"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 (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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogVirtualizedGroups = CatalogVirtualizedGroups;
+const react_1 = __importStar(require("react"));
+const react_virtual_1 = require("@tanstack/react-virtual");
+const styled_components_1 = __importDefault(require("styled-components"));
+const use_element_size_1 = require("../../core/hooks/use-element-size");
+const CatalogCard_1 = require("../../components/Catalog/CatalogCard");
+const CounterTag_1 = require("../../components/Tags/CounterTag");
+const GAP_SIZE = 32;
+const CARD_MIN_WIDTH_VAR = '--api-catalog-card-min-width';
+function CatalogVirtualizedGroups({ groups }) {
+    var _a, _b;
+    const parentRef = (0, react_1.useRef)(null);
+    const [isClient, setIsClient] = (0, react_1.useState)(typeof window !== 'undefined');
+    const { width } = (0, use_element_size_1.useElementSize)(parentRef);
+    (0, react_1.useEffect)(() => {
+        setIsClient(true);
+    }, []);
+    const columnCount = (0, react_1.useMemo)(() => {
+        if (!isClient)
+            return 1;
+        const cardMinWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue(CARD_MIN_WIDTH_VAR), 10);
+        return Math.max(1, Math.floor((width + GAP_SIZE) / (cardMinWidth + GAP_SIZE)));
+    }, [width, isClient]);
+    const flatRows = (0, react_1.useMemo)(() => {
+        const rows = [];
+        groups.forEach((group) => {
+            rows.push({
+                type: 'header',
+                groupTitle: group.title,
+                groupCount: group.items.length,
+                key: `header-${group.title}`,
+            });
+            const numRows = Math.ceil(group.items.length / columnCount);
+            for (let rowIndex = 0; rowIndex < numRows; rowIndex++) {
+                const startIndex = rowIndex * columnCount;
+                const rowItems = group.items.slice(startIndex, startIndex + columnCount);
+                rows.push({
+                    type: 'cardRow',
+                    groupTitle: group.title,
+                    items: rowItems,
+                    key: `${group.title}-row-${rowIndex}`,
+                });
+            }
+        });
+        return rows;
+    }, [groups, columnCount]);
+    const estimateSize = (0, react_1.useCallback)((index) => {
+        const row = flatRows[index];
+        return row.type === 'header' ? 50 : 250;
+    }, [flatRows]);
+    const virtualizer = (0, react_virtual_1.useWindowVirtualizer)({
+        count: flatRows.length,
+        estimateSize,
+        overscan: 5,
+        initialOffset: (_b = (_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.offsetTop) !== null && _b !== void 0 ? _b : 0,
+    });
+    return (react_1.default.createElement("div", { ref: parentRef },
+        react_1.default.createElement("div", { style: {
+                position: 'relative',
+                height: isClient ? `${virtualizer.getTotalSize()}px` : 'auto',
+            } }, isClient &&
+            virtualizer.getVirtualItems().map((virtualRow) => {
+                const rowData = flatRows[virtualRow.index];
+                if (rowData.type === 'header') {
+                    return (react_1.default.createElement(HeaderRow, { key: rowData.key, ref: virtualizer.measureElement, "data-index": virtualRow.index, style: { transform: `translateY(${virtualRow.start}px)` } },
+                        react_1.default.createElement(CatalogSeparatorLabel, null, rowData.groupTitle),
+                        react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, rowData.groupCount)));
+                }
+                return (react_1.default.createElement(VirtualRow, { key: rowData.key, ref: virtualizer.measureElement, "data-index": virtualRow.index, style: { transform: `translateY(${virtualRow.start}px)` } }, rowData.items.map((item) => (react_1.default.createElement(CatalogCard_1.CatalogCard, { key: item.link, item: item })))));
+            }))));
+}
+const VirtualRow = styled_components_1.default.div `
+  position: absolute;
+  left: 0;
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(${CARD_MIN_WIDTH_VAR}), 1fr));
+  gap: ${GAP_SIZE}px;
+  padding-bottom: 32px;
+`;
+const HeaderRow = styled_components_1.default.div `
+  position: absolute;
+  left: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: var(--catalog-separator-padding);
+  border-top: 1px solid var(--catalog-separator-border-color);
+  padding-bottom: calc(4px * 4);
+  color: var(--catalog-separator-color);
+  font-size: var(--catalog-separator-font-size);
+  font-weight: var(--catalog-separator-font-weight);
+`;
+const CatalogSeparatorLabel = styled_components_1.default.div `
+  margin: var(--catalog-separator-label-margin);
+`;
+//# sourceMappingURL=CatalogVirtualizedGroups.js.map

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

@@ -0,0 +1,8 @@
+type SearchAiConversationInputProps = {
+    onMessageSent: (message: string) => void;
+    isGeneratingResponse: boolean;
+    placeholder?: string;
+    className?: string;
+};
+export declare function SearchAiConversationInput({ isGeneratingResponse, onMessageSent, className, placeholder, }: SearchAiConversationInputProps): JSX.Element;
+export {};

package/lib/components/Search/SearchAiConversationInput.js

@@ -0,0 +1,114 @@
+"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 (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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchAiConversationInput = SearchAiConversationInput;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+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, }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const inputRef = (0, react_1.useRef)(null);
+    const [query, setQuery] = (0, react_1.useState)('');
+    (0, react_1.useEffect)(() => {
+        if (!isGeneratingResponse && inputRef.current) {
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            });
+        }
+    }, [isGeneratingResponse]);
+    const handleSendMessage = () => {
+        setQuery('');
+        onMessageSent(query);
+    };
+    const handleOnKeyUp = (e) => {
+        if (e.key === 'Enter' && !isGeneratingResponse) {
+            handleSendMessage();
+        }
+    };
+    const isDisabled = isGeneratingResponse || query.trim().length === 0;
+    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 }),
+        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 })));
+}
+const SearchAiConversationInputWrapper = styled_components_1.default.div `
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  background-color: var(--search-ai-conversation-input-bg-color);
+  position: relative;
+`;
+const ConversationInput = styled_components_1.default.input `
+  width: 100%;
+  padding: var(--search-ai-conversation-input-padding);
+  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);
+  position: relative;
+  font-size: var(--search-ai-conversation-input-font-size);
+
+  &::placeholder {
+    color: var(--search-ai-conversation-input-placeholder-color);
+  }
+
+  &:focus {
+    outline: none;
+    border-color: var(--search-ai-conversation-input-border-color-focus);
+  }
+
+  &:focus:disabled {
+    border-color: var(--search-ai-conversation-input-border-color-disabled);
+  }
+`;
+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%);
+  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;
+
+  &:hover {
+    background-color: var(--search-ai-conversation-input-send-button-bg-color-hover);
+  }
+
+  &:disabled {
+    background-color: var(--search-ai-conversation-input-send-button-bg-color-disabled);
+    border: var(--search-ai-conversation-input-send-button-border-disabled);
+  }
+`;
+//# sourceMappingURL=SearchAiConversationInput.js.map

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

@@ -0,0 +1,18 @@
+import React from 'react';
+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;
+    }[];
+    initialMessage?: string;
+    className?: string;
+    conversation: AiSearchConversationItem[];
+    setConversation: React.Dispatch<React.SetStateAction<AiSearchConversationItem[]>>;
+    onMessageSent: (message: string, history?: AiSearchConversationItem[]) => void;
+};
+export declare function SearchAiDialog({ isGeneratingResponse, response, initialMessage, error, resources, onMessageSent, className, conversation, setConversation, }: SearchAiDialogProps): JSX.Element;

package/lib/components/Search/SearchAiDialog.js

@@ -0,0 +1,165 @@
+"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 (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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchAiDialog = SearchAiDialog;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const hooks_1 = require("../../core/hooks");
+const Button_1 = require("../../components/Button/Button");
+const SearchAiConversationInput_1 = require("../../components/Search/SearchAiConversationInput");
+const constants_1 = require("../../core/constants");
+const SearchAiMessage_1 = require("../../components/Search/SearchAiMessage");
+const Admonition_1 = require("../../components/Admonition/Admonition");
+const AiStarsIcon_1 = require("../../icons/AiStarsIcon/AiStarsIcon");
+function SearchAiDialog({ isGeneratingResponse, response, initialMessage, error, resources, onMessageSent, className, conversation, setConversation, }) {
+    var _a;
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { search } = (0, hooks_1.useThemeConfig)();
+    const { translate } = useTranslate();
+    const conversationEndRef = react_1.default.useRef(null);
+    const suggestions = (_a = search === null || search === void 0 ? void 0 : search.ai) === null || _a === void 0 ? void 0 : _a.suggestions;
+    const placeholder = isGeneratingResponse
+        ? translate('search.ai.generatingResponse', 'Generating response...')
+        : conversation.length > 0
+            ? translate('search.ai.followUpQuestion', 'Ask a follow up question?')
+            : translate('search.ai.placeholder', 'Ask a question...');
+    const scrollToBottom = () => {
+        var _a;
+        (_a = conversationEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'end' });
+    };
+    const handleOnMessageSent = (message) => {
+        if (!message.trim()) {
+            return;
+        }
+        const mappedHistory = conversation.map(({ role, content }) => ({
+            role,
+            content,
+        }));
+        onMessageSent(message, mappedHistory);
+        setConversation((prev) => [...prev, { role: constants_1.AiSearchConversationRole.USER, content: message }]);
+    };
+    (0, react_1.useEffect)(() => {
+        if (!(initialMessage === null || initialMessage === void 0 ? void 0 : initialMessage.trim().length)) {
+            return;
+        }
+        setConversation((prev) => [
+            ...prev,
+            { role: constants_1.AiSearchConversationRole.USER, content: initialMessage },
+        ]);
+    }, [initialMessage, setConversation]);
+    (0, react_1.useEffect)(() => {
+        if (response === undefined || conversation.length === 0 || error) {
+            return;
+        }
+        setConversation((prev) => {
+            const lastMessage = prev[prev.length - 1];
+            const content = response || '';
+            if (lastMessage && lastMessage.role === constants_1.AiSearchConversationRole.ASSISTANT) {
+                return [
+                    ...prev.slice(0, -1),
+                    { role: constants_1.AiSearchConversationRole.ASSISTANT, content, resources },
+                ];
+            }
+            return [...prev, { role: constants_1.AiSearchConversationRole.ASSISTANT, content }];
+        });
+    }, [response, conversation.length, error, resources, setConversation]);
+    (0, react_1.useEffect)(() => {
+        if (error) {
+            setConversation((prev) => prev.slice(0, -1));
+        }
+    }, [error, setConversation]);
+    (0, react_1.useEffect)(() => {
+        scrollToBottom();
+    }, [conversation, isGeneratingResponse]);
+    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" }),
+            translate('search.ai.welcomeText', 'Welcome to AI search! Feel free to ask me anything. How can I help you? '))),
+        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 }))),
+            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 })),
+        react_1.default.createElement(ConversationInputWrapper, null,
+            react_1.default.createElement(SearchAiConversationInput_1.SearchAiConversationInput, { onMessageSent: handleOnMessageSent, isGeneratingResponse: isGeneratingResponse, placeholder: placeholder }))));
+}
+const SearchAiDialogWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  position: relative;
+  background: var(--search-ai-dialog-bg-color);
+  overflow: hidden;
+`;
+const ConversationWrapper = styled_components_1.default.div `
+  flex: 1 1 auto;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: var(--search-ai-dialog-body-padding);
+  padding-bottom: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--search-ai-dialog-body-gap);
+  min-height: 0;
+
+  > :first-child {
+    margin-top: auto;
+  }
+  > :last-child {
+    margin-bottom: 0;
+    gap: 0;
+  }
+`;
+const SuggestionsWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--search-ai-suggestions-gap);
+  align-items: center;
+  justify-content: center;
+`;
+const ConversationInputWrapper = styled_components_1.default.div `
+  padding: var(--search-ai-dialog-input-padding);
+  border-top: var(--search-ai-dialog-input-border);
+  background: var(--search-ai-dialog-input-bg-color);
+`;
+const WelcomeWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: auto;
+  margin: var(--search-ai-welcome-margin);
+  position: relative;
+`;
+//# sourceMappingURL=SearchAiDialog.js.map

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

@@ -0,0 +1,12 @@
+import { AiSearchConversationRole } from '../../core/constants';
+export type SearchAiMessageProps = {
+    role: AiSearchConversationRole;
+    content: string;
+    isThinking?: boolean;
+    resources?: {
+        url: string;
+        title: string;
+    }[];
+    className?: string;
+};
+export declare function SearchAiMessage({ role, content, isThinking, resources, className, }: SearchAiMessageProps): JSX.Element;

package/lib/components/Search/SearchAiMessage.js

@@ -0,0 +1,146 @@
+"use strict";
+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"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Link_1 = require("../../components/Link/Link");
+const Tag_1 = require("../../components/Tag/Tag");
+const constants_1 = require("../../core/constants");
+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 markDownContent = useMarkdownText(content || '');
+    const { translate } = useTranslate();
+    return (react_1.default.createElement(SearchAiMessageWrapper, { "data-component-name": "Search/SearchAiMessage", role: role, className: className },
+        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(ResponseText, { as: "div", children: markDownContent }),
+                !isThinking && resources && resources.length > 0 && (react_1.default.createElement(ResourcesWrapper, null,
+                    react_1.default.createElement(ResourcesTitle, { "data-translation-key": "search.ai.resourcesFound" },
+                        resources.length,
+                        " ",
+                        translate('search.ai.resourcesFound', 'resources found')),
+                    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, null,
+                react_1.default.createElement(ThinkingDot, null),
+                react_1.default.createElement(ThinkingDot, null),
+                react_1.default.createElement(ThinkingDot, null))))));
+}
+const SearchAiMessageWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  width: 100%;
+  justify-content: ${({ role }) => role === constants_1.AiSearchConversationRole.USER ? 'flex-end' : 'flex-start'};
+`;
+const ResponseText = (0, styled_components_1.default)(Markdown_1.Markdown) `
+  color: var(--search-ai-text-color);
+  font-size: var(--search-ai-text-font-size);
+  line-height: var(--search-ai-text-line-height);
+  font-family: inherit;
+  white-space: break-spaces;
+
+  article {
+    > *:first-child {
+      margin-top: 0;
+    }
+    > *:last-child {
+      margin-bottom: 0;
+    }
+  }
+`;
+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%;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  background-color: ${({ role }) => role === constants_1.AiSearchConversationRole.USER
+    ? 'var(--search-ai-user-bg-color)'
+    : 'var(--search-ai-assistant-bg-color)'};
+  border: ${({ role }) => role === constants_1.AiSearchConversationRole.USER ? 'none' : 'var(--search-ai-assistant-border)'};
+  color: ${({ role }) => role === constants_1.AiSearchConversationRole.USER
+    ? 'var(--search-ai-user-text-color)'
+    : 'var(--search-ai-assistant-text-color)'};
+`;
+const ResourcesWrapper = styled_components_1.default.div `
+  gap: var(--search-ai-resources-gap);
+  display: flex;
+  flex-direction: column;
+  margin: var(--spacing-xs) 0;
+`;
+const ResourcesTitle = styled_components_1.default.div `
+  font-weight: var(--search-ai-resources-title-font-weight);
+  font-size: var(--search-ai-resources-title-font-size);
+  line-height: var(--search-ai-resources-title-line-height);
+`;
+const ResourceTagsWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--search-ai-resource-tags-gap);
+`;
+const ResourceTag = (0, styled_components_1.default)(Tag_1.Tag) `
+  .tag-default {
+    --tag-color: var(--search-ai-resource-tag-text-color);
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    display: inline-block;
+  }
+  svg {
+    min-width: var(--search-ai-resource-tag-icon-size);
+    min-height: var(--search-ai-resource-tag-icon-size);
+    flex-shrink: 0;
+  }
+  > div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+  }
+`;
+const ThinkingDotsWrapper = styled_components_1.default.div `
+  display: flex;
+  gap: var(--search-ai-thinking-dots-gap);
+  padding: var(--search-ai-thinking-dots-padding);
+`;
+const ThinkingDot = styled_components_1.default.div `
+  width: var(--search-ai-thinking-dot-size);
+  height: var(--search-ai-thinking-dot-size);
+  border-radius: 50%;
+  background: var(--search-ai-thinking-dot-color);
+  animation: bounce 1.4s infinite ease-in-out;
+
+  &:nth-child(1) {
+    animation-delay: -0.32s;
+  }
+  &:nth-child(2) {
+    animation-delay: -0.16s;
+  }
+  &:nth-child(3) {
+    animation-delay: 0s;
+  }
+
+  @keyframes bounce {
+    0%,
+    80%,
+    100% {
+      opacity: 0.2;
+      transform: scale(0.8);
+    }
+    40% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+`;
+//# sourceMappingURL=SearchAiMessage.js.map

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

@@ -8,5 +8,6 @@ export type SearchAiResponseProps = {
         url: string;
         title: string;
     }[];
+    onSuggestionClick: (suggestion: string) => void;
 };
 export declare function SearchAiResponse(props: SearchAiResponseProps): JSX.Element;