@atlaskit/profilecard 19.17.7 → 19.18.0

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

@@ -0,0 +1,34 @@
+import { useCallback } from 'react';
+import { getATLContextUrl } from '@atlaskit/atlassian-context';
+import { encodeParamsToUrl } from '../../util/url';
+export const useAgentUrlActions = ({
+  cloudId
+}) => {
+  const onEditAgent = useCallback(agentId => {
+    const url = `${getATLContextUrl('home')}/chat/agents/${agentId}/edit?cloudId=${cloudId}`;
+    window.open(url, '_blank', 'noopener, noreferrer');
+  }, [cloudId]);
+  const onCopyAgent = useCallback(agentId => {
+    const baseUrl = `${getATLContextUrl('home')}/chat`;
+    const urlWithParams = encodeParamsToUrl(baseUrl, {
+      cloudId,
+      pathway: 'chat',
+      agentId
+    });
+    navigator.clipboard.writeText(urlWithParams);
+  }, [cloudId]);
+  const onDuplicateAgent = useCallback(agentId => {
+    const baseUrl = `${getATLContextUrl('home')}/chat/agents/new`;
+    const urlWithParams = encodeParamsToUrl(baseUrl, {
+      cloudId,
+      pathway: 'agents-create',
+      agentId
+    });
+    window.open(urlWithParams, '_blank', 'noopener, noreferrer');
+  }, [cloudId]);
+  return {
+    onEditAgent,
+    onCopyAgent,
+    onDuplicateAgent
+  };
+};

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

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import { createHeaders } from '../../util/rovoAgentUtils';
+export const useSetFavouriteAgent = ({
+  agentId,
+  cloudId,
+  isStarred,
+  product
+}) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [isFavourite, setIsFavourite] = useState(isStarred);
+  const setFavourite = async () => {
+    setIsLoading(true);
+    try {
+      const headers = createHeaders(product, cloudId);
+      if (isFavourite) {
+        await fetch(new Request(`/agents/v1/${agentId}/favourite`, {
+          method: 'POST',
+          credentials: 'include',
+          mode: 'cors',
+          headers
+        })).then(() => {
+          setIsFavourite(true);
+        });
+      } else {
+        await fetch(new Request(`/agents/v1/${agentId}/favourite`, {
+          method: 'DELETE',
+          credentials: 'include',
+          mode: 'cors',
+          headers
+        })).then(() => {
+          setIsFavourite(false);
+        });
+      }
+      setIsLoading(false);
+    } catch (error) {
+      setIsLoading(false);
+    }
+  };
+  return {
+    isLoading,
+    isStarred: isFavourite,
+    // hasError: Boolean(error) || cannotLoadUser,
+    setFavourite
+  };
+};

package/dist/es2019/index.js

@@ -5,6 +5,7 @@ import ProfileCardClient from './client/ProfileCardClient';
 import TeamProfileClient from './client/TeamProfileCardClient';
 // Note: when generating and updating Flow types in Jira, `UserProfileClient` and `UserProfileCardClient` are the same type
 import UserProfileClient, { modifyResponse } from './client/UserProfileCardClient';
+import AgentProfileCard from './components/Agent/AgentProfileCard';
 import TeamProfileCardTrigger from './components/Team/TeamProfileCardTrigger';
 import ProfileCard from './components/User/ProfileCard';
 import ProfileCardResourced from './components/User/ProfileCardResourced';
@@ -19,6 +20,9 @@ export { default as TeamProfileCard } from './components/Team/TeamProfileCard';
 export { ProfileCard };
 export { ProfileCardTrigger };
 export { TeamProfileCardTrigger };
+export { AgentProfileCard };
 export { ProfileCardClient as ProfileClient, TeamProfileClient, UserProfileClient, modifyResponse };
 export { DELAY_MS_SHOW, DELAY_MS_HIDE };
+export { AgentProfileCardTrigger } from './components/Agent/AgentProfileCardTrigger';
+export { AgentProfileCardResourced } from './components/Agent/AgentProfileCardResourced';
 export default ProfileCardResourced;

package/dist/es2019/util/analytics.js

@@ -32,7 +32,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/profilecard",
-    packageVersion: "19.17.7",
+    packageVersion: "19.18.0",
     ...attributes,
     firedAt: Math.round(getPageTime())
   }

