@atlaskit/rovo-agent-components 0.0.1 → 0.1.0

package/CHANGELOG.md

@@ -1 +1,17 @@
 # @atlaskit/rovo-agent-components
+
+## 0.1.0
+
+### Minor Changes
+
+- [#125357](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/125357)
+  [`b94215c8c2301`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b94215c8c2301) -
+  Adding data fetcher and controller for single agent endpoint, added favourites count in view agent
+  modal
+
+## 0.0.2
+
+### Patch Changes
+
+- [`b52fe103ff593`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b52fe103ff593) -
+  Extracting AgentProfileInfo to atlaskit component and fixing ARI utils

package/dist/cjs/common/ui/star-icon-button/index.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StarIconButton = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _star = _interopRequireDefault(require("@atlaskit/icon/glyph/star"));
+var _starFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/star-filled"));
+var _primitives = require("@atlaskit/primitives");
+var _messages = _interopRequireDefault(require("./messages"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var pressableStarIconStyles = (0, _primitives.xcss)({
+  background: 'transparent',
+  padding: 'space.0',
+  height: '32px',
+  width: '32px'
+});
+var hiddenStyles = (0, _primitives.xcss)({
+  opacity: 0
+});
+var StarIconButton = exports.StarIconButton = function StarIconButton(_ref) {
+  var isStarred = _ref.isStarred,
+    handleToggle = _ref.handleToggle,
+    _ref$visible = _ref.visible,
+    visible = _ref$visible === void 0 ? true : _ref$visible;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isHovered = _useState2[0],
+    setIsHovered = _useState2[1];
+  return /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+    xcss: [pressableStarIconStyles, !visible && hiddenStyles],
+    onClick: handleToggle,
+    onMouseEnter: function onMouseEnter() {
+      return setIsHovered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsHovered(false);
+    }
+  }, isStarred || isHovered ? /*#__PURE__*/_react.default.createElement(_starFilled.default, {
+    size: "medium",
+    label: formatMessage(_messages.default.removeFromFavouritesLabel),
+    primaryColor: "var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"
+  }) : /*#__PURE__*/_react.default.createElement(_star.default, {
+    size: "medium",
+    label: formatMessage(_messages.default.clickToFavouriteLabel),
+    primaryColor: "var(--ds-background-accent-gray-bolder-hovered, #44546F)"
+  }));
+};

package/dist/cjs/common/ui/star-icon-button/messages.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactIntlNext = require("react-intl-next");
+var _default = exports.default = (0, _reactIntlNext.defineMessages)({
+  removeFromFavouritesLabel: {
+    id: 'rovo-chat.browse-agents.remove-from-favourites-label',
+    defaultMessage: 'Remove from favourites',
+    description: 'Remove from favourites label'
+  },
+  clickToFavouriteLabel: {
+    id: 'rovo-chat.browse-agents.click-to-favourite-label',
+    defaultMessage: 'Not favourited, click to favourite',
+    description: 'Click to favourite agent label'
+  }
+});

package/dist/cjs/index.js

@@ -3,7 +3,29 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _default = exports.default = function _default() {
-  return 'Test';
-};
+Object.defineProperty(exports, "AgentProfileCreator", {
+  enumerable: true,
+  get: function get() {
+    return _agentProfileInfo.AgentProfileCreator;
+  }
+});
+Object.defineProperty(exports, "AgentProfileInfo", {
+  enumerable: true,
+  get: function get() {
+    return _agentProfileInfo.AgentProfileInfo;
+  }
+});
+Object.defineProperty(exports, "AgentStarCount", {
+  enumerable: true,
+  get: function get() {
+    return _agentProfileInfo.AgentStarCount;
+  }
+});
+Object.defineProperty(exports, "StarIconButton", {
+  enumerable: true,
+  get: function get() {
+    return _starIconButton.StarIconButton;
+  }
+});
+var _agentProfileInfo = require("./ui/agent-profile-info");
+var _starIconButton = require("./common/ui/star-icon-button");

package/dist/cjs/ui/agent-profile-info/index.js

@@ -0,0 +1,135 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AgentStarCount = exports.AgentProfileInfo = exports.AgentProfileCreator = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _star = _interopRequireDefault(require("@atlaskit/icon/glyph/star"));
+var _logo = require("@atlaskit/logo");
+var _primitives = require("@atlaskit/primitives");
+var _skeleton = _interopRequireDefault(require("@atlaskit/skeleton"));
+var _starIconButton = require("../../common/ui/star-icon-button");
+var _messages = require("./messages");
+var clickableItemStyles = (0, _primitives.xcss)({
+  display: 'flex',
+  alignItems: 'center',
+  gap: 'space.050'
+});
+var countStyles = (0, _primitives.xcss)({
+  fontSize: '11px',
+  display: 'flex',
+  alignItems: 'center',
+  gap: 'space.025'
+});
+var nameStyles = (0, _primitives.xcss)({
+  justifyContent: 'space-between',
+  alignItems: 'flex-start'
+});
+var descriptionStyles = (0, _primitives.xcss)({
+  marginTop: 'space.0',
+  marginBottom: 'space.100'
+});
+var AgentProfileCreator = exports.AgentProfileCreator = function AgentProfileCreator(_ref) {
+  var creator = _ref.creator,
+    onCreatorLinkClick = _ref.onCreatorLinkClick,
+    isLoading = _ref.isLoading;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var getCreatorRender = function getCreatorRender() {
+    if (isLoading) {
+      return formatMessage(_messages.messages.agentCreatedBy, {
+        creatorNameWithLink: /*#__PURE__*/_react.default.createElement(_skeleton.default, {
+          testId: "agent-profile-creator-skeleton",
+          isShimmering: true,
+          height: 18,
+          width: 100,
+          borderRadius: 3
+        })
+      });
+    }
+    if (!creator) {
+      return null;
+    }
+    if (creator === 'SYSTEM') {
+      return formatMessage(_messages.messages.agentCreatedBy, {
+        creatorNameWithLink: /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+          alignBlock: "center",
+          testId: "atlassian-icon"
+        }, /*#__PURE__*/_react.default.createElement(_logo.AtlassianIcon, {
+          size: "small",
+          appearance: "brand"
+        }), /*#__PURE__*/_react.default.createElement(_primitives.Box, null, "Atlassian"))
+      });
+    }
+    return formatMessage(_messages.messages.agentCreatedBy, {
+      creatorNameWithLink: /*#__PURE__*/_react.default.createElement("a", {
+        href: creator.profileLink,
+        onClick: function onClick() {
+          return onCreatorLinkClick();
+        },
+        target: "_blank"
+      }, creator.name)
+    });
+  };
+  var creatorRender = getCreatorRender();
+  return creatorRender ? /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: clickableItemStyles
+  }, /*#__PURE__*/_react.default.createElement(_logo.RovoIcon, {
+    appearance: "brand",
+    size: "small"
+  }), creatorRender) : null;
+};
+var AgentStarCount = exports.AgentStarCount = function AgentStarCount(_ref2) {
+  var starCount = _ref2.starCount,
+    isLoading = _ref2.isLoading;
+  var _useIntl2 = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl2.formatMessage;
+  if (starCount === null || starCount === undefined) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: countStyles
+  }, /*#__PURE__*/_react.default.createElement(_star.default, {
+    label: "",
+    size: "small"
+  }), isLoading ? /*#__PURE__*/_react.default.createElement(_skeleton.default, {
+    testId: "agent-profile-info-star-count-skeleton",
+    isShimmering: true,
+    height: 16,
+    width: 75,
+    borderRadius: 3
+  }) : formatMessage(_messages.messages.starredCount, {
+    count: starCount
+  }));
+};
+var wrapperStyles = (0, _primitives.xcss)({
+  marginBottom: 'space.100'
+});
+var AgentProfileInfo = exports.AgentProfileInfo = function AgentProfileInfo(_ref3) {
+  var agentName = _ref3.agentName,
+    agentDescription = _ref3.agentDescription,
+    creatorRender = _ref3.creatorRender,
+    starCountRender = _ref3.starCountRender,
+    isStarred = _ref3.isStarred,
+    onStarToggle = _ref3.onStarToggle;
+  return /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
+    space: "space.100",
+    xcss: wrapperStyles
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+    xcss: nameStyles,
+    space: "space.100",
+    alignBlock: "center"
+  }, /*#__PURE__*/_react.default.createElement(_heading.default, {
+    size: "xlarge"
+  }, agentName), /*#__PURE__*/_react.default.createElement(_starIconButton.StarIconButton, {
+    isStarred: isStarred,
+    handleToggle: onStarToggle
+  })), creatorRender, !!agentDescription && /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: descriptionStyles,
+    as: "p"
+  }, agentDescription), starCountRender);
+};

