@atlaskit/smart-card 26.49.0 → 26.49.2

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

@@ -20,6 +20,7 @@ var _messages = require("../../../../../messages");
 var _reactIntlNext = require("react-intl-next");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _helpers = require("../../../../../state/helpers");
+var _useAiSummary = require("../../../../../state/hooks/use-ai-summary");
 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 toFooterActions = exports.toFooterActions = function toFooterActions(cardActions, onActionClick) {
@@ -56,19 +57,41 @@ var toFooterActions = exports.toFooterActions = function toFooterActions(cardAct
   });
   return [followAction].concat((0, _toConsumableArray2.default)(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 = (0, _useAiSummary.useAISummary)({
+    url: url
+  });
+  var aiStatus = aiSummary.state.status;
+  var showData = aiStatus === 'ready' || aiStatus === 'error';
+  return showData ? /*#__PURE__*/_react.default.createElement(_blocks.CustomBlock, {
+    direction: _constants.SmartLinkDirection.Vertical
+  }, !imagePreview && /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, {
+    status: _constants.SmartLinkStatus.Resolved
+  }), /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, {
+    primary: bottomPrimary,
+    size: _constants.SmartLinkSize.Large,
+    overrideCss: _styled.metadataBlockCss,
+    maxLines: 1,
+    status: _constants.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 = (0, _helpers.getCanBeDatasource)(cardState.details);
   (0, _react.useEffect)(function () {
     // Since this hover view is only rendered on resolved status,
@@ -100,6 +123,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.default.useRef(0);
+  var connectedAIBlockRef = (0, _react.useRef)(null);
+  var onConnectedAIBlockRender = (0, _react.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 = (0, _ImagePreview.default)({
     data: data,
     fallbackElementHeight: snippetHeight.current
@@ -112,16 +144,31 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
     overrideCss: _styled.metadataBlockCss,
     maxLines: 1,
     size: _constants.SmartLinkSize.Medium
-  }), !imagePreview && /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, null), /*#__PURE__*/_react.default.createElement(_blocks.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.default.createElement(_blocks.CustomBlock, {
+    direction: _constants.SmartLinkDirection.Vertical,
+    onRender: onConnectedAIBlockRender,
+    blockRef: connectedAIBlockRef
+  }, /*#__PURE__*/_react.default.createElement(ConnectedAIBlock, {
+    imagePreview: !!imagePreview,
+    url: url,
+    bottomPrimary: bottomPrimary
+  })), !isAISummaryEnabled && !imagePreview && /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, {
+    status: _constants.SmartLinkStatus.Resolved
+  }), /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, {
     testId: 'hidden-snippet',
     onRender: onSnippetRender,
     blockRef: snippetBlockRef,
     overrideCss: _styled.hiddenSnippetStyles
-  }), /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, {
+  }), !isAISummaryEnabled && /*#__PURE__*/_react.default.createElement(_blocks.MetadataBlock, {
     primary: bottomPrimary,
     size: _constants.SmartLinkSize.Large,
     overrideCss: _styled.metadataBlockCss,
-    maxLines: 1
+    maxLines: 1,
+    status: _constants.SmartLinkStatus.Resolved
   }), (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-hover-card-related-urls') && /*#__PURE__*/_react.default.createElement(_blocks.RelatedUrlsBlock, {
     url: url,
     size: _constants.SmartLinkSize.Small
@@ -130,7 +177,7 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
       name: _constants.ElementName.Provider
     }],
     actions: footerActions,
-    onAIActionChange: onAIActionChange
+    aiSummaryMinHeight: connectedAIBlockHeight.current
   }) : /*#__PURE__*/_react.default.createElement(_blocks.FooterBlock, {
     actions: footerActions,
     size: _constants.SmartLinkSize.Large,

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.49.0",
+  packageVersion: "26.49.2",
   componentName: 'linkUrl'
 };
 var Link = (0, _click.withLinkClickedEvent)('a');

package/dist/cjs/view/common/ai-prism/index.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("@emotion/react");
-var _react2 = _interopRequireDefault(require("react"));
 var _tokens = require("@atlaskit/tokens");
 var _constants = require("./constants");
 var _aiGlowingBorder = _interopRequireDefault(require("./ai-glowing-border"));

package/dist/cjs/view/common/ai-summary/index.js

@@ -31,14 +31,17 @@ var AISummaryCSS = (0, _react2.css)({
  */
 
 var AISummary = function AISummary(_ref) {
-  var content = _ref.content,
+  var _ref$content = _ref.content,
+    content = _ref$content === void 0 ? '' : _ref$content,
     _ref$showIcon = _ref.showIcon,
     showIcon = _ref$showIcon === void 0 ? false : _ref$showIcon,
     iconComponent = _ref.iconComponent,
     overrideCss = _ref.overrideCss,
     _ref$testId = _ref.testId,
-    testId = _ref$testId === void 0 ? 'ai-summary' : _ref$testId;
-  if (!content) {
+    testId = _ref$testId === void 0 ? 'ai-summary' : _ref$testId,
+    _ref$minHeight = _ref.minHeight,
+    minHeight = _ref$minHeight === void 0 ? 0 : _ref$minHeight;
+  if (!content && minHeight === 0) {
     return null;
   }
   return (0, _react2.jsx)(_markdownToJsx.default, {
@@ -50,6 +53,9 @@ var AISummary = function AISummary(_ref) {
       overrides: {
         Icon: iconComponent !== null && iconComponent !== void 0 ? iconComponent : AITooltipIcon
       }
+    },
+    style: {
+      minHeight: minHeight
     }
   });
 };

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

@@ -23,7 +23,11 @@ export class AISummaryService {
       const path = 'chat/v1/invoke_agent/stream';
       const requestUrl = addPath(this.config.baseUrl, path);
       const response = await fetch(requestUrl, options);
-      return readStream(response);
+      if (!response.ok || response.status >= 400) {
+        throw new Error(`Status: ${response.status}\n URL: ${this.url}\n StatusText ${response.statusText}`);
+      } else {
+        return readStream(response);
+      }
     });
     const defaultConfig = {
       baseUrl: '/gateway/api/assist',
@@ -42,10 +46,10 @@ export class AISummaryService {
     };
     this.url = props.url;
   }
-  async summariseUrl(summaryStyle = 'short') {
+  async summariseUrl(summaryStyle = 'medium') {
     this.state = {
-      ...this.state,
-      status: 'loading'
+      status: 'loading',
+      content: ''
     };
     for (const subscriber of this.subscribedStateSetters) {
       subscriber(this.state);
@@ -63,12 +67,17 @@ export class AISummaryService {
             });
           }
         }
+
+        //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;
+        }
       }
       this.state = {
         status: 'done',
         content: bufferContent
       };
-    } catch {
+    } catch (err) {
       this.state = {
         status: 'error',
         content: ''

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

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect } from 'react';
 import { AISummariesStore } from './ai-summary-service/store';
 import { AISummaryService } from './ai-summary-service';
 export const useAISummary = props => {
@@ -6,50 +6,32 @@ export const useAISummary = props => {
   const {
     url,
     baseUrl,
-    product,
-    headers
+    headers,
+    product
   } = props;
   const [state, setState] = useState(((_AISummariesStore$get = AISummariesStore.get(url)) === null || _AISummariesStore$get === void 0 ? void 0 : _AISummariesStore$get.state) || {
     status: 'ready',
     content: ''
   });
-
-  // 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.
-  const isSummarisedOnMount = useMemo(() => {
-    var _AISummariesStore$get2;
-    return ((_AISummariesStore$get2 = AISummariesStore.get(url)) === null || _AISummariesStore$get2 === void 0 ? void 0 : _AISummariesStore$get2.state.status) === 'done';
-  }, [url]);
   useEffect(() => {
-    // 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) {
-      const aISummaryService = AISummariesStore.get(url);
-      const 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.
-        const unsubscribe = aISummaryService.subscribe(setState);
-        return () => unsubscribe();
-      } else {
-        var _AISummariesStore$get3;
-        //if we want to create a new AI service and wish to subscribe for updates
-        AISummariesStore.set(url, new AISummaryService({
-          url,
-          baseUrl,
-          product,
-          headers
-        }));
-        const unsubscribe = (_AISummariesStore$get3 = AISummariesStore.get(url)) === null || _AISummariesStore$get3 === void 0 ? void 0 : _AISummariesStore$get3.subscribe(setState);
-        return () => unsubscribe && unsubscribe();
-      }
+    var _AISummariesStore$get2;
+    if (!AISummariesStore.get(url)) {
+      AISummariesStore.set(url, new AISummaryService({
+        url,
+        baseUrl,
+        headers,
+        product
+      }));
     }
-  }, [isSummarisedOnMount, url, baseUrl, product, headers]);
+
+    //returns function that calls unsubscribe method
+    return (_AISummariesStore$get2 = AISummariesStore.get(url)) === null || _AISummariesStore$get2 === void 0 ? void 0 : _AISummariesStore$get2.subscribe(setState);
+  }, [url, baseUrl, headers, product]);
   const summariseUrl = () => {
-    var _AISummariesStore$get4;
-    return (_AISummariesStore$get4 = AISummariesStore.get(url)) === null || _AISummariesStore$get4 === void 0 ? void 0 : _AISummariesStore$get4.summariseUrl();
+    var _AISummariesStore$get3;
+    return (_AISummariesStore$get3 = AISummariesStore.get(url)) === null || _AISummariesStore$get3 === void 0 ? void 0 : _AISummariesStore$get3.summariseUrl();
   };
   return {
-    isSummarisedOnMount,
     summariseUrl,
     state
   };

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

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

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-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';
@@ -21,40 +21,46 @@ const AISummaryBlockResolvedView = props => {
     actions = [],
     metadata,
     onActionMenuOpenChange,
-    onAIActionChange,
     size = SmartLinkSize.Medium,
-    testId
+    testId,
+    aiSummaryMinHeight
   } = props;
