@pega/cosmos-react-social 4.0.0-dev.17.0 → 4.0.0-dev.18.0
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.
|
@@ -2,7 +2,12 @@ import { FunctionComponent, Ref } from 'react';
|
|
|
2
2
|
import { ForwardProps } from '@pega/cosmos-react-core';
|
|
3
3
|
export declare const StyledSuggestedReplyHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
4
4
|
export declare const StyledSuggestedReplyContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
5
|
-
export declare const
|
|
5
|
+
export declare const StyledReply: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
6
|
+
export declare const StyledRepliesAction: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
7
|
+
export declare const StyledNotification: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
8
|
+
export declare const StyledSuggestedReplyIcon: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, {
|
|
9
|
+
suggestedReplyCollapsed?: boolean | undefined;
|
|
10
|
+
}, never>;
|
|
6
11
|
export interface SuggestedReply {
|
|
7
12
|
/** Id for this suggested reply */
|
|
8
13
|
id: string;
|
|
@@ -16,10 +21,14 @@ export interface SuggestedReplyPickerProps {
|
|
|
16
21
|
ref?: Ref<HTMLDivElement>;
|
|
17
22
|
/** Suggested replies */
|
|
18
23
|
replies?: SuggestedReply[];
|
|
24
|
+
/** Current state of the panel */
|
|
25
|
+
collapsed: boolean;
|
|
26
|
+
/** Callback for expand or collapse click */
|
|
27
|
+
onExpandCollapse: () => void;
|
|
19
28
|
/** Callback for the event when a suggested reply is selected */
|
|
20
29
|
onSelect: (suggestedReply: SuggestedReply) => void;
|
|
21
|
-
/**
|
|
22
|
-
|
|
30
|
+
/** Show notification on picker header */
|
|
31
|
+
showNotification?: boolean;
|
|
23
32
|
}
|
|
24
33
|
declare const SuggestedReplyPicker: FunctionComponent<SuggestedReplyPickerProps & ForwardProps>;
|
|
25
34
|
export default SuggestedReplyPicker;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SuggestedReplyPicker.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/SuggestedReplyPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAY,MAAM,OAAO,CAAC;AAGtF,OAAO,EAQL,YAAY,
|
|
1
|
+
{"version":3,"file":"SuggestedReplyPicker.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/SuggestedReplyPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAY,MAAM,OAAO,CAAC;AAGtF,OAAO,EAQL,YAAY,EAMb,MAAM,yBAAyB,CAAC;AAQjC,eAAO,MAAM,0BAA0B,yGAAe,CAAC;AACvD,eAAO,MAAM,2BAA2B,yGAAe,CAAC;AACxD,eAAO,MAAM,WAAW,yGAAe,CAAC;AACxC,eAAO,MAAM,mBAAmB,yGAAe,CAAC;AAChD,eAAO,MAAM,kBAAkB,yGAAe,CAAC;AAI/C,eAAO,MAAM,wBAAwB;;SAqBpC,CAAC;AAoCF,MAAM,WAAW,cAAc;IAC7B,kCAAkC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,8BAA8B;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,yCAAyC;IACzC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,yBAAyB;IACxC,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,wBAAwB;IACxB,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,iCAAiC;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,gEAAgE;IAChE,QAAQ,EAAE,CAAC,cAAc,EAAE,cAAc,KAAK,IAAI,CAAC;IACnD,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,QAAA,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,GAAG,YAAY,CA6KnF,CAAC;AAEJ,eAAe,oBAAoB,CAAC"}
|
|
@@ -1,37 +1,69 @@
|
|
|
1
|
-
import { jsx as _jsx,
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef, useState } from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
|
-
import { Flex, Icon, registerIcon, Button, Text, useI18n, defaultThemeProp, useLiveLog } from '@pega/cosmos-react-core';
|
|
4
|
+
import { Flex, Icon, registerIcon, Button, Text, useI18n, defaultThemeProp, useLiveLog, ExpandCollapse, Alert, useDirection, EmptyState } from '@pega/cosmos-react-core';
|
|
5
5
|
import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
|
|
6
6
|
import * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';
|
|
7
7
|
import * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';
|
|
8
|
+
import { StyledAlert } from '@pega/cosmos-react-core/lib/components/Badges/Alert';
|
|
8
9
|
registerIcon(timesIcon, caretLeftIcon, caretRightIcon);
|
|
9
10
|
export const StyledSuggestedReplyHeader = styled.div ``;
|
|
10
11
|
export const StyledSuggestedReplyContent = styled.div ``;
|
|
11
|
-
export const
|
|
12
|
+
export const StyledReply = styled.div ``;
|
|
13
|
+
export const StyledRepliesAction = styled.div ``;
|
|
14
|
+
export const StyledNotification = styled.div ``;
|
|
15
|
+
const maxNumOfLines = 5;
|
|
16
|
+
const minNumOfLines = 2;
|
|
17
|
+
export const StyledSuggestedReplyIcon = styled.svg(({ suggestedReplyCollapsed, theme }) => {
|
|
18
|
+
const { rtl } = useDirection();
|
|
19
|
+
const { base: { animation: { speed, timing: { ease } } } } = theme;
|
|
20
|
+
return css `
|
|
21
|
+
transition-property: transform;
|
|
22
|
+
transition-duration: ${speed};
|
|
23
|
+
transition-timing-function: ${ease};
|
|
24
|
+
${suggestedReplyCollapsed &&
|
|
25
|
+
css `
|
|
26
|
+
transform: rotateZ(${rtl ? '0deg' : '-90deg'});
|
|
27
|
+
`}
|
|
28
|
+
`;
|
|
29
|
+
});
|
|
30
|
+
StyledSuggestedReplyIcon.defaultProps = defaultThemeProp;
|
|
12
31
|
const StyledSuggestedReplyContainer = styled.div(props => {
|
|
13
32
|
const { theme } = props;
|
|
14
33
|
return css `
|
|
15
34
|
border-top: 0.0625rem solid ${theme.base.palette['border-line']};
|
|
16
35
|
background-color: ${theme.base.palette['primary-background']};
|
|
36
|
+
|
|
17
37
|
> ${StyledSuggestedReplyHeader} {
|
|
18
|
-
${
|
|
19
|
-
font-size: 1.2rem;
|
|
20
|
-
}
|
|
21
|
-
padding: 0.5rem;
|
|
38
|
+
padding: ${theme.base.spacing};
|
|
22
39
|
border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
|
|
23
40
|
}
|
|
24
|
-
|
|
25
|
-
|
|
41
|
+
|
|
42
|
+
${StyledAlert} {
|
|
43
|
+
position: relative;
|
|
44
|
+
inset-block-start: calc(-0.25 * ${theme.base.spacing});
|
|
45
|
+
inset-inline-start: calc(-0.5 * ${theme.base.spacing});
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
${StyledSuggestedReplyContent} {
|
|
49
|
+
padding: calc(2 * ${theme.base.spacing});
|
|
50
|
+
position: relative;
|
|
51
|
+
|
|
52
|
+
> ${StyledReply} {
|
|
53
|
+
overflow-y: auto;
|
|
54
|
+
max-height: calc(2.5 * ${theme.base.spacing} * ${maxNumOfLines});
|
|
55
|
+
min-height: calc(2.5 * ${theme.base.spacing} * ${minNumOfLines});
|
|
56
|
+
}
|
|
26
57
|
}
|
|
27
58
|
`;
|
|
28
59
|
});
|
|
29
60
|
StyledSuggestedReplyContainer.defaultProps = defaultThemeProp;
|
|
30
61
|
const SuggestedReplyPicker = forwardRef((props, ref) => {
|
|
31
|
-
const { replies = [],
|
|
62
|
+
const { replies = [], collapsed, onExpandCollapse, showNotification, onSelect, ...restProps } = props;
|
|
32
63
|
const { announcePolite } = useLiveLog();
|
|
33
64
|
const [currentReply, setCurrentReply] = useState(replies[0] ?? null);
|
|
34
65
|
const t = useI18n();
|
|
66
|
+
const { rtl, ltr } = useDirection();
|
|
35
67
|
// Making the suggested replies left/right button cyclic and SR to announce on change
|
|
36
68
|
const onSuggestedReplyChange = (mode) => {
|
|
37
69
|
setCurrentReply(prevReply => {
|
|
@@ -55,34 +87,33 @@ const SuggestedReplyPicker = forwardRef((props, ref) => {
|
|
|
55
87
|
return null;
|
|
56
88
|
});
|
|
57
89
|
};
|
|
58
|
-
return (_jsxs(StyledSuggestedReplyContainer, { ref: ref, ...restProps, children: [
|
|
90
|
+
return (_jsxs(StyledSuggestedReplyContainer, { ref: ref, ...restProps, children: [_jsx(Flex, { as: StyledSuggestedReplyHeader, container: {
|
|
59
91
|
justify: 'between',
|
|
60
92
|
alignContent: 'center'
|
|
61
|
-
}, children:
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
93
|
+
}, children: _jsxs(Flex, { container: {
|
|
94
|
+
alignItems: 'center',
|
|
95
|
+
gap: 1
|
|
96
|
+
}, children: [ltr && (_jsx(Button, { variant: 'simple', label: collapsed ? t('expand') : t('collapse'), "aria-label": t(collapsed ? 'expand_suggested_replies' : 'collapse_suggested_replies'), icon: true, onClick: onExpandCollapse, children: _jsx(Icon, { name: 'caret-down', suggestedReplyCollapsed: collapsed, as: StyledSuggestedReplyIcon }) })), _jsxs(Flex, { container: { gap: 0.5 }, children: [_jsx(Text, { variant: 'h3', children: t('suggested_replies') }), collapsed && showNotification && _jsx(Alert, { variant: 'urgent' })] }), rtl && (_jsx(Button, { variant: 'simple', label: collapsed ? t('expand') : t('collapse'), "aria-label": t(collapsed ? 'expand_suggested_replies' : 'collapse_suggested_replies'), icon: true, onClick: onExpandCollapse, children: _jsx(Icon, { name: 'caret-down', suggestedReplyCollapsed: collapsed, as: StyledSuggestedReplyIcon }) }))] }) }), _jsx(ExpandCollapse, { dimension: 'height', collapsed: collapsed, nullWhenCollapsed: true, children: _jsxs(Flex, { container: {
|
|
97
|
+
direction: 'column',
|
|
98
|
+
gap: 1
|
|
99
|
+
}, as: StyledSuggestedReplyContent, children: [currentReply && replies.length ? (_jsx(Flex, { container: true, as: StyledReply, children: currentReply.message })) : (_jsx(EmptyState, {})), _jsxs(Flex, { container: {
|
|
100
|
+
justify: 'center'
|
|
101
|
+
}, as: StyledRepliesAction, children: [replies.length > 1 && (_jsx(Button, { icon: true, "aria-label": t('prev_suggested_reply'), variant: 'simple', disabled: currentReply === null || replies.length <= 1, onClick: () => {
|
|
102
|
+
onSuggestedReplyChange('prev');
|
|
103
|
+
}, children: _jsx(Icon, { name: 'caret-left' }) })), _jsx(Button, { disabled: currentReply === null, onClick: () => {
|
|
104
|
+
if (currentReply) {
|
|
105
|
+
onSelect(currentReply);
|
|
106
|
+
}
|
|
107
|
+
}, "aria-label": replies.length > 0 && currentReply
|
|
108
|
+
? t('use_current_template', [
|
|
109
|
+
replies.length > 0 && currentReply
|
|
110
|
+
? replies.indexOf(currentReply) + 1
|
|
111
|
+
: 0,
|
|
66
112
|
replies.length
|
|
67
|
-
])
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
justify: 'center'
|
|
72
|
-
}, children: [_jsx(Button, { icon: true, "aria-label": t('prev_suggested_reply'), variant: 'simple', disabled: currentReply === null || replies.length <= 1, onClick: () => {
|
|
73
|
-
onSuggestedReplyChange('prev');
|
|
74
|
-
}, children: _jsx(Icon, { name: 'caret-left' }) }), _jsx(Button, { disabled: currentReply === null, onClick: () => {
|
|
75
|
-
if (currentReply) {
|
|
76
|
-
onSelect(currentReply);
|
|
77
|
-
}
|
|
78
|
-
}, "aria-label": replies.length > 0 && currentReply
|
|
79
|
-
? t('use_current_template', [
|
|
80
|
-
replies.length > 0 && currentReply ? replies.indexOf(currentReply) + 1 : 0,
|
|
81
|
-
replies.length
|
|
82
|
-
])
|
|
83
|
-
: '', children: t('use') }), _jsx(Button, { icon: true, "aria-label": t('next_suggested_reply'), variant: 'simple', onClick: () => {
|
|
84
|
-
onSuggestedReplyChange('next');
|
|
85
|
-
}, disabled: currentReply === null || replies.length <= 1, children: _jsx(Icon, { name: 'caret-right' }) })] })] })] }));
|
|
113
|
+
])
|
|
114
|
+
: '', children: t('use') }), replies.length > 1 && (_jsx(Button, { icon: true, "aria-label": t('next_suggested_reply'), variant: 'simple', onClick: () => {
|
|
115
|
+
onSuggestedReplyChange('next');
|
|
116
|
+
}, disabled: currentReply === null || replies.length <= 1, children: _jsx(Icon, { name: 'caret-right' }) }))] })] }) })] }));
|
|
86
117
|
});
|
|
87
118
|
export default SuggestedReplyPicker;
|
|
88
119
|
//# sourceMappingURL=SuggestedReplyPicker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SuggestedReplyPicker.js","sourceRoot":"","sources":["../../../src/components/Chat/SuggestedReplyPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Flex,\n Icon,\n registerIcon,\n Button,\n Text,\n useI18n,\n defaultThemeProp,\n ForwardProps,\n useLiveLog\n} from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';\n\nregisterIcon(timesIcon, caretLeftIcon, caretRightIcon);\n\nexport const StyledSuggestedReplyHeader = styled.div``;\nexport const StyledSuggestedReplyContent = styled.div``;\nexport const StyledSuggestedReplyIcon = styled.svg``;\n\nconst StyledSuggestedReplyContainer = styled.div(props => {\n const { theme } = props;\n return css`\n border-top: 0.0625rem solid ${theme.base.palette['border-line']};\n background-color: ${theme.base.palette['primary-background']};\n > ${StyledSuggestedReplyHeader} {\n ${StyledSuggestedReplyIcon} {\n font-size: 1.2rem;\n }\n padding: 0.5rem;\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n }\n > ${StyledSuggestedReplyContent} {\n padding: 1rem;\n }\n `;\n});\n\nStyledSuggestedReplyContainer.defaultProps = defaultThemeProp;\n\nexport interface SuggestedReply {\n /** Id for this suggested reply */\n id: string;\n /** Suggested reply message */\n message: string;\n /** Confidence of this suggested reply */\n confidence: number;\n}\n\nexport interface SuggestedReplyPickerProps {\n /** ref to the element */\n ref?: Ref<HTMLDivElement>;\n /** Suggested replies */\n replies?: SuggestedReply[];\n /** Callback for the event when a suggested reply is selected */\n onSelect: (suggestedReply: SuggestedReply) => void;\n /** Callback for the event close button is clicked */\n onDismiss: () => void;\n}\n\nconst SuggestedReplyPicker: FunctionComponent<SuggestedReplyPickerProps & ForwardProps> =\n forwardRef(\n (props: PropsWithoutRef<SuggestedReplyPickerProps>, ref: SuggestedReplyPickerProps['ref']) => {\n const { replies = [], onSelect, onDismiss, ...restProps } = props;\n const { announcePolite } = useLiveLog();\n const [currentReply, setCurrentReply] = useState<SuggestedReply | null>(replies[0] ?? null);\n const t = useI18n();\n\n // Making the suggested replies left/right button cyclic and SR to announce on change\n const onSuggestedReplyChange = (mode: 'prev' | 'next') => {\n setCurrentReply(prevReply => {\n if (prevReply) {\n const prevReplyIndex = replies.indexOf(prevReply);\n const totalReplies = replies.length;\n if (totalReplies > 0) {\n let replyIndex = mode === 'prev' ? prevReplyIndex - 1 : prevReplyIndex + 1;\n replyIndex = (replyIndex + totalReplies) % totalReplies;\n\n announcePolite({\n message: `${t('suggested_replies_current_of_total', [\n replyIndex + 1,\n replies.length\n ])},\n ${t('confidence_percentage', [replies[replyIndex].confidence])},${\n replies[replyIndex]?.message\n }`,\n type: 'acknowledgement'\n });\n return replies[replyIndex];\n }\n }\n return null;\n });\n };\n\n return (\n <StyledSuggestedReplyContainer ref={ref} {...restProps}>\n <Flex\n as={StyledSuggestedReplyHeader}\n container={{\n justify: 'between',\n alignContent: 'center'\n }}\n >\n <Flex\n container={{\n alignItems: 'center',\n gap: 1\n }}\n >\n <Icon name='bulb-solid' as={StyledSuggestedReplyIcon} />\n {currentReply && (\n <>\n <Text variant='h3'>\n {t('suggested_replies_current_of_total', [\n replies.length > 0 && currentReply ? replies.indexOf(currentReply) + 1 : 0,\n replies.length\n ])}\n </Text>\n <Text variant='secondary'>\n {t('confidence_percentage', [currentReply.confidence])}\n </Text>\n </>\n )}\n </Flex>\n <Button\n icon\n variant='simple'\n onClick={onDismiss}\n aria-label={t('dismiss_suggested_replies')}\n >\n <Icon name='times' />\n </Button>\n </Flex>\n <Flex\n container={{\n direction: 'column',\n gap: 1\n }}\n as={StyledSuggestedReplyContent}\n >\n {currentReply && <div>{currentReply.message}</div>}\n <Flex\n container={{\n justify: 'center'\n }}\n >\n <Button\n icon\n aria-label={t('prev_suggested_reply')}\n variant='simple'\n disabled={currentReply === null || replies.length <= 1}\n onClick={() => {\n onSuggestedReplyChange('prev');\n }}\n >\n <Icon name='caret-left' />\n </Button>\n <Button\n disabled={currentReply === null}\n onClick={() => {\n if (currentReply) {\n onSelect(currentReply);\n }\n }}\n aria-label={\n replies.length > 0 && currentReply\n ? t('use_current_template', [\n replies.length > 0 && currentReply ? replies.indexOf(currentReply) + 1 : 0,\n replies.length\n ])\n : ''\n }\n >\n {t('use')}\n </Button>\n <Button\n icon\n aria-label={t('next_suggested_reply')}\n variant='simple'\n onClick={() => {\n onSuggestedReplyChange('next');\n }}\n disabled={currentReply === null || replies.length <= 1}\n >\n <Icon name='caret-right' />\n </Button>\n </Flex>\n </Flex>\n </StyledSuggestedReplyContainer>\n );\n }\n );\n\nexport default SuggestedReplyPicker;\n"]}
|
|
1
|
+
{"version":3,"file":"SuggestedReplyPicker.js","sourceRoot":"","sources":["../../../src/components/Chat/SuggestedReplyPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Flex,\n Icon,\n registerIcon,\n Button,\n Text,\n useI18n,\n defaultThemeProp,\n ForwardProps,\n useLiveLog,\n ExpandCollapse,\n Alert,\n useDirection,\n EmptyState\n} from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\nimport * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';\nimport { StyledAlert } from '@pega/cosmos-react-core/lib/components/Badges/Alert';\n\nregisterIcon(timesIcon, caretLeftIcon, caretRightIcon);\n\nexport const StyledSuggestedReplyHeader = styled.div``;\nexport const StyledSuggestedReplyContent = styled.div``;\nexport const StyledReply = styled.div``;\nexport const StyledRepliesAction = styled.div``;\nexport const StyledNotification = styled.div``;\nconst maxNumOfLines = 5;\nconst minNumOfLines = 2;\n\nexport const StyledSuggestedReplyIcon = styled.svg<{ suggestedReplyCollapsed?: boolean }>(\n ({ suggestedReplyCollapsed, theme }) => {\n const { rtl } = useDirection();\n const {\n base: {\n animation: {\n speed,\n timing: { ease }\n }\n }\n } = theme;\n return css`\n transition-property: transform;\n transition-duration: ${speed};\n transition-timing-function: ${ease};\n ${suggestedReplyCollapsed &&\n css`\n transform: rotateZ(${rtl ? '0deg' : '-90deg'});\n `}\n `;\n }\n);\n\nStyledSuggestedReplyIcon.defaultProps = defaultThemeProp;\n\nconst StyledSuggestedReplyContainer = styled.div(props => {\n const { theme } = props;\n return css`\n border-top: 0.0625rem solid ${theme.base.palette['border-line']};\n background-color: ${theme.base.palette['primary-background']};\n\n > ${StyledSuggestedReplyHeader} {\n padding: ${theme.base.spacing};\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n }\n\n ${StyledAlert} {\n position: relative;\n inset-block-start: calc(-0.25 * ${theme.base.spacing});\n inset-inline-start: calc(-0.5 * ${theme.base.spacing});\n }\n\n ${StyledSuggestedReplyContent} {\n padding: calc(2 * ${theme.base.spacing});\n position: relative;\n\n > ${StyledReply} {\n overflow-y: auto;\n max-height: calc(2.5 * ${theme.base.spacing} * ${maxNumOfLines});\n min-height: calc(2.5 * ${theme.base.spacing} * ${minNumOfLines});\n }\n }\n `;\n});\n\nStyledSuggestedReplyContainer.defaultProps = defaultThemeProp;\n\nexport interface SuggestedReply {\n /** Id for this suggested reply */\n id: string;\n /** Suggested reply message */\n message: string;\n /** Confidence of this suggested reply */\n confidence: number;\n}\n\nexport interface SuggestedReplyPickerProps {\n /** ref to the element */\n ref?: Ref<HTMLDivElement>;\n /** Suggested replies */\n replies?: SuggestedReply[];\n /** Current state of the panel */\n collapsed: boolean;\n /** Callback for expand or collapse click */\n onExpandCollapse: () => void;\n /** Callback for the event when a suggested reply is selected */\n onSelect: (suggestedReply: SuggestedReply) => void;\n /** Show notification on picker header */\n showNotification?: boolean;\n}\n\nconst SuggestedReplyPicker: FunctionComponent<SuggestedReplyPickerProps & ForwardProps> =\n forwardRef(\n (props: PropsWithoutRef<SuggestedReplyPickerProps>, ref: SuggestedReplyPickerProps['ref']) => {\n const {\n replies = [],\n collapsed,\n onExpandCollapse,\n showNotification,\n onSelect,\n ...restProps\n } = props;\n const { announcePolite } = useLiveLog();\n const [currentReply, setCurrentReply] = useState<SuggestedReply | null>(replies[0] ?? null);\n const t = useI18n();\n const { rtl, ltr } = useDirection();\n\n // Making the suggested replies left/right button cyclic and SR to announce on change\n const onSuggestedReplyChange = (mode: 'prev' | 'next') => {\n setCurrentReply(prevReply => {\n if (prevReply) {\n const prevReplyIndex = replies.indexOf(prevReply);\n const totalReplies = replies.length;\n if (totalReplies > 0) {\n let replyIndex = mode === 'prev' ? prevReplyIndex - 1 : prevReplyIndex + 1;\n replyIndex = (replyIndex + totalReplies) % totalReplies;\n\n announcePolite({\n message: `${t('suggested_replies_current_of_total', [\n replyIndex + 1,\n replies.length\n ])},\n ${t('confidence_percentage', [replies[replyIndex].confidence])},${\n replies[replyIndex]?.message\n }`,\n type: 'acknowledgement'\n });\n return replies[replyIndex];\n }\n }\n return null;\n });\n };\n\n return (\n <StyledSuggestedReplyContainer ref={ref} {...restProps}>\n <Flex\n as={StyledSuggestedReplyHeader}\n container={{\n justify: 'between',\n alignContent: 'center'\n }}\n >\n <Flex\n container={{\n alignItems: 'center',\n gap: 1\n }}\n >\n {ltr && (\n <Button\n variant='simple'\n label={collapsed ? t('expand') : t('collapse')}\n aria-label={t(\n collapsed ? 'expand_suggested_replies' : 'collapse_suggested_replies'\n )}\n icon\n onClick={onExpandCollapse}\n >\n <Icon\n name='caret-down'\n suggestedReplyCollapsed={collapsed}\n as={StyledSuggestedReplyIcon}\n />\n </Button>\n )}\n\n <Flex container={{ gap: 0.5 }}>\n <Text variant='h3'>{t('suggested_replies')}</Text>\n {collapsed && showNotification && <Alert variant='urgent' />}\n </Flex>\n\n {rtl && (\n <Button\n variant='simple'\n label={collapsed ? t('expand') : t('collapse')}\n aria-label={t(\n collapsed ? 'expand_suggested_replies' : 'collapse_suggested_replies'\n )}\n icon\n onClick={onExpandCollapse}\n >\n <Icon\n name='caret-down'\n suggestedReplyCollapsed={collapsed}\n as={StyledSuggestedReplyIcon}\n />\n </Button>\n )}\n </Flex>\n </Flex>\n <ExpandCollapse dimension='height' collapsed={collapsed} nullWhenCollapsed>\n <Flex\n container={{\n direction: 'column',\n gap: 1\n }}\n as={StyledSuggestedReplyContent}\n >\n {currentReply && replies.length ? (\n <Flex container as={StyledReply}>\n {currentReply.message}\n </Flex>\n ) : (\n <EmptyState />\n )}\n <Flex\n container={{\n justify: 'center'\n }}\n as={StyledRepliesAction}\n >\n {replies.length > 1 && (\n <Button\n icon\n aria-label={t('prev_suggested_reply')}\n variant='simple'\n disabled={currentReply === null || replies.length <= 1}\n onClick={() => {\n onSuggestedReplyChange('prev');\n }}\n >\n <Icon name='caret-left' />\n </Button>\n )}\n <Button\n disabled={currentReply === null}\n onClick={() => {\n if (currentReply) {\n onSelect(currentReply);\n }\n }}\n aria-label={\n replies.length > 0 && currentReply\n ? t('use_current_template', [\n replies.length > 0 && currentReply\n ? replies.indexOf(currentReply) + 1\n : 0,\n replies.length\n ])\n : ''\n }\n >\n {t('use')}\n </Button>\n {replies.length > 1 && (\n <Button\n icon\n aria-label={t('next_suggested_reply')}\n variant='simple'\n onClick={() => {\n onSuggestedReplyChange('next');\n }}\n disabled={currentReply === null || replies.length <= 1}\n >\n <Icon name='caret-right' />\n </Button>\n )}\n </Flex>\n </Flex>\n </ExpandCollapse>\n </StyledSuggestedReplyContainer>\n );\n }\n );\n\nexport default SuggestedReplyPicker;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-social",
|
|
3
|
-
"version": "4.0.0-dev.
|
|
3
|
+
"version": "4.0.0-dev.18.0",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "https://github.com/pegasystems/cosmos-react.git",
|
|
@@ -23,9 +23,9 @@
|
|
|
23
23
|
"build": "tsc -b"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@pega/cosmos-react-core": "4.0.0-dev.
|
|
27
|
-
"@pega/cosmos-react-rte": "4.0.0-dev.
|
|
28
|
-
"@pega/cosmos-react-work": "4.0.0-dev.
|
|
26
|
+
"@pega/cosmos-react-core": "4.0.0-dev.18.0",
|
|
27
|
+
"@pega/cosmos-react-rte": "4.0.0-dev.18.0",
|
|
28
|
+
"@pega/cosmos-react-work": "4.0.0-dev.18.0",
|
|
29
29
|
"@types/parse5": "^6.0.0",
|
|
30
30
|
"@types/react": "^16.14.24 || ^17.0.38",
|
|
31
31
|
"@types/react-dom": "^16.9.14 || ^17.0.11",
|