package/dist/cjs/ui/agent-profile-info/messages.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
+  agentCreatedBy: {
+    id: 'ai-mate.agent-profile-info.created-by',
+    defaultMessage: 'Rovo agent by {creatorNameWithLink}',
+    description: 'Message to show who created this Rovo agent'
+  },
+  starredCount: {
+    id: 'ai-mate.agent-profile-info.starred-count',
+    defaultMessage: '{count} starred',
+    description: 'Message to show how many times this agent has been starred by users'
+  }
+});

package/dist/es2019/common/ui/star-icon-button/index.js

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import { useIntl } from 'react-intl-next';
+import StarIcon from '@atlaskit/icon/glyph/star';
+import StarFilledIcon from '@atlaskit/icon/glyph/star-filled';
+import { Pressable, xcss } from '@atlaskit/primitives';
+import messages from './messages';
+const pressableStarIconStyles = xcss({
+  background: 'transparent',
+  padding: 'space.0',
+  height: '32px',
+  width: '32px'
+});
+const hiddenStyles = xcss({
+  opacity: 0
+});
+export const StarIconButton = ({
+  isStarred,
+  handleToggle,
+  visible = true
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const [isHovered, setIsHovered] = useState(false);
+  return /*#__PURE__*/React.createElement(Pressable, {
+    xcss: [pressableStarIconStyles, !visible && hiddenStyles],
+    onClick: handleToggle,
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false)
+  }, isStarred || isHovered ? /*#__PURE__*/React.createElement(StarFilledIcon, {
+    size: "medium",
+    label: formatMessage(messages.removeFromFavouritesLabel),
+    primaryColor: "var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"
+  }) : /*#__PURE__*/React.createElement(StarIcon, {
+    size: "medium",
+    label: formatMessage(messages.clickToFavouriteLabel),
+    primaryColor: "var(--ds-background-accent-gray-bolder-hovered, #44546F)"
+  }));
+};

