Theming v2 message component

docusaurus/docs/React/message-components/reactions.mdx

@@ -195,6 +195,14 @@ If true, adds a CSS class that reverses the horizontal positioning of the select
 
 ## ReactionsList Props
 
+### additionalEmojiProps
+
+Additional props to be passed to the [NimbleEmoji](https://github.com/missive/emoji-mart/blob/master/src/components/emoji/nimble-emoji.js) component from `emoji-mart`.
+
+| Type   |
+| ------ |
+| object |
+
 ### onClick
 
 Custom on click handler for an individual reaction in the list (overrides the function stored in `MessageContext`).
@@ -203,6 +211,14 @@ Custom on click handler for an individual reaction in the list (overrides the fu
 | ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
 | (event: React.BaseSyntheticEvent) => Promise<void\> \| void | [MessageContextValue['onReactionListClick']](../contexts/message-context.mdx#onreactionlistclick) |
 
+### own_reactions
+
+An array of the own reaction objects to distinguish own reactions visually (overrides `message.own_reactions` from `MessageContext`).
+
+| Type  |
+| ----- |
+| array |
+
 ### reaction_counts
 
 An object that keeps track of the count of each type of reaction on a message (overrides `message.reaction_counts` from `MessageContext`).
@@ -253,6 +269,14 @@ Function that adds/removes a reaction on a message (overrides the function store
 | ------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
 | (reactionType: string, event: React.BaseSyntheticEvent) => Promise<void\> | [MessageContextValue['handleReaction']](../contexts/message-context.mdx#handlereaction) |
 
+### own_reactions
+
+An array of the own reaction objects to distinguish own reactions visually (overrides `message.own_reactions` from `MessageContext`).
+
+| Type  |
+| ----- |
+| array |
+
 ### reaction_counts
 
 An object that keeps track of the count of each type of reaction on a message (overrides `message.reaction_counts` from `MessageContext`).

package.json

@@ -31,6 +31,7 @@
     "@braintree/sanitize-url": "6.0.0",
     "@juggle/resize-observer": "^3.3.1",
     "@stream-io/stream-chat-css": "^2.10.0",
+    "clsx": "^1.1.1",
     "dayjs": "^1.10.4",
     "emoji-mart": "3.0.1",
     "emoji-regex": "^9.2.0",
@@ -46,7 +47,7 @@
     "pretty-bytes": "^5.4.1",
     "prop-types": "^15.7.2",
     "react-fast-compare": "^3.2.0",
-    "react-file-utils": "^1.1.12",
+    "react-file-utils": "^1.2.0",
     "react-image-gallery": "^1.2.7",
     "react-is": "^18.1.0",
     "react-markdown": "^5.0.3",
@@ -170,7 +171,7 @@
     "style-loader": "^2.0.0",
     "ts-jest": "^26.5.1",
     "tslib": "2.3.0",
-    "typescript": "4.3.5",
+    "typescript": "^4.7.4",
     "url-loader": "^4.1.1",
     "webpack": "4.44.2",
     "webpack-cli": "^3.3.12",

src/components/Attachment/Attachment.tsx

@@ -1,21 +1,26 @@
-import React from 'react';
+import React, { useMemo } from 'react';
+import { sanitizeUrl } from '@braintree/sanitize-url';
+import type { ReactPlayerProps } from 'react-player';
+import type { Attachment as StreamAttachment } from 'stream-chat';
 
 import {
+  AttachmentComponentType,
+  GroupedRenderedAttachment,
   isAudioAttachment,
   isFileAttachment,
-  isGalleryAttachmentType,
-  isImageAttachment,
   isMediaAttachment,
-  renderAudio,
-  renderCard,
-  renderFile,
-  renderGallery,
-  renderImage,
-  renderMedia,
+  isScrapedContent,
+  isUploadedImage,
 } from './utils';
 
-import type { ReactPlayerProps } from 'react-player';
-import type { Attachment as StreamAttachment } from 'stream-chat';
+import {
+  AudioContainer,
+  CardContainer,
+  FileContainer,
+  GalleryContainer,
+  ImageContainer,
+  MediaContainer,
+} from './AttachmentContainer';
 
 import type { AttachmentActionsProps } from './AttachmentActions';
 import type { AudioProps } from './Audio';
@@ -26,6 +31,22 @@ import type { ActionHandlerReturnType } from '../Message/hooks/useActionHandler'
 
 import type { DefaultStreamChatGenerics } from '../../types/types';
 
+const CONTAINER_MAP = {
+  audio: AudioContainer,
+  card: CardContainer,
+  file: FileContainer,
+  media: MediaContainer,
+} as const;
+
+const ATTACHMENT_GROUPS_ORDER: AttachmentComponentType[] = [
+  'card',
+  'gallery',
+  'image',
+  'media',
+  'audio',
+  'file',
+];
+
 export type AttachmentProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
 > = {
@@ -57,54 +78,97 @@ export const Attachment = <
 >(
   props: AttachmentProps<StreamChatGenerics>,
 ) => {
-  const { attachments, ...rest } = props;
-
-  const gallery = {
-    images: attachments?.filter(
-      (attachment) =>
-        attachment.type === 'image' && !(attachment.og_scrape_url || attachment.title_link),
-    ),
-    type: 'gallery',
-  };
-
-  const newAttachments =
-    gallery.images.length >= 2
-      ? [
-          ...attachments.filter(
-            (attachment) =>
-              !(
-                attachment.type === 'image' && !(attachment.og_scrape_url || attachment.title_link)
-              ),
-          ),
-          gallery,
-        ]
-      : attachments;
+  const { attachments } = props;
+
+  const groupedAttachments = useMemo(() => renderGroupedAttachments(props), [attachments]);
 
   return (
-    <>
-      {newAttachments.map((attachment) => {
-        if (isGalleryAttachmentType(attachment)) {
-          return renderGallery({ ...rest, attachment });
-        }
+    <div className='str-chat__attachment-list'>
+      {ATTACHMENT_GROUPS_ORDER.reduce(
+        (acc, groupName) => [...acc, ...groupedAttachments[groupName]],
+        [] as React.ReactNode[],
+      )}
+    </div>
+  );
+};
 
-        if (isImageAttachment(attachment)) {
-          return renderImage({ ...rest, attachment });
-        }
+const renderGroupedAttachments = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+>({
+  attachments,
+  ...rest
+}: AttachmentProps<StreamChatGenerics>): GroupedRenderedAttachment => {
+  const uploadedImages: StreamAttachment<StreamChatGenerics>[] = [];
 
-        if (isAudioAttachment(attachment)) {
-          return renderAudio({ ...rest, attachment });
-        }
+  const containers = attachments.reduce(
+    (acc, attachment) => {
+      if (isUploadedImage(attachment)) {
+        uploadedImages.push({
+          ...attachment,
+          image_url: sanitizeUrl(attachment.image_url),
+          thumb_url: sanitizeUrl(attachment.thumb_url),
+        });
+      } else {
+        const attachmentType = getAttachmentType(attachment);
+        // allow single card attachment
+        if (acc.card.length === 1 && attachmentType === 'card') return acc;
 
-        if (isFileAttachment(attachment)) {
-          return renderFile({ ...rest, attachment });
+        if (attachmentType) {
+          const Container = CONTAINER_MAP[attachmentType];
+          acc[attachmentType].push(
+            <Container
+              key={`${attachmentType}-${acc[attachmentType].length}`}
+              {...rest}
+              attachment={attachment}
+            />,
+          );
         }
+      }
+      return acc;
+    },
+    {
+      audio: [],
+      card: [],
+      file: [],
+      gallery: [],
+      image: [],
+      media: [],
+    } as GroupedRenderedAttachment,
+  );
 
-        if (isMediaAttachment(attachment)) {
-          return renderMedia({ ...rest, attachment });
-        }
+  if (uploadedImages.length > 1) {
+    containers['gallery'] = [
+      <GalleryContainer
+        key='gallery-container'
+        {...rest}
+        attachment={{
+          images: uploadedImages,
+          type: 'gallery',
+        }}
+      />,
+    ];
+  } else if (uploadedImages.length === 1) {
+    containers['image'] = [
+      <ImageContainer key='image-container' {...rest} attachment={uploadedImages[0]} />,
+    ];
+  }
+  return containers;
+};
 
-        return renderCard({ ...rest, attachment });
-      })}
-    </>
-  );
+const getAttachmentType = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+>(
+  attachment: AttachmentProps<StreamChatGenerics>['attachments'][number],
+): keyof typeof CONTAINER_MAP | null => {
+  if (isScrapedContent(attachment)) {
+    return 'card';
+  } else if (isMediaAttachment(attachment)) {
+    return 'media';
+  } else if (isAudioAttachment(attachment)) {
+    return 'audio';
+  } else if (isFileAttachment(attachment)) {
+    return 'file';
+  }
+
+  return null;
 };

src/components/Attachment/AttachmentActions.tsx

@@ -30,11 +30,7 @@ const UnMemoizedAttachmentActions = <
     event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
     name?: string,
     value?: string,
-  ) => {
-    if (actionHandler) {
-      actionHandler(name, value, event);
-    }
-  };
+  ) => actionHandler?.(name, value, event);
 
   return (
     <div className='str-chat__message-attachment-actions'>