export const MessageThreadWithCustomBlockedMessageContainerExample:()

in packages/storybook8/stories/Components/MessageThread/CustomizedBlockedMessage/snippets/CustomBlockedMessage.snippet.tsx [11:80]
66 lines of code
4 McCabe index (conditional complexity)

export const MessageThreadWithCustomBlockedMessageContainerExample: () => JSX.Element = () => {
  const messageThreadStyle: MessageThreadStyles = {
    blockedMessageContainer: {
      '& i': { paddingTop: '0.25rem' },
      '& p': { color: 'red', marginBlock: '0.125rem' },
      '& a': { marginBlock: '0.125rem' },
      '& svg': { color: 'red' },
      border: 'double green'
    }
  };

  const onRenderMessage = (messageProps: MessageProps, defaultOnRender?: MessageRenderer): JSX.Element => {
    // Add your own logic
    if (messageProps.message.messageType === 'blocked' && messageProps.message.senderId === 'user3') {
      return (
        <h3>{`Message from ${messageProps.message.senderDisplayName} has been blocked (with custom onRenderMessage)`}</h3>
      );
    }
    return defaultOnRender ? defaultOnRender(messageProps) : <></>;
  };

  const messages: BlockedMessage[] = [
    {
      messageType: 'blocked',
      senderId: 'user2',
      warningText: 'This is custom blocked message without hyperlink',
      senderDisplayName: 'Robert Tolbert',
      messageId: Math.random().toString(),
      createdOn: new Date('2019-04-13T00:00:00.000+08:09'),
      mine: false,
      attached: false
    },
    {
      messageType: 'blocked',
      senderId: 'user2',
      warningText: '',
      linkText: 'This is custom blocked content with hyperlink only (microsoft.com)',
      link: 'https://microsoft.com',
      senderDisplayName: 'Robert Tolbert',
      messageId: Math.random().toString(),
      createdOn: new Date('2019-04-13T00:00:00.000+08:10'),
      mine: false,
      attached: true
    },
    {
      messageType: 'blocked',
      senderId: 'user3',
      senderDisplayName: 'Carole Poland',
      messageId: Math.random().toString(),
      createdOn: new Date('2019-04-13T00:00:00.000+08:11'),
      mine: false,
      attached: false
    },
    {
      messageType: 'blocked',
      senderId: 'user1',
      senderDisplayName: 'Elliot Woodward',
      messageId: Math.random().toString(),
      createdOn: new Date('2019-04-13T00:00:00.000+08:11'),
      mine: true,
      attached: false
    }
  ];

  return (
    <FluentThemeProvider>
      <MessageThread userId={'1'} styles={messageThreadStyle} messages={messages} onRenderMessage={onRenderMessage} />
    </FluentThemeProvider>
  );
};