@atlaskit/rovo-agent-components 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/rovo-agent-components
 
+## 0.3.0
+
+### Minor Changes
+
+- [#129108](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/129108)
+  [`62b35c6098cf0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/62b35c6098cf0) -
+  Use generated agent avatar in browse-agent, view-agent and agent-selector
+
 ## 0.2.0
 
 ### Minor Changes

package/dist/cjs/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "AgentAvatar", {
     return _agentAvatar.AgentAvatar;
   }
 });
+Object.defineProperty(exports, "AgentBanner", {
+  enumerable: true,
+  get: function get() {
+    return _generatedAvatars.AgentBanner;
+  }
+});
 Object.defineProperty(exports, "AgentConversationStarters", {
   enumerable: true,
   get: function get() {
@@ -62,4 +68,5 @@ var _starIconButton = require("./common/ui/star-icon-button");
 var _agentConversationStarters = require("./ui/agent-conversation-starters");
 var _chatPill = require("./common/ui/chat-pill");
 var _chatIcon = require("./common/ui/chat-icon");
-var _agentAvatar = require("./ui/agent-avatar");
+var _agentAvatar = require("./ui/agent-avatar");
+var _generatedAvatars = require("./ui/agent-avatar/generated-avatars");

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

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GenericAvatar = void 0;
+var _react = _interopRequireDefault(require("react"));
+/* eslint-disable @atlaskit/ui-styling-standard/enforce-style-prop */
+
+var GenericAvatar = exports.GenericAvatar = function GenericAvatar(_ref) {
+  var size = _ref.size,
+    primaryColor = _ref.primaryColor,
+    secondaryColor = _ref.secondaryColor;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 42 48",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M19.0069 1.14541C20.241 0.436192 21.759 0.436193 22.9931 1.14541L39.9931 10.9152C41.2346 11.6287 42 12.9514 42 14.3833V33.891C42 35.3229 41.2346 36.6456 39.9931 37.3591L22.9931 47.1289C21.759 47.8381 20.241 47.8381 19.0069 47.1289L2.00691 37.3591C0.765414 36.6456 0 35.3229 0 33.891V14.3833C0 12.9514 0.765415 11.6287 2.00691 10.9152L19.0069 1.14541Z",
+    fill: primaryColor
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M29.2653 16.6133C30.0565 16.9889 31.0505 16.3475 31.5218 17.1391C30.9191 16.8907 30.9991 20.086 31.9931 19.3291C32.1131 18.8321 32.4015 18.8928 31.8931 18.7224C32.7472 18.7166 31.9531 18.1677 31.9817 18.0897C32.4472 18.0781 31.8388 17.8123 32.2816 17.9048C32.5386 17.8528 31.7874 17.1941 32.2959 17.3703C32.4587 16.6538 33.2527 16.6595 33.0756 16.2233C33.0842 16.5209 35.7235 16.5902 34.9922 15.4519C34.5295 15.475 34.5895 14.9492 34.5209 15.6339C34.381 14.7846 34.0696 15.6339 33.9954 15.6137C33.9268 15.137 33.7897 15.7957 33.8097 15.3306C33.7412 15.0792 33.2956 15.8824 33.3841 15.3566C31.8446 14.9492 33.1071 14.5101 32.2187 13.626C32.1302 13.2158 32.3473 11.8839 31.3961 12.0081C30.145 12.3722 31.6046 14.6459 30.862 15.0417C30.5306 15.3421 30.0593 15.7206 29.4338 15.4635C29.1253 15.4577 28.7283 16.7318 29.2624 16.6162L29.2653 16.6133Z",
+    fill: secondaryColor
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M28.7902 28.7278L27.201 27.1386C24.0002 29.572 21.081 32.2138 18.4782 35.0894C14.793 32.0629 11.4735 28.5422 8.47053 24.5922L21.0314 12.0314C24.0681 17.5482 28.2305 21.4951 33.1965 24.3214L28.7902 28.7278ZM19.6147 24.8358L19.6147 28.5444L19.6151 28.5444L21.5003 28.5444L21.5003 24.8358H24.9944L20.5575 20.3988L16.1206 24.8358L19.6147 24.8358ZM27.2009 27.1393L28.79 28.7284L20.698 36.8205C19.9435 36.2635 19.2038 35.6863 18.478 35.0901C21.0806 32.2146 23.9998 29.5729 27.2009 27.1393Z",
+    fill: "#CCE0FF"
+  }));
+};

package/dist/cjs/ui/agent-avatar/generated-avatars/assets/product-requirement.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProductRequirementAvatar = void 0;
+var _react = _interopRequireDefault(require("react"));
+/* eslint-disable @atlaskit/ui-styling-standard/enforce-style-prop */
+
+var ProductRequirementAvatar = exports.ProductRequirementAvatar = function ProductRequirementAvatar(_ref) {
+  var size = _ref.size,
+    primaryColor = _ref.primaryColor,
+    secondaryColor = _ref.secondaryColor;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 42 48",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M19.0069 1.14541C20.241 0.436192 21.759 0.436193 22.9931 1.14541L39.9931 10.9152C41.2346 11.6287 42 12.9514 42 14.3833V33.891C42 35.3229 41.2346 36.6456 39.9931 37.3591L22.9931 47.1289C21.759 47.8381 20.241 47.8381 19.0069 47.1289L2.00691 37.3591C0.765414 36.6456 0 35.3229 0 33.891V14.3833C0 12.9514 0.765415 11.6287 2.00691 10.9152L19.0069 1.14541Z",
+    fill: primaryColor
+  }), /*#__PURE__*/_react.default.createElement("mask", {
+    id: "mask0_602_29348",
+    style: {
+      maskType: 'alpha'
+    },
+    maskUnits: "userSpaceOnUse",
+    x: "0",
+    y: "0",
+    width: "42",
+    height: "48"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M19.0069 1.14541C20.241 0.436192 21.759 0.436193 22.9931 1.14541L39.9931 10.9152C41.2346 11.6287 42 12.9514 42 14.3833V33.891C42 35.3229 41.2346 36.6456 39.9931 37.3591L22.9931 47.1289C21.759 47.8381 20.241 47.8381 19.0069 47.1289L2.00691 37.3591C0.765414 36.6456 0 35.3229 0 33.891V14.3833C0 12.9514 0.765415 11.6287 2.00691 10.9152L19.0069 1.14541Z",
+    fill: primaryColor
+  })), /*#__PURE__*/_react.default.createElement("g", {
+    mask: "url(#mask0_602_29348)"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M37 35.9716C35.7885 34.4863 32.8225 32.1398 31.2873 30.7577C31.3918 30.2472 27.5902 29.0198 29.0053 28.9476C27.4596 26.6424 24.1646 24.5486 21.1412 22.3774C22.3892 20.263 23.8827 17.6742 24.196 16.0652C25.021 15.467 34.3682 -0.721128 30.739 2.39891L30.6137 2.20294C29.0158 4.0337 27.538 7.0042 26.5301 9.51055C25.8252 9.25269 23.867 14.9771 23.6947 13.3835C21.9976 15.1111 20.4676 17.8289 18.9585 20.7324C16.2483 18.2002 15.6426 17.3596 12.9376 16.3488C12.9376 16.3488 11.4024 14.6316 10.3058 14.4975C8.82801 13.2649 8.21714 11.79 6.0814 11.2536C4.50962 11.3568 4.79155 12.2335 6.02913 13.399C7.38681 14.0901 8.03439 15.4979 9.23019 16.4159C9.45473 16.1426 9.44943 16.3488 9.27711 16.452C10.2954 16.8078 10.3737 17.6794 11.5016 17.767C11.5016 17.767 11.2614 17.8908 11.2562 17.8908C13.1622 19.3606 15.4807 21.3718 17.7626 23.0479C16.1073 26.2865 14.4311 29.4994 12.5565 31.619H12.6556C12.6086 31.6499 12.5774 31.7995 12.4677 31.7789C12.2275 33.3982 11.7314 34.2388 11.4286 35.4816C11.4286 35.4816 9.77328 37.8075 9.76806 39.0916L7.51741 42.7222C6.47304 44.2074 6.89075 48.3022 9.17792 44.2796C9.71055 42.5107 11.1309 41.2885 11.9455 39.6279C11.6322 39.4784 11.8359 39.401 11.9769 39.5609C12.2275 38.3026 13.1413 37.9157 13.1048 36.6213C14.9846 34.4863 17.6425 28.5712 19.4702 25.1417C19.2926 25.2139 19.794 24.4506 19.7679 24.4454C19.7679 24.4454 19.7731 24.4352 19.7783 24.43C19.794 24.4403 19.8097 24.4506 19.8254 24.4609C19.8254 24.4403 19.8305 24.4197 19.8514 24.4094C19.8514 24.3991 20.5668 24.8013 20.3579 24.7703C21.6372 26.1628 24.598 28.4422 26.2534 29.2003C26.3317 29.025 26.666 29.2467 26.5824 29.2776C26.1229 29.1796 37.8459 39.2876 36.8015 36.0799L37 35.9767V35.9716Z",
+    fill: secondaryColor
+  })), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M9.41632 37H29.3148V11H19.2549L9.41632 20.6911V37Z",
+    fill: "white"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M19.259 11V20.6624H9.44501L19.259 11Z",
+    fill: "#101214"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M35 21.313L23.133 33.7411L16.9966 27.1391L19.6412 24.4436L23.1684 28.2389L32.3908 18.5804L35 21.313Z",
+    fill: "white"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M29.3147 21.8019L23.1684 28.2389L19.6412 24.4436L16.9966 27.1391L23.133 33.7411L29.3147 27.2671V21.8019Z",
+    fill: "#101214"
+  }));
+};

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TOTAL_AVATAR_COMBINATIONS = exports.GeneratedAvatar = void 0;
+exports.TOTAL_AVATAR_COMBINATIONS = exports.GeneratedAvatar = exports.AgentBanner = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _avatar = require("@atlaskit/avatar");
 var _primitives = require("@atlaskit/primitives");
@@ -17,31 +17,36 @@ var _culture = require("./assets/culture");
 var _customerInsight = require("./assets/customer-insight");
 var _decisionDirector = require("./assets/decision-director");
 var _featureFlagAvatar = require("./assets/feature-flag-avatar");
+var _genericAvatar = require("./assets/generic-avatar");
 var _hireWriter = require("./assets/hire-writer");
 var _marketingMessageMaestro = require("./assets/marketing-message-maestro");
 var _myUserManual = require("./assets/my-user-manual");
 var _okrOracle = require("./assets/okr-oracle");
 var _opsAgent = require("./assets/ops-agent");
 var _pitchPerfector = require("./assets/pitch-perfector");
+var _productRequirement = require("./assets/product-requirement");
 var _releaseNotes = require("./assets/release-notes");
 var _researchScout = require("./assets/research-scout");
 var _socialMediaScribe = require("./assets/social-media-scribe");
 var _teamConnection = require("./assets/team-connection");
-var blueColor = {
-  primary: '#357DE8',
-  secondary: '#669DF1'
-};
-var colorList = [{
+var yellowColor = {
   primary: '#FCA700',
   secondary: '#FFC716'
-}, {
+};
+var purpleColor = {
   primary: '#BF63F3',
   secondary: '#D8A0F7'
-}, {
+};
+var greenColor = {
   primary: '#82B536',
   secondary: '#B3DF72'
-}, blueColor];
-var avatarList = [_customerInsight.CustomerInsightAvatar, _backlogBuddy.BacklogBuddyAvatar, _decisionDirector.DecisionDirectorAvatar, _commsCrafter.CommsCrafterAvatar, _autoDev.AutoDevAvatar, _okrOracle.OkrOracleAvatar, _culture.CultureAvatar, _socialMediaScribe.SocialMediaScribeAvatar, _teamConnection.TeamConnectionAvatar, _hireWriter.HireWriterAvatar, _opsAgent.OpsAgentAvatar, _researchScout.ResearchScoutAvatar, _releaseNotes.ReleaseNotesAvatar, _myUserManual.MyUserManualAvatar, _pitchPerfector.PitchPerfectorAvatar, _autoDev.AutoDevAvatar, _autoFix.AutoFixAvatar, _autoReview.AutoReviewAvatar, _marketingMessageMaestro.MarketingMessageMaestroAvatar, _featureFlagAvatar.FeatureFlagAvatar];
+};
+var blueColor = {
+  primary: '#357DE8',
+  secondary: '#669DF1'
+};
+var colorList = [yellowColor, purpleColor, greenColor, blueColor];
+var avatarList = [_customerInsight.CustomerInsightAvatar, _backlogBuddy.BacklogBuddyAvatar, _decisionDirector.DecisionDirectorAvatar, _commsCrafter.CommsCrafterAvatar, _autoDev.AutoDevAvatar, _okrOracle.OkrOracleAvatar, _culture.CultureAvatar, _socialMediaScribe.SocialMediaScribeAvatar, _teamConnection.TeamConnectionAvatar, _hireWriter.HireWriterAvatar, _opsAgent.OpsAgentAvatar, _researchScout.ResearchScoutAvatar, _releaseNotes.ReleaseNotesAvatar, _myUserManual.MyUserManualAvatar, _pitchPerfector.PitchPerfectorAvatar, _autoDev.AutoDevAvatar, _autoFix.AutoFixAvatar, _autoReview.AutoReviewAvatar, _marketingMessageMaestro.MarketingMessageMaestroAvatar, _featureFlagAvatar.FeatureFlagAvatar, _productRequirement.ProductRequirementAvatar];
 var TOTAL_AVATAR_COMBINATIONS = exports.TOTAL_AVATAR_COMBINATIONS = avatarList.length * colorList.length;
 var imageStyles = (0, _primitives.xcss)({
   objectFit: 'cover',
@@ -51,43 +56,118 @@ var imageStyles = (0, _primitives.xcss)({
   justifyContent: 'center',
   alignItems: 'center'
 });
-var GeneratedAvatar = exports.GeneratedAvatar = function GeneratedAvatar(_ref) {
+var outOfTheBoxAgentAvatar = {
+  decision_director_agent: {
+    getRender: function getRender(size) {
+      return /*#__PURE__*/_react.default.createElement(_decisionDirector.DecisionDirectorAvatar, {
+        size: _avatar.AVATAR_SIZES[size],
+        primaryColor: greenColor.primary,
+        secondaryColor: greenColor.secondary
+      });
+    },
+    color: greenColor
+  },
+  user_manual_writer_agent: {
+    getRender: function getRender(size) {
+      return /*#__PURE__*/_react.default.createElement(_myUserManual.MyUserManualAvatar, {
+        size: _avatar.AVATAR_SIZES[size],
+        primaryColor: yellowColor.primary,
+        secondaryColor: yellowColor.secondary
+      });
+    },
+    color: yellowColor
+  },
+  product_requirements_expert_agent: {
+    getRender: function getRender(size) {
+      return /*#__PURE__*/_react.default.createElement(_productRequirement.ProductRequirementAvatar, {
+        size: _avatar.AVATAR_SIZES[size],
+        primaryColor: yellowColor.primary,
+        secondaryColor: yellowColor.secondary
+      });
+    },
+    color: yellowColor
+  }
+};
+var getAvatarRender = function getAvatarRender(_ref) {
   var agentNamedId = _ref.agentNamedId,
     agentId = _ref.agentId,
     size = _ref.size;
-  var getAvatarBasedOnAgentId = function getAvatarBasedOnAgentId() {
-    if (agentId) {
-      var agentIdNumber = parseInt(agentId.replace(/-/g, ''), 16);
-      /**
-       * this create all possible combinations of avatars and colors
-       * e.g. [[avatar1, color1], [avatar1, color2], [avatar2, color1], [avatar2, color2]]
-       * then choose 1 based on agentId
-       */
-      var totalCombinations = avatarList.length * colorList.length;
-      var combinationIndex = agentIdNumber % totalCombinations;
-      var avatarIndex = Math.floor(combinationIndex / colorList.length);
-      var colorIndex = combinationIndex % colorList.length;
-      var Avatar = avatarList[avatarIndex];
-      var _color = colorList[colorIndex];
-      return {
-        render: /*#__PURE__*/_react.default.createElement(Avatar, {
-          size: _avatar.AVATAR_SIZES[size],
-          primaryColor: _color.primary,
-          secondaryColor: _color.secondary
-        }),
-        color: _color
-      };
+  if (typeof agentNamedId === 'string' && outOfTheBoxAgentAvatar[agentNamedId]) {
+    var ootbAvatarResult = outOfTheBoxAgentAvatar[agentNamedId];
+    return {
+      render: ootbAvatarResult.getRender(size),
+      color: ootbAvatarResult.color
+    };
+  }
+  if (agentId) {
+    // Take the last 8 characters of the agentId because JS can't handle 16 digit numbers
+    var agentIdSubset = agentId.slice(-8).replace(/-/g, '');
+    var agentIdNumber = parseInt(agentIdSubset, 16);
+    if (isNaN(agentIdNumber)) {
+      agentIdNumber = 0;
     }
 
-    // TODO return default avatar
+    /**
+     * this create all possible combinations of avatars and colors
+     * e.g. [[avatar1, color1], [avatar1, color2], [avatar2, color1], [avatar2, color2]]
+     * then choose 1 based on agentId
+     */
+    var totalCombinations = avatarList.length * colorList.length;
+    var combinationIndex = agentIdNumber % totalCombinations;
+    var avatarIndex = Math.floor(combinationIndex / colorList.length);
+    var colorIndex = combinationIndex % colorList.length;
+    var Avatar = avatarList[avatarIndex];
+    var color = colorList[colorIndex];
     return {
-      render: null,
-      color: blueColor
+      render: /*#__PURE__*/_react.default.createElement(Avatar, {
+        size: _avatar.AVATAR_SIZES[size],
+        primaryColor: color.primary,
+        secondaryColor: color.secondary
+      }),
+      color: color
     };
+  }
+  return {
+    render: /*#__PURE__*/_react.default.createElement(_genericAvatar.GenericAvatar, {
+      size: _avatar.AVATAR_SIZES[size],
+      primaryColor: blueColor.primary,
+      secondaryColor: blueColor.secondary
+    }),
+    color: blueColor
   };
-  var _getAvatarBasedOnAgen = getAvatarBasedOnAgentId(),
-    render = _getAvatarBasedOnAgen.render,
-    color = _getAvatarBasedOnAgen.color;
+};
+var bannerStyles = (0, _primitives.xcss)({
+  width: '100%'
+});
+var AgentBanner = exports.AgentBanner = function AgentBanner(_ref2) {
+  var agentNamedId = _ref2.agentNamedId,
+    agentId = _ref2.agentId,
+    height = _ref2.height;
+  var _getAvatarRender = getAvatarRender({
+      agentNamedId: agentNamedId,
+      agentId: agentId,
+      size: 'medium'
+    }),
+    color = _getAvatarRender.color;
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: bannerStyles,
+    style: {
+      backgroundColor: color.primary,
+      height: "".concat(height, "px")
+    }
+  });
+};
+var GeneratedAvatar = exports.GeneratedAvatar = function GeneratedAvatar(_ref3) {
+  var agentNamedId = _ref3.agentNamedId,
+    agentId = _ref3.agentId,
+    size = _ref3.size;
+  var _getAvatarRender2 = getAvatarRender({
+      agentNamedId: agentNamedId,
+      agentId: agentId,
+      size: size
+    }),
+    render = _getAvatarRender2.render,
+    color = _getAvatarRender2.color;
   return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     xcss: imageStyles,
     style: {

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

@@ -5,10 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AgentAvatar = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _avatar = require("@atlaskit/avatar");
 var _primitives = require("@atlaskit/primitives");
 var _generatedAvatars = require("./generated-avatars");
+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; }
 /**
  * This solution has been derived from this codepen: https://codepen.io/anyen-ltovn/pen/qBYYzea
  */
@@ -42,18 +45,20 @@ var AgentAvatar = exports.AgentAvatar = function AgentAvatar(_ref) {
     label = _ref.label,
     name = _ref.name,
     agentId = _ref.agentId,
-    agentNamedId = _ref.agentNamedId;
+    agentNamedId = _ref.agentNamedId,
+    _ref$showBorder = _ref.showBorder,
+    showBorder = _ref$showBorder === void 0 ? true : _ref$showBorder;
   return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     "aria-label": label,
     xcss: agentAvatarStyles,
-    style: {
+    style: _objectSpread({
       // 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/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/design-system/ensure-design-token-usage
+      width: _avatar.AVATAR_SIZES[size]
+    }, showBorder ? {
       backgroundColor: '#fff'
-    }
+    } : {})
   }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     xcss: innerShapeStyles
   }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {

package/dist/es2019/index.js

@@ -3,4 +3,5 @@ export { StarIconButton } from './common/ui/star-icon-button';
 export { AgentConversationStarters, getConversationStarters } from './ui/agent-conversation-starters';
 export { ChatPill } from './common/ui/chat-pill';
 export { ChatPillIcon } from './common/ui/chat-icon';
-export { AgentAvatar } from './ui/agent-avatar';
+export { AgentAvatar } from './ui/agent-avatar';
+export { AgentBanner } from './ui/agent-avatar/generated-avatars';

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

@@ -0,0 +1,24 @@
+/* eslint-disable @atlaskit/ui-styling-standard/enforce-style-prop */
+import React from 'react';
+export const GenericAvatar = ({
+  size,
+  primaryColor,
+  secondaryColor
+}) => /*#__PURE__*/React.createElement("svg", {
+  width: size,
+  height: size,
+  viewBox: "0 0 42 48",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M19.0069 1.14541C20.241 0.436192 21.759 0.436193 22.9931 1.14541L39.9931 10.9152C41.2346 11.6287 42 12.9514 42 14.3833V33.891C42 35.3229 41.2346 36.6456 39.9931 37.3591L22.9931 47.1289C21.759 47.8381 20.241 47.8381 19.0069 47.1289L2.00691 37.3591C0.765414 36.6456 0 35.3229 0 33.891V14.3833C0 12.9514 0.765415 11.6287 2.00691 10.9152L19.0069 1.14541Z",
+  fill: primaryColor
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M29.2653 16.6133C30.0565 16.9889 31.0505 16.3475 31.5218 17.1391C30.9191 16.8907 30.9991 20.086 31.9931 19.3291C32.1131 18.8321 32.4015 18.8928 31.8931 18.7224C32.7472 18.7166 31.9531 18.1677 31.9817 18.0897C32.4472 18.0781 31.8388 17.8123 32.2816 17.9048C32.5386 17.8528 31.7874 17.1941 32.2959 17.3703C32.4587 16.6538 33.2527 16.6595 33.0756 16.2233C33.0842 16.5209 35.7235 16.5902 34.9922 15.4519C34.5295 15.475 34.5895 14.9492 34.5209 15.6339C34.381 14.7846 34.0696 15.6339 33.9954 15.6137C33.9268 15.137 33.7897 15.7957 33.8097 15.3306C33.7412 15.0792 33.2956 15.8824 33.3841 15.3566C31.8446 14.9492 33.1071 14.5101 32.2187 13.626C32.1302 13.2158 32.3473 11.8839 31.3961 12.0081C30.145 12.3722 31.6046 14.6459 30.862 15.0417C30.5306 15.3421 30.0593 15.7206 29.4338 15.4635C29.1253 15.4577 28.7283 16.7318 29.2624 16.6162L29.2653 16.6133Z",
+  fill: secondaryColor
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M28.7902 28.7278L27.201 27.1386C24.0002 29.572 21.081 32.2138 18.4782 35.0894C14.793 32.0629 11.4735 28.5422 8.47053 24.5922L21.0314 12.0314C24.0681 17.5482 28.2305 21.4951 33.1965 24.3214L28.7902 28.7278ZM19.6147 24.8358L19.6147 28.5444L19.6151 28.5444L21.5003 28.5444L21.5003 24.8358H24.9944L20.5575 20.3988L16.1206 24.8358L19.6147 24.8358ZM27.2009 27.1393L28.79 28.7284L20.698 36.8205C19.9435 36.2635 19.2038 35.6863 18.478 35.0901C21.0806 32.2146 23.9998 29.5729 27.2009 27.1393Z",
+  fill: "#CCE0FF"
+}));

package/dist/es2019/ui/agent-avatar/generated-avatars/assets/product-requirement.js

@@ -0,0 +1,50 @@
+/* eslint-disable @atlaskit/ui-styling-standard/enforce-style-prop */
+import React from 'react';
+export const ProductRequirementAvatar = ({
+  size,
+  primaryColor,
+  secondaryColor
+}) => /*#__PURE__*/React.createElement("svg", {
+  width: size,
+  height: size,
+  viewBox: "0 0 42 48",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M19.0069 1.14541C20.241 0.436192 21.759 0.436193 22.9931 1.14541L39.9931 10.9152C41.2346 11.6287 42 12.9514 42 14.3833V33.891C42 35.3229 41.2346 36.6456 39.9931 37.3591L22.9931 47.1289C21.759 47.8381 20.241 47.8381 19.0069 47.1289L2.00691 37.3591C0.765414 36.6456 0 35.3229 0 33.891V14.3833C0 12.9514 0.765415 11.6287 2.00691 10.9152L19.0069 1.14541Z",
+  fill: primaryColor
+}), /*#__PURE__*/React.createElement("mask", {
+  id: "mask0_602_29348",
+  style: {
+    maskType: 'alpha'
+  },
+  maskUnits: "userSpaceOnUse",
+  x: "0",
+  y: "0",
+  width: "42",
+  height: "48"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M19.0069 1.14541C20.241 0.436192 21.759 0.436193 22.9931 1.14541L39.9931 10.9152C41.2346 11.6287 42 12.9514 42 14.3833V33.891C42 35.3229 41.2346 36.6456 39.9931 37.3591L22.9931 47.1289C21.759 47.8381 20.241 47.8381 19.0069 47.1289L2.00691 37.3591C0.765414 36.6456 0 35.3229 0 33.891V14.3833C0 12.9514 0.765415 11.6287 2.00691 10.9152L19.0069 1.14541Z",
+  fill: primaryColor
+})), /*#__PURE__*/React.createElement("g", {
+  mask: "url(#mask0_602_29348)"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M37 35.9716C35.7885 34.4863 32.8225 32.1398 31.2873 30.7577C31.3918 30.2472 27.5902 29.0198 29.0053 28.9476C27.4596 26.6424 24.1646 24.5486 21.1412 22.3774C22.3892 20.263 23.8827 17.6742 24.196 16.0652C25.021 15.467 34.3682 -0.721128 30.739 2.39891L30.6137 2.20294C29.0158 4.0337 27.538 7.0042 26.5301 9.51055C25.8252 9.25269 23.867 14.9771 23.6947 13.3835C21.9976 15.1111 20.4676 17.8289 18.9585 20.7324C16.2483 18.2002 15.6426 17.3596 12.9376 16.3488C12.9376 16.3488 11.4024 14.6316 10.3058 14.4975C8.82801 13.2649 8.21714 11.79 6.0814 11.2536C4.50962 11.3568 4.79155 12.2335 6.02913 13.399C7.38681 14.0901 8.03439 15.4979 9.23019 16.4159C9.45473 16.1426 9.44943 16.3488 9.27711 16.452C10.2954 16.8078 10.3737 17.6794 11.5016 17.767C11.5016 17.767 11.2614 17.8908 11.2562 17.8908C13.1622 19.3606 15.4807 21.3718 17.7626 23.0479C16.1073 26.2865 14.4311 29.4994 12.5565 31.619H12.6556C12.6086 31.6499 12.5774 31.7995 12.4677 31.7789C12.2275 33.3982 11.7314 34.2388 11.4286 35.4816C11.4286 35.4816 9.77328 37.8075 9.76806 39.0916L7.51741 42.7222C6.47304 44.2074 6.89075 48.3022 9.17792 44.2796C9.71055 42.5107 11.1309 41.2885 11.9455 39.6279C11.6322 39.4784 11.8359 39.401 11.9769 39.5609C12.2275 38.3026 13.1413 37.9157 13.1048 36.6213C14.9846 34.4863 17.6425 28.5712 19.4702 25.1417C19.2926 25.2139 19.794 24.4506 19.7679 24.4454C19.7679 24.4454 19.7731 24.4352 19.7783 24.43C19.794 24.4403 19.8097 24.4506 19.8254 24.4609C19.8254 24.4403 19.8305 24.4197 19.8514 24.4094C19.8514 24.3991 20.5668 24.8013 20.3579 24.7703C21.6372 26.1628 24.598 28.4422 26.2534 29.2003C26.3317 29.025 26.666 29.2467 26.5824 29.2776C26.1229 29.1796 37.8459 39.2876 36.8015 36.0799L37 35.9767V35.9716Z",
+  fill: secondaryColor
+})), /*#__PURE__*/React.createElement("path", {
+  d: "M9.41632 37H29.3148V11H19.2549L9.41632 20.6911V37Z",
+  fill: "white"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M19.259 11V20.6624H9.44501L19.259 11Z",
+  fill: "#101214"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M35 21.313L23.133 33.7411L16.9966 27.1391L19.6412 24.4436L23.1684 28.2389L32.3908 18.5804L35 21.313Z",
+  fill: "white"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M29.3147 21.8019L23.1684 28.2389L19.6412 24.4436L16.9966 27.1391L23.133 33.7411L29.3147 27.2671V21.8019Z",
+  fill: "#101214"
+}));

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

@@ -10,31 +10,36 @@ import { CultureAvatar } from './assets/culture';
 import { CustomerInsightAvatar } from './assets/customer-insight';
 import { DecisionDirectorAvatar } from './assets/decision-director';
 import { FeatureFlagAvatar } from './assets/feature-flag-avatar';
+import { GenericAvatar } from './assets/generic-avatar';
 import { HireWriterAvatar } from './assets/hire-writer';
 import { MarketingMessageMaestroAvatar } from './assets/marketing-message-maestro';
 import { MyUserManualAvatar } from './assets/my-user-manual';
 import { OkrOracleAvatar } from './assets/okr-oracle';
 import { OpsAgentAvatar } from './assets/ops-agent';
 import { PitchPerfectorAvatar } from './assets/pitch-perfector';
+import { ProductRequirementAvatar } from './assets/product-requirement';
 import { ReleaseNotesAvatar } from './assets/release-notes';
 import { ResearchScoutAvatar } from './assets/research-scout';
 import { SocialMediaScribeAvatar } from './assets/social-media-scribe';
 import { TeamConnectionAvatar } from './assets/team-connection';
-const blueColor = {
-  primary: '#357DE8',
-  secondary: '#669DF1'
-};
-const colorList = [{
+const yellowColor = {
   primary: '#FCA700',
   secondary: '#FFC716'
-}, {
+};
+const purpleColor = {
   primary: '#BF63F3',
   secondary: '#D8A0F7'
-}, {
+};
+const greenColor = {
   primary: '#82B536',
   secondary: '#B3DF72'
-}, blueColor];
-const avatarList = [CustomerInsightAvatar, BacklogBuddyAvatar, DecisionDirectorAvatar, CommsCrafterAvatar, AutoDevAvatar, OkrOracleAvatar, CultureAvatar, SocialMediaScribeAvatar, TeamConnectionAvatar, HireWriterAvatar, OpsAgentAvatar, ResearchScoutAvatar, ReleaseNotesAvatar, MyUserManualAvatar, PitchPerfectorAvatar, AutoDevAvatar, AutoFixAvatar, AutoReviewAvatar, MarketingMessageMaestroAvatar, FeatureFlagAvatar];
+};
+const blueColor = {
+  primary: '#357DE8',
+  secondary: '#669DF1'
+};
+const colorList = [yellowColor, purpleColor, greenColor, blueColor];
+const avatarList = [CustomerInsightAvatar, BacklogBuddyAvatar, DecisionDirectorAvatar, CommsCrafterAvatar, AutoDevAvatar, OkrOracleAvatar, CultureAvatar, SocialMediaScribeAvatar, TeamConnectionAvatar, HireWriterAvatar, OpsAgentAvatar, ResearchScoutAvatar, ReleaseNotesAvatar, MyUserManualAvatar, PitchPerfectorAvatar, AutoDevAvatar, AutoFixAvatar, AutoReviewAvatar, MarketingMessageMaestroAvatar, FeatureFlagAvatar, ProductRequirementAvatar];
 export const TOTAL_AVATAR_COMBINATIONS = avatarList.length * colorList.length;
 const imageStyles = xcss({
   objectFit: 'cover',
@@ -44,45 +49,117 @@ const imageStyles = xcss({
   justifyContent: 'center',
   alignItems: 'center'
 });
-export const GeneratedAvatar = ({
+const outOfTheBoxAgentAvatar = {
+  decision_director_agent: {
+    getRender: size => /*#__PURE__*/React.createElement(DecisionDirectorAvatar, {
+      size: AVATAR_SIZES[size],
+      primaryColor: greenColor.primary,
+      secondaryColor: greenColor.secondary
+    }),
+    color: greenColor
+  },
+  user_manual_writer_agent: {
+    getRender: size => /*#__PURE__*/React.createElement(MyUserManualAvatar, {
+      size: AVATAR_SIZES[size],
+      primaryColor: yellowColor.primary,
+      secondaryColor: yellowColor.secondary
+    }),
+    color: yellowColor
+  },
+  product_requirements_expert_agent: {
+    getRender: size => /*#__PURE__*/React.createElement(ProductRequirementAvatar, {
+      size: AVATAR_SIZES[size],
+      primaryColor: yellowColor.primary,
+      secondaryColor: yellowColor.secondary
+    }),
+    color: yellowColor
+  }
+};
+const getAvatarRender = ({
   agentNamedId,
   agentId,
   size
 }) => {
-  const getAvatarBasedOnAgentId = () => {
-    if (agentId) {
-      const agentIdNumber = parseInt(agentId.replace(/-/g, ''), 16);
-      /**
-       * this create all possible combinations of avatars and colors
-       * e.g. [[avatar1, color1], [avatar1, color2], [avatar2, color1], [avatar2, color2]]
-       * then choose 1 based on agentId
-       */
-      const totalCombinations = avatarList.length * colorList.length;
-      const combinationIndex = agentIdNumber % totalCombinations;
-      const avatarIndex = Math.floor(combinationIndex / colorList.length);
-      const colorIndex = combinationIndex % colorList.length;
-      const Avatar = avatarList[avatarIndex];
-      const color = colorList[colorIndex];
-      return {
-        render: /*#__PURE__*/React.createElement(Avatar, {
-          size: AVATAR_SIZES[size],
-          primaryColor: color.primary,
-          secondaryColor: color.secondary
-        }),
-        color
-      };
+  if (typeof agentNamedId === 'string' && outOfTheBoxAgentAvatar[agentNamedId]) {
+    const ootbAvatarResult = outOfTheBoxAgentAvatar[agentNamedId];
+    return {
+      render: ootbAvatarResult.getRender(size),
+      color: ootbAvatarResult.color
+    };
+  }
+  if (agentId) {
+    // Take the last 8 characters of the agentId because JS can't handle 16 digit numbers
+    const agentIdSubset = agentId.slice(-8).replace(/-/g, '');
+    let agentIdNumber = parseInt(agentIdSubset, 16);
+    if (isNaN(agentIdNumber)) {
+      agentIdNumber = 0;
     }
 
-    // TODO return default avatar
+    /**
+     * this create all possible combinations of avatars and colors
+     * e.g. [[avatar1, color1], [avatar1, color2], [avatar2, color1], [avatar2, color2]]
+     * then choose 1 based on agentId
+     */
+    const totalCombinations = avatarList.length * colorList.length;
+    const combinationIndex = agentIdNumber % totalCombinations;
+    const avatarIndex = Math.floor(combinationIndex / colorList.length);
+    const colorIndex = combinationIndex % colorList.length;
+    const Avatar = avatarList[avatarIndex];
+    const color = colorList[colorIndex];
     return {
-      render: null,
-      color: blueColor
+      render: /*#__PURE__*/React.createElement(Avatar, {
+        size: AVATAR_SIZES[size],
+        primaryColor: color.primary,
+        secondaryColor: color.secondary
+      }),
+      color
     };
+  }
+  return {
+    render: /*#__PURE__*/React.createElement(GenericAvatar, {
+      size: AVATAR_SIZES[size],
+      primaryColor: blueColor.primary,
+      secondaryColor: blueColor.secondary
+    }),
+    color: blueColor
   };
+};
+const bannerStyles = xcss({
+  width: '100%'
+});
+export const AgentBanner = ({
+  agentNamedId,
+  agentId,
+  height
+}) => {
+  const {
+    color
+  } = getAvatarRender({
+    agentNamedId,
+    agentId,
+    size: 'medium'
+  });
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: bannerStyles,
+    style: {
+      backgroundColor: color.primary,
+      height: `${height}px`
+    }
+  });
+};
+export const GeneratedAvatar = ({
+  agentNamedId,
+  agentId,
+  size
+}) => {
   const {
     render,
     color
-  } = getAvatarBasedOnAgentId();
+  } = getAvatarRender({
+    agentNamedId,
+    agentId,
+    size
+  });
   return /*#__PURE__*/React.createElement(Box, {
     xcss: imageStyles,
     style: {

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

@@ -35,7 +35,8 @@ export const AgentAvatar = ({
   label,
   name,
   agentId,
-  agentNamedId
+  agentNamedId,
+  showBorder = true
 }) => {
   return /*#__PURE__*/React.createElement(Box, {
     "aria-label": label,
@@ -46,7 +47,9 @@ export const AgentAvatar = ({
       // 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/design-system/ensure-design-token-usage
-      backgroundColor: '#fff'
+      ...(showBorder ? {
+        backgroundColor: '#fff'
+      } : {})
     }
   }, /*#__PURE__*/React.createElement(Box, {
     xcss: innerShapeStyles

package/dist/esm/index.js

@@ -3,4 +3,5 @@ export { StarIconButton } from './common/ui/star-icon-button';
 export { AgentConversationStarters, getConversationStarters } from './ui/agent-conversation-starters';
 export { ChatPill } from './common/ui/chat-pill';
 export { ChatPillIcon } from './common/ui/chat-icon';
-export { AgentAvatar } from './ui/agent-avatar';
+export { AgentAvatar } from './ui/agent-avatar';
+export { AgentBanner } from './ui/agent-avatar/generated-avatars';

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

@@ -0,0 +1,25 @@
+/* eslint-disable @atlaskit/ui-styling-standard/enforce-style-prop */
+import React from 'react';
+export var GenericAvatar = function GenericAvatar(_ref) {
+  var size = _ref.size,
+    primaryColor = _ref.primaryColor,
+    secondaryColor = _ref.secondaryColor;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 42 48",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M19.0069 1.14541C20.241 0.436192 21.759 0.436193 22.9931 1.14541L39.9931 10.9152C41.2346 11.6287 42 12.9514 42 14.3833V33.891C42 35.3229 41.2346 36.6456 39.9931 37.3591L22.9931 47.1289C21.759 47.8381 20.241 47.8381 19.0069 47.1289L2.00691 37.3591C0.765414 36.6456 0 35.3229 0 33.891V14.3833C0 12.9514 0.765415 11.6287 2.00691 10.9152L19.0069 1.14541Z",
+    fill: primaryColor
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M29.2653 16.6133C30.0565 16.9889 31.0505 16.3475 31.5218 17.1391C30.9191 16.8907 30.9991 20.086 31.9931 19.3291C32.1131 18.8321 32.4015 18.8928 31.8931 18.7224C32.7472 18.7166 31.9531 18.1677 31.9817 18.0897C32.4472 18.0781 31.8388 17.8123 32.2816 17.9048C32.5386 17.8528 31.7874 17.1941 32.2959 17.3703C32.4587 16.6538 33.2527 16.6595 33.0756 16.2233C33.0842 16.5209 35.7235 16.5902 34.9922 15.4519C34.5295 15.475 34.5895 14.9492 34.5209 15.6339C34.381 14.7846 34.0696 15.6339 33.9954 15.6137C33.9268 15.137 33.7897 15.7957 33.8097 15.3306C33.7412 15.0792 33.2956 15.8824 33.3841 15.3566C31.8446 14.9492 33.1071 14.5101 32.2187 13.626C32.1302 13.2158 32.3473 11.8839 31.3961 12.0081C30.145 12.3722 31.6046 14.6459 30.862 15.0417C30.5306 15.3421 30.0593 15.7206 29.4338 15.4635C29.1253 15.4577 28.7283 16.7318 29.2624 16.6162L29.2653 16.6133Z",
+    fill: secondaryColor
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M28.7902 28.7278L27.201 27.1386C24.0002 29.572 21.081 32.2138 18.4782 35.0894C14.793 32.0629 11.4735 28.5422 8.47053 24.5922L21.0314 12.0314C24.0681 17.5482 28.2305 21.4951 33.1965 24.3214L28.7902 28.7278ZM19.6147 24.8358L19.6147 28.5444L19.6151 28.5444L21.5003 28.5444L21.5003 24.8358H24.9944L20.5575 20.3988L16.1206 24.8358L19.6147 24.8358ZM27.2009 27.1393L28.79 28.7284L20.698 36.8205C19.9435 36.2635 19.2038 35.6863 18.478 35.0901C21.0806 32.2146 23.9998 29.5729 27.2009 27.1393Z",
+    fill: "#CCE0FF"
+  }));
+};

package/dist/esm/ui/agent-avatar/generated-avatars/assets/product-requirement.js

@@ -0,0 +1,51 @@
+/* eslint-disable @atlaskit/ui-styling-standard/enforce-style-prop */
+import React from 'react';
+export var ProductRequirementAvatar = function ProductRequirementAvatar(_ref) {
+  var size = _ref.size,
+    primaryColor = _ref.primaryColor,
+    secondaryColor = _ref.secondaryColor;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 42 48",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M19.0069 1.14541C20.241 0.436192 21.759 0.436193 22.9931 1.14541L39.9931 10.9152C41.2346 11.6287 42 12.9514 42 14.3833V33.891C42 35.3229 41.2346 36.6456 39.9931 37.3591L22.9931 47.1289C21.759 47.8381 20.241 47.8381 19.0069 47.1289L2.00691 37.3591C0.765414 36.6456 0 35.3229 0 33.891V14.3833C0 12.9514 0.765415 11.6287 2.00691 10.9152L19.0069 1.14541Z",
+    fill: primaryColor
+  }), /*#__PURE__*/React.createElement("mask", {
+    id: "mask0_602_29348",
+    style: {
+      maskType: 'alpha'
+    },
+    maskUnits: "userSpaceOnUse",
+    x: "0",
+    y: "0",
+    width: "42",
+    height: "48"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M19.0069 1.14541C20.241 0.436192 21.759 0.436193 22.9931 1.14541L39.9931 10.9152C41.2346 11.6287 42 12.9514 42 14.3833V33.891C42 35.3229 41.2346 36.6456 39.9931 37.3591L22.9931 47.1289C21.759 47.8381 20.241 47.8381 19.0069 47.1289L2.00691 37.3591C0.765414 36.6456 0 35.3229 0 33.891V14.3833C0 12.9514 0.765415 11.6287 2.00691 10.9152L19.0069 1.14541Z",
+    fill: primaryColor
+  })), /*#__PURE__*/React.createElement("g", {
+    mask: "url(#mask0_602_29348)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M37 35.9716C35.7885 34.4863 32.8225 32.1398 31.2873 30.7577C31.3918 30.2472 27.5902 29.0198 29.0053 28.9476C27.4596 26.6424 24.1646 24.5486 21.1412 22.3774C22.3892 20.263 23.8827 17.6742 24.196 16.0652C25.021 15.467 34.3682 -0.721128 30.739 2.39891L30.6137 2.20294C29.0158 4.0337 27.538 7.0042 26.5301 9.51055C25.8252 9.25269 23.867 14.9771 23.6947 13.3835C21.9976 15.1111 20.4676 17.8289 18.9585 20.7324C16.2483 18.2002 15.6426 17.3596 12.9376 16.3488C12.9376 16.3488 11.4024 14.6316 10.3058 14.4975C8.82801 13.2649 8.21714 11.79 6.0814 11.2536C4.50962 11.3568 4.79155 12.2335 6.02913 13.399C7.38681 14.0901 8.03439 15.4979 9.23019 16.4159C9.45473 16.1426 9.44943 16.3488 9.27711 16.452C10.2954 16.8078 10.3737 17.6794 11.5016 17.767C11.5016 17.767 11.2614 17.8908 11.2562 17.8908C13.1622 19.3606 15.4807 21.3718 17.7626 23.0479C16.1073 26.2865 14.4311 29.4994 12.5565 31.619H12.6556C12.6086 31.6499 12.5774 31.7995 12.4677 31.7789C12.2275 33.3982 11.7314 34.2388 11.4286 35.4816C11.4286 35.4816 9.77328 37.8075 9.76806 39.0916L7.51741 42.7222C6.47304 44.2074 6.89075 48.3022 9.17792 44.2796C9.71055 42.5107 11.1309 41.2885 11.9455 39.6279C11.6322 39.4784 11.8359 39.401 11.9769 39.5609C12.2275 38.3026 13.1413 37.9157 13.1048 36.6213C14.9846 34.4863 17.6425 28.5712 19.4702 25.1417C19.2926 25.2139 19.794 24.4506 19.7679 24.4454C19.7679 24.4454 19.7731 24.4352 19.7783 24.43C19.794 24.4403 19.8097 24.4506 19.8254 24.4609C19.8254 24.4403 19.8305 24.4197 19.8514 24.4094C19.8514 24.3991 20.5668 24.8013 20.3579 24.7703C21.6372 26.1628 24.598 28.4422 26.2534 29.2003C26.3317 29.025 26.666 29.2467 26.5824 29.2776C26.1229 29.1796 37.8459 39.2876 36.8015 36.0799L37 35.9767V35.9716Z",
+    fill: secondaryColor
+  })), /*#__PURE__*/React.createElement("path", {
+    d: "M9.41632 37H29.3148V11H19.2549L9.41632 20.6911V37Z",
+    fill: "white"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M19.259 11V20.6624H9.44501L19.259 11Z",
+    fill: "#101214"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M35 21.313L23.133 33.7411L16.9966 27.1391L19.6412 24.4436L23.1684 28.2389L32.3908 18.5804L35 21.313Z",
+    fill: "white"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M29.3147 21.8019L23.1684 28.2389L19.6412 24.4436L16.9966 27.1391L23.133 33.7411L29.3147 27.2671V21.8019Z",
+    fill: "#101214"
+  }));
+};

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

@@ -10,31 +10,36 @@ import { CultureAvatar } from './assets/culture';
 import { CustomerInsightAvatar } from './assets/customer-insight';
 import { DecisionDirectorAvatar } from './assets/decision-director';
 import { FeatureFlagAvatar } from './assets/feature-flag-avatar';
+import { GenericAvatar } from './assets/generic-avatar';
 import { HireWriterAvatar } from './assets/hire-writer';
 import { MarketingMessageMaestroAvatar } from './assets/marketing-message-maestro';
 import { MyUserManualAvatar } from './assets/my-user-manual';
 import { OkrOracleAvatar } from './assets/okr-oracle';
 import { OpsAgentAvatar } from './assets/ops-agent';
 import { PitchPerfectorAvatar } from './assets/pitch-perfector';
+import { ProductRequirementAvatar } from './assets/product-requirement';
 import { ReleaseNotesAvatar } from './assets/release-notes';
 import { ResearchScoutAvatar } from './assets/research-scout';
 import { SocialMediaScribeAvatar } from './assets/social-media-scribe';
 import { TeamConnectionAvatar } from './assets/team-connection';
-var blueColor = {
-  primary: '#357DE8',
-  secondary: '#669DF1'
-};
-var colorList = [{
+var yellowColor = {
   primary: '#FCA700',
   secondary: '#FFC716'
-}, {
+};
+var purpleColor = {
   primary: '#BF63F3',
   secondary: '#D8A0F7'
-}, {
+};
+var greenColor = {
   primary: '#82B536',
   secondary: '#B3DF72'
-}, blueColor];
-var avatarList = [CustomerInsightAvatar, BacklogBuddyAvatar, DecisionDirectorAvatar, CommsCrafterAvatar, AutoDevAvatar, OkrOracleAvatar, CultureAvatar, SocialMediaScribeAvatar, TeamConnectionAvatar, HireWriterAvatar, OpsAgentAvatar, ResearchScoutAvatar, ReleaseNotesAvatar, MyUserManualAvatar, PitchPerfectorAvatar, AutoDevAvatar, AutoFixAvatar, AutoReviewAvatar, MarketingMessageMaestroAvatar, FeatureFlagAvatar];
+};
+var blueColor = {
+  primary: '#357DE8',
+  secondary: '#669DF1'
+};
+var colorList = [yellowColor, purpleColor, greenColor, blueColor];
+var avatarList = [CustomerInsightAvatar, BacklogBuddyAvatar, DecisionDirectorAvatar, CommsCrafterAvatar, AutoDevAvatar, OkrOracleAvatar, CultureAvatar, SocialMediaScribeAvatar, TeamConnectionAvatar, HireWriterAvatar, OpsAgentAvatar, ResearchScoutAvatar, ReleaseNotesAvatar, MyUserManualAvatar, PitchPerfectorAvatar, AutoDevAvatar, AutoFixAvatar, AutoReviewAvatar, MarketingMessageMaestroAvatar, FeatureFlagAvatar, ProductRequirementAvatar];
 export var TOTAL_AVATAR_COMBINATIONS = avatarList.length * colorList.length;
 var imageStyles = xcss({
   objectFit: 'cover',
@@ -44,43 +49,118 @@ var imageStyles = xcss({
   justifyContent: 'center',
   alignItems: 'center'
 });
-export var GeneratedAvatar = function GeneratedAvatar(_ref) {
+var outOfTheBoxAgentAvatar = {
+  decision_director_agent: {
+    getRender: function getRender(size) {
+      return /*#__PURE__*/React.createElement(DecisionDirectorAvatar, {
+        size: AVATAR_SIZES[size],
+        primaryColor: greenColor.primary,
+        secondaryColor: greenColor.secondary
+      });
+    },
+    color: greenColor
+  },
+  user_manual_writer_agent: {
+    getRender: function getRender(size) {
+      return /*#__PURE__*/React.createElement(MyUserManualAvatar, {
+        size: AVATAR_SIZES[size],
+        primaryColor: yellowColor.primary,
+        secondaryColor: yellowColor.secondary
+      });
+    },
+    color: yellowColor
+  },
+  product_requirements_expert_agent: {
+    getRender: function getRender(size) {
+      return /*#__PURE__*/React.createElement(ProductRequirementAvatar, {
+        size: AVATAR_SIZES[size],
+        primaryColor: yellowColor.primary,
+        secondaryColor: yellowColor.secondary
+      });
+    },
+    color: yellowColor
+  }
+};
+var getAvatarRender = function getAvatarRender(_ref) {
   var agentNamedId = _ref.agentNamedId,
     agentId = _ref.agentId,
     size = _ref.size;
-  var getAvatarBasedOnAgentId = function getAvatarBasedOnAgentId() {
-    if (agentId) {
-      var agentIdNumber = parseInt(agentId.replace(/-/g, ''), 16);
-      /**
-       * this create all possible combinations of avatars and colors
-       * e.g. [[avatar1, color1], [avatar1, color2], [avatar2, color1], [avatar2, color2]]
-       * then choose 1 based on agentId
-       */
-      var totalCombinations = avatarList.length * colorList.length;
-      var combinationIndex = agentIdNumber % totalCombinations;
-      var avatarIndex = Math.floor(combinationIndex / colorList.length);
-      var colorIndex = combinationIndex % colorList.length;
-      var Avatar = avatarList[avatarIndex];
-      var _color = colorList[colorIndex];
-      return {
-        render: /*#__PURE__*/React.createElement(Avatar, {
-          size: AVATAR_SIZES[size],
-          primaryColor: _color.primary,
-          secondaryColor: _color.secondary
-        }),
-        color: _color
-      };
+  if (typeof agentNamedId === 'string' && outOfTheBoxAgentAvatar[agentNamedId]) {
+    var ootbAvatarResult = outOfTheBoxAgentAvatar[agentNamedId];
+    return {
+      render: ootbAvatarResult.getRender(size),
+      color: ootbAvatarResult.color
+    };
+  }
+  if (agentId) {
+    // Take the last 8 characters of the agentId because JS can't handle 16 digit numbers
+    var agentIdSubset = agentId.slice(-8).replace(/-/g, '');
+    var agentIdNumber = parseInt(agentIdSubset, 16);
+    if (isNaN(agentIdNumber)) {
+      agentIdNumber = 0;
     }
 
-    // TODO return default avatar
+    /**
+     * this create all possible combinations of avatars and colors
+     * e.g. [[avatar1, color1], [avatar1, color2], [avatar2, color1], [avatar2, color2]]
+     * then choose 1 based on agentId
+     */
+    var totalCombinations = avatarList.length * colorList.length;
+    var combinationIndex = agentIdNumber % totalCombinations;
+    var avatarIndex = Math.floor(combinationIndex / colorList.length);
+    var colorIndex = combinationIndex % colorList.length;
+    var Avatar = avatarList[avatarIndex];
+    var color = colorList[colorIndex];
     return {
-      render: null,
-      color: blueColor
+      render: /*#__PURE__*/React.createElement(Avatar, {
+        size: AVATAR_SIZES[size],
+        primaryColor: color.primary,
+        secondaryColor: color.secondary
+      }),
+      color: color
     };
+  }
+  return {
+    render: /*#__PURE__*/React.createElement(GenericAvatar, {
+      size: AVATAR_SIZES[size],
+      primaryColor: blueColor.primary,
+      secondaryColor: blueColor.secondary
+    }),
+    color: blueColor
   };
-  var _getAvatarBasedOnAgen = getAvatarBasedOnAgentId(),
-    render = _getAvatarBasedOnAgen.render,
-    color = _getAvatarBasedOnAgen.color;
+};
+var bannerStyles = xcss({
+  width: '100%'
+});
+export var AgentBanner = function AgentBanner(_ref2) {
+  var agentNamedId = _ref2.agentNamedId,
+    agentId = _ref2.agentId,
+    height = _ref2.height;
+  var _getAvatarRender = getAvatarRender({
+      agentNamedId: agentNamedId,
+      agentId: agentId,
+      size: 'medium'
+    }),
+    color = _getAvatarRender.color;
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: bannerStyles,
+    style: {
+      backgroundColor: color.primary,
+      height: "".concat(height, "px")
+    }
+  });
+};
+export var GeneratedAvatar = function GeneratedAvatar(_ref3) {
+  var agentNamedId = _ref3.agentNamedId,
+    agentId = _ref3.agentId,
+    size = _ref3.size;
+  var _getAvatarRender2 = getAvatarRender({
+      agentNamedId: agentNamedId,
+      agentId: agentId,
+      size: size
+    }),
+    render = _getAvatarRender2.render,
+    color = _getAvatarRender2.color;
   return /*#__PURE__*/React.createElement(Box, {
     xcss: imageStyles,
     style: {

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

@@ -1,3 +1,6 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
 import React from 'react';
 import { AVATAR_SIZES } from '@atlaskit/avatar';
 import { Box, xcss } from '@atlaskit/primitives';
@@ -36,18 +39,20 @@ export var AgentAvatar = function AgentAvatar(_ref) {
     label = _ref.label,
     name = _ref.name,
     agentId = _ref.agentId,
-    agentNamedId = _ref.agentNamedId;
+    agentNamedId = _ref.agentNamedId,
+    _ref$showBorder = _ref.showBorder,
+    showBorder = _ref$showBorder === void 0 ? true : _ref$showBorder;
   return /*#__PURE__*/React.createElement(Box, {
     "aria-label": label,
     xcss: agentAvatarStyles,
-    style: {
+    style: _objectSpread({
       // 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/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/design-system/ensure-design-token-usage
+      width: AVATAR_SIZES[size]
+    }, showBorder ? {
       backgroundColor: '#fff'
-    }
+    } : {})
   }, /*#__PURE__*/React.createElement(Box, {
     xcss: innerShapeStyles
   }, /*#__PURE__*/React.createElement(Box, {

package/dist/types/index.d.ts

@@ -4,3 +4,4 @@ export { AgentConversationStarters, type AgentConversationStartersProps, getConv
 export { ChatPill, type ChatPillProps } from './common/ui/chat-pill';
 export { ChatPillIcon } from './common/ui/chat-icon';
 export { AgentAvatar } from './ui/agent-avatar';
+export { AgentBanner } from './ui/agent-avatar/generated-avatars';

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type AvatarIconProps } from './types';
+export declare const GenericAvatar: ({ size, primaryColor, secondaryColor }: AvatarIconProps) => JSX.Element;

package/dist/types/ui/agent-avatar/generated-avatars/assets/product-requirement.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type AvatarIconProps } from './types';
+export declare const ProductRequirementAvatar: ({ size, primaryColor, secondaryColor, }: AvatarIconProps) => JSX.Element;

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

@@ -1,10 +1,13 @@
 /// <reference types="react" />
 import { type SizeType } from '@atlaskit/avatar';
 export declare const TOTAL_AVATAR_COMBINATIONS: number;
-type Props = {
+type GeneratedAvatarProps = {
     agentNamedId?: string;
     agentId?: string;
     size: SizeType;
 };
-export declare const GeneratedAvatar: ({ agentNamedId, agentId, size }: Props) => JSX.Element;
+export declare const AgentBanner: ({ agentNamedId, agentId, height, }: Pick<GeneratedAvatarProps, "agentNamedId" | "agentId"> & {
+    height: number;
+}) => JSX.Element;
+export declare const GeneratedAvatar: ({ agentNamedId, agentId, size }: GeneratedAvatarProps) => JSX.Element;
 export {};

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

@@ -7,6 +7,7 @@ type AgentAvatarProps = {
     name?: string;
     agentNamedId?: string;
     agentId?: string;
+    showBorder?: boolean;
 };
-export declare const AgentAvatar: ({ imageUrl, size, label, name, agentId, agentNamedId, }: AgentAvatarProps) => JSX.Element;
+export declare const AgentAvatar: ({ imageUrl, size, label, name, agentId, agentNamedId, showBorder, }: AgentAvatarProps) => JSX.Element;
 export {};

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

@@ -4,3 +4,4 @@ export { AgentConversationStarters, type AgentConversationStartersProps, getConv
 export { ChatPill, type ChatPillProps } from './common/ui/chat-pill';
 export { ChatPillIcon } from './common/ui/chat-icon';
 export { AgentAvatar } from './ui/agent-avatar';
+export { AgentBanner } from './ui/agent-avatar/generated-avatars';

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type AvatarIconProps } from './types';
+export declare const GenericAvatar: ({ size, primaryColor, secondaryColor }: AvatarIconProps) => JSX.Element;

package/dist/types-ts4.5/ui/agent-avatar/generated-avatars/assets/product-requirement.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type AvatarIconProps } from './types';
+export declare const ProductRequirementAvatar: ({ size, primaryColor, secondaryColor, }: AvatarIconProps) => JSX.Element;

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

@@ -1,10 +1,13 @@
 /// <reference types="react" />
 import { type SizeType } from '@atlaskit/avatar';
 export declare const TOTAL_AVATAR_COMBINATIONS: number;
-type Props = {
+type GeneratedAvatarProps = {
     agentNamedId?: string;
     agentId?: string;
     size: SizeType;
 };
-export declare const GeneratedAvatar: ({ agentNamedId, agentId, size }: Props) => JSX.Element;
+export declare const AgentBanner: ({ agentNamedId, agentId, height, }: Pick<GeneratedAvatarProps, "agentNamedId" | "agentId"> & {
+    height: number;
+}) => JSX.Element;
+export declare const GeneratedAvatar: ({ agentNamedId, agentId, size }: GeneratedAvatarProps) => JSX.Element;
 export {};

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

@@ -7,6 +7,7 @@ type AgentAvatarProps = {
     name?: string;
     agentNamedId?: string;
     agentId?: string;
+    showBorder?: boolean;
 };
-export declare const AgentAvatar: ({ imageUrl, size, label, name, agentId, agentNamedId, }: AgentAvatarProps) => JSX.Element;
+export declare const AgentAvatar: ({ imageUrl, size, label, name, agentId, agentNamedId, showBorder, }: AgentAvatarProps) => JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/rovo-agent-components",
-	"version": "0.2.0",
+	"version": "0.3.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",