Replace empty state (#116)

packages/react-chat/src/components/Channels/Channels.tsx

@@ -82,6 +82,7 @@ export function Channels({
                   setActiveChannel({
                     id: group.join(""),
                     name: group.join(", ").slice(0, 10),
+                    type: "group",
                   });
                   setCreateChat(false);
                   if (onCommunityClick) {
@@ -106,6 +107,7 @@ export function Channels({
                   setActiveChannel({
                     id: member,
                     name: member.slice(0, 10),
+                    type: "dm",
                     description: "Contact",
                   });
                   if (onCommunityClick) {

packages/react-chat/src/components/Channels/EmptyChannel.tsx

@@ -32,7 +32,8 @@ export function EmptyChannel({ channel }: EmptyChannelProps) {
       {channel.type === "dm" ? (
         <EmptyText>
           Any messages you send here are encrypted and can only be read by you
-          and <span>{channel.name.slice(0, 10)}</span>.
+          and <br />
+          <span>{channel.name.slice(0, 10)}</span>.
         </EmptyText>
       ) : channel.type === "group" ? (
         <EmptyText>
@@ -42,7 +43,8 @@ export function EmptyChannel({ channel }: EmptyChannelProps) {
         </EmptyText>
       ) : (
         <EmptyText>
-          Welcome to the beginning of the <span>#{channel.name}</span> channel!
+          Welcome to the beginning of the <span>#{channel.name}</span> <br />
+          channel!
         </EmptyText>
       )}
     </Wrapper>
@@ -53,8 +55,7 @@ const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  height: calc(100% - 44px);
+  margin-bottom: 32px;
-  padding: 8px 16px 0;
 `;
 
 const ChannelInfoEmpty = styled(ChannelInfo)`
@@ -85,7 +86,6 @@ const EmptyText = styled.p`
   color: ${({ theme }) => theme.secondary};
   max-width: 310px;
   text-align: center;
-  word-break: break-all;
 
   & > span {
     color: ${({ theme }) => theme.primary};

packages/react-chat/src/components/Chat/ChatBody.tsx

@@ -6,7 +6,6 @@ import { useMessengerContext } from "../../contexts/messengerProvider";
 import { useNarrow } from "../../contexts/narrowProvider";
 import { CommunityData } from "../../models/CommunityData";
 import { Channel } from "../Channels/Channel";
-import { EmptyChannel } from "../Channels/EmptyChannel";
 import { Community } from "../Community";
 import { ChannelMenu } from "../Form/ChannelMenu";
 import { MembersIcon } from "../Icons/MembersIcon";
@@ -147,17 +146,14 @@ export function ChatBody({
         <>
           {!showChannelsList && !showMembersList && (
             <>
-              {messages.length > 0 ? (
+              {messenger && community ? (
-                messenger && community ? (
+                <ChatMessages
-                  <ChatMessages
+                  messages={messages}
-                    messages={messages}
+                  activeChannelId={activeChannel.id}
-                    activeChannelId={activeChannel.id}
+                  channel={activeChannel}
-                  />
+                />
-                ) : (
-                  <LoadingSkeleton />
-                )
               ) : (
-                <EmptyChannel channel={activeChannel} />
+                <LoadingSkeleton />
               )}
               <ChatInput />
             </>

packages/react-chat/src/components/Chat/ChatMessages.tsx

@@ -3,8 +3,10 @@ import styled from "styled-components";
 
 import { useBlockedUsers } from "../../contexts/blockedUsersProvider";
 import { useChatScrollHandle } from "../../hooks/useChatScrollHandle";
+import { ChannelData } from "../../models/ChannelData";
 import { ChatMessage } from "../../models/ChatMessage";
 import { equalDate } from "../../utils";
+import { EmptyChannel } from "../Channels/EmptyChannel";
 import { ContactMenu } from "../Form/ContactMenu";
 import { LoadingIcon } from "../Icons/LoadingIcon";
 import { UserIcon } from "../Icons/UserIcon";
@@ -71,9 +73,14 @@ function ChatUiMessage({
 type ChatMessagesProps = {
   messages: ChatMessage[];
   activeChannelId: string;
+  channel: ChannelData;
 };
 
-export function ChatMessages({ messages, activeChannelId }: ChatMessagesProps) {
+export function ChatMessages({
+  messages,
+  activeChannelId,
+  channel,
+}: ChatMessagesProps) {
   const ref = useRef<HTMLHeadingElement>(null);
   const loadingMessages = useChatScrollHandle(messages, ref, activeChannelId);
 
@@ -93,6 +100,7 @@ export function ChatMessages({ messages, activeChannelId }: ChatMessagesProps) {
         image={image}
       />
       <LinkModal isVisible={!!link} onClose={() => setLink("")} link={link} />
+      <EmptyChannel channel={channel} />
       {loadingMessages && (
         <LoadingWrapper>
           <LoadingIcon className="message" />