@cloud-ru/uikit-product-claudia 1.6.5 → 1.8.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 1.8.0 (2025-11-17)
+
+
+### Features
+
+* **AINFR-4479:** add onCancel ([e3dbed9](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/e3dbed92b1435c7d53b51d2da1cbf64c86674b5a))
+
+
+
+
+
+# 1.7.0 (2025-11-13)
+
+
+### Features
+
+* **RM-3714:** replace claudia button by giga for recommend panel ([9114db7](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/9114db7e67cc17a4e134b3d3b7a12055b6d5edae))
+
+
+
+
+
 ## 1.6.5 (2025-11-13)
 
 

package/README.md

@@ -102,8 +102,9 @@
 |------|------|---------------|-------------|
 | layoutType* | enum LayoutType: `"mobile"`, `"tablet"`, `"desktop"`, `"desktopSmall"` | - |  |
 | actionLabel* | `string` | - |  |
-| content* | `ReactNode \| TextItem[]` | - |  |
+| content* | `string \| TextItem[]` | - |  |
 | icon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - |  |
+| contentClassName | `string` | - |  |
 | onActionClick | `() => void` | - |  |
 | className | `string` | - | CSS-класс |
 ## IconGiga
@@ -545,13 +546,15 @@
 | layoutType | enum LayoutType: `"mobile"`, `"tablet"`, `"desktop"`, `"desktopSmall"` | - |  |
 | onCloseClick | `() => void` | - |  |
 | onCloseChipLabel | `ReactNode` | - |  |
-| tooltip | `ReactNode` | - |  |
-| onClaudiaClick | `() => void` | - |  |
+| onAiAssistantClick | `() => void` | - |  |
+| docsUrl | `string` | https://cloud.ru/docs/ai_assistant_cloudia/ug/index |  |
+| dataTestId | `string` | recommend-panel |  |
 ## SshField
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
 | layoutType* | enum LayoutType: `"mobile"`, `"tablet"`, `"desktop"`, `"desktopSmall"` | - |  |
+| onCancel* | `() => void` | - | Колбек отмены действия |
 | onSubmit* | `(value: string) => void` | - | Колбек действия при отправке |
 | className | `string` | - | CSS-класс |
 | disabled | `boolean` | - | Является ли поле деактивированным |

package/dist/cjs/components/ChatStatusAnnouncement/ChatStatusAnnouncement.d.ts

@@ -1,2 +1,2 @@
 import { ChatStatusAnnouncementProps } from './types';
-export declare function ChatStatusAnnouncement({ content, onActionClick, actionLabel, icon, layoutType, className, }: ChatStatusAnnouncementProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatStatusAnnouncement({ content, contentClassName, onActionClick, actionLabel, icon, layoutType, className, }: ChatStatusAnnouncementProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/ChatStatusAnnouncement/ChatStatusAnnouncement.js

@@ -9,12 +9,13 @@ const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
 const uikit_product_icons_1 = require("@cloud-ru/uikit-product-icons");
 const uikit_product_utils_1 = require("@cloud-ru/uikit-product-utils");
+const truncate_string_1 = require("@snack-uikit/truncate-string");
+const typography_1 = require("@snack-uikit/typography");
 const constants_1 = require("./constants");
 const AlertButton_1 = require("./helperComponents/AlertButton");
-const TextContent_1 = require("./helperComponents/TextContent");
 const styled_module_scss_1 = __importDefault(require('./styled.module.css'));
 const utils_1 = require("./utils");
-function ChatStatusAnnouncement({ content, onActionClick, actionLabel, icon, layoutType, className, }) {
+function ChatStatusAnnouncement({ content, contentClassName, onActionClick, actionLabel, icon, layoutType, className, }) {
     const [currentIndex, setCurrentIndex] = (0, react_1.useState)(0);
     const [isAnimationEnded, setAnimationEnded] = (0, react_1.useState)(false);
     const [mouseEntered, setMouseEntered] = (0, react_1.useState)(false);
@@ -69,6 +70,6 @@ function ChatStatusAnnouncement({ content, onActionClick, actionLabel, icon, lay
                                 ? styled_module_scss_1.default.textBlockPrevious
                                 : styled_module_scss_1.default.textBlockNext;
                             const currentTextStyle = index === currentIndex ? styled_module_scss_1.default.textBlockCurrent : currentTextNextOrPreviousStyle;
-                            return ((0, jsx_runtime_1.jsx)(TextContent_1.TextContent, { content: item.content, className: (0, classnames_1.default)(styled_module_scss_1.default.textBlock, currentTextStyle) }, index));
+                            return ((0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyS, { className: (0, classnames_1.default)(styled_module_scss_1.default.textBlock, currentTextStyle, contentClassName), children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { text: String(item.content) }) }, index));
                         }) })] }), (0, jsx_runtime_1.jsx)(AlertButton_1.AlertButton, { onClick: onActionClick, text: actionLabel, layoutType: layoutType })] }));
 }

package/dist/cjs/components/ChatStatusAnnouncement/types.d.ts

