@atlaskit/smart-card 26.55.2 → 26.56.1

package/dist/es2019/view/common/ai-icon-loading/index.js

@@ -9,21 +9,17 @@ import { aiThemeTokens } from '../ai-prism/constants';
  * with modifications
  */
 
-const bounce = keyframes`
-  from {
-    transform: translateY(0);
+const bounce = keyframes({
+  from: {
+    transform: 'translateY(0)'
+  },
+  '16.67%': {
+    transform: 'translateY(-2px)'
+  },
+  '33.33%': {
+    transform: 'translateY(0px)'
   }
-
-  // 200ms of 1200ms = 16.67%
-  16.67% {
-    transform: translateY(-2px);
-  }
-
-  // 400ms of 1200ms = 33.33%
-  33.33% {
-    transform: translateY(0px);
-  }
-`;
+});
 const BASE_DELAY = 400;
 const QUEUE_DELAY = 200;
 const animationStyles = css({

package/dist/esm/constants.js

@@ -145,6 +145,7 @@ export var ElementName = /*#__PURE__*/function (ElementName) {
  * Flexible UI action (button)
  */
 export var ActionName = /*#__PURE__*/function (ActionName) {
+  ActionName["CopyLinkAction"] = "CopyLinkAction";
   ActionName["DeleteAction"] = "DeleteAction";
   ActionName["EditAction"] = "EditAction";
   ActionName["FollowAction"] = "FollowAction";

package/dist/esm/extractors/flexible/actions/extract-copy-link-action.js

@@ -0,0 +1,15 @@
+import { extractLink } from '@atlaskit/link-extractors';
+import { CardAction } from '../../../view/Card/types';
+import { canShowAction } from '../../../utils/actions/can-show-action';
+export var extractCopyLinkAction = function extractCopyLinkAction(data, actionOptions) {
+  if (!canShowAction(CardAction.CopyLinkAction, actionOptions)) {
+    return;
+  }
+  var url = extractLink(data);
+  if (!url) {
+    return;
+  }
+  return {
+    url: url
+  };
+};

package/dist/esm/extractors/flexible/actions/index.js

@@ -3,9 +3,10 @@ import { ActionName } from '../../../constants';
 import { extractDownloadAction } from './extract-download-action';
 import { extractPreviewAction } from './extract-preview-action';
 import extractFollowAction from './extract-follow-action';
+import { extractCopyLinkAction } from './extract-copy-link-action';
 var extractActions = function extractActions(response, data, actionOptions, id) {
   var _action;
-  var action = (_action = {}, _defineProperty(_action, ActionName.DownloadAction, extractDownloadAction(data, actionOptions)), _defineProperty(_action, ActionName.FollowAction, extractFollowAction(response, actionOptions, id)), _defineProperty(_action, ActionName.PreviewAction, extractPreviewAction(response, actionOptions)), _action);
+  var action = (_action = {}, _defineProperty(_action, ActionName.CopyLinkAction, extractCopyLinkAction(data, actionOptions)), _defineProperty(_action, ActionName.DownloadAction, extractDownloadAction(data, actionOptions)), _defineProperty(_action, ActionName.FollowAction, extractFollowAction(response, actionOptions, id)), _defineProperty(_action, ActionName.PreviewAction, extractPreviewAction(response, actionOptions)), _action);
   return Object.values(action).some(function (value) {
     return Boolean(value);
   }) ? action : undefined;

package/dist/esm/messages.js

@@ -45,6 +45,11 @@ export var messages = defineMessages({
     defaultMessage: "We cannot show the results of this summary as it goes against <a>Atlassian's Acceptable Use Policy</a>.",
     description: 'Shown when AI summary is summarising the link resource content and the content violates atlassians acceptable use policy.'
   },
+  ai_summary_error_hipaa_content_detected: {
+    id: 'fabric.linking.ai_summary_error_hipaa_content_detected',
+    defaultMessage: 'Atlassian Intelligence was unable to process your request as your content contains links to HIPAA restricted content.',
+    description: 'Shown when the AI summary is summarising the link resource content and the content contains HIPAA restricted content.'
+  },
   assigned_to: {
     id: 'fabric.linking.assigned_to',
     defaultMessage: 'Assigned to {context}',
@@ -145,6 +150,11 @@ export var messages = defineMessages({
     defaultMessage: 'Copy link',
     description: ''
   },
+  copied_url_to_clipboard: {
+    id: 'fabric.linking.copied_url_to_clipboard.nonfinal',
+    defaultMessage: 'Copied!',
+    description: 'Url has been copied to the clipboard'
+  },
   could_not_load_link: {
     id: 'fabric.linking.couldnt_load_link',
     defaultMessage: "We couldn't load this link for an unknown reason.",

package/dist/esm/state/hooks/use-ai-summary/ai-summary-service/types.js

@@ -1 +1 @@
-export var errorMessages = ['NETWORK_ERROR', 'NO_ANSWER', 'RATE_LIMIT', 'NO_AGENT', 'PLUGIN_ERRORED', 'OPENAI_RATE_LIMIT_USER_ABUSE', 'ACCEPTABLE_USE_VIOLATIONS', 'AI_DISABLED', 'UNEXPECTED'];
+export var errorMessages = ['NETWORK_ERROR', 'NO_ANSWER', 'RATE_LIMIT', 'NO_AGENT', 'PLUGIN_ERRORED', 'OPENAI_RATE_LIMIT_USER_ABUSE', 'ACCEPTABLE_USE_VIOLATIONS', 'AI_DISABLED', 'UNEXPECTED', 'HIPAA_CONTENT_DETECTED'];

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

package/dist/esm/view/BlockCard/views/flexible/FlexibleUnauthorisedView.js

@@ -1,8 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["testId"];
-var _templateObject;
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { useCallback, useMemo } from 'react';
@@ -14,7 +12,11 @@ import UnauthorisedViewContent from '../../../common/UnauthorisedViewContent';
 import { messages } from '../../../../messages';
 import UnresolvedView from './unresolved-view';
 import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
-var contentStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  margin-top: 0.5rem;\n  font-size: 0.75rem;\n"])), "var(--ds-text-subtlest, #626F86)");
+var contentStyles = css({
+  color: "var(--ds-text-subtlest, #626F86)",
+  marginTop: "var(--ds-space-100, 0.5rem)",
+  fontSize: '0.75rem'
+});
 
 /**
  * This view represents a Block card that has an 'Unauthorized' status .

package/dist/esm/view/BlockCard/views/styled.js

@@ -1,5 +1,7 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import styled from '@emotion/styled';
 // TODO: Replace overrides with proper AtlasKit solution.
-export var LozengeBlockWrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & > span {\n    margin-left: ", ";\n  }\n"])), "var(--ds-space-050, 4px)");
+export var LozengeBlockWrapper = styled.span({
+  '& > span': {
+    marginLeft: "var(--ds-space-050, 4px)"
+  }
+});

package/dist/esm/view/Card/types.js

@@ -4,5 +4,6 @@ export var CardAction = /*#__PURE__*/function (CardAction) {
   CardAction["ViewAction"] = "ViewAction";
   CardAction["ChangeStatusAction"] = "ChangeStatusAction";
   CardAction["FollowAction"] = "FollowAction";
+  CardAction["CopyLinkAction"] = "CopyLinkAction";
   return CardAction;
 }({});

package/dist/esm/view/EmbedCard/views/unresolved-view/styled.js

@@ -1,9 +1,31 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 import { css } from '@emotion/react';
 import { gs } from '../../../common/utils';
-export var containerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: grid;\n  height: inherit;\n"])));
-export var contentStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  margin: auto;\n  padding: ", ";\n  gap: ", ";\n  max-width: ", ";\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-250, 20px)", gs(50));
-export var imageStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 120px;\n  width: 180px;\n  object-fit: contain;\n  object-position: center center;\n"])));
-export var titleStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  text-align: center;\n  margin: 0;\n  padding: 0;\n"])));
-export var descriptionStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-size: 1em;\n  text-align: center;\n"])));
+export var containerStyles = css({
+  display: 'grid',
+  height: 'inherit'
+});
+export var contentStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  margin: 'auto',
+  padding: "var(--ds-space-200, 16px)",
+  gap: "var(--ds-space-250, 20px)",
+  maxWidth: gs(50)
+});
+export var imageStyles = css({
+  height: '120px',
+  width: '180px',
+  objectFit: 'contain',
+  objectPosition: 'center center'
+});
+export var titleStyles = css({
+  textAlign: 'center',
+  margin: 0,
+  padding: 0
+});
+export var descriptionStyles = css({
+  fontSize: '1em',
+  textAlign: 'center'
+});

package/dist/esm/view/EmbedModal/components/embed-content/index.js

@@ -1,12 +1,13 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 
 import { di } from 'react-magnetic-di';
 import { css, jsx } from '@emotion/react';
 import { getIframeSandboxAttribute } from '../../../../utils';
 import { IFrame } from '../../../EmbedCard/components/IFrame';
-var iframeCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: calc(100vh - 208px);\n"])));
+var iframeCss = css({
+  width: '100%',
+  height: 'calc(100vh - 208px)'
+});
 var EmbedContent = function EmbedContent(_ref) {
   var isTrusted = _ref.isTrusted,
     name = _ref.name,

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

@@ -1,5 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
 /** @jsx jsx */
 import React, { useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -10,9 +8,23 @@ import { sizeToButtonSpacing } from '../../../utils';
 var getButtonStyle = function getButtonStyle(size, iconOnly) {
   switch (size) {
     case SmartLinkSize.Large:
-      return iconOnly ? css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n            button,\n            button:hover,\n            button:focus,\n            button:active {\n              padding: 0;\n              > span {\n                margin: 0;\n              }\n            }\n          "]))) : '';
+      return iconOnly ? css({
+        'button, button:hover, button:focus, button:active': {
+          padding: 0,
+          '> span': {
+            margin: 0
+          }
+        }
+      }) : '';
     case SmartLinkSize.Small:
-      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        font-size: 0.75rem;\n        font-weight: 500;\n        line-height: 1rem;\n        button,\n        button:hover,\n        button:focus,\n        button:active {\n          line-height: 1rem;\n          ", "\n        }\n      "])), iconOnly ? "\n            padding: 0.125rem;\n          " : "\n            padding-left: 0.25rem;\n            padding-right: 0.25rem;\n          ");
+      return css({
+        fontSize: '0.75rem',
+        fontWeight: 500,
+        lineHeight: '1rem',
+        'button, button:hover, button:focus, button:active': [{
+          lineHeight: '1rem'
+        }, iconOnly ? "\n            padding: 0.125rem;\n          " : "\n            padding-left: 0.25rem;\n            padding-right: 0.25rem;\n          "]
+      });
     case SmartLinkSize.XLarge:
     case SmartLinkSize.Medium:
     default:
@@ -30,7 +42,9 @@ var ActionButton = function ActionButton(_ref) {
     size = _ref.size,
     testId = _ref.testId,
     tooltipMessage = _ref.tooltipMessage,
-    isDisabled = _ref.isDisabled;
+    isDisabled = _ref.isDisabled,
+    href = _ref.href,
+    ariaLabel = _ref.ariaLabel;
   var iconOnly = !content;
   var onButtonClick = useCallback(function (handler) {
     return function (e) {
@@ -53,7 +67,9 @@ var ActionButton = function ActionButton(_ref) {
     isLoading: isLoading,
     onClick: onButtonClick(onClick),
     spacing: sizeToButtonSpacing[size],
-    testId: testId
+    testId: testId,
+    href: href,
+    "aria-label": ariaLabel
   }, content)));
 };
 export default ActionButton;

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

@@ -46,7 +46,8 @@ var ActionStackItem = function ActionStackItem(_ref) {
     spaceOption = _ref.space,
     testId = _ref.testId,
     tooltipMessage = _ref.tooltipMessage,
-    xcss = _ref.xcss;
+    xcss = _ref.xcss,
+    tooltipOnHide = _ref.tooltipOnHide;
   var space = spaceOption !== null && spaceOption !== void 0 ? spaceOption : getPrimitivesInlineSpaceBySize(size);
   var onClick = useCallback(function () {
     if (!isDisabled && !isLoading && onClickCallback) {
@@ -64,18 +65,19 @@ var ActionStackItem = function ActionStackItem(_ref) {
   // Replace Box with Pressable once it becomes stable (currently beta)
   return /*#__PURE__*/React.createElement(Tooltip, {
     content: tooltipMessage || content,
+    onHide: tooltipOnHide,
     hideTooltipOnMouseDown: true
   }, function (tooltipProps) {
     return /*#__PURE__*/React.createElement(Box, _extends({
       as: "button",
       xcss: [buttonStyles, xcss]
     }, tooltipProps, {
-      onClick: onClick
+      onClick: onClick,
+      testId: testId
     }), /*#__PURE__*/React.createElement(Inline, {
       alignBlock: "center",
       grow: "fill",
-      space: space,
-      testId: testId
+      space: space
     }, icon, /*#__PURE__*/React.createElement(Box, {
       xcss: contentStyles
     }, content)));

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

@@ -29,10 +29,14 @@ var Action = function Action(_ref) {
     iconPosition = _ref$iconPosition === void 0 ? 'before' : _ref$iconPosition,
     spaceInline = _ref.spaceInline,
     tooltipMessage = _ref.tooltipMessage,
+    tooltipOnHide = _ref.tooltipOnHide,
     xcss = _ref.xcss,
     asDropDownItem = _ref.asDropDownItem,
     overrideCss = _ref.overrideCss,
-    isDisabled = _ref.isDisabled;
+    isDisabled = _ref.isDisabled,
+    href = _ref.href,
+    ariaLabel = _ref.ariaLabel,
+    Wrapper = _ref.wrapper;
   if (!onClick) {
     return null;
   }
@@ -58,7 +62,8 @@ var Action = function Action(_ref) {
       size: size,
       testId: testId,
       tooltipMessage: tooltipMessage || content,
-      xcss: xcss
+      xcss: xcss,
+      tooltipOnHide: tooltipOnHide
     });
   }
   if (isDropdownItem) {
@@ -71,7 +76,7 @@ var Action = function Action(_ref) {
       testId: testId
     });
   }
-  return jsx(ActionButton, {
+  var button = jsx(ActionButton, {
     appearance: appearance,
     content: content,
     iconAfter: iconAfter,
@@ -82,7 +87,10 @@ var Action = function Action(_ref) {
     size: size,
     testId: testId,
     tooltipMessage: tooltipMessage || content,
-    isDisabled: isDisabled
+    isDisabled: isDisabled,
+    href: href,
+    ariaLabel: ariaLabel
   });
+  return Wrapper !== undefined ? jsx(Wrapper, null, button) : button;
 };
 export default Action;

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

@@ -0,0 +1,78 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["onClick"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useCallback, useState } from 'react';
+import Action from '../action';
+import { messages } from '../../../../../messages';
+import { FormattedMessage } from 'react-intl-next';
+import LinkIcon from '@atlaskit/icon/glyph/link';
+import { useFlexibleUiAnalyticsContext, useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { ActionName } from '../../../../../constants';
+import useInvokeClientAction from '../../../../../state/hooks/use-invoke-client-action';
+var CopyLinkAction = function CopyLinkAction(_ref) {
+  var _context$actions;
+  var onClickCallback = _ref.onClick,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var context = useFlexibleUiContext();
+  var analytics = useFlexibleUiAnalyticsContext();
+  var invoke = useInvokeClientAction({
+    analytics: analytics
+  });
+  var data = context === null || context === void 0 || (_context$actions = context.actions) === null || _context$actions === void 0 ? void 0 : _context$actions[ActionName.CopyLinkAction];
+  var _useState = useState(messages.copy_url_to_clipboard),
+    _useState2 = _slicedToArray(_useState, 2),
+    tooltipMessage = _useState2[0],
+    setTooltipMessage = _useState2[1];
+  var onClick = useCallback(function () {
+    if (data && data.url) {
+      invoke({
+        actionType: ActionName.CopyLinkAction,
+        actionFn: function () {
+          var _actionFn = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+            var _data$url;
+            return _regeneratorRuntime.wrap(function _callee$(_context) {
+              while (1) switch (_context.prev = _context.next) {
+                case 0:
+                  _context.next = 2;
+                  return navigator.clipboard.writeText((_data$url = data.url) !== null && _data$url !== void 0 ? _data$url : '');
+                case 2:
+                  setTooltipMessage(messages.copied_url_to_clipboard);
+                case 3:
+                case "end":
+                  return _context.stop();
+              }
+            }, _callee);
+          }));
+          function actionFn() {
+            return _actionFn.apply(this, arguments);
+          }
+          return actionFn;
+        }(),
+        // These values have already been set in analytics context.
+        // We only pass these here for ufo experience.
+        display: analytics === null || analytics === void 0 ? void 0 : analytics.display,
+        extensionKey: analytics === null || analytics === void 0 ? void 0 : analytics.extensionKey
+      });
+    }
+    if (onClickCallback) {
+      onClickCallback();
+    }
+  }, [analytics, data, invoke, onClickCallback]);
+  return data ? /*#__PURE__*/React.createElement(Action, _extends({
+    content: /*#__PURE__*/React.createElement(FormattedMessage, messages.copy_url_to_clipboard),
+    icon: /*#__PURE__*/React.createElement(LinkIcon, {
+      label: "copy url",
+      size: "medium"
+    }),
+    onClick: onClick,
+    testId: "smart-action-copy-link-action",
+    tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, tooltipMessage),
+    tooltipOnHide: function tooltipOnHide() {
+      return setTooltipMessage(messages.copy_url_to_clipboard);
+    }
+  }, data, props)) : null;
+};
+export default CopyLinkAction;

package/dist/esm/view/FlexibleCard/components/actions/copy-link-action/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/view/FlexibleCard/components/actions/index.js

@@ -3,4 +3,5 @@ export { default as DeleteAction } from './delete-action';
 export { default as EditAction } from './edit-action';
 export { default as DownloadAction } from './download-action';
 export { default as FollowAction } from './follow-action';
-export { default as PreviewAction } from './preview-action';
+export { default as PreviewAction } from './preview-action';
+export { default as CopyLinkAction } from './copy-link-action';

package/dist/esm/view/FlexibleCard/components/blocks/ai-summary-block/ai-motion-wrapper/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/view/FlexibleCard/components/blocks/ai-summary-block/ai-state-indicator/ai-state-error.js

@@ -14,7 +14,7 @@ var contentStyles = xcss({
   fontWeight: '400',
   lineHeight: '14px'
 });
-var MessageWithAnchor = function MessageWithAnchor(_ref) {
+var FormattedErrorMessage = function FormattedErrorMessage(_ref) {
   var message = _ref.message,
     url = _ref.url;
   return /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, message, {
@@ -34,6 +34,10 @@ var getErrorMesssageProps = function getErrorMesssageProps(error) {
         message: messages.ai_summary_error_acceptable_use_violation,
         url: CONTENT_URL_ACCEPTABLE_USE_POLICY
       };
+    case 'HIPAA_CONTENT_DETECTED':
+      return {
+        message: messages.ai_summary_error_hipaa_content_detected
+      };
     default:
       return {
         message: messages.ai_summary_error_generic,
@@ -62,7 +66,7 @@ var AIStateError = function AIStateError(_ref2) {
         content: /*#__PURE__*/React.createElement(Box, {
           testId: "".concat(testId, "-error-message"),
           xcss: contentStyles
-        }, /*#__PURE__*/React.createElement(MessageWithAnchor, {
+        }, /*#__PURE__*/React.createElement(FormattedErrorMessage, {
           message: message,
           url: url
         })),

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

@@ -0,0 +1,47 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { useEffect, useMemo, useRef } from 'react';
+import { StorageClient } from '@atlaskit/frontend-utilities/storage-client';
+import { getPulseStyles } from './styled';
+var LOCAL_STORAGE_CLIENT_KEY = '@atlaskit/smart-card';
+var LOCAL_STORAGE_DISCOVERY_KEY = 'action-discovery-ai-summarise';
+var LOCAL_STORAGE_DISCOVERY_VALUE = 'discovered';
+var LOCAL_STORAGE_DISCOVERY_EXPIRY_IN_MS = 15552000000; // 180 days
+var LOCAL_STORAGE_DISCOVERY_REQUIRED_TIME = 2000;
+/**
+ * This is a hacky solution to help with the feature discovery.
+ * This implementation must be removed once the experiment is completed.
+ * Cleanup on https://product-fabric.atlassian.net/browse/EDM-9649
+ */
+var FeatureDiscovery = function FeatureDiscovery(_ref) {
+  var children = _ref.children,
+    testId = _ref.testId;
+  var renderedTime = useRef();
+  var storageClient = useMemo(function () {
+    return new StorageClient(LOCAL_STORAGE_CLIENT_KEY);
+  }, []);
+  var discovered = useMemo(function () {
+    return storageClient.getItem(LOCAL_STORAGE_DISCOVERY_KEY) === LOCAL_STORAGE_DISCOVERY_VALUE;
+  }, [storageClient]);
+  useEffect(function () {
+    renderedTime.current = Date.now();
+    return function () {
+      if (!discovered && renderedTime.current) {
+        var duration = Date.now() - renderedTime.current;
+        if (duration > LOCAL_STORAGE_DISCOVERY_REQUIRED_TIME) {
+          storageClient.setItemWithExpiry(LOCAL_STORAGE_DISCOVERY_KEY, LOCAL_STORAGE_DISCOVERY_VALUE, LOCAL_STORAGE_DISCOVERY_EXPIRY_IN_MS);
+        }
+      }
+    };
+  }, [storageClient, discovered]);
+  var component = useMemo(function () {
+    if (!discovered) {
+      return jsx("span", {
+        css: getPulseStyles(),
+        "data-testid": "".concat(testId, "-discovery")
+      }, children);
+    }
+  }, [children, discovered, testId]);
+  return component !== null && component !== void 0 ? component : children;
+};
+export default FeatureDiscovery;

package/dist/esm/view/FlexibleCard/components/blocks/ai-summary-block/feature-discovery/styled.js

@@ -0,0 +1,15 @@
+import { css, keyframes } from '@emotion/react';
+export var getPulseStyles = function getPulseStyles() {
+  var color = "var(--ds-border-discovery, #8270DB)";
+  var pulseKeyframes = keyframes({
+    to: {
+      boxShadow: '0 0 0 7px rgba(0, 0, 0, 0)'
+    }
+  });
+  return css({
+    display: 'inline-flex',
+    borderRadius: '3px',
+    boxShadow: "0 0 0 0 ".concat(color),
+    animation: "".concat(pulseKeyframes, " 2s cubic-bezier(0.5, 0, 0, 1) 0.25s both 2")
+  });
+};

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

@@ -20,6 +20,8 @@ import { useAnalyticsEvents } from '../../../../../../common/analytics/generated
 import AIEventSummaryViewed from '../ai-event-summary-viewed';
 import AIEventErrorViewed from '../ai-event-error-viewed';
 import { di } from 'react-magnetic-di';
+import { css } from '@emotion/react';
+import FeatureDiscovery from '../feature-discovery';
 export var AISummaryBlockErrorIndicator = function AISummaryBlockErrorIndicator(_ref) {
   var showErrorIndicator = _ref.showErrorIndicator,
     error = _ref.error,
@@ -107,7 +109,12 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
         testId: "".concat(testId, "-ai-summary-action"),
         icon: /*#__PURE__*/React.createElement(AIIcon, {
           label: "AIIcon"
-        })
+        }),
+        /**
+         * Enabling feature discovery pulse
+         * Cleanup: https://product-fabric.atlassian.net/browse/EDM-9693
+         */
+        wrapper: FeatureDiscovery
       };
       return [aiAction].concat(_toConsumableArray(actions));
     }
@@ -123,6 +130,13 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
   return /*#__PURE__*/React.createElement(Block, _extends({}, props, {
     direction: SmartLinkDirection.Vertical,
     testId: "".concat(testId, "-resolved-view")
+    /**
+     * Enabled for feature discovery to allow box shadow to overflow
+     * Cleanup: https://product-fabric.atlassian.net/browse/EDM-8681
+     */,
+    overrideCss: css({
+      overflow: 'visible'
+    }, props.overrideCss)
   }), status === 'done' && /*#__PURE__*/React.createElement(AIEventSummaryViewed, {
     fromCache: isSummarisedOnMountRef.current
   }), /*#__PURE__*/React.createElement(AIMotionWrapper, {

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

@@ -5,7 +5,9 @@ import { useEffect } from 'react';
 import { css, jsx } from '@emotion/react';
 import { ElementName, SmartLinkDirection, SmartLinkSize } from '../../../../../constants';
 import { getBaseStyles, getGapSize, highlightRemoveStyles, renderChildren } from '../utils';
-var getBlockStyles = function getBlockStyles(direction, size) {
+var getBlockStyles = function getBlockStyles(direction, size
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  justify-content: flex-start;\n  [data-separator] + [data-separator]:before {\n    content: '\u2022';\n    margin-right: ", "rem;\n  }\n  // Pull request elements: source branch \u2192 target branch\n  [data-smart-element='", "']\n    + [data-smart-element='", "']:before {\n    content: '\u2192';\n  }\n  // Pull request elements: target branch \u2190 source branch\n  [data-smart-element='", "']\n    + [data-smart-element='", "']:before {\n    content: '\u2190';\n  }\n"])), getBaseStyles(direction, size), highlightRemoveStyles, getGapSize(size), ElementName.SourceBranch, ElementName.TargetBranch, ElementName.TargetBranch, ElementName.SourceBranch);
 };