@atlaskit/rovo-agent-components
Version:
This package host public components related to rovo agents, the components here are needed for other public atlaskit packages
469 lines (464 loc) • 18.5 kB
JavaScript
/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
import "./index.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { lazy, Suspense, useEffect } from 'react';
import { AVATAR_SIZES } from '@atlaskit/avatar';
import { cx } from '@atlaskit/css';
import { fg } from '@atlaskit/platform-feature-flags';
import { Box } from '@atlaskit/primitives/compiled';
const styles = {
image: "_5ral1dfr _4t3i1osq _1bsb1osq _1e0c1txw _1bah1h6o _4cvr1h6o",
banner: "_1bsb1osq",
bannerFillSpace: "_1bsb1osq _4t3i1osq _5ral1dfr",
bannerRemoteA2A: "_bfhk7qp0"
};
const Observer = ({
onLoad
}) => {
useEffect(() => {
onLoad();
}, [onLoad]);
return null;
};
const AutoDevAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-AutoDevAvatar"*/'./assets/auto-dev'));
const AutoFixAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-AutoFixAvatar"*/'./assets/auto-fix'));
const AutoReviewAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-AutoReviewAvatar"*/'./assets/auto-review'));
const BacklogBuddyAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-BacklogBuddyAvatar"*/'./assets/backlog-buddy'));
const CommsCrafterAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-CommsCrafterAvatar"*/'./assets/comms-crafter'));
const CultureAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-CultureAvatar"*/'./assets/culture'));
const CustomerInsightAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-CustomerInsightAvatar"*/'./assets/customer-insight'));
const DecisionDirectorAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-DecisionDirectorAvatar"*/'./assets/decision-director'));
const FeatureFlagAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-FeatureFlagAvatar"*/'./assets/feature-flag-avatar'));
const GenericAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-GenericAvatar"*/'./assets/generic-avatar'));
const HireWriterAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-HireWriterAvatar"*/'./assets/hire-writer'));
const MarketingMessageMaestroAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-MarketingMessageMaestroAvatar"*/'./assets/marketing-message-maestro'));
const MyUserManualAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-MyUserManualAvatar"*/'./assets/my-user-manual'));
const OkrOracleAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-OkrOracleAvatar"*/'./assets/okr-oracle'));
const OpsAgentAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-OpsAgentAvatar"*/'./assets/ops-agent'));
const PitchPerfectorAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-PitchPerfectorAvatar"*/'./assets/pitch-perfector'));
const ProductRequirementAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-ProductRequirementAvatar"*/'./assets/product-requirement'));
const ReleaseNotesAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-ReleaseNotesAvatar"*/'./assets/release-notes'));
const ResearchScoutAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-ResearchScoutAvatar"*/'./assets/research-scout'));
const RovoDevAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-RovoDevAvatar"*/'./assets/rovo-dev'));
const SocialMediaScribeAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-SocialMediaScribeAvatar"*/'./assets/social-media-scribe'));
const TeamConnectionAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-TeamConnectionAvatar"*/'./assets/team-connection'));
const WorkflowBuilderAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-WorkflowBuilderAvatar"*/'./assets/workflow-builder'));
const TrialGuideAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-TrialGuideAvatar"*/'./assets/trial-guide'));
const JsmRovoServiceAgentAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-JsmRovoServiceAgentAvatar"*/'./assets/jsm-rovo-service-agent'));
/**
* OOTB Agents avatars - start
*/
const AmplitudeAgentAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-AmplitudeAgentAvatar"*/'./assets/amplitude-agent'));
const BoxAgentAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-BoxAgentAvatar"*/'./assets/box-agent'));
const CanvaAgentAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-CanvaAgentAvatar"*/'./assets/canva-agent'));
const FigmaAgentAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-FigmaAgentAvatar"*/'./assets/figma-agent'));
const HubSpotAgentAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-HubSpotAgentAvatar"*/'./assets/hubspot-agent'));
const IntercomAgentAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-IntercomAgentAvatar"*/'./assets/intercom-agent'));
const GammaAgentAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-GammaAgentAvatar"*/'./assets/gamma-agent'));
const LovableAgentAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-LovableAgentAvatar"*/'./assets/lovable-agent'));
const ReplitAgentAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-ReplitAgentAvatar"*/'./assets/replit-agent'));
const RovoAgentAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-RovoAgentAvatar"*/'./assets/rovo-agent'));
const JiraWorkAgentAvatar = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-rovo-avatar-JiraWorkAgentAvatar"*/'./assets/jira-work-agent'));
/**
* OOTB Agents avatars - end
*/
export const yellowColor = {
primary: '#FCA700',
secondary: '#FFC716'
};
export const purpleColor = {
primary: '#BF63F3',
secondary: '#D8A0F7'
};
export const greenColor = {
primary: '#82B536',
secondary: '#B3DF72'
};
export const blueColor = {
primary: '#357DE8',
secondary: '#669DF1'
};
const colorList = [yellowColor, purpleColor, greenColor, blueColor];
/**
* NOTE: DO NOT ADD OOTB AGENTAVATARS TO THIS LIST
*/
const avatarList = [CustomerInsightAvatar, BacklogBuddyAvatar, DecisionDirectorAvatar, CommsCrafterAvatar, AutoDevAvatar, OkrOracleAvatar, CultureAvatar, SocialMediaScribeAvatar, TeamConnectionAvatar, HireWriterAvatar, OpsAgentAvatar, ResearchScoutAvatar, ReleaseNotesAvatar, MyUserManualAvatar, PitchPerfectorAvatar, AutoDevAvatar, AutoFixAvatar, AutoReviewAvatar, MarketingMessageMaestroAvatar, FeatureFlagAvatar, ProductRequirementAvatar];
export const TOTAL_AVATAR_COMBINATIONS = avatarList.length * colorList.length;
const outOfTheBoxAgentAvatar = {
autodev_template_unit_test_creator: {
getRender: size => /*#__PURE__*/React.createElement(AutoFixAvatar, {
size: AVATAR_SIZES[size],
primaryColor: greenColor.primary,
secondaryColor: greenColor.secondary
}),
color: greenColor
},
autodev_template_migration_config_changer_agent: {
getRender: size => /*#__PURE__*/React.createElement(OpsAgentAvatar, {
size: AVATAR_SIZES[size],
primaryColor: greenColor.primary,
secondaryColor: greenColor.secondary
}),
color: greenColor
},
autodev_template_vulnerable_dependency_updater_agent: {
getRender: size => /*#__PURE__*/React.createElement(MarketingMessageMaestroAvatar, {
size: AVATAR_SIZES[size],
primaryColor: greenColor.primary,
secondaryColor: greenColor.secondary
}),
color: greenColor
},
autodev_template_code_standardizer_agent: {
getRender: size => /*#__PURE__*/React.createElement(MyUserManualAvatar, {
size: AVATAR_SIZES[size],
primaryColor: greenColor.primary,
secondaryColor: greenColor.secondary
}),
color: greenColor
},
autodev_template_code_observer_agent: {
getRender: size => /*#__PURE__*/React.createElement(ResearchScoutAvatar, {
size: AVATAR_SIZES[size],
primaryColor: greenColor.primary,
secondaryColor: greenColor.secondary
}),
color: greenColor
},
autodev_template_code_accessibility_checker_agent: {
getRender: size => /*#__PURE__*/React.createElement(HireWriterAvatar, {
size: AVATAR_SIZES[size],
primaryColor: greenColor.primary,
secondaryColor: greenColor.secondary
}),
color: greenColor
},
autodev_code_documentation_writer_agent: {
getRender: size => /*#__PURE__*/React.createElement(SocialMediaScribeAvatar, {
size: AVATAR_SIZES[size],
primaryColor: greenColor.primary,
secondaryColor: greenColor.secondary
}),
color: greenColor
},
autodev_feature_flag_cleaner_agent: {
getRender: size => /*#__PURE__*/React.createElement(FeatureFlagAvatar, {
size: AVATAR_SIZES[size],
primaryColor: greenColor.primary,
secondaryColor: greenColor.secondary
}),
color: greenColor
},
decision_director_agent: {
getRender: size => /*#__PURE__*/React.createElement(DecisionDirectorAvatar, {
size: AVATAR_SIZES[size],
primaryColor: greenColor.primary,
secondaryColor: greenColor.secondary
}),
color: greenColor
},
user_manual_writer_agent: {
getRender: size => /*#__PURE__*/React.createElement(MyUserManualAvatar, {
size: AVATAR_SIZES[size],
primaryColor: yellowColor.primary,
secondaryColor: yellowColor.secondary
}),
color: yellowColor
},
product_requirements_expert_agent: {
getRender: size => /*#__PURE__*/React.createElement(ProductRequirementAvatar, {
size: AVATAR_SIZES[size],
primaryColor: yellowColor.primary,
secondaryColor: yellowColor.secondary
}),
color: yellowColor
},
issue_organizer_agent: {
getRender: size => /*#__PURE__*/React.createElement(BacklogBuddyAvatar, {
size: AVATAR_SIZES[size],
primaryColor: greenColor.primary,
secondaryColor: greenColor.secondary
}),
color: greenColor
},
ops_guide_agent: {
getRender: size => /*#__PURE__*/React.createElement(OpsAgentAvatar, {
size: AVATAR_SIZES[size],
primaryColor: yellowColor.primary,
secondaryColor: yellowColor.secondary
}),
color: yellowColor
},
jira_workflow_builder_agent: {
getRender: size => /*#__PURE__*/React.createElement(WorkflowBuilderAvatar, {
size: AVATAR_SIZES[size],
primaryColor: blueColor.primary,
secondaryColor: blueColor.secondary
}),
color: blueColor
},
itops_rca_agent: {
getRender: size => /*#__PURE__*/React.createElement(AutoReviewAvatar, {
size: AVATAR_SIZES[size],
primaryColor: yellowColor.primary,
secondaryColor: yellowColor.secondary
}),
color: yellowColor
},
jira_trial_guide_agent: {
getRender: size => /*#__PURE__*/React.createElement(TrialGuideAvatar, {
size: AVATAR_SIZES[size],
primaryColor: blueColor.primary,
secondaryColor: blueColor.secondary
}),
color: blueColor
},
jira_admin_agent: {
getRender: size => /*#__PURE__*/React.createElement(AutoDevAvatar, {
size: AVATAR_SIZES[size],
primaryColor: blueColor.primary,
secondaryColor: blueColor.secondary
}),
color: blueColor
},
jsm_rovo_service_agent: {
getRender: size => /*#__PURE__*/React.createElement(JsmRovoServiceAgentAvatar, {
size: AVATAR_SIZES[size],
primaryColor: "",
secondaryColor: ""
}),
color: yellowColor
},
mcp_amplitude_agent: {
getRender: size => /*#__PURE__*/React.createElement(AmplitudeAgentAvatar, {
size: AVATAR_SIZES[size],
primaryColor: "",
secondaryColor: ""
}),
color: blueColor
},
mcp_box_agent: {
getRender: size => /*#__PURE__*/React.createElement(BoxAgentAvatar, {
size: AVATAR_SIZES[size],
primaryColor: "",
secondaryColor: ""
}),
color: blueColor
},
mcp_canva_agent: {
getRender: size => /*#__PURE__*/React.createElement(CanvaAgentAvatar, {
size: AVATAR_SIZES[size],
primaryColor: "",
secondaryColor: ""
}),
color: blueColor
},
mcp_figma_agent: {
getRender: size => /*#__PURE__*/React.createElement(FigmaAgentAvatar, {
size: AVATAR_SIZES[size],
primaryColor: "",
secondaryColor: ""
}),
color: blueColor
},
mcp_hubspot_agent: {
getRender: size => /*#__PURE__*/React.createElement(HubSpotAgentAvatar, {
size: AVATAR_SIZES[size],
primaryColor: "",
secondaryColor: ""
}),
color: blueColor
},
mcp_intercom_agent: {
getRender: size => /*#__PURE__*/React.createElement(IntercomAgentAvatar, {
size: AVATAR_SIZES[size],
primaryColor: "",
secondaryColor: ""
}),
color: blueColor
},
mcp_gamma_agent: {
getRender: size => /*#__PURE__*/React.createElement(GammaAgentAvatar, {
size: AVATAR_SIZES[size],
primaryColor: "",
secondaryColor: ""
}),
color: blueColor
},
mcp_lovable_agent: {
getRender: size => /*#__PURE__*/React.createElement(LovableAgentAvatar, {
size: AVATAR_SIZES[size],
primaryColor: "",
secondaryColor: ""
}),
color: blueColor
},
mcp_replit_agent: {
getRender: size => /*#__PURE__*/React.createElement(ReplitAgentAvatar, {
size: AVATAR_SIZES[size],
primaryColor: "",
secondaryColor: ""
}),
color: blueColor
},
rovo_agent: {
getRender: size => /*#__PURE__*/React.createElement(RovoAgentAvatar, {
size: AVATAR_SIZES[size],
primaryColor: "",
secondaryColor: ""
}),
color: blueColor
},
jira_work_agent: {
getRender: size => /*#__PURE__*/React.createElement(JiraWorkAgentAvatar, {
size: AVATAR_SIZES[size],
primaryColor: "",
secondaryColor: ""
}),
color: blueColor
}
};
/**
* agentIdentityAccountId examples:
* 5b985e7c96cb052b5f65c830
* 712020:19e57f67-c132-462b-8503-0c19953122cd
*
* agentId examples:
* cd002f25-46e4-4023-80ff-32e4d90849b4
*/
export const getNumberIdForAvatar = ({
agentIdentityAccountId,
agentId
}) => {
// we prioritise agentIdentityAccountId first if it is available
// this is because agentIdentityAccountId is more widely available (e.g. in ProfilePage)
const idForAgentAvatar = agentIdentityAccountId || agentId;
if (idForAgentAvatar) {
// Take the last 8 characters of the id because JS can't handle 16 digit numbers
const trimmedId = idForAgentAvatar.slice(-8).replace(/[-:]/g, '');
const parsedId = parseInt(trimmedId, 16);
if (isNaN(parsedId)) {
return 0;
} else {
return parsedId;
}
}
return null;
};
const ROVO_DEV_AGENT_ID = '027f0676-e8e9-4939-8962-3850987d78bb';
const getAvatarRender = ({
agentNamedId,
agentId,
agentIdentityAccountId,
isRovoDev,
size
}) => {
if (isRovoDev) {
return {
render: /*#__PURE__*/React.createElement(RovoDevAvatar, {
size: AVATAR_SIZES[size],
primaryColor: "",
secondaryColor: ""
}),
color: greenColor
};
}
//@TODO CRCS-3129: Remove Rovo Dev hardcoded icon after TeamEU demos
// Handle Rovo Dev agent avatar for TeamEU Demo
if (agentId === ROVO_DEV_AGENT_ID && fg('jira_ai_force_rovo_dev_avatar')) {
return {
render: /*#__PURE__*/React.createElement(RovoDevAvatar, {
size: AVATAR_SIZES[size],
primaryColor: "",
secondaryColor: ""
}),
color: greenColor
};
}
if (typeof agentNamedId === 'string' && outOfTheBoxAgentAvatar[agentNamedId]) {
const ootbAvatarResult = outOfTheBoxAgentAvatar[agentNamedId];
return {
render: ootbAvatarResult.getRender(size),
color: ootbAvatarResult.color
};
}
const numberId = getNumberIdForAvatar({
agentIdentityAccountId,
agentId
});
if (numberId !== null) {
/**
* this create all possible combinations of avatars and colors
* e.g. [[avatar1, color1], [avatar1, color2], [avatar2, color1], [avatar2, color2]]
* then choose 1 based on agentId
*/
const totalCombinations = avatarList.length * colorList.length;
const combinationIndex = numberId % totalCombinations;
const avatarIndex = Math.floor(combinationIndex / colorList.length);
const colorIndex = combinationIndex % colorList.length;
const Avatar = avatarList[avatarIndex];
const color = colorList[colorIndex];
return {
render: /*#__PURE__*/React.createElement(Avatar, {
size: AVATAR_SIZES[size],
primaryColor: color.primary,
secondaryColor: color.secondary
}),
color
};
}
return {
render: /*#__PURE__*/React.createElement(GenericAvatar, {
size: AVATAR_SIZES[size],
primaryColor: blueColor.primary,
secondaryColor: blueColor.secondary
}),
color: blueColor
};
};
export const AgentBanner = ({
agentNamedId,
agentId,
agentIdentityAccountId,
isRovoDev,
creatorType,
height,
fillSpace
}) => {
const {
color
} = getAvatarRender({
agentNamedId,
agentId,
agentIdentityAccountId,
isRovoDev,
size: 'medium'
});
const isRemoteA2A = fg('jira_improve_agent_profile_for_a2a') && creatorType === 'REMOTE_A2A';
return /*#__PURE__*/React.createElement(Box, {
xcss: cx(styles.banner, fillSpace ? styles.bannerFillSpace : undefined, isRemoteA2A ? styles.bannerRemoteA2A : undefined),
style: {
backgroundColor: isRemoteA2A ? undefined : color.primary,
height: height ? `${height}px` : undefined
}
});
};
export const GeneratedAvatar = props => {
const {
render,
color
} = getAvatarRender(props);
const {
onLoad
} = props;
return /*#__PURE__*/React.createElement(Box, {
xcss: styles.image,
style: {
backgroundColor: color.primary
}
}, /*#__PURE__*/React.createElement(Suspense, {
fallback: null
}, onLoad && /*#__PURE__*/React.createElement(Observer, {
onLoad: onLoad
}), render));
};