@atlaskit/smart-card 44.3.1 → 44.3.3

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/smart-card
 
+## 44.3.3
+
+### Patch Changes
+
+- [`d2102caf5dde7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d2102caf5dde7) -
+  [ux] Change post auth SL experiment "Key highlights" prompt to "Highlight what's relevant"
+
+## 44.3.2
+
+### Patch Changes
+
+- [`dee5bdcb8345a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dee5bdcb8345a) -
+  Fire analytics event when SL intesects into viewport
+- Updated dependencies
+
 ## 44.3.1
 
 ### Patch Changes

package/analytics.spec.yaml

@@ -851,6 +851,15 @@ events:
           required: false
           type: string
           description: The unique ID for this Smart Link
+  - smartLink seen:
+      type: ui
+      description: fires an event that represents when a rendered Smart Link is visible in the viewport for the first time
+      attributes:
+        <<: [*PackageMetaDataContext, *CommonContext, *ResolvedContext]
+        display:
+          required: true
+          type: ['inline', 'block', 'embed', 'flexible']
+          description: Whether the card was an Inline, Block, Embed or Flexible UI
   - smartLink clicked (smartlinkClickAnalyticsWorkflows):
       type: ui
       description:

package/dist/cjs/messages.js

@@ -957,16 +957,6 @@ var messages = exports.messages = (0, _reactIntl.defineMessages)({
     defaultMessage: '<p>Summarize the main ideas and key points of <a>{url}</a> in 3-5 clear, complete sentences.</p><p>Preserve any important details such as names, dates, and key decisions.</p>',
     description: 'The prompt message to send to Rovo Chat. {url} refers to Smart Link that the user triggers this action from. (Please make sure all html tags remain the same.)'
   },
-  rovo_prompt_button_key_highlights: {
-    id: 'fabric.linking.rovo_prompt_button_key_highlights.non-final',
-    defaultMessage: 'Key highlights',
-    description: 'The name of the action to send a key highlights prompt message to Rovo Chat in relation to current Smart Link'
-  },
-  rovo_prompt_message_key_highlights: {
-    id: 'fabric.linking.rovo_prompt_message_key_highlights.non-final',
-    defaultMessage: "<p>Based on <a>{url}</a> and the page or ticket I'm currently viewing, highlight the parts of the linked content that are most relevant to this work. Explain briefly why each part is relevant.</p>",
-    description: 'The prompt message to send to Rovo Chat. {url} refers to Smart Link that the user triggers this action from. (Please make sure all html tags remain the same.)'
-  },
   rovo_prompt_button_ask_rovo_anything: {
     id: 'fabric.linking.rovo_prompt_button_ask_rovo.non-final',
     defaultMessage: 'Ask Rovo',

package/dist/cjs/ssr.js

@@ -12,7 +12,9 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactErrorBoundary = require("react-error-boundary");
 var _uuid = _interopRequireDefault(require("uuid"));
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _analytics = require("./utils/analytics/analytics");
+var _cardErrorBoundary = _interopRequireDefault(require("./view/CardWithUrl/card-error-boundary"));
 var _component = require("./view/CardWithUrl/component");
 var _LoadingCardLink = require("./view/CardWithUrl/component-lazy/LoadingCardLink");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -21,7 +23,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 // SSR friendly version of smart-card
 // simplifies the logic around rendering and loading placeholders and
 // only contains whats necessary to render the card on SSR mode
-var CardSSR = exports.CardSSR = function CardSSR(props) {
+var CardSSROld = function CardSSROld(props) {
   // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
   var _useState = (0, _react.useState)(function () {
       var _props$id;
@@ -47,4 +49,29 @@ var CardSSR = exports.CardSSR = function CardSSR(props) {
   }, /*#__PURE__*/_react.default.createElement(Component, {
     className: "loader-wrapper"
   }, /*#__PURE__*/_react.default.createElement(_component.CardWithUrlContent, cardProps))));
+};
+
+// SSR friendly version of smart-card
+// simplifies the logic around rendering and loading placeholders and
+// only contains whats necessary to render the card on SSR mode
+var CardSSRNew = function CardSSRNew(props) {
+  // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
+  var _useState3 = (0, _react.useState)(function () {
+      var _props$id2;
+      return (_props$id2 = props.id) !== null && _props$id2 !== void 0 ? _props$id2 : (0, _uuid.default)();
+    }),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 1),
+    id = _useState4[0];
+  var propsWithId = _objectSpread(_objectSpread({}, props), {}, {
+    id: id
+  });
+  return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
+    data: _analytics.context
+  }, /*#__PURE__*/_react.default.createElement(_cardErrorBoundary.default, propsWithId, /*#__PURE__*/_react.default.createElement(_component.CardWithUrl, propsWithId)));
+};
+var CardSSR = exports.CardSSR = function CardSSR(props) {
+  if ((0, _platformFeatureFlags.fg)('platform_sl_event_ui_seen')) {
+    return /*#__PURE__*/_react.default.createElement(CardSSRNew, props);
+  }
+  return /*#__PURE__*/_react.default.createElement(CardSSROld, props);
 };

