@atlaskit/rovo-agent-components 3.1.2 → 3.2.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/rovo-agent-components
 
+## 3.2.0
+
+### Minor Changes
+
+- [`a3c753aa3c2e6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a3c753aa3c2e6) -
+  added agent avatar skeleton component
+
 ## 3.1.2
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -27,6 +27,12 @@ Object.defineProperty(exports, "AgentDropdownMenu", {
     return _agentDropdownMenu.AgentDropdownMenu;
   }
 });
+Object.defineProperty(exports, "AgentMenuItemSkeleton", {
+  enumerable: true,
+  get: function get() {
+    return _agentMenuItemSkeleton.AgentMenuItemSkeleton;
+  }
+});
 Object.defineProperty(exports, "AgentProfileCreator", {
   enumerable: true,
   get: function get() {
@@ -110,4 +116,5 @@ var _showIcon = require("./common/ui/show-icon");
 var _hiddenIcon = require("./common/ui/hidden-icon");
 var _agentAvatar = require("./ui/agent-avatar");
 var _generatedAvatars = require("./ui/agent-avatar/generated-avatars");
-var _agentDropdownMenu = require("./ui/agent-dropdown-menu");
+var _agentDropdownMenu = require("./ui/agent-dropdown-menu");
+var _agentMenuItemSkeleton = require("./ui/agent-menu-item-skeleton");

package/dist/cjs/ui/agent-avatar/agent-avatar-skeleton/index.js

@@ -0,0 +1,49 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AgentAvatarSkeleton = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _avatar = require("@atlaskit/avatar");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _skeleton = _interopRequireDefault(require("@atlaskit/skeleton"));
+var _index = require("../index");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+/**
+ * Skeleton wrapper with hexagon clip-path to match the AgentAvatar component shape.
+ * Uses the same clip-path as AgentAvatar to provide a consistent loading experience.
+ */
+var AgentAvatarSkeleton = exports.AgentAvatarSkeleton = function AgentAvatarSkeleton(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    _ref$isShimmering = _ref.isShimmering,
+    isShimmering = _ref$isShimmering === void 0 ? true : _ref$isShimmering,
+    color = _ref.color,
+    shimmeringEndColor = _ref.shimmeringEndColor,
+    testId = _ref.testId;
+  return /*#__PURE__*/React.createElement(_compiled.Box, {
+    style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values
+      width: _avatar.AVATAR_SIZES[size],
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values
+      height: _avatar.AVATAR_SIZES[size],
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-unsafe-values
+      clipPath: _index.AGENT_AVATAR_CLIP_PATH
+    },
+    testId: testId ? "".concat(testId, "-wrapper") : "agent-avatar-skeleton-wrapper"
+  }, /*#__PURE__*/React.createElement(_skeleton.default, {
+    width: "100%",
+    height: "100%",
+    borderRadius: 0,
+    isShimmering: isShimmering,
+    color: color,
+    ShimmeringEndColor: shimmeringEndColor,
+    testId: testId !== null && testId !== void 0 ? testId : "agent-avatar-skeleton"
+  }));
+};

package/dist/cjs/ui/agent-avatar/index.js

@@ -6,7 +6,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.AgentAvatar = void 0;
+exports.AgentAvatar = exports.AGENT_AVATAR_CLIP_PATH = void 0;
 require("./index.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
@@ -20,6 +20,7 @@ var _messages = require("./messages");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var AGENT_AVATAR_CLIP_PATH = exports.AGENT_AVATAR_CLIP_PATH = "polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%)";
 var styles = {
   agentAvatar: "_1e0c1txw _1bah1h6o _4cvr1h6o _mkrz1k6g",
   image: "_5ral1dfr _4t3i1osq _1bsb1osq",

package/dist/cjs/ui/agent-menu-item-skeleton/index.compiled.css

@@ -0,0 +1,6 @@
+
+._zulp12x7{gap:var(--ds-space-075,6px)}._19bv12x7{padding-left:var(--ds-space-075,6px)}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._u5f312x7{padding-right:var(--ds-space-075,6px)}

package/dist/cjs/ui/agent-menu-item-skeleton/index.js

@@ -0,0 +1,47 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AgentMenuItemSkeleton = void 0;
+require("./index.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var _skeleton = _interopRequireDefault(require("@atlaskit/skeleton"));
+var _agentAvatarSkeleton = require("../agent-avatar/agent-avatar-skeleton");
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+var styles = {
+  skeletonContainer: "_zulp12x7 _1bsb1osq _1e0c1txw _4cvr1h6o _19bv12x7 _u5f312x7"
+};
+var AgentMenuItemSkeleton = exports.AgentMenuItemSkeleton = function AgentMenuItemSkeleton(_ref) {
+  var index = _ref.index,
+    _ref$containerHeight = _ref.containerHeight,
+    containerHeight = _ref$containerHeight === void 0 ? 32 : _ref$containerHeight,
+    _ref$skeletonTextHeig = _ref.skeletonTextHeight,
+    skeletonTextHeight = _ref$skeletonTextHeig === void 0 ? 16 : _ref$skeletonTextHeig,
+    _ref$skeletonTextWidt = _ref.skeletonTextWidth,
+    skeletonTextWidth = _ref$skeletonTextWidt === void 0 ? 170 : _ref$skeletonTextWidt,
+    _ref$skeletonAvatarSi = _ref.skeletonAvatarSize,
+    skeletonAvatarSize = _ref$skeletonAvatarSi === void 0 ? 'small' : _ref$skeletonAvatarSi;
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    key: "skeleton-container-".concat(index),
+    testId: "skeleton-container-".concat(index),
+    xcss: styles.skeletonContainer,
+    style: {
+      height: "".concat(containerHeight, "px")
+    }
+  }, /*#__PURE__*/_react.default.createElement(_agentAvatarSkeleton.AgentAvatarSkeleton, {
+    size: skeletonAvatarSize,
+    isShimmering: true,
+    testId: "loading-agents-avatar-skeleton-".concat(index)
+  }), /*#__PURE__*/_react.default.createElement(_skeleton.default, {
+    width: skeletonTextWidth,
+    height: skeletonTextHeight,
+    borderRadius: 4,
+    isShimmering: true,
+    testId: "loading-agents-text-skeleton-".concat(index)
+  }));
+};

package/dist/es2019/index.js

@@ -9,4 +9,5 @@ export { ShowIcon } from './common/ui/show-icon';
 export { HiddenIcon } from './common/ui/hidden-icon';
 export { AgentAvatar } from './ui/agent-avatar';
 export { AgentBanner } from './ui/agent-avatar/generated-avatars';
-export { AgentDropdownMenu } from './ui/agent-dropdown-menu';
+export { AgentDropdownMenu } from './ui/agent-dropdown-menu';
+export { AgentMenuItemSkeleton } from './ui/agent-menu-item-skeleton';

package/dist/es2019/ui/agent-avatar/agent-avatar-skeleton/index.js

@@ -0,0 +1,40 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { AVATAR_SIZES } from '@atlaskit/avatar';
+import { Box } from '@atlaskit/primitives/compiled';
+import Skeleton from '@atlaskit/skeleton';
+
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+import { AGENT_AVATAR_CLIP_PATH } from '../index';
+/**
+ * Skeleton wrapper with hexagon clip-path to match the AgentAvatar component shape.
+ * Uses the same clip-path as AgentAvatar to provide a consistent loading experience.
+ */
+export const AgentAvatarSkeleton = ({
+  size = 'medium',
+  isShimmering = true,
+  color,
+  shimmeringEndColor,
+  testId
+}) => {
+  return /*#__PURE__*/React.createElement(Box, {
+    style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values
+      width: AVATAR_SIZES[size],
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values
+      height: AVATAR_SIZES[size],
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-unsafe-values
+      clipPath: AGENT_AVATAR_CLIP_PATH
+    },
+    testId: testId ? `${testId}-wrapper` : "agent-avatar-skeleton-wrapper"
+  }, /*#__PURE__*/React.createElement(Skeleton, {
+    width: "100%",
+    height: "100%",
+    borderRadius: 0,
+    isShimmering: isShimmering,
+    color: color,
+    ShimmeringEndColor: shimmeringEndColor,
+    testId: testId !== null && testId !== void 0 ? testId : "agent-avatar-skeleton"
+  }));
+};

package/dist/es2019/ui/agent-avatar/index.js

@@ -8,6 +8,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import { GeneratedAvatar } from './generated-avatars';
 import { messages } from './messages';
+export const AGENT_AVATAR_CLIP_PATH = `polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%)`;
 const styles = {
   agentAvatar: "_1e0c1txw _1bah1h6o _4cvr1h6o _mkrz1k6g",
   image: "_5ral1dfr _4t3i1osq _1bsb1osq",

package/dist/es2019/ui/agent-menu-item-skeleton/index.compiled.css

@@ -0,0 +1,6 @@
+
+._zulp12x7{gap:var(--ds-space-075,6px)}._19bv12x7{padding-left:var(--ds-space-075,6px)}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._u5f312x7{padding-right:var(--ds-space-075,6px)}

package/dist/es2019/ui/agent-menu-item-skeleton/index.js

@@ -0,0 +1,37 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { Box } from "@atlaskit/primitives/compiled";
+import Skeleton from '@atlaskit/skeleton';
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+import { AgentAvatarSkeleton } from '../agent-avatar/agent-avatar-skeleton';
+const styles = {
+  skeletonContainer: "_zulp12x7 _1bsb1osq _1e0c1txw _4cvr1h6o _19bv12x7 _u5f312x7"
+};
+export const AgentMenuItemSkeleton = ({
+  index,
+  containerHeight = 32,
+  skeletonTextHeight = 16,
+  skeletonTextWidth = 170,
+  skeletonAvatarSize = 'small'
+}) => {
+  return /*#__PURE__*/React.createElement(Box, {
+    key: `skeleton-container-${index}`,
+    testId: `skeleton-container-${index}`,
+    xcss: styles.skeletonContainer,
+    style: {
+      height: `${containerHeight}px`
+    }
+  }, /*#__PURE__*/React.createElement(AgentAvatarSkeleton, {
+    size: skeletonAvatarSize,
+    isShimmering: true,
+    testId: `loading-agents-avatar-skeleton-${index}`
+  }), /*#__PURE__*/React.createElement(Skeleton, {
+    width: skeletonTextWidth,
+    height: skeletonTextHeight,
+    borderRadius: 4,
+    isShimmering: true,
+    testId: `loading-agents-text-skeleton-${index}`
+  }));
+};

package/dist/esm/index.js

@@ -9,4 +9,5 @@ export { ShowIcon } from './common/ui/show-icon';
 export { HiddenIcon } from './common/ui/hidden-icon';
 export { AgentAvatar } from './ui/agent-avatar';
 export { AgentBanner } from './ui/agent-avatar/generated-avatars';
-export { AgentDropdownMenu } from './ui/agent-dropdown-menu';
+export { AgentDropdownMenu } from './ui/agent-dropdown-menu';
+export { AgentMenuItemSkeleton } from './ui/agent-menu-item-skeleton';

package/dist/esm/ui/agent-avatar/agent-avatar-skeleton/index.js

@@ -0,0 +1,41 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { AVATAR_SIZES } from '@atlaskit/avatar';
+import { Box } from '@atlaskit/primitives/compiled';
+import Skeleton from '@atlaskit/skeleton';
+
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+import { AGENT_AVATAR_CLIP_PATH } from '../index';
+/**
+ * Skeleton wrapper with hexagon clip-path to match the AgentAvatar component shape.
+ * Uses the same clip-path as AgentAvatar to provide a consistent loading experience.
+ */
+export var AgentAvatarSkeleton = function AgentAvatarSkeleton(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    _ref$isShimmering = _ref.isShimmering,
+    isShimmering = _ref$isShimmering === void 0 ? true : _ref$isShimmering,
+    color = _ref.color,
+    shimmeringEndColor = _ref.shimmeringEndColor,
+    testId = _ref.testId;
+  return /*#__PURE__*/React.createElement(Box, {
+    style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values
+      width: AVATAR_SIZES[size],
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values
+      height: AVATAR_SIZES[size],
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-unsafe-values
+      clipPath: AGENT_AVATAR_CLIP_PATH
+    },
+    testId: testId ? "".concat(testId, "-wrapper") : "agent-avatar-skeleton-wrapper"
+  }, /*#__PURE__*/React.createElement(Skeleton, {
+    width: "100%",
+    height: "100%",
+    borderRadius: 0,
+    isShimmering: isShimmering,
+    color: color,
+    ShimmeringEndColor: shimmeringEndColor,
+    testId: testId !== null && testId !== void 0 ? testId : "agent-avatar-skeleton"
+  }));
+};

package/dist/esm/ui/agent-avatar/index.js

@@ -11,6 +11,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import { GeneratedAvatar } from './generated-avatars';
 import { messages } from './messages';
+export var AGENT_AVATAR_CLIP_PATH = "polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%)";
 var styles = {
   agentAvatar: "_1e0c1txw _1bah1h6o _4cvr1h6o _mkrz1k6g",
   image: "_5ral1dfr _4t3i1osq _1bsb1osq",

package/dist/esm/ui/agent-menu-item-skeleton/index.compiled.css

@@ -0,0 +1,6 @@
+
+._zulp12x7{gap:var(--ds-space-075,6px)}._19bv12x7{padding-left:var(--ds-space-075,6px)}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._u5f312x7{padding-right:var(--ds-space-075,6px)}

package/dist/esm/ui/agent-menu-item-skeleton/index.js

@@ -0,0 +1,40 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { Box } from "@atlaskit/primitives/compiled";
+import Skeleton from '@atlaskit/skeleton';
+// eslint-disable-next-line @atlassian/tangerine/import/no-parent-imports
+import { AgentAvatarSkeleton } from '../agent-avatar/agent-avatar-skeleton';
+var styles = {
+  skeletonContainer: "_zulp12x7 _1bsb1osq _1e0c1txw _4cvr1h6o _19bv12x7 _u5f312x7"
+};
+export var AgentMenuItemSkeleton = function AgentMenuItemSkeleton(_ref) {
+  var index = _ref.index,
+    _ref$containerHeight = _ref.containerHeight,
+    containerHeight = _ref$containerHeight === void 0 ? 32 : _ref$containerHeight,
+    _ref$skeletonTextHeig = _ref.skeletonTextHeight,
+    skeletonTextHeight = _ref$skeletonTextHeig === void 0 ? 16 : _ref$skeletonTextHeig,
+    _ref$skeletonTextWidt = _ref.skeletonTextWidth,
+    skeletonTextWidth = _ref$skeletonTextWidt === void 0 ? 170 : _ref$skeletonTextWidt,
+    _ref$skeletonAvatarSi = _ref.skeletonAvatarSize,
+    skeletonAvatarSize = _ref$skeletonAvatarSi === void 0 ? 'small' : _ref$skeletonAvatarSi;
+  return /*#__PURE__*/React.createElement(Box, {
+    key: "skeleton-container-".concat(index),
+    testId: "skeleton-container-".concat(index),
+    xcss: styles.skeletonContainer,
+    style: {
+      height: "".concat(containerHeight, "px")
+    }
+  }, /*#__PURE__*/React.createElement(AgentAvatarSkeleton, {
+    size: skeletonAvatarSize,
+    isShimmering: true,
+    testId: "loading-agents-avatar-skeleton-".concat(index)
+  }), /*#__PURE__*/React.createElement(Skeleton, {
+    width: skeletonTextWidth,
+    height: skeletonTextHeight,
+    borderRadius: 4,
+    isShimmering: true,
+    testId: "loading-agents-text-skeleton-".concat(index)
+  }));
+};

package/dist/types/index.d.ts

@@ -10,3 +10,4 @@ export { HiddenIcon } from './common/ui/hidden-icon';
 export { AgentAvatar } from './ui/agent-avatar';
 export { AgentBanner } from './ui/agent-avatar/generated-avatars';
 export { AgentDropdownMenu } from './ui/agent-dropdown-menu';
+export { AgentMenuItemSkeleton } from './ui/agent-menu-item-skeleton';

package/dist/types/ui/agent-avatar/agent-avatar-skeleton/index.d.ts

@@ -0,0 +1,29 @@
+import { type SizeType } from '@atlaskit/avatar';
+type AgentAvatarSkeletonProps = {
+    /**
+     * Size of the skeleton.
+     */
+    size?: SizeType;
+    /**
+     * Enables the shimmering animation.
+     */
+    isShimmering?: boolean;
+    /**
+     * Overrides the default color of skeleton.
+     */
+    color?: string;
+    /**
+     * Overrides the default shimmering ending color of skeleton.
+     */
+    shimmeringEndColor?: string;
+    /**
+     * Applied as a data-attribute for testing.
+     */
+    testId?: string;
+};
+/**
+ * Skeleton wrapper with hexagon clip-path to match the AgentAvatar component shape.
+ * Uses the same clip-path as AgentAvatar to provide a consistent loading experience.
+ */
+export declare const AgentAvatarSkeleton: ({ size, isShimmering, color, shimmeringEndColor, testId, }: AgentAvatarSkeletonProps) => JSX.Element;
+export {};

package/dist/types/ui/agent-avatar/index.d.ts

@@ -1,4 +1,5 @@
 import { type SizeType } from '@atlaskit/avatar';
+export declare const AGENT_AVATAR_CLIP_PATH = "polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%)";
 type AgentAvatarProps = {
     imageUrl?: string;
     size?: SizeType;

package/dist/types/ui/agent-menu-item-skeleton/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { SizeType } from '@atlaskit/avatar';
+interface AgentMenuItemSkeletonProps {
+    index: number;
+    containerHeight?: number;
+    skeletonTextHeight?: number;
+    skeletonTextWidth?: number;
+    skeletonAvatarSize?: SizeType;
+}
+export declare const AgentMenuItemSkeleton: ({ index, containerHeight, skeletonTextHeight, skeletonTextWidth, skeletonAvatarSize }: AgentMenuItemSkeletonProps) => React.JSX.Element;
+export {};

package/dist/types-ts4.5/index.d.ts

@@ -10,3 +10,4 @@ export { HiddenIcon } from './common/ui/hidden-icon';
 export { AgentAvatar } from './ui/agent-avatar';
 export { AgentBanner } from './ui/agent-avatar/generated-avatars';
 export { AgentDropdownMenu } from './ui/agent-dropdown-menu';
+export { AgentMenuItemSkeleton } from './ui/agent-menu-item-skeleton';

package/dist/types-ts4.5/ui/agent-avatar/agent-avatar-skeleton/index.d.ts

@@ -0,0 +1,29 @@
+import { type SizeType } from '@atlaskit/avatar';
+type AgentAvatarSkeletonProps = {
+    /**
+     * Size of the skeleton.
+     */
+    size?: SizeType;
+    /**
+     * Enables the shimmering animation.
+     */
+    isShimmering?: boolean;
+    /**
+     * Overrides the default color of skeleton.
+     */
+    color?: string;
+    /**
+     * Overrides the default shimmering ending color of skeleton.
+     */
+    shimmeringEndColor?: string;
+    /**
+     * Applied as a data-attribute for testing.
+     */
+    testId?: string;
+};
+/**
+ * Skeleton wrapper with hexagon clip-path to match the AgentAvatar component shape.
+ * Uses the same clip-path as AgentAvatar to provide a consistent loading experience.
+ */
+export declare const AgentAvatarSkeleton: ({ size, isShimmering, color, shimmeringEndColor, testId, }: AgentAvatarSkeletonProps) => JSX.Element;
+export {};

package/dist/types-ts4.5/ui/agent-avatar/index.d.ts

@@ -1,4 +1,5 @@
 import { type SizeType } from '@atlaskit/avatar';
+export declare const AGENT_AVATAR_CLIP_PATH = "polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%)";
 type AgentAvatarProps = {
     imageUrl?: string;
     size?: SizeType;

package/dist/types-ts4.5/ui/agent-menu-item-skeleton/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { SizeType } from '@atlaskit/avatar';
+interface AgentMenuItemSkeletonProps {
+    index: number;
+    containerHeight?: number;
+    skeletonTextHeight?: number;
+    skeletonTextWidth?: number;
+    skeletonAvatarSize?: SizeType;
+}
+export declare const AgentMenuItemSkeleton: ({ index, containerHeight, skeletonTextHeight, skeletonTextWidth, skeletonAvatarSize }: AgentMenuItemSkeletonProps) => React.JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/rovo-agent-components",
-	"version": "3.1.2",
+	"version": "3.2.0",
 	"description": "This package host public components related to rovo agents, the components here are needed for other public atlaskit packages",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",