@gravity-ui/aikit 1.3.0 → 1.3.2

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2023 YANDEX LLC
+Copyright (c) 2025 YANDEX LLC
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/components/molecules/PromptInputBody/PromptInputBody.d.ts

@@ -26,6 +26,8 @@ export type PromptInputBodyProps = {
     children?: ReactNode;
     /** Additional CSS class */
     className?: string;
+    /** Additional CSS class for input element */
+    inputClassName?: string;
     /** QA/test identifier */
     qa?: string;
 };

package/dist/components/molecules/PromptInputBody/PromptInputBody.js

@@ -12,14 +12,14 @@ const b = block('prompt-input-body');
  * @returns React component
  */
 export const PromptInputBody = forwardRef((props, ref) => {
-    const { value, placeholder, maxLength, minRows = 1, maxRows = 15, autoFocus = false, disabledInput = false, onChange, onKeyDown, children, className, qa, } = props;
+    const { value, placeholder, maxLength, minRows = 1, maxRows = 15, autoFocus = false, disabledInput = false, onChange, onKeyDown, children, className, inputClassName, qa, } = props;
     // If custom content is provided, render it
     if (children) {
         return (_jsx("div", { className: b(null, className), "data-qa": qa, children: children }));
     }
     // Render default textarea
     return (_jsx("div", { className: b(null, className), "data-qa": qa, children: _jsx(TextArea, { controlRef: ref, size: "l", value: value, placeholder: placeholder, minRows: minRows, maxRows: maxRows, autoFocus: autoFocus, disabled: disabledInput, onUpdate: onChange, onKeyDown: onKeyDown, view: "clear", className: b('textarea'), controlProps: {
-                className: b('textarea-control'),
+                className: b('textarea-control', inputClassName),
                 maxLength,
             } }) }));
 });

package/dist/components/organisms/PromptInput/PromptInput.scss

@@ -22,6 +22,10 @@ $block: '.#{variables.$ns}prompt-input';
         gap: var(--g-spacing-2);
     }
 
