@atlaskit/smart-card 26.46.1 → 26.46.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/smart-card
 
+## 26.46.3
+
+### Patch Changes
+
+- [#70839](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/70839) [`520f2cf9a4e6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/520f2cf9a4e6) - Add AI summary state indicator component
+
+## 26.46.2
+
+### Patch Changes
+
+- [#70977](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/70977) [`a75838cbc582`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a75838cbc582) - Add AISummary block to hover cards which includes the AISummary action. This block is enabled when isAdminHubAIEnabled is set to true on the card provider, the FF is enabled and the jsonld response includes the correct data.
+
 ## 26.46.1
 
 ### Patch Changes

package/dist/cjs/constants.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SmartLinkWidth = exports.SmartLinkTheme = exports.SmartLinkStatus = exports.SmartLinkSize = exports.SmartLinkPosition = exports.SmartLinkInternalTheme = exports.SmartLinkDirection = exports.SmartLinkAlignment = exports.MediaType = exports.MediaPlacement = exports.IconType = exports.ElementName = exports.CardDisplay = exports.CONTENT_URL_SECURITY_AND_PERMISSIONS = exports.CONTENT_URL_3P_ACCOUNT_AUTH = exports.ActionName = void 0;
+exports.SmartLinkWidth = exports.SmartLinkTheme = exports.SmartLinkStatus = exports.SmartLinkSize = exports.SmartLinkPosition = exports.SmartLinkInternalTheme = exports.SmartLinkDirection = exports.SmartLinkAlignment = exports.MediaType = exports.MediaPlacement = exports.IconType = exports.ElementName = exports.CardDisplay = exports.CONTENT_URL_SECURITY_AND_PERMISSIONS = exports.CONTENT_URL_AI = exports.CONTENT_URL_3P_ACCOUNT_AUTH = exports.ActionName = void 0;
 var CONTENT_URL_SECURITY_AND_PERMISSIONS = exports.CONTENT_URL_SECURITY_AND_PERMISSIONS = 'https://support.atlassian.com/confluence-cloud/docs/insert-links-and-anchors/#Smart-links';
 var CONTENT_URL_3P_ACCOUNT_AUTH = exports.CONTENT_URL_3P_ACCOUNT_AUTH = 'https://support.atlassian.com/confluence-cloud/docs/what-data-is-sent-and-received-when-pasting-a-smart-link/';
-
+var CONTENT_URL_AI = exports.CONTENT_URL_AI = 'https://www.atlassian.com/trust/atlassian-intelligence';
 /**
  * The alignment of Flexible UI component.
  */

package/dist/cjs/messages.js

@@ -24,6 +24,21 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Summarize',
     description: 'Action to summarize link resource content with AI'
   },
+  ai_summarized: {
+    id: 'fabric.linking.ai_summarized',
+    defaultMessage: 'Summarized by Atlassian Intelligence',
+    description: 'Shown with the content summarised by AI.'
+  },
+  ai_summarized_info: {
+    id: 'fabric.linking.ai_summarized_info',
+    defaultMessage: 'Information quality may vary. <a>Learn more</a>',
+    description: 'Additional info about the content summarised by AI.'
+  },
+  ai_summarizing: {
+    id: 'fabric.linking.ai_summarizing',
+    defaultMessage: 'Atlassian Intelligence is working...',
+    description: 'Shown when AI summary is summarising the link resource content.'
+  },
   assigned_to: {
     id: 'fabric.linking.assigned_to',
     defaultMessage: 'Assigned to {context}',

package/dist/cjs/utils/analytics/analytics.js

@@ -22,7 +22,7 @@ var ANALYTICS_CHANNEL = exports.ANALYTICS_CHANNEL = 'media';
 var context = exports.context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.46.1"
+  packageVersion: "26.46.3"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/cjs/view/FlexibleCard/components/blocks/ai-summary-block/ai-state-indicator/ai-indicator-container.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _primitives = require("@atlaskit/primitives");
+var contentStyles = (0, _primitives.xcss)({
+  color: 'color.text.subtle',
+  fontSize: '12px',
+  fontWeight: '400',
+  lineHeight: '16px'
+});
+var AIIndicatorContainer = function AIIndicatorContainer(_ref) {
+  var icon = _ref.icon,
+    content = _ref.content,
+    testId = _ref.testId;
+  return /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+    alignBlock: "center",
+    alignInline: "start",
+    space: "space.050",
+    xcss: contentStyles,
+    testId: testId
+  }, icon, content);
+};
+var _default = exports.default = AIIndicatorContainer;

