Message Requests: Always open to top of conversation

ts/components/conversation/Timeline.stories.tsx

@@ -35,8 +35,10 @@ const items: Record<string, TimelineItemType> = {
       id: 'id-1',
       direction: 'incoming',
       timestamp: Date.now(),
-      authorPhoneNumber: '(202) 555-2001',
-      authorColor: 'green',
+      author: {
+        phoneNumber: '(202) 555-2001',
+        color: 'green',
+      },
       text: '🔥',
     },
   },
@@ -47,7 +49,9 @@ const items: Record<string, TimelineItemType> = {
       conversationType: 'group',
       direction: 'incoming',
       timestamp: Date.now(),
-      authorColor: 'green',
+      author: {
+        color: 'green',
+      },
       text: 'Hello there from the new world! http://somewhere.com',
     },
   },
@@ -70,7 +74,9 @@ const items: Record<string, TimelineItemType> = {
       collapseMetadata: true,
       direction: 'incoming',
       timestamp: Date.now(),
-      authorColor: 'red',
+      author: {
+        color: 'red',
+      },
       text: 'Hello there from the new world!',
     },
   },
@@ -154,7 +160,9 @@ const items: Record<string, TimelineItemType> = {
       direction: 'outgoing',
       timestamp: Date.now(),
       status: 'sent',
-      authorColor: 'pink',
+      author: {
+        color: 'pink',
+      },
       text: '🔥',
     },
   },
@@ -165,7 +173,9 @@ const items: Record<string, TimelineItemType> = {
       direction: 'outgoing',
       timestamp: Date.now(),
       status: 'read',
-      authorColor: 'pink',
+      author: {
+        color: 'pink',
+      },
       text: 'Hello there from the new world! http://somewhere.com',
     },
   },
@@ -187,7 +197,9 @@ const items: Record<string, TimelineItemType> = {
       direction: 'outgoing',
       status: 'sent',
       timestamp: Date.now(),
-      authorColor: 'blue',
+      author: {
+        color: 'blue',
+      },
       text:
         'Hello there from the new world! And this is multiple lines of text. Lines and lines and lines.',
     },
@@ -334,7 +346,14 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
 
   haveNewest: boolean('haveNewest', overrideProps.haveNewest !== false),
   haveOldest: boolean('haveOldest', overrideProps.haveOldest !== false),
-  isLoadingMessages: false,
+  isIncomingMessageRequest: boolean(
+    'isIncomingMessageRequest',
+    overrideProps.isIncomingMessageRequest === true
+  ),
+  isLoadingMessages: boolean(
+    'isLoadingMessages',
+    overrideProps.isLoadingMessages === false
+  ),
   items: overrideProps.items || Object.keys(items),
   resetCounter: 0,
   scrollToIndex: overrideProps.scrollToIndex,
@@ -367,6 +386,40 @@ story.add('Oldest and Newest', () => {
   return <Timeline {...props} />;
 });
 
+story.add('With active message request', () => {
+  const props = createProps({
+    isIncomingMessageRequest: true,
+  });
+
+  return <Timeline {...props} />;
+});
+
+story.add('Without Newest Message', () => {
+  const props = createProps({
+    haveNewest: false,
+  });
+
+  return <Timeline {...props} />;
+});
+
+story.add('Without newest message, active message request', () => {
+  const props = createProps({
+    haveOldest: false,
+    isIncomingMessageRequest: true,
+  });
+
+  return <Timeline {...props} />;
+});
+
+story.add('Without Oldest Message', () => {
+  const props = createProps({
+    haveOldest: false,
+    scrollToIndex: -1,
+  });
+
+  return <Timeline {...props} />;
+});
+
 story.add('Empty (just hero)', () => {
   const props = createProps({
     items: [],
@@ -400,23 +453,6 @@ story.add('Typing Indicator', () => {
   return <Timeline {...props} />;
 });
 
-story.add('Without Newest Message', () => {
-  const props = createProps({
-    haveNewest: false,
-  });
-
-  return <Timeline {...props} />;
-});
-
-story.add('Without Oldest Message', () => {
-  const props = createProps({
-    haveOldest: false,
-    scrollToIndex: -1,
-  });
-
-  return <Timeline {...props} />;
-});
-
 story.add('With invited contacts for a newly-created group', () => {
   const props = createProps({
     invitedContactsForNewlyCreatedGroup: [