@@ -1,12 +1,13 @@
-import { ReactElement, ReactNode } from 'react';
+import { ReactElement } from 'react';
 import { LayoutType } from '@cloud-ru/uikit-product-utils';
 export type TextItem = {
-    content: ReactNode;
+    content: string;
     shouldFocusOnHover?: boolean;
 };
 export type ChatStatusAnnouncementProps = {
     icon?: ReactElement;
-    content: ReactNode | TextItem[];
+    content: string | TextItem[];
+    contentClassName?: string;
     actionLabel: string;
     onActionClick?: () => void;
     layoutType: LayoutType;

package/dist/cjs/components/RecommendPannel/RecommendPanel.d.ts

@@ -8,7 +8,8 @@ export type RecommendPanelProps = {
     layoutType?: LayoutType;
     onCloseClick?: () => void;
     onCloseChipLabel?: ReactNode;
-    tooltip?: ReactNode;
-    onClaudiaClick?: () => void;
+    onAiAssistantClick?: () => void;
+    docsUrl?: string;
+    dataTestId?: string;
 };
-export declare function RecommendPanel({ chips, type, size, layoutType, onCloseClick, onCloseChipLabel, tooltip, onClaudiaClick, }: RecommendPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function RecommendPanel({ chips, type, size, layoutType, onCloseClick, onCloseChipLabel, onAiAssistantClick, docsUrl, dataTestId, }: RecommendPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/RecommendPannel/RecommendPanel.js

@@ -7,14 +7,15 @@ exports.RecommendPanel = RecommendPanel;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const uikit_product_utils_1 = require("@cloud-ru/uikit-product-utils");
+const AiAssistantChip_1 = require("./helperComponents/AiAssistantChip");
 const Chip_1 = require("./helperComponents/Chip");
-const ClaudiaChip_1 = require("./helperComponents/ClaudiaChip");
 const CloseChip_1 = require("./helperComponents/CloseChip");
 const DropdownChip_1 = require("./helperComponents/DropdownChip");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const types_1 = require("./types");
 const gitVisibleChipsCount_1 = require("./utils/gitVisibleChipsCount");
-function RecommendPanel({ chips, type = types_1.CHIP_TYPE.Default, size = types_1.SIZE.S, layoutType, onCloseClick, onCloseChipLabel, tooltip, onClaudiaClick, }) {
+const AI_ASSISTANT_DOCUMENTATION_URL = 'https://cloud.ru/docs/ai_assistant_cloudia/ug/index';
+function RecommendPanel({ chips, type = types_1.CHIP_TYPE.Default, size = types_1.SIZE.S, layoutType, onCloseClick, onCloseChipLabel, onAiAssistantClick, docsUrl = AI_ASSISTANT_DOCUMENTATION_URL, dataTestId = 'recommend-panel', }) {
     const [containerWidth, setContainerWidth] = (0, react_1.useState)(0);
     const [isCloseIconVisible, setCloseIconVisible] = (0, react_1.useState)(false);
     const [chipWidths, setChipWidths] = (0, react_1.useState)([]);
@@ -70,5 +71,5 @@ function RecommendPanel({ chips, type = types_1.CHIP_TYPE.Default, size = types_
             return;
         setCloseIconVisible(false);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.container, ref: containerRef, onMouseEnter: showCloseIcon, onMouseLeave: hideCloseIcon, children: [(0, jsx_runtime_1.jsx)(ClaudiaChip_1.ClaudiaChip, { layoutType: layoutType, onClick: onClaudiaClick, size: size, tooltip: tooltip }), visibleChips.map((chip, index) => ((0, jsx_runtime_1.jsx)(Chip_1.Chip, { ref: chipElement => (allChipsRefs.current[index] = chipElement), label: chip.label, size: size, type: type, layoutType: layoutType, onClick: chip.onClick }, chip.id))), hasHiddenChips && ((0, jsx_runtime_1.jsx)(DropdownChip_1.DropdownChip, { layoutType: layoutType, type: type, size: size, label: `+${hiddenChips.length}`, dropdownItems: hiddenChips })), onCloseClick && onCloseChipLabel && ((0, jsx_runtime_1.jsx)(CloseChip_1.CloseChip, { size: size, layoutType: layoutType, content: onCloseChipLabel, onClick: onCloseClick, isVisible: isCloseIconVisible }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.container, ref: containerRef, onMouseEnter: showCloseIcon, onMouseLeave: hideCloseIcon, "data-test-id": dataTestId, children: [(0, jsx_runtime_1.jsx)(AiAssistantChip_1.AiAssistantChip, { layoutType: layoutType, onClick: onAiAssistantClick, size: size, "data-test-id": `${dataTestId}__ai-assistant-chip`, docsUrl: docsUrl }), visibleChips.map((chip, index) => ((0, jsx_runtime_1.jsx)(Chip_1.Chip, { ref: chipElement => (allChipsRefs.current[index] = chipElement), label: chip.label, size: size, type: type, layoutType: layoutType, onClick: chip.onClick, "data-test-id": `${dataTestId}__chip-${chip.id}` }, chip.id))), hasHiddenChips && ((0, jsx_runtime_1.jsx)(DropdownChip_1.DropdownChip, { layoutType: layoutType, type: type, size: size, label: `+${hiddenChips.length}`, dropdownItems: hiddenChips, "data-test-id": `${dataTestId}__dropdown-chip` })), onCloseClick && onCloseChipLabel && ((0, jsx_runtime_1.jsx)(CloseChip_1.CloseChip, { size: size, layoutType: layoutType, content: onCloseChipLabel, onClick: onCloseClick, isVisible: isCloseIconVisible, "data-test-id": `${dataTestId}__close-chip` }))] }));
 }

package/dist/cjs/components/RecommendPannel/helperComponents/AiAssistantChip/AiAssistantChip.d.ts

@@ -0,0 +1,12 @@
+import { MouseEventHandler } from 'react';
+import { LayoutType } from '@cloud-ru/uikit-product-utils';
+import { Size } from '../../types';
+type AiAssistantChipProps = {
+    onClick?: MouseEventHandler<HTMLElement>;
+    size: Size;
+    layoutType?: LayoutType;
+    docsUrl?: string;
+    dataTestId?: string;
+};
+export declare const AiAssistantChip: import("react").ForwardRefExoticComponent<AiAssistantChipProps & import("react").RefAttributes<HTMLElement | HTMLButtonElement>>;
+export {};

package/dist/cjs/components/RecommendPannel/helperComponents/AiAssistantChip/AiAssistantChip.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AiAssistantChip = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uikit_product_locale_1 = require("@cloud-ru/uikit-product-locale");
+const uikit_product_utils_1 = require("@cloud-ru/uikit-product-utils");
+const link_1 = require("@snack-uikit/link");
+const tooltip_1 = require("@snack-uikit/tooltip");
+const typography_1 = require("@snack-uikit/typography");
+const ButtonGiga_1 = require("../../../ButtonGiga");
+const IconGiga_1 = require("../../../IconGiga");
+const types_1 = require("../../types");
+exports.AiAssistantChip = (0, react_1.forwardRef)(({ onClick, size, layoutType, docsUrl, dataTestId }, ref) => {
+    const isMobile = layoutType === uikit_product_utils_1.LAYOUT_TYPE.Mobile || size === types_1.SIZE.M;
+    const totalSize = isMobile ? types_1.SIZE.M : size;
+    const { t } = (0, uikit_product_locale_1.useLocale)('Claudia');
+    const tooltipContent = ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(typography_1.Typography.SansLabelM, { tag: 'p', "data-test-id": `${dataTestId}__tooltip-title`, children: t('AiAssistantChip.tooltipTitle') }), (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyS, { tag: 'p', "data-test-id": `${dataTestId}__tooltip-description`, children: t('AiAssistantChip.tooltipDescription') }), (0, jsx_runtime_1.jsx)(link_1.Link, { text: t('AiAssistantChip.documentationLink'), appearance: 'invert-neutral', textMode: 'accent', target: '_blank', href: docsUrl, "data-test-id": `${dataTestId}__documentation-link` })] }));
+    return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { triggerRef: ref, tip: tooltipContent, placement: 'top', "data-test-id": dataTestId, children: (0, jsx_runtime_1.jsx)(ButtonGiga_1.ButtonGigaOutline, { size: totalSize, "data-mobile": isMobile, onClick: onClick, icon: (0, jsx_runtime_1.jsx)(IconGiga_1.IconGiga, { size: 24 }) }) }));
+});

package/dist/cjs/components/RecommendPannel/helperComponents/AiAssistantChip/index.d.ts

@@ -0,0 +1 @@
+export * from './AiAssistantChip';

package/dist/cjs/components/RecommendPannel/helperComponents/{ClaudiaChip → AiAssistantChip}/index.js

@@ -14,4 +14,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./ClaudiaChip"), exports);
+__exportStar(require("./AiAssistantChip"), exports);

package/dist/cjs/components/SshField/SshField.d.ts

@@ -3,10 +3,14 @@ import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
 export type SshFieldProps = WithLayoutType<Omit<FieldTextAreaProps, 'placeholder' | 'labelTooltip' | 'label' | 'required' | 'size' | 'spellCheck' | 'footer'> & {
     /** Колбек действия при отправке */
     onSubmit(value: string): void;
+    /** Колбек отмены действия */
+    onCancel(): void;
 }>;
