@atlaskit/profilecard 20.10.0 → 20.12.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/profilecard
 
+## 20.12.0
+
+### Minor Changes
+
+- [#162951](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/162951)
+  [`17d7f44be2959`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/17d7f44be2959) -
+  Agent profile card to use publishWithPostMessage, so `Chat to agent` or conversation starter
+  button will open in rovo sidebar if available
+
+### Patch Changes
+
+- Updated dependencies
+
+## 20.11.0
+
+### Minor Changes
+
+- [#163611](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/163611)
+  [`559a5e24a2892`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/559a5e24a2892) -
+  Fix asynchronous loading of agent profile card
+
 ## 20.10.0
 
 ### Minor Changes

package/afm-cc/tsconfig.json

@@ -68,6 +68,9 @@
         {
             "path": "../../../ai-mate/rovo-agent-components/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../ai-mate/rovo-triggers/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../design-system/spinner/afm-cc/tsconfig.json"
         },

package/afm-jira/tsconfig.json

@@ -68,6 +68,9 @@
 		{
 			"path": "../../../ai-mate/rovo-agent-components/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../../ai-mate/rovo-triggers/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/spinner/afm-jira/tsconfig.json"
 		},

package/afm-post-office/tsconfig.json

@@ -3,7 +3,7 @@
 	"compilerOptions": {
 		"declaration": true,
 		"target": "es5",
-		"outDir": "../../../../../tsDist/@atlaskit__profilecard/app",
+		"outDir": "../../../../../post-office/tsDist/@atlaskit__profilecard/app",
 		"rootDir": "../",
 		"composite": true
 	},
@@ -68,6 +68,9 @@
 		{
 			"path": "../../../ai-mate/rovo-agent-components/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../../ai-mate/rovo-triggers/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/spinner/afm-post-office/tsconfig.json"
 		},

package/dist/cjs/client/getOrgIdForCloudIdFromAGG.js

@@ -11,7 +11,7 @@ var _graphqlUtils = require("./graphqlUtils");
 var ORG_ID_FROM_CLOUD_ID_QUERY = "query OrgIdFromCloudId($cloudId: ID!) {\n\ttenantContexts(cloudIds: [$cloudId]) {\n\t\torgId\n\t}\n}";
 var addHeaders = function addHeaders(headers) {
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "20.10.0");
+  headers.append('atl-client-version', "20.12.0");
   return headers;
 };
 function getOrgIdForCloudIdFromAGG(_x, _x2) {

package/dist/cjs/client/getTeamFromAGG.js

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

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

@@ -232,7 +232,7 @@ var AgentProfileCard = function AgentProfileCard(_ref) {
     },
     onDeleteAgent: handleOnDelete,
     onChatClick: function onChatClick() {
-      return _onChatClick ? _onChatClick() : onOpenChatFullScreen(agent.id);
+      return _onChatClick ? _onChatClick() : onOpenChatFullScreen(agent.id, agent.name);
     },
     resourceClient: resourceClient,
     onViewFullProfileClick: function onViewFullProfileClick() {

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

@@ -102,65 +102,46 @@ var AgentProfileCardResourced = exports.AgentProfileCardResourced = function Age
       return _ref.apply(this, arguments);
     };
   }(), [creatorUserId, fireAnalytics, props.cloudId, props.resourceClient]);
-  var getAgentInfo = (0, _react.useCallback)(function () {
-    return props.resourceClient.getRovoAgentProfile({
-      type: 'identity',
-      value: props.accountId
-    }, fireAnalytics);
-  }, [fireAnalytics, props.accountId, props.resourceClient]);
-  var fetchData = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
-    var getAgentData, agentData;
-    return _regenerator.default.wrap(function _callee3$(_context3) {
-      while (1) switch (_context3.prev = _context3.next) {
+  var fetchData = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+    var profileData, agentCreatorInfo;
+    return _regenerator.default.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
         case 0:
           setIsLoading(true);
-          getAgentData = /*#__PURE__*/function () {
-            var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-              var profileData, agentCreatorInfo;
-              return _regenerator.default.wrap(function _callee2$(_context2) {
-                while (1) switch (_context2.prev = _context2.next) {
-                  case 0:
-                    _context2.next = 2;
-                    return getAgentInfo();
-                  case 2:
-                    profileData = _context2.sent;
-                    _context2.next = 5;
-                    return getCreator(profileData === null || profileData === void 0 ? void 0 : profileData.creator_type, (profileData === null || profileData === void 0 ? void 0 : profileData.creator) || undefined);
-                  case 5:
-                    agentCreatorInfo = _context2.sent;
-                    return _context2.abrupt("return", _objectSpread(_objectSpread({}, profileData), {}, {
-                      creatorInfo: agentCreatorInfo
-                    }));
-                  case 7:
-                  case "end":
-                    return _context2.stop();
-                }
-              }, _callee2);
-            }));
-            return function getAgentData() {
-              return _ref3.apply(this, arguments);
-            };
-          }();
-          _context3.next = 4;
-          return getAgentData();
+          _context2.prev = 1;
+          _context2.next = 4;
+          return props.resourceClient.getRovoAgentProfile({
+            type: 'identity',
+            value: props.accountId
+          }, fireAnalytics);
         case 4:
