diff --git a/app/components/component-chat/src/Messages/Messages.jsx b/app/components/component-chat/src/Messages/Messages.jsx index 488c8002e4da727d00404788c56961b2916d47e4..cc8e3a25b2a4ab8327cda6c51b98dadad1f71800 100644 --- a/app/components/component-chat/src/Messages/Messages.jsx +++ b/app/components/component-chat/src/Messages/Messages.jsx @@ -22,6 +22,7 @@ import { Bubble, InnerMessageContainer, Byline, + Placeholder, } from './style' const GET_MESSAGES = gql` @@ -37,6 +38,9 @@ const GET_MESSAGES = gql` username profilePicture online + defaultIdentity { + name + } } } pageInfo { @@ -59,6 +63,9 @@ const MESSAGES_SUBSCRIPTION = gql` username profilePicture online + defaultIdentity { + name + } } } } @@ -214,6 +221,9 @@ const Messages = ({ channelId }) => { Show previous messages </NextPageButton> )} + {messages && !messages.length && ( + <Placeholder>No discussion for this manuscript yet. Start by typing a message below.</Placeholder> + )} {messages.map(group => { const initialMessage = group[0] if ( @@ -239,7 +249,7 @@ const Messages = ({ channelId }) => { {index === 0 && <UserAvatar user={message.user} />} </GutterContainer> <InnerMessageContainer> - {index === 0 && <Byline>{message.user.username}</Byline>} + {index === 0 && <Byline>{message.user.defaultIdentity.name}</Byline>} <Bubble> <MessageRenderer message={message} /> </Bubble> diff --git a/app/components/component-chat/src/Messages/style.js b/app/components/component-chat/src/Messages/style.js index 22b2e2dde37cf0d448e16d83ff82beec4b9e4078..022e90e840163193e464aa9ecc0d6b768b39977f 100644 --- a/app/components/component-chat/src/Messages/style.js +++ b/app/components/component-chat/src/Messages/style.js @@ -138,3 +138,11 @@ export const EmbedComponent = styled.iframe` height: 100%; width: 100%; ` + +export const Placeholder = styled.div` + display: grid; + place-items: center; + color: ${th('colorTextPlaceholder')}; + height: 100%; + padding: 4em; +`