@atlaskit/smart-card 26.46.2 → 26.46.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

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.2"
+  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,13 +8,15 @@ 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"));
@@ -29,29 +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"),
-      icon: /*#__PURE__*/_react.default.createElement(_aiIcon.default, {
-        label: "AiIcon"
-      })
-    };
-    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({
@@ -61,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/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.2",
+  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.2"
+  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;

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

@@ -0,0 +1,29 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import styled from '@emotion/styled';
+import Tooltip, { TooltipPrimitive } from '@atlaskit/tooltip';
+import { Box, xcss } from '@atlaskit/primitives';
+const AIIndicatorTooltipPrimitive = styled(TooltipPrimitive)`
+  border-radius: ${"var(--ds-border-radius, 3px)"};
+  background-color: ${"var(--ds-surface-raised, white)"};
+  box-shadow: ${"var(--ds-shadow-overlay, 0px 8px 12px rgba(9, 30, 66, 0.15),0px 0px 1px rgba(9, 30, 66, 0.31))"};
+  box-sizing: content-box;
+  padding: ${"var(--ds-space-200, 16px)"};
+  max-width: 350px;
+`;
+const triggerStyles = xcss({
+  display: 'inline-flex'
+});
+const AIIndicatorTooltip = ({
+  content,
+  trigger
+}) => {
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    component: AIIndicatorTooltipPrimitive,
+    content: content,
+    tag: "span"
+  }, tooltipProps => /*#__PURE__*/React.createElement(Box, _extends({
+    xcss: triggerStyles
+  }, tooltipProps), trigger));
+};
+export default AIIndicatorTooltip;

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

@@ -0,0 +1,12 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { CONTENT_URL_AI } from '../../../../../../constants';
+const AILearnMoreAnchor = ({
+  children,
+  ...props
+}) => /*#__PURE__*/React.createElement("a", _extends({
+  href: CONTENT_URL_AI,
+  target: "_blank",
+  rel: "noopener noreferrer"
+}, props), children);
+export default AILearnMoreAnchor;