mirror of
https://github.com/Qortal/Qortal-Hub.git
synced 2025-06-18 22:01:22 +00:00
Add theme
This commit is contained in:
Nicola Benaglia
parent
af1d44990a
commit
2013561db7
@ -1,14 +1,12 @@
|
||||
import React, { useState } from "react";
|
||||
import InfiniteScroll from "react-infinite-scroller";
|
||||
import {
|
||||
MainContainer,
|
||||
ChatContainer,
|
||||
MessageList,
|
||||
Message,
|
||||
MessageInput,
|
||||
Avatar
|
||||
} from "@chatscope/chat-ui-kit-react";
|
||||
import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
|
||||
Avatar,
|
||||
} from '@chatscope/chat-ui-kit-react';
|
||||
import '@chatscope/chat-ui-kit-styles/dist/default/styles.min.css';
|
||||
|
||||
export const ChatContainerComp = ({ messages }) => {
|
||||
// const [messages, setMessages] = useState([
|
||||
@ -26,7 +24,7 @@ export const ChatContainerComp = ({messages}) => {
|
||||
// };
|
||||
|
||||
return (
|
||||
<div style={{ height: "500px", width: "300px" }}>
|
||||
<div style={{ height: '500px', width: '300px' }}>
|
||||
<MainContainer>
|
||||
<ChatContainer>
|
||||
<MessageList>
|
||||
@ -35,13 +33,15 @@ export const ChatContainerComp = ({messages}) => {
|
||||
key={msg.id}
|
||||
model={{
|
||||
message: msg.text,
|
||||
sentTime: "just now",
|
||||
sentTime: 'just now',
|
||||
sender: msg.senderName,
|
||||
direction: 'incoming',
|
||||
position: "single"
|
||||
position: 'single',
|
||||
}}
|
||||
>
|
||||
{msg.direction === "incoming" && <Avatar name={msg.senderName} />}
|
||||
{msg.direction === 'incoming' && (
|
||||
<Avatar name={msg.senderName} />
|
||||
)}
|
||||
</Message>
|
||||
))}
|
||||
</MessageList>
|
||||
@ -52,5 +52,3 @@ export const ChatContainerComp = ({messages}) => {
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
|
||||
@ -1,23 +1,15 @@
|
||||
import React, {
|
||||
useCallback,
|
||||
useState,
|
||||
useEffect,
|
||||
useRef,
|
||||
useMemo,
|
||||
} from "react";
|
||||
import { useVirtualizer } from "@tanstack/react-virtual";
|
||||
import { MessageItem } from "./MessageItem";
|
||||
import { subscribeToEvent, unsubscribeFromEvent } from "../../utils/events";
|
||||
import { useInView } from "react-intersection-observer";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import { ChatOptions } from "./ChatOptions";
|
||||
import ErrorBoundary from "../../common/ErrorBoundary";
|
||||
import { useCallback, useState, useEffect, useRef, useMemo } from 'react';
|
||||
import { useVirtualizer } from '@tanstack/react-virtual';
|
||||
import { MessageItem } from './MessageItem';
|
||||
import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events';
|
||||
import { Box, Typography, useTheme } from '@mui/material';
|
||||
import { ChatOptions } from './ChatOptions';
|
||||
import ErrorBoundary from '../../common/ErrorBoundary';
|
||||
|
||||
export const ChatList = ({
|
||||
initialMessages,
|
||||
myAddress,
|
||||
tempMessages,
|
||||
chatId,
|
||||
onReply,
|
||||
onEdit,
|
||||
handleReaction,
|
||||
@ -29,7 +21,7 @@ export const ChatList = ({
|
||||
enableMentions,
|
||||
openQManager,
|
||||
hasSecretKey,
|
||||
isPrivate
|
||||
isPrivate,
|
||||
}) => {
|
||||
const parentRef = useRef();
|
||||
const [messages, setMessages] = useState(initialMessages);
|
||||
@ -42,7 +34,8 @@ export const ChatList = ({
|
||||
// Initialize the virtualizer
|
||||
const rowVirtualizer = useVirtualizer({
|
||||
count: messages.length,
|
||||
getItemKey: (index) => messages[index]?.tempSignature || messages[index].signature,
|
||||
getItemKey: (index) =>
|
||||
messages[index]?.tempSignature || messages[index].signature,
|
||||
getScrollElement: () => parentRef?.current,
|
||||
estimateSize: useCallback(() => 80, []), // Provide an estimated height of items, adjust this as needed
|
||||
overscan: 10, // Number of items to render outside the visible area to improve smoothness
|
||||
@ -52,12 +45,11 @@ export const ChatList = ({
|
||||
if (parentRef.current && rowVirtualizer?.isScrolling !== undefined) {
|
||||
const { scrollTop, scrollHeight, clientHeight } = parentRef.current;
|
||||
const atBottom = scrollTop + clientHeight >= scrollHeight - 10; // Adjust threshold as needed
|
||||
return atBottom
|
||||
return atBottom;
|
||||
}
|
||||
|
||||
return false
|
||||
|
||||
}, [rowVirtualizer?.isScrolling])
|
||||
return false;
|
||||
}, [rowVirtualizer?.isScrolling]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!parentRef.current || rowVirtualizer?.isScrolling === undefined) return;
|
||||
@ -67,8 +59,7 @@ export const ChatList = ({
|
||||
}
|
||||
setShowScrollDownButton(false);
|
||||
return;
|
||||
} else
|
||||
if (rowVirtualizer?.isScrolling) {
|
||||
} else if (rowVirtualizer?.isScrolling) {
|
||||
if (scrollingIntervalRef.current) {
|
||||
clearTimeout(scrollingIntervalRef.current);
|
||||
}
|
||||
@ -108,7 +99,13 @@ export const ChatList = ({
|
||||
|
||||
setTimeout(() => {
|
||||
const hasUnreadMessages = totalMessages.some(
|
||||
(msg) => msg.unread && !msg?.chatReference && !msg?.isTemp && (!msg?.chatReference && msg?.timestamp > lastSeenUnreadMessageTimestamp.current || 0)
|
||||
(msg) =>
|
||||
msg.unread &&
|
||||
!msg?.chatReference &&
|
||||
!msg?.isTemp &&
|
||||
((!msg?.chatReference &&
|
||||
msg?.timestamp > lastSeenUnreadMessageTimestamp.current) ||
|
||||
0)
|
||||
);
|
||||
if (parentRef.current) {
|
||||
const { scrollTop, scrollHeight, clientHeight } = parentRef.current;
|
||||
@ -136,9 +133,9 @@ export const ChatList = ({
|
||||
const index = initialMsgs ? initialMsgs.length - 1 : messages.length - 1;
|
||||
if (rowVirtualizer) {
|
||||
if (divideIndex) {
|
||||
rowVirtualizer.scrollToIndex(divideIndex, { align: "start" });
|
||||
rowVirtualizer.scrollToIndex(divideIndex, { align: 'start' });
|
||||
} else {
|
||||
rowVirtualizer.scrollToIndex(index, { align: "end" });
|
||||
rowVirtualizer.scrollToIndex(index, { align: 'end' });
|
||||
}
|
||||
}
|
||||
handleMessageSeen();
|
||||
@ -152,7 +149,7 @@ export const ChatList = ({
|
||||
}))
|
||||
);
|
||||
setShowScrollButton(false);
|
||||
lastSeenUnreadMessageTimestamp.current = Date.now()
|
||||
lastSeenUnreadMessageTimestamp.current = Date.now();
|
||||
}, []);
|
||||
|
||||
const sentNewMessageGroupFunc = useCallback(() => {
|
||||
@ -166,9 +163,9 @@ export const ChatList = ({
|
||||
}, [messages]);
|
||||
|
||||
useEffect(() => {
|
||||
subscribeToEvent("sent-new-message-group", sentNewMessageGroupFunc);
|
||||
subscribeToEvent('sent-new-message-group', sentNewMessageGroupFunc);
|
||||
return () => {
|
||||
unsubscribeFromEvent("sent-new-message-group", sentNewMessageGroupFunc);
|
||||
unsubscribeFromEvent('sent-new-message-group', sentNewMessageGroupFunc);
|
||||
};
|
||||
}, [sentNewMessageGroupFunc]);
|
||||
|
||||
@ -181,21 +178,24 @@ export const ChatList = ({
|
||||
const goToMessage = useCallback((idx) => {
|
||||
rowVirtualizer.scrollToIndex(idx);
|
||||
}, []);
|
||||
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: "100%",
|
||||
position: "relative",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
width: "100%",
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
@ -203,27 +203,26 @@ export const ChatList = ({
|
||||
className="List"
|
||||
style={{
|
||||
flexGrow: 1,
|
||||
overflow: "auto",
|
||||
position: "relative",
|
||||
display: "flex",
|
||||
height: "0px",
|
||||
overflow: 'auto',
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
height: '0px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: rowVirtualizer.getTotalSize(),
|
||||
width: "100%",
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
|
||||
{rowVirtualizer.getVirtualItems().map((virtualRow) => {
|
||||
const index = virtualRow.index;
|
||||
let message = messages[index] || null; // Safeguard against undefined
|
||||
@ -243,9 +242,12 @@ export const ChatList = ({
|
||||
if (message?.repliedTo && replyIndex !== -1) {
|
||||
reply = { ...(messages[replyIndex] || {}) };
|
||||
if (chatReferences?.[reply?.signature]?.edit) {
|
||||
reply.decryptedData = chatReferences[reply?.signature]?.edit;
|
||||
reply.text = chatReferences[reply?.signature]?.edit?.message;
|
||||
reply.editTimestamp = chatReferences[reply?.signature]?.edit?.timestamp
|
||||
reply.decryptedData =
|
||||
chatReferences[reply?.signature]?.edit;
|
||||
reply.text =
|
||||
chatReferences[reply?.signature]?.edit?.message;
|
||||
reply.editTimestamp =
|
||||
chatReferences[reply?.signature]?.edit?.timestamp;
|
||||
}
|
||||
}
|
||||
|
||||
@ -267,19 +269,29 @@ export const ChatList = ({
|
||||
|
||||
// Check for reactions and edits
|
||||
if (chatReferences?.[message.signature]) {
|
||||
reactions = chatReferences[message.signature]?.reactions || null;
|
||||
reactions =
|
||||
chatReferences[message.signature]?.reactions || null;
|
||||
|
||||
if (chatReferences[message.signature]?.edit?.message && message?.text) {
|
||||
message.text = chatReferences[message.signature]?.edit?.message;
|
||||
message.isEdit = true
|
||||
message.editTimestamp = chatReferences[message.signature]?.edit?.timestamp
|
||||
if (
|
||||
chatReferences[message.signature]?.edit?.message &&
|
||||
message?.text
|
||||
) {
|
||||
message.text =
|
||||
chatReferences[message.signature]?.edit?.message;
|
||||
message.isEdit = true;
|
||||
message.editTimestamp =
|
||||
chatReferences[message.signature]?.edit?.timestamp;
|
||||
}
|
||||
if (chatReferences[message.signature]?.edit?.messageText && message?.messageText) {
|
||||
message.messageText = chatReferences[message.signature]?.edit?.messageText;
|
||||
message.isEdit = true
|
||||
message.editTimestamp = chatReferences[message.signature]?.edit?.timestamp
|
||||
if (
|
||||
chatReferences[message.signature]?.edit?.messageText &&
|
||||
message?.messageText
|
||||
) {
|
||||
message.messageText =
|
||||
chatReferences[message.signature]?.edit?.messageText;
|
||||
message.isEdit = true;
|
||||
message.editTimestamp =
|
||||
chatReferences[message.signature]?.edit?.timestamp;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Check if message is updating
|
||||
@ -292,7 +304,10 @@ export const ChatList = ({
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error processing message:", error, { index, message });
|
||||
console.error('Error processing message:', error, {
|
||||
index,
|
||||
message,
|
||||
});
|
||||
// Gracefully handle the error by providing fallback data
|
||||
message = null;
|
||||
reply = null;
|
||||
@ -304,16 +319,16 @@ export const ChatList = ({
|
||||
<div
|
||||
key={virtualRow.index}
|
||||
style={{
|
||||
position: "absolute",
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: "50%",
|
||||
left: '50%',
|
||||
transform: `translateY(${virtualRow.start}px) translateX(-50%)`,
|
||||
width: "100%",
|
||||
padding: "10px 0",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
flexDirection: "column",
|
||||
gap: "5px",
|
||||
width: '100%',
|
||||
padding: '10px 0',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'column',
|
||||
gap: '5px',
|
||||
}}
|
||||
>
|
||||
<Typography>Error loading message.</Typography>
|
||||
@ -327,17 +342,17 @@ export const ChatList = ({
|
||||
ref={rowVirtualizer.measureElement} //measure dynamic row height
|
||||
key={message.signature}
|
||||
style={{
|
||||
position: "absolute",
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '5px',
|
||||
left: '50%', // Move to the center horizontally
|
||||
overscrollBehavior: 'none',
|
||||
padding: '10px 0',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: "50%", // Move to the center horizontally
|
||||
transform: `translateY(${virtualRow.start}px) translateX(-50%)`, // Adjust for centering
|
||||
width: "100%", // Control width (90% of the parent)
|
||||
padding: "10px 0",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
overscrollBehavior: "none",
|
||||
flexDirection: "column",
|
||||
gap: "5px",
|
||||
width: '100%', // Control width (90% of the parent)
|
||||
}}
|
||||
>
|
||||
<ErrorBoundary
|
||||
@ -363,13 +378,11 @@ export const ChatList = ({
|
||||
reactions={reactions}
|
||||
isUpdating={isUpdating}
|
||||
isPrivate={isPrivate}
|
||||
|
||||
/>
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -377,17 +390,17 @@ export const ChatList = ({
|
||||
<button
|
||||
onClick={() => scrollToBottom()}
|
||||
style={{
|
||||
backgroundColor: 'var(--unread)',
|
||||
border: 'none',
|
||||
borderRadius: '20px',
|
||||
bottom: 20,
|
||||
position: "absolute",
|
||||
color: theme.palette.text.primary,
|
||||
cursor: 'pointer',
|
||||
outline: 'none',
|
||||
padding: '10px 20px',
|
||||
position: 'absolute',
|
||||
right: 20,
|
||||
backgroundColor: "var(--unread)",
|
||||
color: "black",
|
||||
padding: "10px 20px",
|
||||
borderRadius: "20px",
|
||||
cursor: "pointer",
|
||||
zIndex: 10,
|
||||
border: "none",
|
||||
outline: "none",
|
||||
}}
|
||||
>
|
||||
Scroll to Unread Messages
|
||||
@ -397,18 +410,18 @@ export const ChatList = ({
|
||||
<button
|
||||
onClick={() => scrollToBottom()}
|
||||
style={{
|
||||
backgroundColor: theme.palette.background.default,
|
||||
border: 'none',
|
||||
borderRadius: '20px',
|
||||
bottom: 20,
|
||||
position: "absolute",
|
||||
color: theme.palette.text.primary,
|
||||
cursor: 'pointer',
|
||||
fontSize: '16px',
|
||||
outline: 'none',
|
||||
padding: '10px 20px',
|
||||
position: 'absolute',
|
||||
right: 20,
|
||||
backgroundColor: "var(--Mail-Background)",
|
||||
color: "white",
|
||||
padding: "10px 20px",
|
||||
borderRadius: "20px",
|
||||
cursor: "pointer",
|
||||
zIndex: 10,
|
||||
border: "none",
|
||||
outline: "none",
|
||||
fontSize: "16px",
|
||||
}}
|
||||
>
|
||||
Scroll to bottom
|
||||
|
||||
@ -6,124 +6,132 @@ import {
|
||||
MenuItem,
|
||||
Select,
|
||||
Typography,
|
||||
Tooltip
|
||||
} from "@mui/material";
|
||||
import React, { useEffect, useMemo, useRef, useState } from "react";
|
||||
import SearchIcon from "@mui/icons-material/Search";
|
||||
import { Spacer } from "../../common/Spacer";
|
||||
import AlternateEmailIcon from "@mui/icons-material/AlternateEmail";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
Tooltip,
|
||||
useTheme,
|
||||
} from '@mui/material';
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import SearchIcon from '@mui/icons-material/Search';
|
||||
import { Spacer } from '../../common/Spacer';
|
||||
import AlternateEmailIcon from '@mui/icons-material/AlternateEmail';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import InsertLinkIcon from '@mui/icons-material/InsertLink';
|
||||
import Highlight from "@tiptap/extension-highlight";
|
||||
import Mention from "@tiptap/extension-mention";
|
||||
import StarterKit from "@tiptap/starter-kit";
|
||||
import Underline from "@tiptap/extension-underline";
|
||||
import Highlight from '@tiptap/extension-highlight';
|
||||
import Mention from '@tiptap/extension-mention';
|
||||
import StarterKit from '@tiptap/starter-kit';
|
||||
import Underline from '@tiptap/extension-underline';
|
||||
import {
|
||||
AppsSearchContainer,
|
||||
AppsSearchLeft,
|
||||
AppsSearchRight,
|
||||
} from "../Apps/Apps-styles";
|
||||
import IconSearch from "../../assets/svgs/Search.svg";
|
||||
import IconClearInput from "../../assets/svgs/ClearInput.svg";
|
||||
import {
|
||||
AutoSizer,
|
||||
CellMeasurer,
|
||||
CellMeasurerCache,
|
||||
List,
|
||||
} from "react-virtualized";
|
||||
import { getBaseApiReact } from "../../App";
|
||||
import { MessageDisplay } from "./MessageDisplay";
|
||||
import { useVirtualizer } from "@tanstack/react-virtual";
|
||||
import { formatTimestamp } from "../../utils/time";
|
||||
import { ContextMenuMentions } from "../ContextMenuMentions";
|
||||
} from '../Apps/Apps-styles';
|
||||
import IconSearch from '../../assets/svgs/Search.svg';
|
||||
import IconClearInput from '../../assets/svgs/ClearInput.svg';
|
||||
import { CellMeasurerCache } from 'react-virtualized';
|
||||
import { getBaseApiReact } from '../../App';
|
||||
import { MessageDisplay } from './MessageDisplay';
|
||||
import { useVirtualizer } from '@tanstack/react-virtual';
|
||||
import { formatTimestamp } from '../../utils/time';
|
||||
import { ContextMenuMentions } from '../ContextMenuMentions';
|
||||
import { convert } from 'html-to-text';
|
||||
import { generateHTML } from "@tiptap/react";
|
||||
import ErrorBoundary from "../../common/ErrorBoundary";
|
||||
import { generateHTML } from '@tiptap/react';
|
||||
import ErrorBoundary from '../../common/ErrorBoundary';
|
||||
|
||||
const extractTextFromHTML = (htmlString = '') => {
|
||||
return convert(htmlString, {
|
||||
wordwrap: false, // Disable word wrapping
|
||||
})?.toLowerCase();
|
||||
};
|
||||
|
||||
const cache = new CellMeasurerCache({
|
||||
fixedWidth: true,
|
||||
defaultHeight: 50,
|
||||
});
|
||||
|
||||
export const ChatOptions = ({ messages : untransformedMessages, goToMessage, members, myName, selectedGroup, openQManager, isPrivate }) => {
|
||||
const [mode, setMode] = useState("default");
|
||||
const [searchValue, setSearchValue] = useState("");
|
||||
export const ChatOptions = ({
|
||||
messages: untransformedMessages,
|
||||
goToMessage,
|
||||
members,
|
||||
myName,
|
||||
selectedGroup,
|
||||
openQManager,
|
||||
isPrivate,
|
||||
}) => {
|
||||
const [mode, setMode] = useState('default');
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
const [selectedMember, setSelectedMember] = useState(0);
|
||||
|
||||
const theme = useTheme();
|
||||
const parentRef = useRef();
|
||||
const parentRefMentions = useRef();
|
||||
const [lastMentionTimestamp, setLastMentionTimestamp] = useState(null)
|
||||
const [debouncedValue, setDebouncedValue] = useState(""); // Debounced value
|
||||
const [lastMentionTimestamp, setLastMentionTimestamp] = useState(null);
|
||||
const [debouncedValue, setDebouncedValue] = useState(''); // Debounced value
|
||||
const messages = useMemo(() => {
|
||||
return untransformedMessages?.map((item) => {
|
||||
if (item?.messageText) {
|
||||
let transformedMessage = item?.messageText
|
||||
let transformedMessage = item?.messageText;
|
||||
try {
|
||||
transformedMessage = generateHTML(item?.messageText, [
|
||||
StarterKit,
|
||||
Underline,
|
||||
Highlight,
|
||||
Mention
|
||||
])
|
||||
Mention,
|
||||
]);
|
||||
return {
|
||||
...item,
|
||||
messageText: transformedMessage
|
||||
}
|
||||
messageText: transformedMessage,
|
||||
};
|
||||
} catch (error) {
|
||||
// error
|
||||
}
|
||||
} else return item
|
||||
})
|
||||
}, [untransformedMessages])
|
||||
} else return item;
|
||||
});
|
||||
}, [untransformedMessages]);
|
||||
|
||||
const getTimestampMention = async () => {
|
||||
try {
|
||||
return new Promise((res, rej) => {
|
||||
window.sendMessage("getTimestampMention")
|
||||
window
|
||||
.sendMessage('getTimestampMention')
|
||||
.then((response) => {
|
||||
if (!response?.error) {
|
||||
if (response && selectedGroup && response[selectedGroup]) {
|
||||
setLastMentionTimestamp(response[selectedGroup])
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
setLastMentionTimestamp(response[selectedGroup]);
|
||||
}
|
||||
|
||||
res(response);
|
||||
return;
|
||||
}
|
||||
rej(response.error);
|
||||
})
|
||||
.catch((error) => {
|
||||
rej(error.message || "An error occurred");
|
||||
rej(error.message || 'An error occurred');
|
||||
});
|
||||
|
||||
});
|
||||
} catch (error) {}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (mode === 'mentions' && selectedGroup) {
|
||||
window.sendMessage("addTimestampMention", {
|
||||
window
|
||||
.sendMessage('addTimestampMention', {
|
||||
timestamp: Date.now(),
|
||||
groupId: selectedGroup
|
||||
}).then((res)=> {
|
||||
getTimestampMention()
|
||||
}).catch((error) => {
|
||||
console.error("Failed to add timestamp:", error.message || "An error occurred");
|
||||
groupId: selectedGroup,
|
||||
})
|
||||
.then((res) => {
|
||||
getTimestampMention();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(
|
||||
'Failed to add timestamp:',
|
||||
error.message || 'An error occurred'
|
||||
);
|
||||
});
|
||||
}
|
||||
}, [mode, selectedGroup])
|
||||
}, [mode, selectedGroup]);
|
||||
|
||||
useEffect(() => {
|
||||
getTimestampMention()
|
||||
}, [])
|
||||
getTimestampMention();
|
||||
}, []);
|
||||
|
||||
// Debounce logic
|
||||
useEffect(() => {
|
||||
@ -151,32 +159,39 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
|
||||
.filter(
|
||||
(message) =>
|
||||
message?.senderName === selectedMember &&
|
||||
extractTextFromHTML(isPrivate ? message?.messageText : message?.decryptedData?.message)?.includes(
|
||||
debouncedValue.toLowerCase()
|
||||
)
|
||||
extractTextFromHTML(
|
||||
isPrivate ? message?.messageText : message?.decryptedData?.message
|
||||
)?.includes(debouncedValue.toLowerCase())
|
||||
)
|
||||
?.sort((a, b) => b?.timestamp - a?.timestamp);
|
||||
}
|
||||
return messages
|
||||
.filter((message) =>
|
||||
extractTextFromHTML(isPrivate === false ? message?.messageText : message?.decryptedData?.message)?.includes(debouncedValue.toLowerCase())
|
||||
extractTextFromHTML(
|
||||
isPrivate === false
|
||||
? message?.messageText
|
||||
: message?.decryptedData?.message
|
||||
)?.includes(debouncedValue.toLowerCase())
|
||||
)
|
||||
?.sort((a, b) => b?.timestamp - a?.timestamp);
|
||||
}, [debouncedValue, messages, selectedMember, isPrivate]);
|
||||
|
||||
const mentionList = useMemo(() => {
|
||||
if(!messages || messages.length === 0 || !myName) return []
|
||||
if (!messages || messages.length === 0 || !myName) return [];
|
||||
if (isPrivate === false) {
|
||||
return messages
|
||||
.filter((message) =>
|
||||
extractTextFromHTML(message?.messageText)?.includes(`@${myName?.toLowerCase()}`)
|
||||
extractTextFromHTML(message?.messageText)?.includes(
|
||||
`@${myName?.toLowerCase()}`
|
||||
)
|
||||
)
|
||||
?.sort((a, b) => b?.timestamp - a?.timestamp);
|
||||
|
||||
}
|
||||
return messages
|
||||
.filter((message) =>
|
||||
extractTextFromHTML(message?.decryptedData?.message)?.includes(`@${myName?.toLowerCase()}`)
|
||||
extractTextFromHTML(message?.decryptedData?.message)?.includes(
|
||||
`@${myName?.toLowerCase()}`
|
||||
)
|
||||
)
|
||||
?.sort((a, b) => b?.timestamp - a?.timestamp);
|
||||
}, [messages, myName, isPrivate]);
|
||||
@ -203,60 +218,54 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
|
||||
overscan: 10, // Number of items to render outside the visible area to improve smoothness
|
||||
});
|
||||
|
||||
|
||||
|
||||
if (mode === "mentions") {
|
||||
if (mode === 'mentions') {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
width: "300px",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
// alignItems: 'center',
|
||||
backgroundColor: "#1F2023",
|
||||
borderBottomLeftRadius: "20px",
|
||||
borderTopLeftRadius: "20px",
|
||||
overflow: "auto",
|
||||
flexShrink: 0,
|
||||
backgroundColor: theme.palette.background.default,
|
||||
borderBottomLeftRadius: '20px',
|
||||
borderTopLeftRadius: '20px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
flexGrow: 0,
|
||||
flexShrink: 0,
|
||||
height: '100%',
|
||||
overflow: 'auto',
|
||||
width: '300px',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
padding: "10px",
|
||||
display: "flex",
|
||||
justifyContent: "flex-end",
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
padding: '10px',
|
||||
}}
|
||||
>
|
||||
<CloseIcon
|
||||
onClick={() => {
|
||||
setMode("default");
|
||||
setMode('default');
|
||||
}}
|
||||
sx={{
|
||||
cursor: "pointer",
|
||||
color: "white",
|
||||
cursor: 'pointer',
|
||||
color: theme.palette.text.primary,
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
|
||||
|
||||
|
||||
{mentionList?.length === 0 && (
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "11px",
|
||||
fontSize: '11px',
|
||||
fontWeight: 400,
|
||||
color: "rgba(255, 255, 255, 0.2)",
|
||||
color: theme.palette.text.primary,
|
||||
}}
|
||||
>
|
||||
No results
|
||||
@ -264,46 +273,48 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
|
||||
)}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: "100%",
|
||||
position: "relative",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
width: "100%",
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
ref={parentRefMentions}
|
||||
className="List"
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexGrow: 1,
|
||||
overflow: "auto",
|
||||
position: "relative",
|
||||
display: "flex",
|
||||
height: "0px",
|
||||
height: '0px',
|
||||
overflow: 'auto',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: rowVirtualizerMentions.getTotalSize(),
|
||||
width: "100%",
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
{rowVirtualizerMentions.getVirtualItems().map((virtualRow) => {
|
||||
{rowVirtualizerMentions
|
||||
.getVirtualItems()
|
||||
.map((virtualRow) => {
|
||||
const index = virtualRow.index;
|
||||
let message = mentionList[index];
|
||||
return (
|
||||
@ -312,21 +323,24 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
|
||||
ref={rowVirtualizerMentions.measureElement} //measure dynamic row height
|
||||
key={message.signature}
|
||||
style={{
|
||||
position: "absolute",
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '5px',
|
||||
left: '50%', // Move to the center horizontally
|
||||
overscrollBehavior: 'none',
|
||||
padding: '10px 0',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: "50%", // Move to the center horizontally
|
||||
transform: `translateY(${virtualRow.start}px) translateX(-50%)`, // Adjust for centering
|
||||
width: "100%", // Control width (90% of the parent)
|
||||
padding: "10px 0",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
overscrollBehavior: "none",
|
||||
flexDirection: "column",
|
||||
gap: "5px",
|
||||
width: '100%', // Control width (90% of the parent)
|
||||
}}
|
||||
>
|
||||
<ShowMessage messages={messages} goToMessage={goToMessage} message={message} />
|
||||
|
||||
<ShowMessage
|
||||
messages={messages}
|
||||
goToMessage={goToMessage}
|
||||
message={message}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
@ -340,47 +354,46 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
|
||||
);
|
||||
}
|
||||
|
||||
if (mode === "search") {
|
||||
if (mode === 'search') {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
width: "300px",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
// alignItems: 'center',
|
||||
backgroundColor: "#1F2023",
|
||||
borderBottomLeftRadius: "20px",
|
||||
borderTopLeftRadius: "20px",
|
||||
overflow: "auto",
|
||||
flexShrink: 0,
|
||||
backgroundColor: theme.palette.background.default,
|
||||
borderBottomLeftRadius: '20px',
|
||||
borderTopLeftRadius: '20px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
flexGrow: 0,
|
||||
flexShrink: 0,
|
||||
height: '100%',
|
||||
overflow: 'auto',
|
||||
width: '300px',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
padding: "10px",
|
||||
display: "flex",
|
||||
justifyContent: "flex-end",
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
padding: '10px',
|
||||
}}
|
||||
>
|
||||
<CloseIcon
|
||||
onClick={() => {
|
||||
setMode("default");
|
||||
setMode('default');
|
||||
}}
|
||||
sx={{
|
||||
cursor: "pointer",
|
||||
color: "white",
|
||||
cursor: 'pointer',
|
||||
color: theme.palette.text.primary,
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<AppsSearchContainer>
|
||||
@ -392,8 +405,8 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
|
||||
sx={{ ml: 1, flex: 1 }}
|
||||
placeholder="Search chat text"
|
||||
inputProps={{
|
||||
"aria-label": "Search for apps",
|
||||
fontSize: "16px",
|
||||
'aria-label': 'Search for apps',
|
||||
fontSize: '16px',
|
||||
fontWeight: 400,
|
||||
}}
|
||||
/>
|
||||
@ -402,7 +415,7 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
|
||||
{searchValue && (
|
||||
<ButtonBase
|
||||
onClick={() => {
|
||||
setSearchValue("");
|
||||
setSearchValue('');
|
||||
}}
|
||||
>
|
||||
<img src={IconClearInput} />
|
||||
@ -412,19 +425,19 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
|
||||
</AppsSearchContainer>
|
||||
<Box
|
||||
sx={{
|
||||
padding: "10px",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: 'center'
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
padding: '10px',
|
||||
}}
|
||||
>
|
||||
<Select
|
||||
size="small"
|
||||
labelId="demo-simple-select-label"
|
||||
id="demo-simple-select"
|
||||
value={selectedMember}
|
||||
label="By member"
|
||||
labelId="demo-simple-select-label"
|
||||
onChange={(e) => setSelectedMember(e.target.value)}
|
||||
size="small"
|
||||
value={selectedMember}
|
||||
>
|
||||
<MenuItem value={0}>
|
||||
<em>By member</em>
|
||||
@ -443,20 +456,19 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
|
||||
setSelectedMember(0);
|
||||
}}
|
||||
sx={{
|
||||
cursor: "pointer",
|
||||
color: "white",
|
||||
cursor: 'pointer',
|
||||
color: theme.palette.text.primary,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
</Box>
|
||||
|
||||
{debouncedValue && searchedList?.length === 0 && (
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "11px",
|
||||
fontSize: '11px',
|
||||
fontWeight: 400,
|
||||
color: "rgba(255, 255, 255, 0.2)",
|
||||
color: theme.palette.text.secondary,
|
||||
}}
|
||||
>
|
||||
No results
|
||||
@ -464,66 +476,65 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
|
||||
)}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: "100%",
|
||||
position: "relative",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
width: "100%",
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
ref={parentRef}
|
||||
className="List"
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexGrow: 1,
|
||||
overflow: "auto",
|
||||
position: "relative",
|
||||
display: "flex",
|
||||
height: "0px",
|
||||
height: '0px',
|
||||
overflow: 'auto',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: rowVirtualizer.getTotalSize(),
|
||||
width: "100%",
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
{rowVirtualizer.getVirtualItems().map((virtualRow) => {
|
||||
const index = virtualRow.index;
|
||||
let message = searchedList[index];
|
||||
return (
|
||||
|
||||
<div
|
||||
data-index={virtualRow.index} //needed for dynamic row height measurement
|
||||
ref={rowVirtualizer.measureElement} //measure dynamic row height
|
||||
key={message.signature}
|
||||
style={{
|
||||
position: "absolute",
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '5px',
|
||||
left: '50%', // Move to the center horizontally
|
||||
overscrollBehavior: 'none',
|
||||
padding: '10px 0',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: "50%", // Move to the center horizontally
|
||||
transform: `translateY(${virtualRow.start}px) translateX(-50%)`, // Adjust for centering
|
||||
width: "100%", // Control width (90% of the parent)
|
||||
padding: "10px 0",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
overscrollBehavior: "none",
|
||||
flexDirection: "column",
|
||||
gap: "5px",
|
||||
width: '100%', // Control width (90% of the parent)
|
||||
}}
|
||||
>
|
||||
<ErrorBoundary
|
||||
@ -533,10 +544,13 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
|
||||
</Typography>
|
||||
}
|
||||
>
|
||||
<ShowMessage message={message} goToMessage={goToMessage} messages={messages} />
|
||||
<ShowMessage
|
||||
message={message}
|
||||
goToMessage={goToMessage}
|
||||
messages={messages}
|
||||
/>
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
@ -551,46 +565,58 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
width: "50px",
|
||||
height: "100%",
|
||||
gap: "20px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '20px',
|
||||
height: '100%',
|
||||
width: '50px',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
padding: "10px",
|
||||
gap: "20px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#1F2023",
|
||||
borderBottomLeftRadius: "20px",
|
||||
borderTopLeftRadius: "20px",
|
||||
minHeight: "200px",
|
||||
alignItems: 'center',
|
||||
backgroundColor: theme.palette.background.default,
|
||||
borderBottomLeftRadius: '20px',
|
||||
borderTopLeftRadius: '20px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '20px',
|
||||
minHeight: '200px',
|
||||
padding: '10px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<ButtonBase
|
||||
onClick={() => {
|
||||
setMode('search');
|
||||
}}
|
||||
>
|
||||
<ButtonBase onClick={() => {
|
||||
setMode("search")
|
||||
}}>
|
||||
<Tooltip
|
||||
title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>SEARCH</span>}
|
||||
title={
|
||||
<span
|
||||
style={{
|
||||
color: theme.palette.text.primary,
|
||||
fontSize: '14px',
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
SEARCH
|
||||
</span>
|
||||
}
|
||||
placement="left"
|
||||
arrow
|
||||
sx={{ fontSize: "24" }}
|
||||
sx={{ fontSize: '24' }}
|
||||
slotProps={{
|
||||
tooltip: {
|
||||
sx: {
|
||||
color: "#ffffff",
|
||||
backgroundColor: "#444444",
|
||||
color: theme.palette.text.primary,
|
||||
backgroundColor: theme.palette.background.default,
|
||||
},
|
||||
},
|
||||
arrow: {
|
||||
sx: {
|
||||
color: "#444444",
|
||||
color: theme.palette.text.secondary,
|
||||
},
|
||||
},
|
||||
}}
|
||||
@ -598,106 +624,137 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
|
||||
<SearchIcon />
|
||||
</Tooltip>
|
||||
</ButtonBase>
|
||||
<ButtonBase onClick={() => {
|
||||
setMode("default")
|
||||
setSearchValue('')
|
||||
setSelectedMember(0)
|
||||
openQManager()
|
||||
}}>
|
||||
<ButtonBase
|
||||
onClick={() => {
|
||||
setMode('default');
|
||||
setSearchValue('');
|
||||
setSelectedMember(0);
|
||||
openQManager();
|
||||
}}
|
||||
>
|
||||
<Tooltip
|
||||
title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>Q-MANAGER</span>}
|
||||
title={
|
||||
<span
|
||||
style={{
|
||||
color: theme.palette.text.primary,
|
||||
fontSize: '14px',
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
Q-MANAGER
|
||||
</span>
|
||||
}
|
||||
placement="left"
|
||||
arrow
|
||||
sx={{ fontSize: "24" }}
|
||||
sx={{ fontSize: '24' }}
|
||||
slotProps={{
|
||||
tooltip: {
|
||||
sx: {
|
||||
color: "#ffffff",
|
||||
backgroundColor: "#444444",
|
||||
color: theme.palette.text.primary,
|
||||
backgroundColor: theme.palette.background.default,
|
||||
},
|
||||
},
|
||||
arrow: {
|
||||
sx: {
|
||||
color: "#444444",
|
||||
color: theme.palette.text.secondary,
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<InsertLinkIcon sx={{ color: 'white' }} />
|
||||
<InsertLinkIcon sx={{ color: theme.palette.text.primary }} />
|
||||
</Tooltip>
|
||||
</ButtonBase>
|
||||
<ContextMenuMentions getTimestampMention={getTimestampMention} groupId={selectedGroup}>
|
||||
<ButtonBase onClick={() => {
|
||||
setMode("mentions")
|
||||
setSearchValue('')
|
||||
setSelectedMember(0)
|
||||
}}>
|
||||
<ContextMenuMentions
|
||||
getTimestampMention={getTimestampMention}
|
||||
groupId={selectedGroup}
|
||||
>
|
||||
<ButtonBase
|
||||
onClick={() => {
|
||||
setMode('mentions');
|
||||
setSearchValue('');
|
||||
setSelectedMember(0);
|
||||
}}
|
||||
>
|
||||
<Tooltip
|
||||
title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>MENTIONED</span>}
|
||||
title={
|
||||
<span
|
||||
style={{
|
||||
color: theme.palette.text.primary,
|
||||
fontSize: '14px',
|
||||
fontWeight: 700,
|
||||
}}
|
||||
>
|
||||
MENTIONED
|
||||
</span>
|
||||
}
|
||||
placement="left"
|
||||
arrow
|
||||
sx={{ fontSize: "24" }}
|
||||
sx={{ fontSize: '24' }}
|
||||
slotProps={{
|
||||
tooltip: {
|
||||
sx: {
|
||||
color: "#ffffff",
|
||||
backgroundColor: "#444444",
|
||||
color: theme.palette.text.primary,
|
||||
backgroundColor: theme.palette.background.default,
|
||||
},
|
||||
},
|
||||
arrow: {
|
||||
sx: {
|
||||
color: "#444444",
|
||||
color: theme.palette.text.secondary,
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<AlternateEmailIcon sx={{
|
||||
color: mentionList?.length > 0 && (!lastMentionTimestamp || lastMentionTimestamp < mentionList[0]?.timestamp) ? 'var(--unread)' : 'white'
|
||||
}} />
|
||||
<AlternateEmailIcon
|
||||
sx={{
|
||||
color:
|
||||
mentionList?.length > 0 &&
|
||||
(!lastMentionTimestamp ||
|
||||
lastMentionTimestamp < mentionList[0]?.timestamp)
|
||||
? 'var(--unread)'
|
||||
: 'white',
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
</ButtonBase>
|
||||
|
||||
</ContextMenuMentions>
|
||||
|
||||
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
const ShowMessage = ({ message, goToMessage, messages }) => {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
width: "100%",
|
||||
padding: "0px 20px",
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
padding: '0px 20px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
width: "100%",
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "15px",
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
gap: '15px',
|
||||
}}
|
||||
>
|
||||
<Avatar
|
||||
sx={{
|
||||
backgroundColor: "#27282c",
|
||||
color: "white",
|
||||
height: "25px",
|
||||
width: "25px",
|
||||
backgroundColor: theme.palette.background.default,
|
||||
color: theme.palette.text.primary,
|
||||
height: '25px',
|
||||
width: '25px',
|
||||
}}
|
||||
alt={message?.senderName}
|
||||
src={`${getBaseApiReact()}/arbitrary/THUMBNAIL/${
|
||||
@ -709,26 +766,31 @@ const ShowMessage = ({message, goToMessage, messages})=> {
|
||||
<Typography
|
||||
sx={{
|
||||
fontWight: 600,
|
||||
fontFamily: "Inter",
|
||||
color: "cadetBlue",
|
||||
fontFamily: 'Inter',
|
||||
color: 'cadetBlue',
|
||||
}}
|
||||
>
|
||||
{message?.senderName}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Spacer height="5px" />
|
||||
<Typography sx={{
|
||||
fontSize: '12px'
|
||||
}}>{formatTimestamp(message.timestamp)}</Typography>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: '12px',
|
||||
}}
|
||||
>
|
||||
{formatTimestamp(message.timestamp)}
|
||||
</Typography>
|
||||
<Box
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
onClick={() => {
|
||||
const findMsgIndex = messages.findIndex(
|
||||
(item) =>
|
||||
item?.signature === message?.signature
|
||||
(item) => item?.signature === message?.signature
|
||||
);
|
||||
if (findMsgIndex !== -1) {
|
||||
goToMessage(findMsgIndex);
|
||||
@ -736,19 +798,14 @@ const ShowMessage = ({message, goToMessage, messages})=> {
|
||||
}}
|
||||
>
|
||||
{message?.messageText && (
|
||||
<MessageDisplay
|
||||
htmlContent={message?.messageText}
|
||||
/>
|
||||
<MessageDisplay htmlContent={message?.messageText} />
|
||||
)}
|
||||
{message?.decryptedData?.message && (
|
||||
<MessageDisplay
|
||||
htmlContent={
|
||||
message?.decryptedData?.message || "<p></p>"
|
||||
}
|
||||
htmlContent={message?.decryptedData?.message || '<p></p>'}
|
||||
/>
|
||||
)}
|
||||
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
@ -29,15 +29,14 @@ import { getFee } from '../../background';
|
||||
import { MyContext, isMobile } from '../../App';
|
||||
import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events';
|
||||
|
||||
export const Label = styled('label')(
|
||||
({ theme }) => `
|
||||
export const Label = styled('label')`
|
||||
display: block;
|
||||
font-family: 'IBM Plex Sans', sans-serif;
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
font-weight: 400;
|
||||
`
|
||||
);
|
||||
margin-bottom: 4px;
|
||||
`;
|
||||
|
||||
const Transition = React.forwardRef(function Transition(
|
||||
props: TransitionProps & {
|
||||
children: React.ReactElement;
|
||||
|
||||
@ -7,6 +7,7 @@ import {
|
||||
ListItemAvatar,
|
||||
ListItemText,
|
||||
Typography,
|
||||
useTheme,
|
||||
} from '@mui/material';
|
||||
import React, {
|
||||
useCallback,
|
||||
@ -477,22 +478,20 @@ export const Group = ({
|
||||
}
|
||||
setIsOpenSideViewGroups((prev) => !prev);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
timestampEnterDataRef.current = timestampEnterData;
|
||||
}, [timestampEnterData]);
|
||||
|
||||
useEffect(() => {
|
||||
isFocusedRef.current = isFocused;
|
||||
}, [isFocused]);
|
||||
useEffect(() => {
|
||||
groupSectionRef.current = groupSection;
|
||||
}, [groupSection]);
|
||||
|
||||
useEffect(() => {
|
||||
selectedGroupRef.current = selectedGroup;
|
||||
setSelectedGroupId(selectedGroup?.groupId);
|
||||
}, [selectedGroup]);
|
||||
|
||||
useEffect(() => {
|
||||
selectedDirectRef.current = selectedDirect;
|
||||
}, [selectedDirect]);
|
||||
@ -852,6 +851,7 @@ export const Group = ({
|
||||
Object.keys(groupsProperties)
|
||||
)
|
||||
) {
|
||||
// TODO: empty block. Check it!
|
||||
} else {
|
||||
getGroupsProperties(myAddress);
|
||||
}
|
||||
@ -976,6 +976,7 @@ export const Group = ({
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
!initiatedGetMembers.current &&
|
||||
@ -1524,6 +1525,7 @@ export const Group = ({
|
||||
setMobileViewMode('home');
|
||||
}
|
||||
if (!isMobile) {
|
||||
// TODO: empty block. Check it!
|
||||
}
|
||||
setDesktopViewMode('home');
|
||||
|
||||
@ -1601,27 +1603,29 @@ export const Group = ({
|
||||
}
|
||||
};
|
||||
|
||||
const theme = useTheme();
|
||||
|
||||
const renderDirects = () => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
width: isMobile ? '100%' : '380px',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'flex-start',
|
||||
height: isMobile ? `calc(${rootHeight} - 45px)` : '100%',
|
||||
background: 'var(--bg-primary)',
|
||||
background: theme.palette.background.default,
|
||||
borderRadius: '0px 15px 15px 0px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: isMobile ? `calc(${rootHeight} - 45px)` : '100%',
|
||||
width: isMobile ? '100%' : '380px',
|
||||
}}
|
||||
>
|
||||
{!isMobile && (
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
display: 'flex',
|
||||
gap: '10px',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<ButtonBase
|
||||
@ -1634,8 +1638,8 @@ export const Group = ({
|
||||
groupChatHasUnread || groupsAnnHasUnread
|
||||
? 'var(--unread)'
|
||||
: desktopSideView === 'groups'
|
||||
? 'white'
|
||||
: 'rgba(250, 250, 250, 0.5)'
|
||||
? theme.palette.text.primary
|
||||
: theme.palette.text.secondary
|
||||
}
|
||||
label="Groups"
|
||||
selected={desktopSideView === 'groups'}
|
||||
@ -1647,8 +1651,8 @@ export const Group = ({
|
||||
groupChatHasUnread || groupsAnnHasUnread
|
||||
? 'var(--unread)'
|
||||
: desktopSideView === 'groups'
|
||||
? 'white'
|
||||
: 'rgba(250, 250, 250, 0.5)'
|
||||
? theme.palette.text.primary
|
||||
: theme.palette.text.secondary
|
||||
}
|
||||
/>
|
||||
</IconWrapper>
|
||||
@ -1664,8 +1668,8 @@ export const Group = ({
|
||||
directChatHasUnread
|
||||
? 'var(--unread)'
|
||||
: desktopSideView === 'directs'
|
||||
? 'white'
|
||||
: 'rgba(250, 250, 250, 0.5)'
|
||||
? theme.palette.text.primary
|
||||
: theme.palette.text.secondary
|
||||
}
|
||||
label="Messaging"
|
||||
selected={desktopSideView === 'directs'}
|
||||
@ -1676,8 +1680,8 @@ export const Group = ({
|
||||
directChatHasUnread
|
||||
? 'var(--unread)'
|
||||
: desktopSideView === 'directs'
|
||||
? 'white'
|
||||
: 'rgba(250, 250, 250, 0.5)'
|
||||
? theme.palette.text.primary
|
||||
: theme.palette.text.secondary
|
||||
}
|
||||
/>
|
||||
</IconWrapper>
|
||||
@ -1687,12 +1691,12 @@ export const Group = ({
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'flex-start',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
flexGrow: 1,
|
||||
overflowY: 'auto',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
{directs.map((direct: any) => (
|
||||
@ -1731,11 +1735,14 @@ export const Group = ({
|
||||
width: '100%',
|
||||
flexDirection: 'column',
|
||||
cursor: 'pointer',
|
||||
border: '1px #232428 solid',
|
||||
borderColor: theme.palette.primary,
|
||||
borderWidth: '1px',
|
||||
borderStyle: 'solid',
|
||||
padding: '2px',
|
||||
borderRadius: '2px',
|
||||
background:
|
||||
direct?.address === selectedDirect?.address && 'white',
|
||||
direct?.address === selectedDirect?.address &&
|
||||
theme.palette.background.default,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
@ -1748,8 +1755,8 @@ export const Group = ({
|
||||
<ListItemAvatar>
|
||||
<Avatar
|
||||
sx={{
|
||||
background: '#232428',
|
||||
color: 'white',
|
||||
background: theme.palette.background.default,
|
||||
color: theme.palette.text.primary,
|
||||
}}
|
||||
alt={direct?.name || direct?.address}
|
||||
>
|
||||
@ -1767,7 +1774,7 @@ export const Group = ({
|
||||
style: {
|
||||
color:
|
||||
direct?.address === selectedDirect?.address &&
|
||||
'black',
|
||||
theme.palette.text.primary,
|
||||
textWrap: 'wrap',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
@ -1776,7 +1783,7 @@ export const Group = ({
|
||||
style: {
|
||||
color:
|
||||
direct?.address === selectedDirect?.address &&
|
||||
'black',
|
||||
theme.palette.text.primary,
|
||||
fontSize: '12px',
|
||||
},
|
||||
}}
|
||||
@ -1821,7 +1828,7 @@ export const Group = ({
|
||||
>
|
||||
<CreateIcon
|
||||
sx={{
|
||||
color: 'white',
|
||||
color: theme.palette.text.primary,
|
||||
}}
|
||||
/>
|
||||
New Chat
|
||||
@ -1840,7 +1847,7 @@ export const Group = ({
|
||||
flexDirection: 'column',
|
||||
alignItems: 'flex-start',
|
||||
height: isMobile ? `calc(${rootHeight} - 45px)` : '100%',
|
||||
background: !isMobile && 'var(--bg-primary)',
|
||||
background: !isMobile && theme.palette.background.default,
|
||||
borderRadius: !isMobile && '0px 15px 15px 0px',
|
||||
}}
|
||||
>
|
||||
@ -1864,8 +1871,8 @@ export const Group = ({
|
||||
groupChatHasUnread || groupsAnnHasUnread
|
||||
? 'var(--unread)'
|
||||
: desktopSideView === 'groups'
|
||||
? 'white'
|
||||
: 'rgba(250, 250, 250, 0.5)'
|
||||
? theme.palette.text.primary
|
||||
: theme.palette.text.secondary
|
||||
}
|
||||
label="Groups"
|
||||
selected={desktopSideView === 'groups'}
|
||||
@ -1877,8 +1884,8 @@ export const Group = ({
|
||||
groupChatHasUnread || groupsAnnHasUnread
|
||||
? 'var(--unread)'
|
||||
: desktopSideView === 'groups'
|
||||
? 'white'
|
||||
: 'rgba(250, 250, 250, 0.5)'
|
||||
? theme.palette.text.primary
|
||||
: theme.palette.text.secondary
|
||||
}
|
||||
/>
|
||||
</IconWrapper>
|
||||
@ -1894,8 +1901,8 @@ export const Group = ({
|
||||
directChatHasUnread
|
||||
? 'var(--unread)'
|
||||
: desktopSideView === 'directs'
|
||||
? 'white'
|
||||
: 'rgba(250, 250, 250, 0.5)'
|
||||
? theme.palette.text.primary
|
||||
: theme.palette.text.secondary
|
||||
}
|
||||
label="Messaging"
|
||||
selected={desktopSideView === 'directs'}
|
||||
@ -1906,8 +1913,8 @@ export const Group = ({
|
||||
directChatHasUnread
|
||||
? 'var(--unread)'
|
||||
: desktopSideView === 'directs'
|
||||
? 'white'
|
||||
: 'rgba(250, 250, 250, 0.5)'
|
||||
? theme.palette.text.primary
|
||||
: theme.palette.text.secondary
|
||||
}
|
||||
/>
|
||||
</IconWrapper>
|
||||
@ -1917,15 +1924,15 @@ export const Group = ({
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'flex-start',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
flexGrow: 1,
|
||||
overflowY: 'auto',
|
||||
visibility: chatMode === 'directs' && 'hidden',
|
||||
position: chatMode === 'directs' && 'fixed',
|
||||
left: chatMode === 'directs' && '-1000px',
|
||||
overflowY: 'auto',
|
||||
position: chatMode === 'directs' && 'fixed',
|
||||
visibility: chatMode === 'directs' && 'hidden',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
{groups.map((group: any) => (
|
||||
@ -1967,14 +1974,17 @@ export const Group = ({
|
||||
}}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
flexDirection: 'column',
|
||||
cursor: 'pointer',
|
||||
border: '1px #232428 solid',
|
||||
padding: '2px',
|
||||
borderRadius: '2px',
|
||||
background:
|
||||
group?.groupId === selectedGroup?.groupId && 'white',
|
||||
group?.groupId === selectedGroup?.groupId &&
|
||||
theme.palette.background.default,
|
||||
borderColor: theme.palette.primary,
|
||||
borderRadius: '2px',
|
||||
borderStyle: 'solid',
|
||||
borderWidth: '1px',
|
||||
cursor: 'pointer',
|
||||
flexDirection: 'column',
|
||||
padding: '2px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<ContextMenu
|
||||
@ -1984,22 +1994,22 @@ export const Group = ({
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<ListItemAvatar>
|
||||
{groupsProperties[group?.groupId]?.isOpen === false ? (
|
||||
<Box
|
||||
sx={{
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
borderRadius: '50%',
|
||||
background: '#232428',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
background: theme.palette.background.default,
|
||||
borderRadius: '50%',
|
||||
display: 'flex',
|
||||
height: '40px',
|
||||
justifyContent: 'center',
|
||||
width: '40px',
|
||||
}}
|
||||
>
|
||||
<LockIcon
|
||||
@ -2011,13 +2021,13 @@ export const Group = ({
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
borderRadius: '50%',
|
||||
background: '#232428',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
background: theme.palette.background.default,
|
||||
borderRadius: '50%',
|
||||
display: 'flex',
|
||||
height: '40px',
|
||||
justifyContent: 'center',
|
||||
width: '40px',
|
||||
}}
|
||||
>
|
||||
<NoEncryptionGmailerrorredIcon
|
||||
@ -2026,15 +2036,6 @@ export const Group = ({
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
// <Avatar
|
||||
// sx={{
|
||||
// background: "#232428",
|
||||
// color: "white",
|
||||
// }}
|
||||
// alt={group?.groupName}
|
||||
// >
|
||||
// {group.groupName?.charAt(0)}
|
||||
// </Avatar>
|
||||
)}
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
@ -2050,14 +2051,14 @@ export const Group = ({
|
||||
style: {
|
||||
color:
|
||||
group?.groupId === selectedGroup?.groupId &&
|
||||
'black',
|
||||
theme.palette.text.primary,
|
||||
},
|
||||
}} // Change the color of the primary text
|
||||
secondaryTypographyProps={{
|
||||
style: {
|
||||
color:
|
||||
group?.groupId === selectedGroup?.groupId &&
|
||||
'black',
|
||||
theme.palette.text.primary,
|
||||
fontSize: '12px',
|
||||
},
|
||||
}}
|
||||
@ -2100,10 +2101,10 @@ export const Group = ({
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
gap: '10px',
|
||||
justifyContent: 'center',
|
||||
padding: '10px',
|
||||
gap: '10px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
{chatMode === 'groups' && (
|
||||
@ -2115,7 +2116,7 @@ export const Group = ({
|
||||
>
|
||||
<AddCircleOutlineIcon
|
||||
sx={{
|
||||
color: 'white',
|
||||
color: theme.palette.text.primary,
|
||||
}}
|
||||
/>
|
||||
Group Mgmt
|
||||
@ -2132,7 +2133,7 @@ export const Group = ({
|
||||
>
|
||||
<PersonOffIcon
|
||||
sx={{
|
||||
color: 'white',
|
||||
color: theme.palette.text.primary,
|
||||
}}
|
||||
/>
|
||||
</CustomButton>
|
||||
@ -2149,7 +2150,7 @@ export const Group = ({
|
||||
>
|
||||
<CreateIcon
|
||||
sx={{
|
||||
color: 'white',
|
||||
color: theme.palette.text.primary,
|
||||
}}
|
||||
/>
|
||||
New Chat
|
||||
@ -2166,6 +2167,7 @@ export const Group = ({
|
||||
myAddress={myAddress}
|
||||
setIsLoadingGroups={setIsLoadingGroups}
|
||||
/>
|
||||
|
||||
<CustomizedSnackbars
|
||||
open={openSnack}
|
||||
setOpen={setOpenSnack}
|
||||
@ -2175,11 +2177,11 @@ export const Group = ({
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
height: isMobile ? '100%' : '100%',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-start',
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
height: isMobile ? '100%' : '100%',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
{!isMobile &&
|
||||
@ -2207,6 +2209,7 @@ export const Group = ({
|
||||
desktopViewMode === 'chat' &&
|
||||
desktopSideView !== 'directs' &&
|
||||
renderGroups()}
|
||||
|
||||
{!isMobile &&
|
||||
desktopViewMode === 'chat' &&
|
||||
desktopSideView === 'directs' &&
|
||||
@ -2230,26 +2233,26 @@ export const Group = ({
|
||||
{isMobile && (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
marginTop: '14px',
|
||||
justifyContent: 'center',
|
||||
display: 'flex',
|
||||
height: '15px',
|
||||
justifyContent: 'center',
|
||||
marginTop: '14px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
width: '320px',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
width: '50px',
|
||||
}}
|
||||
>
|
||||
@ -2264,10 +2267,10 @@ export const Group = ({
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
width: '50px',
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
width: '50px',
|
||||
}}
|
||||
>
|
||||
<ButtonBase
|
||||
@ -2284,17 +2287,15 @@ export const Group = ({
|
||||
)}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
|
||||
right: !(desktopViewMode === 'chat') ? 'unset' : '0px',
|
||||
background: theme.palette.background.default,
|
||||
bottom: !(desktopViewMode === 'chat') ? 'unset' : '0px',
|
||||
top: !(desktopViewMode === 'chat') ? 'unset' : '0px',
|
||||
background: '#27282c',
|
||||
zIndex: 5,
|
||||
height: isMobile && `calc(${rootHeight} - 45px)`,
|
||||
opacity: !(desktopViewMode === 'chat') ? 0 : 1,
|
||||
|
||||
left: !(desktopViewMode === 'chat') ? '-100000px' : '0px',
|
||||
opacity: !(desktopViewMode === 'chat') ? 0 : 1,
|
||||
position: 'absolute',
|
||||
right: !(desktopViewMode === 'chat') ? 'unset' : '0px',
|
||||
top: !(desktopViewMode === 'chat') ? 'unset' : '0px',
|
||||
zIndex: 5,
|
||||
}}
|
||||
>
|
||||
<ChatDirect
|
||||
@ -2308,7 +2309,6 @@ export const Group = ({
|
||||
balance={balance}
|
||||
close={() => {
|
||||
setSelectedDirect(null);
|
||||
|
||||
setNewChat(false);
|
||||
}}
|
||||
setMobileViewModeKeepOpen={setMobileViewModeKeepOpen}
|
||||
@ -2319,18 +2319,18 @@ export const Group = ({
|
||||
{desktopViewMode === 'chat' && !selectedGroup && (
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: '14px',
|
||||
fontWeight: 400,
|
||||
color: 'rgba(255, 255, 255, 0.2)',
|
||||
color: theme.palette.text.primary,
|
||||
}}
|
||||
>
|
||||
No group selected
|
||||
@ -2423,12 +2423,12 @@ export const Group = ({
|
||||
!secretKeyPublishDate && (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'flex-start',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
padding: '20px',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
{' '}
|
||||
@ -2550,9 +2550,9 @@ export const Group = ({
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
bottom: '25px',
|
||||
display: 'flex',
|
||||
position: 'absolute',
|
||||
bottom: '25px',
|
||||
right: '25px',
|
||||
zIndex: 100,
|
||||
}}
|
||||
@ -2602,24 +2602,23 @@ export const Group = ({
|
||||
<>
|
||||
<Box
|
||||
sx={{
|
||||
background: theme.palette.background.default,
|
||||
bottom: !(desktopViewMode === 'chat') ? 'unset' : '0px',
|
||||
height: isMobile && `calc(${rootHeight} - 45px)`,
|
||||
left: !(desktopViewMode === 'chat') ? '-100000px' : '0px',
|
||||
opacity: !(desktopViewMode === 'chat') ? 0 : 1,
|
||||
position: 'absolute',
|
||||
right: !(desktopViewMode === 'chat') ? 'unset' : '0px',
|
||||
bottom: !(desktopViewMode === 'chat') ? 'unset' : '0px',
|
||||
top: !(desktopViewMode === 'chat') ? 'unset' : '0px',
|
||||
background: '#27282c',
|
||||
zIndex: 5,
|
||||
height: isMobile && `calc(${rootHeight} - 45px)`,
|
||||
opacity: !(desktopViewMode === 'chat') ? 0 : 1,
|
||||
|
||||
left: !(desktopViewMode === 'chat') ? '-100000px' : '0px',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
flexGrow: 1,
|
||||
display: 'flex',
|
||||
flexGrow: 1,
|
||||
height: '100%',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<ChatDirect
|
||||
|
||||
@ -1,22 +1,17 @@
|
||||
import * as React from "react";
|
||||
import List from "@mui/material/List";
|
||||
import ListItem from "@mui/material/ListItem";
|
||||
import ListItemButton from "@mui/material/ListItemButton";
|
||||
import ListItemIcon from "@mui/material/ListItemIcon";
|
||||
import ListItemText from "@mui/material/ListItemText";
|
||||
import Checkbox from "@mui/material/Checkbox";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import CommentIcon from "@mui/icons-material/Comment";
|
||||
import InfoIcon from "@mui/icons-material/Info";
|
||||
import GroupAddIcon from "@mui/icons-material/GroupAdd";
|
||||
import { executeEvent } from "../../utils/events";
|
||||
import { Box, ButtonBase, Collapse, Typography } from "@mui/material";
|
||||
import { Spacer } from "../../common/Spacer";
|
||||
import { getGroupNames } from "./UserListOfInvites";
|
||||
import { CustomLoader } from "../../common/CustomLoader";
|
||||
import { getBaseApiReact, isMobile } from "../../App";
|
||||
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
||||
import ExpandLessIcon from "@mui/icons-material/ExpandLess";
|
||||
import * as React from 'react';
|
||||
import List from '@mui/material/List';
|
||||
import ListItem from '@mui/material/ListItem';
|
||||
import ListItemButton from '@mui/material/ListItemButton';
|
||||
import ListItemText from '@mui/material/ListItemText';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import GroupAddIcon from '@mui/icons-material/GroupAdd';
|
||||
import { executeEvent } from '../../utils/events';
|
||||
import { Box, ButtonBase, Collapse, Typography, useTheme } from '@mui/material';
|
||||
import { getGroupNames } from './UserListOfInvites';
|
||||
import { CustomLoader } from '../../common/CustomLoader';
|
||||
import { getBaseApiReact, isMobile } from '../../App';
|
||||
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
||||
import ExpandLessIcon from '@mui/icons-material/ExpandLess';
|
||||
|
||||
export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
|
||||
const [groupsWithJoinRequests, setGroupsWithJoinRequests] = React.useState(
|
||||
@ -37,11 +32,14 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
|
||||
|
||||
setGroupsWithJoinRequests(resMoreData);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const theme = useTheme();
|
||||
|
||||
React.useEffect(() => {
|
||||
if (myAddress) {
|
||||
getJoinRequests();
|
||||
@ -51,57 +49,65 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<ButtonBase
|
||||
sx={{
|
||||
width: "322px",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
padding: "0px 20px",
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
gap: '10px',
|
||||
justifyContent: 'flex-start'
|
||||
justifyContent: 'flex-start',
|
||||
padding: '0px 20px',
|
||||
width: '322px',
|
||||
}}
|
||||
onClick={() => setIsExpanded((prev) => !prev)}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "1rem",
|
||||
fontSize: '1rem',
|
||||
}}
|
||||
>
|
||||
Group Invites {groupsWithJoinRequests?.length > 0 && ` (${groupsWithJoinRequests?.length})`}
|
||||
Group Invites{' '}
|
||||
{groupsWithJoinRequests?.length > 0 &&
|
||||
` (${groupsWithJoinRequests?.length})`}
|
||||
</Typography>
|
||||
{isExpanded ? <ExpandLessIcon sx={{
|
||||
marginLeft: 'auto'
|
||||
}} /> : (
|
||||
<ExpandMoreIcon sx={{
|
||||
marginLeft: 'auto'
|
||||
}}/>
|
||||
{isExpanded ? (
|
||||
<ExpandLessIcon
|
||||
sx={{
|
||||
marginLeft: 'auto',
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<ExpandMoreIcon
|
||||
sx={{
|
||||
marginLeft: 'auto',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</ButtonBase>
|
||||
|
||||
<Collapse in={isExpanded} timeout="auto" unmountOnExit>
|
||||
<Box
|
||||
sx={{
|
||||
width: "322px",
|
||||
height: isMobile ? "165px" : "250px",
|
||||
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
bgcolor: "background.paper",
|
||||
padding: "20px",
|
||||
borderRadius: "19px",
|
||||
bgcolor: theme.palette.background.paper,
|
||||
borderRadius: '19px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: isMobile ? '165px' : '250px',
|
||||
padding: '20px',
|
||||
width: '322px',
|
||||
}}
|
||||
>
|
||||
{loading && groupsWithJoinRequests.length === 0 && (
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<CustomLoader />
|
||||
@ -110,18 +116,18 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
|
||||
{!loading && groupsWithJoinRequests.length === 0 && (
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
height: "100%",
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "11px",
|
||||
color: theme.palette.text.primary,
|
||||
fontSize: '11px',
|
||||
fontWeight: 400,
|
||||
color: "rgba(255, 255, 255, 0.2)",
|
||||
}}
|
||||
>
|
||||
Nothing to display
|
||||
@ -130,11 +136,11 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
|
||||
)}
|
||||
<List
|
||||
sx={{
|
||||
width: "100%",
|
||||
width: '100%',
|
||||
maxWidth: 360,
|
||||
bgcolor: "background.paper",
|
||||
maxHeight: "300px",
|
||||
overflow: "auto",
|
||||
bgcolor: theme.palette.background.paper,
|
||||
maxHeight: '300px',
|
||||
overflow: 'auto',
|
||||
}}
|
||||
className="scrollable-container"
|
||||
>
|
||||
@ -142,13 +148,13 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
|
||||
return (
|
||||
<ListItem
|
||||
sx={{
|
||||
marginBottom: "20px",
|
||||
marginBottom: '20px',
|
||||
}}
|
||||
key={group?.groupId}
|
||||
onClick={() => {
|
||||
setOpenAddGroup(true);
|
||||
setTimeout(() => {
|
||||
executeEvent("openGroupInvitesRequest", {});
|
||||
executeEvent('openGroupInvitesRequest', {});
|
||||
}, 300);
|
||||
}}
|
||||
disablePadding
|
||||
@ -156,8 +162,8 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
|
||||
<IconButton edge="end" aria-label="comments">
|
||||
<GroupAddIcon
|
||||
sx={{
|
||||
color: "white",
|
||||
fontSize: "18px",
|
||||
color: theme.palette.text.primary,
|
||||
fontSize: '18px',
|
||||
}}
|
||||
/>
|
||||
</IconButton>
|
||||
@ -166,8 +172,8 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
|
||||
<ListItemButton disableRipple role={undefined} dense>
|
||||
<ListItemText
|
||||
sx={{
|
||||
"& .MuiTypography-root": {
|
||||
fontSize: "13px",
|
||||
'& .MuiTypography-root': {
|
||||
fontSize: '13px',
|
||||
fontWeight: 400,
|
||||
},
|
||||
}}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user