@mentions receive support

ts/components/conversation/MessageBody.stories.tsx

@@ -14,11 +14,13 @@ const i18n = setupI18n('en', enMessages);
 const story = storiesOf('Components/Conversation/MessageBody', module);
 
 const createProps = (overrideProps: Partial<Props> = {}): Props => ({
+  bodyRanges: overrideProps.bodyRanges,
   disableJumbomoji: boolean(
     'disableJumbomoji',
     overrideProps.disableJumbomoji || false
   ),
   disableLinks: boolean('disableLinks', overrideProps.disableLinks || false),
+  direction: 'incoming',
   i18n,
   text: text('text', overrideProps.text || ''),
   textPending: boolean('textPending', overrideProps.textPending || false),
@@ -92,3 +94,78 @@ story.add('Text Pending', () => {
 
   return <MessageBody {...props} />;
 });
+
+story.add('@Mention', () => {
+  const props = createProps({
+    bodyRanges: [
+      {
+        start: 5,
+        length: 1,
+        mentionUuid: 'tuv',
+        replacementText: 'Bender B Rodriguez 🤖',
+      },
+    ],
+    text:
+      'Like \uFFFC once said: My story is a lot like yours, only more interesting because it involves robots',
+  });
+
+  return <MessageBody {...props} />;
+});
+
+story.add('Multiple @Mentions', () => {
+  const props = createProps({
+    bodyRanges: [
+      {
+        start: 4,
+        length: 1,
+        mentionUuid: 'abc',
+        replacementText: 'Professor Farnsworth',
+      },
+      {
+        start: 2,
+        length: 1,
+        mentionUuid: 'def',
+        replacementText: 'Philip J Fry',
+      },
+      {
+        start: 0,
+        length: 1,
+        mentionUuid: 'xyz',
+        replacementText: 'Yancy Fry',
+      },
+    ],
+    text: '\uFFFC \uFFFC \uFFFC',
+  });
+
+  return <MessageBody {...props} />;
+});
+
+story.add('Complex MessageBody', () => {
+  const props = createProps({
+    bodyRanges: [
+      {
+        start: 80,
+        length: 1,
+        mentionUuid: 'xox',
+        replacementText: 'Cereal Killer',
+      },
+      {
+        start: 78,
+        length: 1,
+        mentionUuid: 'wer',
+        replacementText: 'Acid Burn',
+      },
+      {
+        start: 4,
+        length: 1,
+        mentionUuid: 'ldo',
+        replacementText: 'Zero Cool',
+      },
+    ],
+    direction: 'outgoing',
+    text:
+      'Hey \uFFFC\nCheck out https://www.signal.org I think you will really like it 😍\n\ncc \uFFFC \uFFFC',
+  });
+
+  return <MessageBody {...props} />;
+});