Skip to content

Commit 4cded05

Browse files
mishramonalisha76mishramonalisha76
authored
feat: support chat v2 added (#1236)
* feat: support chat v2 added * fix: changed supportchatv2 to chatwidget * fix: changed support chat to chatwidget
1 parent f169bfd commit 4cded05

File tree

16 files changed

+345
-57
lines changed

16 files changed

+345
-57
lines changed

‎packages/examples/sdk-frontend-react/src/app/ChatSupportTest.tsx‎

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useContext } from 'react';
22
import { Web3Provider } from '@ethersproject/providers';
3-
import { SupportChat, ITheme } from '@pushprotocol/uiweb';
3+
import { SupportChat, ITheme, ChatWidget } from '@pushprotocol/uiweb';
44
import { lightTheme } from '@pushprotocol/uiweb';
55
import { EnvContext, Web3Context } from './context';
66

@@ -32,13 +32,29 @@ export const ChatSupportTest = () => {
3232

3333
return (
3434
//works as Chat as well as Support Chat
35-
<SupportChat
36-
37-
signer={librarySigner}
38-
supportAddress="4ac5ab85c9c3d57adbdf2dba79357e56b2f9ef0256befe750d9f93af78d2ca68"
39-
env={env}
40-
greetingMsg="How can i help you?"
41-
theme={lightTheme}
35+
<ChatWidget
36+
key= {'460336a9fa83112c95894af5471cd2b1091290a11298d87ec824ed74b7c14974'}
37+
chatId="0x778D3206374f8AC265728E18E3fE2Ae6b93E4ce4"
38+
welcomeComponent={<div style={{display: "flex",flexDirection:'column',border:'1px solid black',overflow:'auto',height:'100%',width:'100%'}}>
39+
<p>Welcome</p>
40+
<p>new chat</p>
41+
<p>Welcome</p>
42+
<p>new chat</p>
43+
<p>Welcome</p>
44+
<p>new chat</p>
45+
<p>Welcome</p>
46+
47+
48+
</div>}
49+
4250
/>
51+
// <SupportChat
52+
53+
// signer={librarySigner}
54+
// supportAddress="4ac5ab85c9c3d57adbdf2dba79357e56b2f9ef0256befe750d9f93af78d2ca68"
55+
// env={env}
56+
// greetingMsg="How can i help you?"
57+
// theme={lightTheme}
58+
// />
4359
);
4460
};

