@atlaskit/smart-card 26.55.1 → 26.55.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/smart-card
 
+## 26.55.2
+
+### Patch Changes
+
+- [#90354](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/90354) [`3a735d1c33fb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3a735d1c33fb) - Call the useAISummary hook with a product name when it`s available in SmartLinkContext
+- [#87479](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/87479) [`d2e75f4df537`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d2e75f4df537) - AI summary: Add transition animation
+
 ## 26.55.1
 
 ### Patch Changes

package/dist/cjs/state/hooks/use-ai-summary/ai-summary-service/index.js

@@ -23,7 +23,8 @@ function _asyncIterator(r) { var n, t, o, e = 2; for ("undefined" != typeof Symb
 function AsyncFromSyncIterator(r) { function AsyncFromSyncIteratorContinuation(r) { if (Object(r) !== r) return Promise.reject(new TypeError(r + " is not an object.")); var n = r.done; return Promise.resolve(r.value).then(function (r) { return { value: r, done: n }; }); } return AsyncFromSyncIterator = function AsyncFromSyncIterator(r) { this.s = r, this.n = r.next; }, AsyncFromSyncIterator.prototype = { s: null, n: null, next: function next() { return AsyncFromSyncIteratorContinuation(this.n.apply(this.s, arguments)); }, return: function _return(r) { var n = this.s.return; return void 0 === n ? Promise.resolve({ value: r, done: !0 }) : AsyncFromSyncIteratorContinuation(n.apply(this.s, arguments)); }, throw: function _throw(r) { var n = this.s.return; return void 0 === n ? Promise.reject(r) : AsyncFromSyncIteratorContinuation(n.apply(this.s, arguments)); } }, new AsyncFromSyncIterator(r); }
 var AISummaryService = exports.AISummaryService = /*#__PURE__*/function () {
   function AISummaryService(props) {
-    var _this = this;
+    var _this = this,
+      _props$product;
     (0, _classCallCheck2.default)(this, AISummaryService);
     (0, _defineProperty2.default)(this, "state", {
       content: '',
@@ -73,7 +74,7 @@ var AISummaryService = exports.AISummaryService = /*#__PURE__*/function () {
       headers: _objectSpread({
         'Content-Type': 'application/json;charset=UTF-8',
         'x-experience-id': 'smart-link',
-        'x-product': props.product || 'confluence'
+        'x-product': ((_props$product = props.product) === null || _props$product === void 0 ? void 0 : _props$product.toLowerCase()) || 'confluence'
       }, props.headers)
     };
     this.url = props.url;

package/dist/cjs/utils/analytics/analytics.js

@@ -22,7 +22,7 @@ var ANALYTICS_CHANNEL = exports.ANALYTICS_CHANNEL = 'media';
 var context = exports.context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.55.1"
+  packageVersion: "26.55.2"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/cjs/view/FlexibleCard/components/blocks/ai-summary-block/ai-motion-wrapper/index.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AIMotionWrapper = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _primitives = require("@atlaskit/primitives");
+var _react = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var AIMotionWrapper = exports.AIMotionWrapper = function AIMotionWrapper(_ref) {
+  var children = _ref.children,
+    _ref$isFadeIn = _ref.isFadeIn,
+    isFadeIn = _ref$isFadeIn === void 0 ? false : _ref$isFadeIn,
+    _ref$minHeight = _ref.minHeight,
+    minHeight = _ref$minHeight === void 0 ? 0 : _ref$minHeight,
+    show = _ref.show,
+    _ref$showTransition = _ref.showTransition,
+    showTransition = _ref$showTransition === void 0 ? false : _ref$showTransition;
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    height = _useState2[0],
+    setHeight = _useState2[1];
+  var ref = (0, _react.useRef)(null);
+  var transition = isFadeIn ? 'height, opacity' : 'height';
+  (0, _react.useEffect)(function () {
+    if (show && ref.current) {
+      // set the height of the error message container explicitly to the height
+      // of its contents (including anything hidden due to overflow) so that we
+      // can animate the height of the container
+      setHeight(ref.current.scrollHeight);
+    } else {
+      setHeight(0);
+    }
+  }, [children, show]);
+  return show ? /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    style: {
+      height: height,
+      minHeight: minHeight,
+      lineHeight: 0,
+      overflow: 'hidden',
+      // a fit for purpose state variable to control when the 'visible' styles should be appled
+      opacity: height > 0 ? 1 : 0,
+      // we only want to transition opacity and height when the error message is initially shown
+      // not if its to be shown on mount
+      transitionProperty: showTransition ? transition : 'none',
+      transitionDuration: '0.3s'
+    },
+    ref: ref
+  }, children) : null;
+};
+var _default = exports.default = AIMotionWrapper;

package/dist/cjs/view/FlexibleCard/components/blocks/ai-summary-block/ai-motion-wrapper/types.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -15,11 +15,13 @@ var _constants = require("../../../../../../constants");
 var _actionGroup = _interopRequireDefault(require("../../action-group"));
 var _block = _interopRequireDefault(require("../../block"));
 var _elementGroup = _interopRequireDefault(require("../../element-group"));
+var _aiMotionWrapper = _interopRequireDefault(require("../ai-motion-wrapper"));
 var _aiStateIndicator = _interopRequireDefault(require("../ai-state-indicator"));
 var _utils = require("../../utils");
 var _messages = require("../../../../../../messages");
 var _useAiSummary = require("../../../../../../state/hooks/use-ai-summary");
 var _flexibleUiContext = require("../../../../../../state/flexible-ui-context");
+var _linkProvider = require("@atlaskit/link-provider");
 var _aiIcon = _interopRequireDefault(require("../../../../../common/ai-icon"));
 var _aiSummary = _interopRequireDefault(require("../../../../../common/ai-summary"));
 var _useAnalyticsEvents2 = require("../../../../../../common/analytics/generated/use-analytics-events");
@@ -31,16 +33,19 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var AISummaryBlockErrorIndicator = exports.AISummaryBlockErrorIndicator = function AISummaryBlockErrorIndicator(_ref) {
   var showErrorIndicator = _ref.showErrorIndicator,
     error = _ref.error,
+    showTransition = _ref.showTransition,
     testId = _ref.testId;
-  return showErrorIndicator ? /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
-    grow: "fill"
+  return /*#__PURE__*/_react.default.createElement(_aiMotionWrapper.default, {
+    isFadeIn: true,
+    show: showErrorIndicator,
+    showTransition: showTransition
   }, /*#__PURE__*/_react.default.createElement(_aiEventErrorViewed.default, {
     reason: error
   }), /*#__PURE__*/_react.default.createElement(_aiStateIndicator.default, {
     error: error,
-    state: 'error',
+    state: "error",
     testId: testId
-  })) : null;
+  }));
 };
 var AISummaryBlockStatusIndicator = exports.AISummaryBlockStatusIndicator = function AISummaryBlockStatusIndicator(_ref2) {
   var showStatusIndicator = _ref2.showStatusIndicator,
@@ -63,16 +68,20 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
     _props$size = props.size,
     size = _props$size === void 0 ? _constants.SmartLinkSize.Medium : _props$size,
     testId = props.testId,
-    aiSummaryMinHeight = props.aiSummaryMinHeight,
+    _props$aiSummaryMinHe = props.aiSummaryMinHeight,
+    aiSummaryMinHeight = _props$aiSummaryMinHe === void 0 ? 0 : _props$aiSummaryMinHe,
     metadata = props.metadata;
   var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(),
     fireEvent = _useAnalyticsEvents.fireEvent;
   var context = (0, _flexibleUiContext.useFlexibleUiContext)();
   var url = (context === null || context === void 0 ? void 0 : context.url) || '';
   var ari = (context === null || context === void 0 ? void 0 : context.ari) || '';
+  var _useSmartLinkContext = (0, _linkProvider.useSmartLinkContext)(),
+    product = _useSmartLinkContext.product;
   var _useAISummary = (0, _useAiSummary.useAISummary)({
       url: url,
-      ari: ari
+      ari: ari,
+      product: product
     }),
     summariseUrl = _useAISummary.summariseUrl,
     _useAISummary$state = _useAISummary.state,
@@ -126,12 +135,16 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
     testId: "".concat(testId, "-resolved-view")
   }), status === 'done' && /*#__PURE__*/_react.default.createElement(_aiEventSummaryViewed.default, {
     fromCache: isSummarisedOnMountRef.current
-  }), showAISummary && /*#__PURE__*/_react.default.createElement(_aiSummary.default, {
+  }), /*#__PURE__*/_react.default.createElement(_aiMotionWrapper.default, {
+    minHeight: aiSummaryMinHeight,
+    show: showAISummary,
+    showTransition: !isSummarisedOnMountRef.current
+  }, /*#__PURE__*/_react.default.createElement(_aiSummary.default, {
     testId: "".concat(testId, "-ai-summary"),
     minHeight: aiSummaryMinHeight,
     content: content,
     showIcon: isSummarisedOnMountRef.current
-  }), /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+  })), /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
     alignBlock: "center",
     alignInline: "end",
     grow: "fill",
