@atlaskit/smart-card 26.46.1 → 26.46.3

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

@@ -0,0 +1,29 @@
+import _extends from "@babel/runtime/helpers/extends";
+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 triggerStyles = xcss({
+  display: 'inline-flex'
+});
+const AIIndicatorTooltip = ({
+  content,
+  trigger
+}) => {
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    component: AIIndicatorTooltipPrimitive,
+    content: content,
+    tag: "span"
+  }, tooltipProps => /*#__PURE__*/React.createElement(Box, _extends({
+    xcss: triggerStyles
+  }, tooltipProps), trigger));
+};
+export default AIIndicatorTooltip;

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

@@ -0,0 +1,12 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { CONTENT_URL_AI } from '../../../../../../constants';
+const AILearnMoreAnchor = ({
+  children,
+  ...props
+}) => /*#__PURE__*/React.createElement("a", _extends({
+  href: CONTENT_URL_AI,
+  target: "_blank",
+  rel: "noopener noreferrer"
+}, props), children);
+export default AILearnMoreAnchor;

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

@@ -0,0 +1,105 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { css, jsx } from '@emotion/react';
+import EditorPanelIcon from '@atlaskit/icon/glyph/editor/panel';
+import { Box, Inline, Stack, xcss } from '@atlaskit/primitives';
+import { messages } from '../../../../../../messages';
+import AIIcon from '../../../../../common/ai-icon';
+import AIIndicatorTooltip from './ai-indicator-tooltip';
+import AIIndicatorContainer from './ai-indicator-container';
+import AILearnMoreAnchor from './ai-learn-more-anchor';
+const tooltipMsgStyles = xcss({
+  color: 'color.text',
+  fontSize: '14px',
+  fontWeight: '400',
+  lineHeight: '20px'
+});
+const iconTooltipLinkStyles = css({
+  color: "var(--ds-text-subtlest, #626F86)",
+  '&:link, :visited': {
+    color: "var(--ds-text-subtlest, #626F86)"
+  },
+  '&:hover': {
+    color: "var(--ds-text-subtle, #44546F)"
+  },
+  '&:active': {
+    color: "var(--ds-text, #172B4D)"
+  },
+  textDecoration: 'underline'
+});
+const iconTooltipTitleStyles = xcss({
+  color: 'color.text',
+  fontSize: '12px',
+  fontWeight: '400',
+  lineHeight: '16px'
+});
+const iconTooltipDescStyles = xcss({
+  color: 'color.text.subtlest',
+  fontSize: '11px',
+  fontWeight: '400',
+  lineHeight: '14px'
+});
+const AIStateDone = ({
+  appearance,
+  testId
+}) => {
+  const icon = jsx(AIIcon, {
+    label: "AI",
+    size: "small",
+    testId: `${testId}-done-icon`
+  });
+  switch (appearance) {
+    case 'icon-only':
+      return jsx(AIIndicatorTooltip, {
+        content: jsx(Inline, {
+          alignBlock: "center",
+          space: "space.100"
+        }, jsx(AIIcon, {
+          label: "AI",
+          size: "medium",
+          testId: `${testId}-done-tooltip-icon`
+        }), jsx(Stack, null, jsx(Box, {
+          xcss: iconTooltipTitleStyles,
+          testId: `${testId}-done-tooltip-title`
+        }, jsx(FormattedMessage, messages.ai_summarized)), jsx(Box, {
+          xcss: iconTooltipDescStyles
+        }, jsx(FormattedMessage, _extends({}, messages.ai_summarized_info, {
+          values: {
+            a: chunks => jsx(AILearnMoreAnchor, {
+              css: iconTooltipLinkStyles
+            }, chunks)
+          }
+        }))))),
+        trigger: icon
+      });
+    default:
+      return jsx(AIIndicatorContainer, {
+        icon: icon,
+        content: jsx(Inline, {
+          alignBlock: "center",
+          alignInline: "start",
+          space: "space.050"
+        }, jsx(Box, {
+          testId: `${testId}-done-message`
+        }, jsx(FormattedMessage, messages.ai_summarized)), jsx(AIIndicatorTooltip, {
+          content: jsx(Box, {
+            xcss: tooltipMsgStyles,
+            testId: `${testId}-done-tooltip`
+          }, jsx(FormattedMessage, _extends({}, messages.ai_summarized_info, {
+            values: {
+              a: chunks => jsx(AILearnMoreAnchor, null, chunks)
+            }
+          }))),
+          trigger: jsx(EditorPanelIcon, {
+            label: "Info",
+            size: "small",
+            testId: `${testId}-done-info`
+          })
+        })),
+        testId: `${testId}-done`
+      });
+  }
+};
+export default AIStateDone;

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { Box } from '@atlaskit/primitives';
+import { messages } from '../../../../../../messages';
+import AIIconLoading from '../../../../../common/ai-icon-loading';
+import AIIndicatorContainer from './ai-indicator-container';
+const AIStateLoading = ({
+  appearance,
+  testId
+}) => {
+  const icon = /*#__PURE__*/React.createElement(AIIconLoading, {
+    label: "AI",
+    size: "small",
+    testId: `${testId}-loading-icon`
+  });
+  switch (appearance) {
+    case 'icon-only':
+      return icon;
+    default:
+      return /*#__PURE__*/React.createElement(AIIndicatorContainer, {
+        icon: icon,
+        content: /*#__PURE__*/React.createElement(Box, {
+          testId: `${testId}-loading-message`
+        }, /*#__PURE__*/React.createElement(FormattedMessage, messages.ai_summarizing)),
+        testId: `${testId}-loading`
+      });
+  }
+};
+export default AIStateLoading;

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

