@atlaskit/rovo-agent-components 3.19.0 → 3.21.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/rovo-agent-components
 
+## 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
+
+- [`85b20848660df`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/85b20848660df) -
+  [ux] Display agent verified icon
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.19.0
 
 ### Minor Changes

package/agent-verified/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/rovo-agent-components/agent-verified",
+  "main": "../dist/cjs/ui/agent-verified/index.js",
+  "module": "../dist/esm/ui/agent-verified/index.js",
+  "module:es2019": "../dist/es2019/ui/agent-verified/index.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/ui/agent-verified/index.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/ui/agent-verified/index.d.ts"
+      ]
+    }
+  }
+}

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
   }
 };
 

package/dist/cjs/ui/agent-verified/__generated__/agentVerified_AtlaskitRovoAgentComponents.graphql.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/**
+ * @generated SignedSource<<80d05744924cbc0bdc011e1a63323c52>>
+ * @lightSyntaxTransform
+ * @nogrep
+ * @codegen-command: yarn relay
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+var node = {
+  "argumentDefinitions": [],
+  "kind": "Fragment",
+  "name": "agentVerified_AtlaskitRovoAgentComponents",
+  "selections": [{
+    "kind": "ScalarField",
+    "name": "isVerified"
+  }],
+  "type": "AgentStudioAssistant"
+};
+node.hash = "7c196c0efd61b63c8a3de1c1b32e11ec";
+var _default = exports.default = node;

package/dist/cjs/ui/agent-verified/agent-verified.stories.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MediumSize = 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.AgentVerified, {
+      agentRef: {}
+    });
+  }
+};
+var MediumSize = exports.MediumSize = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement(_index.AgentVerified, {
+      agentRef: {},
+      size: "medium"
+    });
+  }
+};

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

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AgentVerified = void 0;
+var _agentVerified_AtlaskitRovoAgentComponents2 = _interopRequireDefault(require("./__generated__/agentVerified_AtlaskitRovoAgentComponents.graphql"));
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _reactRelay = require("react-relay");
+var _statusVerified = _interopRequireDefault(require("@atlaskit/icon/core/status-verified"));
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _messages = _interopRequireDefault(require("./messages"));
+var AgentVerified = exports.AgentVerified = function AgentVerified(_ref) {
+  var agentRef = _ref.agentRef,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'small' : _ref$size;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var data = (0, _reactRelay.useFragment)(_agentVerified_AtlaskitRovoAgentComponents2.default, agentRef);
+  if (!(data !== null && data !== void 0 && data.isVerified)) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    content: formatMessage(_messages.default.verifiedAgentTooltip)
+  }, /*#__PURE__*/_react.default.createElement(_statusVerified.default, {
+    color: "var(--ds-icon-accent-blue, #357DE8)",
+    label: formatMessage(_messages.default.verifiedIconLabel),
+    size: size
+  }));
+};

package/dist/cjs/ui/agent-verified/messages.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactIntlNext = require("react-intl-next");
+var _default = exports.default = (0, _reactIntlNext.defineMessages)({
+  verifiedAgentTooltip: {
+    id: 'agent-studio-ui-components.agent-verified.tooltip',
+    defaultMessage: 'This agent has been verified by your organization.',
+    description: 'Verified icon tooltip shown when hovering over the verified icon'
+  },
+  verifiedIconLabel: {
+    id: 'agent-studio-ui-components.agent-verified.label',
+    defaultMessage: 'Agent verified',
+    description: 'Verified icon label for the agent studio side navigation'
+  }
+});

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
   }
 };
 

package/dist/es2019/ui/agent-verified/__generated__/agentVerified_AtlaskitRovoAgentComponents.graphql.js

@@ -0,0 +1,23 @@
+/**
+ * @generated SignedSource<<80d05744924cbc0bdc011e1a63323c52>>
+ * @lightSyntaxTransform
+ * @nogrep
+ * @codegen-command: yarn relay
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+const node = {
+  "argumentDefinitions": [],
+  "kind": "Fragment",
+  "name": "agentVerified_AtlaskitRovoAgentComponents",
+  "selections": [{
+    "kind": "ScalarField",
+    "name": "isVerified"
+  }],
+  "type": "AgentStudioAssistant"
+};
+node.hash = "7c196c0efd61b63c8a3de1c1b32e11ec";
+export default node;

package/dist/es2019/ui/agent-verified/agent-verified.stories.js

@@ -0,0 +1,23 @@
+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 { AgentVerified } from './index';
+const commonDeps = [injectable(useFragment, () => ({
+  isVerified: true
+}))];
+const meta = {
+  decorators: [withUseIntl(), withDi(commonDeps)]
+};
+export default meta;
+export const Default = {
+  render: () => /*#__PURE__*/React.createElement(AgentVerified, {
+    agentRef: {}
+  })
+};
+export const MediumSize = {
+  render: () => /*#__PURE__*/React.createElement(AgentVerified, {
+    agentRef: {},
+    size: "medium"
+  })
+};

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

