@atlaskit/smart-card 26.48.8 → 26.49.1

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

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect } from 'react';
 import { AISummariesStore } from './ai-summary-service/store';
 import { AISummaryService } from './ai-summary-service';
 export const useAISummary = props => {
@@ -6,50 +6,32 @@ export const useAISummary = props => {
   const {
     url,
     baseUrl,
-    product,
-    headers
+    headers,
+    product
   } = props;
   const [state, setState] = useState(((_AISummariesStore$get = AISummariesStore.get(url)) === null || _AISummariesStore$get === void 0 ? void 0 : _AISummariesStore$get.state) || {
     status: 'ready',
     content: ''
   });
-
-  // Can be used to know the summary status upon mounting a component (HoverCard UI state for example).
-  // For other scenarios, opt for dynamic status updates via state.status.
-  const isSummarisedOnMount = useMemo(() => {
-    var _AISummariesStore$get2;
-    return ((_AISummariesStore$get2 = AISummariesStore.get(url)) === null || _AISummariesStore$get2 === void 0 ? void 0 : _AISummariesStore$get2.state.status) === 'done';
-  }, [url]);
   useEffect(() => {
-    // Create or subscribe to an AI service only if a summary has not been previously generated.
-    // Otherwise, use the data from the current state synchronized with a cache (AISummariesStore).
-    if (!isSummarisedOnMount) {
-      const aISummaryService = AISummariesStore.get(url);
-      const isAISummaryServiceInitiated = !!aISummaryService;
-      if (isAISummaryServiceInitiated) {
-        //if we want to subscribe to updates from an existing AI service that has not yet provided a summary or is currently in progress.
-        const unsubscribe = aISummaryService.subscribe(setState);
-        return () => unsubscribe();
-      } else {
-        var _AISummariesStore$get3;
-        //if we want to create a new AI service and wish to subscribe for updates
-        AISummariesStore.set(url, new AISummaryService({
-          url,
-          baseUrl,
-          product,
-          headers
-        }));
-        const unsubscribe = (_AISummariesStore$get3 = AISummariesStore.get(url)) === null || _AISummariesStore$get3 === void 0 ? void 0 : _AISummariesStore$get3.subscribe(setState);
-        return () => unsubscribe && unsubscribe();
-      }
+    var _AISummariesStore$get2;
+    if (!AISummariesStore.get(url)) {
+      AISummariesStore.set(url, new AISummaryService({
+        url,
+        baseUrl,
+        headers,
+        product
+      }));
     }
-  }, [isSummarisedOnMount, url, baseUrl, product, headers]);
+
+    //returns function that calls unsubscribe method
+    return (_AISummariesStore$get2 = AISummariesStore.get(url)) === null || _AISummariesStore$get2 === void 0 ? void 0 : _AISummariesStore$get2.subscribe(setState);
+  }, [url, baseUrl, headers, product]);
   const summariseUrl = () => {
-    var _AISummariesStore$get4;
-    return (_AISummariesStore$get4 = AISummariesStore.get(url)) === null || _AISummariesStore$get4 === void 0 ? void 0 : _AISummariesStore$get4.summariseUrl();
+    var _AISummariesStore$get3;
+    return (_AISummariesStore$get3 = AISummariesStore.get(url)) === null || _AISummariesStore$get3 === void 0 ? void 0 : _AISummariesStore$get3.summariseUrl();
   };
   return {
-    isSummarisedOnMount,
     summariseUrl,
     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.8"
+  packageVersion: "26.49.1"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/es2019/view/EmbedCard/components/ExpandedFrame.js

@@ -1,7 +1,9 @@
 import React from 'react';
-import { className, LinkWrapper, Wrapper, Header, IconWrapper, TextWrapper, Content } from './styled';
+import { className, LinkWrapper, Wrapper, Header, IconWrapper, TextWrapper, TooltipWrapper, Content } from './styled';
 import { handleClickCommon } from '../../BlockCard/utils/handlers';
 import { useMouseDownEvent } from '../../../state/analytics/useLinkClicked';
+import Tooltip from '@atlaskit/tooltip';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export const ExpandedFrame = ({
   isPlaceholder = false,
   children,
@@ -20,7 +22,7 @@ export const ExpandedFrame = ({
   const isInteractive = () => !isPlaceholder && (Boolean(href) || Boolean(onClick));
   const handleClick = event => handleClickCommon(event, onClick);
   const handleMouseDown = useMouseDownEvent();
-  const renderHeader = () => /*#__PURE__*/React.createElement(Header, {
+  const renderHeaderOld = () => /*#__PURE__*/React.createElement(Header, {
     className: "embed-header",
     frameStyle: frameStyle
   }, /*#__PURE__*/React.createElement(IconWrapper, {
@@ -32,6 +34,21 @@ export const ExpandedFrame = ({
     onClick: handleClick,
     onMouseDown: handleMouseDown
   }, text)));
+  const renderHeader = () => /*#__PURE__*/React.createElement(Header, {
+    className: "embed-header",
+    frameStyle: frameStyle
+  }, /*#__PURE__*/React.createElement(IconWrapper, {
+    isPlaceholder: isPlaceholder
+  }, !isPlaceholder && icon), /*#__PURE__*/React.createElement(TooltipWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
+    content: text,
+    hideTooltipOnMouseDown: true
+  }, /*#__PURE__*/React.createElement(TextWrapper, {
+    isPlaceholder: isPlaceholder
+  }, !isPlaceholder && /*#__PURE__*/React.createElement("a", {
+    href: href,
+    onClick: handleClick,
+    onMouseDown: handleMouseDown
+  }, text)))));
   const renderContent = () => /*#__PURE__*/React.createElement(Content, {
     "data-testid": "embed-content-wrapper",
     allowScrollBar: allowScrollBar,
@@ -52,7 +69,7 @@ export const ExpandedFrame = ({
       ,
       "data-is-selected": isSelected,
       inheritDimensions: inheritDimensions
-    }, renderHeader(), renderContent());
+    }, getBooleanFF('platform.linking-platform.smart-card.embed-card-header-tooltip') ? renderHeader() : renderHeaderOld(), renderContent());
   } else {
     return /*#__PURE__*/React.createElement(Wrapper, {
       className: className,
@@ -66,6 +83,6 @@ export const ExpandedFrame = ({
       "data-is-selected": isSelected,
       "data-wrapper-type": "default",
       "data-is-interactive": isInteractive()
-    }, renderHeader(), renderContent());
+    }, getBooleanFF('platform.linking-platform.smart-card.embed-card-header-tooltip') ? renderHeader() : renderHeaderOld(), renderContent());
   }
 };

package/dist/es2019/view/EmbedCard/components/styled.js

@@ -136,6 +136,8 @@ function visible({
 }) {
   return frameStyle === 'show' ? visibleStyles : '';
 }
+
+// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression
 export const LinkWrapper = styled.div`
   ${props => wrapperStyles(props)} &:hover {
     text-decoration: none;
@@ -143,33 +145,27 @@ export const LinkWrapper = styled.div`
 `;
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const Wrapper = styled.div`
-  ${props => wrapperStyles(props)};
-  margin-top: 10px;
-`;
+export const Wrapper = styled.div(props => wrapperStyles(props), {
+  marginTop: '10px'
+});
 export const embedHeaderHeight = 32;
-export const Header = styled.div`
-  height: ${embedHeaderHeight}px;
-  position: absolute;
-  z-index: 1;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  color: ${`var(--ds-icon, ${colors.N300})`};
-  opacity: 0;
-  transition: 300ms opacity cubic-bezier(0.15, 1, 0.3, 1);
-
-  ${({
+export const Header = styled.div({
+  height: `${embedHeaderHeight}px`,
+  position: 'absolute',
+  zIndex: 1,
+  width: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  color: `var(--ds-icon, ${colors.N300})`,
+  opacity: 0,
+  transition: '300ms opacity cubic-bezier(0.15, 1, 0.3, 1)'
+}, ({
   frameStyle
 }) => getBooleanFF('platform.editor.show-embed-card-frame-renderer') && frameStyle === 'show' ? `
         box-sizing: border-box;
         padding: 0 ${"var(--ds-space-100, 8px)"};
-      ` : ''}
-`;
-export const IconWrapper = styled.div`
-  ${borderRadius}
-  ${csssize(16)}
-  ${({
+      ` : '');
+export const IconWrapper = styled.div(borderRadius, csssize(16), ({
   isPlaceholder
 }) => {
   if (isPlaceholder) {
@@ -179,10 +175,10 @@ export const IconWrapper = styled.div`
   } else {
     return '';
   }
-}} margin-right: 4px;
-`;
-export const TextWrapper = styled.div`
-  ${({
+}, {
+  marginRight: "var(--ds-space-050, 4px)"
+});
+export const TextWrapper = styled.div(({
   isPlaceholder
 }) => {
   if (isPlaceholder) {
@@ -195,14 +191,18 @@ export const TextWrapper = styled.div`
   } else {
     return '';
   }
-}} color: ${`var(--ds-text-subtlest, ${colors.N300})`};
-  font-size: 12px;
-  line-height: 16px;
-  ${ellipsis('none')};
-`;
+}, {
+  color: `var(--ds-text-subtlest, ${colors.N300})`,
+  fontSize: '12px',
+  lineHeight: '16px'
+}, ellipsis('none'));
+export const TooltipWrapper = styled.div({
+  overflow: 'hidden'
+});
 // NB: `overflow` is kept as `hidden` since
 // the internal contents of the `iframe` should
 // manage scrolling behaviour.
+// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression
 export const Content = styled.div`
   ${contentBorderRadius};
   border: 1px solid ${`var(--ds-border, ${N40})`};
@@ -241,88 +241,76 @@ export const Content = styled.div`
         top: ${"var(--ds-space-400, 32px)"};
       `}
 `;
-export const Image = styled.img`
-  ${({
+export const Image = styled.img(({
   size
-}) => csssize(size)}
-  ${borderRadius}
-
-  /* hide the alt text when the image cannot be found */
-  overflow: hidden;
-`;
+}) => csssize(size), borderRadius, {
+  overflow: 'hidden'
+});
 export const maxAvatarCount = 6;
-export const ContentWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  box-sizing: border-box;
-  padding: ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-150, 12px)"}
-    ${"var(--ds-space-150, 12px)"} ${"var(--ds-space-150, 12px)"};
-`;
-export const Title = styled.div`
-  color: ${`var(--ds-text, ${colors.N900})`};
-  font-size: 16px;
-  font-weight: 500;
-  line-height: ${20 / 16};
-  max-height: ${20 * 4}px;
-  overflow: hidden;
-`;
-export const Byline = styled.div`
-  margin-top: ${"var(--ds-space-050, 4px)"};
-  color: ${`var(--ds-text-subtlest, ${colors.N300})`};
-  font-size: 12px;
-  font-weight: normal;
-  line-height: ${16 / 12};
-  ${ellipsis('100%')};
-`;
+export const ContentWrapper = styled.div({
+  display: 'flex',
+  flexDirection: 'row',
+  boxSizing: 'border-box',
+  padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-150, 12px)"} ${"var(--ds-space-150, 12px)"} ${"var(--ds-space-150, 12px)"}`
+});
+export const Title = styled.div({
+  color: `var(--ds-text, ${colors.N900})`,
+  fontSize: '16px',
+  fontWeight: 500,
+  lineHeight: 20 / 16,
+  maxHeight: `${20 * 4}px`,
+  overflow: 'hidden'
+});
+export const Byline = styled.div({
+  marginTop: "var(--ds-space-050, 4px)",
+  color: `var(--ds-text-subtlest, ${colors.N300})`,
+  fontSize: '12px',
+  fontWeight: 'normal',
+  lineHeight: 16 / 12
+}, ellipsis('100%'));
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const Description = styled.div`
-  margin-top: 7px;
-  color: ${`var(--ds-text, ${colors.N800})`};
-  font-size: 12px;
-  font-weight: normal;
-  line-height: ${18 / 12};
-  max-height: ${18 * 3}px;
-  overflow: hidden;
-`;
-export const ResolvedViewIconWrapper = styled.div`
-  margin-top: ${"var(--ds-space-050, 4px)"};
-`;
-export const Thumbnail = styled.div`
-  ${borderRadius}
-  ${csssize(48)}
-  float: right;
-  margin: ${"var(--ds-space-050, 4px)"} 0 ${"var(--ds-space-150, 12px)"}
-    ${"var(--ds-space-150, 12px)"};
-  background-color: ${`var(--ds-skeleton, ${colors.N30})`};
-  background-image: url(${({
-  src
-}) => src});
-  background-size: cover;
-`;
-export const UsersWrapper = styled.div`
-  margin-top: ${"var(--ds-space-100, 8px)"};
-`;
-export const ActionsWrapper = styled.div`
-  margin-top: ${"var(--ds-space-100, 8px)"};
-  text-align: right;
-
-  > * {
-    margin-top: ${"var(--ds-space-050, 4px)"};
+export const Description = styled.div({
+  marginTop: '7px',
+  color: `var(--ds-text, ${colors.N800})`,
+  fontSize: '12px',
+  fontWeight: 'normal',
+  lineHeight: 18 / 12,
+  maxHeight: `${18 * 3}px`,
+  overflow: 'hidden'
+});
+export const ResolvedViewIconWrapper = styled.div({
+  marginTop: "var(--ds-space-050, 4px)"
+});
+export const Thumbnail = styled.div(borderRadius, csssize(48), {
+  float: 'right',
+  margin: `${"var(--ds-space-050, 4px)"} 0 ${"var(--ds-space-150, 12px)"} ${"var(--ds-space-150, 12px)"}`,
+  backgroundColor: `var(--ds-skeleton, ${colors.N30})`,
+  backgroundImage: `url(${({
+    src
+  }) => src})`,
+  backgroundSize: 'cover'
+});
+export const UsersWrapper = styled.div({
+  marginTop: "var(--ds-space-100, 8px)"
+});
+export const ActionsWrapper = styled.div({
+  marginTop: "var(--ds-space-100, 8px)",
+  textAlign: 'right',
+  '> *': {
+    marginTop: "var(--ds-space-050, 4px)"
+  },
+  '> * + *': {
+    marginLeft: "var(--ds-space-050, 4px)"
   }
-
-  > * + * {
-    margin-left: ${"var(--ds-space-050, 4px)"};
-  }
-`;
-export const AlertWrapper = styled.div`
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  overflow: hidden;
-  pointer-events: none;
-  /* z-index has to be 1 higher than the number of avatars in the avatar stack */
-  z-index: ${maxAvatarCount + 1};
-`;
+});
+export const AlertWrapper = styled.div({
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  overflow: 'hidden',
+  pointerEvents: 'none',
+  zIndex: maxAvatarCount + 1
+});

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

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState, useEffect } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { Box, Inline } from '@atlaskit/primitives';
 import { ActionName, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../../constants';
@@ -21,40 +21,46 @@ const AISummaryBlockResolvedView = props => {
     actions = [],
     metadata,
     onActionMenuOpenChange,
-    onAIActionChange,
     size = SmartLinkSize.Medium,
-    testId
+    testId,
+    aiSummaryMinHeight
   } = props;
-  const [aiState, setAIState] = useState('ready');
+  const metadataElements = renderElementItems(metadata);
   const {
     fireEvent
   } = useAnalyticsEvents();
-  const metadataElements = renderElementItems(metadata);
   const context = useFlexibleUiContext();
   const url = (context === null || context === void 0 ? void 0 : context.url) || '';
-  const aiSummary = useAISummary({
-    url
-  });
   const {
+    summariseUrl,
     state: {
       content,
       status
-    },
-    isSummarisedOnMount
-  } = aiSummary;
-  const onAIActionClick = useCallback(() => {
-    fireEvent('ui.button.clicked.aiSummary', {});
-    setAIState('loading');
-    if (onAIActionChange) {
-      onAIActionChange('loading');
     }
-  }, [onAIActionChange, fireEvent]);
+  } = useAISummary({
+    url
+  });
+  const showAISummary = status !== 'ready' && status !== 'error';
+  const isSummarisedOnMountRef = useRef(status === 'done');
+  let isErroredOnMountRef = useRef(status === 'error');
+  const [showAISummaryErrorMessage, setShowAISummaryErrorMessage] = useState(false);
+  useEffect(() => {
+    if (isErroredOnMountRef.current && status === 'loading') {
+      isErroredOnMountRef.current = false;
+      setShowAISummaryErrorMessage(true);
+    } else {
+      setShowAISummaryErrorMessage(!isErroredOnMountRef.current && status === 'error');
+    }
+  }, [status]);
   const combinedActions = useMemo(() => {
-    if (aiState === 'ready') {
+    if (status === 'ready' || status === 'error') {
       const aiAction = {
         content: /*#__PURE__*/React.createElement(FormattedMessage, messages.ai_summarize),
         name: ActionName.CustomAction,
-        onClick: onAIActionClick,
+        onClick: () => {
+          fireEvent('ui.button.clicked.aiSummary', {});
+          summariseUrl();
+        },
         testId: `${testId}-ai-summary-action`,
         icon: /*#__PURE__*/React.createElement(AIIcon, {
           label: "AIIcon"
@@ -63,7 +69,7 @@ const AISummaryBlockResolvedView = props => {
       return [aiAction, ...actions];
     }
     return actions;
-  }, [actions, aiState, onAIActionClick, testId]);
+  }, [actions, status, testId, summariseUrl, fireEvent]);
   const onDropdownOpenChange = useCallback(isOpen => {
     if (onActionMenuOpenChange) {
       onActionMenuOpenChange({
@@ -75,17 +81,18 @@ const AISummaryBlockResolvedView = props => {
     direction: SmartLinkDirection.Vertical,
     testId: `${testId}-resolved-view`
   }), status === 'done' && /*#__PURE__*/React.createElement(AIEventSummaryViewed, {
-    fromCache: isSummarisedOnMount
-  }), /*#__PURE__*/React.createElement(AISummary, {
+    fromCache: isSummarisedOnMountRef.current
+  }), showAISummary && /*#__PURE__*/React.createElement(AISummary, {
+    minHeight: aiSummaryMinHeight,
     content: content,
-    showIcon: isSummarisedOnMount
+    showIcon: isSummarisedOnMountRef.current
   }), /*#__PURE__*/React.createElement(Inline, {
     alignBlock: "center",
     alignInline: "end",
     grow: "fill",
     spread: "space-between"
-  }, /*#__PURE__*/React.createElement(Box, null, !isSummarisedOnMount && (aiState === 'loading' || aiState === 'done') ? /*#__PURE__*/React.createElement(AIStateIndicator, {
-    state: aiState,
+  }, /*#__PURE__*/React.createElement(Box, null, !isSummarisedOnMountRef.current && (status === 'loading' || status === 'done') ? /*#__PURE__*/React.createElement(AIStateIndicator, {
+    state: status,
     testId: `${testId}-state-indicator`
   }) : /*#__PURE__*/React.createElement(ElementGroup, {
     width: SmartLinkWidth.FitToContent,
@@ -95,7 +102,7 @@ const AISummaryBlockResolvedView = props => {
     items: combinedActions,
     appearance: "default",
     size: size
-  }))), status === 'error' && /*#__PURE__*/React.createElement(Inline, {
+  }))), showAISummaryErrorMessage && /*#__PURE__*/React.createElement(Inline, {
     grow: "fill"
   }, /*#__PURE__*/React.createElement(AIEventErrorViewed, null), /*#__PURE__*/React.createElement(AIStateIndicator, {
     state: status,

package/dist/es2019/view/FlexibleCard/components/common/atlaskit-icon/index.js

@@ -88,7 +88,6 @@ const importIcon = importFn => {
     loading: () => null
   }); // Because we're using dynamic loading here, TS will not be able to infer the type.
 };
-
 const AtlaskitIcon = ({
   icon,
   label,
@@ -123,7 +122,6 @@ const AtlaskitIcon = ({
         iconGradientStop: B200
         /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
       });
-
     case IconType.Jira:
       // Logo component has a different prop set from other icon components
       return /*#__PURE__*/React.createElement(ImportedIcon, {
@@ -135,7 +133,6 @@ const AtlaskitIcon = ({
         iconGradientStop: B200
         /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
       });
-
     case IconType.Error:
     case IconType.Forbidden:
       return /*#__PURE__*/React.createElement(ImportedIcon, {

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

@@ -1,28 +1,53 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { HoverCardContainer, popupContainerStyles } from '../styled';
 import AIPrism from '../../common/ai-prism';
 import { hoverCardClassName } from './HoverCardContent';
+import { useAISummary } from '../../../state/hooks/use-ai-summary';
+const ConnectedAIPrismContainer = ({
+  children,
+  isAIEnabled = false,
+  testId,
+  url,
+  ...props
+}) => {
+  const {
+    state: {
+      status
+    }
+  } = useAISummary({
+    url
+  });
+  const [showPrism, setShowPrism] = useState(status === 'loading');
+  useEffect(() => {
+    setShowPrism(status === 'loading');
+  }, [status]);
+  const container = jsx("div", _extends({
+    className: hoverCardClassName,
+    css: [HoverCardContainer, isAIEnabled && showPrism ? undefined : popupContainerStyles],
+    "data-testid": testId
+  }, props), children);
+  return isAIEnabled ? jsx(AIPrism, {
+    isVisible: showPrism,
+    testId: `${testId}-prism`
+  }, container) : container;
+};
 const ContentContainer = ({
   children,
   isAIEnabled = false,
-  showPrism = false,
   testId,
+  url,
   ...props
 }) => {
   if (getBooleanFF('platform.linking-platform.smart-card.hover-card-ai-summaries')) {
-    const container = jsx("div", _extends({
-      className: hoverCardClassName,
-      css: [HoverCardContainer, isAIEnabled && showPrism ? undefined : popupContainerStyles],
-      "data-testid": testId
+    return jsx(ConnectedAIPrismContainer, _extends({
+      isAIEnabled: isAIEnabled,
+      url: url,
+      testId: testId
     }, props), children);
-    return isAIEnabled ? jsx(AIPrism, {
-      isVisible: showPrism,
-      testId: `${testId}-prism`
-    }, container) : container;
   }
   return jsx("div", _extends({
     className: hoverCardClassName,

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

@@ -2,7 +2,7 @@
 import { jsx } from '@emotion/react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import CopyIcon from '@atlaskit/icon/glyph/copy';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
 import { ActionName, CardDisplay, SmartLinkPosition, SmartLinkSize } from '../../../constants';
 import { extractMetadata } from '../../../extractors/hover/extractMetadata';
@@ -61,7 +61,6 @@ const HoverCardContent = ({
   const services = getServices(linkState.details);
   const statusRef = useRef(linkStatus);
   const analyticsRef = useRef(analytics);
-  const [showPrism, setShowPrism] = useState(false);
   useEffect(() => {
     /**
      * Must access current analytics object value via ref because its not stable
@@ -131,9 +130,6 @@ const HoverCardContent = ({
     analytics
   };
   const onClickStopPropagation = useCallback(e => e.stopPropagation(), []);
-  const onAIActionChange = useCallback(state => {
-    setShowPrism(state === 'loading');
-  }, []);
   const getCardView = cardState => {
     if (cardState.metadataStatus === 'pending') {
       return jsx(HoverCardLoadingView, {
@@ -166,7 +162,6 @@ const HoverCardContent = ({
         flexibleCardProps: flexibleCardProps,
         isAISummaryEnabled: isAISummaryEnabled,
         onActionClick: onActionClick,
-        onAIActionChange: onAIActionChange,
         titleBlockProps: titleBlockProps
       });
     }
@@ -178,7 +173,7 @@ const HoverCardContent = ({
     onMouseLeave: onMouseLeave,
     onClick: onClickStopPropagation,
     isAIEnabled: isAISummaryEnabled,
-    showPrism: showPrism
+    url: url
   }, cardView) : null;
 };
 export default HoverCardContent;