@atlaskit/rovo-agent-components
Version:
This package host public components related to rovo agents, the components here are needed for other public atlaskit packages
591 lines (586 loc) • 21.1 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';
var styles = {
image: "_5ral1dfr _4t3i1osq _1bsb1osq _1e0c1txw _1bah1h6o _4cvr1h6o",
banner: "_1bsb1osq",
bannerFillSpace: "_1bsb1osq _4t3i1osq _5ral1dfr",
bannerRemoteA2A: "_bfhk7qp0"
};
var Observer = function Observer(_ref) {
var onLoad = _ref.onLoad;
useEffect(function () {
onLoad();
}, [onLoad]);
return null;
};
var AutoDevAvatar = /*#__PURE__*/lazy(function () {
return import( /* webpackChunkName: "@atlaskit-rovo-avatar-AutoDevAvatar"*/'./assets/auto-dev');
});
var AutoFixAvatar = /*#__PURE__*/lazy(function () {
return import( /* webpackChunkName: "@atlaskit-rovo-avatar-AutoFixAvatar"*/'./assets/auto-fix');
});
var AutoReviewAvatar = /*#__PURE__*/lazy(function () {
return import( /* webpackChunkName: "@atlaskit-rovo-avatar-AutoReviewAvatar"*/'./assets/auto-review');
});
var BacklogBuddyAvatar = /*#__PURE__*/lazy(function () {
return import( /* webpackChunkName: "@atlaskit-rovo-avatar-BacklogBuddyAvatar"*/'./assets/backlog-buddy');
});
var CommsCrafterAvatar = /*#__PURE__*/lazy(function () {
return import( /* webpackChunkName: "@atlaskit-rovo-avatar-CommsCrafterAvatar"*/'./assets/comms-crafter');
});
var CultureAvatar = /*#__PURE__*/lazy(function () {
return import( /* webpackChunkName: "@atlaskit-rovo-avatar-CultureAvatar"*/'./assets/culture');
});
var CustomerInsightAvatar = /*#__PURE__*/lazy(function () {
return import( /* webpackChunkName: "@atlaskit-rovo-avatar-CustomerInsightAvatar"*/'./assets/customer-insight');
});
var DecisionDirectorAvatar = /*#__PURE__*/lazy(function () {
return import( /* webpackChunkName: "@atlaskit-rovo-avatar-DecisionDirectorAvatar"*/'./assets/decision-director');
});
var FeatureFlagAvatar = /*#__PURE__*/lazy(function () {
return import( /* webpackChunkName: "@atlaskit-rovo-avatar-FeatureFlagAvatar"*/'./assets/feature-flag-avatar');
});
var GenericAvatar = /*#__PURE__*/lazy(function () {
return import( /* webpackChunkName: "@atlaskit-rovo-avatar-GenericAvatar"*/'./assets/generic-avatar');
});
var HireWriterAvatar = /*#__PURE__*/lazy(function () {
return import( /* webpackChunkName: "@atlaskit-rovo-avatar-HireWriterAvatar"*/'./assets/hire-writer');
});
var MarketingMessageMaestroAvatar = /*#__PURE__*/lazy(function () {
return import( /* webpackChunkName: "@atlaskit-rovo-avatar-MarketingMessageMaestroAvatar"*/'./assets/marketing-message-maestro');
});
var MyUserManualAvatar = /*#__PURE__*/lazy(function () {
return import( /* webpackChunkName: "@atlaskit-rovo-avatar-MyUserManualAvatar"*/'./assets/my-user-manual');
});
var OkrOracleAvatar = /*#__PURE__*/lazy(function () {
return import( /* webpackChunkName: "@atlaskit-rovo-avatar-OkrOracleAvatar"*/'./assets/okr-oracle');
});
var OpsAgentAvatar = /*#__PURE__*/lazy(function () {
return import( /* webpackChunkName: "@atlaskit-rovo-avatar-OpsAgentAvatar"*/'./assets/ops-agent');
});
var PitchPerfectorAvatar = /*#__PURE__*/lazy(function () {
return import( /* webpackChunkName: "@atlaskit-rovo-avatar-PitchPerfectorAvatar"*/'./assets/pitch-perfector');
});
var ProductRequirementAvatar = /*#__PURE__*/lazy(function () {
return import( /* webpackChunkName: "@atlaskit-rovo-avatar-ProductRequirementAvatar"*/'./assets/product-requirement');
});
var ReleaseNotesAvatar = /*#__PURE__*/lazy(function () {
return import( /* webpackChunkName: "@atlaskit-rovo-avatar-ReleaseNotesAvatar"*/'./assets/release-notes');
});
var ResearchScoutAvatar = /*#__PURE__*/lazy(function () {
return import( /* webpackChunkName: "@atlaskit-rovo-avatar-ResearchScoutAvatar"*/'./assets/research-scout');
});
var RovoDevAvatar = /*#__PURE__*/lazy(function () {
return import( /* webpackChunkName: "@atlaskit-rovo-avatar-RovoDevAvatar"*/'./assets/rovo-dev');
});
var SocialMediaScribeAvatar = /*#__PURE__*/lazy(function () {
return import( /* webpackChunkName: "@atlaskit-rovo-avatar-SocialMediaScribeAvatar"*/'./assets/social-media-scribe');
});
var TeamConnectionAvatar = /*#__PURE__*/lazy(function () {
return import( /* webpackChunkName: "@atlaskit-rovo-avatar-TeamConnectionAvatar"*/'./assets/team-connection');
});
var WorkflowBuilderAvatar = /*#__PURE__*/lazy(function () {
return import( /* webpackChunkName: "@atlaskit-rovo-avatar-WorkflowBuilderAvatar"*/'./assets/workflow-builder');
});
var TrialGuideAvatar = /*#__PURE__*/lazy(function () {
return import( /* webpackChunkName: "@atlaskit-rovo-avatar-TrialGuideAvatar"*/'./assets/trial-guide');
});
var JsmRovoServiceAgentAvatar = /*#__PURE__*/lazy(function () {
return import( /* webpackChunkName: "@atlaskit-rovo-avatar-JsmRovoServiceAgentAvatar"*/'./assets/jsm-rovo-service-agent');
});
/**
* OOTB Agents avatars - start
*/
var AmplitudeAgentAvatar = /*#__PURE__*/lazy(function () {
return import( /* webpackChunkName: "@atlaskit-rovo-avatar-AmplitudeAgentAvatar"*/'./assets/amplitude-agent');
});
var BoxAgentAvatar = /*#__PURE__*/lazy(function () {
return import( /* webpackChunkName: "@atlaskit-rovo-avatar-BoxAgentAvatar"*/'./assets/box-agent');
});
var CanvaAgentAvatar = /*#__PURE__*/lazy(function () {
return import( /* webpackChunkName: "@atlaskit-rovo-avatar-CanvaAgentAvatar"*/'./assets/canva-agent');
});
var FigmaAgentAvatar = /*#__PURE__*/lazy(function () {
return import( /* webpackChunkName: "@atlaskit-rovo-avatar-FigmaAgentAvatar"*/'./assets/figma-agent');
});
var HubSpotAgentAvatar = /*#__PURE__*/lazy(function () {
return import( /* webpackChunkName: "@atlaskit-rovo-avatar-HubSpotAgentAvatar"*/'./assets/hubspot-agent');
});
var IntercomAgentAvatar = /*#__PURE__*/lazy(function () {
return import( /* webpackChunkName: "@atlaskit-rovo-avatar-IntercomAgentAvatar"*/'./assets/intercom-agent');
});
var GammaAgentAvatar = /*#__PURE__*/lazy(function () {
return import( /* webpackChunkName: "@atlaskit-rovo-avatar-GammaAgentAvatar"*/'./assets/gamma-agent');
});
var LovableAgentAvatar = /*#__PURE__*/lazy(function () {
return import( /* webpackChunkName: "@atlaskit-rovo-avatar-LovableAgentAvatar"*/'./assets/lovable-agent');
});
var ReplitAgentAvatar = /*#__PURE__*/lazy(function () {
return import( /* webpackChunkName: "@atlaskit-rovo-avatar-ReplitAgentAvatar"*/'./assets/replit-agent');
});
var RovoAgentAvatar = /*#__PURE__*/lazy(function () {
return import( /* webpackChunkName: "@atlaskit-rovo-avatar-RovoAgentAvatar"*/'./assets/rovo-agent');
});
var JiraWorkAgentAvatar = /*#__PURE__*/lazy(function () {
return import( /* webpackChunkName: "@atlaskit-rovo-avatar-JiraWorkAgentAvatar"*/'./assets/jira-work-agent');
});
/**
* OOTB Agents avatars - end
*/
export var yellowColor = {
primary: '#FCA700',
secondary: '#FFC716'
};
export var purpleColor = {
primary: '#BF63F3',
secondary: '#D8A0F7'
};
export var greenColor = {
primary: '#82B536',
secondary: '#B3DF72'
};
export var blueColor = {
primary: '#357DE8',
secondary: '#669DF1'
};
var colorList = [yellowColor, purpleColor, greenColor, blueColor];
/**
* NOTE: DO NOT ADD OOTB AGENTAVATARS TO THIS LIST
*/
var avatarList = [CustomerInsightAvatar, BacklogBuddyAvatar, DecisionDirectorAvatar, CommsCrafterAvatar, AutoDevAvatar, OkrOracleAvatar, CultureAvatar, SocialMediaScribeAvatar, TeamConnectionAvatar, HireWriterAvatar, OpsAgentAvatar, ResearchScoutAvatar, ReleaseNotesAvatar, MyUserManualAvatar, PitchPerfectorAvatar, AutoDevAvatar, AutoFixAvatar, AutoReviewAvatar, MarketingMessageMaestroAvatar, FeatureFlagAvatar, ProductRequirementAvatar];
export var TOTAL_AVATAR_COMBINATIONS = avatarList.length * colorList.length;
var outOfTheBoxAgentAvatar = {
autodev_template_unit_test_creator: {
getRender: function getRender(size) {
return /*#__PURE__*/React.createElement(AutoFixAvatar, {
size: AVATAR_SIZES[size],
primaryColor: greenColor.primary,
secondaryColor: greenColor.secondary
});
},
color: greenColor
},
autodev_template_migration_config_changer_agent: {
getRender: function getRender(size) {
return /*#__PURE__*/React.createElement(OpsAgentAvatar, {
size: AVATAR_SIZES[size],
primaryColor: greenColor.primary,
secondaryColor: greenColor.secondary
});
},
color: greenColor
},
autodev_template_vulnerable_dependency_updater_agent: {
getRender: function getRender(size) {
return /*#__PURE__*/React.createElement(MarketingMessageMaestroAvatar, {
size: AVATAR_SIZES[size],
primaryColor: greenColor.primary,
secondaryColor: greenColor.secondary
});
},
color: greenColor
},
autodev_template_code_standardizer_agent: {
getRender: function getRender(size) {
return /*#__PURE__*/React.createElement(MyUserManualAvatar, {
size: AVATAR_SIZES[size],
primaryColor: greenColor.primary,
secondaryColor: greenColor.secondary
});
},
color: greenColor
},
autodev_template_code_observer_agent: {
getRender: function getRender(size) {
return /*#__PURE__*/React.createElement(ResearchScoutAvatar, {
size: AVATAR_SIZES[size],
primaryColor: greenColor.primary,
secondaryColor: greenColor.secondary
});
},
color: greenColor
},
autodev_template_code_accessibility_checker_agent: {
getRender: function getRender(size) {
return /*#__PURE__*/React.createElement(HireWriterAvatar, {
size: AVATAR_SIZES[size],
primaryColor: greenColor.primary,
secondaryColor: greenColor.secondary
});
},
color: greenColor
},
autodev_code_documentation_writer_agent: {
getRender: function getRender(size) {
return /*#__PURE__*/React.createElement(SocialMediaScribeAvatar, {
size: AVATAR_SIZES[size],
primaryColor: greenColor.primary,
secondaryColor: greenColor.secondary
});
},
color: greenColor
},
autodev_feature_flag_cleaner_agent: {
getRender: function getRender(size) {
return /*#__PURE__*/React.createElement(FeatureFlagAvatar, {
size: AVATAR_SIZES[size],
primaryColor: greenColor.primary,
secondaryColor: greenColor.secondary
});
},
color: greenColor
},
decision_director_agent: {
getRender: function getRender(size) {
return /*#__PURE__*/React.createElement(DecisionDirectorAvatar, {
size: AVATAR_SIZES[size],
primaryColor: greenColor.primary,
secondaryColor: greenColor.secondary
});
},
color: greenColor
},
user_manual_writer_agent: {
getRender: function getRender(size) {
return /*#__PURE__*/React.createElement(MyUserManualAvatar, {
size: AVATAR_SIZES[size],
primaryColor: yellowColor.primary,
secondaryColor: yellowColor.secondary
});
},
color: yellowColor
},
product_requirements_expert_agent: {
getRender: function getRender(size) {
return /*#__PURE__*/React.createElement(ProductRequirementAvatar, {
size: AVATAR_SIZES[size],
primaryColor: yellowColor.primary,
secondaryColor: yellowColor.secondary
});
},
color: yellowColor
},
issue_organizer_agent: {
getRender: function getRender(size) {
return /*#__PURE__*/React.createElement(BacklogBuddyAvatar, {
size: AVATAR_SIZES[size],
primaryColor: greenColor.primary,
secondaryColor: greenColor.secondary
});
},
color: greenColor
},
ops_guide_agent: {
getRender: function getRender(size) {
return /*#__PURE__*/React.createElement(OpsAgentAvatar, {
size: AVATAR_SIZES[size],
primaryColor: yellowColor.primary,
secondaryColor: yellowColor.secondary
});
},
color: yellowColor
},
jira_workflow_builder_agent: {
getRender: function getRender(size) {
return /*#__PURE__*/React.createElement(WorkflowBuilderAvatar, {
size: AVATAR_SIZES[size],
primaryColor: blueColor.primary,
secondaryColor: blueColor.secondary
});
},
color: blueColor
},
itops_rca_agent: {
getRender: function getRender(size) {
return /*#__PURE__*/React.createElement(AutoReviewAvatar, {
size: AVATAR_SIZES[size],
primaryColor: yellowColor.primary,
secondaryColor: yellowColor.secondary
});
},
color: yellowColor
},
jira_trial_guide_agent: {
getRender: function getRender(size) {
return /*#__PURE__*/React.createElement(TrialGuideAvatar, {
size: AVATAR_SIZES[size],
primaryColor: blueColor.primary,
secondaryColor: blueColor.secondary
});
},
color: blueColor
},
jira_admin_agent: {
getRender: function getRender(size) {
return /*#__PURE__*/React.createElement(AutoDevAvatar, {
size: AVATAR_SIZES[size],
primaryColor: blueColor.primary,
secondaryColor: blueColor.secondary
});
},
color: blueColor
},
jsm_rovo_service_agent: {
getRender: function getRender(size) {
return /*#__PURE__*/React.createElement(JsmRovoServiceAgentAvatar, {
size: AVATAR_SIZES[size],
primaryColor: "",
secondaryColor: ""
});
},
color: yellowColor
},
mcp_amplitude_agent: {
getRender: function getRender(size) {
return /*#__PURE__*/React.createElement(AmplitudeAgentAvatar, {
size: AVATAR_SIZES[size],
primaryColor: "",
secondaryColor: ""
});
},
color: blueColor
},
mcp_box_agent: {
getRender: function getRender(size) {
return /*#__PURE__*/React.createElement(BoxAgentAvatar, {
size: AVATAR_SIZES[size],
primaryColor: "",
secondaryColor: ""
});
},
color: blueColor
},
mcp_canva_agent: {
getRender: function getRender(size) {
return /*#__PURE__*/React.createElement(CanvaAgentAvatar, {
size: AVATAR_SIZES[size],
primaryColor: "",
secondaryColor: ""
});
},
color: blueColor
},
mcp_figma_agent: {
getRender: function getRender(size) {
return /*#__PURE__*/React.createElement(FigmaAgentAvatar, {
size: AVATAR_SIZES[size],
primaryColor: "",
secondaryColor: ""
});
},
color: blueColor
},
mcp_hubspot_agent: {
getRender: function getRender(size) {
return /*#__PURE__*/React.createElement(HubSpotAgentAvatar, {
size: AVATAR_SIZES[size],
primaryColor: "",
secondaryColor: ""
});
},
color: blueColor
},
mcp_intercom_agent: {
getRender: function getRender(size) {
return /*#__PURE__*/React.createElement(IntercomAgentAvatar, {
size: AVATAR_SIZES[size],
primaryColor: "",
secondaryColor: ""
});
},
color: blueColor
},
mcp_gamma_agent: {
getRender: function getRender(size) {
return /*#__PURE__*/React.createElement(GammaAgentAvatar, {
size: AVATAR_SIZES[size],
primaryColor: "",
secondaryColor: ""
});
},
color: blueColor
},
mcp_lovable_agent: {
getRender: function getRender(size) {
return /*#__PURE__*/React.createElement(LovableAgentAvatar, {
size: AVATAR_SIZES[size],
primaryColor: "",
secondaryColor: ""
});
},
color: blueColor
},
mcp_replit_agent: {
getRender: function getRender(size) {
return /*#__PURE__*/React.createElement(ReplitAgentAvatar, {
size: AVATAR_SIZES[size],
primaryColor: "",
secondaryColor: ""
});
},
color: blueColor
},
rovo_agent: {
getRender: function getRender(size) {
return /*#__PURE__*/React.createElement(RovoAgentAvatar, {
size: AVATAR_SIZES[size],
primaryColor: "",
secondaryColor: ""
});
},
color: blueColor
},
jira_work_agent: {
getRender: function getRender(size) {
return /*#__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 var getNumberIdForAvatar = function getNumberIdForAvatar(_ref2) {
var agentIdentityAccountId = _ref2.agentIdentityAccountId,
agentId = _ref2.agentId;
// we prioritise agentIdentityAccountId first if it is available
// this is because agentIdentityAccountId is more widely available (e.g. in ProfilePage)
var idForAgentAvatar = agentIdentityAccountId || agentId;
if (idForAgentAvatar) {
// Take the last 8 characters of the id because JS can't handle 16 digit numbers
var trimmedId = idForAgentAvatar.slice(-8).replace(/[-:]/g, '');
var parsedId = parseInt(trimmedId, 16);
if (isNaN(parsedId)) {
return 0;
} else {
return parsedId;
}
}
return null;
};
var ROVO_DEV_AGENT_ID = '027f0676-e8e9-4939-8962-3850987d78bb';
var getAvatarRender = function getAvatarRender(_ref3) {
var agentNamedId = _ref3.agentNamedId,
agentId = _ref3.agentId,
agentIdentityAccountId = _ref3.agentIdentityAccountId,
isRovoDev = _ref3.isRovoDev,
size = _ref3.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]) {
var ootbAvatarResult = outOfTheBoxAgentAvatar[agentNamedId];
return {
render: ootbAvatarResult.getRender(size),
color: ootbAvatarResult.color
};
}
var numberId = getNumberIdForAvatar({
agentIdentityAccountId: agentIdentityAccountId,
agentId: 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
*/
var totalCombinations = avatarList.length * colorList.length;
var combinationIndex = numberId % totalCombinations;
var avatarIndex = Math.floor(combinationIndex / colorList.length);
var colorIndex = combinationIndex % colorList.length;
var Avatar = avatarList[avatarIndex];
var color = colorList[colorIndex];
return {
render: /*#__PURE__*/React.createElement(Avatar, {
size: AVATAR_SIZES[size],
primaryColor: color.primary,
secondaryColor: color.secondary
}),
color: color
};
}
return {
render: /*#__PURE__*/React.createElement(GenericAvatar, {
size: AVATAR_SIZES[size],
primaryColor: blueColor.primary,
secondaryColor: blueColor.secondary
}),
color: blueColor
};
};
export var AgentBanner = function AgentBanner(_ref4) {
var agentNamedId = _ref4.agentNamedId,
agentId = _ref4.agentId,
agentIdentityAccountId = _ref4.agentIdentityAccountId,
isRovoDev = _ref4.isRovoDev,
creatorType = _ref4.creatorType,
height = _ref4.height,
fillSpace = _ref4.fillSpace;
var _getAvatarRender = getAvatarRender({
agentNamedId: agentNamedId,
agentId: agentId,
agentIdentityAccountId: agentIdentityAccountId,
isRovoDev: isRovoDev,
size: 'medium'
}),
color = _getAvatarRender.color;
var 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 ? "".concat(height, "px") : undefined
}
});
};
export var GeneratedAvatar = function GeneratedAvatar(props) {
var _getAvatarRender2 = getAvatarRender(props),
render = _getAvatarRender2.render,
color = _getAvatarRender2.color;
var onLoad = props.onLoad;
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));
};