@atlaskit/smart-card 26.49.0 → 26.49.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/dist/cjs/state/hooks/use-ai-summary/ai-summary-service/index.js +39 -27
- package/dist/cjs/state/hooks/use-ai-summary/index.js +16 -38
- package/dist/cjs/utils/analytics/analytics.js +1 -1
- package/dist/cjs/view/FlexibleCard/components/blocks/ai-summary-block/resolved/index.js +37 -29
- package/dist/cjs/view/HoverCard/components/ContentContainer.js +42 -13
- package/dist/cjs/view/HoverCard/components/HoverCardContent.js +1 -10
- package/dist/cjs/view/HoverCard/components/views/resolved/index.js +63 -16
- package/dist/cjs/view/LinkUrl/index.js +1 -1
- package/dist/cjs/view/common/ai-summary/index.js +9 -3
- package/dist/es2019/state/hooks/use-ai-summary/ai-summary-service/index.js +14 -5
- package/dist/es2019/state/hooks/use-ai-summary/index.js +17 -35
- package/dist/es2019/utils/analytics/analytics.js +1 -1
- package/dist/es2019/view/FlexibleCard/components/blocks/ai-summary-block/resolved/index.js +33 -26
- package/dist/es2019/view/HoverCard/components/ContentContainer.js +35 -10
- package/dist/es2019/view/HoverCard/components/HoverCardContent.js +2 -7
- package/dist/es2019/view/HoverCard/components/views/resolved/index.js +56 -7
- package/dist/es2019/view/LinkUrl/index.js +1 -1
- package/dist/es2019/view/common/ai-summary/index.js +7 -3
- package/dist/esm/state/hooks/use-ai-summary/ai-summary-service/index.js +39 -27
- package/dist/esm/state/hooks/use-ai-summary/index.js +17 -39
- package/dist/esm/utils/analytics/analytics.js +1 -1
- package/dist/esm/view/FlexibleCard/components/blocks/ai-summary-block/resolved/index.js +38 -30
- package/dist/esm/view/HoverCard/components/ContentContainer.js +39 -13
- package/dist/esm/view/HoverCard/components/HoverCardContent.js +2 -11
- package/dist/esm/view/HoverCard/components/views/resolved/index.js +66 -18
- package/dist/esm/view/LinkUrl/index.js +1 -1
- package/dist/esm/view/common/ai-summary/index.js +9 -3
- package/dist/types/state/hooks/use-ai-summary/ai-summary-service/types.d.ts +3 -1
- package/dist/types/state/hooks/use-ai-summary/index.d.ts +0 -1
- package/dist/types/view/FlexibleCard/components/blocks/ai-summary-block/ai-state-indicator/types.d.ts +2 -2
- package/dist/types/view/FlexibleCard/components/blocks/ai-summary-block/types.d.ts +2 -3
- package/dist/types/view/HoverCard/components/views/resolved/types.d.ts +0 -2
- package/dist/types/view/HoverCard/types.d.ts +1 -1
- package/dist/types/view/common/ai-summary/index.d.ts +4 -0
- package/dist/types-ts4.5/state/hooks/use-ai-summary/ai-summary-service/types.d.ts +3 -1
- package/dist/types-ts4.5/state/hooks/use-ai-summary/index.d.ts +0 -1
- package/dist/types-ts4.5/view/FlexibleCard/components/blocks/ai-summary-block/ai-state-indicator/types.d.ts +2 -2
- package/dist/types-ts4.5/view/FlexibleCard/components/blocks/ai-summary-block/types.d.ts +2 -3
- package/dist/types-ts4.5/view/HoverCard/components/views/resolved/types.d.ts +0 -2
- package/dist/types-ts4.5/view/HoverCard/types.d.ts +1 -1
- package/dist/types-ts4.5/view/common/ai-summary/index.d.ts +4 -0
- package/package.json +2 -2
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
|
-
import { useState, useEffect
|
|
2
|
+
import { useState, useEffect } from 'react';
|
|
3
3
|
import { AISummariesStore } from './ai-summary-service/store';
|
|
4
4
|
import { AISummaryService } from './ai-summary-service';
|
|
5
5
|
export var useAISummary = function useAISummary(props) {
|
|
6
6
|
var _AISummariesStore$get;
|
|
7
7
|
var url = props.url,
|
|
8
8
|
baseUrl = props.baseUrl,
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
headers = props.headers,
|
|
10
|
+
product = props.product;
|
|
11
11
|
var _useState = useState(((_AISummariesStore$get = AISummariesStore.get(url)) === null || _AISummariesStore$get === void 0 ? void 0 : _AISummariesStore$get.state) || {
|
|
12
12
|
status: 'ready',
|
|
13
13
|
content: ''
|
|
@@ -15,47 +15,25 @@ export var useAISummary = function useAISummary(props) {
|
|
|
15
15
|
_useState2 = _slicedToArray(_useState, 2),
|
|
16
16
|
state = _useState2[0],
|
|
17
17
|
setState = _useState2[1];
|
|
18
|
-
|
|
19
|
-
// Can be used to know the summary status upon mounting a component (HoverCard UI state for example).
|
|
20
|
-
// For other scenarios, opt for dynamic status updates via state.status.
|
|
21
|
-
var isSummarisedOnMount = useMemo(function () {
|
|
22
|
-
var _AISummariesStore$get2;
|
|
23
|
-
return ((_AISummariesStore$get2 = AISummariesStore.get(url)) === null || _AISummariesStore$get2 === void 0 ? void 0 : _AISummariesStore$get2.state.status) === 'done';
|
|
24
|
-
}, [url]);
|
|
25
18
|
useEffect(function () {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
return function () {
|
|
35
|
-
return unsubscribe();
|
|
36
|
-
};
|
|
37
|
-
} else {
|
|
38
|
-
var _AISummariesStore$get3;
|
|
39
|
-
//if we want to create a new AI service and wish to subscribe for updates
|
|
40
|
-
AISummariesStore.set(url, new AISummaryService({
|
|
41
|
-
url: url,
|
|
42
|
-
baseUrl: baseUrl,
|
|
43
|
-
product: product,
|
|
44
|
-
headers: headers
|
|
45
|
-
}));
|
|
46
|
-
var _unsubscribe = (_AISummariesStore$get3 = AISummariesStore.get(url)) === null || _AISummariesStore$get3 === void 0 ? void 0 : _AISummariesStore$get3.subscribe(setState);
|
|
47
|
-
return function () {
|
|
48
|
-
return _unsubscribe && _unsubscribe();
|
|
49
|
-
};
|
|
50
|
-
}
|
|
19
|
+
var _AISummariesStore$get2;
|
|
20
|
+
if (!AISummariesStore.get(url)) {
|
|
21
|
+
AISummariesStore.set(url, new AISummaryService({
|
|
22
|
+
url: url,
|
|
23
|
+
baseUrl: baseUrl,
|
|
24
|
+
headers: headers,
|
|
25
|
+
product: product
|
|
26
|
+
}));
|
|
51
27
|
}
|
|
52
|
-
|
|
28
|
+
|
|
29
|
+
//returns function that calls unsubscribe method
|
|
30
|
+
return (_AISummariesStore$get2 = AISummariesStore.get(url)) === null || _AISummariesStore$get2 === void 0 ? void 0 : _AISummariesStore$get2.subscribe(setState);
|
|
31
|
+
}, [url, baseUrl, headers, product]);
|
|
53
32
|
var summariseUrl = function summariseUrl() {
|
|
54
|
-
var _AISummariesStore$
|
|
55
|
-
return (_AISummariesStore$
|
|
33
|
+
var _AISummariesStore$get3;
|
|
34
|
+
return (_AISummariesStore$get3 = AISummariesStore.get(url)) === null || _AISummariesStore$get3 === void 0 ? void 0 : _AISummariesStore$get3.summariseUrl();
|
|
56
35
|
};
|
|
57
36
|
return {
|
|
58
|
-
isSummarisedOnMount: isSummarisedOnMount,
|
|
59
37
|
summariseUrl: summariseUrl,
|
|
60
38
|
state: state
|
|
61
39
|
};
|
|
@@ -15,7 +15,7 @@ export var ANALYTICS_CHANNEL = 'media';
|
|
|
15
15
|
export var context = {
|
|
16
16
|
componentName: 'smart-cards',
|
|
17
17
|
packageName: "@atlaskit/smart-card",
|
|
18
|
-
packageVersion: "26.49.
|
|
18
|
+
packageVersion: "26.49.1"
|
|
19
19
|
};
|
|
20
20
|
export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
|
|
21
21
|
TrackQuickActionType["StatusUpdate"] = "StatusUpdate";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
3
3
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
4
|
-
import React, { useCallback, useMemo, useState } from 'react';
|
|
4
|
+
import React, { useCallback, useMemo, useRef, useState, useEffect } from 'react';
|
|
5
5
|
import { FormattedMessage } from 'react-intl-next';
|
|
6
6
|
import { Box, Inline } from '@atlaskit/primitives';
|
|
7
7
|
import { ActionName, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../../constants';
|
|
@@ -23,39 +23,46 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
|
|
|
23
23
|
actions = _props$actions === void 0 ? [] : _props$actions,
|
|
24
24
|
metadata = props.metadata,
|
|
25
25
|
onActionMenuOpenChange = props.onActionMenuOpenChange,
|
|
26
|
-
onAIActionChange = props.onAIActionChange,
|
|
27
26
|
_props$size = props.size,
|
|
28
27
|
size = _props$size === void 0 ? SmartLinkSize.Medium : _props$size,
|
|
29
|
-
testId = props.testId
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
aiState = _useState2[0],
|
|
33
|
-
setAIState = _useState2[1];
|
|
28
|
+
testId = props.testId,
|
|
29
|
+
aiSummaryMinHeight = props.aiSummaryMinHeight;
|
|
30
|
+
var metadataElements = renderElementItems(metadata);
|
|
34
31
|
var _useAnalyticsEvents = useAnalyticsEvents(),
|
|
35
32
|
fireEvent = _useAnalyticsEvents.fireEvent;
|
|
36
|
-
var metadataElements = renderElementItems(metadata);
|
|
37
33
|
var context = useFlexibleUiContext();
|
|
38
34
|
var url = (context === null || context === void 0 ? void 0 : context.url) || '';
|
|
39
|
-
var
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
var
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
35
|
+
var _useAISummary = useAISummary({
|
|
36
|
+
url: url
|
|
37
|
+
}),
|
|
38
|
+
summariseUrl = _useAISummary.summariseUrl,
|
|
39
|
+
_useAISummary$state = _useAISummary.state,
|
|
40
|
+
content = _useAISummary$state.content,
|
|
41
|
+
status = _useAISummary$state.status;
|
|
42
|
+
var showAISummary = status !== 'ready' && status !== 'error';
|
|
43
|
+
var isSummarisedOnMountRef = useRef(status === 'done');
|
|
44
|
+
var isErroredOnMountRef = useRef(status === 'error');
|
|
45
|
+
var _useState = useState(false),
|
|
46
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
47
|
+
showAISummaryErrorMessage = _useState2[0],
|
|
48
|
+
setShowAISummaryErrorMessage = _useState2[1];
|
|
49
|
+
useEffect(function () {
|
|
50
|
+
if (isErroredOnMountRef.current && status === 'loading') {
|
|
51
|
+
isErroredOnMountRef.current = false;
|
|
52
|
+
setShowAISummaryErrorMessage(true);
|
|
53
|
+
} else {
|
|
54
|
+
setShowAISummaryErrorMessage(!isErroredOnMountRef.current && status === 'error');
|
|
51
55
|
}
|
|
52
|
-
}, [
|
|
56
|
+
}, [status]);
|
|
53
57
|
var combinedActions = useMemo(function () {
|
|
54
|
-
if (
|
|
58
|
+
if (status === 'ready' || status === 'error') {
|
|
55
59
|
var aiAction = {
|
|
56
60
|
content: /*#__PURE__*/React.createElement(FormattedMessage, messages.ai_summarize),
|
|
57
61
|
name: ActionName.CustomAction,
|
|
58
|
-
onClick:
|
|
62
|
+
onClick: function onClick() {
|
|
63
|
+
fireEvent('ui.button.clicked.aiSummary', {});
|
|
64
|
+
summariseUrl();
|
|
65
|
+
},
|
|
59
66
|
testId: "".concat(testId, "-ai-summary-action"),
|
|
60
67
|
icon: /*#__PURE__*/React.createElement(AIIcon, {
|
|
61
68
|
label: "AIIcon"
|
|
@@ -64,7 +71,7 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
|
|
|
64
71
|
return [aiAction].concat(_toConsumableArray(actions));
|
|
65
72
|
}
|
|
66
73
|
return actions;
|
|
67
|
-
}, [actions,
|
|
74
|
+
}, [actions, status, testId, summariseUrl, fireEvent]);
|
|
68
75
|
var onDropdownOpenChange = useCallback(function (isOpen) {
|
|
69
76
|
if (onActionMenuOpenChange) {
|
|
70
77
|
onActionMenuOpenChange({
|
|
@@ -76,17 +83,18 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
|
|
|
76
83
|
direction: SmartLinkDirection.Vertical,
|
|
77
84
|
testId: "".concat(testId, "-resolved-view")
|
|
78
85
|
}), status === 'done' && /*#__PURE__*/React.createElement(AIEventSummaryViewed, {
|
|
79
|
-
fromCache:
|
|
80
|
-
}), /*#__PURE__*/React.createElement(AISummary, {
|
|
86
|
+
fromCache: isSummarisedOnMountRef.current
|
|
87
|
+
}), showAISummary && /*#__PURE__*/React.createElement(AISummary, {
|
|
88
|
+
minHeight: aiSummaryMinHeight,
|
|
81
89
|
content: content,
|
|
82
|
-
showIcon:
|
|
90
|
+
showIcon: isSummarisedOnMountRef.current
|
|
83
91
|
}), /*#__PURE__*/React.createElement(Inline, {
|
|
84
92
|
alignBlock: "center",
|
|
85
93
|
alignInline: "end",
|
|
86
94
|
grow: "fill",
|
|
87
95
|
spread: "space-between"
|
|
88
|
-
}, /*#__PURE__*/React.createElement(Box, null, !
|
|
89
|
-
state:
|
|
96
|
+
}, /*#__PURE__*/React.createElement(Box, null, !isSummarisedOnMountRef.current && (status === 'loading' || status === 'done') ? /*#__PURE__*/React.createElement(AIStateIndicator, {
|
|
97
|
+
state: status,
|
|
90
98
|
testId: "".concat(testId, "-state-indicator")
|
|
91
99
|
}) : /*#__PURE__*/React.createElement(ElementGroup, {
|
|
92
100
|
width: SmartLinkWidth.FitToContent,
|
|
@@ -96,7 +104,7 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
|
|
|
96
104
|
items: combinedActions,
|
|
97
105
|
appearance: "default",
|
|
98
106
|
size: size
|
|
99
|
-
}))),
|
|
107
|
+
}))), showAISummaryErrorMessage && /*#__PURE__*/React.createElement(Inline, {
|
|
100
108
|
grow: "fill"
|
|
101
109
|
}, /*#__PURE__*/React.createElement(AIEventErrorViewed, null), /*#__PURE__*/React.createElement(AIStateIndicator, {
|
|
102
110
|
state: status,
|
|
@@ -1,31 +1,57 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
-
var _excluded = ["children", "isAIEnabled", "
|
|
4
|
+
var _excluded = ["children", "isAIEnabled", "testId", "url"],
|
|
5
|
+
_excluded2 = ["children", "isAIEnabled", "testId", "url"];
|
|
4
6
|
/** @jsx jsx */
|
|
5
7
|
import { jsx } from '@emotion/react';
|
|
6
|
-
import React from 'react';
|
|
8
|
+
import React, { useState, useEffect } from 'react';
|
|
7
9
|
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
8
10
|
import { HoverCardContainer, popupContainerStyles } from '../styled';
|
|
9
11
|
import AIPrism from '../../common/ai-prism';
|
|
10
12
|
import { hoverCardClassName } from './HoverCardContent';
|
|
11
|
-
|
|
13
|
+
import { useAISummary } from '../../../state/hooks/use-ai-summary';
|
|
14
|
+
var ConnectedAIPrismContainer = function ConnectedAIPrismContainer(_ref) {
|
|
12
15
|
var children = _ref.children,
|
|
13
16
|
_ref$isAIEnabled = _ref.isAIEnabled,
|
|
14
17
|
isAIEnabled = _ref$isAIEnabled === void 0 ? false : _ref$isAIEnabled,
|
|
15
|
-
_ref$showPrism = _ref.showPrism,
|
|
16
|
-
showPrism = _ref$showPrism === void 0 ? false : _ref$showPrism,
|
|
17
18
|
testId = _ref.testId,
|
|
19
|
+
url = _ref.url,
|
|
18
20
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
21
|
+
var _useAISummary = useAISummary({
|
|
22
|
+
url: url
|
|
23
|
+
}),
|
|
24
|
+
status = _useAISummary.state.status;
|
|
25
|
+
var _useState = useState(status === 'loading'),
|
|
26
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
27
|
+
showPrism = _useState2[0],
|
|
28
|
+
setShowPrism = _useState2[1];
|
|
29
|
+
useEffect(function () {
|
|
30
|
+
setShowPrism(status === 'loading');
|
|
31
|
+
}, [status]);
|
|
32
|
+
var container = jsx("div", _extends({
|
|
33
|
+
className: hoverCardClassName,
|
|
34
|
+
css: [HoverCardContainer, isAIEnabled && showPrism ? undefined : popupContainerStyles],
|
|
35
|
+
"data-testid": testId
|
|
36
|
+
}, props), children);
|
|
37
|
+
return isAIEnabled ? jsx(AIPrism, {
|
|
38
|
+
isVisible: showPrism,
|
|
39
|
+
testId: "".concat(testId, "-prism")
|
|
40
|
+
}, container) : container;
|
|
41
|
+
};
|
|
42
|
+
var ContentContainer = function ContentContainer(_ref2) {
|
|
43
|
+
var children = _ref2.children,
|
|
44
|
+
_ref2$isAIEnabled = _ref2.isAIEnabled,
|
|
45
|
+
isAIEnabled = _ref2$isAIEnabled === void 0 ? false : _ref2$isAIEnabled,
|
|
46
|
+
testId = _ref2.testId,
|
|
47
|
+
url = _ref2.url,
|
|
48
|
+
props = _objectWithoutProperties(_ref2, _excluded2);
|
|
19
49
|
if (getBooleanFF('platform.linking-platform.smart-card.hover-card-ai-summaries')) {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
50
|
+
return jsx(ConnectedAIPrismContainer, _extends({
|
|
51
|
+
isAIEnabled: isAIEnabled,
|
|
52
|
+
url: url,
|
|
53
|
+
testId: testId
|
|
24
54
|
}, props), children);
|
|
25
|
-
return isAIEnabled ? jsx(AIPrism, {
|
|
26
|
-
isVisible: showPrism,
|
|
27
|
-
testId: "".concat(testId, "-prism")
|
|
28
|
-
}, container) : container;
|
|
29
55
|
}
|
|
30
56
|
return jsx("div", _extends({
|
|
31
57
|
className: hoverCardClassName,
|
|
@@ -1,11 +1,10 @@
|
|
|
1
|
-
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
1
|
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
|
|
3
2
|
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
4
3
|
/** @jsx jsx */
|
|
5
4
|
import { jsx } from '@emotion/react';
|
|
6
5
|
import { useAnalyticsEvents } from '@atlaskit/analytics-next';
|
|
7
6
|
import CopyIcon from '@atlaskit/icon/glyph/copy';
|
|
8
|
-
import React, { useCallback, useEffect, useMemo, useRef
|
|
7
|
+
import React, { useCallback, useEffect, useMemo, useRef } from 'react';
|
|
9
8
|
import { useSmartLinkContext } from '@atlaskit/link-provider';
|
|
10
9
|
import { ActionName, CardDisplay, SmartLinkPosition, SmartLinkSize } from '../../../constants';
|
|
11
10
|
import { extractMetadata } from '../../../extractors/hover/extractMetadata';
|
|
@@ -86,10 +85,6 @@ var HoverCardContent = function HoverCardContent(_ref) {
|
|
|
86
85
|
var services = getServices(linkState.details);
|
|
87
86
|
var statusRef = useRef(linkStatus);
|
|
88
87
|
var analyticsRef = useRef(analytics);
|
|
89
|
-
var _useState = useState(false),
|
|
90
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
91
|
-
showPrism = _useState2[0],
|
|
92
|
-
setShowPrism = _useState2[1];
|
|
93
88
|
useEffect(function () {
|
|
94
89
|
/**
|
|
95
90
|
* Must access current analytics object value via ref because its not stable
|
|
@@ -162,9 +157,6 @@ var HoverCardContent = function HoverCardContent(_ref) {
|
|
|
162
157
|
var onClickStopPropagation = useCallback(function (e) {
|
|
163
158
|
return e.stopPropagation();
|
|
164
159
|
}, []);
|
|
165
|
-
var onAIActionChange = useCallback(function (state) {
|
|
166
|
-
setShowPrism(state === 'loading');
|
|
167
|
-
}, []);
|
|
168
160
|
var getCardView = function getCardView(cardState) {
|
|
169
161
|
if (cardState.metadataStatus === 'pending') {
|
|
170
162
|
return jsx(HoverCardLoadingView, {
|
|
@@ -197,7 +189,6 @@ var HoverCardContent = function HoverCardContent(_ref) {
|
|
|
197
189
|
flexibleCardProps: flexibleCardProps,
|
|
198
190
|
isAISummaryEnabled: isAISummaryEnabled,
|
|
199
191
|
onActionClick: onActionClick,
|
|
200
|
-
onAIActionChange: onAIActionChange,
|
|
201
192
|
titleBlockProps: titleBlockProps
|
|
202
193
|
});
|
|
203
194
|
}
|
|
@@ -209,7 +200,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
|
|
|
209
200
|
onMouseLeave: onMouseLeave,
|
|
210
201
|
onClick: onClickStopPropagation,
|
|
211
202
|
isAIEnabled: isAISummaryEnabled,
|
|
212
|
-
|
|
203
|
+
url: url
|
|
213
204
|
}, cardView) : null;
|
|
214
205
|
};
|
|
215
206
|
export default HoverCardContent;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
3
3
|
import React, { useCallback, useEffect, useMemo, useRef } from 'react';
|
|
4
|
-
import { ActionName, CardDisplay, ElementName, SmartLinkPosition, SmartLinkSize } from '../../../../../constants';
|
|
5
|
-
import { FooterBlock, MetadataBlock, RelatedUrlsBlock, SnippetBlock, TitleBlock, AISummaryBlock } from '../../../../FlexibleCard/components/blocks';
|
|
4
|
+
import { ActionName, CardDisplay, ElementName, SmartLinkPosition, SmartLinkSize, SmartLinkDirection } from '../../../../../constants';
|
|
5
|
+
import { FooterBlock, MetadataBlock, RelatedUrlsBlock, SnippetBlock, TitleBlock, AISummaryBlock, CustomBlock } from '../../../../FlexibleCard/components/blocks';
|
|
6
6
|
import { footerBlockCss, hiddenSnippetStyles, metadataBlockCss } from './styled';
|
|
7
7
|
import FlexibleCard from '../../../../FlexibleCard';
|
|
8
8
|
import { getSimulatedBetterMetadata } from '../../../utils';
|
|
@@ -12,6 +12,8 @@ import { messages } from '../../../../../messages';
|
|
|
12
12
|
import { FormattedMessage } from 'react-intl-next';
|
|
13
13
|
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
14
14
|
import { getCanBeDatasource } from '../../../../../state/helpers';
|
|
15
|
+
import { useAISummary } from '../../../../../state/hooks/use-ai-summary';
|
|
16
|
+
import { SmartLinkStatus } from '../../../../../constants';
|
|
15
17
|
export var toFooterActions = function toFooterActions(cardActions, onActionClick) {
|
|
16
18
|
var followAction = {
|
|
17
19
|
hideIcon: true,
|
|
@@ -46,19 +48,41 @@ export var toFooterActions = function toFooterActions(cardActions, onActionClick
|
|
|
46
48
|
});
|
|
47
49
|
return [followAction].concat(_toConsumableArray(actions));
|
|
48
50
|
};
|
|
49
|
-
|
|
51
|
+
|
|
52
|
+
//This component encapsulates useAISummary hook under the AI Summary FF 'platform.linking-platform.smart-card.hover-card-ai-summaries'
|
|
53
|
+
var ConnectedAIBlock = function ConnectedAIBlock(_ref) {
|
|
54
|
+
var bottomPrimary = _ref.bottomPrimary,
|
|
55
|
+
url = _ref.url,
|
|
56
|
+
imagePreview = _ref.imagePreview;
|
|
57
|
+
var aiSummary = useAISummary({
|
|
58
|
+
url: url
|
|
59
|
+
});
|
|
60
|
+
var aiStatus = aiSummary.state.status;
|
|
61
|
+
var showData = aiStatus === 'ready' || aiStatus === 'error';
|
|
62
|
+
return showData ? /*#__PURE__*/React.createElement(CustomBlock, {
|
|
63
|
+
direction: SmartLinkDirection.Vertical
|
|
64
|
+
}, !imagePreview && /*#__PURE__*/React.createElement(SnippetBlock, {
|
|
65
|
+
status: SmartLinkStatus.Resolved
|
|
66
|
+
}), /*#__PURE__*/React.createElement(MetadataBlock, {
|
|
67
|
+
primary: bottomPrimary,
|
|
68
|
+
size: SmartLinkSize.Large,
|
|
69
|
+
overrideCss: metadataBlockCss,
|
|
70
|
+
maxLines: 1,
|
|
71
|
+
status: SmartLinkStatus.Resolved
|
|
72
|
+
})) : null;
|
|
73
|
+
};
|
|
74
|
+
var HoverCardResolvedView = function HoverCardResolvedView(_ref2) {
|
|
50
75
|
var _cardState$details;
|
|
51
|
-
var flexibleCardProps =
|
|
52
|
-
titleBlockProps =
|
|
53
|
-
analytics =
|
|
54
|
-
cardState =
|
|
55
|
-
|
|
56
|
-
cardActions =
|
|
57
|
-
isAISummaryEnabled =
|
|
58
|
-
onActionClick =
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
url = _ref.url;
|
|
76
|
+
var flexibleCardProps = _ref2.flexibleCardProps,
|
|
77
|
+
titleBlockProps = _ref2.titleBlockProps,
|
|
78
|
+
analytics = _ref2.analytics,
|
|
79
|
+
cardState = _ref2.cardState,
|
|
80
|
+
_ref2$cardActions = _ref2.cardActions,
|
|
81
|
+
cardActions = _ref2$cardActions === void 0 ? [] : _ref2$cardActions,
|
|
82
|
+
isAISummaryEnabled = _ref2.isAISummaryEnabled,
|
|
83
|
+
onActionClick = _ref2.onActionClick,
|
|
84
|
+
extensionKey = _ref2.extensionKey,
|
|
85
|
+
url = _ref2.url;
|
|
62
86
|
var canBeDatasource = getCanBeDatasource(cardState.details);
|
|
63
87
|
useEffect(function () {
|
|
64
88
|
// Since this hover view is only rendered on resolved status,
|
|
@@ -90,6 +114,15 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
|
|
|
90
114
|
var _snippetBlockRef$curr, _snippetBlockRef$curr2;
|
|
91
115
|
snippetHeight.current = (_snippetBlockRef$curr = (_snippetBlockRef$curr2 = snippetBlockRef.current) === null || _snippetBlockRef$curr2 === void 0 ? void 0 : _snippetBlockRef$curr2.getBoundingClientRect().height) !== null && _snippetBlockRef$curr !== void 0 ? _snippetBlockRef$curr : 0;
|
|
92
116
|
}, []);
|
|
117
|
+
|
|
118
|
+
// We want to maintain the height of the HoverCard while summarizing and pass this height to the AISummaryBlock.
|
|
119
|
+
// This approach will prevent any abrupt changes in the height of the HoverCard.
|
|
120
|
+
var connectedAIBlockHeight = React.useRef(0);
|
|
121
|
+
var connectedAIBlockRef = useRef(null);
|
|
122
|
+
var onConnectedAIBlockRender = useCallback(function () {
|
|
123
|
+
var _connectedAIBlockRef$, _connectedAIBlockRef$2;
|
|
124
|
+
connectedAIBlockHeight.current = (_connectedAIBlockRef$ = (_connectedAIBlockRef$2 = connectedAIBlockRef.current) === null || _connectedAIBlockRef$2 === void 0 ? void 0 : _connectedAIBlockRef$2.getBoundingClientRect().height) !== null && _connectedAIBlockRef$ !== void 0 ? _connectedAIBlockRef$ : 0;
|
|
125
|
+
}, []);
|
|
93
126
|
var imagePreview = ImagePreview({
|
|
94
127
|
data: data,
|
|
95
128
|
fallbackElementHeight: snippetHeight.current
|
|
@@ -102,16 +135,31 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
|
|
|
102
135
|
overrideCss: metadataBlockCss,
|
|
103
136
|
maxLines: 1,
|
|
104
137
|
size: SmartLinkSize.Medium
|
|
105
|
-
}),
|
|
138
|
+
}), isAISummaryEnabled &&
|
|
139
|
+
/*#__PURE__*/
|
|
140
|
+
// All custom elements should be contained within a CustomBlock.
|
|
141
|
+
// Flex Container components check whether the direct child is a flex blocks. It removes anything that isn't
|
|
142
|
+
React.createElement(CustomBlock, {
|
|
143
|
+
direction: SmartLinkDirection.Vertical,
|
|
144
|
+
onRender: onConnectedAIBlockRender,
|
|
145
|
+
blockRef: connectedAIBlockRef
|
|
146
|
+
}, /*#__PURE__*/React.createElement(ConnectedAIBlock, {
|
|
147
|
+
imagePreview: !!imagePreview,
|
|
148
|
+
url: url,
|
|
149
|
+
bottomPrimary: bottomPrimary
|
|
150
|
+
})), !isAISummaryEnabled && !imagePreview && /*#__PURE__*/React.createElement(SnippetBlock, {
|
|
151
|
+
status: SmartLinkStatus.Resolved
|
|
152
|
+
}), /*#__PURE__*/React.createElement(SnippetBlock, {
|
|
106
153
|
testId: 'hidden-snippet',
|
|
107
154
|
onRender: onSnippetRender,
|
|
108
155
|
blockRef: snippetBlockRef,
|
|
109
156
|
overrideCss: hiddenSnippetStyles
|
|
110
|
-
}), /*#__PURE__*/React.createElement(MetadataBlock, {
|
|
157
|
+
}), !isAISummaryEnabled && /*#__PURE__*/React.createElement(MetadataBlock, {
|
|
111
158
|
primary: bottomPrimary,
|
|
112
159
|
size: SmartLinkSize.Large,
|
|
113
160
|
overrideCss: metadataBlockCss,
|
|
114
|
-
maxLines: 1
|
|
161
|
+
maxLines: 1,
|
|
162
|
+
status: SmartLinkStatus.Resolved
|
|
115
163
|
}), getBooleanFF('platform.linking-platform.smart-card.enable-hover-card-related-urls') && /*#__PURE__*/React.createElement(RelatedUrlsBlock, {
|
|
116
164
|
url: url,
|
|
117
165
|
size: SmartLinkSize.Small
|
|
@@ -120,7 +168,7 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
|
|
|
120
168
|
name: ElementName.Provider
|
|
121
169
|
}],
|
|
122
170
|
actions: footerActions,
|
|
123
|
-
|
|
171
|
+
aiSummaryMinHeight: connectedAIBlockHeight.current
|
|
124
172
|
}) : /*#__PURE__*/React.createElement(FooterBlock, {
|
|
125
173
|
actions: footerActions,
|
|
126
174
|
size: SmartLinkSize.Large,
|
|
@@ -10,7 +10,7 @@ import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-m
|
|
|
10
10
|
import LinkWarningModal from './LinkWarningModal';
|
|
11
11
|
var PACKAGE_DATA = {
|
|
12
12
|
packageName: "@atlaskit/smart-card",
|
|
13
|
-
packageVersion: "26.49.
|
|
13
|
+
packageVersion: "26.49.1",
|
|
14
14
|
componentName: 'linkUrl'
|
|
15
15
|
};
|
|
16
16
|
var Link = withLinkClickedEvent('a');
|
|
@@ -23,14 +23,17 @@ var AISummaryCSS = css({
|
|
|
23
23
|
*/
|
|
24
24
|
|
|
25
25
|
var AISummary = function AISummary(_ref) {
|
|
26
|
-
var content = _ref.content,
|
|
26
|
+
var _ref$content = _ref.content,
|
|
27
|
+
content = _ref$content === void 0 ? '' : _ref$content,
|
|
27
28
|
_ref$showIcon = _ref.showIcon,
|
|
28
29
|
showIcon = _ref$showIcon === void 0 ? false : _ref$showIcon,
|
|
29
30
|
iconComponent = _ref.iconComponent,
|
|
30
31
|
overrideCss = _ref.overrideCss,
|
|
31
32
|
_ref$testId = _ref.testId,
|
|
32
|
-
testId = _ref$testId === void 0 ? 'ai-summary' : _ref$testId
|
|
33
|
-
|
|
33
|
+
testId = _ref$testId === void 0 ? 'ai-summary' : _ref$testId,
|
|
34
|
+
_ref$minHeight = _ref.minHeight,
|
|
35
|
+
minHeight = _ref$minHeight === void 0 ? 0 : _ref$minHeight;
|
|
36
|
+
if (!content && minHeight === 0) {
|
|
34
37
|
return null;
|
|
35
38
|
}
|
|
36
39
|
return jsx(Markdown, {
|
|
@@ -42,6 +45,9 @@ var AISummary = function AISummary(_ref) {
|
|
|
42
45
|
overrides: {
|
|
43
46
|
Icon: iconComponent !== null && iconComponent !== void 0 ? iconComponent : AITooltipIcon
|
|
44
47
|
}
|
|
48
|
+
},
|
|
49
|
+
style: {
|
|
50
|
+
minHeight: minHeight
|
|
45
51
|
}
|
|
46
52
|
});
|
|
47
53
|
};
|
|
@@ -34,7 +34,9 @@ export type StateSetter = (state: AISummaryState) => any;
|
|
|
34
34
|
export type StreamMessage = StreamTrace | StreamAnswerPart | StreamResponse | StreamError;
|
|
35
35
|
export type StreamResponse = {
|
|
36
36
|
type: 'FINAL_RESPONSE';
|
|
37
|
-
message:
|
|
37
|
+
message: {
|
|
38
|
+
message: Message;
|
|
39
|
+
};
|
|
38
40
|
millisOffset?: number;
|
|
39
41
|
metadata?: {
|
|
40
42
|
request_id?: string;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import type { AISummaryServiceProps, AISummaryStatus } from './ai-summary-service/types';
|
|
2
2
|
export declare const useAISummary: (props: AISummaryServiceProps) => {
|
|
3
|
-
isSummarisedOnMount: boolean;
|
|
4
3
|
summariseUrl: () => Promise<void> | undefined;
|
|
5
4
|
state: {
|
|
6
5
|
status: AISummaryStatus;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { XCSS } from '@atlaskit/primitives';
|
|
3
3
|
import type { TooltipProps } from '@atlaskit/tooltip';
|
|
4
|
-
import type {
|
|
4
|
+
import type { AISummaryStatus } from '../../../../../../state/hooks/use-ai-summary/ai-summary-service/types';
|
|
5
5
|
export type AIStateAppearance = 'default' | 'icon-only';
|
|
6
6
|
export type AIStateIndicatorProps = {
|
|
7
7
|
appearance?: AIStateAppearance;
|
|
8
|
-
state:
|
|
8
|
+
state: AISummaryStatus;
|
|
9
9
|
testId?: string;
|
|
10
10
|
};
|
|
11
11
|
export type AIIndicatorContainerProps = {
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { ActionItem, BlockProps, ElementItem } from '../types';
|
|
2
2
|
import { OnActionMenuOpenChangeOptions } from '../types';
|
|
3
|
-
export type AIState = 'ready' | 'loading' | 'error' | 'done';
|
|
4
3
|
export type AISummaryBlockProps = {
|
|
5
4
|
/**
|
|
6
5
|
* An array of actions to be displayed on the right
|
|
@@ -18,7 +17,7 @@ export type AISummaryBlockProps = {
|
|
|
18
17
|
*/
|
|
19
18
|
onActionMenuOpenChange?: (options: OnActionMenuOpenChangeOptions) => void;
|
|
20
19
|
/**
|
|
21
|
-
*
|
|
20
|
+
* Minimum height requirement for the AISummary component to prevent fluctuations in a card size on the summary action.
|
|
22
21
|
*/
|
|
23
|
-
|
|
22
|
+
aiSummaryMinHeight?: number;
|
|
24
23
|
} & BlockProps;
|
|
@@ -2,7 +2,6 @@ import { AnalyticsFacade } from '../../../../../state/analytics';
|
|
|
2
2
|
import { LinkAction } from '../../../../../state/hooks-external/useSmartLinkActions';
|
|
3
3
|
import { CardState } from '@atlaskit/linking-common';
|
|
4
4
|
import { HoverCardLoadingViewProps } from '../resolving/types';
|
|
5
|
-
import { AISummaryBlockProps } from '../../../../FlexibleCard/components/blocks/ai-summary-block/types';
|
|
6
5
|
export type HoverCardResolvedProps = {
|
|
7
6
|
extensionKey?: string;
|
|
8
7
|
id?: string;
|
|
@@ -12,5 +11,4 @@ export type HoverCardResolvedProps = {
|
|
|
12
11
|
cardState: CardState;
|
|
13
12
|
isAISummaryEnabled?: boolean;
|
|
14
13
|
onActionClick: (actionId: string) => void;
|
|
15
|
-
onAIActionChange?: AISummaryBlockProps['onAIActionChange'];
|
|
16
14
|
} & HoverCardLoadingViewProps;
|
|
@@ -101,8 +101,8 @@ export type HoverCardContentProps = {
|
|
|
101
101
|
};
|
|
102
102
|
export type ContentContainerProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
103
103
|
isAIEnabled?: boolean;
|
|
104
|
-
showPrism?: boolean;
|
|
105
104
|
testId?: string;
|
|
105
|
+
url: string;
|
|
106
106
|
};
|
|
107
107
|
export type ImagePreviewProps = {
|
|
108
108
|
data: JsonLd.Data.BaseData;
|
|
@@ -12,6 +12,10 @@ type AISummaryProps = {
|
|
|
12
12
|
* serving as a hook for automated tests
|
|
13
13
|
*/
|
|
14
14
|
testId?: string;
|
|
15
|
+
/**
|
|
16
|
+
* Minimum height requirement for the AISummary component to prevent fluctuations in a card size on the summary action.
|
|
17
|
+
*/
|
|
18
|
+
minHeight?: number;
|
|
15
19
|
};
|
|
16
20
|
/**
|
|
17
21
|
* A component to render a response from AI in markdown text.
|
|
@@ -34,7 +34,9 @@ export type StateSetter = (state: AISummaryState) => any;
|
|
|
34
34
|
export type StreamMessage = StreamTrace | StreamAnswerPart | StreamResponse | StreamError;
|
|
35
35
|
export type StreamResponse = {
|
|
36
36
|
type: 'FINAL_RESPONSE';
|
|
37
|
-
message:
|
|
37
|
+
message: {
|
|
38
|
+
message: Message;
|
|
39
|
+
};
|
|
38
40
|
millisOffset?: number;
|
|
39
41
|
metadata?: {
|
|
40
42
|
request_id?: string;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import type { AISummaryServiceProps, AISummaryStatus } from './ai-summary-service/types';
|
|
2
2
|
export declare const useAISummary: (props: AISummaryServiceProps) => {
|
|
3
|
-
isSummarisedOnMount: boolean;
|
|
4
3
|
summariseUrl: () => Promise<void> | undefined;
|
|
5
4
|
state: {
|
|
6
5
|
status: AISummaryStatus;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { XCSS } from '@atlaskit/primitives';
|
|
3
3
|
import type { TooltipProps } from '@atlaskit/tooltip';
|
|
4
|
-
import type {
|
|
4
|
+
import type { AISummaryStatus } from '../../../../../../state/hooks/use-ai-summary/ai-summary-service/types';
|
|
5
5
|
export type AIStateAppearance = 'default' | 'icon-only';
|
|
6
6
|
export type AIStateIndicatorProps = {
|
|
7
7
|
appearance?: AIStateAppearance;
|
|
8
|
-
state:
|
|
8
|
+
state: AISummaryStatus;
|
|
9
9
|
testId?: string;
|
|
10
10
|
};
|
|
11
11
|
export type AIIndicatorContainerProps = {
|