Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

added profile picture in the message bubble for group chat #617

Merged
merged 4 commits into from
Aug 8, 2023
Merged

added profile picture in the message bubble for group chat #617

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
eb71bbc
feat: adding pfp in text bubbles
KlausMikhaelson Aug 8, 2023
59d034c
fix: replaced hook with function and added pfp to messagebubble
KlausMikhaelson Aug 8, 2023
e85ba71
fix: fixed image alignment
KlausMikhaelson Aug 8, 2023
bba5642
fix: changed border-radius of msg bubble and changed function name
KlausMikhaelson Aug 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/examples/sdk-frontend-react/src/app/ChatUITest/MessageBubbles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ export const MessageBubbles = () => {
env: ENV.STAGING
})
setMessage(chatHistory)
console.log(chatHistory)
}

useEffect(() => {
Expand Down
279 changes: 163 additions & 116 deletions packages/uiweb/src/lib/components/chat/MessageBubble/MessageBubble.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,48 @@ 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";

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 @@ -34,57 +57,61 @@ const MessageCard = ({
}) => {
const time = moment(chat.timestamp).format('hh:mm a');
return (
<Section justifyContent="start" flexDirection="column"
>
<Section flexDirection="row" justifyContent="start" gap="6px">
{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='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='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 @@ -98,43 +125,48 @@ const FileCard = ({
const size = fileContent.size;

return (
<Section justifyContent="start" flexDirection="column">
<Section flexDirection="row" justifyContent="start" gap="6px">
{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 @@ -151,22 +183,27 @@ const ImageCard = ({
}) => {

return (
<Section justifyContent="start" flexDirection="column">
{isGroup && (
<MessageAddress chat={chat} />
)}
<Section
alignSelf={'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={'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 @@ -182,40 +219,50 @@ const GIFCard = ({
isGroup: boolean;
}) => {
return (
<Section justifyContent="start" flexDirection="column">
<Section flexDirection="row" justifyContent="start" gap="6px">
{isGroup &&
<MessageAddress chat={chat} />
<SenderMessafeProfilePicture chat={chat} />
}
<Section
alignSelf='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='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 }: { chat: IMessagePayload, tweetId: string, isGroup: boolean }) => {
return (
<Section justifyContent="start" flexDirection="column">
<Section flexDirection="row" justifyContent="start" gap="6px">
{isGroup &&
<MessageAddress chat={chat} />
<SenderMessafeProfilePicture chat={chat} />
}
<Section
alignSelf={'start'}
maxWidth="100%"
width="fit-content"
margin="5px 0"
>
<TwitterTweetEmbed tweetId={tweetId} />
<Section justifyContent="start" flexDirection="column">
{isGroup &&
<SenderMessageAddress chat={chat} />
}
<Section
alignSelf={'start'}
maxWidth="100%"
width="fit-content"
margin="5px 0"
>
<TwitterTweetEmbed tweetId={tweetId} />
</Section>
</Section>
</Section>
)
Expand Down
Loading