@atlaskit/smart-card 43.31.6 → 43.31.7

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

@@ -8,11 +8,13 @@ import { cx } from '@atlaskit/css';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Inline, Pressable } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { getPrimitivesInlineSpaceBySize } from '../../../utils';
 import ActionIcon from '../action-icon';
 const styles = {
   button: "_bfhksm61 _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66 _1bsb1osq _1ah31i6y _irr31dpa _1di6fcek",
-  content: "_11c8wadc _syazi7uo"
+  content: "_11c8wadc _syazi7uo",
+  spinner: "_1bsb1tcg _4t3i1tcg _1e0c116y _4cvr1h6o _1bah1h6o"
 };
 const ActionButton = ({
   content,
@@ -34,7 +36,12 @@ const ActionButton = ({
     }
   }, [isDisabled, isLoading, onClickCallback]);
   const icon = iconOption && isLoading ? /*#__PURE__*/React.createElement(ActionIcon, {
-    icon: /*#__PURE__*/React.createElement(Spinner, {
+    icon: expValEqualsNoExposure('platform_sl_3p_auth_rovo_action', 'isEnabled', true) && fg('platform_sl_3p_auth_rovo_action_kill_switch') ? /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.spinner
+    }, /*#__PURE__*/React.createElement(Spinner, {
+      size: 16,
+      testId: `${testId}-loading`
+    })) : /*#__PURE__*/React.createElement(Spinner, {
       testId: `${testId}-loading`
     })
   }) : iconOption;

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

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import AiIcon from '@atlaskit/icon/core/atlassian-intelligence';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useAnalyticsEvents } from '../../../../../common/analytics/generated/use-analytics-events';
 import { messages } from '../../../../../messages';
 import Action from '../action';