package/dist/cjs/state/hooks/use-intersection-observer/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+// This property enables the intersection observer to be run once the
+// HTML element being observed is within `X` px of the target container it is
+// being compared to. Since the default container is the `document`, we set this
+// up to check once a Smart Link is within `X` px from the bottom of the viewport.
+var ROOT_MARGIN_VERTICAL = '360px';
+var useIntersectionObserver = function useIntersectionObserver(_ref) {
+  var onIntersectingCallback = _ref.onIntersecting,
+    onIntersectionCallback = _ref.onIntersection;
+  var ref = (0, _react.useRef)(null);
+  var onIntersectingCallbackRef = (0, _react.useRef)(onIntersectingCallback);
+  var onIntersectionCallbackRef = (0, _react.useRef)(onIntersectionCallback);
+  (0, _react.useEffect)(function () {
+    onIntersectingCallbackRef.current = onIntersectingCallback;
+    onIntersectionCallbackRef.current = onIntersectionCallback;
+  }, [onIntersectingCallback, onIntersectionCallback]);
+  var onIntersection = (0, _react.useCallback)(function (entries, observer) {
+    var _onIntersectionCallba;
+    var isIntersecting = entries.some(function (entry) {
+      return entry.isIntersecting;
+    });
+    (_onIntersectionCallba = onIntersectionCallbackRef.current) === null || _onIntersectionCallba === void 0 || _onIntersectionCallba.call(onIntersectionCallbackRef, isIntersecting);
+    if (isIntersecting) {
+      var _onIntersectingCallba;
+      (_onIntersectingCallba = onIntersectingCallbackRef.current) === null || _onIntersectingCallba === void 0 || _onIntersectingCallba.call(onIntersectingCallbackRef);
+      observer.disconnect();
+    }
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (!ref.current) {
+      return;
+    }
+    var intersectionObserver = new IntersectionObserver(onIntersection, {
+      rootMargin: "".concat(ROOT_MARGIN_VERTICAL, " 0px ").concat(ROOT_MARGIN_VERTICAL, " 0px")
+    });
+    intersectionObserver.observe(ref.current);
+    return function () {
+      return intersectionObserver.disconnect();
+    };
+  }, [ref, onIntersection]);
+  return ref;
+};
+var _default = exports.default = useIntersectionObserver;

package/dist/cjs/view/CardWithUrl/card-error-boundary/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _reactErrorBoundary = require("react-error-boundary");
+var _LoadingCardLink = require("../component-lazy/LoadingCardLink");
+var _excluded = ["children"];
+var CardErrorBoundary = function CardErrorBoundary(_ref) {
+  var children = _ref.children,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // TODO: NAVX-4682: Add feature parity to CardWithURLRenderer
+  var ErrorFallbackComponent = props.fallbackComponent;
+  var errorBoundaryFallbackComponent = function errorBoundaryFallbackComponent() {
+    if (ErrorFallbackComponent) {
+      return /*#__PURE__*/_react.default.createElement(ErrorFallbackComponent, null);
+    }
+    return /*#__PURE__*/_react.default.createElement(_LoadingCardLink.LoadingCardLink, props);
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactErrorBoundary.ErrorBoundary, {
+    FallbackComponent: errorBoundaryFallbackComponent
+  }, children);
+};
+var _default = exports.default = CardErrorBoundary;