-export declare const SshField: import("react").ForwardRefExoticComponent<Omit<FieldTextAreaProps, "label" | "size" | "placeholder" | "spellCheck" | "required" | "labelTooltip" | "footer"> & {
+export declare const SshField: import("react").ForwardRefExoticComponent<Omit<FieldTextAreaProps, "label" | "size" | "placeholder" | "footer" | "spellCheck" | "required" | "labelTooltip"> & {
     /** Колбек действия при отправке */
     onSubmit(value: string): void;
+    /** Колбек отмены действия */
+    onCancel(): void;
 } & {
     layoutType: import("@cloud-ru/uikit-product-utils").LayoutType;
 } & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/cjs/components/SshField/SshField.js

@@ -45,7 +45,7 @@ const isTouchDevice_1 = require("./utils/isTouchDevice");
 const readFileContent_1 = require("./utils/readFileContent");
 const validateSSHKey_1 = require("./utils/validateSSHKey");
 exports.SshField = (0, react_1.forwardRef)((_a, ref) => {
-    var { onSubmit: handleSubmitProp, value, disabled, className } = _a, props = __rest(_a, ["onSubmit", "value", "disabled", "className"]);
+    var { onSubmit: handleSubmitProp, onCancel, value, disabled, className } = _a, props = __rest(_a, ["onSubmit", "onCancel", "value", "disabled", "className"]);
     const { layoutType, validationState, onChange } = props;
     const { t } = (0, uikit_product_locale_1.useLocale)('Claudia');
     const isTouchDevice = (0, isTouchDevice_1.isTouchDevice)(layoutType);
@@ -133,5 +133,5 @@ exports.SshField = (0, react_1.forwardRef)((_a, ref) => {
     if (isTouchDevice) {
         return ((0, jsx_runtime_1.jsx)(MobileFieldAi_1.MobileFieldAi, Object.assign({}, props, (0, uikit_product_mobile_fields_1.getAdaptiveFieldProps)(props), { onSubmit: handleSubmit, submitEnabled: isValueValid && !disabled, ref: ref, value: value })));
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className), onDragOver: handleDragOver, onDragLeave: handleDragLeave, children: [(0, jsx_runtime_1.jsx)(ChatStatusAnnouncement_1.ChatStatusAnnouncement, { className: styles_module_scss_1.default.chatStatus, layoutType: layoutType, icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.PasswordLockSVG, { size: 16, color: figma_tokens_1.themeVars.sys.neutral.textSupport }), content: t('SshField.chatStatusAnnouncement.content'), actionLabel: t('SshField.chatStatusAnnouncement.cancel'), onActionClick: () => { } }), isDragOver ? ((0, jsx_runtime_1.jsx)(drop_zone_1.DropZone, { description: (0, jsx_runtime_1.jsx)(DropZoneContent_1.DropZoneContent, {}), className: styles_module_scss_1.default.dropZone, mode: 'single', onFilesUpload: (files) => onFileUpload(files[0]) })) : ((0, jsx_runtime_1.jsx)(uikit_product_mobile_fields_1.AdaptiveFieldTextArea, Object.assign({}, props, { ref: ref, value: value, onChange: handleChange, size: 'm', disabled: isLoading, minRows: 2, maxRows: 4, placeholder: t('SshField.placeholder'), className: isValueHidden ? styles_module_scss_1.default.secured : undefined, onKeyDown: handleKeyDown, validationState: showFileError ? 'error' : validationState, hint: showFileError && fileErrorType ? getErrorMessage(fileErrorType) : props.hint, footer: (0, jsx_runtime_1.jsx)(TextAreaActionsFooter_1.TextAreaActionsFooter, { left: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, { size: 'xs', icon: isValueHidden ? (0, jsx_runtime_1.jsx)(uikit_product_icons_1.EyeSVG, {}) : (0, jsx_runtime_1.jsx)(uikit_product_icons_1.EyeClosedSVG, {}), onClick: () => setIsValueHidden(prev => !prev), disabled: isLoading }), right: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { tip: t('SshField.attachFileTooltip'), hoverDelayOpen: 600, triggerClassName: styles_module_scss_1.default.uploadTooltip, open: isTouchDevice ? false : undefined, children: (0, jsx_runtime_1.jsx)(drop_zone_1.FileUpload, { mode: 'single', onFilesUpload: (files) => onFileUpload(files[0]), children: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, { disabled: isLoading, size: isTouchDevice ? 's' : 'xs', icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.AttachmentSVG, {}) }) }) }), (0, jsx_runtime_1.jsx)(FieldSubmitButton_1.FieldSubmitButton, { disabled: isLoading, showTooltip: !isTouchDevice, className: isTouchDevice ? styles_module_scss_1.default.mobileSubmitButton : undefined, active: isValueValid && !disabled, handleClick: handleSubmit, size: isTouchDevice ? 's' : 'xs' })] }) }) })))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className), onDragOver: handleDragOver, onDragLeave: handleDragLeave, children: [(0, jsx_runtime_1.jsx)(ChatStatusAnnouncement_1.ChatStatusAnnouncement, { className: styles_module_scss_1.default.chatStatus, layoutType: layoutType, icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.PasswordLockSVG, { size: 16, color: figma_tokens_1.themeVars.sys.neutral.textSupport }), content: t('SshField.chatStatusAnnouncement.content'), actionLabel: t('SshField.chatStatusAnnouncement.cancel'), onActionClick: onCancel }), isDragOver ? ((0, jsx_runtime_1.jsx)(drop_zone_1.DropZone, { description: (0, jsx_runtime_1.jsx)(DropZoneContent_1.DropZoneContent, {}), className: styles_module_scss_1.default.dropZone, mode: 'single', onFilesUpload: (files) => onFileUpload(files[0]) })) : ((0, jsx_runtime_1.jsx)(uikit_product_mobile_fields_1.AdaptiveFieldTextArea, Object.assign({}, props, { ref: ref, value: value, onChange: handleChange, size: 'm', disabled: isLoading, minRows: 2, maxRows: 4, placeholder: t('SshField.placeholder'), className: isValueHidden ? styles_module_scss_1.default.secured : undefined, onKeyDown: handleKeyDown, validationState: showFileError ? 'error' : validationState, hint: showFileError && fileErrorType ? getErrorMessage(fileErrorType) : props.hint, footer: (0, jsx_runtime_1.jsx)(TextAreaActionsFooter_1.TextAreaActionsFooter, { left: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, { size: 'xs', icon: isValueHidden ? (0, jsx_runtime_1.jsx)(uikit_product_icons_1.EyeSVG, {}) : (0, jsx_runtime_1.jsx)(uikit_product_icons_1.EyeClosedSVG, {}), onClick: () => setIsValueHidden(prev => !prev), disabled: isLoading }), right: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { tip: t('SshField.attachFileTooltip'), hoverDelayOpen: 600, triggerClassName: styles_module_scss_1.default.uploadTooltip, open: isTouchDevice ? false : undefined, children: (0, jsx_runtime_1.jsx)(drop_zone_1.FileUpload, { mode: 'single', onFilesUpload: (files) => onFileUpload(files[0]), children: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, { disabled: isLoading, size: isTouchDevice ? 's' : 'xs', icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.AttachmentSVG, {}) }) }) }), (0, jsx_runtime_1.jsx)(FieldSubmitButton_1.FieldSubmitButton, { disabled: isLoading, showTooltip: !isTouchDevice, className: isTouchDevice ? styles_module_scss_1.default.mobileSubmitButton : undefined, active: isValueValid && !disabled, handleClick: handleSubmit, size: isTouchDevice ? 's' : 'xs' })] }) }) })))] }));
 });

package/dist/cjs/components/SshField/components/MobileFieldAi/MobileFieldAi.d.ts

@@ -1,5 +1,5 @@
 import { FieldTextAreaProps } from '@cloud-ru/uikit-product-mobile-fields';