package/dist/cjs/view/FlexibleCard/components/blocks/ai-summary-block/ai-state-indicator/ai-indicator-tooltip.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _tooltip = _interopRequireWildcard(require("@atlaskit/tooltip"));
+var _primitives = require("@atlaskit/primitives");
+var _templateObject;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var AIIndicatorTooltipPrimitive = (0, _styled.default)(_tooltip.TooltipPrimitive)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", ";\n  background-color: ", ";\n  box-shadow: ", ";\n  box-sizing: content-box;\n  padding: ", ";\n  max-width: 350px;\n"])), "var(--ds-border-radius, 3px)", "var(--ds-surface-raised, white)", "var(--ds-shadow-overlay, 0px 8px 12px rgba(9, 30, 66, 0.15),0px 0px 1px rgba(9, 30, 66, 0.31))", "var(--ds-space-200, 16px)");
+var triggerStyles = (0, _primitives.xcss)({
+  display: 'inline-flex'
+});
+var AIIndicatorTooltip = function AIIndicatorTooltip(_ref) {
+  var content = _ref.content,
+    trigger = _ref.trigger;
+  return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    component: AIIndicatorTooltipPrimitive,
+    content: content,
+    tag: "span"
+  }, function (tooltipProps) {
+    return /*#__PURE__*/_react.default.createElement(_primitives.Box, (0, _extends2.default)({
+      xcss: triggerStyles
+    }, tooltipProps), trigger);
+  });
+};
+var _default = exports.default = AIIndicatorTooltip;

