@gravity-ui/aikit 0.0.1

package/dist/src/constants/index.js

@@ -0,0 +1 @@
+export const RELATIVE_DATE_THRESHOLD = 7; // 7 days

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

@@ -0,0 +1,7 @@
+import './ContentWrapper.scss';
+type Props = React.PropsWithChildren<{
+    width?: string;
+    height?: string;
+}>;
+export declare function ContentWrapper({ children, width, height }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/demo/ContentWrapper/ContentWrapper.js

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

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

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

package/dist/src/demo/ContentWrapper/index.js

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

package/dist/src/demo/DocsDecorator/DocsDecorator.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { DocsContainerProps } from '@storybook/addon-docs';
+import './DocsDecorator.scss';
+export interface DocsDecoratorProps extends React.PropsWithChildren<DocsContainerProps> {
+}
+export declare function DocsDecorator({ children, context }: DocsDecoratorProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/demo/DocsDecorator/DocsDecorator.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MobileProvider, ThemeProvider, getThemeType } from '@gravity-ui/uikit';
+import { DocsContainer } from '@storybook/addon-docs';
+import { themes } from '../../../.storybook/theme';
+import { cn } from '../../utils/cn';
+import './DocsDecorator.scss';
+const b = cn('docs-decorator');
+export function DocsDecorator({ children, context }) {
+    // @ts-expect-error
+    const theme = context.store.userGlobals.globals.theme;
+    return (_jsx("div", { className: b(), children: _jsx(DocsContainer, { context: context, theme: themes[getThemeType(theme)], children: _jsx(ThemeProvider, { theme: theme, children: _jsx(MobileProvider, { mobile: false, children: children }) }) }) }));
+}

package/dist/src/demo/DocsDecorator/ThemeContext.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ThemeContext: React.Context<string>;

package/dist/src/demo/DocsDecorator/ThemeContext.js

@@ -0,0 +1,2 @@
+import React from 'react';
+export const ThemeContext = React.createContext('light');

package/dist/src/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/src/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/src/demo/Showcase/index.d.ts

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

package/dist/src/demo/Showcase/index.js

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

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

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

package/dist/src/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 }) {
+    return (_jsxs("div", { className: b(), children: [_jsx("div", { className: b('title'), children: title }), _jsx("div", { className: b('content'), children: children })] }));
+}

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

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

package/dist/src/demo/ShowcaseItem/index.js

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

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

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

package/dist/src/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/src/demo/SwapArea/index.d.ts

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

package/dist/src/demo/SwapArea/index.js

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

package/dist/src/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useDateFormatter';
+export * from './useToolMessage';

package/dist/src/hooks/index.js

@@ -0,0 +1,2 @@
+export * from './useDateFormatter';
+export * from './useToolMessage';

package/dist/src/hooks/useDateFormatter/index.d.ts

@@ -0,0 +1,34 @@
+import { Dayjs } from 'dayjs';
+export interface UseDateFormatterOptions {
+    date: string | Date | number;
+    format?: string;
+}
+export interface UseDateFormatterResult {
+    formattedDate: string;
+    formattedTime: string;
+    fullDate: string;
+    dateObject: Dayjs | null;
+    isValid: boolean;
+    diffDays: number | null;
+}
+/**
+ * Gets formatted date string based on format and relative flag
+ * @param dateObject - Dayjs date object
+ * @param format - Optional format string
+ * @param relative - Whether to use relative date formatting
+ * @returns Formatted date string
+ */
+export declare function getFormattedDate(dateObject: Dayjs, format?: string): string;
+/**
+ * Gets formatted time string based on format and relative flag
+ * @param dateObject - Dayjs date object
+ * @param format - Optional format string
+ * @returns Formatted time string
+ */
+export declare function getFormattedTime(dateObject: Dayjs, format?: string): string;
+/**
+ * Hook for formatting dates
+ * @param options - Date formatting options
+ * @returns Formatted date string, full date for title, and validation info
+ */
+export declare function useDateFormatter(options: UseDateFormatterOptions): UseDateFormatterResult;

