@atlaskit/smart-card 26.46.0 → 26.46.2

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

@@ -0,0 +1,108 @@
+import React from 'react';
+import SVG from '@atlaskit/icon/svg';
+import { B200, B400 } from '@atlaskit/theme/colors';
+/**
+ * The bulk of this file is originally from
+ * https://bitbucket.org/atlassian/barrel/src/master/ui/platform/ui-kit/ai
+ * with modifications
+ */
+const AiIcon = props => /*#__PURE__*/React.createElement(SVG, props, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+  id: "ai_icon_lg0",
+  x1: "21",
+  y1: "12",
+  x2: "17.5",
+  y2: "12",
+  gradientUnits: "userSpaceOnUse"
+}, /*#__PURE__*/React.createElement("stop", {
+  offset: "0.270833",
+  stopColor: `var(--ds-icon-accent-blue, ${B200})`,
+  color: `var(--ds-icon-accent-blue, ${B200})`
+}), /*#__PURE__*/React.createElement("stop", {
+  offset: "1",
+  stopColor: `var(--ds-text-accent-blue, ${B400})`,
+  color: `var(--ds-text-accent-blue, ${B400})`
+})), /*#__PURE__*/React.createElement("linearGradient", {
+  id: "ai_icon_lg1",
+  x1: "12.5",
+  y1: "3",
+  x2: "12.5",
+  y2: "6.5",
+  gradientUnits: "userSpaceOnUse"
+}, /*#__PURE__*/React.createElement("stop", {
+  offset: "0.1875",
+  stopColor: `var(--ds-icon-accent-blue, ${B200})`,
+  color: `var(--ds-icon-accent-blue, ${B200})`
+}), /*#__PURE__*/React.createElement("stop", {
+  offset: "1",
+  stopColor: `var(--ds-text-accent-blue, ${B400})`,
+  color: `var(--ds-text-accent-blue, ${B400})`
+})), /*#__PURE__*/React.createElement("linearGradient", {
+  id: "ai_icon_lg2",
+  x1: "6.82996",
+  y1: "12",
+  x2: "3.32996",
+  y2: "12",
+  gradientUnits: "userSpaceOnUse"
+}, /*#__PURE__*/React.createElement("stop", {
+  stopColor: `var(--ds-text-accent-blue, ${B400})`,
+  color: `var(--ds-text-accent-blue, ${B400})`
+}), /*#__PURE__*/React.createElement("stop", {
+  offset: "0.791667",
+  stopColor: `var(--ds-icon-accent-blue, ${B200})`,
+  color: `var(--ds-icon-accent-blue, ${B200})`
+})), /*#__PURE__*/React.createElement("linearGradient", {
+  id: "ai_icon_lg3",
+  x1: "12.5",
+  y1: "17",
+  x2: "12.5",
+  y2: "21",
+  gradientUnits: "userSpaceOnUse"
+}, /*#__PURE__*/React.createElement("stop", {
+  stopColor: `var(--ds-text-accent-blue, ${B400})`,
+  color: `var(--ds-text-accent-blue, ${B400})`
+}), /*#__PURE__*/React.createElement("stop", {
+  offset: "0.802083",
+  stopColor: `var(--ds-icon-accent-blue, ${B200})`,
+  color: `var(--ds-icon-accent-blue, ${B200})`
+}))), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M17.17 12C17.17 11.4477 17.6177 11 18.17 11H20C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H18.17C17.6177 13 17.17 12.5523 17.17 12Z",
+  fill: "url(#ai_icon_lg0)"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M12 3C12.5523 3 13 3.44772 13 4V5.83C13 6.38228 12.5523 6.83 12 6.83C11.4477 6.83 11 6.38228 11 5.83V4C11 3.44772 11.4477 3 12 3Z",
+  fill: "url(#ai_icon_lg1)"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M3 12C3 11.4477 3.44772 11 4 11H5.83C6.38228 11 6.83 11.4477 6.83 12C6.83 12.5523 6.38228 13 5.83 13H4C3.44772 13 3 12.5523 3 12Z",
+  fill: "url(#ai_icon_lg2)"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M12 17.17C12.5523 17.17 13 17.6177 13 18.17V20C13 20.5523 12.5523 21 12 21C11.4477 21 11 20.5523 11 20V18.17C11 17.6177 11.4477 17.17 12 17.17Z",
+  fill: "url(#ai_icon_lg3)"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M14.2929 14.2929C14.6835 13.9024 15.3166 13.9024 15.7071 14.2929L19.7071 18.2929C20.0977 18.6834 20.0977 19.3166 19.7071 19.7071C19.3166 20.0976 18.6835 20.0976 18.2929 19.7071L14.2929 15.7071C13.9024 15.3166 13.9024 14.6834 14.2929 14.2929Z",
+  fill: `var(--ds-icon-accent-blue, ${B200})`
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M19.7071 4.29289C20.0977 4.68342 20.0977 5.31658 19.7071 5.70711L15.7071 9.70711C15.3166 10.0976 14.6835 10.0976 14.2929 9.70711C13.9024 9.31658 13.9024 8.68342 14.2929 8.29289L18.2929 4.29289C18.6835 3.90237 19.3166 3.90237 19.7071 4.29289Z",
+  fill: `var(--ds-icon-accent-blue, ${B200})`
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L9.70711 8.29289C10.0976 8.68342 10.0976 9.31658 9.70711 9.70711C9.31658 10.0976 8.68342 10.0976 8.29289 9.70711L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289Z",
+  fill: `var(--ds-icon-accent-blue, ${B200})`
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M9.70711 14.2929C10.0976 14.6834 10.0976 15.3166 9.70711 15.7071L5.70711 19.7071C5.31658 20.0976 4.68342 20.0976 4.29289 19.7071C3.90237 19.3166 3.90237 18.6834 4.29289 18.2929L8.29289 14.2929C8.68342 13.9024 9.31658 13.9024 9.70711 14.2929Z",
+  fill: `var(--ds-icon-accent-blue, ${B200})`
+})));
+export default AiIcon;

