@atlaskit/smart-card 26.50.10 → 26.50.11

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

@@ -1,12 +1,16 @@
 import { useEffect } from 'react';
 import { useAnalyticsEvents } from '../../../../../../common/analytics/generated/use-analytics-events';
-const AIEventErrorViewed = () => {
+const AIEventErrorViewed = ({
+  reason
+}) => {
   const {
     fireEvent
   } = useAnalyticsEvents();
   useEffect(() => {
-    fireEvent('ui.error.viewed.aiSummary', {});
-  }, [fireEvent]);
+    fireEvent('ui.error.viewed.aiSummary', {
+      reason
+    });
+  }, [fireEvent, reason]);
   return null;
 };
 export default AIEventErrorViewed;

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

@@ -6,7 +6,7 @@ import { Box, xcss } from '@atlaskit/primitives';
 import { messages } from '../../../../../../messages';
 import AIIndicatorContainer from './ai-indicator-container';
 import AILearnMoreAnchor from './ai-learn-more-anchor';
-import { CONTENT_URL_AI_TROUBLESHOOTING } from '../../../../../../constants';
+import { CONTENT_URL_ACCEPTABLE_USE_POLICY, CONTENT_URL_AI_TROUBLESHOOTING } from '../../../../../../constants';
 const contentStyles = xcss({
   color: 'color.text.subtle',
   fontSize: '11px',
@@ -14,10 +14,39 @@ const contentStyles = xcss({
   fontWeight: '400',
   lineHeight: '14px'
 });
+const MessageWithAnchor = ({
+  message,
+  url
+}) => /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, message, {
+  values: {
+    a: chunks => /*#__PURE__*/React.createElement(AILearnMoreAnchor, {
+      href: url
+    }, chunks)
+  }
+}));
+const getErrorMesssageProps = error => {
+  switch (error) {
+    case 'ACCEPTABLE_USE_VIOLATIONS':
+      return {
+        message: messages.ai_summary_error_acceptable_use_violation,
+        url: CONTENT_URL_ACCEPTABLE_USE_POLICY
+      };
+    default:
+      return {
+        message: messages.ai_summary_error_generic,
+        url: CONTENT_URL_AI_TROUBLESHOOTING
+      };
+  }
+};
 const AIStateError = ({
   appearance,
-  testId
+  testId,
+  error
 }) => {
+  const {
+    message,
+    url
+  } = getErrorMesssageProps(error);
   switch (appearance) {
     case 'icon-only':
       return null;
@@ -32,13 +61,10 @@ const AIStateError = ({
         content: /*#__PURE__*/React.createElement(Box, {
           testId: `${testId}-error-message`,
           xcss: contentStyles
-        }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.ai_summary_error_generic, {
-          values: {
-            a: chunks => /*#__PURE__*/React.createElement(AILearnMoreAnchor, {
-              href: CONTENT_URL_AI_TROUBLESHOOTING
-            }, chunks)
-          }
-        }))),
+        }, /*#__PURE__*/React.createElement(MessageWithAnchor, {
+          message: message,
+          url: url
+        })),
         testId: `${testId}-error`
       });
   }

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