+    &_view_full &__textarea {
+        padding-top: 0;
+    }
+
     &__content {
         display: flex;
         align-items: flex-end;

package/dist/components/organisms/PromptInput/PromptInputFull.js

@@ -18,7 +18,7 @@ export function PromptInputFull(props) {
     const { value, submitButtonState, handleChange, handleKeyDown, handleSubmit } = hookState;
     const shouldShowHeader = topContent || contextItems.length > 0 || showContextIndicator;
     const shouldShowFooter = true;
-    return (_jsxs("div", { className: b({ view: 'full' }, className), "data-qa": qa, children: [shouldShowHeader && (_jsx(PromptInputHeader, { contextItems: contextItems, showContextIndicator: showContextIndicator, contextIndicatorProps: contextIndicatorProps, children: topContent })), _jsx(PromptInputBody, { value: value, placeholder: placeholder, minRows: minRows, maxRows: maxRows, autoFocus: autoFocus, onChange: handleChange, onKeyDown: handleKeyDown }), shouldShowFooter && (_jsx(PromptInputFooter, { submitButton: {
+    return (_jsxs("div", { className: b({ view: 'full' }, className), "data-qa": qa, children: [shouldShowHeader && (_jsx(PromptInputHeader, { contextItems: contextItems, showContextIndicator: showContextIndicator, contextIndicatorProps: contextIndicatorProps, children: topContent })), _jsx(PromptInputBody, { value: value, placeholder: placeholder, minRows: minRows, maxRows: maxRows, autoFocus: autoFocus, onChange: handleChange, onKeyDown: handleKeyDown, inputClassName: b('textarea') }), shouldShowFooter && (_jsx(PromptInputFooter, { submitButton: {
                     onClick: handleSubmit,
                     state: submitButtonState,
                     tooltipSend: submitButtonTooltipSend,

package/dist/components/organisms/ToolMessage/index.js

@@ -8,5 +8,5 @@ const b = block('tool-message');
 export function ToolMessage(props) {
     const { toolName, className, qa, bodyContent, status, toolIcon, headerContent } = props;
     const { isExpanded, headerActions, footerActions, footerContent, showLoader, isWaiting } = useToolMessage(props);
-    return (_jsx(Card, { className: b({ waiting: isWaiting }, className), "data-qa": qa, children: _jsxs("div", { className: b('container'), children: [_jsx(ToolHeader, { toolName: toolName, actions: headerActions, toolIcon: toolIcon, content: headerContent, status: status }), bodyContent && isExpanded && _jsx("div", { className: b('content'), children: bodyContent }), isWaiting && (_jsx(ToolFooter, { actions: footerActions, content: footerContent, showLoader: showLoader }))] }) }));
+    return (_jsx(Card, { className: b({ waiting: isWaiting }, className), qa: qa, children: _jsxs("div", { className: b('container'), children: [_jsx(ToolHeader, { toolName: toolName, actions: headerActions, toolIcon: toolIcon, content: headerContent, status: status }), bodyContent && isExpanded && _jsx("div", { className: b('content'), children: bodyContent }), isWaiting && (_jsx(ToolFooter, { actions: footerActions, content: footerContent, showLoader: showLoader }))] }) }));
 }

package/dist/components/pages/ChatContainer/ChatContainer.js

@@ -44,12 +44,13 @@ export function ChatContainer(props) {
         return true;
     }, [hideTitleOnEmptyChat, isChatEmpty, headerProps.showTitle]);
     // Build props for Header
-    const finalHeaderProps = useMemo(() => (Object.assign(Object.assign({}, headerProps), { title: headerTitle, showTitle, baseActions: hookState.baseActions, handleNewChat: hookState.handleNewChat, handleHistoryToggle: hookState.handleHistoryToggle, handleClose: hookState.handleClose, historyButtonRef: hookState.historyButtonRef })), [
+    const finalHeaderProps = useMemo(() => (Object.assign(Object.assign({}, headerProps), { title: headerTitle, showTitle, baseActions: hookState.baseActions, handleNewChat: hookState.handleNewChat, handleHistoryToggle: hookState.handleHistoryToggle, handleFolding: hookState.handleFolding, handleClose: hookState.handleClose, historyButtonRef: hookState.historyButtonRef })), [
         headerTitle,
         showTitle,
         hookState.baseActions,
         hookState.handleNewChat,
         hookState.handleHistoryToggle,
+        hookState.handleFolding,
         hookState.handleClose,
         hookState.historyButtonRef,
         headerProps,

package/dist/components/pages/ChatContainer/__stories__/ChatContainer.stories.js

@@ -211,6 +211,7 @@ export const Playground = {
         chats: mockChats,
         showHistory: true,
         showNewChat: true,
+        showFolding: false,
         showClose: false,
         welcomeConfig: {
             title: 'Welcome to AI Chat',
@@ -225,6 +226,7 @@ export const Playground = {
         const [messages, setMessages] = useState(addActionsToMessages(mockChatMessages[initialChat.id] || []));
         const [status, setStatus] = useState(args.status || 'ready');
         const [activeChat, setActiveChat] = useState(initialChat);
+        const [foldingState, setFoldingState] = useState('opened');
         const handleSendMessage = async (data) => {
             const userMessage = {
                 id: Date.now().toString(),
@@ -261,7 +263,9 @@ export const Playground = {
         const handleCancel = async () => {
             setStatus('ready');
         };
-        return (_jsx(ChatContainer, Object.assign({}, args, { messages: messages, activeChat: activeChat, onSendMessage: handleSendMessage, onCancel: handleCancel, onSelectChat: handleSelectChat, onCreateChat: handleCreateChat, status: status })));
+        return (_jsx(ChatContainer, Object.assign({}, args, { headerProps: {
+                foldingState,
+            }, messages: messages, activeChat: activeChat, onSendMessage: handleSendMessage, onCancel: handleCancel, onSelectChat: handleSelectChat, onCreateChat: handleCreateChat, onFold: setFoldingState, status: status })));
     },
     decorators: defaultDecorators,
 };

package/dist/components/pages/ChatContainer/types.d.ts

@@ -111,6 +111,8 @@ export interface ChatContainerProps {
     onDeleteChat?: (chat: ChatType) => void;
     /** Callback when user deletes all chats */
     onDeleteAllChats?: () => Promise<void>;
+    /** Callback when user folds or unfolds the chat */
+    onFold?: (value: 'collapsed' | 'opened') => void;
     /** Callback when user closes the chat */
     onClose?: () => void;
     /** Callback when user cancels streaming */
@@ -132,7 +134,7 @@ export interface ChatContainerProps {
     /** MessageList configuration for actions and loader behavior */
     messageListConfig?: MessageListConfig;
     /** Props override for Header component */
-    headerProps?: Partial<Omit<HeaderProps, 'handleNewChat' | 'handleHistoryToggle' | 'handleClose'>>;
+    headerProps?: Partial<Omit<HeaderProps, 'handleNewChat' | 'handleHistoryToggle' | 'handleFolding' | 'handleClose'>>;
     /** Props override for ChatContent component */
     contentProps?: Partial<Omit<ChatContentProps, 'view' | 'messageListProps'>>;
     /** Props override for EmptyContainer (welcome screen) */
@@ -151,6 +153,8 @@ export interface ChatContainerProps {
     showHistory?: boolean;
     /** Show new chat button */
     showNewChat?: boolean;
+    /** Show folding button */
+    showFolding?: boolean;
     /** Show close button */
     showClose?: boolean;
     /** Hide header title when chat is empty */

package/dist/components/pages/ChatContainer/useChatContainer.d.ts

@@ -13,6 +13,7 @@ export declare function useChatContainer(props: ChatContainerProps): {
     historyButtonRef: import("react").RefObject<HTMLElement>;
     handleNewChat: () => void;
     handleHistoryToggle: () => void;
+    handleFolding: (value: "collapsed" | "opened") => void;
     handleClose: () => void;
     handleSelectChat: (chat: ChatContainerProps["activeChat"]) => void;
     handleHistoryOpenChange: (open: boolean) => void;

package/dist/components/pages/ChatContainer/useChatContainer.js

@@ -7,7 +7,7 @@ import { HeaderAction } from '../../organisms/Header';
  * @returns object with state and handlers
  */
 export function useChatContainer(props) {
-    const { messages = [], activeChat, onCreateChat, onClose, onSelectChat, showHistory = true, showNewChat = true, showClose = false, } = props;
+    const { messages = [], activeChat, onCreateChat, onClose, onFold, onSelectChat, showHistory = true, showNewChat = true, showFolding = false, showClose = false, } = props;
     // Refs for History integration with Header
     const historyButtonRef = useRef(null);
     const [isHistoryOpen, setIsHistoryOpen] = useState(false);
@@ -29,6 +29,9 @@ export function useChatContainer(props) {
     const handleHistoryToggle = useCallback(() => {
         setIsHistoryOpen((prev) => !prev);
     }, []);
+    const handleFolding = useCallback((value) => {
+        onFold === null || onFold === void 0 ? void 0 : onFold(value);
+    }, [onFold]);
     // Handler for closing
     const handleClose = useCallback(() => {
         onClose === null || onClose === void 0 ? void 0 : onClose();
@@ -53,11 +56,14 @@ export function useChatContainer(props) {
         if (showHistory) {
             actions.push(HeaderAction.History);
         }
+        if (showFolding) {
+            actions.push(HeaderAction.Folding);
+        }
         if (showClose) {
             actions.push(HeaderAction.Close);
         }
         return actions;
-    }, [showNewChat, showHistory, showClose, chatContentView]);
+    }, [showNewChat, showHistory, showFolding, showClose, chatContentView]);
     return {
         // State
         chatContentView,
@@ -68,6 +74,7 @@ export function useChatContainer(props) {
         // Handlers
         handleNewChat,
         handleHistoryToggle,
+        handleFolding,
         handleClose,
         handleSelectChat,
         handleHistoryOpenChange,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/aikit",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "description": "Gravity UI base kit for building ai assistant chats",
   "license": "MIT",
   "main": "./dist/index.js",