package/dist/es2019/view/common/ai-prism/ai-glowing-border/animated-svg-container.js

@@ -0,0 +1,236 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import React, { useEffect, useRef } from 'react';
+import { GLOW_SIZE, OUTER_BORDER_RADIUS } from '../constants';
+let namespaceUUID = 0;
+const svgStyles = css({
+  position: 'absolute',
+  borderRadius: OUTER_BORDER_RADIUS
+});
+const blurredStyles = css({
+  width: `calc(100% - ${GLOW_SIZE / 2}px)`,
+  height: `calc(100% - ${GLOW_SIZE / 2}px)`,
+  top: GLOW_SIZE / 2,
+  left: GLOW_SIZE / 2,
+  filter: `blur(${GLOW_SIZE}px)`,
+  // for safari... : https://stackoverflow.com/a/71353198
+  backfaceVisibility: 'hidden',
+  transform: 'translate3d(0, 0, 0)'
+});
+const notBlurredStyles = css({
+  left: 0,
+  top: 0,
+  width: '100%',
+  height: '100%'
+});
+
+/**
+ * The bulk of this file is originally from
+ * https://bitbucket.org/atlassian/barrel/src/master/ui/platform/ui-kit/ai
+ * with modifications.
+ */
+const AnimatedSvgContainer = ({
+  palette,
+  isMoving,
+  isGlowing,
+  additionalCss
+}) => {
+  const svgRef = useRef(null);
+  const namespaceId = useRef();
+  if (namespaceId.current === undefined) {
+    namespaceId.current = namespaceUUID;
+    namespaceUUID += 1;
+  }
+  useEffect(() => {
+    if (isMoving) {
+      const svg = svgRef.current;
+
+      // Schedule animation to begin before next browser paint
+      const beginReq = requestAnimationFrame(() => {
+        svg === null || svg === void 0 ? void 0 : svg.querySelectorAll('animate').forEach(node => node.beginElement());
+      });
+      return () => {
+        // Ensure any pending animation frame is cancelled as the element animation does not end properly if it
+        // begins in the same event tick, i.e. isLoading synchronously changes to true then false.
+        cancelAnimationFrame(beginReq);
+        requestAnimationFrame(() => {
+          svg === null || svg === void 0 ? void 0 : svg.querySelectorAll('animate').forEach(node => node.endElement());
+        });
+      };
+    }
+    return undefined;
+  }, [isMoving]);
+  return jsx("svg", {
+    css: [svgStyles, isGlowing ? blurredStyles : notBlurredStyles, additionalCss],
+    ref: svgRef,
+    viewBox: "0 0 24 24",
+    preserveAspectRatio: "none"
+  }, jsx("defs", null, jsx("linearGradient", {
+    id: `${namespaceId.current}_lg1`,
+    gradientUnits: "userSpaceOnUse",
+    x1: "0%",
+    y1: "0",
+    x2: "400%",
+    y2: "0",
+    spreadMethod: "reflect"
+  }, jsx("animate", {
+    begin: "indefinite",
+    attributeName: "x1",
+    from: "0%",
+    to: "400%",
+    repeatCount: "indefinite",
+    dur: "3s"
+  }), jsx("animate", {
+    begin: "indefinite",
+    attributeName: "x2",
+    from: "400%",
+    to: "800%",
+    repeatCount: "indefinite",
+    dur: "3s"
+  }), jsx("stop", {
+    offset: "0",
+    stopColor: palette.blue
+  }), jsx("stop", {
+    offset: "0.25",
+    stopColor: palette.teal
+  }), jsx("stop", {
+    offset: "0.5",
+    stopColor: palette.yellow
+  }), jsx("stop", {
+    offset: "0.75",
+    stopColor: palette.teal
+  }), jsx("stop", {
+    offset: "1",
+    stopColor: palette.blue
+  })), jsx("linearGradient", {
+    id: `${namespaceId.current}_lg2`,
+    gradientUnits: "userSpaceOnUse",
+    x1: "0",
+    y1: "-100%",
+    x2: "0",
+    y2: "300%",
+    spreadMethod: "reflect"
+  }, jsx("animate", {
+    begin: "indefinite",
+    attributeName: "y1",
+    from: "-100%",
+    to: "300%",
+    repeatCount: "indefinite",
+    dur: "3s"
+  }), jsx("animate", {
+    begin: "indefinite",
+    attributeName: "y2",
+    from: "300%",
+    to: "700%",
+    repeatCount: "indefinite",
+    dur: "3s"
+  }), jsx("stop", {
+    offset: "0",
+    stopColor: palette.blue
+  }), jsx("stop", {
+    offset: "0.25",
+    stopColor: palette.teal
+  }), jsx("stop", {
+    offset: "0.5",
+    stopColor: palette.yellow
+  }), jsx("stop", {
+    offset: "0.75",
+    stopColor: palette.teal
+  }), jsx("stop", {
+    offset: "1",
+    stopColor: palette.blue
+  })), jsx("linearGradient", {
+    id: `${namespaceId.current}_lg3`,
+    gradientUnits: "userSpaceOnUse",
+    x1: "300%",
+    y1: "0",
+    x2: "700%",
+    y2: "0",
+    spreadMethod: "reflect"
+  }, jsx("animate", {
+    begin: "indefinite",
+    attributeName: "x1",
+    from: "300%",
+    to: "-100%",
+    repeatCount: "indefinite",
+    dur: "3s"
+  }), jsx("animate", {
+    begin: "indefinite",
+    attributeName: "x2",
+    from: "700%",
+    to: "300%",
+    repeatCount: "indefinite",
+    dur: "3s"
+  }), jsx("stop", {
+    offset: "0",
+    stopColor: palette.blue
+  }), jsx("stop", {
+    offset: "0.25",
+    stopColor: palette.teal
+  }), jsx("stop", {
+    offset: "0.5",
+    stopColor: palette.yellow
+  }), jsx("stop", {
+    offset: "0.75",
+    stopColor: palette.teal
+  }), jsx("stop", {
+    offset: "1",
+    stopColor: palette.blue
+  })), jsx("linearGradient", {
+    id: `${namespaceId.current}_lg4`,
+    gradientUnits: "userSpaceOnUse",
+    x1: "0",
+    y1: "0",
+    x2: "0",
+    y2: "400%",
+    spreadMethod: "reflect"
+  }, jsx("animate", {
+    begin: "indefinite",
+    attributeName: "y1",
+    from: "0%",
+    to: "-400%",
+    repeatCount: "indefinite",
+    dur: "3s"
+  }), jsx("animate", {
+    begin: "indefinite",
+    attributeName: "y2",
+    from: "400%",
+    to: "0%",
+    repeatCount: "indefinite",
+    dur: "3s"
+  }), jsx("stop", {
+    offset: "0",
+    stopColor: palette.blue
+  }), jsx("stop", {
+    offset: "0.25",
+    stopColor: palette.teal
+  }), jsx("stop", {
+    offset: "0.5",
+    stopColor: palette.yellow
+  }), jsx("stop", {
+    offset: "0.75",
+    stopColor: palette.teal
+  }), jsx("stop", {
+    offset: "1",
+    stopColor: palette.blue
+  }))), jsx("g", {
+    strokeWidth: "8"
+  }, jsx("path", {
+    stroke: `url(#${namespaceId.current}_lg1)`,
+    d: "M0 0h24",
+    vectorEffect: "non-scaling-stroke"
+  }), jsx("path", {
+    stroke: `url(#${namespaceId.current}_lg2)`,
+    d: "M24 0v24",
+    vectorEffect: "non-scaling-stroke"
+  }), jsx("path", {
+    stroke: `url(#${namespaceId.current}_lg3)`,
+    d: "M24 24H0",
+    vectorEffect: "non-scaling-stroke"
+  }), jsx("path", {
+    stroke: `url(#${namespaceId.current}_lg4)`,
+    d: "M0 24V0",
+    vectorEffect: "non-scaling-stroke"
+  })));
+};
+export default AnimatedSvgContainer;