package/dist/cjs/view/FlexibleCard/components/blocks/ai-summary-block/ai-state-indicator/ai-learn-more-anchor.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _constants = require("../../../../../../constants");
+var _excluded = ["children"];
+var AILearnMoreAnchor = function AILearnMoreAnchor(_ref) {
+  var children = _ref.children,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement("a", (0, _extends2.default)({
+    href: _constants.CONTENT_URL_AI,
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, props), children);
+};
+var _default = exports.default = AILearnMoreAnchor;

package/dist/cjs/view/FlexibleCard/components/blocks/ai-summary-block/ai-state-indicator/ai-state-done.js

@@ -0,0 +1,116 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _react2 = require("@emotion/react");
+var _panel = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/panel"));
+var _primitives = require("@atlaskit/primitives");
+var _messages = require("../../../../../../messages");
+var _aiIcon = _interopRequireDefault(require("../../../../../common/ai-icon"));
+var _aiIndicatorTooltip = _interopRequireDefault(require("./ai-indicator-tooltip"));
+var _aiIndicatorContainer = _interopRequireDefault(require("./ai-indicator-container"));
+var _aiLearnMoreAnchor = _interopRequireDefault(require("./ai-learn-more-anchor"));
+/** @jsx jsx */
+
+var tooltipMsgStyles = (0, _primitives.xcss)({
+  color: 'color.text',
+  fontSize: '14px',
+  fontWeight: '400',
+  lineHeight: '20px'
+});
+var iconTooltipLinkStyles = (0, _react2.css)({
+  color: "var(--ds-text-subtlest, #626F86)",
+  '&:link, :visited': {
+    color: "var(--ds-text-subtlest, #626F86)"
+  },
+  '&:hover': {
+    color: "var(--ds-text-subtle, #44546F)"
+  },
+  '&:active': {
+    color: "var(--ds-text, #172B4D)"
+  },
+  textDecoration: 'underline'
+});
+var iconTooltipTitleStyles = (0, _primitives.xcss)({
+  color: 'color.text',
+  fontSize: '12px',
+  fontWeight: '400',
+  lineHeight: '16px'
+});
+var iconTooltipDescStyles = (0, _primitives.xcss)({
+  color: 'color.text.subtlest',
+  fontSize: '11px',
+  fontWeight: '400',
+  lineHeight: '14px'
+});
+var AIStateDone = function AIStateDone(_ref) {
+  var appearance = _ref.appearance,
+    testId = _ref.testId;
+  var icon = (0, _react2.jsx)(_aiIcon.default, {
+    label: "AI",
+    size: "small",
+    testId: "".concat(testId, "-done-icon")
+  });
+  switch (appearance) {
+    case 'icon-only':
+      return (0, _react2.jsx)(_aiIndicatorTooltip.default, {
+        content: (0, _react2.jsx)(_primitives.Inline, {
+          alignBlock: "center",
+          space: "space.100"
+        }, (0, _react2.jsx)(_aiIcon.default, {
+          label: "AI",
+          size: "medium",
+          testId: "".concat(testId, "-done-tooltip-icon")
+        }), (0, _react2.jsx)(_primitives.Stack, null, (0, _react2.jsx)(_primitives.Box, {
+          xcss: iconTooltipTitleStyles,
+          testId: "".concat(testId, "-done-tooltip-title")
+        }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.ai_summarized)), (0, _react2.jsx)(_primitives.Box, {
+          xcss: iconTooltipDescStyles
+        }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.ai_summarized_info, {
+          values: {
+            a: function a(chunks) {
+              return (0, _react2.jsx)(_aiLearnMoreAnchor.default, {
+                css: iconTooltipLinkStyles
+              }, chunks);
+            }
+          }
+        }))))),
+        trigger: icon
+      });
+    default:
+      return (0, _react2.jsx)(_aiIndicatorContainer.default, {
+        icon: icon,
+        content: (0, _react2.jsx)(_primitives.Inline, {
+          alignBlock: "center",
+          alignInline: "start",
+          space: "space.050"
+        }, (0, _react2.jsx)(_primitives.Box, {
+          testId: "".concat(testId, "-done-message")
+        }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.ai_summarized)), (0, _react2.jsx)(_aiIndicatorTooltip.default, {
+          content: (0, _react2.jsx)(_primitives.Box, {
+            xcss: tooltipMsgStyles,
+            testId: "".concat(testId, "-done-tooltip")
+          }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.ai_summarized_info, {
+            values: {
+              a: function a(chunks) {
+                return (0, _react2.jsx)(_aiLearnMoreAnchor.default, null, chunks);
+              }
+            }
+          }))),
+          trigger: (0, _react2.jsx)(_panel.default, {
+            label: "Info",
+            size: "small",
+            testId: "".concat(testId, "-done-info")
+          })
+        })),
+        testId: "".concat(testId, "-done")
+      });
+  }
+};
+var _default = exports.default = AIStateDone;

package/dist/cjs/view/FlexibleCard/components/blocks/ai-summary-block/ai-state-indicator/ai-state-loading.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _primitives = require("@atlaskit/primitives");
+var _messages = require("../../../../../../messages");
+var _aiIconLoading = _interopRequireDefault(require("../../../../../common/ai-icon-loading"));
+var _aiIndicatorContainer = _interopRequireDefault(require("./ai-indicator-container"));
+var AIStateLoading = function AIStateLoading(_ref) {
+  var appearance = _ref.appearance,
+    testId = _ref.testId;
+  var icon = /*#__PURE__*/_react.default.createElement(_aiIconLoading.default, {
+    label: "AI",
+    size: "small",
+    testId: "".concat(testId, "-loading-icon")
+  });
+  switch (appearance) {
+    case 'icon-only':
+      return icon;
+    default:
+      return /*#__PURE__*/_react.default.createElement(_aiIndicatorContainer.default, {
+        icon: icon,
+        content: /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+          testId: "".concat(testId, "-loading-message")
+        }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.ai_summarizing)),
+        testId: "".concat(testId, "-loading")
+      });
+  }
+};
+var _default = exports.default = AIStateLoading;

package/dist/cjs/view/FlexibleCard/components/blocks/ai-summary-block/ai-state-indicator/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("@emotion/react");
+var _react2 = _interopRequireDefault(require("react"));
+var _aiStateLoading = _interopRequireDefault(require("./ai-state-loading"));
+var _aiStateDone = _interopRequireDefault(require("./ai-state-done"));
+/** @jsx jsx */
+
+var AIStateIndicator = function AIStateIndicator(_ref) {
+  var state = _ref.state,
+    _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'ai-state-indicator' : _ref$testId;
+  switch (state) {
+    case 'loading':
+      return (0, _react.jsx)(_aiStateLoading.default, {
+        appearance: appearance,
+        testId: testId
+      });
+    case 'done':
+      return (0, _react.jsx)(_aiStateDone.default, {
+        appearance: appearance,
+        testId: testId
+      });
+    default:
+      return null;
+  }
+};
+var _default = exports.default = AIStateIndicator;