package/dist/cjs/view/CardWithUrl/card-intersection-observer/index.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _useIntersectionObserver = _interopRequireDefault(require("../../../state/hooks/use-intersection-observer"));
+var _utils = require("../../../utils");
+var _cardLoaderWrapper = _interopRequireDefault(require("../card-loader-wrapper"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var withCardIntersectionObserver = function withCardIntersectionObserver(Component) {
+  return function (props) {
+    // TODO: NAVX-4682: Add feature parity to LazyIntersectionObserverCard for no lazy loading
+    var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isIntersected = _useState2[0],
+      setIsIntersected = _useState2[1];
+    var onIntersecting = (0, _react.useCallback)(function () {
+      setIsIntersected(true);
+    }, []);
+    var ref = (0, _useIntersectionObserver.default)({
+      onIntersecting: onIntersecting
+    });
+    return /*#__PURE__*/_react.default.createElement(_cardLoaderWrapper.default, {
+      appearance: props.appearance,
+      ref: ref
+    }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, props, {
+      isIntersected: isIntersected
+    })));
+  };
+};
+var withCardIntersectionObserverFallback = function withCardIntersectionObserverFallback(Component) {
+  return function (props) {
+    return /*#__PURE__*/_react.default.createElement(_cardLoaderWrapper.default, {
+      appearance: props.appearance
+    }, /*#__PURE__*/_react.default.createElement(Component, props));
+  };
+};
+var _default = exports.default = function _default(Component) {
+  return (0, _utils.isIntersectionObserverSupported)() ? withCardIntersectionObserver(Component) : withCardIntersectionObserverFallback(Component);
+};

package/dist/cjs/view/CardWithUrl/card-loader-wrapper/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var CardLoaderWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var appearance = _ref.appearance,
+    children = _ref.children;
+  var Component = appearance === 'inline' ? 'span' : 'div';
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    _react.default.createElement(Component, {
+      className: "loader-wrapper",
+      ref: ref
+    }, children)
+  );
+});
+var _default = exports.default = CardLoaderWrapper;

package/dist/cjs/view/CardWithUrl/component-lazy/LazyIntersectionObserverCard.js

@@ -5,12 +5,16 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LazyIntersectionObserverCard = LazyIntersectionObserverCard;
+exports.LazyIntersectionObserverCard = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 var _state = require("../../../state");
 var _ufoExperiences = require("../../../state/analytics/ufoExperiences");
+var _useIntersectionObserver = _interopRequireDefault(require("../../../state/hooks/use-intersection-observer"));
 var _shouldSample = require("../../../utils/shouldSample");
+var _cardLoaderWrapper = _interopRequireDefault(require("../card-loader-wrapper"));
 var _component = require("../component");
 var _LoadingCardLink = require("./LoadingCardLink");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -19,7 +23,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 // being compared to. Since the default container is the `document`, we set this
 // up to check once a Smart Link is within `X` px from the bottom of the viewport.
 var ROOT_MARGIN_VERTICAL = '360px';