package/dist/es2019/common/ui/star-icon-button/messages.js

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl-next';
+export default defineMessages({
+  removeFromFavouritesLabel: {
+    id: 'rovo-chat.browse-agents.remove-from-favourites-label',
+    defaultMessage: 'Remove from favourites',
+    description: 'Remove from favourites label'
+  },
+  clickToFavouriteLabel: {
+    id: 'rovo-chat.browse-agents.click-to-favourite-label',
+    defaultMessage: 'Not favourited, click to favourite',
+    description: 'Click to favourite agent label'
+  }
+});

package/dist/es2019/index.js

@@ -1 +1,2 @@
-export default (() => 'Test');
+export { AgentProfileInfo, AgentProfileCreator, AgentStarCount } from './ui/agent-profile-info';
+export { StarIconButton } from './common/ui/star-icon-button';

package/dist/es2019/ui/agent-profile-info/index.js

@@ -0,0 +1,131 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import Heading from '@atlaskit/heading';
+import StarIcon from '@atlaskit/icon/glyph/star';
+import { AtlassianIcon, RovoIcon } from '@atlaskit/logo';
+import { Box, Inline, Stack, xcss } from '@atlaskit/primitives';
+import Skeleton from '@atlaskit/skeleton';
+import { StarIconButton } from '../../common/ui/star-icon-button';
+import { messages } from './messages';
+const clickableItemStyles = xcss({
+  display: 'flex',
+  alignItems: 'center',
+  gap: 'space.050'
+});
+const countStyles = xcss({
+  fontSize: '11px',
+  display: 'flex',
+  alignItems: 'center',
+  gap: 'space.025'
+});
+const nameStyles = xcss({
+  justifyContent: 'space-between',
+  alignItems: 'flex-start'
+});
+const descriptionStyles = xcss({
+  marginTop: 'space.0',
+  marginBottom: 'space.100'
+});
+export const AgentProfileCreator = ({
+  creator,
+  onCreatorLinkClick,
+  isLoading: isLoading
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const getCreatorRender = () => {
+    if (isLoading) {
+      return formatMessage(messages.agentCreatedBy, {
+        creatorNameWithLink: /*#__PURE__*/React.createElement(Skeleton, {
+          testId: "agent-profile-creator-skeleton",
+          isShimmering: true,
+          height: 18,
+          width: 100,
+          borderRadius: 3
+        })
+      });
+    }
+    if (!creator) {
+      return null;
+    }
+    if (creator === 'SYSTEM') {
+      return formatMessage(messages.agentCreatedBy, {
+        creatorNameWithLink: /*#__PURE__*/React.createElement(Inline, {
+          alignBlock: "center",
+          testId: "atlassian-icon"
+        }, /*#__PURE__*/React.createElement(AtlassianIcon, {
+          size: "small",
+          appearance: "brand"
+        }), /*#__PURE__*/React.createElement(Box, null, "Atlassian"))
+      });
+    }
+    return formatMessage(messages.agentCreatedBy, {
+      creatorNameWithLink: /*#__PURE__*/React.createElement("a", {
+        href: creator.profileLink,
+        onClick: () => onCreatorLinkClick(),
+        target: "_blank"
+      }, creator.name)
+    });
+  };
+  const creatorRender = getCreatorRender();
+  return creatorRender ? /*#__PURE__*/React.createElement(Box, {
+    xcss: clickableItemStyles
+  }, /*#__PURE__*/React.createElement(RovoIcon, {
+    appearance: "brand",
+    size: "small"
+  }), creatorRender) : null;
+};
+export const AgentStarCount = ({
+  starCount,
+  isLoading
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  if (starCount === null || starCount === undefined) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: countStyles
+  }, /*#__PURE__*/React.createElement(StarIcon, {
+    label: "",
+    size: "small"
+  }), isLoading ? /*#__PURE__*/React.createElement(Skeleton, {
+    testId: "agent-profile-info-star-count-skeleton",
+    isShimmering: true,
+    height: 16,
+    width: 75,
+    borderRadius: 3
+  }) : formatMessage(messages.starredCount, {
+    count: starCount
+  }));
+};
+const wrapperStyles = xcss({
+  marginBottom: 'space.100'
+});
+export const AgentProfileInfo = ({
+  agentName,
+  agentDescription,
+  creatorRender,
+  starCountRender,
+  isStarred,
+  onStarToggle
+}) => {
+  return /*#__PURE__*/React.createElement(Stack, {
+    space: "space.100",
+    xcss: wrapperStyles
+  }, /*#__PURE__*/React.createElement(Inline, {
+    xcss: nameStyles,
+    space: "space.100",
+    alignBlock: "center"
+  }, /*#__PURE__*/React.createElement(Heading, {
+    size: "xlarge"
+  }, agentName), /*#__PURE__*/React.createElement(StarIconButton, {
+    isStarred: isStarred,
+    handleToggle: onStarToggle
+  })), creatorRender, !!agentDescription && /*#__PURE__*/React.createElement(Box, {
+    xcss: descriptionStyles,
+    as: "p"
+  }, agentDescription), starCountRender);
+};

