From 6682424168784bbc7f1b8202f9ed194d34ce1c89 Mon Sep 17 00:00:00 2001 From: Pritipriya Singh Date: Fri, 1 Dec 2023 20:48:45 +0530 Subject: [PATCH 1/3] ui web input & chat box added --- .../chat/w2wChat/chatBox/ChatBox.tsx | 108 ++++++------------ 1 file changed, 33 insertions(+), 75 deletions(-) diff --git a/src/components/chat/w2wChat/chatBox/ChatBox.tsx b/src/components/chat/w2wChat/chatBox/ChatBox.tsx index 88c1fe4594..e9b64a1b98 100644 --- a/src/components/chat/w2wChat/chatBox/ChatBox.tsx +++ b/src/components/chat/w2wChat/chatBox/ChatBox.tsx @@ -15,7 +15,7 @@ import ScrollToBottom from 'react-scroll-to-bottom'; import { useClickAway } from 'react-use'; import styled, { useTheme } from 'styled-components'; import { produce } from 'immer'; - +import { ChatViewList, MessageInput } from '@pushprotocol/uiweb'; // Internal Components import { ReactComponent as Info } from 'assets/chat/group-chat/info.svg'; import { ReactComponent as InfoDark } from 'assets/chat/group-chat/infodark.svg'; @@ -99,7 +99,7 @@ const ChatBox = ({ showGroupInfoModal }): JSX.Element => { const groupInfoRef = useRef(null); const { connectedUser, setConnectedUser, createUserIfNecessary } = useContext(ChatUserContext); const { videoObject } = useContext(VideoCallContext); - + const [chatId, setChatId] = useState(""); const listInnerRef = useRef(null); const topRef = useRef(null); const bottomRef = useRef(null); @@ -127,6 +127,11 @@ const ChatBox = ({ showGroupInfoModal }): JSX.Element => { const navigate = useNavigate(); const location = useLocation(); + useEffect(() => { + let chatid= currentChat?.did || currentChat?.groupInformation?.chatId + setChatId(chatid); + },[currentChat, account]) + useEffect(() => { // if ens is resolved, update browse to match ens name is it doesn't match if (ensName && location.pathname !== `/chat/${ensName}`) { @@ -443,6 +448,7 @@ const ChatBox = ({ showGroupInfoModal }): JSX.Element => { } }; + console.log("current id", chatId) const handleCloseSuccessSnackbar = (event?: React.SyntheticEvent | Event, reason?: string): void => { if (reason === 'clickaway') { return; @@ -645,87 +651,33 @@ const ChatBox = ({ showGroupInfoModal }): JSX.Element => { > {/* style={{overflow: "scroll",backgroundColor:'red'}} */} {/* */} - {Loading ? ( - - - - ) : ( + <> - {chatsLoading && ( - - - - )} +
- {messages?.map((msg, i) => { - //const isLast = i === messages.length - 1 - //const noTail = !isLast && messages[i + 1]?.fromDID === msg.fromDID - - showTime = false; - if (i >= 0) { - const duration = new Date(messages[i]?.timestamp); - const dateString = duration.toDateString(); - if (dateString !== time || i === 0) { - showTime = true; - time = dateString; - } - } - return ( -
- {!showTime ? null : ( - - )} - - -
- ); - })} + + + + +
- + {checkIfChatExist({ chats:receivedIntents, currentChat, connectedUser, isGroup }) && ( - ApproveIntent('Approved')} - isGroup={isGroup} - /> + + )} - )} + {/* */}
- - + + {checkIfChatExist({ chats:receivedIntents, currentChat, connectedUser,isGroup }) ? null : ( <> - + + + {/* { setSnackbarText={setSnackbarText} isJoinGroup = {(!checkIfChatExist({ chats:inbox, currentChat, connectedUser,isGroup }) && isGroup)} approveIntent= {ApproveIntent} - /> + /> */} + )} @@ -750,7 +703,12 @@ const SpinnerWrapper = styled.div` margin-top: 20px; height: ${(props) => props.height || '90px'}; `; - +const MessageInputWrapper = styled.div` + margin-top: auto; + margin-botton: 0; + width: 100%; + z-index: 99; +` const MessageContainer = styled(ItemVV2)` align-items: unset; display: block; From 8c10f85408666b6795cd6a5c5036519813fd2121 Mon Sep 17 00:00:00 2001 From: Pritipriya Singh Date: Fri, 1 Dec 2023 22:11:01 +0530 Subject: [PATCH 2/3] components added --- package.json | 4 ++-- yarn.lock | 20 ++++++++++---------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index 2cef235029..d8ceb09a3d 100644 --- a/package.json +++ b/package.json @@ -34,9 +34,9 @@ "@mui/lab": "^5.0.0-alpha.72", "@mui/material": "^5.5.0", "@pushprotocol/ledgerlive": "latest", - "@pushprotocol/restapi": "1.4.38", + "@pushprotocol/restapi": "1.4.44", "@pushprotocol/socket": "0.5.3", - "@pushprotocol/uiweb": "1.1.19", + "@pushprotocol/uiweb": "1.1.20", "@reduxjs/toolkit": "^1.7.1", "@testing-library/dom": "^9.0.1", "@testing-library/jest-dom": "^4.2.4", diff --git a/yarn.lock b/yarn.lock index 93bcf61d73..d34e41bbae 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5442,9 +5442,9 @@ __metadata: "@mui/lab": ^5.0.0-alpha.72 "@mui/material": ^5.5.0 "@pushprotocol/ledgerlive": latest - "@pushprotocol/restapi": 1.4.38 + "@pushprotocol/restapi": 1.4.44 "@pushprotocol/socket": 0.5.3 - "@pushprotocol/uiweb": 1.1.19 + "@pushprotocol/uiweb": 1.1.20 "@reduxjs/toolkit": ^1.7.1 "@testing-library/dom": ^6.12.2 "@testing-library/jest-dom": ^4.2.4 @@ -5643,9 +5643,9 @@ __metadata: languageName: node linkType: hard -"@pushprotocol/restapi@npm:1.4.38": - version: 1.4.38 - resolution: "@pushprotocol/restapi@npm:1.4.38" +"@pushprotocol/restapi@npm:1.4.44": + version: 1.4.44 + resolution: "@pushprotocol/restapi@npm:1.4.44" dependencies: "@ambire/signature-validator": ^1.3.1 "@metamask/eth-sig-util": ^5.0.2 @@ -5666,7 +5666,7 @@ __metadata: viem: ^1.3.0 peerDependencies: ethers: ^5.6.8 - checksum: 25a2159b4bc27a71b3cd9021e2fdeef9b4a61c9302e1357b3ff45e3f3e6615390bd22aa942a2a0cefc6835925a728c1bb7f3eaafd012cf664041b83766cd5ee5 + checksum: fd20dd507d4b0c0022b3f39a310e8b52f2493040d54b44c5988df152ca4966a5624313990a73766aae19020fe01e104427230af24e8f4bfe7fb961cd10367e6d languageName: node linkType: hard @@ -5706,9 +5706,9 @@ __metadata: languageName: node linkType: hard -"@pushprotocol/uiweb@npm:1.1.19": - version: 1.1.19 - resolution: "@pushprotocol/uiweb@npm:1.1.19" +"@pushprotocol/uiweb@npm:1.1.20": + version: 1.1.20 + resolution: "@pushprotocol/uiweb@npm:1.1.20" dependencies: "@livekit/components-react": ^1.2.2 "@livekit/components-styles": ^1.0.6 @@ -5740,7 +5740,7 @@ __metadata: axios: ^0.27.2 react: ">=16.8.0" styled-components: ^6.0.8 - checksum: 1180e8a37039825f5bfd518b1e7675b3bc2a95b7a511cddb22d0390cf742cfb7589dc28b59fc82bfc8f43ed1da9324374653275d0a5f88452b8b2fa83dd607df + checksum: 4df4b3661b5ec5ef92e319dbd9620c47793d729ee2161e4afbebc704d68f45b07bdf0a6fbc8e935e3def0e009a297168e79fc9bf2073284289f8cd7c9362f70c languageName: node linkType: hard From 09eddb0ee980d2ce691206d217f76257680282dc Mon Sep 17 00:00:00 2001 From: Pritipriya Singh Date: Sat, 2 Dec 2023 00:03:39 +0530 Subject: [PATCH 3/3] ui changes --- .../chat/w2wChat/chatBox/ChatBox.tsx | 37 +++++++++++++++---- src/contexts/ChatUserContext.tsx | 2 + 2 files changed, 32 insertions(+), 7 deletions(-) diff --git a/src/components/chat/w2wChat/chatBox/ChatBox.tsx b/src/components/chat/w2wChat/chatBox/ChatBox.tsx index e9b64a1b98..71c885d61b 100644 --- a/src/components/chat/w2wChat/chatBox/ChatBox.tsx +++ b/src/components/chat/w2wChat/chatBox/ChatBox.tsx @@ -656,20 +656,22 @@ const ChatBox = ({ showGroupInfoModal }): JSX.Element => {
- + - +
{checkIfChatExist({ chats:receivedIntents, currentChat, connectedUser, isGroup }) && ( + + + - )} {/* */} -
+ {checkIfChatExist({ chats:receivedIntents, currentChat, connectedUser,isGroup }) ? null : ( @@ -704,10 +706,31 @@ const SpinnerWrapper = styled.div` height: ${(props) => props.height || '90px'}; `; const MessageInputWrapper = styled.div` - margin-top: auto; - margin-botton: 0; - width: 100%; + + width: 98%; + display: flex; + justify-content: center; + position: absolute; + bottom: 8px; + z-index: 99; + + +` +const ChatContainer = styled.div` + overflow-x : hidden; + align-items: unset; + display: block; + justify-content: flex-start; + position: absolute; + top: 20px; + bottom: 0px; + left: 0; + right: 0; + margin: 0; + width: 100%; + + ` const MessageContainer = styled(ItemVV2)` align-items: unset; diff --git a/src/contexts/ChatUserContext.tsx b/src/contexts/ChatUserContext.tsx index 39b688bdfc..d2210c3ccd 100644 --- a/src/contexts/ChatUserContext.tsx +++ b/src/contexts/ChatUserContext.tsx @@ -15,6 +15,8 @@ const ChatUserContextProvider = (props) => { const [connectedUser, setConnectedUser] = useState(); const { account, provider } = useAccount(); + + //this blocked loading is a modal which shows during the PGP keys generation time const [blockedLoading, setBlockedLoading] = useState({ enabled: false,