@atlaskit/smart-card 26.48.4 → 26.48.5

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/smart-card
 
+## 26.48.5
+
+### Patch Changes
+
+- [#77953](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/77953) [`484ed33c13bd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/484ed33c13bd) - AI summary: Set generic error state
+- [#76006](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/76006) [`2798568fef46`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2798568fef46) - AI Summary: Add AI icon after the summary
+
 ## 26.48.4
 
 ### Patch Changes

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

@@ -118,21 +118,22 @@ var AISummaryService = exports.AISummaryService = /*#__PURE__*/function () {
               } finally {
                 _iterator2.f();
               }
-              _context2.next = 6;
+              _context2.prev = 4;
+              _context2.next = 7;
               return this.fetchStream(summaryStyle);
-            case 6:
+            case 7:
               stream = _context2.sent;
               bufferContent = '';
               _iteratorAbruptCompletion = false;
               _didIteratorError = false;
-              _context2.prev = 10;
+              _context2.prev = 11;
               _iterator = _asyncIterator(stream);
-            case 12:
-              _context2.next = 14;
+            case 13:
+              _context2.next = 15;
               return _iterator.next();
-            case 14:
+            case 15:
               if (!(_iteratorAbruptCompletion = !(_step = _context2.sent).done)) {
-                _context2.next = 20;
+                _context2.next = 21;
                 break;
               }
               chunk = _step.value;
@@ -152,43 +153,53 @@ var AISummaryService = exports.AISummaryService = /*#__PURE__*/function () {
                   _iterator3.f();
                 }
               }
-            case 17:
+            case 18:
               _iteratorAbruptCompletion = false;
-              _context2.next = 12;
+              _context2.next = 13;
               break;
-            case 20:
-              _context2.next = 26;
+            case 21:
+              _context2.next = 27;
               break;
-            case 22:
-              _context2.prev = 22;
-              _context2.t0 = _context2["catch"](10);
+            case 23:
+              _context2.prev = 23;
+              _context2.t0 = _context2["catch"](11);
               _didIteratorError = true;
               _iteratorError = _context2.t0;
-            case 26:
-              _context2.prev = 26;
+            case 27:
               _context2.prev = 27;
+              _context2.prev = 28;
               if (!(_iteratorAbruptCompletion && _iterator.return != null)) {
-                _context2.next = 31;
+                _context2.next = 32;
                 break;
               }
-              _context2.next = 31;
+              _context2.next = 32;
               return _iterator.return();
-            case 31:
-              _context2.prev = 31;
+            case 32:
+              _context2.prev = 32;
               if (!_didIteratorError) {
-                _context2.next = 34;
+                _context2.next = 35;
                 break;
               }
               throw _iteratorError;
-            case 34:
-              return _context2.finish(31);
             case 35:
-              return _context2.finish(26);
+              return _context2.finish(32);
             case 36:
+              return _context2.finish(27);
+            case 37:
               this.state = {
                 status: 'done',
                 content: bufferContent
               };
+              _context2.next = 43;
+              break;
+            case 40:
+              _context2.prev = 40;
+              _context2.t1 = _context2["catch"](4);
+              this.state = {
+                status: 'error',
+                content: ''
+              };
+            case 43:
               _iterator4 = _createForOfIteratorHelper(this.subscribedStateSetters);
               try {
                 for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
@@ -200,11 +211,11 @@ var AISummaryService = exports.AISummaryService = /*#__PURE__*/function () {
               } finally {
                 _iterator4.f();
               }
-            case 39:
+            case 45:
             case "end":
               return _context2.stop();
           }
-        }, _callee2, this, [[10, 22, 26, 36], [27,, 31, 35]]);
+        }, _callee2, this, [[4, 40], [11, 23, 27, 37], [28,, 32, 36]]);
       }));
       function summariseUrl() {
         return _summariseUrl.apply(this, arguments);

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

package/dist/cjs/view/FlexibleCard/components/blocks/ai-summary-block/ai-state-indicator/ai-indicator-tooltip.js

@@ -7,28 +7,34 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _tooltip = _interopRequireWildcard(require("@atlaskit/tooltip"));
 var _primitives = require("@atlaskit/primitives");
-var _templateObject;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var AIIndicatorTooltipPrimitive = (0, _styled.default)(_tooltip.TooltipPrimitive)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", ";\n  background-color: ", ";\n  box-shadow: ", ";\n  box-sizing: content-box;\n  padding: ", ";\n  max-width: 350px;\n"])), "var(--ds-border-radius, 3px)", "var(--ds-surface-raised, white)", "var(--ds-shadow-overlay, 0px 8px 12px rgba(9, 30, 66, 0.15),0px 0px 1px rgba(9, 30, 66, 0.31))", "var(--ds-space-200, 16px)");
+var AIIndicatorTooltipPrimitive = (0, _styled.default)(_tooltip.TooltipPrimitive)({
+  borderRadius: "var(--ds-border-radius, 3px)",
+  backgroundColor: "var(--ds-surface-raised, white)",
+  boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px rgba(9, 30, 66, 0.15),0px 0px 1px rgba(9, 30, 66, 0.31))",
+  boxSizing: 'content-box',
+  padding: "var(--ds-space-200, 16px)",
+  maxWidth: '350px'
+});
 var triggerStyles = (0, _primitives.xcss)({
   display: 'inline-flex'
 });
 var AIIndicatorTooltip = function AIIndicatorTooltip(_ref) {
   var content = _ref.content,
-    trigger = _ref.trigger;
+    trigger = _ref.trigger,
+    overrideXcss = _ref.xcss;
   return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     component: AIIndicatorTooltipPrimitive,
     content: content,
     tag: "span"
   }, function (tooltipProps) {
     return /*#__PURE__*/_react.default.createElement(_primitives.Box, (0, _extends2.default)({
-      xcss: triggerStyles
+      xcss: [triggerStyles, overrideXcss]
     }, tooltipProps), trigger);
   });
 };

