Skip to content

Commit

Permalink
feat: finalizing new convo
Browse files Browse the repository at this point in the history
  • Loading branch information
@anthony23991
anthony23991 committed Dec 3, 2024
1 parent aec600f commit 6e49774
Show file tree
Hide file tree
Showing 18 changed files with 615 additions and 187 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
"@hookform/error-message": "^2.0.1",
"@hookform/resolvers": "^3.9.0",
"@inquirer/prompts": "^4.3.0",
"@justaname.id/address-resolution": "^1.1.0",
"@privy-io/react-auth": "^1.82.0",
"@privy-io/wagmi": "^0.2.12",
"@radix-ui/react-accordion": "^1.2.1",
Expand Down
126 changes: 76 additions & 50 deletions packages/@justweb3/xmtp-plugin/src/lib/components/Chat/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,23 +21,23 @@ import {
CachedConversation,
ContentTypeMetadata,
useCanMessage,
useClient,
useConsent,
useMessages,
useStreamMessages,
useStreamMessages
} from '@xmtp/react-sdk';
import React, { useEffect, useMemo } from 'react';
import { useSendReactionMessage } from '../../hooks';
import { typeLookup } from '../../utils/attachments';
import {
filterReactionsMessages,
MessageWithReaction,
} from '../../utils/filterReactionsMessages';
import { formatAddress } from '../../utils/formatAddress';
import { groupMessagesByDate } from '../../utils/groupMessageByDate';
import MessageCard from '../MessageCard';
import EmojiSelector from '../EmojiSelector';
import MessageTextField from '../MessageTextField';
import MessageCard from '../MessageCard';
import { MessageSkeletonCard } from '../MessageSkeletonCard';
import MessageTextField from '../MessageTextField';

