@atlaskit/smart-card 26.49.0 → 26.49.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/smart-card
 
+## 26.49.2
+
+### Patch Changes
+
+- [#80085](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80085) [`7febfed958dd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7febfed958dd) - Update usage of `React.FC` to explicity include `children`
+
+## 26.49.1
+
+### Patch Changes
+
+- [#78725](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/78725) [`9eec85250f70`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9eec85250f70) - Hover Card: AI Summary UI controlled by aiSummary hook
+- Updated dependencies
+
 ## 26.49.0
 
 ### Minor Changes

package/dist/cjs/state/hooks/use-ai-summary/ai-summary-service/index.js

@@ -51,8 +51,14 @@ var AISummaryService = exports.AISummaryService = /*#__PURE__*/function () {
               return fetch(requestUrl, options);
             case 6:
               response = _context.sent;
+              if (!(!response.ok || response.status >= 400)) {
+                _context.next = 11;
+                break;
+              }
+              throw new Error("Status: ".concat(response.status, "\n URL: ").concat(_this.url, "\n StatusText ").concat(response.statusText));
+            case 11:
               return _context.abrupt("return", (0, _utils.readStream)(response));
-            case 8:
+            case 12:
             case "end":
               return _context.stop();
           }
@@ -103,10 +109,11 @@ var AISummaryService = exports.AISummaryService = /*#__PURE__*/function () {
         return _regenerator.default.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              summaryStyle = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : 'short';
-              this.state = _objectSpread(_objectSpread({}, this.state), {}, {
-                status: 'loading'
-              });
+              summaryStyle = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : 'medium';
+              this.state = {
+                status: 'loading',
+                content: ''
+              };
               _iterator2 = _createForOfIteratorHelper(this.subscribedStateSetters);
               try {
                 for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
@@ -133,7 +140,7 @@ var AISummaryService = exports.AISummaryService = /*#__PURE__*/function () {
               return _iterator.next();
             case 15:
               if (!(_iteratorAbruptCompletion = !(_step = _context2.sent).done)) {
-                _context2.next = 21;
+                _context2.next = 22;
                 break;
               }
               chunk = _step.value;
@@ -153,53 +160,58 @@ var AISummaryService = exports.AISummaryService = /*#__PURE__*/function () {
                   _iterator3.f();
                 }
               }
-            case 18:
+
+              //if AI Mate service returns cached summary we get the summary text in one piece as the last message
+              if (chunk.type === 'FINAL_RESPONSE') {
+                bufferContent = chunk.message.message.content;
+              }
+            case 19:
               _iteratorAbruptCompletion = false;
               _context2.next = 13;
               break;
-            case 21:
-              _context2.next = 27;
+            case 22:
+              _context2.next = 28;
               break;
-            case 23:
-              _context2.prev = 23;
+            case 24:
+              _context2.prev = 24;
               _context2.t0 = _context2["catch"](11);
               _didIteratorError = true;
               _iteratorError = _context2.t0;
-            case 27:
-              _context2.prev = 27;
+            case 28:
               _context2.prev = 28;
+              _context2.prev = 29;
               if (!(_iteratorAbruptCompletion && _iterator.return != null)) {
-                _context2.next = 32;
+                _context2.next = 33;
                 break;
               }
-              _context2.next = 32;
+              _context2.next = 33;
               return _iterator.return();
-            case 32:
-              _context2.prev = 32;
+            case 33:
+              _context2.prev = 33;
               if (!_didIteratorError) {
-                _context2.next = 35;
+                _context2.next = 36;
                 break;
               }
               throw _iteratorError;
-            case 35:
-              return _context2.finish(32);
             case 36:
-              return _context2.finish(27);
+              return _context2.finish(33);
             case 37:
+              return _context2.finish(28);
+            case 38:
               this.state = {
                 status: 'done',
                 content: bufferContent
               };
-              _context2.next = 43;
+              _context2.next = 44;
               break;
-            case 40:
-              _context2.prev = 40;
+            case 41:
+              _context2.prev = 41;
               _context2.t1 = _context2["catch"](4);
               this.state = {
                 status: 'error',
                 content: ''
               };
-            case 43:
+            case 44:
               _iterator4 = _createForOfIteratorHelper(this.subscribedStateSetters);
               try {
                 for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
@@ -211,11 +223,11 @@ var AISummaryService = exports.AISummaryService = /*#__PURE__*/function () {
               } finally {
                 _iterator4.f();
               }
-            case 45:
+            case 46:
             case "end":
               return _context2.stop();
           }
-        }, _callee2, this, [[4, 40], [11, 23, 27, 37], [28,, 32, 36]]);
+        }, _callee2, this, [[4, 41], [11, 24, 28, 38], [29,, 33, 37]]);
       }));
       function summariseUrl() {
         return _summariseUrl.apply(this, arguments);

package/dist/cjs/state/hooks/use-ai-summary/index.js

@@ -13,8 +13,8 @@ var useAISummary = exports.useAISummary = function useAISummary(props) {
   var _AISummariesStore$get;
   var url = props.url,
     baseUrl = props.baseUrl,
-    product = props.product,
-    headers = props.headers;
+    headers = props.headers,
+    product = props.product;
   var _useState = (0, _react.useState)(((_AISummariesStore$get = _store.AISummariesStore.get(url)) === null || _AISummariesStore$get === void 0 ? void 0 : _AISummariesStore$get.state) || {
       status: 'ready',
       content: ''
@@ -22,47 +22,25 @@ var useAISummary = exports.useAISummary = function useAISummary(props) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     state = _useState2[0],
     setState = _useState2[1];
-
-  // Can be used to know the summary status upon mounting a component (HoverCard UI state for example).
-  // For other scenarios, opt for dynamic status updates via state.status.
-  var isSummarisedOnMount = (0, _react.useMemo)(function () {
-    var _AISummariesStore$get2;
-    return ((_AISummariesStore$get2 = _store.AISummariesStore.get(url)) === null || _AISummariesStore$get2 === void 0 ? void 0 : _AISummariesStore$get2.state.status) === 'done';
-  }, [url]);
   (0, _react.useEffect)(function () {
-    // Create or subscribe to an AI service only if a summary has not been previously generated.
-    // Otherwise, use the data from the current state synchronized with a cache (AISummariesStore).
-    if (!isSummarisedOnMount) {
-      var aISummaryService = _store.AISummariesStore.get(url);
-      var isAISummaryServiceInitiated = !!aISummaryService;
-      if (isAISummaryServiceInitiated) {
-        //if we want to subscribe to updates from an existing AI service that has not yet provided a summary or is currently in progress.
-        var unsubscribe = aISummaryService.subscribe(setState);
-        return function () {
-          return unsubscribe();
-        };
-      } else {
-        var _AISummariesStore$get3;
-        //if we want to create a new AI service and wish to subscribe for updates
-        _store.AISummariesStore.set(url, new _aiSummaryService.AISummaryService({
-          url: url,
-          baseUrl: baseUrl,
-          product: product,
-          headers: headers
-        }));
-        var _unsubscribe = (_AISummariesStore$get3 = _store.AISummariesStore.get(url)) === null || _AISummariesStore$get3 === void 0 ? void 0 : _AISummariesStore$get3.subscribe(setState);
-        return function () {
-          return _unsubscribe && _unsubscribe();
-        };
-      }
+    var _AISummariesStore$get2;
+    if (!_store.AISummariesStore.get(url)) {
+      _store.AISummariesStore.set(url, new _aiSummaryService.AISummaryService({
+        url: url,
+        baseUrl: baseUrl,
+        headers: headers,
+        product: product
+      }));
     }
-  }, [isSummarisedOnMount, url, baseUrl, product, headers]);
+
+    //returns function that calls unsubscribe method
+    return (_AISummariesStore$get2 = _store.AISummariesStore.get(url)) === null || _AISummariesStore$get2 === void 0 ? void 0 : _AISummariesStore$get2.subscribe(setState);
+  }, [url, baseUrl, headers, product]);
   var summariseUrl = function summariseUrl() {
-    var _AISummariesStore$get4;
-    return (_AISummariesStore$get4 = _store.AISummariesStore.get(url)) === null || _AISummariesStore$get4 === void 0 ? void 0 : _AISummariesStore$get4.summariseUrl();
+    var _AISummariesStore$get3;
+    return (_AISummariesStore$get3 = _store.AISummariesStore.get(url)) === null || _AISummariesStore$get3 === void 0 ? void 0 : _AISummariesStore$get3.summariseUrl();
   };
   return {
-    isSummarisedOnMount: isSummarisedOnMount,
     summariseUrl: summariseUrl,
     state: state
   };

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.49.0"
+  packageVersion: "26.49.2"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -33,39 +33,46 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
     actions = _props$actions === void 0 ? [] : _props$actions,
     metadata = props.metadata,
     onActionMenuOpenChange = props.onActionMenuOpenChange,
-    onAIActionChange = props.onAIActionChange,
     _props$size = props.size,
     size = _props$size === void 0 ? _constants.SmartLinkSize.Medium : _props$size,
-    testId = props.testId;
-  var _useState = (0, _react.useState)('ready'),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    aiState = _useState2[0],
-    setAIState = _useState2[1];
+    testId = props.testId,
+    aiSummaryMinHeight = props.aiSummaryMinHeight;
+  var metadataElements = (0, _utils.renderElementItems)(metadata);
   var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(),
     fireEvent = _useAnalyticsEvents.fireEvent;
-  var metadataElements = (0, _utils.renderElementItems)(metadata);
   var context = (0, _flexibleUiContext.useFlexibleUiContext)();
   var url = (context === null || context === void 0 ? void 0 : context.url) || '';
-  var aiSummary = (0, _useAiSummary.useAISummary)({
-    url: url
-  });
-  var _aiSummary$state = aiSummary.state,
-    content = _aiSummary$state.content,
-    status = _aiSummary$state.status,
-    isSummarisedOnMount = aiSummary.isSummarisedOnMount;
-  var onAIActionClick = (0, _react.useCallback)(function () {
-    fireEvent('ui.button.clicked.aiSummary', {});
-    setAIState('loading');
-    if (onAIActionChange) {
-      onAIActionChange('loading');
+  var _useAISummary = (0, _useAiSummary.useAISummary)({
+      url: url
+    }),
+    summariseUrl = _useAISummary.summariseUrl,
+    _useAISummary$state = _useAISummary.state,
+    content = _useAISummary$state.content,
+    status = _useAISummary$state.status;
+  var showAISummary = status !== 'ready' && status !== 'error';
+  var isSummarisedOnMountRef = (0, _react.useRef)(status === 'done');
+  var isErroredOnMountRef = (0, _react.useRef)(status === 'error');
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    showAISummaryErrorMessage = _useState2[0],
+    setShowAISummaryErrorMessage = _useState2[1];
+  (0, _react.useEffect)(function () {
+    if (isErroredOnMountRef.current && status === 'loading') {
+      isErroredOnMountRef.current = false;
+      setShowAISummaryErrorMessage(true);
+    } else {
+      setShowAISummaryErrorMessage(!isErroredOnMountRef.current && status === 'error');
     }
-  }, [onAIActionChange, fireEvent]);
+  }, [status]);
   var combinedActions = (0, _react.useMemo)(function () {
-    if (aiState === 'ready') {
+    if (status === 'ready' || status === 'error') {
       var aiAction = {
         content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.ai_summarize),
         name: _constants.ActionName.CustomAction,
-        onClick: onAIActionClick,
+        onClick: function onClick() {
+          fireEvent('ui.button.clicked.aiSummary', {});
+          summariseUrl();
+        },
         testId: "".concat(testId, "-ai-summary-action"),
         icon: /*#__PURE__*/_react.default.createElement(_aiIcon.default, {
           label: "AIIcon"
@@ -74,7 +81,7 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
       return [aiAction].concat((0, _toConsumableArray2.default)(actions));
     }
     return actions;
-  }, [actions, aiState, onAIActionClick, testId]);
+  }, [actions, status, testId, summariseUrl, fireEvent]);
   var onDropdownOpenChange = (0, _react.useCallback)(function (isOpen) {
     if (onActionMenuOpenChange) {
       onActionMenuOpenChange({
@@ -86,17 +93,18 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
     direction: _constants.SmartLinkDirection.Vertical,
     testId: "".concat(testId, "-resolved-view")
   }), status === 'done' && /*#__PURE__*/_react.default.createElement(_aiEventSummaryViewed.default, {
-    fromCache: isSummarisedOnMount
-  }), /*#__PURE__*/_react.default.createElement(_aiSummary.default, {
+    fromCache: isSummarisedOnMountRef.current
+  }), showAISummary && /*#__PURE__*/_react.default.createElement(_aiSummary.default, {
+    minHeight: aiSummaryMinHeight,
     content: content,
-    showIcon: isSummarisedOnMount
+    showIcon: isSummarisedOnMountRef.current
   }), /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
     alignBlock: "center",
     alignInline: "end",
     grow: "fill",
     spread: "space-between"
-  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, null, !isSummarisedOnMount && (aiState === 'loading' || aiState === 'done') ? /*#__PURE__*/_react.default.createElement(_aiStateIndicator.default, {
-    state: aiState,
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, null, !isSummarisedOnMountRef.current && (status === 'loading' || status === 'done') ? /*#__PURE__*/_react.default.createElement(_aiStateIndicator.default, {
+    state: status,
     testId: "".concat(testId, "-state-indicator")
   }) : /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
     width: _constants.SmartLinkWidth.FitToContent,
@@ -106,7 +114,7 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
     items: combinedActions,
     appearance: "default",
     size: size
-  }))), status === 'error' && /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+  }))), showAISummaryErrorMessage && /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
     grow: "fill"
   }, /*#__PURE__*/_react.default.createElement(_aiEventErrorViewed.default, null), /*#__PURE__*/_react.default.createElement(_aiStateIndicator.default, {
     state: status,

package/dist/cjs/view/FlexibleCard/components/blocks/block/index.js

@@ -1,20 +1,17 @@
 "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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _react2 = require("@emotion/react");
 var _constants = require("../../../../../constants");
 var _utils = require("../utils");
 var _templateObject;
 /** @jsx jsx */
-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 getBlockStyles = function getBlockStyles(direction, size) {
   return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  justify-content: flex-start;\n  [data-separator] + [data-separator]:before {\n    content: '\u2022';\n    margin-right: ", "rem;\n  }\n  // Pull request elements: source branch \u2192 target branch\n  [data-smart-element='", "']\n    + [data-smart-element='", "']:before {\n    content: '\u2192';\n  }\n  // Pull request elements: target branch \u2190 source branch\n  [data-smart-element='", "']\n    + [data-smart-element='", "']:before {\n    content: '\u2190';\n  }\n"])), (0, _utils.getBaseStyles)(direction, size), _utils.highlightRemoveStyles, (0, _utils.getGapSize)(size), _constants.ElementName.SourceBranch, _constants.ElementName.TargetBranch, _constants.ElementName.TargetBranch, _constants.ElementName.SourceBranch);
 };

package/dist/cjs/view/FlexibleCard/components/blocks/element-group/index.js

@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getElementGroupStyles = exports.default = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@emotion/react");
+var _react = require("@emotion/react");
 var _constants = require("../../../../../constants");
 var _utils = require("../utils");
 var _utils2 = require("../../utils");
@@ -16,25 +15,25 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 var getAlignmentStyles = function getAlignmentStyles(align) {
   switch (align) {
     case _constants.SmartLinkAlignment.Right:
-      return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        -webkit-box-align: end;\n        -ms-flex-align: end;\n        justify-content: flex-end;\n        text-align: right;\n      "])));
+      return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        -webkit-box-align: end;\n        -ms-flex-align: end;\n        justify-content: flex-end;\n        text-align: right;\n      "])));
     case _constants.SmartLinkAlignment.Left:
     default:
-      return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        -webkit-box-align: start;\n        -ms-flex-align: start;\n        justify-content: flex-start;\n        text-align: left;\n      "])));
+      return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        -webkit-box-align: start;\n        -ms-flex-align: start;\n        justify-content: flex-start;\n        text-align: left;\n      "])));
   }
 };
 var getGapStyles = function getGapStyles(size, align) {
   var gap = (0, _utils.getGapSize)(size);
   if (align === _constants.SmartLinkAlignment.Right) {
-    return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n      > span {\n        margin-left: ", "rem;\n      }\n\n      > span:first-child {\n        margin-left: initial;\n      }\n    "])), gap);
+    return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n      > span {\n        margin-left: ", "rem;\n      }\n\n      > span:first-child {\n        margin-left: initial;\n      }\n    "])), gap);
   }
-  return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    > span {\n      margin-right: ", "rem;\n      &:last-child {\n        margin-right: initial;\n      }\n    }\n  "])), gap);
+  return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    > span {\n      margin-right: ", "rem;\n      &:last-child {\n        margin-right: initial;\n      }\n    }\n  "])), gap);
 };
 var getHorizontalDirectionStyles = function getHorizontalDirectionStyles(size, align) {
   var lineHeight = (0, _utils2.getMaxLineHeight)(size);
-  return (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    display: block;\n    vertical-align: middle;\n    ", "\n\n    > span, > div {\n      vertical-align: middle;\n\n      &[data-smart-element-date-time],\n      &[data-smart-element-text] {\n        // Show all/wrapped/truncated\n        display: inline;\n      }\n    }\n\n    ", "\n  "])), (0, _utils2.getTruncateStyles)(1, lineHeight + 'rem'), getGapStyles(size, align));
+  return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    display: block;\n    vertical-align: middle;\n    ", "\n\n    > span, > div {\n      vertical-align: middle;\n\n      &[data-smart-element-date-time],\n      &[data-smart-element-text] {\n        // Show all/wrapped/truncated\n        display: inline;\n      }\n    }\n\n    ", "\n  "])), (0, _utils2.getTruncateStyles)(1, lineHeight + 'rem'), getGapStyles(size, align));
 };
 var getElementGroupStyles = exports.getElementGroupStyles = function getElementGroupStyles(direction, size, align, width, position) {
-  return (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  min-width: 10%;\n  ", "\n  ", "\n  ", "\n"])), (0, _utils.getBaseStyles)(direction, size), getAlignmentStyles(align), width === _constants.SmartLinkWidth.Flexible ? "flex: 1 3;" : '', direction === _constants.SmartLinkDirection.Horizontal ? getHorizontalDirectionStyles(size, align) : '', position === _constants.SmartLinkPosition.Top ? 'align-self: flex-start;' : '');
+  return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  min-width: 10%;\n  ", "\n  ", "\n  ", "\n"])), (0, _utils.getBaseStyles)(direction, size), getAlignmentStyles(align), width === _constants.SmartLinkWidth.Flexible ? "flex: 1 3;" : '', direction === _constants.SmartLinkDirection.Horizontal ? getHorizontalDirectionStyles(size, align) : '', position === _constants.SmartLinkPosition.Top ? 'align-self: flex-start;' : '');
 };
 
 /**
@@ -59,7 +58,7 @@ var ElementGroup = function ElementGroup(_ref) {
     width = _ref$width === void 0 ? _constants.SmartLinkWidth.FitToContent : _ref$width,
     _ref$position = _ref.position,
     position = _ref$position === void 0 ? _constants.SmartLinkPosition.Center : _ref$position;
-  return (0, _react2.jsx)("div", {
+  return (0, _react.jsx)("div", {
     css: [getElementGroupStyles(direction, size, align, width, position), overrideCss],
     "data-smart-element-group": true,
     "data-testid": testId

package/dist/cjs/view/HoverCard/components/ContentContainer.js

@@ -6,33 +6,59 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("@emotion/react");
-var _react2 = _interopRequireDefault(require("react"));
+var _react2 = require("react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _styled = require("../styled");
 var _aiPrism = _interopRequireDefault(require("../../common/ai-prism"));
 var _HoverCardContent = require("./HoverCardContent");
-var _excluded = ["children", "isAIEnabled", "showPrism", "testId"];
+var _useAiSummary = require("../../../state/hooks/use-ai-summary");
+var _excluded = ["children", "isAIEnabled", "testId", "url"],
+  _excluded2 = ["children", "isAIEnabled", "testId", "url"];
 /** @jsx jsx */
-var ContentContainer = function ContentContainer(_ref) {
+var ConnectedAIPrismContainer = function ConnectedAIPrismContainer(_ref) {
   var children = _ref.children,
     _ref$isAIEnabled = _ref.isAIEnabled,
     isAIEnabled = _ref$isAIEnabled === void 0 ? false : _ref$isAIEnabled,
-    _ref$showPrism = _ref.showPrism,
-    showPrism = _ref$showPrism === void 0 ? false : _ref$showPrism,
     testId = _ref.testId,
+    url = _ref.url,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useAISummary = (0, _useAiSummary.useAISummary)({
+      url: url
+    }),
+    status = _useAISummary.state.status;
+  var _useState = (0, _react2.useState)(status === 'loading'),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    showPrism = _useState2[0],
+    setShowPrism = _useState2[1];
+  (0, _react2.useEffect)(function () {
+    setShowPrism(status === 'loading');
+  }, [status]);
+  var container = (0, _react.jsx)("div", (0, _extends2.default)({
+    className: _HoverCardContent.hoverCardClassName,
+    css: [_styled.HoverCardContainer, isAIEnabled && showPrism ? undefined : _styled.popupContainerStyles],
+    "data-testid": testId
+  }, props), children);
+  return isAIEnabled ? (0, _react.jsx)(_aiPrism.default, {
+    isVisible: showPrism,
+    testId: "".concat(testId, "-prism")
+  }, container) : container;
+};
+var ContentContainer = function ContentContainer(_ref2) {
+  var children = _ref2.children,
+    _ref2$isAIEnabled = _ref2.isAIEnabled,
+    isAIEnabled = _ref2$isAIEnabled === void 0 ? false : _ref2$isAIEnabled,
+    testId = _ref2.testId,
+    url = _ref2.url,
+    props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
   if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.hover-card-ai-summaries')) {
-    var container = (0, _react.jsx)("div", (0, _extends2.default)({
-      className: _HoverCardContent.hoverCardClassName,
-      css: [_styled.HoverCardContainer, isAIEnabled && showPrism ? undefined : _styled.popupContainerStyles],
-      "data-testid": testId
+    return (0, _react.jsx)(ConnectedAIPrismContainer, (0, _extends2.default)({
+      isAIEnabled: isAIEnabled,
+      url: url,
+      testId: testId
     }, props), children);
-    return isAIEnabled ? (0, _react.jsx)(_aiPrism.default, {
-      isVisible: showPrism,
-      testId: "".concat(testId, "-prism")
-    }, container) : container;
   }
   return (0, _react.jsx)("div", (0, _extends2.default)({
     className: _HoverCardContent.hoverCardClassName,

package/dist/cjs/view/HoverCard/components/HoverCardContent.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.hoverCardClassName = exports.getCopyAction = exports.default = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = require("@emotion/react");
 var _analyticsNext = require("@atlaskit/analytics-next");
@@ -97,10 +96,6 @@ var HoverCardContent = function HoverCardContent(_ref) {
   var services = (0, _helpers.getServices)(linkState.details);
   var statusRef = (0, _react2.useRef)(linkStatus);
   var analyticsRef = (0, _react2.useRef)(analytics);
-  var _useState = (0, _react2.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    showPrism = _useState2[0],
-    setShowPrism = _useState2[1];
   (0, _react2.useEffect)(function () {
     /**
      * Must access current analytics object value via ref because its not stable
@@ -173,9 +168,6 @@ var HoverCardContent = function HoverCardContent(_ref) {
   var onClickStopPropagation = (0, _react2.useCallback)(function (e) {
     return e.stopPropagation();
   }, []);
-  var onAIActionChange = (0, _react2.useCallback)(function (state) {
-    setShowPrism(state === 'loading');
-  }, []);
   var getCardView = function getCardView(cardState) {
     if (cardState.metadataStatus === 'pending') {
       return (0, _react.jsx)(_resolving.default, {
@@ -208,7 +200,6 @@ var HoverCardContent = function HoverCardContent(_ref) {
         flexibleCardProps: flexibleCardProps,
         isAISummaryEnabled: isAISummaryEnabled,
         onActionClick: onActionClick,
-        onAIActionChange: onAIActionChange,
         titleBlockProps: titleBlockProps
       });
     }
@@ -220,7 +211,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
     onMouseLeave: onMouseLeave,
     onClick: onClickStopPropagation,
     isAIEnabled: isAISummaryEnabled,
-    showPrism: showPrism
+    url: url
   }, cardView) : null;
 };
 var _default = exports.default = HoverCardContent;