package/dist/cjs/view/FlexibleCard/components/blocks/ai-summary-block/ai-state-indicator/ai-state-done.js

@@ -49,6 +49,10 @@ var iconTooltipDescStyles = (0, _primitives.xcss)({
   fontWeight: '400',
   lineHeight: '14px'
 });
+var iconTooltipTriggerStyles = (0, _primitives.xcss)({
+  position: 'relative',
+  bottom: 'space.negative.050'
+});
 var AIStateDone = function AIStateDone(_ref) {
   var appearance = _ref.appearance,
     testId = _ref.testId;
@@ -81,7 +85,8 @@ var AIStateDone = function AIStateDone(_ref) {
             }
           }
         }))))),
-        trigger: icon
+        trigger: icon,
+        xcss: iconTooltipTriggerStyles
       });
     default:
       return (0, _react2.jsx)(_aiIndicatorContainer.default, {

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

@@ -19,21 +19,21 @@ var _elementGroup = _interopRequireDefault(require("../../element-group"));
 var _aiStateIndicator = _interopRequireDefault(require("../ai-state-indicator"));
 var _utils = require("../../utils");
 var _messages = require("../../../../../../messages");
-var _aiIcon = _interopRequireDefault(require("../../../../../common/ai-icon"));
-var _aiSummary = _interopRequireDefault(require("../../../../../common/ai-summary"));
 var _useAiSummary = require("../../../../../../state/hooks/use-ai-summary");
 var _flexibleUiContext = require("../../../../../../state/flexible-ui-context");
+var _aiIcon = _interopRequireDefault(require("../../../../../common/ai-icon"));
+var _aiSummary = _interopRequireDefault(require("../../../../../common/ai-summary"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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 ? _constants.SmartLinkSize.Medium : _props$size;
+    size = _props$size === void 0 ? _constants.SmartLinkSize.Medium : _props$size,
+    testId = props.testId;
   var _useState = (0, _react.useState)('ready'),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     aiState = _useState2[0],
@@ -44,7 +44,8 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
   var aiSummary = (0, _useAiSummary.useAISummary)({
     url: url
   });
-  var content = aiSummary.state.content;
+  var content = aiSummary.state.content,
+    isSummarisedOnMount = aiSummary.isSummarisedOnMount;
   var onAIActionClick = (0, _react.useCallback)(function () {
     setAIState('loading');
     if (onAIActionChange) {
@@ -59,7 +60,7 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
         onClick: onAIActionClick,
         testId: "".concat(testId, "-ai-summary-action"),
         icon: /*#__PURE__*/_react.default.createElement(_aiIcon.default, {
-          label: "AiIcon"
+          label: "AIIcon"
         })
       };
       return [aiAction].concat((0, _toConsumableArray2.default)(actions));
@@ -77,17 +78,19 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
     direction: _constants.SmartLinkDirection.Vertical,
     testId: "".concat(testId, "-resolved-view")
   }), /*#__PURE__*/_react.default.createElement(_aiSummary.default, {
-    content: content
+    content: content,
+    showIcon: isSummarisedOnMount
   }), /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
     alignBlock: "center",
     alignInline: "end",
     grow: "fill",
     spread: "space-between"
-  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, null, aiState === 'loading' || aiState === 'done' ? /*#__PURE__*/_react.default.createElement(_aiStateIndicator.default, {
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, null, !isSummarisedOnMount && (aiState === 'loading' || aiState === 'done') ? /*#__PURE__*/_react.default.createElement(_aiStateIndicator.default, {
     state: aiState,
-    testId: testId
+    testId: "".concat(testId, "-state-indicator")
   }) : /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
-    width: _constants.SmartLinkWidth.FitToContent
+    width: _constants.SmartLinkWidth.FitToContent,
+    testId: "".concat(testId, "-metadata-group")
   }, metadataElements)), /*#__PURE__*/_react.default.createElement(_primitives.Box, null, /*#__PURE__*/_react.default.createElement(_actionGroup.default, {
     onDropdownOpenChange: onDropdownOpenChange,
     items: combinedActions,

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.48.4",
+  packageVersion: "26.48.5",
   componentName: 'linkUrl'
 };
 var Link = (0, _click.withLinkClickedEvent)('a');

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

@@ -5,13 +5,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _markdownToJsx = _interopRequireDefault(require("markdown-to-jsx"));
 var _react2 = require("@emotion/react");
-var _templateObject;
+var _aiStateIndicator = _interopRequireDefault(require("../../FlexibleCard/components/blocks/ai-summary-block/ai-state-indicator"));
 /** @jsx jsx */
-var AISummaryCSS = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  overflow-y: auto;\n  font-size: 0.75rem;\n  line-height: 1rem;\n  word-wrap: break-word;\n  white-space: normal;\n"])));
+
+var AITooltipIcon = function AITooltipIcon() {
+  return (0, _react2.jsx)(_aiStateIndicator.default, {
+    appearance: "icon-only",
+    state: "done",
+    testId: "ai-tooltip"
+  });
+};
+var AISummaryCSS = (0, _react2.css)({
+  fontSize: '0.75rem',
+  lineHeight: '1rem',
+  wordWrap: 'break-word',
+  whiteSpace: 'normal'
+});
 /**
  * A component to render a response from AI in markdown text.
  * @internal
@@ -20,6 +32,9 @@ var AISummaryCSS = (0, _react2.css)(_templateObject || (_templateObject = (0, _t
 
 var AISummary = function AISummary(_ref) {
   var content = _ref.content,
+    _ref$showIcon = _ref.showIcon,
+    showIcon = _ref$showIcon === void 0 ? false : _ref$showIcon,
+    iconComponent = _ref.iconComponent,
     overrideCss = _ref.overrideCss,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'ai-summary' : _ref$testId;
@@ -29,9 +44,12 @@ var AISummary = function AISummary(_ref) {
   return (0, _react2.jsx)(_markdownToJsx.default, {
     "data-testid": testId,
     css: [AISummaryCSS, overrideCss],
-    children: content,
+    children: showIcon ? "".concat(content, " <Icon />") : content,
     options: {
-      forceWrapper: true
+      forceWrapper: true,
+      overrides: {
+        Icon: iconComponent !== null && iconComponent !== void 0 ? iconComponent : AITooltipIcon
+      }
     }
   });
 };

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

@@ -50,23 +50,30 @@ export class AISummaryService {
     for (const subscriber of this.subscribedStateSetters) {
       subscriber(this.state);
     }
-    const stream = await this.fetchStream(summaryStyle);
-    let bufferContent = '';
-    for await (const chunk of stream) {
-      if (chunk.type === 'ANSWER_PART') {
-        bufferContent += chunk.message.content;
-        for (const subscriber of this.subscribedStateSetters) {
-          subscriber({
-            ...this.state,
-            content: bufferContent
-          });
+    try {
+      const stream = await this.fetchStream(summaryStyle);
+      let bufferContent = '';
+      for await (const chunk of stream) {
+        if (chunk.type === 'ANSWER_PART') {
+          bufferContent += chunk.message.content;
+          for (const subscriber of this.subscribedStateSetters) {
+            subscriber({
+              ...this.state,
+              content: bufferContent
+            });
+          }
         }
       }
+      this.state = {
+        status: 'done',
+        content: bufferContent
+      };
+    } catch {
+      this.state = {
+        status: 'error',
+        content: ''
+      };
     }
-    this.state = {
-      status: 'done',
-      content: bufferContent
-    };
     for (const subscriber of this.subscribedStateSetters) {
       subscriber(this.state);
     }

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

package/dist/es2019/view/FlexibleCard/components/blocks/ai-summary-block/ai-state-indicator/ai-indicator-tooltip.js

@@ -3,27 +3,28 @@ import React from 'react';
 import styled from '@emotion/styled';
 import Tooltip, { TooltipPrimitive } from '@atlaskit/tooltip';
 import { Box, xcss } from '@atlaskit/primitives';
-const AIIndicatorTooltipPrimitive = styled(TooltipPrimitive)`
-  border-radius: ${"var(--ds-border-radius, 3px)"};
-  background-color: ${"var(--ds-surface-raised, white)"};
-  box-shadow: ${"var(--ds-shadow-overlay, 0px 8px 12px rgba(9, 30, 66, 0.15),0px 0px 1px rgba(9, 30, 66, 0.31))"};
-  box-sizing: content-box;
-  padding: ${"var(--ds-space-200, 16px)"};
-  max-width: 350px;
-`;
+const AIIndicatorTooltipPrimitive = styled(TooltipPrimitive)({
+  borderRadius: "var(--ds-border-radius, 3px)",
+  backgroundColor: "var(--ds-surface-raised, white)",
+  boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px rgba(9, 30, 66, 0.15),0px 0px 1px rgba(9, 30, 66, 0.31))",
+  boxSizing: 'content-box',
+  padding: "var(--ds-space-200, 16px)",
+  maxWidth: '350px'
+});
 const triggerStyles = xcss({
   display: 'inline-flex'
 });
 const AIIndicatorTooltip = ({
   content,
-  trigger
+  trigger,
+  xcss: overrideXcss
 }) => {
   return /*#__PURE__*/React.createElement(Tooltip, {
     component: AIIndicatorTooltipPrimitive,
     content: content,
     tag: "span"
   }, tooltipProps => /*#__PURE__*/React.createElement(Box, _extends({
-    xcss: triggerStyles
+    xcss: [triggerStyles, overrideXcss]
   }, tooltipProps), trigger));
 };
 export default AIIndicatorTooltip;

package/dist/es2019/view/FlexibleCard/components/blocks/ai-summary-block/ai-state-indicator/ai-state-done.js

@@ -41,6 +41,10 @@ const iconTooltipDescStyles = xcss({
   fontWeight: '400',
   lineHeight: '14px'
 });
+const iconTooltipTriggerStyles = xcss({
+  position: 'relative',
+  bottom: 'space.negative.050'
+});
 const AIStateDone = ({
   appearance,
   testId
@@ -72,7 +76,8 @@ const AIStateDone = ({
             }, chunks)
           }
         }))))),