package/dist/src/hooks/useDateFormatter/index.js

@@ -0,0 +1,101 @@
+import { useMemo } from 'react';
+import dayjs from 'dayjs';
+import { RELATIVE_DATE_THRESHOLD } from '../../constants';
+/**
+ * Gets the full date string for title attribute
+ * @param dateObject - Dayjs date object
+ * @returns Full formatted date string
+ */
+function getFullDate(dateObject) {
+    if (!dateObject.isValid()) {
+        return '';
+    }
+    return new Intl.DateTimeFormat(undefined, {
+        dateStyle: 'full',
+        timeStyle: 'short',
+    }).format(dateObject.toDate());
+}
+/**
+ * Gets formatted date string based on format and relative flag
+ * @param dateObject - Dayjs date object
+ * @param format - Optional format string
+ * @param relative - Whether to use relative date formatting
+ * @returns Formatted date string
+ */
+export function getFormattedDate(dateObject, format) {
+    if (!format) {
+        return dateObject.format('YYYY.MM.DD');
+    }
+    // Extract date part from custom format
+    // Remove common time format tokens (HH, H, hh, h, mm, ss, A, a, etc.)
+    const dateFormat = format.replace(/\s*(HH?|hh?|mm|ss|A|a|Z|z).*/g, '').trim();
+    if (!dateFormat) {
+        return '';
+    }
+    return dateObject.format(dateFormat);
+}
+/**
+ * Gets formatted time string based on format and relative flag
+ * @param dateObject - Dayjs date object
+ * @param format - Optional format string
+ * @returns Formatted time string
+ */
+export function getFormattedTime(dateObject, format) {
+    if (!format) {
+        return dateObject.format('HH:mm');
+    }
+    // Extract time part from custom format
+    // Find the first time token and capture everything from there to the end
+    // This handles formats like "HH:mm", "HH-mm", "HH.mm", "HH~mm", "HH/mm", "HH\mm", etc.
+    // Time tokens: H, h (hours), m (minutes), s (seconds), A, a (AM/PM), Z, z (timezone)
+    const timeMatch = format.match(/(.*?)(\s*[HhmsAaZz](?:[HhmsAaZz]|[^HhmsAaZz])*)$/);
+    if (timeMatch && timeMatch[2]) {
+        const timeFormat = timeMatch[2].trim();
+        return dateObject.format(timeFormat);
+    }
+    return dateObject.format('HH:mm');
+}
+/**
+ * Calculates the difference in days from today
+ * @param dateObject - Dayjs date object
+ * @returns Number of days difference
+ */
+function getDiffDays(dateObject) {
+    const now = dayjs();
+    const today = now.startOf('day');
+    const dateStart = dateObject.startOf('day');
+    const diffDays = today.diff(dateStart, 'day');
+    if (diffDays >= RELATIVE_DATE_THRESHOLD) {
+        return null;
+    }
+    return today.diff(dateStart, 'day');
+}
+/**
+ * Hook for formatting dates
+ * @param options - Date formatting options
+ * @returns Formatted date string, full date for title, and validation info
+ */
+export function useDateFormatter(options) {
+    const { date, format } = options;
+    return useMemo(() => {
+        const dateObject = dayjs(date);
+        if (!dateObject.isValid()) {
+            return {
+                formattedDate: '',
+                formattedTime: '',
+                fullDate: '',
+                dateObject: null,
+                isValid: false,
+                diffDays: null,
+            };
+        }
+        return {
+            fullDate: getFullDate(dateObject),
+            formattedDate: getFormattedDate(dateObject, format),
+            formattedTime: getFormattedTime(dateObject, format),
+            diffDays: getDiffDays(dateObject),
+            isValid: dateObject.isValid(),
+            dateObject: dateObject.isValid() ? dateObject : null,
+        };
+    }, [date, format]);
+}

package/dist/src/hooks/useToolMessage.d.ts