@@ -35,11 +36,13 @@ export function AISummariseAction({
   }, [fireEvent, onClickCallback, onCompleted, summariseUrl]);
   return /*#__PURE__*/React.createElement(Action, _extends({
     content: /*#__PURE__*/React.createElement(FormattedMessage, messages.ai_summary_action),
-    icon: /*#__PURE__*/React.createElement(AiIcon, {
+    icon: /*#__PURE__*/React.createElement(AiIcon, _extends({
       spacing: "spacious",
       color: "currentColor",
       label: "Summarise with AI"
-    }),
+    }, fg('platform_sl_3p_auth_rovo_action_kill_switch') ? {
+      size: props.iconSize
+    } : {})),
     onClick: handleActionClick,
     testId: `${testId}-summarise-action`,
     isLoading: status === 'loading',

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

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect } from 'react';
 import { di } from 'react-magnetic-di';
+import { fg } from '@atlaskit/platform-feature-flags';
 import useAISummaryAction from '../../../../../state/hooks/use-ai-summary-action';
 import { AISummariseAction } from './ai-summarise-action';
-import { CopySummaryAction } from './copy-summary-action';
+import { CopySummaryAction, CopySummaryActionNew } from './copy-summary-action';
 export const AISummaryActionComponent = props => {
   const {
     url,
@@ -20,7 +21,10 @@ export const AISummaryActionComponent = props => {
   useEffect(() => {
     onLoadingChange === null || onLoadingChange === void 0 ? void 0 : onLoadingChange(status === 'loading');
   }, [onLoadingChange, status]);
-  return status === 'done' ? /*#__PURE__*/React.createElement(CopySummaryAction, _extends({}, props, {
+  return status === 'done' ? fg('platform_sl_3p_auth_rovo_action_kill_switch') ? /*#__PURE__*/React.createElement(CopySummaryActionNew, _extends({}, props, {
+    summary: content,
+    testId: testId
+  })) : /*#__PURE__*/React.createElement(CopySummaryAction, _extends({}, props, {
     testId: testId,
     content: content
   })) : /*#__PURE__*/React.createElement(AISummariseAction, _extends({}, props, {

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

@@ -34,4 +34,35 @@ export function CopySummaryAction({
     tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, tooltipMessage),
     tooltipOnHide: () => setTooltipMessage(messages.copy_summary_action_description)
   }, props));
+}
+export function CopySummaryActionNew({
+  url,
+  onClick: onClickCallback,
+  summary = '',
+  testId,
+  ...props
+}) {
+  const {
+    fireEvent
+  } = useAnalyticsEvents();
+  const [tooltipMessage, setTooltipMessage] = useState(messages.copy_summary_action_description);
+  const handleCopySummaryClick = useCallback(async () => {
+    fireEvent('ui.button.clicked.copySummary', {});
+    await navigator.clipboard.writeText(summary);
+    setTooltipMessage(messages.copied_summary_action_description);
+    onClickCallback === null || onClickCallback === void 0 ? void 0 : onClickCallback();
+  }, [fireEvent, onClickCallback, summary]);
+  return /*#__PURE__*/React.createElement(Action, _extends({
+    content: /*#__PURE__*/React.createElement(FormattedMessage, messages.copy_summary_action),
+    icon: /*#__PURE__*/React.createElement(CopyIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: "Copy Summary",
+      size: props.iconSize
+    }),
+    onClick: handleCopySummaryClick,
+    testId: `${testId}-copy-summary-action`,
+    tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, tooltipMessage),
+    tooltipOnHide: () => setTooltipMessage(messages.copy_summary_action_description)
+  }, props));
 }

package/dist/es2019/view/FlexibleCard/components/blocks/action-block/index.js

@@ -4,11 +4,9 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useMemo, useState } from 'react';
 import { di } from 'react-magnetic-di';
-import { FadeIn, StaggeredEntrance } from '@atlaskit/motion';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { InternalActionName, SmartLinkSize } from '../../../../../constants';
 import { useFlexibleUiContext, useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-context';
-import useAISummaryAction from '../../../../../state/hooks/use-ai-summary-action';
 import * as Actions from '../../actions';
 import { ActionFooter } from './action-footer';
 const ignoreContainerPaddingStyles = null;
@@ -54,7 +52,6 @@ const ActionBlock = ({
   var _context$actions;
   const context = useFlexibleUiContext();
   const ui = useFlexibleUiOptionContext();
-  const url = context === null || context === void 0 ? void 0 : context.url;
   const isRovoChatActionAvailable = is3PAuthRovoActionsExperimentOn && fg('platform_sl_3p_auth_rovo_action_kill_switch') ? (context === null || context === void 0 ? void 0 : (_context$actions = context.actions) === null || _context$actions === void 0 ? void 0 : _context$actions[InternalActionName.RovoChatAction]) !== undefined : undefined;
   const [message, setMessage] = useState();
   const [isLoading, setIsLoading] = useState(false);
@@ -75,17 +72,11 @@ const ActionBlock = ({
     }
     const arr = fg('platform_sl_3p_auth_rovo_action_kill_switch') ? isRovoChatActionAvailable ? [InternalActionName.RovoChatAction] : Object.keys(context.actions).filter(name => name !== InternalActionName.RovoChatAction) : Object.keys(context.actions);
     arr.sort(sort);
-    const renderAction = (name, motionStyle) => {
+    const renderAction = name => {
       const Action = name in Actions ? Actions[name] : undefined;
       if (!Action) {
         return null;
       }
-      const style = padding || motionStyle ? {
-        ...(motionStyle || {}),
-        ...(padding && {
-          paddingInline: padding
-        })
-      } : undefined;
       return /*#__PURE__*/React.createElement(Action, {
         as: "stack-item",
         spaceInline: spaceInline,
@@ -94,35 +85,16 @@ const ActionBlock = ({
         onError: onError,
         onLoadingChange: onLoadingChange,
         size: size || (ui === null || ui === void 0 ? void 0 : ui.size)
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/design-system/no-unsafe-design-token-usage
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
         ,
-        style: style,
+        style: padding && {
+          paddingInline: padding
+        },
         hideTooltip: isLoading
       });
     };
-    return isRovoChatActionAvailable ? /*#__PURE__*/React.createElement(StaggeredEntrance, {
-      columns: 1
-    }, arr.map((name, index) => /*#__PURE__*/React.createElement(FadeIn, {
-      duration: 'large',
-      key: index
-    }, motion => renderAction(name, motion.style)))) : arr.map(name => renderAction(name));
+    return arr.map(name => renderAction(name));
   }, [context === null || context === void 0 ? void 0 : context.actions, isRovoChatActionAvailable, spaceInline, onError, onLoadingChange, size, ui === null || ui === void 0 ? void 0 : ui.size, padding, isLoading, onClick]);
-  const aiSummaryConfig = fg('platform_sl_3p_auth_rovo_action_kill_switch') ?
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  useAISummaryAction(url !== null && url !== void 0 ? url : '') : undefined;
-  if (fg('platform_sl_3p_auth_rovo_action_kill_switch')) {
-    const shouldShowActions = !isRovoChatActionAvailable || isRovoChatActionAvailable && ((aiSummaryConfig === null || aiSummaryConfig === void 0 ? void 0 : aiSummaryConfig.state.status) === 'done' || (aiSummaryConfig === null || aiSummaryConfig === void 0 ? void 0 : aiSummaryConfig.state.status) === 'error');
-    return actions && shouldShowActions ? /*#__PURE__*/React.createElement("div", {
-      ref: blockRef,
-      "data-testid": testId
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-      ,
-      className: ax(["_1e0c1txw _2lx21bp4 _vchhusvi _16jlkb7n _1bsb129b _18u01ivi _2hwxc10g", className])
-    }, actions, /*#__PURE__*/React.createElement(ActionFooter, {
-      message: message,
-      testId: testId
-    })) : null;
-  }
   return actions ? /*#__PURE__*/React.createElement("div", {
     ref: blockRef,
     "data-testid": testId

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

@@ -11,10 +11,11 @@ import AISummaryBlockResolvedView, { RovoSummaryBlockResolvedView } from './reso
  * @see Block
  */
 const AISummaryBlock = ({
+  is3PAuthRovoActionsExperimentOn,
   testId = 'smart-ai-summary-block',
   ...props
 }) => {
-  var _context$actions, _props$size, _cardContext$ui;
+  var _context$actions, _props$size2, _cardContext$ui2;
   const cardContext = useFlexibleCardContext();
   const context = useFlexibleUiContext();
   const actionData = context === null || context === void 0 ? void 0 : (_context$actions = context.actions) === null || _context$actions === void 0 ? void 0 : _context$actions[InternalActionName.AISummaryAction];
@@ -24,37 +25,18 @@ const AISummaryBlock = ({
   if (!(actionData !== null && actionData !== void 0 && actionData.url)) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(AISummaryBlockResolvedView, _extends({}, props, {
-    size: (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$ui = cardContext.ui) === null || _cardContext$ui === void 0 ? void 0 : _cardContext$ui.size,
-    testId: testId,
-    url: actionData.url
-  }));
-};
-
-/**
- * Represents an AISummaryBlock, designed to summarising link resource
- * content using AI.
- * @public
- * @param {RovoSummaryBlockProps} RovoSummaryBlock
- * @see Block
- */
-export const RovoSummaryBlock = ({
-  testId = 'smart-ai-summary-block',
-  url,
-  ...props
-}) => {
-  var _props$size2, _cardContext$ui2;
-  const cardContext = useFlexibleCardContext();
-  if ((cardContext === null || cardContext === void 0 ? void 0 : cardContext.status) !== SmartLinkStatus.Resolved) {
-    return null;
-  }
-  if (!url) {
-    return null;
+  if (is3PAuthRovoActionsExperimentOn) {
+    var _props$size, _cardContext$ui;
+    return /*#__PURE__*/React.createElement(RovoSummaryBlockResolvedView, _extends({}, props, {
+      size: (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$ui = cardContext.ui) === null || _cardContext$ui === void 0 ? void 0 : _cardContext$ui.size,
+      testId: testId,
+      url: actionData.url
+    }));
   }
-  return /*#__PURE__*/React.createElement(RovoSummaryBlockResolvedView, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(AISummaryBlockResolvedView, _extends({}, props, {
     size: (_props$size2 = props.size) !== null && _props$size2 !== void 0 ? _props$size2 : cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$ui2 = cardContext.ui) === null || _cardContext$ui2 === void 0 ? void 0 : _cardContext$ui2.size,
     testId: testId,
-    url: url
+    url: actionData.url
   }));
 };
 export default AISummaryBlock;

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

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { Fragment, useEffect, useRef } from 'react';
+import { Fragment, useRef } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { di } from 'react-magnetic-di';
 import { RovoIcon } from '@atlaskit/logo';
@@ -65,32 +65,54 @@ export const RovoSummaryBlockResolvedView = props => {
   const {
     testId,
     aiSummaryMinHeight = 0,
+    placeholder,
     url
   } = props;
   const {
     state: {
       content,
       status
-    },
-    summariseUrl
+    }
   } = useAISummaryAction(url);
-  const showAISummary = status === 'done' ||
-  // We want to display the AI Summary component only when there is content available during the loading process.
-  status === 'loading' && !!content;
   const isSummarisedOnMountRef = useRef(status === 'done');
-  useEffect(() => {
-    if (status !== 'ready' || isSummarisedOnMountRef.current) {
-      return;
-    }
-    isSummarisedOnMountRef.current = true;
-    summariseUrl();
-  }, [status, summariseUrl]);
   const minHeight = isSummarisedOnMountRef.current ? 0 : aiSummaryMinHeight;
   if (status === 'error') {
     return null;
   }
-  if (!showAISummary) {
-    return /*#__PURE__*/React.createElement(Inline, {
+
+  // Show summary when there is content to display
+  if (content && content !== '') {
+    return /*#__PURE__*/React.createElement(Block, _extends({}, props, {
+      direction: SmartLinkDirection.Vertical,
+      testId: `${testId}-resolved-view`,
+      className: ax(["_1reoewfl _18m9ewfl"])
+    }), /*#__PURE__*/React.createElement(Inline, {
+      xcss: newStyles.summaryWrapper
+    }, /*#__PURE__*/React.createElement("div", {
+      className: ax([newStyles.iconWrapper])
+    }, /*#__PURE__*/React.createElement(RovoIcon, {
+      shouldUseHexLogo: true,
+      size: "xxsmall"
+    })), status === 'done' && /*#__PURE__*/React.createElement(AIEventSummaryViewed, {
+      fromCache: isSummarisedOnMountRef.current
+    }), /*#__PURE__*/React.createElement(MotionWrapper, {
+      minHeight: minHeight,
+      show: true,
+      showTransition: !isSummarisedOnMountRef.current
+    }, /*#__PURE__*/React.createElement(AISummary, {
+      testId: `${testId}-ai-summary`,
+      minHeight: minHeight,
+      content: content
+    }), status === 'done' && /*#__PURE__*/React.createElement(AIFooter, null))));
+  }
+
+  // Show loading state on initial request where content hasn't returned yet.
+  if (status === 'loading') {
+    return /*#__PURE__*/React.createElement(MotionWrapper, {
+      minHeight: minHeight,
+      show: true,
+      showTransition: true
+    }, /*#__PURE__*/React.createElement(Inline, {
       testId: `${testId}-placeholder`,
       xcss: newStyles.placeholderWrapper
     }, /*#__PURE__*/React.createElement("div", {
@@ -105,29 +127,13 @@ export const RovoSummaryBlockResolvedView = props => {
       xcss: newStyles.ellipsesContainer
     }, /*#__PURE__*/React.createElement(EllipsesAnimation, {
       isAnimated: true
-    })));
+    }))));
   }
-  return /*#__PURE__*/React.createElement(Block, _extends({}, props, {
-    direction: SmartLinkDirection.Vertical,
-    testId: `${testId}-resolved-view`,
-    className: ax(["_1reoewfl _18m9ewfl"])
-  }), /*#__PURE__*/React.createElement(Inline, {
-    xcss: newStyles.summaryWrapper
-  }, /*#__PURE__*/React.createElement("div", {
-    className: ax([newStyles.iconWrapper])
-  }, /*#__PURE__*/React.createElement(RovoIcon, {
-    shouldUseHexLogo: true,
-    size: 'xxsmall'
-  })), status === 'done' && /*#__PURE__*/React.createElement(AIEventSummaryViewed, {
-    fromCache: isSummarisedOnMountRef.current
-  }), /*#__PURE__*/React.createElement(MotionWrapper, {
-    minHeight: minHeight,
-    show: showAISummary,
-    showTransition: !isSummarisedOnMountRef.current
-  }, /*#__PURE__*/React.createElement(AISummary, {
-    testId: `${testId}-ai-summary`,
-    minHeight: minHeight,
-    content: content
-  }), status === 'done' && /*#__PURE__*/React.createElement(AIFooter, null))));
+
+  // Otherwise, show placeholder if provided
+  if (placeholder) {
+    return /*#__PURE__*/React.createElement(Fragment, null, placeholder);
+  }
+  return null;
 };
 export default AISummaryBlockResolvedView;

package/dist/es2019/view/FlexibleCard/components/blocks/hover-card-footer-block/index.js

@@ -14,7 +14,7 @@ import Block from '../block';
  * Allowed footer actions for HoverCard, in display order. Fetched from context.
  * @featureGate platform_sl_3p_auth_rovo_action_kill_switch
  */
-const HIDDEN_HOVER_CARD_FOOTER_ACTIONS = [InternalActionName.AISummaryAction, InternalActionName.RovoChatAction];
+const HIDDEN_HOVER_CARD_FOOTER_ACTIONS = [InternalActionName.RovoChatAction];
 const ignoreContainerMarginStyles = null;
 const elevatedFooterStyles = null;
 const providerStyles = null;

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

@@ -231,8 +231,7 @@ const HoverCardContent = ({
           flexibleCardProps: flexibleCardProps,
           isAISummaryEnabled: isAISummaryEnabled,
           onActionClick: onActionClick,
-          titleBlockProps: titleBlockProps,
-          url: url
+          titleBlockProps: titleBlockProps
         }));
       }
       return null;
@@ -284,8 +283,7 @@ const HoverCardContent = ({
           flexibleCardProps: flexibleCardProps,
           isAISummaryEnabled: isAISummaryEnabled,
           onActionClick: onActionClick,
-          titleBlockProps: titleBlockProps,
-          url: url
+          titleBlockProps: titleBlockProps
         }));
       }
       return null;

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

@@ -11,7 +11,6 @@ import { succeedUfoExperience } from '../../../../../state/analytics';
 import useAISummaryAction from '../../../../../state/hooks/use-ai-summary-action';
 import FlexibleCard from '../../../../FlexibleCard';
 import { ActionBlock, AIFooterBlock, AISummaryBlock, ResolvedHoverCardFooterBlock, MetadataBlock, SnippetBlock, TitleBlock } from '../../../../FlexibleCard/components/blocks';
-import { RovoSummaryBlock } from '../../../../FlexibleCard/components/blocks/ai-summary-block';
 import { getMetadata } from '../../../utils';
 import ImagePreview from '../../ImagePreview';
 const hiddenSnippetStyles = null;
@@ -26,8 +25,7 @@ const HoverCardResolvedView = ({
   onActionClick,
   showRovoResolvedView,
   titleBlockProps,
-  id,
-  url
+  id
 }) => {
   var _cardState$details;
   const {
@@ -82,12 +80,10 @@ const HoverCardResolvedView = ({
     secondary: secondary,
     maxLines: 1,
     size: SmartLinkSize.Medium
-  }), is3PAuthRovoActionsExperimentOn ? /*#__PURE__*/React.createElement(RovoSummaryBlock, {
+  }), isAISummaryEnabled ? /*#__PURE__*/React.createElement(AISummaryBlock, {
     aiSummaryMinHeight: aiSummaryMinHeight,
-    url: url
-  }) : isAISummaryEnabled ? /*#__PURE__*/React.createElement(AISummaryBlock, {
-    aiSummaryMinHeight: aiSummaryMinHeight,
-    placeholder: snippet
+    placeholder: snippet,
+    is3PAuthRovoActionsExperimentOn: is3PAuthRovoActionsExperimentOn
   }) : snippet, /*#__PURE__*/React.createElement(SnippetBlock, {
     testId: "hidden-snippet",
     onRender: onSnippetRender,

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

@@ -12,7 +12,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "0.0.0-development",
+  packageVersion: "43.31.6",
   componentName: 'linkUrl'
 };
 const Anchor = withLinkClickedEvent('a');