@atlaskit/profilecard
Version:
A React component to display a card with user information.
280 lines (279 loc) • 15.7 kB
JavaScript
/* AgentProfileCard.tsx generated by @compiled/babel-plugin v0.39.1 */
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("./AgentProfileCard.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _reactIntlNext = require("react-intl-next");
var _informationCircle = _interopRequireDefault(require("@atlaskit/icon/core/information-circle"));
var _link = _interopRequireDefault(require("@atlaskit/link"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _compiled = require("@atlaskit/primitives/compiled");
var _isForgeAgent = require("@atlaskit/rovo-agent-components/common/utils/is-forge-agent");
var _GeneratedAvatar = require("@atlaskit/rovo-agent-components/ui/agent-avatar/GeneratedAvatar");
var _AgentAvatar = require("@atlaskit/rovo-agent-components/ui/AgentAvatar");
var _AgentProfileInfo = require("@atlaskit/rovo-agent-components/ui/AgentProfileInfo");
var _teamsAppInternalAnalytics = require("@atlaskit/teams-app-internal-analytics");
var _analytics = require("../../util/analytics");
var _performance = require("../../util/performance");
var _LoadingState = require("../common/LoadingState");
var _Error = require("../Error");
var _Actions = require("./Actions");
var _AgentProfileCardWrapper = require("./AgentProfileCardWrapper");
var _ConversationStarters = require("./ConversationStarters");
var _useAgentActions = require("./hooks/useAgentActions");
var _messages = require("./messages");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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 styles = {
detailWrapper: "_1q511ejb",
avatarStyles: "_kqswstnw _154i1ejb _1ltvpxbi",
cardContainerStyles: "_2rko1mok _16qs130s _kqswh2mm",
agentProfileInfoWrapper: "_18zrpxbi",
conversationStartersWrapper: "_18zrutpp",
disclosureWrapper: "_zulp1b66 _18zrpxbi _1q51utpp _85i5utpp"
};
var AgentProfileCard = function AgentProfileCard(_ref) {
var _agent$user_defined_c, _agent$external_confi, _agent$external_confi2, _agent$creatorInfo, _agent$creatorInfo2, _agent$creatorInfo3, _agent$creatorInfo4;
var agent = _ref.agent,
isLoading = _ref.isLoading,
cloudId = _ref.cloudId,
onChatClick = _ref.onChatClick,
hasError = _ref.hasError,
errorType = _ref.errorType,
onConversationStartersClick = _ref.onConversationStartersClick,
resourceClient = _ref.resourceClient,
addFlag = _ref.addFlag,
onDeleteAgent = _ref.onDeleteAgent,
hideMoreActions = _ref.hideMoreActions,
_ref$hideAiDisclaimer = _ref.hideAiDisclaimer,
hideAiDisclaimer = _ref$hideAiDisclaimer === void 0 ? false : _ref$hideAiDisclaimer,
_ref$hideConversation = _ref.hideConversationStarters,
hideConversationStarters = _ref$hideConversation === void 0 ? false : _ref$hideConversation;
var _useAgentUrlActions = (0, _useAgentActions.useAgentUrlActions)({
cloudId: cloudId || '',
source: 'agentProfileCard'
}),
_onEditAgent = _useAgentUrlActions.onEditAgent,
_onCopyAgent = _useAgentUrlActions.onCopyAgent,
_onDuplicateAgent = _useAgentUrlActions.onDuplicateAgent,
onOpenChatFullScreen = _useAgentUrlActions.onOpenChat,
onConversationStarter = _useAgentUrlActions.onConversationStarter,
onViewFullProfile = _useAgentUrlActions.onViewFullProfile;
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
isStarred = _useState2[0],
setIsStarred = _useState2[1];
var _useState3 = (0, _react.useState)(),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
starCount = _useState4[0],
setStarCount = _useState4[1];
var _useIntl = (0, _reactIntlNext.useIntl)(),
formatMessage = _useIntl.formatMessage;
var _useAnalyticsEventsNe = (0, _teamsAppInternalAnalytics.useAnalyticsEvents)(),
fireEvent = _useAnalyticsEventsNe.fireEvent;
var userDefinedConversationStarters = agent === null || agent === void 0 || (_agent$user_defined_c = agent.user_defined_conversation_starters) === null || _agent$user_defined_c === void 0 ? void 0 : _agent$user_defined_c.map(function (starter) {
return {
message: starter,
type: 'user-defined'
};
});
(0, _react.useEffect)(function () {
setIsStarred(!!(agent !== null && agent !== void 0 && agent.favourite));
setStarCount(agent === null || agent === void 0 ? void 0 : agent.favourite_count);
}, [agent === null || agent === void 0 ? void 0 : agent.favourite, agent === null || agent === void 0 ? void 0 : agent.favourite_count]);
var handleSetFavourite = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
return _regenerator.default.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
if (!(agent !== null && agent !== void 0 && agent.id)) {
_context.next = 10;
break;
}
_context.prev = 1;
_context.next = 4;
return resourceClient.setFavouriteAgent(agent.id, !isStarred, fireEvent);
case 4:
if (isStarred) {
setStarCount(starCount ? starCount - 1 : 0);
} else {
setStarCount((starCount || 0) + 1);
}
setIsStarred(!isStarred);
_context.next = 10;
break;
case 8:
_context.prev = 8;
_context.t0 = _context["catch"](1);
case 10:
case "end":
return _context.stop();
}
}, _callee, null, [[1, 8]]);
})), [agent === null || agent === void 0 ? void 0 : agent.id, fireEvent, isStarred, resourceClient, starCount]);
var handleOnDelete = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
var _onDeleteAgent, restore;
return _regenerator.default.wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
if (!(agent && onDeleteAgent)) {
_context2.next = 12;
break;
}
// Optimistically remove from cache
_onDeleteAgent = onDeleteAgent(agent.id), restore = _onDeleteAgent.restore;
_context2.prev = 2;
_context2.next = 5;
return resourceClient.deleteAgent(agent.id, fireEvent);
case 5:
addFlag === null || addFlag === void 0 || addFlag({
title: formatMessage(_messages.messages.agentDeletedSuccessFlagTitle),
description: formatMessage(_messages.messages.agentDeletedSuccessFlagDescription, {
agentName: agent.name
}),
type: 'success',
id: 'ptc-directory.agent-profile.delete-agent-success'
});
_context2.next = 12;
break;
case 8:
_context2.prev = 8;
_context2.t0 = _context2["catch"](2);
// Restore agent to cache on error
restore();
addFlag === null || addFlag === void 0 || addFlag({
title: formatMessage(_messages.messages.agentDeletedErrorFlagTitle),
description: formatMessage(_messages.messages.agentDeletedErrorFlagDescription),
type: 'error',
id: 'ptc-directory.agent-profile.delete-agent-error'
});
case 12:
case "end":
return _context2.stop();
}
}, _callee2, null, [[2, 8]]);
})), [addFlag, agent, formatMessage, onDeleteAgent, resourceClient, fireEvent]);
(0, _react.useEffect)(function () {
if (!isLoading && agent) {
fireEvent("ui.rovoAgentProfilecard.rendered.content", _objectSpread(_objectSpread({}, _analytics.PACKAGE_META_DATA), {}, {
firedAt: Math.round((0, _performance.getPageTime)())
}));
}
}, [agent, fireEvent, isLoading]);
if (isLoading) {
return /*#__PURE__*/_react.default.createElement(_AgentProfileCardWrapper.AgentProfileCardWrapper, null, /*#__PURE__*/_react.default.createElement(_LoadingState.LoadingState, {
profileType: "agent",
fireAnalytics: fireEvent
}));
}
if (hasError || !agent) {
return /*#__PURE__*/_react.default.createElement(_AgentProfileCardWrapper.AgentProfileCardWrapper, null, /*#__PURE__*/_react.default.createElement(_Error.ErrorMessage, {
errorType: errorType,
fireAnalytics: fireEvent
}));
}
var isRovoDev = agent.creator_type === 'ROVO_DEV';
var shouldShowConversationStarters = !(isRovoDev && (0, _platformFeatureFlags.fg)('rovo_dev_themed_identity_card')) && !((0, _platformFeatureFlags.fg)('jira_ai_hide_conversation_starters_profilecard') && hideConversationStarters);
return /*#__PURE__*/_react.default.createElement(_AgentProfileCardWrapper.AgentProfileCardWrapper, null, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
xcss: styles.cardContainerStyles
}, /*#__PURE__*/_react.default.createElement(_GeneratedAvatar.AgentBanner, {
agentId: agent.id,
agentNamedId: (_agent$external_confi = agent.external_config_reference) !== null && _agent$external_confi !== void 0 ? _agent$external_confi : agent.named_id,
height: 48,
agentIdentityAccountId: agent.identity_account_id,
isRovoDev: isRovoDev && (0, _platformFeatureFlags.fg)('rovo_dev_themed_identity_card')
}), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
xcss: styles.avatarStyles
}, /*#__PURE__*/_react.default.createElement(_AgentAvatar.AgentAvatar, {
agentId: agent.id,
agentNamedId: (_agent$external_confi2 = agent.external_config_reference) !== null && _agent$external_confi2 !== void 0 ? _agent$external_confi2 : agent.named_id,
agentIdentityAccountId: agent.identity_account_id,
size: "large",
isRovoDev: isRovoDev && (0, _platformFeatureFlags.fg)('rovo_dev_themed_identity_card'),
isForgeAgent: (0, _platformFeatureFlags.fg)('rovo_agent_support_a2a_avatar') ? (0, _isForgeAgent.isForgeAgentByCreatorType)(agent.creator_type) : agent.creator_type === 'FORGE' || agent.creator_type === 'THIRD_PARTY',
forgeAgentIconUrl: agent.icon
})), /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
space: "space.100",
xcss: styles.detailWrapper
}, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
xcss: styles.agentProfileInfoWrapper
}, /*#__PURE__*/_react.default.createElement(_AgentProfileInfo.AgentProfileInfo, {
agentName: agent.name,
isStarred: isStarred,
onStarToggle: handleSetFavourite,
showStarButton: !(isRovoDev && (0, _platformFeatureFlags.fg)('rovo_dev_themed_identity_card')),
isHidden: agent.visibility === 'PRIVATE',
creatorRender: ((_agent$creatorInfo = agent.creatorInfo) === null || _agent$creatorInfo === void 0 ? void 0 : _agent$creatorInfo.type) && /*#__PURE__*/_react.default.createElement(_AgentProfileInfo.AgentProfileCreator, {
creator: {
type: (_agent$creatorInfo2 = agent.creatorInfo) === null || _agent$creatorInfo2 === void 0 ? void 0 : _agent$creatorInfo2.type,
name: ((_agent$creatorInfo3 = agent.creatorInfo) === null || _agent$creatorInfo3 === void 0 ? void 0 : _agent$creatorInfo3.name) || '',
profileLink: ((_agent$creatorInfo4 = agent.creatorInfo) === null || _agent$creatorInfo4 === void 0 ? void 0 : _agent$creatorInfo4.profileLink) || ''
},
isLoading: false,
onCreatorLinkClick: function onCreatorLinkClick() {}
}),
starCountRender: null,
agentDescription: agent.description
})), !hideAiDisclaimer && (0, _platformFeatureFlags.fg)('rovo_display_ai_disclaimer_on_agent_profile_card') && /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
alignItems: "start",
direction: "column",
gap: "space.050",
xcss: styles.disclosureWrapper
}, /*#__PURE__*/_react.default.createElement(_link.default, {
href: "https://www.atlassian.com/trust/atlassian-intelligence",
target: "_blank",
rel: "noopener noreferrer",
appearance: "subtle"
}, /*#__PURE__*/_react.default.createElement(_informationCircle.default, {
color: "var(--ds-icon-subtlest, #6B6E76)",
label: "",
size: "small"
}), " ", /*#__PURE__*/_react.default.createElement(_compiled.Text, {
size: "small",
color: "color.text.subtlest"
}, formatMessage(_messages.messages.aiDisclaimer)))), shouldShowConversationStarters && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
xcss: styles.conversationStartersWrapper
}, /*#__PURE__*/_react.default.createElement(_ConversationStarters.ConversationStarters, {
isAgentDefault: agent.is_default,
userDefinedConversationStarters: userDefinedConversationStarters,
onConversationStarterClick: function onConversationStarterClick(conversationStarter) {
onConversationStartersClick ? onConversationStartersClick(conversationStarter) : onConversationStarter({
agentId: agent.id,
prompt: conversationStarter.message
});
}
}))), !(isRovoDev && (0, _platformFeatureFlags.fg)('rovo_dev_themed_identity_card')) && /*#__PURE__*/_react.default.createElement(_Actions.AgentActions, {
agent: agent,
onEditAgent: function onEditAgent() {
return _onEditAgent(agent.id);
},
onCopyAgent: function onCopyAgent() {
return _onCopyAgent(agent.id);
},
onDuplicateAgent: function onDuplicateAgent() {
return _onDuplicateAgent(agent.id);
},
onDeleteAgent: handleOnDelete,
onChatClick: onChatClick ? function (event) {
return onChatClick(event);
} : function () {
return onOpenChatFullScreen(agent.id, agent.name);
},
resourceClient: resourceClient,
onViewFullProfileClick: function onViewFullProfileClick() {
return onViewFullProfile(agent.id);
},
hideMoreActions: hideMoreActions
})));
};
var _default = exports.default = AgentProfileCard;