@@ -0,0 +1,26 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import React from 'react';
+import AIStateLoading from './ai-state-loading';
+import AIStateDone from './ai-state-done';
+const AIStateIndicator = ({
+  state,
+  appearance = 'default',
+  testId = 'ai-state-indicator'
+}) => {
+  switch (state) {
+    case 'loading':
+      return jsx(AIStateLoading, {
+        appearance: appearance,
+        testId: testId
+      });
+    case 'done':
+      return jsx(AIStateDone, {
+        appearance: appearance,
+        testId: testId
+      });
+    default:
+      return null;
+  }
+};
+export default AIStateIndicator;

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

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

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

@@ -1,13 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import { ActionName, SmartLinkAlignment, SmartLinkSize, SmartLinkWidth } from '../../../../../../constants';
-import { useFlexibleUiContext } from '../../../../../../state/flexible-ui-context';
+import { Box, Inline } from '@atlaskit/primitives';
+import { ActionName, SmartLinkSize, SmartLinkWidth } from '../../../../../../constants';
 import ActionGroup from '../../action-group';
 import Block from '../../block';
 import ElementGroup from '../../element-group';
-import { filterActionItems, getActionGroupStyles, renderElementItems } from '../../utils';
+import AIStateIndicator from '../ai-state-indicator';
+import { renderElementItems } from '../../utils';
 import { messages } from '../../../../../../messages';
