@pega/cosmos-react-social 2.1.3 → 2.1.6

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.
Files changed (197) hide show
  1. package/package.json +4 -4
  2. package/lib/components/Chat/Chat.d.ts +0 -31
  3. package/lib/components/Chat/Chat.d.ts.map +0 -1
  4. package/lib/components/Chat/Chat.js +0 -67
  5. package/lib/components/Chat/Chat.js.map +0 -1
  6. package/lib/components/Chat/Chat.types.d.ts +0 -23
  7. package/lib/components/Chat/Chat.types.d.ts.map +0 -1
  8. package/lib/components/Chat/Chat.types.js +0 -2
  9. package/lib/components/Chat/Chat.types.js.map +0 -1
  10. package/lib/components/Chat/ChatBody.d.ts +0 -12
  11. package/lib/components/Chat/ChatBody.d.ts.map +0 -1
  12. package/lib/components/Chat/ChatBody.js +0 -18
  13. package/lib/components/Chat/ChatBody.js.map +0 -1
  14. package/lib/components/Chat/ChatComposer.d.ts +0 -51
  15. package/lib/components/Chat/ChatComposer.d.ts.map +0 -1
  16. package/lib/components/Chat/ChatComposer.js +0 -213
  17. package/lib/components/Chat/ChatComposer.js.map +0 -1
  18. package/lib/components/Chat/ChatHeader.d.ts +0 -15
  19. package/lib/components/Chat/ChatHeader.d.ts.map +0 -1
  20. package/lib/components/Chat/ChatHeader.js +0 -28
  21. package/lib/components/Chat/ChatHeader.js.map +0 -1
  22. package/lib/components/Chat/ChatTranscript.d.ts +0 -23
  23. package/lib/components/Chat/ChatTranscript.d.ts.map +0 -1
  24. package/lib/components/Chat/ChatTranscript.js +0 -45
  25. package/lib/components/Chat/ChatTranscript.js.map +0 -1
  26. package/lib/components/Chat/Message.d.ts +0 -46
  27. package/lib/components/Chat/Message.d.ts.map +0 -1
  28. package/lib/components/Chat/Message.js +0 -59
  29. package/lib/components/Chat/Message.js.map +0 -1
  30. package/lib/components/Chat/Message.styles.d.ts +0 -29
  31. package/lib/components/Chat/Message.styles.d.ts.map +0 -1
  32. package/lib/components/Chat/Message.styles.js +0 -193
  33. package/lib/components/Chat/Message.styles.js.map +0 -1
  34. package/lib/components/Chat/MessageList.d.ts +0 -35
  35. package/lib/components/Chat/MessageList.d.ts.map +0 -1
  36. package/lib/components/Chat/MessageList.js +0 -123
  37. package/lib/components/Chat/MessageList.js.map +0 -1
  38. package/lib/components/Chat/RepeatingView.d.ts +0 -31
  39. package/lib/components/Chat/RepeatingView.d.ts.map +0 -1
  40. package/lib/components/Chat/RepeatingView.js +0 -47
  41. package/lib/components/Chat/RepeatingView.js.map +0 -1
  42. package/lib/components/Chat/SuggestedReplyPicker.d.ts +0 -26
  43. package/lib/components/Chat/SuggestedReplyPicker.d.ts.map +0 -1
  44. package/lib/components/Chat/SuggestedReplyPicker.js +0 -78
  45. package/lib/components/Chat/SuggestedReplyPicker.js.map +0 -1
  46. package/lib/components/Chat/SystemMessage.d.ts +0 -19
  47. package/lib/components/Chat/SystemMessage.d.ts.map +0 -1
  48. package/lib/components/Chat/SystemMessage.js +0 -40
  49. package/lib/components/Chat/SystemMessage.js.map +0 -1
  50. package/lib/components/Chat/TranscriptMessage.d.ts +0 -25
  51. package/lib/components/Chat/TranscriptMessage.d.ts.map +0 -1
  52. package/lib/components/Chat/TranscriptMessage.js +0 -47
  53. package/lib/components/Chat/TranscriptMessage.js.map +0 -1
  54. package/lib/components/Chat/TypeIndicator.d.ts +0 -13
  55. package/lib/components/Chat/TypeIndicator.d.ts.map +0 -1
  56. package/lib/components/Chat/TypeIndicator.js +0 -9
  57. package/lib/components/Chat/TypeIndicator.js.map +0 -1
  58. package/lib/components/Chat/index.d.ts +0 -14
  59. package/lib/components/Chat/index.d.ts.map +0 -1
  60. package/lib/components/Chat/index.js +0 -13
  61. package/lib/components/Chat/index.js.map +0 -1
  62. package/lib/components/Email/Email.d.ts +0 -6
  63. package/lib/components/Email/Email.d.ts.map +0 -1
  64. package/lib/components/Email/Email.js +0 -153
  65. package/lib/components/Email/Email.js.map +0 -1
  66. package/lib/components/Email/Email.styles.d.ts +0 -18
  67. package/lib/components/Email/Email.styles.d.ts.map +0 -1
  68. package/lib/components/Email/Email.styles.js +0 -131
  69. package/lib/components/Email/Email.styles.js.map +0 -1
  70. package/lib/components/Email/Email.types.d.ts +0 -237
  71. package/lib/components/Email/Email.types.d.ts.map +0 -1
  72. package/lib/components/Email/Email.types.js +0 -2
  73. package/lib/components/Email/Email.types.js.map +0 -1
  74. package/lib/components/Email/EmailComposer.d.ts +0 -9
  75. package/lib/components/Email/EmailComposer.d.ts.map +0 -1
  76. package/lib/components/Email/EmailComposer.js +0 -185
  77. package/lib/components/Email/EmailComposer.js.map +0 -1
  78. package/lib/components/Email/EmailConversation.d.ts +0 -14
  79. package/lib/components/Email/EmailConversation.d.ts.map +0 -1
  80. package/lib/components/Email/EmailConversation.js +0 -179
  81. package/lib/components/Email/EmailConversation.js.map +0 -1
  82. package/lib/components/Email/EmailEntity.d.ts +0 -6
  83. package/lib/components/Email/EmailEntity.d.ts.map +0 -1
  84. package/lib/components/Email/EmailEntity.js +0 -19
  85. package/lib/components/Email/EmailEntity.js.map +0 -1
  86. package/lib/components/Email/EmailSelector.d.ts +0 -19
  87. package/lib/components/Email/EmailSelector.d.ts.map +0 -1
  88. package/lib/components/Email/EmailSelector.js +0 -103
  89. package/lib/components/Email/EmailSelector.js.map +0 -1
  90. package/lib/components/Email/EmailShell.d.ts +0 -9
  91. package/lib/components/Email/EmailShell.d.ts.map +0 -1
  92. package/lib/components/Email/EmailShell.js +0 -56
  93. package/lib/components/Email/EmailShell.js.map +0 -1
  94. package/lib/components/Email/EmailSummaryItem.d.ts +0 -10
  95. package/lib/components/Email/EmailSummaryItem.d.ts.map +0 -1
  96. package/lib/components/Email/EmailSummaryItem.js +0 -93
  97. package/lib/components/Email/EmailSummaryItem.js.map +0 -1
  98. package/lib/components/Email/EmailSummaryList.d.ts +0 -6
  99. package/lib/components/Email/EmailSummaryList.d.ts.map +0 -1
  100. package/lib/components/Email/EmailSummaryList.js +0 -115
  101. package/lib/components/Email/EmailSummaryList.js.map +0 -1
  102. package/lib/components/Email/ViewAnalysis.d.ts +0 -6
  103. package/lib/components/Email/ViewAnalysis.d.ts.map +0 -1
  104. package/lib/components/Email/ViewAnalysis.js +0 -20
  105. package/lib/components/Email/ViewAnalysis.js.map +0 -1
  106. package/lib/components/Email/index.d.ts +0 -9
  107. package/lib/components/Email/index.d.ts.map +0 -1
  108. package/lib/components/Email/index.js +0 -8
  109. package/lib/components/Email/index.js.map +0 -1
  110. package/lib/components/Feed/Feed.context.d.ts +0 -35
  111. package/lib/components/Feed/Feed.context.d.ts.map +0 -1
  112. package/lib/components/Feed/Feed.context.js +0 -8
  113. package/lib/components/Feed/Feed.context.js.map +0 -1
  114. package/lib/components/Feed/Feed.d.ts +0 -52
  115. package/lib/components/Feed/Feed.d.ts.map +0 -1
  116. package/lib/components/Feed/Feed.js +0 -143
  117. package/lib/components/Feed/Feed.js.map +0 -1
  118. package/lib/components/Feed/FeedAnnouncer.d.ts +0 -7
  119. package/lib/components/Feed/FeedAnnouncer.d.ts.map +0 -1
  120. package/lib/components/Feed/FeedAnnouncer.js +0 -11
  121. package/lib/components/Feed/FeedAnnouncer.js.map +0 -1
  122. package/lib/components/Feed/FeedAttachments.d.ts +0 -14
  123. package/lib/components/Feed/FeedAttachments.d.ts.map +0 -1
  124. package/lib/components/Feed/FeedAttachments.js +0 -94
  125. package/lib/components/Feed/FeedAttachments.js.map +0 -1
  126. package/lib/components/Feed/FeedButton.d.ts +0 -6
  127. package/lib/components/Feed/FeedButton.d.ts.map +0 -1
  128. package/lib/components/Feed/FeedButton.js +0 -23
  129. package/lib/components/Feed/FeedButton.js.map +0 -1
  130. package/lib/components/Feed/FeedContent.d.ts +0 -14
  131. package/lib/components/Feed/FeedContent.d.ts.map +0 -1
  132. package/lib/components/Feed/FeedContent.js +0 -39
  133. package/lib/components/Feed/FeedContent.js.map +0 -1
  134. package/lib/components/Feed/FeedLikeButton.d.ts +0 -19
  135. package/lib/components/Feed/FeedLikeButton.d.ts.map +0 -1
  136. package/lib/components/Feed/FeedLikeButton.js +0 -87
  137. package/lib/components/Feed/FeedLikeButton.js.map +0 -1
  138. package/lib/components/Feed/FeedModalList.d.ts +0 -15
  139. package/lib/components/Feed/FeedModalList.d.ts.map +0 -1
  140. package/lib/components/Feed/FeedModalList.js +0 -49
  141. package/lib/components/Feed/FeedModalList.js.map +0 -1
  142. package/lib/components/Feed/FeedNewPost.d.ts +0 -36
  143. package/lib/components/Feed/FeedNewPost.d.ts.map +0 -1
  144. package/lib/components/Feed/FeedNewPost.js +0 -108
  145. package/lib/components/Feed/FeedNewPost.js.map +0 -1
  146. package/lib/components/Feed/FeedNewPostTypeMenu.d.ts +0 -35
  147. package/lib/components/Feed/FeedNewPostTypeMenu.d.ts.map +0 -1
  148. package/lib/components/Feed/FeedNewPostTypeMenu.js +0 -387
  149. package/lib/components/Feed/FeedNewPostTypeMenu.js.map +0 -1
  150. package/lib/components/Feed/FeedPost.d.ts +0 -10
  151. package/lib/components/Feed/FeedPost.d.ts.map +0 -1
  152. package/lib/components/Feed/FeedPost.js +0 -185
  153. package/lib/components/Feed/FeedPost.js.map +0 -1
  154. package/lib/components/Feed/FeedPost.types.d.ts +0 -101
  155. package/lib/components/Feed/FeedPost.types.d.ts.map +0 -1
  156. package/lib/components/Feed/FeedPost.types.js +0 -2
  157. package/lib/components/Feed/FeedPost.types.js.map +0 -1
  158. package/lib/components/Feed/FeedReply.d.ts +0 -10
  159. package/lib/components/Feed/FeedReply.d.ts.map +0 -1
  160. package/lib/components/Feed/FeedReply.js +0 -131
  161. package/lib/components/Feed/FeedReply.js.map +0 -1
  162. package/lib/components/Feed/FeedReply.types.d.ts +0 -68
  163. package/lib/components/Feed/FeedReply.types.d.ts.map +0 -1
  164. package/lib/components/Feed/FeedReply.types.js +0 -2
  165. package/lib/components/Feed/FeedReply.types.js.map +0 -1
  166. package/lib/components/Feed/FeedReplyInput.d.ts +0 -32
  167. package/lib/components/Feed/FeedReplyInput.d.ts.map +0 -1
  168. package/lib/components/Feed/FeedReplyInput.js +0 -105
  169. package/lib/components/Feed/FeedReplyInput.js.map +0 -1
  170. package/lib/components/Feed/FeedRichText.d.ts +0 -9
  171. package/lib/components/Feed/FeedRichText.d.ts.map +0 -1
  172. package/lib/components/Feed/FeedRichText.js +0 -96
  173. package/lib/components/Feed/FeedRichText.js.map +0 -1
  174. package/lib/components/Feed/index.d.ts +0 -10
  175. package/lib/components/Feed/index.d.ts.map +0 -1
  176. package/lib/components/Feed/index.js +0 -6
  177. package/lib/components/Feed/index.js.map +0 -1
  178. package/lib/components/HashtagButton/HashtagButton.d.ts +0 -16
  179. package/lib/components/HashtagButton/HashtagButton.d.ts.map +0 -1
  180. package/lib/components/HashtagButton/HashtagButton.js +0 -31
  181. package/lib/components/HashtagButton/HashtagButton.js.map +0 -1
  182. package/lib/components/HashtagButton/index.d.ts +0 -3
  183. package/lib/components/HashtagButton/index.d.ts.map +0 -1
  184. package/lib/components/HashtagButton/index.js +0 -3
  185. package/lib/components/HashtagButton/index.js.map +0 -1
  186. package/lib/components/MentionButton/MentionButton.d.ts +0 -20
  187. package/lib/components/MentionButton/MentionButton.d.ts.map +0 -1
  188. package/lib/components/MentionButton/MentionButton.js +0 -58
  189. package/lib/components/MentionButton/MentionButton.js.map +0 -1
  190. package/lib/components/MentionButton/index.d.ts +0 -3
  191. package/lib/components/MentionButton/index.d.ts.map +0 -1
  192. package/lib/components/MentionButton/index.js +0 -3
  193. package/lib/components/MentionButton/index.js.map +0 -1
  194. package/lib/index.d.ts +0 -11
  195. package/lib/index.d.ts.map +0 -1
  196. package/lib/index.js +0 -12
  197. package/lib/index.js.map +0 -1