-  const [aiState, setAIState] = useState('ready');
+  const metadataElements = renderElementItems(metadata);
   const {
     fireEvent
   } = useAnalyticsEvents();
-  const metadataElements = renderElementItems(metadata);
   const context = useFlexibleUiContext();
   const url = (context === null || context === void 0 ? void 0 : context.url) || '';
-  const aiSummary = useAISummary({
-    url
-  });
   const {
+    summariseUrl,
     state: {
       content,
       status
-    },
-    isSummarisedOnMount
-  } = aiSummary;
-  const onAIActionClick = useCallback(() => {
-    fireEvent('ui.button.clicked.aiSummary', {});
-    setAIState('loading');
-    if (onAIActionChange) {
-      onAIActionChange('loading');
     }
-  }, [onAIActionChange, fireEvent]);
+  } = useAISummary({
+    url
+  });
+  const showAISummary = status !== 'ready' && status !== 'error';
+  const isSummarisedOnMountRef = useRef(status === 'done');
+  let isErroredOnMountRef = useRef(status === 'error');
+  const [showAISummaryErrorMessage, setShowAISummaryErrorMessage] = useState(false);
+  useEffect(() => {
+    if (isErroredOnMountRef.current && status === 'loading') {
+      isErroredOnMountRef.current = false;
+      setShowAISummaryErrorMessage(true);
+    } else {
+      setShowAISummaryErrorMessage(!isErroredOnMountRef.current && status === 'error');
+    }
+  }, [status]);
   const combinedActions = useMemo(() => {
-    if (aiState === 'ready') {
+    if (status === 'ready' || status === 'error') {
       const aiAction = {
         content: /*#__PURE__*/React.createElement(FormattedMessage, messages.ai_summarize),
         name: ActionName.CustomAction,
-        onClick: onAIActionClick,
+        onClick: () => {
+          fireEvent('ui.button.clicked.aiSummary', {});
+          summariseUrl();
+        },
         testId: `${testId}-ai-summary-action`,
         icon: /*#__PURE__*/React.createElement(AIIcon, {
           label: "AIIcon"
@@ -63,7 +69,7 @@ const AISummaryBlockResolvedView = props => {
       return [aiAction, ...actions];
     }
     return actions;
-  }, [actions, aiState, onAIActionClick, testId]);
+  }, [actions, status, testId, summariseUrl, fireEvent]);
   const onDropdownOpenChange = useCallback(isOpen => {
     if (onActionMenuOpenChange) {
       onActionMenuOpenChange({
@@ -75,17 +81,18 @@ const AISummaryBlockResolvedView = props => {
     direction: SmartLinkDirection.Vertical,
     testId: `${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: `${testId}-state-indicator`
   }) : /*#__PURE__*/React.createElement(ElementGroup, {
     width: SmartLinkWidth.FitToContent,
@@ -95,7 +102,7 @@ const 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/es2019/view/FlexibleCard/components/blocks/block/index.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { css, jsx } from '@emotion/react';
 import { ElementName, SmartLinkDirection, SmartLinkSize } from '../../../../../constants';
 import { getBaseStyles, getGapSize, highlightRemoveStyles, renderChildren } from '../utils';

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

@@ -1,5 +1,4 @@
 /** @jsx jsx */
-import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkWidth } from '../../../../../constants';
 import { getBaseStyles, getGapSize, renderChildren } from '../utils';

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

@@ -1,28 +1,53 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import React from 'react';
+import { 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';
+import { useAISummary } from '../../../state/hooks/use-ai-summary';
+const ConnectedAIPrismContainer = ({
+  children,
+  isAIEnabled = false,
+  testId,
+  url,
+  ...props
+}) => {
+  const {
+    state: {
+      status
+    }
+  } = useAISummary({
+    url
+  });
+  const [showPrism, setShowPrism] = useState(status === 'loading');
+  useEffect(() => {
+    setShowPrism(status === 'loading');
+  }, [status]);
+  const container = jsx("div", _extends({
+    className: hoverCardClassName,
+    css: [HoverCardContainer, isAIEnabled && showPrism ? undefined : popupContainerStyles],
+    "data-testid": testId
+  }, props), children);
+  return isAIEnabled ? jsx(AIPrism, {
+    isVisible: showPrism,
+    testId: `${testId}-prism`
+  }, container) : container;
+};
 const ContentContainer = ({
   children,
   isAIEnabled = false,
-  showPrism = false,
   testId,
+  url,
   ...props
 }) => {
   if (getBooleanFF('platform.linking-platform.smart-card.hover-card-ai-summaries')) {
-    const 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: `${testId}-prism`
-    }, container) : container;
   }
   return jsx("div", _extends({
     className: hoverCardClassName,

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

@@ -2,7 +2,7 @@
 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';
@@ -61,7 +61,6 @@ const HoverCardContent = ({
   const services = getServices(linkState.details);
   const statusRef = useRef(linkStatus);
   const analyticsRef = useRef(analytics);
-  const [showPrism, setShowPrism] = useState(false);
   useEffect(() => {
     /**
      * Must access current analytics object value via ref because its not stable
@@ -131,9 +130,6 @@ const HoverCardContent = ({
     analytics
   };
   const onClickStopPropagation = useCallback(e => e.stopPropagation(), []);
-  const onAIActionChange = useCallback(state => {
-    setShowPrism(state === 'loading');
-  }, []);
   const getCardView = cardState => {
     if (cardState.metadataStatus === 'pending') {
       return jsx(HoverCardLoadingView, {
@@ -166,7 +162,6 @@ const HoverCardContent = ({
         flexibleCardProps: flexibleCardProps,
         isAISummaryEnabled: isAISummaryEnabled,
         onActionClick: onActionClick,
-        onAIActionChange: onAIActionChange,
         titleBlockProps: titleBlockProps
       });
     }
@@ -178,7 +173,7 @@ const HoverCardContent = ({
     onMouseLeave: onMouseLeave,
     onClick: onClickStopPropagation,
     isAIEnabled: isAISummaryEnabled,
-    showPrism: showPrism
+    url: url
   }, cardView) : null;
 };
 export default HoverCardContent;

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 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';
@@ -11,6 +11,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 const toFooterActions = (cardActions, onActionClick) => {
   const followAction = {
     hideIcon: true,
@@ -45,6 +47,30 @@ export const toFooterActions = (cardActions, onActionClick) => {
   });
   return [followAction, ...actions];
 };
+
+//This component encapsulates useAISummary hook under the AI Summary FF 'platform.linking-platform.smart-card.hover-card-ai-summaries'
+const ConnectedAIBlock = ({
+  bottomPrimary,
+  url,
+  imagePreview
+}) => {
+  const aiSummary = useAISummary({
+    url
+  });
+  const aiStatus = aiSummary.state.status;
+  const 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;
+};
 const HoverCardResolvedView = ({
   flexibleCardProps,
   titleBlockProps,
@@ -53,7 +79,6 @@ const HoverCardResolvedView = ({
   cardActions = [],
   isAISummaryEnabled,
   onActionClick,
-  onAIActionChange,
   extensionKey,
   url
 }) => {
@@ -88,6 +113,15 @@ const HoverCardResolvedView = ({
     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.
+  const connectedAIBlockHeight = React.useRef(0);
+  const connectedAIBlockRef = useRef(null);
+  const onConnectedAIBlockRender = useCallback(() => {
+    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;
+  }, []);
   const imagePreview = ImagePreview({
     data: data,
     fallbackElementHeight: snippetHeight.current
@@ -100,16 +134,31 @@ const HoverCardResolvedView = ({
     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
@@ -118,7 +167,7 @@ const HoverCardResolvedView = ({
       name: ElementName.Provider
     }],
     actions: footerActions,
-    onAIActionChange: onAIActionChange
+    aiSummaryMinHeight: connectedAIBlockHeight.current
   }) : /*#__PURE__*/React.createElement(FooterBlock, {
     actions: footerActions,
     size: SmartLinkSize.Large,