diff --git a/packages/examples/sdk-frontend-react/src/app/ChatUITest/MessageBubbles.tsx b/packages/examples/sdk-frontend-react/src/app/ChatUITest/MessageBubbles.tsx
index 0846690d2..8715759d4 100644
--- a/packages/examples/sdk-frontend-react/src/app/ChatUITest/MessageBubbles.tsx
+++ b/packages/examples/sdk-frontend-react/src/app/ChatUITest/MessageBubbles.tsx
@@ -40,6 +40,7 @@ export const MessageBubbles = () => {
env: env
})
setMessage(chatHistory)
+ console.log(chatHistory)
}
}
diff --git a/packages/uiweb/src/lib/components/chat/MessageBubble/MessageBubble.tsx b/packages/uiweb/src/lib/components/chat/MessageBubble/MessageBubble.tsx
index 0cf14bd9b..63d4064c8 100644
--- a/packages/uiweb/src/lib/components/chat/MessageBubble/MessageBubble.tsx
+++ b/packages/uiweb/src/lib/components/chat/MessageBubble/MessageBubble.tsx
@@ -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 && (
{chat.fromDID.split(":")[1].slice(0, 6)}...
+ textAlign="start">{chat.fromDID.split(":")[1].slice(0, 6)}...
{chat.fromDID.split(":")[1].slice(-6)}
)}
)
}
+const SenderMessafeProfilePicture = ({ chat }: { chat: IMessagePayload }) => {
+ const { account, env } = useContext(ChatDataContext)
+ const [pfp, setPfp] = useState("")
+ const getUserPfp = async () => {
+ const pfp = await getPfp({ account: chat.fromCAIP10.split(":")[1], env: env })
+ if (pfp) {
+ setPfp(pfp)
+ }
+ }
+ useEffect(() => {
+ getUserPfp()
+ }, [account, chat.fromCAIP10])
+ return (
+
+ {chat.fromCAIP10.split(":")[1] !== account && (
+
+ )}
+
+ )
+}
+
const MessageCard = ({
chat,
position,
@@ -35,50 +58,54 @@ const MessageCard = ({
}) => {
const time = moment(chat.timestamp).format('hh:mm a');
return (
-
+
{isGroup &&
-
+
}
-
- {' '}
-
- {chat.messageContent.split('\n').map((str) => (
-
- {str}
-
- ))}
-
-
+ }
+
- {time}
-
+ {' '}
+
+ {chat.messageContent.split('\n').map((str) => (
+
+ {str}
+
+ ))}
+
+
+ {time}
+
+
);
@@ -86,7 +113,6 @@ const MessageCard = ({
const FileCard = ({
chat,
- position,
isGroup,
}: {
chat: IMessagePayload;
@@ -100,43 +126,48 @@ const FileCard = ({
const size = fileContent.size;
return (
-
+
{isGroup &&
-
+
}
-
-
-
-
- {shortenText(name, 11)}
-
-
- {formatFileSize(size)}
-
-
-
+ {isGroup &&
+
+ }
+
+
+
+
+ {shortenText(name, 11)}
+
+
+ {formatFileSize(size)}
+
+
+
+
+
+
);
@@ -153,22 +184,27 @@ const ImageCard = ({
}) => {
return (
-
- {isGroup && (
-
- )}
-
-
+
);
@@ -184,22 +220,27 @@ const GIFCard = ({
isGroup: boolean;
}) => {
return (
-
+
{isGroup &&
-
+
}
-
);
@@ -207,17 +248,22 @@ const GIFCard = ({
const TwitterCard = ({ chat, tweetId, isGroup, position }: { chat: IMessagePayload, tweetId: string, isGroup: boolean , position: number}) => {
return (
-
+
{isGroup &&
-
+
}
-
)
diff --git a/packages/uiweb/src/lib/helpers/chat/localStorage.ts b/packages/uiweb/src/lib/helpers/chat/localStorage.ts
index 2750a0cf7..4d7dac903 100644
--- a/packages/uiweb/src/lib/helpers/chat/localStorage.ts
+++ b/packages/uiweb/src/lib/helpers/chat/localStorage.ts
@@ -1,11 +1,12 @@
-import type { IFeeds} from '@pushprotocol/restapi';
+import type { IFeeds } from '@pushprotocol/restapi';
import { IMessageIPFS } from '@pushprotocol/restapi';
import { ChatFeedsType, LocalStorageKeys } from '../../types';
-
+import * as PUSHAPI from '@pushprotocol/restapi';
+import { ENV } from '../../config';
type SetDataType = {
- chatId:string,
- value:IFeeds;
+ chatId: string;
+ value: IFeeds;
};
//store only if there isnt a chat
@@ -13,13 +14,50 @@ export const setData = ({ chatId, value }: SetDataType): void => {
localStorage.setItem(chatId, JSON.stringify(value));
};
+//add return type
+export const getData = (key: string): IFeeds | null => {
+ const chatJson = localStorage.getItem(key);
+ const chat = chatJson ? JSON.parse(chatJson) : null;
+ return chat;
+};
+
+export const getPfp = async ({
+ account,
+ env,
+}: {
+ account: string;
+ env: ENV;
+}) => {
+ const fetchData = async () => {
+ try {
+ const response = await PUSHAPI.user.get({
+ account: account,
+ env: env,
+ });
+ const pfp = response.profile.picture ? response.profile.picture : '';
+ setPfp({ account, value: pfp });
+ return pfp;
+ } catch (err: Error | any) {
+ console.log(err.message);
+ return '';
+ }
+ };
+ const pfp = localStorage.getItem(account);
-
-//add return type
-export const getData = (key: string):IFeeds | null => {
- const chatJson=localStorage.getItem(key);
- const chat = chatJson?JSON.parse(chatJson):null;
- return chat;
+ if (pfp === null) {
+ return fetchData();
+ } else {
+ return pfp;
+ }
};
+export const setPfp = ({
+ account,
+ value,
+}: {
+ account: string;
+ value: string;
+}) => {
+ localStorage.setItem(account, value);
+};