package/dist/es2019/ui/agent-profile-info/messages.js

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl-next';
+export const messages = defineMessages({
+  agentCreatedBy: {
+    id: 'ai-mate.agent-profile-info.created-by',
+    defaultMessage: 'Rovo agent by {creatorNameWithLink}',
+    description: 'Message to show who created this Rovo agent'
+  },
+  starredCount: {
+    id: 'ai-mate.agent-profile-info.starred-count',
+    defaultMessage: '{count} starred',
+    description: 'Message to show how many times this agent has been starred by users'
+  }
+});

package/dist/esm/common/ui/star-icon-button/index.js

@@ -0,0 +1,46 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
+import { useIntl } from 'react-intl-next';
+import StarIcon from '@atlaskit/icon/glyph/star';
+import StarFilledIcon from '@atlaskit/icon/glyph/star-filled';
+import { Pressable, xcss } from '@atlaskit/primitives';
+import messages from './messages';
+var pressableStarIconStyles = xcss({
+  background: 'transparent',
+  padding: 'space.0',
+  height: '32px',
+  width: '32px'
+});
+var hiddenStyles = xcss({
+  opacity: 0
+});
+export var StarIconButton = function StarIconButton(_ref) {
+  var isStarred = _ref.isStarred,
+    handleToggle = _ref.handleToggle,
+    _ref$visible = _ref.visible,
+    visible = _ref$visible === void 0 ? true : _ref$visible;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isHovered = _useState2[0],
+    setIsHovered = _useState2[1];
+  return /*#__PURE__*/React.createElement(Pressable, {
+    xcss: [pressableStarIconStyles, !visible && hiddenStyles],
+    onClick: handleToggle,
+    onMouseEnter: function onMouseEnter() {
+      return setIsHovered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsHovered(false);
+    }
+  }, isStarred || isHovered ? /*#__PURE__*/React.createElement(StarFilledIcon, {
+    size: "medium",
+    label: formatMessage(messages.removeFromFavouritesLabel),
+    primaryColor: "var(--ds-background-accent-yellow-subtler-pressed, #E2B203)"
+  }) : /*#__PURE__*/React.createElement(StarIcon, {
+    size: "medium",
+    label: formatMessage(messages.clickToFavouriteLabel),
+    primaryColor: "var(--ds-background-accent-gray-bolder-hovered, #44546F)"
+  }));
+};