package/dist/es2019/view/common/ai-prism/ai-glowing-border/index.js

@@ -0,0 +1,45 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import React from 'react';
+import AnimatedSvgContainer from './animated-svg-container';
+import { INNER_BORDER_RADIUS } from '../constants';
+const borderContainerStyles = css({
+  display: 'flex',
+  position: 'relative',
+  padding: "var(--ds-space-025, 2px)",
+  width: 'fit-content'
+});
+export const borderContentStyles = css({
+  borderRadius: INNER_BORDER_RADIUS,
+  flexGrow: 1,
+  zIndex: 1 // needs to be more than the svg container at least
+});
+
+/**
+ * The bulk of this file is originally from
+ * https://bitbucket.org/atlassian/barrel/src/master/ui/platform/ui-kit/ai
+ * with modifications.
+ */
+const AIGlowingBorder = ({
+  children,
+  palette,
+  isMoving = true,
+  isGlowing,
+  testId,
+  additionalCss
+}) => jsx("div", {
+  css: [borderContainerStyles, additionalCss === null || additionalCss === void 0 ? void 0 : additionalCss.container],
+  "data-testid": testId
+}, jsx(AnimatedSvgContainer, {
+  palette: palette,
+  isMoving: isMoving,
+  additionalCss: additionalCss === null || additionalCss === void 0 ? void 0 : additionalCss.animatedSvgContainer
+}), isGlowing && jsx(AnimatedSvgContainer, {
+  palette: palette,
+  isMoving: isMoving,
+  isGlowing: true,
+  additionalCss: additionalCss === null || additionalCss === void 0 ? void 0 : additionalCss.animatedSvgContainer
+}), jsx("div", {
+  css: borderContentStyles
+}, children, " "));
+export default AIGlowingBorder;

