@atlaskit/smart-card 43.24.9 → 43.25.0

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

@@ -4,6 +4,7 @@ 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 { fg } from '@atlaskit/platform-feature-flags';
 import { SmartLinkSize } from '../../../../../constants';
 import { useFlexibleUiContext, useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-context';
 import * as Actions from '../../actions';
@@ -45,7 +46,8 @@ const ActionBlock = ({
   size,
   spaceInline,
   className,
-  testId = 'smart-block-action'
+  testId = 'smart-block-action',
+  hideAISummaryAction
 }) => {
   const context = useFlexibleUiContext();
   const ui = useFlexibleUiOptionContext();
@@ -66,7 +68,10 @@ const ActionBlock = ({
     if (!(context !== null && context !== void 0 && context.actions)) {
       return;
     }
-    const arr = Object.keys(context.actions);
+    let arr = Object.keys(context.actions);
+    if (hideAISummaryAction && fg('platform_sl_3p_auth_rovo_action_kill_switch')) {
+      arr = arr.filter(name => name !== 'AISummaryAction');
+    }
     arr.sort(sort);
     return arr.map(name => {
       const Action = name in Actions ? Actions[name] : undefined;
@@ -86,7 +91,7 @@ const ActionBlock = ({
         hideTooltip: isLoading
       }) : null;
     });
-  }, [context === null || context === void 0 ? void 0 : context.actions, spaceInline, onError, onLoadingChange, size, ui === null || ui === void 0 ? void 0 : ui.size, padding, isLoading, onClick]);
+  }, [context === null || context === void 0 ? void 0 : context.actions, spaceInline, onError, onLoadingChange, size, ui === null || ui === void 0 ? void 0 : ui.size, padding, isLoading, onClick, hideAISummaryAction]);
   return actions ? /*#__PURE__*/React.createElement("div", {
     ref: blockRef,
     "data-testid": testId

package/dist/es2019/view/FlexibleCard/components/blocks/ai-summary-block/assets/ellipses.compiled.css

@@ -0,0 +1,6 @@
+._y44v18gg{animation:k1iz2f8l 1.5s infinite forwards}
+._y44v1gpk{animation:k1w4xhaz 1.5s infinite forwards}
+._y44voqx9{animation:kzhlxv2 1.5s infinite forwards}
+@keyframes k1iz2f8l{0%{opacity:0}49%{opacity:0}50%{opacity:1}99%{opacity:1}to{opacity:0}}
+@keyframes k1w4xhaz{0%{opacity:0}24%{opacity:0}25%{opacity:1}99%{opacity:1}to{opacity:0}}
+@keyframes kzhlxv2{0%{opacity:0}74%{opacity:0}75%{opacity:1}99%{opacity:1}to{opacity:0}}

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

@@ -0,0 +1,38 @@
+/* ellipses.tsx generated by @compiled/babel-plugin v0.38.1 */
+// Copied from platform/packages/ai-mate/rovo-platform-ui-components/src/ui/primitives/ellipses-animation/EllipsesAnimation.tsx
+import "./ellipses.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+const animation = null;
+const animation1 = null;
+const animation2 = null;
+const dot1 = null;
+const dot2 = null;
+const dot3 = null;
+const animatedOpacity = null;
+export const EllipsesAnimation = ({
+  isAnimated = true
+}) => {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "10",
+    height: "2",
+    viewBox: "0 0 10 2",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: ax([isAnimated && "", isAnimated && "_y44v1gpk", isAnimated && animatedOpacity]),
+    d: "M0.0800781 2V0.414062H1.67969V2H0.0800781Z",
+    fill: "#1868DB"
+  }), /*#__PURE__*/React.createElement("path", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: ax([isAnimated && "", isAnimated && "_y44v18gg", isAnimated && animatedOpacity]),
+    d: "M3.83984 2V0.414062H5.43945V2H3.83984Z",
+    fill: "#BF63F3"
+  }), /*#__PURE__*/React.createElement("path", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: ax([isAnimated && "", isAnimated && "_y44voqx9", isAnimated && animatedOpacity]),
+    d: "M7.59961 2V0.414062H9.19922V2H7.59961Z",
+    fill: "#FCA700"
+  }));
+};

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { InternalActionName, SmartLinkStatus } from '../../../../../constants';
 import { useFlexibleCardContext, useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
-import AISummaryBlockResolvedView from './resolved';
+import AISummaryBlockResolvedView, { RovoSummaryBlockResolvedView } from './resolved';
 /**
  * Represents an AISummaryBlock, designed to summarising link resource
  * content using AI.
@@ -30,4 +30,31 @@ const AISummaryBlock = ({
     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;
+  }
+  return /*#__PURE__*/React.createElement(RovoSummaryBlockResolvedView, _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
+  }));
+};
 export default AISummaryBlock;

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

@@ -1,2 +1,7 @@
 ._18m9ewfl{overflow-y:visible}