@@ -0,0 +1,26 @@
+import _agentVerified_AtlaskitRovoAgentComponents from "./__generated__/agentVerified_AtlaskitRovoAgentComponents.graphql";
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { graphql, useFragment } from 'react-relay';
+import VerifiedIcon from '@atlaskit/icon/core/status-verified';
+import Tooltip from '@atlaskit/tooltip';
+import messages from './messages';
+export const AgentVerified = ({
+  agentRef,
+  size = 'small'
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const data = useFragment(_agentVerified_AtlaskitRovoAgentComponents, agentRef);
+  if (!(data !== null && data !== void 0 && data.isVerified)) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    content: formatMessage(messages.verifiedAgentTooltip)
+  }, /*#__PURE__*/React.createElement(VerifiedIcon, {
+    color: "var(--ds-icon-accent-blue, #357DE8)",
+    label: formatMessage(messages.verifiedIconLabel),
+    size: size
+  }));
+};

package/dist/es2019/ui/agent-verified/messages.js

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl-next';
+export default defineMessages({
+  verifiedAgentTooltip: {
+    id: 'agent-studio-ui-components.agent-verified.tooltip',
+    defaultMessage: 'This agent has been verified by your organization.',
+    description: 'Verified icon tooltip shown when hovering over the verified icon'
+  },
+  verifiedIconLabel: {
+    id: 'agent-studio-ui-components.agent-verified.label',
+    defaultMessage: 'Agent verified',
+    description: 'Verified icon label for the agent studio side navigation'
+  }
+});

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
   }
 };
 

package/dist/esm/ui/agent-verified/__generated__/agentVerified_AtlaskitRovoAgentComponents.graphql.js

@@ -0,0 +1,23 @@
+/**
+ * @generated SignedSource<<80d05744924cbc0bdc011e1a63323c52>>
+ * @lightSyntaxTransform
+ * @nogrep
+ * @codegen-command: yarn relay
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+var node = {
+  "argumentDefinitions": [],
+  "kind": "Fragment",
+  "name": "agentVerified_AtlaskitRovoAgentComponents",
+  "selections": [{
+    "kind": "ScalarField",
+    "name": "isVerified"
+  }],
+  "type": "AgentStudioAssistant"
+};
+node.hash = "7c196c0efd61b63c8a3de1c1b32e11ec";
+export default node;

package/dist/esm/ui/agent-verified/agent-verified.stories.js

@@ -0,0 +1,29 @@
+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 { AgentVerified } 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(AgentVerified, {
+      agentRef: {}
+    });
+  }
+};
+export var MediumSize = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(AgentVerified, {
+      agentRef: {},
+      size: "medium"
+    });
+  }
+};

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

@@ -0,0 +1,25 @@
+import _agentVerified_AtlaskitRovoAgentComponents from "./__generated__/agentVerified_AtlaskitRovoAgentComponents.graphql";
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { graphql, useFragment } from 'react-relay';
+import VerifiedIcon from '@atlaskit/icon/core/status-verified';
+import Tooltip from '@atlaskit/tooltip';
+import messages from './messages';
+export var AgentVerified = function AgentVerified(_ref) {
+  var agentRef = _ref.agentRef,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'small' : _ref$size;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var data = useFragment(_agentVerified_AtlaskitRovoAgentComponents, agentRef);
+  if (!(data !== null && data !== void 0 && data.isVerified)) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    content: formatMessage(messages.verifiedAgentTooltip)
+  }, /*#__PURE__*/React.createElement(VerifiedIcon, {
+    color: "var(--ds-icon-accent-blue, #357DE8)",
+    label: formatMessage(messages.verifiedIconLabel),
+    size: size
+  }));
+};