-          agentData = _context3.sent;
-          setAgentData(agentData);
-          setIsLoading(false);
+          profileData = _context2.sent;
+          _context2.next = 7;
+          return getCreator(profileData === null || profileData === void 0 ? void 0 : profileData.creator_type, (profileData === null || profileData === void 0 ? void 0 : profileData.creator) || undefined);
         case 7:
+          agentCreatorInfo = _context2.sent;
+          setAgentData(_objectSpread(_objectSpread({}, profileData), {}, {
+            creatorInfo: agentCreatorInfo
+          }));
+          _context2.next = 14;
+          break;
+        case 11:
+          _context2.prev = 11;
+          _context2.t0 = _context2["catch"](1);
+          setError(_context2.t0);
+        case 14:
+          _context2.prev = 14;
+          setIsLoading(false);
+          return _context2.finish(14);
+        case 17:
         case "end":
-          return _context3.stop();
+          return _context2.stop();
       }
-    }, _callee3);
-  })), [getAgentInfo, getCreator]);
+    }, _callee2, null, [[1, 11, 14, 17]]);
+  })), [fireAnalytics, getCreator, props.accountId, props.resourceClient]);
   (0, _react.useEffect)(function () {
-    try {
-      fetchData();
-    } catch (error) {
-      setIsLoading(false);
-      setError(error);
-    }
-  }, [fetchData, getAgentInfo, getCreator, props.accountId, props.cloudId, props.resourceClient]);
+    fetchData();
+  }, [fetchData]);
   if (error || !isLoading && !agentData) {
     return /*#__PURE__*/_react.default.createElement(_AgentProfileCardWrapper.AgentProfileCardWrapper, null, /*#__PURE__*/_react.default.createElement(_ErrorMessage.default, {
       reload: function reload() {
@@ -170,19 +151,18 @@ var AgentProfileCardResourced = exports.AgentProfileCardResourced = function Age
       fireAnalytics: function fireAnalytics() {}
     }));
   }
-  if (agentData) {
-    return /*#__PURE__*/_react.default.createElement(_lazyAgentProfileCard.AgentProfileCardLazy, {
-      agent: agentData,
-      isLoading: isLoading,
-      hasError: !!error,
-      isCreatedByViewingUser: creatorUserId === props.viewingUserId,
-      product: props.product,
-      onConversationStartersClick: props.onConversationStartersClick,
-      onChatClick: props.onChatClick,
-      addFlag: props.addFlag,
-      resourceClient: props.resourceClient,
-      cloudId: props.cloudId
-    });
-  }
-  return null;
+  return /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+    fallback: null
+  }, /*#__PURE__*/_react.default.createElement(_lazyAgentProfileCard.AgentProfileCardLazy, {
+    agent: agentData,
+    isLoading: isLoading,
+    hasError: !!error,
+    isCreatedByViewingUser: creatorUserId === props.viewingUserId,
+    product: props.product,
+    onConversationStartersClick: props.onConversationStartersClick,
+    onChatClick: props.onChatClick,
+    addFlag: props.addFlag,
+    resourceClient: props.resourceClient,
+    cloudId: props.cloudId
+  }));
 };

package/dist/cjs/components/Agent/hooks/useAgentActions.js

@@ -9,6 +9,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _atlassianContext = require("@atlaskit/atlassian-context");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _rovoTriggers = require("@atlaskit/rovo-triggers");
 var _url = require("../../../util/url");
 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; }