package/dist/es2019/view/common/ai-prism/ai-glowing-border/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/view/common/ai-prism/constants.js

@@ -0,0 +1,47 @@
+/**
+ * The bulk of this file is originally from
+ * https://bitbucket.org/atlassian/barrel/src/master/ui/platform/ui-kit/ai
+ * with modifications.
+ */
+
+export const GLOW_SIZE = 8;
+export const INNER_BORDER_RADIUS = 8;
+export const OUTER_BORDER_RADIUS = 10;
+
+// We don't yet have design system tokens representing the AI prism colour palette. We should replace this with
+// equivalent tokens when available
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+export const aiThemeTokens = {
+  blueUniqueGradientLight: '#00ACF8',
+  blueUniqueGradientDark: '#008BD2',
+  blue1000: '#092957',
+  blue800: '#0055CC',
+  blue700: '#0C66E4',
+  blue600: '#1D7AFC',
+  blue500: '#388BFF',
+  blue300: '#85B8FF',
+  blue200: '#CCE0FF',
+  blue100: '#E9F2FF',
+  teal500: '#37B4C3',
+  teal300: '#8BDBE5',
+  yellow500: '#CF9F02',
+  yellow200: '#F8E6A0',
+  red800: '#AE2A19',
+  red600: '#E34935',
+  orange500: '#F18D13',
+  orange300: '#FEC57B'
+};
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
+export const AI_BORDER_PALETTE = {
+  dark: {
+    blue: aiThemeTokens.blue800,
+    teal: aiThemeTokens.teal500,
+    yellow: aiThemeTokens.yellow500
+  },
+  light: {
+    blue: aiThemeTokens.blue600,
+    teal: aiThemeTokens.teal300,
+    yellow: aiThemeTokens.yellow200
+  }
+};

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