@@ -0,0 +1,11 @@
+import type { Action } from '../types/common';
+import type { ToolMessageProps } from '../types/tool';
+export declare function useToolMessage(options: ToolMessageProps): {
+    isExpanded: boolean;
+    toggleExpanded: () => void;
+    headerActions: Action[];
+    footerActions: Action[];
+    footerContent: import("react").ReactNode;
+    showLoader: boolean;
+    isWaiting: boolean;
+};

package/dist/src/hooks/useToolMessage.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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';
+function getDefaultFooterActions(status, footerActions, onAccept, onReject) {
+    if (footerActions !== undefined) {
+        return footerActions;
+    }
+    switch (status) {
+        case 'waitingConfirmation':
+            return [
+                {
+                    label: i18n('action-reject'),
+                    onClick: onReject,
+                    view: 'outlined',
+                },
+                {
+                    label: i18n('action-accept'),
+                    onClick: onAccept,
+                    view: 'action',
+                },
+            ];
+        case 'waitingSubmission':
+            return [
+                {
+                    label: i18n('action-cancel'),
+                    onClick: onReject,
+                    view: 'outlined',
+                },
+            ];
+        default:
+            return [];
+    }
+}
+function getDefaultFooterMessage(status, footerContent) {
+    if (footerContent) {
+        return footerContent;
+    }
+    switch (status) {
+        case 'waitingConfirmation':
+            return i18n('status-waiting-confirmation');
+        case 'waitingSubmission':
+            return i18n('status-waiting-submission');
+        default:
+            return undefined;
+    }
+}
+function getShowLoader(status) {
+    return status === 'waitingConfirmation' || status === 'waitingSubmission';
+}
+function isWaitingTool(status) {
+    return status === 'waitingConfirmation' || status === 'waitingSubmission';
+}
+function getDefaultInitialExpanded(status, initialExpanded) {
+    if (initialExpanded !== undefined) {
+        return initialExpanded;
+    }
+    return status === 'waitingConfirmation' || status === 'waitingSubmission';
+}
+const defaultHeaderActions = [];
+export function useToolMessage(options) {
+    const { footerActions, headerActions = defaultHeaderActions, bodyContent, status, footerContent, expandable = Boolean(bodyContent), initialExpanded, onAccept, onReject, } = options;
+    const [isExpanded, setIsExpanded] = useState(getDefaultInitialExpanded(status, initialExpanded));
+    const toggleExpanded = useCallback(() => {
+        setIsExpanded((prev) => !prev);
+    }, []);
+    const expandCollapseAction = useMemo(() => {
+        if (!expandable) {
+            return null;
+        }
+        return {
+            label: isExpanded ? i18n('action-collapse') : i18n('action-expand'),
+            onClick: toggleExpanded,
+            icon: _jsx(Icon, { data: isExpanded ? ChevronUp : ChevronDown, size: 16 }),
+        };
+    }, [expandable, isExpanded, toggleExpanded]);
+    const finalHeaderActions = useMemo(() => {
+        return expandCollapseAction ? [...headerActions, expandCollapseAction] : headerActions;
+    }, [headerActions, expandCollapseAction]);
+    const finalFooterActions = useMemo(() => {
+        return getDefaultFooterActions(status, footerActions, onAccept, onReject);
+    }, [status, footerActions, onAccept, onReject]);
+    const finalFooterMessage = getDefaultFooterMessage(status, footerContent);
+    const showLoader = getShowLoader(status);
+    const isWaiting = isWaitingTool(status);
+    return {
+        isExpanded,
+        toggleExpanded,
+        headerActions: finalHeaderActions,
+        footerActions: finalFooterActions,
+        footerContent: finalFooterMessage,
+        showLoader,
+        isWaiting,
+    };
+}

package/dist/src/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Main export file for AI Chat library
+ */
+export * from './types';
+export * from './components/atoms';
+export * from './components/molecules';
+export * from './components/organisms';
+export * from './components/templates';
+export * from './components/pages';
+export * from './hooks';
+export * from './utils';

