@gravity-ui/aikit 0.3.2 → 0.4.0

package/dist/components/atoms/Alert/Alert.scss

@@ -4,9 +4,19 @@ $block: '.#{variables.$ns}alert';
 
 #{$block} {
     display: flex;
-    align-items: center;
+    flex-direction: column;
     gap: var(--g-spacing-2);
 
+    &__header {
+        display: flex;
+        align-items: center;
+        gap: var(--g-spacing-2);
+    }
+
+    &__text {
+        flex: 1;
+    }
+
     &__icon {
         flex-shrink: 0;
 

package/dist/components/atoms/Alert/index.d.ts

@@ -7,7 +7,9 @@ export interface AlertProps {
         content: React.ReactNode;
         onClick: () => void;
     };
+    content?: React.ReactNode;
+    initialExpanded?: boolean;
     className?: string;
     qa?: string;
 }
-export declare function Alert({ text, icon, button, variant, className, qa }: AlertProps): import("react/jsx-runtime").JSX.Element;
+export declare function Alert({ text, icon, button, content, initialExpanded, variant, className, qa, }: AlertProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/atoms/Alert/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { CircleExclamationFill, CircleInfoFill, TriangleExclamationFill } from '@gravity-ui/icons';
+import { useMemo, useState } from 'react';
+import { ChevronDown, ChevronUp, CircleExclamationFill, CircleInfoFill, TriangleExclamationFill, } from '@gravity-ui/icons';
 import { Button, Icon, Text } from '@gravity-ui/uikit';
 import { block } from '../../../utils/cn';
 import './Alert.scss';
@@ -10,7 +10,8 @@ const statusIcons = {
     warning: TriangleExclamationFill,
     error: CircleExclamationFill,
 };
-export function Alert({ text, icon, button, variant = 'default', className, qa }) {
+export function Alert({ text, icon, button, content, initialExpanded = false, variant = 'default', className, qa, }) {
+    const [isExpanded, setIsExpanded] = useState(initialExpanded);
     const statusIcon = useMemo(() => {
         if (icon) {
             return _jsx("div", { className: b('icon'), children: icon });
@@ -21,5 +22,8 @@ export function Alert({ text, icon, button, variant = 'default', className, qa }
         }
         return null;
     }, [icon, variant]);
-    return (_jsxs("div", { className: b(null, className), "data-qa": qa, children: [statusIcon, _jsx(Text, { variant: "body-1", children: text }), button ? (_jsx(Button, { onClick: button.onClick, size: "s", view: "outlined", className: b('action'), children: button.content })) : null] }));
+    const toggleExpanded = () => {
+        setIsExpanded((prev) => !prev);
+    };
+    return (_jsxs("div", { className: b(null, className), "data-qa": qa, children: [_jsxs("div", { className: b('header'), children: [statusIcon, _jsx(Text, { variant: "body-1", className: b('text'), children: text }), content && (_jsx(Button, { onClick: toggleExpanded, size: "s", view: "flat", className: b('collapse-button'), children: _jsx(Icon, { data: isExpanded ? ChevronUp : ChevronDown, size: 16 }) })), button ? (_jsx(Button, { onClick: button.onClick, size: "s", view: "outlined", className: b('action'), children: button.content })) : null] }), content && isExpanded && _jsx("div", { className: b('content'), children: content })] }));
 }

package/dist/components/molecules/ToolHeader/index.js

@@ -1,19 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Text } from '@gravity-ui/uikit';
 import { block } from '../../../utils/cn';
-import { ActionButton, ToolIndicator } from '../../atoms';
+import { ActionButton } from '../../atoms';
 import { ButtonGroup } from '../ButtonGroup';
+import { ToolStatus } from '../ToolStatus';
 import './ToolHeader.scss';
 const b = block('tool-header');
-function getIndicatorStatus(status) {
-    if (status === 'success' || status === 'error' || status === 'loading') {
-        return status;
-    }
-    return undefined;
-}
 export function ToolHeader(props) {
     const { toolIcon, toolName, content, actions, status, className, qa } = props;
     const hasActions = actions && actions.length > 0;
-    const indicatorStatus = getIndicatorStatus(status);
-    return (_jsxs("div", { className: b('', className), "data-qa": qa, children: [_jsxs("div", { className: b('left'), children: [toolIcon, _jsx(Text, { children: toolName }), content] }), _jsxs("div", { className: b('right'), children: [hasActions && (_jsx(ButtonGroup, { children: actions.map((action, index) => (_jsx(ActionButton, Object.assign({ tooltipTitle: action.label, view: "flat-secondary", size: "s" }, action, { children: action.icon }), index))) })), indicatorStatus && _jsx(ToolIndicator, { status: indicatorStatus })] })] }));
+    return (_jsxs("div", { className: b('', className), "data-qa": qa, children: [_jsxs("div", { className: b('left'), children: [toolIcon, _jsx(Text, { children: toolName }), content] }), _jsxs("div", { className: b('right'), children: [hasActions && (_jsx(ButtonGroup, { children: actions.map((action, index) => (_jsx(ActionButton, Object.assign({ tooltipTitle: action.label, view: "flat-secondary", size: "s" }, action, { children: action.icon }), index))) })), _jsx(ToolStatus, { status: status })] })] }));
 }

package/dist/components/molecules/ToolStatus/ToolStatus.scss

@@ -0,0 +1,6 @@
+@use '../../../styles/variables';
+
+$block: '.#{variables.$ns}tool-status';
+
+#{$block} {
+}

package/dist/components/molecules/ToolStatus/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "status-cancelled": "Cancelled"
+}

