@messenger-box/chat-ui 10.0.3-alpha.172 → 10.0.3-alpha.178
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CustomerSupportChat.d.ts","sourceRoot":"","sources":["../../../src/components/CustomerSupportChat/CustomerSupportChat.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"CustomerSupportChat.d.ts","sourceRoot":"","sources":["../../../src/components/CustomerSupportChat/CustomerSupportChat.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AA8BnD,eAAO,MAAM,mBAAmB,yBAuI/B,CAAC"}
|
|
@@ -1,9 +1,23 @@
|
|
|
1
|
-
import React__default,{useState,useEffect}from'react';import {
|
|
1
|
+
import React__default,{useState,useEffect}from'react';import {BiConversation}from'@react-icons/all-files/bi/BiConversation.js';import {BiMessageDetail}from'@react-icons/all-files/bi/BiMessageDetail.js';import {MdKeyboardArrowDown}from'@react-icons/all-files/md/MdKeyboardArrowDown.js';import {BsCardText}from'@react-icons/all-files/bs/BsCardText.js';import {nanoid}from'nanoid';import {BasicStorage,ChatProvider,AutoDraft}from'@chatscope/use-chat';import {ExampleChatService}from'@chatscope/use-chat/dist/examples/index.js';import {usePublicMessagesQuery}from'common/graphql';import {uniqBy}from'lodash-es';import {Chat}from'./Chat.js';import {objectId}from'@messenger-box/core';// Custom hook for media query
|
|
2
|
+
const useMediaQuery = query => {
|
|
3
|
+
const [matches, setMatches] = useState(false);
|
|
4
|
+
useEffect(() => {
|
|
5
|
+
const media = window.matchMedia(query);
|
|
6
|
+
if (media.matches !== matches) {
|
|
7
|
+
setMatches(media.matches);
|
|
8
|
+
}
|
|
9
|
+
const listener = () => setMatches(media.matches);
|
|
10
|
+
media.addEventListener('change', listener);
|
|
11
|
+
return () => media.removeEventListener('change', listener);
|
|
12
|
+
}, [matches, query]);
|
|
13
|
+
return matches;
|
|
14
|
+
};
|
|
15
|
+
const CustomerSupportChat = () => {
|
|
2
16
|
const [isChat, setIsChat] = useState(false);
|
|
3
17
|
const [isChatOpen, setIsChatOpen] = useState(false);
|
|
4
18
|
const [channelMessages, setChannelMessages] = useState([]);
|
|
5
19
|
const [channelId, setChannelId] = useState(null);
|
|
6
|
-
const
|
|
20
|
+
const isMobileView = useMediaQuery('(max-width: 480px)');
|
|
7
21
|
// Storage needs to generate id for messages and groups
|
|
8
22
|
const messageIdGenerator = () => nanoid();
|
|
9
23
|
const groupIdGenerator = () => nanoid();
|
|
@@ -51,105 +65,46 @@ import React__default,{useState,useEffect}from'react';import {useMediaQuery,Box,
|
|
|
51
65
|
groupIdGenerator,
|
|
52
66
|
messageIdGenerator
|
|
53
67
|
});
|
|
54
|
-
return React__default.createElement(React__default.Fragment, null, !isChat ? React__default.createElement(
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
right: '30px',
|
|
59
|
-
zIndex: '2'
|
|
60
|
-
}
|
|
61
|
-
}, React__default.createElement(Button, {
|
|
62
|
-
background: '#3182ce',
|
|
63
|
-
fontSize: '38px',
|
|
64
|
-
padding: '16px',
|
|
65
|
-
width: '72px',
|
|
66
|
-
height: '72px',
|
|
67
|
-
borderRadius: '50%',
|
|
68
|
-
display: 'flex',
|
|
69
|
-
alignItems: 'center',
|
|
70
|
-
justifyContent: 'center',
|
|
68
|
+
return React__default.createElement(React__default.Fragment, null, !isChat ? React__default.createElement("div", {
|
|
69
|
+
className: "fixed bottom-5 right-8 z-[2]"
|
|
70
|
+
}, React__default.createElement("button", {
|
|
71
|
+
className: "bg-blue-600 text-[38px] p-4 w-[72px] h-[72px] rounded-full flex items-center justify-center hover:bg-blue-700 transition-colors cursor-pointer",
|
|
71
72
|
onClick: handleChatClick
|
|
72
|
-
}, React__default.createElement(BiConversation, null))) : React__default.createElement(
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
width: isMobileView ? '80vw' : '25vw'
|
|
79
|
-
}
|
|
80
|
-
}, React__default.createElement(Box, {
|
|
81
|
-
textAlign: 'left',
|
|
82
|
-
marginBottom: '10px'
|
|
83
|
-
}, React__default.createElement(Button, {
|
|
84
|
-
background: '#3182ce',
|
|
85
|
-
fontSize: '42px',
|
|
86
|
-
width: '62px',
|
|
87
|
-
height: '62px',
|
|
88
|
-
borderRadius: '50%',
|
|
89
|
-
display: 'flex',
|
|
90
|
-
alignItems: 'center',
|
|
91
|
-
justifyContent: 'center',
|
|
73
|
+
}, React__default.createElement(BiConversation, null))) : React__default.createElement("div", {
|
|
74
|
+
className: `fixed bottom-5 right-8 z-[2] ${isMobileView ? 'w-[80vw]' : 'w-[25vw]'}`
|
|
75
|
+
}, React__default.createElement("div", {
|
|
76
|
+
className: "text-left mb-2.5"
|
|
77
|
+
}, React__default.createElement("button", {
|
|
78
|
+
className: "bg-blue-600 text-[42px] w-[62px] h-[62px] rounded-full flex items-center justify-center hover:bg-blue-700 transition-colors cursor-pointer",
|
|
92
79
|
onClick: () => setIsChat(false)
|
|
93
|
-
}, React__default.createElement(MdKeyboardArrowDown, null))), React__default.createElement(
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
}
|
|
98
|
-
}, React__default.createElement(Box, {
|
|
99
|
-
style: {
|
|
100
|
-
display: 'flex',
|
|
101
|
-
backgroundColor: '#3182ce',
|
|
102
|
-
padding: '20px 30px',
|
|
103
|
-
lineHeight: '7vh',
|
|
104
|
-
alignItems: 'center'
|
|
105
|
-
}
|
|
106
|
-
}, React__default.createElement(Box, {
|
|
80
|
+
}, React__default.createElement(MdKeyboardArrowDown, null))), React__default.createElement("div", {
|
|
81
|
+
className: "rounded-[20px] bg-white"
|
|
82
|
+
}, React__default.createElement("div", {
|
|
83
|
+
className: "flex bg-blue-600 px-7 py-5 items-center",
|
|
107
84
|
style: {
|
|
108
|
-
|
|
109
|
-
padding: '10px',
|
|
110
|
-
borderRadius: '54px',
|
|
111
|
-
fontSize: '25px'
|
|
85
|
+
lineHeight: '7vh'
|
|
112
86
|
}
|
|
113
|
-
}, React__default.createElement(
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
},
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
}
|
|
130
|
-
}, !isChatOpen && !channelMessages.length ? React__default.createElement(Box, {
|
|
131
|
-
textAlign: 'center'
|
|
132
|
-
}, React__default.createElement(Image, {
|
|
133
|
-
width: '50%',
|
|
134
|
-
margin: 'auto',
|
|
135
|
-
src: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcThpk_KxVKIRa0_fxwaVgIFcRvTgUem0LbkaA&usqp=CAU"
|
|
136
|
-
}), React__default.createElement(Box, {
|
|
137
|
-
textAlign: 'center'
|
|
138
|
-
}, " No ongoing Conversation"), React__default.createElement(Button, {
|
|
139
|
-
style: {
|
|
140
|
-
backgroundColor: '#3182ce',
|
|
141
|
-
padding: '22px 26px',
|
|
142
|
-
marginTop: '20px',
|
|
143
|
-
borderRadius: '8px',
|
|
144
|
-
color: 'whitesmoke'
|
|
145
|
-
},
|
|
146
|
-
leftIcon: React__default.createElement(BiMessageDetail, {
|
|
147
|
-
fontSize: '22px'
|
|
148
|
-
}),
|
|
87
|
+
}, React__default.createElement("div", {
|
|
88
|
+
className: "bg-[#366c96] p-2.5 rounded-[54px] text-[25px]"
|
|
89
|
+
}, React__default.createElement(BiMessageDetail, null)), React__default.createElement("div", {
|
|
90
|
+
className: "font-bold text-lg ml-7"
|
|
91
|
+
}, "Conversation(s)")), React__default.createElement("div", {
|
|
92
|
+
className: "h-[50vh] bg-[#fafafa] text-black flex flex-col content-stretch justify-evenly items-center"
|
|
93
|
+
}, !isChatOpen && !channelMessages.length ? React__default.createElement("div", {
|
|
94
|
+
className: "text-center"
|
|
95
|
+
}, React__default.createElement("img", {
|
|
96
|
+
className: "w-1/2 mx-auto",
|
|
97
|
+
src: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcThpk_KxVKIRa0_fxwaVgIFcRvTgUem0LbkaA&usqp=CAU",
|
|
98
|
+
alt: "No conversation"
|
|
99
|
+
}), React__default.createElement("div", {
|
|
100
|
+
className: "text-center"
|
|
101
|
+
}, "No ongoing Conversation"), React__default.createElement("button", {
|
|
102
|
+
className: "bg-blue-600 px-7 py-5 mt-5 rounded-lg text-gray-100 hover:bg-blue-700 transition-colors flex items-center gap-2 mx-auto cursor-pointer",
|
|
149
103
|
onClick: handleChat
|
|
150
|
-
},
|
|
151
|
-
|
|
152
|
-
|
|
104
|
+
}, React__default.createElement(BiMessageDetail, {
|
|
105
|
+
className: "text-[22px]"
|
|
106
|
+
}), "Chat now")) : React__default.createElement("div", {
|
|
107
|
+
className: "w-full h-[50vh]"
|
|
153
108
|
}, React__default.createElement(ChatProvider, {
|
|
154
109
|
serviceFactory: serviceFactory,
|
|
155
110
|
storage: chatStorage,
|
|
@@ -167,30 +122,14 @@ import React__default,{useState,useEffect}from'react';import {useMediaQuery,Box,
|
|
|
167
122
|
channelId: channelId,
|
|
168
123
|
setChannelMessages: setChannelMessages,
|
|
169
124
|
channelMessages: channelMessages
|
|
170
|
-
})))), React__default.createElement(
|
|
171
|
-
|
|
172
|
-
height: '7vh',
|
|
173
|
-
background: 'white',
|
|
174
|
-
color: 'black',
|
|
175
|
-
display: 'flex',
|
|
176
|
-
alignContent: 'center',
|
|
177
|
-
alignItems: 'center',
|
|
178
|
-
padding: '30px 0px',
|
|
179
|
-
justifyContent: 'space-evenly',
|
|
180
|
-
boxShadow: '0 0 5px rgba(0, 0, 0, 0.9)',
|
|
181
|
-
outline: '1px solid transparent'
|
|
182
|
-
}
|
|
183
|
-
}, React__default.createElement(Box, {
|
|
184
|
-
style: {
|
|
185
|
-
display: 'flex',
|
|
186
|
-
flexDirection: 'column',
|
|
187
|
-
alignItems: 'center'
|
|
188
|
-
}
|
|
189
|
-
}, React__default.createElement(BiMessageDetail, null), " Conversation"), React__default.createElement(Box, {
|
|
125
|
+
})))), React__default.createElement("div", {
|
|
126
|
+
className: "h-[7vh] bg-white text-black flex content-center items-center py-7 justify-evenly outline outline-1 outline-transparent",
|
|
190
127
|
style: {
|
|
191
|
-
|
|
192
|
-
flexDirection: 'column',
|
|
193
|
-
alignItems: 'center'
|
|
128
|
+
boxShadow: '0 0 5px rgba(0, 0, 0, 0.9)'
|
|
194
129
|
}
|
|
195
|
-
}, React__default.createElement(
|
|
130
|
+
}, React__default.createElement("div", {
|
|
131
|
+
className: "flex flex-col items-center"
|
|
132
|
+
}, React__default.createElement(BiMessageDetail, null), " Conversation"), React__default.createElement("div", {
|
|
133
|
+
className: "flex flex-col items-center"
|
|
134
|
+
}, React__default.createElement(BsCardText, null), " Articles")))));
|
|
196
135
|
};export{CustomerSupportChat};//# sourceMappingURL=CustomerSupportChat.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CustomerSupportChat.js","sources":["../../../src/components/CustomerSupportChat/CustomerSupportChat.tsx"],"sourcesContent":[null],"names":["React"],"mappings":"
|
|
1
|
+
{"version":3,"file":"CustomerSupportChat.js","sources":["../../../src/components/CustomerSupportChat/CustomerSupportChat.tsx"],"sourcesContent":[null],"names":["React"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@messenger-box/chat-ui",
|
|
3
|
-
"version": "10.0.3-alpha.
|
|
3
|
+
"version": "10.0.3-alpha.178",
|
|
4
4
|
"description": "Account browser",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"author": "CDMBase LLC",
|
|
@@ -43,8 +43,8 @@
|
|
|
43
43
|
"@chatscope/chat-ui-kit-react": "^1.10.1",
|
|
44
44
|
"@chatscope/chat-ui-kit-styles": "^1.4.0",
|
|
45
45
|
"@chatscope/use-chat": "^3.1.1",
|
|
46
|
-
"@messenger-box/core": "10.0.3-alpha.
|
|
47
|
-
"@messenger-box/platform-client": "10.0.3-alpha.
|
|
46
|
+
"@messenger-box/core": "10.0.3-alpha.178",
|
|
47
|
+
"@messenger-box/platform-client": "10.0.3-alpha.178",
|
|
48
48
|
"date-fns": "^4.1.0",
|
|
49
49
|
"date-fns-tz": "^3.2.0",
|
|
50
50
|
"emoji-mart": "^3.0.1",
|
|
@@ -55,7 +55,6 @@
|
|
|
55
55
|
"@adminide-stack/core": "*",
|
|
56
56
|
"@adminide-stack/user-auth0-browser": "*",
|
|
57
57
|
"@cdm-logger/client": "*",
|
|
58
|
-
"@chakra-ui/react": "*",
|
|
59
58
|
"@common-stack/client-react": "*",
|
|
60
59
|
"@emotion/react": ">=11",
|
|
61
60
|
"@emotion/styled": ">=11",
|
|
@@ -76,5 +75,5 @@
|
|
|
76
75
|
"typescript": {
|
|
77
76
|
"definition": "lib/index.d.ts"
|
|
78
77
|
},
|
|
79
|
-
"gitHead": "
|
|
78
|
+
"gitHead": "c206ec15496817646fba62a880d26398d8136a04"
|
|
80
79
|
}
|