@atlaskit/smart-card 26.48.8 → 26.49.1

package/dist/esm/view/EmbedCard/components/styled.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
+var _templateObject, _templateObject2;
 import styled from '@emotion/styled';
 import { fontFamily } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
@@ -66,39 +66,63 @@ function visible(_ref7) {
   var frameStyle = _ref7.frameStyle;
   return frameStyle === 'show' ? visibleStyles : '';
 }
+
+// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression
 export var LinkWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", " &:hover {\n    text-decoration: none;\n  }\n"])), function (props) {
   return wrapperStyles(props);
 });
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n  margin-top: 10px;\n"])), function (props) {
+export var Wrapper = styled.div(function (props) {
   return wrapperStyles(props);
+}, {
+  marginTop: '10px'
 });
 export var embedHeaderHeight = 32;
-export var Header = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: ", "px;\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  color: ", ";\n  opacity: 0;\n  transition: 300ms opacity cubic-bezier(0.15, 1, 0.3, 1);\n\n  ", "\n"])), embedHeaderHeight, "var(--ds-icon, ".concat(colors.N300, ")"), function (_ref8) {
+export var Header = styled.div({
+  height: "".concat(embedHeaderHeight, "px"),
+  position: 'absolute',
+  zIndex: 1,
+  width: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  color: "var(--ds-icon, ".concat(colors.N300, ")"),
+  opacity: 0,
+  transition: '300ms opacity cubic-bezier(0.15, 1, 0.3, 1)'
+}, function (_ref8) {
   var frameStyle = _ref8.frameStyle;
   return getBooleanFF('platform.editor.show-embed-card-frame-renderer') && frameStyle === 'show' ? "\n        box-sizing: border-box;\n        padding: 0 ".concat("var(--ds-space-100, 8px)", ";\n      ") : '';
 });
-export var IconWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  ", " margin-right: 4px;\n"])), borderRadius, csssize(16), function (_ref9) {
+export var IconWrapper = styled.div(borderRadius, csssize(16), function (_ref9) {
   var isPlaceholder = _ref9.isPlaceholder;
   if (isPlaceholder) {
     return "\n      background-color: ".concat("var(--ds-skeleton, ".concat(colors.N30, ")"), ";\n    ");
   } else {
     return '';
   }
+}, {
+  marginRight: "var(--ds-space-050, 4px)"
 });
-export var TextWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", " color: ", ";\n  font-size: 12px;\n  line-height: 16px;\n  ", ";\n"])), function (_ref10) {
+export var TextWrapper = styled.div(function (_ref10) {
   var isPlaceholder = _ref10.isPlaceholder;
   if (isPlaceholder) {
     return "\n        ".concat(borderRadius, "\n        width: 125px;\n        height: 12px;\n        background-color: ", "var(--ds-skeleton, ".concat(colors.N30, ")"), ";\n      ");
   } else {
     return '';
   }
-}, "var(--ds-text-subtlest, ".concat(colors.N300, ")"), ellipsis('none'));
+}, {
+  color: "var(--ds-text-subtlest, ".concat(colors.N300, ")"),
+  fontSize: '12px',
+  lineHeight: '16px'
+}, ellipsis('none'));
+export var TooltipWrapper = styled.div({
+  overflow: 'hidden'
+});
 // NB: `overflow` is kept as `hidden` since
 // the internal contents of the `iframe` should
 // manage scrolling behaviour.
