@gravity-ui/aikit 0.6.0 → 1.0.1

package/dist/components/templates/History/HistoryList.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DOMProps, QAProps } from '@gravity-ui/uikit';
+import { DOMProps, InputControlSize, QAProps } from '@gravity-ui/uikit';
 import { ChatType } from '../../../types';
 import { ChatFilterFunction } from '../../../utils/chatUtils';
 import './History.scss';
@@ -37,6 +37,8 @@ export interface HistoryListProps extends QAProps, DOMProps {
     loading?: boolean;
     /** Callback when chat is clicked (for closing popup in parent) */
     onChatClick?: (chat: ChatType) => void;
+    /** Size of the list */
+    size?: InputControlSize;
 }
 /**
  * HistoryList component - displays a list of chats with search, grouping, and actions

package/dist/components/templates/History/HistoryList.js

@@ -16,7 +16,7 @@ const b = block('history');
  * @returns React component
  */
 export function HistoryList(props) {
-    const { chats, selectedChat, onSelectChat, onDeleteChat, onLoadMore, hasMore = false, searchable = true, groupBy = 'date', showActions = true, emptyPlaceholder, emptyFilteredPlaceholder, className, qa, style, filterFunction = defaultChatFilter, loading = false, onChatClick, } = props;
+    const { chats, selectedChat, onSelectChat, onDeleteChat, onLoadMore, hasMore = false, searchable = true, groupBy = 'date', showActions = true, emptyPlaceholder, emptyFilteredPlaceholder, className, qa, style, filterFunction = defaultChatFilter, loading = false, onChatClick, size = 'm', } = props;
     const [filteredItemCount, setFilteredItemCount] = useState(null);
     // Group chats if needed
     const groupedChats = useMemo(() => {
@@ -57,7 +57,11 @@ export function HistoryList(props) {
     const selectedItemIndex = useMemo(() => {
         return listItems.findIndex((item) => item.type === 'chat' && item.id === (selectedChat === null || selectedChat === void 0 ? void 0 : selectedChat.id));
     }, [listItems, selectedChat]);
-    const handleChatClick = (chat) => {
+    const handleChatClick = (chat, _, fromKeyboard, event) => {
+        var _a;
+        if (fromKeyboard && ((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.type) === 'button') {
+            return;
+        }
         onSelectChat === null || onSelectChat === void 0 ? void 0 : onSelectChat(chat);
         onChatClick === null || onChatClick === void 0 ? void 0 : onChatClick(chat);
     };
@@ -78,11 +82,11 @@ export function HistoryList(props) {
             };
         };
     }, [filterFunction]);
-    const renderItem = (item) => {
+    const renderItem = (item, isActive) => {
         if (item.type === 'date-header') {
             return _jsx(DateHeaderItem, { date: item.date }, `date-${item.date}`);
         }
-        return (_jsx(ChatItem, { chat: item, showActions: showActions, onChatClick: handleChatClick, onDeleteClick: onDeleteChat ? handleDeleteClick : undefined }, item.id));
+        return (_jsx(ChatItem, { chat: item, showActions: showActions, onDeleteClick: onDeleteChat ? handleDeleteClick : undefined, isActive: isActive }, item.id));
     };
     const emptyState = emptyPlaceholder || _jsx("div", { className: b('empty'), children: i18n('empty-state') });
     const emptyFilteredState = emptyFilteredPlaceholder || (_jsx("div", { className: b('empty'), children: i18n('empty-filtered-state') }));
@@ -90,5 +94,5 @@ export function HistoryList(props) {
     const finalEmptyPlaceholder = filteredItemCount === null || filteredItemCount === listItems.length
         ? emptyState
         : emptyFilteredState;
-    return (_jsxs("div", { className: b('container', className), "data-qa": qa, style: style, children: [_jsx("div", { className: b('list-wrapper'), children: loading ? (_jsx("div", { className: b('loader-wrapper'), children: _jsx(Loader, { view: "loading" }) })) : (_jsx(List, { size: "m", items: listItems, renderItem: renderItem, virtualized: false, filterable: searchable, filterItem: wrappedFilterFunction, filterPlaceholder: i18n('search-placeholder'), filterClassName: b('filter'), emptyPlaceholder: finalEmptyPlaceholder, selectedItemIndex: selectedItemIndex, itemsClassName: b('list'), itemClassName: b('list-item'), onFilterEnd: (data) => setFilteredItemCount(data.items.length) })) }), hasMore && onLoadMore && (_jsx(Button, { view: "flat-action", size: "m", width: "max", onClick: onLoadMore, children: i18n('action-load-more') }))] }));
+    return (_jsxs("div", { className: b('container', className), "data-qa": qa, style: style, children: [_jsx("div", { className: b('list-wrapper'), children: loading ? (_jsx("div", { className: b('loader-wrapper'), children: _jsx(Loader, { view: "loading" }) })) : (_jsx(List, { size: size, items: listItems, renderItem: renderItem, virtualized: false, filterable: searchable, filterItem: wrappedFilterFunction, filterPlaceholder: i18n('search-placeholder'), filterClassName: b('filter'), emptyPlaceholder: finalEmptyPlaceholder, selectedItemIndex: selectedItemIndex, itemsClassName: b('list'), itemClassName: b('list-item'), onFilterEnd: (data) => setFilteredItemCount(data.items.length), onItemClick: handleChatClick })) }), hasMore && onLoadMore && (_jsx(Button, { view: "flat-action", size: "m", width: "max", onClick: onLoadMore, children: i18n('action-load-more') }))] }));
 }

package/dist/components/templates/History/__stories__/History.stories.d.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { History } from '..';
+declare const _default: Meta;
+export default _default;
+type Story = StoryObj<typeof History>;
+export declare const Playground: Story;
+export declare const WithSelectedChat: Story;
+export declare const WithLoadMore: Story;
+export declare const WithoutSearch: Story;
+export declare const WithoutGrouping: Story;
+export declare const WithoutActions: Story;
+export declare const EmptyState: Story;
+export declare const WithLoadMoreAndDelete: Story;
+export declare const Interactive: Story;
+export declare const WithCustomEmptyPlaceholder: Story;
+export declare const WithCustomFilter: Story;
+export declare const NotForceOpen: Story;
+export declare const Loading: Story;

package/dist/components/templates/History/__stories__/History.stories.js

@@ -0,0 +1,289 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { ClockArrowRotateLeft } from '@gravity-ui/icons';
+import { Icon } from '@gravity-ui/uikit';
+import { History } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import { ActionButton } from '../../../atoms/ActionButton';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'templates/History',
+    component: History,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+};
+// Generate mock chats
+const generateMockChats = (count) => {
+    const now = new Date();
+    const chats = [];
+    for (let i = 0; i < count; i++) {
+        const daysAgo = Math.floor(i / 3); // Group 3 chats per day
+        const date = new Date(now);
+        date.setDate(date.getDate() - daysAgo);
+        chats.push({
+            id: `chat-${i}`,
+            name: `Chat ${i + 1}`,
+            createTime: date.toISOString(),
+            lastMessage: i % 3 === 0
+                ? `Looooooooong last message for example ellipsis from chat ${i + 1}`
+                : `Last message from chat ${i + 1}`,
+            metadata: {},
+        });
+    }
+    return chats;
+};
+const mockChats = generateMockChats(15);
+function HistoryWithTrigger(_a) {
+    var { initialOpen = true } = _a, props = __rest(_a, ["initialOpen"]);
+    const [open, setOpen] = useState(false);
+    const anchorRef = useRef(null);
+    const setInitialOpen = useRef(false);
+    useEffect(() => {
+        if (initialOpen && !open && anchorRef.current && !setInitialOpen.current) {
+            setOpen(true);
+            setInitialOpen.current = true;
+        }
+    }, [initialOpen, open, anchorRef.current, setInitialOpen.current]);
+    return (_jsxs("div", { style: { paddingLeft: '400px' }, children: [_jsx(ActionButton, { ref: anchorRef, view: "flat", size: "m", onClick: () => setOpen(!open), tooltipTitle: "Chat History", children: _jsx(Icon, { data: ClockArrowRotateLeft, size: 16 }) }), _jsx(History, Object.assign({}, props, { open: open, onOpenChange: setOpen, anchorElement: anchorRef.current }))] }));
+}
+const defaultDecorators = [
+    (Story) => (_jsx(ContentWrapper, { width: "600px", height: "800px", children: _jsx(Story, {}) })),
+];
+export const Playground = {
+    args: {
+        chats: mockChats,
+        searchable: true,
+        groupBy: 'date',
+        showActions: true,
+        onSelectChat: (chat) => {
+            // eslint-disable-next-line no-console
+            console.log('Selected chat:', chat);
+        },
+        onDeleteChat: (chat) => {
+            // eslint-disable-next-line no-console
+            console.log('Delete chat:', chat);
+        },
+    },
+    render: (args) => _jsx(HistoryWithTrigger, Object.assign({}, args)),
+    decorators: defaultDecorators,
+};
+export const WithSelectedChat = {
+    args: {
+        chats: mockChats,
+        selectedChat: mockChats[2],
+        searchable: true,
+        groupBy: 'date',
+        showActions: true,
+        onSelectChat: (chat) => {
+            // eslint-disable-next-line no-console
+            console.log('Selected chat:', chat);
+        },
+    },
+    render: (args) => _jsx(HistoryWithTrigger, Object.assign({}, args)),
+    decorators: defaultDecorators,
+};
+export const WithLoadMore = {
+    args: {
+        searchable: true,
+        groupBy: 'date',
+        showActions: true,
+        onSelectChat: (chat) => {
+            // eslint-disable-next-line no-console
+            console.log('Selected chat:', chat);
+        },
+    },
+    render: (args) => {
+        const [chats, setChats] = useState(mockChats.slice(0, 6));
+        const [hasMore, setHasMore] = useState(true);
+        const handleLoadMore = () => {
+            // eslint-disable-next-line no-console
+            console.log('Loading more chats...');
+            const currentLength = chats.length;
+            const nextChats = mockChats.slice(0, currentLength + 6);
+            setChats(nextChats);
+            if (nextChats.length >= mockChats.length) {
+                setHasMore(false);
+            }
+        };
+        return (_jsx(HistoryWithTrigger, Object.assign({}, args, { chats: chats, hasMore: hasMore, onLoadMore: handleLoadMore })));
+    },
+    decorators: defaultDecorators,
+};
+export const WithoutSearch = {
+    args: {
+        chats: mockChats,
+        searchable: false,
+        groupBy: 'date',
+        showActions: true,
+        onSelectChat: (chat) => {
+            // eslint-disable-next-line no-console
+            console.log('Selected chat:', chat);
+        },
+    },
+    render: (args) => _jsx(HistoryWithTrigger, Object.assign({}, args)),
+    decorators: defaultDecorators,
+};
+export const WithoutGrouping = {
+    args: {
+        chats: mockChats,
+        searchable: true,
+        groupBy: 'none',
+        showActions: true,
+        onSelectChat: (chat) => {
+            // eslint-disable-next-line no-console
+            console.log('Selected chat:', chat);
+        },
+    },
+    render: (args) => _jsx(HistoryWithTrigger, Object.assign({}, args)),
+    decorators: defaultDecorators,
+};
+export const WithoutActions = {
+    args: {
+        chats: mockChats,
+        searchable: true,
+        groupBy: 'date',
+        showActions: false,
+        onSelectChat: (chat) => {
+            // eslint-disable-next-line no-console
+            console.log('Selected chat:', chat);
+        },
+    },
+    render: (args) => _jsx(HistoryWithTrigger, Object.assign({}, args)),
+    decorators: defaultDecorators,
+};
+export const EmptyState = {
+    args: {
+        chats: [],
+        searchable: true,
+        groupBy: 'date',
+        showActions: true,
+    },
+    render: (args) => _jsx(HistoryWithTrigger, Object.assign({}, args)),
+    decorators: defaultDecorators,
+};
+export const WithLoadMoreAndDelete = {
+    args: {
+        chats: mockChats,
+        searchable: true,
+        groupBy: 'date',
+        showActions: true,
+        hasMore: true,
+        onSelectChat: (chat) => {
+            // eslint-disable-next-line no-console
+            console.log('Selected chat:', chat);
+        },
+        onDeleteChat: (chat) => {
+            // eslint-disable-next-line no-console
+            console.log('Delete chat:', chat);
+        },
+        onLoadMore: () => {
+            // eslint-disable-next-line no-console
+            console.log('Load more chats');
+        },
+    },
+    render: (args) => _jsx(HistoryWithTrigger, Object.assign({}, args)),
+    decorators: defaultDecorators,
+};
+export const Interactive = {
+    args: {
+        searchable: true,
+        groupBy: 'date',
+        showActions: true,
+    },
+    render: (args) => {
+        const [chats, setChats] = useState(mockChats);
+        const [selectedChat, setSelectedChat] = useState(null);
+        const handleDeleteChat = (chat) => {
+            setChats((prev) => prev.filter((c) => c.id !== chat.id));
+            if ((selectedChat === null || selectedChat === void 0 ? void 0 : selectedChat.id) === chat.id) {
+                setSelectedChat(null);
+            }
+        };
+        return (_jsx(HistoryWithTrigger, Object.assign({}, args, { chats: chats, selectedChat: selectedChat, onSelectChat: setSelectedChat, onDeleteChat: handleDeleteChat })));
+    },
+    decorators: defaultDecorators,
+};
+export const WithCustomEmptyPlaceholder = {
+    args: {
+        chats: [],
+        searchable: true,
+        groupBy: 'date',
+        showActions: true,
+        emptyPlaceholder: (_jsxs("div", { style: {
+                padding: '40px',
+                color: '#999',
+                width: '100%',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }, children: [_jsx("div", { style: {
+                        fontSize: '48px',
+                        height: '48px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        marginBottom: '16px',
+                    }, children: "\uD83D\uDCAC" }), _jsx("div", { style: {
+                        fontSize: '16px',
+                        fontWeight: 'bold',
+                        marginBottom: '8px',
+                    }, children: "No conversations yet" }), _jsx("div", { style: { fontSize: '14px' }, children: "Start a new chat to begin" })] })),
+    },
+    render: (args) => _jsx(HistoryWithTrigger, Object.assign({}, args)),
+    decorators: defaultDecorators,
+};
+export const WithCustomFilter = {
+    args: {
+        chats: mockChats,
+        searchable: true,
+        groupBy: 'date',
+        showActions: true,
+        onSelectChat: (chat) => {
+            // eslint-disable-next-line no-console
+            console.log('Selected chat:', chat);
+        },
+        // Custom filter that searches only in chat names (not in messages)
+        filterFunction: (filter) => (item) => {
+            if (item.type === 'date-header') {
+                return true;
+            }
+            return item.name.toLowerCase().includes(filter.toLowerCase());
+        },
+    },
+    render: (args) => _jsx(HistoryWithTrigger, Object.assign({}, args)),
+    decorators: defaultDecorators,
+};
+export const NotForceOpen = {
+    args: {
+        chats: mockChats,
+        searchable: true,
+        groupBy: 'date',
+        showActions: true,
+        onSelectChat: (chat) => {
+            // eslint-disable-next-line no-console
+            console.log('Selected chat:', chat);
+        },
+        onDeleteChat: (chat) => {
+            // eslint-disable-next-line no-console
+            console.log('Delete chat:', chat);
+        },
+    },
+    render: (args) => _jsx(HistoryWithTrigger, Object.assign({ initialOpen: false }, args)),
+    decorators: defaultDecorators,
+};
+export const Loading = {
+    args: {
+        chats: [],
+        loading: true,
+        searchable: true,
+        groupBy: 'date',
+        showActions: true,
+    },
+    render: (args) => _jsx(HistoryWithTrigger, Object.assign({}, args)),
+    decorators: defaultDecorators,
+};

package/dist/demo/ContentWrapper/ContentWrapper.d.ts

@@ -0,0 +1,4 @@
+import './ContentWrapper.scss';
+type Props = React.PropsWithChildren<React.CSSProperties>;
+export declare function ContentWrapper(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/demo/ContentWrapper/ContentWrapper.js

@@ -0,0 +1,9 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../utils/cn';
+import './ContentWrapper.scss';
+const b = cn('content-wrapper');
+export function ContentWrapper(props) {
+    const { children } = props, style = __rest(props, ["children"]);
+    return (_jsx("div", { className: b(), style: style, children: children }));
+}

package/dist/demo/ContentWrapper/index.d.ts

@@ -0,0 +1 @@
+export { ContentWrapper } from './ContentWrapper';

package/dist/demo/ContentWrapper/index.js

@@ -0,0 +1 @@
+export { ContentWrapper } from './ContentWrapper';

package/dist/demo/Showcase/Showcase.d.ts

@@ -0,0 +1,9 @@
+import './Showcase.scss';
+type Props = React.PropsWithChildren<{
+    title?: string;
+    description?: React.ReactNode;
+    direction?: 'row' | 'column';
+    className?: string;
+}>;
+export declare function Showcase({ title, description, direction, className, children }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/demo/Showcase/Showcase.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../utils/cn';
+import './Showcase.scss';
+const b = cn('showcase');
+export function Showcase({ title, description, direction = 'row', className, children }) {
+    return (_jsxs("div", { className: b({ direction }, className), children: [title && _jsx("div", { className: b('title'), children: title }), description && _jsx("div", { className: b('description'), children: description }), _jsx("div", { className: b('content'), children: children })] }));
+}

package/dist/demo/Showcase/index.d.ts

@@ -0,0 +1 @@
+export { Showcase } from './Showcase';

package/dist/demo/Showcase/index.js

@@ -0,0 +1 @@
+export { Showcase } from './Showcase';

package/dist/demo/ShowcaseItem/ShowcaseItem.d.ts

@@ -0,0 +1,8 @@
+import './ShowcaseItem.scss';
+interface ShowcaseItemProps {
+    title: string;
+    children: React.ReactNode;
+    width?: string | number;
+}
+export declare function ShowcaseItem({ title, children, width }: ShowcaseItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/demo/ShowcaseItem/ShowcaseItem.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../utils/cn';
+import './ShowcaseItem.scss';
+const b = cn('showcase-item');
+export function ShowcaseItem({ title, children, width }) {
+    return (_jsxs("div", { className: b(), style: { width }, children: [_jsx("div", { className: b('title'), children: title }), _jsx("div", { className: b('content'), children: children })] }));
+}

package/dist/demo/ShowcaseItem/index.d.ts

@@ -0,0 +1 @@
+export { ShowcaseItem } from './ShowcaseItem';

package/dist/demo/ShowcaseItem/index.js

@@ -0,0 +1 @@
+export { ShowcaseItem } from './ShowcaseItem';

package/dist/demo/SwapArea/SwapArea.d.ts

@@ -0,0 +1,2 @@
+import './SwapArea.scss';
+export declare const SwapArea: () => import("react/jsx-runtime").JSX.Element;

package/dist/demo/SwapArea/SwapArea.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { block } from '../../utils/cn';
+import './SwapArea.scss';
+const b = block('swap-area');
+export const SwapArea = () => {
+    return _jsx("div", { className: b(), children: "Swap Area" });
+};

package/dist/demo/SwapArea/index.d.ts

@@ -0,0 +1 @@
+export { SwapArea } from './SwapArea';

package/dist/demo/SwapArea/index.js

@@ -0,0 +1 @@
+export { SwapArea } from './SwapArea';

package/dist/hooks/useSmartScroll.d.ts

@@ -1,7 +1,12 @@
 import { type RefObject } from 'react';
+import type { ChatStatus } from '../types';
 export interface UseSmartScrollReturn<T extends HTMLElement> {
     containerRef: RefObject<T>;
     endRef: RefObject<T>;
-    scrollToBottom: () => void;
+    scrollToBottom: (behavior?: ScrollBehavior) => void;
 }
-export declare function useSmartScroll<T extends HTMLElement>(isStreaming?: boolean, messagesCount?: number): UseSmartScrollReturn<T>;
+export declare function useSmartScroll<T extends HTMLElement>({ isStreaming, messagesCount, status, }: {
+    isStreaming?: boolean;
+    messagesCount: number;
+    status?: ChatStatus;
+}): UseSmartScrollReturn<T>;

package/dist/hooks/useSmartScroll.js

@@ -1,26 +1,21 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 const SCROLL_THRESHOLD = 10;
-export function useSmartScroll(isStreaming = false, messagesCount = 0) {
+export function useSmartScroll({ isStreaming = false, messagesCount, status, }) {
     const containerRef = useRef(null);
     const endRef = useRef(null);
-    const [userScrolledUp, setUserScrolledUp] = useState(false);
-    const prevMessagesCount = useRef(messagesCount);
-    const checkIfUserScrolledUp = useCallback(() => {
-        const container = containerRef.current;
-        if (!container)
-            return false;
-        const { scrollTop, scrollHeight, clientHeight } = container;
-        const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
-        return distanceFromBottom > SCROLL_THRESHOLD;
-    }, []);
+    const userScrolledUpRef = useRef(false);
     const scrollToBottom = useCallback((behavior = 'instant') => {
-        if (!userScrolledUp) {
+        if (!userScrolledUpRef.current) {
             const end = endRef.current;
             if (end) {
                 end.scrollIntoView({ behavior, block: 'end' });
             }
         }
-    }, [userScrolledUp]);
+    }, []);
+    // Initial scroll to bottom
+    useEffect(() => {
+        scrollToBottom();
+    }, []);
     // Handle user scroll events
     useEffect(() => {
         const container = containerRef.current;
@@ -28,14 +23,19 @@ export function useSmartScroll(isStreaming = false, messagesCount = 0) {
             return undefined;
         }
         const handleScroll = () => {
-            const scrolledUp = checkIfUserScrolledUp();
-            setUserScrolledUp(scrolledUp);
+            if (!container) {
+                return;
+            }
+            const { scrollTop, scrollHeight, clientHeight } = container;
+            const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+            const scrolledUp = distanceFromBottom > SCROLL_THRESHOLD;
+            userScrolledUpRef.current = scrolledUp;
         };
         container.addEventListener('scroll', handleScroll, { passive: true });
         return () => {
             container.removeEventListener('scroll', handleScroll);
         };
-    }, [checkIfUserScrolledUp]);
+    }, []);
     // Handle DOM mutations during streaming
     useEffect(() => {
         const container = containerRef.current;
@@ -54,14 +54,16 @@ export function useSmartScroll(isStreaming = false, messagesCount = 0) {
         return () => {
             observer.disconnect();
         };
-    }, [isStreaming, scrollToBottom]);
-    // Handle new messages
+    }, [isStreaming]);
+    // Handle status changes
+    useEffect(() => {
+        scrollToBottom('smooth');
+    }, [status]);
     useEffect(() => {
-        if (messagesCount > prevMessagesCount.current) {
+        if (messagesCount) {
             scrollToBottom('smooth');
         }
-        prevMessagesCount.current = messagesCount;
-    }, [messagesCount, scrollToBottom]);
+    }, [messagesCount]);
     return {
         containerRef,
         endRef,

package/dist/types/common.d.ts

@@ -1,7 +1,15 @@
-import { ButtonView } from '@gravity-ui/uikit';
-export type Action = {
+import { ButtonButtonProps } from '@gravity-ui/uikit';
+/**
+ * Action configuration object with properties
+ */
+export type ActionConfig = {
+    actionType?: string;
     label?: string;
-    onClick?: () => void;
-    view?: ButtonView;
     icon?: React.ReactNode;
-};
+} & ButtonButtonProps;
+/**
+ * Action can be either:
+ * - ActionConfig object with properties (label, icon, onClick, view)
+ * - React.ReactNode for fully custom content
+ */
+export type Action = ActionConfig | React.ReactNode;

package/dist/types/messages.d.ts

@@ -1,14 +1,17 @@
 import type React from 'react';
-import type { IconData } from '@gravity-ui/uikit';
+import { ActionConfig } from './common';
 import { ToolMessageProps } from './tool';
+export type BaseMessageActionConfig = ActionConfig;
+/**
+ * BaseMessage action can be either:
+ * - BaseMessageActionConfig object with properties (including type for default icons)
+ * - React.ReactNode for fully custom content
+ */
+export type BaseMessageAction = BaseMessageActionConfig | React.ReactNode;
 export type BaseMessageProps = {
     children: React.ReactNode;
     role: TMessageRole;
-    actions?: Array<{
-        type: string;
-        onClick: () => void;
-        icon?: IconData;
-    }>;
+    actions?: BaseMessageAction[];
     timestamp?: string;
     showTimestamp?: boolean;
     showActionsOnHover?: boolean;

package/dist/utils/actionUtils.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { Action, ActionConfig } from '../types/common';
+/**
+ * Type guard для проверки, является ли action React элементом
+ * @param action - Проверяемое значение
+ * @returns true если action является React.ReactNode, false если это ActionConfig
+ */
+export declare function isReactNodeAction(action: Action): action is React.ReactNode;
+/**
+ * Type guard для проверки, является ли action объектом конфигурации
+ * @param action - Проверяемое значение
+ * @returns true если action является ActionConfig, false если это React.ReactNode
+ */
+export declare function isActionConfig(action: Action): action is ActionConfig;

package/dist/utils/actionUtils.js

@@ -0,0 +1,17 @@
+import React from 'react';
+/**
+ * Type guard для проверки, является ли action React элементом
+ * @param action - Проверяемое значение
+ * @returns true если action является React.ReactNode, false если это ActionConfig
+ */
+export function isReactNodeAction(action) {
+    return React.isValidElement(action);
+}
+/**
+ * Type guard для проверки, является ли action объектом конфигурации
+ * @param action - Проверяемое значение
+ * @returns true если action является ActionConfig, false если это React.ReactNode
+ */
+export function isActionConfig(action) {
+    return !React.isValidElement(action);
+}