@atlaskit/smart-card 43.11.3 → 43.12.0

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

@@ -227,4 +227,212 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
         isSelected: isSelected
       });
   }
+});
+export const EmbedCardUpdated = /*#__PURE__*/React.forwardRef(({
+  url,
+  cardState,
+  handleAuthorize,
+  handleErrorRetry,
+  handleFrameClick,
+  isSelected,
+  frameStyle,
+  platform,
+  onResolve,
+  onError,
+  testId,
+  inheritDimensions,
+  onIframeDwell,
+  onIframeFocus,
+  onIframeMouseEnter,
+  onIframeMouseLeave,
+  iframeUrlType,
+  actionOptions,
+  renderers,
+  CompetitorPrompt,
+  hideIconLoadingSkeleton
+}, iframeRef) => {
+  var _details$meta4, _forbiddenViewProps$c3, _forbiddenViewProps$c4, _notFoundViewProps$co3, _notFoundViewProps$co4;
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
+  const {
+    status,
+    details
+  } = cardState;
+  const extensionKey = getExtensionKey(details);
+  const isProductIntegrationSupported = hasAuthScopeOverrides(details);
+  const {
+    shouldControlDataExport = false
+  } = useControlDataExportConfig();
+  switch (status) {
+    case 'pending':
+    case 'resolving':
+      return /*#__PURE__*/React.createElement(UFOLoadHoldWrapper, null, /*#__PURE__*/React.createElement(BlockCardResolvedView, {
+        url: url,
+        cardState: cardState,
+        onClick: handleFrameClick,
+        onError: onError,
+        onResolve: onResolve,
+        renderers: renderers,
+        actionOptions: actionOptions,
+        testId: testId ? `${testId}-resolving-view` : 'embed-card-resolving-view'
+      }));
+    case 'resolved':
+      const resolvedViewProps = extractEmbedProps(details, platform, iframeUrlType);
+      if (onResolve) {
+        var _resolvedViewProps$pr2, _details$meta3;
+        onResolve({
+          title: resolvedViewProps.title,
+          url,
+          aspectRatio: (_resolvedViewProps$pr2 = resolvedViewProps.preview) === null || _resolvedViewProps$pr2 === void 0 ? void 0 : _resolvedViewProps$pr2.aspectRatio,
+          ...(fg('expose-product-details-from-smart-card') && {
+            extensionKey: details === null || details === void 0 ? void 0 : (_details$meta3 = details.meta) === null || _details$meta3 === void 0 ? void 0 : _details$meta3.key
+          })
+        });
+      }
+      if (getIsDataExportEnabled(shouldControlDataExport, cardState.details)) {
+        const unauthViewProps = extractEmbedProps(details, platform);
+        return /*#__PURE__*/React.createElement(UnauthorizedView, {
+          context: unauthViewProps.context,
+          extensionKey: extensionKey,
+          frameStyle: frameStyle,
+          isProductIntegrationSupported: isProductIntegrationSupported,
+          inheritDimensions: inheritDimensions,
+          isSelected: isSelected,
+          onAuthorize: handleAuthorize,
+          onClick: handleFrameClick,
+          testId: testId,
+          url: unauthViewProps.link
+        });
+      }
+      if (resolvedViewProps.preview) {
+        return /*#__PURE__*/React.createElement(EmbedCardResolvedView, _extends({}, resolvedViewProps, {
+          isSelected: isSelected,
+          frameStyle: frameStyle,
+          inheritDimensions: inheritDimensions,
+          onClick: handleFrameClick,
+          ref: iframeRef,
+          onIframeDwell: onIframeDwell,
+          onIframeFocus: onIframeFocus,
+          onIframeMouseEnter: onIframeMouseEnter,
+          onIframeMouseLeave: onIframeMouseLeave,
+          testId: testId,
+          CompetitorPrompt: CompetitorPrompt,
+          hideIconLoadingSkeleton: hideIconLoadingSkeleton,
+          extensionKey: extensionKey
+        }));
+      } else {
+        if (platform === 'mobile') {
+          const resolvedInlineViewProps = extractInlineProps(details);
+          return /*#__PURE__*/React.createElement(InlineCardResolvedView, _extends({}, resolvedInlineViewProps, {
+            isSelected: isSelected,
+            testId: testId,
+            onClick: handleFrameClick
+          }));
+        }
+        return /*#__PURE__*/React.createElement(BlockCardResolvedView, {
+          url: url,
+          cardState: cardState,
+          onClick: handleFrameClick,
+          onError: onError,
+          onResolve: onResolve,
+          renderers: renderers,
+          actionOptions: actionOptions,
+          testId: testId
+        });
+      }
+    case 'unauthorized':
+      if (onError) {
+        onError({
+          url,
+          status
+        });
+      }
+      const unauthorisedViewProps = extractEmbedProps(details, platform);
+      return /*#__PURE__*/React.createElement(UnauthorizedView, {
+        context: unauthorisedViewProps.context,
+        extensionKey: extensionKey,
+        frameStyle: frameStyle,
+        isProductIntegrationSupported: isProductIntegrationSupported,
+        inheritDimensions: inheritDimensions,
+        isSelected: isSelected,
+        onAuthorize: handleAuthorize,
+        onClick: handleFrameClick,
+        testId: testId,
+        url: unauthorisedViewProps.link
+      });
+    case 'forbidden':
+      if (onError) {
+        onError({
+          url,
+          status
+        });
+      }
+      const forbiddenViewProps = extractEmbedProps(details, platform);
+      const cardMetadata = (_details$meta4 = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta4 !== void 0 ? _details$meta4 : getForbiddenJsonLd().meta;
+      if (forbiddenViewProps.preview) {
+        return /*#__PURE__*/React.createElement(EmbedCardResolvedView, _extends({}, forbiddenViewProps, {
+          title: forbiddenViewProps.link,
+          frameStyle: frameStyle,
+          isSelected: isSelected,
+          inheritDimensions: inheritDimensions,
+          onClick: handleFrameClick,
+          ref: iframeRef,
+          extensionKey: extensionKey
+        }));
+      }
+      const forbiddenAccessContext = extractRequestAccessContextImproved({
+        jsonLd: cardMetadata,
+        url,
+        product: (_forbiddenViewProps$c3 = (_forbiddenViewProps$c4 = forbiddenViewProps.context) === null || _forbiddenViewProps$c4 === void 0 ? void 0 : _forbiddenViewProps$c4.text) !== null && _forbiddenViewProps$c3 !== void 0 ? _forbiddenViewProps$c3 : '',
+        createAnalyticsEvent
+      });
+      return /*#__PURE__*/React.createElement(ForbiddenView, {
+        context: forbiddenViewProps.context,
+        frameStyle: frameStyle,
+        inheritDimensions: inheritDimensions,
+        isSelected: isSelected,
+        onAuthorize: handleAuthorize,
+        onClick: handleFrameClick,
+        accessContext: forbiddenAccessContext,
+        url: forbiddenViewProps.link
+      });
+    case 'not_found':
+      if (onError) {
+        onError({
+          url,
+          status
+        });
+      }
+      const notFoundViewProps = extractEmbedProps(details, platform);
+      const notFoundAccessContext = details !== null && details !== void 0 && details.meta ? extractRequestAccessContextImproved({
+        jsonLd: details === null || details === void 0 ? void 0 : details.meta,
+        url,
+        product: (_notFoundViewProps$co3 = (_notFoundViewProps$co4 = notFoundViewProps.context) === null || _notFoundViewProps$co4 === void 0 ? void 0 : _notFoundViewProps$co4.text) !== null && _notFoundViewProps$co3 !== void 0 ? _notFoundViewProps$co3 : '',
+        createAnalyticsEvent
+      }) : undefined;
+      return /*#__PURE__*/React.createElement(NotFoundView, {
+        context: notFoundViewProps.context,
+        frameStyle: frameStyle,
+        inheritDimensions: inheritDimensions,
+        isSelected: isSelected,
+        onClick: handleFrameClick,
+        accessContext: notFoundAccessContext,
+        url: notFoundViewProps.link
+      });
+    case 'fallback':
+    case 'errored':
+    default:
+      if (onError) {
+        onError({
+          url,
+          status
+        });
+      }
+      return /*#__PURE__*/React.createElement(EmbedCardErroredView, {
+        onRetry: handleErrorRetry,
+        inheritDimensions: inheritDimensions,
+        isSelected: isSelected
+      });
+  }
 });

package/dist/es2019/view/EmbedCard/views/ResolvedView.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import LinkGlyph from '@atlaskit/icon/core/migration/link';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
 import { useThemeObserver } from '@atlaskit/tokens';
 import { getPreviewUrlWithTheme, isProfileType } from '../../../utils';
 import { ExpandedFrame } from '../components/ExpandedFrame';
-import { Frame } from '../components/Frame';
+import { Frame, FrameUpdated } from '../components/Frame';
 import { ImageIcon } from '../components/ImageIcon';
 import { useEmbedResolvePostMessageListener } from '../useEmbedResolvePostMessageListener';
-export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
+const FrameComponent = componentWithFG('rovo_chat_embed_card_dwell_and_hover_metrics', FrameUpdated, Frame);
+const EmbedCardResolvedViewOld = /*#__PURE__*/React.forwardRef(({
   link,
   context,
   onClick,
@@ -75,4 +77,90 @@ export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
     title: text,
     extensionKey: extensionKey
   }));
-});
+});
+const EmbedCardResolvedViewUpdated = /*#__PURE__*/React.forwardRef(({
+  link,
+  context,
+  onClick,
+  isSelected,
+  frameStyle,
+  preview,
+  title,
+  isTrusted,
+  testId = 'embed-card-resolved-view',
+  inheritDimensions,
+  onIframeDwell,
+  onIframeFocus,
+  onIframeMouseEnter,
+  onIframeMouseLeave,
+  isSupportTheming,
+  type,
+  CompetitorPrompt,
+  hideIconLoadingSkeleton,
+  extensionKey
+}, embedIframeRef) => {
+  const iconFromContext = context === null || context === void 0 ? void 0 : context.icon;
+  const src = typeof iconFromContext === 'string' ? iconFromContext : undefined;
+  const text = title || (context === null || context === void 0 ? void 0 : context.text);
+  const linkGlyph = React.useMemo(() => /*#__PURE__*/React.createElement(LinkGlyph, {
+    label: "icon",
+    LEGACY_size: "small",
+    testId: "embed-card-fallback-icon",
+    color: "currentColor"
+  }), []);
+  let icon = React.useMemo(() => {
+    if ( /*#__PURE__*/React.isValidElement(iconFromContext)) {
+      return iconFromContext;
+    }
+    return /*#__PURE__*/React.createElement(ImageIcon, {
+      src: src,
+      default: linkGlyph,
+      appearance: isProfileType(type) ? 'round' : 'square',
+      hideLoadingSkeleton: hideIconLoadingSkeleton
+    });
+  }, [iconFromContext, src, linkGlyph, type, hideIconLoadingSkeleton]);
+  useEmbedResolvePostMessageListener({
+    url: link,
+    embedIframeRef
+  });
+  const themeState = useThemeObserver();
+  let previewUrl = preview === null || preview === void 0 ? void 0 : preview.src;
+  if (previewUrl && isSupportTheming) {
+    previewUrl = getPreviewUrlWithTheme(previewUrl, themeState);
+  }
+  const [isMouseOver, setMouseOver] = React.useState(false);
+  return /*#__PURE__*/React.createElement(ExpandedFrame, {
+    isSelected: isSelected,
+    frameStyle: frameStyle,
+    href: link,
+    testId: testId,
+    icon: icon,
+    text: text,
+    onClick: onClick,
+    inheritDimensions: inheritDimensions,
+    setOverflow: false,
+    CompetitorPrompt: CompetitorPrompt,
+    onContentMouseEnter: () => {
+      setMouseOver(true);
+      onIframeMouseEnter === null || onIframeMouseEnter === void 0 ? void 0 : onIframeMouseEnter();
+    },
+    onContentMouseLeave: () => {
+      setMouseOver(false);
+      onIframeMouseLeave === null || onIframeMouseLeave === void 0 ? void 0 : onIframeMouseLeave();
+    }
+  }, /*#__PURE__*/React.createElement(FrameComponent, {
+    url: previewUrl,
+    isTrusted: isTrusted,
+    testId: testId,
+    ref: embedIframeRef,
+    onIframeDwell: onIframeDwell,
+    onIframeFocus: onIframeFocus,
+    onIframeMouseEnter: onIframeMouseEnter,
+    onIframeMouseLeave: onIframeMouseLeave,
+    isMouseOver: isMouseOver,
+    title: text,
+    extensionKey: extensionKey
+  }));
+});
+const EmbedCardResolvedViewWithFG = componentWithFG('rovo_chat_embed_card_dwell_and_hover_metrics', EmbedCardResolvedViewUpdated, EmbedCardResolvedViewOld);
+export { EmbedCardResolvedViewWithFG as EmbedCardResolvedView };

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

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useMemo } from 'react';
 import { useAnalyticsEvents as useAnalyticsEventsNext } from '@atlaskit/analytics-next';
 import { extractSmartLinkEmbed } from '@atlaskit/link-extractors';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { useAnalyticsEvents } from '../../common/analytics/generated/use-analytics-events';