@@ -1,123 +0,0 @@
1
- import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { forwardRef, useImperativeHandle, useRef, useCallback, useState, useLayoutEffect } from 'react';
3
- import styled, { css } from 'styled-components';
4
- import { Button, Flex, Icon, registerIcon, StyledButton, useI18n, debounce, defaultThemeProp } from '@pega/cosmos-react-core';
5
- import * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';
6
- import RepeatingView, { StyledRepeatingView, StyledRepeatingViewItem, StyledRepeatingViewUL } from './RepeatingView';
7
- import Message from './Message';
8
- import SystemMessage from './SystemMessage';
9
- import TypeIndicator from './TypeIndicator';
10
- registerIcon(caretDownIcon);
11
- const StyledMessageList = styled.div ``;
12
- export const NewMessageSeparatorId = 'new-message-separator';
13
- const StyledMessageListContainer = styled.div(props => {
14
- const { theme: { base: { shadow: { high: shadowHigh }, colors: { white } } } } = props;
15
- return css `
16
- position: relative;
17
- overflow-y: hidden;
18
- > ${StyledMessageList} {
19
- overflow-y: auto;
20
- }
21
- > ${StyledButton} {
22
- position: absolute;
23
- bottom: 0;
24
- left: 50%;
25
- transform: translate(-50%, -50%);
26
- box-shadow: ${shadowHigh};
27
- z-index: 1;
28
- background-color: ${white};
29
- }
30
- ${StyledRepeatingView} {
31
- overflow-y: hidden;
32
- }
33
- ${StyledRepeatingViewUL} {
34
- padding: 1rem;
35
- }
36
-
37
- ${StyledRepeatingViewItem} {
38
- padding: 0.125rem 0;
39
- }
40
- `;
41
- });
42
- StyledMessageListContainer.defaultProps = defaultThemeProp;
43
- const ScrollToLatest = props => {
44
- const { scrollContainerRef } = props;
45
- useLayoutEffect(() => {
46
- if (scrollContainerRef.current) {
47
- scrollContainerRef.current.scrollTop =
48
- scrollContainerRef.current.scrollHeight - scrollContainerRef.current.offsetHeight;
49
- }
50
- });
51
- return _jsx(_Fragment, {}, void 0);
52
- };
53
- const MessageList = forwardRef((props, ref) => {
54
- const { messages, unReadMessageCount = 0, onScrollToButtonClick, ...restProps } = props;
55
- const t = useI18n();
56
- const conversationRef = useRef(null);
57
- const isScrolledToLatest = useCallback(() => {
58
- return conversationRef.current
59
- ? conversationRef.current.scrollHeight -
60
- conversationRef.current.scrollTop -
61
- conversationRef.current.offsetHeight <=
62
- 30
63
- : true;
64
- }, [conversationRef.current]);
65
- const scrollToLatestMessage = useCallback(() => {
66
- if (conversationRef.current) {
67
- conversationRef.current.scrollTop = conversationRef.current.scrollHeight;
68
- }
69
- }, [conversationRef.current]);
70
- const [displayScrollLatest, setDisplayScrollToLatest] = useState(false);
71
- const onMessageListScroll = useCallback(() => {
72
- setDisplayScrollToLatest(!isScrolledToLatest());
73
- }, [isScrolledToLatest()]);
74
- const scrollToNewMessage = useCallback(() => {
75
- if (conversationRef.current) {
76
- setDisplayScrollToLatest(false);
77
- const newMessageIndicatorEle = conversationRef.current.querySelector('[data-new-message-separator]');
78
- if (newMessageIndicatorEle) {
79
- conversationRef.current.scrollTop = newMessageIndicatorEle.offsetTop;
80
- }
81
- else {
82
- conversationRef.current.scrollTop = conversationRef.current.scrollHeight;
83
- }
84
- }
85
- }, [conversationRef.current]);
86
- useImperativeHandle(ref, () => ({
87
- isScrolledToLatest,
88
- scrollToLatestMessage,
89
- scrollToNewMessage
90
- }), [isScrolledToLatest, scrollToLatestMessage, scrollToNewMessage]);
91
- return (_jsxs(_Fragment, { children: [_jsxs(Flex, { as: StyledMessageListContainer, item: {
92
- grow: 1
93
- }, container: {
94
- direction: 'column'
95
- }, ...restProps, children: [(unReadMessageCount > 0 || displayScrollLatest) && (_jsxs(Button, { "aria-label": unReadMessageCount > 0
96
- ? t('scroll_to_unread_messages')
97
- : t('scroll_to_latest_message'), onClick: () => {
98
- if (unReadMessageCount > 0) {
99
- scrollToNewMessage();
100
- }
101
- else {
102
- scrollToLatestMessage();
103
- }
104
- onScrollToButtonClick?.();
105
- }, icon: unReadMessageCount === 0, children: [_jsx(Icon, { name: 'caret-down' }, void 0), unReadMessageCount > 0 && _jsxs(_Fragment, { children: ["\u00A0 ", t('new_messages')] }, void 0)] }, void 0)), _jsx(RepeatingView, { as: StyledMessageList, container: { direction: 'column' }, ref: conversationRef, rows: messages, onScroll: debounce(onMessageListScroll, 100), ...restProps, children: (item) => {
106
- const { id, type, ...messageListItemRestProps } = item;
107
- if (type === 'message') {
108
- return _jsx(Message, { ...messageListItemRestProps }, id);
109
- }
110
- if (type === 'system') {
111
- const extraProps = {};
112
- if (id === NewMessageSeparatorId) {
113
- extraProps['data-new-message-separator'] = NewMessageSeparatorId;
114
- }
115
- return (_jsx(SystemMessage, { ...messageListItemRestProps, ...extraProps }, id));
116
- }
117
- if (type === 'typing') {
118
- return (_jsx(TypeIndicator, { ...messageListItemRestProps }, id));
119
- }
120
- } }, void 0)] }, void 0), isScrolledToLatest() && _jsx(ScrollToLatest, { scrollContainerRef: conversationRef }, void 0)] }, void 0));
121
- });
122
- export default MessageList;
123
- //# sourceMappingURL=MessageList.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"MessageList.js","sourceRoot":"","sources":["../../../src/components/Chat/MessageList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FunctionComponent,\n PropsWithoutRef,\n forwardRef,\n Ref,\n useImperativeHandle,\n useRef,\n useCallback,\n useState,\n useLayoutEffect,\n RefObject\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Button,\n Flex,\n Icon,\n registerIcon,\n StyledButton,\n useI18n,\n debounce,\n defaultThemeProp,\n ForwardProps,\n OmitStrict\n} from '@pega/cosmos-react-core';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\n\nimport RepeatingView, {\n RepeatingViewProps,\n RepeatingViewRow,\n StyledRepeatingView,\n StyledRepeatingViewItem,\n StyledRepeatingViewUL\n} from './RepeatingView';\nimport Message, { MessageProps } from './Message';\nimport SystemMessage, { SystemMessageProps } from './SystemMessage';\nimport TypeIndicator, { TypeIndicatorProps } from './TypeIndicator';\n\nregisterIcon(caretDownIcon);\n\nexport interface MessageListImperativeHandleProps {\n isScrolledToLatest: () => boolean;\n scrollToLatestMessage: () => void;\n scrollToNewMessage: () => void;\n}\n\nexport type MessageListItemProps =\n | (MessageProps & { type: 'message'; id: RepeatingViewRow['id'] })\n | (SystemMessageProps & { type: 'system'; id: RepeatingViewRow['id'] })\n | (TypeIndicatorProps & { type: 'typing'; id: RepeatingViewRow['id'] });\n\nexport interface MessageListProps\n extends OmitStrict<RepeatingViewProps, 'children' | 'rows' | 'ref'> {\n /** Messages Data array */\n messages: MessageListItemProps[];\n /** ref to the message list */\n ref?: Ref<MessageListImperativeHandleProps>;\n /** Total unread messages */\n unReadMessageCount?: number;\n /** on scroll to button */\n onScrollToButtonClick?: () => void;\n}\n\nconst StyledMessageList = styled.div``;\n\nexport const NewMessageSeparatorId = 'new-message-separator';\n\nconst StyledMessageListContainer = styled.div(props => {\n const {\n theme: {\n base: {\n shadow: { high: shadowHigh },\n colors: { white }\n }\n }\n } = props;\n return css`\n position: relative;\n overflow-y: hidden;\n > ${StyledMessageList} {\n overflow-y: auto;\n }\n > ${StyledButton} {\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translate(-50%, -50%);\n box-shadow: ${shadowHigh};\n z-index: 1;\n background-color: ${white};\n }\n ${StyledRepeatingView} {\n overflow-y: hidden;\n }\n ${StyledRepeatingViewUL} {\n padding: 1rem;\n }\n\n ${StyledRepeatingViewItem} {\n padding: 0.125rem 0;\n }\n `;\n});\n\nStyledMessageListContainer.defaultProps = defaultThemeProp;\n\nconst ScrollToLatest: FunctionComponent<{\n scrollContainerRef: RefObject<HTMLUListElement>;\n}> = props => {\n const { scrollContainerRef } = props;\n useLayoutEffect(() => {\n if (scrollContainerRef.current) {\n scrollContainerRef.current.scrollTop =\n scrollContainerRef.current.scrollHeight - scrollContainerRef.current.offsetHeight;\n }\n });\n return <></>;\n};\n\nconst MessageList: FunctionComponent<MessageListProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<MessageListProps>, ref: MessageListProps['ref']) => {\n const { messages, unReadMessageCount = 0, onScrollToButtonClick, ...restProps } = props;\n\n const t = useI18n();\n\n const conversationRef = useRef<HTMLUListElement>(null);\n\n const isScrolledToLatest: MessageListImperativeHandleProps['isScrolledToLatest'] =\n useCallback(() => {\n return conversationRef.current\n ? conversationRef.current.scrollHeight -\n conversationRef.current.scrollTop -\n conversationRef.current.offsetHeight <=\n 30\n : true;\n }, [conversationRef.current]);\n\n const scrollToLatestMessage: MessageListImperativeHandleProps['scrollToLatestMessage'] =\n useCallback(() => {\n if (conversationRef.current) {\n conversationRef.current.scrollTop = conversationRef.current.scrollHeight;\n }\n }, [conversationRef.current]);\n\n const [displayScrollLatest, setDisplayScrollToLatest] = useState(false);\n\n const onMessageListScroll = useCallback(() => {\n setDisplayScrollToLatest(!isScrolledToLatest());\n }, [isScrolledToLatest()]);\n\n const scrollToNewMessage: MessageListImperativeHandleProps['scrollToNewMessage'] =\n useCallback(() => {\n if (conversationRef.current) {\n setDisplayScrollToLatest(false);\n const newMessageIndicatorEle = conversationRef.current.querySelector<HTMLElement>(\n '[data-new-message-separator]'\n );\n if (newMessageIndicatorEle) {\n conversationRef.current.scrollTop = newMessageIndicatorEle.offsetTop;\n } else {\n conversationRef.current.scrollTop = conversationRef.current.scrollHeight;\n }\n }\n }, [conversationRef.current]);\n\n useImperativeHandle<MessageListImperativeHandleProps, MessageListImperativeHandleProps>(\n ref,\n () => ({\n isScrolledToLatest,\n scrollToLatestMessage,\n scrollToNewMessage\n }),\n [isScrolledToLatest, scrollToLatestMessage, scrollToNewMessage]\n );\n\n return (\n <>\n <Flex\n as={StyledMessageListContainer}\n item={{\n grow: 1\n }}\n container={{\n direction: 'column'\n }}\n {...restProps}\n >\n {(unReadMessageCount > 0 || displayScrollLatest) && (\n <Button\n aria-label={\n unReadMessageCount > 0\n ? t('scroll_to_unread_messages')\n : t('scroll_to_latest_message')\n }\n onClick={() => {\n if (unReadMessageCount > 0) {\n scrollToNewMessage();\n } else {\n scrollToLatestMessage();\n }\n onScrollToButtonClick?.();\n }}\n icon={unReadMessageCount === 0}\n >\n <Icon name='caret-down' />\n {unReadMessageCount > 0 && <>&nbsp; {t('new_messages')}</>}\n </Button>\n )}\n <RepeatingView\n as={StyledMessageList}\n container={{ direction: 'column' }}\n ref={conversationRef}\n rows={messages}\n onScroll={debounce(onMessageListScroll, 100)}\n {...restProps}\n >\n {(item: RepeatingViewRow) => {\n const { id, type, ...messageListItemRestProps } = item as MessageListItemProps;\n if (type === 'message') {\n return <Message key={id} {...(messageListItemRestProps as MessageProps)} />;\n }\n\n if (type === 'system') {\n const extraProps: Record<string, string> = {};\n if (id === NewMessageSeparatorId) {\n extraProps['data-new-message-separator'] = NewMessageSeparatorId;\n }\n return (\n <SystemMessage\n key={id}\n {...(messageListItemRestProps as SystemMessageProps)}\n {...extraProps}\n />\n );\n }\n if (type === 'typing') {\n return (\n <TypeIndicator key={id} {...(messageListItemRestProps as TypeIndicatorProps)} />\n );\n }\n }}\n </RepeatingView>\n </Flex>\n {isScrolledToLatest() && <ScrollToLatest scrollContainerRef={conversationRef} />}\n </>\n );\n }\n);\n\nexport default MessageList;\n"]}
@@ -1,31 +0,0 @@
1
- import { FunctionComponent, Ref, ReactNode } from 'react';
2
- import { ForwardProps } from '@pega/cosmos-react-core';
3
- export interface RepeatingViewRow {
4
- id: string | number;
5
- ariaLabel?: string;
6
- }
7
- export interface RepeatingViewProps {
8
- /** ref to the list element */
9
- ref?: Ref<HTMLUListElement>;
10
- /** Callback to render the view */
11
- children: (row: RepeatingViewRow) => ReactNode;
12
- /** Data rows */
13
- rows?: RepeatingViewRow[];
14
- /** Indicates if the data is being currently loading */
15
- loading?: boolean;
16
- /** Offset of the row item that need to trigger the load more callback */
17
- offset?: number;
18
- /** Callback to fetch more rows */
19
- loadMore?: () => void;
20
- /** UI that needs to be shown when list is empty */
21
- emptyView?: ReactNode;
22
- /** Scroll direction */
23
- scrollDirection?: 'top-to-bottom' | 'bottom-to-top';
24
- }
25
- export declare const StyledRepeatingViewItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {}, never>;
26
- export declare const StyledRepeatingViewUL: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
27
- export declare const StyledRepeatingView: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
28
- export declare const StyledEmptyView: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
29
- declare const RepeatingView: FunctionComponent<RepeatingViewProps & ForwardProps>;
30
- export default RepeatingView;
31
- //# sourceMappingURL=RepeatingView.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"RepeatingView.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/RepeatingView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvF,OAAO,EAML,YAAY,EACb,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,8BAA8B;IAC9B,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,kCAAkC;IAClC,QAAQ,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,SAAS,CAAC;IAC/C,gBAAgB;IAChB,IAAI,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC1B,uDAAuD;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yEAAyE;IACzE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,mDAAmD;IACnD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,uBAAuB;IACvB,eAAe,CAAC,EAAE,eAAe,GAAG,eAAe,CAAC;CACrD;AACD,eAAO,MAAM,uBAAuB,wGAOlC,CAAC;AAGH,eAAO,MAAM,qBAAqB,wGAKjC,CAAC;AAEF,eAAO,MAAM,mBAAmB,yGAE/B,CAAC;AAEF,eAAO,MAAM,eAAe,yGAM3B,CAAC;AAEF,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CA6DvE,CAAC;AAEF,eAAe,aAAa,CAAC"}
@@ -1,47 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { forwardRef } from 'react';
3
- import styled, { css } from 'styled-components';
4
- import { Flex, Progress, useItemIntersection, useConsolidatedRef, defaultThemeProp } from '@pega/cosmos-react-core';
5
- export const StyledRepeatingViewItem = styled.li(({ theme }) => {
6
- return css `
7
- outline: none;
8
- &:focus {
9
- box-shadow: ${theme.base.shadow.focus};
10
- }
11
- `;
12
- });
13
- StyledRepeatingViewItem.defaultProps = defaultThemeProp;
14
- export const StyledRepeatingViewUL = styled.ul `
15
- list-style-type: none;
16
- overflow-y: auto;
17
- height: 100%;
18
- width: 100%;
19
- `;
20
- export const StyledRepeatingView = styled.div `
21
- position: relative;
22
- `;
23
- export const StyledEmptyView = styled.div `
24
- position: absolute;
25
- bottom: 50%;
26
- left: 50%;
27
- transform: translate(-50%, -50%);
28
- z-index: 1;
29
- `;
30
- const RepeatingView = forwardRef((props, ref) => {
31
- const { children: renderer, offset = -1, loadMore, loading: isLoading = false, rows = [], emptyView, scrollDirection = 'top-to-bottom', ...restProps } = props;
32
- const listRef = useConsolidatedRef(ref);
33
- useItemIntersection(listRef, offset, () => {
34
- loadMore?.();
35
- }, ':scope > li');
36
- return (_jsxs(Flex, { container: {
37
- alignItems: 'center',
38
- justify: 'center'
39
- }, tabindex: 0, as: StyledRepeatingView, ...restProps, children: [_jsxs(Flex, { ...restProps, container: {
40
- direction: scrollDirection === 'top-to-bottom' ? 'column' : 'column-reverse'
41
- }, as: StyledRepeatingViewUL, ref: listRef, children: [rows.map(row => {
42
- const { ariaLabel, ...rowRestProps } = row;
43
- return (_jsx(StyledRepeatingViewItem, { "aria-label": ariaLabel, tabIndex: 0, children: renderer(rowRestProps) }, row.id));
44
- }), isLoading && (_jsx(StyledRepeatingViewItem, { children: _jsx(Progress, { placement: 'inline' }, void 0) }, 'loader'))] }, void 0), !isLoading && rows.length === 0 && emptyView && (_jsx(StyledEmptyView, { children: emptyView }, void 0))] }, void 0));
45
- });
46
- export default RepeatingView;
47
- //# sourceMappingURL=RepeatingView.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"RepeatingView.js","sourceRoot":"","sources":["../../../src/components/Chat/RepeatingView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAsC,UAAU,EAAkB,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,mBAAmB,EACnB,kBAAkB,EAClB,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AAyBjC,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7D,OAAO,GAAG,CAAA;;;oBAGQ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;GAExC,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;CAK7C,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE5C,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMxC,CAAC;AAEF,MAAM,aAAa,GAAyD,UAAU,CACpF,CAAC,KAA0C,EAAE,GAA8B,EAAE,EAAE;IAC7E,MAAM,EACJ,QAAQ,EAAE,QAAQ,EAClB,MAAM,GAAG,CAAC,CAAC,EACX,QAAQ,EACR,OAAO,EAAE,SAAS,GAAG,KAAK,EAC1B,IAAI,GAAG,EAAE,EACT,SAAS,EACT,eAAe,GAAG,eAAe,EACjC,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACxC,mBAAmB,CACjB,OAAO,EACP,MAAM,EACN,GAAG,EAAE;QACH,QAAQ,EAAE,EAAE,CAAC;IACf,CAAC,EACD,aAAa,CACd,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE;YACT,UAAU,EAAE,QAAQ;YACpB,OAAO,EAAE,QAAQ;SAClB,EACD,QAAQ,EAAE,CAAC,EACX,EAAE,EAAE,mBAAmB,KACnB,SAAS,aAEb,MAAC,IAAI,OACC,SAAS,EACb,SAAS,EAAE;oBACT,SAAS,EAAE,eAAe,KAAK,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB;iBAC7E,EACD,EAAE,EAAE,qBAAqB,EACzB,GAAG,EAAE,OAAO,aAEX,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;wBACd,MAAM,EAAE,SAAS,EAAE,GAAG,YAAY,EAAE,GAAG,GAAG,CAAC;wBAC3C,OAAO,CACL,KAAC,uBAAuB,kBAAa,SAAS,EAAE,QAAQ,EAAE,CAAC,YACxD,QAAQ,CAAC,YAAY,CAAC,IADyC,GAAG,CAAC,EAAE,CAE9C,CAC3B,CAAC;oBACJ,CAAC,CAAC,EACD,SAAS,IAAI,CACZ,KAAC,uBAAuB,cACtB,KAAC,QAAQ,IAAC,SAAS,EAAC,QAAQ,WAAG,IADJ,QAAQ,CAEX,CAC3B,YACI,EACN,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,SAAS,IAAI,CAC/C,KAAC,eAAe,cAAE,SAAS,WAAmB,CAC/C,YACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { FunctionComponent, PropsWithoutRef, forwardRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Flex,\n Progress,\n useItemIntersection,\n useConsolidatedRef,\n defaultThemeProp,\n ForwardProps\n} from '@pega/cosmos-react-core';\n\nexport interface RepeatingViewRow {\n id: string | number;\n ariaLabel?: string;\n}\n\nexport interface RepeatingViewProps {\n /** ref to the list element */\n ref?: Ref<HTMLUListElement>;\n /** Callback to render the view */\n children: (row: RepeatingViewRow) => ReactNode;\n /** Data rows */\n rows?: RepeatingViewRow[];\n /** Indicates if the data is being currently loading */\n loading?: boolean;\n /** Offset of the row item that need to trigger the load more callback */\n offset?: number;\n /** Callback to fetch more rows */\n loadMore?: () => void;\n /** UI that needs to be shown when list is empty */\n emptyView?: ReactNode;\n /** Scroll direction */\n scrollDirection?: 'top-to-bottom' | 'bottom-to-top';\n}\nexport const StyledRepeatingViewItem = styled.li(({ theme }) => {\n return css`\n outline: none;\n &:focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\nStyledRepeatingViewItem.defaultProps = defaultThemeProp;\n\nexport const StyledRepeatingViewUL = styled.ul`\n list-style-type: none;\n overflow-y: auto;\n height: 100%;\n width: 100%;\n`;\n\nexport const StyledRepeatingView = styled.div`\n position: relative;\n`;\n\nexport const StyledEmptyView = styled.div`\n position: absolute;\n bottom: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 1;\n`;\n\nconst RepeatingView: FunctionComponent<RepeatingViewProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<RepeatingViewProps>, ref: RepeatingViewProps['ref']) => {\n const {\n children: renderer,\n offset = -1,\n loadMore,\n loading: isLoading = false,\n rows = [],\n emptyView,\n scrollDirection = 'top-to-bottom',\n ...restProps\n } = props;\n\n const listRef = useConsolidatedRef(ref);\n useItemIntersection(\n listRef,\n offset,\n () => {\n loadMore?.();\n },\n ':scope > li'\n );\n\n return (\n <Flex\n container={{\n alignItems: 'center',\n justify: 'center'\n }}\n tabindex={0}\n as={StyledRepeatingView}\n {...restProps}\n >\n <Flex\n {...restProps}\n container={{\n direction: scrollDirection === 'top-to-bottom' ? 'column' : 'column-reverse'\n }}\n as={StyledRepeatingViewUL}\n ref={listRef}\n >\n {rows.map(row => {\n const { ariaLabel, ...rowRestProps } = row;\n return (\n <StyledRepeatingViewItem aria-label={ariaLabel} tabIndex={0} key={row.id}>\n {renderer(rowRestProps)}\n </StyledRepeatingViewItem>\n );\n })}\n {isLoading && (\n <StyledRepeatingViewItem key='loader'>\n <Progress placement='inline' />\n </StyledRepeatingViewItem>\n )}\n </Flex>\n {!isLoading && rows.length === 0 && emptyView && (\n <StyledEmptyView>{emptyView}</StyledEmptyView>\n )}\n </Flex>\n );\n }\n);\n\nexport default RepeatingView;\n"]}
@@ -1,26 +0,0 @@
1
- import { FunctionComponent, Ref } from 'react';
2
- import { ForwardProps } from '@pega/cosmos-react-core';
3
- export declare const StyledSuggestedReplyHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
4
- export declare const StyledSuggestedReplyContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
5
- export declare const StyledSuggestedReplyIcon: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, {}, never>;
6
- export interface SuggestedReply {
7
- /** Id for this suggested reply */
8
- id: string;
9
- /** Suggested reply message */
10
- message: string;
11
- /** Confidence of this suggested reply */
12
- confidence: number;
13
- }
14
- export interface SuggestedReplyPickerProps {
15
- /** ref to the element */
16
- ref?: Ref<HTMLDivElement>;
17
- /** Suggested replies */
18
- replies?: SuggestedReply[];
19
- /** Callback for the event when a suggested reply is selected */
20
- onSelect: (suggestedReply: SuggestedReply) => void;
21
- /** Callback for the event close button is clicked */
22
- onDismiss: () => void;
23
- }
24
- declare const SuggestedReplyPicker: FunctionComponent<SuggestedReplyPickerProps & ForwardProps>;
25
- export default SuggestedReplyPicker;
26
- //# sourceMappingURL=SuggestedReplyPicker.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SuggestedReplyPicker.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/SuggestedReplyPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAuB,MAAM,OAAO,CAAC;AAGjG,OAAO,EAQL,YAAY,EACb,MAAM,yBAAyB,CAAC;AAOjC,eAAO,MAAM,0BAA0B,yGAAe,CAAC;AACvD,eAAO,MAAM,2BAA2B,yGAAe,CAAC;AACxD,eAAO,MAAM,wBAAwB,yGAAe,CAAC;AAsBrD,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,gEAAgE;IAChE,QAAQ,EAAE,CAAC,cAAc,EAAE,cAAc,KAAK,IAAI,CAAC;IACnD,qDAAqD;IACrD,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,QAAA,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,GAAG,YAAY,CAsHnF,CAAC;AAEJ,eAAe,oBAAoB,CAAC"}
@@ -1,78 +0,0 @@
1
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { forwardRef, useEffect, useState } from 'react';
3
- import styled, { css } from 'styled-components';
4
- import { Flex, Icon, registerIcon, Button, Text, useI18n, defaultThemeProp } from '@pega/cosmos-react-core';
5
- import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
6
- import * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';
7
- import * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';
8
- registerIcon(timesIcon, caretLeftIcon, caretRightIcon);
9
- export const StyledSuggestedReplyHeader = styled.div ``;
10
- export const StyledSuggestedReplyContent = styled.div ``;
11
- export const StyledSuggestedReplyIcon = styled.svg ``;
12
- const StyledSuggestedReplyContainer = styled.div(props => {
13
- const { theme } = props;
14
- return css `
15
- border-top: 0.0625rem solid ${theme.base.palette['border-line']};
16
- background-color: ${theme.base.palette['primary-background']};
17
- > ${StyledSuggestedReplyHeader} {
18
- ${StyledSuggestedReplyIcon} {
19
- font-size: 1.2rem;
20
- }
21
- padding: 0.5rem;
22
- border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
23
- }
24
- > ${StyledSuggestedReplyContent} {
25
- padding: 1rem;
26
- }
27
- `;
28
- });
29
- StyledSuggestedReplyContainer.defaultProps = defaultThemeProp;
30
- const SuggestedReplyPicker = forwardRef((props, ref) => {
31
- const { replies = [], onSelect, onDismiss, ...restProps } = props;
32
- const [currentReply, setCurrentReply] = useState(null);
33
- useEffect(() => {
34
- setCurrentReply(replies.length > 0 ? replies[0] : null);
35
- }, [replies]);
36
- const t = useI18n();
37
- return (_jsxs(StyledSuggestedReplyContainer, { ref: ref, ...restProps, children: [_jsxs(Flex, { as: StyledSuggestedReplyHeader, container: {
38
- justify: 'between',
39
- alignContent: 'center'
40
- }, children: [_jsxs(Flex, { container: {
41
- alignItems: 'center',
42
- gap: 1
43
- }, children: [_jsx(Icon, { name: 'bulb-solid', as: StyledSuggestedReplyIcon }, void 0), currentReply && (_jsxs(_Fragment, { children: [_jsx(Text, { variant: 'h3', children: t('suggested_replies_current_of_total', [
44
- replies.indexOf(currentReply) + 1,
45
- replies.length
46
- ]) }, void 0), _jsx(Text, { variant: 'secondary', children: t('confidence_percentage', [currentReply.confidence]) }, void 0)] }, void 0))] }, void 0), _jsx(Button, { icon: true, variant: 'simple', onClick: onDismiss, "aria-label": t('dismiss_suggested_replies'), children: _jsx(Icon, { name: 'times' }, void 0) }, void 0)] }, void 0), _jsxs(Flex, { container: {
47
- direction: 'column',
48
- gap: 1
49
- }, as: StyledSuggestedReplyContent, children: [currentReply && _jsx("div", { children: currentReply.message }, void 0), _jsxs(Flex, { container: {
50
- justify: 'center'
51
- }, children: [_jsx(Button, { icon: true, "aria-label": t('prev_suggested_reply'), variant: 'simple', disabled: currentReply === null || replies.indexOf(currentReply) === 0, onClick: () => {
52
- setCurrentReply(prevCurrentReply => {
53
- if (prevCurrentReply) {
54
- const prevCurrentReplyIndex = replies.indexOf(prevCurrentReply);
55
- if (prevCurrentReplyIndex - 1 >= 0 && replies.length > 0) {
56
- return replies[prevCurrentReplyIndex - 1];
57
- }
58
- }
59
- return null;
60
- });
61
- }, children: _jsx(Icon, { name: 'caret-left' }, void 0) }, void 0), _jsx(Button, { disabled: currentReply === null, onClick: () => {
62
- if (currentReply) {
63
- onSelect(currentReply);
64
- }
65
- }, children: t('use') }, void 0), _jsx(Button, { icon: true, "aria-label": t('next_suggested_reply'), variant: 'simple', disabled: currentReply === null || replies.indexOf(currentReply) === replies.length - 1, onClick: () => {
66
- setCurrentReply(prevCurrentReply => {
67
- if (prevCurrentReply) {
68
- const prevCurrentReplyIndex = replies.indexOf(prevCurrentReply);
69
- if (prevCurrentReplyIndex + 1 <= replies.length) {
70
- return replies[prevCurrentReplyIndex + 1];
71
- }
72
- }
73
- return null;
74
- });
75
- }, children: _jsx(Icon, { name: 'caret-right' }, void 0) }, void 0)] }, void 0)] }, void 0)] }, void 0));
76
- });
77
- export default SuggestedReplyPicker;
78
- //# sourceMappingURL=SuggestedReplyPicker.js.map
@@ -1 +0,0 @@
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, useEffect, 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} 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 [currentReply, setCurrentReply] = useState<SuggestedReply | null>(null);\n\n useEffect(() => {\n setCurrentReply(replies.length > 0 ? replies[0] : null);\n }, [replies]);\n\n const t = useI18n();\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.indexOf(currentReply) + 1,\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.indexOf(currentReply) === 0}\n onClick={() => {\n setCurrentReply(prevCurrentReply => {\n if (prevCurrentReply) {\n const prevCurrentReplyIndex = replies.indexOf(prevCurrentReply);\n if (prevCurrentReplyIndex - 1 >= 0 && replies.length > 0) {\n return replies[prevCurrentReplyIndex - 1];\n }\n }\n return null;\n });\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 >\n {t('use')}\n </Button>\n <Button\n icon\n aria-label={t('next_suggested_reply')}\n variant='simple'\n disabled={\n currentReply === null || replies.indexOf(currentReply) === replies.length - 1\n }\n onClick={() => {\n setCurrentReply(prevCurrentReply => {\n if (prevCurrentReply) {\n const prevCurrentReplyIndex = replies.indexOf(prevCurrentReply);\n if (prevCurrentReplyIndex + 1 <= replies.length) {\n return replies[prevCurrentReplyIndex + 1];\n }\n }\n return null;\n });\n }}\n >\n <Icon name='caret-right' />\n </Button>\n </Flex>\n </Flex>\n </StyledSuggestedReplyContainer>\n );\n }\n );\n\nexport default SuggestedReplyPicker;\n"]}
@@ -1,19 +0,0 @@
1
- import { FunctionComponent, ReactNode, Ref } from 'react';
2
- import { ForwardProps, PropsWithDefaults } from '@pega/cosmos-react-core';
3
- export interface SystemMessageProps {
4
- /** Ref to the container element */
5
- ref?: Ref<HTMLDivElement>;
6
- /** System message to be displayed */
7
- message: ReactNode;
8
- /** timestamp of the message(Formatted) */
9
- timeStamp?: string;
10
- /** variant of this system message
11
- * @default "secondary"
12
- */
13
- variant?: 'primary' | 'secondary';
14
- }
15
- declare type SystemMessagePropsWithDefaults = PropsWithDefaults<SystemMessageProps, 'variant'>;
16
- export declare const StyledSystemMessage: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<SystemMessagePropsWithDefaults, "variant">, never>;
17
- declare const SystemMessage: FunctionComponent<SystemMessageProps & ForwardProps>;
18
- export default SystemMessage;
19
- //# sourceMappingURL=SystemMessage.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SystemMessage.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/SystemMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAIvF,OAAO,EAIL,YAAY,EACZ,iBAAiB,EAClB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,kBAAkB;IACjC,mCAAmC;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,qCAAqC;IACrC,OAAO,EAAE,SAAS,CAAC;IACnB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;CACnC;AAED,aAAK,8BAA8B,GAAG,iBAAiB,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAC;AAEvF,eAAO,MAAM,mBAAmB,sJA2C/B,CAAC;AAIF,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAoBvE,CAAC;AAEF,eAAe,aAAa,CAAC"}
@@ -1,40 +0,0 @@
1
- import { jsxs as _jsxs } from "react/jsx-runtime";
2
- import { forwardRef } from 'react';
3
- import styled, { css } from 'styled-components';
4
- import { rgba as polishedRgba } from 'polished';
5
- import { Flex, tryCatch, defaultThemeProp } from '@pega/cosmos-react-core';
6
- export const StyledSystemMessage = styled.div(({ theme: { base: { palette: { 'foreground-color': foregroundColor }, transparency: { 'transparent-3': foregroundAlpha } }, components: { chat: { messageBubble: { sender: { content: { 'background-color': primarySystemMessageColor } } } } } }, variant }) => {
7
- const systemMessageForeGroundColor = variant === 'primary'
8
- ? primarySystemMessageColor
9
- : tryCatch(() => polishedRgba(foregroundColor, foregroundAlpha));
10
- return css `
11
- color: ${systemMessageForeGroundColor};
12
- font-size: 0.75rem;
13
- padding: 0 0 0.5rem;
14
- ::before,
15
- ::after {
16
- display: inline-flex;
17
- content: '';
18
- border-top: 0.0625rem solid ${systemMessageForeGroundColor};
19
- flex-grow: 1;
20
- min-width: 1.5rem;
21
- }
22
- ::before {
23
- margin: 0 0.5rem 0 0;
24
- }
25
- ::after {
26
- margin: 0 0 0 0.5rem;
27
- }
28
- `;
29
- });
30
- StyledSystemMessage.defaultProps = defaultThemeProp;
31
- const SystemMessage = forwardRef((props, ref) => {
32
- const { message, timeStamp, variant = 'secondary', ...restProps } = props;
33
- return (_jsxs(Flex, { ref: ref, as: StyledSystemMessage, container: {
34
- alignItems: 'center'
35
- }, item: {
36
- shrink: 0
37
- }, variant: variant, ...restProps, children: [timeStamp && `${timeStamp}: `, " ", message] }, void 0));
38
- });
39
- export default SystemMessage;
40
- //# sourceMappingURL=SystemMessage.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SystemMessage.js","sourceRoot":"","sources":["../../../src/components/Chat/SystemMessage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAmC,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,IAAI,YAAY,EAAE,MAAM,UAAU,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,gBAAgB,EAGjB,MAAM,yBAAyB,CAAC;AAiBjC,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAC3C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,kBAAkB,EAAE,eAAe,EAAE,EAChD,YAAY,EAAE,EAAE,eAAe,EAAE,eAAe,EAAE,EACnD,EACD,UAAU,EAAE,EACV,IAAI,EAAE,EACJ,aAAa,EAAE,EACb,MAAM,EAAE,EACN,OAAO,EAAE,EAAE,kBAAkB,EAAE,yBAAyB,EAAE,EAC3D,EACF,EACF,EACF,EACF,EACD,OAAO,EACR,EAAE,EAAE;IACH,MAAM,4BAA4B,GAChC,OAAO,KAAK,SAAS;QACnB,CAAC,CAAC,yBAAyB;QAC3B,CAAC,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC;IACrE,OAAO,GAAG,CAAA;eACC,4BAA4B;;;;;;;sCAOL,4BAA4B;;;;;;;;;;KAU7D,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,aAAa,GAAyD,UAAU,CACpF,CAAC,KAA0C,EAAE,GAA8B,EAAE,EAAE;IAC7E,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,GAAG,WAAW,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC1E,OAAO,CACL,MAAC,IAAI,IACH,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,mBAAmB,EACvB,SAAS,EAAE;YACT,UAAU,EAAE,QAAQ;SACrB,EACD,IAAI,EAAE;YACJ,MAAM,EAAE,CAAC;SACV,EACD,OAAO,EAAE,OAAO,KACZ,SAAS,aAEZ,SAAS,IAAI,GAAG,SAAS,IAAI,OAAG,OAAO,YACnC,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef, ReactNode, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba as polishedRgba } from 'polished';\n\nimport {\n Flex,\n tryCatch,\n defaultThemeProp,\n ForwardProps,\n PropsWithDefaults\n} from '@pega/cosmos-react-core';\n\nexport interface SystemMessageProps {\n /** Ref to the container element */\n ref?: Ref<HTMLDivElement>;\n /** System message to be displayed */\n message: ReactNode;\n /** timestamp of the message(Formatted) */\n timeStamp?: string;\n /** variant of this system message\n * @default \"secondary\"\n */\n variant?: 'primary' | 'secondary';\n}\n\ntype SystemMessagePropsWithDefaults = PropsWithDefaults<SystemMessageProps, 'variant'>;\n\nexport const StyledSystemMessage = styled.div<Pick<SystemMessagePropsWithDefaults, 'variant'>>(\n ({\n theme: {\n base: {\n palette: { 'foreground-color': foregroundColor },\n transparency: { 'transparent-3': foregroundAlpha }\n },\n components: {\n chat: {\n messageBubble: {\n sender: {\n content: { 'background-color': primarySystemMessageColor }\n }\n }\n }\n }\n },\n variant\n }) => {\n const systemMessageForeGroundColor =\n variant === 'primary'\n ? primarySystemMessageColor\n : tryCatch(() => polishedRgba(foregroundColor, foregroundAlpha));\n return css`\n color: ${systemMessageForeGroundColor};\n font-size: 0.75rem;\n padding: 0 0 0.5rem;\n ::before,\n ::after {\n display: inline-flex;\n content: '';\n border-top: 0.0625rem solid ${systemMessageForeGroundColor};\n flex-grow: 1;\n min-width: 1.5rem;\n }\n ::before {\n margin: 0 0.5rem 0 0;\n }\n ::after {\n margin: 0 0 0 0.5rem;\n }\n `;\n }\n);\n\nStyledSystemMessage.defaultProps = defaultThemeProp;\n\nconst SystemMessage: FunctionComponent<SystemMessageProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<SystemMessageProps>, ref: SystemMessageProps['ref']) => {\n const { message, timeStamp, variant = 'secondary', ...restProps } = props;\n return (\n <Flex\n ref={ref}\n as={StyledSystemMessage}\n container={{\n alignItems: 'center'\n }}\n item={{\n shrink: 0\n }}\n variant={variant}\n {...restProps}\n >\n {timeStamp && `${timeStamp}: `} {message}\n </Flex>\n );\n }\n);\n\nexport default SystemMessage;\n"]}
@@ -1,25 +0,0 @@
1
- import { FunctionComponent, Ref, ReactNode } from 'react';
2
- import { AvatarProps, ForwardProps } from '@pega/cosmos-react-core';
3
- export declare type TranscriptHeaderProps = {
4
- /** transcript header content */
5
- content?: ReactNode;
6
- /** meta data */
7
- meta?: ReactNode;
8
- };
9
- export interface TranscriptMessageProps {
10
- /** ref to the element */
11
- ref?: Ref<HTMLDivElement>;
12
- /** Timestamp */
13
- timeStamp: string;
14
- /** Transcript content */
15
- message: ReactNode;
16
- /** Variant of transcript item */
17
- variant: 'user' | 'bot' | 'question';
18
- /** Avatar information, can be image and name */
19
- avatarInfo?: Pick<AvatarProps, 'name' | 'imageSrc'>;
20
- /** Transcript header */
21
- transcriptHeader?: TranscriptHeaderProps;
22
- }
23
- declare const TranscriptMessage: FunctionComponent<TranscriptMessageProps & ForwardProps>;
24
- export default TranscriptMessage;
25
- //# sourceMappingURL=TranscriptMessage.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TranscriptMessage.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/TranscriptMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvF,OAAO,EAIL,WAAW,EAIX,YAAY,EACb,MAAM,yBAAyB,CAAC;AAEjC,oBAAY,qBAAqB,GAAG;IAClC,gCAAgC;IAChC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,gBAAgB;IAChB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACrC,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,gBAAgB;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,yBAAyB;IACzB,OAAO,EAAE,SAAS,CAAC;IACnB,iCAAiC;IACjC,OAAO,EAAE,MAAM,GAAG,KAAK,GAAG,UAAU,CAAC;IACrC,gDAAgD;IAChD,UAAU,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,UAAU,CAAC,CAAC;IACpD,wBAAwB;IACxB,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;CAC1C;AAkDD,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,sBAAsB,GAAG,YAAY,CA2C/E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
@@ -1,47 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { forwardRef } from 'react';
3
- import styled, { css } from 'styled-components';
4
- import { Flex, Text, Icon, Avatar, EmojiDisplay, defaultThemeProp } from '@pega/cosmos-react-core';
5
- const iconMapping = {
6
- user: 'user-solid',
7
- bot: 'robot-solid',
8
- question: 'help'
9
- };
10
- const StyledTranscriptIcon = styled.svg ``;
11
- const StyledTranscriptTimeStamp = styled.span ``;
12
- const StyledTranscriptHeader = styled.header ``;
13
- const StyledTranscriptHeaderContent = styled.span ``;
14
- const StyledTranscriptMessage = styled.div(({ theme: { components: { chat: { transcript: { message: { 'icon-foreground-color': iconForegroundColor } } } } } }) => {
15
- return css `
16
- width: 100%;
17
- line-height: 1rem;
18
- padding: 0 0 0.25rem;
19
- ${StyledTranscriptIcon} {
20
- color: ${iconForegroundColor};
21
- flex-shrink: 0;
22
- }
23
- ${StyledTranscriptTimeStamp} {
24
- flex-shrink: 0;
25
- }
26
- ${StyledTranscriptHeader} {
27
- margin-bottom: 0.25rem;
28
- }
29
- ${StyledTranscriptHeaderContent} {
30
- margin-right: 0.5rem;
31
- }
32
- `;
33
- });
34
- StyledTranscriptMessage.defaultProps = defaultThemeProp;
35
- const TranscriptMessage = forwardRef((props, ref) => {
36
- const { variant, transcriptHeader, message, timeStamp, avatarInfo, ...restProps } = props;
37
- return (_jsxs(Flex, { container: {
38
- gap: 2,
39
- alignItems: 'start'
40
- }, item: {
41
- shrink: 0
42
- }, ref: ref, as: StyledTranscriptMessage, ...restProps, children: [_jsx(Text, { as: StyledTranscriptTimeStamp, variant: 'secondary', children: timeStamp }, void 0), avatarInfo ? (_jsx(Avatar, { name: avatarInfo.name, size: 's', shape: 'circle', imageSrc: avatarInfo.imageSrc }, void 0)) : (_jsx(Icon, { as: StyledTranscriptIcon, name: iconMapping[variant] }, void 0)), _jsxs(Flex, { item: {
43
- grow: 1
44
- }, children: [transcriptHeader && transcriptHeader.content && (_jsxs(StyledTranscriptHeader, { children: [_jsx(StyledTranscriptHeaderContent, { children: transcriptHeader.content }, void 0), transcriptHeader.meta] }, void 0)), _jsx(EmojiDisplay, { content: message, size: 20 }, void 0)] }, void 0)] }, void 0));
45
- });
46
- export default TranscriptMessage;
47
- //# sourceMappingURL=TranscriptMessage.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TranscriptMessage.js","sourceRoot":"","sources":["../../../src/components/Chat/TranscriptMessage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,IAAI,EACJ,IAAI,EAEJ,MAAM,EACN,YAAY,EACZ,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AAwBjC,MAAM,WAAW,GAAG;IAClB,IAAI,EAAE,YAAY;IAClB,GAAG,EAAE,aAAa;IAClB,QAAQ,EAAE,MAAM;CACjB,CAAC;AAEF,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE1C,MAAM,yBAAyB,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AAEhD,MAAM,sBAAsB,GAAG,MAAM,CAAC,MAAM,CAAA,EAAE,CAAC;AAE/C,MAAM,6BAA6B,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AAEpD,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CACxC,CAAC,EACC,KAAK,EAAE,EACL,UAAU,EAAE,EACV,IAAI,EAAE,EACJ,UAAU,EAAE,EACV,OAAO,EAAE,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,EAC1D,EACF,EACF,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;;QAIN,oBAAoB;iBACX,mBAAmB;;;QAG5B,yBAAyB;;;QAGzB,sBAAsB;;;QAGtB,6BAA6B;;;KAGhC,CAAC;AACJ,CAAC,CACF,CAAC;AACF,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,iBAAiB,GAA6D,UAAU,CAC5F,CAAC,KAA8C,EAAE,GAAkC,EAAE,EAAE;IACrF,MAAM,EAAE,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE1F,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE;YACT,GAAG,EAAE,CAAC;YACN,UAAU,EAAE,OAAO;SACpB,EACD,IAAI,EAAE;YACJ,MAAM,EAAE,CAAC;SACV,EACD,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,uBAAuB,KACvB,SAAS,aAEb,KAAC,IAAI,IAAC,EAAE,EAAE,yBAAyB,EAAE,OAAO,EAAC,WAAW,YACrD,SAAS,WACL,EACN,UAAU,CAAC,CAAC,CAAC,CACZ,KAAC,MAAM,IAAC,IAAI,EAAE,UAAU,CAAC,IAAI,EAAE,IAAI,EAAC,GAAG,EAAC,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,UAAU,CAAC,QAAQ,WAAI,CACzF,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,WAAW,CAAC,OAAO,CAAC,WAAI,CAC/D,EACD,MAAC,IAAI,IACH,IAAI,EAAE;oBACJ,IAAI,EAAE,CAAC;iBACR,aAEA,gBAAgB,IAAI,gBAAgB,CAAC,OAAO,IAAI,CAC/C,MAAC,sBAAsB,eACrB,KAAC,6BAA6B,cAC3B,gBAAgB,CAAC,OAAO,WACK,EAC/B,gBAAgB,CAAC,IAAI,YACC,CAC1B,EACD,KAAC,YAAY,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,WAAI,YACvC,YACF,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Flex,\n Text,\n Icon,\n AvatarProps,\n Avatar,\n EmojiDisplay,\n defaultThemeProp,\n ForwardProps\n} from '@pega/cosmos-react-core';\n\nexport type TranscriptHeaderProps = {\n /** transcript header content */\n content?: ReactNode;\n /** meta data */\n meta?: ReactNode;\n};\n\nexport interface TranscriptMessageProps {\n /** ref to the element */\n ref?: Ref<HTMLDivElement>;\n /** Timestamp */\n timeStamp: string;\n /** Transcript content */\n message: ReactNode;\n /** Variant of transcript item */\n variant: 'user' | 'bot' | 'question';\n /** Avatar information, can be image and name */\n avatarInfo?: Pick<AvatarProps, 'name' | 'imageSrc'>;\n /** Transcript header */\n transcriptHeader?: TranscriptHeaderProps;\n}\n\nconst iconMapping = {\n user: 'user-solid',\n bot: 'robot-solid',\n question: 'help'\n};\n\nconst StyledTranscriptIcon = styled.svg``;\n\nconst StyledTranscriptTimeStamp = styled.span``;\n\nconst StyledTranscriptHeader = styled.header``;\n\nconst StyledTranscriptHeaderContent = styled.span``;\n\nconst StyledTranscriptMessage = styled.div(\n ({\n theme: {\n components: {\n chat: {\n transcript: {\n message: { 'icon-foreground-color': iconForegroundColor }\n }\n }\n }\n }\n }) => {\n return css`\n width: 100%;\n line-height: 1rem;\n padding: 0 0 0.25rem;\n ${StyledTranscriptIcon} {\n color: ${iconForegroundColor};\n flex-shrink: 0;\n }\n ${StyledTranscriptTimeStamp} {\n flex-shrink: 0;\n }\n ${StyledTranscriptHeader} {\n margin-bottom: 0.25rem;\n }\n ${StyledTranscriptHeaderContent} {\n margin-right: 0.5rem;\n }\n `;\n }\n);\nStyledTranscriptMessage.defaultProps = defaultThemeProp;\n\nconst TranscriptMessage: FunctionComponent<TranscriptMessageProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<TranscriptMessageProps>, ref: TranscriptMessageProps['ref']) => {\n const { variant, transcriptHeader, message, timeStamp, avatarInfo, ...restProps } = props;\n\n return (\n <Flex\n container={{\n gap: 2,\n alignItems: 'start'\n }}\n item={{\n shrink: 0\n }}\n ref={ref}\n as={StyledTranscriptMessage}\n {...restProps}\n >\n <Text as={StyledTranscriptTimeStamp} variant='secondary'>\n {timeStamp}\n </Text>\n {avatarInfo ? (\n <Avatar name={avatarInfo.name} size='s' shape='circle' imageSrc={avatarInfo.imageSrc} />\n ) : (\n <Icon as={StyledTranscriptIcon} name={iconMapping[variant]} />\n )}\n <Flex\n item={{\n grow: 1\n }}\n >\n {transcriptHeader && transcriptHeader.content && (\n <StyledTranscriptHeader>\n <StyledTranscriptHeaderContent>\n {transcriptHeader.content}\n </StyledTranscriptHeaderContent>\n {transcriptHeader.meta}\n </StyledTranscriptHeader>\n )}\n <EmojiDisplay content={message} size={20} />\n </Flex>\n </Flex>\n );\n }\n);\n\nexport default TranscriptMessage;\n"]}
@@ -1,13 +0,0 @@
1
- import { FunctionComponent, Ref } from 'react';
2
- import { AvatarProps, ForwardProps } from '@pega/cosmos-react-core';
3
- export interface TypeIndicatorProps {
4
- /** ref to the element */
5
- ref?: Ref<HTMLDivElement>;
6
- /** Avatar information, can be image and name */
7
- avatarInfo: Pick<AvatarProps, 'name' | 'imageSrc'>;
8
- /** Type ahead message */
9
- message?: string;
10
- }
11
- declare const TypeIndicator: FunctionComponent<TypeIndicatorProps & ForwardProps>;
12
- export default TypeIndicator;
13
- //# sourceMappingURL=TypeIndicator.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TypeIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/TypeIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAIpE,MAAM,WAAW,kBAAkB;IACjC,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,gDAAgD;IAChD,UAAU,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,UAAU,CAAC,CAAC;IACnD,yBAAyB;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAevE,CAAC;AAEF,eAAe,aAAa,CAAC"}
@@ -1,9 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { forwardRef } from 'react';
3
- import Message from './Message';
4
- const TypeIndicator = forwardRef((props, ref) => {
5
- const { avatarInfo, message, ...restProps } = props;
6
- return (_jsx(Message, { variant: 'receiver', direction: 'in', avatarInfo: avatarInfo, typing: true, ref: ref, message: message, ...restProps }, void 0));
7
- });
8
- export default TypeIndicator;
9
- //# sourceMappingURL=TypeIndicator.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TypeIndicator.js","sourceRoot":"","sources":["../../../src/components/Chat/TypeIndicator.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAwB,MAAM,OAAO,CAAC;AAI5E,OAAO,OAAO,MAAM,WAAW,CAAC;AAWhC,MAAM,aAAa,GAAyD,UAAU,CACpF,CAAC,KAA0C,EAAE,GAA8B,EAAE,EAAE;IAC7E,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACpD,OAAO,CACL,KAAC,OAAO,IACN,OAAO,EAAC,UAAU,EAClB,SAAS,EAAC,IAAI,EACd,UAAU,EAAE,UAAU,EACtB,MAAM,QACN,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,KACZ,SAAS,WACb,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef, Ref } from 'react';\n\nimport { AvatarProps, ForwardProps } from '@pega/cosmos-react-core';\n\nimport Message from './Message';\n\nexport interface TypeIndicatorProps {\n /** ref to the element */\n ref?: Ref<HTMLDivElement>;\n /** Avatar information, can be image and name */\n avatarInfo: Pick<AvatarProps, 'name' | 'imageSrc'>;\n /** Type ahead message */\n message?: string;\n}\n\nconst TypeIndicator: FunctionComponent<TypeIndicatorProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<TypeIndicatorProps>, ref: TypeIndicatorProps['ref']) => {\n const { avatarInfo, message, ...restProps } = props;\n return (\n <Message\n variant='receiver'\n direction='in'\n avatarInfo={avatarInfo}\n typing\n ref={ref}\n message={message}\n {...restProps}\n />\n );\n }\n);\n\nexport default TypeIndicator;\n"]}
@@ -1,14 +0,0 @@
1
- export { default, ChatProps } from './Chat';
2
- export { default as ChatHeader, ChatHeaderProps } from './ChatHeader';
3
- export { default as ChatBody, ChatBodyProps } from './ChatBody';
4
- export { default as ChatComposer, ChatComposerProps, ChatComposerImperativeHandleProps } from './ChatComposer';
5
- export { default as ChatTranscript, ChatTranscriptProps, ChatTranscriptItem } from './ChatTranscript';
6
- export { default as MessageList, MessageListItemProps, MessageListImperativeHandleProps, NewMessageSeparatorId } from './MessageList';
7
- export { default as SuggestedReplyPicker, SuggestedReplyPickerProps, SuggestedReply } from './SuggestedReplyPicker';
8
- export { AttachmentItemProps } from './Chat.types';
9
- export { default as Message, MediaPageLinks, MessageProps } from './Message';
10
- export { default as SystemMessage, SystemMessageProps } from './SystemMessage';
11
- export { default as TypeIndicator, TypeIndicatorProps } from './TypeIndicator';
12
- export { default as TranscriptMessage, TranscriptMessageProps } from './TranscriptMessage';
13
- export { default as RepeatingView, StyledRepeatingViewItem, StyledRepeatingView, RepeatingViewRow, RepeatingViewProps } from './RepeatingView';
14
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Chat/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChE,OAAO,EACL,OAAO,IAAI,YAAY,EACvB,iBAAiB,EACjB,iCAAiC,EAClC,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,OAAO,IAAI,cAAc,EACzB,mBAAmB,EACnB,kBAAkB,EACnB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,OAAO,IAAI,WAAW,EACtB,oBAAoB,EACpB,gCAAgC,EAChC,qBAAqB,EACtB,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,OAAO,IAAI,oBAAoB,EAC/B,yBAAyB,EACzB,cAAc,EACf,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAC3F,OAAO,EACL,OAAO,IAAI,aAAa,EACxB,uBAAuB,EACvB,mBAAmB,EACnB,gBAAgB,EAChB,kBAAkB,EACnB,MAAM,iBAAiB,CAAC"}