@@ -28,6 +30,8 @@ var createRovoParams = function createRovoParams(params) {
 };
 var useAgentUrlActions = exports.useAgentUrlActions = function useAgentUrlActions(_ref3) {
   var cloudId = _ref3.cloudId;
+  var _useRovoPostMessageTo = (0, _rovoTriggers.useRovoPostMessageToPubsub)(),
+    publishWithPostMessage = _useRovoPostMessageTo.publishWithPostMessage;
   var onEditAgent = (0, _react.useCallback)(function (agentId) {
     var url = "".concat((0, _atlassianContext.getATLContextUrl)('home'), "/chat/agents/").concat(agentId, "/edit");
     var urlWithParams = (0, _url.encodeParamsToUrl)(url, _objectSpread({
@@ -54,26 +58,69 @@ var useAgentUrlActions = exports.useAgentUrlActions = function useAgentUrlAction
   var onConversationStarter = function onConversationStarter(_ref4) {
     var agentId = _ref4.agentId,
       prompt = _ref4.prompt;
-    var baseUrl = "".concat((0, _atlassianContext.getATLContextUrl)('home'), "/chat");
-    var urlWithParams = (0, _url.encodeParamsToUrl)(baseUrl, _objectSpread({
-      cloudId: cloudId
-    }, createRovoParams({
-      cloudId: cloudId,
-      agentId: agentId,
-      prompt: prompt,
-      pathway: 'chat'
-    })));
-    window.open(urlWithParams, '_blank', 'noopener, noreferrer');
+    var startConversationInNewTab = function startConversationInNewTab() {
+      var baseUrl = "".concat((0, _atlassianContext.getATLContextUrl)('home'), "/chat");
+      var urlWithParams = (0, _url.encodeParamsToUrl)(baseUrl, _objectSpread({
+        cloudId: cloudId
+      }, createRovoParams({
+        cloudId: cloudId,
+        agentId: agentId,
+        prompt: prompt,
+        pathway: 'chat'
+      })));
+      window.open(urlWithParams, '_blank', 'noopener, noreferrer');
+    };
+    if ((0, _platformFeatureFlags.fg)('rovo_profile_card_open_chat_sidebar')) {
+      publishWithPostMessage({
+        targetWindow: window,
+        payload: {
+          type: 'chat-new',
+          source: 'AgentProfileCard',
+          data: {
+            name: prompt.slice(0, 50),
+            prompt: prompt,
+            agentId: agentId,
+            dialogues: []
+          }
+        },
+        onAcknowledgeTimeout: function onAcknowledgeTimeout() {
+          startConversationInNewTab();
+        }
+      });
+    } else {
+      startConversationInNewTab();
+    }
   };
-  var onOpenChat = function onOpenChat(agentId) {
-    var baseUrl = "".concat((0, _atlassianContext.getATLContextUrl)('home'), "/chat");
-    var urlWithParams = (0, _url.encodeParamsToUrl)(baseUrl, _objectSpread({
-      cloudId: cloudId
-    }, createRovoParams({
-      cloudId: cloudId,
-      agentId: agentId
-    })));
-    window.open(urlWithParams, '_blank', 'noopener, noreferrer');
+  var onOpenChat = function onOpenChat(agentId, agentName) {
+    var openChatInNewTab = function openChatInNewTab() {
+      var baseUrl = "".concat((0, _atlassianContext.getATLContextUrl)('home'), "/chat");
+      var urlWithParams = (0, _url.encodeParamsToUrl)(baseUrl, _objectSpread({
+        cloudId: cloudId
+      }, createRovoParams({
+        cloudId: cloudId,
+        agentId: agentId
+      })));
+      window.open(urlWithParams, '_blank', 'noopener, noreferrer');
+    };
+    if ((0, _platformFeatureFlags.fg)('rovo_profile_card_open_chat_sidebar')) {
+      publishWithPostMessage({
+        targetWindow: window,
+        payload: {
+          type: 'chat-new',
+          source: 'AgentProfileCard',
+          data: {
+            agentId: agentId,
+            dialogues: [],
+            name: "Chat with ".concat(agentName)
+          }
+        },
+        onAcknowledgeTimeout: function onAcknowledgeTimeout() {
+          openChatInNewTab();
+        }
+      });
+    } else {
+      openChatInNewTab();
+    }
   };
   var onViewFullProfile = function onViewFullProfile(agentId) {
     window.open("".concat(window.location.origin, "/people/agent/").concat(agentId), '_blank', 'noopener, noreferrer');

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: "20.10.0"
+      packageVersion: "20.12.0"
     }, attributes), {}, {
       firedAt: Math.round((0, _performance.getPageTime)())
     })

package/dist/es2019/client/getOrgIdForCloudIdFromAGG.js

@@ -6,7 +6,7 @@ const ORG_ID_FROM_CLOUD_ID_QUERY = `query OrgIdFromCloudId($cloudId: ID!) {
 }`;
 const addHeaders = headers => {
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "20.10.0");
+  headers.append('atl-client-version', "20.12.0");
   return headers;
 };
 export async function getOrgIdForCloudIdFromAGG(url, cloudId) {

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', "20.10.0");
+  headers.append('atl-client-version', "20.12.0");
   return headers;
 };
 export async function getTeamFromAGG(url, teamId, siteId) {

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

@@ -178,7 +178,7 @@ const AgentProfileCard = ({
     onCopyAgent: () => onCopyAgent(agent.id),
     onDuplicateAgent: () => onDuplicateAgent(agent.id),
     onDeleteAgent: handleOnDelete,
-    onChatClick: () => onChatClick ? onChatClick() : onOpenChatFullScreen(agent.id),
+    onChatClick: () => onChatClick ? onChatClick() : onOpenChatFullScreen(agent.id, agent.name),
     resourceClient: resourceClient,
     onViewFullProfileClick: () => onViewFullProfile(agent.id)
   })));

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { Suspense, useCallback, useEffect, useMemo, useState } from 'react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { fireEvent } from '../../util/analytics';
 import { getAAIDFromARI } from '../../util/rovoAgentUtils';
@@ -51,34 +51,27 @@ export const AgentProfileCardResourced = props => {
         return undefined;
     }
   }, [creatorUserId, fireAnalytics, props.cloudId, props.resourceClient]);
-  const getAgentInfo = useCallback(() => {
-    return props.resourceClient.getRovoAgentProfile({
-      type: 'identity',
-      value: props.accountId
-    }, fireAnalytics);
-  }, [fireAnalytics, props.accountId, props.resourceClient]);
   const fetchData = useCallback(async () => {
     setIsLoading(true);
-    const getAgentData = async () => {
-      const profileData = await getAgentInfo();
+    try {
+      const profileData = await props.resourceClient.getRovoAgentProfile({
+        type: 'identity',
+        value: props.accountId
+      }, fireAnalytics);
       const agentCreatorInfo = await getCreator(profileData === null || profileData === void 0 ? void 0 : profileData.creator_type, (profileData === null || profileData === void 0 ? void 0 : profileData.creator) || undefined);
-      return {
+      setAgentData({
         ...profileData,
         creatorInfo: agentCreatorInfo
-      };
-    };
-    const agentData = await getAgentData();
-    setAgentData(agentData);
-    setIsLoading(false);
-  }, [getAgentInfo, getCreator]);
-  useEffect(() => {
-    try {
-      fetchData();
-    } catch (error) {
+      });
+    } catch (err) {
+      setError(err);
+    } finally {
       setIsLoading(false);
-      setError(error);
     }
-  }, [fetchData, getAgentInfo, getCreator, props.accountId, props.cloudId, props.resourceClient]);
+  }, [fireAnalytics, getCreator, props.accountId, props.resourceClient]);
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
   if (error || !isLoading && !agentData) {
     return /*#__PURE__*/React.createElement(AgentProfileCardWrapper, null, /*#__PURE__*/React.createElement(ErrorMessage, {
       reload: () => {
@@ -88,19 +81,18 @@ export const AgentProfileCardResourced = props => {
       fireAnalytics: () => {}
     }));
   }
-  if (agentData) {
-    return /*#__PURE__*/React.createElement(AgentProfileCardLazy, {
-      agent: agentData,
-      isLoading: isLoading,
-      hasError: !!error,
-      isCreatedByViewingUser: creatorUserId === props.viewingUserId,
-      product: props.product,
-      onConversationStartersClick: props.onConversationStartersClick,
-      onChatClick: props.onChatClick,
-      addFlag: props.addFlag,
-      resourceClient: props.resourceClient,
-      cloudId: props.cloudId
-    });
-  }
-  return null;
+  return /*#__PURE__*/React.createElement(Suspense, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(AgentProfileCardLazy, {
+    agent: agentData,
+    isLoading: isLoading,
+    hasError: !!error,
+    isCreatedByViewingUser: creatorUserId === props.viewingUserId,
+    product: props.product,
+    onConversationStartersClick: props.onConversationStartersClick,
+    onChatClick: props.onChatClick,
+    addFlag: props.addFlag,
+    resourceClient: props.resourceClient,
+    cloudId: props.cloudId
+  }));
 };

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

@@ -1,5 +1,7 @@
 import { useCallback } from 'react';
 import { getATLContextUrl } from '@atlaskit/atlassian-context';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { useRovoPostMessageToPubsub } from '@atlaskit/rovo-triggers';
 import { encodeParamsToUrl } from '../../../util/url';
 export const firstCharUpper = str => str.charAt(0).toUpperCase() + str.slice(1);
 const ROVO_PARAM_PREFIX = 'rovoChat';
@@ -13,6 +15,9 @@ const createRovoParams = params => {
 export const useAgentUrlActions = ({
   cloudId
 }) => {
+  const {
+    publishWithPostMessage
+  } = useRovoPostMessageToPubsub();
   const onEditAgent = useCallback(agentId => {
     const url = `${getATLContextUrl('home')}/chat/agents/${agentId}/edit`;
     const urlWithParams = encodeParamsToUrl(url, {
@@ -42,28 +47,71 @@ export const useAgentUrlActions = ({
     agentId,
     prompt
   }) => {
-    const baseUrl = `${getATLContextUrl('home')}/chat`;
-    const urlWithParams = encodeParamsToUrl(baseUrl, {
-      cloudId,
-      ...createRovoParams({
+    const startConversationInNewTab = () => {
+      const baseUrl = `${getATLContextUrl('home')}/chat`;
+      const urlWithParams = encodeParamsToUrl(baseUrl, {
         cloudId,
-        agentId,
-        prompt,
-        pathway: 'chat'
-      })
-    });
-    window.open(urlWithParams, '_blank', 'noopener, noreferrer');
+        ...createRovoParams({
+          cloudId,
+          agentId,
+          prompt,
+          pathway: 'chat'
+        })
+      });
+      window.open(urlWithParams, '_blank', 'noopener, noreferrer');
+    };
+    if (fg('rovo_profile_card_open_chat_sidebar')) {
+      publishWithPostMessage({
+        targetWindow: window,
+        payload: {
+          type: 'chat-new',
+          source: 'AgentProfileCard',
+          data: {
+            name: prompt.slice(0, 50),
+            prompt,
+            agentId,
+            dialogues: []
+          }
+        },
+        onAcknowledgeTimeout: () => {
+          startConversationInNewTab();
+        }
+      });
+    } else {
+      startConversationInNewTab();
+    }
   };
-  const onOpenChat = agentId => {
-    const baseUrl = `${getATLContextUrl('home')}/chat`;
-    const urlWithParams = encodeParamsToUrl(baseUrl, {
-      cloudId,
-      ...createRovoParams({
+  const onOpenChat = (agentId, agentName) => {
+    const openChatInNewTab = () => {
+      const baseUrl = `${getATLContextUrl('home')}/chat`;
+      const urlWithParams = encodeParamsToUrl(baseUrl, {
         cloudId,
-        agentId
-      })
-    });
-    window.open(urlWithParams, '_blank', 'noopener, noreferrer');
+        ...createRovoParams({
+          cloudId,
+          agentId
+        })
+      });
+      window.open(urlWithParams, '_blank', 'noopener, noreferrer');
+    };
+    if (fg('rovo_profile_card_open_chat_sidebar')) {
+      publishWithPostMessage({
+        targetWindow: window,
+        payload: {
+          type: 'chat-new',
+          source: 'AgentProfileCard',
+          data: {
+            agentId,
+            dialogues: [],
+            name: `Chat with ${agentName}`
+          }
+        },
+        onAcknowledgeTimeout: () => {
+          openChatInNewTab();
+        }
+      });
+    } else {
+      openChatInNewTab();
+    }
   };
   const onViewFullProfile = agentId => {
     window.open(`${window.location.origin}/people/agent/${agentId}`, '_blank', 'noopener, noreferrer');

package/dist/es2019/util/analytics.js

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

package/dist/esm/client/getOrgIdForCloudIdFromAGG.js

@@ -4,7 +4,7 @@ import { AGGQuery } from './graphqlUtils';
 var ORG_ID_FROM_CLOUD_ID_QUERY = "query OrgIdFromCloudId($cloudId: ID!) {\n\ttenantContexts(cloudIds: [$cloudId]) {\n\t\torgId\n\t}\n}";
 var addHeaders = function addHeaders(headers) {
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "20.10.0");
+  headers.append('atl-client-version', "20.12.0");
   return headers;
 };
 export function getOrgIdForCloudIdFromAGG(_x, _x2) {

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', "20.10.0");
+  headers.append('atl-client-version', "20.12.0");
   return headers;
 };
 export function getTeamFromAGG(_x, _x2, _x3) {

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

@@ -222,7 +222,7 @@ var AgentProfileCard = function AgentProfileCard(_ref) {
     },
     onDeleteAgent: handleOnDelete,
     onChatClick: function onChatClick() {
-      return _onChatClick ? _onChatClick() : onOpenChatFullScreen(agent.id);
+      return _onChatClick ? _onChatClick() : onOpenChatFullScreen(agent.id, agent.name);
     },
     resourceClient: resourceClient,
     onViewFullProfileClick: function onViewFullProfileClick() {

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

@@ -4,7 +4,7 @@ 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, useMemo, useState } from 'react';
+import React, { Suspense, useCallback, useEffect, useMemo, useState } from 'react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { fireEvent } from '../../util/analytics';
 import { getAAIDFromARI } from '../../util/rovoAgentUtils';
@@ -92,65 +92,46 @@ export var AgentProfileCardResourced = function AgentProfileCardResourced(props)
       return _ref.apply(this, arguments);
     };
   }(), [creatorUserId, fireAnalytics, props.cloudId, props.resourceClient]);
-  var getAgentInfo = useCallback(function () {
-    return props.resourceClient.getRovoAgentProfile({
-      type: 'identity',
-      value: props.accountId
-    }, fireAnalytics);
-  }, [fireAnalytics, props.accountId, props.resourceClient]);
-  var fetchData = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
-    var getAgentData, agentData;
-    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-      while (1) switch (_context3.prev = _context3.next) {
+  var fetchData = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var profileData, agentCreatorInfo;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
         case 0:
           setIsLoading(true);
-          getAgentData = /*#__PURE__*/function () {
-            var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-              var profileData, agentCreatorInfo;
-              return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-                while (1) switch (_context2.prev = _context2.next) {
-                  case 0:
-                    _context2.next = 2;
-                    return getAgentInfo();
-                  case 2:
-                    profileData = _context2.sent;
-                    _context2.next = 5;
-                    return getCreator(profileData === null || profileData === void 0 ? void 0 : profileData.creator_type, (profileData === null || profileData === void 0 ? void 0 : profileData.creator) || undefined);
-                  case 5:
-                    agentCreatorInfo = _context2.sent;
-                    return _context2.abrupt("return", _objectSpread(_objectSpread({}, profileData), {}, {
-                      creatorInfo: agentCreatorInfo
-                    }));
-                  case 7:
-                  case "end":
-                    return _context2.stop();
-                }
-              }, _callee2);
-            }));
-            return function getAgentData() {
-              return _ref3.apply(this, arguments);
-            };
-          }();
-          _context3.next = 4;
-          return getAgentData();
+          _context2.prev = 1;
+          _context2.next = 4;
+          return props.resourceClient.getRovoAgentProfile({
+            type: 'identity',
+            value: props.accountId
+          }, fireAnalytics);
         case 4:
-          agentData = _context3.sent;
-          setAgentData(agentData);
-          setIsLoading(false);
+          profileData = _context2.sent;
+          _context2.next = 7;
+          return getCreator(profileData === null || profileData === void 0 ? void 0 : profileData.creator_type, (profileData === null || profileData === void 0 ? void 0 : profileData.creator) || undefined);
         case 7:
+          agentCreatorInfo = _context2.sent;
+          setAgentData(_objectSpread(_objectSpread({}, profileData), {}, {
+            creatorInfo: agentCreatorInfo
+          }));
+          _context2.next = 14;
+          break;
+        case 11:
+          _context2.prev = 11;
+          _context2.t0 = _context2["catch"](1);
+          setError(_context2.t0);
+        case 14:
+          _context2.prev = 14;
+          setIsLoading(false);
+          return _context2.finish(14);
+        case 17:
         case "end":
-          return _context3.stop();
+          return _context2.stop();
       }
-    }, _callee3);
-  })), [getAgentInfo, getCreator]);
+    }, _callee2, null, [[1, 11, 14, 17]]);
+  })), [fireAnalytics, getCreator, props.accountId, props.resourceClient]);
   useEffect(function () {
-    try {
-      fetchData();
-    } catch (error) {
-      setIsLoading(false);
-      setError(error);
-    }
-  }, [fetchData, getAgentInfo, getCreator, props.accountId, props.cloudId, props.resourceClient]);
+    fetchData();
+  }, [fetchData]);
   if (error || !isLoading && !agentData) {
     return /*#__PURE__*/React.createElement(AgentProfileCardWrapper, null, /*#__PURE__*/React.createElement(ErrorMessage, {
       reload: function reload() {
@@ -160,19 +141,18 @@ export var AgentProfileCardResourced = function AgentProfileCardResourced(props)
       fireAnalytics: function fireAnalytics() {}
     }));
   }
-  if (agentData) {
-    return /*#__PURE__*/React.createElement(AgentProfileCardLazy, {
-      agent: agentData,
-      isLoading: isLoading,
-      hasError: !!error,
-      isCreatedByViewingUser: creatorUserId === props.viewingUserId,
-      product: props.product,
-      onConversationStartersClick: props.onConversationStartersClick,
-      onChatClick: props.onChatClick,
-      addFlag: props.addFlag,
-      resourceClient: props.resourceClient,
-      cloudId: props.cloudId
-    });
-  }
-  return null;
+  return /*#__PURE__*/React.createElement(Suspense, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(AgentProfileCardLazy, {
+    agent: agentData,
+    isLoading: isLoading,
+    hasError: !!error,
+    isCreatedByViewingUser: creatorUserId === props.viewingUserId,
+    product: props.product,
+    onConversationStartersClick: props.onConversationStartersClick,
+    onChatClick: props.onChatClick,
+    addFlag: props.addFlag,
+    resourceClient: props.resourceClient,
+    cloudId: props.cloudId
+  }));
 };