-export var Content = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", ";\n  border: 1px solid ", ";\n  background-color: ", ";\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"])), contentBorderRadius, "var(--ds-border, ".concat(N40, ")"), "var(--ds-surface-raised, white)", function (_ref11) {
+// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression
+export var Content = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n  border: 1px solid ", ";\n  background-color: ", ";\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"])), contentBorderRadius, "var(--ds-border, ".concat(N40, ")"), "var(--ds-surface-raised, white)", function (_ref11) {
   var allowScrollBar = _ref11.allowScrollBar;
   return allowScrollBar ? 'overflow: auto;' : 'overflow: hidden;';
 }, function (_ref12) {
@@ -108,22 +132,78 @@ export var Content = styled.div(_templateObject6 || (_templateObject6 = _taggedT
   var frameStyle = _ref13.frameStyle;
   return frameStyle === 'hide' ? 'height: 100%;' : "\n        height: calc(100% - ".concat("var(--ds-space-400, 32px)", ");\n        top: ", "var(--ds-space-400, 32px)", ";\n      ");
 });
-export var Image = styled.img(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n\n  /* hide the alt text when the image cannot be found */\n  overflow: hidden;\n"])), function (_ref14) {
+export var Image = styled.img(function (_ref14) {
   var size = _ref14.size;
   return csssize(size);
-}, borderRadius);
+}, borderRadius, {
+  overflow: 'hidden'
+});
 export var maxAvatarCount = 6;