@@ -17,11 +18,12 @@ import { SmartLinkAnalyticsContext } from '../../utils/analytics/SmartLinkAnalyt
 import { isFlexibleUiCard } from '../../utils/flexible';
 import * as measure from '../../utils/performance';
 import { BlockCard } from '../BlockCard';
-import { EmbedCard } from '../EmbedCard';
+import { EmbedCard, EmbedCardUpdated } from '../EmbedCard';
 import FlexibleCard from '../FlexibleCard';
 import { InlineCard } from '../InlineCard';
 import { useFire3PWorkflowsClickEvent } from '../SmartLinkEvents/useSmartLinkEvents';
 var thirdPartyARIPrefix = 'ari:third-party';
+var EmbedCardComponent = componentWithFG('rovo_chat_embed_card_dwell_and_hover_metrics', EmbedCardUpdated, EmbedCard);
 function Component(_ref) {
   var id = _ref.id,
     url = _ref.url,
@@ -324,11 +326,333 @@ function Component(_ref) {
       });
   }
 }
+function ComponentUpdated(_ref2) {
+  var id = _ref2.id,
+    url = _ref2.url,
+    isSelected = _ref2.isSelected,
+    isHovered = _ref2.isHovered,
+    frameStyle = _ref2.frameStyle,
+    platform = _ref2.platform,
+    onClick = _ref2.onClick,
+    appearance = _ref2.appearance,
+    onResolve = _ref2.onResolve,
+    onError = _ref2.onError,
+    testId = _ref2.testId,
+    actionOptionsProp = _ref2.actionOptions,
+    inheritDimensions = _ref2.inheritDimensions,
+    embedIframeRef = _ref2.embedIframeRef,
+    embedIframeUrlType = _ref2.embedIframeUrlType,
+    inlinePreloaderStyle = _ref2.inlinePreloaderStyle,
+    ui = _ref2.ui,
+    children = _ref2.children,
+    showHoverPreview = _ref2.showHoverPreview,
+    hoverPreviewOptions = _ref2.hoverPreviewOptions,
+    removeTextHighlightingFromTitle = _ref2.removeTextHighlightingFromTitle,
+    resolvingPlaceholder = _ref2.resolvingPlaceholder,
+    truncateInline = _ref2.truncateInline,
+    CompetitorPrompt = _ref2.CompetitorPrompt,
+    hideIconLoadingSkeleton = _ref2.hideIconLoadingSkeleton,
+    disablePreviewPanel = _ref2.disablePreviewPanel,
+    placeholderData = _ref2.placeholderData;
+  var _useAnalyticsEventsNe2 = useAnalyticsEventsNext(),
+    createAnalyticsEvent = _useAnalyticsEventsNe2.createAnalyticsEvent;
+  var _useAnalyticsEvents2 = useAnalyticsEvents(),
+    fireEvent = _useAnalyticsEvents2.fireEvent;
+  var isFlexibleUi = useMemo(function () {
+    return isFlexibleUiCard(children, ui);
+  }, [children, ui]);
+
+  // Get state, actions for this card.
+  var _useSmartLink2 = useSmartLink(id, url),
+    state = _useSmartLink2.state,
+    actions = _useSmartLink2.actions,
+    config = _useSmartLink2.config,
+    renderers = _useSmartLink2.renderers,
+    error = _useSmartLink2.error,
+    isPreviewPanelAvailable = _useSmartLink2.isPreviewPanelAvailable,
+    openPreviewPanel = _useSmartLink2.openPreviewPanel;
+  var ari = getObjectAri(state.details);
+  var name = getObjectName(state.details);
+  var definitionId = getDefinitionId(state.details);
+  var extensionKey = getExtensionKey(state.details);
+  var resourceType = getResourceType(state.details);
+  var services = getServices(state.details);
+  var thirdPartyARI = getThirdPartyARI(state.details);
+  var firstPartyIdentifier = getFirstPartyIdentifier();
+  var actionOptions = combineActionOptions({
+    actionOptions: actionOptionsProp,
+    platform: platform
+  });
+  var fire3PClickEvent = fg('platform_smartlink_3pclick_analytics') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useFire3PWorkflowsClickEvent(firstPartyIdentifier, thirdPartyARI) : undefined;
+
+  // Setup UI handlers.
+  var handleClickWrapper = useCallback(function (event) {
+    var isModifierKeyPressed = isSpecialKey(event) || isSpecialClick(event);
+    fireEvent('ui.smartLink.clicked', {
+      id: id,
+      display: isFlexibleUi ? CardDisplay.Flexible : appearance,
+      definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+      isModifierKeyPressed: isModifierKeyPressed
+    });
+    if (fg('platform_smartlink_3pclick_analytics')) {
+      if (thirdPartyARI && thirdPartyARI.startsWith(thirdPartyARIPrefix)) {
+        var clickURL = getClickUrl(url, state.details);
+        if (clickURL === url && fire3PClickEvent) {
+          // For questions or concerns about this event,
+          // please reach out to the 3P Workflows Team via Slack in #help-3p-connector-workflow
+          fire3PClickEvent();
+        }
+      }
+    }
+    var isDisablePreviewPanel = disablePreviewPanel && editorExperiment('platform_editor_preview_panel_linking_exp', true, {
+      exposure: true
+    });
+
+    // If preview panel is available and the user clicked on the link,
+    // delegate the click to the preview panel handler
+    if (!isModifierKeyPressed && ari && name && openPreviewPanel && isPreviewPanelAvailable !== null && isPreviewPanelAvailable !== void 0 && isPreviewPanelAvailable({
+      ari: ari
+    }) && !isDisablePreviewPanel) {
+      var _extractSmartLinkEmbe2;
+      event.preventDefault();
+      event.stopPropagation();
+      openPreviewPanel({
+        url: url,
+        ari: ari,
+        name: name,
+        iconUrl: getObjectIconUrl(state.details),
+        panelData: {
+          embedUrl: expValEquals('platform_hover_card_preview_panel', 'cohort', 'test') ? (_extractSmartLinkEmbe2 = extractSmartLinkEmbed(state.details)) === null || _extractSmartLinkEmbe2 === void 0 ? void 0 : _extractSmartLinkEmbe2.src : undefined
+        }
+      });
+      fireLinkClickedEvent(createAnalyticsEvent)(event, {
+        attributes: {
+          clickOutcome: 'previewPanel'
+        }
+      });
+      return;
+    } else if (!onClick && !isFlexibleUi) {
+      var clickUrl = getClickUrl(url, state.details);
+
+      // Ctrl+left click on mac typically doesn't trigger onClick
+      // The event could have potentially had `e.preventDefault()` called on it by now
+      // event by smart card internally
+      // If it has been called then only then can `isSpecialEvent` be true.
+      var target = isSpecialEvent(event) ? '_blank' : '_self';
+      window.open(clickUrl, target);
+      fireLinkClickedEvent(createAnalyticsEvent)(event, {
+        attributes: {
+          clickOutcome: target === '_blank' ? 'clickThroughNewTabOrWindow' : 'clickThrough'
+        }
+      });
+    } else {
+      if (onClick) {
+        onClick(event);
+      }
+      fireLinkClickedEvent(createAnalyticsEvent)(event);
+    }
+  }, [fireEvent, id, isFlexibleUi, appearance, definitionId, onClick, url, state.details, ari, name, fire3PClickEvent, isPreviewPanelAvailable, openPreviewPanel, createAnalyticsEvent, thirdPartyARI, disablePreviewPanel]);
+  var handleAuthorize = useCallback(function () {
+    return actions.authorize(appearance);
+  }, [actions, appearance]);
+  var handleRetry = useCallback(function () {
+    actions.reload();
+  }, [actions]);
+  var handleInvoke = useCallback(function (opts) {
+    return actions.invoke(opts, appearance);
+  }, [actions, appearance]);
+
+  // NB: for each status change in a Smart Link, a performance mark is created.
+  // Measures are sent relative to the first mark, matching what a user sees.
+  useEffect(function () {
+    measure.mark(id, state.status);
+    if (state.status !== 'pending' && state.status !== 'resolving') {
+      var _state$error3, _state$error4;
+      measure.create(id, state.status);
+      if (state.status === 'resolved') {
+        var _measure$getMeasure$d2, _measure$getMeasure2;
+        fireEvent('operational.smartLink.resolved', {
+          definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+          duration: (_measure$getMeasure$d2 = (_measure$getMeasure2 = measure.getMeasure(id, state.status)) === null || _measure$getMeasure2 === void 0 ? void 0 : _measure$getMeasure2.duration) !== null && _measure$getMeasure$d2 !== void 0 ? _measure$getMeasure$d2 : null
+        });
+      } else if (((_state$error3 = state.error) === null || _state$error3 === void 0 ? void 0 : _state$error3.type) !== 'ResolveUnsupportedError' && ((_state$error4 = state.error) === null || _state$error4 === void 0 ? void 0 : _state$error4.type) !== 'UnsupportedError') {
+        fireEvent('operational.smartLink.unresolved', {
+          definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+          reason: state.status,
+          error: state.error === undefined ? null : {
+            name: state.error.name,
+            kind: state.error.kind,
+            type: state.error.type
+          }
+        });
+      }
+    }
+  }, [id, appearance, state.status, state.error, definitionId, extensionKey, resourceType, fireEvent]);
+
+  // NB: once the smart-card has rendered into an end state, we capture
+  // this as a successful render. These can be one of:
+  // - the resolved state: when metadata is shown;
+  // - the unresolved states: viz. forbidden, not_found, unauthorized, errored.
+  useEffect(function () {
+    if (isFinalState(state.status)) {
+      succeedUfoExperience('smart-link-rendered', id || 'NULL', {
+        extensionKey: extensionKey,
+        display: isFlexibleUi ? 'flexible' : appearance
+      });
+
+      // UFO will disregard this if authentication experience has not yet been started
+      succeedUfoExperience('smart-link-authenticated', id || 'NULL', {
+        display: isFlexibleUi ? 'flexible' : appearance
+      });
+      fireEvent('ui.smartLink.renderSuccess', {
+        display: isFlexibleUi ? 'flexible' : appearance
+      });
+    }
+  }, [appearance, extensionKey, fireEvent, id, isFlexibleUi, state.status]);
+  var onIframeDwell = useCallback(function (dwellTime, dwellPercentVisible) {
+    fireEvent('ui.smartLinkIframe.dwelled', {
+      id: id,
+      definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+      display: isFlexibleUi ? 'flexible' : appearance,
+      dwellPercentVisible: dwellPercentVisible,
+      dwellTime: dwellTime
+    });
+  }, [id, appearance, definitionId, isFlexibleUi, fireEvent]);
+  var onIframeFocus = useCallback(function () {
+    fireEvent('ui.smartLinkIframe.focused', {
+      id: id,
+      definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+      display: isFlexibleUi ? 'flexible' : appearance,
+      interactionType: 'focus'
+    });
+  }, [id, appearance, definitionId, isFlexibleUi, fireEvent]);
+  var onIframeMouseEnter = useCallback(function () {
+    fireEvent('ui.smartLinkIframe.focused', {
+      id: id,
+      definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+      display: isFlexibleUi ? 'flexible' : appearance,
+      interactionType: 'mouseenter'
+    });
+  }, [id, appearance, definitionId, isFlexibleUi, fireEvent]);
+  var onIframeMouseLeave = useCallback(function () {
+    fireEvent('ui.smartLinkIframe.focused', {
+      id: id,
+      definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
+      display: isFlexibleUi ? 'flexible' : appearance,
+      interactionType: 'mouseleave'
+    });
+  }, [id, appearance, definitionId, isFlexibleUi, fireEvent]);
+  if (isFlexibleUi) {
+    var cardState = state;
+    if (error) {
+      if ((error === null || error === void 0 ? void 0 : error.name) === 'APIError') {
+        cardState = {
+          status: 'errored'
+        };
+      } else {
+        throw error;
+      }
+    }
+    return /*#__PURE__*/React.createElement(FlexibleCard, {
+      id: id,
+      cardState: cardState,
+      placeholderData: fg('platform_initial_data_for_smart_cards') ? placeholderData : undefined,
+      onAuthorize: services.length && handleAuthorize || undefined,
+      onClick: handleClickWrapper,
+      origin: "smartLinkCard",
+      renderers: renderers,
+      ui: ui,
+      showHoverPreview: showHoverPreview,
+      hoverPreviewOptions: hoverPreviewOptions,
+      actionOptions: actionOptions,
+      url: url,
+      testId: testId,
+      onResolve: onResolve,
+      onError: onError
+    }, children);
+  }
+
+  // We have to keep this last to prevent hook order from being violated
+  if (error) {
+    throw error;
+  }
+  switch (appearance) {
+    case 'inline':
+      return /*#__PURE__*/React.createElement(InlineCard, {
+        id: id,
+        url: url,
+        renderers: renderers,
+        cardState: state,
+        handleAuthorize: services.length && handleAuthorize || undefined,
+        handleFrameClick: handleClickWrapper,
+        isSelected: isSelected,
+        isHovered: isHovered,
+        onResolve: onResolve,
+        onError: onError,
+        testId: testId,
+        inlinePreloaderStyle: inlinePreloaderStyle,
+        showHoverPreview: showHoverPreview,
+        hoverPreviewOptions: hoverPreviewOptions,
+        actionOptions: actionOptions,
+        removeTextHighlightingFromTitle: removeTextHighlightingFromTitle,
+        resolvingPlaceholder: resolvingPlaceholder,
+        truncateInline: truncateInline,
+        hideIconLoadingSkeleton: hideIconLoadingSkeleton
+      });
+    case 'block':
+      return /*#__PURE__*/React.createElement(BlockCard, {
+        id: id,
+        url: url,
+        renderers: renderers,
+        authFlow: config && config.authFlow,
+        cardState: state,
+        handleAuthorize: services.length && handleAuthorize || undefined,
+        handleFrameClick: handleClickWrapper,
+        isSelected: isSelected,
+        onResolve: onResolve,
+        onError: onError,
+        testId: testId,
+        actionOptions: actionOptions,
+        CompetitorPrompt: CompetitorPrompt,
+        hideIconLoadingSkeleton: hideIconLoadingSkeleton
+      });
+    case 'embed':
+      return /*#__PURE__*/React.createElement(EmbedCardComponent, {
+        id: id,
+        url: url,
+        renderers: renderers,
+        cardState: state,
+        iframeUrlType: embedIframeUrlType,
+        handleAuthorize: services.length && handleAuthorize || undefined,
+        handleErrorRetry: handleRetry,
+        handleFrameClick: handleClickWrapper,
+        handleInvoke: handleInvoke,
+        isSelected: isSelected,
+        frameStyle: frameStyle,
+        platform: platform,
+        onResolve: onResolve,
+        onError: onError,
+        testId: testId,
+        inheritDimensions: inheritDimensions,
+        actionOptions: actionOptions,
+        ref: embedIframeRef,
+        onIframeDwell: onIframeDwell,
+        onIframeFocus: onIframeFocus,
+        onIframeMouseEnter: onIframeMouseEnter,
+        onIframeMouseLeave: onIframeMouseLeave,
+        CompetitorPrompt: CompetitorPrompt,
+        hideIconLoadingSkeleton: hideIconLoadingSkeleton
+      });
+  }
+}
+var CardWithUrlContentComponent = componentWithFG('rovo_chat_embed_card_dwell_and_hover_metrics', ComponentUpdated, Component);
 export var CardWithUrlContent = function CardWithUrlContent(props) {
   var display = isFlexibleUiCard(props.children, props === null || props === void 0 ? void 0 : props.ui) ? CardDisplay.Flexible : props.appearance;
   return /*#__PURE__*/React.createElement(SmartLinkModalProvider, null, /*#__PURE__*/React.createElement(SmartLinkAnalyticsContext, {
     url: props.url,
     id: props.id,
     display: display
-  }, /*#__PURE__*/React.createElement(Component, props)));
+  }, /*#__PURE__*/React.createElement(CardWithUrlContentComponent, props)));
 };