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

Push Chat Reply Feature #1399

Merged
merged 10 commits into from
Oct 9, 2024
Merged

Push Chat Reply Feature #1399

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
fe48fb9
Functioning reply in ChatPreviewList, ChatList and Input
HarshRajat Sep 24, 2024
36a808a
Reply cancel and replying to in UIWeb:MessageInput
HarshRajat Sep 24, 2024
e454e13
Reply Feature with styles
HarshRajat Sep 27, 2024
d53f65a
fix: modified some parts in helper func
abhishek-01k Oct 3, 2024
2420a9f
fix: added the replied to text and also fixed the emoji picker position
abhishek-01k Oct 7, 2024
45d647f
fix: fixed the UI for the reply feature
abhishek-01k Oct 7, 2024
10672f6
fix: fixed the issues
abhishek-01k Oct 8, 2024
0a67a7f
fix: fixed image in notification
mishramonalisha76 Oct 8, 2024
ce42e5d
fix: added the commented code that was removed
abhishek-01k Oct 9, 2024
b476d3c
Merge remote-tracking branch 'origin/alpha' into push-chat-reply
abhishek-01k Oct 9, 2024
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
2 changes: 1 addition & 1 deletion packages/uiweb/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"@livepeer/react": "^2.6.0",
"@pushprotocol/socket": "^0.5.0",
"@unstoppabledomains/resolution": "^8.5.0",
"@web3-name-sdk/core": "^0.1.15",
"@web3-name-sdk/core": "^0.2.0",
"@web3-onboard/coinbase": "^2.2.5",
"@web3-onboard/core": "^2.21.1",
"@web3-onboard/injected-wallets": "^2.10.5",
Expand Down
109 changes: 69 additions & 40 deletions packages/uiweb/src/lib/components/chat/ChatPreview/ChatPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,23 @@ import React, { useContext, useEffect, useRef, useState } from 'react';
import styled from 'styled-components';

import { useChatData } from '../../../hooks';
import { Div, Button, Image, Section } from '../../reusables';
import { Button, Div, Image, Section } from '../../reusables';

import { CONSTANTS } from '@pushprotocol/restapi';
import { ethers } from 'ethers';
import { CiImageOn } from 'react-icons/ci';
import { FaFile } from 'react-icons/fa';
import { CoreContractChainId, InfuraAPIKey } from '../../../config';
import { resolveWeb3Name, shortenText } from '../../../helpers';
import { pushBotAddress } from '../../../config/constants';
import { pCAIP10ToWallet, resolveWeb3Name, shortenText } from '../../../helpers';
import { createBlockie } from '../../../helpers/blockies';
import { IChatPreviewProps } from '../exportedTypes';
import { formatAddress, formatDate } from '../helpers';
import { pCAIP10ToWallet } from '../../../helpers';
import { createBlockie } from '../../../helpers/blockies';
import { IChatTheme } from '../theme';
import { ThemeContext } from '../theme/ThemeProvider';
import { pushBotAddress } from '../../../config/constants';

import { ReplyIcon } from '../../../icons/PushIcons';

/**
* @interface IThemeProps
* this interface is used for defining the props for styled components
Expand Down Expand Up @@ -53,7 +55,9 @@ export const ChatPreview: React.FC<IChatPreviewProps> = (options: IChatPreviewPr

const hasBadgeCount = !!options?.badge?.count;
const isSelected = options?.selected;
const isBot = options?.chatPreviewPayload?.chatParticipant === "PushBot" || options?.chatPreviewPayload?.chatParticipant === pushBotAddress;
const isBot =
options?.chatPreviewPayload?.chatParticipant === 'PushBot' ||
options?.chatPreviewPayload?.chatParticipant === pushBotAddress;

// For blockie if icon is missing
const blockieContainerRef = useRef<HTMLDivElement>(null);
Expand All @@ -75,6 +79,49 @@ export const ChatPreview: React.FC<IChatPreviewProps> = (options: IChatPreviewPr
return options.chatPreviewPayload?.chatGroup ? formattedAddress : web3Name ? web3Name : formattedAddress;
};

// collate all message components
const msgComponents: React.ReactNode[] = [];
let includeText = false;

// If reply, check message meta to see
// Always check this first
if (options?.chatPreviewPayload?.chatMsg?.messageMeta === 'Reply') {
msgComponents.push(
<ReplyIcon
color={theme.iconColor?.emoji}
size={theme.fontSize?.chatPreviewMessageText}
/>
);

// Include text in rendering as well
includeText = true;
}

// If image, gif, mediaembed
if (
options?.chatPreviewPayload?.chatMsg?.messageType === 'Image' ||
options?.chatPreviewPayload?.chatMsg?.messageType === 'GIF' ||
options?.chatPreviewPayload?.chatMsg?.messageType === 'MediaEmbed'
) {
msgComponents.push(<CiImageOn />);
msgComponents.push(<Message theme={theme}>Media</Message>);
}

// If file
if (options?.chatPreviewPayload?.chatMsg?.messageType === 'File') {
msgComponents.push(<FaFile />);
msgComponents.push(<Message theme={theme}>File</Message>);
}

// Add content
if (
includeText ||
options?.chatPreviewPayload?.chatMsg?.messageType === 'Text' ||
options?.chatPreviewPayload?.chatMsg?.messageType === 'Reaction'
) {
msgComponents.push(<Message theme={theme}>{options?.chatPreviewPayload?.chatMsg?.messageContent}</Message>);
}

return (
<ChatPreviewContainer
margin={theme.margin?.chatPreviewMargin}
Expand Down Expand Up @@ -167,41 +214,23 @@ export const ChatPreview: React.FC<IChatPreviewProps> = (options: IChatPreviewPr
animation={theme.skeletonBG}
>
<Message theme={theme}>
{options?.chatPreviewPayload?.chatMsg?.messageType === 'Image' ||
options?.chatPreviewPayload?.chatMsg?.messageType === 'GIF' ||
options?.chatPreviewPayload?.chatMsg?.messageType === 'MediaEmbed' ? (
<Section
justifyContent="flex-start"
flexDirection="row"
alignItems="center"
alignSelf="stretch"
overflow="hidden"
flex="1"
gap="4px"
>
<CiImageOn />
Media
</Section>
) : options?.chatPreviewPayload?.chatMsg?.messageType === 'File' ? (
<Section
justifyContent="flex-start"
flexDirection="row"
alignItems="center"
alignSelf="stretch"
overflow="hidden"
flex="1"
gap="4px"
>
<FaFile />
File
</Section>
) : (
options?.chatPreviewPayload?.chatMsg?.messageContent
)}
<Section
justifyContent="flex-start"
flexDirection="row"
alignItems="center"
alignSelf="stretch"
overflow="hidden"
flex="1"
gap="4px"
>
{msgComponents}
</Section>
</Message>

{hasBadgeCount && !(isBot || (isSelected && hasBadgeCount)) && <Badge theme={theme}>{options.badge?.count}</Badge>}
</Section>

{hasBadgeCount && !(isBot || (isSelected && hasBadgeCount)) && (
<Badge theme={theme}>{options.badge?.count}</Badge>
)}
</Section>
</Section>
</Button>
</ChatPreviewContainer>
Expand Down
Loading
Loading