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 chatbubble component #602

Merged
merged 3 commits into from
Aug 3, 2023
Merged

added chatbubble component #602

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e1a5788
feat: added chatbubble component
KlausMikhaelson Aug 3, 2023
69bdb80
fix: made the messageBubble's width to fit-content
KlausMikhaelson Aug 3, 2023
b3c13a1
Merge branch 'feat/chat-components' into message-bubble-comp
mishramonalisha76 Aug 3, 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
42 changes: 33 additions & 9 deletions packages/examples/sdk-frontend-react/src/app/ChatWidgetTest.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import React, { useContext, useEffect, useState } from 'react';
import { ChatAndNotificationWidget, PUSH_TABS } from '@pushprotocol/uiweb';
import { ChatAndNotificationWidget, IMessageIPFS, PUSH_TABS } from '@pushprotocol/uiweb';
import { EnvContext, Web3Context } from './context';
import * as PushAPI from '@pushprotocol/restapi';
import { IUser } from '@pushprotocol/restapi';
import { MessageBubble } from '@pushprotocol/uiweb';

export const ChatWidgetTest = () => {
const { account, library } = useContext<any>(Web3Context);
Expand Down Expand Up @@ -30,14 +31,37 @@ export const ChatWidgetTest = () => {
console.log('in here widget');
};

const ImsgObject: IMessageIPFS = {
"fromCAIP10": "eip155:0x45F5EDf14EF0C42FC99164c236afc571a6dcB81C",
"toCAIP10": "eip155:0x83d4c16b15F7BBA501Ca1057364a1F502d1c34D5",
"fromDID": "eip155:0x45F5EDf14EF0C42FC99164c236afc571a6dcB81C",
"toDID": "eip155:0x83d4c16b15F7BBA501Ca1057364a1F502d1c34D5",
// "messageObj": "U2FsdGVkX1/JsBNKCHHStEj2Z2EsUD8ApyQipFcWsqDnaivZg0gEepbc2Bvf6eXT",
"messageContent": "Hi",
"messageType": "Text",
"timestamp": 1690871453962,
"encType": "pgp",
"encryptedSecret": "-----BEGIN PGP MESSAGE-----\n\nwcBMA6Um75H3iYJmAQgAsUtS5Fisa9zxw0zZRKGrMplktDjmbai7NSqn/S4c\nqHHkfVmfhkhskyG8SF1aaRSObBEr1H5WnnJyhhrKCAO6TKLiyXnpF/V3xmVT\n0XyR4wFffldFVC2KD5mpQR3XkDWA1a49VP/B4wIal5IZGKlpU/OswNF67cEl\nLwffkY18PfhIfUETwt+jU9gOFRYc9mWAClJA60R699q5bx6huDSfRe2YRNgI\n/cCNzJ3QZpup43P9Y8SlV17NIH/rzntiqKQRHQ8HbHL5FHe5QJw6/AhcBwcl\np+tQTIwL8hW8dEkFb2+eP3ceTXv79eL33LZkPxjQojGOVO7uZpD67cnrso7A\nK8HATAMj6lYp8T/mrAEH/1mF+egNBDhA5tZRGmMvFeX+Tj/uKT1+7OZbsn+H\nup44q228P4hLXawcH2F42CxJcdyJVmJe4wp2QrwB1mnR4zAGd64PKbLPKhep\nMZZ9xI6Fs2jKi5jslt6zCr9BzOjc4mnkP539HQCfOdMmwPBecVS71LHtwtVC\nGeAzf5srltY8RDubbD3Zb3CdryyE4U6BJX2GqYuZ4rBwkQa4avR1LSVg5Mv1\nQaH3Eo04XHRf59gFZsWlB7G2F+tNPchysOtbkTPmqKuuAivd4MCSuvSeILm6\nAqcEp8EqiBWqjw9Pvm+zQBU7eY9gjlqqv+zL2vGNRgSzDOshfCC2QKazfVaM\nJdLSQAH2/4IEf/7XChh9OCjAhXezjEGmFYngIiPA/DWlJ3CQO7BTul9Sj9wc\nxICHBhS32jnUwBeDspqnh71GqvVd6lo=\n=WPiI\n-----END PGP MESSAGE-----\n",
"signature": "-----BEGIN PGP SIGNATURE-----\n\nwsBzBAEBCAAnBYJkyKadCZD5DxzgQvFbyxYhBEEVOIDXLai5btMJhPkPHOBC\n8VvLAADZFgf/ekgyH2801dig0ksmHk8CDaF8Q4zXlRe1+nOpHLulzAH5TNox\n6bHE59oBkLgLjOs60CTV4cxr4NYcpBDXdLzK66NyYx/GfrKu5YEOYipNEztx\nwGUgpPkilyeXIFosbkaawfslILmHlMnxv776M09DVQuoxTPMvo5irMl9kLWR\nKZHmLu1EPoVZ92NWj0XRkgGZLsZckMdEyk0sSrpCLq20K8ohgsMAk3sFNsAY\nPz4iwitW3GEWGm01NDMzldCit3c09FqippW7q6E+KniYcDcEJKHfBLYHHzIJ\n/nBXcXSKzecBy1YUhBG32Uwyi/sErhE7z/ITGyN7UB3mIb/w5gWX2Q==\n=O88Q\n-----END PGP SIGNATURE-----\n",
"sigType": "pgpv2",
// "verificationProof": "pgpv2:-----BEGIN PGP SIGNATURE-----\n\nwsBzBAEBCAAnBYJkyKaeCZD5DxzgQvFbyxYhBEEVOIDXLai5btMJhPkPHOBC\n8VvLAABKHQf+JZan3VndkpYz2ED4GRVdxQYa5IonQjKsm9n0jirsqFaD1i/j\nLF+RGNKGbkejnqTRofL48UZcvBvhaqPERAdF6tCEHkxMp64C5NeUvkHAeWCN\n8O/aOj17BvhknisXiJ+lX9vL1GdZkQeec/FcKAccBG9EvUSzgw7IrGnBnxq3\n9End64mxqjRZAUzYPIB5jyfFT91loHfhmpYh/HKEfoisW5/4OnXb22GqHgjj\nKWK74Q37a/yf+dRjjXNUzCOqVP504K3lQNVkkb4DaAdwyNpUoc+3THImsJG4\ncrc6MUrUPMuiFrpTwCfMmnpY95FInSA2eYoT8Cl5Q9K0gsJ55Yp6Cw==\n=dL8p\n-----END PGP SIGNATURE-----\n",
"link": "bafyreigdupvljqldbpbfqs32qz446wa3vynea74zr7dvigpcg4x4ylac5u",
// "cid": "bafyreiakghfmhcymarfmvwvnsxaqtc5scyl64cwyydhnbcew4to7zzuaj4"
}

return (
<ChatAndNotificationWidget
account={account}
env={env}
decryptedPgpPvtKey={pvtKey}
signer={librarySigner}
// activeTab={PUSH_TABS.APP_NOTIFICATIONS}
// activeChat="0x3Cf13f6d91F50dca6eAD7356b78482c54CDd95ff"
/>

<>
<MessageBubble account={account} chat={ImsgObject} />
<ChatAndNotificationWidget
account={account}
env={env}
decryptedPgpPvtKey={pvtKey}
signer={librarySigner}
// activeTab={PUSH_TABS.APP_NOTIFICATIONS}
activeChat="0x3Cf13f6d91F50dca6eAD7356b78482c54CDd95ff"
/>
</>

);
};
180 changes: 180 additions & 0 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
@@ -0,0 +1,180 @@
import React, { useContext } from "react";
import { Section, Span, Image } from "../../reusables";
import moment from "moment";
import styled from "styled-components";
import { chat, type IMessageIPFS } from "@pushprotocol/restapi";
import { FileMessageContent } from "../../../types";
import { FILE_ICON } from "../../../config";
import { formatFileSize, pCAIP10ToWallet, shortenText } from "../../../helpers";


