Render group stories

stylesheets/components/StoryViewer.scss

@@ -107,11 +107,16 @@
   }
 
   &__actions {
-    margin: 16px 0 32px 0;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    margin-bottom: 32px;
+    min-height: 52px;
   }
 
   &__reply {
     @include button-reset;
+    color: $color-gray-05;
     @include keyboard-mode {
       &:focus {
         color: $color-ultramarine;

stylesheets/components/StoryViewsNRepliesModal.scss

@@ -125,6 +125,11 @@
     border-radius: 18px;
     margin-left: 8px;
     padding: 7px 12px;
+
+    &--doe {
+      background: none;
+      border: 1px solid $color-gray-75;
+    }
   }
 
   &__quote {

stylesheets/components/TextAttachment.scss

@@ -73,6 +73,7 @@
 
     &__title {
       align-items: flex-start;
+      color: $color-gray-05;
       display: flex;
       flex-direction: column;
       justify-content: flex-start;

ts/components/ModalHost.tsx

@@ -86,11 +86,15 @@ export const ModalHost = React.memo(
         <animated.div
           role="presentation"
           className={getClassName('__overlay')}
-          onMouseDown={noMouseClose ? undefined : handleMouseDown}
-          onMouseUp={noMouseClose ? undefined : handleMouseUp}
           style={overlayStyles}
         />
-        <div className={getClassName('__overlay-container')}>{children}</div>
+        <div
+          className={getClassName('__overlay-container')}
+          onMouseDown={noMouseClose ? undefined : handleMouseDown}
+          onMouseUp={noMouseClose ? undefined : handleMouseUp}
+        >
+          {children}
+        </div>
       </div>
     );
 

ts/components/Stories.stories.tsx

@@ -7,6 +7,7 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
 import type { AttachmentType } from '../types/Attachment';
+import type { ConversationType } from '../state/ducks/conversations';
 import type { PropsType } from './Stories';
 import { Stories } from './Stories';
 import enMessages from '../../_locales/en/messages.json';
@@ -28,7 +29,17 @@ function createStory({
   timestamp,
 }: {
   attachment?: AttachmentType;
-  group?: { title: string };
+  group?: Pick<
+    ConversationType,
+    | 'acceptedMessageRequest'
+    | 'avatarPath'
+    | 'color'
+    | 'id'
+    | 'name'
+    | 'profileName'
+    | 'sharedGroupNames'
+    | 'title'
+  >;
   timestamp: number;
 }) {
   const replies = Math.random() > 0.5;
@@ -87,7 +98,7 @@ const getDefaultProps = (): PropsType => ({
       timestamp: Date.now() - 5 * durations.MINUTE,
     }),
     createStory({
-      group: { title: 'BBQ in the park' },
+      group: getDefaultConversation({ title: 'BBQ in the park' }),
       attachment: getAttachmentWithThumbnail(
         '/fixtures/nathan-anderson-316188-unsplash.jpg'
       ),
@@ -102,7 +113,7 @@ const getDefaultProps = (): PropsType => ({
       timestamp: Date.now() - 164 * durations.MINUTE,
     }),
     createStory({
-      group: { title: 'Breaking Signal for Science' },
+      group: getDefaultConversation({ title: 'Breaking Signal for Science' }),
       attachment: getAttachmentWithThumbnail('/fixtures/kitten-2-64-64.jpg'),
       timestamp: Date.now() - 380 * durations.MINUTE,
     }),

ts/components/Stories.tsx

@@ -4,7 +4,7 @@
 import FocusTrap from 'focus-trap-react';
 import React, { useState } from 'react';
 import classNames from 'classnames';
-import type { ConversationStoryType, StoryViewType } from './StoryListItem';
+import type { ConversationStoryType } from './StoryListItem';
 import type { LocalizerType } from '../types/Util';
 import type { PropsType as SmartStoryViewerPropsType } from '../state/smart/StoryViewer';
 import { StoriesPane } from './StoriesPane';
@@ -23,11 +23,6 @@ export type PropsType = {
   toggleStoriesView: () => unknown;
 };
 
-type ViewingStoryType = {
-  conversationId: string;
-  stories: Array<StoryViewType>;
-};
-
 export const Stories = ({
   hiddenStories,
   i18n,
@@ -39,8 +34,8 @@ export const Stories = ({
   toggleHideStories,
   toggleStoriesView,
 }: PropsType): JSX.Element => {
-  const [storiesToView, setStoriesToView] = useState<
+  const [conversationIdToView, setConversationIdToView] = useState<
-    undefined | ViewingStoryType
+    undefined | string
   >();
 
   const width = getWidthFromPreferredWidth(preferredWidthFromStorage, {
@@ -49,42 +44,35 @@ export const Stories = ({
 
   return (
     <div className={classNames('Stories', themeClassName(Theme.Dark))}>
-      {storiesToView &&
+      {conversationIdToView &&
         renderStoryViewer({
-          conversationId: storiesToView.conversationId,
+          conversationId: conversationIdToView,
-          onClose: () => setStoriesToView(undefined),
+          onClose: () => setConversationIdToView(undefined),
           onNextUserStories: () => {
             const storyIndex = stories.findIndex(
-              x => x.conversationId === storiesToView.conversationId
+              x => x.conversationId === conversationIdToView
             );
             if (storyIndex >= stories.length - 1) {
-              setStoriesToView(undefined);
+              setConversationIdToView(undefined);
               return;
             }
             const nextStory = stories[storyIndex + 1];
-            setStoriesToView({
+            setConversationIdToView(nextStory.conversationId);
-              conversationId: nextStory.conversationId,
-              stories: nextStory.stories,
-            });
           },
           onPrevUserStories: () => {
             const storyIndex = stories.findIndex(
-              x => x.conversationId === storiesToView.conversationId
+              x => x.conversationId === conversationIdToView
             );
             if (storyIndex === 0) {
-              setStoriesToView(undefined);
+              setConversationIdToView(undefined);
               return;
             }
             const prevStory = stories[storyIndex - 1];
-            setStoriesToView({
+            setConversationIdToView(prevStory.conversationId);
-              conversationId: prevStory.conversationId,
-              stories: prevStory.stories,
-            });
           },
-          stories: storiesToView.stories,
         })}
-      <div className="Stories__pane" style={{ width }}>
+      <FocusTrap focusTrapOptions={{ allowOutsideClick: true }}>
-        <FocusTrap focusTrapOptions={{ allowOutsideClick: true }}>
+        <div className="Stories__pane" style={{ width }}>
           <StoriesPane
             hiddenStories={hiddenStories}
             i18n={i18n}
@@ -96,10 +84,7 @@ export const Stories = ({
               const foundStory = stories[storyIndex];
 
               if (foundStory) {
-                setStoriesToView({
+                setConversationIdToView(conversationId);
-                  conversationId,
-                  stories: foundStory.stories,
-                });
               }
             }}
             openConversationInternal={openConversationInternal}
@@ -107,8 +92,8 @@ export const Stories = ({
             stories={stories}
             toggleHideStories={toggleHideStories}
           />
-        </FocusTrap>
+        </div>
-      </div>
+      </FocusTrap>
       <div className="Stories__placeholder">
         <div className="Stories__placeholder__stories" />
         {i18n('Stories__placeholder--text')}

ts/components/StoriesPane.tsx

@@ -111,8 +111,9 @@ export const StoriesPane = ({
       >
         {renderedStories.map(story => (
           <StoryListItem
-            key={getNewestStory(story).timestamp}
+            group={story.group}
             i18n={i18n}
+            key={getNewestStory(story).timestamp}
             onClick={() => {
               onStoryClicked(story.conversationId);
             }}

ts/components/StoryListItem.stories.tsx

@@ -63,7 +63,7 @@ story.add('My Story (many)', () => (
 story.add("Someone's story", () => (
   <StoryListItem
     {...getDefaultProps()}
-    group={{ title: 'Sports Group' }}
+    group={getDefaultConversation({ title: 'Sports Group' })}
     story={{
       attachment: fakeAttachment({
         thumbnail: fakeThumbnail('/fixtures/tina-rolf-269345-unsplash.jpg'),

ts/components/StoryListItem.tsx

@@ -15,7 +15,17 @@ import { getAvatarColor } from '../types/Colors';
 
 export type ConversationStoryType = {
   conversationId: string;
-  group?: Pick<ConversationType, 'title'>;
+  group?: Pick<
+    ConversationType,
+    | 'acceptedMessageRequest'
+    | 'avatarPath'
+    | 'color'
+    | 'id'
+    | 'name'
+    | 'profileName'
+    | 'sharedGroupNames'
+    | 'title'
+  >;
   hasMultiple?: boolean;
   isHidden?: boolean;
   searchNames?: string; // This is just here to satisfy Fuse's types
@@ -24,6 +34,7 @@ export type ConversationStoryType = {
 
 export type StoryViewType = {
   attachment?: AttachmentType;
+  canReply?: boolean;
   hasReplies?: boolean;
   hasRepliesFromSelf?: boolean;
   isHidden?: boolean;

ts/components/StoryViewer.stories.tsx

@@ -17,10 +17,14 @@ const i18n = setupI18n('en', enMessages);
 const story = storiesOf('Components/StoryViewer', module);
 
 function getDefaultProps(): PropsType {
+  const sender = getDefaultConversation();
+
   return {
+    conversationId: sender.id,
     getPreferredBadge: () => undefined,
     group: undefined,
     i18n,
+    loadStoryReplies: action('loadStoryReplies'),
     markStoryRead: action('markStoryRead'),
     onClose: action('onClose'),
     onNextUserStories: action('onNextUserStories'),
@@ -33,18 +37,16 @@ function getDefaultProps(): PropsType {
     preferredReactionEmoji: ['❤️', '👍', '👎', '😂', '😮', '😢'],
     queueStoryDownload: action('queueStoryDownload'),
     renderEmojiPicker: () => <div />,
-    replies: Math.floor(Math.random() * 20),
     stories: [
       {
         attachment: fakeAttachment({
           url: '/fixtures/snow.jpg',
         }),
         messageId: '123',
-        sender: getDefaultConversation(),
+        sender,
         timestamp: Date.now(),
       },
     ],
-    views: Math.floor(Math.random() * 20),
   };
 }
 

ts/components/StoryViewer.tsx

@@ -9,6 +9,7 @@ import type { ConversationType } from '../state/ducks/conversations';
 import type { EmojiPickDataType } from './emoji/EmojiPicker';
 import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
 import type { RenderEmojiPickerProps } from './conversation/ReactionPicker';
+import type { ReplyStateType } from '../types/Stories';
 import type { StoryViewType } from './StoryListItem';
 import { Avatar, AvatarSize } from './Avatar';
 import { Intl } from './Intl';
@@ -22,9 +23,21 @@ import { isDownloaded, isDownloading } from '../types/Attachment';
 import { useEscapeHandling } from '../hooks/useEscapeHandling';
 
 export type PropsType = {
+  conversationId: string;
   getPreferredBadge: PreferredBadgeSelectorType;
-  group?: ConversationType;
+  group?: Pick<
+    ConversationType,
+    | 'acceptedMessageRequest'
+    | 'avatarPath'
+    | 'color'
+    | 'id'
+    | 'name'
+    | 'profileName'
+    | 'sharedGroupNames'
+    | 'title'
+  >;
   i18n: LocalizerType;
+  loadStoryReplies: (conversationId: string, messageId: string) => unknown;
   markStoryRead: (mId: string) => unknown;
   onClose: () => unknown;
   onNextUserStories: () => unknown;
@@ -42,11 +55,10 @@ export type PropsType = {
   preferredReactionEmoji: Array<string>;
   queueStoryDownload: (storyId: string) => unknown;
   recentEmojis?: Array<string>;
-  replies?: number;
   renderEmojiPicker: (props: RenderEmojiPickerProps) => JSX.Element;
+  replyState?: ReplyStateType;
   skinTone?: number;
   stories: Array<StoryViewType>;
-  views?: number;
 };
 
 const CAPTION_BUFFER = 20;
@@ -54,9 +66,11 @@ const CAPTION_INITIAL_LENGTH = 200;
 const CAPTION_MAX_LENGTH = 700;
 
 export const StoryViewer = ({
+  conversationId,
   getPreferredBadge,
   group,
   i18n,
+  loadStoryReplies,
   markStoryRead,
   onClose,
   onNextUserStories,
@@ -70,17 +84,16 @@ export const StoryViewer = ({
   queueStoryDownload,
   recentEmojis,
   renderEmojiPicker,
-  replies,
+  replyState,
   skinTone,
   stories,
-  views,
 }: PropsType): JSX.Element => {
   const [currentStoryIndex, setCurrentStoryIndex] = useState(0);
   const [storyDuration, setStoryDuration] = useState<number | undefined>();
 
   const visibleStory = stories[currentStoryIndex];
 
-  const { attachment, messageId, timestamp } = visibleStory;
+  const { attachment, canReply, messageId, timestamp } = visibleStory;
   const {
     acceptedMessageRequest,
     avatarPath,
@@ -240,6 +253,20 @@ export const StoryViewer = ({
     };
   }, [navigateStories]);
 
+  const isGroupStory = Boolean(group?.id);
+  useEffect(() => {
+    if (!isGroupStory) {
+      return;
+    }
+    loadStoryReplies(conversationId, messageId);
+  }, [conversationId, isGroupStory, loadStoryReplies, messageId]);
+
+  const replies =
+    replyState && replyState.messageId === messageId ? replyState.replies : [];
+
+  const viewCount = 0;
+  const replyCount = replies.length;
+
   return (
     <FocusTrap focusTrapOptions={{ allowOutsideClick: true }}>
       <div className="StoryViewer">
@@ -366,49 +393,51 @@ export const StoryViewer = ({
           <div className="StoryViewer__actions">
             {isMe ? (
               <>
-                {views &&
+                {viewCount &&
-                  (views === 1 ? (
+                  (viewCount === 1 ? (
                     <Intl
                       i18n={i18n}
                       id="MyStories__views--singular"
-                      components={[<strong>{views}</strong>]}
+                      components={[<strong>{viewCount}</strong>]}
                     />
                   ) : (
                     <Intl
                       i18n={i18n}
                       id="MyStories__views--plural"
-                      components={[<strong>{views}</strong>]}
+                      components={[<strong>{viewCount}</strong>]}
                     />
                   ))}
-                {views && replies && ' '}
+                {viewCount && replyCount && ' '}
-                {replies &&
+                {replyCount &&
-                  (replies === 1 ? (
+                  (replyCount === 1 ? (
                     <Intl
                       i18n={i18n}
                       id="MyStories__replies--singular"
-                      components={[<strong>{replies}</strong>]}
+                      components={[<strong>{replyCount}</strong>]}
                     />
                   ) : (
                     <Intl
                       i18n={i18n}
                       id="MyStories__replies--plural"
-                      components={[<strong>{replies}</strong>]}
+                      components={[<strong>{replyCount}</strong>]}
                     />
                   ))}
               </>
             ) : (
-              <button
+              canReply && (
-                className="StoryViewer__reply"
+                <button
-                onClick={() => setHasReplyModal(true)}
+                  className="StoryViewer__reply"
-                tabIndex={0}
+                  onClick={() => setHasReplyModal(true)}
-                type="button"
+                  tabIndex={0}
-              >
+                  type="button"
-                {i18n('StoryViewer__reply')}
+                >
-              </button>
+                  {i18n('StoryViewer__reply')}
+                </button>
+              )
             )}
           </div>
         </div>
-        {hasReplyModal && (
+        {hasReplyModal && canReply && (
           <StoryViewsNRepliesModal
             authorTitle={title}
             getPreferredBadge={getPreferredBadge}
@@ -428,7 +457,7 @@ export const StoryViewer = ({
             preferredReactionEmoji={preferredReactionEmoji}
             recentEmojis={recentEmojis}
             renderEmojiPicker={renderEmojiPicker}
-            replies={[]}
+            replies={replies}
             skinTone={skinTone}
             storyPreviewAttachment={attachment}
             views={[]}

ts/components/StoryViewsNRepliesModal.tsx

@@ -12,6 +12,7 @@ import type { EmojiPickDataType } from './emoji/EmojiPicker';
 import type { InputApi } from './CompositionInput';
 import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
 import type { RenderEmojiPickerProps } from './conversation/ReactionPicker';
+import type { ReplyType } from '../types/Stories';
 import { Avatar, AvatarSize } from './Avatar';
 import { CompositionInput } from './CompositionInput';
 import { ContactName } from './conversation/ContactName';
@@ -23,26 +24,10 @@ import { Modal } from './Modal';
 import { Quote } from './conversation/Quote';
 import { ReactionPicker } from './conversation/ReactionPicker';
 import { Tabs } from './Tabs';
+import { Theme } from '../util/theme';
 import { ThemeType } from '../types/Util';
 import { getAvatarColor } from '../types/Colors';
 
-type ReplyType = Pick<
-  ConversationType,
-  | 'acceptedMessageRequest'
-  | 'avatarPath'
-  | 'color'
-  | 'isMe'
-  | 'name'
-  | 'profileName'
-  | 'sharedGroupNames'
-  | 'title'
-> & {
-  body?: string;
-  contactNameColor?: ContactNameColorType;
-  reactionEmoji?: string;
-  timestamp: number;
-};
-
 type ViewType = Pick<
   ConversationType,
   | 'acceptedMessageRequest'
@@ -223,7 +208,7 @@ export const StoryViewsNRepliesModal = ({
     <div className="StoryViewsNRepliesModal__replies">
       {replies.map(reply =>
         reply.reactionEmoji ? (
-          <div className="StoryViewsNRepliesModal__reaction">
+          <div className="StoryViewsNRepliesModal__reaction" key={reply.id}>
             <div className="StoryViewsNRepliesModal__reaction--container">
               <Avatar
                 acceptedMessageRequest={reply.acceptedMessageRequest}
@@ -257,7 +242,7 @@ export const StoryViewsNRepliesModal = ({
             <Emojify text={reply.reactionEmoji} />
           </div>
         ) : (
-          <div className="StoryViewsNRepliesModal__reply">
+          <div className="StoryViewsNRepliesModal__reply" key={reply.id}>
             <Avatar
               acceptedMessageRequest={reply.acceptedMessageRequest}
               avatarPath={reply.avatarPath}
@@ -272,7 +257,13 @@ export const StoryViewsNRepliesModal = ({
               size={AvatarSize.TWENTY_EIGHT}
               title={reply.title}
             />
-            <div className="StoryViewsNRepliesModal__message-bubble">
+            <div
+              className={classNames('StoryViewsNRepliesModal__message-bubble', {
+                'StoryViewsNRepliesModal__message-bubble--doe': Boolean(
+                  reply.deletedForEveryone
+                ),
+              })}
+            >
               <div className="StoryViewsNRepliesModal__reply--title">
                 <ContactName
                   contactNameColor={reply.contactNameColor}
@@ -280,7 +271,14 @@ export const StoryViewsNRepliesModal = ({
                 />
               </div>
 
-              <MessageBody i18n={i18n} text={String(reply.body)} />
+              <MessageBody
+                i18n={i18n}
+                text={
+                  reply.deletedForEveryone
+                    ? i18n('message--deletedForEveryone')
+                    : String(reply.body)
+                }
+              />
 
               <MessageTimestamp
                 i18n={i18n}
@@ -373,6 +371,7 @@ export const StoryViewsNRepliesModal = ({
       })}
       onClose={onClose}
       useFocusTrap={!hasOnlyViewsElement}
+      theme={Theme.Dark}
     >
       {tabsElement || (
         <>

ts/components/conversation/Quote.tsx

@@ -47,7 +47,7 @@ type State = {
 
 export type QuotedAttachmentType = Pick<
   AttachmentType,
-  'contentType' | 'fileName' | 'isVoiceMessage' | 'thumbnail'
+  'contentType' | 'fileName' | 'isVoiceMessage' | 'thumbnail' | 'textAttachment'
 >;
 
 function validateQuote(quote: Props): boolean {
@@ -221,10 +221,11 @@ export class Quote extends React.Component<Props, State> {
       return null;
     }
 
-    const { fileName, contentType } = attachment;
+    const { fileName, contentType, textAttachment } = attachment;
     const isGenericFile =
       !GoogleChrome.isVideoTypeSupported(contentType) &&
       !GoogleChrome.isImageTypeSupported(contentType) &&
+      !textAttachment &&
       !MIME.isAudio(contentType);
 
     if (!isGenericFile) {
@@ -257,13 +258,18 @@ export class Quote extends React.Component<Props, State> {
       return null;
     }
 
-    const { contentType, thumbnail } = attachment;
+    const { contentType, textAttachment, thumbnail } = attachment;
     const url = getUrl(thumbnail);
 
     if (isViewOnce) {
       return this.renderIcon('view-once');
     }
 
+    // TODO DESKTOP-3433
+    if (textAttachment) {
+      return this.renderIcon('image');
+    }
+
     if (GoogleChrome.isVideoTypeSupported(contentType)) {
       return url && !imageBroken
         ? this.renderImage(url, 'play')

ts/models/conversations.ts

@@ -3958,7 +3958,7 @@ export class ConversationModel extends window.Backbone
       storyId?: string;
       timestamp?: number;
     } = {}
-  ): Promise<void> {
+  ): Promise<MessageAttributesType | undefined> {
     if (this.isGroupV1AndDisabled()) {
       return;
     }
@@ -4143,6 +4143,8 @@ export class ConversationModel extends window.Backbone
     }
 
     window.Signal.Data.updateConversation(this.attributes);
+
+    return attributes;
   }
 
   // Is this someone who is a contact, or are we sharing our profile with them?

ts/services/storyLoader.ts

@@ -43,10 +43,13 @@ export function getStoryDataFromMessageAttributes(
     selectedReaction,
     ...pick(message, [
       'conversationId',
+      'deletedForEveryone',
       'readStatus',
+      'sendStateByConversationId',
       'source',
       'sourceUuid',
       'timestamp',
+      'type',
     ]),
   };
 }

ts/sql/Client.ts

@@ -1238,7 +1238,7 @@ async function getOlderMessagesByConversation(
     messageId?: string;
     receivedAt?: number;
     sentAt?: number;
-    storyId?: UUIDStringType;
+    storyId?: string;
   }
 ) {
   const messages = await channels.getOlderMessagesByConversation(

ts/sql/Interface.ts

@@ -617,7 +617,7 @@ export type ServerInterface = DataInterface & {
       messageId?: string;
       receivedAt?: number;
       sentAt?: number;
-      storyId?: UUIDStringType;
+      storyId?: string;
     }
   ) => Promise<Array<MessageTypeUnhydrated>>;
   getNewerMessagesByConversation: (
@@ -687,7 +687,7 @@ export type ClientInterface = DataInterface & {
       messageId?: string;
       receivedAt?: number;
       sentAt?: number;
-      storyId?: UUIDStringType;
+      storyId?: string;
     }
   ) => Promise<Array<MessageAttributesType>>;
   getNewerMessagesByConversation: (

ts/sql/Server.ts

@@ -2314,7 +2314,7 @@ async function getOlderMessagesByConversation(
     messageId?: string;
     receivedAt?: number;
     sentAt?: number;
-    storyId?: UUIDStringType;
+    storyId?: string;
   }
 ): Promise<Array<MessageTypeUnhydrated>> {
   return getOlderMessagesByConversationSync(conversationId, options);
@@ -2332,7 +2332,7 @@ function getOlderMessagesByConversationSync(
     messageId?: string;
     receivedAt?: number;
     sentAt?: number;
-    storyId?: UUIDStringType;
+    storyId?: string;
   } = {}
 ): Array<MessageTypeUnhydrated> {
   const db = getInstance();

ts/state/ducks/stories.ts

@@ -6,7 +6,10 @@ import { pick } from 'lodash';
 import type { AttachmentType } from '../../types/Attachment';
 import type { BodyRangeType } from '../../types/Util';
 import type { MessageAttributesType } from '../../model-types.d';
-import type { MessageDeletedActionType } from './conversations';
+import type {
+  MessageChangedActionType,
+  MessageDeletedActionType,
+} from './conversations';
 import type { NoopActionType } from './noop';
 import type { StateType as RootStateType } from '../reducer';
 import type { StoryViewType } from '../../components/StoryListItem';
@@ -33,23 +36,44 @@ export type StoryDataType = {
   selectedReaction?: string;
 } & Pick<
   MessageAttributesType,
-  'conversationId' | 'readStatus' | 'source' | 'sourceUuid' | 'timestamp'
+  | 'conversationId'
+  | 'deletedForEveryone'
+  | 'readStatus'
+  | 'sendStateByConversationId'
+  | 'source'
+  | 'sourceUuid'
+  | 'timestamp'
+  | 'type'
 >;
 
 // State
 
 export type StoriesStateType = {
   readonly isShowingStoriesView: boolean;
+  readonly replyState?: {
+    messageId: string;
+    replies: Array<MessageAttributesType>;
+  };
   readonly stories: Array<StoryDataType>;
 };
 
 // Actions
 
+const LOAD_STORY_REPLIES = 'stories/LOAD_STORY_REPLIES';
 const MARK_STORY_READ = 'stories/MARK_STORY_READ';
 const REACT_TO_STORY = 'stories/REACT_TO_STORY';
+const REPLY_TO_STORY = 'stories/REPLY_TO_STORY';
 const STORY_CHANGED = 'stories/STORY_CHANGED';
 const TOGGLE_VIEW = 'stories/TOGGLE_VIEW';
 
+type LoadStoryRepliesActionType = {
+  type: typeof LOAD_STORY_REPLIES;
+  payload: {
+    messageId: string;
+    replies: Array<MessageAttributesType>;
+  };
+};
+
 type MarkStoryReadActionType = {
   type: typeof MARK_STORY_READ;
   payload: string;
@@ -63,6 +87,11 @@ type ReactToStoryActionType = {
   };
 };
 
+type ReplyToStoryActionType = {
+  type: typeof REPLY_TO_STORY;
+  payload: MessageAttributesType;
+};
+
 type StoryChangedActionType = {
   type: typeof STORY_CHANGED;
   payload: StoryDataType;
@@ -73,15 +102,19 @@ type ToggleViewActionType = {
 };
 
 export type StoriesActionType =
+  | LoadStoryRepliesActionType
   | MarkStoryReadActionType
+  | MessageChangedActionType
   | MessageDeletedActionType
   | ReactToStoryActionType
+  | ReplyToStoryActionType
   | StoryChangedActionType
   | ToggleViewActionType;
 
 // Action Creators
 
 export const actions = {
+  loadStoryReplies,
   markStoryRead,
   queueStoryDownload,
   reactToStory,
@@ -92,6 +125,26 @@ export const actions = {
 
 export const useStoriesActions = (): typeof actions => useBoundActions(actions);
 
+function loadStoryReplies(
+  conversationId: string,
+  messageId: string
+): ThunkAction<void, RootStateType, unknown, LoadStoryRepliesActionType> {
+  return async dispatch => {
+    const replies = await dataInterface.getOlderMessagesByConversation(
+      conversationId,
+      { limit: 9000, storyId: messageId }
+    );
+
+    dispatch({
+      type: LOAD_STORY_REPLIES,
+      payload: {
+        messageId,
+        replies,
+      },
+    });
+  };
+}
+
 function markStoryRead(
   messageId: string
 ): ThunkAction<void, RootStateType, unknown, MarkStoryReadActionType> {
@@ -225,11 +278,16 @@ function replyToStory(
   mentions: Array<BodyRangeType>,
   timestamp: number,
   story: StoryViewType
-): NoopActionType {
+): ThunkAction<void, RootStateType, unknown, ReplyToStoryActionType> {
-  const conversation = window.ConversationController.get(conversationId);
+  return async dispatch => {
+    const conversation = window.ConversationController.get(conversationId);
 
-  if (conversation) {
+    if (!conversation) {
-    conversation.enqueueMessageForSend(
+      log.error('replyToStory: conversation does not exist', conversationId);
+      return;
+    }
+
+    const messageAttributes = await conversation.enqueueMessageForSend(
       {
         body: messageBody,
         attachments: [],
@@ -240,11 +298,13 @@ function replyToStory(
         timestamp,
       }
     );
-  }
 
-  return {
+    if (messageAttributes) {
-    type: 'NOOP',
+      dispatch({
-    payload: null,
+        type: REPLY_TO_STORY,
+        payload: messageAttributes,
+      });
+    }
   };
 }
 
@@ -285,11 +345,17 @@ export function reducer(
   }
 
   if (action.type === 'MESSAGE_DELETED') {
+    const nextStories = state.stories.filter(
+      story => story.messageId !== action.payload.id
+    );
+
+    if (nextStories.length === state.stories.length) {
+      return state;
+    }
+
     return {
       ...state,
-      stories: state.stories.filter(
+      stories: nextStories,
-        story => story.messageId !== action.payload.id
-      ),
     };
   }
 
@@ -297,12 +363,15 @@ export function reducer(
     const newStory = pick(action.payload, [
       'attachment',
       'conversationId',
+      'deletedForEveryone',
       'messageId',
       'readStatus',
       'selectedReaction',
+      'sendStateByConversationId',
       'source',
       'sourceUuid',
       'timestamp',
+      'type',
     ]);
 
     // Stories don't really need to change except for when we don't have the
@@ -326,6 +395,10 @@ export function reducer(
         existingStory => existingStory.messageId === newStory.messageId
       );
 
+      if (storyIndex < 0) {
+        return state;
+      }
+
       return {
         ...state,
         stories: replaceIndex(state.stories, storyIndex, newStory),
@@ -374,5 +447,63 @@ export function reducer(
     };
   }
 
+  if (action.type === LOAD_STORY_REPLIES) {
+    return {
+      ...state,
+      replyState: action.payload,
+    };
+  }
+
+  // For live updating of the story replies
+  if (
+    action.type === 'MESSAGE_CHANGED' &&
+    state.replyState &&
+    state.replyState.messageId === action.payload.data.storyId
+  ) {
+    const { replyState } = state;
+    const messageIndex = replyState.replies.findIndex(
+      reply => reply.id === action.payload.id
+    );
+
+    // New message
+    if (messageIndex < 0) {
+      return {
+        ...state,
+        replyState: {
+          messageId: replyState.messageId,
+          replies: [...replyState.replies, action.payload.data],
+        },
+      };
+    }
+
+    // Changed message, also handles DOE
+    return {
+      ...state,
+      replyState: {
+        messageId: replyState.messageId,
+        replies: replaceIndex(
+          replyState.replies,
+          messageIndex,
+          action.payload.data
+        ),
+      },
+    };
+  }
+
+  if (action.type === REPLY_TO_STORY) {
+    const { replyState } = state;
+    if (!replyState) {
+      return state;
+    }
+
+    return {
+      ...state,
+      replyState: {
+        messageId: replyState.messageId,
+        replies: [...replyState.replies, action.payload],
+      },
+    };
+  }
+
   return state;
 }

ts/state/selectors/stories.ts

@@ -4,14 +4,22 @@
 import { createSelector } from 'reselect';
 import { pick } from 'lodash';
 
+import type { GetConversationByIdType } from './conversations';
 import type {
   ConversationStoryType,
   StoryViewType,
 } from '../../components/StoryListItem';
+import type { ReplyStateType } from '../../types/Stories';
 import type { StateType } from '../reducer';
-import type { StoriesStateType } from '../ducks/stories';
+import type { StoryDataType, StoriesStateType } from '../ducks/stories';
 import { ReadStatus } from '../../messages/MessageReadStatus';
-import { getConversationSelector } from './conversations';
+import { canReply } from './message';
+import {
+  getContactNameColorSelector,
+  getConversationSelector,
+  getMe,
+} from './conversations';
+import { getUserConversationId } from './user';
 
 export const getStoriesState = (state: StateType): StoriesStateType =>
   state.stories;
@@ -47,12 +55,148 @@ function sortByRecencyAndUnread(
   return storyA.timestamp > storyB.timestamp ? -1 : 1;
 }
 
+function getConversationStory(
+  conversationSelector: GetConversationByIdType,
+  story: StoryDataType,
+  ourConversationId?: string
+): ConversationStoryType {
+  const sender = pick(conversationSelector(story.sourceUuid || story.source), [
+    'acceptedMessageRequest',
+    'avatarPath',
+    'color',
+    'firstName',
+    'hideStory',
+    'id',
+    'isMe',
+    'name',
+    'profileName',
+    'sharedGroupNames',
+    'title',
+  ]);
+
+  const conversation = pick(conversationSelector(story.conversationId), [
+    'acceptedMessageRequest',
+    'avatarPath',
+    'color',
+    'id',
+    'name',
+    'profileName',
+    'sharedGroupNames',
+    'title',
+  ]);
+
+  const { attachment, timestamp } = pick(story, ['attachment', 'timestamp']);
+
+  const storyView: StoryViewType = {
+    attachment,
+    canReply: canReply(story, ourConversationId, conversationSelector),
+    isUnread: story.readStatus === ReadStatus.Unread,
+    messageId: story.messageId,
+    selectedReaction: story.selectedReaction,
+    sender,
+    timestamp,
+  };
+
+  return {
+    conversationId: conversation.id,
+    group: conversation.id !== sender.id ? conversation : undefined,
+    isHidden: Boolean(sender.hideStory),
+    stories: [storyView],
+  };
+}
+
+export type GetStoriesByConversationIdType = (
+  conversationId: string
+) => ConversationStoryType;
+export const getStoriesSelector = createSelector(
+  getConversationSelector,
+  getUserConversationId,
+  getStoriesState,
+  (
+    conversationSelector,
+    ourConversationId,
+    { stories }: Readonly<StoriesStateType>
+  ): GetStoriesByConversationIdType => {
+    return conversationId => {
+      const conversationStoryAcc: ConversationStoryType = {
+        conversationId,
+        stories: [],
+      };
+
+      return stories.reduce((acc, story) => {
+        if (story.conversationId !== conversationId) {
+          return acc;
+        }
+
+        const conversationStory = getConversationStory(
+          conversationSelector,
+          story,
+          ourConversationId
+        );
+
+        return {
+          ...acc,
+          ...conversationStory,
+          stories: [...acc.stories, ...conversationStory.stories],
+        };
+      }, conversationStoryAcc);
+    };
+  }
+);
+
+export const getStoryReplies = createSelector(
+  getConversationSelector,
+  getContactNameColorSelector,
+  getMe,
+  getStoriesState,
+  (
+    conversationSelector,
+    contactNameColorSelector,
+    me,
+    { replyState }: Readonly<StoriesStateType>
+  ): ReplyStateType | undefined => {
+    if (!replyState) {
+      return;
+    }
+
+    return {
+      messageId: replyState.messageId,
+      replies: replyState.replies.map(reply => {
+        const conversation =
+          reply.type === 'outgoing'
+            ? me
+            : conversationSelector(reply.sourceUuid || reply.source);
+
+        return {
+          ...pick(conversation, [
+            'acceptedMessageRequest',
+            'avatarPath',
+            'color',
+            'isMe',
+            'name',
+            'profileName',
+            'sharedGroupNames',
+            'title',
+          ]),
+          ...pick(reply, ['body', 'deletedForEveryone', 'id', 'timestamp']),
+          contactNameColor: contactNameColorSelector(
+            reply.conversationId,
+            conversation.id
+          ),
+        };
+      }),
+    };
+  }
+);
+
 export const getStories = createSelector(
   getConversationSelector,
+  getUserConversationId,
   getStoriesState,
   shouldShowStoriesView,
   (
     conversationSelector,
+    ourConversationId,
     { stories }: Readonly<StoriesStateType>,
     isShowingStoriesView
   ): {
@@ -70,58 +214,30 @@ export const getStories = createSelector(
     const hiddenStoriesById = new Map<string, ConversationStoryType>();
 
     stories.forEach(story => {
-      const sender = pick(
+      const conversationStory = getConversationStory(
-        conversationSelector(story.sourceUuid || story.source),
+        conversationSelector,
-        [
+        story,
-          'acceptedMessageRequest',
+        ourConversationId
-          'avatarPath',
-          'color',
-          'firstName',
-          'hideStory',
-          'id',
-          'isMe',
-          'name',
-          'profileName',
-          'sharedGroupNames',
-          'title',
-        ]
       );
 
-      const conversation = pick(conversationSelector(story.conversationId), [
-        'id',
-        'title',
-      ]);
-
-      const { attachment, timestamp } = pick(story, [
-        'attachment',
-        'timestamp',
-      ]);
-
       let storiesMap: Map<string, ConversationStoryType>;
-      if (sender.hideStory) {
+      if (conversationStory.isHidden) {
         storiesMap = hiddenStoriesById;
       } else {
         storiesMap = storiesById;
       }
 
-      const storyView: StoryViewType = {
+      const existingConversationStory = storiesMap.get(
-        attachment,
+        conversationStory.conversationId
-        isUnread: story.readStatus === ReadStatus.Unread,
+      ) || { stories: [] };
-        messageId: story.messageId,
-        selectedReaction: story.selectedReaction,
-        sender,
-        timestamp,
-      };
 
-      const conversationStory = storiesMap.get(conversation.id) || {
+      storiesMap.set(conversationStory.conversationId, {
-        conversationId: conversation.id,
+        ...existingConversationStory,
-        group: conversation.id !== sender.id ? conversation : undefined,
-        isHidden: Boolean(sender.hideStory),
-        stories: [],
-      };
-      storiesMap.set(conversation.id, {
         ...conversationStory,
-        stories: [...conversationStory.stories, storyView],
+        stories: [
+          ...existingConversationStory.stories,
+          ...conversationStory.stories,
+        ],
       });
     });
 

ts/state/smart/Stories.tsx

@@ -20,7 +20,6 @@ function renderStoryViewer({
   onClose,
   onNextUserStories,
   onPrevUserStories,
-  stories,
 }: SmartStoryViewerPropsType): JSX.Element {
   return (
     <SmartStoryViewer
@@ -28,7 +27,6 @@ function renderStoryViewer({
       onClose={onClose}
       onNextUserStories={onNextUserStories}
       onPrevUserStories={onPrevUserStories}
-      stories={stories}
     />
   );
 }

ts/state/smart/StoryViewer.tsx

@@ -4,15 +4,16 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 
+import type { GetStoriesByConversationIdType } from '../selectors/stories';
 import type { LocalizerType } from '../../types/Util';
 import type { StateType } from '../reducer';
-import type { StoryViewType } from '../../components/StoryListItem';
 import { StoryViewer } from '../../components/StoryViewer';
 import { ToastMessageBodyTooLong } from '../../components/ToastMessageBodyTooLong';
 import {
   getEmojiSkinTone,
   getPreferredReactionEmoji,
 } from '../selectors/items';
+import { getStoriesSelector, getStoryReplies } from '../selectors/stories';
 import { getIntl } from '../selectors/user';
 import { getPreferredBadgeSelector } from '../selectors/badges';
 import { renderEmojiPicker } from './renderEmojiPicker';
@@ -27,7 +28,6 @@ export type PropsType = {
   onClose: () => unknown;
   onNextUserStories: () => unknown;
   onPrevUserStories: () => unknown;
-  stories: Array<StoryViewType>;
 };
 
 export function SmartStoryViewer({
@@ -35,7 +35,6 @@ export function SmartStoryViewer({
   onClose,
   onNextUserStories,
   onPrevUserStories,
-  stories,
 }: PropsType): JSX.Element | null {
   const storiesActions = useStoriesActions();
   const { onSetSkinTone } = useItemsActions();
@@ -47,12 +46,22 @@ export function SmartStoryViewer({
     getPreferredReactionEmoji
   );
 
+  const getStoriesByConversationId = useSelector<
+    StateType,
+    GetStoriesByConversationIdType
+  >(getStoriesSelector);
+
+  const { group, stories } = getStoriesByConversationId(conversationId);
+
   const recentEmojis = useRecentEmojis();
   const skinTone = useSelector<StateType, number>(getEmojiSkinTone);
+  const replyState = useSelector(getStoryReplies);
 
   return (
     <StoryViewer
+      conversationId={conversationId}
       getPreferredBadge={getPreferredBadge}
+      group={group}
       i18n={i18n}
       onClose={onClose}
       onNextUserStories={onNextUserStories}
@@ -76,6 +85,7 @@ export function SmartStoryViewer({
       preferredReactionEmoji={preferredReactionEmoji}
       recentEmojis={recentEmojis}
       renderEmojiPicker={renderEmojiPicker}
+      replyState={replyState}
       stories={stories}
       skinTone={skinTone}
       {...storiesActions}

ts/textsecure/MessageReceiver.ts

@@ -60,7 +60,11 @@ import type { UnprocessedType } from '../textsecure.d';
 import { deriveGroupFields, MASTER_KEY_LENGTH } from '../groups';
 
 import createTaskWithTimeout from './TaskWithTimeout';
-import { processAttachment, processDataMessage } from './processDataMessage';
+import {
+  processAttachment,
+  processDataMessage,
+  processGroupV2Context,
+} from './processDataMessage';
 import { processSyncMessage } from './processSyncMessage';
 import type { EventHandler } from './EventTarget';
 import EventTarget from './EventTarget';
@@ -1813,6 +1817,17 @@ export default class MessageReceiver
       });
     }
 
+    const groupV2 = msg.group ? processGroupV2Context(msg.group) : undefined;
+    if (groupV2 && this.isGroupBlocked(groupV2.id)) {
+      log.warn(
+        `MessageReceiver.handleStoryMessage: envelope ${this.getEnvelopeId(
+          envelope
+        )} ignored; destined for blocked group`
+      );
+      this.removeFromCache(envelope);
+      return;
+    }
+
     const expireTimer = Math.min(
       Math.floor(
         (envelope.serverTimestamp + durations.DAY - Date.now()) / 1000
@@ -1844,6 +1859,7 @@ export default class MessageReceiver
           attachments,
           expireTimer,
           flags: 0,
+          groupV2,
           isStory: true,
           isViewOnce: false,
           timestamp: envelope.timestamp,

ts/types/Stories.ts

@@ -0,0 +1,29 @@
+// Copyright 2022 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import type { ContactNameColorType } from './Colors';
+import type { ConversationType } from '../state/ducks/conversations';
+
+export type ReplyType = Pick<
+  ConversationType,
+  | 'acceptedMessageRequest'
+  | 'avatarPath'
+  | 'color'
+  | 'isMe'
+  | 'name'
+  | 'profileName'
+  | 'sharedGroupNames'
+  | 'title'
+> & {
+  body?: string;
+  contactNameColor?: ContactNameColorType;
+  deletedForEveryone?: boolean;
+  id: string;
+  reactionEmoji?: string;
+  timestamp: number;
+};
+
+export type ReplyStateType = {
+  messageId: string;
+  replies: Array<ReplyType>;
+};