-        trigger: icon
+        trigger: icon,
+        xcss: iconTooltipTriggerStyles
       });
     default:
       return jsx(AIIndicatorContainer, {

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

@@ -2,25 +2,25 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { Box, Inline } from '@atlaskit/primitives';
-import { ActionName, SmartLinkSize, SmartLinkWidth, SmartLinkDirection } from '../../../../../../constants';
+import { ActionName, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../../constants';
 import ActionGroup from '../../action-group';
 import Block from '../../block';
 import ElementGroup from '../../element-group';
 import AIStateIndicator from '../ai-state-indicator';
 import { renderElementItems } from '../../utils';
 import { messages } from '../../../../../../messages';
-import AiIcon from '../../../../../common/ai-icon';
-import AISummary from '../../../../../common/ai-summary';
 import { useAISummary } from '../../../../../../state/hooks/use-ai-summary';
 import { useFlexibleUiContext } from '../../../../../../state/flexible-ui-context';
+import AIIcon from '../../../../../common/ai-icon';
+import AISummary from '../../../../../common/ai-summary';
 const AISummaryBlockResolvedView = props => {
   const {
     actions = [],
     metadata,
-    testId,
     onActionMenuOpenChange,
     onAIActionChange,
-    size = SmartLinkSize.Medium
+    size = SmartLinkSize.Medium,
+    testId
   } = props;
   const [aiState, setAIState] = useState('ready');
   const metadataElements = renderElementItems(metadata);
@@ -30,8 +30,11 @@ const AISummaryBlockResolvedView = props => {
     url
   });
   const {
-    content
-  } = aiSummary.state;
+    state: {
+      content
+    },
+    isSummarisedOnMount
+  } = aiSummary;
   const onAIActionClick = useCallback(() => {
     setAIState('loading');
     if (onAIActionChange) {
@@ -45,8 +48,8 @@ const AISummaryBlockResolvedView = props => {
         name: ActionName.CustomAction,
         onClick: onAIActionClick,
         testId: `${testId}-ai-summary-action`,
-        icon: /*#__PURE__*/React.createElement(AiIcon, {
-          label: "AiIcon"
+        icon: /*#__PURE__*/React.createElement(AIIcon, {
+          label: "AIIcon"
         })
       };
       return [aiAction, ...actions];
@@ -64,17 +67,19 @@ const AISummaryBlockResolvedView = props => {
     direction: SmartLinkDirection.Vertical,
     testId: `${testId}-resolved-view`
   }), /*#__PURE__*/React.createElement(AISummary, {
-    content: content
+    content: content,
+    showIcon: isSummarisedOnMount
   }), /*#__PURE__*/React.createElement(Inline, {
     alignBlock: "center",
     alignInline: "end",
     grow: "fill",
     spread: "space-between"
-  }, /*#__PURE__*/React.createElement(Box, null, aiState === 'loading' || aiState === 'done' ? /*#__PURE__*/React.createElement(AIStateIndicator, {
+  }, /*#__PURE__*/React.createElement(Box, null, !isSummarisedOnMount && (aiState === 'loading' || aiState === 'done') ? /*#__PURE__*/React.createElement(AIStateIndicator, {
     state: aiState,
-    testId: testId
+    testId: `${testId}-state-indicator`
   }) : /*#__PURE__*/React.createElement(ElementGroup, {
-    width: SmartLinkWidth.FitToContent
+    width: SmartLinkWidth.FitToContent,
+    testId: `${testId}-metadata-group`
   }, metadataElements)), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(ActionGroup, {
     onDropdownOpenChange: onDropdownOpenChange,
     items: combinedActions,

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.48.4",
+  packageVersion: "26.48.5",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

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

@@ -2,13 +2,18 @@
 import React from 'react';
 import Markdown from 'markdown-to-jsx';
 import { css, jsx } from '@emotion/react';
-const AISummaryCSS = css`
-  overflow-y: auto;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  word-wrap: break-word;
-  white-space: normal;
-`;
+import AIStateIndicator from '../../FlexibleCard/components/blocks/ai-summary-block/ai-state-indicator';
+const AITooltipIcon = () => jsx(AIStateIndicator, {
+  appearance: "icon-only",
+  state: "done",
+  testId: "ai-tooltip"
+});
+const AISummaryCSS = css({
+  fontSize: '0.75rem',
+  lineHeight: '1rem',
+  wordWrap: 'break-word',
+  whiteSpace: 'normal'
+});
 /**
  * A component to render a response from AI in markdown text.
  * @internal
@@ -17,6 +22,8 @@ const AISummaryCSS = css`
 
 const AISummary = ({
   content,
+  showIcon = false,
+  iconComponent,
   overrideCss,
   testId = 'ai-summary'
 }) => {
@@ -26,9 +33,12 @@ const AISummary = ({
   return jsx(Markdown, {
     "data-testid": testId,
     css: [AISummaryCSS, overrideCss],
-    children: content,
+    children: showIcon ? `${content} <Icon />` : content,
     options: {
-      forceWrapper: true
+      forceWrapper: true,
+      overrides: {
+        Icon: iconComponent !== null && iconComponent !== void 0 ? iconComponent : AITooltipIcon
+      }
     }
   });
 };

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

@@ -111,21 +111,22 @@ export var AISummaryService = /*#__PURE__*/function () {
               } finally {
                 _iterator2.f();
               }
-              _context2.next = 6;
+              _context2.prev = 4;
+              _context2.next = 7;
               return this.fetchStream(summaryStyle);
-            case 6:
+            case 7:
               stream = _context2.sent;
               bufferContent = '';
               _iteratorAbruptCompletion = false;
               _didIteratorError = false;
-              _context2.prev = 10;
+              _context2.prev = 11;
               _iterator = _asyncIterator(stream);
-            case 12:
-              _context2.next = 14;
+            case 13:
+              _context2.next = 15;
               return _iterator.next();
-            case 14:
+            case 15:
               if (!(_iteratorAbruptCompletion = !(_step = _context2.sent).done)) {
-                _context2.next = 20;
+                _context2.next = 21;
                 break;
               }
               chunk = _step.value;
@@ -145,43 +146,53 @@ export var AISummaryService = /*#__PURE__*/function () {
                   _iterator3.f();
                 }
               }
-            case 17:
+            case 18:
               _iteratorAbruptCompletion = false;
-              _context2.next = 12;
+              _context2.next = 13;
               break;
-            case 20:
-              _context2.next = 26;
+            case 21:
+              _context2.next = 27;
               break;
-            case 22:
-              _context2.prev = 22;
-              _context2.t0 = _context2["catch"](10);
+            case 23:
+              _context2.prev = 23;
+              _context2.t0 = _context2["catch"](11);
               _didIteratorError = true;
               _iteratorError = _context2.t0;
-            case 26:
-              _context2.prev = 26;
+            case 27:
               _context2.prev = 27;
+              _context2.prev = 28;
               if (!(_iteratorAbruptCompletion && _iterator.return != null)) {
-                _context2.next = 31;
+                _context2.next = 32;
                 break;
               }
-              _context2.next = 31;
+              _context2.next = 32;
               return _iterator.return();
-            case 31:
-              _context2.prev = 31;
+            case 32:
+              _context2.prev = 32;
               if (!_didIteratorError) {
-                _context2.next = 34;
+                _context2.next = 35;
                 break;
               }
               throw _iteratorError;
-            case 34:
-              return _context2.finish(31);
             case 35:
-              return _context2.finish(26);
+              return _context2.finish(32);
             case 36:
+              return _context2.finish(27);
+            case 37:
               this.state = {
                 status: 'done',
                 content: bufferContent
               };
+              _context2.next = 43;
+              break;
+            case 40:
+              _context2.prev = 40;
+              _context2.t1 = _context2["catch"](4);
+              this.state = {
+                status: 'error',
+                content: ''
+              };
+            case 43:
               _iterator4 = _createForOfIteratorHelper(this.subscribedStateSetters);
               try {
                 for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
@@ -193,11 +204,11 @@ export var AISummaryService = /*#__PURE__*/function () {
               } finally {
                 _iterator4.f();
               }
-            case 39:
+            case 45:
             case "end":
               return _context2.stop();
           }
-        }, _callee2, this, [[10, 22, 26, 36], [27,, 31, 35]]);
+        }, _callee2, this, [[4, 40], [11, 23, 27, 37], [28,, 32, 36]]);
       }));
       function summariseUrl() {
         return _summariseUrl.apply(this, arguments);

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

package/dist/esm/view/FlexibleCard/components/blocks/ai-summary-block/ai-state-indicator/ai-indicator-tooltip.js

@@ -1,24 +1,30 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import React from 'react';
 import styled from '@emotion/styled';
 import Tooltip, { TooltipPrimitive } from '@atlaskit/tooltip';
 import { Box, xcss } from '@atlaskit/primitives';
-var AIIndicatorTooltipPrimitive = styled(TooltipPrimitive)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  background-color: ", ";\n  box-shadow: ", ";\n  box-sizing: content-box;\n  padding: ", ";\n  max-width: 350px;\n"])), "var(--ds-border-radius, 3px)", "var(--ds-surface-raised, white)", "var(--ds-shadow-overlay, 0px 8px 12px rgba(9, 30, 66, 0.15),0px 0px 1px rgba(9, 30, 66, 0.31))", "var(--ds-space-200, 16px)");
+var AIIndicatorTooltipPrimitive = styled(TooltipPrimitive)({
+  borderRadius: "var(--ds-border-radius, 3px)",
+  backgroundColor: "var(--ds-surface-raised, white)",
+  boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px rgba(9, 30, 66, 0.15),0px 0px 1px rgba(9, 30, 66, 0.31))",
+  boxSizing: 'content-box',
+  padding: "var(--ds-space-200, 16px)",
+  maxWidth: '350px'
+});
 var triggerStyles = xcss({
   display: 'inline-flex'
 });
 var AIIndicatorTooltip = function AIIndicatorTooltip(_ref) {
   var content = _ref.content,
-    trigger = _ref.trigger;
+    trigger = _ref.trigger,
+    overrideXcss = _ref.xcss;
   return /*#__PURE__*/React.createElement(Tooltip, {
     component: AIIndicatorTooltipPrimitive,
     content: content,
     tag: "span"
   }, function (tooltipProps) {
     return /*#__PURE__*/React.createElement(Box, _extends({
-      xcss: triggerStyles
+      xcss: [triggerStyles, overrideXcss]
     }, tooltipProps), trigger);
   });
 };

package/dist/esm/view/FlexibleCard/components/blocks/ai-summary-block/ai-state-indicator/ai-state-done.js

@@ -41,6 +41,10 @@ var iconTooltipDescStyles = xcss({
   fontWeight: '400',
   lineHeight: '14px'
 });
+var iconTooltipTriggerStyles = xcss({
+  position: 'relative',
+  bottom: 'space.negative.050'
+});
 var AIStateDone = function AIStateDone(_ref) {
   var appearance = _ref.appearance,
     testId = _ref.testId;
@@ -73,7 +77,8 @@ var AIStateDone = function AIStateDone(_ref) {
             }
           }
         }))))),