-export declare const MobileFieldAi: import("react").ForwardRefExoticComponent<Omit<FieldTextAreaProps, "label" | "size" | "placeholder" | "spellCheck" | "required" | "labelTooltip" | "footer"> & {
+export declare const MobileFieldAi: import("react").ForwardRefExoticComponent<Omit<FieldTextAreaProps, "label" | "size" | "placeholder" | "footer" | "spellCheck" | "required" | "labelTooltip"> & {
     onSubmit(): void;
     submitEnabled: boolean;
 } & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/esm/components/ChatStatusAnnouncement/ChatStatusAnnouncement.d.ts

@@ -1,2 +1,2 @@
 import { ChatStatusAnnouncementProps } from './types';
-export declare function ChatStatusAnnouncement({ content, onActionClick, actionLabel, icon, layoutType, className, }: ChatStatusAnnouncementProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatStatusAnnouncement({ content, contentClassName, onActionClick, actionLabel, icon, layoutType, className, }: ChatStatusAnnouncementProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/ChatStatusAnnouncement/ChatStatusAnnouncement.js

@@ -3,12 +3,13 @@ import cn from 'classnames';
 import { useEffect, useRef, useState } from 'react';
 import { PlaceholderSVG } from '@cloud-ru/uikit-product-icons';
 import { LAYOUT_TYPE } from '@cloud-ru/uikit-product-utils';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { Typography } from '@snack-uikit/typography';
 import { ANIMATION_INTERVAL } from './constants';
 import { AlertButton } from './helperComponents/AlertButton';
-import { TextContent } from './helperComponents/TextContent';
 import styles from './styled.module.css';
 import { getContent, isReactNode } from './utils';
-export function ChatStatusAnnouncement({ content, onActionClick, actionLabel, icon, layoutType, className, }) {
+export function ChatStatusAnnouncement({ content, contentClassName, onActionClick, actionLabel, icon, layoutType, className, }) {
     const [currentIndex, setCurrentIndex] = useState(0);
     const [isAnimationEnded, setAnimationEnded] = useState(false);
     const [mouseEntered, setMouseEntered] = useState(false);
@@ -63,6 +64,6 @@ export function ChatStatusAnnouncement({ content, onActionClick, actionLabel, ic
                                 ? styles.textBlockPrevious
                                 : styles.textBlockNext;
                             const currentTextStyle = index === currentIndex ? styles.textBlockCurrent : currentTextNextOrPreviousStyle;
-                            return (_jsx(TextContent, { content: item.content, className: cn(styles.textBlock, currentTextStyle) }, index));
+                            return (_jsx(Typography.SansBodyS, { className: cn(styles.textBlock, currentTextStyle, contentClassName), children: _jsx(TruncateString, { text: String(item.content) }) }, index));
                         }) })] }), _jsx(AlertButton, { onClick: onActionClick, text: actionLabel, layoutType: layoutType })] }));
 }

package/dist/esm/components/ChatStatusAnnouncement/types.d.ts