export interface ChatProps {
conversation: CachedConversation<ContentTypeMetadata>;
Expand All @@ -49,7 +49,6 @@ export const Chat: React.FC<ChatProps> = ({ conversation, onBack }) => {
React.useState<MessageWithReaction | null>(null);
const [reactionMessage, setReactionMessage] =
React.useState<MessageWithReaction | null>(null);
const [emojiSelectorTop, setEmojiSelectorTop] = React.useState<number>(0);
const [isRequest, setIsRequest] = React.useState<boolean>(false);
const [isRequestChangeLoading, setIsRequestChangeLoading] =
React.useState<boolean>(false);
Expand All @@ -65,7 +64,6 @@ export const Chat: React.FC<ChatProps> = ({ conversation, onBack }) => {
const { sanitizeEnsImage } = useEnsAvatar();

const { address } = useMountedAccount();
const { client } = useClient();

const [canMessage, setCanMessage] = React.useState<boolean>(true);

Expand Down Expand Up @@ -224,10 +222,10 @@ export const Chat: React.FC<ChatProps> = ({ conversation, onBack }) => {
src={
primaryName
? sanitizeEnsImage({
name: primaryName,
chainId: 1,
image: records?.sanitizedRecords?.avatar,
})
name: primaryName,
chainId: 1,
image: records?.sanitizedRecords?.avatar,
})
: undefined
}
style={{
Expand Down Expand Up @@ -337,14 +335,15 @@ export const Chat: React.FC<ChatProps> = ({ conversation, onBack }) => {
{isCanMessageLoading || isLoading ? (
<Flex
direction="column"
gap="10px"
gap="5px"
style={{
flex: 1,
padding: '0px 10px',
height: '90%',
padding: '10px 10px',
minHeight: 'calc(100vh - 200px)',
maxHeight: 'calc(100vh - 200px)',
}}
>
{[...Array(5)].map((_, index) => (
{[...Array(8)].map((_, index) => (
<MessageSkeletonCard
key={`message-skeleton-${index}`}
isReceiver={index % 2 === 0}
Expand All @@ -355,11 +354,28 @@ export const Chat: React.FC<ChatProps> = ({ conversation, onBack }) => {
<Flex
style={{
flex: 1,
minHeight: replyMessage
? typeof replyMessage.content === 'string' || typeof replyMessage.content.content === "string"
? 'calc(100vh - 245px)'
: replyMessage.content?.mimeType === "audio/wav"
? 'calc(100vh - 260px)'
: typeLookup[replyMessage.content?.mimeType.split("/")?.[1]] === "video" || typeLookup[replyMessage.content?.mimeType.split("/")?.[1]] === "image"
? 'calc(100vh - 315px)'
: 'calc(100vh - 245px)'
: isMessagesSenderOnly
? 'calc(100vh - 248px)'
: 'calc(100vh - 200px)',
maxHeight: replyMessage
? typeof replyMessage.content === 'string'
? typeof replyMessage.content === 'string' || typeof replyMessage.content.content === "string"
? 'calc(100vh - 245px)'
: replyMessage.content?.mimeType === "audio/wav"
? 'calc(100vh - 260px)'
: typeLookup[replyMessage.content?.mimeType.split("/")?.[1]] === "video" || typeLookup[replyMessage.content?.mimeType.split("/")?.[1]] === "image"
? 'calc(100vh - 315px)'
: 'calc(100vh - 245px)'
: isMessagesSenderOnly
? 'calc(100vh - 248px)'
: 'calc(100vh - 284px)'
: 'calc(100vh - 200px)',
: 'calc(100vh - 200px)',
}}
>
{canMessage ? (
Expand All @@ -379,19 +395,34 @@ export const Chat: React.FC<ChatProps> = ({ conversation, onBack }) => {
{groupedMessages &&
Object.keys(groupedMessages).map((date, index) => (
<Flex direction="column" gap="10px" key={index}>
<P
style={{
textAlign: 'center',
padding: '5px 0px',
marginBottom: '8px',
fontSize: '9px',
fontWeight: 900,
<Flex direction="row" align='center' gap="20px" style={{
marginBottom: '8px',
}}>
<div style={{
width: '100%',
height: 1,
backgroundColor: "var(--justweb3-foreground-color-2)",
opacity: 0.35,
minWidth: 'fit-content',
}}
>
{date}
</P>
}} />
<P
style={{
textAlign: 'center',
padding: '5px 0px',
fontSize: '9px',
fontWeight: 900,
opacity: 0.35,
minWidth: 'fit-content',
}}
>
{date}
</P>
<div style={{
width: '100%',
height: 1,
backgroundColor: "var(--justweb3-foreground-color-2)",
opacity: 0.35,
}} />
</Flex>
{groupedMessages[date].map((message) => (
<MessageCard
conversation={conversation}
Expand All @@ -411,14 +442,12 @@ export const Chat: React.FC<ChatProps> = ({ conversation, onBack }) => {
) as HTMLElement;
replica.id = `${message.id}-replica`;
replica.style.position = 'absolute';
replica.style.top = element?.offsetTop + 'px';
replica.style.top = '100px';
replica.style.bottom = '310px';
replica.style.minHeight = '20px';
replica.style.left = '4.2vw';
replica.style.zIndex = '90';
element?.parentElement?.appendChild(replica);
replica.classList.add('replica-animate');
setEmojiSelectorTop(
100 + element.getBoundingClientRect().height
);
}}
/>
))}
Expand All @@ -429,15 +458,9 @@ export const Chat: React.FC<ChatProps> = ({ conversation, onBack }) => {
style={{
zIndex: 99,
position: 'absolute',
right:
reactionMessage?.senderAddress === client?.address
? '20px'
: 'auto',
left:
reactionMessage?.senderAddress === client?.address
? 'auto'
: '20px',
top: `${emojiSelectorTop + 20}px`,
left: '50%',
transform: 'translateX(-50%)',
bottom: `30px`,
}}
>
<EmojiSelector
Expand Down Expand Up @@ -506,30 +529,33 @@ export const Chat: React.FC<ChatProps> = ({ conversation, onBack }) => {
{isMessagesSenderOnly && (
<Flex
direction="column"
gap="5px"
gap="10px"
style={{
padding: '20px',
padding: '10px',
borderRadius: '10px',
border: '1px solid black',
boxShadow: '1px 1px 0px 0px #000',
backgroundColor: 'var(--justweb3-foreground-color-4)'
}}
>
<P
style={{
fontSize: '20px',
fontSize: '14px',
fontWeight: 900,
lineHeight: '125%',
lineHeight: '100%',
color: 'black'
}}
>
Message in user’s Requests
</P>
<P>This user has not accepted your message request yet</P>
<P style={{
fontSize: '12px'
}}>This user has not accepted your message request yet</P>
</Flex>
)}
<MessageTextField
onCancelReply={() => setReplyMessage(null)}
conversation={conversation}
replyMessage={replyMessage}
peerAddress={conversation.peerAddress}
/>
</Flex>
)}
Expand Down
9 changes: 7 additions & 2 deletions packages/@justweb3/xmtp-plugin/src/lib/components/ChatList/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { CachedConversation, ContentTypeMetadata } from '@xmtp/react-sdk';
import { Flex } from '@justweb3/ui';
import { CachedConversation, ContentTypeMetadata } from '@xmtp/react-sdk';
import React from 'react';
import { MessageItem } from '../MessageItem';

Expand All @@ -8,19 +8,24 @@ export interface ChatListProps {
handleOpenChat: (
conversation: CachedConversation<ContentTypeMetadata> | null
) => void;
blockedList?: boolean
}

export const ChatList: React.FC<ChatListProps> = ({
conversations,
handleOpenChat,
blockedList
}) => {
return (
<Flex direction={'column'} gap={'10px'}>
<Flex direction={'column'} gap={'10px'} style={{
paddingTop: '10px'
}}>
{conversations.map((conversation) => (
<MessageItem
conversation={conversation}
onClick={() => handleOpenChat(conversation)}
key={conversation.topic}
blocked={blockedList}
/>
))}
</Flex>
Expand Down
2 changes: 2 additions & 0 deletions packages/@justweb3/xmtp-plugin/src/lib/components/ChatSheet/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ export const ChatSheet: React.FC<ChatSheetProps> = ({
flexDirection: 'column',
marginBottom: '0px',
overflow: 'hidden',
marginTop: '10px',
flex: '1',
}}
>
Expand Down Expand Up @@ -126,6 +127,7 @@ export const ChatSheet: React.FC<ChatSheetProps> = ({
<ChatList
conversations={blockedConversations}
handleOpenChat={handleOpenChat}
blockedList
/>
</TabsContent>
</>
Expand Down
19 changes: 15 additions & 4 deletions packages/@justweb3/xmtp-plugin/src/lib/components/CustomPlayer/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
import { Flex, PauseIcon, PlayIcon } from '@justweb3/ui';
import { DownloadIcon, Flex, PauseIcon, PlayIcon } from '@justweb3/ui';
import React, { useEffect, useRef, useState } from 'react';


export interface CustomPlayerProps {
style?: React.CSSProperties;
url?: string;
disabled?: boolean;
fileName?: string;
}

export const CustomPlayer: React.FC<CustomPlayerProps> = ({
style,
url = '',
disabled
disabled,
fileName
}) => {
const [playing, setPlaying] = React.useState(false);
const videoRef = useRef<HTMLVideoElement>(null);
Expand Down Expand Up @@ -84,12 +86,21 @@ export const CustomPlayer: React.FC<CustomPlayerProps> = ({
}
{
!playing &&
<div style={{
<Flex align='center' direction='row' style={{
position: 'absolute'
}}>
<PlayIcon width={40} height={40} />
</div>
{!!fileName && (
<a onClick={(e) => {
e.stopPropagation()
}} style={{
transform: 'translateY(2px)'
}} href={url} download={fileName}>
<DownloadIcon width="29" height="29" /></a>
)}
</Flex>
}

</Flex >
);
}
16 changes: 7 additions & 9 deletions packages/@justweb3/xmtp-plugin/src/lib/components/CustomVoicePreview/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,29 +56,27 @@ const CustomVoicePreview: React.FC<CustomVoicePreviewProps> = ({

return (
<Flex direction="row" align="center" justify='space-between' gap='10px' style={{
height: '32px',
background: 'var(--justweb3-primary-color)',
padding: '5px 10px',
borderRadius: '6px',
padding: '5px',
borderRadius: '10px',
}} >
{playing ?
<PauseIcon width={24} height={24} style={{
<PauseIcon fill='white' width={22} height={22} style={{
cursor: 'pointer',
}} onClick={handlePlayPause} />
:
<PlayIcon width={24} height={24} style={{
<PlayIcon fill='white' width={22} height={22} style={{
cursor: 'pointer',
}} onClick={handlePlayPause} />
}
<P style={{
fontWeight: 900,
fontSize: '14px',
fontSize: '12px',
lineHeight: '73%',
// TODO: check color
color: 'var(--justweb3-text-color)',
color: 'white',
letterSpacing: '0.7px',
}} >{playing || currentTime > 0 ? formatTime(currentTime) : formatTime(audioDuration ?? 0)}</P>
<CloseIcon width={20} height={20} fill="#8714E3" style={{
<CloseIcon width={18} height={18} fill='white' style={{
cursor: 'pointer',
scale: '1.1',
}} onClick={onCancel} />
Expand Down
Loading

0 comments on commit 6e49774

Please sign in to comment.