@atlaskit/profilecard
Version:
A React component to display a card with user information.
220 lines • 10.2 kB
JavaScript
/* AgentProfileCard.tsx generated by @compiled/babel-plugin v0.39.1 */
import "./AgentProfileCard.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { useCallback, useEffect, useState } from 'react';
import { useIntl } from 'react-intl-next';
import InformationCircleIcon from '@atlaskit/icon/core/information-circle';
import Link from '@atlaskit/link';
import { fg } from '@atlaskit/platform-feature-flags';
import { Box, Flex, Stack, Text } from '@atlaskit/primitives/compiled';
import { isForgeAgentByCreatorType } from '@atlaskit/rovo-agent-components/common/utils/is-forge-agent';
import { AgentBanner } from '@atlaskit/rovo-agent-components/ui/agent-avatar/GeneratedAvatar';
import { AgentAvatar } from '@atlaskit/rovo-agent-components/ui/AgentAvatar';
import { AgentProfileCreator, AgentProfileInfo } from '@atlaskit/rovo-agent-components/ui/AgentProfileInfo';
import { useAnalyticsEvents as useAnalyticsEventsNext } from '@atlaskit/teams-app-internal-analytics';
import { PACKAGE_META_DATA } from '../../util/analytics';
import { getPageTime } from '../../util/performance';
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';
const styles = {
detailWrapper: "_1q511ejb",
avatarStyles: "_kqswstnw _154i1ejb _1ltvpxbi",
cardContainerStyles: "_2rko1mok _16qs130s _kqswh2mm",
agentProfileInfoWrapper: "_18zrpxbi",
conversationStartersWrapper: "_18zrutpp",
disclosureWrapper: "_zulp1b66 _18zrpxbi _1q51utpp _85i5utpp"
};
const AgentProfileCard = ({
agent,
isLoading,
cloudId,
onChatClick,
hasError,
errorType,
onConversationStartersClick,
resourceClient,
addFlag,
onDeleteAgent,
hideMoreActions,
hideAiDisclaimer = false,
hideConversationStarters = false
}) => {
var _agent$user_defined_c, _agent$external_confi, _agent$external_confi2, _agent$creatorInfo, _agent$creatorInfo2, _agent$creatorInfo3, _agent$creatorInfo4;
const {
onEditAgent,
onCopyAgent,
onDuplicateAgent,
onOpenChat: onOpenChatFullScreen,
onConversationStarter,
onViewFullProfile
} = useAgentUrlActions({
cloudId: cloudId || '',
source: 'agentProfileCard'
});
const [isStarred, setIsStarred] = useState(false);
const [starCount, setStarCount] = useState();
const {
formatMessage
} = useIntl();
const {
fireEvent
} = useAnalyticsEventsNext();
const userDefinedConversationStarters = agent === null || agent === void 0 ? 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(starter => {
return {
message: starter,
type: 'user-defined'
};
});
useEffect(() => {
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]);
const handleSetFavourite = useCallback(async () => {
if (agent !== null && agent !== void 0 && agent.id) {
try {
await resourceClient.setFavouriteAgent(agent.id, !isStarred, fireEvent);
if (isStarred) {
setStarCount(starCount ? starCount - 1 : 0);
} else {
setStarCount((starCount || 0) + 1);
}
setIsStarred(!isStarred);
} catch {}
}
}, [agent === null || agent === void 0 ? void 0 : agent.id, fireEvent, isStarred, resourceClient, starCount]);
const handleOnDelete = useCallback(async () => {
if (agent && onDeleteAgent) {
// Optimistically remove from cache
const {
restore
} = onDeleteAgent(agent.id);
try {
await resourceClient.deleteAgent(agent.id, fireEvent);
addFlag === null || addFlag === void 0 ? void 0 : addFlag({
title: formatMessage(messages.agentDeletedSuccessFlagTitle),
description: formatMessage(messages.agentDeletedSuccessFlagDescription, {
agentName: agent.name
}),
type: 'success',
id: 'ptc-directory.agent-profile.delete-agent-success'
});
} catch {
// Restore agent to cache on error
restore();
addFlag === null || addFlag === void 0 ? void 0 : addFlag({
title: formatMessage(messages.agentDeletedErrorFlagTitle),
description: formatMessage(messages.agentDeletedErrorFlagDescription),
type: 'error',
id: 'ptc-directory.agent-profile.delete-agent-error'
});
}
}
}, [addFlag, agent, formatMessage, onDeleteAgent, resourceClient, fireEvent]);
useEffect(() => {
if (!isLoading && agent) {
fireEvent(`ui.rovoAgentProfilecard.rendered.content`, {
...PACKAGE_META_DATA,
firedAt: Math.round(getPageTime())
});
}
}, [agent, fireEvent, isLoading]);
if (isLoading) {
return /*#__PURE__*/React.createElement(AgentProfileCardWrapper, null, /*#__PURE__*/React.createElement(LoadingState, {
profileType: "agent",
fireAnalytics: fireEvent
}));
}
if (hasError || !agent) {
return /*#__PURE__*/React.createElement(AgentProfileCardWrapper, null, /*#__PURE__*/React.createElement(ErrorMessage, {
errorType: errorType,
fireAnalytics: fireEvent
}));
}
const isRovoDev = agent.creator_type === 'ROVO_DEV';
const shouldShowConversationStarters = !(isRovoDev && fg('rovo_dev_themed_identity_card')) && !(fg('jira_ai_hide_conversation_starters_profilecard') && hideConversationStarters);
return /*#__PURE__*/React.createElement(AgentProfileCardWrapper, null, /*#__PURE__*/React.createElement(Box, {
xcss: styles.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: 48,
agentIdentityAccountId: agent.identity_account_id,
isRovoDev: isRovoDev && fg('rovo_dev_themed_identity_card')
}), /*#__PURE__*/React.createElement(Box, {
xcss: styles.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: "large",
isRovoDev: isRovoDev && fg('rovo_dev_themed_identity_card'),
isForgeAgent: fg('rovo_agent_support_a2a_avatar') ? isForgeAgentByCreatorType(agent.creator_type) : agent.creator_type === 'FORGE' || agent.creator_type === 'THIRD_PARTY',
forgeAgentIconUrl: agent.icon
})), /*#__PURE__*/React.createElement(Stack, {
space: "space.100",
xcss: styles.detailWrapper
}, /*#__PURE__*/React.createElement(Box, {
xcss: styles.agentProfileInfoWrapper
}, /*#__PURE__*/React.createElement(AgentProfileInfo, {
agentName: agent.name,
isStarred: isStarred,
onStarToggle: handleSetFavourite,
showStarButton: !(isRovoDev && 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.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: () => {}
}),
starCountRender: null,
agentDescription: agent.description
})), !hideAiDisclaimer && fg('rovo_display_ai_disclaimer_on_agent_profile_card') && /*#__PURE__*/React.createElement(Flex, {
alignItems: "start",
direction: "column",
gap: "space.050",
xcss: styles.disclosureWrapper
}, /*#__PURE__*/React.createElement(Link, {
href: "https://www.atlassian.com/trust/atlassian-intelligence",
target: "_blank",
rel: "noopener noreferrer",
appearance: "subtle"
}, /*#__PURE__*/React.createElement(InformationCircleIcon, {
color: "var(--ds-icon-subtlest, #6B6E76)",
label: "",
size: "small"
}), ` `, /*#__PURE__*/React.createElement(Text, {
size: "small",
color: "color.text.subtlest"
}, formatMessage(messages.aiDisclaimer)))), shouldShowConversationStarters && /*#__PURE__*/React.createElement(Box, {
xcss: styles.conversationStartersWrapper
}, /*#__PURE__*/React.createElement(ConversationStarters, {
isAgentDefault: agent.is_default,
userDefinedConversationStarters: userDefinedConversationStarters,
onConversationStarterClick: conversationStarter => {
onConversationStartersClick ? onConversationStartersClick(conversationStarter) : onConversationStarter({
agentId: agent.id,
prompt: conversationStarter.message
});
}
}))), !(isRovoDev && fg('rovo_dev_themed_identity_card')) && /*#__PURE__*/React.createElement(AgentActions, {
agent: agent,
onEditAgent: () => onEditAgent(agent.id),
onCopyAgent: () => onCopyAgent(agent.id),
onDuplicateAgent: () => onDuplicateAgent(agent.id),
onDeleteAgent: handleOnDelete,
onChatClick: onChatClick ? event => onChatClick(event) : () => onOpenChatFullScreen(agent.id, agent.name),
resourceClient: resourceClient,
onViewFullProfileClick: () => onViewFullProfile(agent.id),
hideMoreActions: hideMoreActions
})));
};
export default AgentProfileCard;