@@ -148,6 +161,7 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
     size: size
   }))), /*#__PURE__*/_react.default.createElement(AISummaryBlockErrorIndicator, {
     showErrorIndicator: !isErroredOnMountRef.current && status === 'error',
+    showTransition: !isErroredOnMountRef.current,
     error: error,
     testId: testId
   }));

package/dist/cjs/view/HoverCard/components/ContentContainer.js

@@ -16,6 +16,7 @@ var _aiPrism = _interopRequireDefault(require("../../common/ai-prism"));
 var _HoverCardContent = require("./HoverCardContent");
 var _useAiSummary = require("../../../state/hooks/use-ai-summary");
 var _store = require("../../../state/store");
+var _linkProvider = require("@atlaskit/link-provider");
 var _linkExtractors = require("@atlaskit/link-extractors");
 var _reactMagneticDi = require("react-magnetic-di");
 var _excluded = ["children", "isAIEnabled", "testId", "url"],
@@ -35,9 +36,12 @@ var ConnectedAIPrismContainer = function ConnectedAIPrismContainer(_ref) {
   //The data is undefined while the link is resolving.
   var dataUrl = data ? (0, _linkExtractors.extractLink)(data) : null;
   var dataAri = data ? (0, _linkExtractors.extractAri)(data) : null;
+  var _useSmartLinkContext = (0, _linkProvider.useSmartLinkContext)(),
+    product = _useSmartLinkContext.product;
   var _useAISummary = (0, _useAiSummary.useAISummary)({
       url: dataUrl || '',
-      ari: dataAri || ''
+      ari: dataAri || '',
+      product: product
     }),
     status = _useAISummary.state.status;
   var _useState = (0, _react2.useState)(status === 'loading'),

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

@@ -22,6 +22,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _helpers = require("../../../../../state/helpers");
 var _useAiSummary = require("../../../../../state/hooks/use-ai-summary");
 var _linkExtractors = require("@atlaskit/link-extractors");
+var _linkProvider = require("@atlaskit/link-provider");
 var _reactMagneticDi = require("react-magnetic-di");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -64,11 +65,15 @@ var toFooterActions = exports.toFooterActions = function toFooterActions(cardAct
 var ConnectedAIBlock = function ConnectedAIBlock(_ref) {
   var bottomPrimary = _ref.bottomPrimary,
     imagePreview = _ref.imagePreview,
-    url = _ref.url,
-    ari = _ref.ari;
+    data = _ref.data;
+  var dataUrl = data ? (0, _linkExtractors.extractLink)(data) : null;
+  var dataAri = data ? (0, _linkExtractors.extractAri)(data) : null;
+  var _useSmartLinkContext = (0, _linkProvider.useSmartLinkContext)(),
+    product = _useSmartLinkContext.product;
   var _useAISummary = (0, _useAiSummary.useAISummary)({
-      url: url,
-      ari: ari
+      url: dataUrl || '',
+      ari: dataAri || '',
+      product: product
     }),
     _useAISummary$state = _useAISummary.state,
     status = _useAISummary$state.status,
@@ -88,7 +93,7 @@ var ConnectedAIBlock = function ConnectedAIBlock(_ref) {
   })) : null;
 };
 var HoverCardResolvedView = function HoverCardResolvedView(_ref2) {
-  var _cardState$details, _extractLink, _extractAri;
+  var _cardState$details;
   var flexibleCardProps = _ref2.flexibleCardProps,
     titleBlockProps = _ref2.titleBlockProps,
     analytics = _ref2.analytics,
@@ -113,8 +118,6 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref2) {
     return toFooterActions(cardActions, onActionClick);
   }, [cardActions, onActionClick]);
   var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
