@gravity-ui/aikit 2.19.2 → 2.19.3-beta.af9c6fb1cce2b60fd6c198cca08d00a762b16671.0

package/build/cjs/components/molecules/ButtonGroup/ButtonGroup.css

@@ -1,7 +1,7 @@
 .g-aikit-button-group {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--g-spacing-1);
+  gap: var(--g-aikit-button-group-gap);
 }
 .g-aikit-button-group_or_vertical {
   flex-direction: column;

package/build/cjs/components/molecules/Suggestions/Suggestions.css

@@ -74,4 +74,8 @@
   flex-shrink: 0;
   display: flex;
   align-items: center;
+}
+.g-aikit-suggestions__button_size_xl .g-aikit-suggestions__button-icon {
+  width: 20px;
+  height: 20px;
 }

package/build/cjs/components/molecules/Suggestions/Suggestions.js

@@ -32,7 +32,7 @@ function Suggestions(props) {
         var _a;
         const resolvedIcon = (_a = item.icon) !== null && _a !== void 0 ? _a : (isMobileAppearance && textAlign === 'left' ? 'right' : undefined);
         const icon = resolvedIcon === 'none' ? undefined : resolvedIcon;
-        return ((0, jsx_runtime_1.jsx)(ActionButton_1.ActionButton, { tooltipTitle: wrapText ? undefined : item.title, size: buttonSize, view: item.view || (isMobileAppearance ? 'normal' : 'outlined'), onClick: () => handleClick(item), className: b('button', { layout, mobile: isMobileAppearance }), width: "auto", children: (0, jsx_runtime_1.jsxs)("div", { className: b('button-content', {
+        return ((0, jsx_runtime_1.jsx)(ActionButton_1.ActionButton, { tooltipTitle: wrapText ? undefined : item.title, size: buttonSize, view: item.view || (isMobileAppearance ? 'normal' : 'outlined'), onClick: () => handleClick(item), className: b('button', { layout, mobile: isMobileAppearance, size: buttonSize }), width: "auto", children: (0, jsx_runtime_1.jsxs)("div", { className: b('button-content', {
                     layout,
                     'text-align': icon ? undefined : textAlign,
                 }), children: [icon === 'left' && ((0, jsx_runtime_1.jsx)("div", { className: b('button-icon'), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.ChevronLeft, size: iconSize }) })), (0, jsx_runtime_1.jsx)(uikit_1.Text, { as: "div", variant: isMobileAppearance ? 'body-2' : undefined, className: b(wrapText ? 'button-text-wrap' : 'button-text'), children: item.title }), icon === 'right' && ((0, jsx_runtime_1.jsx)("div", { className: b('button-icon'), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.ChevronRight, size: iconSize }) }))] }) }, item.id || index));

package/build/cjs/components/molecules/Suggestions/Suggestions.js.map

@@ -1 +1 @@
-{"version":3,"file":"Suggestions.js","sourceRoot":"../../../../../src","sources":["components/molecules/Suggestions/Suggestions.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport {ChevronLeft, ChevronRight} from '@gravity-ui/icons';\nimport type {ButtonButtonProps} from '@gravity-ui/uikit';\nimport {Icon, Text, useMobile} from '@gravity-ui/uikit';\n\nimport {getControlIconSize, useMobileControlSize} from '../../../hooks/useMobileControlSize';\nimport type {SuggestionClickHandler, SuggestionsItem} from '../../../types/common';\nimport {block} from '../../../utils/cn';\nimport {ActionButton} from '../../atoms/ActionButton';\n\nimport './Suggestions.scss';\n\nconst b = block('suggestions');\n\n/**\n * Props for the Suggestions component\n */\nexport type SuggestionsProps = {\n    /** Array of suggestion items to display */\n    items: SuggestionsItem[];\n    /** Callback function called when a suggestion is clicked */\n    onClick: SuggestionClickHandler;\n    /** Title to display above suggestions - can be string or custom React element */\n    title?: React.ReactNode;\n    /** Layout orientation: 'grid' for horizontal, 'list' for vertical */\n    layout?: 'grid' | 'list';\n    /** Text alignment inside buttons: 'left', 'center', or 'right'. A non-default value disables the mobile chevron */\n    textAlign?: 'left' | 'center' | 'right';\n    /**\n     * Size of suggestion buttons. Defaults to `m`, or `xl` in mobile mode.\n     * An explicit size also opts out of the rest of the mobile appearance:\n     * `normal` view, text wrapping, chevron and `body-2` typography.\n     */\n    size?: ButtonButtonProps['size'];\n    /** Enable text wrapping inside buttons instead of ellipsis. Defaults to true in mobile mode */\n    wrapText?: boolean;\n    /** Additional CSS class */\n    className?: string;\n    /** QA/test identifier */\n    qa?: string;\n};\n\n/**\n * Suggestions component displays a group of clickable suggestion buttons\n * arranged in either horizontal (grid) or vertical (list) layout\n *\n * @param props - Component props\n * @returns React component\n */\nexport function Suggestions(props: SuggestionsProps) {\n    const {\n        items,\n        onClick,\n        title,\n        layout = 'list',\n        textAlign = 'left',\n        wrapText: wrapTextProp,\n        size,\n        className,\n        qa,\n    } = props;\n\n    const isMobile = useMobile();\n    const isMobileAppearance = isMobile && size === undefined;\n    const wrapText = wrapTextProp ?? isMobileAppearance;\n    const buttonSize = useMobileControlSize(size, 'm', 'xl');\n    const iconSize = getControlIconSize(buttonSize);\n\n    const handleClick = async (item: SuggestionsItem) => {\n        await item.onClick?.(item.title, item.id, item.data);\n        await onClick(item.title, item.id, item.data);\n    };\n\n    const renderButton = (item: SuggestionsItem, index: number) => {\n        const resolvedIcon =\n            item.icon ?? (isMobileAppearance && textAlign === 'left' ? 'right' : undefined);\n        const icon = resolvedIcon === 'none' ? undefined : resolvedIcon;\n\n        return (\n            <ActionButton\n                key={item.id || index}\n                tooltipTitle={wrapText ? undefined : item.title}\n                size={buttonSize}\n                view={item.view || (isMobileAppearance ? 'normal' : 'outlined')}\n                onClick={() => handleClick(item)}\n                className={b('button', {layout, mobile: isMobileAppearance})}\n                width=\"auto\"\n            >\n                <div\n                    className={b('button-content', {\n                        layout,\n                        'text-align': icon ? undefined : textAlign,\n                    })}\n                >\n                    {icon === 'left' && (\n                        <div className={b('button-icon')}>\n                            <Icon data={ChevronLeft} size={iconSize} />\n                        </div>\n                    )}\n                    <Text\n                        as=\"div\"\n                        variant={isMobileAppearance ? 'body-2' : undefined}\n                        className={b(wrapText ? 'button-text-wrap' : 'button-text')}\n                    >\n                        {item.title}\n                    </Text>\n                    {icon === 'right' && (\n                        <div className={b('button-icon')}>\n                            <Icon data={ChevronRight} size={iconSize} />\n                        </div>\n                    )}\n                </div>\n            </ActionButton>\n        );\n    };\n\n    return (\n        <div className={b('container', className)} data-qa={qa}>\n            {title && (\n                <div className={b('title')}>\n                    {typeof title === 'string' ? (\n                        <Text variant=\"body-1\" color=\"primary\">\n                            {title}\n                        </Text>\n                    ) : (\n                        title\n                    )}\n                </div>\n            )}\n            <div className={b({layout})}>\n                {items.map((item, index) => renderButton(item, index))}\n            </div>\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"Suggestions.js","sourceRoot":"../../../../../src","sources":["components/molecules/Suggestions/Suggestions.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport {ChevronLeft, ChevronRight} from '@gravity-ui/icons';\nimport type {ButtonButtonProps} from '@gravity-ui/uikit';\nimport {Icon, Text, useMobile} from '@gravity-ui/uikit';\n\nimport {getControlIconSize, useMobileControlSize} from '../../../hooks/useMobileControlSize';\nimport type {SuggestionClickHandler, SuggestionsItem} from '../../../types/common';\nimport {block} from '../../../utils/cn';\nimport {ActionButton} from '../../atoms/ActionButton';\n\nimport './Suggestions.scss';\n\nconst b = block('suggestions');\n\n/**\n * Props for the Suggestions component\n */\nexport type SuggestionsProps = {\n    /** Array of suggestion items to display */\n    items: SuggestionsItem[];\n    /** Callback function called when a suggestion is clicked */\n    onClick: SuggestionClickHandler;\n    /** Title to display above suggestions - can be string or custom React element */\n    title?: React.ReactNode;\n    /** Layout orientation: 'grid' for horizontal, 'list' for vertical */\n    layout?: 'grid' | 'list';\n    /** Text alignment inside buttons: 'left', 'center', or 'right'. A non-default value disables the mobile chevron */\n    textAlign?: 'left' | 'center' | 'right';\n    /**\n     * Size of suggestion buttons. Defaults to `m`, or `xl` in mobile mode.\n     * An explicit size also opts out of the rest of the mobile appearance:\n     * `normal` view, text wrapping, chevron and `body-2` typography.\n     */\n    size?: ButtonButtonProps['size'];\n    /** Enable text wrapping inside buttons instead of ellipsis. Defaults to true in mobile mode */\n    wrapText?: boolean;\n    /** Additional CSS class */\n    className?: string;\n    /** QA/test identifier */\n    qa?: string;\n};\n\n/**\n * Suggestions component displays a group of clickable suggestion buttons\n * arranged in either horizontal (grid) or vertical (list) layout\n *\n * @param props - Component props\n * @returns React component\n */\nexport function Suggestions(props: SuggestionsProps) {\n    const {\n        items,\n        onClick,\n        title,\n        layout = 'list',\n        textAlign = 'left',\n        wrapText: wrapTextProp,\n        size,\n        className,\n        qa,\n    } = props;\n\n    const isMobile = useMobile();\n    const isMobileAppearance = isMobile && size === undefined;\n    const wrapText = wrapTextProp ?? isMobileAppearance;\n    const buttonSize = useMobileControlSize(size, 'm', 'xl');\n    const iconSize = getControlIconSize(buttonSize);\n\n    const handleClick = async (item: SuggestionsItem) => {\n        await item.onClick?.(item.title, item.id, item.data);\n        await onClick(item.title, item.id, item.data);\n    };\n\n    const renderButton = (item: SuggestionsItem, index: number) => {\n        const resolvedIcon =\n            item.icon ?? (isMobileAppearance && textAlign === 'left' ? 'right' : undefined);\n        const icon = resolvedIcon === 'none' ? undefined : resolvedIcon;\n\n        return (\n            <ActionButton\n                key={item.id || index}\n                tooltipTitle={wrapText ? undefined : item.title}\n                size={buttonSize}\n                view={item.view || (isMobileAppearance ? 'normal' : 'outlined')}\n                onClick={() => handleClick(item)}\n                className={b('button', {layout, mobile: isMobileAppearance, size: buttonSize})}\n                width=\"auto\"\n            >\n                <div\n                    className={b('button-content', {\n                        layout,\n                        'text-align': icon ? undefined : textAlign,\n                    })}\n                >\n                    {icon === 'left' && (\n                        <div className={b('button-icon')}>\n                            <Icon data={ChevronLeft} size={iconSize} />\n                        </div>\n                    )}\n                    <Text\n                        as=\"div\"\n                        variant={isMobileAppearance ? 'body-2' : undefined}\n                        className={b(wrapText ? 'button-text-wrap' : 'button-text')}\n                    >\n                        {item.title}\n                    </Text>\n                    {icon === 'right' && (\n                        <div className={b('button-icon')}>\n                            <Icon data={ChevronRight} size={iconSize} />\n                        </div>\n                    )}\n                </div>\n            </ActionButton>\n        );\n    };\n\n    return (\n        <div className={b('container', className)} data-qa={qa}>\n            {title && (\n                <div className={b('title')}>\n                    {typeof title === 'string' ? (\n                        <Text variant=\"body-1\" color=\"primary\">\n                            {title}\n                        </Text>\n                    ) : (\n                        title\n                    )}\n                </div>\n            )}\n            <div className={b({layout})}>\n                {items.map((item, index) => renderButton(item, index))}\n            </div>\n        </div>\n    );\n}\n"]}

package/build/cjs/components/organisms/Header/Header.css

@@ -46,5 +46,27 @@
   flex-shrink: 0;
 }
 .g-aikit-header__menu-sheet-content {
-  padding-bottom: var(--g-spacing-2);
+  --g-sheet-content-padding: 0 max(var(--g-aikit-header-menu-sheet-inline-padding), env(safe-area-inset-right, 0px))
+      calc(var(--g-aikit-header-menu-sheet-bottom-padding) + env(safe-area-inset-bottom, 0px))
+      max(var(--g-aikit-header-menu-sheet-inline-padding), env(safe-area-inset-left, 0px));
+  --g-text-body-2-font-size: var(--g-aikit-header-menu-item-font-size);
+}
+.g-aikit-header__menu-sheet-content_without-title > .g-sheet__sheet-content-title {
+  display: none;
+}
+.g-aikit-header__menu-item {
+  display: flex;
+  align-items: center;
+  min-height: var(--g-aikit-header-menu-item-min-height);
+  padding-inline: var(--g-aikit-header-menu-item-inline-padding);
+}
+.g-aikit-header__menu-item-content {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+.g-aikit-header__menu-item-icon {
+  display: flex;
+  align-items: center;
+  margin-inline-end: var(--g-aikit-header-menu-item-icon-gap);
 }

package/build/cjs/components/organisms/Header/Header.js

@@ -39,7 +39,7 @@ function getNormalizedMenuItem(item, menuItemQa) {
  * @returns Header component
  */
 function Header(props) {
-    const { title, preview, icon, baseActions, additionalActions, actionsPlacement, actionsOrder, actionSize, isMobile, actionIcons, menuItems, menuButtonTooltip, menuButtonIcon, menuButtonQa, menuItemQa, titlePosition, withIcon, showTitle = true, className, historyButtonRef, qa, actionQa, actionTooltipTexts, } = (0, useHeader_1.useHeader)(props);
+    const { title, preview, icon, baseActions, additionalActions, actionsPlacement, actionsOrder, actionSize, isMobile, actionIcons, menuItems, menuButtonTooltip, menuButtonIcon, menuButtonQa, menuItemQa, showSheetTitle, titlePosition, withIcon, showTitle = true, className, historyButtonRef, qa, actionQa, actionTooltipTexts, } = (0, useHeader_1.useHeader)(props);
     const [isMenuSheetVisible, setIsMenuSheetVisible] = (0, react_1.useState)(false);
     const menuSheetId = (0, uikit_1.useUniqId)();
     const iconSize = (0, useMobileControlSize_1.getControlIconSize)(actionSize);
@@ -90,10 +90,12 @@ function Header(props) {
         const switcherTooltip = menuButtonTooltip !== null && menuButtonTooltip !== void 0 ? menuButtonTooltip : (0, i18n_1.i18n)('action-tooltip-menu');
         const switcherQa = menuButtonQa !== null && menuButtonQa !== void 0 ? menuButtonQa : 'header-menu-button';
         if (isMobile) {
-            return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(ActionButton_1.ActionButton, { tooltipTitle: switcherTooltip, size: actionSize, view: "flat", className: b('action-button'), qa: switcherQa, onClick: () => setIsMenuSheetVisible(true), children: switcherContent }), (0, jsx_runtime_1.jsx)(uikit_1.Sheet, { id: menuSheetId, title: (0, i18n_1.i18n)('menu-sheet-title'), visible: isMenuSheetVisible, onClose: () => setIsMenuSheetVisible(false), contentClassName: b('menu-sheet-content'), qa: "header-menu-sheet-container", children: (0, jsx_runtime_1.jsx)(uikit_1.Menu, { size: "xl", qa: "header-menu-sheet", children: normalizedMenuItems.map((item) => ((0, jsx_runtime_1.jsx)(uikit_1.Menu.Item, { disabled: item.disabled, iconStart: item.icon, qa: item.qa, onClick: () => {
+            return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(ActionButton_1.ActionButton, { tooltipTitle: switcherTooltip, size: actionSize, view: "flat", className: b('action-button'), qa: switcherQa, onClick: () => setIsMenuSheetVisible(true), children: switcherContent }), (0, jsx_runtime_1.jsx)(uikit_1.Sheet, { id: menuSheetId, title: (0, i18n_1.i18n)('menu-sheet-title'), visible: isMenuSheetVisible, onClose: () => setIsMenuSheetVisible(false), contentClassName: b('menu-sheet-content', {
+                            'without-title': !showSheetTitle,
+                        }), qa: "header-menu-sheet-container", children: (0, jsx_runtime_1.jsx)(uikit_1.Menu, { size: "xl", qa: "header-menu-sheet", children: normalizedMenuItems.map((item) => ((0, jsx_runtime_1.jsx)(uikit_1.Menu.Item, { className: b('menu-item'), disabled: item.disabled, qa: item.qa, onClick: () => {
                                     setIsMenuSheetVisible(false);
                                     item.onClick();
-                                }, children: item.label }, item.id))) }) })] }));
+                                }, children: (0, jsx_runtime_1.jsxs)("span", { className: b('menu-item-content'), children: [item.icon ? ((0, jsx_runtime_1.jsx)("span", { className: b('menu-item-icon'), children: item.icon })) : null, item.label] }) }, item.id))) }) })] }));
         }
         return ((0, jsx_runtime_1.jsx)(uikit_1.DropdownMenu, { items: dropdownMenuItems, renderSwitcher: (switcherProps) => ((0, jsx_runtime_1.jsx)(ActionButton_1.ActionButton, Object.assign({}, switcherProps, { tooltipTitle: switcherTooltip, size: actionSize, view: "flat", className: b('action-button'), qa: switcherQa, children: switcherContent }))) }));
     }, [
@@ -107,6 +109,7 @@ function Header(props) {
         menuButtonIcon,
         menuButtonQa,
         menuButtonTooltip,
+        showSheetTitle,
     ]);
     const [leftBaseActions, rightBaseActions] = (0, react_1.useMemo)(() => {
         const left = [];

package/build/cjs/components/organisms/Header/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sourceRoot":"../../../../../src","sources":["components/organisms/Header/Header.tsx"],"names":[],"mappings":";;AAgEA,wBAyRC;;;AAzVD,uDAA4D;AAE5D,6CAQ2B;AAC3B,6CAAmF;AAInF,iFAAuE;AACvE,+DAA0D;AAC1D,6CAAwC;AACxC,oEAAsD;AACtD,sEAAwD;AAExD,0CAA4B;AAC5B,sCAMiB;AACjB,8CAAkD;AAElD,wBAAuB;AAEvB,MAAM,CAAC,GAAG,IAAA,UAAK,EAAC,QAAQ,CAAC,CAAC;AAE1B,yBAAyB;AACzB,MAAM,YAAY,GAAuC;IACrD,CAAC,oBAAY,CAAC,OAAO,CAAC,EAAE,YAAI;IAC5B,CAAC,oBAAY,CAAC,OAAO,CAAC,EAAE,4BAAoB;IAC5C,CAAC,oBAAY,CAAC,OAAO,CAAC,EAAE,+BAAuB,EAAE,gDAAgD;IACjG,CAAC,oBAAY,CAAC,KAAK,CAAC,EAAE,aAAK;CAC9B,CAAC;AAEF,2BAA2B;AAC3B,MAAM,aAAa,GAAG;IAClB,SAAS,EAAE,6BAAqB;IAChC,MAAM,EAAE,+BAAuB;CAClC,CAAC;AAIF,SAAS,qBAAqB,CAC1B,IAAoB,EACpB,UAAqC;;IAErC,uCAAW,IAAI,KAAE,EAAE,EAAE,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAG,IAAI,CAAC,EAAE,CAAC,mCAAI,oBAAoB,IAAI,CAAC,EAAE,EAAE,IAAE;AACjF,CAAC;AAED;;;;;GAKG;AACH,SAAgB,MAAM,CAAC,KAAkB;IACrC,MAAM,EACF,KAAK,EACL,OAAO,EACP,IAAI,EACJ,WAAW,EACX,iBAAiB,EACjB,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,WAAW,EACX,SAAS,EACT,iBAAiB,EACjB,cAAc,EACd,YAAY,EACZ,UAAU,EACV,aAAa,EACb,QAAQ,EACR,SAAS,GAAG,IAAI,EAChB,SAAS,EACT,gBAAgB,EAChB,EAAE,EACF,QAAQ,EACR,kBAAkB,GACrB,GAAG,IAAA,qBAAS,EAAC,KAAK,CAAC,CAAC;IAErB,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACpE,MAAM,WAAW,GAAG,IAAA,iBAAS,GAAE,CAAC;IAEhC,MAAM,QAAQ,GAAG,IAAA,yCAAkB,EAAC,UAAU,CAAC,CAAC;IAEhD,wCAAwC;IACxC,MAAM,kBAAkB,GAAG,CAAC,CAAC,iBAAiB,EAAE,EAAC,QAAQ,EAAE,aAAa,EAAC,CAAC,CAAC;IAE3E,MAAM,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC,CACvB,gCAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YAAG,IAAI,GAAO,CAC1C,CAAC,CAAC,CAAC,CACA,uBAAC,YAAI,IAAC,IAAI,EAAE,gBAAQ,EAAE,IAAI,EAAE,EAAE,GAAI,CACrC,CAAC;IAEF,qBAAqB;IACrB,MAAM,gBAAgB,GAAG,IAAA,mBAAW,EAChC,CAAC,MAAkB,EAAE,GAAkC,EAAE,EAAE;;QACvD,MAAM,QAAQ,GAAG,MAAM,CAAC,EAAkB,CAAC;QAC3C,MAAM,aAAa,GACf,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAG,QAAQ,CAAC,mCACvB,CAAC,QAAQ,KAAK,oBAAY,CAAC,OAAO,IAAI,MAAM,CAAC,YAAY;YACrD,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,YAAY,CAAC;YACpC,CAAC,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC;QAElC,IAAI,CAAC,aAAa,EAAE,CAAC;YACjB,OAAO,IAAI,CAAC;QAChB,CAAC;QAED,mBAAmB;QACnB,IAAI,UAAU,GAAG,kBAAkB,MAAM,CAAC,EAAE,EAAE,CAAC;QAC/C,IAAI,eAAmC,CAAC;QACxC,IAAI,MAAM,CAAC,EAAE,KAAK,oBAAY,CAAC,OAAO,IAAI,MAAM,CAAC,YAAY,EAAE,CAAC;YAC5D,UAAU,GAAG,0BAA0B,MAAM,CAAC,YAAY,EAAE,CAAC;YAC7D,eAAe,GAAG,MAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAG,oBAAY,CAAC,OAAO,CAAC,0CAAG,MAAM,CAAC,YAAY,CAAC,CAAC;QACxF,CAAC;aAAM,CAAC;YACJ,eAAe;gBACX,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAG,MAAM,CAAC,EAAiD,CAAC,CAAC;QACvF,CAAC;QAED,mCAAmC;QACnC,MAAM,SAAS,GAAG,MAAM,CAAC,EAAE,KAAK,oBAAY,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;QAEvE,OAAO,CACH,uBAAC,2BAAY,IAET,GAAG,EAAE,SAAyC,EAC9C,YAAY,EAAE,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,IAAA,WAAI,EAAC,UAAwC,CAAC,EAC/E,IAAI,EAAE,UAAU,EAChB,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,SAAS,EAAE,CAAC,CAAC,eAAe,CAAC,EAC7B,EAAE,EAAE,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,MAAM,CAAC,EAAkB,CAAC,mCAAI,iBAAiB,MAAM,CAAC,EAAE,EAAE,YAEzE,uBAAC,YAAI,IAAC,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,GAAI,IATxC,MAAM,CAAC,EAAE,CAUH,CAClB,CAAC;IACN,CAAC,EACD,CAAC,WAAW,EAAE,QAAQ,EAAE,UAAU,EAAE,kBAAkB,EAAE,QAAQ,CAAC,CACpE,CAAC;IAEF,2BAA2B;IAC3B,MAAM,sBAAsB,GAAG,IAAA,mBAAW,EACtC,CAAC,MAAc,EAAE,KAAa,EAAE,EAAE;;QAC9B,MAAM,EAAE,GAAG,cAAc,KAAK,EAAE,CAAC;QAEjC,IAAI,CAAC,IAAA,4BAAc,EAAC,MAAM,CAAC,EAAE,CAAC;YAC1B,OAAO,uBAAC,eAAK,CAAC,QAAQ,cAAW,MAAM,IAAX,EAAE,CAA2B,CAAC;QAC9D,CAAC;QAED,OAAO,CACH,uBAAC,2BAAY,oBAEL,MAAM,IACV,IAAI,EAAE,MAAM,CAAC,IAAI,IAAI,MAAM,EAC3B,IAAI,EAAE,MAAA,MAAM,CAAC,IAAI,mCAAI,UAAU,YAE9B,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,KAAK,KALvB,GAAG,KAAK,EAAE,CAMJ,CAClB,CAAC;IACN,CAAC,EACD,CAAC,UAAU,CAAC,CACf,CAAC;IAEF,MAAM,mBAAmB,GAAG,IAAA,eAAO,EAC/B,GAAG,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,qBAAqB,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC,EACtE,CAAC,SAAS,EAAE,UAAU,CAAC,CAC1B,CAAC;IAEF,MAAM,iBAAiB,GAAG,IAAA,eAAO,EAC7B,GAAG,EAAE,CACD,mBAAmB,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,iBAC9B,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,MAAM,EAAE,IAAI,CAAC,OAAO,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,EAAE,IACR,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,EAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAC9C,CAAC,EACP,CAAC,mBAAmB,CAAC,CACxB,CAAC;IAEF,MAAM,UAAU,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC5B,IAAI,mBAAmB,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACnC,OAAO,IAAI,CAAC;QAChB,CAAC;QAED,MAAM,eAAe,GAAG,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,uBAAC,YAAI,IAAC,IAAI,EAAE,gBAAQ,EAAE,IAAI,EAAE,QAAQ,GAAI,CAAC;QACnF,MAAM,eAAe,GAAG,iBAAiB,aAAjB,iBAAiB,cAAjB,iBAAiB,GAAI,IAAA,WAAI,EAAC,qBAAqB,CAAC,CAAC;QACzE,MAAM,UAAU,GAAG,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,oBAAoB,CAAC;QAExD,IAAI,QAAQ,EAAE,CAAC;YACX,OAAO,CACH,wBAAC,eAAK,CAAC,QAAQ,eACX,uBAAC,2BAAY,IACT,YAAY,EAAE,eAAe,EAC7B,IAAI,EAAE,UAAU,EAChB,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,CAAC,CAAC,eAAe,CAAC,EAC7B,EAAE,EAAE,UAAU,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,IAAI,CAAC,YAEzC,eAAe,GACL,EACf,uBAAC,aAAK,IACF,EAAE,EAAE,WAAW,EACf,KAAK,EAAE,IAAA,WAAI,EAAC,kBAAkB,CAAC,EAC/B,OAAO,EAAE,kBAAkB,EAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAC3C,gBAAgB,EAAE,CAAC,CAAC,oBAAoB,CAAC,EACzC,EAAE,EAAC,6BAA6B,YAEhC,uBAAC,YAAI,IAAC,IAAI,EAAC,IAAI,EAAC,EAAE,EAAC,mBAAmB,YACjC,mBAAmB,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC/B,uBAAC,YAAI,CAAC,IAAI,IAEN,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,IAAI,EACpB,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,OAAO,EAAE,GAAG,EAAE;oCACV,qBAAqB,CAAC,KAAK,CAAC,CAAC;oCAC7B,IAAI,CAAC,OAAO,EAAE,CAAC;gCACnB,CAAC,YAEA,IAAI,CAAC,KAAK,IATN,IAAI,CAAC,EAAE,CAUJ,CACf,CAAC,GACC,GACH,IACK,CACpB,CAAC;QACN,CAAC;QAED,OAAO,CACH,uBAAC,oBAAY,IACT,KAAK,EAAE,iBAAiB,EACxB,cAAc,EAAE,CAAC,aAAa,EAAE,EAAE,CAAC,CAC/B,uBAAC,2BAAY,oBACL,aAAa,IACjB,YAAY,EAAE,eAAe,EAC7B,IAAI,EAAE,UAAU,EAChB,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,CAAC,CAAC,eAAe,CAAC,EAC7B,EAAE,EAAE,UAAU,YAEb,eAAe,IACL,CAClB,GACH,CACL,CAAC;IACN,CAAC,EAAE;QACC,UAAU;QACV,QAAQ;QACR,QAAQ;QACR,kBAAkB;QAClB,WAAW;QACX,iBAAiB;QACjB,mBAAmB;QACnB,cAAc;QACd,YAAY;QACZ,iBAAiB;KACpB,CAAC,CAAC;IAEH,MAAM,CAAC,eAAe,EAAE,gBAAgB,CAAC,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACrD,MAAM,IAAI,GAAiB,EAAE,CAAC;QAC9B,MAAM,KAAK,GAAiB,EAAE,CAAC;QAC/B,WAAW,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;;YAC3B,CAAC,CAAA,MAAA,gBAAgB,CAAC,IAAI,0CAAG,MAAM,CAAC,EAAkB,CAAC,MAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,CAC/E,MAAM,CACT,CAAC;QACN,CAAC,CAAC,CAAC;QACH,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,gBAAgB,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC;IAEzC,MAAM,aAAa,GAAG,CAAC,IAAsB,EAAE,EAAE;;QAC7C,MAAM,qBAAqB,GACvB,CAAC,MAAA,gBAAgB,CAAC,UAAU,mCAAI,OAAO,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC;QAC/E,MAAM,QAAQ,GAAG,CAAC,MAAA,gBAAgB,CAAC,IAAI,mCAAI,OAAO,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC;QACjF,MAAM,eAAe,GAAG,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,gBAAgB,CAAC;QAC7E,IAAI,qBAAqB,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,QAAQ,IAAI,eAAe,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAClF,OAAO,IAAI,CAAC;QAChB,CAAC;QACD,MAAM,WAAW,GAA4B;YACzC,GAAG,CAAC,qBAAqB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,yBAAiB,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YAC3E,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,yBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YAC7C,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,EAAkB,CAAC;SAChE,CAAC;QACF,MAAM,cAAc,GAAG,MAAA,YAAY,CAAC,IAAI,CAAC,mCAAI,EAAE,CAAC;QAChD,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,WAAW,CAAC,CAAC;QACvC,MAAM,OAAO,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,GAAG,cAAc,EAAE,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAC9E,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,CACtB,CAAC;QAEF,MAAM,mBAAmB,GAAG,CAAC,IAA2B,EAAE,EAAE;YACxD,IAAI,IAAI,KAAK,yBAAiB,CAAC,UAAU,EAAE,CAAC;gBACxC,OAAO,qBAAqB,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAC/C,sBAAsB,CAAC,MAAM,EAAE,KAAK,CAAC,CACxC,CAAC;YACN,CAAC;YACD,IAAI,IAAI,KAAK,yBAAiB,CAAC,IAAI,EAAE,CAAC;gBAClC,OAAO,uBAAC,eAAK,CAAC,QAAQ,cAAa,QAAQ,IAAhB,MAAM,CAA4B,CAAC;YAClE,CAAC;YACD,MAAM,MAAM,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,EAAE,KAAK,IAAI,CAAC,CAAC;YAC1E,OAAO,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QACtE,CAAC,CAAC;QAEF,OAAO,uBAAC,yBAAW,cAAE,OAAO,CAAC,GAAG,CAAC,mBAAmB,CAAC,GAAe,CAAC;IACzE,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;IAC1C,MAAM,YAAY,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAE5C,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,SAAS,CAAC,aAAW,EAAE,aACxC,CAAC,QAAQ,IAAI,WAAW,CAAC,IAAI,CAC1B,iCAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,aACpB,QAAQ,IAAI,WAAW,EACvB,WAAW,IACV,CACT,EAGA,SAAS,IAAI,CACV,iCAAK,SAAS,EAAE,kBAAkB,aAC7B,KAAK,IAAI,CACN,uBAAC,YAAI,IAAC,KAAK,EAAE,KAAK,EAAE,EAAE,EAAC,KAAK,EAAC,OAAO,EAAC,aAAa,EAAC,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,YACnE,KAAK,GACH,CACV,EACA,OAAO,IAAI,gCAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,YAAG,OAAO,GAAO,IACvD,CACT,EAEA,YAAY,IACX,CACT,CAAC;AACN,CAAC","sourcesContent":["import React, {useCallback, useMemo, useState} from 'react';\n\nimport {\n    ChevronsCollapseUpRight,\n    ChevronsExpandUpRight,\n    ClockArrowRotateLeft,\n    Ellipsis,\n    Plus,\n    Sparkles,\n    Xmark,\n} from '@gravity-ui/icons';\nimport {DropdownMenu, Icon, Menu, Sheet, Text, useUniqId} from '@gravity-ui/uikit';\n\nimport {Action} from 'src/types';\n\nimport {getControlIconSize} from '../../../hooks/useMobileControlSize';\nimport {isActionConfig} from '../../../utils/actionUtils';\nimport {block} from '../../../utils/cn';\nimport {ActionButton} from '../../atoms/ActionButton';\nimport {ButtonGroup} from '../../molecules/ButtonGroup';\n\nimport {i18n} from './i18n';\nimport {\n    HeaderAction,\n    HeaderActionGroup,\n    type HeaderActionOrderItem,\n    type HeaderMenuItem,\n    type HeaderProps,\n} from './types';\nimport {ActionItem, useHeader} from './useHeader';\n\nimport './Header.scss';\n\nconst b = block('header');\n\n// Icons for base actions\nconst ACTION_ICONS: Record<HeaderAction, typeof Xmark> = {\n    [HeaderAction.NewChat]: Plus,\n    [HeaderAction.History]: ClockArrowRotateLeft,\n    [HeaderAction.Folding]: ChevronsCollapseUpRight, // Default icon, will be switched based on state\n    [HeaderAction.Close]: Xmark,\n};\n\n// Icons for folding states\nconst FOLDING_ICONS = {\n    collapsed: ChevronsExpandUpRight,\n    opened: ChevronsCollapseUpRight,\n};\n\ntype NormalizedMenuItem = HeaderMenuItem & {qa: string};\n\nfunction getNormalizedMenuItem(\n    item: HeaderMenuItem,\n    menuItemQa: HeaderProps['menuItemQa'],\n): NormalizedMenuItem {\n    return {...item, qa: menuItemQa?.[item.id] ?? `header-menu-item-${item.id}`};\n}\n\n/**\n * Header component for displaying chat header with navigation and actions\n *\n * @param props - Component props\n * @returns Header component\n */\nexport function Header(props: HeaderProps) {\n    const {\n        title,\n        preview,\n        icon,\n        baseActions,\n        additionalActions,\n        actionsPlacement,\n        actionsOrder,\n        actionSize,\n        isMobile,\n        actionIcons,\n        menuItems,\n        menuButtonTooltip,\n        menuButtonIcon,\n        menuButtonQa,\n        menuItemQa,\n        titlePosition,\n        withIcon,\n        showTitle = true,\n        className,\n        historyButtonRef,\n        qa,\n        actionQa,\n        actionTooltipTexts,\n    } = useHeader(props);\n\n    const [isMenuSheetVisible, setIsMenuSheetVisible] = useState(false);\n    const menuSheetId = useUniqId();\n\n    const iconSize = getControlIconSize(actionSize);\n\n    // Determine class for title positioning\n    const titlePositionClass = b('title-container', {position: titlePosition});\n\n    const iconElement = icon ? (\n        <div className={b('icon')}>{icon}</div>\n    ) : (\n        <Icon data={Sparkles} size={16} />\n    );\n\n    // Render base action\n    const renderBaseAction = useCallback(\n        (action: ActionItem, ref?: React.RefObject<HTMLElement>) => {\n            const actionId = action.id as HeaderAction;\n            const IconComponent =\n                actionIcons?.[actionId] ??\n                (actionId === HeaderAction.Folding && action.foldingState\n                    ? FOLDING_ICONS[action.foldingState]\n                    : ACTION_ICONS[actionId]);\n\n            if (!IconComponent) {\n                return null;\n            }\n\n            // Get tooltip text\n            let tooltipKey = `action-tooltip-${action.id}`;\n            let tooltipOverride: string | undefined;\n            if (action.id === HeaderAction.Folding && action.foldingState) {\n                tooltipKey = `action-tooltip-folding-${action.foldingState}`;\n                tooltipOverride = actionTooltipTexts?.[HeaderAction.Folding]?.[action.foldingState];\n            } else {\n                tooltipOverride =\n                    actionTooltipTexts?.[action.id as Exclude<HeaderAction, HeaderAction.Folding>];\n            }\n\n            // Determine ref for history button\n            const buttonRef = action.id === HeaderAction.History ? ref : undefined;\n\n            return (\n                <ActionButton\n                    key={action.id}\n                    ref={buttonRef as React.Ref<HTMLButtonElement>}\n                    tooltipTitle={tooltipOverride ?? i18n(tooltipKey as Parameters<typeof i18n>[0])}\n                    size={actionSize}\n                    view=\"flat\"\n                    onClick={action.onClick}\n                    className={b('action-button')}\n                    qa={actionQa?.[action.id as HeaderAction] ?? `header-action-${action.id}`}\n                >\n                    <Icon data={IconComponent} size={iconSize} />\n                </ActionButton>\n            );\n        },\n        [actionIcons, actionQa, actionSize, actionTooltipTexts, iconSize],\n    );\n\n    // Render additional action\n    const renderAdditionalAction = useCallback(\n        (action: Action, index: number) => {\n            const id = `additional-${index}`;\n\n            if (!isActionConfig(action)) {\n                return <React.Fragment key={id}>{action}</React.Fragment>;\n            }\n\n            return (\n                <ActionButton\n                    key={`${index}`}\n                    {...action}\n                    view={action.view || 'flat'}\n                    size={action.size ?? actionSize}\n                >\n                    {action.icon || action.label}\n                </ActionButton>\n            );\n        },\n        [actionSize],\n    );\n\n    const normalizedMenuItems = useMemo(\n        () => menuItems.map((item) => getNormalizedMenuItem(item, menuItemQa)),\n        [menuItems, menuItemQa],\n    );\n\n    const dropdownMenuItems = useMemo(\n        () =>\n            normalizedMenuItems.map((item) => ({\n                text: item.label,\n                action: item.onClick,\n                disabled: item.disabled,\n                qa: item.qa,\n                ...(item.icon ? {iconStart: item.icon} : {}),\n            })),\n        [normalizedMenuItems],\n    );\n\n    const headerMenu = useMemo(() => {\n        if (normalizedMenuItems.length === 0) {\n            return null;\n        }\n\n        const switcherContent = menuButtonIcon ?? <Icon data={Ellipsis} size={iconSize} />;\n        const switcherTooltip = menuButtonTooltip ?? i18n('action-tooltip-menu');\n        const switcherQa = menuButtonQa ?? 'header-menu-button';\n\n        if (isMobile) {\n            return (\n                <React.Fragment>\n                    <ActionButton\n                        tooltipTitle={switcherTooltip}\n                        size={actionSize}\n                        view=\"flat\"\n                        className={b('action-button')}\n                        qa={switcherQa}\n                        onClick={() => setIsMenuSheetVisible(true)}\n                    >\n                        {switcherContent}\n                    </ActionButton>\n                    <Sheet\n                        id={menuSheetId}\n                        title={i18n('menu-sheet-title')}\n                        visible={isMenuSheetVisible}\n                        onClose={() => setIsMenuSheetVisible(false)}\n                        contentClassName={b('menu-sheet-content')}\n                        qa=\"header-menu-sheet-container\"\n                    >\n                        <Menu size=\"xl\" qa=\"header-menu-sheet\">\n                            {normalizedMenuItems.map((item) => (\n                                <Menu.Item\n                                    key={item.id}\n                                    disabled={item.disabled}\n                                    iconStart={item.icon}\n                                    qa={item.qa}\n                                    onClick={() => {\n                                        setIsMenuSheetVisible(false);\n                                        item.onClick();\n                                    }}\n                                >\n                                    {item.label}\n                                </Menu.Item>\n                            ))}\n                        </Menu>\n                    </Sheet>\n                </React.Fragment>\n            );\n        }\n\n        return (\n            <DropdownMenu\n                items={dropdownMenuItems}\n                renderSwitcher={(switcherProps) => (\n                    <ActionButton\n                        {...switcherProps}\n                        tooltipTitle={switcherTooltip}\n                        size={actionSize}\n                        view=\"flat\"\n                        className={b('action-button')}\n                        qa={switcherQa}\n                    >\n                        {switcherContent}\n                    </ActionButton>\n                )}\n            />\n        );\n    }, [\n        actionSize,\n        iconSize,\n        isMobile,\n        isMenuSheetVisible,\n        menuSheetId,\n        dropdownMenuItems,\n        normalizedMenuItems,\n        menuButtonIcon,\n        menuButtonQa,\n        menuButtonTooltip,\n    ]);\n\n    const [leftBaseActions, rightBaseActions] = useMemo(() => {\n        const left: ActionItem[] = [];\n        const right: ActionItem[] = [];\n        baseActions.forEach((action) => {\n            (actionsPlacement.base?.[action.id as HeaderAction] === 'left' ? left : right).push(\n                action,\n            );\n        });\n        return [left, right];\n    }, [actionsPlacement.base, baseActions]);\n\n    const renderActions = (side: 'left' | 'right') => {\n        const sideAdditionalActions =\n            (actionsPlacement.additional ?? 'right') === side ? additionalActions : [];\n        const sideMenu = (actionsPlacement.menu ?? 'right') === side ? headerMenu : null;\n        const sideBaseActions = side === 'left' ? leftBaseActions : rightBaseActions;\n        if (sideAdditionalActions.length === 0 && !sideMenu && sideBaseActions.length === 0) {\n            return null;\n        }\n        const legacyOrder: HeaderActionOrderItem[] = [\n            ...(sideAdditionalActions.length > 0 ? [HeaderActionGroup.Additional] : []),\n            ...(sideMenu ? [HeaderActionGroup.Menu] : []),\n            ...sideBaseActions.map((action) => action.id as HeaderAction),\n        ];\n        const requestedOrder = actionsOrder[side] ?? [];\n        const available = new Set(legacyOrder);\n        const ordered = [...new Set([...requestedOrder, ...legacyOrder])].filter((item) =>\n            available.has(item),\n        );\n\n        const renderOrderedAction = (item: HeaderActionOrderItem) => {\n            if (item === HeaderActionGroup.Additional) {\n                return sideAdditionalActions.map((action, index) =>\n                    renderAdditionalAction(action, index),\n                );\n            }\n            if (item === HeaderActionGroup.Menu) {\n                return <React.Fragment key=\"menu\">{sideMenu}</React.Fragment>;\n            }\n            const action = sideBaseActions.find((candidate) => candidate.id === item);\n            return action ? renderBaseAction(action, historyButtonRef) : null;\n        };\n\n        return <ButtonGroup>{ordered.map(renderOrderedAction)}</ButtonGroup>;\n    };\n\n    const leftActions = renderActions('left');\n    const rightActions = renderActions('right');\n\n    return (\n        <div className={b('', className)} data-qa={qa}>\n            {(withIcon || leftActions) && (\n                <div className={b('left')}>\n                    {withIcon && iconElement}\n                    {leftActions}\n                </div>\n            )}\n\n            {/* Center part: title with preview */}\n            {showTitle && (\n                <div className={titlePositionClass}>\n                    {title && (\n                        <Text title={title} as=\"div\" variant=\"subheader-2\" className={b('title')}>\n                            {title}\n                        </Text>\n                    )}\n                    {preview && <div className={b('preview')}>{preview}</div>}\n                </div>\n            )}\n\n            {rightActions}\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"Header.js","sourceRoot":"../../../../../src","sources":["components/organisms/Header/Header.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, {useCallback, useMemo, useState} from 'react';\n\nimport {\n    ChevronsCollapseUpRight,\n    ChevronsExpandUpRight,\n    ClockArrowRotateLeft,\n    Ellipsis,\n    Plus,\n    Sparkles,\n    Xmark,\n} from '@gravity-ui/icons';\nimport {DropdownMenu, Icon, Menu, Sheet, Text, useUniqId} from '@gravity-ui/uikit';\n\nimport {Action} from 'src/types';\n\nimport {getControlIconSize} from '../../../hooks/useMobileControlSize';\nimport {isActionConfig} from '../../../utils/actionUtils';\nimport {block} from '../../../utils/cn';\nimport {ActionButton} from '../../atoms/ActionButton';\nimport {ButtonGroup} from '../../molecules/ButtonGroup';\n\nimport {i18n} from './i18n';\nimport {\n    HeaderAction,\n    HeaderActionGroup,\n    type HeaderActionOrderItem,\n    type HeaderMenuItem,\n    type HeaderProps,\n} from './types';\nimport {ActionItem, useHeader} from './useHeader';\n\nimport './Header.scss';\n\nconst b = block('header');\n\n// Icons for base actions\nconst ACTION_ICONS: Record<HeaderAction, typeof Xmark> = {\n    [HeaderAction.NewChat]: Plus,\n    [HeaderAction.History]: ClockArrowRotateLeft,\n    [HeaderAction.Folding]: ChevronsCollapseUpRight, // Default icon, will be switched based on state\n    [HeaderAction.Close]: Xmark,\n};\n\n// Icons for folding states\nconst FOLDING_ICONS = {\n    collapsed: ChevronsExpandUpRight,\n    opened: ChevronsCollapseUpRight,\n};\n\ntype NormalizedMenuItem = HeaderMenuItem & {qa: string};\n\nfunction getNormalizedMenuItem(\n    item: HeaderMenuItem,\n    menuItemQa: HeaderProps['menuItemQa'],\n): NormalizedMenuItem {\n    return {...item, qa: menuItemQa?.[item.id] ?? `header-menu-item-${item.id}`};\n}\n\n/**\n * Header component for displaying chat header with navigation and actions\n *\n * @param props - Component props\n * @returns Header component\n */\nexport function Header(props: HeaderProps) {\n    const {\n        title,\n        preview,\n        icon,\n        baseActions,\n        additionalActions,\n        actionsPlacement,\n        actionsOrder,\n        actionSize,\n        isMobile,\n        actionIcons,\n        menuItems,\n        menuButtonTooltip,\n        menuButtonIcon,\n        menuButtonQa,\n        menuItemQa,\n        showSheetTitle,\n        titlePosition,\n        withIcon,\n        showTitle = true,\n        className,\n        historyButtonRef,\n        qa,\n        actionQa,\n        actionTooltipTexts,\n    } = useHeader(props);\n\n    const [isMenuSheetVisible, setIsMenuSheetVisible] = useState(false);\n    const menuSheetId = useUniqId();\n\n    const iconSize = getControlIconSize(actionSize);\n\n    // Determine class for title positioning\n    const titlePositionClass = b('title-container', {position: titlePosition});\n\n    const iconElement = icon ? (\n        <div className={b('icon')}>{icon}</div>\n    ) : (\n        <Icon data={Sparkles} size={16} />\n    );\n\n    // Render base action\n    const renderBaseAction = useCallback(\n        (action: ActionItem, ref?: React.RefObject<HTMLElement>) => {\n            const actionId = action.id as HeaderAction;\n            const IconComponent =\n                actionIcons?.[actionId] ??\n                (actionId === HeaderAction.Folding && action.foldingState\n                    ? FOLDING_ICONS[action.foldingState]\n                    : ACTION_ICONS[actionId]);\n\n            if (!IconComponent) {\n                return null;\n            }\n\n            // Get tooltip text\n            let tooltipKey = `action-tooltip-${action.id}`;\n            let tooltipOverride: string | undefined;\n            if (action.id === HeaderAction.Folding && action.foldingState) {\n                tooltipKey = `action-tooltip-folding-${action.foldingState}`;\n                tooltipOverride = actionTooltipTexts?.[HeaderAction.Folding]?.[action.foldingState];\n            } else {\n                tooltipOverride =\n                    actionTooltipTexts?.[action.id as Exclude<HeaderAction, HeaderAction.Folding>];\n            }\n\n            // Determine ref for history button\n            const buttonRef = action.id === HeaderAction.History ? ref : undefined;\n\n            return (\n                <ActionButton\n                    key={action.id}\n                    ref={buttonRef as React.Ref<HTMLButtonElement>}\n                    tooltipTitle={tooltipOverride ?? i18n(tooltipKey as Parameters<typeof i18n>[0])}\n                    size={actionSize}\n                    view=\"flat\"\n                    onClick={action.onClick}\n                    className={b('action-button')}\n                    qa={actionQa?.[action.id as HeaderAction] ?? `header-action-${action.id}`}\n                >\n                    <Icon data={IconComponent} size={iconSize} />\n                </ActionButton>\n            );\n        },\n        [actionIcons, actionQa, actionSize, actionTooltipTexts, iconSize],\n    );\n\n    // Render additional action\n    const renderAdditionalAction = useCallback(\n        (action: Action, index: number) => {\n            const id = `additional-${index}`;\n\n            if (!isActionConfig(action)) {\n                return <React.Fragment key={id}>{action}</React.Fragment>;\n            }\n\n            return (\n                <ActionButton\n                    key={`${index}`}\n                    {...action}\n                    view={action.view || 'flat'}\n                    size={action.size ?? actionSize}\n                >\n                    {action.icon || action.label}\n                </ActionButton>\n            );\n        },\n        [actionSize],\n    );\n\n    const normalizedMenuItems = useMemo(\n        () => menuItems.map((item) => getNormalizedMenuItem(item, menuItemQa)),\n        [menuItems, menuItemQa],\n    );\n\n    const dropdownMenuItems = useMemo(\n        () =>\n            normalizedMenuItems.map((item) => ({\n                text: item.label,\n                action: item.onClick,\n                disabled: item.disabled,\n                qa: item.qa,\n                ...(item.icon ? {iconStart: item.icon} : {}),\n            })),\n        [normalizedMenuItems],\n    );\n\n    const headerMenu = useMemo(() => {\n        if (normalizedMenuItems.length === 0) {\n            return null;\n        }\n\n        const switcherContent = menuButtonIcon ?? <Icon data={Ellipsis} size={iconSize} />;\n        const switcherTooltip = menuButtonTooltip ?? i18n('action-tooltip-menu');\n        const switcherQa = menuButtonQa ?? 'header-menu-button';\n\n        if (isMobile) {\n            return (\n                <React.Fragment>\n                    <ActionButton\n                        tooltipTitle={switcherTooltip}\n                        size={actionSize}\n                        view=\"flat\"\n                        className={b('action-button')}\n                        qa={switcherQa}\n                        onClick={() => setIsMenuSheetVisible(true)}\n                    >\n                        {switcherContent}\n                    </ActionButton>\n                    <Sheet\n                        id={menuSheetId}\n                        title={i18n('menu-sheet-title')}\n                        visible={isMenuSheetVisible}\n                        onClose={() => setIsMenuSheetVisible(false)}\n                        contentClassName={b('menu-sheet-content', {\n                            'without-title': !showSheetTitle,\n                        })}\n                        qa=\"header-menu-sheet-container\"\n                    >\n                        <Menu size=\"xl\" qa=\"header-menu-sheet\">\n                            {normalizedMenuItems.map((item) => (\n                                <Menu.Item\n                                    key={item.id}\n                                    className={b('menu-item')}\n                                    disabled={item.disabled}\n                                    qa={item.qa}\n                                    onClick={() => {\n                                        setIsMenuSheetVisible(false);\n                                        item.onClick();\n                                    }}\n                                >\n                                    <span className={b('menu-item-content')}>\n                                        {item.icon ? (\n                                            <span className={b('menu-item-icon')}>{item.icon}</span>\n                                        ) : null}\n                                        {item.label}\n                                    </span>\n                                </Menu.Item>\n                            ))}\n                        </Menu>\n                    </Sheet>\n                </React.Fragment>\n            );\n        }\n\n        return (\n            <DropdownMenu\n                items={dropdownMenuItems}\n                renderSwitcher={(switcherProps) => (\n                    <ActionButton\n                        {...switcherProps}\n                        tooltipTitle={switcherTooltip}\n                        size={actionSize}\n                        view=\"flat\"\n                        className={b('action-button')}\n                        qa={switcherQa}\n                    >\n                        {switcherContent}\n                    </ActionButton>\n                )}\n            />\n        );\n    }, [\n        actionSize,\n        iconSize,\n        isMobile,\n        isMenuSheetVisible,\n        menuSheetId,\n        dropdownMenuItems,\n        normalizedMenuItems,\n        menuButtonIcon,\n        menuButtonQa,\n        menuButtonTooltip,\n        showSheetTitle,\n    ]);\n\n    const [leftBaseActions, rightBaseActions] = useMemo(() => {\n        const left: ActionItem[] = [];\n        const right: ActionItem[] = [];\n        baseActions.forEach((action) => {\n            (actionsPlacement.base?.[action.id as HeaderAction] === 'left' ? left : right).push(\n                action,\n            );\n        });\n        return [left, right];\n    }, [actionsPlacement.base, baseActions]);\n\n    const renderActions = (side: 'left' | 'right') => {\n        const sideAdditionalActions =\n            (actionsPlacement.additional ?? 'right') === side ? additionalActions : [];\n        const sideMenu = (actionsPlacement.menu ?? 'right') === side ? headerMenu : null;\n        const sideBaseActions = side === 'left' ? leftBaseActions : rightBaseActions;\n        if (sideAdditionalActions.length === 0 && !sideMenu && sideBaseActions.length === 0) {\n            return null;\n        }\n        const legacyOrder: HeaderActionOrderItem[] = [\n            ...(sideAdditionalActions.length > 0 ? [HeaderActionGroup.Additional] : []),\n            ...(sideMenu ? [HeaderActionGroup.Menu] : []),\n            ...sideBaseActions.map((action) => action.id as HeaderAction),\n        ];\n        const requestedOrder = actionsOrder[side] ?? [];\n        const available = new Set(legacyOrder);\n        const ordered = [...new Set([...requestedOrder, ...legacyOrder])].filter((item) =>\n            available.has(item),\n        );\n\n        const renderOrderedAction = (item: HeaderActionOrderItem) => {\n            if (item === HeaderActionGroup.Additional) {\n                return sideAdditionalActions.map((action, index) =>\n                    renderAdditionalAction(action, index),\n                );\n            }\n            if (item === HeaderActionGroup.Menu) {\n                return <React.Fragment key=\"menu\">{sideMenu}</React.Fragment>;\n            }\n            const action = sideBaseActions.find((candidate) => candidate.id === item);\n            return action ? renderBaseAction(action, historyButtonRef) : null;\n        };\n\n        return <ButtonGroup>{ordered.map(renderOrderedAction)}</ButtonGroup>;\n    };\n\n    const leftActions = renderActions('left');\n    const rightActions = renderActions('right');\n\n    return (\n        <div className={b('', className)} data-qa={qa}>\n            {(withIcon || leftActions) && (\n                <div className={b('left')}>\n                    {withIcon && iconElement}\n                    {leftActions}\n                </div>\n            )}\n\n            {/* Center part: title with preview */}\n            {showTitle && (\n                <div className={titlePositionClass}>\n                    {title && (\n                        <Text title={title} as=\"div\" variant=\"subheader-2\" className={b('title')}>\n                            {title}\n                        </Text>\n                    )}\n                    {preview && <div className={b('preview')}>{preview}</div>}\n                </div>\n            )}\n\n            {rightActions}\n        </div>\n    );\n}\n"]}

package/build/cjs/components/organisms/Header/types.d.ts

@@ -64,6 +64,8 @@ export type HeaderProps = {
     menuButtonQa?: string;
     /** data-qa overrides per menu item id (default: `header-menu-item-${id}`) */
     menuItemQa?: Partial<Record<string, string>>;
+    /** Show the mobile menu sheet title (default: `true`); it stays in `aria-label` either way */
+    showSheetTitle?: boolean;
     /**
      * Notification callback fired by ChatContainer when the history popup is toggled
      * via the Header action button. Receives the next open state (the value the chat

package/build/cjs/components/organisms/Header/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"../../../../../src","sources":["components/organisms/Header/types.ts"],"names":[],"mappings":";;;AAaA,IAAY,YAKX;AALD,WAAY,YAAY;IACpB,mCAAmB,CAAA;IACnB,mCAAmB,CAAA;IACnB,mCAAmB,CAAA;IACnB,+BAAe,CAAA;AACnB,CAAC,EALW,YAAY,4BAAZ,YAAY,QAKvB;AAED,mFAAmF;AACnF,IAAY,iBAGX;AAHD,WAAY,iBAAiB;IACzB,kCAAa,CAAA;IACb,8CAAyB,CAAA;AAC7B,CAAC,EAHW,iBAAiB,iCAAjB,iBAAiB,QAG5B","sourcesContent":["import type {ButtonButtonProps, IconData} from '@gravity-ui/uikit';\n\nimport type {Action} from '../../../types/common';\n\nexport type HeaderMenuItem = {\n    id: string;\n    label: string;\n    onClick: () => void;\n    disabled?: boolean;\n    /** Optional leading icon (rendered only when provided) */\n    icon?: React.ReactNode;\n};\n\nexport enum HeaderAction {\n    NewChat = 'newChat',\n    History = 'history',\n    Folding = 'folding',\n    Close = 'close',\n}\n\n/** Composite and service action groups that can participate in header ordering. */\nexport enum HeaderActionGroup {\n    Menu = 'menu',\n    Additional = 'additional',\n}\n\nexport type HeaderActionSide = 'left' | 'right';\n\nexport type HeaderActionsPlacement = {\n    /** Side for individual built-in actions. Unspecified actions stay on the right. */\n    base?: Partial<Record<HeaderAction, HeaderActionSide>>;\n    /** Side for the menu button. */\n    menu?: HeaderActionSide;\n    /** Side for the whole additional actions group. */\n    additional?: HeaderActionSide;\n};\n\nexport type HeaderActionOrderItem = HeaderAction | HeaderActionGroup;\n\nexport type HeaderActionsOrder = Partial<\n    Record<HeaderActionSide, readonly HeaderActionOrderItem[]>\n>;\n\nexport type HeaderActionTooltipTexts = Partial<\n    Record<Exclude<HeaderAction, HeaderAction.Folding>, string>\n> & {\n    /** Tooltip texts for {@link HeaderAction.Folding}. */\n    [HeaderAction.Folding]?: Partial<Record<'collapsed' | 'opened', string>>;\n};\n\nexport type HeaderProps = {\n    // Content\n    icon?: React.ReactNode;\n    title?: string;\n    preview?: React.ReactNode;\n\n    // Actions\n    baseActions?: HeaderAction[];\n    handleNewChat?: () => void;\n    handleHistoryToggle?: () => void;\n    handleFolding?: (value: 'collapsed' | 'opened') => void;\n    handleClose?: () => void;\n    additionalActions?: Action[];\n    actionsPlacement?: HeaderActionsPlacement;\n    /** Order of action groups on each side. Unlisted available actions keep their legacy order. */\n    actionsOrder?: HeaderActionsOrder;\n    /** Default size for built-in, menu, and configured additional action buttons. */\n    actionSize?: ButtonButtonProps['size'];\n    /** Custom icons for built-in actions. Unspecified actions keep their default icons. */\n    actionIcons?: Partial<Record<HeaderAction, IconData>>;\n\n    /**\n     * Menu items for the \"...\" dropdown. Labels and handlers are provided by the consumer.\n     * The menu button is rendered only when the array is non-empty.\n     */\n    menuItems?: HeaderMenuItem[];\n    /** Tooltip for the menu button (default: built-in i18n) */\n    menuButtonTooltip?: string;\n    /** Custom menu button icon (default: horizontal Ellipsis) */\n    menuButtonIcon?: React.ReactNode;\n    /** data-qa for the menu button (default: `header-menu-button`) */\n    menuButtonQa?: string;\n    /** data-qa overrides per menu item id (default: `header-menu-item-${id}`) */\n    menuItemQa?: Partial<Record<string, string>>;\n\n    /**\n     * Notification callback fired by ChatContainer when the history popup is toggled\n     * via the Header action button. Receives the next open state (the value the chat\n     * will be in after the toggle).\n     */\n    onHistoryToggle?: (open: boolean) => void;\n\n    // Refs\n    historyButtonRef?: React.RefObject<HTMLElement>;\n\n    // Folding state\n    foldingState?: 'collapsed' | 'opened';\n\n    // Display settings\n    titlePosition?: 'left' | 'center'; // default: left\n    withIcon?: boolean; // default: true\n    showTitle?: boolean; // default: true - controls visibility of title and preview\n\n    className?: string;\n\n    /** QA/test identifier on header root */\n    qa?: string;\n    /** Per base action `data-qa` (defaults to `header-action-${id}`) */\n    actionQa?: Partial<Record<HeaderAction, string>>;\n    /**\n     * Override tooltip texts per base action. When a value is undefined, the built-in\n     * localized string is used (e.g. `i18n('action-tooltip-newChat')`).\n     */\n    actionTooltipTexts?: HeaderActionTooltipTexts;\n};\n"]}
+{"version":3,"file":"types.js","sourceRoot":"../../../../../src","sources":["components/organisms/Header/types.ts"],"names":[],"mappings":";;;AAaA,IAAY,YAKX;AALD,WAAY,YAAY;IACpB,mCAAmB,CAAA;IACnB,mCAAmB,CAAA;IACnB,mCAAmB,CAAA;IACnB,+BAAe,CAAA;AACnB,CAAC,EALW,YAAY,4BAAZ,YAAY,QAKvB;AAED,mFAAmF;AACnF,IAAY,iBAGX;AAHD,WAAY,iBAAiB;IACzB,kCAAa,CAAA;IACb,8CAAyB,CAAA;AAC7B,CAAC,EAHW,iBAAiB,iCAAjB,iBAAiB,QAG5B","sourcesContent":["import type {ButtonButtonProps, IconData} from '@gravity-ui/uikit';\n\nimport type {Action} from '../../../types/common';\n\nexport type HeaderMenuItem = {\n    id: string;\n    label: string;\n    onClick: () => void;\n    disabled?: boolean;\n    /** Optional leading icon (rendered only when provided) */\n    icon?: React.ReactNode;\n};\n\nexport enum HeaderAction {\n    NewChat = 'newChat',\n    History = 'history',\n    Folding = 'folding',\n    Close = 'close',\n}\n\n/** Composite and service action groups that can participate in header ordering. */\nexport enum HeaderActionGroup {\n    Menu = 'menu',\n    Additional = 'additional',\n}\n\nexport type HeaderActionSide = 'left' | 'right';\n\nexport type HeaderActionsPlacement = {\n    /** Side for individual built-in actions. Unspecified actions stay on the right. */\n    base?: Partial<Record<HeaderAction, HeaderActionSide>>;\n    /** Side for the menu button. */\n    menu?: HeaderActionSide;\n    /** Side for the whole additional actions group. */\n    additional?: HeaderActionSide;\n};\n\nexport type HeaderActionOrderItem = HeaderAction | HeaderActionGroup;\n\nexport type HeaderActionsOrder = Partial<\n    Record<HeaderActionSide, readonly HeaderActionOrderItem[]>\n>;\n\nexport type HeaderActionTooltipTexts = Partial<\n    Record<Exclude<HeaderAction, HeaderAction.Folding>, string>\n> & {\n    /** Tooltip texts for {@link HeaderAction.Folding}. */\n    [HeaderAction.Folding]?: Partial<Record<'collapsed' | 'opened', string>>;\n};\n\nexport type HeaderProps = {\n    // Content\n    icon?: React.ReactNode;\n    title?: string;\n    preview?: React.ReactNode;\n\n    // Actions\n    baseActions?: HeaderAction[];\n    handleNewChat?: () => void;\n    handleHistoryToggle?: () => void;\n    handleFolding?: (value: 'collapsed' | 'opened') => void;\n    handleClose?: () => void;\n    additionalActions?: Action[];\n    actionsPlacement?: HeaderActionsPlacement;\n    /** Order of action groups on each side. Unlisted available actions keep their legacy order. */\n    actionsOrder?: HeaderActionsOrder;\n    /** Default size for built-in, menu, and configured additional action buttons. */\n    actionSize?: ButtonButtonProps['size'];\n    /** Custom icons for built-in actions. Unspecified actions keep their default icons. */\n    actionIcons?: Partial<Record<HeaderAction, IconData>>;\n\n    /**\n     * Menu items for the \"...\" dropdown. Labels and handlers are provided by the consumer.\n     * The menu button is rendered only when the array is non-empty.\n     */\n    menuItems?: HeaderMenuItem[];\n    /** Tooltip for the menu button (default: built-in i18n) */\n    menuButtonTooltip?: string;\n    /** Custom menu button icon (default: horizontal Ellipsis) */\n    menuButtonIcon?: React.ReactNode;\n    /** data-qa for the menu button (default: `header-menu-button`) */\n    menuButtonQa?: string;\n    /** data-qa overrides per menu item id (default: `header-menu-item-${id}`) */\n    menuItemQa?: Partial<Record<string, string>>;\n    /** Show the mobile menu sheet title (default: `true`); it stays in `aria-label` either way */\n    showSheetTitle?: boolean;\n\n    /**\n     * Notification callback fired by ChatContainer when the history popup is toggled\n     * via the Header action button. Receives the next open state (the value the chat\n     * will be in after the toggle).\n     */\n    onHistoryToggle?: (open: boolean) => void;\n\n    // Refs\n    historyButtonRef?: React.RefObject<HTMLElement>;\n\n    // Folding state\n    foldingState?: 'collapsed' | 'opened';\n\n    // Display settings\n    titlePosition?: 'left' | 'center'; // default: left\n    withIcon?: boolean; // default: true\n    showTitle?: boolean; // default: true - controls visibility of title and preview\n\n    className?: string;\n\n    /** QA/test identifier on header root */\n    qa?: string;\n    /** Per base action `data-qa` (defaults to `header-action-${id}`) */\n    actionQa?: Partial<Record<HeaderAction, string>>;\n    /**\n     * Override tooltip texts per base action. When a value is undefined, the built-in\n     * localized string is used (e.g. `i18n('action-tooltip-newChat')`).\n     */\n    actionTooltipTexts?: HeaderActionTooltipTexts;\n};\n"]}

package/build/cjs/components/organisms/Header/useHeader.d.ts

@@ -31,4 +31,5 @@ export declare function useHeader(props: HeaderProps): {
     menuButtonIcon?: React.ReactNode;
     menuButtonQa?: string;
     menuItemQa?: HeaderProps['menuItemQa'];
+    showSheetTitle: boolean;
 };

package/build/cjs/components/organisms/Header/useHeader.js

@@ -5,7 +5,7 @@ const react_1 = require("react");
 const uikit_1 = require("@gravity-ui/uikit");
 const types_1 = require("./types.js");
 function useHeader(props) {
-    const { icon, title, preview, baseActions = [], handleNewChat, handleHistoryToggle, handleClose, handleFolding, foldingState = 'opened', additionalActions = [], actionsPlacement = {}, actionsOrder = {}, actionSize: actionSizeProp, actionIcons, menuItems = [], menuButtonTooltip, menuButtonIcon, menuButtonQa, menuItemQa, titlePosition = 'left', withIcon = true, showTitle = true, className, historyButtonRef, qa, actionQa, actionTooltipTexts, } = props;
+    const { icon, title, preview, baseActions = [], handleNewChat, handleHistoryToggle, handleClose, handleFolding, foldingState = 'opened', additionalActions = [], actionsPlacement = {}, actionsOrder = {}, actionSize: actionSizeProp, actionIcons, menuItems = [], menuButtonTooltip, menuButtonIcon, menuButtonQa, menuItemQa, showSheetTitle = true, titlePosition = 'left', withIcon = true, showTitle = true, className, historyButtonRef, qa, actionQa, actionTooltipTexts, } = props;
     const isMobile = (0, uikit_1.useMobile)();
     const actionSize = actionSizeProp !== null && actionSizeProp !== void 0 ? actionSizeProp : (isMobile ? 'xl' : 'm');
     // Build base actions
@@ -66,6 +66,7 @@ function useHeader(props) {
         menuButtonIcon,
         menuButtonQa,
         menuItemQa,
+        showSheetTitle,
     };
 }
 //# sourceMappingURL=useHeader.js.map

package/build/cjs/components/organisms/Header/useHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"useHeader.js","sourceRoot":"../../../../../src","sources":["components/organisms/Header/useHeader.ts"],"names":[],"mappings":";;AAeA,8BA0HC;AAzID,iCAAqC;AAErC,6CAA4C;AAI5C,sCAA4E;AAS5E,SAAgB,SAAS,CAAC,KAAkB;IAyBxC,MAAM,EACF,IAAI,EACJ,KAAK,EACL,OAAO,EACP,WAAW,GAAG,EAAE,EAChB,aAAa,EACb,mBAAmB,EACnB,WAAW,EACX,aAAa,EACb,YAAY,GAAG,QAAQ,EACvB,iBAAiB,GAAG,EAAE,EACtB,gBAAgB,GAAG,EAAE,EACrB,YAAY,GAAG,EAAE,EACjB,UAAU,EAAE,cAAc,EAC1B,WAAW,EACX,SAAS,GAAG,EAAE,EACd,iBAAiB,EACjB,cAAc,EACd,YAAY,EACZ,UAAU,EACV,aAAa,GAAG,MAAM,EACtB,QAAQ,GAAG,IAAI,EACf,SAAS,GAAG,IAAI,EAChB,SAAS,EACT,gBAAgB,EAChB,EAAE,EACF,QAAQ,EACR,kBAAkB,GACrB,GAAG,KAAK,CAAC;IAEV,MAAM,QAAQ,GAAG,IAAA,iBAAS,GAAE,CAAC;IAC7B,MAAM,UAAU,GAAG,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;IAE7D,qBAAqB;IACrB,MAAM,eAAe,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACjC,MAAM,OAAO,GAAiB,EAAE,CAAC;QAEjC,WAAW,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;YAC3B,IAAI,MAAM,KAAK,oBAAY,CAAC,OAAO,EAAE,CAAC;gBAClC,IAAI,aAAa,EAAE,CAAC;oBAChB,OAAO,CAAC,IAAI,CAAC;wBACT,EAAE,EAAE,MAAM;wBACV,IAAI,EAAE,MAAM;wBACZ,OAAO,EAAE,GAAG,EAAE;4BACV,MAAM,QAAQ,GAAG,YAAY,KAAK,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;4BACpE,aAAa,CAAC,QAAQ,CAAC,CAAC;wBAC5B,CAAC;wBACD,YAAY;qBACf,CAAC,CAAC;gBACP,CAAC;gBACD,OAAO;YACX,CAAC;YAED,MAAM,SAAS,GAA8C;gBACzD,CAAC,oBAAY,CAAC,OAAO,CAAC,EAAE,aAAa;gBACrC,CAAC,oBAAY,CAAC,OAAO,CAAC,EAAE,mBAAmB;gBAC3C,CAAC,oBAAY,CAAC,KAAK,CAAC,EAAE,WAAW;aACpC,CAAC;YAEF,MAAM,OAAO,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;YAClC,IAAI,OAAO,EAAE,CAAC;gBACV,OAAO,CAAC,IAAI,CAAC;oBACT,EAAE,EAAE,MAAM;oBACV,IAAI,EAAE,MAAM;oBACZ,OAAO,EAAE,OAAO;iBACnB,CAAC,CAAC;YACP,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,OAAO,OAAO,CAAC;IACnB,CAAC,EAAE,CAAC,WAAW,EAAE,aAAa,EAAE,mBAAmB,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,CAAC,CAAC,CAAC;IAEhG,OAAO;QACH,KAAK;QACL,OAAO;QACP,IAAI;QACJ,WAAW,EAAE,eAAe;QAC5B,iBAAiB;QACjB,gBAAgB;QAChB,YAAY;QACZ,UAAU;QACV,QAAQ;QACR,WAAW;QACX,aAAa;QACb,QAAQ;QACR,SAAS;QACT,SAAS;QACT,gBAAgB;QAChB,EAAE;QACF,QAAQ;QACR,kBAAkB;QAClB,SAAS;QACT,iBAAiB;QACjB,cAAc;QACd,YAAY;QACZ,UAAU;KACb,CAAC;AACN,CAAC","sourcesContent":["import React, {useMemo} from 'react';\n\nimport {useMobile} from '@gravity-ui/uikit';\n\nimport type {Action} from '../../../types/common';\n\nimport {HeaderAction, type HeaderMenuItem, type HeaderProps} from './types';\n\nexport type ActionItem = {\n    id: string;\n    type: 'base' | 'additional';\n    onClick?: () => void;\n    foldingState?: 'collapsed' | 'opened';\n};\n\nexport function useHeader(props: HeaderProps): {\n    title: string | undefined;\n    preview: React.ReactNode | undefined;\n    icon: React.ReactNode | undefined;\n    baseActions: ActionItem[];\n    additionalActions: Action[];\n    actionsPlacement: NonNullable<HeaderProps['actionsPlacement']>;\n    actionsOrder: NonNullable<HeaderProps['actionsOrder']>;\n    actionSize: NonNullable<HeaderProps['actionSize']>;\n    isMobile: boolean;\n    actionIcons?: HeaderProps['actionIcons'];\n    titlePosition: 'left' | 'center';\n    withIcon: boolean;\n    showTitle: boolean;\n    className?: string;\n    historyButtonRef?: React.RefObject<HTMLElement>;\n    qa?: string;\n    actionQa?: HeaderProps['actionQa'];\n    actionTooltipTexts?: HeaderProps['actionTooltipTexts'];\n    menuItems: HeaderMenuItem[];\n    menuButtonTooltip?: string;\n    menuButtonIcon?: React.ReactNode;\n    menuButtonQa?: string;\n    menuItemQa?: HeaderProps['menuItemQa'];\n} {\n    const {\n        icon,\n        title,\n        preview,\n        baseActions = [],\n        handleNewChat,\n        handleHistoryToggle,\n        handleClose,\n        handleFolding,\n        foldingState = 'opened',\n        additionalActions = [],\n        actionsPlacement = {},\n        actionsOrder = {},\n        actionSize: actionSizeProp,\n        actionIcons,\n        menuItems = [],\n        menuButtonTooltip,\n        menuButtonIcon,\n        menuButtonQa,\n        menuItemQa,\n        titlePosition = 'left',\n        withIcon = true,\n        showTitle = true,\n        className,\n        historyButtonRef,\n        qa,\n        actionQa,\n        actionTooltipTexts,\n    } = props;\n\n    const isMobile = useMobile();\n    const actionSize = actionSizeProp ?? (isMobile ? 'xl' : 'm');\n\n    // Build base actions\n    const baseActionsList = useMemo(() => {\n        const actions: ActionItem[] = [];\n\n        baseActions.forEach((action) => {\n            if (action === HeaderAction.Folding) {\n                if (handleFolding) {\n                    actions.push({\n                        id: action,\n                        type: 'base',\n                        onClick: () => {\n                            const newState = foldingState === 'opened' ? 'collapsed' : 'opened';\n                            handleFolding(newState);\n                        },\n                        foldingState,\n                    });\n                }\n                return;\n            }\n\n            const actionMap: Partial<Record<HeaderAction, () => void>> = {\n                [HeaderAction.NewChat]: handleNewChat,\n                [HeaderAction.History]: handleHistoryToggle,\n                [HeaderAction.Close]: handleClose,\n            };\n\n            const handler = actionMap[action];\n            if (handler) {\n                actions.push({\n                    id: action,\n                    type: 'base',\n                    onClick: handler,\n                });\n            }\n        });\n\n        return actions;\n    }, [baseActions, handleNewChat, handleHistoryToggle, handleClose, handleFolding, foldingState]);\n\n    return {\n        title,\n        preview,\n        icon,\n        baseActions: baseActionsList,\n        additionalActions,\n        actionsPlacement,\n        actionsOrder,\n        actionSize,\n        isMobile,\n        actionIcons,\n        titlePosition,\n        withIcon,\n        showTitle,\n        className,\n        historyButtonRef,\n        qa,\n        actionQa,\n        actionTooltipTexts,\n        menuItems,\n        menuButtonTooltip,\n        menuButtonIcon,\n        menuButtonQa,\n        menuItemQa,\n    };\n}\n"]}
+{"version":3,"file":"useHeader.js","sourceRoot":"../../../../../src","sources":["components/organisms/Header/useHeader.ts"],"names":[],"mappings":";;AAeA,8BA6HC;AA5ID,iCAAqC;AAErC,6CAA4C;AAI5C,sCAA4E;AAS5E,SAAgB,SAAS,CAAC,KAAkB;IA0BxC,MAAM,EACF,IAAI,EACJ,KAAK,EACL,OAAO,EACP,WAAW,GAAG,EAAE,EAChB,aAAa,EACb,mBAAmB,EACnB,WAAW,EACX,aAAa,EACb,YAAY,GAAG,QAAQ,EACvB,iBAAiB,GAAG,EAAE,EACtB,gBAAgB,GAAG,EAAE,EACrB,YAAY,GAAG,EAAE,EACjB,UAAU,EAAE,cAAc,EAC1B,WAAW,EACX,SAAS,GAAG,EAAE,EACd,iBAAiB,EACjB,cAAc,EACd,YAAY,EACZ,UAAU,EACV,cAAc,GAAG,IAAI,EACrB,aAAa,GAAG,MAAM,EACtB,QAAQ,GAAG,IAAI,EACf,SAAS,GAAG,IAAI,EAChB,SAAS,EACT,gBAAgB,EAChB,EAAE,EACF,QAAQ,EACR,kBAAkB,GACrB,GAAG,KAAK,CAAC;IAEV,MAAM,QAAQ,GAAG,IAAA,iBAAS,GAAE,CAAC;IAC7B,MAAM,UAAU,GAAG,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;IAE7D,qBAAqB;IACrB,MAAM,eAAe,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACjC,MAAM,OAAO,GAAiB,EAAE,CAAC;QAEjC,WAAW,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;YAC3B,IAAI,MAAM,KAAK,oBAAY,CAAC,OAAO,EAAE,CAAC;gBAClC,IAAI,aAAa,EAAE,CAAC;oBAChB,OAAO,CAAC,IAAI,CAAC;wBACT,EAAE,EAAE,MAAM;wBACV,IAAI,EAAE,MAAM;wBACZ,OAAO,EAAE,GAAG,EAAE;4BACV,MAAM,QAAQ,GAAG,YAAY,KAAK,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC;4BACpE,aAAa,CAAC,QAAQ,CAAC,CAAC;wBAC5B,CAAC;wBACD,YAAY;qBACf,CAAC,CAAC;gBACP,CAAC;gBACD,OAAO;YACX,CAAC;YAED,MAAM,SAAS,GAA8C;gBACzD,CAAC,oBAAY,CAAC,OAAO,CAAC,EAAE,aAAa;gBACrC,CAAC,oBAAY,CAAC,OAAO,CAAC,EAAE,mBAAmB;gBAC3C,CAAC,oBAAY,CAAC,KAAK,CAAC,EAAE,WAAW;aACpC,CAAC;YAEF,MAAM,OAAO,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;YAClC,IAAI,OAAO,EAAE,CAAC;gBACV,OAAO,CAAC,IAAI,CAAC;oBACT,EAAE,EAAE,MAAM;oBACV,IAAI,EAAE,MAAM;oBACZ,OAAO,EAAE,OAAO;iBACnB,CAAC,CAAC;YACP,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,OAAO,OAAO,CAAC;IACnB,CAAC,EAAE,CAAC,WAAW,EAAE,aAAa,EAAE,mBAAmB,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,CAAC,CAAC,CAAC;IAEhG,OAAO;QACH,KAAK;QACL,OAAO;QACP,IAAI;QACJ,WAAW,EAAE,eAAe;QAC5B,iBAAiB;QACjB,gBAAgB;QAChB,YAAY;QACZ,UAAU;QACV,QAAQ;QACR,WAAW;QACX,aAAa;QACb,QAAQ;QACR,SAAS;QACT,SAAS;QACT,gBAAgB;QAChB,EAAE;QACF,QAAQ;QACR,kBAAkB;QAClB,SAAS;QACT,iBAAiB;QACjB,cAAc;QACd,YAAY;QACZ,UAAU;QACV,cAAc;KACjB,CAAC;AACN,CAAC","sourcesContent":["import React, {useMemo} from 'react';\n\nimport {useMobile} from '@gravity-ui/uikit';\n\nimport type {Action} from '../../../types/common';\n\nimport {HeaderAction, type HeaderMenuItem, type HeaderProps} from './types';\n\nexport type ActionItem = {\n    id: string;\n    type: 'base' | 'additional';\n    onClick?: () => void;\n    foldingState?: 'collapsed' | 'opened';\n};\n\nexport function useHeader(props: HeaderProps): {\n    title: string | undefined;\n    preview: React.ReactNode | undefined;\n    icon: React.ReactNode | undefined;\n    baseActions: ActionItem[];\n    additionalActions: Action[];\n    actionsPlacement: NonNullable<HeaderProps['actionsPlacement']>;\n    actionsOrder: NonNullable<HeaderProps['actionsOrder']>;\n    actionSize: NonNullable<HeaderProps['actionSize']>;\n    isMobile: boolean;\n    actionIcons?: HeaderProps['actionIcons'];\n    titlePosition: 'left' | 'center';\n    withIcon: boolean;\n    showTitle: boolean;\n    className?: string;\n    historyButtonRef?: React.RefObject<HTMLElement>;\n    qa?: string;\n    actionQa?: HeaderProps['actionQa'];\n    actionTooltipTexts?: HeaderProps['actionTooltipTexts'];\n    menuItems: HeaderMenuItem[];\n    menuButtonTooltip?: string;\n    menuButtonIcon?: React.ReactNode;\n    menuButtonQa?: string;\n    menuItemQa?: HeaderProps['menuItemQa'];\n    showSheetTitle: boolean;\n} {\n    const {\n        icon,\n        title,\n        preview,\n        baseActions = [],\n        handleNewChat,\n        handleHistoryToggle,\n        handleClose,\n        handleFolding,\n        foldingState = 'opened',\n        additionalActions = [],\n        actionsPlacement = {},\n        actionsOrder = {},\n        actionSize: actionSizeProp,\n        actionIcons,\n        menuItems = [],\n        menuButtonTooltip,\n        menuButtonIcon,\n        menuButtonQa,\n        menuItemQa,\n        showSheetTitle = true,\n        titlePosition = 'left',\n        withIcon = true,\n        showTitle = true,\n        className,\n        historyButtonRef,\n        qa,\n        actionQa,\n        actionTooltipTexts,\n    } = props;\n\n    const isMobile = useMobile();\n    const actionSize = actionSizeProp ?? (isMobile ? 'xl' : 'm');\n\n    // Build base actions\n    const baseActionsList = useMemo(() => {\n        const actions: ActionItem[] = [];\n\n        baseActions.forEach((action) => {\n            if (action === HeaderAction.Folding) {\n                if (handleFolding) {\n                    actions.push({\n                        id: action,\n                        type: 'base',\n                        onClick: () => {\n                            const newState = foldingState === 'opened' ? 'collapsed' : 'opened';\n                            handleFolding(newState);\n                        },\n                        foldingState,\n                    });\n                }\n                return;\n            }\n\n            const actionMap: Partial<Record<HeaderAction, () => void>> = {\n                [HeaderAction.NewChat]: handleNewChat,\n                [HeaderAction.History]: handleHistoryToggle,\n                [HeaderAction.Close]: handleClose,\n            };\n\n            const handler = actionMap[action];\n            if (handler) {\n                actions.push({\n                    id: action,\n                    type: 'base',\n                    onClick: handler,\n                });\n            }\n        });\n\n        return actions;\n    }, [baseActions, handleNewChat, handleHistoryToggle, handleClose, handleFolding, foldingState]);\n\n    return {\n        title,\n        preview,\n        icon,\n        baseActions: baseActionsList,\n        additionalActions,\n        actionsPlacement,\n        actionsOrder,\n        actionSize,\n        isMobile,\n        actionIcons,\n        titlePosition,\n        withIcon,\n        showTitle,\n        className,\n        historyButtonRef,\n        qa,\n        actionQa,\n        actionTooltipTexts,\n        menuItems,\n        menuButtonTooltip,\n        menuButtonIcon,\n        menuButtonQa,\n        menuItemQa,\n        showSheetTitle,\n    };\n}\n"]}

package/build/cjs/components/organisms/PromptInput/PromptInput.css

@@ -7,11 +7,11 @@
 .g-aikit-prompt-input_view_simple {
   display: flex;
   flex-direction: column;
-  padding: var(--g-spacing-1) var(--g-spacing-1) var(--g-spacing-1) var(--g-spacing-3);
+  padding: var(--g-aikit-prompt-input-simple-padding);
 }
 .g-aikit-prompt-input_view_full {
   display: flex;
-  padding: var(--g-spacing-2);
+  padding: var(--g-aikit-prompt-input-full-padding);
   flex-direction: column;
   align-items: flex-start;
   gap: var(--g-spacing-2);

package/build/cjs/components/pages/ChatContainer/ChatContainer.css

@@ -11,9 +11,49 @@
   --g-aikit-empty-container-mobile-padding: var(
       --g-aikit-chat-container-mobile-empty-container-padding
   );
+  --g-aikit-chat-content-message-list-inline-padding: var(
+      --g-aikit-chat-container-mobile-message-list-inline-padding
+  );
+  --g-text-body-2-font-size: var(--g-aikit-chat-container-mobile-body-2-font-size);
+  --g-text-body-2-line-height: var(--g-aikit-chat-container-mobile-body-2-line-height);
   font-size: var(--g-aikit-chat-container-mobile-font-size);
   line-height: var(--g-aikit-chat-container-mobile-line-height);
 }
+.g-aikit-chat-container_mobile .g-aikit-chat-container__footer {
+  min-height: 0;
+}
+.g-aikit-chat-container_mobile .g-aikit-prompt-input__suggestions-wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.g-aikit-chat-container_mobile .g-aikit-prompt-input__panel-wrapper {
+  flex-shrink: 0;
+}
+.g-aikit-chat-container_mobile .g-aikit-prompt-input__suggestions {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  max-height: var(--g-aikit-chat-container-mobile-suggestions-max-height);
+  overflow: hidden;
+}
+.g-aikit-chat-container_mobile .g-aikit-prompt-input__suggestions .g-aikit-suggestions__container {
+  min-height: 0;
+  overflow: hidden auto;
+}
+.g-aikit-chat-container_mobile .g-aikit-prompt-input__suggestions .g-aikit-suggestions__title {
+  display: flex;
+  flex-direction: column;
+  min-height: var(--g-aikit-chat-container-mobile-suggestions-title-min-height);
+  overflow: hidden auto;
+}
+.g-aikit-chat-container_mobile .g-aikit-prompt-input__suggestions .g-aikit-suggestions {
+  flex-shrink: 0;
+  flex-wrap: nowrap;
+}
+.g-aikit-chat-container_mobile .g-aikit-prompt-input__suggestions .g-aikit-suggestions__button {
+  height: auto;
+}
 .g-aikit-chat-container_mobile.g-aikit-chat-container_keyboard-open {
   --g-aikit-empty-container-mobile-padding: var(
       --g-aikit-chat-container-mobile-keyboard-empty-container-padding
@@ -29,18 +69,33 @@
   --yfm-font-size-h6: var(--g-aikit-chat-container-mobile-font-size);
   --yfm-font-line-height-h6: var(--g-aikit-chat-container-mobile-line-height);
 }
-.g-aikit-chat-container_mobile .g-aikit-chat-container__header, .g-aikit-chat-container_mobile .g-aikit-chat-container__footer {
-  padding: var(--g-spacing-2) var(--g-aikit-layout-base-padding-m);
-}
 .g-aikit-chat-container__header {
   display: flex;
-  padding: var(--g-aikit-layout-base-padding-m);
+  box-sizing: border-box;
+  height: var(--g-aikit-chat-container-header-height);
+  padding: var(--g-aikit-chat-container-header-padding, var(--g-aikit-layout-base-padding-m));
   flex-direction: column;
   align-items: flex-start;
   gap: var(--g-spacing-2);
   align-self: stretch;
   background: var(--g-aikit-chat-container-header-background);
 }
+.g-aikit-chat-container_mobile .g-aikit-chat-container__header {
+  --g-aikit-button-group-gap: var(--g-spacing-2);
+  min-height: var(--g-aikit-chat-container-mobile-header-height);
+  padding: var(--g-aikit-chat-container-mobile-header-padding);
+}
+.g-aikit-chat-container_floating-header {
+  position: relative;
+}
+.g-aikit-chat-container_floating-header .g-aikit-chat-container__header {
+  position: absolute;
+  z-index: 2;
+  inset: 0 0 auto;
+}
+.g-aikit-chat-container_floating-header.g-aikit-chat-container_mobile .g-aikit-chat-container__header {
+  height: var(--g-aikit-chat-container-mobile-header-height);
+}
 .g-aikit-chat-container__content {
   min-height: 0;
   display: flex;
@@ -60,7 +115,7 @@
 }
 .g-aikit-chat-container__footer {
   display: flex;
-  padding: var(--g-aikit-layout-base-padding-m);
+  padding: var(--g-aikit-chat-container-footer-padding, var(--g-aikit-layout-base-padding-m));
   flex-direction: column;
   align-items: flex-start;
   gap: var(--g-spacing-1);
@@ -68,11 +123,18 @@
   background: var(--g-aikit-chat-container-footer-background);
 }
 .g-aikit-chat-container__footer_view_empty {
+  padding: var(--g-aikit-chat-container-footer-empty-padding, var(--g-aikit-chat-container-footer-padding, var(--g-aikit-layout-base-padding-m)));
   background: var(--g-aikit-chat-container-footer-empty-background);
 }
 .g-aikit-chat-container__footer_view_chat {
   background: var(--g-aikit-chat-container-footer-chat-background);
 }
+.g-aikit-chat-container_mobile .g-aikit-chat-container__footer {
+  padding: var(--g-aikit-chat-container-mobile-footer-padding);
+}
+.g-aikit-chat-container_mobile .g-aikit-chat-container__footer_view_empty {
+  padding: var(--g-aikit-chat-container-mobile-footer-empty-padding);
+}
 .g-aikit-chat-container__mascot {
   flex-shrink: 0;
   max-width: 100%;

package/build/cjs/components/pages/ChatContainer/ChatContainer.js

@@ -78,7 +78,7 @@ function buildFinalPromptInputProps(args) {
  */
 function ChatContainer(props) {
     var _a, _b;
-    const { chats = [], messages = [], onSendMessage, onDeleteChat, onCancel, onRetry, status = 'ready', error = null, showActionsOnHover = false, contextItems = [], showContextIndicator, contextIndicatorProps, transformOptions, shouldParseIncompleteMarkdown, openMarkdownLinksInNewTab, mdxProps, messageListConfig, mascotConfig, headerProps = {}, contentProps = {}, emptyContainerProps = {}, promptInputProps = {}, disclaimerProps = {}, historyProps = {}, welcomeConfig, texts = {}, hideTitleOnEmptyChat = false, isMobile: isMobileProp, adjustToKeyboard = true, className, headerClassName, contentClassName, footerClassName, qa, } = props;
+    const { chats = [], messages = [], onSendMessage, onDeleteChat, onCancel, onRetry, status = 'ready', error = null, showActionsOnHover = false, contextItems = [], showContextIndicator, contextIndicatorProps, transformOptions, shouldParseIncompleteMarkdown, openMarkdownLinksInNewTab, mdxProps, messageListConfig, mascotConfig, headerProps = {}, contentProps = {}, emptyContainerProps = {}, promptInputProps = {}, disclaimerProps = {}, historyProps = {}, welcomeConfig, texts = {}, hideTitleOnEmptyChat = false, isMobile: isMobileProp, adjustToKeyboard = true, floatingHeader = false, className, headerClassName, contentClassName, footerClassName, qa, } = props;
     const isMobileContext = (0, uikit_1.useMobile)();
     const isMobile = isMobileProp !== null && isMobileProp !== void 0 ? isMobileProp : isMobileContext;
     const rootRef = (0, react_1.useRef)(null);
@@ -330,6 +330,10 @@ function ChatContainer(props) {
         texts.historySearchPlaceholder,
     ]);
     const showFooter = finalPromptInputProps || finalDisclaimerProps;
-    return ((0, jsx_runtime_1.jsx)(uikit_1.MobileProvider, { mobile: isMobile, children: (0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: b({ mobile: isMobile, 'keyboard-open': isKeyboardOpen }, className), style: maxHeight === undefined ? undefined : { maxHeight }, "data-qa": (0, chatContainerQa_1.resolveChatContainerRootQa)(qaMap), children: [(0, jsx_runtime_1.jsx)("div", { className: b('header', headerClassName), children: (0, jsx_runtime_1.jsx)(Header_1.Header, Object.assign({}, finalHeaderProps)) }), (0, jsx_runtime_1.jsx)("div", { className: b('content', { view: hookState.chatContentView }, contentClassName), children: (0, jsx_runtime_1.jsx)(ChatContent_1.ChatContent, Object.assign({}, finalContentProps)) }), showFooter && ((0, jsx_runtime_1.jsxs)("div", { className: b('footer', { view: hookState.chatContentView }, footerClassName), children: [finalPromptInputProps && ((0, jsx_runtime_1.jsx)(PromptInput_1.PromptInput, Object.assign({}, finalPromptInputProps), hookState.promptInputKey)), finalDisclaimerProps && (0, jsx_runtime_1.jsx)(Disclaimer_1.Disclaimer, Object.assign({}, finalDisclaimerProps))] })), (0, jsx_runtime_1.jsx)(History_1.History, Object.assign({}, finalHistoryProps))] }) }));
+    return ((0, jsx_runtime_1.jsx)(uikit_1.MobileProvider, { mobile: isMobile, children: (0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: b({
+                mobile: isMobile,
+                'keyboard-open': isKeyboardOpen,
+                'floating-header': floatingHeader,
+            }, className), style: maxHeight === undefined ? undefined : { maxHeight }, "data-qa": (0, chatContainerQa_1.resolveChatContainerRootQa)(qaMap), children: [(0, jsx_runtime_1.jsx)("div", { className: b('header', headerClassName), children: (0, jsx_runtime_1.jsx)(Header_1.Header, Object.assign({}, finalHeaderProps)) }), (0, jsx_runtime_1.jsx)("div", { className: b('content', { view: hookState.chatContentView }, contentClassName), children: (0, jsx_runtime_1.jsx)(ChatContent_1.ChatContent, Object.assign({}, finalContentProps)) }), showFooter && ((0, jsx_runtime_1.jsxs)("div", { className: b('footer', { view: hookState.chatContentView }, footerClassName), children: [finalPromptInputProps && ((0, jsx_runtime_1.jsx)(PromptInput_1.PromptInput, Object.assign({}, finalPromptInputProps), hookState.promptInputKey)), finalDisclaimerProps && (0, jsx_runtime_1.jsx)(Disclaimer_1.Disclaimer, Object.assign({}, finalDisclaimerProps))] })), (0, jsx_runtime_1.jsx)(History_1.History, Object.assign({}, finalHistoryProps))] }) }));
 }
 //# sourceMappingURL=ChatContainer.js.map