package/dist/components/molecules/ToolStatus/i18n/index.d.ts

@@ -0,0 +1,13 @@
+export declare const i18n: ((key: "status-cancelled", params?: import("@gravity-ui/i18n").Params) => string) & {
+    Translation: import("react").ComponentType<{
+        children: (props: {
+            t: (key: "status-cancelled", params?: import("@gravity-ui/i18n").Params) => string;
+        }) => React.ReactNode;
+    }>;
+    useTranslation: () => {
+        t: (key: "status-cancelled", params?: import("@gravity-ui/i18n").Params) => string;
+    };
+    keysetData: {
+        "g-aikit-ToolStatus": Record<"status-cancelled", import("@gravity-ui/i18n").KeyData>;
+    };
+};

package/dist/components/molecules/ToolStatus/i18n/index.js

@@ -0,0 +1,5 @@
+import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
+import { NAMESPACE } from '../../../../utils/cn';
+import en from './en.json';
+import ru from './ru.json';
+export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}ToolStatus`);

package/dist/components/molecules/ToolStatus/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "status-cancelled": "Отменено"
+}

package/dist/components/molecules/ToolStatus/index.d.ts

@@ -0,0 +1,8 @@
+import type { TToolStatus as ToolStatusType } from '../../../types/tool';
+import './ToolStatus.scss';
+export type ToolStatusProps = {
+    status?: ToolStatusType;
+    className?: string;
+    qa?: string;
+};
+export declare function ToolStatus(props: ToolStatusProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/molecules/ToolStatus/index.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from '@gravity-ui/uikit';
+import { block } from '../../../utils/cn';
+import { ToolIndicator } from '../../atoms';
+import { i18n } from './i18n';
+import './ToolStatus.scss';
+const b = block('tool-status');
+function getIndicatorStatus(status) {
+    if (status === 'success' || status === 'error' || status === 'loading') {
+        return status;
+    }
+    return undefined;
+}
+export function ToolStatus(props) {
+    const { status, className, qa } = props;
+    const indicatorStatus = getIndicatorStatus(status);
+    if (status === 'cancelled') {
+        return (_jsx(Text, { color: "secondary", className: b('', className), "data-qa": qa, children: i18n('status-cancelled') }));
+    }
+    if (indicatorStatus) {
+        return _jsx(ToolIndicator, { status: indicatorStatus, className: className, qa: qa });
+    }
+    return null;
+}

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

@@ -9,3 +9,4 @@ export * from './Suggestions';
 export * from './Tabs';
 export * from './ToolFooter';
 export * from './ToolHeader';
+export * from './ToolStatus';

package/dist/components/molecules/index.js

@@ -10,3 +10,4 @@ export * from './Suggestions';
 export * from './Tabs';
 export * from './ToolFooter';
 export * from './ToolHeader';
+export * from './ToolStatus';

package/dist/hooks/index.d.ts

@@ -2,3 +2,5 @@ export * from './useDateFormatter';
 export * from './useToolMessage';
 export * from './useSmartScroll';
 export * from './useScrollPreservation';
+export * from './useAutoCollapseOnSuccess';
+export * from './useAutoCollapseOnCancelled';

package/dist/hooks/index.js

@@ -2,3 +2,5 @@ export * from './useDateFormatter';
 export * from './useToolMessage';
 export * from './useSmartScroll';
 export * from './useScrollPreservation';
+export * from './useAutoCollapseOnSuccess';
+export * from './useAutoCollapseOnCancelled';

package/dist/hooks/useAutoCollapseOnCancelled.d.ts

@@ -0,0 +1,6 @@
+import type { TToolStatus } from '../types/tool';
+export declare function useAutoCollapseOnCancelled(options: {
+    enabled: boolean;
+    status: TToolStatus | undefined;
+    setIsExpanded: (expanded: boolean) => void;
+}): void;

package/dist/hooks/useAutoCollapseOnCancelled.js

@@ -0,0 +1,10 @@
+import { useEffect } from 'react';
+export function useAutoCollapseOnCancelled(options) {
+    const { enabled, status, setIsExpanded } = options;
+    const isCancelled = status === 'cancelled';
+    useEffect(() => {
+        if (enabled && isCancelled) {
+            setIsExpanded(false);
+        }
+    }, [enabled, isCancelled, setIsExpanded]);
+}

package/dist/hooks/useAutoCollapseOnSuccess.d.ts

@@ -0,0 +1,6 @@
+import type { TToolStatus } from '../types/tool';
+export declare function useAutoCollapseOnSuccess(options: {
+    enabled: boolean;
+    status: TToolStatus | undefined;
+    setIsExpanded: (expanded: boolean) => void;
+}): void;

package/dist/hooks/useAutoCollapseOnSuccess.js

@@ -0,0 +1,10 @@
+import { useEffect } from 'react';
+export function useAutoCollapseOnSuccess(options) {
+    const { enabled, status, setIsExpanded } = options;
+    const isSuccess = status === 'success';
+    useEffect(() => {
+        if (enabled && isSuccess) {
+            setIsExpanded(false);
+        }
+    }, [enabled, isSuccess, setIsExpanded]);
+}

package/dist/hooks/useToolMessage.js

@@ -3,6 +3,8 @@ import { useCallback, useMemo, useState } from 'react';
 import { ChevronDown, ChevronUp } from '@gravity-ui/icons';
 import { Icon } from '@gravity-ui/uikit';
 import { i18n } from '../components/organisms/ToolMessage/i18n';
+import { useAutoCollapseOnCancelled } from './useAutoCollapseOnCancelled';
+import { useAutoCollapseOnSuccess } from './useAutoCollapseOnSuccess';
 function getDefaultFooterActions(status, footerActions, onAccept, onReject) {
     if (footerActions !== undefined) {
         return footerActions;
@@ -60,8 +62,10 @@ function getDefaultInitialExpanded(status, initialExpanded) {
 }
 const defaultHeaderActions = [];
 export function useToolMessage(options) {
-    const { footerActions, headerActions = defaultHeaderActions, bodyContent, status, footerContent, expandable = Boolean(bodyContent), initialExpanded, onAccept, onReject, } = options;
+    const { footerActions, headerActions = defaultHeaderActions, bodyContent, status, footerContent, expandable = Boolean(bodyContent), initialExpanded, autoCollapseOnSuccess, autoCollapseOnCancelled, onAccept, onReject, } = options;
     const [isExpanded, setIsExpanded] = useState(getDefaultInitialExpanded(status, initialExpanded));
+    useAutoCollapseOnSuccess({ enabled: Boolean(autoCollapseOnSuccess), status, setIsExpanded });
+    useAutoCollapseOnCancelled({ enabled: Boolean(autoCollapseOnCancelled), status, setIsExpanded });
     const toggleExpanded = useCallback(() => {
         setIsExpanded((prev) => !prev);
     }, []);

package/dist/types/tool.d.ts

@@ -1,11 +1,11 @@
 import { Action } from './common';
-export type ToolStatus = 'success' | 'error' | 'loading' | 'waitingConfirmation' | 'waitingSubmission';
+export type TToolStatus = 'success' | 'error' | 'loading' | 'waitingConfirmation' | 'waitingSubmission' | 'cancelled';
 export type ToolHeaderProps = {
     toolIcon?: React.ReactNode;
     toolName: string;
     content?: React.ReactNode;
     actions?: Action[];
-    status?: ToolStatus;
+    status?: TToolStatus;
     className?: string;
     qa?: string;
 };
@@ -24,9 +24,11 @@ export type ToolMessageProps = {
     bodyContent?: React.ReactNode;
     headerContent?: React.ReactNode;
     footerContent?: React.ReactNode;
-    status?: ToolStatus;
+    status?: TToolStatus;
     expandable?: boolean;
     initialExpanded?: boolean;
+    autoCollapseOnSuccess?: boolean;
+    autoCollapseOnCancelled?: boolean;
     onAccept?: () => void;
     onReject?: () => void;
     className?: string;

package/package.json

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