-  var dataUrl = (_extractLink = (0, _linkExtractors.extractLink)(data)) !== null && _extractLink !== void 0 ? _extractLink : '';
-  var dataAri = (_extractAri = (0, _linkExtractors.extractAri)(data)) !== null && _extractAri !== void 0 ? _extractAri : '';
   var _useMemo = (0, _react.useMemo)(function () {
       var betterMetadata = (0, _utils.getSimulatedBetterMetadata)(extensionKey, data);
       return {
@@ -163,9 +166,8 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref2) {
     blockRef: connectedAIBlockRef
   }, /*#__PURE__*/_react.default.createElement(ConnectedAIBlock, {
     imagePreview: !!imagePreview,
-    url: dataUrl,
-    ari: dataAri,
-    bottomPrimary: bottomPrimary
+    bottomPrimary: bottomPrimary,
+    data: data
   })), !isAISummaryEnabled && !imagePreview && /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, {
     status: _constants.SmartLinkStatus.Resolved
   }), /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, {

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

@@ -17,7 +17,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId"],
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.55.1",
+  packageVersion: "26.55.2",
   componentName: 'linkUrl'
 };
 var Link = (0, _click.withLinkClickedEvent)('a');

package/dist/es2019/state/hooks/use-ai-summary/ai-summary-service/index.js