package/dist/cjs/view/FlexibleCard/components/blocks/ai-summary-block/ai-state-indicator/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/view/FlexibleCard/components/blocks/ai-summary-block/resolved/index.js

@@ -8,15 +8,18 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _primitives = require("@atlaskit/primitives");
 var _constants = require("../../../../../../constants");
-var _flexibleUiContext = require("../../../../../../state/flexible-ui-context");
 var _actionGroup = _interopRequireDefault(require("../../action-group"));
 var _block = _interopRequireDefault(require("../../block"));
 var _elementGroup = _interopRequireDefault(require("../../element-group"));
+var _aiStateIndicator = _interopRequireDefault(require("../ai-state-indicator"));
 var _utils = require("../../utils");
 var _messages = require("../../../../../../messages");
+var _aiIcon = _interopRequireDefault(require("../../../../../common/ai-icon"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
@@ -28,26 +31,32 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
     onAIActionChange = props.onAIActionChange,
     _props$size = props.size,
     size = _props$size === void 0 ? _constants.SmartLinkSize.Medium : _props$size;
-  var context = (0, _flexibleUiContext.useFlexibleUiContext)();
+  var _useState = (0, _react.useState)('ready'),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    aiState = _useState2[0],
+    setAIState = _useState2[1];
   var metadataElements = (0, _utils.renderElementItems)(metadata);
   var onAIActionClick = (0, _react.useCallback)(function () {
+    setAIState('loading');
     if (onAIActionChange) {
-      onAIActionChange();
+      onAIActionChange('loading');
     }
   }, [onAIActionChange]);
   var combinedActions = (0, _react.useMemo)(function () {
-    var aiAction = {
-      content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.ai_summarize),
-      name: _constants.ActionName.CustomAction,
-      onClick: onAIActionClick,
-      testId: "".concat(testId, "-ai-summary-action")
-    };
-    return [aiAction].concat((0, _toConsumableArray2.default)(actions));
-  }, [actions, onAIActionClick, testId]);
-  var hasActions = (0, _react.useMemo)(function () {
-    var _filterActionItems;
-    return ((_filterActionItems = (0, _utils.filterActionItems)(combinedActions, context)) === null || _filterActionItems === void 0 ? void 0 : _filterActionItems.length) > 0;
-  }, [combinedActions, context]);
+    if (aiState === 'ready') {
+      var aiAction = {
+        content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.ai_summarize),
+        name: _constants.ActionName.CustomAction,
+        onClick: onAIActionClick,
+        testId: "".concat(testId, "-ai-summary-action"),
+        icon: /*#__PURE__*/_react.default.createElement(_aiIcon.default, {
+          label: "AiIcon"
+        })
+      };
+      return [aiAction].concat((0, _toConsumableArray2.default)(actions));
+    }
+    return actions;
+  }, [actions, aiState, onAIActionClick, testId]);
   var onDropdownOpenChange = (0, _react.useCallback)(function (isOpen) {
     if (onActionMenuOpenChange) {
       onActionMenuOpenChange({
@@ -57,17 +66,21 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
   }, [onActionMenuOpenChange]);
   return /*#__PURE__*/_react.default.createElement(_block.default, (0, _extends2.default)({}, props, {
     testId: "".concat(testId, "-resolved-view")
-  }), /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
-    width: _constants.SmartLinkWidth.Flexible
-  }, metadataElements), hasActions && /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
-    testId: "smart-element-group-actions",
-    align: _constants.SmartLinkAlignment.Right,
-    overrideCss: (0, _utils.getActionGroupStyles)(size),
-    width: _constants.SmartLinkWidth.Flexible
-  }, /*#__PURE__*/_react.default.createElement(_actionGroup.default, {
+  }), /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+    alignBlock: "center",
+    alignInline: "end",
+    grow: "fill",
+    spread: "space-between"
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, null, aiState === 'loading' || aiState === 'done' ? /*#__PURE__*/_react.default.createElement(_aiStateIndicator.default, {
+    state: aiState,
+    testId: testId
+  }) : /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
+    width: _constants.SmartLinkWidth.FitToContent
+  }, metadataElements)), /*#__PURE__*/_react.default.createElement(_primitives.Box, null, /*#__PURE__*/_react.default.createElement(_actionGroup.default, {
     onDropdownOpenChange: onDropdownOpenChange,
     items: combinedActions,
-    appearance: "default"
-  })));
+    appearance: "default",
+    size: size
+  }))));
 };
 var _default = exports.default = AISummaryBlockResolvedView;