package/dist/esm/common/ui/star-icon-button/messages.js

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl-next';
+export default defineMessages({
+  removeFromFavouritesLabel: {
+    id: 'rovo-chat.browse-agents.remove-from-favourites-label',
+    defaultMessage: 'Remove from favourites',
+    description: 'Remove from favourites label'
+  },
+  clickToFavouriteLabel: {
+    id: 'rovo-chat.browse-agents.click-to-favourite-label',
+    defaultMessage: 'Not favourited, click to favourite',
+    description: 'Click to favourite agent label'
+  }
+});

package/dist/esm/index.js

@@ -1,3 +1,2 @@
-export default (function () {
-  return 'Test';
-});
+export { AgentProfileInfo, AgentProfileCreator, AgentStarCount } from './ui/agent-profile-info';
+export { StarIconButton } from './common/ui/star-icon-button';

package/dist/esm/ui/agent-profile-info/index.js

@@ -0,0 +1,128 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import Heading from '@atlaskit/heading';
+import StarIcon from '@atlaskit/icon/glyph/star';
+import { AtlassianIcon, RovoIcon } from '@atlaskit/logo';
+import { Box, Inline, Stack, xcss } from '@atlaskit/primitives';
+import Skeleton from '@atlaskit/skeleton';
+import { StarIconButton } from '../../common/ui/star-icon-button';
+import { messages } from './messages';
+var clickableItemStyles = xcss({
+  display: 'flex',
+  alignItems: 'center',
+  gap: 'space.050'
+});
+var countStyles = xcss({
+  fontSize: '11px',
+  display: 'flex',
+  alignItems: 'center',
+  gap: 'space.025'
+});
+var nameStyles = xcss({
+  justifyContent: 'space-between',
+  alignItems: 'flex-start'
+});
+var descriptionStyles = xcss({
+  marginTop: 'space.0',
+  marginBottom: 'space.100'
+});
+export var AgentProfileCreator = function AgentProfileCreator(_ref) {
+  var creator = _ref.creator,
+    onCreatorLinkClick = _ref.onCreatorLinkClick,
+    isLoading = _ref.isLoading;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var getCreatorRender = function getCreatorRender() {
+    if (isLoading) {
+      return formatMessage(messages.agentCreatedBy, {
+        creatorNameWithLink: /*#__PURE__*/React.createElement(Skeleton, {
+          testId: "agent-profile-creator-skeleton",
+          isShimmering: true,
+          height: 18,
+          width: 100,
+          borderRadius: 3
+        })
+      });
+    }
+    if (!creator) {
+      return null;
+    }
+    if (creator === 'SYSTEM') {
+      return formatMessage(messages.agentCreatedBy, {
+        creatorNameWithLink: /*#__PURE__*/React.createElement(Inline, {
+          alignBlock: "center",
+          testId: "atlassian-icon"
+        }, /*#__PURE__*/React.createElement(AtlassianIcon, {
+          size: "small",
+          appearance: "brand"
+        }), /*#__PURE__*/React.createElement(Box, null, "Atlassian"))
+      });
+    }
+    return formatMessage(messages.agentCreatedBy, {
+      creatorNameWithLink: /*#__PURE__*/React.createElement("a", {
+        href: creator.profileLink,
+        onClick: function onClick() {
+          return onCreatorLinkClick();
+        },
+        target: "_blank"
+      }, creator.name)
+    });
+  };
+  var creatorRender = getCreatorRender();
+  return creatorRender ? /*#__PURE__*/React.createElement(Box, {
+    xcss: clickableItemStyles
+  }, /*#__PURE__*/React.createElement(RovoIcon, {
+    appearance: "brand",
+    size: "small"
+  }), creatorRender) : null;
+};
+export var AgentStarCount = function AgentStarCount(_ref2) {
+  var starCount = _ref2.starCount,
+    isLoading = _ref2.isLoading;
+  var _useIntl2 = useIntl(),
+    formatMessage = _useIntl2.formatMessage;
+  if (starCount === null || starCount === undefined) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: countStyles
+  }, /*#__PURE__*/React.createElement(StarIcon, {
+    label: "",
+    size: "small"
+  }), isLoading ? /*#__PURE__*/React.createElement(Skeleton, {
+    testId: "agent-profile-info-star-count-skeleton",
+    isShimmering: true,
+    height: 16,
+    width: 75,
+    borderRadius: 3
+  }) : formatMessage(messages.starredCount, {
+    count: starCount
+  }));
+};
+var wrapperStyles = xcss({
+  marginBottom: 'space.100'
+});
+export var AgentProfileInfo = function AgentProfileInfo(_ref3) {
+  var agentName = _ref3.agentName,
+    agentDescription = _ref3.agentDescription,
+    creatorRender = _ref3.creatorRender,
+    starCountRender = _ref3.starCountRender,
+    isStarred = _ref3.isStarred,
+    onStarToggle = _ref3.onStarToggle;
+  return /*#__PURE__*/React.createElement(Stack, {
+    space: "space.100",
+    xcss: wrapperStyles
+  }, /*#__PURE__*/React.createElement(Inline, {
+    xcss: nameStyles,
+    space: "space.100",
+    alignBlock: "center"
+  }, /*#__PURE__*/React.createElement(Heading, {
+    size: "xlarge"
+  }, agentName), /*#__PURE__*/React.createElement(StarIconButton, {
+    isStarred: isStarred,
+    handleToggle: onStarToggle
+  })), creatorRender, !!agentDescription && /*#__PURE__*/React.createElement(Box, {
+    xcss: descriptionStyles,
+    as: "p"
+  }, agentDescription), starCountRender);
+};

