@atlaskit/profilecard 19.17.6 → 19.18.0

package/dist/cjs/components/Agent/useSetFavouriteAgent.js

@@ -0,0 +1,85 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSetFavouriteAgent = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _rovoAgentUtils = require("../../util/rovoAgentUtils");
+var useSetFavouriteAgent = exports.useSetFavouriteAgent = function useSetFavouriteAgent(_ref) {
+  var agentId = _ref.agentId,
+    cloudId = _ref.cloudId,
+    isStarred = _ref.isStarred,
+    product = _ref.product;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isLoading = _useState2[0],
+    setIsLoading = _useState2[1];
+  var _useState3 = (0, _react.useState)(isStarred),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isFavourite = _useState4[0],
+    setIsFavourite = _useState4[1];
+  var setFavourite = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var headers;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            setIsLoading(true);
+            _context.prev = 1;
+            headers = (0, _rovoAgentUtils.createHeaders)(product, cloudId);
+            if (!isFavourite) {
+              _context.next = 8;
+              break;
+            }
+            _context.next = 6;
+            return fetch(new Request("/agents/v1/".concat(agentId, "/favourite"), {
+              method: 'POST',
+              credentials: 'include',
+              mode: 'cors',
+              headers: headers
+            })).then(function () {
+              setIsFavourite(true);
+            });
+          case 6:
+            _context.next = 10;
+            break;
+          case 8:
+            _context.next = 10;
+            return fetch(new Request("/agents/v1/".concat(agentId, "/favourite"), {
+              method: 'DELETE',
+              credentials: 'include',
+              mode: 'cors',
+              headers: headers
+            })).then(function () {
+              setIsFavourite(false);
+            });
+          case 10:
+            setIsLoading(false);
+            _context.next = 16;
+            break;
+          case 13:
+            _context.prev = 13;
+            _context.t0 = _context["catch"](1);
+            setIsLoading(false);
+          case 16:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[1, 13]]);
+    }));
+    return function setFavourite() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  return {
+    isLoading: isLoading,
+    isStarred: isFavourite,
+    // hasError: Boolean(error) || cannotLoadUser,
+    setFavourite: setFavourite
+  };
+};

package/dist/cjs/components/User/ProfileCardTrigger.js