package/dist/es2019/util/rovoAgentUtils.js

@@ -0,0 +1,16 @@
+export const createHeaders = (product, cloudId) => {
+  const config = {
+    headers: {
+      'X-Product': product,
+      'X-Experience-Id': 'profile-card',
+      'X-Cloudid': cloudId
+    }
+  };
+  return new Headers({
+    ...(config.headers || {})
+  });
+};
+export const getAAIDFromARI = ari => {
+  const matched = ari.match(/\/([a-zA-Z0-9_\|\-\:]{1,128})$/);
+  return matched ? matched[1] : undefined;
+};

package/dist/es2019/util/url.js

@@ -0,0 +1,9 @@
+export const encodeParamsToUrl = (baseUrl, params) => {
+  const url = new URL(baseUrl);
+  const searchParams = new URLSearchParams();
+  for (const [key, value] of Object.entries(params)) {
+    searchParams.append(key, String(value));
+  }
+  url.search = searchParams.toString();
+  return url.toString();
+};

package/dist/esm/client/RovoAgentCardClient.js

@@ -25,11 +25,11 @@ var RovoAgentCardClient = /*#__PURE__*/function (_CachingClient) {
   }
   _createClass(RovoAgentCardClient, [{
     key: "makeRequest",
-    value: function makeRequest(agentId) {
+    value: function 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);
     }
   }, {
     key: "getProfile",
@@ -38,6 +38,9 @@ var RovoAgentCardClient = /*#__PURE__*/function (_CachingClient) {
       if (!agentId) {
         return Promise.reject(new Error('agentId is missing'));
       }
+      if (!this.options.cloudId) {
+        return Promise.reject(new Error('cloudId is missing'));
+      }
       var cache = this.getCachedProfile(agentId);
       if (cache) {
         return Promise.resolve(cache);
@@ -47,7 +50,7 @@ var RovoAgentCardClient = /*#__PURE__*/function (_CachingClient) {
         if (analytics) {
           analytics(agentRequestAnalytics('triggered'));
         }
-        _this2.makeRequest(agentId).then(function (data) {
+        _this2.makeRequest(agentId, _this2.options.cloudId || '').then(function (data) {
           if (_this2.cache) {
             _this2.setCachedProfile(agentId, data);
           }

package/dist/esm/client/getAgentInfo.js

@@ -1,27 +1,16 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-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; }
-var createHeaders = function createHeaders(product) {
-  var config = {
-    headers: {
-      'x-product': product,
-      'x-experience-id': 'profile-card'
-    }
-  };
-  return new Headers(_objectSpread({}, config.headers || {}));
-};
-export function getAgentDetailsByAgentId(_x, _x2) {
+import { createHeaders } from '../util/rovoAgentUtils';
+export function getAgentDetailsByAgentId(_x, _x2, _x3) {
   return _getAgentDetailsByAgentId.apply(this, arguments);
 }
 function _getAgentDetailsByAgentId() {
-  _getAgentDetailsByAgentId = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(agentId, product) {
+  _getAgentDetailsByAgentId = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(agentId, product, cloudId) {
     var headers;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          headers = createHeaders(product);
+          headers = createHeaders(product, cloudId);
           _context.next = 3;
           return fetch(new Request("assist/agents/v1/".concat(agentId), {
             method: 'GET',
@@ -41,16 +30,16 @@ function _getAgentDetailsByAgentId() {
   }));
   return _getAgentDetailsByAgentId.apply(this, arguments);
 }
-export function getAgentDetailsByUserId(_x3, _x4) {
+export function getAgentDetailsByUserId(_x4, _x5, _x6) {
   return _getAgentDetailsByUserId.apply(this, arguments);
 }
 function _getAgentDetailsByUserId() {
-  _getAgentDetailsByUserId = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(userId, product) {
+  _getAgentDetailsByUserId = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(userId, product, cloudId) {
     var headers;
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
-          headers = createHeaders(product);
+          headers = createHeaders(product, cloudId);
           _context2.next = 3;
           return fetch(new Request("assist/agents/v1/accountid/".concat(userId), {
             method: 'GET',

package/dist/esm/client/getTeamFromAGG.js

@@ -48,7 +48,7 @@ export var addHeaders = function 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.7");
+  headers.append('atl-client-version', "19.18.0");
   return headers;
 };
 export function getTeamFromAGG(_x, _x2, _x3) {

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

@@ -0,0 +1,165 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["triggerRef"];
+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';
+var chatToAgentButtonContainer = xcss({
+  width: '100%'
+});
+var buttonStyles = xcss({
+  borderRadius: '3px',
+  color: 'color.text',
+  backgroundColor: 'color.background.neutral',
+  ':hover': {
+    backgroundColor: 'color.background.neutral.hovered'
+  },
+  ':active': {
+    backgroundColor: 'color.background.neutral.pressed'
+  }
+});
+var chatToAgentButtonWrapper = xcss({
+  display: 'flex',
+  justifyContent: 'center',
+  lineHeight: '20px',
+  padding: 'space.075',
+  fontWeight: '500'
+});
+var chatPillButtonInlineStyles = xcss({
+  paddingInline: 'space.025'
+});
+var chatPillTextStyles = xcss({
+  wordBreak: 'break-word',
+  textAlign: 'left',
+  whiteSpace: 'pre-wrap'
+});
+var chatPillIconWrapper = xcss({
+  minWidth: '20px',
+  height: '20px'
+});
+var actopnsWrapperStyles = xcss({
+  borderTop: '1px',
+  borderTopStyle: 'solid',
+  borderColor: 'color.border',
+  padding: 'space.200',
+  marginBlockStart: 'space.200',
+  color: 'color.text'
+});
+var buildAgentActions = function buildAgentActions(_ref) {
+  var onDuplicateAgent = _ref.onDuplicateAgent,
+    onCopyAgent = _ref.onCopyAgent;
+  return [{
+    text: /*#__PURE__*/React.createElement(FormattedMessage, messages.actionDuplicate),
+    onClick: onDuplicateAgent
+  }, {
+    text: /*#__PURE__*/React.createElement(FormattedMessage, messages.actionCopyLink),
+    onClick: onCopyAgent
+  }];
+};
+var buildAgentSettings = function buildAgentSettings(_ref2) {
+  var onEditAgent = _ref2.onEditAgent,
+    onDeleteAgent = _ref2.onDeleteAgent;
+  return [{
+    text: /*#__PURE__*/React.createElement(FormattedMessage, messages.actionEdit),
+    onClick: onEditAgent
+  }, {
+    text: /*#__PURE__*/React.createElement(FormattedMessage, messages.actionDelete),
+    onClick: onDeleteAgent
+  }];
+};
+export var AgentActions = function AgentActions(_ref3) {
+  var isAgentCreatedByCurrentUser = _ref3.isAgentCreatedByCurrentUser,
+    onEditAgent = _ref3.onEditAgent,
+    onDeleteAgent = _ref3.onDeleteAgent,
+    onDuplicateAgent = _ref3.onDuplicateAgent,
+    onCopyAgent = _ref3.onCopyAgent,
+    onChatClick = _ref3.onChatClick;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var agentActions = buildAgentActions({
+    onDuplicateAgent: onDuplicateAgent,
+    onCopyAgent: onCopyAgent
+  });
+  var agentSetting = buildAgentSettings({
+    onEditAgent: onEditAgent,
+    onDeleteAgent: 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: function trigger(_ref4) {
+      var triggerRef = _ref4.triggerRef,
+        props = _objectWithoutProperties(_ref4, _excluded);
+      return /*#__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(function (_ref5, idx) {
+    var text = _ref5.text,
+      onClick = _ref5.onClick;
+    return /*#__PURE__*/React.createElement(DropdownItem, {
+      key: idx,
+      onClick: onClick
+    }, text);
+  })), isAgentCreatedByCurrentUser && /*#__PURE__*/React.createElement(DropdownItemGroup, {
+    hasSeparator: true
+  }, agentSetting.map(function (_ref6, idx) {
+    var text = _ref6.text,
+      onClick = _ref6.onClick;
+    return /*#__PURE__*/React.createElement(DropdownItem, {
+      key: idx,
+      onClick: onClick
+    }, text);
+  }))));
+};
+var 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/esm/components/Agent/AgentProfileCard.js

@@ -1,20 +1,49 @@
 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';
 var styles = xcss({
-  paddingBlock: 'space.0',
+  paddingBlockStart: 'space.400',
   paddingInline: 'space.200'
 });
+var avatarStyles = xcss({
+  position: 'absolute',
+  top: 'space.300',
+  left: 'space.200'
+});
 var cardContainerStyles = xcss({
   borderRadius: 'border.radius.200',
-  boxShadow: 'elevation.shadow.overlay'
+  boxShadow: 'elevation.shadow.overlay',
+  position: 'relative'
 });
 var AgentProfileCard = function AgentProfileCard(_ref) {
   var _agent$creatorInfo, _agent$creatorInfo2, _agent$creatorInfo3, _agent$creatorInfo4;
   var agent = _ref.agent,
-    isLoading = _ref.isLoading;
+    isLoading = _ref.isLoading,
+    isCreatedByViewingUser = _ref.isCreatedByViewingUser,
+    cloudId = _ref.cloudId,
+    onOpenChat = _ref.onOpenChat,
+    _ref$product = _ref.product,
+    product = _ref$product === void 0 ? 'rovo' : _ref$product;
+  var _useAgentUrlActions = useAgentUrlActions({
+      cloudId: cloudId || ''
+    }),
+    _onEditAgent = _useAgentUrlActions.onEditAgent,
+    _onCopyAgent = _useAgentUrlActions.onCopyAgent,
+    _onDuplicateAgent = _useAgentUrlActions.onDuplicateAgent;
+  var _useSetFavouriteAgent = useSetFavouriteAgent({
+      agentId: agent.id,
+      cloudId: cloudId || '',
+      isStarred: agent.favourite,
+      product: product
+    }),
+    isStarred = _useSetFavouriteAgent.isStarred,
+    setFavourite = _useSetFavouriteAgent.setFavourite;
   if (isLoading) {
     return /*#__PURE__*/React.createElement(AgentProfileCardWrapper, null, /*#__PURE__*/React.createElement(LoadingState, {
       profileType: "agent"
@@ -22,13 +51,19 @@ var AgentProfileCard = function AgentProfileCard(_ref) {
   }
   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: function 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,
@@ -43,6 +78,29 @@ var AgentProfileCard = function AgentProfileCard(_ref) {
       isLoading: false
     }),
     agentDescription: agent.description
-  }))));
+  }), /*#__PURE__*/React.createElement(ConversationStarters, {
+    isAgentDefault: agent.is_default,
+    userDefinedConversationStarters: agent.user_defined_conversation_starters,
+    onConversationStarterClick: function onConversationStarterClick(conversationStarter) {
+      throw new Error('Function not implemented.');
+    }
+  })), /*#__PURE__*/React.createElement(AgentActions, {
+    isAgentCreatedByCurrentUser: isCreatedByViewingUser,
+    onEditAgent: function onEditAgent() {
+      return _onEditAgent(agent.id);
+    },
+    onCopyAgent: function onCopyAgent() {
+      return _onCopyAgent(agent.id);
+    },
+    onDuplicateAgent: function onDuplicateAgent() {
+      return _onDuplicateAgent(agent.id);
+    },
+    onDeleteAgent: function onDeleteAgent() {
+      throw new Error('Function not implemented.');
+    },
+    onChatClick: function onChatClick() {
+      return onOpenChat === null || onOpenChat === void 0 ? void 0 : onOpenChat(agent.id);
+    }
+  })));
 };
 export default AgentProfileCard;

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

@@ -4,7 +4,8 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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 _regeneratorRuntime from "@babel/runtime/regenerator";
-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';
@@ -21,6 +22,9 @@ export var AgentProfileCardResourced = function AgentProfileCardResourced(props)
     _useState6 = _slicedToArray(_useState5, 2),
     error = _useState6[0],
     setError = _useState6[1];
+  var creatorUserId = useMemo(function () {
+    return (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]);
   var getCreator = useCallback( /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(creator_type, creator) {
       var creatorInfo;
@@ -47,13 +51,13 @@ export var AgentProfileCardResourced = function AgentProfileCardResourced(props)
             });
           case 7:
             _context.next = 9;
-            return props.resourceClient.getProfile(creator, props.cloudId || '');
+            return props.resourceClient.getProfile(creatorUserId || '', props.cloudId || '');
           case 9:
             creatorInfo = _context.sent;
             return _context.abrupt("return", {
               type: 'CUSTOMER',
               name: creatorInfo.fullName,
-              profileLink: "/people/".concat(creator)
+              profileLink: "/people/".concat(creatorUserId)
             });
           case 11:
             return _context.abrupt("return", undefined);
@@ -66,7 +70,7 @@ export var AgentProfileCardResourced = function AgentProfileCardResourced(props)
     return function (_x, _x2) {
       return _ref.apply(this, arguments);
     };
-  }(), [props.cloudId, props.resourceClient]);
+  }(), [creatorUserId, props.cloudId, props.resourceClient]);
   var getAgentInfo = useCallback(function () {
     return props.resourceClient.getRovoAgentProfile(props.agentId);
   }, [props.agentId, props.resourceClient]);
@@ -136,7 +140,9 @@ export var AgentProfileCardResourced = function 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/esm/components/Agent/AgentProfileCardTrigger.js

@@ -2,23 +2,26 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["trigger"];
+var _excluded = ["trigger", "viewingUserId", "product"];
 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 _regeneratorRuntime from "@babel/runtime/regenerator";
-import React from 'react';
+import React, { Suspense } from 'react';
+import { getAAIDFromARI } from '../../util/rovoAgentUtils';
 import ProfileCardTrigger from '../common/ProfileCardTrigger';
 import { AgentProfileCardLazy } from './lazyAgentProfileCard';
 export var AgentProfileCardTrigger = function AgentProfileCardTrigger(_ref) {
   var _ref$trigger = _ref.trigger,
     trigger = _ref$trigger === void 0 ? 'hover' : _ref$trigger,
+    viewingUserId = _ref.viewingUserId,
+    product = _ref.product,
     props = _objectWithoutProperties(_ref, _excluded);
   var resourceClient = props.resourceClient,
     userId = props.userId,
     cloudId = props.cloudId;
   var getCreator = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(creator_type, creator) {
-      var creatorInfo;
+      var _userId, creatorInfo;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -29,7 +32,7 @@ export var AgentProfileCardTrigger = function AgentProfileCardTrigger(_ref) {
             return _context.abrupt("return", undefined);
           case 2:
             _context.t0 = creator_type;
-            _context.next = _context.t0 === 'SYSTEM' ? 5 : _context.t0 === 'THIRD_PARTY' ? 6 : _context.t0 === 'CUSTOMER' ? 7 : 11;
+            _context.next = _context.t0 === 'SYSTEM' ? 5 : _context.t0 === 'THIRD_PARTY' ? 6 : _context.t0 === 'CUSTOMER' ? 7 : 12;
             break;
           case 5:
             return _context.abrupt("return", {
@@ -41,18 +44,20 @@ export var AgentProfileCardTrigger = function AgentProfileCardTrigger(_ref) {
               name: creator !== null && creator !== void 0 ? creator : ''
             });
           case 7:
-            _context.next = 9;
-            return props.resourceClient.getProfile(creator, cloudId || '');
-          case 9:
+            _userId = getAAIDFromARI(creator) || '';
+            _context.next = 10;
+            return props.resourceClient.getProfile(_userId, cloudId || '');
+          case 10:
             creatorInfo = _context.sent;
             return _context.abrupt("return", {
               type: 'CUSTOMER',
               name: creatorInfo.fullName,
-              profileLink: "/people/".concat(creator)
+              profileLink: "/people/".concat(_userId),
+              id: _userId
             });
-          case 11:
-            return _context.abrupt("return", undefined);
           case 12:
+            return _context.abrupt("return", undefined);
+          case 13:
           case "end":
             return _context.stop();
         }
@@ -90,15 +95,21 @@ export var AgentProfileCardTrigger = function AgentProfileCardTrigger(_ref) {
     };
   }();
   var renderProfileCard = function renderProfileCard(_ref4) {
+    var _profileData$creatorI;
     var profileData = _ref4.profileData,
       isLoading = _ref4.isLoading;
     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/esm/components/Agent/AgentProfileCardWrapper.js

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