package/dist/esm/ui/agent-profile-info/messages.js

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl-next';
+export var messages = defineMessages({
+  agentCreatedBy: {
+    id: 'ai-mate.agent-profile-info.created-by',
+    defaultMessage: 'Rovo agent by {creatorNameWithLink}',
+    description: 'Message to show who created this Rovo agent'
+  },
+  starredCount: {
+    id: 'ai-mate.agent-profile-info.starred-count',
+    defaultMessage: '{count} starred',
+    description: 'Message to show how many times this agent has been starred by users'
+  }
+});

package/dist/types/common/ui/star-icon-button/index.d.ts

@@ -0,0 +1,6 @@
+import { type KeyboardEvent, type MouseEvent } from 'react';
+export declare const StarIconButton: ({ isStarred, handleToggle, visible, }: {
+    isStarred: boolean;
+    handleToggle: (e: MouseEvent<Element, globalThis.MouseEvent> | KeyboardEvent<Element>) => void;
+    visible?: boolean | undefined;
+}) => JSX.Element;

package/dist/types/common/ui/star-icon-button/messages.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+    removeFromFavouritesLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    clickToFavouriteLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default _default;

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
-declare const _default: () => string;
-export default _default;
+export { AgentProfileInfo, AgentProfileCreator, AgentStarCount } from './ui/agent-profile-info';
+export { StarIconButton } from './common/ui/star-icon-button';