+import AiIcon from '../../../../../common/ai-icon';
 const AISummaryBlockResolvedView = props => {
   const {
     actions = [],
@@ -17,26 +19,29 @@ const AISummaryBlockResolvedView = props => {
     onAIActionChange,
     size = SmartLinkSize.Medium
   } = props;
-  const context = useFlexibleUiContext();
+  const [aiState, setAIState] = useState('ready');
   const metadataElements = renderElementItems(metadata);
   const onAIActionClick = useCallback(() => {
+    setAIState('loading');
     if (onAIActionChange) {
-      onAIActionChange();
+      onAIActionChange('loading');
     }
   }, [onAIActionChange]);
   const combinedActions = useMemo(() => {
-    const aiAction = {
-      content: /*#__PURE__*/React.createElement(FormattedMessage, messages.ai_summarize),
-      name: ActionName.CustomAction,
-      onClick: onAIActionClick,
-      testId: `${testId}-ai-summary-action`
-    };
-    return [aiAction, ...actions];
-  }, [actions, onAIActionClick, testId]);
-  const hasActions = useMemo(() => {
-    var _filterActionItems;
-    return ((_filterActionItems = filterActionItems(combinedActions, context)) === null || _filterActionItems === void 0 ? void 0 : _filterActionItems.length) > 0;
-  }, [combinedActions, context]);
+    if (aiState === 'ready') {
+      const aiAction = {
+        content: /*#__PURE__*/React.createElement(FormattedMessage, messages.ai_summarize),
+        name: ActionName.CustomAction,
+        onClick: onAIActionClick,
+        testId: `${testId}-ai-summary-action`,
+        icon: /*#__PURE__*/React.createElement(AiIcon, {
+          label: "AiIcon"
+        })
+      };
+      return [aiAction, ...actions];
+    }
+    return actions;
+  }, [actions, aiState, onAIActionClick, testId]);
   const onDropdownOpenChange = useCallback(isOpen => {
     if (onActionMenuOpenChange) {
       onActionMenuOpenChange({
@@ -46,17 +51,21 @@ const AISummaryBlockResolvedView = props => {
   }, [onActionMenuOpenChange]);
   return /*#__PURE__*/React.createElement(Block, _extends({}, props, {
     testId: `${testId}-resolved-view`
-  }), /*#__PURE__*/React.createElement(ElementGroup, {
-    width: SmartLinkWidth.Flexible
-  }, metadataElements), hasActions && /*#__PURE__*/React.createElement(ElementGroup, {
-    testId: "smart-element-group-actions",
-    align: SmartLinkAlignment.Right,
-    overrideCss: getActionGroupStyles(size),
-    width: SmartLinkWidth.Flexible
-  }, /*#__PURE__*/React.createElement(ActionGroup, {
+  }), /*#__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, {
+    state: aiState,
+    testId: testId
+  }) : /*#__PURE__*/React.createElement(ElementGroup, {
+    width: SmartLinkWidth.FitToContent
+  }, metadataElements)), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(ActionGroup, {
     onDropdownOpenChange: onDropdownOpenChange,
     items: combinedActions,
-    appearance: "default"
-  })));
+    appearance: "default",
+    size: size
+  }))));
 };
 export default AISummaryBlockResolvedView;

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
-import { ActionName, CardDisplay, SmartLinkPosition, SmartLinkSize } from '../../../../../constants';
-import { FooterBlock, MetadataBlock, RelatedUrlsBlock, SnippetBlock, TitleBlock } from '../../../../FlexibleCard/components/blocks';
+import { ActionName, CardDisplay, ElementName, SmartLinkPosition, SmartLinkSize } from '../../../../../constants';
+import { FooterBlock, MetadataBlock, RelatedUrlsBlock, SnippetBlock, TitleBlock, AISummaryBlock } from '../../../../FlexibleCard/components/blocks';
 import { footerBlockCss, hiddenSnippetStyles, metadataBlockCss } from './styled';
 import FlexibleCard from '../../../../FlexibleCard';
 import { getSimulatedBetterMetadata } from '../../../utils';
@@ -11,6 +11,7 @@ import { messages } from '../../../../../messages';
 import { FormattedMessage } from 'react-intl-next';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getCanBeDatasource } from '../../../../../state/helpers';