@@ -7,13 +7,15 @@ import AIStateError from './ai-state-error';
 const AIStateIndicator = ({
   state,
   appearance = 'default',
-  testId = 'ai-state-indicator'
+  testId = 'ai-state-indicator',
+  error
 }) => {
   switch (state) {
     case 'error':
       return jsx(AIStateError, {
         appearance: appearance,
-        testId: testId
+        testId: testId,
+        error: error
       });
     case 'loading':
       return jsx(AIStateLoading, {

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

@@ -35,7 +35,8 @@ const AISummaryBlockResolvedView = props => {
     summariseUrl,
     state: {
       content,
-      status
+      status,
+      error
     }
   } = useAISummary({
     url
@@ -107,7 +108,10 @@ const AISummaryBlockResolvedView = props => {
     size: size
   }))), showAISummaryErrorMessage && /*#__PURE__*/React.createElement(Inline, {
     grow: "fill"
-  }, /*#__PURE__*/React.createElement(AIEventErrorViewed, null), /*#__PURE__*/React.createElement(AIStateIndicator, {
+  }, /*#__PURE__*/React.createElement(AIEventErrorViewed, {
+    reason: error
+  }), /*#__PURE__*/React.createElement(AIStateIndicator, {
+    error: error,
     state: status,
     testId: testId
   })));

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

@@ -32,7 +32,7 @@ const ConnectedAIPrismContainer = ({
   }, [status]);
   const container = jsx("div", _extends({
     className: hoverCardClassName,
-    css: [HoverCardContainer, isAIEnabled && showPrism ? undefined : popupContainerStyles],
+    css: [HoverCardContainer, !isAIEnabled ? popupContainerStyles : undefined],
     "data-testid": testId
   }, props), children);
   return isAIEnabled ? jsx(AIPrism, {

package/dist/es2019/view/HoverCard/styled.js

@@ -14,16 +14,16 @@ export const flexibleUiOptions = {
   zIndex: HOVER_CARD_Z_INDEX + 1
 };
 export const CARD_WIDTH_REM = 24;
-export const NEW_CARD_WIDTH_REM = 28;
+export const NEW_CARD_WIDTH_REM = 25;
 // gap between mouse cursor and hover card
 export const CARD_GAP_PX = 10;
 const blockGap = '0.5rem';
 const elementGap = '0.5rem';
-export const separatorCss = css`
-  [data-separator] + [data-separator]:before {
-    margin-right: ${elementGap};
+export const separatorCss = css({
+  '[data-separator] + [data-separator]:before': {
+    marginRight: elementGap
   }
-`;
+});
 export const HoverCardContainer = css`
   background: none;
   border-width: 0;
@@ -56,18 +56,17 @@ export const titleBlockCss = css`
     font-weight: 600;
   }
 `;
-export const getTransitionStyles = snippetHeight => css`
-  transition: height 300ms ease-in-out;
-  height: ${snippetHeight}px;
-`;
-export const popupContainerStyles = css`
-  border-radius: ${"var(--ds-border-radius-200, 8px)"};
-  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))"};
-`;
-export const getPreviewBlockStyles = previewHeight => css`
-  ${previewHeight ? `height: ${previewHeight}px;` : ''}
-  border-top-left-radius: ${"var(--ds-border-radius-200, 8px)"};
-  border-top-right-radius: ${"var(--ds-border-radius-200, 8px)"};
-  margin-bottom: ${blockGap};
-`;
+export const getTransitionStyles = snippetHeight => css({
+  transition: 'height 300ms ease-in-out',
+  height: `${snippetHeight}px`
+});
+export const popupContainerStyles = css({
+  borderRadius: "var(--ds-border-radius-200, 8px)",
+  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))"
+});
+export const getPreviewBlockStyles = previewHeight => css(previewHeight ? `height: ${previewHeight}px;` : '', {
+  borderTopLeftRadius: "var(--ds-border-radius-200, 8px)",
+  borderTopRightRadius: "var(--ds-border-radius-200, 8px)",
+  marginBottom: blockGap
+});

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

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

@@ -1,11 +1,17 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { useThemeObserver } from '@atlaskit/tokens';
-import { AI_BORDER_PALETTE, INNER_BORDER_RADIUS } from './constants';
+import { AI_BORDER_PALETTE } from './constants';
 import AIGlowingBorder from './ai-glowing-border';
+import { popupContainerStyles } from '../../HoverCard/styled';
 const contentStyles = css({
-  backgroundColor: "var(--ds-surface-raised, white)",
-  borderRadius: INNER_BORDER_RADIUS
+  transition: 'box-shadow 0.5s ease'
+});
+const contentStylesPrismVisible = css({
+  // intentionally set opacity to 0 to remove the shadow with fade out animation
+  boxShadow:
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  '0px 8px 12px rgba(9, 30, 66, 0),0px 0px 1px rgba(9, 30, 66, 0)'
 });
 const AIPrism = ({
   children,
@@ -21,7 +27,8 @@ const AIPrism = ({
   return jsx(AIGlowingBorder, {
     additionalCss: {
       animatedSvgContainer: css({
-        opacity: isVisible ? 1 : 0
+        opacity: isVisible ? 1 : 0,
+        transition: 'opacity 0.5s ease'
       })
     },
     palette: (_AI_BORDER_PALETTE$co = AI_BORDER_PALETTE[colorMode]) !== null && _AI_BORDER_PALETTE$co !== void 0 ? _AI_BORDER_PALETTE$co : AI_BORDER_PALETTE.light,
@@ -29,7 +36,7 @@ const AIPrism = ({
     isMoving: isMoving,
     testId: testId
   }, jsx("div", {
-    css: contentStyles
+    css: [popupContainerStyles, contentStyles, isVisible ? contentStylesPrismVisible : undefined]
   }, children));
 };
 export default AIPrism;

package/dist/esm/constants.js

@@ -2,6 +2,7 @@ export var CONTENT_URL_SECURITY_AND_PERMISSIONS = 'https://support.atlassian.com
 export var CONTENT_URL_3P_ACCOUNT_AUTH = 'https://support.atlassian.com/confluence-cloud/docs/what-data-is-sent-and-received-when-pasting-a-smart-link/';
 export var CONTENT_URL_AI = 'https://www.atlassian.com/trust/atlassian-intelligence';
 export var CONTENT_URL_AI_TROUBLESHOOTING = 'https://support.atlassian.com/organization-administration/docs/troubleshooting-for-atlassian-intelligence/';
+export var CONTENT_URL_ACCEPTABLE_USE_POLICY = 'https://www.atlassian.com/legal/acceptable-use-policy';
 
 /**
  * The alignment of Flexible UI component.

package/dist/esm/messages.js

@@ -40,6 +40,11 @@ export var messages = defineMessages({
     defaultMessage: "Atlassian Intelligence can't provide a response right now. Read more <a>in our support documentation</a>.",
     description: 'Shown when AI summary is summarising the link resource content.'
   },
+  ai_summary_error_acceptable_use_violation: {
+    id: 'fabric.linking.ai_summary_error_acceptable_use_violation',
+    defaultMessage: "We cannot show the results of this summary as it goes against <a>Atlassian's Acceptable Use Policy</a>.",
+    description: 'Shown when AI summary is summarising the link resource content and the content violates atlassians acceptable use policy.'
+  },
   assigned_to: {
     id: 'fabric.linking.assigned_to',
     defaultMessage: 'Assigned to {context}',

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

@@ -11,6 +11,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 function _asyncIterator(r) { var n, t, o, e = 2; for ("undefined" != typeof Symbol && (t = Symbol.asyncIterator, o = Symbol.iterator); e--;) { if (t && null != (n = r[t])) return n.call(r); if (o && null != (n = r[o])) return new AsyncFromSyncIterator(n.call(r)); t = "@@asyncIterator", o = "@@iterator"; } throw new TypeError("Object is not async iterable"); }
 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); }
 import uuid from 'uuid';
+import { errorMessages } from './types';
 import { readStream, addPath } from './utils';
 export var AISummaryService = /*#__PURE__*/function () {
   function AISummaryService(props) {
@@ -104,6 +105,7 @@ export var AISummaryService = /*#__PURE__*/function () {
           subscriber,
           _chunk$message,
           _this$onError,
+          message,
           _iterator4,
           _step4,
           _subscriber2,
@@ -212,17 +214,19 @@ export var AISummaryService = /*#__PURE__*/function () {
                 status: 'done',
                 content: bufferContent
               };
-              _context2.next = 50;
+              _context2.next = 51;
               break;
             case 46:
               _context2.prev = 46;
               _context2.t1 = _context2["catch"](5);
-              (_this$onError = this.onError) === null || _this$onError === void 0 || _this$onError.call(this, id, 'generic');
+              message = _context2.t1 instanceof Error && this.isExpectedError(_context2.t1.message) ? _context2.t1.message : 'UNEXPECTED';
+              (_this$onError = this.onError) === null || _this$onError === void 0 || _this$onError.call(this, id, message);
               this.state = {
                 status: 'error',
-                content: ''
+                content: '',
+                error: message
               };
-            case 50:
+            case 51:
               _iterator4 = _createForOfIteratorHelper(this.subscribedStateSetters);
               try {
                 for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
@@ -234,7 +238,7 @@ export var AISummaryService = /*#__PURE__*/function () {
               } finally {
                 _iterator4.f();
               }
-            case 52:
+            case 53:
             case "end":
               return _context2.stop();
           }
@@ -245,6 +249,13 @@ export var AISummaryService = /*#__PURE__*/function () {
       }
       return summariseUrl;
     }()
+  }, {
+    key: "isExpectedError",
+    value: function isExpectedError(value) {
+      return typeof value === 'string' && errorMessages.some(function (a) {
+        return a === value;
+      });
+    }
   }, {
     key: "subscribe",
     value: function subscribe(stateSetter) {

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

@@ -0,0 +1 @@
+export var errorMessages = ['NETWORK_ERROR', 'NO_ANSWER', 'RATE_LIMIT', 'NO_AGENT', 'PLUGIN_ERRORED', 'OPENAI_RATE_LIMIT_USER_ABUSE', 'ACCEPTABLE_USE_VIOLATIONS', 'AI_DISABLED', 'UNEXPECTED'];

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

@@ -9,27 +9,27 @@ export function readStream(_x) {
 }
 function _readStream() {
   _readStream = _wrapAsyncGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(response) {
-    var reader, doneStreaming, chunkBuffer, _yield$_awaitAsyncGen, value, done, processedChunks, _iterator, _step, chunk, error, _error;
+    var reader, doneStreaming, chunkBuffer, chunkTypeErrorMessage, _yield$_awaitAsyncGen, value, done, processedChunks, _iterator, _step, chunk, jsonChunk, error;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
           reader = getBufferReader(response);
           doneStreaming = false;
           chunkBuffer = '';
-        case 3:
-          _context.prev = 3;
-          _context.next = 6;
+          chunkTypeErrorMessage = 'jsonChunkType error';
+        case 4:
+          _context.prev = 4;
+          _context.next = 7;
           return _awaitAsyncGenerator(reader.read());
-        case 6:
+        case 7:
           _yield$_awaitAsyncGen = _context.sent;
           value = _yield$_awaitAsyncGen.value;
           done = _yield$_awaitAsyncGen.done;
           doneStreaming = done;
           if (!value) {
-            _context.next = 43;
+            _context.next = 42;
             break;
           }
-          _context.prev = 11;
           processedChunks = "".concat(chunkBuffer).concat(value).split('\n'); // assumes that all JSON chunks are separated by a new-line;
           chunkBuffer = '';
           _iterator = _createForOfIteratorHelper(processedChunks);
@@ -37,61 +37,67 @@ function _readStream() {
           _iterator.s();
         case 17:
           if ((_step = _iterator.n()).done) {
-            _context.next = 29;
+            _context.next = 34;
             break;
           }
           chunk = _step.value;
           _context.prev = 19;
-          _context.next = 22;
-          return JSON.parse(chunk);
-        case 22:
-          _context.next = 27;
+          jsonChunk = JSON.parse(chunk);
+          if (!(jsonChunk.type === 'ERROR')) {
+            _context.next = 23;
+            break;
+          }
+          throw new Error(chunkTypeErrorMessage);
+        case 23:
+          _context.next = 25;
+          return jsonChunk;
+        case 25:
+          _context.next = 32;
           break;
-        case 24:
-          _context.prev = 24;
+        case 27:
+          _context.prev = 27;
           _context.t0 = _context["catch"](19);
+          if (!(_context.t0 instanceof Error && _context.t0.message === chunkTypeErrorMessage)) {
+            _context.next = 31;
+            break;
+          }
+          throw _context.t0;
+        case 31:
           // the chunk may be incomplete, so we'll save it for the next iteration.
           chunkBuffer = chunk;
-        case 27:
+        case 32:
           _context.next = 17;
           break;
-        case 29:
-          _context.next = 34;
+        case 34:
+          _context.next = 39;
           break;
-        case 31:
-          _context.prev = 31;
+        case 36:
+          _context.prev = 36;
           _context.t1 = _context["catch"](15);
           _iterator.e(_context.t1);
-        case 34:
-          _context.prev = 34;
-          _iterator.f();
-          return _context.finish(34);
-        case 37:
-          _context.next = 43;
-          break;
         case 39:
           _context.prev = 39;
-          _context.t2 = _context["catch"](11);
-          error = new Error("Error Processing Stream Data: ".concat(value));
-          throw error;
-        case 43:
+          _iterator.f();
+          return _context.finish(39);
+        case 42:
           _context.next = 52;
           break;
-        case 45:
-          _context.prev = 45;
-          _context.t3 = _context["catch"](3);
-          if (!(_context.t3 instanceof DOMException && _context.t3.name === 'AbortError')) {
-            _context.next = 51;
+        case 44:
+          _context.prev = 44;
+          _context.t2 = _context["catch"](4);
+          if (!(_context.t2 instanceof DOMException && _context.t2.name === 'AbortError')) {
+            _context.next = 50;
             break;
           }
           doneStreaming = true;
           _context.next = 52;
           break;
-        case 51:
-          throw _context.t3;
+        case 50:
+          reader.cancel();
+          throw _context.t2;
         case 52:
           if (!doneStreaming) {
-            _context.next = 3;
+            _context.next = 4;
             break;
           }
         case 53:
@@ -99,13 +105,13 @@ function _readStream() {
             _context.next = 56;
             break;
           }
-          _error = new Error("Not all the data was processed: ".concat(chunkBuffer));
-          throw _error;
+          error = new Error("Not all the data was processed: ".concat(chunkBuffer));
+          throw error;
         case 56:
         case "end":
           return _context.stop();
       }
-    }, _callee, null, [[3, 45], [11, 39], [15, 31, 34, 37], [19, 24]]);
+    }, _callee, null, [[4, 44], [15, 36, 39, 42], [19, 27]]);
   }));
   return _readStream.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.50.10"
+  packageVersion: "26.50.11"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -1,11 +1,14 @@
 import { useEffect } from 'react';
 import { useAnalyticsEvents } from '../../../../../../common/analytics/generated/use-analytics-events';
-var AIEventErrorViewed = function AIEventErrorViewed() {
+var AIEventErrorViewed = function AIEventErrorViewed(_ref) {
+  var reason = _ref.reason;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     fireEvent = _useAnalyticsEvents.fireEvent;
   useEffect(function () {
-    fireEvent('ui.error.viewed.aiSummary', {});
-  }, [fireEvent]);
+    fireEvent('ui.error.viewed.aiSummary', {
+      reason: reason
+    });
+  }, [fireEvent, reason]);
   return null;
 };
 export default AIEventErrorViewed;

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

@@ -6,7 +6,7 @@ import { Box, xcss } from '@atlaskit/primitives';
 import { messages } from '../../../../../../messages';
 import AIIndicatorContainer from './ai-indicator-container';
 import AILearnMoreAnchor from './ai-learn-more-anchor';
-import { CONTENT_URL_AI_TROUBLESHOOTING } from '../../../../../../constants';
+import { CONTENT_URL_ACCEPTABLE_USE_POLICY, CONTENT_URL_AI_TROUBLESHOOTING } from '../../../../../../constants';
 var contentStyles = xcss({
   color: 'color.text.subtle',
   fontSize: '11px',
@@ -14,9 +14,40 @@ var contentStyles = xcss({
   fontWeight: '400',
   lineHeight: '14px'
 });
-var AIStateError = function AIStateError(_ref) {
-  var appearance = _ref.appearance,
-    testId = _ref.testId;
+var MessageWithAnchor = function MessageWithAnchor(_ref) {
+  var message = _ref.message,
+    url = _ref.url;
+  return /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, message, {
+    values: {
+      a: function a(chunks) {
+        return /*#__PURE__*/React.createElement(AILearnMoreAnchor, {
+          href: url
+        }, chunks);
+      }
+    }
+  }));
+};
+var getErrorMesssageProps = function getErrorMesssageProps(error) {
+  switch (error) {
+    case 'ACCEPTABLE_USE_VIOLATIONS':
+      return {
+        message: messages.ai_summary_error_acceptable_use_violation,
+        url: CONTENT_URL_ACCEPTABLE_USE_POLICY
+      };
+    default:
+      return {
+        message: messages.ai_summary_error_generic,
+        url: CONTENT_URL_AI_TROUBLESHOOTING
+      };
+  }
+};
+var AIStateError = function AIStateError(_ref2) {
+  var appearance = _ref2.appearance,
+    testId = _ref2.testId,
+    error = _ref2.error;
+  var _getErrorMesssageProp = getErrorMesssageProps(error),
+    message = _getErrorMesssageProp.message,
+    url = _getErrorMesssageProp.url;
   switch (appearance) {
     case 'icon-only':
       return null;
@@ -31,15 +62,10 @@ var AIStateError = function AIStateError(_ref) {
         content: /*#__PURE__*/React.createElement(Box, {
           testId: "".concat(testId, "-error-message"),
           xcss: contentStyles
-        }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.ai_summary_error_generic, {
-          values: {
-            a: function a(chunks) {
-              return /*#__PURE__*/React.createElement(AILearnMoreAnchor, {
-                href: CONTENT_URL_AI_TROUBLESHOOTING
-              }, chunks);
-            }
-          }
-        }))),
+        }, /*#__PURE__*/React.createElement(MessageWithAnchor, {
+          message: message,
+          url: url
+        })),
         testId: "".concat(testId, "-error")
       });
   }

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

@@ -9,12 +9,14 @@ var AIStateIndicator = function AIStateIndicator(_ref) {
     _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
     _ref$testId = _ref.testId,
-    testId = _ref$testId === void 0 ? 'ai-state-indicator' : _ref$testId;
+    testId = _ref$testId === void 0 ? 'ai-state-indicator' : _ref$testId,
+    error = _ref.error;
   switch (state) {
     case 'error':
       return jsx(AIStateError, {
         appearance: appearance,
-        testId: testId
+        testId: testId,
+        error: error
       });
     case 'loading':
       return jsx(AIStateLoading, {

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

@@ -38,7 +38,8 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
     summariseUrl = _useAISummary.summariseUrl,
     _useAISummary$state = _useAISummary.state,
     content = _useAISummary$state.content,
-    status = _useAISummary$state.status;
+    status = _useAISummary$state.status,
+    error = _useAISummary$state.error;
   var showAISummary = status === 'done' ||
   // We want to display the AI Summary component only when there is content available during the loading process.
   status === 'loading' && !!content;
@@ -109,7 +110,10 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
     size: size
   }))), showAISummaryErrorMessage && /*#__PURE__*/React.createElement(Inline, {
     grow: "fill"
-  }, /*#__PURE__*/React.createElement(AIEventErrorViewed, null), /*#__PURE__*/React.createElement(AIStateIndicator, {
+  }, /*#__PURE__*/React.createElement(AIEventErrorViewed, {
+    reason: error
+  }), /*#__PURE__*/React.createElement(AIStateIndicator, {
+    error: error,
     state: status,
     testId: testId
   })));

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

@@ -36,7 +36,7 @@ var ConnectedAIPrismContainer = function ConnectedAIPrismContainer(_ref) {
   }, [status]);
   var container = jsx("div", _extends({
     className: hoverCardClassName,
-    css: [HoverCardContainer, isAIEnabled && showPrism ? undefined : popupContainerStyles],
+    css: [HoverCardContainer, !isAIEnabled ? popupContainerStyles : undefined],
     "data-testid": testId
   }, props), children);
   return isAIEnabled ? jsx(AIPrism, {