@atlaskit/profilecard
Version:
A React component to display a card with user information.
233 lines • 10.4 kB
JavaScript
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { useCallback, useEffect, useState } from 'react';
import { useIntl } from 'react-intl-next';
import { useAnalyticsEvents } from '@atlaskit/analytics-next';
import { Box, Stack, xcss } from '@atlaskit/primitives';
import { AgentAvatar, AgentBanner, AgentProfileCreator, AgentProfileInfo, AgentStarCount } from '@atlaskit/rovo-agent-components';
import { fireEvent, profileCardRendered } from '../../util/analytics';
import { LoadingState } from '../common/LoadingState';
import { ErrorMessage } from '../Error';
import { AgentActions } from './Actions';
import { AgentProfileCardWrapper } from './AgentProfileCardWrapper';
import { ConversationStarters } from './ConversationStarters';
import { useAgentUrlActions } from './hooks/useAgentActions';
import { messages } from './messages';
var styles = xcss({
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',
position: 'relative'
});
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,
isCreatedByViewingUser = _ref.isCreatedByViewingUser,
cloudId = _ref.cloudId,
_onChatClick = _ref.onChatClick,
_ref$product = _ref.product,
product = _ref$product === void 0 ? 'rovo' : _ref$product,
hasError = _ref.hasError,
errorType = _ref.errorType,
onConversationStartersClick = _ref.onConversationStartersClick,
resourceClient = _ref.resourceClient,
addFlag = _ref.addFlag;
var _useAgentUrlActions = useAgentUrlActions({
cloudId: cloudId || ''
}),
_onEditAgent = _useAgentUrlActions.onEditAgent,
_onCopyAgent = _useAgentUrlActions.onCopyAgent,
_onDuplicateAgent = _useAgentUrlActions.onDuplicateAgent,
onOpenChatFullScreen = _useAgentUrlActions.onOpenChat,
onConversationStarter = _useAgentUrlActions.onConversationStarter,
onViewFullProfile = _useAgentUrlActions.onViewFullProfile;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
isStarred = _useState2[0],
setIsStarred = _useState2[1];
var _useState3 = useState(),
_useState4 = _slicedToArray(_useState3, 2),
starCount = _useState4[0],
setStarCount = _useState4[1];
var _useIntl = useIntl(),
formatMessage = _useIntl.formatMessage;
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'
};
});
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 _useAnalyticsEvents = useAnalyticsEvents(),
createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
var fireAnalytics = useCallback(function (payload) {
if (createAnalyticsEvent) {
fireEvent(createAnalyticsEvent, payload);
}
}, [createAnalyticsEvent]);
var handleSetFavourite = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
return _regeneratorRuntime.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, fireAnalytics);
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, fireAnalytics, isStarred, resourceClient, starCount]);
var handleOnDelete = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
if (!agent) {
_context2.next = 10;
break;
}
_context2.prev = 1;
_context2.next = 4;
return resourceClient.deleteAgent(agent.id, fireAnalytics);
case 4:
addFlag === null || addFlag === void 0 || addFlag({
title: formatMessage(messages.agentDeletedSuccessFlagTitle),
description: formatMessage(messages.agentDeletedSuccessFlagDescription, {
agentName: agent.name
}),
type: 'success',
id: 'ptc-directory.agent-profile.delete-agent-success'
});
_context2.next = 10;
break;
case 7:
_context2.prev = 7;
_context2.t0 = _context2["catch"](1);
addFlag === null || addFlag === void 0 || addFlag({
title: formatMessage(messages.agentDeletedErrorFlagTitle),
description: formatMessage(messages.agentDeletedErrorFlagDescription),
type: 'error',
id: 'ptc-directory.agent-profile.delete-agent-error'
});
case 10:
case "end":
return _context2.stop();
}
}, _callee2, null, [[1, 7]]);
})), [addFlag, agent, fireAnalytics, formatMessage, resourceClient]);
useEffect(function () {
if (!isLoading && agent) {
fireAnalytics(profileCardRendered('agent', 'content'));
}
}, [agent, fireAnalytics, isLoading]);
if (isLoading) {
return /*#__PURE__*/React.createElement(AgentProfileCardWrapper, null, /*#__PURE__*/React.createElement(LoadingState, {
profileType: "agent",
fireAnalytics: fireAnalytics
}));
}
if (hasError || !agent) {
return /*#__PURE__*/React.createElement(AgentProfileCardWrapper, null, /*#__PURE__*/React.createElement(ErrorMessage, {
errorType: errorType,
fireAnalytics: fireAnalytics
}));
}
return /*#__PURE__*/React.createElement(AgentProfileCardWrapper, null, /*#__PURE__*/React.createElement(Box, {
xcss: cardContainerStyles
}, /*#__PURE__*/React.createElement(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: 96,
agentIdentityAccountId: agent.identity_account_id
}), /*#__PURE__*/React.createElement(Box, {
xcss: avatarStyles
}, /*#__PURE__*/React.createElement(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: "xlarge",
isForgeAgent: agent.creator_type === 'FORGE' || agent.creator_type === 'THIRD_PARTY',
forgeAgentIconUrl: agent.icon
})), /*#__PURE__*/React.createElement(Stack, {
space: "space.100",
xcss: styles
}, /*#__PURE__*/React.createElement(AgentProfileInfo, {
agentName: agent.name,
isStarred: isStarred,
onStarToggle: handleSetFavourite,
isHidden: agent.visibility === 'PRIVATE',
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,
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: /*#__PURE__*/React.createElement(AgentStarCount, {
starCount: starCount,
isLoading: false
}),
agentDescription: agent.description
}), /*#__PURE__*/React.createElement(ConversationStarters, {
isAgentDefault: agent.is_default,
userDefinedConversationStarters: userDefinedConversationStarters,
onConversationStarterClick: function onConversationStarterClick(conversationStarter) {
onConversationStartersClick ? onConversationStartersClick(conversationStarter) : onConversationStarter({
agentId: agent.id,
prompt: conversationStarter.message
});
}
})), /*#__PURE__*/React.createElement(AgentActions, {
agent: agent,
isAgentCreatedByCurrentUser: isCreatedByViewingUser,
onEditAgent: function onEditAgent() {
return _onEditAgent(agent.id);
},
onCopyAgent: function onCopyAgent() {
return _onCopyAgent(agent.id);
},
onDuplicateAgent: function onDuplicateAgent() {
return _onDuplicateAgent(agent.id);
},
onDeleteAgent: handleOnDelete,
onChatClick: function onChatClick() {
return _onChatClick ? _onChatClick() : onOpenChatFullScreen(agent.id, agent.name);
},
resourceClient: resourceClient,
onViewFullProfileClick: function onViewFullProfileClick() {
return onViewFullProfile(agent.id);
}
})));
};
export default AgentProfileCard;