+import { useSmartLinkContext } from '../../../../../state';
 export const toFooterActions = (cardActions, onActionClick) => {
   const followAction = {
     hideIcon: true,
@@ -55,7 +56,7 @@ const HoverCardResolvedView = ({
   extensionKey,
   url
 }) => {
-  var _cardState$details;
+  var _cardState$details, _cardState$details2, _cardState$details2$m, _cardState$details2$m2;
   const canBeDatasource = getCanBeDatasource(cardState.details);
   useEffect(() => {
     // Since this hover view is only rendered on resolved status,
@@ -90,6 +91,10 @@ const HoverCardResolvedView = ({
     data: data,
     fallbackElementHeight: snippetHeight.current
   });
+  const {
+    isAdminHubAIEnabled
+  } = useSmartLinkContext();
+  const showAiView = getBooleanFF('platform.linking-platform.smart-card.hover-card-ai-summaries') && isAdminHubAIEnabled && ((_cardState$details2 = cardState.details) === null || _cardState$details2 === void 0 ? void 0 : (_cardState$details2$m = _cardState$details2.meta) === null || _cardState$details2$m === void 0 ? void 0 : (_cardState$details2$m2 = _cardState$details2$m.supportedFeatures) === null || _cardState$details2$m2 === void 0 ? void 0 : _cardState$details2$m2.includes('AISummary'));
   return /*#__PURE__*/React.createElement(FlexibleCard, flexibleCardProps, imagePreview, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, titleBlockProps, {
     metadataPosition: SmartLinkPosition.Top
   })), /*#__PURE__*/React.createElement(MetadataBlock, {
@@ -111,7 +116,12 @@ const HoverCardResolvedView = ({
   }), getBooleanFF('platform.linking-platform.smart-card.enable-hover-card-related-urls') && /*#__PURE__*/React.createElement(RelatedUrlsBlock, {
     url: url,
     size: SmartLinkSize.Small
-  }), /*#__PURE__*/React.createElement(FooterBlock, {
+  }), showAiView ? /*#__PURE__*/React.createElement(AISummaryBlock, {
+    metadata: [{
+      name: ElementName.Provider
+    }],
+    actions: footerActions
+  }) : /*#__PURE__*/React.createElement(FooterBlock, {
     actions: footerActions,
     size: SmartLinkSize.Large,
     overrideCss: footerBlockCss

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

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

@@ -0,0 +1,64 @@
+/** @jsx jsx */
+import { css, jsx, keyframes } from '@emotion/react';
+import SVG from '@atlaskit/icon/svg';
+import { aiThemeTokens } from '../ai-prism/constants';
+
+/**
+ * The bulk of this file is originally from
+ * https://bitbucket.org/atlassian/barrel/src/master/ui/platform/ui-kit/ai
+ * with modifications
+ */
+
+const bounce = keyframes`
+  from {
+    transform: translateY(0);
+  }
+
+  // 200ms of 1200ms = 16.67%
+  16.67% {
+    transform: translateY(-2px);
+  }
+
+  // 400ms of 1200ms = 33.33%
+  33.33% {
+    transform: translateY(0px);
+  }
+`;
+const BASE_DELAY = 400;
+const QUEUE_DELAY = 200;
+const animationStyles = css({
+  animation: `${bounce} 1.2s linear infinite normal`
+});
+const firstDelayStyles = css({
+  animationDelay: `${BASE_DELAY + QUEUE_DELAY}ms`
+});
+const secondDelayStyles = css({
+  animationDelay: `${BASE_DELAY + QUEUE_DELAY * 2}ms`
+});
+const thirdDelayStyles = css({
+  animationDelay: `${BASE_DELAY + QUEUE_DELAY * 3}ms`
+});
+
+/**
+ * this icon is theme agnostic, no need for tokens
+ */
+const AIIconLoading = props => jsx(SVG, props, jsx("circle", {
+  css: [animationStyles, firstDelayStyles],
+  cx: "6",
+  cy: "12",
+  r: "1.5",
+  fill: aiThemeTokens.blue700
+}), jsx("circle", {
+  css: [animationStyles, secondDelayStyles],
+  cx: "12",
+  cy: "12",
+  r: "1.5",
+  fill: aiThemeTokens.blue600
+}), jsx("circle", {
+  css: [animationStyles, thirdDelayStyles],
+  cx: "17.5",
+  cy: "12",
+  r: "1.5",
+  fill: aiThemeTokens.blue500
+}));
+export default AIIconLoading;

package/dist/esm/constants.js

@@ -1,6 +1,6 @@
 export var CONTENT_URL_SECURITY_AND_PERMISSIONS = 'https://support.atlassian.com/confluence-cloud/docs/insert-links-and-anchors/#Smart-links';
 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';
 /**
  * The alignment of Flexible UI component.
  */

package/dist/esm/messages.js

@@ -18,6 +18,21 @@ export var messages = defineMessages({
     defaultMessage: 'Summarize',
     description: 'Action to summarize link resource content with AI'
   },
+  ai_summarized: {
+    id: 'fabric.linking.ai_summarized',
+    defaultMessage: 'Summarized by Atlassian Intelligence',
+    description: 'Shown with the content summarised by AI.'
+  },
+  ai_summarized_info: {
+    id: 'fabric.linking.ai_summarized_info',
+    defaultMessage: 'Information quality may vary. <a>Learn more</a>',
+    description: 'Additional info about the content summarised by AI.'
+  },
+  ai_summarizing: {
+    id: 'fabric.linking.ai_summarizing',
+    defaultMessage: 'Atlassian Intelligence is working...',
+    description: 'Shown when AI summary is summarising the link resource content.'
+  },
   assigned_to: {
     id: 'fabric.linking.assigned_to',
     defaultMessage: 'Assigned to {context}',

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

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

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Inline, xcss } from '@atlaskit/primitives';
+var contentStyles = xcss({
+  color: 'color.text.subtle',
+  fontSize: '12px',
+  fontWeight: '400',
+  lineHeight: '16px'
+});
+var AIIndicatorContainer = function AIIndicatorContainer(_ref) {
+  var icon = _ref.icon,
+    content = _ref.content,
+    testId = _ref.testId;
+  return /*#__PURE__*/React.createElement(Inline, {
+    alignBlock: "center",
+    alignInline: "start",
+    space: "space.050",
+    xcss: contentStyles,
+    testId: testId
+  }, icon, content);
+};
+export default AIIndicatorContainer;

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

@@ -0,0 +1,25 @@
+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 triggerStyles = xcss({
+  display: 'inline-flex'
+});
+var AIIndicatorTooltip = function AIIndicatorTooltip(_ref) {
+  var content = _ref.content,
+    trigger = _ref.trigger;
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    component: AIIndicatorTooltipPrimitive,
+    content: content,
+    tag: "span"
+  }, function (tooltipProps) {
+    return /*#__PURE__*/React.createElement(Box, _extends({
+      xcss: triggerStyles
+    }, tooltipProps), trigger);
+  });
+};
+export default AIIndicatorTooltip;

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

@@ -0,0 +1,15 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"];
+import React from 'react';
+import { CONTENT_URL_AI } from '../../../../../../constants';
+var AILearnMoreAnchor = function AILearnMoreAnchor(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("a", _extends({
+    href: CONTENT_URL_AI,
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, props), children);
+};
+export default AILearnMoreAnchor;

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

@@ -0,0 +1,108 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { css, jsx } from '@emotion/react';
+import EditorPanelIcon from '@atlaskit/icon/glyph/editor/panel';
+import { Box, Inline, Stack, xcss } from '@atlaskit/primitives';
+import { messages } from '../../../../../../messages';
+import AIIcon from '../../../../../common/ai-icon';
+import AIIndicatorTooltip from './ai-indicator-tooltip';
+import AIIndicatorContainer from './ai-indicator-container';
+import AILearnMoreAnchor from './ai-learn-more-anchor';
+var tooltipMsgStyles = xcss({
+  color: 'color.text',
+  fontSize: '14px',
+  fontWeight: '400',
+  lineHeight: '20px'
+});
+var iconTooltipLinkStyles = css({
+  color: "var(--ds-text-subtlest, #626F86)",
+  '&:link, :visited': {
+    color: "var(--ds-text-subtlest, #626F86)"
+  },
+  '&:hover': {
+    color: "var(--ds-text-subtle, #44546F)"
+  },
+  '&:active': {
+    color: "var(--ds-text, #172B4D)"
+  },
+  textDecoration: 'underline'
+});
+var iconTooltipTitleStyles = xcss({
+  color: 'color.text',
+  fontSize: '12px',
+  fontWeight: '400',
+  lineHeight: '16px'
+});
+var iconTooltipDescStyles = xcss({
+  color: 'color.text.subtlest',
+  fontSize: '11px',
+  fontWeight: '400',
+  lineHeight: '14px'
+});
+var AIStateDone = function AIStateDone(_ref) {
+  var appearance = _ref.appearance,
+    testId = _ref.testId;
+  var icon = jsx(AIIcon, {
+    label: "AI",
+    size: "small",
+    testId: "".concat(testId, "-done-icon")
+  });
+  switch (appearance) {
+    case 'icon-only':
+      return jsx(AIIndicatorTooltip, {
+        content: jsx(Inline, {
+          alignBlock: "center",
+          space: "space.100"
+        }, jsx(AIIcon, {
+          label: "AI",
+          size: "medium",
+          testId: "".concat(testId, "-done-tooltip-icon")
+        }), jsx(Stack, null, jsx(Box, {
+          xcss: iconTooltipTitleStyles,
+          testId: "".concat(testId, "-done-tooltip-title")
+        }, jsx(FormattedMessage, messages.ai_summarized)), jsx(Box, {
+          xcss: iconTooltipDescStyles
+        }, jsx(FormattedMessage, _extends({}, messages.ai_summarized_info, {
+          values: {
+            a: function a(chunks) {
+              return jsx(AILearnMoreAnchor, {
+                css: iconTooltipLinkStyles
+              }, chunks);
+            }
+          }
+        }))))),
+        trigger: icon
+      });
+    default:
+      return jsx(AIIndicatorContainer, {
+        icon: icon,
+        content: jsx(Inline, {
+          alignBlock: "center",
+          alignInline: "start",
+          space: "space.050"
+        }, jsx(Box, {
+          testId: "".concat(testId, "-done-message")
+        }, jsx(FormattedMessage, messages.ai_summarized)), jsx(AIIndicatorTooltip, {
+          content: jsx(Box, {
+            xcss: tooltipMsgStyles,
+            testId: "".concat(testId, "-done-tooltip")
+          }, jsx(FormattedMessage, _extends({}, messages.ai_summarized_info, {
+            values: {
+              a: function a(chunks) {
+                return jsx(AILearnMoreAnchor, null, chunks);
+              }
+            }
+          }))),
+          trigger: jsx(EditorPanelIcon, {
+            label: "Info",
+            size: "small",
+            testId: "".concat(testId, "-done-info")
+          })
+        })),
+        testId: "".concat(testId, "-done")
+      });
+  }
+};
+export default AIStateDone;