From 5cb17a5d0bbf8ed0e50c843b48a08448b556bace Mon Sep 17 00:00:00 2001
From: Satyam <100528412+KlausMikhaelson@users.noreply.github.com>
Date: Fri, 5 Jan 2024 05:43:53 -0600
Subject: [PATCH] added chatprofile with video support in dapp (#1359)

---
 package.json                                  |  2 +-
 .../chat/w2wChat/chatBox/ChatBox.tsx          | 81 +++++--------------
 2 files changed, 20 insertions(+), 63 deletions(-)

diff --git a/package.json b/package.json
index ad308fc6ce..7a8323b19e 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,7 @@
     "@mui/material": "^5.5.0",
     "@pushprotocol/restapi": "1.4.45",
     "@pushprotocol/socket": "0.5.3",
-    "@pushprotocol/uiweb": "1.1.23",
+    "@pushprotocol/uiweb": "1.2.0",
     "@reduxjs/toolkit": "^1.7.1",
     "@testing-library/dom": "^9.0.1",
     "@testing-library/jest-dom": "^4.2.4",
diff --git a/src/components/chat/w2wChat/chatBox/ChatBox.tsx b/src/components/chat/w2wChat/chatBox/ChatBox.tsx
index a1dd9210cf..e641002035 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';
+import { ChatProfile, 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';
@@ -248,48 +248,9 @@ const ChatBox = ({ showGroupInfoModal }): JSX.Element => {
             background={theme.default.bg}
             padding="6px"
             fontWeight="500"
-            zIndex="1"
           >
-            <ItemHV2
-              height="48px"
-              flex="initial"
-            >
-              <TabletBackButton
-                margin="0px 5px 0px 0px"
-                color={theme.default.secondaryColor}
-                background="transparent"
-                hover="transparent"
-                hoverBackground="transparent"
-                onClick={() => {
-                  setChat(null);
-                }}
-              >
-                <MdOutlineArrowBackIos size={24} />
-              </TabletBackButton>
-
-              <ImageV2
-                height="48px"
-                width="48px"
-                alt="Profile Picture"
-                src={imageSource}
-                borderRadius="100%"
-                overflow="hidden"
-                objectFit="cover"
-              />
-            </ItemHV2>
-
-            <SpanV2
-              flex="1"
-              margin="5px 10px"
-              fontWeight="400"
-              textAlign="start"
-            >
-              {getDisplayName()}
-            </SpanV2>
-
-            {/* Video call button */}
-            {!isGroup && (
-              <Tooltip
+            {(!!currentChat || !!Object.keys(currentChat || {}).length) && (
+              <ChatProfile component={<Tooltip
                 tooltipContent="Video call"
                 placementProps={{
                   bottom: '1.4rem',
@@ -306,25 +267,7 @@ const ChatBox = ({ showGroupInfoModal }): JSX.Element => {
                     src={videoCallIcon}
                   />
                 </VideoCallButton>
-              </Tooltip>
-            )}
-
-            {currentChat.groupInformation && (
-              <MoreOptions onClick={() => setShowGroupInfo(!showGroupInfo)}>
-                <ItemHV2 padding="0px 11px 0px 0px">{theme.scheme == 'light' ? <More /> : <MoreDark />}</ItemHV2>
-                {showGroupInfo && (
-                  <GroupInfo
-                    onClick={() => {
-                      showGroupInfoModal();
-                      setShowGroupInfo(false);
-                    }}
-                    ref={groupInfoRef}
-                  >
-                    <ItemVV2 maxWidth="32px">{theme.scheme == 'light' ? <Info /> : <InfoDark />}</ItemVV2>
-                    <SpanV2 color={theme.default.secondaryColor}>Group Info</SpanV2>
-                  </GroupInfo>
-                )}
-              </MoreOptions>
+              </Tooltip>} style="Info" chatId={(currentChat?.did?.includes(":") ? currentChat?.did.split(":")[1] : currentChat?.did) || currentChat?.groupInformation?.chatId} />
             )}
           </ItemHV2>
 
@@ -392,6 +335,21 @@ const MessageContainer = styled(ItemVV2)`
   // margin: 0;
   width: 95%;
   height: 80%;
+  @media (max-height: 750px) {
+    height: 75%;
+  }
+  @media (max-height: 650px) {
+    height: 70%;
+  }
+  @media (max-height: 550px) {
+    height: 63%;
+  }
+  @media (max-height: 450px) {
+    height: 55%;
+  }
+  @media (max-height: 400px) {
+    height: 45%;
+  }
   // max-height: 20%;
   overflow-x: hidden;
   // overflow-y: scroll;
@@ -626,7 +584,6 @@ const VideoCallButton = styled(ButtonV2)`
   max-width: 1.75rem;
   min-width: 1.75rem;
   background: none;
-  margin-right: 2rem;
 `;
 
 export default ChatBox;