package/dist/cjs/view/HoverCard/components/views/resolved/index.js

@@ -20,6 +20,7 @@ var _messages = require("../../../../../messages");
 var _reactIntlNext = require("react-intl-next");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _helpers = require("../../../../../state/helpers");
+var _state = require("../../../../../state");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var toFooterActions = exports.toFooterActions = function toFooterActions(cardActions, onActionClick) {
@@ -57,7 +58,7 @@ var toFooterActions = exports.toFooterActions = function toFooterActions(cardAct
   return [followAction].concat((0, _toConsumableArray2.default)(actions));
 };
 var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
-  var _cardState$details;
+  var _cardState$details, _cardState$details2;
   var flexibleCardProps = _ref.flexibleCardProps,
     titleBlockProps = _ref.titleBlockProps,
     analytics = _ref.analytics,
@@ -102,6 +103,9 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
     data: data,
     fallbackElementHeight: snippetHeight.current
   });
+  var _useSmartLinkContext = (0, _state.useSmartLinkContext)(),
+    isAdminHubAIEnabled = _useSmartLinkContext.isAdminHubAIEnabled;
+  var showAiView = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.hover-card-ai-summaries') && isAdminHubAIEnabled && ((_cardState$details2 = cardState.details) === null || _cardState$details2 === void 0 || (_cardState$details2 = _cardState$details2.meta) === null || _cardState$details2 === void 0 || (_cardState$details2 = _cardState$details2.supportedFeatures) === null || _cardState$details2 === void 0 ? void 0 : _cardState$details2.includes('AISummary'));
   return /*#__PURE__*/_react.default.createElement(_FlexibleCard.default, flexibleCardProps, imagePreview, /*#__PURE__*/_react.default.createElement(_blocks.TitleBlock, (0, _extends2.default)({}, titleBlockProps, {
     metadataPosition: _constants.SmartLinkPosition.Top
   })), /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, {
@@ -123,7 +127,12 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
   }), (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-hover-card-related-urls') && /*#__PURE__*/_react.default.createElement(_blocks.RelatedUrlsBlock, {
     url: url,
     size: _constants.SmartLinkSize.Small
-  }), /*#__PURE__*/_react.default.createElement(_blocks.FooterBlock, {
+  }), showAiView ? /*#__PURE__*/_react.default.createElement(_blocks.AISummaryBlock, {
+    metadata: [{
+      name: _constants.ElementName.Provider
+    }],
+    actions: footerActions
+  }) : /*#__PURE__*/_react.default.createElement(_blocks.FooterBlock, {
     actions: footerActions,
     size: _constants.SmartLinkSize.Large,
     overrideCss: _styled.footerBlockCss

package/dist/cjs/view/LinkUrl/index.js

@@ -17,7 +17,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId"],
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.46.1",
+  packageVersion: "26.46.3",
   componentName: 'linkUrl'
 };
 var Link = (0, _click.withLinkClickedEvent)('a');

package/dist/cjs/view/common/ai-icon-loading/index.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _svg = _interopRequireDefault(require("@atlaskit/icon/svg"));
+var _constants = require("../ai-prism/constants");
+var _templateObject;
+/** @jsx jsx */
+/**
+ * The bulk of this file is originally from
+ * https://bitbucket.org/atlassian/barrel/src/master/ui/platform/ui-kit/ai
+ * with modifications
+ */
+
+var bounce = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  from {\n    transform: translateY(0);\n  }\n\n  // 200ms of 1200ms = 16.67%\n  16.67% {\n    transform: translateY(-2px);\n  }\n\n  // 400ms of 1200ms = 33.33%\n  33.33% {\n    transform: translateY(0px);\n  }\n"])));
+var BASE_DELAY = 400;
+var QUEUE_DELAY = 200;
+var animationStyles = (0, _react.css)({
+  animation: "".concat(bounce, " 1.2s linear infinite normal")
+});
+var firstDelayStyles = (0, _react.css)({
+  animationDelay: "".concat(BASE_DELAY + QUEUE_DELAY, "ms")
+});
+var secondDelayStyles = (0, _react.css)({
+  animationDelay: "".concat(BASE_DELAY + QUEUE_DELAY * 2, "ms")
+});
+var thirdDelayStyles = (0, _react.css)({
+  animationDelay: "".concat(BASE_DELAY + QUEUE_DELAY * 3, "ms")
+});
+
+/**
+ * this icon is theme agnostic, no need for tokens
+ */
+var AIIconLoading = function AIIconLoading(props) {
+  return (0, _react.jsx)(_svg.default, props, (0, _react.jsx)("circle", {
+    css: [animationStyles, firstDelayStyles],
+    cx: "6",
+    cy: "12",
+    r: "1.5",
+    fill: _constants.aiThemeTokens.blue700
+  }), (0, _react.jsx)("circle", {
+    css: [animationStyles, secondDelayStyles],
+    cx: "12",
+    cy: "12",
+    r: "1.5",
+    fill: _constants.aiThemeTokens.blue600
+  }), (0, _react.jsx)("circle", {
+    css: [animationStyles, thirdDelayStyles],
+    cx: "17.5",
+    cy: "12",
+    r: "1.5",
+    fill: _constants.aiThemeTokens.blue500
+  }));
+};
+var _default = exports.default = AIIconLoading;

package/dist/es2019/constants.js

@@ -1,6 +1,6 @@
 export const CONTENT_URL_SECURITY_AND_PERMISSIONS = 'https://support.atlassian.com/confluence-cloud/docs/insert-links-and-anchors/#Smart-links';
 export const CONTENT_URL_3P_ACCOUNT_AUTH = 'https://support.atlassian.com/confluence-cloud/docs/what-data-is-sent-and-received-when-pasting-a-smart-link/';
-
+export const CONTENT_URL_AI = 'https://www.atlassian.com/trust/atlassian-intelligence';
 /**
  * The alignment of Flexible UI component.
  */

package/dist/es2019/messages.js

@@ -18,6 +18,21 @@ export const messages = defineMessages({
     defaultMessage: 'Summarize',
     description: 'Action to summarize link resource content with AI'
   },
+  ai_summarized: {
+    id: 'fabric.linking.ai_summarized',
+    defaultMessage: 'Summarized by Atlassian Intelligence',
+    description: 'Shown with the content summarised by AI.'
+  },
+  ai_summarized_info: {
+    id: 'fabric.linking.ai_summarized_info',
+    defaultMessage: 'Information quality may vary. <a>Learn more</a>',
+    description: 'Additional info about the content summarised by AI.'
+  },
+  ai_summarizing: {
+    id: 'fabric.linking.ai_summarizing',
+    defaultMessage: 'Atlassian Intelligence is working...',
+    description: 'Shown when AI summary is summarising the link resource content.'
+  },
   assigned_to: {
     id: 'fabric.linking.assigned_to',
     defaultMessage: 'Assigned to {context}',

package/dist/es2019/utils/analytics/analytics.js

@@ -4,7 +4,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.46.1"
+  packageVersion: "26.46.3"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/es2019/view/FlexibleCard/components/blocks/ai-summary-block/ai-state-indicator/ai-indicator-container.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Inline, xcss } from '@atlaskit/primitives';
+const contentStyles = xcss({
+  color: 'color.text.subtle',
+  fontSize: '12px',
+  fontWeight: '400',
+  lineHeight: '16px'
+});
+const AIIndicatorContainer = ({
+  icon,
+  content,
+  testId
+}) => {
+  return /*#__PURE__*/React.createElement(Inline, {
+    alignBlock: "center",
+    alignInline: "start",
+    space: "space.050",
+    xcss: contentStyles,
+    testId: testId
+  }, icon, content);
+};
+export default AIIndicatorContainer;