@atlaskit/smart-card 44.3.1 → 44.3.3

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

@@ -1,7 +1,11 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
 import { usePrefetch } from '../../../state';
 import { startUfoExperience } from '../../../state/analytics/ufoExperiences';
+import useIntersectionObserver from '../../../state/hooks/use-intersection-observer';
 import { shouldSample } from '../../../utils/shouldSample';
+import CardLoaderWrapper from '../card-loader-wrapper';
 import { CardWithUrlContent } from '../component';
 import { LoadingCardLink } from './LoadingCardLink';
 
@@ -10,7 +14,7 @@ import { LoadingCardLink } from './LoadingCardLink';
 // 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';
-export function LazyIntersectionObserverCard(props) {
+function LazyIntersectionObserverCardOld(props) {
   const ref = useRef(null);
   const [isIntersecting, setIsIntersecting] = useState(false);
   const [shouldSendRenderedUFOEvent] = useState(shouldSample());
@@ -52,4 +56,37 @@ export function LazyIntersectionObserverCard(props) {
   return /*#__PURE__*/React.createElement(Component, {
     className: "loader-wrapper"
   }, content);
-}
+}
+const LazyIntersectionObserverCardNew = props => {
+  const [isIntersected, setIsIntersected] = useState(false);
+  const [shouldSendRenderedUFOEvent] = useState(shouldSample());
+  const {
+    appearance,
+    url,
+    id
+  } = props;
+  const prefetch = usePrefetch(url);
+  const ComponentObserver = appearance === 'inline' ? 'span' : 'div';
+  const onIntersection = useCallback(isIntersecting => {
+    if (isIntersecting) {
+      if (shouldSendRenderedUFOEvent) {
+        startUfoExperience('smart-link-rendered', id);
+      }
+      setIsIntersected(true);
+    } else {
+      prefetch();
+    }
+  }, [id, prefetch, shouldSendRenderedUFOEvent]);
+  const ref = useIntersectionObserver({
+    onIntersection
+  });
+  const content = isIntersected ? /*#__PURE__*/React.createElement(CardWithUrlContent, _extends({}, props, {
+    isIntersected: true
+  })) : /*#__PURE__*/React.createElement(ComponentObserver, {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(LoadingCardLink, props));
+  return /*#__PURE__*/React.createElement(CardLoaderWrapper, {
+    appearance: appearance
+  }, content);
+};
+export const LazyIntersectionObserverCard = componentWithFG('platform_sl_event_ui_seen', LazyIntersectionObserverCardNew, LazyIntersectionObserverCardOld);

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useAnalyticsEvents as useAnalyticsEventsNext } from '@atlaskit/analytics-next';
 import { extractSmartLinkEmbed } from '@atlaskit/link-extractors';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -22,6 +22,7 @@ import { EmbedCard, EmbedCardUpdated } from '../EmbedCard';
 import FlexibleCard from '../FlexibleCard';
 import { InlineCard } from '../InlineCard';
 import { useFire3PWorkflowsClickEvent } from '../SmartLinkEvents/useSmartLinkEvents';
+import withCardIntersectionObserver from './card-intersection-observer';
 const thirdPartyARIPrefix = 'ari:third-party';
 const EmbedCardComponent = componentWithFG('rovo_chat_embed_card_dwell_and_hover_metrics', EmbedCardUpdated, EmbedCard);
 function Component({
@@ -29,6 +30,7 @@ function Component({
   url,
   isSelected,
   isHovered,
+  isIntersected,
   frameStyle,
   platform,
   onClick,
@@ -59,6 +61,7 @@ function Component({
   const {
     fireEvent
   } = useAnalyticsEvents();
+  const hasFiredSeenRef = useRef(false);
   let isFlexibleUi = useMemo(() => isFlexibleUiCard(children, ui), [children, ui]);
 
   // Get state, actions for this card.
@@ -207,6 +210,19 @@ function Component({
       });
     }
   }, [appearance, extensionKey, fireEvent, id, isFlexibleUi, state.status]);
+
+  // Fire smartLink seen event once on a successful render card is in the viewport
+  useEffect(() => {
+    if (fg('platform_sl_event_ui_seen')) {
+      if (!isFinalState(state.status)) return;
+      if (isIntersected && !hasFiredSeenRef.current) {
+        fireEvent('ui.smartLink.seen', {
+          display: appearance
+        });
+        hasFiredSeenRef.current = true;
+      }
+    }
+  }, [state.status, isIntersected, fireEvent, appearance]);
   const onIframeDwell = useCallback((dwellTime, dwellPercentVisible) => {
     fireEvent('ui.smartLinkIframe.dwelled', {
       id,
@@ -329,6 +345,7 @@ function ComponentUpdated({
   url,
   isSelected,
   isHovered,
+  isIntersected,
   frameStyle,
   platform,
   onClick,
@@ -359,6 +376,7 @@ function ComponentUpdated({
   const {
     fireEvent
   } = useAnalyticsEvents();
+  const hasFiredSeenRef = useRef(false);
   let isFlexibleUi = useMemo(() => isFlexibleUiCard(children, ui), [children, ui]);
 
   // Get state, actions for this card.
@@ -507,6 +525,19 @@ function ComponentUpdated({
       });
     }
   }, [appearance, extensionKey, fireEvent, id, isFlexibleUi, state.status]);
+
+  // Fire smartLink seen event once on a successful render card is in the viewport
+  useEffect(() => {
+    if (fg('platform_sl_event_ui_seen')) {
+      if (!isFinalState(state.status)) return;
+      if (isIntersected && !hasFiredSeenRef.current) {
+        fireEvent('ui.smartLink.seen', {
+          display: appearance
+        });
+        hasFiredSeenRef.current = true;
+      }
+    }
+  }, [state.status, isIntersected, fireEvent, appearance]);
   const onIframeDwell = useCallback((dwellTime, dwellPercentVisible) => {
     fireEvent('ui.smartLinkIframe.dwelled', {
       id,
@@ -651,4 +682,5 @@ export const CardWithUrlContent = props => {
     id: props.id,
     display: display
   }, /*#__PURE__*/React.createElement(CardWithUrlContentComponent, props)));
-};
+};
+export const CardWithUrl = withCardIntersectionObserver(CardWithUrlContent);

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

@@ -135,8 +135,9 @@ const getPromptAction = (promptKey, intl, url = '', product) => {
         }
       };
     case RovoChatPromptKey.KEY_HIGHLIGHTS:
-      const label_key_highlights = intl.formatMessage(messages.rovo_prompt_button_key_highlights);
-      const html_key_highlights = intl.formatMessage(messages.rovo_prompt_message_key_highlights, {
+      const label_key_highlights = intl.formatMessage(messages.rovo_prompt_button_highlight_relevant_content);
+      const html_key_highlights = intl.formatMessage(messages.rovo_prompt_message_highlight_relevant_content, {
+        context: contextLong,
         url
       }, {
         ignoreTag: true

package/dist/esm/messages.js

@@ -951,16 +951,6 @@ export var 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/esm/ssr.js

@@ -7,13 +7,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 var 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 = useState(function () {
       var _props$id;
@@ -39,4 +41,29 @@ export var CardSSR = function 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
+var CardSSRNew = function CardSSRNew(props) {
+  // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
+  var _useState3 = useState(function () {
+      var _props$id2;
+      return (_props$id2 = props.id) !== null && _props$id2 !== void 0 ? _props$id2 : uuid();
+    }),
+    _useState4 = _slicedToArray(_useState3, 1),
+    id = _useState4[0];
+  var propsWithId = _objectSpread(_objectSpread({}, props), {}, {
+    id: id
+  });
+  return /*#__PURE__*/React.createElement(AnalyticsContext, {
+    data: context
+  }, /*#__PURE__*/React.createElement(CardErrorBoundary, propsWithId, /*#__PURE__*/React.createElement(CardWithUrl, propsWithId)));
+};
+export var CardSSR = function CardSSR(props) {
+  if (fg('platform_sl_event_ui_seen')) {
+    return /*#__PURE__*/React.createElement(CardSSRNew, props);
+  }
+  return /*#__PURE__*/React.createElement(CardSSROld, props);
 };

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

@@ -0,0 +1,44 @@
+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.
+var ROOT_MARGIN_VERTICAL = '360px';
+var useIntersectionObserver = function useIntersectionObserver(_ref) {
+  var onIntersectingCallback = _ref.onIntersecting,
+    onIntersectionCallback = _ref.onIntersection;
+  var ref = useRef(null);
+  var onIntersectingCallbackRef = useRef(onIntersectingCallback);
+  var onIntersectionCallbackRef = useRef(onIntersectionCallback);
+  useEffect(function () {
+    onIntersectingCallbackRef.current = onIntersectingCallback;
+    onIntersectionCallbackRef.current = onIntersectionCallback;
+  }, [onIntersectingCallback, onIntersectionCallback]);
+  var onIntersection = 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();
+    }
+  }, []);
+  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;
+};
+export default useIntersectionObserver;

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

@@ -0,0 +1,21 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"];
+import React from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { LoadingCardLink } from '../component-lazy/LoadingCardLink';
+var CardErrorBoundary = function CardErrorBoundary(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  // TODO: NAVX-4682: Add feature parity to CardWithURLRenderer
+  var ErrorFallbackComponent = props.fallbackComponent;
+  var errorBoundaryFallbackComponent = function 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/esm/view/CardWithUrl/card-intersection-observer/index.js

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

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

@@ -0,0 +1,15 @@
+import React, { forwardRef } from 'react';
+var CardLoaderWrapper = /*#__PURE__*/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.createElement(Component, {
+      className: "loader-wrapper",
+      ref: ref
+    }, children)
+  );
+});
+export default CardLoaderWrapper;

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

@@ -1,8 +1,12 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
 import { usePrefetch } from '../../../state';
 import { startUfoExperience } from '../../../state/analytics/ufoExperiences';
+import useIntersectionObserver from '../../../state/hooks/use-intersection-observer';
 import { shouldSample } from '../../../utils/shouldSample';
+import CardLoaderWrapper from '../card-loader-wrapper';
 import { CardWithUrlContent } from '../component';
 import { LoadingCardLink } from './LoadingCardLink';
 
@@ -11,7 +15,7 @@ import { LoadingCardLink } from './LoadingCardLink';
 // 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';
-export function LazyIntersectionObserverCard(props) {
+function LazyIntersectionObserverCardOld(props) {
   var ref = useRef(null);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -60,4 +64,40 @@ export function LazyIntersectionObserverCard(props) {
   return /*#__PURE__*/React.createElement(Component, {
     className: "loader-wrapper"
   }, content);
-}
+}
+var LazyIntersectionObserverCardNew = function LazyIntersectionObserverCardNew(props) {
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isIntersected = _useState6[0],
+    setIsIntersected = _useState6[1];
+  var _useState7 = useState(shouldSample()),
+    _useState8 = _slicedToArray(_useState7, 1),
+    shouldSendRenderedUFOEvent = _useState8[0];
+  var appearance = props.appearance,
+    url = props.url,
+    id = props.id;
+  var prefetch = usePrefetch(url);
+  var ComponentObserver = appearance === 'inline' ? 'span' : 'div';
+  var onIntersection = useCallback(function (isIntersecting) {
+    if (isIntersecting) {
+      if (shouldSendRenderedUFOEvent) {
+        startUfoExperience('smart-link-rendered', id);
+      }
+      setIsIntersected(true);
+    } else {
+      prefetch();
+    }
+  }, [id, prefetch, shouldSendRenderedUFOEvent]);
+  var ref = useIntersectionObserver({
+    onIntersection: onIntersection
+  });
+  var content = isIntersected ? /*#__PURE__*/React.createElement(CardWithUrlContent, _extends({}, props, {
+    isIntersected: true
+  })) : /*#__PURE__*/React.createElement(ComponentObserver, {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(LoadingCardLink, props));
+  return /*#__PURE__*/React.createElement(CardLoaderWrapper, {
+    appearance: appearance
+  }, content);
+};
+export var LazyIntersectionObserverCard = componentWithFG('platform_sl_event_ui_seen', LazyIntersectionObserverCardNew, LazyIntersectionObserverCardOld);

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useAnalyticsEvents as useAnalyticsEventsNext } from '@atlaskit/analytics-next';
 import { extractSmartLinkEmbed } from '@atlaskit/link-extractors';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -22,6 +22,7 @@ import { EmbedCard, EmbedCardUpdated } from '../EmbedCard';
 import FlexibleCard from '../FlexibleCard';
 import { InlineCard } from '../InlineCard';
 import { useFire3PWorkflowsClickEvent } from '../SmartLinkEvents/useSmartLinkEvents';
+import withCardIntersectionObserver from './card-intersection-observer';
 var thirdPartyARIPrefix = 'ari:third-party';
 var EmbedCardComponent = componentWithFG('rovo_chat_embed_card_dwell_and_hover_metrics', EmbedCardUpdated, EmbedCard);
 function Component(_ref) {
@@ -29,6 +30,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,
@@ -56,6 +58,7 @@ function Component(_ref) {
     createAnalyticsEvent = _useAnalyticsEventsNe.createAnalyticsEvent;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     fireEvent = _useAnalyticsEvents.fireEvent;
+  var hasFiredSeenRef = useRef(false);
   var isFlexibleUi = useMemo(function () {
     return isFlexibleUiCard(children, ui);
   }, [children, ui]);
@@ -209,6 +212,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
+  useEffect(function () {
+    if (fg('platform_sl_event_ui_seen')) {
+      if (!isFinalState(state.status)) return;
+      if (isIntersected && !hasFiredSeenRef.current) {
+        fireEvent('ui.smartLink.seen', {
+          display: appearance
+        });
+        hasFiredSeenRef.current = true;
+      }
+    }
+  }, [state.status, isIntersected, fireEvent, appearance]);
   var onIframeDwell = useCallback(function (dwellTime, dwellPercentVisible) {
     fireEvent('ui.smartLinkIframe.dwelled', {
       id: id,
@@ -331,6 +347,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,
@@ -358,6 +375,7 @@ function ComponentUpdated(_ref2) {
     createAnalyticsEvent = _useAnalyticsEventsNe2.createAnalyticsEvent;
   var _useAnalyticsEvents2 = useAnalyticsEvents(),
     fireEvent = _useAnalyticsEvents2.fireEvent;
+  var hasFiredSeenRef = useRef(false);
   var isFlexibleUi = useMemo(function () {
     return isFlexibleUiCard(children, ui);
   }, [children, ui]);
@@ -511,6 +529,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
+  useEffect(function () {
+    if (fg('platform_sl_event_ui_seen')) {
+      if (!isFinalState(state.status)) return;
+      if (isIntersected && !hasFiredSeenRef.current) {
+        fireEvent('ui.smartLink.seen', {
+          display: appearance
+        });
+        hasFiredSeenRef.current = true;
+      }
+    }
+  }, [state.status, isIntersected, fireEvent, appearance]);
   var onIframeDwell = useCallback(function (dwellTime, dwellPercentVisible) {
     fireEvent('ui.smartLinkIframe.dwelled', {
       id: id,
@@ -655,4 +686,5 @@ export var CardWithUrlContent = function CardWithUrlContent(props) {
     id: props.id,
     display: display
   }, /*#__PURE__*/React.createElement(CardWithUrlContentComponent, props)));
-};
+};
+export var CardWithUrl = withCardIntersectionObserver(CardWithUrlContent);

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

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

package/dist/types/common/analytics/generated/analytics.types.d.ts

@@ -3,7 +3,7 @@
  *
  * Generates Typescript types for analytics events from analytics.spec.yaml
  *
- * @codegen <<SignedSource::1c5f802d8b5609627e5ffbebf73bad6e>>
+ * @codegen <<SignedSource::4d978bf4946aee0ad737d8305df7a6a0>>
  * @codegenCommand yarn workspace @atlassian/analytics-tooling run analytics:codegen smart-card
  */
 export type PackageMetaDataContextType = {
@@ -263,6 +263,9 @@ export type SmartLinkRenderFailedAttributesType = {
     id: string | null;
 };
 export type ButtonClickedDismissAttributesType = {};
+export type SmartLinkSeenAttributesType = {
+    display: 'inline' | 'block' | 'embed' | 'flexible';
+};
 export type SmartLinkClickedSmartlinkClickAnalyticsWorkflowsAttributesType = {
     thirdPartyARI: string;
     eventName: string;
@@ -439,6 +442,9 @@ export type AnalyticsEventAttributes = {
     /**
      * fires an event that represents when a Smart Link renders unsuccessfully. */
     'ui.smartLink.renderFailed': SmartLinkRenderFailedAttributesType;
+    /**
+     * fires an event that represents when a rendered Smart Link is visible in the viewport for the first time */
+    'ui.smartLink.seen': SmartLinkSeenAttributesType;
     /**
      * fires an event that represents when a user clicks on a Smart Link to track analytics for the 3P Workflows team */
     'ui.smartLink.clicked.smartlinkClickAnalyticsWorkflows': SmartLinkClickedSmartlinkClickAnalyticsWorkflowsAttributesType;

package/dist/types/messages.d.ts

@@ -1,6 +1,6 @@
 import { type MessageDescriptor } from 'react-intl';
 export type RequestAccessMessageKey = 'click_to_join' | 'click_to_join_description' | 'forbidden_description' | 'request_access' | 'request_access_description' | 'request_access_pending' | 'request_access_pending_title' | 'request_access_pending_description' | 'request_denied_description' | 'default_no_access_title' | 'direct_access_title' | 'direct_access_description' | 'direct_access' | 'access_exists_description' | 'not_found_description' | 'not_found_title';
-export type RovoChatActionMessageKey = 'rovo_prompt_context_generic' | 'rovo_prompt_context_generic_plural' | 'rovo_prompt_context_confluence_page' | 'rovo_prompt_context_confluence_page_short' | 'rovo_prompt_context_jira_work_item' | 'rovo_prompt_context_jira_work_item_short' | 'rovo_prompt_button_recommend_other_sources' | 'rovo_prompt_message_recommend_other_sources' | 'rovo_prompt_button_show_other_mentions' | 'rovo_prompt_message_show_other_mentions' | 'rovo_prompt_button_suggest_improvement' | 'rovo_prompt_message_suggest_improvement' | 'rovo_prompt_message_summarize' | 'rovo_prompt_button_key_highlights' | 'rovo_prompt_message_key_highlights' | 'rovo_prompt_button_ask_rovo_anything' | 'rovo_prompt_message_ask_rovo_anything' | 'rovo_prompt_button_highlight_relevant_content' | 'rovo_prompt_message_highlight_relevant_content' | 'rovo_prompt_button_identify_key_trends' | 'rovo_prompt_message_identify_key_trends' | 'rovo_prompt_button_identify_key_points' | 'rovo_prompt_message_identify_key_points' | 'rovo_prompt_button_find_open_questions' | 'rovo_prompt_message_find_open_questions';
+export type RovoChatActionMessageKey = 'rovo_prompt_context_generic' | 'rovo_prompt_context_generic_plural' | 'rovo_prompt_context_confluence_page' | 'rovo_prompt_context_confluence_page_short' | 'rovo_prompt_context_jira_work_item' | 'rovo_prompt_context_jira_work_item_short' | 'rovo_prompt_button_recommend_other_sources' | 'rovo_prompt_message_recommend_other_sources' | 'rovo_prompt_button_show_other_mentions' | 'rovo_prompt_message_show_other_mentions' | 'rovo_prompt_button_suggest_improvement' | 'rovo_prompt_message_suggest_improvement' | 'rovo_prompt_message_summarize' | 'rovo_prompt_button_ask_rovo_anything' | 'rovo_prompt_message_ask_rovo_anything' | 'rovo_prompt_button_highlight_relevant_content' | 'rovo_prompt_message_highlight_relevant_content' | 'rovo_prompt_button_identify_key_trends' | 'rovo_prompt_message_identify_key_trends' | 'rovo_prompt_button_identify_key_points' | 'rovo_prompt_message_identify_key_points' | 'rovo_prompt_button_find_open_questions' | 'rovo_prompt_message_find_open_questions';
 export type MessageKey = 'assigned_to' | 'ai_summarize' | 'change_status' | 'ai_summarized' | 'ai_summarized_abbreviation' | 'ai_summarized_info' | 'ai_summarized_info_short' | 'ai_summarizing' | 'ai_summary_error_generic' | 'ai_summary_error_acceptable_use_violation' | 'ai_summary_error_hipaa_content_detected' | 'ai_summary_error_exceeding_context_length_error' | 'ai_summary_action' | 'ai_summary_action_description' | 'automation_action_title' | 'automation_action_tooltip' | 'automation_action_icon_label' | 'automation_action_confluence_page_modal_title' | 'automation_action_confluence_page_modal_description' | 'copy_summary_action' | 'copy_summary_action_description' | 'copied_summary_action_description' | 'beta' | 'cannot_find_link' | 'compass_applied_components_count' | 'connect_link_account_card' | 'connect_link_account_card_name' | 'connect_link_account_card_description' | 'connect_unauthorised_account_action' | 'connect_unauthorised_account_description' | 'connect_unauthorised_account_description_no_provider' | 'continue' | 'copy_url_to_clipboard' | 'copied_url_to_clipboard' | 'could_not_load_link' | 'download' | 'download_description' | 'download_file' | 'follow' | 'follow_project_description' | 'follow_project_descriptionGalaxia' | 'follow_project' | 'follow_goal' | 'follow_goal_description' | 'follow_project_error' | 'follow_project_errorGalaxia' | 'follow_goal_error' | 'go_back' | 'invalid_permissions' | 'invalid_permissions_description' | 'join_to_view' | 'connect_link_account' | 'created_by' | 'created_on_relative' | 'created_on_absolute' | 'check_this_link' | 'delete' | 'edit' | 'learn_more_about_smart_links' | 'learn_more_about_connecting_account' | 'loading' | 'link_safety_warning_message' | 'modified_by' | 'modified_on_relative' | 'modified_on_absolute' | 'more_actions' | 'not_found_title' | 'not_found_description' | 'open_issue_in_jira' | 'open_link_in_a_new_tab' | 'owned_by' | 'owned_by_override' | 'preview_description' | 'preview_improved' | 'preview_modal' | 'preview_panel' | 'preview_close' | 'preview_max_size' | 'preview_min_size' | 'priority_blocker' | 'priority_critical' | 'priority_high' | 'priority_highest' | 'priority_low' | 'priority_lowest' | 'priority_major' | 'priority_medium' | 'priority_minor' | 'priority_trivial' | 'priority_undefined' | 'forbidden_access' | 'pending_request' | 'read_time' | 'restricted_link' | 'request_access_to_view' | 'request_denied' | 'sent_on_relative' | 'sent_on_absolute' | 'status_change_load_error' | 'status_change_permission_error' | 'status_change_update_error' | 'try_again' | 'try_another_account' | 'unauthorised_account_description' | 'unauthorised_account_description_no_provider' | 'unauthorised_account_name' | 'unauthorised_account_name_no_provider' | 'rovo_actions_explore' | 'unassigned' | 'unfollow' | 'unfollow_project_description' | 'unfollow_project_descriptionGalaxia' | 'unfollow_project' | 'unfollow_project_error' | 'unfollow_project_errorGalaxia' | 'unfollow_goal' | 'unfollow_goal_description' | 'unfollow_goal_error' | 'user_attributes' | 'view' | 'viewIn' | 'viewOriginal' | 'actions' | 'add_account' | 'cancel' | 'close' | 'connect_to' | 'connect_account_description' | 'retry' | 'save' | 'unlink_account' | RequestAccessMessageKey | 'related' | 'generic_error_message' | 'related_links_modal_error_title' | 'related_links_modal_error_description' | 'related_links_modal_unavailable_title' | 'related_links_modal_unavailable_description' | 'related_links_modal_title' | 'related_links_view_related_urls' | 'related_links_view_related_links' | 'related_links_found_in' | 'related_links_includes_links_to' | 'related_links_not_found' | 'join_to_viewIssueTermRefresh' | 'open_issue_in_jiraIssueTermRefresh' | 'request_access_to_viewIssueTermRefresh' | 'team_members_count' | 'status_change_permission_errorIssueTermRefresh' | 'connect_unauthorised_account_description_appify' | 'connect_unauthorised_account_description_no_provider_appify' | 'learn_more_about_connecting_account_experiment_shorter' | 'learn_more_about_connecting_account_appify' | 'rovo_summary_loading' | 'ai_disclaimer' | 'rovo_unauthorised_title' | 'rovo_unauthorised_title_no_provider' | 'rovo_unauthorised_feature_clear_link_names' | 'rovo_unauthorised_feature_understand_linked_docs' | 'rovo_unauthorised_feature_go_deeper_smart_suggestions' | 'rovo_unauthorised_connect_account' | 'rovo_unauthorised_not_now' | RovoChatActionMessageKey;
 type Messages = {
     [K in MessageKey]: MessageDescriptor;

package/dist/types/state/hooks/use-intersection-observer/index.d.ts

@@ -0,0 +1,6 @@
+type UseIntersectionObserverProps = {
+    onIntersecting?: () => void;
+    onIntersection?: (isIntersecting: boolean) => void;
+};
+declare const useIntersectionObserver: ({ onIntersecting: onIntersectingCallback, onIntersection: onIntersectionCallback, }: UseIntersectionObserverProps) => import("react").MutableRefObject<HTMLDivElement | null>;
+export default useIntersectionObserver;

package/dist/types/view/CardWithUrl/card-error-boundary/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { CardProps } from '../../Card';
+type CardErrorBoundaryProps = CardProps & Required<Pick<CardProps, 'id' | 'url'>>;
+declare const CardErrorBoundary: ({ children, ...props }: React.PropsWithChildren<CardErrorBoundaryProps>) => React.JSX.Element;
+export default CardErrorBoundary;

package/dist/types/view/CardWithUrl/card-intersection-observer/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { CardProps } from '../../Card';
+type WithCardIntersectionObserverProps = {
+    appearance: CardProps['appearance'];
+};
+declare const _default: <T extends WithCardIntersectionObserverProps>(Component: React.ComponentType<T>) => (props: T) => React.JSX.Element;
+export default _default;

package/dist/types/view/CardWithUrl/card-loader-wrapper/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { CardProps } from '../../Card';
+type CardLoaderWrapperProps = Pick<CardProps, 'appearance'>;
+declare const CardLoaderWrapper: React.ForwardRefExoticComponent<CardLoaderWrapperProps & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default CardLoaderWrapper;

package/dist/types/view/CardWithUrl/component-lazy/LazyIntersectionObserverCard.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { type CardWithUrlContentProps } from '../types';
-export declare function LazyIntersectionObserverCard(props: CardWithUrlContentProps): React.JSX.Element;
+export declare const LazyIntersectionObserverCard: React.FC<CardWithUrlContentProps>;

package/dist/types/view/CardWithUrl/component.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
 import { type CardWithUrlContentProps } from './types';
 export declare const CardWithUrlContent: (props: CardWithUrlContentProps) => React.JSX.Element;
+export declare const CardWithUrl: (props: CardWithUrlContentProps) => React.JSX.Element;

package/dist/types/view/CardWithUrl/types.d.ts

@@ -24,6 +24,7 @@ export type CardWithUrlContentProps = {
     inheritDimensions?: boolean;
     inlinePreloaderStyle?: InlinePreloaderStyle;
     isHovered?: boolean;
+    isIntersected?: boolean;
     isSelected?: boolean;
     onClick?: EventHandler<MouseEvent | KeyboardEvent>;
     onError?: OnErrorCallback;