@@ -5,6 +5,7 @@ import { addPath } from './utils';
 import { readStream } from './readStream';
 export class AISummaryService {
   constructor(props) {
+    var _props$product;
     _defineProperty(this, "state", {
       content: '',
       status: 'ready'
@@ -39,7 +40,7 @@ export class AISummaryService {
       headers: {
         'Content-Type': 'application/json;charset=UTF-8',
         'x-experience-id': 'smart-link',
-        'x-product': props.product || 'confluence',
+        'x-product': ((_props$product = props.product) === null || _props$product === void 0 ? void 0 : _props$product.toLowerCase()) || 'confluence',
         ...props.headers
       }
     };

package/dist/es2019/utils/analytics/analytics.js

@@ -4,7 +4,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.55.1"
+  packageVersion: "26.55.2"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -0,0 +1,39 @@
+import { Box } from '@atlaskit/primitives';
+import React, { useEffect, useRef, useState } from 'react';
+export const AIMotionWrapper = ({
+  children,
+  isFadeIn = false,
+  minHeight = 0,
+  show,
+  showTransition = false
+}) => {
+  const [height, setHeight] = useState(0);
+  const ref = useRef(null);
+  const transition = isFadeIn ? 'height, opacity' : 'height';
+  useEffect(() => {
+    if (show && ref.current) {
+      // set the height of the error message container explicitly to the height
+      // of its contents (including anything hidden due to overflow) so that we
+      // can animate the height of the container
+      setHeight(ref.current.scrollHeight);
+    } else {
+      setHeight(0);
+    }
+  }, [children, show]);
+  return show ? /*#__PURE__*/React.createElement(Box, {
+    style: {
+      height,
+      minHeight,
+      lineHeight: 0,
+      overflow: 'hidden',
+      // a fit for purpose state variable to control when the 'visible' styles should be appled
+      opacity: height > 0 ? 1 : 0,
+      // we only want to transition opacity and height when the error message is initially shown
+      // not if its to be shown on mount
+      transitionProperty: showTransition ? transition : 'none',
+      transitionDuration: '0.3s'
+    },
+    ref: ref
+  }, children) : null;
+};
+export default AIMotionWrapper;

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

@@ -6,11 +6,13 @@ import { ActionName, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '.
 import ActionGroup from '../../action-group';
 import Block from '../../block';
 import ElementGroup from '../../element-group';
+import AIMotionWrapper from '../ai-motion-wrapper';
 import AIStateIndicator from '../ai-state-indicator';
 import { renderElementItems } from '../../utils';
 import { messages } from '../../../../../../messages';
 import { useAISummary } from '../../../../../../state/hooks/use-ai-summary';
 import { useFlexibleUiContext } from '../../../../../../state/flexible-ui-context';
+import { useSmartLinkContext } from '@atlaskit/link-provider';
 import AIIcon from '../../../../../common/ai-icon';
 import AISummary from '../../../../../common/ai-summary';
 import { useAnalyticsEvents } from '../../../../../../common/analytics/generated/use-analytics-events';
@@ -20,18 +22,19 @@ import { di } from 'react-magnetic-di';
 export const AISummaryBlockErrorIndicator = ({
   showErrorIndicator,
   error,
+  showTransition,
   testId
-}) => {
-  return showErrorIndicator ? /*#__PURE__*/React.createElement(Inline, {
-    grow: "fill"
-  }, /*#__PURE__*/React.createElement(AIEventErrorViewed, {
-    reason: error
-  }), /*#__PURE__*/React.createElement(AIStateIndicator, {
-    error: error,
-    state: 'error',
-    testId: testId
-  })) : null;
-};
+}) => /*#__PURE__*/React.createElement(AIMotionWrapper, {
+  isFadeIn: true,
+  show: showErrorIndicator,
+  showTransition: showTransition
+}, /*#__PURE__*/React.createElement(AIEventErrorViewed, {
+  reason: error
+}), /*#__PURE__*/React.createElement(AIStateIndicator, {
+  error: error,
+  state: "error",
+  testId: testId
+}));
 export const AISummaryBlockStatusIndicator = ({
   showStatusIndicator,
   metadata,
@@ -53,7 +56,7 @@ const AISummaryBlockResolvedView = props => {
     onActionMenuOpenChange,
     size = SmartLinkSize.Medium,
     testId,
-    aiSummaryMinHeight,
+    aiSummaryMinHeight = 0,
     metadata
   } = props;
   const {
@@ -62,6 +65,9 @@ const AISummaryBlockResolvedView = props => {
   const context = useFlexibleUiContext();
   const url = (context === null || context === void 0 ? void 0 : context.url) || '';
   const ari = (context === null || context === void 0 ? void 0 : context.ari) || '';
+  const {
+    product
+  } = useSmartLinkContext();
   const {
     summariseUrl,
     state: {
@@ -71,7 +77,8 @@ const AISummaryBlockResolvedView = props => {
     }
   } = useAISummary({
     url,
-    ari
+    ari,
+    product
   });
   const showAISummary = status === 'done' ||
   // We want to display the AI Summary component only when there is content available during the loading process.
@@ -120,12 +127,16 @@ const AISummaryBlockResolvedView = props => {
     testId: `${testId}-resolved-view`
   }), status === 'done' && /*#__PURE__*/React.createElement(AIEventSummaryViewed, {
     fromCache: isSummarisedOnMountRef.current
-  }), showAISummary && /*#__PURE__*/React.createElement(AISummary, {
+  }), /*#__PURE__*/React.createElement(AIMotionWrapper, {
+    minHeight: aiSummaryMinHeight,
+    show: showAISummary,
+    showTransition: !isSummarisedOnMountRef.current
+  }, /*#__PURE__*/React.createElement(AISummary, {
     testId: `${testId}-ai-summary`,
     minHeight: aiSummaryMinHeight,
     content: content,
     showIcon: isSummarisedOnMountRef.current
-  }), /*#__PURE__*/React.createElement(Inline, {
+  })), /*#__PURE__*/React.createElement(Inline, {
     alignBlock: "center",
     alignInline: "end",
     grow: "fill",
@@ -142,6 +153,7 @@ const AISummaryBlockResolvedView = props => {
     size: size
   }))), /*#__PURE__*/React.createElement(AISummaryBlockErrorIndicator, {
     showErrorIndicator: !isErroredOnMountRef.current && status === 'error',
+    showTransition: !isErroredOnMountRef.current,
     error: error,
     testId: testId
   }));

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

@@ -8,6 +8,7 @@ import AIPrism from '../../common/ai-prism';
 import { hoverCardClassName } from './HoverCardContent';
 import { useAISummary } from '../../../state/hooks/use-ai-summary';
 import { useSmartCardState } from '../../../state/store';
+import { useSmartLinkContext } from '@atlaskit/link-provider';
 import { extractAri, extractLink } from '@atlaskit/link-extractors';
 import { di } from 'react-magnetic-di';
 const ConnectedAIPrismContainer = ({
@@ -24,13 +25,17 @@ const ConnectedAIPrismContainer = ({
   //The data is undefined while the link is resolving.
   const dataUrl = data ? extractLink(data) : null;
   const dataAri = data ? extractAri(data) : null;
+  const {
+    product
+  } = useSmartLinkContext();
   const {
     state: {
       status
     }
   } = useAISummary({
     url: dataUrl || '',
-    ari: dataAri || ''
+    ari: dataAri || '',
+    product: product
   });
   const [showPrism, setShowPrism] = useState(status === 'loading');
   useEffect(() => {

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

@@ -13,6 +13,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getCanBeDatasource } from '../../../../../state/helpers';
 import { useAISummary } from '../../../../../state/hooks/use-ai-summary';
 import { extractAri, extractLink } from '@atlaskit/link-extractors';
+import { useSmartLinkContext } from '@atlaskit/link-provider';
 import { SmartLinkStatus } from '../../../../../constants';
 import { di } from 'react-magnetic-di';
 export const toFooterActions = (cardActions, onActionClick) => {
@@ -54,17 +55,22 @@ export const toFooterActions = (cardActions, onActionClick) => {
 const ConnectedAIBlock = ({
   bottomPrimary,
   imagePreview,
-  url,
-  ari
+  data
 }) => {
+  const dataUrl = data ? extractLink(data) : null;
+  const dataAri = data ? extractAri(data) : null;
+  const {
+    product
+  } = useSmartLinkContext();
   const {
     state: {
       status,
       content
     }
   } = useAISummary({
-    url,
-    ari
+    url: dataUrl || '',
+    ari: dataAri || '',
+    product
   });
   const showData = status === 'ready' || status === 'error' ||
   // Description & bottom metadata should only disappear when we start getting summary content
@@ -91,7 +97,7 @@ const HoverCardResolvedView = ({
   extensionKey,
   url
 }) => {
-  var _cardState$details, _extractLink, _extractAri;
+  var _cardState$details;
   const canBeDatasource = getCanBeDatasource(cardState.details);
   useEffect(() => {
     // Since this hover view is only rendered on resolved status,
@@ -104,8 +110,6 @@ const HoverCardResolvedView = ({
   }, [analytics.ui, cardState.status, canBeDatasource]);
   const footerActions = useMemo(() => toFooterActions(cardActions, onActionClick), [cardActions, onActionClick]);
   const data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
-  const dataUrl = (_extractLink = extractLink(data)) !== null && _extractLink !== void 0 ? _extractLink : '';
-  const dataAri = (_extractAri = extractAri(data)) !== null && _extractAri !== void 0 ? _extractAri : '';
   const {
     topPrimary,
     topSecondary,
@@ -155,9 +159,8 @@ const HoverCardResolvedView = ({
     blockRef: connectedAIBlockRef
   }, /*#__PURE__*/React.createElement(ConnectedAIBlock, {
     imagePreview: !!imagePreview,
-    url: dataUrl,
-    ari: dataAri,
-    bottomPrimary: bottomPrimary
+    bottomPrimary: bottomPrimary,
+    data: data
   })), !isAISummaryEnabled && !imagePreview && /*#__PURE__*/React.createElement(SnippetBlock, {
     status: SmartLinkStatus.Resolved
   }), /*#__PURE__*/React.createElement(SnippetBlock, {

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

@@ -7,7 +7,7 @@ import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-m
 import LinkWarningModal from './LinkWarningModal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.55.1",
+  packageVersion: "26.55.2",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

package/dist/esm/state/hooks/use-ai-summary/ai-summary-service/index.js

@@ -16,7 +16,8 @@ import { addPath } from './utils';
 import { readStream } from './readStream';
 export var AISummaryService = /*#__PURE__*/function () {
   function AISummaryService(props) {
-    var _this = this;
+    var _this = this,
+      _props$product;
     _classCallCheck(this, AISummaryService);
     _defineProperty(this, "state", {
       content: '',
@@ -66,7 +67,7 @@ export var AISummaryService = /*#__PURE__*/function () {
       headers: _objectSpread({
         'Content-Type': 'application/json;charset=UTF-8',
         'x-experience-id': 'smart-link',
-        'x-product': props.product || 'confluence'
+        'x-product': ((_props$product = props.product) === null || _props$product === void 0 ? void 0 : _props$product.toLowerCase()) || 'confluence'
       }, props.headers)
     };
     this.url = props.url;

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.55.1"
+  packageVersion: "26.55.2"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -0,0 +1,45 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { Box } from '@atlaskit/primitives';
+import React, { useEffect, useRef, useState } from 'react';
+export var AIMotionWrapper = function AIMotionWrapper(_ref) {
+  var children = _ref.children,
+    _ref$isFadeIn = _ref.isFadeIn,
+    isFadeIn = _ref$isFadeIn === void 0 ? false : _ref$isFadeIn,
+    _ref$minHeight = _ref.minHeight,
+    minHeight = _ref$minHeight === void 0 ? 0 : _ref$minHeight,
+    show = _ref.show,
+    _ref$showTransition = _ref.showTransition,
+    showTransition = _ref$showTransition === void 0 ? false : _ref$showTransition;
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    height = _useState2[0],
+    setHeight = _useState2[1];
+  var ref = useRef(null);
+  var transition = isFadeIn ? 'height, opacity' : 'height';
+  useEffect(function () {
+    if (show && ref.current) {
+      // set the height of the error message container explicitly to the height
+      // of its contents (including anything hidden due to overflow) so that we
+      // can animate the height of the container
+      setHeight(ref.current.scrollHeight);
+    } else {
+      setHeight(0);
+    }
+  }, [children, show]);
+  return show ? /*#__PURE__*/React.createElement(Box, {
+    style: {
+      height: height,
+      minHeight: minHeight,
+      lineHeight: 0,
+      overflow: 'hidden',
+      // a fit for purpose state variable to control when the 'visible' styles should be appled
+      opacity: height > 0 ? 1 : 0,
+      // we only want to transition opacity and height when the error message is initially shown
+      // not if its to be shown on mount
+      transitionProperty: showTransition ? transition : 'none',
+      transitionDuration: '0.3s'
+    },
+    ref: ref
+  }, children) : null;
+};
+export default AIMotionWrapper;

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

@@ -7,11 +7,13 @@ import { ActionName, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '.
 import ActionGroup from '../../action-group';
 import Block from '../../block';
 import ElementGroup from '../../element-group';
+import AIMotionWrapper from '../ai-motion-wrapper';
 import AIStateIndicator from '../ai-state-indicator';
 import { renderElementItems } from '../../utils';
 import { messages } from '../../../../../../messages';
 import { useAISummary } from '../../../../../../state/hooks/use-ai-summary';
 import { useFlexibleUiContext } from '../../../../../../state/flexible-ui-context';
+import { useSmartLinkContext } from '@atlaskit/link-provider';
 import AIIcon from '../../../../../common/ai-icon';
 import AISummary from '../../../../../common/ai-summary';
 import { useAnalyticsEvents } from '../../../../../../common/analytics/generated/use-analytics-events';
@@ -21,16 +23,19 @@ import { di } from 'react-magnetic-di';
 export var AISummaryBlockErrorIndicator = function AISummaryBlockErrorIndicator(_ref) {
   var showErrorIndicator = _ref.showErrorIndicator,
     error = _ref.error,
+    showTransition = _ref.showTransition,
     testId = _ref.testId;
-  return showErrorIndicator ? /*#__PURE__*/React.createElement(Inline, {
-    grow: "fill"
+  return /*#__PURE__*/React.createElement(AIMotionWrapper, {
+    isFadeIn: true,
+    show: showErrorIndicator,
+    showTransition: showTransition
   }, /*#__PURE__*/React.createElement(AIEventErrorViewed, {
     reason: error
   }), /*#__PURE__*/React.createElement(AIStateIndicator, {
     error: error,
-    state: 'error',
+    state: "error",
     testId: testId
-  })) : null;
+  }));
 };
 export var AISummaryBlockStatusIndicator = function AISummaryBlockStatusIndicator(_ref2) {
   var showStatusIndicator = _ref2.showStatusIndicator,
@@ -53,16 +58,20 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
     _props$size = props.size,
     size = _props$size === void 0 ? SmartLinkSize.Medium : _props$size,
     testId = props.testId,
-    aiSummaryMinHeight = props.aiSummaryMinHeight,
+    _props$aiSummaryMinHe = props.aiSummaryMinHeight,
+    aiSummaryMinHeight = _props$aiSummaryMinHe === void 0 ? 0 : _props$aiSummaryMinHe,
     metadata = props.metadata;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     fireEvent = _useAnalyticsEvents.fireEvent;
   var context = useFlexibleUiContext();
   var url = (context === null || context === void 0 ? void 0 : context.url) || '';
   var ari = (context === null || context === void 0 ? void 0 : context.ari) || '';
+  var _useSmartLinkContext = useSmartLinkContext(),
+    product = _useSmartLinkContext.product;
   var _useAISummary = useAISummary({
       url: url,
-      ari: ari
+      ari: ari,
+      product: product
     }),
     summariseUrl = _useAISummary.summariseUrl,
     _useAISummary$state = _useAISummary.state,
@@ -116,12 +125,16 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
     testId: "".concat(testId, "-resolved-view")
   }), status === 'done' && /*#__PURE__*/React.createElement(AIEventSummaryViewed, {
     fromCache: isSummarisedOnMountRef.current
-  }), showAISummary && /*#__PURE__*/React.createElement(AISummary, {
+  }), /*#__PURE__*/React.createElement(AIMotionWrapper, {
+    minHeight: aiSummaryMinHeight,
+    show: showAISummary,
+    showTransition: !isSummarisedOnMountRef.current
+  }, /*#__PURE__*/React.createElement(AISummary, {
     testId: "".concat(testId, "-ai-summary"),
     minHeight: aiSummaryMinHeight,
     content: content,
     showIcon: isSummarisedOnMountRef.current
-  }), /*#__PURE__*/React.createElement(Inline, {
+  })), /*#__PURE__*/React.createElement(Inline, {
     alignBlock: "center",
     alignInline: "end",
     grow: "fill",
@@ -138,6 +151,7 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
     size: size
   }))), /*#__PURE__*/React.createElement(AISummaryBlockErrorIndicator, {
     showErrorIndicator: !isErroredOnMountRef.current && status === 'error',
+    showTransition: !isErroredOnMountRef.current,
     error: error,
     testId: testId
   }));

package/dist/esm/view/HoverCard/components/ContentContainer.js

@@ -12,6 +12,7 @@ import AIPrism from '../../common/ai-prism';
 import { hoverCardClassName } from './HoverCardContent';
 import { useAISummary } from '../../../state/hooks/use-ai-summary';
 import { useSmartCardState } from '../../../state/store';
+import { useSmartLinkContext } from '@atlaskit/link-provider';
 import { extractAri, extractLink } from '@atlaskit/link-extractors';
 import { di } from 'react-magnetic-di';
 var ConnectedAIPrismContainer = function ConnectedAIPrismContainer(_ref) {
@@ -28,9 +29,12 @@ var ConnectedAIPrismContainer = function ConnectedAIPrismContainer(_ref) {
   //The data is undefined while the link is resolving.
   var dataUrl = data ? extractLink(data) : null;
   var dataAri = data ? extractAri(data) : null;
+  var _useSmartLinkContext = useSmartLinkContext(),
+    product = _useSmartLinkContext.product;
   var _useAISummary = useAISummary({
       url: dataUrl || '',
-      ari: dataAri || ''
+      ari: dataAri || '',
+      product: product
     }),
     status = _useAISummary.state.status;
   var _useState = useState(status === 'loading'),

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

@@ -14,6 +14,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getCanBeDatasource } from '../../../../../state/helpers';
 import { useAISummary } from '../../../../../state/hooks/use-ai-summary';
 import { extractAri, extractLink } from '@atlaskit/link-extractors';
+import { useSmartLinkContext } from '@atlaskit/link-provider';
 import { SmartLinkStatus } from '../../../../../constants';
 import { di } from 'react-magnetic-di';
 export var toFooterActions = function toFooterActions(cardActions, onActionClick) {
@@ -55,11 +56,15 @@ export var toFooterActions = function toFooterActions(cardActions, onActionClick
 var ConnectedAIBlock = function ConnectedAIBlock(_ref) {
   var bottomPrimary = _ref.bottomPrimary,
     imagePreview = _ref.imagePreview,
-    url = _ref.url,
-    ari = _ref.ari;
+    data = _ref.data;
+  var dataUrl = data ? extractLink(data) : null;
+  var dataAri = data ? extractAri(data) : null;
+  var _useSmartLinkContext = useSmartLinkContext(),
+    product = _useSmartLinkContext.product;
   var _useAISummary = useAISummary({
-      url: url,
-      ari: ari
+      url: dataUrl || '',
+      ari: dataAri || '',
+      product: product
     }),
     _useAISummary$state = _useAISummary.state,
     status = _useAISummary$state.status,
@@ -79,7 +84,7 @@ var ConnectedAIBlock = function ConnectedAIBlock(_ref) {
   })) : null;
 };
 var HoverCardResolvedView = function HoverCardResolvedView(_ref2) {
-  var _cardState$details, _extractLink, _extractAri;
+  var _cardState$details;
   var flexibleCardProps = _ref2.flexibleCardProps,
     titleBlockProps = _ref2.titleBlockProps,
     analytics = _ref2.analytics,
@@ -104,8 +109,6 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref2) {
     return toFooterActions(cardActions, onActionClick);
   }, [cardActions, onActionClick]);
   var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
-  var dataUrl = (_extractLink = extractLink(data)) !== null && _extractLink !== void 0 ? _extractLink : '';
-  var dataAri = (_extractAri = extractAri(data)) !== null && _extractAri !== void 0 ? _extractAri : '';
   var _useMemo = useMemo(function () {
       var betterMetadata = getSimulatedBetterMetadata(extensionKey, data);
       return {
@@ -154,9 +157,8 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref2) {
     blockRef: connectedAIBlockRef
   }, /*#__PURE__*/React.createElement(ConnectedAIBlock, {
     imagePreview: !!imagePreview,
-    url: dataUrl,
-    ari: dataAri,
-    bottomPrimary: bottomPrimary
+    bottomPrimary: bottomPrimary,
+    data: data
   })), !isAISummaryEnabled && !imagePreview && /*#__PURE__*/React.createElement(SnippetBlock, {
     status: SmartLinkStatus.Resolved
   }), /*#__PURE__*/React.createElement(SnippetBlock, {

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

@@ -10,7 +10,7 @@ import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-m
 import LinkWarningModal from './LinkWarningModal';
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.55.1",
+  packageVersion: "26.55.2",
   componentName: 'linkUrl'
 };
 var Link = withLinkClickedEvent('a');

package/dist/types/state/hooks/use-ai-summary/ai-summary-service/types.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="filesystem" />
+import type { ProductType } from '@atlaskit/linking-common';
 export interface AISummaryServiceInt {
     summariseUrl: () => Promise<void>;
     state: AISummaryState;
@@ -22,7 +23,6 @@ export type AISummaryServiceConfig = {
     headers: Record<string, string>;
 };
 export type AISummaryStatus = 'ready' | 'loading' | 'error' | 'done';
-export type ProductType = 'confluence' | 'atlas' | 'jpd' | 'jsm' | 'jsw' | 'jwm' | 'bitbucket' | 'trello';
 export type PostAgentPayload = {
     recipient_agent_named_id: string;
     agent_input_context: AgentInputContext;

package/dist/types/view/FlexibleCard/components/blocks/ai-summary-block/ai-motion-wrapper/index.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+import type { AIMotionWrapperProps } from './types';
+export declare const AIMotionWrapper: FC<AIMotionWrapperProps>;
+export default AIMotionWrapper;

package/dist/types/view/FlexibleCard/components/blocks/ai-summary-block/ai-motion-wrapper/types.d.ts

@@ -0,0 +1,6 @@
+export type AIMotionWrapperProps = {
+    isFadeIn?: boolean;
+    minHeight?: number;
+    show: boolean;
+    showTransition?: boolean;
+};

package/dist/types/view/FlexibleCard/components/blocks/ai-summary-block/resolved/index.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
 import type { AISummaryBlockProps } from '../types';
 import type { AISummaryStatus, ErrorMessage } from '../../../../../../state/hooks/use-ai-summary/ai-summary-service/types';
-export declare const AISummaryBlockErrorIndicator: ({ showErrorIndicator, error, testId, }: {
+export declare const AISummaryBlockErrorIndicator: ({ showErrorIndicator, error, showTransition, testId, }: {
     showErrorIndicator: boolean;
     error?: "NETWORK_ERROR" | "NO_ANSWER" | "RATE_LIMIT" | "NO_AGENT" | "PLUGIN_ERRORED" | "OPENAI_RATE_LIMIT_USER_ABUSE" | "ACCEPTABLE_USE_VIOLATIONS" | "AI_DISABLED" | "UNEXPECTED" | undefined;
-} & Pick<AISummaryBlockProps, "testId">) => JSX.Element | null;
+    showTransition: boolean;
+} & Pick<AISummaryBlockProps, "testId">) => JSX.Element;
 export declare const AISummaryBlockStatusIndicator: ({ showStatusIndicator, metadata, status, testId, }: {
     showStatusIndicator: boolean;
     status: AISummaryStatus;

package/dist/types-ts4.5/state/hooks/use-ai-summary/ai-summary-service/types.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="filesystem" />
+import type { ProductType } from '@atlaskit/linking-common';
 export interface AISummaryServiceInt {
     summariseUrl: () => Promise<void>;
     state: AISummaryState;
@@ -22,7 +23,6 @@ export type AISummaryServiceConfig = {
     headers: Record<string, string>;
 };
 export type AISummaryStatus = 'ready' | 'loading' | 'error' | 'done';
-export type ProductType = 'confluence' | 'atlas' | 'jpd' | 'jsm' | 'jsw' | 'jwm' | 'bitbucket' | 'trello';
 export type PostAgentPayload = {
     recipient_agent_named_id: string;
     agent_input_context: AgentInputContext;

package/dist/types-ts4.5/view/FlexibleCard/components/blocks/ai-summary-block/ai-motion-wrapper/index.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+import type { AIMotionWrapperProps } from './types';
+export declare const AIMotionWrapper: FC<AIMotionWrapperProps>;
+export default AIMotionWrapper;

package/dist/types-ts4.5/view/FlexibleCard/components/blocks/ai-summary-block/ai-motion-wrapper/types.d.ts

@@ -0,0 +1,6 @@
+export type AIMotionWrapperProps = {
+    isFadeIn?: boolean;
+    minHeight?: number;
+    show: boolean;
+    showTransition?: boolean;
+};

package/dist/types-ts4.5/view/FlexibleCard/components/blocks/ai-summary-block/resolved/index.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
 import type { AISummaryBlockProps } from '../types';
 import type { AISummaryStatus, ErrorMessage } from '../../../../../../state/hooks/use-ai-summary/ai-summary-service/types';
-export declare const AISummaryBlockErrorIndicator: ({ showErrorIndicator, error, testId, }: {
+export declare const AISummaryBlockErrorIndicator: ({ showErrorIndicator, error, showTransition, testId, }: {
     showErrorIndicator: boolean;
     error?: "NETWORK_ERROR" | "NO_ANSWER" | "RATE_LIMIT" | "NO_AGENT" | "PLUGIN_ERRORED" | "OPENAI_RATE_LIMIT_USER_ABUSE" | "ACCEPTABLE_USE_VIOLATIONS" | "AI_DISABLED" | "UNEXPECTED" | undefined;
-} & Pick<AISummaryBlockProps, "testId">) => JSX.Element | null;
+    showTransition: boolean;
+} & Pick<AISummaryBlockProps, "testId">) => JSX.Element;
 export declare const AISummaryBlockStatusIndicator: ({ showStatusIndicator, metadata, status, testId, }: {
     showStatusIndicator: boolean;
     status: AISummaryStatus;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.55.1",
+  "version": "26.55.2",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"