package/dist/esm/components/Agent/hooks/useAgentActions.js

@@ -4,6 +4,8 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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 { useCallback } from 'react';
 import { getATLContextUrl } from '@atlaskit/atlassian-context';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { useRovoPostMessageToPubsub } from '@atlaskit/rovo-triggers';
 import { encodeParamsToUrl } from '../../../util/url';
 export var firstCharUpper = function firstCharUpper(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
@@ -21,6 +23,8 @@ var createRovoParams = function createRovoParams(params) {
 };
 export var useAgentUrlActions = function useAgentUrlActions(_ref3) {
   var cloudId = _ref3.cloudId;
+  var _useRovoPostMessageTo = useRovoPostMessageToPubsub(),
+    publishWithPostMessage = _useRovoPostMessageTo.publishWithPostMessage;
   var onEditAgent = useCallback(function (agentId) {
     var url = "".concat(getATLContextUrl('home'), "/chat/agents/").concat(agentId, "/edit");
     var urlWithParams = encodeParamsToUrl(url, _objectSpread({
@@ -47,26 +51,69 @@ export var useAgentUrlActions = function useAgentUrlActions(_ref3) {
   var onConversationStarter = function onConversationStarter(_ref4) {
     var agentId = _ref4.agentId,
       prompt = _ref4.prompt;
-    var baseUrl = "".concat(getATLContextUrl('home'), "/chat");
-    var urlWithParams = encodeParamsToUrl(baseUrl, _objectSpread({
-      cloudId: cloudId
-    }, createRovoParams({
-      cloudId: cloudId,
-      agentId: agentId,
-      prompt: prompt,
-      pathway: 'chat'
-    })));
-    window.open(urlWithParams, '_blank', 'noopener, noreferrer');
+    var startConversationInNewTab = function startConversationInNewTab() {
+      var baseUrl = "".concat(getATLContextUrl('home'), "/chat");
+      var urlWithParams = encodeParamsToUrl(baseUrl, _objectSpread({
+        cloudId: cloudId
+      }, createRovoParams({
+        cloudId: cloudId,
+        agentId: agentId,
+        prompt: prompt,
+        pathway: 'chat'
+      })));
+      window.open(urlWithParams, '_blank', 'noopener, noreferrer');
+    };
+    if (fg('rovo_profile_card_open_chat_sidebar')) {
+      publishWithPostMessage({
+        targetWindow: window,
+        payload: {
+          type: 'chat-new',
+          source: 'AgentProfileCard',
+          data: {
+            name: prompt.slice(0, 50),
+            prompt: prompt,
+            agentId: agentId,
+            dialogues: []
+          }
+        },
+        onAcknowledgeTimeout: function onAcknowledgeTimeout() {
+          startConversationInNewTab();
+        }
+      });
+    } else {
+      startConversationInNewTab();
+    }
   };
-  var onOpenChat = function onOpenChat(agentId) {
-    var baseUrl = "".concat(getATLContextUrl('home'), "/chat");
-    var urlWithParams = encodeParamsToUrl(baseUrl, _objectSpread({
-      cloudId: cloudId
-    }, createRovoParams({
-      cloudId: cloudId,
-      agentId: agentId
-    })));
-    window.open(urlWithParams, '_blank', 'noopener, noreferrer');
+  var onOpenChat = function onOpenChat(agentId, agentName) {
+    var openChatInNewTab = function openChatInNewTab() {
+      var baseUrl = "".concat(getATLContextUrl('home'), "/chat");
+      var urlWithParams = encodeParamsToUrl(baseUrl, _objectSpread({
+        cloudId: cloudId
+      }, createRovoParams({
+        cloudId: cloudId,
+        agentId: agentId
+      })));
+      window.open(urlWithParams, '_blank', 'noopener, noreferrer');
+    };
+    if (fg('rovo_profile_card_open_chat_sidebar')) {
+      publishWithPostMessage({
+        targetWindow: window,
+        payload: {
+          type: 'chat-new',
+          source: 'AgentProfileCard',
+          data: {
+            agentId: agentId,
+            dialogues: [],
+            name: "Chat with ".concat(agentName)
+          }
+        },
+        onAcknowledgeTimeout: function onAcknowledgeTimeout() {
+          openChatInNewTab();
+        }
+      });
+    } else {
+      openChatInNewTab();
+    }
   };
   var onViewFullProfile = function onViewFullProfile(agentId) {
     window.open("".concat(window.location.origin, "/people/agent/").concat(agentId), '_blank', 'noopener, noreferrer');

package/dist/esm/util/analytics.js

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

package/dist/types/components/Agent/AgentProfileCardResourced.d.ts

@@ -10,4 +10,4 @@ export type AgentProfileCardResourcedProps = {
     product?: string;
     addFlag?: (flag: Flag) => void;
 } & AgentActionsType;
-export declare const AgentProfileCardResourced: (props: AgentProfileCardResourcedProps) => JSX.Element | null;
+export declare const AgentProfileCardResourced: (props: AgentProfileCardResourcedProps) => JSX.Element;

package/dist/types/components/Agent/hooks/useAgentActions.d.ts

@@ -5,7 +5,7 @@ export declare const useAgentUrlActions: ({ cloudId }: {
     onEditAgent: (agentId: string) => void;
     onCopyAgent: (agentId: string) => void;
     onDuplicateAgent: (agentId: string) => void;
-    onOpenChat: (agentId: string) => void;
+    onOpenChat: (agentId: string, agentName: string) => void;
     onConversationStarter: ({ agentId, prompt }: {
         agentId: string;
         prompt: string;

package/dist/types-ts4.5/components/Agent/AgentProfileCardResourced.d.ts

@@ -10,4 +10,4 @@ export type AgentProfileCardResourcedProps = {
     product?: string;
     addFlag?: (flag: Flag) => void;
 } & AgentActionsType;
-export declare const AgentProfileCardResourced: (props: AgentProfileCardResourcedProps) => JSX.Element | null;
+export declare const AgentProfileCardResourced: (props: AgentProfileCardResourcedProps) => JSX.Element;

package/dist/types-ts4.5/components/Agent/hooks/useAgentActions.d.ts

@@ -5,7 +5,7 @@ export declare const useAgentUrlActions: ({ cloudId }: {
     onEditAgent: (agentId: string) => void;
     onCopyAgent: (agentId: string) => void;
     onDuplicateAgent: (agentId: string) => void;
-    onOpenChat: (agentId: string) => void;
+    onOpenChat: (agentId: string, agentName: string) => void;
     onConversationStarter: ({ agentId, prompt }: {
         agentId: string;
         prompt: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "20.10.0",
+	"version": "20.12.0",
 	"description": "A React component to display a card with user information.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -65,8 +65,9 @@
 		"@atlaskit/modal-dialog": "^12.17.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/popup": "^1.29.0",
-		"@atlaskit/primitives": "^13.1.0",
+		"@atlaskit/primitives": "^13.2.0",
 		"@atlaskit/rovo-agent-components": "^1.12.0",
+		"@atlaskit/rovo-triggers": "^1.3.0",
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/theme": "^14.0.0",
 		"@atlaskit/tokens": "^2.2.0",
@@ -90,6 +91,7 @@
 		"@atlassian/feature-flags-test-utils": "*",
 		"@atlassian/ptc-test-utils": "^0.8.0",
 		"@testing-library/react": "^12.1.5",
+		"@testing-library/react-hooks": "^8.0.1",
 		"@testing-library/user-event": "^14.4.3",
 		"enzyme": "^3.10.0",
 		"es6-promise": "^4.0.5",
@@ -130,6 +132,9 @@
 		},
 		"platform_profile_card_css_refactor": {
 			"type": "boolean"
+		},
+		"rovo_profile_card_open_chat_sidebar": {
+			"type": "boolean"
 		}
 	}
 }