-function LazyIntersectionObserverCard(props) {
+function LazyIntersectionObserverCardOld(props) {
   var ref = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -68,4 +72,40 @@ function LazyIntersectionObserverCard(props) {
   return /*#__PURE__*/_react.default.createElement(Component, {
     className: "loader-wrapper"
   }, content);
-}
+}
+var LazyIntersectionObserverCardNew = function LazyIntersectionObserverCardNew(props) {
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    isIntersected = _useState6[0],
+    setIsIntersected = _useState6[1];
+  var _useState7 = (0, _react.useState)((0, _shouldSample.shouldSample)()),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 1),
+    shouldSendRenderedUFOEvent = _useState8[0];
+  var appearance = props.appearance,
+    url = props.url,
+    id = props.id;
+  var prefetch = (0, _state.usePrefetch)(url);
+  var ComponentObserver = appearance === 'inline' ? 'span' : 'div';
+  var onIntersection = (0, _react.useCallback)(function (isIntersecting) {
+    if (isIntersecting) {
+      if (shouldSendRenderedUFOEvent) {
+        (0, _ufoExperiences.startUfoExperience)('smart-link-rendered', id);
+      }
+      setIsIntersected(true);
+    } else {
+      prefetch();
+    }
+  }, [id, prefetch, shouldSendRenderedUFOEvent]);
+  var ref = (0, _useIntersectionObserver.default)({
+    onIntersection: onIntersection
+  });
+  var content = isIntersected ? /*#__PURE__*/_react.default.createElement(_component.CardWithUrlContent, (0, _extends2.default)({}, props, {
+    isIntersected: true
+  })) : /*#__PURE__*/_react.default.createElement(ComponentObserver, {
+    ref: ref
+  }, /*#__PURE__*/_react.default.createElement(_LoadingCardLink.LoadingCardLink, props));
+  return /*#__PURE__*/_react.default.createElement(_cardLoaderWrapper.default, {
+    appearance: appearance
+  }, content);
+};
+var LazyIntersectionObserverCard = exports.LazyIntersectionObserverCard = (0, _platformFeatureFlagsReact.componentWithFG)('platform_sl_event_ui_seen', LazyIntersectionObserverCardNew, LazyIntersectionObserverCardOld);

package/dist/cjs/view/CardWithUrl/component.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CardWithUrlContent = void 0;
+exports.CardWithUrlContent = exports.CardWithUrl = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _linkExtractors = require("@atlaskit/link-extractors");
@@ -30,6 +30,7 @@ var _EmbedCard = require("../EmbedCard");
 var _FlexibleCard = _interopRequireDefault(require("../FlexibleCard"));
 var _InlineCard = require("../InlineCard");
 var _useSmartLinkEvents = require("../SmartLinkEvents/useSmartLinkEvents");
+var _cardIntersectionObserver = _interopRequireDefault(require("./card-intersection-observer"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var thirdPartyARIPrefix = 'ari:third-party';
 var EmbedCardComponent = (0, _platformFeatureFlagsReact.componentWithFG)('rovo_chat_embed_card_dwell_and_hover_metrics', _EmbedCard.EmbedCardUpdated, _EmbedCard.EmbedCard);
@@ -38,6 +39,7 @@ function Component(_ref) {
     url = _ref.url,
     isSelected = _ref.isSelected,
     isHovered = _ref.isHovered,
+    isIntersected = _ref.isIntersected,
     frameStyle = _ref.frameStyle,
     platform = _ref.platform,
     onClick = _ref.onClick,
@@ -65,6 +67,7 @@ function Component(_ref) {
     createAnalyticsEvent = _useAnalyticsEventsNe.createAnalyticsEvent;
   var _useAnalyticsEvents = (0, _useAnalyticsEvents3.useAnalyticsEvents)(),
     fireEvent = _useAnalyticsEvents.fireEvent;
+  var hasFiredSeenRef = (0, _react.useRef)(false);
   var isFlexibleUi = (0, _react.useMemo)(function () {
     return (0, _flexible.isFlexibleUiCard)(children, ui);
   }, [children, ui]);
@@ -218,6 +221,19 @@ function Component(_ref) {
       });
     }
   }, [appearance, extensionKey, fireEvent, id, isFlexibleUi, state.status]);