-._1reoewfl{overflow-x:visible}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._1e0c1txw{display:flex}
+._1reoewfl{overflow-x:visible}
+._4cvr1h6o{align-items:center}
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._u5f3utpp{padding-right:var(--ds-space-150,9pt)}

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

@@ -4,14 +4,26 @@ import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Fragment, useRef } from 'react';
+import { FormattedMessage } from 'react-intl-next';
 import { di } from 'react-magnetic-di';
+import { RovoIcon } from '@atlaskit/logo';
+import { Box, Inline, Text } from '@atlaskit/primitives/compiled';
 import { SmartLinkDirection } from '../../../../../../constants';
+import { messages } from '../../../../../../messages';
 import useAISummaryAction from '../../../../../../state/hooks/use-ai-summary-action';
 import AISummary from '../../../../../common/ai-summary';
+import AIFooter from '../../../../../common/ai-summary/ai-footer';
 import MotionWrapper from '../../../common/motion-wrapper';
 import Block from '../../block';
 import AIEventSummaryViewed from '../ai-event-summary-viewed';
+import { EllipsesAnimation } from '../assets/ellipses';
 const styles = null;
+const newStyles = {
+  iconWrapper: "_19bv1b66 _u5f3utpp _1e0c1txw _4cvr1h6o",
+  placeholderWrapper: "_1e0c1txw _4cvr1h6o",
+  summaryWrapper: "_ca0q1b66 _1e0c1txw",
+  ellipsesContainer: "_19bv1b66"
+};
 const AISummaryBlockResolvedView = props => {
   const {
     testId,
@@ -35,11 +47,7 @@ const AISummaryBlockResolvedView = props => {
   }
   return /*#__PURE__*/React.createElement(Block, _extends({}, props, {
     direction: SmartLinkDirection.Vertical,
-    testId: `${testId}-resolved-view`
-    /**
-     * Enabled for feature discovery to allow box shadow to overflow
-     * Cleanup: https://product-fabric.atlassian.net/browse/EDM-8681
-     */,
+    testId: `${testId}-resolved-view`,
     className: ax(["_1reoewfl _18m9ewfl"])
   }), status === 'done' && /*#__PURE__*/React.createElement(AIEventSummaryViewed, {
     fromCache: isSummarisedOnMountRef.current
@@ -53,4 +61,61 @@ const AISummaryBlockResolvedView = props => {
     content: content
   })));
 };
+export const RovoSummaryBlockResolvedView = props => {
+  const {
+    testId,
+    aiSummaryMinHeight = 0,
+    url
+  } = props;
+  const {
+    state: {
+      content,
+      status
+    }
+  } = 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');
+  const minHeight = isSummarisedOnMountRef.current ? 0 : aiSummaryMinHeight;
+  if (!showAISummary) {
+    return /*#__PURE__*/React.createElement(Inline, {
+      xcss: newStyles.placeholderWrapper
+    }, /*#__PURE__*/React.createElement("div", {
+      className: ax([newStyles.iconWrapper])
+    }, /*#__PURE__*/React.createElement(RovoIcon, {
+      shouldUseHexLogo: true,
+      size: 'xxsmall'
+    })), /*#__PURE__*/React.createElement(Text, {
+      size: "small",
+      color: "color.text"
+    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.rovo_summary_loading)), /*#__PURE__*/React.createElement(Box, {
+      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))));
+};
 export default AISummaryBlockResolvedView;

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

@@ -3,11 +3,15 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useAnalyticsEvents } from '../../../../../common/analytics/generated/use-analytics-events';
 import { CardDisplay, SmartLinkPosition, SmartLinkSize } from '../../../../../constants';
 import { succeedUfoExperience } from '../../../../../state/analytics';
