Skip to content

Commit

Permalink
fix: fixed merge conflicts
Browse files Browse the repository at this point in the history
  • Loading branch information
@mishramonalisha76
mishramonalisha76 committed Aug 8, 2023
2 parents 696fef3 + 90c4421 commit b923342
Show file tree
Hide file tree
Showing 3 changed files with 212 additions and 127 deletions.
1 change: 1 addition & 0 deletions packages/examples/sdk-frontend-react/src/app/ChatUITest/MessageBubbles.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export const MessageBubbles = () => {
env: env
})
setMessage(chatHistory)
console.log(chatHistory)
}
}

Expand Down
280 changes: 163 additions & 117 deletions packages/uiweb/src/lib/components/chat/MessageBubble/MessageBubble.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,49 @@ import moment from "moment";
import styled from "styled-components";
import { FileMessageContent } from "../../../types";
import { FILE_ICON } from "../../../config";
import { formatFileSize, pCAIP10ToWallet, shortenText } from "../../../helpers";
import { formatFileSize, getPfp, pCAIP10ToWallet, setPfp, shortenText } from "../../../helpers";
import { checkTwitterUrl } from "../helpers/twitter";
import { IMessagePayload, TwitterFeedReturnType } from "../exportedTypes";
import { TwitterTweetEmbed } from "react-twitter-embed";
import { ChatDataContext } from "../../../context";
import { useChatData } from "../../../hooks";