package/dist/src/index.js

@@ -0,0 +1,19 @@
+/**
+ * Main export file for AI Chat library
+ */
+// === Types ===
+export * from './types';
+// === Atoms ===
+export * from './components/atoms';
+// === Molecules ===
+export * from './components/molecules';
+// === Organisms ===
+export * from './components/organisms';
+// === Templates ===
+export * from './components/templates';
+// === Pages ===
+export * from './components/pages';
+// === Hooks ===
+export * from './hooks';
+// === Utilities ===
+export * from './utils';

package/dist/src/types/chat.d.ts

@@ -0,0 +1,17 @@
+export type ChatType = {
+    id: string;
+    name: string;
+    createTime: string | null;
+    lastMessage?: string;
+    metadata?: Record<string, unknown>;
+};
+export type ChatStatus = 'submitted' | 'streaming' | 'ready' | 'error';
+/**
+ * List item type for chat history that can be either a chat or a date header
+ */
+export type ListItemChatData = (ChatType & {
+    type: 'chat';
+}) | {
+    type: 'date-header';
+    date: string;
+};

package/dist/src/types/chat.js

@@ -0,0 +1 @@
+export {};

package/dist/src/types/common.d.ts

@@ -0,0 +1,7 @@
+import { ButtonView } from '@gravity-ui/uikit';
+export type Action = {
+    label?: string;
+    onClick?: () => void;
+    view?: ButtonView;
+    icon?: React.ReactNode;
+};

package/dist/src/types/common.js

@@ -0,0 +1 @@
+export {};

package/dist/src/types/index.d.ts

@@ -0,0 +1,4 @@
+export * from './messages';
+export * from './chat';
+export * from './tool';
+export * from './common';

package/dist/src/types/index.js

@@ -0,0 +1,4 @@
+export * from './messages';
+export * from './chat';
+export * from './tool';
+export * from './common';

package/dist/src/types/messages.d.ts

@@ -0,0 +1,62 @@
+import type React from 'react';
+import type { IconData } from '@gravity-ui/uikit';
+import { ToolMessageProps } from './tool';
+export type BaseMessageProps = {
+    children: React.ReactNode;
+    role: TMessageRole;
+    actions?: Array<{
+        type: string;
+        onClick: () => void;
+        icon?: IconData;
+    }>;
+    timestamp?: string;
+    showTimestamp?: boolean;
+    showActionsOnHover?: boolean;
+    className?: string;
+    qa?: string;
+};
+export type TMessageMetadata = Record<string, unknown>;
+export type TSubmitData = {
+    content: string;
+    attachments?: File[];
+    metadata?: TMessageMetadata;
+};
+export type TMessageStatus = 'sending' | 'complete' | 'error' | 'streaming';
+export type TMessageRole = 'user' | 'assistant' | 'system';
+export type TMessageContent<Type extends string = string, Data = unknown> = {
+    id?: string;
+    type: Type;
+    data: Data;
+};
+export type TextMessageContentData = {
+    text: string;
+};
+export type TextMessageContent = TMessageContent<'text', TextMessageContentData>;
+export type ThinkingMessageContentData = {
+    title?: string;
+    content: string | string[];
+    status: 'thinking' | 'thought';
+};
+export type ThinkingMessageContent = TMessageContent<'thinking', ThinkingMessageContentData>;
+export type ToolMessageContentData = ToolMessageProps;
+export type ToolMessageContent = TMessageContent<'tool', ToolMessageContentData>;
+export type TDefaultMessageContent = TextMessageContent | ThinkingMessageContent | ToolMessageContent;
+export type TMessageContentUnion<TCustomMessageContent extends TMessageContent = never> = TDefaultMessageContent | TCustomMessageContent;
+export type TAssistantMessageContent<TCustomMessageContent extends TMessageContent = never> = string | TMessageContentUnion<TCustomMessageContent> | TMessageContentUnion<TCustomMessageContent>[];
+export type TBaseMessage<Metadata = TMessageMetadata> = Pick<BaseMessageProps, 'actions' | 'timestamp'> & {
+    id?: string;
+    status?: TMessageStatus;
+    error?: unknown;
+    metadata?: Metadata;
+};
+export type TUserMessage<Metadata = TMessageMetadata> = TBaseMessage<Metadata> & {
+    role: 'user';
+    content: string;
+    format?: 'plain' | 'markdown';
+    avatarUrl?: string;
+};
+export type TAssistantMessage<TCustomMessageContent extends TMessageContent = never, Metadata = TMessageMetadata> = TBaseMessage<Metadata> & {
+    role: 'assistant';
+    content: TAssistantMessageContent<TCustomMessageContent>;
+};
+export type TChatMessage<TCustomMessageContent extends TMessageContent = never, Metadata = TMessageMetadata> = TUserMessage<Metadata> | TAssistantMessage<TCustomMessageContent, Metadata>;