+import useAISummaryAction from '../../../../../state/hooks/use-ai-summary-action';
+import useRovoConfig from '../../../../../state/hooks/use-rovo-config';
 import FlexibleCard from '../../../../FlexibleCard';
 import { ActionBlock, AIFooterBlock, AISummaryBlock, 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;
@@ -21,12 +25,14 @@ const HoverCardResolvedView = ({
   isAISummaryEnabled,
   onActionClick,
   titleBlockProps,
-  id
+  id,
+  url
 }) => {
   var _cardState$details;
   const {
     fireEvent
   } = useAnalyticsEvents();
+  const rovoConfig = useRovoConfig();
   useEffect(() => {
     // Since this hover view is only rendered on resolved status,
     // there is no need to check for statuses.
@@ -64,6 +70,20 @@ const HoverCardResolvedView = ({
     className: ax(["_ca0q1b66"])
   });
   const aiSummaryMinHeight = snippet ? snippetHeight.current : 0;
+  const isRovoSummaryEnabled = (rovoConfig === null || rovoConfig === void 0 ? void 0 : rovoConfig.isRovoEnabled) && extensionKey === 'google-object-provider' && fg('platform_sl_3p_auth_rovo_action_kill_switch');
+  const aiSummaryProps = fg('platform_sl_3p_auth_rovo_action_kill_switch') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useAISummaryAction(url) : undefined;
+  const hasSummarised = useRef(false);
+  useEffect(() => {
+    if (fg('platform_sl_3p_auth_rovo_action_kill_switch')) {
+      if ((aiSummaryProps === null || aiSummaryProps === void 0 ? void 0 : aiSummaryProps.state.status) !== 'ready' || hasSummarised.current) {
+        return;
+      }
+      hasSummarised.current = true;
+      aiSummaryProps === null || aiSummaryProps === void 0 ? void 0 : aiSummaryProps.summariseUrl();
+    }
+  }, [aiSummaryProps, isRovoSummaryEnabled]);
   return /*#__PURE__*/React.createElement(FlexibleCard, flexibleCardProps, imagePreview, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, titleBlockProps, {
     metadataPosition: SmartLinkPosition.Top,
     className: ax(["_zulpu2gc _quenze3t _oebj1txw _13mh1pd9"])
@@ -72,7 +92,11 @@ const HoverCardResolvedView = ({
     secondary: secondary,
     maxLines: 1,
     size: SmartLinkSize.Medium
-  }), isAISummaryEnabled ? /*#__PURE__*/React.createElement(AISummaryBlock, {
+  }), isRovoSummaryEnabled ? /*#__PURE__*/React.createElement(RovoSummaryBlock, {
+    aiSummaryMinHeight: aiSummaryMinHeight,
+    placeholder: snippet,
+    url: url
+  }) : isAISummaryEnabled ? /*#__PURE__*/React.createElement(AISummaryBlock, {
     aiSummaryMinHeight: aiSummaryMinHeight,
     placeholder: snippet
   }) : snippet, /*#__PURE__*/React.createElement(SnippetBlock, {
@@ -84,6 +108,7 @@ const HoverCardResolvedView = ({
   }), /*#__PURE__*/React.createElement(ActionBlock, {
     onClick: onActionClick,
     spaceInline: "space.100",
+    hideAISummaryAction: isRovoSummaryEnabled,
     className: ax(["_n3td1b66"])
   }), /*#__PURE__*/React.createElement(AIFooterBlock, null));
 };

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.25.0",
   componentName: 'linkUrl'
 };
 const Anchor = withLinkClickedEvent('a');

package/dist/es2019/view/common/ai-summary/ai-footer/index.compiled.css

@@ -0,0 +1 @@
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}

package/dist/es2019/view/common/ai-summary/ai-footer/index.js

@@ -0,0 +1,28 @@
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { FormattedMessage } from 'react-intl-next';
+import InformationCircleIcon from '@atlaskit/icon/core/information-circle';
+import Link from '@atlaskit/link';
+import { Inline, Text } from '@atlaskit/primitives/compiled';
+import { messages } from '../../../../messages';
+const styles = {
+  aiFooterWrapper: "_ca0q1b66"
+};
+const AIFooter = () => /*#__PURE__*/React.createElement(Inline, {
+  alignBlock: "center",
+  space: "space.050",
+  xcss: styles.aiFooterWrapper
+}, /*#__PURE__*/React.createElement(InformationCircleIcon, {
+  label: "",
+  color: "var(--ds-text-subtle, #505258)",
+  size: "small"
+}), /*#__PURE__*/React.createElement(Text, {
+  size: "small"
+}, /*#__PURE__*/React.createElement(Link, {
+  href: "https://www.atlassian.com/trust/atlassian-intelligence",
+  appearance: "subtle",
+  target: "_blank"
+}, /*#__PURE__*/React.createElement(FormattedMessage, messages.ai_disclaimer))));
+export default AIFooter;

package/dist/es2019/view/common/ai-summary/index.compiled.css

@@ -5,5 +5,6 @@
 ._o5724jg8{white-space:normal}
 ._slp31hna{word-wrap:break-word}
 ._syazazsu{color:var(--ds-text-subtle,#505258)}
+._syazi7uo{color:var(--ds-text,#292a2e)}
 ._te171kdv{-ms-user-select:text}
 ._uizt1kdv{-webkit-user-select:text;-ms-user-select:text;user-select:text}

package/dist/es2019/view/common/ai-summary/index.js

@@ -3,8 +3,11 @@ import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import Markdown from 'markdown-to-jsx';
+import { fg } from '@atlaskit/platform-feature-flags';
 import UList from './ulist';
 const baseStyle = null;
+const textStyleNew = null;
+const textStyleOld = null;
 
 /**
  * A component to render a response from AI in markdown text.
@@ -24,7 +27,7 @@ const AISummary = ({
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
-    className: ax(["_11c8wadc _syazazsu _slp31hna _1nmz1hna _o5724jg8 _181u1kdv _1rkw1kdv _te171kdv _uizt1kdv", className]),
+    className: ax(["_11c8wadc _slp31hna _1nmz1hna _o5724jg8 _181u1kdv _1rkw1kdv _te171kdv _uizt1kdv", fg('platform_sl_3p_auth_rovo_action_kill_switch') ? "_syazi7uo" : "_syazazsu", className]),
     children: content,
     options: {
       forceWrapper: true,