@@ -0,0 +1,36 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import React from 'react';
+import { useThemeObserver } from '@atlaskit/tokens';
+import { AI_BORDER_PALETTE, INNER_BORDER_RADIUS } from './constants';
+import AIGlowingBorder from './ai-glowing-border';
+const contentStyles = css({
+  backgroundColor: "var(--ds-surface-raised, white)",
+  borderRadius: INNER_BORDER_RADIUS
+});
+const AIPrism = ({
+  children,
+  isGlowing = true,
+  isMoving = true,
+  isVisible,
+  testId
+}) => {
+  var _AI_BORDER_PALETTE$co;
+  const {
+    colorMode = 'light'
+  } = useThemeObserver();
+  return jsx(AIGlowingBorder, {
+    additionalCss: {
+      animatedSvgContainer: css({
+        opacity: isVisible ? 1 : 0
+      })
+    },
+    palette: (_AI_BORDER_PALETTE$co = AI_BORDER_PALETTE[colorMode]) !== null && _AI_BORDER_PALETTE$co !== void 0 ? _AI_BORDER_PALETTE$co : AI_BORDER_PALETTE.light,
+    isGlowing: isGlowing,
+    isMoving: isMoving,
+    testId: testId
+  }, jsx("div", {
+    css: contentStyles
+  }, children));
+};
+export default AIPrism;

package/dist/es2019/view/common/ai-prism/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/messages.js