package/dist/src/types/messages.js

@@ -0,0 +1 @@
+export {};

package/dist/src/types/tool.d.ts

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

package/dist/src/types/tool.js

@@ -0,0 +1 @@
+export {};

package/dist/src/utils/chatUtils.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Chat utilities
+ */
+import type { ListItemData } from '@gravity-ui/uikit';
+import type { ChatType, ListItemChatData } from '../types';
+/**
+ * Groups chats by date
+ *
+ * @param chats - Array of chats to group
+ * @returns Map of date keys to chat arrays
+ */
+export declare function groupChatsByDate(chats: ChatType[]): Map<string, ChatType[]>;
+/**
+ * Filter function type for chat list
+ */
+export type ChatFilterFunction = (filter: string) => (item: ListItemData<ListItemChatData>) => boolean;
+/**
+ * Default filter function - searches in chat name and last message
+ *
+ * @param filter - Search query string
+ * @returns Function that filters list items
+ */
+export declare function defaultChatFilter(filter: string): (item: ListItemData<ListItemChatData>) => boolean;

package/dist/src/utils/chatUtils.js

@@ -0,0 +1,43 @@
+/**
+ * Chat utilities
+ */
+/**
+ * Groups chats by date
+ *
+ * @param chats - Array of chats to group
+ * @returns Map of date keys to chat arrays
+ */
+export function groupChatsByDate(chats) {
+    const grouped = new Map();
+    chats.forEach((chat) => {
+        var _a;
+        if (!chat.createTime)
+            return;
+        const date = new Date(chat.createTime);
+        const dateKey = date.toDateString();
+        if (!grouped.has(dateKey)) {
+            grouped.set(dateKey, []);
+        }
+        (_a = grouped.get(dateKey)) === null || _a === void 0 ? void 0 : _a.push(chat);
+    });
+    return grouped;
+}
+/**
+ * Default filter function - searches in chat name and last message
+ *
+ * @param filter - Search query string
+ * @returns Function that filters list items
+ */
+export function defaultChatFilter(filter) {
+    return (item) => {
+        var _a, _b;
+        // Skip date headers from filtering
+        if (item.type === 'date-header') {
+            return true;
+        }
+        const chat = item;
+        const lowerQuery = filter.toLowerCase();
+        return (chat.name.toLowerCase().includes(lowerQuery) ||
+            ((_b = (_a = chat.lastMessage) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(lowerQuery)) !== null && _b !== void 0 ? _b : false));
+    };
+}

package/dist/src/utils/cn.d.ts

@@ -0,0 +1,11 @@
+export type CnMods = Record<string, string | boolean | undefined>;
+export declare const NAMESPACE = "g-aikit-";
+export declare const cn: import("@bem-react/classname").ClassNameInitilizer;
+export declare const block: import("@bem-react/classname").ClassNameInitilizer;
+export type CnBlock = ReturnType<typeof cn>;
+/**
+ * Extracts modifiers part from className
+ * @param {string} className - The class name to extract modifiers from
+ * @returns {string} The modifiers part of the class name
+ */
+export declare function modsClassName(className: string): string;