@@ -51,7 +51,8 @@ function ProfilecardTriggerNext(_ref) {
     ariaLabelledBy = _ref.ariaLabelledBy,
     prepopulatedData = _ref.prepopulatedData,
     disabledAriaAttributes = _ref.disabledAriaAttributes,
-    onVisibilityChange = _ref.onVisibilityChange;
+    onVisibilityChange = _ref.onVisibilityChange,
+    offset = _ref.offset;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
@@ -292,6 +293,7 @@ function ProfilecardTriggerNext(_ref) {
       handleKeyboardClose(event);
     },
     placement: position,
+    offset: offset !== null && offset !== void 0 ? offset : [0, 8],
     content: function content() {
       return /*#__PURE__*/_react.default.createElement("div", wrapperProps, showLoading ? /*#__PURE__*/_react.default.createElement(LoadingView, {
         fireAnalytics: fireAnalytics

package/dist/cjs/index.js

@@ -5,6 +5,24 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "AgentProfileCard", {
+  enumerable: true,
+  get: function get() {
+    return _AgentProfileCard.default;
+  }
+});
+Object.defineProperty(exports, "AgentProfileCardResourced", {
+  enumerable: true,
+  get: function get() {
+    return _AgentProfileCardResourced.AgentProfileCardResourced;
+  }
+});
+Object.defineProperty(exports, "AgentProfileCardTrigger", {
+  enumerable: true,
+  get: function get() {
+    return _AgentProfileCardTrigger.AgentProfileCardTrigger;
+  }
+});
 Object.defineProperty(exports, "DELAY_MS_HIDE", {
   enumerable: true,
   get: function get() {
@@ -75,6 +93,7 @@ Object.defineProperty(exports, "withOuterListeners", {
 var _ProfileCardClient = _interopRequireDefault(require("./client/ProfileCardClient"));
 var _TeamProfileCardClient = _interopRequireDefault(require("./client/TeamProfileCardClient"));
 var _UserProfileCardClient = _interopRequireWildcard(require("./client/UserProfileCardClient"));
+var _AgentProfileCard = _interopRequireDefault(require("./components/Agent/AgentProfileCard"));
 var _TeamProfileCardTrigger = _interopRequireDefault(require("./components/Team/TeamProfileCardTrigger"));
 var _ProfileCard = _interopRequireDefault(require("./components/User/ProfileCard"));
 var _ProfileCardResourced = _interopRequireDefault(require("./components/User/ProfileCardResourced"));
@@ -82,6 +101,8 @@ var _ProfileCardTrigger = _interopRequireDefault(require("./components/User/Prof
 var _config = require("./util/config");
 var _withOuterListeners = _interopRequireDefault(require("./util/withOuterListeners"));
 var _TeamProfileCard = _interopRequireDefault(require("./components/Team/TeamProfileCard"));
+var _AgentProfileCardTrigger = require("./components/Agent/AgentProfileCardTrigger");
+var _AgentProfileCardResourced = require("./components/Agent/AgentProfileCardResourced");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // Avoid exporting new components in this file as they will affect the bundle size of all consumers

package/dist/cjs/util/analytics.js

@@ -45,7 +45,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread(_objectSpread({
       packageName: "@atlaskit/profilecard",
-      packageVersion: "19.17.6"
+      packageVersion: "19.18.0"
     }, attributes), {}, {
       firedAt: Math.round((0, _performance.getPageTime)())
     })

package/dist/cjs/util/rovoAgentUtils.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAAIDFromARI = exports.createHeaders = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@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) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var createHeaders = exports.createHeaders = function createHeaders(product, cloudId) {
+  var config = {
+    headers: {
+      'X-Product': product,
+      'X-Experience-Id': 'profile-card',
+      'X-Cloudid': cloudId
+    }
+  };
+  return new Headers(_objectSpread({}, config.headers || {}));
+};
+var getAAIDFromARI = exports.getAAIDFromARI = function getAAIDFromARI(ari) {
+  var matched = ari.match(/\/([a-zA-Z0-9_\|\-\:]{1,128})$/);
+  return matched ? matched[1] : undefined;
+};

package/dist/cjs/util/url.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.encodeParamsToUrl = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var encodeParamsToUrl = exports.encodeParamsToUrl = function encodeParamsToUrl(baseUrl, params) {
+  var url = new URL(baseUrl);
+  var searchParams = new URLSearchParams();
+  for (var _i = 0, _Object$entries = Object.entries(params); _i < _Object$entries.length; _i++) {
+    var _Object$entries$_i = (0, _slicedToArray2.default)(_Object$entries[_i], 2),
+      key = _Object$entries$_i[0],
+      value = _Object$entries$_i[1];
+    searchParams.append(key, String(value));
+  }
+  url.search = searchParams.toString();
+  return url.toString();
+};

package/dist/es2019/client/RovoAgentCardClient.js

@@ -8,16 +8,19 @@ export default class RovoAgentCardClient extends CachingClient {
     super(options);
     this.options = options;
   }
-  makeRequest(agentId) {
+  makeRequest(agentId, cloudId) {
     if (!this.options.productIdentifier) {
       throw new Error('Trying to fetch agents data with no specified config.productIdentifier');
     }
-    return getAgentDetailsByAgentId(agentId, this.options.productIdentifier);
+    return getAgentDetailsByAgentId(agentId, this.options.productIdentifier, cloudId);
   }
   getProfile(agentId, analytics) {
     if (!agentId) {
       return Promise.reject(new Error('agentId is missing'));
     }
+    if (!this.options.cloudId) {
+      return Promise.reject(new Error('cloudId is missing'));
+    }
     const cache = this.getCachedProfile(agentId);
     if (cache) {
       return Promise.resolve(cache);
@@ -27,7 +30,7 @@ export default class RovoAgentCardClient extends CachingClient {
       if (analytics) {
         analytics(agentRequestAnalytics('triggered'));
       }
-      this.makeRequest(agentId).then(data => {
+      this.makeRequest(agentId, this.options.cloudId || '').then(data => {
         if (this.cache) {
           this.setCachedProfile(agentId, data);
         }

package/dist/es2019/client/getAgentInfo.js

@@ -1,16 +1,6 @@
-const createHeaders = product => {
-  const config = {
-    headers: {
-      'x-product': product,
-      'x-experience-id': 'profile-card'
-    }
-  };
-  return new Headers({
-    ...(config.headers || {})
-  });
-};
-export async function getAgentDetailsByAgentId(agentId, product) {
-  const headers = createHeaders(product);
+import { createHeaders } from '../util/rovoAgentUtils';
+export async function getAgentDetailsByAgentId(agentId, product, cloudId) {
+  const headers = createHeaders(product, cloudId);
   return await fetch(new Request(`assist/agents/v1/${agentId}`, {
     method: 'GET',
     credentials: 'include',
@@ -18,8 +8,8 @@ export async function getAgentDetailsByAgentId(agentId, product) {
     headers
   })).then(response => response.json());
 }
-export async function getAgentDetailsByUserId(userId, product) {
-  const headers = createHeaders(product);
+export async function getAgentDetailsByUserId(userId, product, cloudId) {
+  const headers = createHeaders(product, cloudId);
   return await fetch(new Request(`assist/agents/v1/accountid/${userId}`, {
     method: 'GET',
     credentials: 'include',

package/dist/es2019/client/getTeamFromAGG.js

@@ -67,7 +67,7 @@ export const addHeaders = headers => {
   headers.append('X-ExperimentalApi', 'teams-beta');
   headers.append('X-ExperimentalApi', 'team-members-beta');
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "19.17.6");
+  headers.append('atl-client-version', "19.18.0");
   return headers;
 };
 export async function getTeamFromAGG(url, teamId, siteId) {

package/dist/es2019/components/Agent/Actions.js

@@ -0,0 +1,168 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl-next';
+import Button, { IconButton } from '@atlaskit/button/new';
+import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
+import MoreIcon from '@atlaskit/icon/core/migration/show-more-horizontal--more';
+import { Box, Inline, xcss } from '@atlaskit/primitives';
+import { ChatPillIcon } from '@atlaskit/rovo-agent-components';
+const chatToAgentButtonContainer = xcss({
+  width: '100%'
+});
+const buttonStyles = xcss({
+  borderRadius: '3px',
+  color: 'color.text',
+  backgroundColor: 'color.background.neutral',
+  ':hover': {
+    backgroundColor: 'color.background.neutral.hovered'
+  },
+  ':active': {
+    backgroundColor: 'color.background.neutral.pressed'
+  }
+});
+const chatToAgentButtonWrapper = xcss({
+  display: 'flex',
+  justifyContent: 'center',
+  lineHeight: '20px',
+  padding: 'space.075',
+  fontWeight: '500'
+});
+const chatPillButtonInlineStyles = xcss({
+  paddingInline: 'space.025'
+});
+const chatPillTextStyles = xcss({
+  wordBreak: 'break-word',
+  textAlign: 'left',
+  whiteSpace: 'pre-wrap'
+});
+const chatPillIconWrapper = xcss({
+  minWidth: '20px',
+  height: '20px'
+});
+const actopnsWrapperStyles = xcss({
+  borderTop: '1px',
+  borderTopStyle: 'solid',
+  borderColor: 'color.border',
+  padding: 'space.200',
+  marginBlockStart: 'space.200',
+  color: 'color.text'
+});
+const buildAgentActions = ({
+  onDuplicateAgent,
+  onCopyAgent
+}) => {
+  return [{
+    text: /*#__PURE__*/React.createElement(FormattedMessage, messages.actionDuplicate),
+    onClick: onDuplicateAgent
+  }, {
+    text: /*#__PURE__*/React.createElement(FormattedMessage, messages.actionCopyLink),
+    onClick: onCopyAgent
+  }];
+};
+const buildAgentSettings = ({
+  onEditAgent,
+  onDeleteAgent
+}) => {
+  return [{
+    text: /*#__PURE__*/React.createElement(FormattedMessage, messages.actionEdit),
+    onClick: onEditAgent
+  }, {
+    text: /*#__PURE__*/React.createElement(FormattedMessage, messages.actionDelete),
+    onClick: onDeleteAgent
+  }];
+};
+export const AgentActions = ({
+  isAgentCreatedByCurrentUser,
+  onEditAgent,
+  onDeleteAgent,
+  onDuplicateAgent,
+  onCopyAgent,
+  onChatClick
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const agentActions = buildAgentActions({
+    onDuplicateAgent,
+    onCopyAgent
+  });
+  const agentSetting = buildAgentSettings({
+    onEditAgent,
+    onDeleteAgent
+  });
+  return /*#__PURE__*/React.createElement(Inline, {
+    space: "space.100",
+    xcss: actopnsWrapperStyles
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: [chatToAgentButtonContainer, buttonStyles]
+  }, /*#__PURE__*/React.createElement(Button, {
+    shouldFitContainer: true,
+    onClick: onChatClick
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: chatToAgentButtonWrapper
+  }, /*#__PURE__*/React.createElement(Inline, {
+    space: "space.050",
+    xcss: chatPillButtonInlineStyles
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: chatPillIconWrapper
+  }, /*#__PURE__*/React.createElement(ChatPillIcon, null)), /*#__PURE__*/React.createElement(Box, {
+    xcss: chatPillTextStyles
+  }, formatMessage(messages.actionChatToAgent)))))), /*#__PURE__*/React.createElement(DropdownMenu, {
+    trigger: ({
+      triggerRef,
+      ...props
+    }) => /*#__PURE__*/React.createElement(Box, {
+      xcss: buttonStyles
+    }, /*#__PURE__*/React.createElement(IconButton, _extends({}, props, {
+      icon: MoreIcon,
+      label: "more",
+      ref: triggerRef
+    }))),
+    placement: "bottom-end"
+  }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, agentActions.map(({
+    text,
+    onClick
+  }, idx) => {
+    return /*#__PURE__*/React.createElement(DropdownItem, {
+      key: idx,
+      onClick: onClick
+    }, text);
+  })), isAgentCreatedByCurrentUser && /*#__PURE__*/React.createElement(DropdownItemGroup, {
+    hasSeparator: true
+  }, agentSetting.map(({
+    text,
+    onClick
+  }, idx) => {
+    return /*#__PURE__*/React.createElement(DropdownItem, {
+      key: idx,
+      onClick: onClick
+    }, text);
+  }))));
+};
+const messages = defineMessages({
+  actionChatToAgent: {
+    id: 'ptc-directory.agent-profile.action.dropdown.chat-to-agent.nonfinal',
+    defaultMessage: 'Chat to Agent',
+    description: 'Text for the "chat to agent" action to chat to the agent'
+  },
+  actionDelete: {
+    id: 'ptc-directory.agent-profile.action.dropdown.delete.nonfinal',
+    defaultMessage: 'Delete Agent',
+    description: 'Text for the "Delete" action to delete an agent'
+  },
+  actionEdit: {
+    id: 'ptc-directory.agent-profile.action.dropdown.edit.nonfinal',
+    defaultMessage: 'Edit Agent',
+    description: 'Text for the "Edit" action to edit an agent'
+  },
+  actionCopyLink: {
+    id: 'ptc-directory.agent-profile.action.dropdown.copy-link.nonfinal',
+    defaultMessage: 'Copy link',
+    description: 'Text for the Copy link of an agent'
+  },
+  actionDuplicate: {
+    id: 'ptc-directory.agent-profile.action.dropdown.duplicate.nonfinal',
+    defaultMessage: 'Duplicate Agent',
+    description: 'Text for the Duplicate Agent action to create a duplicate'
+  }
+});

package/dist/es2019/components/Agent/AgentProfileCard.js

@@ -1,21 +1,51 @@
 import React from 'react';
 import { Box, Stack, xcss } from '@atlaskit/primitives';
-import { AgentProfileCreator, AgentProfileInfo, AgentStarCount } from '@atlaskit/rovo-agent-components';
+import { AgentAvatar, AgentBanner, AgentProfileCreator, AgentProfileInfo, AgentStarCount } from '@atlaskit/rovo-agent-components';
 import LoadingState from '../common/LoadingState';
+import { AgentActions } from './Actions';
 import { AgentProfileCardWrapper } from './AgentProfileCardWrapper';
+import { ConversationStarters } from './ConversationStarters';
+import { useAgentUrlActions } from './useAgentActions';
+import { useSetFavouriteAgent } from './useSetFavouriteAgent';
 const styles = xcss({
-  paddingBlock: 'space.0',
+  paddingBlockStart: 'space.400',
   paddingInline: 'space.200'
 });
+const avatarStyles = xcss({
+  position: 'absolute',
+  top: 'space.300',
+  left: 'space.200'
+});
 const cardContainerStyles = xcss({
   borderRadius: 'border.radius.200',
-  boxShadow: 'elevation.shadow.overlay'
+  boxShadow: 'elevation.shadow.overlay',
+  position: 'relative'
 });
 const AgentProfileCard = ({
   agent,
-  isLoading
+  isLoading,
+  isCreatedByViewingUser,
+  cloudId,
+  onOpenChat,
+  product = 'rovo'
 }) => {
   var _agent$creatorInfo, _agent$creatorInfo2, _agent$creatorInfo3, _agent$creatorInfo4;
+  const {
+    onEditAgent,
+    onCopyAgent,
+    onDuplicateAgent
+  } = useAgentUrlActions({
+    cloudId: cloudId || ''
+  });
+  const {
+    isStarred,
+    setFavourite
+  } = useSetFavouriteAgent({
+    agentId: agent.id,
+    cloudId: cloudId || '',
+    isStarred: agent.favourite,
+    product
+  });
   if (isLoading) {
     return /*#__PURE__*/React.createElement(AgentProfileCardWrapper, null, /*#__PURE__*/React.createElement(LoadingState, {
       profileType: "agent"
@@ -23,13 +53,19 @@ const AgentProfileCard = ({
   }
   return /*#__PURE__*/React.createElement(AgentProfileCardWrapper, null, /*#__PURE__*/React.createElement(Box, {
     xcss: cardContainerStyles
-  }, /*#__PURE__*/React.createElement(Stack, {
+  }, /*#__PURE__*/React.createElement(AgentBanner, {
+    height: 96
+  }), /*#__PURE__*/React.createElement(Box, {
+    xcss: avatarStyles
+  }, /*#__PURE__*/React.createElement(AgentAvatar, {
+    size: "xlarge"
+  })), /*#__PURE__*/React.createElement(Stack, {
     space: "space.100",
     xcss: styles
   }, /*#__PURE__*/React.createElement(AgentProfileInfo, {
     agentName: agent.name,
-    isStarred: agent.favourite,
-    onStarToggle: () => {},
+    isStarred: isStarred,
+    onStarToggle: setFavourite,
     creatorRender: ((_agent$creatorInfo = agent.creatorInfo) === null || _agent$creatorInfo === void 0 ? void 0 : _agent$creatorInfo.type) && /*#__PURE__*/React.createElement(AgentProfileCreator, {
       creator: {
         type: (_agent$creatorInfo2 = agent.creatorInfo) === null || _agent$creatorInfo2 === void 0 ? void 0 : _agent$creatorInfo2.type,
@@ -44,6 +80,21 @@ const AgentProfileCard = ({
       isLoading: false
     }),
     agentDescription: agent.description
-  }))));
+  }), /*#__PURE__*/React.createElement(ConversationStarters, {
+    isAgentDefault: agent.is_default,
+    userDefinedConversationStarters: agent.user_defined_conversation_starters,
+    onConversationStarterClick: function (conversationStarter) {
+      throw new Error('Function not implemented.');
+    }
+  })), /*#__PURE__*/React.createElement(AgentActions, {
+    isAgentCreatedByCurrentUser: isCreatedByViewingUser,
+    onEditAgent: () => onEditAgent(agent.id),
+    onCopyAgent: () => onCopyAgent(agent.id),
+    onDuplicateAgent: () => onDuplicateAgent(agent.id),
+    onDeleteAgent: function () {
+      throw new Error('Function not implemented.');
+    },
+    onChatClick: () => onOpenChat === null || onOpenChat === void 0 ? void 0 : onOpenChat(agent.id)
+  })));
 };
 export default AgentProfileCard;

package/dist/es2019/components/Agent/AgentProfileCardResourced.js

@@ -1,4 +1,5 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { getAAIDFromARI } from '../../util/rovoAgentUtils';
 import ErrorMessage from '../Error/ErrorMessage';
 import { AgentProfileCardWrapper } from './AgentProfileCardWrapper';
 import { AgentProfileCardLazy } from './lazyAgentProfileCard';
@@ -6,6 +7,7 @@ export const AgentProfileCardResourced = props => {
   const [agentData, setAgentData] = useState();
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState();
+  const creatorUserId = useMemo(() => (agentData === null || agentData === void 0 ? void 0 : agentData.creator_type) === 'CUSTOMER' && agentData.creator ? getAAIDFromARI(agentData.creator) : '', [agentData === null || agentData === void 0 ? void 0 : agentData.creator_type, agentData === null || agentData === void 0 ? void 0 : agentData.creator]);
   const getCreator = useCallback(async (creator_type, creator) => {
     if (!creator) {
       return undefined;
@@ -21,16 +23,16 @@ export const AgentProfileCardResourced = props => {
           name: creator !== null && creator !== void 0 ? creator : ''
         };
       case 'CUSTOMER':
-        const creatorInfo = await props.resourceClient.getProfile(creator, props.cloudId || '');
+        const creatorInfo = await props.resourceClient.getProfile(creatorUserId || '', props.cloudId || '');
         return {
           type: 'CUSTOMER',
           name: creatorInfo.fullName,
-          profileLink: `/people/${creator}`
+          profileLink: `/people/${creatorUserId}`
         };
       default:
         return undefined;
     }
-  }, [props.cloudId, props.resourceClient]);
+  }, [creatorUserId, props.cloudId, props.resourceClient]);
   const getAgentInfo = useCallback(() => {
     return props.resourceClient.getRovoAgentProfile(props.agentId);
   }, [props.agentId, props.resourceClient]);
@@ -69,7 +71,9 @@ export const AgentProfileCardResourced = props => {
     return /*#__PURE__*/React.createElement(AgentProfileCardLazy, {
       agent: agentData,
       isLoading: isLoading,
-      hasError: !!error
+      hasError: !!error,
+      isCreatedByViewingUser: creatorUserId === props.viewingUserId,
+      product: props.product
     });
   }
   return null;

package/dist/es2019/components/Agent/AgentProfileCardTrigger.js

@@ -1,9 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+import React, { Suspense } from 'react';
+import { getAAIDFromARI } from '../../util/rovoAgentUtils';
 import ProfileCardTrigger from '../common/ProfileCardTrigger';
 import { AgentProfileCardLazy } from './lazyAgentProfileCard';
 export const AgentProfileCardTrigger = ({
   trigger = 'hover',
+  viewingUserId,
+  product,
   ...props
 }) => {
   const {
@@ -26,11 +29,13 @@ export const AgentProfileCardTrigger = ({
           name: creator !== null && creator !== void 0 ? creator : ''
         };
       case 'CUSTOMER':
-        const creatorInfo = await props.resourceClient.getProfile(creator, cloudId || '');
+        const userId = getAAIDFromARI(creator) || '';
+        const creatorInfo = await props.resourceClient.getProfile(userId, cloudId || '');
         return {
           type: 'CUSTOMER',
           name: creatorInfo.fullName,
-          profileLink: `/people/${creator}`
+          profileLink: `/people/${userId}`,
+          id: userId
         };
       default:
         return undefined;
@@ -48,13 +53,19 @@ export const AgentProfileCardTrigger = ({
     profileData,
     isLoading
   }) => {
+    var _profileData$creatorI;
     if (!profileData) {
       return /*#__PURE__*/React.createElement(React.Fragment, null);
     }
-    return /*#__PURE__*/React.createElement(AgentProfileCardLazy, {
+    return /*#__PURE__*/React.createElement(Suspense, {
+      fallback: null
+    }, /*#__PURE__*/React.createElement(AgentProfileCardLazy, {
       agent: profileData,
-      isLoading: isLoading
-    });
+      isLoading: isLoading,
+      isCreatedByViewingUser: ((_profileData$creatorI = profileData.creatorInfo) === null || _profileData$creatorI === void 0 ? void 0 : _profileData$creatorI.id) === viewingUserId,
+      cloudId: props.cloudId,
+      product: product
+    }));
   };
   return /*#__PURE__*/React.createElement(ProfileCardTrigger, _extends({}, props, {
     renderProfileCard: renderProfileCard,

package/dist/es2019/components/Agent/AgentProfileCardWrapper.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import { Box, xcss } from '@atlaskit/primitives';
 const styles = xcss({
-  width: '360px',
-  borderRadius: '6px'
+  width: '360px'
 });
 export const AgentProfileCardWrapper = ({
   children