const MessageCard = ({
chat,
position,
}: {
chat: IMessageIPFS;
position: number;
}) => {
const time = moment(chat.timestamp).format('hh:mm a');
return (
<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 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>
);
};

const FileCard = ({
chat,
position,
}: {
chat: IMessageIPFS;
position: number;
}) => {
const fileContent: FileMessageContent = JSON.parse(chat.messageContent);
const name = fileContent.name;

const content = fileContent.content as string;
const size = fileContent.size;

return (
<Section
alignSelf={position ? 'end' : 'start'}
maxWidth="80%"
margin="5px 0"
background="#343536"
borderRadius="8px"
justifyContent="space-around"
padding="10px 13px"
gap="15px"
>
<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>
);
};

const ImageCard = ({
chat,
position,
}: {
chat: IMessageIPFS;
position: number;
}) => {
return (
<Section
alignSelf={position ? 'end' : 'start'}
maxWidth="65%"
margin="5px 0"
>
<Image
src={JSON.parse(chat.messageContent).content}
alt=""
width="100%"
borderRadius={position ? '12px 12px 0px 12px' : '12px 12px 12px 0px'}
/>
</Section>
);
};

const GIFCard = ({
chat,
position,
}: {
chat: IMessageIPFS;
position: number;
}) => {
return (
<Section
alignSelf={position ? 'end' : 'start'}
maxWidth="65%"
margin="5px 0"
>
<Image
src={chat.messageContent}
alt=""
width="100%"
borderRadius={position ? '12px 12px 0px 12px' : '12px 12px 12px 0px'}
/>
</Section>
);
};

export const MessageBubble = ({ chat, account }: { chat: IMessageIPFS, account: any }) => {
const position = pCAIP10ToWallet(chat.fromDID).toLowerCase() !== account.toLowerCase() ? 0 : 1;

if (chat.messageType === 'GIF') {
return <GIFCard chat={chat} position={position} />;
}
if (chat.messageType === 'IMAGE') {
return <ImageCard chat={chat} position={position} />;
}
if (chat.messageType === 'FILE') {
return <FileCard chat={chat} position={position} />;
}
return <MessageCard chat={chat} position={position} />;
}


const FileDownloadIcon = styled.i`
color: #575757;
`;

const FileDownloadIconAnchor = styled.a`
font-size: 20px;
`;
1 change: 1 addition & 0 deletions packages/uiweb/src/lib/components/chat/MessageBubble/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { MessageBubble } from './MessageBubble';
1 change: 1 addition & 0 deletions packages/uiweb/src/lib/components/chat/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { MessageBubble } from './MessageBubble';
1 change: 1 addition & 0 deletions packages/uiweb/src/lib/components/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,4 @@ export * from './subscribemodal';
export * from './space';
export * from './supportChat';
export * from './chatAndNotification';
export * from './chat';