package/dist/esm/ui/agent-verified/messages.js

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl-next';
+export default defineMessages({
+  verifiedAgentTooltip: {
+    id: 'agent-studio-ui-components.agent-verified.tooltip',
+    defaultMessage: 'This agent has been verified by your organization.',
+    description: 'Verified icon tooltip shown when hovering over the verified icon'
+  },
+  verifiedIconLabel: {
+    id: 'agent-studio-ui-components.agent-verified.label',
+    defaultMessage: 'Agent verified',
+    description: 'Verified icon label for the agent studio side navigation'
+  }
+});

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-verified/__generated__/agentVerified_AtlaskitRovoAgentComponents.graphql.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @generated SignedSource<<80d05744924cbc0bdc011e1a63323c52>>
+ * @lightSyntaxTransform
+ * @nogrep
+ * @codegen-command: yarn relay
+ */
+import type { ReaderFragment } from 'relay-runtime';
+import type { FragmentRefs } from "relay-runtime";
+export type agentVerified_AtlaskitRovoAgentComponents$data = {
+    readonly isVerified: boolean | null | undefined;
+    readonly " $fragmentType": "agentVerified_AtlaskitRovoAgentComponents";
+};
+export type agentVerified_AtlaskitRovoAgentComponents$key = {
+    readonly " $data"?: agentVerified_AtlaskitRovoAgentComponents$data;
+    readonly " $fragmentSpreads": FragmentRefs<"agentVerified_AtlaskitRovoAgentComponents">;
+};
+declare const node: ReaderFragment;
+export default node;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { IconSize } from '@atlaskit/icon';
+import type { agentVerified_AtlaskitRovoAgentComponents$key } from './__generated__/agentVerified_AtlaskitRovoAgentComponents.graphql';
+export declare const AgentVerified: ({ agentRef, size, }: {
+    agentRef: agentVerified_AtlaskitRovoAgentComponents$key | null;
+    size?: IconSize;
+}) => React.JSX.Element | null;

package/dist/types/ui/agent-verified/messages.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+    verifiedAgentTooltip: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    verifiedIconLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default _default;

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-verified/__generated__/agentVerified_AtlaskitRovoAgentComponents.graphql.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @generated SignedSource<<80d05744924cbc0bdc011e1a63323c52>>
+ * @lightSyntaxTransform
+ * @nogrep
+ * @codegen-command: yarn relay
+ */
+import type { ReaderFragment } from 'relay-runtime';
+import type { FragmentRefs } from "relay-runtime";
+export type agentVerified_AtlaskitRovoAgentComponents$data = {
+    readonly isVerified: boolean | null | undefined;
+    readonly " $fragmentType": "agentVerified_AtlaskitRovoAgentComponents";
+};
+export type agentVerified_AtlaskitRovoAgentComponents$key = {
+    readonly " $data"?: agentVerified_AtlaskitRovoAgentComponents$data;
+    readonly " $fragmentSpreads": FragmentRefs<"agentVerified_AtlaskitRovoAgentComponents">;
+};
+declare const node: ReaderFragment;
+export default node;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { IconSize } from '@atlaskit/icon';
+import type { agentVerified_AtlaskitRovoAgentComponents$key } from './__generated__/agentVerified_AtlaskitRovoAgentComponents.graphql';
+export declare const AgentVerified: ({ agentRef, size, }: {
+    agentRef: agentVerified_AtlaskitRovoAgentComponents$key | null;
+    size?: IconSize;
+}) => React.JSX.Element | null;

package/dist/types-ts4.5/ui/agent-verified/messages.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+    verifiedAgentTooltip: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    verifiedIconLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/rovo-agent-components",
-	"version": "3.19.0",
+	"version": "3.21.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",
@@ -51,7 +51,8 @@
 		"@compiled/react": "^0.18.6",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1",
-		"react-magnetic-di": "^3.1.4"
+		"react-magnetic-di": "^3.1.4",
+		"react-relay": "npm:atl-react-relay@0.0.0-main-39e79f66"
 	},
 	"peerDependencies": {
 		"react": "^18.2.0"
@@ -60,6 +61,7 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/ssr": "workspace:^",
+		"@atlassian/agent-studio-test-utils": "workspace:^",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
 		"@atlassian/testing-library": "^0.4.0",
 		"@testing-library/react": "^16.3.0",
@@ -104,6 +106,11 @@
 			]
 		}
 	},
+	"techstackIgnore": {
+		"stricter": [
+			"@atlassian/tangerine/project-structure"
+		]
+	},
 	"platform-feature-flags": {
 		"rovo_chat_bugfix_agent_avatar_squish": {
 			"type": "boolean"