const MessageAddress = ({ chat }: { chat: IMessagePayload }) => {
const SenderMessageAddress = ({ chat }: { chat: IMessagePayload }) => {
const { account } = useContext(ChatDataContext)
return (
<>
{chat.fromCAIP10.split(":")[1] !== account && (
<Span alignSelf="start"
textAlign="left">{chat.fromDID.split(":")[1].slice(0, 6)}...
textAlign="start">{chat.fromDID.split(":")[1].slice(0, 6)}...
{chat.fromDID.split(":")[1].slice(-6)}</Span>
)}
</>
)
}

const SenderMessafeProfilePicture = ({ chat }: { chat: IMessagePayload }) => {
const { account, env } = useContext(ChatDataContext)
const [pfp, setPfp] = useState<string>("")
const getUserPfp = async () => {
const pfp = await getPfp({ account: chat.fromCAIP10.split(":")[1], env: env })
if (pfp) {
setPfp(pfp)
}
}
useEffect(() => {
getUserPfp()
}, [account, chat.fromCAIP10])
return (
<Section justifyContent="start" alignItems="start">
{chat.fromCAIP10.split(":")[1] !== account && (
<Section alignItems="start">
{pfp && <Image src={pfp} alt="profile picture" width="40px" height="40px" borderRadius="50%" />}
</Section>
)}
</Section>
)
}

const MessageCard = ({
chat,
position,
Expand All @@ -35,58 +58,61 @@ const MessageCard = ({
}) => {
const time = moment(chat.timestamp).format('hh:mm a');
return (
<Section justifyContent="start" flexDirection="column"
width="fit-content"
>
<Section flexDirection="row" justifyContent="start" gap="6px" width="fit-content">
{isGroup &&
<MessageAddress chat={chat} />
<SenderMessafeProfilePicture chat={chat} />
}
<Section
gap="5px"
background={position ? '#0D67FE' : '#EDEDEE'}
padding="8px 12px"
borderRadius={position ? '12px 12px 0px 12px' : '12px 12px 12px 0px'}
margin="5px 0"
alignSelf={position ? 'end' : 'start'}
justifyContent="start"
maxWidth="80%"
minWidth="71px"
position="relative"
width="fit-content"
<Section justifyContent="start" flexDirection="column"
>
{' '}
<Section flexDirection="column" padding="5px 0 15px 0">
{chat.messageContent.split('\n').map((str) => (
<Span
key={Math.random().toString()}
alignSelf="start"
textAlign="left"
fontSize="16px"
fontWeight="400"
color={position ? '#fff' : '#000'}
>
{str}
</Span>
))}
</Section>
<Span
position="absolute"
fontSize="12px"
fontWeight="400"
color={position ? '#A9C8FF' : '#62626A'}
bottom="6px"
right="10px"
{isGroup &&
<SenderMessageAddress chat={chat} />
}
<Section
gap="5px"
background={position ? '#0D67FE' : '#EDEDEE'}
padding="8px 12px"
borderRadius={position ? '12px 0px 12px 12px' : '0px 12px 12px 12px'}
margin="5px 0"
alignSelf={position ? 'end' : 'start'}
justifyContent="start"
maxWidth="80%"
minWidth="71px"
position="relative"
width="fit-content"
>
{time}
</Span>
{' '}
<Section flexDirection="column" padding="5px 0 15px 0">
{chat.messageContent.split('\n').map((str) => (
<Span
key={Math.random().toString()}
alignSelf="start"
textAlign="left"
fontSize="16px"
fontWeight="400"
color={position ? '#fff' : '#000'}
>
{str}
</Span>
))}
</Section>
<Span
position="absolute"
fontSize="12px"
fontWeight="400"
color={position ? '#A9C8FF' : '#62626A'}
bottom="6px"
right="10px"
>
{time}
</Span>
</Section>
</Section>
</Section>
);
};

const FileCard = ({
chat,
position,
isGroup,
}: {
chat: IMessagePayload;
Expand All @@ -100,43 +126,48 @@ const FileCard = ({
const size = fileContent.size;

return (
<Section justifyContent="start" flexDirection="column" width="fit-content">
<Section flexDirection="row" justifyContent="start" gap="6px" width="fit-content">
{isGroup &&
<MessageAddress chat={chat} />
<SenderMessafeProfilePicture chat={chat} />
}
<Section
alignSelf={position ? 'end' : 'start'}
maxWidth="100%"
margin="5px 0"
background="#343536"
borderRadius="8px"
justifyContent="space-around"
padding="10px 13px"
gap="15px"
width="fit-content"
>
<Image
src={FILE_ICON(name.split('.').slice(-1)[0])}
alt="extension icon"
width="20px"
height="20px"
/>
<Section flexDirection="column" gap="5px">
<Span color="#fff" fontSize="15px">
{shortenText(name, 11)}
</Span>
<Span color="#fff" fontSize="12px">
{formatFileSize(size)}
</Span>
</Section>
<FileDownloadIconAnchor
href={content}
target="_blank"
rel="noopener noreferrer"
download
<Section flexDirection="column">
{isGroup &&
<SenderMessageAddress chat={chat} />
}
<Section
alignSelf="start"
maxWidth="100%"
margin="5px 0"
background="#343536"
borderRadius="8px"
justifyContent="space-around"
padding="10px 13px"
gap="15px"
width="fit-content"
>
<FileDownloadIcon className="fa fa-download" aria-hidden="true" />
</FileDownloadIconAnchor>
<Image
src={FILE_ICON(name.split('.').slice(-1)[0])}
alt="extension icon"
width="20px"
height="20px"
/>
<Section flexDirection="column" gap="5px">
<Span color="#fff" fontSize="15px">
{shortenText(name, 11)}
</Span>
<Span color="#fff" fontSize="12px">
{formatFileSize(size)}
</Span>
</Section>
<FileDownloadIconAnchor
href={content}
target="_blank"
rel="noopener noreferrer"
download
>
<FileDownloadIcon className="fa fa-download" aria-hidden="true" />
</FileDownloadIconAnchor>
</Section>
</Section>
</Section>
);
Expand All @@ -153,22 +184,27 @@ const ImageCard = ({
}) => {

return (
<Section justifyContent="start" flexDirection="column" width="fit-content">
{isGroup && (
<MessageAddress chat={chat} />
)}
<Section
alignSelf={position ? 'end' : 'start'}
maxWidth="65%"
width="fit-content"
margin="5px 0"
>
<Image
src={JSON.parse(chat.messageContent).content}
alt=""
width="100%"
borderRadius={position ? '12px 12px 0px 12px' : '12px 12px 12px 0px'}
/>
<Section flexDirection="row" justifyContent="start" gap="6px">
{isGroup &&
<SenderMessafeProfilePicture chat={chat} />
}
<Section justifyContent="start" flexDirection="column">
{isGroup && (
<SenderMessageAddress chat={chat} />
)}
<Section
alignSelf={position ? 'end' : 'start'}
maxWidth="65%"
width="fit-content"
margin="5px 0"
>
<Image
src={JSON.parse(chat.messageContent).content}
alt=""
width="100%"
borderRadius={position ? '12px 0px 12px 12px' : '0px 12px 12px 12px'}
/>
</Section>
</Section>
</Section>
);
Expand All @@ -184,40 +220,50 @@ const GIFCard = ({
isGroup: boolean;
}) => {
return (
<Section justifyContent="start" flexDirection="column" width="fit-content">
<Section flexDirection="row" justifyContent="start" gap="6px" width="fit-content">
{isGroup &&
<MessageAddress chat={chat} />
<SenderMessafeProfilePicture chat={chat} />
}
<Section
alignSelf={position ? 'end' : 'start'}
maxWidth="65%"
margin="5px 0"
width="fit-content"
>
<Image
src={chat.messageContent}
alt=""
width="100%"
borderRadius={position ? '12px 12px 0px 12px' : '12px 12px 12px 0px'}
/>
<Section justifyContent="start" flexDirection="column">
{isGroup &&
<SenderMessageAddress chat={chat} />
}
<Section
alignSelf={position ? 'end' : 'start'}
maxWidth="65%"
margin="5px 0"
width="fit-content"
>
<Image
src={chat.messageContent}
alt=""
width="100%"
borderRadius={position ? '12px 0px 12px 12px' : '0px 12px 12px 12px'}
/>
</Section>
</Section>
</Section>
);
};

const TwitterCard = ({ chat, tweetId, isGroup, position }: { chat: IMessagePayload, tweetId: string, isGroup: boolean , position: number}) => {
return (
<Section justifyContent="start" flexDirection="column" width="fit-content">
<Section flexDirection="row" justifyContent="start" gap="6px" width="fit-content">
{isGroup &&
<MessageAddress chat={chat} />
<SenderMessafeProfilePicture chat={chat} />
}
<Section
alignSelf={position ? 'end' : 'start'}
maxWidth="100%"
width="fit-content"
margin="5px 0"
>
<TwitterTweetEmbed tweetId={tweetId} />
<Section justifyContent="start" flexDirection="column">
{isGroup &&
<SenderMessageAddress chat={chat} />
}
<Section
alignSelf={position ? 'end' : 'start'}
maxWidth="100%"
width="fit-content"
margin="5px 0"
>
<TwitterTweetEmbed tweetId={tweetId} />
</Section>
</Section>
</Section>
)
Expand Down
Loading

0 comments on commit b923342

Please sign in to comment.