@@ -13,6 +13,11 @@ export var messages = defineMessages({
     defaultMessage: 'Add account',
     description: 'Allows to add a new account'
   },
+  ai_summarize: {
+    id: 'fabric.linking.ai_summarize',
+    defaultMessage: 'Summarize',
+    description: 'Action to summarize link resource content with AI'
+  },
   assigned_to: {
     id: 'fabric.linking.assigned_to',
     defaultMessage: 'Assigned to {context}',

package/dist/esm/utils/analytics/analytics.js

@@ -15,7 +15,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.46.0"
+  packageVersion: "26.46.2"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -0,0 +1,27 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["status", "testId"];
+import React from 'react';
+import AISummaryBlockResolvedView from './resolved';
+import { SmartLinkStatus } from '../../../../../constants';
+
+/**
+ * Represents an AISummaryBlock, designed to summarising link resource
+ * content using AI.
+ * @public
+ * @param {AISummaryBlockProps} AISummaryBlock
+ * @see Block
+ */
+var AISummaryBlock = function AISummaryBlock(_ref) {
+  var status = _ref.status,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'smart-ai-summary-block' : _ref$testId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  if (status !== SmartLinkStatus.Resolved) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(AISummaryBlockResolvedView, _extends({}, props, {
+    testId: testId
+  }));
+};
+export default AISummaryBlock;

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

@@ -0,0 +1,67 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import React, { useCallback, useMemo } from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { ActionName, SmartLinkAlignment, SmartLinkSize, SmartLinkWidth } from '../../../../../../constants';
+import { useFlexibleUiContext } from '../../../../../../state/flexible-ui-context';
+import ActionGroup from '../../action-group';
+import Block from '../../block';
+import ElementGroup from '../../element-group';
+import { filterActionItems, getActionGroupStyles, renderElementItems } from '../../utils';
+import { messages } from '../../../../../../messages';
+import AiIcon from '../../../../../common/ai-icon';
+var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
+  var _props$actions = props.actions,
+    actions = _props$actions === void 0 ? [] : _props$actions,
+    metadata = props.metadata,
+    testId = props.testId,
+    onActionMenuOpenChange = props.onActionMenuOpenChange,
+    onAIActionChange = props.onAIActionChange,
+    _props$size = props.size,
+    size = _props$size === void 0 ? SmartLinkSize.Medium : _props$size;
+  var context = useFlexibleUiContext();
+  var metadataElements = renderElementItems(metadata);
+  var onAIActionClick = useCallback(function () {
+    if (onAIActionChange) {
+      onAIActionChange();
+    }
+  }, [onAIActionChange]);
+  var combinedActions = useMemo(function () {
+    var aiAction = {
+      content: /*#__PURE__*/React.createElement(FormattedMessage, messages.ai_summarize),
+      name: ActionName.CustomAction,
+      onClick: onAIActionClick,
+      testId: "".concat(testId, "-ai-summary-action"),
+      icon: /*#__PURE__*/React.createElement(AiIcon, {
+        label: "AiIcon"
+      })
+    };
+    return [aiAction].concat(_toConsumableArray(actions));
+  }, [actions, onAIActionClick, testId]);
+  var hasActions = useMemo(function () {
+    var _filterActionItems;
+    return ((_filterActionItems = filterActionItems(combinedActions, context)) === null || _filterActionItems === void 0 ? void 0 : _filterActionItems.length) > 0;
+  }, [combinedActions, context]);
+  var onDropdownOpenChange = useCallback(function (isOpen) {
+    if (onActionMenuOpenChange) {
+      onActionMenuOpenChange({
+        isOpen: isOpen
+      });
+    }
+  }, [onActionMenuOpenChange]);
+  return /*#__PURE__*/React.createElement(Block, _extends({}, props, {
+    testId: "".concat(testId, "-resolved-view")
+  }), /*#__PURE__*/React.createElement(ElementGroup, {
+    width: SmartLinkWidth.Flexible
+  }, metadataElements), hasActions && /*#__PURE__*/React.createElement(ElementGroup, {
+    testId: "smart-element-group-actions",
+    align: SmartLinkAlignment.Right,
+    overrideCss: getActionGroupStyles(size),
+    width: SmartLinkWidth.Flexible
+  }, /*#__PURE__*/React.createElement(ActionGroup, {
+    onDropdownOpenChange: onDropdownOpenChange,
+    items: combinedActions,
+    appearance: "default"
+  })));
+};
+export default AISummaryBlockResolvedView;

package/dist/esm/view/FlexibleCard/components/blocks/ai-summary-block/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/view/FlexibleCard/components/blocks/footer-block/resolved/index.js

@@ -1,7 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
-import { css } from '@emotion/react';
 import React, { useCallback, useMemo } from 'react';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../../constants';
 import { useFlexibleUiContext } from '../../../../../../state/flexible-ui-context';
@@ -9,15 +6,7 @@ import { Provider } from '../../../elements';
 import ActionGroup from '../../action-group';
 import Block from '../../block';
 import ElementGroup from '../../element-group';
-import { filterActionItems } from '../../utils';
-var getActionGroupStyles = function getActionGroupStyles(size) {
-  if (size === SmartLinkSize.XLarge) {
-    // The biggest height of the action button exceeds the max line-height
-    // of the elements causing the action on the block with x-large size to
-    // get cut at the bottom.
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      max-height: 2rem;\n    "])));
-  }
-};
+import { filterActionItems, getActionGroupStyles } from '../../utils';
 var FooterBlockResolvedView = function FooterBlockResolvedView(props) {
   var actions = props.actions,
     testId = props.testId,

package/dist/esm/view/FlexibleCard/components/blocks/index.js

@@ -7,4 +7,5 @@ export { default as CustomBlock } from './block';
 
 // Internal components to be used within @atlaskit/smart-card only.
 export { default as InternalFooterBlock } from './footer-block/resolved';
-export { default as RelatedUrlsBlock } from './related-urls-block';
+export { default as RelatedUrlsBlock } from './related-urls-block';
+export { default as AISummaryBlock } from './ai-summary-block';

package/dist/esm/view/FlexibleCard/components/blocks/utils.js

@@ -4,7 +4,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["name"];
-var _ElementDisplaySchema, _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _ElementDisplaySchema, _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 import React from 'react';
 import { css } from '@emotion/react';
 import { ActionName, ElementName, SmartLinkDirection, SmartLinkSize } from '../../../../constants';
@@ -55,6 +55,14 @@ export var isJSXElementNull = function isJSXElementNull(children) {
 var isElementOrElementGroup = function isElementOrElementGroup(node) {
   return /*#__PURE__*/React.isValidElement(node) && (isFlexibleUiElement(node) || node.type === ElementGroup);
 };
+export var getActionGroupStyles = function getActionGroupStyles(size) {
+  if (size === SmartLinkSize.XLarge) {
+    // The biggest height of the action button exceeds the max line-height
+    // of the elements causing the action on the block with x-large size to
+    // get cut at the bottom.
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      max-height: 2rem;\n    "])));
+  }
+};
 export var filterActionItems = function filterActionItems() {
   var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var context = arguments.length > 1 ? arguments[1] : undefined;