-export var ContentWrapper = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  padding: ", " ", "\n    ", " ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)");
-export var Title = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 16px;\n  font-weight: 500;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), "var(--ds-text, ".concat(colors.N900, ")"), 20 / 16, 20 * 4);
-export var Byline = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  ", ";\n"])), "var(--ds-space-050, 4px)", "var(--ds-text-subtlest, ".concat(colors.N300, ")"), 16 / 12, ellipsis('100%'));
+export var ContentWrapper = styled.div({
+  display: 'flex',
+  flexDirection: 'row',
+  boxSizing: 'border-box',
+  padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-150, 12px)", " ", "var(--ds-space-150, 12px)", " ", "var(--ds-space-150, 12px)")
+});
+export var Title = styled.div({
+  color: "var(--ds-text, ".concat(colors.N900, ")"),
+  fontSize: '16px',
+  fontWeight: 500,
+  lineHeight: 20 / 16,
+  maxHeight: "".concat(20 * 4, "px"),
+  overflow: 'hidden'
+});
+export var Byline = styled.div({
+  marginTop: "var(--ds-space-050, 4px)",
+  color: "var(--ds-text-subtlest, ".concat(colors.N300, ")"),
+  fontSize: '12px',
+  fontWeight: 'normal',
+  lineHeight: 16 / 12
+}, ellipsis('100%'));
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export var Description = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  margin-top: 7px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), "var(--ds-text, ".concat(colors.N800, ")"), 18 / 12, 18 * 3);
-export var ResolvedViewIconWrapper = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n"])), "var(--ds-space-050, 4px)");
-export var Thumbnail = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  float: right;\n  margin: ", " 0 ", "\n    ", ";\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), borderRadius, csssize(48), "var(--ds-space-050, 4px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", "var(--ds-skeleton, ".concat(colors.N30, ")"), function (_ref15) {
-  var src = _ref15.src;
-  return src;
+export var Description = styled.div({
+  marginTop: '7px',
+  color: "var(--ds-text, ".concat(colors.N800, ")"),
+  fontSize: '12px',
+  fontWeight: 'normal',
+  lineHeight: 18 / 12,
+  maxHeight: "".concat(18 * 3, "px"),
+  overflow: 'hidden'
+});
+export var ResolvedViewIconWrapper = styled.div({
+  marginTop: "var(--ds-space-050, 4px)"
+});
+export var Thumbnail = styled.div(borderRadius, csssize(48), {
+  float: 'right',
+  margin: "var(--ds-space-050, 4px)".concat(" 0 ", "var(--ds-space-150, 12px)", " ", "var(--ds-space-150, 12px)"),
+  backgroundColor: "var(--ds-skeleton, ".concat(colors.N30, ")"),
+  backgroundImage: "url(".concat(function (_ref15) {
+    var src = _ref15.src;
+    return src;
+  }, ")"),
+  backgroundSize: 'cover'
+});
+export var UsersWrapper = styled.div({
+  marginTop: "var(--ds-space-100, 8px)"
+});
+export var ActionsWrapper = styled.div({
+  marginTop: "var(--ds-space-100, 8px)",
+  textAlign: 'right',
+  '> *': {
+    marginTop: "var(--ds-space-050, 4px)"
+  },
+  '> * + *': {
+    marginLeft: "var(--ds-space-050, 4px)"
+  }
 });
-export var UsersWrapper = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n"])), "var(--ds-space-100, 8px)");
-export var ActionsWrapper = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  text-align: right;\n\n  > * {\n    margin-top: ", ";\n  }\n\n  > * + * {\n    margin-left: ", ";\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)");
-export var AlertWrapper = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: hidden;\n  pointer-events: none;\n  /* z-index has to be 1 higher than the number of avatars in the avatar stack */\n  z-index: ", ";\n"])), maxAvatarCount + 1);
+export var AlertWrapper = styled.div({
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  overflow: 'hidden',
+  pointerEvents: 'none',
+  zIndex: maxAvatarCount + 1
+});

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState, useEffect } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { Box, Inline } from '@atlaskit/primitives';
 import { ActionName, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../../constants';
@@ -23,39 +23,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 ? SmartLinkSize.Medium : _props$size,
-    testId = props.testId;
-  var _useState = useState('ready'),
-    _useState2 = _slicedToArray(_useState, 2),
-    aiState = _useState2[0],
-    setAIState = _useState2[1];
+    testId = props.testId,
+    aiSummaryMinHeight = props.aiSummaryMinHeight;
+  var metadataElements = renderElementItems(metadata);
   var _useAnalyticsEvents = useAnalyticsEvents(),
     fireEvent = _useAnalyticsEvents.fireEvent;
-  var metadataElements = renderElementItems(metadata);
   var context = useFlexibleUiContext();
   var url = (context === null || context === void 0 ? void 0 : context.url) || '';
-  var aiSummary = useAISummary({
-    url: url
-  });
-  var _aiSummary$state = aiSummary.state,
-    content = _aiSummary$state.content,
-    status = _aiSummary$state.status,
-    isSummarisedOnMount = aiSummary.isSummarisedOnMount;
-  var onAIActionClick = useCallback(function () {
-    fireEvent('ui.button.clicked.aiSummary', {});
-    setAIState('loading');
-    if (onAIActionChange) {
-      onAIActionChange('loading');
+  var _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 = useRef(status === 'done');
+  var isErroredOnMountRef = useRef(status === 'error');
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showAISummaryErrorMessage = _useState2[0],
+    setShowAISummaryErrorMessage = _useState2[1];
+  useEffect(function () {
+    if (isErroredOnMountRef.current && status === 'loading') {
+      isErroredOnMountRef.current = false;
+      setShowAISummaryErrorMessage(true);
+    } else {
+      setShowAISummaryErrorMessage(!isErroredOnMountRef.current && status === 'error');
     }
-  }, [onAIActionChange, fireEvent]);
+  }, [status]);
   var combinedActions = useMemo(function () {
-    if (aiState === 'ready') {
+    if (status === 'ready' || status === 'error') {
       var aiAction = {
         content: /*#__PURE__*/React.createElement(FormattedMessage, messages.ai_summarize),
         name: ActionName.CustomAction,
-        onClick: onAIActionClick,
+        onClick: function onClick() {
+          fireEvent('ui.button.clicked.aiSummary', {});
+          summariseUrl();
+        },
         testId: "".concat(testId, "-ai-summary-action"),
         icon: /*#__PURE__*/React.createElement(AIIcon, {
           label: "AIIcon"
@@ -64,7 +71,7 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
       return [aiAction].concat(_toConsumableArray(actions));
     }
     return actions;
-  }, [actions, aiState, onAIActionClick, testId]);
+  }, [actions, status, testId, summariseUrl, fireEvent]);
   var onDropdownOpenChange = useCallback(function (isOpen) {
     if (onActionMenuOpenChange) {
       onActionMenuOpenChange({
@@ -76,17 +83,18 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
     direction: SmartLinkDirection.Vertical,
     testId: "".concat(testId, "-resolved-view")
   }), status === 'done' && /*#__PURE__*/React.createElement(AIEventSummaryViewed, {
-    fromCache: isSummarisedOnMount
-  }), /*#__PURE__*/React.createElement(AISummary, {
+    fromCache: isSummarisedOnMountRef.current
+  }), showAISummary && /*#__PURE__*/React.createElement(AISummary, {
+    minHeight: aiSummaryMinHeight,
     content: content,
-    showIcon: isSummarisedOnMount
+    showIcon: isSummarisedOnMountRef.current
   }), /*#__PURE__*/React.createElement(Inline, {
     alignBlock: "center",
     alignInline: "end",
     grow: "fill",
     spread: "space-between"
-  }, /*#__PURE__*/React.createElement(Box, null, !isSummarisedOnMount && (aiState === 'loading' || aiState === 'done') ? /*#__PURE__*/React.createElement(AIStateIndicator, {
-    state: aiState,
+  }, /*#__PURE__*/React.createElement(Box, null, !isSummarisedOnMountRef.current && (status === 'loading' || status === 'done') ? /*#__PURE__*/React.createElement(AIStateIndicator, {
+    state: status,
     testId: "".concat(testId, "-state-indicator")
   }) : /*#__PURE__*/React.createElement(ElementGroup, {
     width: SmartLinkWidth.FitToContent,
@@ -96,7 +104,7 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
     items: combinedActions,
     appearance: "default",
     size: size
-  }))), status === 'error' && /*#__PURE__*/React.createElement(Inline, {
+  }))), showAISummaryErrorMessage && /*#__PURE__*/React.createElement(Inline, {
     grow: "fill"
   }, /*#__PURE__*/React.createElement(AIEventErrorViewed, null), /*#__PURE__*/React.createElement(AIStateIndicator, {
     state: status,

package/dist/esm/view/FlexibleCard/components/common/atlaskit-icon/index.js

@@ -155,7 +155,6 @@ var importIcon = function importIcon(importFn) {
     }
   }); // Because we're using dynamic loading here, TS will not be able to infer the type.
 };
-
 var AtlaskitIcon = function AtlaskitIcon(_ref3) {
   var icon = _ref3.icon,
     label = _ref3.label,
@@ -189,7 +188,6 @@ var AtlaskitIcon = function AtlaskitIcon(_ref3) {
         iconGradientStop: B200
         /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
       });
-
     case IconType.Jira:
       // Logo component has a different prop set from other icon components
       return /*#__PURE__*/React.createElement(ImportedIcon, {
@@ -201,7 +199,6 @@ var AtlaskitIcon = function AtlaskitIcon(_ref3) {
         iconGradientStop: B200
         /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
       });
-
     case IconType.Error:
     case IconType.Forbidden:
       return /*#__PURE__*/React.createElement(ImportedIcon, {

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

@@ -1,31 +1,57 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "isAIEnabled", "showPrism", "testId"];
+var _excluded = ["children", "isAIEnabled", "testId", "url"],
+  _excluded2 = ["children", "isAIEnabled", "testId", "url"];
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { HoverCardContainer, popupContainerStyles } from '../styled';
 import AIPrism from '../../common/ai-prism';
 import { hoverCardClassName } from './HoverCardContent';
-var ContentContainer = function ContentContainer(_ref) {
+import { useAISummary } from '../../../state/hooks/use-ai-summary';
+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 = _objectWithoutProperties(_ref, _excluded);
+  var _useAISummary = useAISummary({
+      url: url
+    }),
+    status = _useAISummary.state.status;
+  var _useState = useState(status === 'loading'),
+    _useState2 = _slicedToArray(_useState, 2),
+    showPrism = _useState2[0],
+    setShowPrism = _useState2[1];
+  useEffect(function () {
+    setShowPrism(status === 'loading');
+  }, [status]);
+  var container = jsx("div", _extends({
+    className: hoverCardClassName,
+    css: [HoverCardContainer, isAIEnabled && showPrism ? undefined : popupContainerStyles],
+    "data-testid": testId
+  }, props), children);
+  return isAIEnabled ? jsx(AIPrism, {
+    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 = _objectWithoutProperties(_ref2, _excluded2);
   if (getBooleanFF('platform.linking-platform.smart-card.hover-card-ai-summaries')) {
-    var container = jsx("div", _extends({
-      className: hoverCardClassName,
-      css: [HoverCardContainer, isAIEnabled && showPrism ? undefined : popupContainerStyles],
-      "data-testid": testId
+    return jsx(ConnectedAIPrismContainer, _extends({
+      isAIEnabled: isAIEnabled,
+      url: url,
+      testId: testId
     }, props), children);
-    return isAIEnabled ? jsx(AIPrism, {
-      isVisible: showPrism,
-      testId: "".concat(testId, "-prism")
-    }, container) : container;
   }
   return jsx("div", _extends({
     className: hoverCardClassName,

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

@@ -1,11 +1,10 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import CopyIcon from '@atlaskit/icon/glyph/copy';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
 import { ActionName, CardDisplay, SmartLinkPosition, SmartLinkSize } from '../../../constants';
 import { extractMetadata } from '../../../extractors/hover/extractMetadata';
@@ -86,10 +85,6 @@ var HoverCardContent = function HoverCardContent(_ref) {
   var services = getServices(linkState.details);
   var statusRef = useRef(linkStatus);
   var analyticsRef = useRef(analytics);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    showPrism = _useState2[0],
-    setShowPrism = _useState2[1];
   useEffect(function () {
     /**
      * Must access current analytics object value via ref because its not stable
@@ -162,9 +157,6 @@ var HoverCardContent = function HoverCardContent(_ref) {
   var onClickStopPropagation = useCallback(function (e) {
     return e.stopPropagation();
   }, []);
-  var onAIActionChange = useCallback(function (state) {
-    setShowPrism(state === 'loading');
-  }, []);
   var getCardView = function getCardView(cardState) {
     if (cardState.metadataStatus === 'pending') {
       return jsx(HoverCardLoadingView, {
@@ -197,7 +189,6 @@ var HoverCardContent = function HoverCardContent(_ref) {
         flexibleCardProps: flexibleCardProps,
         isAISummaryEnabled: isAISummaryEnabled,
         onActionClick: onActionClick,
-        onAIActionChange: onAIActionChange,
         titleBlockProps: titleBlockProps
       });
     }
@@ -209,7 +200,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
     onMouseLeave: onMouseLeave,
     onClick: onClickStopPropagation,
     isAIEnabled: isAISummaryEnabled,
-    showPrism: showPrism
+    url: url
   }, cardView) : null;
 };
 export default HoverCardContent;

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

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
-import { ActionName, CardDisplay, ElementName, SmartLinkPosition, SmartLinkSize } from '../../../../../constants';
-import { FooterBlock, MetadataBlock, RelatedUrlsBlock, SnippetBlock, TitleBlock, AISummaryBlock } from '../../../../FlexibleCard/components/blocks';
+import { ActionName, CardDisplay, ElementName, SmartLinkPosition, SmartLinkSize, SmartLinkDirection } from '../../../../../constants';
+import { FooterBlock, MetadataBlock, RelatedUrlsBlock, SnippetBlock, TitleBlock, AISummaryBlock, CustomBlock } from '../../../../FlexibleCard/components/blocks';
 import { footerBlockCss, hiddenSnippetStyles, metadataBlockCss } from './styled';
 import FlexibleCard from '../../../../FlexibleCard';
 import { getSimulatedBetterMetadata } from '../../../utils';
@@ -12,6 +12,8 @@ import { messages } from '../../../../../messages';
 import { FormattedMessage } from 'react-intl-next';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getCanBeDatasource } from '../../../../../state/helpers';
+import { useAISummary } from '../../../../../state/hooks/use-ai-summary';
+import { SmartLinkStatus } from '../../../../../constants';
 export var toFooterActions = function toFooterActions(cardActions, onActionClick) {
   var followAction = {
     hideIcon: true,
@@ -46,19 +48,41 @@ export var toFooterActions = function toFooterActions(cardActions, onActionClick
   });
   return [followAction].concat(_toConsumableArray(actions));
 };
-var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
+
+//This component encapsulates useAISummary hook under the AI Summary FF 'platform.linking-platform.smart-card.hover-card-ai-summaries'
+var ConnectedAIBlock = function ConnectedAIBlock(_ref) {
+  var bottomPrimary = _ref.bottomPrimary,
+    url = _ref.url,
+    imagePreview = _ref.imagePreview;
+  var aiSummary = useAISummary({
+    url: url
+  });
+  var aiStatus = aiSummary.state.status;
+  var showData = aiStatus === 'ready' || aiStatus === 'error';
+  return showData ? /*#__PURE__*/React.createElement(CustomBlock, {
+    direction: SmartLinkDirection.Vertical
+  }, !imagePreview && /*#__PURE__*/React.createElement(SnippetBlock, {
+    status: SmartLinkStatus.Resolved
+  }), /*#__PURE__*/React.createElement(MetadataBlock, {
+    primary: bottomPrimary,
+    size: SmartLinkSize.Large,
+    overrideCss: metadataBlockCss,
+    maxLines: 1,
+    status: SmartLinkStatus.Resolved
+  })) : null;
+};
+var HoverCardResolvedView = function HoverCardResolvedView(_ref2) {
   var _cardState$details;
-  var flexibleCardProps = _ref.flexibleCardProps,
-    titleBlockProps = _ref.titleBlockProps,
-    analytics = _ref.analytics,
-    cardState = _ref.cardState,
-    _ref$cardActions = _ref.cardActions,
-    cardActions = _ref$cardActions === void 0 ? [] : _ref$cardActions,
-    isAISummaryEnabled = _ref.isAISummaryEnabled,
-    onActionClick = _ref.onActionClick,
-    onAIActionChange = _ref.onAIActionChange,
-    extensionKey = _ref.extensionKey,
-    url = _ref.url;
+  var flexibleCardProps = _ref2.flexibleCardProps,
+    titleBlockProps = _ref2.titleBlockProps,
+    analytics = _ref2.analytics,
+    cardState = _ref2.cardState,
+    _ref2$cardActions = _ref2.cardActions,
+    cardActions = _ref2$cardActions === void 0 ? [] : _ref2$cardActions,
+    isAISummaryEnabled = _ref2.isAISummaryEnabled,
+    onActionClick = _ref2.onActionClick,
+    extensionKey = _ref2.extensionKey,
+    url = _ref2.url;
   var canBeDatasource = getCanBeDatasource(cardState.details);
   useEffect(function () {
     // Since this hover view is only rendered on resolved status,
@@ -90,6 +114,15 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
     var _snippetBlockRef$curr, _snippetBlockRef$curr2;
     snippetHeight.current = (_snippetBlockRef$curr = (_snippetBlockRef$curr2 = snippetBlockRef.current) === null || _snippetBlockRef$curr2 === void 0 ? void 0 : _snippetBlockRef$curr2.getBoundingClientRect().height) !== null && _snippetBlockRef$curr !== void 0 ? _snippetBlockRef$curr : 0;
   }, []);
+
+  // We want to maintain the height of the HoverCard while summarizing and pass this height to the AISummaryBlock.
+  // This approach will prevent any abrupt changes in the height of the HoverCard.
+  var connectedAIBlockHeight = React.useRef(0);
+  var connectedAIBlockRef = useRef(null);
+  var onConnectedAIBlockRender = useCallback(function () {
+    var _connectedAIBlockRef$, _connectedAIBlockRef$2;
+    connectedAIBlockHeight.current = (_connectedAIBlockRef$ = (_connectedAIBlockRef$2 = connectedAIBlockRef.current) === null || _connectedAIBlockRef$2 === void 0 ? void 0 : _connectedAIBlockRef$2.getBoundingClientRect().height) !== null && _connectedAIBlockRef$ !== void 0 ? _connectedAIBlockRef$ : 0;
+  }, []);
   var imagePreview = ImagePreview({
     data: data,
     fallbackElementHeight: snippetHeight.current
@@ -102,16 +135,31 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
     overrideCss: metadataBlockCss,
     maxLines: 1,
     size: SmartLinkSize.Medium
-  }), !imagePreview && /*#__PURE__*/React.createElement(SnippetBlock, null), /*#__PURE__*/React.createElement(SnippetBlock, {
+  }), isAISummaryEnabled &&
+  /*#__PURE__*/
+  // All custom elements should be contained within a CustomBlock.
+  // Flex Container components check whether the direct child is a flex blocks. It removes anything that isn't
+  React.createElement(CustomBlock, {
+    direction: SmartLinkDirection.Vertical,
+    onRender: onConnectedAIBlockRender,
+    blockRef: connectedAIBlockRef
+  }, /*#__PURE__*/React.createElement(ConnectedAIBlock, {
+    imagePreview: !!imagePreview,
+    url: url,
+    bottomPrimary: bottomPrimary
+  })), !isAISummaryEnabled && !imagePreview && /*#__PURE__*/React.createElement(SnippetBlock, {
+    status: SmartLinkStatus.Resolved
+  }), /*#__PURE__*/React.createElement(SnippetBlock, {
     testId: 'hidden-snippet',
     onRender: onSnippetRender,
     blockRef: snippetBlockRef,
     overrideCss: hiddenSnippetStyles
-  }), /*#__PURE__*/React.createElement(MetadataBlock, {
+  }), !isAISummaryEnabled && /*#__PURE__*/React.createElement(MetadataBlock, {
     primary: bottomPrimary,
     size: SmartLinkSize.Large,
     overrideCss: metadataBlockCss,
-    maxLines: 1
+    maxLines: 1,
+    status: SmartLinkStatus.Resolved
   }), getBooleanFF('platform.linking-platform.smart-card.enable-hover-card-related-urls') && /*#__PURE__*/React.createElement(RelatedUrlsBlock, {
     url: url,
     size: SmartLinkSize.Small
@@ -120,7 +168,7 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
       name: ElementName.Provider
     }],
     actions: footerActions,
-    onAIActionChange: onAIActionChange
+    aiSummaryMinHeight: connectedAIBlockHeight.current
   }) : /*#__PURE__*/React.createElement(FooterBlock, {
     actions: footerActions,
     size: SmartLinkSize.Large,

package/dist/esm/view/InlineCard/ErroredView/index.js

@@ -6,7 +6,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import { R300 } from '@atlaskit/theme/colors';
 import ErrorIcon from '@atlaskit/icon/glyph/error';

package/dist/esm/view/InlineCard/ForbiddenView/index.js

@@ -7,7 +7,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import { R400, N500 } from '@atlaskit/theme/colors';
 import LockIcon from '@atlaskit/icon/glyph/lock-filled';

package/dist/esm/view/InlineCard/IconAndTitleLayout/index.js

@@ -6,7 +6,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import ImageLoader from 'react-render-image';
 import { Icon, Shimmer } from '../Icon';

package/dist/esm/view/InlineCard/ResolvedView/index.js

@@ -4,7 +4,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import { Frame } from '../Frame';
 import Lozenge from '@atlaskit/lozenge';

package/dist/esm/view/InlineCard/ResolvingView/index.js

@@ -4,7 +4,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import { Frame } from '../Frame';
 import Spinner from '@atlaskit/spinner';