+
+  // Fire smartLink seen event once on a successful render card is in the viewport
+  (0, _react.useEffect)(function () {
+    if ((0, _platformFeatureFlags.fg)('platform_sl_event_ui_seen')) {
+      if (!(0, _helpers.isFinalState)(state.status)) return;
+      if (isIntersected && !hasFiredSeenRef.current) {
+        fireEvent('ui.smartLink.seen', {
+          display: appearance
+        });
+        hasFiredSeenRef.current = true;
+      }
+    }
+  }, [state.status, isIntersected, fireEvent, appearance]);
   var onIframeDwell = (0, _react.useCallback)(function (dwellTime, dwellPercentVisible) {
     fireEvent('ui.smartLinkIframe.dwelled', {
       id: id,
@@ -340,6 +356,7 @@ function ComponentUpdated(_ref2) {
     url = _ref2.url,
     isSelected = _ref2.isSelected,
     isHovered = _ref2.isHovered,
+    isIntersected = _ref2.isIntersected,
     frameStyle = _ref2.frameStyle,
     platform = _ref2.platform,
     onClick = _ref2.onClick,
@@ -367,6 +384,7 @@ function ComponentUpdated(_ref2) {
     createAnalyticsEvent = _useAnalyticsEventsNe2.createAnalyticsEvent;
   var _useAnalyticsEvents2 = (0, _useAnalyticsEvents3.useAnalyticsEvents)(),
     fireEvent = _useAnalyticsEvents2.fireEvent;
+  var hasFiredSeenRef = (0, _react.useRef)(false);
   var isFlexibleUi = (0, _react.useMemo)(function () {
     return (0, _flexible.isFlexibleUiCard)(children, ui);
   }, [children, ui]);
@@ -520,6 +538,19 @@ function ComponentUpdated(_ref2) {
       });
     }
   }, [appearance, extensionKey, fireEvent, id, isFlexibleUi, state.status]);
+
+  // Fire smartLink seen event once on a successful render card is in the viewport
+  (0, _react.useEffect)(function () {
+    if ((0, _platformFeatureFlags.fg)('platform_sl_event_ui_seen')) {
+      if (!(0, _helpers.isFinalState)(state.status)) return;
+      if (isIntersected && !hasFiredSeenRef.current) {
+        fireEvent('ui.smartLink.seen', {
+          display: appearance
+        });
+        hasFiredSeenRef.current = true;
+      }
+    }
+  }, [state.status, isIntersected, fireEvent, appearance]);
   var onIframeDwell = (0, _react.useCallback)(function (dwellTime, dwellPercentVisible) {
     fireEvent('ui.smartLinkIframe.dwelled', {
       id: id,
@@ -664,4 +695,5 @@ var CardWithUrlContent = exports.CardWithUrlContent = function CardWithUrlConten
     id: props.id,
     display: display
   }, /*#__PURE__*/_react.default.createElement(CardWithUrlContentComponent, props)));
-};
+};
+var CardWithUrl = exports.CardWithUrl = (0, _cardIntersectionObserver.default)(CardWithUrlContent);

package/dist/cjs/view/FlexibleCard/components/actions/rovo-chat-action/index.js

@@ -152,8 +152,9 @@ var getPromptAction = function getPromptAction(promptKey, intl) {
         }
       };
     case RovoChatPromptKey.KEY_HIGHLIGHTS:
-      var label_key_highlights = intl.formatMessage(_messages.messages.rovo_prompt_button_key_highlights);
-      var html_key_highlights = intl.formatMessage(_messages.messages.rovo_prompt_message_key_highlights, {
+      var label_key_highlights = intl.formatMessage(_messages.messages.rovo_prompt_button_highlight_relevant_content);
+      var html_key_highlights = intl.formatMessage(_messages.messages.rovo_prompt_message_highlight_relevant_content, {
+        context: contextLong,
         url: url
       }, {
         ignoreTag: true

package/dist/es2019/messages.js

@@ -951,16 +951,6 @@ export const messages = defineMessages({
     defaultMessage: '<p>Summarize the main ideas and key points of <a>{url}</a> in 3-5 clear, complete sentences.</p><p>Preserve any important details such as names, dates, and key decisions.</p>',
     description: 'The prompt message to send to Rovo Chat. {url} refers to Smart Link that the user triggers this action from. (Please make sure all html tags remain the same.)'
   },
-  rovo_prompt_button_key_highlights: {
-    id: 'fabric.linking.rovo_prompt_button_key_highlights.non-final',
-    defaultMessage: 'Key highlights',
-    description: 'The name of the action to send a key highlights prompt message to Rovo Chat in relation to current Smart Link'
-  },
-  rovo_prompt_message_key_highlights: {
-    id: 'fabric.linking.rovo_prompt_message_key_highlights.non-final',
-    defaultMessage: "<p>Based on <a>{url}</a> and the page or ticket I'm currently viewing, highlight the parts of the linked content that are most relevant to this work. Explain briefly why each part is relevant.</p>",
-    description: 'The prompt message to send to Rovo Chat. {url} refers to Smart Link that the user triggers this action from. (Please make sure all html tags remain the same.)'
-  },
   rovo_prompt_button_ask_rovo_anything: {
     id: 'fabric.linking.rovo_prompt_button_ask_rovo.non-final',
     defaultMessage: 'Ask Rovo',

package/dist/es2019/ssr.js

@@ -3,13 +3,15 @@ import { ErrorBoundary } from 'react-error-boundary';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { context } from './utils/analytics/analytics';
-import { CardWithUrlContent } from './view/CardWithUrl/component';
+import CardErrorBoundary from './view/CardWithUrl/card-error-boundary';
+import { CardWithUrl, CardWithUrlContent } from './view/CardWithUrl/component';
 import { LoadingCardLink } from './view/CardWithUrl/component-lazy/LoadingCardLink';
 // SSR friendly version of smart-card
 // simplifies the logic around rendering and loading placeholders and
 // only contains whats necessary to render the card on SSR mode
-export const CardSSR = props => {
+const CardSSROld = props => {
   // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
   const [id] = useState(() => {
     var _props$id;
@@ -34,4 +36,28 @@ export const CardSSR = props => {
   }, /*#__PURE__*/React.createElement(Component, {
     className: "loader-wrapper"
   }, /*#__PURE__*/React.createElement(CardWithUrlContent, cardProps))));
+};
+
+// SSR friendly version of smart-card
+// simplifies the logic around rendering and loading placeholders and
+// only contains whats necessary to render the card on SSR mode
+const CardSSRNew = props => {
+  // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
+  const [id] = useState(() => {
+    var _props$id2;
+    return (_props$id2 = props.id) !== null && _props$id2 !== void 0 ? _props$id2 : uuid();
+  });
+  const propsWithId = {
+    ...props,
+    id
+  };
+  return /*#__PURE__*/React.createElement(AnalyticsContext, {
+    data: context
+  }, /*#__PURE__*/React.createElement(CardErrorBoundary, propsWithId, /*#__PURE__*/React.createElement(CardWithUrl, propsWithId)));
+};
+export const CardSSR = props => {
+  if (fg('platform_sl_event_ui_seen')) {
+    return /*#__PURE__*/React.createElement(CardSSRNew, props);
+  }
+  return /*#__PURE__*/React.createElement(CardSSROld, props);
 };

package/dist/es2019/state/hooks/use-intersection-observer/index.js

@@ -0,0 +1,41 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+// This property enables the intersection observer to be run once the
+// HTML element being observed is within `X` px of the target container it is
+// being compared to. Since the default container is the `document`, we set this
+// up to check once a Smart Link is within `X` px from the bottom of the viewport.
+const ROOT_MARGIN_VERTICAL = '360px';
+const useIntersectionObserver = ({
+  onIntersecting: onIntersectingCallback,
+  onIntersection: onIntersectionCallback
+}) => {
+  const ref = useRef(null);
+  const onIntersectingCallbackRef = useRef(onIntersectingCallback);
+  const onIntersectionCallbackRef = useRef(onIntersectionCallback);
+  useEffect(() => {
+    onIntersectingCallbackRef.current = onIntersectingCallback;
+    onIntersectionCallbackRef.current = onIntersectionCallback;
+  }, [onIntersectingCallback, onIntersectionCallback]);
+  const onIntersection = useCallback((entries, observer) => {
+    var _onIntersectionCallba;
+    const isIntersecting = entries.some(entry => entry.isIntersecting);
+    (_onIntersectionCallba = onIntersectionCallbackRef.current) === null || _onIntersectionCallba === void 0 ? void 0 : _onIntersectionCallba.call(onIntersectionCallbackRef, isIntersecting);
+    if (isIntersecting) {
+      var _onIntersectingCallba;
+      (_onIntersectingCallba = onIntersectingCallbackRef.current) === null || _onIntersectingCallba === void 0 ? void 0 : _onIntersectingCallba.call(onIntersectingCallbackRef);
+      observer.disconnect();
+    }
+  }, []);
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    const intersectionObserver = new IntersectionObserver(onIntersection, {
+      rootMargin: `${ROOT_MARGIN_VERTICAL} 0px ${ROOT_MARGIN_VERTICAL} 0px`
+    });
+    intersectionObserver.observe(ref.current);
+    return () => intersectionObserver.disconnect();
+  }, [ref, onIntersection]);
+  return ref;
+};
+export default useIntersectionObserver;

package/dist/es2019/view/CardWithUrl/card-error-boundary/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { LoadingCardLink } from '../component-lazy/LoadingCardLink';
+const CardErrorBoundary = ({
+  children,
+  ...props
+}) => {
+  // TODO: NAVX-4682: Add feature parity to CardWithURLRenderer
+  const ErrorFallbackComponent = props.fallbackComponent;
+  const errorBoundaryFallbackComponent = () => {
+    if (ErrorFallbackComponent) {
+      return /*#__PURE__*/React.createElement(ErrorFallbackComponent, null);
+    }
+    return /*#__PURE__*/React.createElement(LoadingCardLink, props);
+  };
+  return /*#__PURE__*/React.createElement(ErrorBoundary, {
+    FallbackComponent: errorBoundaryFallbackComponent
+  }, children);
+};
+export default CardErrorBoundary;

package/dist/es2019/view/CardWithUrl/card-intersection-observer/index.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useState } from 'react';
+import useIntersectionObserver from '../../../state/hooks/use-intersection-observer';
+import { isIntersectionObserverSupported } from '../../../utils';
+import CardLoaderWrapper from '../card-loader-wrapper';
+const withCardIntersectionObserver = Component => props => {
+  // TODO: NAVX-4682: Add feature parity to LazyIntersectionObserverCard for no lazy loading
+  const [isIntersected, setIsIntersected] = useState(false);
+  const onIntersecting = useCallback(() => {
+    setIsIntersected(true);
+  }, []);
+  const ref = useIntersectionObserver({
+    onIntersecting
+  });
+  return /*#__PURE__*/React.createElement(CardLoaderWrapper, {
+    appearance: props.appearance,
+    ref: ref
+  }, /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+    isIntersected: isIntersected
+  })));
+};
+const withCardIntersectionObserverFallback = Component => props => /*#__PURE__*/React.createElement(CardLoaderWrapper, {
+  appearance: props.appearance
+}, /*#__PURE__*/React.createElement(Component, props));
+export default (Component => isIntersectionObserverSupported() ? withCardIntersectionObserver(Component) : withCardIntersectionObserverFallback(Component));

package/dist/es2019/view/CardWithUrl/card-loader-wrapper/index.js

@@ -0,0 +1,16 @@
+import React, { forwardRef } from 'react';
+const CardLoaderWrapper = /*#__PURE__*/forwardRef(({
+  appearance,
+  children
+}, ref) => {
+  const Component = appearance === 'inline' ? 'span' : 'div';
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    React.createElement(Component, {
+      className: "loader-wrapper",
+      ref: ref
+    }, children)
+  );
+});
+export default CardLoaderWrapper;