‎packages/examples/sdk-frontend-react/src/app/app.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -345,7 +345,7 @@ export function App() {
345345
<ChatUIProvider
346346
env={env}
347347
theme={darkChatTheme}
348-
signer={signer}
348+
// signer={signer}
349349
>
350350
<SpacesUIProvider spaceUI={spaceUI} theme={customDarkTheme}>
351351
<Routes>

‎packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@ export const ChatProfile: React.FC<IChatProfile> = ({
183183
zIndex="unset"
184184
flexDirection="row"
185185
gap="10px"
186-
margin="0 20px 0 auto"
186+
margin="0 10px 0 auto"
187187
alignSelf="center"
188188
>
189189
{chatProfileRightHelperComponent && !groupInfo && (
@@ -259,7 +259,6 @@ export const ChatProfile: React.FC<IChatProfile> = ({
259259
return null;
260260
}
261261
};
262-
263262
const Container = styled.div`
264263
width: 100%;
265264
background: ${(props) => props.theme.backgroundColor.chatProfileBackground};

‎packages/uiweb/src/lib/components/chat/ChatViewBubble/ChatViewBubble.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -126,13 +126,18 @@ const MessageCard = ({
126126
const time = moment(chat.timestamp).format('hh:mm a');
127127
return (
128128
<MessageWrapper chat={chat} isGroup={isGroup} maxWidth="70%">
129-
<Section
129+
<MessageSection
130130
gap="5px"
131131
background={
132132
position
133133
? `${theme.backgroundColor?.chatSentBubbleBackground}`
134134
: `${theme.backgroundColor?.chatReceivedBubbleBackground}`
135135
}
136+
border = {
137+
position
138+
? `${theme.border?.chatSentBubble}`
139+
: `${theme.border?.chatReceivedBubble}`
140+
}
136141
padding="8px 12px"
137142
borderRadius={position ? '12px 0px 12px 12px' : '0px 12px 12px 12px'}
138143
margin="5px 0"
@@ -196,7 +201,7 @@ const MessageCard = ({
196201
>
197202
{time}
198203
</Span>
199-
</Section>
204+
</MessageSection>
200205
</MessageWrapper>
201206
);
202207
};
@@ -391,3 +396,7 @@ const FileDownloadIcon = styled.i`
391396
const FileDownloadIconAnchor = styled.a`
392397
font-size: 20px;
393398
`;
399+
const MessageSection = styled(Section)<{border:string}>`
400+
border: ${(props) => props.border};
401+
`;
402+

‎packages/uiweb/src/lib/components/chat/ChatViewList/ChatViewList.tsx‎

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { chatLimit } from '../../../config';
1414
import {
1515
appendUniqueMessages,
1616
dateToFromNowDaily,
17+
getAddress,
1718
pCAIP10ToWallet,
1819
walletToPCAIP10,
1920
} from '../../../helpers';
@@ -33,7 +34,10 @@ import { ChatInfoResponse } from '../types';
3334
import useUserProfile from '../../../hooks/useUserProfile';
3435
import useGetGroupByIDnew from '../../../hooks/chat/useGetGroupByIDnew';
3536
import useToast from '../reusables/NewToast';
36-
import { checkIfNewRequest, transformStreamToIMessageIPFSWithCID } from '../helpers';
37+
import {
38+
checkIfNewRequest,
39+
transformStreamToIMessageIPFSWithCID,
40+
} from '../helpers';
3741

3842
/**
3943
* @interface IThemeProps
@@ -82,6 +86,8 @@ export const ChatViewList: React.FC<IChatViewListProps> = (
8286
const [participantJoinStream, setParticipantJoinStream] = useState<any>({}); // to track if a participant joins a group
8387

8488
const [groupUpdateStream, setGroupUpdateStream] = useState<any>({});
89+
const [formattedChatId, setFormattedChatId] = useState<string>('');
90+
8591
// const {
8692
// chatStream,
8793
// groupUpdateStream,
@@ -95,7 +101,9 @@ export const ChatViewList: React.FC<IChatViewListProps> = (
95101
usePushChatStream();
96102
useEffect(() => {
97103
window.addEventListener('chatStream', (e: any) => setChatStream(e.detail));
98-
window.addEventListener('chatRequestStream', (e: any) => setChatRequestStream(e.detail));
104+
window.addEventListener('chatRequestStream', (e: any) =>
105+
setChatRequestStream(e.detail)
106+
);
99107
window.addEventListener('chatAcceptStream', (e: any) =>
100108
setChatAcceptStream(e.detail)
101109
);
@@ -115,7 +123,9 @@ export const ChatViewList: React.FC<IChatViewListProps> = (
115123
window.removeEventListener('chatStream', (e: any) =>
116124
setChatStream(e.detail)
117125
);
118-
window.removeEventListener('chatRequestStream', (e: any) => setChatRequestStream(e.detail));
126+
window.removeEventListener('chatRequestStream', (e: any) =>
127+
setChatRequestStream(e.detail)
128+
);
119129

120130
window.removeEventListener('chatAcceptStream', (e: any) =>
121131
setChatAcceptStream(e.detail)
@@ -151,7 +161,12 @@ export const ChatViewList: React.FC<IChatViewListProps> = (
151161
(async () => {
152162
if (!user) return;
153163
if (chatId) {
154-
const chat = await fetchChat({ chatId: chatId });
164+
let formattedChatId;
165+
if (chatId.includes('.')) {
166+
formattedChatId = (await getAddress(chatId, env))!;
167+
} else formattedChatId = chatId;
168+
setFormattedChatId(formattedChatId);
169+
const chat = await fetchChat({ chatId: formattedChatId });
155170
if (Object.keys(chat || {}).length) {
156171
setChatInfo(chat as ChatInfoResponse);
157172
}
@@ -173,15 +188,15 @@ export const ChatViewList: React.FC<IChatViewListProps> = (
173188
profileId: pCAIP10ToWallet(
174189
chatInfo?.participants.find(
175190
(address) => address != walletToPCAIP10(account)
176-
) || chatId
191+
) || formattedChatId
177192
),
178193
env,
179194
user,
180195
});
181196
if (UserProfile) setUserInfo(UserProfile);
182197
setChatStatusText(ChatStatus.FIRST_CHAT);
183198
} else if (chatInfo && chatInfo?.meta?.group) {
184-
GroupProfile = await getGroupByIDnew({ groupId: chatId });
199+
GroupProfile = await getGroupByIDnew({ groupId: formattedChatId });
185200
if (GroupProfile) setGroupInfo(GroupProfile);
186201
else {
187202
setChatStatusText(ChatStatus.INVALID_CHAT);
@@ -230,12 +245,15 @@ export const ChatViewList: React.FC<IChatViewListProps> = (
230245
)
231246
transformGroupDetails(groupUpdateStream);
232247
}, [groupUpdateStream]);
233-
248+
234249
const transformSteamMessage = (item: any) => {
235250
if (!user) {
236251
return;
237252
}
238-
if (chatInfo && ((item?.chatId == chatInfo?.chatId) || checkIfNewRequest(item,chatId))) {
253+
if (
254+
chatInfo &&
255+
(item?.chatId == chatInfo?.chatId || checkIfNewRequest(item, formattedChatId))
256+
) {
239257
const transformedMessage = transformStreamToIMessageIPFSWithCID(item);
240258
if (messages && messages.length) {
241259
const newChatViewList = appendUniqueMessages(
@@ -344,7 +362,7 @@ export const ChatViewList: React.FC<IChatViewListProps> = (
344362
if (user) {
345363
const chatHistory = await historyMessages({
346364
limit: limit,
347-
chatId,
365+
chatId:formattedChatId,
348366
reference,
349367
});
350368
if (chatHistory?.length) {
@@ -476,7 +494,7 @@ export const ChatViewList: React.FC<IChatViewListProps> = (
476494
})}
477495
</Section>
478496
{chatInfo && chatInfo?.list === 'REQUESTS' && (
479-
<ApproveRequestBubble groupInfo={groupInfo} chatId={chatId} />
497+
<ApproveRequestBubble groupInfo={groupInfo} chatId={formattedChatId} />
480498
)}
481499
</>
482500
}

‎packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx‎

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import { ConnectButtonComp } from '../ConnectButton';
2222
import useToast from '../reusables/NewToast';
2323
import { ConditionsInformation } from '../ChatProfile/GroupInfoModal';
2424
import {
25+
getAddress,
2526
pCAIP10ToWallet,
2627
setAccessControl,
2728
walletToPCAIP10,
@@ -106,6 +107,8 @@ export const MessageInput: React.FC<MessageInputProps> = ({
106107
const [fileUploading, setFileUploading] = useState<boolean>(false);
107108
const [isRules, setIsRules] = useState<boolean>(false);
108109
const [isMember, setIsMember] = useState<boolean>(false);
110+
const [formattedChatId, setFormattedChatId] = useState<string>('');
111+
109112
//hack for stream not working
110113
const [chatAcceptStream, setChatAcceptStream] = useState<any>({}); // to track any new messages
111114
const [participantRemoveStream, setParticipantRemoveStream] = useState<any>(
@@ -215,7 +218,7 @@ export const MessageInput: React.FC<MessageInputProps> = ({
215218
setVerified(true);
216219
} else {
217220
setVerified(false);
218-
setAccessControl(chatId, true);
221+
setAccessControl(formattedChatId, true);
219222
}
220223
}
221224
}
@@ -225,7 +228,12 @@ export const MessageInput: React.FC<MessageInputProps> = ({
225228
(async () => {
226229
if (!user) return;
227230
if (chatId) {
228-
const chat = await fetchChat({ chatId: chatId });
231+
let formattedChatId;
232+
if (chatId.includes('.')) {
233+
formattedChatId = (await getAddress(chatId, env))!;
234+
} else formattedChatId = chatId;
235+
setFormattedChatId(formattedChatId);
236+
const chat = await fetchChat({ chatId: formattedChatId });
229237
if (Object.keys(chat || {}).length) {
230238
setChatInfo(chat as ChatInfoResponse);
231239
}
@@ -237,7 +245,7 @@ export const MessageInput: React.FC<MessageInputProps> = ({
237245
(async () => {
238246
let GroupProfile;
239247
if (chatInfo && chatInfo?.meta?.group) {
240-
GroupProfile = await getGroupByIDnew({ groupId: chatId });
248+
GroupProfile = await getGroupByIDnew({ groupId: formattedChatId });
241249
if (GroupProfile) setGroupInfo(GroupProfile);
242250
}
243251
})();
@@ -311,13 +319,13 @@ export const MessageInput: React.FC<MessageInputProps> = ({
311319
};
312320

313321
const checkVerification = () => {
314-
verifyAccessControl({ chatId, did: account! });
322+
verifyAccessControl({ chatId:formattedChatId, did: account! });
315323
};
316324

317325
const handleJoinGroup = async () => {
318326
if (chatInfo && groupInfo && groupInfo?.isPublic) {
319327
const response = await joinGroup({
320-
chatId,
328+
chatId:formattedChatId,
321329
});
322330
if (typeof response !== 'string') {
323331
showSuccess('Success', 'Successfully joined group');
@@ -416,15 +424,15 @@ export const MessageInput: React.FC<MessageInputProps> = ({
416424
try {
417425
const sendMessageResponse = await sendMessage({
418426
message: content,
419-
chatId,
427+
chatId:formattedChatId,
420428
messageType: type as any,
421429
});
422430
if (
423431
sendMessageResponse &&
424432
typeof sendMessageResponse === 'string' &&
425433
sendMessageResponse.includes('403')
426434
) {
427-
setAccessControl(chatId, true);
435+
setAccessControl(formattedChatId, true);
428436
setVerified(false);
429437
setVerificationSuccessfull(false);
430438
}
@@ -479,7 +487,7 @@ export const MessageInput: React.FC<MessageInputProps> = ({
479487
alignItems="center"
480488
>
481489
<Span
482-
padding="8px 8px 8px 16px"
490+
padding="8px 8px 8px 0px"
483491
color={theme.textColor?.chatReceivedBubbleText}
484492
fontSize="15px"
485493
fontWeight="500"
@@ -620,7 +628,7 @@ export const MessageInput: React.FC<MessageInputProps> = ({
620628
<SendSection position="static">
621629
{gif && (
622630
<Section
623-
width="34px"
631+
width="30px"
624632
height="24px"
625633
cursor="pointer"
626634
alignSelf="end"
@@ -649,7 +657,7 @@ export const MessageInput: React.FC<MessageInputProps> = ({
649657
{!fileUploading && file && (
650658
<>
651659
<Section
652-
width="17"
660+
width="18px"
653661
height="24px"
654662
cursor="pointer"
655663
alignSelf="end"
@@ -668,7 +676,8 @@ export const MessageInput: React.FC<MessageInputProps> = ({
668676
<Section
669677
cursor="pointer"
670678
alignSelf="end"
671-
height="24px"
679+
height="20px"
680+
width='22px'
672681
onClick={() => sendTextMsg()}
673682
>
674683
<SendCompIcon color={theme.iconColor?.sendButton} />
@@ -691,7 +700,7 @@ export const MessageInput: React.FC<MessageInputProps> = ({
691700
};
692701

693702
const TypebarSection = styled(Section)<{ border?: string }>`
694-
gap: 10px;
703+
// gap: 10px;
695704
border: ${(props) => props.border || 'none'};
696705
@media ${device.mobileL} {
697706
gap: 0px;
@@ -707,7 +716,7 @@ const MultiLineInput = styled.textarea<IThemeProps>`
707716
font-family: inherit;
708717
font-weight: 400;
709718
transform: translateY(3px);
710-
font-size: 16px;
719+
font-size: 15px;
711720
outline: none;
712721
overflow-y: auto;
713722
box-sizing: border-box;

0 commit comments

Comments
 (0)