diff --git a/packages/react-chat/src/components/Channels/Channels.tsx b/packages/react-chat/src/components/Channels/Channels.tsx
index 9504e184..6d984f19 100644
--- a/packages/react-chat/src/components/Channels/Channels.tsx
+++ b/packages/react-chat/src/components/Channels/Channels.tsx
@@ -11,6 +11,7 @@ interface ChannelsProps {
onCommunityClick: (val: ChannelData) => void;
activeChannelId: string;
channels: ChannelData[];
+ membersList: string[];
}
export function Channels({
@@ -19,6 +20,7 @@ export function Channels({
clearNotifications,
activeChannelId,
channels,
+ membersList,
}: ChannelsProps) {
useEffect(() => {
const channel = channels.find((channel) => channel.id === activeChannelId);
@@ -47,6 +49,30 @@ export function Channels({
}}
/>
))}
+
+ {membersList.length > 0 && (
+
+ {membersList.map((member) => (
+ {
+ onCommunityClick({
+ id: member,
+ name: member.slice(0, 10),
+ description: "Contact",
+ });
+ }}
+ />
+ ))}
+
+ )}
);
}
@@ -60,3 +86,23 @@ export const ChannelList = styled.div`
width: 0;
}
`;
+
+const Dialogues = styled.div`
+ display: flex;
+ flex-direction: column;
+ padding-top: 16px;
+ margin-top: 16px;
+ position: relative;
+
+ &::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ width: calc(100% - 24px);
+ height: 1px;
+ background-color: ${({ theme }) => theme.primary};
+ opacity: 0.1;
+ }
+`;
diff --git a/packages/react-chat/src/components/Channels/EmptyChannel.tsx b/packages/react-chat/src/components/Channels/EmptyChannel.tsx
index 60f44b64..b424b8e5 100644
--- a/packages/react-chat/src/components/Channels/EmptyChannel.tsx
+++ b/packages/react-chat/src/components/Channels/EmptyChannel.tsx
@@ -24,9 +24,17 @@ export function EmptyChannel({ channel }: EmptyChannelProps) {
{channel.name}
-
- Welcome to the beginning of the #{channel.name} channel!
-
+
+ {channel.description === "Contact" ? (
+
+ Any messages you send here are encrypted and can only be read by you
+ and {channel.name}.
+
+ ) : (
+
+ Welcome to the beginning of the #{channel.name} channel!
+
+ )}
);
}
@@ -62,6 +70,8 @@ const ChannelNameEmpty = styled(ChannelName)`
const EmptyText = styled.p`
display: inline-block;
color: ${({ theme }) => theme.secondary};
+ max-width: 310px;
+ text-align: center;
& > span {
color: ${({ theme }) => theme.primary};
diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx
index e9669fb7..010d045b 100644
--- a/packages/react-chat/src/components/Chat.tsx
+++ b/packages/react-chat/src/components/Chat.tsx
@@ -36,6 +36,8 @@ export function Chat({
});
const [showMembers, setShowMembers] = useState(true);
const [showChannels, setShowChannels] = useState(true);
+ const [membersList, setMembersList] = useState([]);
+
const narrow = useNarrow();
const {
@@ -110,6 +112,7 @@ export function Chat({
onCommunityClick={(e) => setActiveChannel(e)}
activeChannelId={activeChannel?.id ?? ""}
channels={channels}
+ membersList={membersList}
/>
)}
@@ -132,9 +135,15 @@ export function Chat({
loadingMessages={loadingMessages}
clearNotifications={clearNotifications}
channels={channels}
+ membersList={membersList}
+ setMembersList={setMembersList}
/>
{showMembers && !narrow && (
-
+
)}
void;
channels: ChannelData[];
+ membersList: string[];
+ setMembersList: any;
}
export function ChatBody({
@@ -60,6 +62,8 @@ export function ChatBody({
loadingMessages,
clearNotifications,
channels,
+ membersList,
+ setMembersList,
}: ChatBodyProps) {
const narrow = useNarrow();
const [showChannelsList, setShowChannelsList] = useState(false);
@@ -154,6 +158,7 @@ export function ChatBody({
setShowChannels={setShowChannelsList}
activeChannelId={activeChannelId}
clearNotifications={clearNotifications}
+ membersList={membersList}
/>
)}
{showMembersList && narrow && (
@@ -161,6 +166,7 @@ export function ChatBody({
community={community}
setShowChannels={setShowChannelsList}
setShowMembersList={setShowMembersList}
+ setMembersList={setMembersList}
/>
)}
>
diff --git a/packages/react-chat/src/components/Members/Member.tsx b/packages/react-chat/src/components/Members/Member.tsx
index 234a525c..08eae260 100644
--- a/packages/react-chat/src/components/Members/Member.tsx
+++ b/packages/react-chat/src/components/Members/Member.tsx
@@ -7,9 +7,10 @@ import { UserIcon } from "../Icons/UserIcon";
interface MemberProps {
member: string;
- isOnline: boolean;
+ isOnline?: boolean;
setShowChannels: (val: boolean) => void;
setShowMembers?: (val: boolean) => void;
+ setMembersList?: any;
}
export function Member({
@@ -17,6 +18,7 @@ export function Member({
isOnline,
setShowChannels,
setShowMembers,
+ setMembersList,
}: MemberProps) {
const narrow = useNarrow();
@@ -25,11 +27,22 @@ export function Member({
if (setShowMembers) setShowMembers(false);
}, [setShowMembers]);
+ const startDialog = (member: string) => {
+ setMembersList((prevMembers: string[]) => {
+ if (prevMembers.find((chat) => chat === member)) {
+ return prevMembers;
+ } else {
+ return [...prevMembers, member];
+ }
+ });
+ setShowChannels(true);
+ };
+
return (
- narrow && setShowMembers ? switchMemberList() : setShowChannels(true)
- }
+ onClick={() => {
+ narrow && setShowMembers ? switchMemberList() : startDialog(member);
+ }}
>
void;
+ setMembersList: any;
}
-export function Members({ community, setShowChannels }: MembersProps) {
+export function Members({
+ community,
+ setShowChannels,
+ setMembersList,
+}: MembersProps) {
return (
Members
-
+
);
}
diff --git a/packages/react-chat/src/components/Members/MembersList.tsx b/packages/react-chat/src/components/Members/MembersList.tsx
index 78c8b762..f9c4a43e 100644
--- a/packages/react-chat/src/components/Members/MembersList.tsx
+++ b/packages/react-chat/src/components/Members/MembersList.tsx
@@ -10,12 +10,14 @@ interface MembersListProps {
community: CommunityData;
setShowChannels: (val: boolean) => void;
setShowMembers?: (val: boolean) => void;
+ setMembersList: any;
}
export function MembersList({
community,
setShowChannels,
setShowMembers,
+ setMembersList,
}: MembersListProps) {
return (
@@ -39,6 +41,7 @@ export function MembersList({
isOnline={false}
setShowChannels={setShowChannels}
setShowMembers={setShowMembers}
+ setMembersList={setMembersList}
/>
))}
@@ -51,6 +54,7 @@ export function MembersList({
isOnline={false}
setShowChannels={setShowChannels}
setShowMembers={setShowMembers}
+ setMembersList={setMembersList}
/>
))}
diff --git a/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx b/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx
index 3eb9e2af..47ab363a 100644
--- a/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx
+++ b/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx
@@ -14,6 +14,8 @@ interface NarrowChannelsProps {
setShowChannels: (val: boolean) => void;
clearNotifications: (id: string) => void;
channels: ChannelData[];
+
+ membersList: string[];
}
export function NarrowChannels({
@@ -24,6 +26,8 @@ export function NarrowChannels({
setShowChannels,
clearNotifications,
channels,
+
+ membersList,
}: NarrowChannelsProps) {
return (
@@ -37,6 +41,7 @@ export function NarrowChannels({
}}
activeChannelId={activeChannelId}
channels={channels}
+ membersList={membersList}
/>
);
diff --git a/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx b/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx
index 4c078740..dbe07daa 100644
--- a/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx
+++ b/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx
@@ -10,12 +10,14 @@ interface NarrowMembersProps {
community: CommunityData;
setShowChannels: (val: boolean) => void;
setShowMembersList: (val: boolean) => void;
+ setMembersList: any;
}
export function NarrowMembers({
community,
setShowChannels,
setShowMembersList,
+ setMembersList,
}: NarrowMembersProps) {
return (
@@ -24,6 +26,7 @@ export function NarrowMembers({
community={community}
setShowChannels={setShowChannels}
setShowMembers={setShowMembersList}
+ setMembersList={setMembersList}
/>
);
diff --git a/packages/react-chat/src/models/ChannelData.ts b/packages/react-chat/src/models/ChannelData.ts
index 02ce3b73..83d3dad9 100644
--- a/packages/react-chat/src/models/ChannelData.ts
+++ b/packages/react-chat/src/models/ChannelData.ts
@@ -1,7 +1,7 @@
export type ChannelData = {
id: string;
name: string;
- description: string;
+ description?: string;
icon?: string;
isMuted?: boolean;
};