package/dist/types/ui/agent-profile-info/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export declare const AgentProfileCreator: ({ creator, onCreatorLinkClick, isLoading: isLoading, }: {
+    creator?: {
+        name: string;
+        profileLink: string;
+    } | "SYSTEM" | undefined;
+    isLoading: boolean;
+    onCreatorLinkClick: () => void;
+}) => JSX.Element | null;
+export declare const AgentStarCount: ({ starCount, isLoading, }: {
+    starCount: number | null | undefined;
+    isLoading: boolean;
+}) => JSX.Element | null;
+export declare const AgentProfileInfo: ({ agentName, agentDescription, creatorRender, starCountRender, isStarred, onStarToggle, }: {
+    agentName: string;
+    agentDescription?: string | null | undefined;
+    creatorRender: React.ReactNode;
+    starCountRender: React.ReactNode;
+    isStarred: boolean;
+    onStarToggle: () => void;
+}) => JSX.Element;

package/dist/types/ui/agent-profile-info/messages.d.ts

@@ -0,0 +1,12 @@
+export declare const messages: {
+    agentCreatedBy: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    starredCount: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/dist/types-ts4.5/common/ui/star-icon-button/index.d.ts

@@ -0,0 +1,6 @@
+import { type KeyboardEvent, type MouseEvent } from 'react';
+export declare const StarIconButton: ({ isStarred, handleToggle, visible, }: {
+    isStarred: boolean;
+    handleToggle: (e: MouseEvent<Element, globalThis.MouseEvent> | KeyboardEvent<Element>) => void;
+    visible?: boolean | undefined;
+}) => JSX.Element;

package/dist/types-ts4.5/common/ui/star-icon-button/messages.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+    removeFromFavouritesLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    clickToFavouriteLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default _default;

package/dist/types-ts4.5/index.d.ts

@@ -1,2 +1,2 @@
-declare const _default: () => string;
-export default _default;
+export { AgentProfileInfo, AgentProfileCreator, AgentStarCount } from './ui/agent-profile-info';
+export { StarIconButton } from './common/ui/star-icon-button';

package/dist/types-ts4.5/ui/agent-profile-info/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export declare const AgentProfileCreator: ({ creator, onCreatorLinkClick, isLoading: isLoading, }: {
+    creator?: {
+        name: string;
+        profileLink: string;
+    } | "SYSTEM" | undefined;
+    isLoading: boolean;
+    onCreatorLinkClick: () => void;
+}) => JSX.Element | null;
+export declare const AgentStarCount: ({ starCount, isLoading, }: {
+    starCount: number | null | undefined;
+    isLoading: boolean;
+}) => JSX.Element | null;
+export declare const AgentProfileInfo: ({ agentName, agentDescription, creatorRender, starCountRender, isStarred, onStarToggle, }: {
+    agentName: string;
+    agentDescription?: string | null | undefined;
+    creatorRender: React.ReactNode;
+    starCountRender: React.ReactNode;
+    isStarred: boolean;
+    onStarToggle: () => void;
+}) => JSX.Element;

package/dist/types-ts4.5/ui/agent-profile-info/messages.d.ts

@@ -0,0 +1,12 @@
+export declare const messages: {
+    agentCreatedBy: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    starredCount: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/rovo-agent-components",
-	"version": "0.0.1",
+	"version": "0.1.0",
 	"description": "This package host public components related to rovo agents, the components here are needed for other public atlaskit packages",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -36,7 +36,14 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@babel/runtime": "^7.0.0"
+		"@atlaskit/heading": "^2.4.3",
+		"@atlaskit/icon": "^22.8.0",
+		"@atlaskit/logo": "^14.1.0",
+		"@atlaskit/primitives": "^11.1.0",
+		"@atlaskit/skeleton": "^0.4.0",
+		"@atlaskit/tokens": "^1.56.0",
+		"@babel/runtime": "^7.0.0",
+		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
 		"react": "^16.8.0"