@atlaskit/smart-card 26.67.0 → 26.69.0

package/dist/es2019/view/FlexibleCard/components/actions/action/action-stack-item/index.js

@@ -7,6 +7,7 @@ import { getPrimitivesInlineSpaceBySize } from '../../../utils';
 import ActionIcon from '../action-icon';
 const buttonStyles = xcss({
   all: 'unset',
+  cursor: 'pointer',
   padding: 'space.050',
   width: '100%',
   ':focus:not(:focus-visible)': {

package/dist/es2019/view/FlexibleCard/components/actions/ai-summary-action/copy-summary-action.js

@@ -17,7 +17,7 @@ export function CopySummaryAction({
   const {
     fireEvent
   } = useAnalyticsEvents();
-  const [tooltipMessage, setTooltipMessage] = useState(messages.copy_summary_action);
+  const [tooltipMessage, setTooltipMessage] = useState(messages.copy_summary_action_description);
   const handleCopySummaryClick = useCallback(async () => {
     fireEvent('ui.button.clicked.copySummary', {});
     await navigator.clipboard.writeText(content !== null && content !== void 0 ? content : '');
@@ -31,6 +31,7 @@ export function CopySummaryAction({
     }),
     onClick: handleCopySummaryClick,
     testId: `${testId}-copy-summary-action`,
-    tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, tooltipMessage)
+    tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, tooltipMessage),
+    tooltipOnHide: () => setTooltipMessage(messages.copy_summary_action_description)
   }, props));
 }

package/dist/es2019/view/FlexibleCard/components/actions/automation-action/index.js

@@ -28,14 +28,15 @@ const AutomationAction = props => {
   const automationActionTitle = /*#__PURE__*/React.createElement(FormattedMessage, messages.automation_action_title);
   const automationActionTooltip = /*#__PURE__*/React.createElement(FormattedMessage, messages.automation_action_tooltip);
   const automationActionIconLabel = formatMessage(messages.automation_action_icon_label);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Action, _extends({}, data, props, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Action, _extends({
     content: automationActionTitle,
     icon: /*#__PURE__*/React.createElement(AutomationManualTriggersGlyph, {
       label: automationActionIconLabel
     }),
-    onClick: () => handleAutomateActionClick(setIsModalOpen),
     testId: "smart-action-automation-action",
     tooltipMessage: automationActionTooltip
+  }, data, props, {
+    onClick: () => handleAutomateActionClick(setIsModalOpen)
   })));
 };
 export default AutomationAction;

package/dist/es2019/view/FlexibleCard/components/blocks/ai-footer-block/resolved/ai-footer-metadata.js

@@ -1,9 +1,9 @@
 import React from 'react';
+import Tooltip from '@atlaskit/tooltip';
 import { di } from 'react-magnetic-di';
 import { FormattedMessage } from 'react-intl-next';
-import Tooltip from '@atlaskit/tooltip';
 import { Box, Inline } from '@atlaskit/primitives';
-import AIStateIndicator from '../../ai-summary-block/ai-state-indicator';
+import AIIcon from '../../../../../common/ai-icon';
 import { InfoIcon } from '../icons/info';
 import { messages } from '../../../../../../messages';
 import { useAISummary } from '../../../../../../state/hooks/use-ai-summary';
@@ -32,14 +32,14 @@ export const AIFooterMetadata = ({
     grow: "fill"
   }, /*#__PURE__*/React.createElement(Tooltip, {
     content: /*#__PURE__*/React.createElement(FormattedMessage, messages.ai_summarized_info_short),
-    position: "top"
+    position: "bottom"
   }, tooltipProps => /*#__PURE__*/React.createElement(Box, tooltipProps, /*#__PURE__*/React.createElement(InfoIcon, {
     label: "Information",
     size: "small",
     primaryColor: "var(--ds-icon-subtle, #626F86)"
-  }))), /*#__PURE__*/React.createElement(AIStateIndicator, {
-    appearance: "icon-only",
-    state: "done",
-    testId: "ai-tooltip"
+  }))), /*#__PURE__*/React.createElement(AIIcon, {
+    label: "AI",
+    size: "small",
+    primaryColor: "var(--ds-icon-subtle, #626F86)"
   }));
 };

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