@@ -1,12 +1,13 @@
-import { ReactElement, ReactNode } from 'react';
+import { ReactElement } from 'react';
 import { LayoutType } from '@cloud-ru/uikit-product-utils';
 export type TextItem = {
-    content: ReactNode;
+    content: string;
     shouldFocusOnHover?: boolean;
 };
 export type ChatStatusAnnouncementProps = {
     icon?: ReactElement;
-    content: ReactNode | TextItem[];
+    content: string | TextItem[];
+    contentClassName?: string;
     actionLabel: string;
     onActionClick?: () => void;
     layoutType: LayoutType;

package/dist/esm/components/RecommendPannel/RecommendPanel.d.ts

@@ -8,7 +8,8 @@ export type RecommendPanelProps = {
     layoutType?: LayoutType;
     onCloseClick?: () => void;
     onCloseChipLabel?: ReactNode;
-    tooltip?: ReactNode;
-    onClaudiaClick?: () => void;
+    onAiAssistantClick?: () => void;
+    docsUrl?: string;
+    dataTestId?: string;
 };
-export declare function RecommendPanel({ chips, type, size, layoutType, onCloseClick, onCloseChipLabel, tooltip, onClaudiaClick, }: RecommendPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function RecommendPanel({ chips, type, size, layoutType, onCloseClick, onCloseChipLabel, onAiAssistantClick, docsUrl, dataTestId, }: RecommendPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/RecommendPannel/RecommendPanel.js

@@ -1,14 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { LAYOUT_TYPE } from '@cloud-ru/uikit-product-utils';
+import { AiAssistantChip } from './helperComponents/AiAssistantChip';
 import { Chip } from './helperComponents/Chip';
-import { ClaudiaChip } from './helperComponents/ClaudiaChip';
 import { CloseChip } from './helperComponents/CloseChip';
 import { DropdownChip } from './helperComponents/DropdownChip';
 import styles from './styles.module.css';
 import { CHIP_TYPE, SIZE } from './types';
 import { getVisibleChipsCount } from './utils/gitVisibleChipsCount';
-export function RecommendPanel({ chips, type = CHIP_TYPE.Default, size = SIZE.S, layoutType, onCloseClick, onCloseChipLabel, tooltip, onClaudiaClick, }) {
+const AI_ASSISTANT_DOCUMENTATION_URL = 'https://cloud.ru/docs/ai_assistant_cloudia/ug/index';
+export function RecommendPanel({ chips, type = CHIP_TYPE.Default, size = SIZE.S, layoutType, onCloseClick, onCloseChipLabel, onAiAssistantClick, docsUrl = AI_ASSISTANT_DOCUMENTATION_URL, dataTestId = 'recommend-panel', }) {
     const [containerWidth, setContainerWidth] = useState(0);
     const [isCloseIconVisible, setCloseIconVisible] = useState(false);
     const [chipWidths, setChipWidths] = useState([]);
@@ -64,5 +65,5 @@ export function RecommendPanel({ chips, type = CHIP_TYPE.Default, size = SIZE.S,
             return;
         setCloseIconVisible(false);
     };
-    return (_jsxs("div", { className: styles.container, ref: containerRef, onMouseEnter: showCloseIcon, onMouseLeave: hideCloseIcon, children: [_jsx(ClaudiaChip, { layoutType: layoutType, onClick: onClaudiaClick, size: size, tooltip: tooltip }), visibleChips.map((chip, index) => (_jsx(Chip, { ref: chipElement => (allChipsRefs.current[index] = chipElement), label: chip.label, size: size, type: type, layoutType: layoutType, onClick: chip.onClick }, chip.id))), hasHiddenChips && (_jsx(DropdownChip, { layoutType: layoutType, type: type, size: size, label: `+${hiddenChips.length}`, dropdownItems: hiddenChips })), onCloseClick && onCloseChipLabel && (_jsx(CloseChip, { size: size, layoutType: layoutType, content: onCloseChipLabel, onClick: onCloseClick, isVisible: isCloseIconVisible }))] }));
+    return (_jsxs("div", { className: styles.container, ref: containerRef, onMouseEnter: showCloseIcon, onMouseLeave: hideCloseIcon, "data-test-id": dataTestId, children: [_jsx(AiAssistantChip, { layoutType: layoutType, onClick: onAiAssistantClick, size: size, "data-test-id": `${dataTestId}__ai-assistant-chip`, docsUrl: docsUrl }), visibleChips.map((chip, index) => (_jsx(Chip, { ref: chipElement => (allChipsRefs.current[index] = chipElement), label: chip.label, size: size, type: type, layoutType: layoutType, onClick: chip.onClick, "data-test-id": `${dataTestId}__chip-${chip.id}` }, chip.id))), hasHiddenChips && (_jsx(DropdownChip, { layoutType: layoutType, type: type, size: size, label: `+${hiddenChips.length}`, dropdownItems: hiddenChips, "data-test-id": `${dataTestId}__dropdown-chip` })), onCloseClick && onCloseChipLabel && (_jsx(CloseChip, { size: size, layoutType: layoutType, content: onCloseChipLabel, onClick: onCloseClick, isVisible: isCloseIconVisible, "data-test-id": `${dataTestId}__close-chip` }))] }));
 }

package/dist/esm/components/RecommendPannel/helperComponents/AiAssistantChip/AiAssistantChip.d.ts

@@ -0,0 +1,12 @@
+import { MouseEventHandler } from 'react';
+import { LayoutType } from '@cloud-ru/uikit-product-utils';
+import { Size } from '../../types';
+type AiAssistantChipProps = {
+    onClick?: MouseEventHandler<HTMLElement>;
+    size: Size;
+    layoutType?: LayoutType;
+    docsUrl?: string;
+    dataTestId?: string;
+};
+export declare const AiAssistantChip: import("react").ForwardRefExoticComponent<AiAssistantChipProps & import("react").RefAttributes<HTMLElement | HTMLButtonElement>>;
+export {};

package/dist/esm/components/RecommendPannel/helperComponents/AiAssistantChip/AiAssistantChip.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { LAYOUT_TYPE } from '@cloud-ru/uikit-product-utils';
+import { Link } from '@snack-uikit/link';
+import { Tooltip } from '@snack-uikit/tooltip';
+import { Typography } from '@snack-uikit/typography';
+import { ButtonGigaOutline } from '../../../ButtonGiga';
+import { IconGiga } from '../../../IconGiga';
+import { SIZE } from '../../types';
+export const AiAssistantChip = forwardRef(({ onClick, size, layoutType, docsUrl, dataTestId }, ref) => {
+    const isMobile = layoutType === LAYOUT_TYPE.Mobile || size === SIZE.M;
+    const totalSize = isMobile ? SIZE.M : size;
+    const { t } = useLocale('Claudia');
+    const tooltipContent = (_jsxs("div", { children: [_jsx(Typography.SansLabelM, { tag: 'p', "data-test-id": `${dataTestId}__tooltip-title`, children: t('AiAssistantChip.tooltipTitle') }), _jsx(Typography.SansBodyS, { tag: 'p', "data-test-id": `${dataTestId}__tooltip-description`, children: t('AiAssistantChip.tooltipDescription') }), _jsx(Link, { text: t('AiAssistantChip.documentationLink'), appearance: 'invert-neutral', textMode: 'accent', target: '_blank', href: docsUrl, "data-test-id": `${dataTestId}__documentation-link` })] }));
+    return (_jsx(Tooltip, { triggerRef: ref, tip: tooltipContent, placement: 'top', "data-test-id": dataTestId, children: _jsx(ButtonGigaOutline, { size: totalSize, "data-mobile": isMobile, onClick: onClick, icon: _jsx(IconGiga, { size: 24 }) }) }));
+});

package/dist/esm/components/RecommendPannel/helperComponents/AiAssistantChip/index.d.ts

@@ -0,0 +1 @@
+export * from './AiAssistantChip';

package/dist/esm/components/RecommendPannel/helperComponents/AiAssistantChip/index.js

@@ -0,0 +1 @@
+export * from './AiAssistantChip';

package/dist/esm/components/SshField/SshField.d.ts

@@ -3,10 +3,14 @@ import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
 export type SshFieldProps = WithLayoutType<Omit<FieldTextAreaProps, 'placeholder' | 'labelTooltip' | 'label' | 'required' | 'size' | 'spellCheck' | 'footer'> & {
     /** Колбек действия при отправке */
     onSubmit(value: string): void;
+    /** Колбек отмены действия */
+    onCancel(): void;
 }>;
-export declare const SshField: import("react").ForwardRefExoticComponent<Omit<FieldTextAreaProps, "label" | "size" | "placeholder" | "spellCheck" | "required" | "labelTooltip" | "footer"> & {
+export declare const SshField: import("react").ForwardRefExoticComponent<Omit<FieldTextAreaProps, "label" | "size" | "placeholder" | "footer" | "spellCheck" | "required" | "labelTooltip"> & {
     /** Колбек действия при отправке */
     onSubmit(value: string): void;
+    /** Колбек отмены действия */
+    onCancel(): void;
 } & {
     layoutType: import("@cloud-ru/uikit-product-utils").LayoutType;
 } & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/esm/components/SshField/SshField.js

@@ -39,7 +39,7 @@ import { isTouchDevice as isTouchDeviceHelper } from './utils/isTouchDevice';
 import { readFileContent } from './utils/readFileContent';
 import { validateFileSize, validateFileType, validateSSHKeyContent } from './utils/validateSSHKey';
 export const SshField = forwardRef((_a, ref) => {
-    var { onSubmit: handleSubmitProp, value, disabled, className } = _a, props = __rest(_a, ["onSubmit", "value", "disabled", "className"]);
+    var { onSubmit: handleSubmitProp, onCancel, value, disabled, className } = _a, props = __rest(_a, ["onSubmit", "onCancel", "value", "disabled", "className"]);
     const { layoutType, validationState, onChange } = props;
     const { t } = useLocale('Claudia');
     const isTouchDevice = isTouchDeviceHelper(layoutType);
@@ -127,5 +127,5 @@ export const SshField = forwardRef((_a, ref) => {
     if (isTouchDevice) {
         return (_jsx(MobileFieldAi, Object.assign({}, props, getAdaptiveFieldProps(props), { onSubmit: handleSubmit, submitEnabled: isValueValid && !disabled, ref: ref, value: value })));
     }
-    return (_jsxs("div", { className: cn(styles.wrapper, className), onDragOver: handleDragOver, onDragLeave: handleDragLeave, children: [_jsx(ChatStatusAnnouncement, { className: styles.chatStatus, layoutType: layoutType, icon: _jsx(PasswordLockSVG, { size: 16, color: themeVars.sys.neutral.textSupport }), content: t('SshField.chatStatusAnnouncement.content'), actionLabel: t('SshField.chatStatusAnnouncement.cancel'), onActionClick: () => { } }), isDragOver ? (_jsx(DropZone, { description: _jsx(DropZoneContent, {}), className: styles.dropZone, mode: 'single', onFilesUpload: (files) => onFileUpload(files[0]) })) : (_jsx(AdaptiveFieldTextArea, Object.assign({}, props, { ref: ref, value: value, onChange: handleChange, size: 'm', disabled: isLoading, minRows: 2, maxRows: 4, placeholder: t('SshField.placeholder'), className: isValueHidden ? styles.secured : undefined, onKeyDown: handleKeyDown, validationState: showFileError ? 'error' : validationState, hint: showFileError && fileErrorType ? getErrorMessage(fileErrorType) : props.hint, footer: _jsx(TextAreaActionsFooter, { left: _jsx(ButtonFunction, { size: 'xs', icon: isValueHidden ? _jsx(EyeSVG, {}) : _jsx(EyeClosedSVG, {}), onClick: () => setIsValueHidden(prev => !prev), disabled: isLoading }), right: _jsxs(_Fragment, { children: [_jsx(Tooltip, { tip: t('SshField.attachFileTooltip'), hoverDelayOpen: 600, triggerClassName: styles.uploadTooltip, open: isTouchDevice ? false : undefined, children: _jsx(FileUpload, { mode: 'single', onFilesUpload: (files) => onFileUpload(files[0]), children: _jsx(ButtonFunction, { disabled: isLoading, size: isTouchDevice ? 's' : 'xs', icon: _jsx(AttachmentSVG, {}) }) }) }), _jsx(FieldSubmitButton, { disabled: isLoading, showTooltip: !isTouchDevice, className: isTouchDevice ? styles.mobileSubmitButton : undefined, active: isValueValid && !disabled, handleClick: handleSubmit, size: isTouchDevice ? 's' : 'xs' })] }) }) })))] }));
+    return (_jsxs("div", { className: cn(styles.wrapper, className), onDragOver: handleDragOver, onDragLeave: handleDragLeave, children: [_jsx(ChatStatusAnnouncement, { className: styles.chatStatus, layoutType: layoutType, icon: _jsx(PasswordLockSVG, { size: 16, color: themeVars.sys.neutral.textSupport }), content: t('SshField.chatStatusAnnouncement.content'), actionLabel: t('SshField.chatStatusAnnouncement.cancel'), onActionClick: onCancel }), isDragOver ? (_jsx(DropZone, { description: _jsx(DropZoneContent, {}), className: styles.dropZone, mode: 'single', onFilesUpload: (files) => onFileUpload(files[0]) })) : (_jsx(AdaptiveFieldTextArea, Object.assign({}, props, { ref: ref, value: value, onChange: handleChange, size: 'm', disabled: isLoading, minRows: 2, maxRows: 4, placeholder: t('SshField.placeholder'), className: isValueHidden ? styles.secured : undefined, onKeyDown: handleKeyDown, validationState: showFileError ? 'error' : validationState, hint: showFileError && fileErrorType ? getErrorMessage(fileErrorType) : props.hint, footer: _jsx(TextAreaActionsFooter, { left: _jsx(ButtonFunction, { size: 'xs', icon: isValueHidden ? _jsx(EyeSVG, {}) : _jsx(EyeClosedSVG, {}), onClick: () => setIsValueHidden(prev => !prev), disabled: isLoading }), right: _jsxs(_Fragment, { children: [_jsx(Tooltip, { tip: t('SshField.attachFileTooltip'), hoverDelayOpen: 600, triggerClassName: styles.uploadTooltip, open: isTouchDevice ? false : undefined, children: _jsx(FileUpload, { mode: 'single', onFilesUpload: (files) => onFileUpload(files[0]), children: _jsx(ButtonFunction, { disabled: isLoading, size: isTouchDevice ? 's' : 'xs', icon: _jsx(AttachmentSVG, {}) }) }) }), _jsx(FieldSubmitButton, { disabled: isLoading, showTooltip: !isTouchDevice, className: isTouchDevice ? styles.mobileSubmitButton : undefined, active: isValueValid && !disabled, handleClick: handleSubmit, size: isTouchDevice ? 's' : 'xs' })] }) }) })))] }));
 });

package/dist/esm/components/SshField/components/MobileFieldAi/MobileFieldAi.d.ts

@@ -1,5 +1,5 @@
 import { FieldTextAreaProps } from '@cloud-ru/uikit-product-mobile-fields';
-export declare const MobileFieldAi: import("react").ForwardRefExoticComponent<Omit<FieldTextAreaProps, "label" | "size" | "placeholder" | "spellCheck" | "required" | "labelTooltip" | "footer"> & {
+export declare const MobileFieldAi: import("react").ForwardRefExoticComponent<Omit<FieldTextAreaProps, "label" | "size" | "placeholder" | "footer" | "spellCheck" | "required" | "labelTooltip"> & {
     onSubmit(): void;
     submitEnabled: boolean;
 } & import("react").RefAttributes<HTMLTextAreaElement>>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-claudia",
   "title": "Claudia",
-  "version": "1.6.5",
+  "version": "1.8.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -44,6 +44,7 @@
     "@snack-uikit/drop-zone": "0.9.6",
     "@snack-uikit/dropdown": "0.5.3",
     "@snack-uikit/input-private": "4.8.3",
+    "@snack-uikit/link": "0.17.12",
     "@snack-uikit/loaders": "0.9.9",
     "@snack-uikit/scroll": "0.10.5",
     "@snack-uikit/tooltip": "0.18.5",
@@ -57,5 +58,5 @@
     "@cloud-ru/uikit-product-locale": "*",
     "@snack-uikit/figma-tokens": "*"
   },
-  "gitHead": "ce69097516055b330a0b05da5e29ac5b66e56284"
+  "gitHead": "25ab7c8f4ae0f0b91e114fcdaea4f0b8b4b4d53b"
 }

package/src/components/ChatStatusAnnouncement/ChatStatusAnnouncement.tsx

@@ -3,16 +3,18 @@ import { useEffect, useRef, useState } from 'react';
 
 import { PlaceholderSVG } from '@cloud-ru/uikit-product-icons';
 import { LAYOUT_TYPE } from '@cloud-ru/uikit-product-utils';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { Typography } from '@snack-uikit/typography';
 
 import { ANIMATION_INTERVAL } from './constants';
 import { AlertButton } from './helperComponents/AlertButton';
-import { TextContent } from './helperComponents/TextContent';
 import styles from './styled.module.scss';
 import { ChatStatusAnnouncementProps } from './types';
 import { getContent, isReactNode } from './utils';
 
 export function ChatStatusAnnouncement({
   content,
+  contentClassName,
   onActionClick,
   actionLabel,
   icon,
@@ -98,7 +100,9 @@ export function ChatStatusAnnouncement({
             const currentTextStyle = index === currentIndex ? styles.textBlockCurrent : currentTextNextOrPreviousStyle;
 
             return (
-              <TextContent key={index} content={item.content} className={cn(styles.textBlock, currentTextStyle)} />
+              <Typography.SansBodyS key={index} className={cn(styles.textBlock, currentTextStyle, contentClassName)}>
+                <TruncateString text={String(item.content)} />
+              </Typography.SansBodyS>
             );
           })}
         </div>

package/src/components/ChatStatusAnnouncement/types.ts

@@ -1,15 +1,16 @@
-import { ReactElement, ReactNode } from 'react';
+import { ReactElement } from 'react';
 
 import { LayoutType } from '@cloud-ru/uikit-product-utils';
 
 export type TextItem = {
-  content: ReactNode;
+  content: string;
   shouldFocusOnHover?: boolean;
 };
 
 export type ChatStatusAnnouncementProps = {
   icon?: ReactElement;
-  content: ReactNode | TextItem[];
+  content: string | TextItem[];
+  contentClassName?: string;
   actionLabel: string;
   onActionClick?: () => void;
   layoutType: LayoutType;

package/src/components/RecommendPannel/RecommendPanel.tsx

@@ -2,8 +2,8 @@ import { ReactNode, useEffect, useRef, useState } from 'react';
 
 import { LAYOUT_TYPE, LayoutType } from '@cloud-ru/uikit-product-utils';
 
+import { AiAssistantChip } from './helperComponents/AiAssistantChip';
 import { Chip } from './helperComponents/Chip';
-import { ClaudiaChip } from './helperComponents/ClaudiaChip';
 import { CloseChip } from './helperComponents/CloseChip';
 import { DropdownChip } from './helperComponents/DropdownChip';
 import styles from './styles.module.scss';
@@ -17,10 +17,13 @@ export type RecommendPanelProps = {
   layoutType?: LayoutType;
   onCloseClick?: () => void;
   onCloseChipLabel?: ReactNode;
-  tooltip?: ReactNode;
-  onClaudiaClick?: () => void;
+  onAiAssistantClick?: () => void;
+  docsUrl?: string;
+  dataTestId?: string;
 };
 
+const AI_ASSISTANT_DOCUMENTATION_URL = 'https://cloud.ru/docs/ai_assistant_cloudia/ug/index';
+
 export function RecommendPanel({
   chips,
   type = CHIP_TYPE.Default,
@@ -28,8 +31,9 @@ export function RecommendPanel({
   layoutType,
   onCloseClick,
   onCloseChipLabel,
-  tooltip,
-  onClaudiaClick,
+  onAiAssistantClick,
+  docsUrl = AI_ASSISTANT_DOCUMENTATION_URL,
+  dataTestId = 'recommend-panel',
 }: RecommendPanelProps) {
   const [containerWidth, setContainerWidth] = useState(0);
   const [isCloseIconVisible, setCloseIconVisible] = useState(false);
@@ -95,8 +99,20 @@ export function RecommendPanel({
   };
 
   return (
-    <div className={styles.container} ref={containerRef} onMouseEnter={showCloseIcon} onMouseLeave={hideCloseIcon}>
-      <ClaudiaChip layoutType={layoutType} onClick={onClaudiaClick} size={size} tooltip={tooltip} />
+    <div
+      className={styles.container}
+      ref={containerRef}
+      onMouseEnter={showCloseIcon}
+      onMouseLeave={hideCloseIcon}
+      data-test-id={dataTestId}
+    >
+      <AiAssistantChip
+        layoutType={layoutType}
+        onClick={onAiAssistantClick}
+        size={size}
+        data-test-id={`${dataTestId}__ai-assistant-chip`}
+        docsUrl={docsUrl}
+      />
       {visibleChips.map((chip, index) => (
         <Chip
           ref={chipElement => (allChipsRefs.current[index] = chipElement)}
@@ -106,6 +122,7 @@ export function RecommendPanel({
           type={type}
           layoutType={layoutType}
           onClick={chip.onClick}
+          data-test-id={`${dataTestId}__chip-${chip.id}`}
         />
       ))}
       {hasHiddenChips && (
@@ -115,6 +132,7 @@ export function RecommendPanel({
           size={size}
           label={`+${hiddenChips.length}`}
           dropdownItems={hiddenChips}
+          data-test-id={`${dataTestId}__dropdown-chip`}
         />
       )}
       {onCloseClick && onCloseChipLabel && (
@@ -124,6 +142,7 @@ export function RecommendPanel({
           content={onCloseChipLabel}
           onClick={onCloseClick}
           isVisible={isCloseIconVisible}
+          data-test-id={`${dataTestId}__close-chip`}
         />
       )}
     </div>

package/src/components/RecommendPannel/helperComponents/AiAssistantChip/AiAssistantChip.tsx

@@ -0,0 +1,58 @@
+import { forwardRef, MouseEventHandler, RefObject } from 'react';
+
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { LAYOUT_TYPE, LayoutType } from '@cloud-ru/uikit-product-utils';
+import { Link } from '@snack-uikit/link';
+import { Tooltip } from '@snack-uikit/tooltip';
+import { Typography } from '@snack-uikit/typography';
+
+import { ButtonGigaOutline } from '../../../ButtonGiga';
+import { IconGiga } from '../../../IconGiga';
+import { SIZE, Size } from '../../types';
+
+type AiAssistantChipProps = {
+  onClick?: MouseEventHandler<HTMLElement>;
+  size: Size;
+  layoutType?: LayoutType;
+  docsUrl?: string;
+  dataTestId?: string;
+};
+
+export const AiAssistantChip = forwardRef<HTMLElement | HTMLButtonElement, AiAssistantChipProps>(
+  ({ onClick, size, layoutType, docsUrl, dataTestId }, ref) => {
+    const isMobile = layoutType === LAYOUT_TYPE.Mobile || size === SIZE.M;
+    const totalSize = isMobile ? SIZE.M : size;
+
+    const { t } = useLocale('Claudia');
+
+    const tooltipContent = (
+      <div>
+        <Typography.SansLabelM tag='p' data-test-id={`${dataTestId}__tooltip-title`}>
+          {t('AiAssistantChip.tooltipTitle')}
+        </Typography.SansLabelM>
+        <Typography.SansBodyS tag='p' data-test-id={`${dataTestId}__tooltip-description`}>
+          {t('AiAssistantChip.tooltipDescription')}
+        </Typography.SansBodyS>
+        <Link
+          text={t('AiAssistantChip.documentationLink')}
+          appearance='invert-neutral'
+          textMode='accent'
+          target='_blank'
+          href={docsUrl}
+          data-test-id={`${dataTestId}__documentation-link`}
+        ></Link>
+      </div>
+    );
+
+    return (
+      <Tooltip
+        triggerRef={ref as RefObject<HTMLElement>}
+        tip={tooltipContent}
+        placement='top'
+        data-test-id={dataTestId}
+      >
+        <ButtonGigaOutline size={totalSize} data-mobile={isMobile} onClick={onClick} icon={<IconGiga size={24} />} />
+      </Tooltip>
+    );
+  },
+);

package/src/components/RecommendPannel/helperComponents/AiAssistantChip/index.ts

@@ -0,0 +1 @@
+export * from './AiAssistantChip';

package/src/components/SshField/SshField.tsx

@@ -29,11 +29,13 @@ export type SshFieldProps = WithLayoutType<
   Omit<FieldTextAreaProps, 'placeholder' | 'labelTooltip' | 'label' | 'required' | 'size' | 'spellCheck' | 'footer'> & {
     /** Колбек действия при отправке */
     onSubmit(value: string): void;
+    /** Колбек отмены действия */
+    onCancel(): void;
   }
 >;
 
 export const SshField = forwardRef<HTMLTextAreaElement, SshFieldProps>(
-  ({ onSubmit: handleSubmitProp, value, disabled, className, ...props }, ref) => {
+  ({ onSubmit: handleSubmitProp, onCancel, value, disabled, className, ...props }, ref) => {
     const { layoutType, validationState, onChange } = props;
     const { t } = useLocale('Claudia');
     const isTouchDevice = isTouchDeviceHelper(layoutType);
@@ -152,7 +154,7 @@ export const SshField = forwardRef<HTMLTextAreaElement, SshFieldProps>(
           icon={<PasswordLockSVG size={16} color={themeVars.sys.neutral.textSupport} />}
           content={t('SshField.chatStatusAnnouncement.content')}
           actionLabel={t('SshField.chatStatusAnnouncement.cancel')}
-          onActionClick={() => {}}
+          onActionClick={onCancel}
         />
         {isDragOver ? (
           <DropZone

package/dist/cjs/components/ChatStatusAnnouncement/helperComponents/TextContent/TextContent.d.ts

@@ -1,7 +0,0 @@
-import { ReactNode } from 'react';
-type TextContent = {
-    content: ReactNode;
-    className?: string;
-};
-export declare function TextContent({ content, className }: TextContent): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;
-export {};

package/dist/cjs/components/ChatStatusAnnouncement/helperComponents/TextContent/TextContent.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextContent = TextContent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const typography_1 = require("@snack-uikit/typography");
-const utils_1 = require("../../utils");
-function TextContent({ content, className }) {
-    if ((0, utils_1.isReactNode)(content)) {
-        return content;
-    }
-    return (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyS, { className: className, children: content });
-}

package/dist/cjs/components/ChatStatusAnnouncement/helperComponents/TextContent/index.d.ts

@@ -1 +0,0 @@
-export * from './TextContent';

package/dist/cjs/components/ChatStatusAnnouncement/helperComponents/TextContent/index.js

@@ -1,17 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./TextContent"), exports);

package/dist/cjs/components/RecommendPannel/helperComponents/ClaudiaChip/ClaudiaChip.d.ts

@@ -1,11 +0,0 @@
-import { MouseEventHandler, ReactNode } from 'react';
-import { LayoutType } from '@cloud-ru/uikit-product-utils';
-import { Size } from '../../types';
-type ClaudiaChipProps = {
-    onClick?: MouseEventHandler<HTMLElement>;
-    size: Size;
-    tooltip?: ReactNode;
-    layoutType?: LayoutType;
-};
-export declare const ClaudiaChip: import("react").ForwardRefExoticComponent<ClaudiaChipProps & import("react").RefAttributes<HTMLElement | HTMLButtonElement>>;
-export {};

package/dist/cjs/components/RecommendPannel/helperComponents/ClaudiaChip/ClaudiaChip.js

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ClaudiaChip = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const uikit_product_icons_1 = require("@cloud-ru/uikit-product-icons");
-const uikit_product_utils_1 = require("@cloud-ru/uikit-product-utils");
-const tooltip_1 = require("@snack-uikit/tooltip");
-const ButtonClaudia_1 = require("../../../ButtonClaudia");
-const types_1 = require("../../types");
-exports.ClaudiaChip = (0, react_1.forwardRef)(({ onClick, size, tooltip, layoutType }, ref) => {
-    const isMobile = layoutType === uikit_product_utils_1.LAYOUT_TYPE.Mobile || size === types_1.SIZE.M;
-    const totalSize = isMobile ? types_1.SIZE.M : size;
-    if (!tooltip) {
-        return ((0, jsx_runtime_1.jsx)(ButtonClaudia_1.ButtonClaudia, { size: totalSize, "data-mobile": isMobile, ref: ref, onClick: onClick, icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.AgentClaudiaSVG, { size: 24 }) }));
-    }
-    return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { triggerRef: ref, tip: tooltip, children: (0, jsx_runtime_1.jsx)(ButtonClaudia_1.ButtonClaudia, { size: totalSize, "data-mobile": isMobile, onClick: onClick, icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.AgentClaudiaSVG, { size: 24 }) }) }));
-});

package/dist/cjs/components/RecommendPannel/helperComponents/ClaudiaChip/index.d.ts

@@ -1 +0,0 @@
-export * from './ClaudiaChip';

package/dist/esm/components/ChatStatusAnnouncement/helperComponents/TextContent/TextContent.d.ts

@@ -1,7 +0,0 @@
-import { ReactNode } from 'react';
-type TextContent = {
-    content: ReactNode;
-    className?: string;
-};
-export declare function TextContent({ content, className }: TextContent): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;
-export {};

package/dist/esm/components/ChatStatusAnnouncement/helperComponents/TextContent/TextContent.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Typography } from '@snack-uikit/typography';
-import { isReactNode } from '../../utils';
-export function TextContent({ content, className }) {
-    if (isReactNode(content)) {
-        return content;
-    }
-    return _jsx(Typography.SansBodyS, { className: className, children: content });
-}

package/dist/esm/components/ChatStatusAnnouncement/helperComponents/TextContent/index.d.ts

@@ -1 +0,0 @@
-export * from './TextContent';

package/dist/esm/components/ChatStatusAnnouncement/helperComponents/TextContent/index.js

@@ -1 +0,0 @@
-export * from './TextContent';

package/dist/esm/components/RecommendPannel/helperComponents/ClaudiaChip/ClaudiaChip.d.ts

@@ -1,11 +0,0 @@
-import { MouseEventHandler, ReactNode } from 'react';
-import { LayoutType } from '@cloud-ru/uikit-product-utils';
-import { Size } from '../../types';
-type ClaudiaChipProps = {
-    onClick?: MouseEventHandler<HTMLElement>;
-    size: Size;
-    tooltip?: ReactNode;
-    layoutType?: LayoutType;
-};
-export declare const ClaudiaChip: import("react").ForwardRefExoticComponent<ClaudiaChipProps & import("react").RefAttributes<HTMLElement | HTMLButtonElement>>;
-export {};

package/dist/esm/components/RecommendPannel/helperComponents/ClaudiaChip/ClaudiaChip.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { AgentClaudiaSVG } from '@cloud-ru/uikit-product-icons';
-import { LAYOUT_TYPE } from '@cloud-ru/uikit-product-utils';
-import { Tooltip } from '@snack-uikit/tooltip';
-import { ButtonClaudia } from '../../../ButtonClaudia';
-import { SIZE } from '../../types';
-export const ClaudiaChip = forwardRef(({ onClick, size, tooltip, layoutType }, ref) => {
-    const isMobile = layoutType === LAYOUT_TYPE.Mobile || size === SIZE.M;
-    const totalSize = isMobile ? SIZE.M : size;
-    if (!tooltip) {
-        return (_jsx(ButtonClaudia, { size: totalSize, "data-mobile": isMobile, ref: ref, onClick: onClick, icon: _jsx(AgentClaudiaSVG, { size: 24 }) }));
-    }
-    return (_jsx(Tooltip, { triggerRef: ref, tip: tooltip, children: _jsx(ButtonClaudia, { size: totalSize, "data-mobile": isMobile, onClick: onClick, icon: _jsx(AgentClaudiaSVG, { size: 24 }) }) }));
-});

package/dist/esm/components/RecommendPannel/helperComponents/ClaudiaChip/index.d.ts

@@ -1 +0,0 @@
-export * from './ClaudiaChip';

package/dist/esm/components/RecommendPannel/helperComponents/ClaudiaChip/index.js

@@ -1 +0,0 @@
-export * from './ClaudiaChip';

package/src/components/ChatStatusAnnouncement/helperComponents/TextContent/TextContent.tsx

@@ -1,18 +0,0 @@
-import { ReactNode } from 'react';
-
-import { Typography } from '@snack-uikit/typography';
-
-import { isReactNode } from '../../utils';
-
-type TextContent = {
-  content: ReactNode;
-  className?: string;
-};
-
-export function TextContent({ content, className }: TextContent) {
-  if (isReactNode(content)) {
-    return content;
-  }
-
-  return <Typography.SansBodyS className={className}>{content}</Typography.SansBodyS>;
-}

package/src/components/ChatStatusAnnouncement/helperComponents/TextContent/index.ts

@@ -1 +0,0 @@
-export * from './TextContent';

package/src/components/RecommendPannel/helperComponents/ClaudiaChip/ClaudiaChip.tsx

@@ -1,40 +0,0 @@
-import { forwardRef, MouseEventHandler, ReactNode, RefObject } from 'react';
-
-import { AgentClaudiaSVG } from '@cloud-ru/uikit-product-icons';
-import { LAYOUT_TYPE, LayoutType } from '@cloud-ru/uikit-product-utils';
-import { Tooltip } from '@snack-uikit/tooltip';
-
-import { ButtonClaudia } from '../../../ButtonClaudia';
-import { SIZE, Size } from '../../types';
-
-type ClaudiaChipProps = {
-  onClick?: MouseEventHandler<HTMLElement>;
-  size: Size;
-  tooltip?: ReactNode;
-  layoutType?: LayoutType;
-};
-
-export const ClaudiaChip = forwardRef<HTMLElement | HTMLButtonElement, ClaudiaChipProps>(
-  ({ onClick, size, tooltip, layoutType }, ref) => {
-    const isMobile = layoutType === LAYOUT_TYPE.Mobile || size === SIZE.M;
-    const totalSize = isMobile ? SIZE.M : size;
-
-    if (!tooltip) {
-      return (
-        <ButtonClaudia
-          size={totalSize}
-          data-mobile={isMobile}
-          ref={ref as RefObject<HTMLButtonElement>}
-          onClick={onClick}
-          icon={<AgentClaudiaSVG size={24} />}
-        />
-      );
-    }
-
-    return (
-      <Tooltip triggerRef={ref as RefObject<HTMLElement>} tip={tooltip}>
-        <ButtonClaudia size={totalSize} data-mobile={isMobile} onClick={onClick} icon={<AgentClaudiaSVG size={24} />} />
-      </Tooltip>
-    );
-  },
-);

package/src/components/RecommendPannel/helperComponents/ClaudiaChip/index.ts

@@ -1 +0,0 @@
-export * from './ClaudiaChip';