-        trigger: icon
+        trigger: icon,
+        xcss: iconTooltipTriggerStyles
       });
     default:
       return jsx(AIIndicatorContainer, {

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

@@ -4,26 +4,26 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useCallback, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { Box, Inline } from '@atlaskit/primitives';
-import { ActionName, SmartLinkSize, SmartLinkWidth, SmartLinkDirection } from '../../../../../../constants';
+import { ActionName, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../../constants';
 import ActionGroup from '../../action-group';
 import Block from '../../block';
 import ElementGroup from '../../element-group';
 import AIStateIndicator from '../ai-state-indicator';
 import { renderElementItems } from '../../utils';
 import { messages } from '../../../../../../messages';
-import AiIcon from '../../../../../common/ai-icon';
-import AISummary from '../../../../../common/ai-summary';
 import { useAISummary } from '../../../../../../state/hooks/use-ai-summary';
 import { useFlexibleUiContext } from '../../../../../../state/flexible-ui-context';
+import AIIcon from '../../../../../common/ai-icon';
+import AISummary from '../../../../../common/ai-summary';
 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;
+    size = _props$size === void 0 ? SmartLinkSize.Medium : _props$size,
+    testId = props.testId;
   var _useState = useState('ready'),
     _useState2 = _slicedToArray(_useState, 2),
     aiState = _useState2[0],
@@ -34,7 +34,8 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
   var aiSummary = useAISummary({
     url: url
   });
-  var content = aiSummary.state.content;
+  var content = aiSummary.state.content,
+    isSummarisedOnMount = aiSummary.isSummarisedOnMount;
   var onAIActionClick = useCallback(function () {
     setAIState('loading');
     if (onAIActionChange) {
@@ -48,8 +49,8 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
         name: ActionName.CustomAction,
         onClick: onAIActionClick,
         testId: "".concat(testId, "-ai-summary-action"),
-        icon: /*#__PURE__*/React.createElement(AiIcon, {
-          label: "AiIcon"
+        icon: /*#__PURE__*/React.createElement(AIIcon, {
+          label: "AIIcon"
         })
       };
       return [aiAction].concat(_toConsumableArray(actions));
@@ -67,17 +68,19 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
     direction: SmartLinkDirection.Vertical,
     testId: "".concat(testId, "-resolved-view")
   }), /*#__PURE__*/React.createElement(AISummary, {
-    content: content
+    content: content,
+    showIcon: isSummarisedOnMount
   }), /*#__PURE__*/React.createElement(Inline, {
     alignBlock: "center",
     alignInline: "end",
     grow: "fill",
     spread: "space-between"
-  }, /*#__PURE__*/React.createElement(Box, null, aiState === 'loading' || aiState === 'done' ? /*#__PURE__*/React.createElement(AIStateIndicator, {
+  }, /*#__PURE__*/React.createElement(Box, null, !isSummarisedOnMount && (aiState === 'loading' || aiState === 'done') ? /*#__PURE__*/React.createElement(AIStateIndicator, {
     state: aiState,
-    testId: testId
+    testId: "".concat(testId, "-state-indicator")
   }) : /*#__PURE__*/React.createElement(ElementGroup, {
-    width: SmartLinkWidth.FitToContent
+    width: SmartLinkWidth.FitToContent,
+    testId: "".concat(testId, "-metadata-group")
   }, metadataElements)), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(ActionGroup, {
     onDropdownOpenChange: onDropdownOpenChange,
     items: combinedActions,

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.48.4",
+  packageVersion: "26.48.5",
   componentName: 'linkUrl'
 };
 var Link = withLinkClickedEvent('a');

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

@@ -1,10 +1,21 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 import React from 'react';
 import Markdown from 'markdown-to-jsx';
 import { css, jsx } from '@emotion/react';
-var AISummaryCSS = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  overflow-y: auto;\n  font-size: 0.75rem;\n  line-height: 1rem;\n  word-wrap: break-word;\n  white-space: normal;\n"])));
+import AIStateIndicator from '../../FlexibleCard/components/blocks/ai-summary-block/ai-state-indicator';
+var AITooltipIcon = function AITooltipIcon() {
+  return jsx(AIStateIndicator, {
+    appearance: "icon-only",
+    state: "done",
+    testId: "ai-tooltip"
+  });
+};
+var AISummaryCSS = css({
+  fontSize: '0.75rem',
+  lineHeight: '1rem',
+  wordWrap: 'break-word',
+  whiteSpace: 'normal'
+});
 /**
  * A component to render a response from AI in markdown text.
  * @internal
@@ -13,6 +24,9 @@ var AISummaryCSS = css(_templateObject || (_templateObject = _taggedTemplateLite
 
 var AISummary = function AISummary(_ref) {
   var content = _ref.content,
+    _ref$showIcon = _ref.showIcon,
+    showIcon = _ref$showIcon === void 0 ? false : _ref$showIcon,
+    iconComponent = _ref.iconComponent,
     overrideCss = _ref.overrideCss,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'ai-summary' : _ref$testId;
@@ -22,9 +36,12 @@ var AISummary = function AISummary(_ref) {
   return jsx(Markdown, {
     "data-testid": testId,
     css: [AISummaryCSS, overrideCss],
-    children: content,
+    children: showIcon ? "".concat(content, " <Icon />") : content,
     options: {
-      forceWrapper: true
+      forceWrapper: true,
+      overrides: {
+        Icon: iconComponent !== null && iconComponent !== void 0 ? iconComponent : AITooltipIcon
+      }
     }
   });
 };

package/dist/types/view/FlexibleCard/components/blocks/ai-summary-block/ai-state-indicator/types.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { XCSS } from '@atlaskit/primitives';
 import type { TooltipProps } from '@atlaskit/tooltip';
 import type { AIState } from '../types';
 export type AIStateAppearance = 'default' | 'icon-only';
@@ -15,4 +16,5 @@ export type AIIndicatorContainerProps = {
 export type AIIndicatorTooltipProps = {
     content: TooltipProps['content'];
     trigger: React.ReactNode;
+    xcss?: XCSS;
 };

package/dist/types/view/common/ai-summary/index.d.ts

@@ -1,9 +1,11 @@
 /** @jsx jsx */
 import React from 'react';
+import { type MarkdownToJSX } from 'markdown-to-jsx';
 import { SerializedStyles } from '@emotion/react';
 type AISummaryProps = {
     content?: string;
-    showAIIcon?: boolean;
+    showIcon?: boolean;
+    iconComponent?: MarkdownToJSX.Override;
     overrideCss?: SerializedStyles;
     /**
      * appears as a data attribute `data-testid` in the rendered code,

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { XCSS } from '@atlaskit/primitives';
 import type { TooltipProps } from '@atlaskit/tooltip';
 import type { AIState } from '../types';
 export type AIStateAppearance = 'default' | 'icon-only';
@@ -15,4 +16,5 @@ export type AIIndicatorContainerProps = {
 export type AIIndicatorTooltipProps = {
     content: TooltipProps['content'];
     trigger: React.ReactNode;
+    xcss?: XCSS;
 };

package/dist/types-ts4.5/view/common/ai-summary/index.d.ts

@@ -1,9 +1,11 @@
 /** @jsx jsx */
 import React from 'react';
+import { type MarkdownToJSX } from 'markdown-to-jsx';
 import { SerializedStyles } from '@emotion/react';
 type AISummaryProps = {
     content?: string;
-    showAIIcon?: boolean;
+    showIcon?: boolean;
+    iconComponent?: MarkdownToJSX.Override;
     overrideCss?: SerializedStyles;
     /**
      * appears as a data attribute `data-testid` in the rendered code,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.48.4",
+  "version": "26.48.5",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
     "@atlaskit/avatar-group": "^9.5.0",
     "@atlaskit/badge": "^15.2.0",
     "@atlaskit/button": "^17.6.0",
-    "@atlaskit/dropdown-menu": "^12.5.0",
+    "@atlaskit/dropdown-menu": "^12.6.0",
     "@atlaskit/icon": "^22.1.0",
     "@atlaskit/icon-file-type": "^6.4.0",
     "@atlaskit/icon-object": "^6.3.0",
@@ -47,7 +47,7 @@
     "@atlaskit/modal-dialog": "^12.10.0",
     "@atlaskit/outbound-auth-flow-client": "^3.4.0",
     "@atlaskit/platform-feature-flags": "^0.2.1",
-    "@atlaskit/popup": "^1.12.0",
+    "@atlaskit/popup": "^1.13.0",
     "@atlaskit/primitives": "^3.1.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.6.0",
@@ -102,6 +102,7 @@
     "fetch-mock": "^8.0.0",
     "jest-emotion": "^10.0.32",
     "jest-extended": "^0.11.2",
+    "jest-fetch-mock": "^3.0.3",
     "jsdom": "^17.0.0",
     "lorem-ipsum": "^1.0.6",
     "react": "^16.8.0",