@@ -60,7 +60,8 @@ const AISummaryBlockResolvedView = props => {
     size = SmartLinkSize.Medium,
     testId,
     aiSummaryMinHeight = 0,
-    metadata
+    metadata,
+    placeholder
   } = props;
   const {
     fireEvent
@@ -91,6 +92,7 @@ const AISummaryBlockResolvedView = props => {
   status === 'loading' && !!content;
   const isSummarisedOnMountRef = useRef(status === 'done');
   const isErroredOnMountRef = useRef(status === 'error');
+  const minHeight = getBooleanFF('platform.linking-platform.smart-card.hover-card-action-redesign') && isSummarisedOnMountRef.current ? 0 : aiSummaryMinHeight;
   useEffect(() => {
     // if the error was apparent on mount and the status is changed to loading we can
     // clear the initial error on mount state
@@ -133,6 +135,9 @@ const AISummaryBlockResolvedView = props => {
       });
     }
   }, [onActionMenuOpenChange]);
+  if (!showAISummary && getBooleanFF('platform.linking-platform.smart-card.hover-card-action-redesign')) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, placeholder);
+  }
   return /*#__PURE__*/React.createElement(Block, _extends({}, props, {
     direction: SmartLinkDirection.Vertical,
     testId: `${testId}-resolved-view`
@@ -146,12 +151,12 @@ const AISummaryBlockResolvedView = props => {
   }), status === 'done' && /*#__PURE__*/React.createElement(AIEventSummaryViewed, {
     fromCache: isSummarisedOnMountRef.current
   }), /*#__PURE__*/React.createElement(MotionWrapper, {
-    minHeight: aiSummaryMinHeight,
+    minHeight: minHeight,
     show: showAISummary,
     showTransition: !isSummarisedOnMountRef.current
   }, /*#__PURE__*/React.createElement(AISummary, {
     testId: `${testId}-ai-summary`,
-    minHeight: aiSummaryMinHeight,
+    minHeight: minHeight,
     content: content,
     showIcon: !getBooleanFF('platform.linking-platform.smart-card.hover-card-action-redesign') && isSummarisedOnMountRef.current
   })), !getBooleanFF('platform.linking-platform.smart-card.hover-card-action-redesign') && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Inline, {

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

@@ -14,6 +14,7 @@ import { getMetadata } from '../utils';
 import HoverCardLoadingView from './views/resolving';
 import HoverCardUnauthorisedView from './views/unauthorised';
 import HoverCardResolvedView from './views/resolved';
+import HoverCardRedesignedResolvedView from './views/resolved/redesign';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../../../messages';
 import { fireLinkClickedEvent } from '../../../utils/analytics/click';
@@ -153,6 +154,18 @@ const HoverCardContent = ({
       });
     }
     if (cardState.status === 'resolved') {
+      if (getBooleanFF('platform.linking-platform.smart-card.hover-card-action-redesign')) {
+        return jsx(HoverCardRedesignedResolvedView, {
+          analytics: analytics,
+          cardState: cardState,
+          extensionKey: extensionKey,
+          flexibleCardProps: flexibleCardProps,
+          isAISummaryEnabled: isAISummaryEnabled,
+          onActionClick: onActionClick,
+          titleBlockProps: titleBlockProps,
+          url: url
+        });
+      }
       return jsx(HoverCardResolvedView, {
         id: id,
         url: url,

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, SmartLinkDirection } from '../../../../../constants';
-import { FooterBlock, MetadataBlock, RelatedUrlsBlock, SnippetBlock, TitleBlock, AISummaryBlock, CustomBlock, ActionBlock, AIFooterBlock } from '../../../../FlexibleCard/components/blocks';
+import { FooterBlock, MetadataBlock, RelatedUrlsBlock, SnippetBlock, TitleBlock, AISummaryBlock, CustomBlock } from '../../../../FlexibleCard/components/blocks';
 import { footerBlockCss, hiddenSnippetStyles, metadataBlockCss } from './styled';
 import FlexibleCard from '../../../../FlexibleCard';
 import { getMetadata } from '../../../utils';
@@ -80,7 +80,7 @@ const ConnectedAIBlock = ({
   return showData ? /*#__PURE__*/React.createElement(React.Fragment, null, !imagePreview && /*#__PURE__*/React.createElement(SnippetBlock, {
     testId: 'connected-AI',
     status: SmartLinkStatus.Resolved
-  }), !getBooleanFF('platform.linking-platform.smart-card.hover-card-action-redesign') && /*#__PURE__*/React.createElement(MetadataBlock, {
+  }), /*#__PURE__*/React.createElement(MetadataBlock, {
     primary: bottomPrimary,
     size: SmartLinkSize.Large,
     overrideCss: metadataBlockCss,
@@ -138,7 +138,6 @@ const HoverCardResolvedView = ({
     data: data,
     fallbackElementHeight: snippetHeight.current
   });
-  const isActionBlockEnabled = getBooleanFF('platform.linking-platform.smart-card.hover-card-action-redesign') ? true : false;
   return /*#__PURE__*/React.createElement(FlexibleCard, flexibleCardProps, imagePreview, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, titleBlockProps, {
     metadataPosition: SmartLinkPosition.Top
   })), /*#__PURE__*/React.createElement(MetadataBlock, {
@@ -166,7 +165,7 @@ const HoverCardResolvedView = ({
     onRender: onSnippetRender,
     blockRef: snippetBlockRef,
     overrideCss: hiddenSnippetStyles
-  }), !isAISummaryEnabled && !isActionBlockEnabled && /*#__PURE__*/React.createElement(MetadataBlock, {
+  }), !isAISummaryEnabled && /*#__PURE__*/React.createElement(MetadataBlock, {
     primary: tertiary,
     size: SmartLinkSize.Large,
     overrideCss: metadataBlockCss,
@@ -181,10 +180,7 @@ const HoverCardResolvedView = ({
     }],
     actions: footerActions,
     aiSummaryMinHeight: connectedAIBlockHeight.current
-  }), isActionBlockEnabled && /*#__PURE__*/React.createElement(ActionBlock, {
-    onClick: onActionClick,
-    spaceInline: "space.100"
-  }), isActionBlockEnabled && /*#__PURE__*/React.createElement(AIFooterBlock, null), !isAISummaryEnabled && !isActionBlockEnabled && /*#__PURE__*/React.createElement(FooterBlock, {
+  }), !isAISummaryEnabled && /*#__PURE__*/React.createElement(FooterBlock, {
     actions: footerActions,
     size: SmartLinkSize.Large,
     overrideCss: footerBlockCss

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

@@ -0,0 +1,73 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { CardDisplay, SmartLinkPosition, SmartLinkSize, SmartLinkStatus } from '../../../../../constants';
+import { getCanBeDatasource } from '../../../../../state/helpers';
+import FlexibleCard from '../../../../FlexibleCard';
+import { ActionBlock, AIFooterBlock, AISummaryBlock, MetadataBlock, SnippetBlock, TitleBlock } from '../../../../FlexibleCard/components/blocks';
+import { getMetadata } from '../../../utils';
+import ImagePreview from '../../ImagePreview';
+import { hiddenSnippetStyles, metadataBlockCss } from './styled';
+const HoverCardResolvedView = ({
+  analytics,
+  cardState,
+  extensionKey,
+  flexibleCardProps,
+  isAISummaryEnabled,
+  onActionClick,
+  titleBlockProps
+}) => {
+  var _cardState$details;
+  const canBeDatasource = getCanBeDatasource(cardState.details);
+  useEffect(() => {
+    // Since this hover view is only rendered on resolved status,
+    // there is no need to check for statuses.
+    analytics.ui.renderSuccessEvent({
+      display: CardDisplay.HoverCardPreview,
+      status: cardState.status,
+      canBeDatasource
+    });
+  }, [analytics.ui, cardState.status, canBeDatasource]);
+  const data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
+  const {
+    primary,
+    secondary
+  } = useMemo(() => {
+    return getMetadata(extensionKey, data);
+  }, [data, extensionKey]);
+  const snippetHeight = React.useRef(0);
+  const snippetBlockRef = useRef(null);
+  const onSnippetRender = useCallback(() => {
+    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;
+  }, []);
+  const imagePreview = ImagePreview({
+    data: data,
+    fallbackElementHeight: snippetHeight.current
+  });
+  const snippet = imagePreview ? null : /*#__PURE__*/React.createElement(SnippetBlock, {
+    status: SmartLinkStatus.Resolved
+  });
+  const aiSummaryMinHeight = snippet ? snippetHeight.current : 0;
+  return /*#__PURE__*/React.createElement(FlexibleCard, flexibleCardProps, imagePreview, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, titleBlockProps, {
+    metadataPosition: SmartLinkPosition.Top
+  })), /*#__PURE__*/React.createElement(MetadataBlock, {
+    primary: primary,
+    secondary: secondary,
+    overrideCss: metadataBlockCss,
+    maxLines: 1,
+    size: SmartLinkSize.Medium
+  }), isAISummaryEnabled ? /*#__PURE__*/React.createElement(AISummaryBlock, {
+    aiSummaryMinHeight: aiSummaryMinHeight,
+    placeholder: snippet,
+    status: SmartLinkStatus.Resolved
+  }) : snippet, /*#__PURE__*/React.createElement(SnippetBlock, {
+    testId: "hidden-snippet",
+    onRender: onSnippetRender,
+    blockRef: snippetBlockRef,
+    overrideCss: hiddenSnippetStyles
+  }), /*#__PURE__*/React.createElement(ActionBlock, {
+    onClick: onActionClick,
+    spaceInline: "space.100"
+  }), /*#__PURE__*/React.createElement(AIFooterBlock, null));
+};
+export default HoverCardResolvedView;

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

@@ -7,7 +7,7 @@ import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-m
 import LinkWarningModal from './LinkWarningModal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.67.0",
+  packageVersion: "26.69.0",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

package/dist/esm/messages.js

@@ -31,7 +31,7 @@ export var messages = defineMessages({
     description: 'Additional info about the content summarised by AI.'
   },
   ai_summarized_info_short: {
-    id: 'fabric.linking.ai_summarized_info_short.nonfinal',
+    id: 'fabric.linking.ai_summarized_info_short',
     defaultMessage: 'Content quality may vary',
     description: 'Additional info about the content summarised by AI.'
   },
@@ -186,7 +186,7 @@ export var messages = defineMessages({
     description: ''
   },
   copied_url_to_clipboard: {
-    id: 'fabric.linking.copied_url_to_clipboard.nonfinal',
+    id: 'fabric.linking.copied_url_to_clipboard',
     defaultMessage: 'Copied!',
     description: 'Url has been copied to the clipboard'
   },
@@ -221,37 +221,37 @@ export var messages = defineMessages({
     description: ''
   },
   download_description: {
-    id: 'fabric.linking.download_description.nonfinal',
+    id: 'fabric.linking.download_description',
     defaultMessage: 'Download this file into your local storage',
     description: 'Description on what Download does'
   },
   download_file: {
-    id: 'fabric.linking.download_file.nonfinal',
+    id: 'fabric.linking.download_file',
     defaultMessage: 'Download file',
     description: 'Allow a user to download a file'
   },
   ai_summary_action: {
-    id: 'fabric.linking.ai_summary_action.nonfinal',
+    id: 'fabric.linking.ai_summary_action',
     defaultMessage: 'Summarize with AI',
     description: 'Allow a user to summarize a link'
   },
   ai_summary_action_description: {
-    id: 'fabric.linking.ai_summary_action_description.nonfinal',
+    id: 'fabric.linking.ai_summary_action_description',
     defaultMessage: 'Summarize the content of this link using Atlassian Intelligence.',
     description: 'Description of what the summarize link with AI action does'
   },
   copy_summary_action: {
-    id: 'fabric.linking.copy_summary_action.nonfinal',
+    id: 'fabric.linking.copy_summary_action',
     defaultMessage: 'Copy summary',
     description: 'Allow a user to copy a generated summary'
   },
   copy_summary_action_description: {
-    id: 'fabric.linking.copy_summary_action.nonfinal',
+    id: 'fabric.linking.copy_summary_action_description',
     defaultMessage: 'Copy summary',
     description: 'Description of what the copy summary AI action does'
   },
   copied_summary_action_description: {
-    id: 'fabric.linking.copied_summary_action_description.nonfinal',
+    id: 'fabric.linking.copied_summary_action_description',
     defaultMessage: 'Copied summary to clipboard',
     description: 'Confirmation to the user that the summry has been copied'
   },
@@ -266,32 +266,32 @@ export var messages = defineMessages({
     description: 'Click to follow a project.'
   },
   follow_project_description: {
-    id: 'fabric.linking.follow_project_description.nonfinal',
+    id: 'fabric.linking.follow_project_description',
     defaultMessage: 'Follow to get notifications on this project',
     description: 'Description on what Follow does'
   },
   follow_project: {
-    id: 'fabric.linking.follow_project.nonfinal',
+    id: 'fabric.linking.follow_project',
     defaultMessage: 'Follow project',
     description: 'Click to follow a project.'
   },
   follow_project_error: {
-    id: 'fabric.linking.follow_project_error.nonfinal',
+    id: 'fabric.linking.follow_project_error',
     defaultMessage: 'We encountered an error while trying to follow the project. Check your connection or refresh the page and try again.',
     description: 'Shown when an unknown error occurs when following an Atlas project'
   },
   follow_goal_description: {
-    id: 'fabric.linking.follow_goal_description.nonfinal',
+    id: 'fabric.linking.follow_goal_description',
     defaultMessage: 'Follow this goal to get notifications on updates',
     description: 'Description on what Follow does'
   },
   follow_goal: {
-    id: 'fabric.linking.follow_goal.nonfinal',
+    id: 'fabric.linking.follow_goal',
     defaultMessage: 'Follow goal',
     description: 'Click to follow a project.'
   },
   follow_goal_error: {
-    id: 'fabric.linking.follow_goal_error.nonfinal',
+    id: 'fabric.linking.follow_goal_error',
     defaultMessage: 'We encountered an error while trying to follow the goal. Check your connection or refresh the page and try again.',
     description: 'Shown when an unknown error occurs when following an Atlas goal'
   },
@@ -366,7 +366,7 @@ export var messages = defineMessages({
     description: 'Indicates the person or entity that owns or maintains the resource.'
   },
   preview_description: {
-    id: 'fabric.linking.preview_description.nonfinal',
+    id: 'fabric.linking.preview_description',
     defaultMessage: 'Open a full screen preview of this link',
     description: 'Description on what Preview does'
   },
@@ -556,32 +556,32 @@ export var messages = defineMessages({
     description: 'Click to unfollow a project.'
   },
   unfollow_project_description: {
-    id: 'fabric.linking.unfollow_project_description.nonfinal',
+    id: 'fabric.linking.unfollow_project_description',
     defaultMessage: 'Unfollow to stop receiving project notifications',
     description: 'Description on what Unfollow does'
   },
   unfollow_project: {
-    id: 'fabric.linking.unfollow_project.nonfinal',
+    id: 'fabric.linking.unfollow_project',
     defaultMessage: 'Unfollow project',
     description: 'Click to unfollow a project.'
   },
   unfollow_project_error: {
-    id: 'fabric.linking.unfollow_project_error.nonfinal',
+    id: 'fabric.linking.unfollow_project_error',
     defaultMessage: 'We encountered an error while trying to unfollow the project. Check your connection or refresh the page and try again.',
     description: 'Shown when an unknown error occurs when unfollowing an Atlas project'
   },
   unfollow_goal_description: {
-    id: 'fabric.linking.unfollow_goal_description.nonfinal',
+    id: 'fabric.linking.unfollow_goal_description',
     defaultMessage: 'Unfollow to stop receiving notifications for this goal',
     description: 'Description on what Unfollow does'
   },
   unfollow_goal: {
-    id: 'fabric.linking.unfollow_goal.nonfinal',
+    id: 'fabric.linking.unfollow_goal',
     defaultMessage: 'Unfollow goal',
     description: 'Click to unfollow a project.'
   },
   unfollow_goal_error: {
-    id: 'fabric.linking.unfollow_goal_error.nonfinal',
+    id: 'fabric.linking.unfollow_goal_error',
     defaultMessage: 'We encountered an error while trying to unfollow the goal. Check your connection or refresh the page and try again.',
     description: 'Shown when an unknown error occurs when unfollowing an Atlas goal'
   },

package/dist/esm/utils/analytics/analytics.js

@@ -15,7 +15,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.67.0"
+  packageVersion: "26.69.0"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/esm/view/FlexibleCard/components/actions/action/action-stack-item/index.js

@@ -7,6 +7,7 @@ import { getPrimitivesInlineSpaceBySize } from '../../../utils';
 import ActionIcon from '../action-icon';
 var buttonStyles = xcss({
   all: 'unset',
+  cursor: 'pointer',
   padding: 'space.050',
   width: '100%',
   ':focus:not(:focus-visible)': {

package/dist/esm/view/FlexibleCard/components/actions/ai-summary-action/copy-summary-action.js

@@ -20,7 +20,7 @@ export function CopySummaryAction(_ref) {
     props = _objectWithoutProperties(_ref, _excluded);
   var _useAnalyticsEvents = useAnalyticsEvents(),
     fireEvent = _useAnalyticsEvents.fireEvent;
-  var _useState = useState(messages.copy_summary_action),
+  var _useState = useState(messages.copy_summary_action_description),
     _useState2 = _slicedToArray(_useState, 2),
     tooltipMessage = _useState2[0],
     setTooltipMessage = _useState2[1];
@@ -47,6 +47,9 @@ export function CopySummaryAction(_ref) {
     }),
     onClick: handleCopySummaryClick,
     testId: "".concat(testId, "-copy-summary-action"),
-    tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, tooltipMessage)
+    tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, tooltipMessage),
+    tooltipOnHide: function tooltipOnHide() {
+      return setTooltipMessage(messages.copy_summary_action_description);
+    }
   }, props));
 }

package/dist/esm/view/FlexibleCard/components/actions/automation-action/index.js

@@ -31,16 +31,17 @@ var AutomationAction = function AutomationAction(props) {
   var automationActionTitle = /*#__PURE__*/React.createElement(FormattedMessage, messages.automation_action_title);
   var automationActionTooltip = /*#__PURE__*/React.createElement(FormattedMessage, messages.automation_action_tooltip);
   var automationActionIconLabel = formatMessage(messages.automation_action_icon_label);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Action, _extends({}, data, props, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Action, _extends({
     content: automationActionTitle,
     icon: /*#__PURE__*/React.createElement(AutomationManualTriggersGlyph, {
       label: automationActionIconLabel
     }),
-    onClick: function onClick() {
-      return handleAutomateActionClick(setIsModalOpen);
-    },
     testId: "smart-action-automation-action",
     tooltipMessage: automationActionTooltip
+  }, data, props, {
+    onClick: function onClick() {
+      return handleAutomateActionClick(setIsModalOpen);
+    }
   })));
 };
 export default AutomationAction;

package/dist/esm/view/FlexibleCard/components/blocks/ai-footer-block/resolved/ai-footer-metadata.js

@@ -1,9 +1,9 @@
 import React from 'react';
+import Tooltip from '@atlaskit/tooltip';
 import { di } from 'react-magnetic-di';
 import { FormattedMessage } from 'react-intl-next';
-import Tooltip from '@atlaskit/tooltip';
 import { Box, Inline } from '@atlaskit/primitives';
-import AIStateIndicator from '../../ai-summary-block/ai-state-indicator';
+import AIIcon from '../../../../../common/ai-icon';
 import { InfoIcon } from '../icons/info';
 import { messages } from '../../../../../../messages';
 import { useAISummary } from '../../../../../../state/hooks/use-ai-summary';
@@ -28,16 +28,16 @@ export var AIFooterMetadata = function AIFooterMetadata(_ref) {
     grow: "fill"
   }, /*#__PURE__*/React.createElement(Tooltip, {
     content: /*#__PURE__*/React.createElement(FormattedMessage, messages.ai_summarized_info_short),
-    position: "top"
+    position: "bottom"
   }, function (tooltipProps) {
     return /*#__PURE__*/React.createElement(Box, tooltipProps, /*#__PURE__*/React.createElement(InfoIcon, {
       label: "Information",
       size: "small",
       primaryColor: "var(--ds-icon-subtle, #626F86)"
     }));
-  }), /*#__PURE__*/React.createElement(AIStateIndicator, {
-    appearance: "icon-only",
-    state: "done",
-    testId: "ai-tooltip"
+  }), /*#__PURE__*/React.createElement(AIIcon, {
+    label: "AI",
+    size: "small",
+    primaryColor: "var(--ds-icon-subtle, #626F86)"
   }));
 };

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

@@ -63,7 +63,8 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
     testId = props.testId,
     _props$aiSummaryMinHe = props.aiSummaryMinHeight,
     aiSummaryMinHeight = _props$aiSummaryMinHe === void 0 ? 0 : _props$aiSummaryMinHe,
-    metadata = props.metadata;
+    metadata = props.metadata,
+    placeholder = props.placeholder;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     fireEvent = _useAnalyticsEvents.fireEvent;
   var context = useFlexibleUiContext();
@@ -89,6 +90,7 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
   status === 'loading' && !!content;
   var isSummarisedOnMountRef = useRef(status === 'done');
   var isErroredOnMountRef = useRef(status === 'error');
+  var minHeight = getBooleanFF('platform.linking-platform.smart-card.hover-card-action-redesign') && isSummarisedOnMountRef.current ? 0 : aiSummaryMinHeight;
   useEffect(function () {
     // if the error was apparent on mount and the status is changed to loading we can
     // clear the initial error on mount state
@@ -131,6 +133,9 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
       });
     }
   }, [onActionMenuOpenChange]);
+  if (!showAISummary && getBooleanFF('platform.linking-platform.smart-card.hover-card-action-redesign')) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, placeholder);
+  }
   return /*#__PURE__*/React.createElement(Block, _extends({}, props, {
     direction: SmartLinkDirection.Vertical,
     testId: "".concat(testId, "-resolved-view")
@@ -144,12 +149,12 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
   }), status === 'done' && /*#__PURE__*/React.createElement(AIEventSummaryViewed, {
     fromCache: isSummarisedOnMountRef.current
   }), /*#__PURE__*/React.createElement(MotionWrapper, {
-    minHeight: aiSummaryMinHeight,
+    minHeight: minHeight,
     show: showAISummary,
     showTransition: !isSummarisedOnMountRef.current
   }, /*#__PURE__*/React.createElement(AISummary, {
     testId: "".concat(testId, "-ai-summary"),
-    minHeight: aiSummaryMinHeight,
+    minHeight: minHeight,
     content: content,
     showIcon: !getBooleanFF('platform.linking-platform.smart-card.hover-card-action-redesign') && isSummarisedOnMountRef.current
   })), !getBooleanFF('platform.linking-platform.smart-card.hover-card-action-redesign') && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Inline, {

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

@@ -16,6 +16,7 @@ import { getMetadata } from '../utils';
 import HoverCardLoadingView from './views/resolving';
 import HoverCardUnauthorisedView from './views/unauthorised';
 import HoverCardResolvedView from './views/resolved';
+import HoverCardRedesignedResolvedView from './views/resolved/redesign';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../../../messages';
 import { fireLinkClickedEvent } from '../../../utils/analytics/click';
@@ -180,6 +181,18 @@ var HoverCardContent = function HoverCardContent(_ref) {
       });
     }
     if (cardState.status === 'resolved') {
+      if (getBooleanFF('platform.linking-platform.smart-card.hover-card-action-redesign')) {
+        return jsx(HoverCardRedesignedResolvedView, {
+          analytics: analytics,
+          cardState: cardState,
+          extensionKey: extensionKey,
+          flexibleCardProps: flexibleCardProps,
+          isAISummaryEnabled: isAISummaryEnabled,
+          onActionClick: onActionClick,
+          titleBlockProps: titleBlockProps,
+          url: url
+        });
+      }
       return jsx(HoverCardResolvedView, {
         id: id,
         url: url,

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

@@ -2,7 +2,7 @@ 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, SmartLinkDirection } from '../../../../../constants';
-import { FooterBlock, MetadataBlock, RelatedUrlsBlock, SnippetBlock, TitleBlock, AISummaryBlock, CustomBlock, ActionBlock, AIFooterBlock } from '../../../../FlexibleCard/components/blocks';
+import { FooterBlock, MetadataBlock, RelatedUrlsBlock, SnippetBlock, TitleBlock, AISummaryBlock, CustomBlock } from '../../../../FlexibleCard/components/blocks';
 import { footerBlockCss, hiddenSnippetStyles, metadataBlockCss } from './styled';
 import FlexibleCard from '../../../../FlexibleCard';
 import { getMetadata } from '../../../utils';
@@ -77,7 +77,7 @@ var ConnectedAIBlock = function ConnectedAIBlock(_ref) {
   return showData ? /*#__PURE__*/React.createElement(React.Fragment, null, !imagePreview && /*#__PURE__*/React.createElement(SnippetBlock, {
     testId: 'connected-AI',
     status: SmartLinkStatus.Resolved
-  }), !getBooleanFF('platform.linking-platform.smart-card.hover-card-action-redesign') && /*#__PURE__*/React.createElement(MetadataBlock, {
+  }), /*#__PURE__*/React.createElement(MetadataBlock, {
     primary: bottomPrimary,
     size: SmartLinkSize.Large,
     overrideCss: metadataBlockCss,
@@ -136,7 +136,6 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref2) {
     data: data,
     fallbackElementHeight: snippetHeight.current
   });
-  var isActionBlockEnabled = getBooleanFF('platform.linking-platform.smart-card.hover-card-action-redesign') ? true : false;
   return /*#__PURE__*/React.createElement(FlexibleCard, flexibleCardProps, imagePreview, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, titleBlockProps, {
     metadataPosition: SmartLinkPosition.Top
   })), /*#__PURE__*/React.createElement(MetadataBlock, {
@@ -164,7 +163,7 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref2) {
     onRender: onSnippetRender,
     blockRef: snippetBlockRef,
     overrideCss: hiddenSnippetStyles
-  }), !isAISummaryEnabled && !isActionBlockEnabled && /*#__PURE__*/React.createElement(MetadataBlock, {
+  }), !isAISummaryEnabled && /*#__PURE__*/React.createElement(MetadataBlock, {
     primary: tertiary,
     size: SmartLinkSize.Large,
     overrideCss: metadataBlockCss,
@@ -179,10 +178,7 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref2) {
     }],
     actions: footerActions,
     aiSummaryMinHeight: connectedAIBlockHeight.current
-  }), isActionBlockEnabled && /*#__PURE__*/React.createElement(ActionBlock, {
-    onClick: onActionClick,
-    spaceInline: "space.100"
-  }), isActionBlockEnabled && /*#__PURE__*/React.createElement(AIFooterBlock, null), !isAISummaryEnabled && !isActionBlockEnabled && /*#__PURE__*/React.createElement(FooterBlock, {
+  }), !isAISummaryEnabled && /*#__PURE__*/React.createElement(FooterBlock, {
     actions: footerActions,
     size: SmartLinkSize.Large,
     overrideCss: footerBlockCss