@elliemae/ds-chat-container 3.6.0-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ChatContainer.js +174 -0
- package/dist/cjs/ChatContainer.js.map +7 -0
- package/dist/cjs/ChatContainerDataTestids.js +42 -0
- package/dist/cjs/ChatContainerDataTestids.js.map +7 -0
- package/dist/cjs/index.js +35 -0
- package/dist/cjs/index.js.map +7 -0
- package/dist/cjs/parts/chat-composer/ChatContainerComposer.js +195 -0
- package/dist/cjs/parts/chat-composer/ChatContainerComposer.js.map +7 -0
- package/dist/cjs/parts/chat-composer/index.js +33 -0
- package/dist/cjs/parts/chat-composer/index.js.map +7 -0
- package/dist/cjs/parts/chat-composer/styled.js +99 -0
- package/dist/cjs/parts/chat-composer/styled.js.map +7 -0
- package/dist/cjs/parts/chat-container-messages-list/ChatContainerMessagesList.js +146 -0
- package/dist/cjs/parts/chat-container-messages-list/ChatContainerMessagesList.js.map +7 -0
- package/dist/cjs/parts/chat-container-messages-list/index.js +33 -0
- package/dist/cjs/parts/chat-container-messages-list/index.js.map +7 -0
- package/dist/cjs/parts/chat-container-messages-list/styled.js +110 -0
- package/dist/cjs/parts/chat-container-messages-list/styled.js.map +7 -0
- package/dist/cjs/parts/chat-container-messages-list/useActionRef.js +61 -0
- package/dist/cjs/parts/chat-container-messages-list/useActionRef.js.map +7 -0
- package/dist/cjs/parts/chat-container-messages-list/useChatContainerMessageList.js +106 -0
- package/dist/cjs/parts/chat-container-messages-list/useChatContainerMessageList.js.map +7 -0
- package/dist/cjs/parts/chat-container-messages-list/useFocusAndScrollHelpers.js +93 -0
- package/dist/cjs/parts/chat-container-messages-list/useFocusAndScrollHelpers.js.map +7 -0
- package/dist/cjs/parts/chat-container-messages-list/useGetNewMessages.js +46 -0
- package/dist/cjs/parts/chat-container-messages-list/useGetNewMessages.js.map +7 -0
- package/dist/cjs/parts/chat-container-messages-list/useGlobalEventListener.js +59 -0
- package/dist/cjs/parts/chat-container-messages-list/useGlobalEventListener.js.map +7 -0
- package/dist/cjs/parts/chat-container-messages-list/useKeyboard.js +151 -0
- package/dist/cjs/parts/chat-container-messages-list/useKeyboard.js.map +7 -0
- package/dist/cjs/parts/index.js +27 -0
- package/dist/cjs/parts/index.js.map +7 -0
- package/dist/cjs/react-desc-prop-types.js +184 -0
- package/dist/cjs/react-desc-prop-types.js.map +7 -0
- package/dist/cjs/styled.js +109 -0
- package/dist/cjs/styled.js.map +7 -0
- package/dist/esm/ChatContainer.js +153 -0
- package/dist/esm/ChatContainer.js.map +7 -0
- package/dist/esm/ChatContainerDataTestids.js +16 -0
- package/dist/esm/ChatContainerDataTestids.js.map +7 -0
- package/dist/esm/index.js +9 -0
- package/dist/esm/index.js.map +7 -0
- package/dist/esm/parts/chat-composer/ChatContainerComposer.js +175 -0
- package/dist/esm/parts/chat-composer/ChatContainerComposer.js.map +7 -0
- package/dist/esm/parts/chat-composer/index.js +7 -0
- package/dist/esm/parts/chat-composer/index.js.map +7 -0
- package/dist/esm/parts/chat-composer/styled.js +73 -0
- package/dist/esm/parts/chat-composer/styled.js.map +7 -0
- package/dist/esm/parts/chat-container-messages-list/ChatContainerMessagesList.js +128 -0
- package/dist/esm/parts/chat-container-messages-list/ChatContainerMessagesList.js.map +7 -0
- package/dist/esm/parts/chat-container-messages-list/index.js +7 -0
- package/dist/esm/parts/chat-container-messages-list/index.js.map +7 -0
- package/dist/esm/parts/chat-container-messages-list/styled.js +84 -0
- package/dist/esm/parts/chat-container-messages-list/styled.js.map +7 -0
- package/dist/esm/parts/chat-container-messages-list/useActionRef.js +35 -0
- package/dist/esm/parts/chat-container-messages-list/useActionRef.js.map +7 -0
- package/dist/esm/parts/chat-container-messages-list/useChatContainerMessageList.js +84 -0
- package/dist/esm/parts/chat-container-messages-list/useChatContainerMessageList.js.map +7 -0
- package/dist/esm/parts/chat-container-messages-list/useFocusAndScrollHelpers.js +67 -0
- package/dist/esm/parts/chat-container-messages-list/useFocusAndScrollHelpers.js.map +7 -0
- package/dist/esm/parts/chat-container-messages-list/useGetNewMessages.js +20 -0
- package/dist/esm/parts/chat-container-messages-list/useGetNewMessages.js.map +7 -0
- package/dist/esm/parts/chat-container-messages-list/useGlobalEventListener.js +33 -0
- package/dist/esm/parts/chat-container-messages-list/useGlobalEventListener.js.map +7 -0
- package/dist/esm/parts/chat-container-messages-list/useKeyboard.js +125 -0
- package/dist/esm/parts/chat-container-messages-list/useKeyboard.js.map +7 -0
- package/dist/esm/parts/index.js +4 -0
- package/dist/esm/parts/index.js.map +7 -0
- package/dist/esm/react-desc-prop-types.js +158 -0
- package/dist/esm/react-desc-prop-types.js.map +7 -0
- package/dist/esm/styled.js +83 -0
- package/dist/esm/styled.js.map +7 -0
- package/package.json +162 -0
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { useVirtual } from 'react-virtual';\nimport { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-utilities';\nimport { BANNER_TYPES } from '@elliemae/ds-banner';\nimport { DSChatBubbleT } from '@elliemae/ds-chat-bubble';\n\n// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars\nfunction noop<T extends unknown[]>(..._args: T): void {}\nexport declare namespace DSChatT {\n interface ChatBannerProps {\n label: string;\n viewLabel: string;\n type?: 'info' | 'success' | 'danger' | 'warning';\n onView: () => void;\n onClose: () => void;\n }\n export type ScrollToIndexOptions = Parameters<ReturnType<typeof useVirtual>['scrollToIndex']>[1];\n export type ActionRef = React.MutableRefObject<{\n scrollToIndex?: (index: number, opts: ScrollToIndexOptions) => void;\n focusToIndex?: (index: number, opts: ScrollToIndexOptions) => void;\n getMessagesInView?: () => string[];\n focusToIndexWithoutScroll?: (index: string) => void;\n focusToList?: () => void;\n focusToComposer?: () => void;\n focusToSend?: () => void;\n focusOnBanner?: () => void;\n focusOnBannerLink?: () => void;\n }>;\n\n export interface ContainerProps {\n messagesListProps: Pick<MessagesListProps, 'messages' | 'onScrollEnds'>;\n composerProps: ComposerProps;\n actionRef?: ActionRef;\n autoScroll: boolean;\n device: 'desktop' | 'mobile';\n isLoading?: 'top' | 'bottom';\n hasMoreItems?: 'top' | 'bottom';\n getMoreMessages: () => void;\n bannerPosition?: 'top' | 'bottom';\n bannerProps?: ChatBannerProps;\n sendingMessages?: string[] | number[];\n sendingText: string;\n }\n\n export interface ComposerProps {\n placeholder?: string;\n inputValue?: string;\n ariaMaxLengthMessage?: string;\n maxLengthMessage?: string;\n onChange: (value: string) => void;\n onResize?: (value: number) => void;\n onSend: (e: React.MouseEvent) => void;\n onFocus?: (e: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;\n onBlur?: (e: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;\n onKeyDown?: (e: React.KeyboardEvent) => void;\n maxHeight?: number;\n inputMaxLength?: number;\n buttonDisabled: boolean;\n dataTestid?: string;\n actionRef?: ActionRef;\n }\n\n export interface MessagesListProps {\n messages: DSChatBubbleT.Props[];\n actionRef: ActionRef;\n onScrollEnds?: (indexList: string[]) => void;\n isLoading?: 'top' | 'bottom';\n hasMoreItems?: 'top' | 'bottom';\n getMoreMessages: () => void;\n sendingMessages?: Array<string | number>;\n sendingText: string;\n bannerPosition?: 'top' | 'bottom';\n bannerRef?: React.MutableRefObject<{\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n focusOnWrapper: (...args: any[]) => void;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n focusOnLink: (...args: any[]) => void;\n }>;\n }\n\n export interface GetPaddingT {\n hasMoreItems: string | undefined;\n bannerPosition: string | undefined;\n isLoading: string | undefined;\n }\n}\n\nexport interface TextAreaProps {\n height: string | number;\n style: React.CSSProperties;\n}\n\nexport const defaultPropsComposer: DSChatT.ComposerProps = {\n placeholder: 'Type your message',\n inputValue: '',\n ariaMaxLengthMessage: '',\n onChange: noop,\n onResize: noop,\n onSend: noop,\n onFocus: noop,\n onBlur: noop,\n onKeyDown: noop,\n maxHeight: 0,\n inputMaxLength: undefined,\n maxLengthMessage: undefined,\n buttonDisabled: false,\n dataTestid: 'ds-chat-composer',\n actionRef: undefined,\n};\n\nexport const ChatComposerPropTypes = {\n placeholder: PropTypes.string.description('Input Placeholder').defaultValue(defaultPropsComposer.placeholder),\n inputValue: PropTypes.string.description('Input value').defaultValue(defaultPropsComposer.inputValue),\n ariaMaxLengthMessage: PropTypes.string\n .description('Aria message for Max length message when exceeded')\n .defaultValue(defaultPropsComposer.maxLengthMessage),\n maxLengthMessage: PropTypes.string\n .description('Max length message')\n .defaultValue(defaultPropsComposer.maxLengthMessage),\n onChange: PropTypes.func.description('Called when the user types').defaultValue(defaultPropsComposer.onChange),\n onResize: PropTypes.func\n .description('Called the input changes his height')\n .defaultValue(defaultPropsComposer.onResize),\n onSend: PropTypes.func.description('Called when the click send').defaultValue(defaultPropsComposer.onSend),\n onFocus: PropTypes.func.description('Input focus').defaultValue(defaultPropsComposer.onFocus),\n onBlur: PropTypes.func.description('Input blur').defaultValue(defaultPropsComposer.onBlur),\n onKeyDown: PropTypes.func.description('Input on key down').defaultValue(defaultPropsComposer.onKeyDown),\n maxHeight: PropTypes.number\n .description('Max height of the composer. Use 0 for no limit')\n .defaultValue(defaultPropsComposer.onBlur),\n inputMaxLength: PropTypes.number\n .description('Max length of the composer. `undefined` for no limit')\n .defaultValue(defaultPropsComposer.inputMaxLength),\n buttonDisabled: PropTypes.bool\n .description('Control the disabled for the send button')\n .defaultValue(defaultPropsComposer.buttonDisabled),\n dataTestid: PropTypes.string.description('Data testid').defaultValue(defaultPropsComposer.placeholder),\n actionRef: PropTypes.object\n .description(\n `Reference: \n { \n scrollToIndex?: (n: number, opts: { align: 'end' | 'center' | 'start' }) => void,\n getMessagesInView?: () => number[],\n focusToIndex?: (n: number) => void,\n focusToList?: () => void,\n focusToComposer?: () => void,\n focusToSend?: () => void,\n }\n \n `,\n )\n .defaultValue(defaultPropsComposer.actionRef),\n};\n\nexport const defaultPropsMessagesList: DSChatT.MessagesListProps = {\n messages: [],\n actionRef: { current: {} },\n // we don't want this to exist \"by default\" since this loads document.addEventListener\n // the code is already checking for this callback existence everytime it's invoked anyway\n // onScrollEnds: () => [],\n getMoreMessages: noop,\n sendingMessages: undefined,\n sendingText: 'Sending',\n bannerPosition: undefined,\n bannerRef: undefined,\n};\n\nexport const ChatContainerMessagesListPropTypes = {\n ...globalAttributesPropTypes,\n\n messages: PropTypes.arrayOf(PropTypes.object)\n .description('The array of out-of-the-box items you want to render inside the ChatMessageList')\n .defaultValue(defaultPropsMessagesList.messages),\n actionRef: PropTypes.object\n .description(\n `Reference: \n { \n scrollToIndex?: (n: number, opts: { align: 'end' | 'center' | 'start' }) => void,\n getMessagesInView: () => number[],\n focusToIndex: (n: number) => void,\n focusToIndexWithoutScroll: (n: number) => void,\n focusToList: () => void,\n focusToComposer: () => void,\n focusToSend: () => void,\n }\n \n `,\n )\n .defaultValue(defaultPropsMessagesList.actionRef),\n onScrollEnds: PropTypes.func.description(`Called when the scroll stops.`),\n isLoading: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n 'Keeps the load more space while the loading is in progress',\n ),\n hasMoreItems: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n 'Show Load More button at the `top` or `bottom` of the container',\n ),\n getMoreMessages: PropTypes.func\n .description('Called when the user clicks on load more')\n .defaultValue(defaultPropsMessagesList.getMoreMessages),\n sendingMessages: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)])\n .description('Array of ids of sending messages')\n .defaultValue(defaultPropsMessagesList.sendingMessages),\n sendingText: PropTypes.string\n .description('Label description for messages in sending status')\n .defaultValue(defaultPropsMessagesList.sendingText),\n};\n\nexport const defaultProps: DSChatT.ContainerProps = {\n messagesListProps: defaultPropsMessagesList,\n composerProps: defaultPropsComposer,\n actionRef: undefined,\n autoScroll: false,\n device: 'desktop',\n isLoading: undefined,\n hasMoreItems: undefined,\n getMoreMessages: noop,\n bannerPosition: undefined,\n bannerProps: {\n type: BANNER_TYPES.INFO,\n label: 'Unread Messages',\n viewLabel: 'View',\n onView: noop,\n onClose: noop,\n },\n sendingMessages: undefined,\n sendingText: 'Sending',\n};\n\nexport const ChatContainerPropTypes = {\n ...globalAttributesPropTypes,\n messagesListProps: PropTypes.object\n .description('ChatMessageList props \"messages\" / \"onScrollEnds\"')\n .defaultValue(defaultProps.messagesListProps),\n composerProps: PropTypes.object.description('Composer configuration').defaultValue(defaultProps.composerProps),\n autoScroll: PropTypes.bool.description('Auto scroll to bottom on resize').defaultValue(defaultProps.autoScroll),\n device: PropTypes.string\n .description('Option to render mobile or desktop style composer')\n .defaultValue(defaultProps.device),\n isLoading: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n 'Show Loading messages indicator at the `top` or `bottom` of the container',\n ),\n hasMoreItems: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n 'Show Load More button at the `top` or `bottom` of the container',\n ),\n getMoreMessages: PropTypes.func\n .description('Called when the user clicks on load more')\n .defaultValue(defaultProps.getMoreMessages),\n bannerPosition: PropTypes.oneOf(['top', 'bottom', undefined]).description(\n 'Show Loading messages indicator at the `top` or `bottom` of the container',\n ),\n bannerProps: PropTypes.object\n .description(\n `Banner configuration:\n label: string;\n viewLabel: string;\n type: BANNER_TYPES;\n onView: () => void;\n onClose: () => void;\n `,\n )\n .defaultValue(defaultProps.bannerProps),\n sendingMessages: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)])\n .description('Array of ids of sending messages')\n .defaultValue(defaultProps.sendingMessages),\n sendingText: PropTypes.string\n .description('Label description for messages in sending status')\n .defaultValue(defaultProps.sendingText),\n actionRef: PropTypes.object\n .description(\n `Reference: \n { \n scrollToIndex: (n: number) => void,\n getMessagesInView: () => number[],\n focusToIndex: (n: number) => void,\n focusToList: () => void,\n focusToComposer: () => void,\n focusToSend: () => void,\n }\n \n `,\n )\n .defaultValue(defaultProps.actionRef),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,109 @@
|
|
|
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 styled_exports = {};
|
|
26
|
+
__export(styled_exports, {
|
|
27
|
+
CONTAINER_WIDTH: () => CONTAINER_WIDTH,
|
|
28
|
+
MobileStyledChatContainerContent: () => MobileStyledChatContainerContent,
|
|
29
|
+
StyledChatContainerContent: () => StyledChatContainerContent,
|
|
30
|
+
StyledIndicatorContainer: () => StyledIndicatorContainer
|
|
31
|
+
});
|
|
32
|
+
module.exports = __toCommonJS(styled_exports);
|
|
33
|
+
var React = __toESM(require("react"));
|
|
34
|
+
var import_ds_system = require("@elliemae/ds-system");
|
|
35
|
+
var import_ds_grid = require("@elliemae/ds-grid");
|
|
36
|
+
var import_ds_chat_system_message = require("@elliemae/ds-chat-system-message");
|
|
37
|
+
var import_ds_chat_bubble = require("@elliemae/ds-chat-bubble");
|
|
38
|
+
var import_styled = require("./parts/chat-composer/styled");
|
|
39
|
+
const CONTAINER_WIDTH = 300;
|
|
40
|
+
const StyledChatContainerContent = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
41
|
+
height: 100%;
|
|
42
|
+
min-width: ${CONTAINER_WIDTH}px;
|
|
43
|
+
overflow: hidden;
|
|
44
|
+
background: ${(props) => props.theme.colors.neutral["050"]};
|
|
45
|
+
position: relative;
|
|
46
|
+
`;
|
|
47
|
+
const StyledIndicatorContainer = import_ds_system.styled.div`
|
|
48
|
+
transition: 0.2s ease-in-out;
|
|
49
|
+
// 0.2s is the same duration of the banner settimeout function to focus itself
|
|
50
|
+
// this has to be this way to fix visual bugs on safari.
|
|
51
|
+
position: absolute;
|
|
52
|
+
visibility: hidden;
|
|
53
|
+
pointer-events: none;
|
|
54
|
+
width: 100%;
|
|
55
|
+
padding: 0 ${(props) => !props.linear ? props.theme.space.xxs : 0};
|
|
56
|
+
left: 0;
|
|
57
|
+
right: 0;
|
|
58
|
+
background: ${(props) => props.theme.colors.neutral["000"]};
|
|
59
|
+
${(props) => props.isLoading === "top" ? `
|
|
60
|
+
top: -41px;
|
|
61
|
+
transform: translate(0, 41px);
|
|
62
|
+
visibility: visible;
|
|
63
|
+
pointer-events: auto;
|
|
64
|
+
` : ""}
|
|
65
|
+
${(props) => props.isLoading === "bottom" ? `
|
|
66
|
+
bottom: -41px;
|
|
67
|
+
transform: translate(0, -41px);
|
|
68
|
+
visibility: visible;
|
|
69
|
+
pointer-events: auto;
|
|
70
|
+
` : ""}
|
|
71
|
+
|
|
72
|
+
& div,a {
|
|
73
|
+
font-size: 13px;
|
|
74
|
+
}
|
|
75
|
+
`;
|
|
76
|
+
const MobileStyledChatContainerContent = (0, import_ds_system.styled)(StyledChatContainerContent)`
|
|
77
|
+
${import_ds_chat_bubble.StyledTitleLeftBubble},
|
|
78
|
+
${import_ds_chat_bubble.StyleBodyWrapper} {
|
|
79
|
+
font-size: 16px;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
${import_ds_chat_bubble.StyledTitleRightBubble} {
|
|
83
|
+
font-size: 13px;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
${import_ds_chat_system_message.Wrapper} {
|
|
87
|
+
background-color: #fff;
|
|
88
|
+
box-shadow: -0 1px 3px rgba(53, 60, 70, 0.8);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
${import_ds_chat_system_message.Title},
|
|
92
|
+
${import_ds_chat_system_message.Message} {
|
|
93
|
+
font-size: 16px;
|
|
94
|
+
text-align: left;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
${import_ds_chat_system_message.Time} {
|
|
98
|
+
font-size: 13px;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
${import_styled.StyledComposerInput} {
|
|
102
|
+
font-size: 16px;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
${StyledIndicatorContainer} {
|
|
106
|
+
font-size: 16px;
|
|
107
|
+
}
|
|
108
|
+
`;
|
|
109
|
+
//# sourceMappingURL=styled.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/styled.ts", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Wrapper, Title, Time, Message } from '@elliemae/ds-chat-system-message';\nimport { StyledTitleRightBubble, StyledTitleLeftBubble, StyleBodyWrapper } from '@elliemae/ds-chat-bubble';\nimport { StyledComposerInput } from './parts/chat-composer/styled';\nexport const CONTAINER_WIDTH = 300;\n\nexport const StyledChatContainerContent = styled(Grid)`\n height: 100%;\n min-width: ${CONTAINER_WIDTH}px;\n overflow: hidden;\n background: ${(props) => props.theme.colors.neutral['050']};\n position: relative;\n`;\nexport const StyledIndicatorContainer = styled.div<{\n isLoading?: 'top' | 'bottom';\n linear?: boolean;\n}>`\n transition: 0.2s ease-in-out;\n // 0.2s is the same duration of the banner settimeout function to focus itself\n // this has to be this way to fix visual bugs on safari.\n position: absolute;\n visibility: hidden;\n pointer-events: none;\n width: 100%;\n padding: 0 ${(props) => (!props.linear ? props.theme.space.xxs : 0)};\n left: 0;\n right: 0;\n background: ${(props) => props.theme.colors.neutral['000']};\n ${(props) =>\n props.isLoading === 'top'\n ? `\n top: -41px;\n transform: translate(0, 41px);\n visibility: visible;\n pointer-events: auto;\n `\n : ''}\n ${(props) =>\n props.isLoading === 'bottom'\n ? `\n bottom: -41px;\n transform: translate(0, -41px);\n visibility: visible;\n pointer-events: auto;\n `\n : ''}\n\n & div,a {\n font-size: 13px;\n }\n`;\n\nexport const MobileStyledChatContainerContent = styled(StyledChatContainerContent)`\n ${StyledTitleLeftBubble},\n ${StyleBodyWrapper} {\n font-size: 16px;\n }\n\n ${StyledTitleRightBubble} {\n font-size: 13px;\n }\n\n ${Wrapper} {\n background-color: #fff;\n box-shadow: -0 1px 3px rgba(53, 60, 70, 0.8);\n }\n\n ${Title},\n ${Message} {\n font-size: 16px;\n text-align: left;\n }\n\n ${Time} {\n font-size: 13px;\n }\n\n ${StyledComposerInput} {\n font-size: 16px;\n }\n\n ${StyledIndicatorContainer} {\n font-size: 16px;\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAqB;AACrB,oCAA8C;AAC9C,4BAAgF;AAChF,oBAAoC;AAC7B,MAAM,kBAAkB;AAExB,MAAM,iCAA6B,yBAAO,mBAAI;AAAA;AAAA,eAEtC;AAAA;AAAA,gBAEC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAG/C,MAAM,2BAA2B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAWhC,CAAC,UAAW,CAAC,MAAM,SAAS,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA,gBAGnD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,IAClD,CAAC,UACD,MAAM,cAAc,QAChB;AAAA;AAAA;AAAA;AAAA;AAAA,MAMA;AAAA,IACJ,CAAC,UACD,MAAM,cAAc,WAChB;AAAA;AAAA;AAAA;AAAA;AAAA,MAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOD,MAAM,uCAAmC,yBAAO,0BAA0B;AAAA,IAC7E;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import React2 from "react";
|
|
4
|
+
import { noop } from "lodash";
|
|
5
|
+
import {
|
|
6
|
+
useMemoMergePropsWithDefault,
|
|
7
|
+
useGetGlobalAttributes,
|
|
8
|
+
useValidateTypescriptPropTypes,
|
|
9
|
+
describe
|
|
10
|
+
} from "@elliemae/ds-utilities";
|
|
11
|
+
import DSIndeterminateProgressIndicator from "@elliemae/ds-indeterminate-progress-indicator";
|
|
12
|
+
import DSBanner, { BANNER_TYPES } from "@elliemae/ds-banner";
|
|
13
|
+
import { ChatComposer } from "./parts/chat-composer";
|
|
14
|
+
import { ChatContainerMessagesList } from "./parts/chat-container-messages-list";
|
|
15
|
+
import { defaultProps, ChatContainerPropTypes } from "./react-desc-prop-types";
|
|
16
|
+
import { ChatContainerDataTestIds } from "./ChatContainerDataTestids";
|
|
17
|
+
import { StyledChatContainerContent, StyledIndicatorContainer, MobileStyledChatContainerContent } from "./styled";
|
|
18
|
+
const ChatContainer = (props) => {
|
|
19
|
+
const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
|
|
20
|
+
useValidateTypescriptPropTypes(propsWithDefault, ChatContainerPropTypes);
|
|
21
|
+
const globalAttributes = useGetGlobalAttributes(propsWithDefault);
|
|
22
|
+
const {
|
|
23
|
+
sendingText,
|
|
24
|
+
sendingMessages,
|
|
25
|
+
bannerPosition,
|
|
26
|
+
bannerProps,
|
|
27
|
+
messagesListProps,
|
|
28
|
+
composerProps,
|
|
29
|
+
composerProps: { onResize: onComposerResize, onKeyDown: onComposerKeyDown },
|
|
30
|
+
actionRef,
|
|
31
|
+
device,
|
|
32
|
+
isLoading,
|
|
33
|
+
hasMoreItems,
|
|
34
|
+
getMoreMessages
|
|
35
|
+
} = propsWithDefault;
|
|
36
|
+
const bannerRef = React2.useRef({ focusOnWrapper: noop, focusOnLink: noop });
|
|
37
|
+
const containerRef = React2.useRef();
|
|
38
|
+
const listRef = React2.useRef({ scrollToIndex: noop });
|
|
39
|
+
const onResize = React2.useCallback(
|
|
40
|
+
(height) => {
|
|
41
|
+
if (onComposerResize)
|
|
42
|
+
onComposerResize(height);
|
|
43
|
+
setTimeout(() => {
|
|
44
|
+
if (actionRef?.current?.scrollToIndex) {
|
|
45
|
+
actionRef.current.scrollToIndex(messagesListProps.messages.length - 1, {
|
|
46
|
+
align: "start"
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
}, 50);
|
|
50
|
+
},
|
|
51
|
+
[onComposerResize, messagesListProps.messages, actionRef]
|
|
52
|
+
);
|
|
53
|
+
const Container = device === "desktop" ? StyledChatContainerContent : MobileStyledChatContainerContent;
|
|
54
|
+
const handleTabs = React2.useCallback(
|
|
55
|
+
(e) => {
|
|
56
|
+
if (onComposerKeyDown)
|
|
57
|
+
onComposerKeyDown(e);
|
|
58
|
+
else if (e.shiftKey && e.key === "Tab" && messagesListProps.messages?.length > 0) {
|
|
59
|
+
e.preventDefault();
|
|
60
|
+
if (bannerPosition && ["top", "bottom"].includes(bannerPosition)) {
|
|
61
|
+
bannerRef.current.focusOnWrapper();
|
|
62
|
+
}
|
|
63
|
+
if (actionRef?.current && actionRef.current.getMessagesInView) {
|
|
64
|
+
const last = actionRef.current.getMessagesInView().pop();
|
|
65
|
+
if (last && actionRef.current.focusToIndexWithoutScroll)
|
|
66
|
+
actionRef.current?.focusToIndexWithoutScroll(last);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
[actionRef, onComposerKeyDown, bannerPosition, messagesListProps.messages?.length]
|
|
71
|
+
);
|
|
72
|
+
React2.useEffect(() => {
|
|
73
|
+
if (actionRef && actionRef.current) {
|
|
74
|
+
actionRef.current.focusOnBanner = bannerRef.current.focusOnWrapper;
|
|
75
|
+
actionRef.current.focusOnBannerLink = bannerRef.current.focusOnLink;
|
|
76
|
+
}
|
|
77
|
+
}, [actionRef]);
|
|
78
|
+
return /* @__PURE__ */ jsxs(Container, {
|
|
79
|
+
...globalAttributes,
|
|
80
|
+
rows: ["minmax(0, 1fr)", "auto"],
|
|
81
|
+
ref: containerRef,
|
|
82
|
+
role: "region",
|
|
83
|
+
children: [
|
|
84
|
+
/* @__PURE__ */ jsxs("div", {
|
|
85
|
+
style: { position: "relative", overflow: "hidden" },
|
|
86
|
+
children: [
|
|
87
|
+
/* @__PURE__ */ jsx(ChatContainerMessagesList, {
|
|
88
|
+
...messagesListProps,
|
|
89
|
+
actionRef: actionRef || listRef,
|
|
90
|
+
isLoading,
|
|
91
|
+
hasMoreItems,
|
|
92
|
+
getMoreMessages,
|
|
93
|
+
sendingMessages,
|
|
94
|
+
sendingText,
|
|
95
|
+
bannerPosition,
|
|
96
|
+
bannerRef
|
|
97
|
+
}),
|
|
98
|
+
isLoading && ["top", "bottom"].includes(isLoading) ? /* @__PURE__ */ jsx(StyledIndicatorContainer, {
|
|
99
|
+
isLoading,
|
|
100
|
+
"data-testid": ChatContainerDataTestIds.LOADING_INDICATOR,
|
|
101
|
+
children: /* @__PURE__ */ jsx(DSIndeterminateProgressIndicator, {
|
|
102
|
+
processing: true,
|
|
103
|
+
title: "Loading"
|
|
104
|
+
})
|
|
105
|
+
}) : null,
|
|
106
|
+
/* @__PURE__ */ jsx(StyledIndicatorContainer, {
|
|
107
|
+
linear: true,
|
|
108
|
+
isLoading: bannerPosition,
|
|
109
|
+
children: /* @__PURE__ */ jsx(DSBanner, {
|
|
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 || BANNER_TYPES.INFO,
|
|
120
|
+
actionRef: bannerRef
|
|
121
|
+
})
|
|
122
|
+
}),
|
|
123
|
+
sendingMessages && sendingMessages.length > 0 ? /* @__PURE__ */ jsx(StyledIndicatorContainer, {
|
|
124
|
+
isLoading: "bottom",
|
|
125
|
+
linear: true,
|
|
126
|
+
"data-testid": ChatContainerDataTestIds.LOADING_INDICATOR,
|
|
127
|
+
children: /* @__PURE__ */ jsx(DSIndeterminateProgressIndicator, {
|
|
128
|
+
processing: true,
|
|
129
|
+
title: sendingText,
|
|
130
|
+
lineOnly: true
|
|
131
|
+
})
|
|
132
|
+
}) : null
|
|
133
|
+
]
|
|
134
|
+
}),
|
|
135
|
+
/* @__PURE__ */ jsx(ChatComposer, {
|
|
136
|
+
...composerProps,
|
|
137
|
+
onKeyDown: handleTabs,
|
|
138
|
+
onResize,
|
|
139
|
+
maxHeight: (containerRef.current?.clientHeight || 0) / 2,
|
|
140
|
+
actionRef: actionRef || listRef
|
|
141
|
+
})
|
|
142
|
+
]
|
|
143
|
+
});
|
|
144
|
+
};
|
|
145
|
+
ChatContainer.propTypes = ChatContainerPropTypes;
|
|
146
|
+
ChatContainer.displayName = "ChatContainer";
|
|
147
|
+
const ChatContainerWithSchema = describe(ChatContainer);
|
|
148
|
+
ChatContainerWithSchema.propTypes = ChatContainerPropTypes;
|
|
149
|
+
export {
|
|
150
|
+
ChatContainer,
|
|
151
|
+
ChatContainerWithSchema
|
|
152
|
+
};
|
|
153
|
+
//# sourceMappingURL=ChatContainer.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/ChatContainer.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport React, { WeakValidationMap } 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 { DSChatT, 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 onResize = React.useCallback(\n (height: number) => {\n if (onComposerResize) onComposerResize(height);\n /*\n setTimeout is used to equal the animation duration from the \n composer text area when increase its size\n */\n setTimeout(() => {\n if (actionRef?.current?.scrollToIndex) {\n actionRef.current.scrollToIndex(messagesListProps.messages.length - 1, {\n align: 'start',\n });\n }\n }, 50);\n },\n [onComposerResize, messagesListProps.messages, actionRef],\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={onResize}\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
const ChatContainerDataTestIds = {
|
|
3
|
+
COMPOSER: "chat-composer",
|
|
4
|
+
COMPOSER_TEXTAREA: "chat-composer-textarea",
|
|
5
|
+
COMPOSER_SEND_BUTTON: "chat-composer-send-button",
|
|
6
|
+
COMPOSER_COUNTER_AREA: "composer-counter-area",
|
|
7
|
+
LOADING_INDICATOR: "ds-chat-loading-indicator",
|
|
8
|
+
THREAD_CONTAINER: "chat-thread-container",
|
|
9
|
+
LOAD_MORE_BUTTON: "ds-chat-load-more-btn",
|
|
10
|
+
FLOATING_BUTTON: "chat-floating-button",
|
|
11
|
+
BANNER: "ds-banner-container"
|
|
12
|
+
};
|
|
13
|
+
export {
|
|
14
|
+
ChatContainerDataTestIds
|
|
15
|
+
};
|
|
16
|
+
//# sourceMappingURL=ChatContainerDataTestids.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/ChatContainerDataTestids.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const ChatContainerDataTestIds = {\n COMPOSER: 'chat-composer',\n COMPOSER_TEXTAREA: 'chat-composer-textarea',\n COMPOSER_SEND_BUTTON: 'chat-composer-send-button',\n COMPOSER_COUNTER_AREA: 'composer-counter-area',\n LOADING_INDICATOR: 'ds-chat-loading-indicator',\n THREAD_CONTAINER: 'chat-thread-container',\n LOAD_MORE_BUTTON: 'ds-chat-load-more-btn',\n FLOATING_BUTTON: 'chat-floating-button',\n BANNER: 'ds-banner-container',\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,2BAA2B;AAAA,EACtC,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,uBAAuB;AAAA,EACvB,mBAAmB;AAAA,EACnB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,QAAQ;AACV;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { ChatContainer, ChatContainerWithSchema } from "./ChatContainer";
|
|
3
|
+
import { ChatContainerDataTestIds } from "./ChatContainerDataTestids";
|
|
4
|
+
export {
|
|
5
|
+
ChatContainer,
|
|
6
|
+
ChatContainerDataTestIds,
|
|
7
|
+
ChatContainerWithSchema
|
|
8
|
+
};
|
|
9
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { ChatContainer, ChatContainerWithSchema } from './ChatContainer';\nexport { ChatContainerDataTestIds } from './ChatContainerDataTestids';\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe,+BAA+B;AACvD,SAAS,gCAAgC;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import React2, { useMemo } from "react";
|
|
4
|
+
import { Grid } from "@elliemae/ds-grid";
|
|
5
|
+
import { PaperAirplane } from "@elliemae/ds-icons";
|
|
6
|
+
import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, describe } from "@elliemae/ds-utilities";
|
|
7
|
+
import {
|
|
8
|
+
StyledChatContainerContentComposer,
|
|
9
|
+
StyledComposerInput,
|
|
10
|
+
StyledComposerButton,
|
|
11
|
+
StyledCounterArea,
|
|
12
|
+
StyledCounterErrorA11y
|
|
13
|
+
} from "./styled";
|
|
14
|
+
import { ChatContainerDataTestIds } from "../../ChatContainerDataTestids";
|
|
15
|
+
import { ChatComposerPropTypes, defaultPropsComposer } from "../../react-desc-prop-types";
|
|
16
|
+
const ChatComposer = (props) => {
|
|
17
|
+
const propsWithDefault = useMemoMergePropsWithDefault(props, defaultPropsComposer);
|
|
18
|
+
useValidateTypescriptPropTypes(propsWithDefault, ChatComposerPropTypes);
|
|
19
|
+
const {
|
|
20
|
+
inputValue,
|
|
21
|
+
onChange,
|
|
22
|
+
onResize,
|
|
23
|
+
onSend,
|
|
24
|
+
onFocus,
|
|
25
|
+
onBlur,
|
|
26
|
+
onKeyDown,
|
|
27
|
+
maxHeight = 300,
|
|
28
|
+
placeholder,
|
|
29
|
+
inputMaxLength,
|
|
30
|
+
maxLengthMessage,
|
|
31
|
+
ariaMaxLengthMessage,
|
|
32
|
+
buttonDisabled,
|
|
33
|
+
dataTestid,
|
|
34
|
+
actionRef
|
|
35
|
+
} = propsWithDefault;
|
|
36
|
+
const COMPOSER_MIN_HEIGHT = 32;
|
|
37
|
+
const input = React2.useRef();
|
|
38
|
+
const inputSize = React2.useRef();
|
|
39
|
+
const inputSend = React2.useRef(null);
|
|
40
|
+
const [height, setHeight] = React2.useState(32);
|
|
41
|
+
const internalMaxHeight = React2.useMemo(() => maxHeight - 24, [maxHeight]);
|
|
42
|
+
const [showScroll, setShowScroll] = React2.useState(true);
|
|
43
|
+
React2.useEffect(() => {
|
|
44
|
+
if (inputSize?.current?.scrollHeight) {
|
|
45
|
+
const newHeight = inputSize.current.scrollHeight > internalMaxHeight ? internalMaxHeight : inputSize.current?.scrollHeight;
|
|
46
|
+
if (newHeight !== height && newHeight > COMPOSER_MIN_HEIGHT && onResize)
|
|
47
|
+
onResize(newHeight);
|
|
48
|
+
setHeight(newHeight);
|
|
49
|
+
setShowScroll(inputSize.current.scrollHeight - inputSize.current.clientHeight > 5);
|
|
50
|
+
}
|
|
51
|
+
}, [inputValue, internalMaxHeight, height, onResize]);
|
|
52
|
+
React2.useEffect(() => {
|
|
53
|
+
if (actionRef && actionRef.current) {
|
|
54
|
+
actionRef.current.focusToComposer = () => {
|
|
55
|
+
input?.current?.focus?.();
|
|
56
|
+
};
|
|
57
|
+
actionRef.current.focusToSend = () => {
|
|
58
|
+
input?.current?.focus?.();
|
|
59
|
+
};
|
|
60
|
+
}
|
|
61
|
+
}, [actionRef]);
|
|
62
|
+
const handleChange = React2.useCallback(
|
|
63
|
+
(e) => {
|
|
64
|
+
onChange(e.target.value);
|
|
65
|
+
},
|
|
66
|
+
[onChange]
|
|
67
|
+
);
|
|
68
|
+
const heightProps = { height, overflow: showScroll ? "auto" : "hidden" };
|
|
69
|
+
const inputLength = String(inputValue || "").length;
|
|
70
|
+
const hasError = React2.useMemo(() => {
|
|
71
|
+
if (!inputMaxLength)
|
|
72
|
+
return false;
|
|
73
|
+
return inputLength > inputMaxLength;
|
|
74
|
+
}, [inputLength, inputMaxLength]);
|
|
75
|
+
const isSendButtonDisabled = useMemo(
|
|
76
|
+
() => !inputValue || buttonDisabled || hasError,
|
|
77
|
+
[inputValue, buttonDisabled, hasError]
|
|
78
|
+
);
|
|
79
|
+
return /* @__PURE__ */ jsxs(StyledChatContainerContentComposer, {
|
|
80
|
+
rows: ["auto", "15px"],
|
|
81
|
+
maxHeight: `${maxHeight}px`,
|
|
82
|
+
"data-testid": dataTestid ?? ChatContainerDataTestIds.COMPOSER,
|
|
83
|
+
children: [
|
|
84
|
+
/* @__PURE__ */ jsxs(Grid, {
|
|
85
|
+
cols: ["1fr", "24px"],
|
|
86
|
+
style: { height: heightProps.height },
|
|
87
|
+
justifyContent: "center",
|
|
88
|
+
alignItems: "flex-end",
|
|
89
|
+
gutter: "xxs",
|
|
90
|
+
children: [
|
|
91
|
+
/* @__PURE__ */ jsx(StyledComposerInput, {
|
|
92
|
+
ref: input,
|
|
93
|
+
onChange: handleChange,
|
|
94
|
+
style: { ...heightProps },
|
|
95
|
+
value: inputValue,
|
|
96
|
+
onFocus,
|
|
97
|
+
onBlur,
|
|
98
|
+
onKeyDown,
|
|
99
|
+
placeholder,
|
|
100
|
+
"aria-label": "Message to send",
|
|
101
|
+
"data-testid": ChatContainerDataTestIds.COMPOSER_TEXTAREA,
|
|
102
|
+
name: "chat-composer-textarea",
|
|
103
|
+
id: "chat-composer-textarea"
|
|
104
|
+
}),
|
|
105
|
+
/* @__PURE__ */ jsx(Grid, {
|
|
106
|
+
height: "32px",
|
|
107
|
+
alignItems: "center",
|
|
108
|
+
children: /* @__PURE__ */ jsx(StyledComposerButton, {
|
|
109
|
+
buttonType: "icon",
|
|
110
|
+
onClick: onSend,
|
|
111
|
+
size: "s",
|
|
112
|
+
disabled: isSendButtonDisabled,
|
|
113
|
+
"aria-disabled": isSendButtonDisabled,
|
|
114
|
+
"data-testid": ChatContainerDataTestIds.COMPOSER_SEND_BUTTON,
|
|
115
|
+
"aria-label": "Send",
|
|
116
|
+
innerRef: inputSend,
|
|
117
|
+
children: /* @__PURE__ */ jsx(PaperAirplane, {
|
|
118
|
+
width: 18,
|
|
119
|
+
height: 18
|
|
120
|
+
})
|
|
121
|
+
})
|
|
122
|
+
})
|
|
123
|
+
]
|
|
124
|
+
}),
|
|
125
|
+
/* @__PURE__ */ jsx(StyledComposerInput, {
|
|
126
|
+
ref: inputSize,
|
|
127
|
+
style: {
|
|
128
|
+
height: 32,
|
|
129
|
+
visibility: "hidden",
|
|
130
|
+
pointerEvents: "none",
|
|
131
|
+
position: "absolute",
|
|
132
|
+
top: 0,
|
|
133
|
+
width: input.current?.clientWidth
|
|
134
|
+
},
|
|
135
|
+
onChange: handleChange,
|
|
136
|
+
value: inputValue
|
|
137
|
+
}),
|
|
138
|
+
/* @__PURE__ */ jsxs(Grid, {
|
|
139
|
+
cols: ["1fr", "24px"],
|
|
140
|
+
justifyContent: "flex-end",
|
|
141
|
+
alignItems: "center",
|
|
142
|
+
gutter: "xxs",
|
|
143
|
+
pb: "xxs",
|
|
144
|
+
children: [
|
|
145
|
+
/* @__PURE__ */ jsxs(StyledCounterArea, {
|
|
146
|
+
hasError,
|
|
147
|
+
"data-testid": ChatContainerDataTestIds.COMPOSER_COUNTER_AREA,
|
|
148
|
+
children: [
|
|
149
|
+
inputMaxLength && hasError ? /* @__PURE__ */ jsxs(Fragment, {
|
|
150
|
+
children: [
|
|
151
|
+
/* @__PURE__ */ jsx(StyledCounterErrorA11y, {
|
|
152
|
+
role: "alert",
|
|
153
|
+
children: ariaMaxLengthMessage || `You have entered ${inputLength} characters and have exceeded the limit by ${inputLength - inputMaxLength}. Please limit to less than ${inputMaxLength} characters. `
|
|
154
|
+
}),
|
|
155
|
+
maxLengthMessage || `Please limit to less than ${inputMaxLength} characters. `
|
|
156
|
+
]
|
|
157
|
+
}) : "",
|
|
158
|
+
inputMaxLength ? ` ${inputLength} / ${inputMaxLength}` : ""
|
|
159
|
+
]
|
|
160
|
+
}),
|
|
161
|
+
/* @__PURE__ */ jsx(Grid, {})
|
|
162
|
+
]
|
|
163
|
+
})
|
|
164
|
+
]
|
|
165
|
+
});
|
|
166
|
+
};
|
|
167
|
+
ChatComposer.propTypes = ChatComposerPropTypes;
|
|
168
|
+
ChatComposer.displayName = "ChatComposer";
|
|
169
|
+
const ChatComposerWithSchema = describe(ChatComposer);
|
|
170
|
+
ChatComposerWithSchema.propTypes = ChatComposerPropTypes;
|
|
171
|
+
export {
|
|
172
|
+
ChatComposer,
|
|
173
|
+
ChatComposerWithSchema
|
|
174
|
+
};
|
|
175
|
+
//# sourceMappingURL=ChatContainerComposer.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-composer/ChatContainerComposer.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { WeakValidationMap, 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 { DSChatT, 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, ChatComposerPropTypes);\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 input?.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"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/chat-composer/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { ChatComposer, ChatComposerWithSchema } from './ChatContainerComposer';\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc,8BAA8B;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|