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

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 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

@@ -545,8 +545,9 @@
 | 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 |

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

@@ -4,7 +4,7 @@ export type SshFieldProps = WithLayoutType<Omit<FieldTextAreaProps, 'placeholder
     /** Колбек действия при отправке */
     onSubmit(value: string): 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;
 } & {

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/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

@@ -4,7 +4,7 @@ export type SshFieldProps = WithLayoutType<Omit<FieldTextAreaProps, 'placeholder
     /** Колбек действия при отправке */
     onSubmit(value: string): 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;
 } & {

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.7.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": "871be56e967b2421b96a5a0135b509d6ff29b7b7"
 }

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/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/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/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';