@atlaskit/rovo-agent-components 3.20.0 → 3.22.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/rovo-agent-components
 
+## 3.22.0
+
+### Minor Changes
+
+- [`04077f2897e0e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/04077f2897e0e) -
+  [ux] Changing the UI for the user identity profile card when the user is the Rovo Dev agent.
+  Change is feature gated.
+- [`b7e850efc9f82`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b7e850efc9f82) -
+  [ux] Rovo agents view profile - show verified icon
+
+## 3.21.0
+
+### Minor Changes
+
+- [`023f008de3d39`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/023f008de3d39) -
+  Added agent icon for rovo service agent
+
 ## 3.20.0
 
 ### Minor Changes

package/dist/cjs/ui/agent-avatar/generated-avatars/assets/jsm-rovo-service-agent.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _default = exports.default = function _default(_ref) {
+  var _size = _ref.size,
+    _primaryColor = _ref.primaryColor,
+    _secondaryColor = _ref.secondaryColor;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: "45",
+    height: "50",
+    viewBox: "0 0 45 50",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M19.2938 1.13426C21.0414 0.127121 23.1945 0.12712 24.9421 1.13426L41.4117 10.6258C43.1593 11.633 44.2359 13.4943 44.2359 15.5085V34.4917C44.2359 36.506 43.1593 38.3673 41.4117 39.3744L24.9421 48.866C23.1945 49.8731 21.0414 49.8731 19.2938 48.866L2.82414 39.3744C1.07656 38.3673 0 36.506 0 34.4917V15.5085C0 13.4943 1.07656 11.633 2.82414 10.6258L19.2938 1.13426Z",
+    fill: "#FFC716"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M20.4468 9.87926C21.5285 9.2834 22.8488 9.29435 23.9218 9.9121L32.3595 14.7735L34.3604 15.9264C35.4529 16.5553 36.1291 17.7223 36.1291 18.9794V31.0081C36.1291 32.2702 35.457 33.432 34.3613 34.0606L26.5145 38.5816C26.5317 38.5334 26.548 38.4849 26.5636 38.4361C26.7093 37.9854 26.7865 37.5092 26.7865 37.0224V24.9937C26.7865 23.3413 25.9057 21.8174 24.4692 20.9931L23.0198 20.1584L18.6199 17.6245V12.9651C18.6199 12.5979 18.6768 12.2392 18.7844 11.8997C19.049 11.078 19.6118 10.3667 20.3818 9.92259L20.3841 9.92124C20.4062 9.90853 20.4272 9.89442 20.4468 9.87926Z",
+    fill: "#101214"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M17.7904 11.4175L9.94363 15.9385C8.8479 16.5671 8.17578 17.7289 8.17578 18.991V31.0197C8.17578 32.2768 8.85186 33.4437 9.94434 34.0726L11.8048 35.1446L20.3831 40.087C21.4561 40.7046 22.7764 40.7156 23.8581 40.1198C23.8777 40.1047 23.8986 40.0906 23.9206 40.0779C24.6914 39.6342 25.2551 38.9226 25.5201 38.1005C25.628 37.7606 25.685 37.4016 25.685 37.034V32.3746L21.1444 29.7597L19.8361 29.0062C18.3998 28.1818 17.5184 26.6577 17.5184 25.0053V12.9767C17.5184 12.4906 17.5954 12.015 17.7407 11.5648C17.7564 11.5154 17.773 11.4663 17.7904 11.4175Z",
+    fill: "#101214"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M21.1444 29.7597L11.8048 35.1446L9.94434 34.0726C8.85186 33.4437 8.17578 32.2768 8.17578 31.0197V18.991C8.17578 17.7289 8.8479 16.5671 9.94363 15.9385L17.7904 11.4175C17.773 11.4663 17.7564 11.5154 17.7407 11.5648C17.5954 12.015 17.5184 12.4906 17.5184 12.9767V25.0053C17.5184 26.6577 18.3998 28.1818 19.8361 29.0062L21.1444 29.7597Z",
+    fill: "#101214"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M23.0198 20.1584L18.6199 17.6245V12.9651C18.6199 12.5979 18.6768 12.2392 18.7844 11.8997C19.049 11.078 19.6118 10.3667 20.3818 9.92259L20.3841 9.92124C20.4062 9.90853 20.4272 9.89442 20.4468 9.87926C21.5285 9.2834 22.8488 9.29435 23.9218 9.9121L32.3595 14.7735L23.0198 20.1584Z",
+    fill: "#101214"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M34.3604 15.9264L32.3595 14.7735L23.0198 20.1584L24.4692 20.9931C25.9057 21.8174 26.7865 23.3413 26.7865 24.9937V37.0224C26.7865 37.5092 26.7093 37.9854 26.5636 38.4361C26.548 38.4849 26.5317 38.5334 26.5145 38.5816L34.3613 34.0606C35.457 33.432 36.1291 32.2702 36.1291 31.0081V18.9794C36.1291 17.7223 35.4529 16.5553 34.3604 15.9264Z",
+    fill: "#101214"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M21.1444 29.7597L11.8048 35.1446L20.3831 40.087C21.4561 40.7046 22.7764 40.7156 23.8581 40.1198C23.8777 40.1047 23.8986 40.0906 23.9206 40.0779C24.6914 39.6342 25.2551 38.9226 25.5201 38.1005C25.628 37.7606 25.685 37.4016 25.685 37.034V32.3746L21.1444 29.7597Z",
+    fill: "#101214"
+  }));
+};

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

@@ -147,6 +147,11 @@ var TrialGuideAvatar = /*#__PURE__*/(0, _react.lazy)(function () {
     return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-rovo-avatar-TrialGuideAvatar"*/'./assets/trial-guide'));
   });
 });
+var JsmRovoServiceAgentAvatar = /*#__PURE__*/(0, _react.lazy)(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-rovo-avatar-JsmRovoServiceAgentAvatar"*/'./assets/jsm-rovo-service-agent'));
+  });
+});
 var yellowColor = exports.yellowColor = {
   primary: '#FCA700',
   secondary: '#FFC716'
@@ -326,6 +331,16 @@ var outOfTheBoxAgentAvatar = {
       });
     },
     color: blueColor
+  },
+  jsm_rovo_service_agent: {
+    getRender: function getRender(size) {
+      return /*#__PURE__*/_react.default.createElement(JsmRovoServiceAgentAvatar, {
+        size: _avatar.AVATAR_SIZES[size],
+        primaryColor: "",
+        secondaryColor: ""
+      });
+    },
+    color: yellowColor
   }
 };
 
@@ -360,7 +375,19 @@ var getAvatarRender = function getAvatarRender(_ref3) {
   var agentNamedId = _ref3.agentNamedId,
     agentId = _ref3.agentId,
     agentIdentityAccountId = _ref3.agentIdentityAccountId,
+    isRovoDev = _ref3.isRovoDev,
     size = _ref3.size;
+  if (isRovoDev && (0, _platformFeatureFlags.fg)('rovo_dev_themed_identity_card')) {
+    return {
+      render: /*#__PURE__*/_react.default.createElement(RovoDevAvatar, {
+        size: _avatar.AVATAR_SIZES[size],
+        primaryColor: "",
+        secondaryColor: ""
+      }),
+      color: greenColor
+    };
+  }
+
   //@TODO CRCS-3129: Remove Rovo Dev hardcoded icon after TeamEU demos
   // Handle Rovo Dev agent avatar for TeamEU Demo
   if (agentId === ROVO_DEV_AGENT_ID && (0, _platformFeatureFlags.fg)('jira_ai_force_rovo_dev_avatar')) {
@@ -418,12 +445,14 @@ var AgentBanner = exports.AgentBanner = function AgentBanner(_ref4) {
   var agentNamedId = _ref4.agentNamedId,
     agentId = _ref4.agentId,
     agentIdentityAccountId = _ref4.agentIdentityAccountId,
+    isRovoDev = _ref4.isRovoDev,
     height = _ref4.height,
     fillSpace = _ref4.fillSpace;
   var _getAvatarRender = getAvatarRender({
       agentNamedId: agentNamedId,
       agentId: agentId,
       agentIdentityAccountId: agentIdentityAccountId,
+      isRovoDev: isRovoDev,
       size: 'medium'
     }),
     color = _getAvatarRender.color;

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

@@ -47,6 +47,7 @@ var AgentAvatar = exports.AgentAvatar = function AgentAvatar(_ref) {
     agentNamedId = _ref.agentNamedId,
     _ref$showBorder = _ref.showBorder,
     showBorder = _ref$showBorder === void 0 ? true : _ref$showBorder,
+    isRovoDev = _ref.isRovoDev,
     isForgeAgent = _ref.isForgeAgent,
     forgeAgentIconUrl = _ref.forgeAgentIconUrl;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
@@ -81,6 +82,7 @@ var AgentAvatar = exports.AgentAvatar = function AgentAvatar(_ref) {
     agentId: agentId,
     agentNamedId: agentNamedId,
     agentIdentityAccountId: agentIdentityAccountId,
+    isRovoDev: isRovoDev,
     size: size
   }))));
 };

package/dist/cjs/ui/agent-profile-info/agent-profile-info.stories.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactMagneticDi = require("react-magnetic-di");
+var _reactRelay = require("react-relay");
+var _storybookDecorators = require("@atlassian/agent-studio-test-utils/storybook-decorators");
+var _index = require("./index");
+var commonDeps = [(0, _reactMagneticDi.injectable)(_reactRelay.useFragment, function () {
+  return {
+    isVerified: true
+  };
+})];
+var meta = {
+  decorators: [(0, _storybookDecorators.withUseIntl)(), (0, _storybookDecorators.withDi)(commonDeps)]
+};
+var _default = exports.default = meta;
+var Default = exports.Default = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_index.AgentProfileInfo, {
+      agentName: "Code Documentation Writer",
+      agentDescription: "Create or modify documentation files in your codebase to ensure that they are up to date",
+      creatorRender: /*#__PURE__*/_react.default.createElement("div", null, "Creator Render"),
+      starCountRender: /*#__PURE__*/_react.default.createElement("div", null, "Star Count Render"),
+      headingRender: /*#__PURE__*/_react.default.createElement("div", null, "Heading Render"),
+      isStarred: true,
+      isHidden: false,
+      onStarToggle: function onStarToggle() {}
+    });
+  }
+};

package/dist/cjs/ui/agent-profile-info/index.js

@@ -27,7 +27,8 @@ var styles = {
   descriptionRefresh: "_1mouze3t _1i4qfg65 _1nmz1hna",
   wrapper: "_otyru2gc",
   tooltipWrapper: "_195gu2gc _1e0c116y _kqswh2mm _94n5v77o",
-  headingWrapper: "_kqswh2mm"
+  headingWrapper: "_kqswh2mm",
+  headingContentWrapper: "_195gu2gc"
 };
 var getAgentCreator = exports.getAgentCreator = function getAgentCreator(_ref) {
   var creatorType = _ref.creatorType,
@@ -148,9 +149,12 @@ var AgentProfileInfo = exports.AgentProfileInfo = function AgentProfileInfo(_ref
     agentDescription = _ref3.agentDescription,
     creatorRender = _ref3.creatorRender,
     starCountRender = _ref3.starCountRender,
+    headingRender = _ref3.headingRender,
     isStarred = _ref3.isStarred,
     isHidden = _ref3.isHidden,
-    onStarToggle = _ref3.onStarToggle;
+    onStarToggle = _ref3.onStarToggle,
+    _ref3$showStarButton = _ref3.showStarButton,
+    showStarButton = _ref3$showStarButton === void 0 ? true : _ref3$showStarButton;
   var _useIntl2 = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl2.formatMessage;
   return /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
@@ -173,7 +177,9 @@ var AgentProfileInfo = exports.AgentProfileInfo = function AgentProfileInfo(_ref
     position: "top"
   }, /*#__PURE__*/_react.default.createElement(_hiddenIcon.HiddenIcon, {
     label: formatMessage(_messages.messages.hiddenIcon)
-  })))), /*#__PURE__*/_react.default.createElement(_starIconButton.StarIconButton, {
+  }))), headingRender && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.headingContentWrapper
+  }, headingRender)), showStarButton && /*#__PURE__*/_react.default.createElement(_starIconButton.StarIconButton, {
     isStarred: isStarred,
     handleToggle: onStarToggle
   })), creatorRender, !!agentDescription && /*#__PURE__*/_react.default.createElement(_compiled.Box, {

package/dist/es2019/ui/agent-avatar/generated-avatars/assets/jsm-rovo-service-agent.js

@@ -0,0 +1,41 @@
+import React from 'react';
+export default (({
+  size: _size,
+  primaryColor: _primaryColor,
+  secondaryColor: _secondaryColor
+}) => /*#__PURE__*/React.createElement("svg", {
+  width: "45",
+  height: "50",
+  viewBox: "0 0 45 50",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M19.2938 1.13426C21.0414 0.127121 23.1945 0.12712 24.9421 1.13426L41.4117 10.6258C43.1593 11.633 44.2359 13.4943 44.2359 15.5085V34.4917C44.2359 36.506 43.1593 38.3673 41.4117 39.3744L24.9421 48.866C23.1945 49.8731 21.0414 49.8731 19.2938 48.866L2.82414 39.3744C1.07656 38.3673 0 36.506 0 34.4917V15.5085C0 13.4943 1.07656 11.633 2.82414 10.6258L19.2938 1.13426Z",
+  fill: "#FFC716"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M20.4468 9.87926C21.5285 9.2834 22.8488 9.29435 23.9218 9.9121L32.3595 14.7735L34.3604 15.9264C35.4529 16.5553 36.1291 17.7223 36.1291 18.9794V31.0081C36.1291 32.2702 35.457 33.432 34.3613 34.0606L26.5145 38.5816C26.5317 38.5334 26.548 38.4849 26.5636 38.4361C26.7093 37.9854 26.7865 37.5092 26.7865 37.0224V24.9937C26.7865 23.3413 25.9057 21.8174 24.4692 20.9931L23.0198 20.1584L18.6199 17.6245V12.9651C18.6199 12.5979 18.6768 12.2392 18.7844 11.8997C19.049 11.078 19.6118 10.3667 20.3818 9.92259L20.3841 9.92124C20.4062 9.90853 20.4272 9.89442 20.4468 9.87926Z",
+  fill: "#101214"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M17.7904 11.4175L9.94363 15.9385C8.8479 16.5671 8.17578 17.7289 8.17578 18.991V31.0197C8.17578 32.2768 8.85186 33.4437 9.94434 34.0726L11.8048 35.1446L20.3831 40.087C21.4561 40.7046 22.7764 40.7156 23.8581 40.1198C23.8777 40.1047 23.8986 40.0906 23.9206 40.0779C24.6914 39.6342 25.2551 38.9226 25.5201 38.1005C25.628 37.7606 25.685 37.4016 25.685 37.034V32.3746L21.1444 29.7597L19.8361 29.0062C18.3998 28.1818 17.5184 26.6577 17.5184 25.0053V12.9767C17.5184 12.4906 17.5954 12.015 17.7407 11.5648C17.7564 11.5154 17.773 11.4663 17.7904 11.4175Z",
+  fill: "#101214"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M21.1444 29.7597L11.8048 35.1446L9.94434 34.0726C8.85186 33.4437 8.17578 32.2768 8.17578 31.0197V18.991C8.17578 17.7289 8.8479 16.5671 9.94363 15.9385L17.7904 11.4175C17.773 11.4663 17.7564 11.5154 17.7407 11.5648C17.5954 12.015 17.5184 12.4906 17.5184 12.9767V25.0053C17.5184 26.6577 18.3998 28.1818 19.8361 29.0062L21.1444 29.7597Z",
+  fill: "#101214"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M23.0198 20.1584L18.6199 17.6245V12.9651C18.6199 12.5979 18.6768 12.2392 18.7844 11.8997C19.049 11.078 19.6118 10.3667 20.3818 9.92259L20.3841 9.92124C20.4062 9.90853 20.4272 9.89442 20.4468 9.87926C21.5285 9.2834 22.8488 9.29435 23.9218 9.9121L32.3595 14.7735L23.0198 20.1584Z",
+  fill: "#101214"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M34.3604 15.9264L32.3595 14.7735L23.0198 20.1584L24.4692 20.9931C25.9057 21.8174 26.7865 23.3413 26.7865 24.9937V37.0224C26.7865 37.5092 26.7093 37.9854 26.5636 38.4361C26.548 38.4849 26.5317 38.5334 26.5145 38.5816L34.3613 34.0606C35.457 33.432 36.1291 32.2702 36.1291 31.0081V18.9794C36.1291 17.7223 35.4529 16.5553 34.3604 15.9264Z",
+  fill: "#101214"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M21.1444 29.7597L11.8048 35.1446L20.3831 40.087C21.4561 40.7046 22.7764 40.7156 23.8581 40.1198C23.8777 40.1047 23.8986 40.0906 23.9206 40.0779C24.6914 39.6342 25.2551 38.9226 25.5201 38.1005C25.628 37.7606 25.685 37.4016 25.685 37.034V32.3746L21.1444 29.7597Z",
+  fill: "#101214"
+})));

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

@@ -43,6 +43,7 @@ const SocialMediaScribeAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkN
 const TeamConnectionAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-TeamConnectionAvatar"*/'./assets/team-connection'));
 const WorkflowBuilderAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-WorkflowBuilderAvatar"*/'./assets/workflow-builder'));
 const TrialGuideAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-TrialGuideAvatar"*/'./assets/trial-guide'));
+const JsmRovoServiceAgentAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-JsmRovoServiceAgentAvatar"*/'./assets/jsm-rovo-service-agent'));
 export const yellowColor = {
   primary: '#FCA700',
   secondary: '#FFC716'
@@ -190,6 +191,14 @@ const outOfTheBoxAgentAvatar = {
       secondaryColor: blueColor.secondary
     }),
     color: blueColor
+  },
+  jsm_rovo_service_agent: {
+    getRender: size => /*#__PURE__*/React.createElement(JsmRovoServiceAgentAvatar, {
+      size: AVATAR_SIZES[size],
+      primaryColor: "",
+      secondaryColor: ""
+    }),
+    color: yellowColor
   }
 };
 
@@ -225,8 +234,20 @@ const getAvatarRender = ({
   agentNamedId,
   agentId,
   agentIdentityAccountId,
+  isRovoDev,
   size
 }) => {
+  if (isRovoDev && fg('rovo_dev_themed_identity_card')) {
+    return {
+      render: /*#__PURE__*/React.createElement(RovoDevAvatar, {
+        size: AVATAR_SIZES[size],
+        primaryColor: "",
+        secondaryColor: ""
+      }),
+      color: greenColor
+    };
+  }
+
   //@TODO CRCS-3129: Remove Rovo Dev hardcoded icon after TeamEU demos
   // Handle Rovo Dev agent avatar for TeamEU Demo
   if (agentId === ROVO_DEV_AGENT_ID && fg('jira_ai_force_rovo_dev_avatar')) {
@@ -284,6 +305,7 @@ export const AgentBanner = ({
   agentNamedId,
   agentId,
   agentIdentityAccountId,
+  isRovoDev,
   height,
   fillSpace
 }) => {
@@ -293,6 +315,7 @@ export const AgentBanner = ({
     agentNamedId,
     agentId,
     agentIdentityAccountId,
+    isRovoDev,
     size: 'medium'
   });
   return /*#__PURE__*/React.createElement(Box, {

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

@@ -33,6 +33,7 @@ export const AgentAvatar = ({
   agentIdentityAccountId,
   agentNamedId,
   showBorder = true,
+  isRovoDev,
   isForgeAgent,
   forgeAgentIconUrl
 }) => {
@@ -73,6 +74,7 @@ export const AgentAvatar = ({
     agentId: agentId,
     agentNamedId: agentNamedId,
     agentIdentityAccountId: agentIdentityAccountId,
+    isRovoDev: isRovoDev,
     size: size
   }))));
 };

package/dist/es2019/ui/agent-profile-info/agent-profile-info.stories.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { injectable } from 'react-magnetic-di';
+import { useFragment } from 'react-relay';
+import { withDi, withUseIntl } from '@atlassian/agent-studio-test-utils/storybook-decorators';
+import { AgentProfileInfo } from './index';
+const commonDeps = [injectable(useFragment, () => ({
+  isVerified: true
+}))];
+const meta = {
+  decorators: [withUseIntl(), withDi(commonDeps)]
+};
+export default meta;
+export const Default = {
+  render: () => /*#__PURE__*/React.createElement(AgentProfileInfo, {
+    agentName: "Code Documentation Writer",
+    agentDescription: "Create or modify documentation files in your codebase to ensure that they are up to date",
+    creatorRender: /*#__PURE__*/React.createElement("div", null, "Creator Render"),
+    starCountRender: /*#__PURE__*/React.createElement("div", null, "Star Count Render"),
+    headingRender: /*#__PURE__*/React.createElement("div", null, "Heading Render"),
+    isStarred: true,
+    isHidden: false,
+    onStarToggle: () => {}
+  })
+};

package/dist/es2019/ui/agent-profile-info/index.js

@@ -20,7 +20,8 @@ const styles = {
   descriptionRefresh: "_1mouze3t _1i4qfg65 _1nmz1hna",
   wrapper: "_otyru2gc",
   tooltipWrapper: "_195gu2gc _1e0c116y _kqswh2mm _94n5v77o",
-  headingWrapper: "_kqswh2mm"
+  headingWrapper: "_kqswh2mm",
+  headingContentWrapper: "_195gu2gc"
 };
 export const getAgentCreator = ({
   creatorType,
@@ -140,9 +141,11 @@ export const AgentProfileInfo = ({
   agentDescription,
   creatorRender,
   starCountRender,
+  headingRender,
   isStarred,
   isHidden,
-  onStarToggle
+  onStarToggle,
+  showStarButton = true
 }) => {
   const {
     formatMessage
@@ -167,7 +170,9 @@ export const AgentProfileInfo = ({
     position: "top"
   }, /*#__PURE__*/React.createElement(HiddenIcon, {
     label: formatMessage(messages.hiddenIcon)
-  })))), /*#__PURE__*/React.createElement(StarIconButton, {
+  }))), headingRender && /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.headingContentWrapper
+  }, headingRender)), showStarButton && /*#__PURE__*/React.createElement(StarIconButton, {
     isStarred: isStarred,
     handleToggle: onStarToggle
   })), creatorRender, !!agentDescription && /*#__PURE__*/React.createElement(Box, {

package/dist/esm/ui/agent-avatar/generated-avatars/assets/jsm-rovo-service-agent.js

@@ -0,0 +1,42 @@
+import React from 'react';
+export default (function (_ref) {
+  var _size = _ref.size,
+    _primaryColor = _ref.primaryColor,
+    _secondaryColor = _ref.secondaryColor;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "45",
+    height: "50",
+    viewBox: "0 0 45 50",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M19.2938 1.13426C21.0414 0.127121 23.1945 0.12712 24.9421 1.13426L41.4117 10.6258C43.1593 11.633 44.2359 13.4943 44.2359 15.5085V34.4917C44.2359 36.506 43.1593 38.3673 41.4117 39.3744L24.9421 48.866C23.1945 49.8731 21.0414 49.8731 19.2938 48.866L2.82414 39.3744C1.07656 38.3673 0 36.506 0 34.4917V15.5085C0 13.4943 1.07656 11.633 2.82414 10.6258L19.2938 1.13426Z",
+    fill: "#FFC716"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M20.4468 9.87926C21.5285 9.2834 22.8488 9.29435 23.9218 9.9121L32.3595 14.7735L34.3604 15.9264C35.4529 16.5553 36.1291 17.7223 36.1291 18.9794V31.0081C36.1291 32.2702 35.457 33.432 34.3613 34.0606L26.5145 38.5816C26.5317 38.5334 26.548 38.4849 26.5636 38.4361C26.7093 37.9854 26.7865 37.5092 26.7865 37.0224V24.9937C26.7865 23.3413 25.9057 21.8174 24.4692 20.9931L23.0198 20.1584L18.6199 17.6245V12.9651C18.6199 12.5979 18.6768 12.2392 18.7844 11.8997C19.049 11.078 19.6118 10.3667 20.3818 9.92259L20.3841 9.92124C20.4062 9.90853 20.4272 9.89442 20.4468 9.87926Z",
+    fill: "#101214"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M17.7904 11.4175L9.94363 15.9385C8.8479 16.5671 8.17578 17.7289 8.17578 18.991V31.0197C8.17578 32.2768 8.85186 33.4437 9.94434 34.0726L11.8048 35.1446L20.3831 40.087C21.4561 40.7046 22.7764 40.7156 23.8581 40.1198C23.8777 40.1047 23.8986 40.0906 23.9206 40.0779C24.6914 39.6342 25.2551 38.9226 25.5201 38.1005C25.628 37.7606 25.685 37.4016 25.685 37.034V32.3746L21.1444 29.7597L19.8361 29.0062C18.3998 28.1818 17.5184 26.6577 17.5184 25.0053V12.9767C17.5184 12.4906 17.5954 12.015 17.7407 11.5648C17.7564 11.5154 17.773 11.4663 17.7904 11.4175Z",
+    fill: "#101214"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M21.1444 29.7597L11.8048 35.1446L9.94434 34.0726C8.85186 33.4437 8.17578 32.2768 8.17578 31.0197V18.991C8.17578 17.7289 8.8479 16.5671 9.94363 15.9385L17.7904 11.4175C17.773 11.4663 17.7564 11.5154 17.7407 11.5648C17.5954 12.015 17.5184 12.4906 17.5184 12.9767V25.0053C17.5184 26.6577 18.3998 28.1818 19.8361 29.0062L21.1444 29.7597Z",
+    fill: "#101214"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M23.0198 20.1584L18.6199 17.6245V12.9651C18.6199 12.5979 18.6768 12.2392 18.7844 11.8997C19.049 11.078 19.6118 10.3667 20.3818 9.92259L20.3841 9.92124C20.4062 9.90853 20.4272 9.89442 20.4468 9.87926C21.5285 9.2834 22.8488 9.29435 23.9218 9.9121L32.3595 14.7735L23.0198 20.1584Z",
+    fill: "#101214"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M34.3604 15.9264L32.3595 14.7735L23.0198 20.1584L24.4692 20.9931C25.9057 21.8174 26.7865 23.3413 26.7865 24.9937V37.0224C26.7865 37.5092 26.7093 37.9854 26.5636 38.4361C26.548 38.4849 26.5317 38.5334 26.5145 38.5816L34.3613 34.0606C35.457 33.432 36.1291 32.2702 36.1291 31.0081V18.9794C36.1291 17.7223 35.4529 16.5553 34.3604 15.9264Z",
+    fill: "#101214"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M21.1444 29.7597L11.8048 35.1446L20.3831 40.087C21.4561 40.7046 22.7764 40.7156 23.8581 40.1198C23.8777 40.1047 23.8986 40.0906 23.9206 40.0779C24.6914 39.6342 25.2551 38.9226 25.5201 38.1005C25.628 37.7606 25.685 37.4016 25.685 37.034V32.3746L21.1444 29.7597Z",
+    fill: "#101214"
+  }));
+});

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

@@ -90,6 +90,9 @@ var WorkflowBuilderAvatar = /*#__PURE__*/lazy(function () {
 var TrialGuideAvatar = /*#__PURE__*/lazy(function () {
   return import( /* webpackChunkName: "@atlaskit-rovo-avatar-TrialGuideAvatar"*/'./assets/trial-guide');
 });
+var JsmRovoServiceAgentAvatar = /*#__PURE__*/lazy(function () {
+  return import( /* webpackChunkName: "@atlaskit-rovo-avatar-JsmRovoServiceAgentAvatar"*/'./assets/jsm-rovo-service-agent');
+});
 export var yellowColor = {
   primary: '#FCA700',
   secondary: '#FFC716'
@@ -269,6 +272,16 @@ var outOfTheBoxAgentAvatar = {
       });
     },
     color: blueColor
+  },
+  jsm_rovo_service_agent: {
+    getRender: function getRender(size) {
+      return /*#__PURE__*/React.createElement(JsmRovoServiceAgentAvatar, {
+        size: AVATAR_SIZES[size],
+        primaryColor: "",
+        secondaryColor: ""
+      });
+    },
+    color: yellowColor
   }
 };
 
@@ -303,7 +316,19 @@ var getAvatarRender = function getAvatarRender(_ref3) {
   var agentNamedId = _ref3.agentNamedId,
     agentId = _ref3.agentId,
     agentIdentityAccountId = _ref3.agentIdentityAccountId,
+    isRovoDev = _ref3.isRovoDev,
     size = _ref3.size;
+  if (isRovoDev && fg('rovo_dev_themed_identity_card')) {
+    return {
+      render: /*#__PURE__*/React.createElement(RovoDevAvatar, {
+        size: AVATAR_SIZES[size],
+        primaryColor: "",
+        secondaryColor: ""
+      }),
+      color: greenColor
+    };
+  }
+
   //@TODO CRCS-3129: Remove Rovo Dev hardcoded icon after TeamEU demos
   // Handle Rovo Dev agent avatar for TeamEU Demo
   if (agentId === ROVO_DEV_AGENT_ID && fg('jira_ai_force_rovo_dev_avatar')) {
@@ -361,12 +386,14 @@ export var AgentBanner = function AgentBanner(_ref4) {
   var agentNamedId = _ref4.agentNamedId,
     agentId = _ref4.agentId,
     agentIdentityAccountId = _ref4.agentIdentityAccountId,
+    isRovoDev = _ref4.isRovoDev,
     height = _ref4.height,
     fillSpace = _ref4.fillSpace;
   var _getAvatarRender = getAvatarRender({
       agentNamedId: agentNamedId,
       agentId: agentId,
       agentIdentityAccountId: agentIdentityAccountId,
+      isRovoDev: isRovoDev,
       size: 'medium'
     }),
     color = _getAvatarRender.color;

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

@@ -38,6 +38,7 @@ export var AgentAvatar = function AgentAvatar(_ref) {
     agentNamedId = _ref.agentNamedId,
     _ref$showBorder = _ref.showBorder,
     showBorder = _ref$showBorder === void 0 ? true : _ref$showBorder,
+    isRovoDev = _ref.isRovoDev,
     isForgeAgent = _ref.isForgeAgent,
     forgeAgentIconUrl = _ref.forgeAgentIconUrl;
   var _useIntl = useIntl(),
@@ -72,6 +73,7 @@ export var AgentAvatar = function AgentAvatar(_ref) {
     agentId: agentId,
     agentNamedId: agentNamedId,
     agentIdentityAccountId: agentIdentityAccountId,
+    isRovoDev: isRovoDev,
     size: size
   }))));
 };

package/dist/esm/ui/agent-profile-info/agent-profile-info.stories.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { injectable } from 'react-magnetic-di';
+import { useFragment } from 'react-relay';
+import { withDi, withUseIntl } from '@atlassian/agent-studio-test-utils/storybook-decorators';
+import { AgentProfileInfo } from './index';
+var commonDeps = [injectable(useFragment, function () {
+  return {
+    isVerified: true
+  };
+})];
+var meta = {
+  decorators: [withUseIntl(), withDi(commonDeps)]
+};
+export default meta;
+export var Default = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(AgentProfileInfo, {
+      agentName: "Code Documentation Writer",
+      agentDescription: "Create or modify documentation files in your codebase to ensure that they are up to date",
+      creatorRender: /*#__PURE__*/React.createElement("div", null, "Creator Render"),
+      starCountRender: /*#__PURE__*/React.createElement("div", null, "Star Count Render"),
+      headingRender: /*#__PURE__*/React.createElement("div", null, "Heading Render"),
+      isStarred: true,
+      isHidden: false,
+      onStarToggle: function onStarToggle() {}
+    });
+  }
+};

package/dist/esm/ui/agent-profile-info/index.js

@@ -20,7 +20,8 @@ var styles = {
   descriptionRefresh: "_1mouze3t _1i4qfg65 _1nmz1hna",
   wrapper: "_otyru2gc",
   tooltipWrapper: "_195gu2gc _1e0c116y _kqswh2mm _94n5v77o",
-  headingWrapper: "_kqswh2mm"
+  headingWrapper: "_kqswh2mm",
+  headingContentWrapper: "_195gu2gc"
 };
 export var getAgentCreator = function getAgentCreator(_ref) {
   var creatorType = _ref.creatorType,
@@ -141,9 +142,12 @@ export var AgentProfileInfo = function AgentProfileInfo(_ref3) {
     agentDescription = _ref3.agentDescription,
     creatorRender = _ref3.creatorRender,
     starCountRender = _ref3.starCountRender,
+    headingRender = _ref3.headingRender,
     isStarred = _ref3.isStarred,
     isHidden = _ref3.isHidden,
-    onStarToggle = _ref3.onStarToggle;
+    onStarToggle = _ref3.onStarToggle,
+    _ref3$showStarButton = _ref3.showStarButton,
+    showStarButton = _ref3$showStarButton === void 0 ? true : _ref3$showStarButton;
   var _useIntl2 = useIntl(),
     formatMessage = _useIntl2.formatMessage;
   return /*#__PURE__*/React.createElement(Stack, {
@@ -166,7 +170,9 @@ export var AgentProfileInfo = function AgentProfileInfo(_ref3) {
     position: "top"
   }, /*#__PURE__*/React.createElement(HiddenIcon, {
     label: formatMessage(messages.hiddenIcon)
-  })))), /*#__PURE__*/React.createElement(StarIconButton, {
+  }))), headingRender && /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.headingContentWrapper
+  }, headingRender)), showStarButton && /*#__PURE__*/React.createElement(StarIconButton, {
     isStarred: isStarred,
     handleToggle: onStarToggle
   })), creatorRender, !!agentDescription && /*#__PURE__*/React.createElement(Box, {

package/dist/types/ui/agent-avatar/generated-avatars/assets/jsm-rovo-service-agent.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { AvatarIconProps } from './types';
+declare const _default: ({ size: _size, primaryColor: _primaryColor, secondaryColor: _secondaryColor, }: AvatarIconProps) => React.JSX.Element;
+export default _default;

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

@@ -20,6 +20,7 @@ type GeneratedAvatarProps = {
     agentNamedId?: string;
     agentId?: string;
     agentIdentityAccountId?: string | null | undefined;
+    isRovoDev?: boolean;
     size: SizeType;
     onLoad?: () => void;
 };
@@ -32,7 +33,7 @@ type GeneratedAvatarProps = {
  * cd002f25-46e4-4023-80ff-32e4d90849b4
  */
 export declare const getNumberIdForAvatar: ({ agentIdentityAccountId, agentId, }: Pick<GeneratedAvatarProps, "agentIdentityAccountId" | "agentId">) => number | null;
-export declare const AgentBanner: ({ agentNamedId, agentId, agentIdentityAccountId, height, fillSpace, }: Pick<GeneratedAvatarProps, "agentId" | "agentNamedId" | "agentIdentityAccountId"> & {
+export declare const AgentBanner: ({ agentNamedId, agentId, agentIdentityAccountId, isRovoDev, height, fillSpace, }: Pick<GeneratedAvatarProps, "agentId" | "agentNamedId" | "agentIdentityAccountId" | "isRovoDev"> & {
     height?: number;
     fillSpace?: boolean;
 }) => JSX.Element;

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

@@ -9,6 +9,7 @@ type AgentAvatarProps = {
     agentIdentityAccountId?: string | null | undefined;
     agentNamedId?: string;
     agentId?: string;
+    isRovoDev?: boolean;
     isForgeAgent?: boolean;
     forgeAgentIconUrl?: string | null;
 };
@@ -19,5 +20,5 @@ type AgentAvatarProps = {
  * @param agentIdentityAccountId - This is Atlassian identity account ID for the agent(aaid). This id is prioritised to generate random avatar for non OOTB agents
  * @param agentId - This is agent.id
  */
-export declare const AgentAvatar: ({ imageUrl, size, label, name, agentId, agentIdentityAccountId, agentNamedId, showBorder, isForgeAgent, forgeAgentIconUrl, }: AgentAvatarProps) => JSX.Element;
+export declare const AgentAvatar: ({ imageUrl, size, label, name, agentId, agentIdentityAccountId, agentNamedId, showBorder, isRovoDev, isForgeAgent, forgeAgentIconUrl, }: AgentAvatarProps) => JSX.Element;
 export {};

package/dist/types/ui/agent-profile-info/index.d.ts

@@ -37,13 +37,15 @@ export declare const AgentProfileCreator: ({ creator, onCreatorLinkClick, isLoad
     isLoading: boolean;
     onCreatorLinkClick: () => void;
 }) => JSX.Element | null;
-export declare const AgentProfileInfo: ({ agentName, agentDescription, creatorRender, starCountRender, isStarred, isHidden, onStarToggle, }: {
+export declare const AgentProfileInfo: ({ agentName, agentDescription, creatorRender, starCountRender, headingRender, isStarred, isHidden, onStarToggle, showStarButton, }: {
     agentName: string;
     agentDescription?: string | null;
     creatorRender: React.ReactNode;
     starCountRender: React.ReactNode;
+    headingRender?: React.ReactNode;
     isStarred: boolean;
     isHidden: boolean;
     onStarToggle: () => void;
+    showStarButton?: boolean;
 }) => JSX.Element;
 export {};

package/dist/types-ts4.5/ui/agent-avatar/generated-avatars/assets/jsm-rovo-service-agent.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { AvatarIconProps } from './types';
+declare const _default: ({ size: _size, primaryColor: _primaryColor, secondaryColor: _secondaryColor, }: AvatarIconProps) => React.JSX.Element;
+export default _default;

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

@@ -20,6 +20,7 @@ type GeneratedAvatarProps = {
     agentNamedId?: string;
     agentId?: string;
     agentIdentityAccountId?: string | null | undefined;
+    isRovoDev?: boolean;
     size: SizeType;
     onLoad?: () => void;
 };
@@ -32,7 +33,7 @@ type GeneratedAvatarProps = {
  * cd002f25-46e4-4023-80ff-32e4d90849b4
  */
 export declare const getNumberIdForAvatar: ({ agentIdentityAccountId, agentId, }: Pick<GeneratedAvatarProps, "agentIdentityAccountId" | "agentId">) => number | null;
-export declare const AgentBanner: ({ agentNamedId, agentId, agentIdentityAccountId, height, fillSpace, }: Pick<GeneratedAvatarProps, "agentId" | "agentNamedId" | "agentIdentityAccountId"> & {
+export declare const AgentBanner: ({ agentNamedId, agentId, agentIdentityAccountId, isRovoDev, height, fillSpace, }: Pick<GeneratedAvatarProps, "agentId" | "agentNamedId" | "agentIdentityAccountId" | "isRovoDev"> & {
     height?: number;
     fillSpace?: boolean;
 }) => JSX.Element;

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

@@ -9,6 +9,7 @@ type AgentAvatarProps = {
     agentIdentityAccountId?: string | null | undefined;
     agentNamedId?: string;
     agentId?: string;
+    isRovoDev?: boolean;
     isForgeAgent?: boolean;
     forgeAgentIconUrl?: string | null;
 };
@@ -19,5 +20,5 @@ type AgentAvatarProps = {
  * @param agentIdentityAccountId - This is Atlassian identity account ID for the agent(aaid). This id is prioritised to generate random avatar for non OOTB agents
  * @param agentId - This is agent.id
  */
-export declare const AgentAvatar: ({ imageUrl, size, label, name, agentId, agentIdentityAccountId, agentNamedId, showBorder, isForgeAgent, forgeAgentIconUrl, }: AgentAvatarProps) => JSX.Element;
+export declare const AgentAvatar: ({ imageUrl, size, label, name, agentId, agentIdentityAccountId, agentNamedId, showBorder, isRovoDev, isForgeAgent, forgeAgentIconUrl, }: AgentAvatarProps) => JSX.Element;
 export {};

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

@@ -37,13 +37,15 @@ export declare const AgentProfileCreator: ({ creator, onCreatorLinkClick, isLoad
     isLoading: boolean;
     onCreatorLinkClick: () => void;
 }) => JSX.Element | null;
-export declare const AgentProfileInfo: ({ agentName, agentDescription, creatorRender, starCountRender, isStarred, isHidden, onStarToggle, }: {
+export declare const AgentProfileInfo: ({ agentName, agentDescription, creatorRender, starCountRender, headingRender, isStarred, isHidden, onStarToggle, showStarButton, }: {
     agentName: string;
     agentDescription?: string | null;
     creatorRender: React.ReactNode;
     starCountRender: React.ReactNode;
+    headingRender?: React.ReactNode;
     isStarred: boolean;
     isHidden: boolean;
     onStarToggle: () => void;
+    showStarButton?: boolean;
 }) => JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/rovo-agent-components",
-	"version": "3.20.0",
+	"version": "3.22.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",
@@ -45,7 +45,7 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^17.1.0",
 		"@atlaskit/skeleton": "^2.1.0",
-		"@atlaskit/tokens": "^10.0.0",
+		"@atlaskit/tokens": "^10.1.0",
 		"@atlaskit/tooltip": "^20.14.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.6",
@@ -127,6 +127,9 @@
 		"rovo_agent_empty_state_refresh": {
 			"type": "boolean"
 		},
+		"rovo_dev_themed_identity_card": {
+			"type": "boolean"
+		},
 		"rovo_agents_agent_verification": {
 			"type": "boolean"
 		}