Skip to content

Commit 01b8ff5

Browse files
MartinCupelaMartinCupela
committed
feat: add MessageAlsoSentInChannelIndicator
1 parent f37116c commit 01b8ff5

22 files changed

Lines changed: 91 additions & 0 deletions

‎src/components/Icons/icons.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,17 @@ export const IconArrowRight = createIcon(
3232
<path d='M8.90918 3.4095C9.14349 3.17519 9.5235 3.17519 9.75781 3.4095L13.9238 7.57552C14.0363 7.68804 14.0996 7.84119 14.0996 8.00032C14.0995 8.15933 14.0363 8.3117 13.9238 8.42415L9.75781 12.5911C9.52355 12.8254 9.14351 12.8253 8.90918 12.5911C8.67487 12.3568 8.67487 11.9768 8.90918 11.7425L12.0518 8.59993H2.5C2.16874 8.59993 1.90057 8.33154 1.90039 8.00032C1.90039 7.66895 2.16863 7.39973 2.5 7.39973H12.0518L8.90918 4.25716C8.67508 4.02288 8.67508 3.64377 8.90918 3.4095Z' />,
3333
);
3434

35+
export const IconArrowRightUp = createIcon(
36+
'IconArrowRightUp',
37+
<path
38+
d='M12.1667 10.1663V3.83301M12.1667 3.83301H5.83333M12.1667 3.83301L4 11.9997'
39+
fill='none'
40+
stroke='currentColor'
41+
strokeLinecap='round'
42+
strokeLinejoin='round'
43+
/>,
44+
);
45+
3546
export const IconArrowRotateClockwise = createIcon(
3647
'IconArrowRotateClockwise',
3748
<path d='M1.88638 8C1.88638 4.63106 4.61706 1.90039 7.98599 1.90039C9.79486 1.90039 11.0876 2.58323 12.2331 3.69824V2.66699C12.2331 2.33562 12.5023 2.06641 12.8336 2.06641C13.1649 2.06658 13.4333 2.33573 13.4333 2.66699V4.83301C13.4333 5.44042 12.941 5.93342 12.3336 5.93359H10.1667C9.83529 5.93359 9.56705 5.66438 9.56705 5.33301C9.56722 5.00179 9.8354 4.7334 10.1667 4.7334H11.571C10.5361 3.66485 9.48807 3.09961 7.98599 3.09961C5.2798 3.09961 3.0856 5.2938 3.0856 8C3.0856 10.7062 5.27981 12.9004 7.98599 12.9004C10.1184 12.9004 11.934 11.5375 12.6071 9.63379C12.7175 9.32146 13.0604 9.15735 13.3727 9.26758C13.6851 9.37799 13.8493 9.72081 13.7389 10.0332C12.9018 12.4016 10.6429 14.0996 7.98599 14.0996C4.61706 14.0996 1.88638 11.3689 1.88638 8Z' />,

‎src/components/Message/MessageAlsoSentInChannelIndicator.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react';
2+
3+
import { IconArrowRightUp } from '../Icons';
4+
import { useMessageContext, useTranslationContext } from '../../context';
5+
6+
/**
7+
* Indicator shown in thread message lists when the message was also sent to the main channel (show_in_channel === true).
8+
* Only visible inside Thread, not in the main channel list.
9+
*/
10+
export const MessageAlsoSentInChannelIndicator = () => {
11+
const { message, threadList } = useMessageContext('MessageAlsoSentInChannelIndicator');
12+
const { t } = useTranslationContext();
13+
14+
if (!threadList || !message?.show_in_channel) return null;
15+
16+
return (
17+
<div className='str-chat__message-also-sent-in-channel' role='status'>
18+
<IconArrowRightUp />
19+
<span>{t('Also sent in channel')}</span>
20+
</div>
21+
);
22+
};

‎src/components/Message/MessageSimple.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { MessageText } from './MessageText';
1212
import { MessageTimestamp as DefaultMessageTimestamp } from './MessageTimestamp';
1313
import { StreamedMessageText as DefaultStreamedMessageText } from './StreamedMessageText';
1414
import { isDateSeparatorMessage } from '../MessageList';
15+
import { MessageAlsoSentInChannelIndicator as DefaultMessageAlsoSentInChannelIndicator } from './MessageAlsoSentInChannelIndicator';
1516
import { MessageIsThreadReplyInChannelButtonIndicator as DefaultMessageIsThreadReplyInChannelButtonIndicator } from './MessageIsThreadReplyInChannelButtonIndicator';
1617
import { ReminderNotification as DefaultReminderNotification } from './ReminderNotification';
1718
import { useMessageReminder } from './hooks';
@@ -80,6 +81,7 @@ const MessageSimpleWithContext = (props: MessageSimpleWithContextProps) => {
8081
Attachment = DefaultAttachment,
8182
Avatar = DefaultAvatar,
8283
MessageActions = DefaultMessageActions,
84+
MessageAlsoSentInChannelIndicator = DefaultMessageAlsoSentInChannelIndicator,
8385
MessageBlocked = DefaultMessageBlocked,
8486
MessageBouncePrompt = DefaultMessageBouncePrompt,
8587
MessageDeleted = DefaultMessageDeleted,
@@ -189,6 +191,7 @@ const MessageSimpleWithContext = (props: MessageSimpleWithContextProps) => {
189191
{
190192
<div className={rootClassName} key={message.id}>
191193
{message.pinned && <PinIndicator message={message} />}
194+
{threadList && message.show_in_channel && <MessageAlsoSentInChannelIndicator />}
192195
{!!reminder && <ReminderNotification reminder={reminder} />}
193196
{message.user && (
194197
<Avatar

‎src/components/Message/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ export * from './Message';
55
export * from './MessageBlocked';
66
export * from './MessageDeleted';
77
export * from './MessageEditedTimestamp';
8+
export * from './MessageAlsoSentInChannelIndicator';
89
export * from './MessageIsThreadReplyInChannelButtonIndicator';
910
export * from './MessageRepliesCountButton';
1011
export * from './PinIndicator';

‎src/components/Message/styling/Message.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -228,6 +228,7 @@
228228
grid-template-areas:
229229
'message-saved-for-later'
230230
'pin-indicator'
231+
'also-sent-in-channel'
231232
'message-reminder'
232233
'message'
233234
'translation-notice'
@@ -240,6 +241,7 @@
240241
grid-template-areas:
241242
'. message-saved-for-later'
242243
'. pin-indicator'
244+
'. also-sent-in-channel'
243245
'. message-reminder'
244246
'avatar message'
245247
'avatar translation-notice'
@@ -252,6 +254,7 @@
252254
grid-template-areas:
253255
'message-saved-for-later .'
254256
'pin-indicator .'
257+
'also-sent-in-channel .'
255258
'message-reminder .'
256259
'message avatar'
257260
'translation-notice avatar'
@@ -279,6 +282,12 @@
279282
justify-content: flex-end;
280283
}
281284

285+
&.str-chat__message--me
286+
.str-chat__message-also-sent-in-channel
287+
.str-chat__message-also-sent-in-channel__content {
288+
justify-content: flex-end;
289+
}
290+
282291
&.str-chat__message--other {
283292
column-gap: var(--str-chat__spacing-2);
284293
justify-items: flex-start;

‎src/components/Message/styling/MessageAlsoSentInChannelIndicator.scss‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
@use '../../../styling/utils';
2+
3+
.str-chat {
4+
--str-chat__message-also-sent-in-channel-color: var(--text-primary);
5+
--str-chat__message-also-sent-in-channel-background-color: transparent;
6+
--str-chat__message-also-sent-in-channel-border-block-start: none;
7+
--str-chat__message-also-sent-in-channel-border-block-end: none;
8+
--str-chat__message-also-sent-in-channel-border-inline-start: none;
9+
--str-chat__message-also-sent-in-channel-border-inline-end: none;
10+
--str-chat__message-also-sent-in-channel-box-shadow: none;
11+
--str-chat__message-also-sent-in-channel-border-radius: 0;
12+
}
13+
14+
.str-chat__message-also-sent-in-channel {
15+
display: flex;
16+
align-items: center;
17+
gap: var(--spacing-xxs);
18+
grid-area: also-sent-in-channel;
19+
padding-block: var(--spacing-xxs);
20+
@include utils.component-layer-overrides('message-also-sent-in-channel');
21+
font: var(--str-chat__metadata-emphasis-text);
22+
23+
svg path {
24+
stroke-width: 1.5px;
25+
stroke: var(--str-chat__message-also-sent-in-channel-color);
26+
}
27+
}

‎src/components/Message/styling/MessageIsThreadReplyInChannelButtonIndicator.scss‎

Whitespace-only changes.

‎src/components/Message/styling/index.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
@use 'Message';
2+
@use 'MessageAlsoSentInChannelIndicator';
23
@use 'MessageEditedTimestamp';
4+
@use 'MessageIsThreadReplyInChannelButtonIndicator';
35
@use 'MessageStatus';
46
@use 'MessageSystem';
57
@use 'QuotedMessage';

‎src/components/Message/utils.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -241,6 +241,7 @@ function areMessagesEqual(prevMessage: LocalMessage, nextMessage: LocalMessage):
241241
prevMessage.own_reactions?.length === nextMessage.own_reactions?.length &&
242242
prevMessage.pinned === nextMessage.pinned &&
243243
prevMessage.reply_count === nextMessage.reply_count &&
244+
prevMessage.show_in_channel === nextMessage.show_in_channel &&
244245
prevMessage.status === nextMessage.status &&
245246
prevMessage.text === nextMessage.text &&
246247
prevMessage.type === nextMessage.type &&
@@ -312,6 +313,7 @@ export const areMessageUIPropsEqual = (
312313
const { lastReceivedId: nextLastReceivedId, message: nextMessage } = nextProps;
313314

314315
if (prevProps.highlighted !== nextProps.highlighted) return false;
316+
if (prevProps.threadList !== nextProps.threadList) return false;
315317
if (prevProps.endOfGroup !== nextProps.endOfGroup) return false;
316318
if (prevProps.mutes?.length !== nextProps.mutes?.length) return false;
317319
if (prevProps.readBy?.length !== nextProps.readBy?.length) return false;

‎src/context/ComponentContext.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,8 @@ export type ComponentContextValue = {
154154
Modal?: React.ComponentType<ModalProps>;
155155
/** Custom UI component for viewing message's image and giphy attachments with option to expand into the Gallery on Modal, defaults to and accepts the same props as [ModalGallery](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/ModalGallery.tsx) */
156156
ModalGallery?: React.ComponentType<ModalGalleryProps>;
157+
/** Custom UI component to show "Also sent in channel" in thread message lists when message.show_in_channel is true, defaults to and accepts same props as: [MessageAlsoSentInChannelIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageAlsoSentInChannelIndicator.tsx) */
158+
MessageAlsoSentInChannelIndicator?: React.ComponentType;
157159
/** Custom UI component to override default pinned message indicator, defaults to and accepts same props as: [PinIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/PinIndicator.tsx) */
158160
PinIndicator?: React.ComponentType<PinIndicatorProps>;
159161
/** Custom UI component to override default poll actions rendering in a message, defaults to and accepts same props as: [PollActions](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Poll/PollActions/PollActions.tsx) */

0 commit comments

Comments
 (0)