@elliemae/ds-chat-container 3.12.0-rc.2 → 3.12.0-rc.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ChatContainer.js +43 -62
- package/dist/cjs/ChatContainer.js.map +2 -2
- package/dist/cjs/DSChatContainerDefinitions.js +36 -0
- package/dist/cjs/DSChatContainerDefinitions.js.map +7 -0
- package/dist/cjs/parts/chat-composer/ChatContainerComposer.js +82 -85
- package/dist/cjs/parts/chat-composer/ChatContainerComposer.js.map +2 -2
- package/dist/cjs/parts/chat-container-messages-list/ChatContainerMessagesList.js +49 -64
- package/dist/cjs/parts/chat-container-messages-list/ChatContainerMessagesList.js.map +1 -1
- package/dist/cjs/parts/chat-container-messages-list/useChatContainerMessageList.js +6 -1
- package/dist/cjs/parts/chat-container-messages-list/useChatContainerMessageList.js.map +2 -2
- package/dist/esm/ChatContainer.js +43 -62
- package/dist/esm/ChatContainer.js.map +2 -2
- package/dist/esm/DSChatContainerDefinitions.js +10 -0
- package/dist/esm/DSChatContainerDefinitions.js.map +7 -0
- package/dist/esm/parts/chat-composer/ChatContainerComposer.js +82 -85
- package/dist/esm/parts/chat-composer/ChatContainerComposer.js.map +2 -2
- package/dist/esm/parts/chat-container-messages-list/ChatContainerMessagesList.js +49 -64
- package/dist/esm/parts/chat-container-messages-list/ChatContainerMessagesList.js.map +1 -1
- package/dist/esm/parts/chat-container-messages-list/useChatContainerMessageList.js +6 -1
- package/dist/esm/parts/chat-container-messages-list/useChatContainerMessageList.js.map +2 -2
- package/package.json +12 -12
|
@@ -40,9 +40,10 @@ var import_chat_container_messages_list = require("./parts/chat-container-messag
|
|
|
40
40
|
var import_react_desc_prop_types = require("./react-desc-prop-types");
|
|
41
41
|
var import_ChatContainerDataTestids = require("./ChatContainerDataTestids");
|
|
42
42
|
var import_styled = require("./styled");
|
|
43
|
+
var import_DSChatContainerDefinitions = require("./DSChatContainerDefinitions");
|
|
43
44
|
const ChatContainer = (props) => {
|
|
44
45
|
const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
|
|
45
|
-
(0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.ChatContainerPropTypes);
|
|
46
|
+
(0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.ChatContainerPropTypes, import_DSChatContainerDefinitions.DSChatContainerName);
|
|
46
47
|
const globalAttributes = (0, import_ds_utilities.useGetGlobalAttributes)(propsWithDefault);
|
|
47
48
|
const {
|
|
48
49
|
sendingText,
|
|
@@ -86,72 +87,52 @@ const ChatContainer = (props) => {
|
|
|
86
87
|
actionRef.current.focusOnBannerLink = bannerRef.current.focusOnLink;
|
|
87
88
|
}
|
|
88
89
|
}, [actionRef]);
|
|
89
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Container, {
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
},
|
|
128
|
-
onClose: bannerProps?.onClose,
|
|
129
|
-
isOpen: true,
|
|
130
|
-
type: bannerProps?.type || import_ds_banner.BANNER_TYPES.INFO,
|
|
131
|
-
actionRef: bannerRef
|
|
132
|
-
})
|
|
133
|
-
}),
|
|
134
|
-
sendingMessages && sendingMessages.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledIndicatorContainer, {
|
|
135
|
-
isLoading: "bottom",
|
|
136
|
-
linear: true,
|
|
137
|
-
"data-testid": import_ChatContainerDataTestids.ChatContainerDataTestIds.LOADING_INDICATOR,
|
|
138
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_indeterminate_progress_indicator.default, {
|
|
139
|
-
processing: true,
|
|
140
|
-
title: sendingText,
|
|
141
|
-
lineOnly: true
|
|
142
|
-
})
|
|
143
|
-
}) : null
|
|
144
|
-
]
|
|
145
|
-
}),
|
|
146
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_chat_composer.ChatComposer, {
|
|
90
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Container, { ...globalAttributes, rows: ["minmax(0, 1fr)", "auto"], ref: containerRef, role: "region", children: [
|
|
91
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { position: "relative", overflow: "hidden" }, children: [
|
|
92
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
93
|
+
import_chat_container_messages_list.ChatContainerMessagesList,
|
|
94
|
+
{
|
|
95
|
+
...messagesListProps,
|
|
96
|
+
actionRef: actionRef || listRef,
|
|
97
|
+
isLoading,
|
|
98
|
+
hasMoreItems,
|
|
99
|
+
getMoreMessages,
|
|
100
|
+
sendingMessages,
|
|
101
|
+
sendingText,
|
|
102
|
+
bannerPosition,
|
|
103
|
+
bannerRef
|
|
104
|
+
}
|
|
105
|
+
),
|
|
106
|
+
isLoading && ["top", "bottom"].includes(isLoading) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledIndicatorContainer, { isLoading, "data-testid": import_ChatContainerDataTestids.ChatContainerDataTestIds.LOADING_INDICATOR, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_indeterminate_progress_indicator.default, { processing: true, title: "Loading" }) }) : null,
|
|
107
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledIndicatorContainer, { linear: true, isLoading: bannerPosition, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
108
|
+
import_ds_banner.default,
|
|
109
|
+
{
|
|
110
|
+
showCloseButton: true,
|
|
111
|
+
label: bannerProps?.label || "Unread messages",
|
|
112
|
+
containerProps: { id: "ds-chat-banner" },
|
|
113
|
+
actionLink: {
|
|
114
|
+
label: bannerProps?.viewLabel || "View",
|
|
115
|
+
onClick: bannerProps?.onView
|
|
116
|
+
},
|
|
117
|
+
onClose: bannerProps?.onClose,
|
|
118
|
+
isOpen: true,
|
|
119
|
+
type: bannerProps?.type || import_ds_banner.BANNER_TYPES.INFO,
|
|
120
|
+
actionRef: bannerRef
|
|
121
|
+
}
|
|
122
|
+
) }),
|
|
123
|
+
sendingMessages && sendingMessages.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledIndicatorContainer, { isLoading: "bottom", linear: true, "data-testid": import_ChatContainerDataTestids.ChatContainerDataTestIds.LOADING_INDICATOR, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_indeterminate_progress_indicator.default, { processing: true, title: sendingText, lineOnly: true }) }) : null
|
|
124
|
+
] }),
|
|
125
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
126
|
+
import_chat_composer.ChatComposer,
|
|
127
|
+
{
|
|
147
128
|
...composerProps,
|
|
148
129
|
onKeyDown: handleTabs,
|
|
149
130
|
onResize: onComposerResize,
|
|
150
131
|
maxHeight: (containerRef.current?.clientHeight || 0) / 2,
|
|
151
132
|
actionRef: actionRef || listRef
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
});
|
|
133
|
+
}
|
|
134
|
+
)
|
|
135
|
+
] });
|
|
155
136
|
};
|
|
156
137
|
ChatContainer.propTypes = import_react_desc_prop_types.ChatContainerPropTypes;
|
|
157
138
|
ChatContainer.displayName = "ChatContainer";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ChatContainer.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { noop } from 'lodash';\nimport {\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n describe,\n} from '@elliemae/ds-utilities';\n\nimport DSIndeterminateProgressIndicator from '@elliemae/ds-indeterminate-progress-indicator';\nimport DSBanner, { BANNER_TYPES } from '@elliemae/ds-banner';\nimport { ChatComposer } from './parts/chat-composer';\nimport { ChatContainerMessagesList } from './parts/chat-container-messages-list';\nimport type { DSChatT } from './react-desc-prop-types';\nimport { defaultProps, ChatContainerPropTypes } from './react-desc-prop-types';\nimport { ChatContainerDataTestIds } from './ChatContainerDataTestids';\nimport { StyledChatContainerContent, StyledIndicatorContainer, MobileStyledChatContainerContent } from './styled';\n\nconst ChatContainer: React.ComponentType<DSChatT.ContainerProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSChatT.ContainerProps>(props, defaultProps);\n useValidateTypescriptPropTypes<DSChatT.ContainerProps>(propsWithDefault, ChatContainerPropTypes);\n const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n\n const {\n sendingText,\n sendingMessages,\n bannerPosition,\n bannerProps,\n messagesListProps,\n composerProps,\n composerProps: { onResize: onComposerResize, onKeyDown: onComposerKeyDown },\n actionRef,\n device,\n isLoading,\n hasMoreItems,\n getMoreMessages,\n } = propsWithDefault;\n const bannerRef = React.useRef({ focusOnWrapper: noop, focusOnLink: noop });\n const containerRef = React.useRef<HTMLElement>();\n const listRef = React.useRef({ scrollToIndex: noop });\n\n const Container = device === 'desktop' ? StyledChatContainerContent : MobileStyledChatContainerContent;\n const handleTabs = React.useCallback(\n (e: React.KeyboardEvent) => {\n if (onComposerKeyDown) onComposerKeyDown(e);\n else if (e.shiftKey && e.key === 'Tab' && messagesListProps.messages?.length > 0) {\n e.preventDefault();\n if (bannerPosition && ['top', 'bottom'].includes(bannerPosition)) {\n bannerRef.current.focusOnWrapper();\n }\n if (actionRef?.current && actionRef.current.getMessagesInView) {\n const last = actionRef.current.getMessagesInView().pop();\n if (last && actionRef.current.focusToIndexWithoutScroll) actionRef.current?.focusToIndexWithoutScroll(last);\n }\n }\n },\n [actionRef, onComposerKeyDown, bannerPosition, messagesListProps.messages?.length],\n );\n\n // Map actions\n React.useEffect(() => {\n if (actionRef && actionRef.current) {\n actionRef.current.focusOnBanner = bannerRef.current.focusOnWrapper;\n actionRef.current.focusOnBannerLink = bannerRef.current.focusOnLink;\n }\n }, [actionRef]);\n return (\n <Container {...globalAttributes} rows={['minmax(0, 1fr)', 'auto']} ref={containerRef} role=\"region\">\n <div style={{ position: 'relative', overflow: 'hidden' }}>\n <ChatContainerMessagesList\n {...messagesListProps}\n actionRef={actionRef || listRef}\n isLoading={isLoading}\n hasMoreItems={hasMoreItems}\n getMoreMessages={getMoreMessages}\n sendingMessages={sendingMessages}\n sendingText={sendingText}\n bannerPosition={bannerPosition}\n bannerRef={bannerRef}\n />\n {isLoading && ['top', 'bottom'].includes(isLoading) ? (\n <StyledIndicatorContainer isLoading={isLoading} data-testid={ChatContainerDataTestIds.LOADING_INDICATOR}>\n <DSIndeterminateProgressIndicator processing title=\"Loading\" />\n </StyledIndicatorContainer>\n ) : null}\n <StyledIndicatorContainer linear isLoading={bannerPosition}>\n <DSBanner\n showCloseButton\n label={bannerProps?.label || 'Unread messages'}\n containerProps={{ id: 'ds-chat-banner' }}\n actionLink={{\n label: bannerProps?.viewLabel || 'View',\n onClick: bannerProps?.onView,\n }}\n onClose={bannerProps?.onClose}\n isOpen\n type={bannerProps?.type || BANNER_TYPES.INFO}\n actionRef={bannerRef}\n />\n </StyledIndicatorContainer>\n {sendingMessages && sendingMessages.length > 0 ? (\n <StyledIndicatorContainer isLoading=\"bottom\" linear data-testid={ChatContainerDataTestIds.LOADING_INDICATOR}>\n <DSIndeterminateProgressIndicator processing title={sendingText} lineOnly />\n </StyledIndicatorContainer>\n ) : null}\n </div>\n <ChatComposer\n {...composerProps}\n onKeyDown={handleTabs}\n onResize={onComposerResize}\n maxHeight={(containerRef.current?.clientHeight || 0) / 2}\n actionRef={actionRef || listRef}\n />\n </Container>\n );\n};\n\nChatContainer.propTypes = ChatContainerPropTypes as WeakValidationMap<unknown>;\nChatContainer.displayName = 'ChatContainer';\nconst ChatContainerWithSchema = describe(ChatContainer);\nChatContainerWithSchema.propTypes = ChatContainerPropTypes as WeakValidationMap<unknown>;\n\nexport { ChatContainer, ChatContainerWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { noop } from 'lodash';\nimport {\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n describe,\n} from '@elliemae/ds-utilities';\n\nimport DSIndeterminateProgressIndicator from '@elliemae/ds-indeterminate-progress-indicator';\nimport DSBanner, { BANNER_TYPES } from '@elliemae/ds-banner';\nimport { ChatComposer } from './parts/chat-composer';\nimport { ChatContainerMessagesList } from './parts/chat-container-messages-list';\nimport type { DSChatT } from './react-desc-prop-types';\nimport { defaultProps, ChatContainerPropTypes } from './react-desc-prop-types';\nimport { ChatContainerDataTestIds } from './ChatContainerDataTestids';\nimport { StyledChatContainerContent, StyledIndicatorContainer, MobileStyledChatContainerContent } from './styled';\nimport { DSChatContainerName } from './DSChatContainerDefinitions';\n\nconst ChatContainer: React.ComponentType<DSChatT.ContainerProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSChatT.ContainerProps>(props, defaultProps);\n useValidateTypescriptPropTypes<DSChatT.ContainerProps>(propsWithDefault, ChatContainerPropTypes, DSChatContainerName);\n const globalAttributes = useGetGlobalAttributes(propsWithDefault);\n\n const {\n sendingText,\n sendingMessages,\n bannerPosition,\n bannerProps,\n messagesListProps,\n composerProps,\n composerProps: { onResize: onComposerResize, onKeyDown: onComposerKeyDown },\n actionRef,\n device,\n isLoading,\n hasMoreItems,\n getMoreMessages,\n } = propsWithDefault;\n const bannerRef = React.useRef({ focusOnWrapper: noop, focusOnLink: noop });\n const containerRef = React.useRef<HTMLElement>();\n const listRef = React.useRef({ scrollToIndex: noop });\n\n const Container = device === 'desktop' ? StyledChatContainerContent : MobileStyledChatContainerContent;\n const handleTabs = React.useCallback(\n (e: React.KeyboardEvent) => {\n if (onComposerKeyDown) onComposerKeyDown(e);\n else if (e.shiftKey && e.key === 'Tab' && messagesListProps.messages?.length > 0) {\n e.preventDefault();\n if (bannerPosition && ['top', 'bottom'].includes(bannerPosition)) {\n bannerRef.current.focusOnWrapper();\n }\n if (actionRef?.current && actionRef.current.getMessagesInView) {\n const last = actionRef.current.getMessagesInView().pop();\n if (last && actionRef.current.focusToIndexWithoutScroll) actionRef.current?.focusToIndexWithoutScroll(last);\n }\n }\n },\n [actionRef, onComposerKeyDown, bannerPosition, messagesListProps.messages?.length],\n );\n\n // Map actions\n React.useEffect(() => {\n if (actionRef && actionRef.current) {\n actionRef.current.focusOnBanner = bannerRef.current.focusOnWrapper;\n actionRef.current.focusOnBannerLink = bannerRef.current.focusOnLink;\n }\n }, [actionRef]);\n return (\n <Container {...globalAttributes} rows={['minmax(0, 1fr)', 'auto']} ref={containerRef} role=\"region\">\n <div style={{ position: 'relative', overflow: 'hidden' }}>\n <ChatContainerMessagesList\n {...messagesListProps}\n actionRef={actionRef || listRef}\n isLoading={isLoading}\n hasMoreItems={hasMoreItems}\n getMoreMessages={getMoreMessages}\n sendingMessages={sendingMessages}\n sendingText={sendingText}\n bannerPosition={bannerPosition}\n bannerRef={bannerRef}\n />\n {isLoading && ['top', 'bottom'].includes(isLoading) ? (\n <StyledIndicatorContainer isLoading={isLoading} data-testid={ChatContainerDataTestIds.LOADING_INDICATOR}>\n <DSIndeterminateProgressIndicator processing title=\"Loading\" />\n </StyledIndicatorContainer>\n ) : null}\n <StyledIndicatorContainer linear isLoading={bannerPosition}>\n <DSBanner\n showCloseButton\n label={bannerProps?.label || 'Unread messages'}\n containerProps={{ id: 'ds-chat-banner' }}\n actionLink={{\n label: bannerProps?.viewLabel || 'View',\n onClick: bannerProps?.onView,\n }}\n onClose={bannerProps?.onClose}\n isOpen\n type={bannerProps?.type || BANNER_TYPES.INFO}\n actionRef={bannerRef}\n />\n </StyledIndicatorContainer>\n {sendingMessages && sendingMessages.length > 0 ? (\n <StyledIndicatorContainer isLoading=\"bottom\" linear data-testid={ChatContainerDataTestIds.LOADING_INDICATOR}>\n <DSIndeterminateProgressIndicator processing title={sendingText} lineOnly />\n </StyledIndicatorContainer>\n ) : null}\n </div>\n <ChatComposer\n {...composerProps}\n onKeyDown={handleTabs}\n onResize={onComposerResize}\n maxHeight={(containerRef.current?.clientHeight || 0) / 2}\n actionRef={actionRef || listRef}\n />\n </Container>\n );\n};\n\nChatContainer.propTypes = ChatContainerPropTypes as WeakValidationMap<unknown>;\nChatContainer.displayName = 'ChatContainer';\nconst ChatContainerWithSchema = describe(ChatContainer);\nChatContainerWithSchema.propTypes = ChatContainerPropTypes as WeakValidationMap<unknown>;\n\nexport { ChatContainer, ChatContainerWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwEjB;AArEN,mBAAkB;AAClB,oBAAqB;AACrB,0BAKO;AAEP,iDAA6C;AAC7C,uBAAuC;AACvC,2BAA6B;AAC7B,0CAA0C;AAE1C,mCAAqD;AACrD,sCAAyC;AACzC,oBAAuG;AACvG,wCAAoC;AAEpC,MAAM,gBAA6D,CAAC,UAAU;AAC5E,QAAM,uBAAmB,kDAAqD,OAAO,yCAAY;AACjG,0DAAuD,kBAAkB,qDAAwB,qDAAmB;AACpH,QAAM,uBAAmB,4CAAuB,gBAAgB;AAEhE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,EAAE,UAAU,kBAAkB,WAAW,kBAAkB;AAAA,IAC1E;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,YAAY,aAAAA,QAAM,OAAO,EAAE,gBAAgB,oBAAM,aAAa,mBAAK,CAAC;AAC1E,QAAM,eAAe,aAAAA,QAAM,OAAoB;AAC/C,QAAM,UAAU,aAAAA,QAAM,OAAO,EAAE,eAAe,mBAAK,CAAC;AAEpD,QAAM,YAAY,WAAW,YAAY,2CAA6B;AACtE,QAAM,aAAa,aAAAA,QAAM;AAAA,IACvB,CAAC,MAA2B;AAC1B,UAAI;AAAmB,0BAAkB,CAAC;AAAA,eACjC,EAAE,YAAY,EAAE,QAAQ,SAAS,kBAAkB,UAAU,SAAS,GAAG;AAChF,UAAE,eAAe;AACjB,YAAI,kBAAkB,CAAC,OAAO,QAAQ,EAAE,SAAS,cAAc,GAAG;AAChE,oBAAU,QAAQ,eAAe;AAAA,QACnC;AACA,YAAI,WAAW,WAAW,UAAU,QAAQ,mBAAmB;AAC7D,gBAAM,OAAO,UAAU,QAAQ,kBAAkB,EAAE,IAAI;AACvD,cAAI,QAAQ,UAAU,QAAQ;AAA2B,sBAAU,SAAS,0BAA0B,IAAI;AAAA,QAC5G;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,WAAW,mBAAmB,gBAAgB,kBAAkB,UAAU,MAAM;AAAA,EACnF;AAGA,eAAAA,QAAM,UAAU,MAAM;AACpB,QAAI,aAAa,UAAU,SAAS;AAClC,gBAAU,QAAQ,gBAAgB,UAAU,QAAQ;AACpD,gBAAU,QAAQ,oBAAoB,UAAU,QAAQ;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AACd,SACE,6CAAC,aAAW,GAAG,kBAAkB,MAAM,CAAC,kBAAkB,MAAM,GAAG,KAAK,cAAc,MAAK,UACzF;AAAA,iDAAC,SAAI,OAAO,EAAE,UAAU,YAAY,UAAU,SAAS,GACrD;AAAA;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,WAAW,aAAa;AAAA,UACxB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MACC,aAAa,CAAC,OAAO,QAAQ,EAAE,SAAS,SAAS,IAChD,4CAAC,0CAAyB,WAAsB,eAAa,yDAAyB,mBACpF,sDAAC,2CAAAC,SAAA,EAAiC,YAAU,MAAC,OAAM,WAAU,GAC/D,IACE;AAAA,MACJ,4CAAC,0CAAyB,QAAM,MAAC,WAAW,gBAC1C;AAAA,QAAC,iBAAAC;AAAA,QAAA;AAAA,UACC,iBAAe;AAAA,UACf,OAAO,aAAa,SAAS;AAAA,UAC7B,gBAAgB,EAAE,IAAI,iBAAiB;AAAA,UACvC,YAAY;AAAA,YACV,OAAO,aAAa,aAAa;AAAA,YACjC,SAAS,aAAa;AAAA,UACxB;AAAA,UACA,SAAS,aAAa;AAAA,UACtB,QAAM;AAAA,UACN,MAAM,aAAa,QAAQ,8BAAa;AAAA,UACxC,WAAW;AAAA;AAAA,MACb,GACF;AAAA,MACC,mBAAmB,gBAAgB,SAAS,IAC3C,4CAAC,0CAAyB,WAAU,UAAS,QAAM,MAAC,eAAa,yDAAyB,mBACxF,sDAAC,2CAAAD,SAAA,EAAiC,YAAU,MAAC,OAAO,aAAa,UAAQ,MAAC,GAC5E,IACE;AAAA,OACN;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAW;AAAA,QACX,UAAU;AAAA,QACV,YAAY,aAAa,SAAS,gBAAgB,KAAK;AAAA,QACvD,WAAW,aAAa;AAAA;AAAA,IAC1B;AAAA,KACF;AAEJ;AAEA,cAAc,YAAY;AAC1B,cAAc,cAAc;AAC5B,MAAM,8BAA0B,8BAAS,aAAa;AACtD,wBAAwB,YAAY;",
|
|
6
6
|
"names": ["React", "DSIndeterminateProgressIndicator", "DSBanner"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
24
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
25
|
+
var DSChatContainerDefinitions_exports = {};
|
|
26
|
+
__export(DSChatContainerDefinitions_exports, {
|
|
27
|
+
DSChatContainerComposerName: () => DSChatContainerComposerName,
|
|
28
|
+
DSChatContainerMessagesList: () => DSChatContainerMessagesList,
|
|
29
|
+
DSChatContainerName: () => DSChatContainerName
|
|
30
|
+
});
|
|
31
|
+
module.exports = __toCommonJS(DSChatContainerDefinitions_exports);
|
|
32
|
+
var React = __toESM(require("react"));
|
|
33
|
+
const DSChatContainerName = "DSChatContainerName";
|
|
34
|
+
const DSChatContainerComposerName = "DSChatContainerComposer";
|
|
35
|
+
const DSChatContainerMessagesList = "DSChatContainerMessagesList";
|
|
36
|
+
//# sourceMappingURL=DSChatContainerDefinitions.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/DSChatContainerDefinitions.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["export const DSChatContainerName = 'DSChatContainerName';\nexport const DSChatContainerComposerName = 'DSChatContainerComposer';\nexport const DSChatContainerMessagesList = 'DSChatContainerMessagesList';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,sBAAsB;AAC5B,MAAM,8BAA8B;AACpC,MAAM,8BAA8B;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -36,10 +36,15 @@ var import_ds_icons = require("@elliemae/ds-icons");
|
|
|
36
36
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
37
37
|
var import_styled = require("./styled");
|
|
38
38
|
var import_ChatContainerDataTestids = require("../../ChatContainerDataTestids");
|
|
39
|
+
var import_DSChatContainerDefinitions = require("../../DSChatContainerDefinitions");
|
|
39
40
|
var import_react_desc_prop_types = require("../../react-desc-prop-types");
|
|
40
41
|
const ChatComposer = (props) => {
|
|
41
42
|
const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultPropsComposer);
|
|
42
|
-
(0, import_ds_utilities.useValidateTypescriptPropTypes)(
|
|
43
|
+
(0, import_ds_utilities.useValidateTypescriptPropTypes)(
|
|
44
|
+
propsWithDefault,
|
|
45
|
+
import_react_desc_prop_types.ChatComposerPropTypes,
|
|
46
|
+
import_DSChatContainerDefinitions.DSChatContainerComposerName
|
|
47
|
+
);
|
|
43
48
|
const {
|
|
44
49
|
inputValue,
|
|
45
50
|
onChange,
|
|
@@ -100,93 +105,85 @@ const ChatComposer = (props) => {
|
|
|
100
105
|
() => !inputValue || buttonDisabled || hasError,
|
|
101
106
|
[inputValue, buttonDisabled, hasError]
|
|
102
107
|
);
|
|
103
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
style: { ...heightProps },
|
|
119
|
-
value: inputValue,
|
|
120
|
-
onFocus,
|
|
121
|
-
onBlur,
|
|
122
|
-
onKeyDown,
|
|
123
|
-
placeholder,
|
|
124
|
-
"aria-label": "Message to send",
|
|
125
|
-
"data-testid": import_ChatContainerDataTestids.ChatContainerDataTestIds.COMPOSER_TEXTAREA,
|
|
126
|
-
name: "chat-composer-textarea",
|
|
127
|
-
id: "chat-composer-textarea"
|
|
128
|
-
}),
|
|
129
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {
|
|
130
|
-
height: "32px",
|
|
131
|
-
alignItems: "center",
|
|
132
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledComposerButton, {
|
|
133
|
-
buttonType: "icon",
|
|
134
|
-
onClick: onSend,
|
|
135
|
-
size: "s",
|
|
136
|
-
disabled: isSendButtonDisabled,
|
|
137
|
-
"aria-disabled": isSendButtonDisabled,
|
|
138
|
-
"data-testid": import_ChatContainerDataTestids.ChatContainerDataTestIds.COMPOSER_SEND_BUTTON,
|
|
139
|
-
"aria-label": "Send",
|
|
140
|
-
innerRef: inputSend,
|
|
141
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.PaperAirplane, {
|
|
142
|
-
width: 18,
|
|
143
|
-
height: 18
|
|
144
|
-
})
|
|
145
|
-
})
|
|
146
|
-
})
|
|
147
|
-
]
|
|
148
|
-
}),
|
|
149
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledComposerInput, {
|
|
150
|
-
ref: inputSize,
|
|
151
|
-
style: {
|
|
152
|
-
height: 32,
|
|
153
|
-
visibility: "hidden",
|
|
154
|
-
pointerEvents: "none",
|
|
155
|
-
position: "absolute",
|
|
156
|
-
top: 0,
|
|
157
|
-
width: input.current?.clientWidth
|
|
158
|
-
},
|
|
159
|
-
onChange: handleChange,
|
|
160
|
-
value: inputValue
|
|
161
|
-
}),
|
|
162
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, {
|
|
163
|
-
cols: ["1fr", "24px"],
|
|
164
|
-
justifyContent: "flex-end",
|
|
165
|
-
alignItems: "center",
|
|
166
|
-
gutter: "xxs",
|
|
167
|
-
pb: "xxs",
|
|
168
|
-
children: [
|
|
169
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledCounterArea, {
|
|
170
|
-
hasError,
|
|
171
|
-
"data-testid": import_ChatContainerDataTestids.ChatContainerDataTestIds.COMPOSER_COUNTER_AREA,
|
|
108
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
109
|
+
import_styled.StyledChatContainerContentComposer,
|
|
110
|
+
{
|
|
111
|
+
rows: ["auto", "15px"],
|
|
112
|
+
maxHeight: `${maxHeight}px`,
|
|
113
|
+
"data-testid": dataTestid ?? import_ChatContainerDataTestids.ChatContainerDataTestIds.COMPOSER,
|
|
114
|
+
children: [
|
|
115
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
116
|
+
import_ds_grid.Grid,
|
|
117
|
+
{
|
|
118
|
+
cols: ["1fr", "24px"],
|
|
119
|
+
style: { height: heightProps.height },
|
|
120
|
+
justifyContent: "center",
|
|
121
|
+
alignItems: "flex-end",
|
|
122
|
+
gutter: "xxs",
|
|
172
123
|
children: [
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
124
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
125
|
+
import_styled.StyledComposerInput,
|
|
126
|
+
{
|
|
127
|
+
ref: input,
|
|
128
|
+
onChange: handleChange,
|
|
129
|
+
style: { ...heightProps },
|
|
130
|
+
value: inputValue,
|
|
131
|
+
onFocus,
|
|
132
|
+
onBlur,
|
|
133
|
+
onKeyDown,
|
|
134
|
+
placeholder,
|
|
135
|
+
"aria-label": "Message to send",
|
|
136
|
+
"data-testid": import_ChatContainerDataTestids.ChatContainerDataTestIds.COMPOSER_TEXTAREA,
|
|
137
|
+
name: "chat-composer-textarea",
|
|
138
|
+
id: "chat-composer-textarea"
|
|
139
|
+
}
|
|
140
|
+
),
|
|
141
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { height: "32px", alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
142
|
+
import_styled.StyledComposerButton,
|
|
143
|
+
{
|
|
144
|
+
buttonType: "icon",
|
|
145
|
+
onClick: onSend,
|
|
146
|
+
size: "s",
|
|
147
|
+
disabled: isSendButtonDisabled,
|
|
148
|
+
"aria-disabled": isSendButtonDisabled,
|
|
149
|
+
"data-testid": import_ChatContainerDataTestids.ChatContainerDataTestIds.COMPOSER_SEND_BUTTON,
|
|
150
|
+
"aria-label": "Send",
|
|
151
|
+
innerRef: inputSend,
|
|
152
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.PaperAirplane, { width: 18, height: 18 })
|
|
153
|
+
}
|
|
154
|
+
) })
|
|
183
155
|
]
|
|
184
|
-
}
|
|
156
|
+
}
|
|
157
|
+
),
|
|
158
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
159
|
+
import_styled.StyledComposerInput,
|
|
160
|
+
{
|
|
161
|
+
ref: inputSize,
|
|
162
|
+
style: {
|
|
163
|
+
height: 32,
|
|
164
|
+
visibility: "hidden",
|
|
165
|
+
pointerEvents: "none",
|
|
166
|
+
position: "absolute",
|
|
167
|
+
top: 0,
|
|
168
|
+
width: input.current?.clientWidth
|
|
169
|
+
},
|
|
170
|
+
onChange: handleChange,
|
|
171
|
+
value: inputValue
|
|
172
|
+
}
|
|
173
|
+
),
|
|
174
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { cols: ["1fr", "24px"], justifyContent: "flex-end", alignItems: "center", gutter: "xxs", pb: "xxs", children: [
|
|
175
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledCounterArea, { hasError, "data-testid": import_ChatContainerDataTestids.ChatContainerDataTestIds.COMPOSER_COUNTER_AREA, children: [
|
|
176
|
+
inputMaxLength && hasError ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
177
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledCounterErrorA11y, { role: "alert", children: ariaMaxLengthMessage || `You have entered ${inputLength} characters and have exceeded the limit by ${inputLength - inputMaxLength}. Please limit to less than ${inputMaxLength} characters. ` }),
|
|
178
|
+
maxLengthMessage || `Please limit to less than ${inputMaxLength} characters. `
|
|
179
|
+
] }) : "",
|
|
180
|
+
inputMaxLength ? ` ${inputLength} / ${inputMaxLength}` : ""
|
|
181
|
+
] }),
|
|
185
182
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, {})
|
|
186
|
-
]
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
183
|
+
] })
|
|
184
|
+
]
|
|
185
|
+
}
|
|
186
|
+
);
|
|
190
187
|
};
|
|
191
188
|
ChatComposer.propTypes = import_react_desc_prop_types.ChatComposerPropTypes;
|
|
192
189
|
ChatComposer.displayName = "ChatComposer";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/chat-composer/ChatContainerComposer.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { PaperAirplane } from '@elliemae/ds-icons';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, describe } from '@elliemae/ds-utilities';\nimport {\n StyledChatContainerContentComposer,\n StyledComposerInput,\n StyledComposerButton,\n StyledCounterArea,\n StyledCounterErrorA11y,\n} from './styled';\nimport { ChatContainerDataTestIds } from '../../ChatContainerDataTestids';\n\nimport type { DSChatT } from '../../react-desc-prop-types';\nimport { ChatComposerPropTypes, defaultPropsComposer } from '../../react-desc-prop-types';\n// eslint-disable-next-line complexity\nconst ChatComposer: React.ComponentType<DSChatT.ComposerProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSChatT.ComposerProps>(props, defaultPropsComposer);\n useValidateTypescriptPropTypes<DSChatT.ComposerProps>(propsWithDefault
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport React, { useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { PaperAirplane } from '@elliemae/ds-icons';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, describe } from '@elliemae/ds-utilities';\nimport {\n StyledChatContainerContentComposer,\n StyledComposerInput,\n StyledComposerButton,\n StyledCounterArea,\n StyledCounterErrorA11y,\n} from './styled';\nimport { ChatContainerDataTestIds } from '../../ChatContainerDataTestids';\nimport { DSChatContainerComposerName } from '../../DSChatContainerDefinitions';\n\nimport type { DSChatT } from '../../react-desc-prop-types';\nimport { ChatComposerPropTypes, defaultPropsComposer } from '../../react-desc-prop-types';\n// eslint-disable-next-line complexity\nconst ChatComposer: React.ComponentType<DSChatT.ComposerProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSChatT.ComposerProps>(props, defaultPropsComposer);\n useValidateTypescriptPropTypes<DSChatT.ComposerProps>(\n propsWithDefault,\n ChatComposerPropTypes,\n DSChatContainerComposerName,\n );\n const {\n inputValue,\n onChange,\n onResize,\n onSend,\n onFocus,\n onBlur,\n onKeyDown,\n maxHeight = 300,\n placeholder,\n inputMaxLength,\n maxLengthMessage,\n ariaMaxLengthMessage,\n buttonDisabled,\n dataTestid,\n actionRef,\n } = propsWithDefault;\n\n const COMPOSER_MIN_HEIGHT = 32;\n const input = React.useRef<HTMLTextAreaElement>();\n const inputSize = React.useRef<HTMLTextAreaElement>();\n const inputSend = React.useRef<HTMLButtonElement>(null);\n const [height, setHeight] = React.useState(32);\n const internalMaxHeight = React.useMemo(() => maxHeight - 24, [maxHeight]);\n const [showScroll, setShowScroll] = React.useState(true);\n\n React.useEffect(() => {\n if (inputSize?.current?.scrollHeight) {\n const newHeight =\n inputSize.current.scrollHeight > internalMaxHeight ? internalMaxHeight : inputSize.current?.scrollHeight;\n if (newHeight !== height && newHeight > COMPOSER_MIN_HEIGHT && onResize) onResize(newHeight);\n setHeight(newHeight);\n setShowScroll(inputSize.current.scrollHeight - inputSize.current.clientHeight > 5);\n }\n }, [inputValue, internalMaxHeight, height, onResize]);\n\n React.useEffect(() => {\n if (actionRef && actionRef.current) {\n actionRef.current.focusToComposer = () => {\n input?.current?.focus?.();\n };\n actionRef.current.focusToSend = () => {\n inputSend?.current?.focus?.();\n };\n }\n }, [actionRef]);\n\n const handleChange: React.ChangeEventHandler<HTMLInputElement> = React.useCallback(\n (e) => {\n onChange(e.target.value);\n },\n [onChange],\n );\n const heightProps = { height, overflow: showScroll ? 'auto' : 'hidden' };\n\n const inputLength = String(inputValue || '').length;\n const hasError = React.useMemo(() => {\n if (!inputMaxLength) return false;\n return inputLength > inputMaxLength;\n }, [inputLength, inputMaxLength]);\n\n const isSendButtonDisabled = useMemo(\n () => !inputValue || buttonDisabled || hasError,\n [inputValue, buttonDisabled, hasError],\n );\n return (\n <StyledChatContainerContentComposer\n rows={['auto', '15px']}\n maxHeight={`${maxHeight}px`}\n data-testid={dataTestid ?? ChatContainerDataTestIds.COMPOSER}\n >\n <Grid\n cols={['1fr', '24px']}\n style={{ height: heightProps.height }}\n justifyContent=\"center\"\n alignItems=\"flex-end\"\n gutter=\"xxs\"\n >\n <StyledComposerInput\n ref={input}\n onChange={handleChange}\n style={{ ...heightProps }}\n value={inputValue}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n aria-label=\"Message to send\"\n data-testid={ChatContainerDataTestIds.COMPOSER_TEXTAREA}\n name=\"chat-composer-textarea\"\n id=\"chat-composer-textarea\"\n />\n\n <Grid height=\"32px\" alignItems=\"center\">\n <StyledComposerButton\n buttonType=\"icon\"\n onClick={onSend}\n size=\"s\"\n disabled={isSendButtonDisabled}\n aria-disabled={isSendButtonDisabled}\n data-testid={ChatContainerDataTestIds.COMPOSER_SEND_BUTTON}\n aria-label=\"Send\"\n innerRef={inputSend}\n >\n <PaperAirplane width={18} height={18} />\n </StyledComposerButton>\n </Grid>\n </Grid>\n <StyledComposerInput\n ref={inputSize}\n style={{\n height: 32,\n visibility: 'hidden',\n pointerEvents: 'none',\n position: 'absolute',\n top: 0,\n width: input.current?.clientWidth,\n }}\n onChange={handleChange}\n value={inputValue}\n />\n <Grid cols={['1fr', '24px']} justifyContent=\"flex-end\" alignItems=\"center\" gutter=\"xxs\" pb=\"xxs\">\n <StyledCounterArea hasError={hasError} data-testid={ChatContainerDataTestIds.COMPOSER_COUNTER_AREA}>\n {inputMaxLength && hasError ? (\n <>\n <StyledCounterErrorA11y role=\"alert\">\n {ariaMaxLengthMessage ||\n `You have entered ${inputLength} characters and have exceeded the limit by ${\n inputLength - inputMaxLength\n }. Please limit to less than ${inputMaxLength} characters. `}\n </StyledCounterErrorA11y>\n {maxLengthMessage || `Please limit to less than ${inputMaxLength} characters. `}\n </>\n ) : (\n ''\n )}\n {inputMaxLength ? ` ${inputLength} / ${inputMaxLength}` : ''}\n </StyledCounterArea>\n <Grid />\n </Grid>\n </StyledChatContainerContentComposer>\n );\n};\n\nChatComposer.propTypes = ChatComposerPropTypes as WeakValidationMap<unknown>;\nChatComposer.displayName = 'ChatComposer';\nconst ChatComposerWithSchema = describe(ChatComposer);\nChatComposerWithSchema.propTypes = ChatComposerPropTypes as WeakValidationMap<unknown>;\n\nexport { ChatComposer, ChatComposerWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiGjB;AA/FN,mBAA+B;AAC/B,qBAAqB;AACrB,sBAA8B;AAC9B,0BAAuF;AACvF,oBAMO;AACP,sCAAyC;AACzC,wCAA4C;AAG5C,mCAA4D;AAE5D,MAAM,eAA2D,CAAC,UAAU;AAC1E,QAAM,uBAAmB,kDAAoD,OAAO,iDAAoB;AACxG;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,sBAAsB;AAC5B,QAAM,QAAQ,aAAAA,QAAM,OAA4B;AAChD,QAAM,YAAY,aAAAA,QAAM,OAA4B;AACpD,QAAM,YAAY,aAAAA,QAAM,OAA0B,IAAI;AACtD,QAAM,CAAC,QAAQ,SAAS,IAAI,aAAAA,QAAM,SAAS,EAAE;AAC7C,QAAM,oBAAoB,aAAAA,QAAM,QAAQ,MAAM,YAAY,IAAI,CAAC,SAAS,CAAC;AACzE,QAAM,CAAC,YAAY,aAAa,IAAI,aAAAA,QAAM,SAAS,IAAI;AAEvD,eAAAA,QAAM,UAAU,MAAM;AACpB,QAAI,WAAW,SAAS,cAAc;AACpC,YAAM,YACJ,UAAU,QAAQ,eAAe,oBAAoB,oBAAoB,UAAU,SAAS;AAC9F,UAAI,cAAc,UAAU,YAAY,uBAAuB;AAAU,iBAAS,SAAS;AAC3F,gBAAU,SAAS;AACnB,oBAAc,UAAU,QAAQ,eAAe,UAAU,QAAQ,eAAe,CAAC;AAAA,IACnF;AAAA,EACF,GAAG,CAAC,YAAY,mBAAmB,QAAQ,QAAQ,CAAC;AAEpD,eAAAA,QAAM,UAAU,MAAM;AACpB,QAAI,aAAa,UAAU,SAAS;AAClC,gBAAU,QAAQ,kBAAkB,MAAM;AACxC,eAAO,SAAS,QAAQ;AAAA,MAC1B;AACA,gBAAU,QAAQ,cAAc,MAAM;AACpC,mBAAW,SAAS,QAAQ;AAAA,MAC9B;AAAA,IACF;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,eAA2D,aAAAA,QAAM;AAAA,IACrE,CAAC,MAAM;AACL,eAAS,EAAE,OAAO,KAAK;AAAA,IACzB;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AACA,QAAM,cAAc,EAAE,QAAQ,UAAU,aAAa,SAAS,SAAS;AAEvE,QAAM,cAAc,OAAO,cAAc,EAAE,EAAE;AAC7C,QAAM,WAAW,aAAAA,QAAM,QAAQ,MAAM;AACnC,QAAI,CAAC;AAAgB,aAAO;AAC5B,WAAO,cAAc;AAAA,EACvB,GAAG,CAAC,aAAa,cAAc,CAAC;AAEhC,QAAM,2BAAuB;AAAA,IAC3B,MAAM,CAAC,cAAc,kBAAkB;AAAA,IACvC,CAAC,YAAY,gBAAgB,QAAQ;AAAA,EACvC;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,WAAW,GAAG;AAAA,MACd,eAAa,cAAc,yDAAyB;AAAA,MAEpD;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,CAAC,OAAO,MAAM;AAAA,YACpB,OAAO,EAAE,QAAQ,YAAY,OAAO;AAAA,YACpC,gBAAe;AAAA,YACf,YAAW;AAAA,YACX,QAAO;AAAA,YAEP;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAK;AAAA,kBACL,UAAU;AAAA,kBACV,OAAO,EAAE,GAAG,YAAY;AAAA,kBACxB,OAAO;AAAA,kBACP;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA,cAAW;AAAA,kBACX,eAAa,yDAAyB;AAAA,kBACtC,MAAK;AAAA,kBACL,IAAG;AAAA;AAAA,cACL;AAAA,cAEA,4CAAC,uBAAK,QAAO,QAAO,YAAW,UAC7B;AAAA,gBAAC;AAAA;AAAA,kBACC,YAAW;AAAA,kBACX,SAAS;AAAA,kBACT,MAAK;AAAA,kBACL,UAAU;AAAA,kBACV,iBAAe;AAAA,kBACf,eAAa,yDAAyB;AAAA,kBACtC,cAAW;AAAA,kBACX,UAAU;AAAA,kBAEV,sDAAC,iCAAc,OAAO,IAAI,QAAQ,IAAI;AAAA;AAAA,cACxC,GACF;AAAA;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,OAAO;AAAA,cACL,QAAQ;AAAA,cACR,YAAY;AAAA,cACZ,eAAe;AAAA,cACf,UAAU;AAAA,cACV,KAAK;AAAA,cACL,OAAO,MAAM,SAAS;AAAA,YACxB;AAAA,YACA,UAAU;AAAA,YACV,OAAO;AAAA;AAAA,QACT;AAAA,QACA,6CAAC,uBAAK,MAAM,CAAC,OAAO,MAAM,GAAG,gBAAe,YAAW,YAAW,UAAS,QAAO,OAAM,IAAG,OACzF;AAAA,uDAAC,mCAAkB,UAAoB,eAAa,yDAAyB,uBAC1E;AAAA,8BAAkB,WACjB,4EACE;AAAA,0DAAC,wCAAuB,MAAK,SAC1B,kCACC,oBAAoB,yDAClB,cAAc,6CACe,+BACnC;AAAA,cACC,oBAAoB,6BAA6B;AAAA,eACpD,IAEA;AAAA,YAED,iBAAiB,IAAI,iBAAiB,mBAAmB;AAAA,aAC5D;AAAA,UACA,4CAAC,uBAAK;AAAA,WACR;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAC3B,MAAM,6BAAyB,8BAAS,YAAY;AACpD,uBAAuB,YAAY;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -66,78 +66,63 @@ const ChatContainerMessagesList = (props) => {
|
|
|
66
66
|
transform: `translateY(${start}px)`,
|
|
67
67
|
width: "100%"
|
|
68
68
|
};
|
|
69
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
children: [
|
|
80
|
-
row.type === import_ds_chat_bubble.BUBBLE_TYPES.SENDER || row.type === import_ds_chat_bubble.BUBBLE_TYPES.RECIPIENT ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_chat_bubble.ChatBubble, {
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
row.type === import_ds_chat_bubble.BUBBLE_TYPES.SYSTEM ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_chat_system_message.SystemMessage, {
|
|
88
|
-
...row
|
|
89
|
-
}) : null
|
|
90
|
-
]
|
|
91
|
-
})
|
|
92
|
-
}, `ds-chat-bubble-${index}-${row.dsId}-${row.type}`);
|
|
69
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
70
|
+
import_styled.ListItem,
|
|
71
|
+
{
|
|
72
|
+
"data-element": "chat-element-list-item",
|
|
73
|
+
"data-index": index,
|
|
74
|
+
style,
|
|
75
|
+
ref: measureRef,
|
|
76
|
+
tabIndex: -1,
|
|
77
|
+
onKeyDown: handleKey,
|
|
78
|
+
role: "listitem",
|
|
79
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledWrapperListItem, { type: row.type, children: [
|
|
80
|
+
row.type === import_ds_chat_bubble.BUBBLE_TYPES.SENDER || row.type === import_ds_chat_bubble.BUBBLE_TYPES.RECIPIENT ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_chat_bubble.ChatBubble, { ...row, helpMessage: isSending ? sendingText : row.helpMessage }) : null,
|
|
81
|
+
row.type === import_ds_chat_bubble.BUBBLE_TYPES.DELIMITER ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_chat_message_delimeter.MessageDelimiter, { ...row }) : null,
|
|
82
|
+
row.type === import_ds_chat_bubble.BUBBLE_TYPES.SYSTEM ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_chat_system_message.SystemMessage, { ...row }) : null
|
|
83
|
+
] })
|
|
84
|
+
},
|
|
85
|
+
`ds-chat-bubble-${index}-${row.dsId}-${row.type}`
|
|
86
|
+
);
|
|
93
87
|
}),
|
|
94
88
|
[virtualItems, messages, sendingMessages, handleKey, sendingText]
|
|
95
89
|
);
|
|
96
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledWrapper, {
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
90
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledWrapper, { ...globalAttributes, children: [
|
|
91
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
92
|
+
import_styled.StyledChatContainerContentList,
|
|
93
|
+
{
|
|
100
94
|
"data-testid": import_ChatContainerDataTestids.ChatContainerDataTestIds.THREAD_CONTAINER,
|
|
101
95
|
tabIndex: 0,
|
|
102
96
|
ref: virtualListRef,
|
|
103
97
|
role: "list",
|
|
104
98
|
onKeyDown: handleListKey,
|
|
105
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledChatContainerContentListScroll, {
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
" ",
|
|
133
|
-
newMessage.errorMessage,
|
|
134
|
-
" ",
|
|
135
|
-
newMessage.helpMessage
|
|
136
|
-
]
|
|
137
|
-
}, newMessage.dsId))
|
|
138
|
-
})
|
|
139
|
-
]
|
|
140
|
-
});
|
|
99
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledChatContainerContentListScroll, { height: `${totalSize}px`, children: [
|
|
100
|
+
!isLoading && hasMoreItems ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledLoadMoreContainer, { hasMoreItems, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
101
|
+
import_ds_button.default,
|
|
102
|
+
{
|
|
103
|
+
labelText: "Load More",
|
|
104
|
+
buttonType: "secondary",
|
|
105
|
+
onClick: getMoreMessages,
|
|
106
|
+
"data-testid": import_ChatContainerDataTestids.ChatContainerDataTestIds.LOAD_MORE_BUTTON,
|
|
107
|
+
innerRef: loadMoreRef
|
|
108
|
+
}
|
|
109
|
+
) }) : null,
|
|
110
|
+
render
|
|
111
|
+
] })
|
|
112
|
+
}
|
|
113
|
+
),
|
|
114
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledNewMessagesHiddenContainer, { "aria-live": "polite", "aria-hidden": "false", children: newMessages.map((newMessage) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { children: [
|
|
115
|
+
newMessage.title,
|
|
116
|
+
" ",
|
|
117
|
+
newMessage.time,
|
|
118
|
+
" ",
|
|
119
|
+
newMessage.body,
|
|
120
|
+
" ",
|
|
121
|
+
newMessage.errorMessage,
|
|
122
|
+
" ",
|
|
123
|
+
newMessage.helpMessage
|
|
124
|
+
] }, newMessage.dsId)) })
|
|
125
|
+
] });
|
|
141
126
|
};
|
|
142
127
|
ChatContainerMessagesList.propTypes = import_react_desc_prop_types.ChatContainerMessagesListPropTypes;
|
|
143
128
|
ChatContainerMessagesList.displayName = "ChatContainerMessagesList";
|