feat: add new giphy and audio attachment widget designs and attachment grouping redesign (#2934)

Author: MartinCupela

src/components/Attachment/Attachment.tsx

@@ -10,50 +10,39 @@ import {
 } from 'stream-chat';
 
 import {
-  AudioContainer,
   CardContainer,
   FileContainer,
-  GalleryContainer,
   GeolocationContainer,
-  ImageContainer,
+  GiphyContainer,
   MediaContainer,
   UnsupportedAttachmentContainer,
-  VoiceRecordingContainer,
 } from './AttachmentContainer';
 import { SUPPORTED_VIDEO_FORMATS } from './utils';
+import { defaultAttachmentActionsDefaultFocus } from './AttachmentActions';
 
 import type { ReactPlayerProps } from 'react-player';
 import type { SharedLocationResponse, Attachment as StreamAttachment } from 'stream-chat';
-import type { AttachmentActionsProps } from './AttachmentActions';
+import type {
+  AttachmentActionsDefaultFocusByType,
+  AttachmentActionsProps,
+} from './AttachmentActions';
 import type { AudioProps } from './Audio';
 import type { VoiceRecordingProps } from './VoiceRecording';
-import type { CardProps } from './Card';
+import type { CardProps } from './LinkPreview/Card';
 import type { FileAttachmentProps } from './FileAttachment';
 import type { GalleryProps, ImageProps } from '../Gallery';
 import type { UnsupportedAttachmentProps } from './UnsupportedAttachment';
 import type { ActionHandlerReturnType } from '../Message/hooks/useActionHandler';
 import type { GroupedRenderedAttachment } from './utils';
 import type { GeolocationProps } from './Geolocation';
-
-const CONTAINER_MAP = {
-  audio: AudioContainer,
-  // todo: rename to linkPreview
-  card: CardContainer,
-  file: FileContainer,
-  media: MediaContainer,
-  unsupported: UnsupportedAttachmentContainer,
-  voiceRecording: VoiceRecordingContainer,
-} as const;
+import type { GiphyAttachmentProps } from './Giphy';
 
 export const ATTACHMENT_GROUPS_ORDER = [
-  'card',
-  'gallery',
-  'image',
   'media',
-  'audio',
-  'voiceRecording',
-  'file',
+  'giphy',
+  'card',
   'geolocation',
+  'file',
   'unsupported',
 ] as const;
 
@@ -62,6 +51,8 @@ export type AttachmentProps = {
   attachments: (StreamAttachment | SharedLocationResponse)[];
   /**	The handler function to call when an action is performed on an attachment, examples include canceling a \/giphy command or shuffling the results. */
   actionHandler?: ActionHandlerReturnType;
+  /** Which action should be focused on initial render, by attachment type (match by action.value) */
+  attachmentActionsDefaultFocus?: AttachmentActionsDefaultFocusByType;
   /** Custom UI component for displaying attachment actions, defaults to and accepts same props as: [AttachmentActions](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/AttachmentActions.tsx) */
   AttachmentActions?: React.ComponentType<AttachmentActionsProps>;
   /** Custom UI component for displaying an audio type attachment, defaults to and accepts same props as: [Audio](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/Audio.tsx) */
@@ -73,6 +64,8 @@ export type AttachmentProps = {
   /** Custom UI component for displaying a gallery of image type attachments, defaults to and accepts same props as: [Gallery](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/Gallery.tsx) */
   Gallery?: React.ComponentType<GalleryProps>;
   Geolocation?: React.ComponentType<GeolocationProps>;
+  /** Custom UI component for displaying a Giphy image, defaults to and accepts same props as: [Giphy](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/Giphy.tsx) */
+  Giphy?: React.ComponentType<GiphyAttachmentProps>;
   /** Custom UI component for displaying an image type attachment, defaults to and accepts same props as: [Image](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/Image.tsx) */
   Image?: React.ComponentType<ImageProps>;
   /** Optional flag to signal that an attachment is a displayed as a part of a quoted message */
@@ -86,15 +79,24 @@ export type AttachmentProps = {
 };
 
 /**
- * A component used for rendering message attachments. By default, the component supports: AttachmentActions, Audio, Card, File, Gallery, Image, and Video
+ * A component used for rendering message attachments.
  */
 export const Attachment = (props: AttachmentProps) => {
-  const { attachments } = props;
+  const {
+    attachmentActionsDefaultFocus = defaultAttachmentActionsDefaultFocus,
+    attachments,
+    ...rest
+  } = props;
 
   const groupedAttachments = useMemo(
-    () => renderGroupedAttachments(props),
+    () =>
+      renderGroupedAttachments({
+        attachmentActionsDefaultFocus,
+        attachments,
+        ...rest,
+      }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [attachments],
+    [attachments, attachmentActionsDefaultFocus],
   );
 
   return (
@@ -111,87 +113,77 @@ const renderGroupedAttachments = ({
   attachments,
   ...rest
 }: AttachmentProps): GroupedRenderedAttachment => {
-  const uploadedImages: StreamAttachment[] = attachments.filter((attachment) =>
-    isImageAttachment(attachment),
+  const mediaAttachments: StreamAttachment[] = [];
+  const containers = attachments.reduce<GroupedRenderedAttachment>(
+    (typeMap, attachment) => {
+      if (isSharedLocationResponse(attachment)) {
+        typeMap.geolocation.push(
+          <GeolocationContainer
+            {...rest}
+            key={`geolocation-${typeMap.geolocation.length}`}
+            location={attachment}
+          />,
+        );
+      } else if (attachment.type === 'giphy') {
+        typeMap.card.push(
+          <GiphyContainer
+            key={`giphy-${typeMap.giphy.length}`}
+            {...rest}
+            attachment={attachment}
+          />,
+        );
+      } else if (isScrapedContent(attachment)) {
+        typeMap.card.push(
+          <CardContainer
+            key={`card-${typeMap.card.length}`}
+            {...rest}
+            attachment={attachment}
+          />,
+        );
+      } else if (
+        isImageAttachment(attachment) ||
+        isVideoAttachment(attachment, SUPPORTED_VIDEO_FORMATS)
+      ) {
+        mediaAttachments.push(attachment);
+      } else if (
+        isAudioAttachment(attachment) ||
+        isVoiceRecordingAttachment(attachment) ||
+        isFileAttachment(attachment, SUPPORTED_VIDEO_FORMATS)
+      ) {
+        typeMap.file.push(
+          <FileContainer
+            key={`file-${typeMap.file.length}`}
+            {...rest}
+            attachment={attachment}
+          />,
+        );
+      } else {
+        typeMap.unsupported.push(
+          <UnsupportedAttachmentContainer
+            key={`unsupported-${typeMap.unsupported.length}`}
+            {...rest}
+            attachment={attachment}
+          />,
+        );
+      }
+
+      return typeMap;
+    },
+    {
+      card: [],
+      file: [],
+      geolocation: [],
+      giphy: [],
+      media: [],
+      unsupported: [],
+    },
   );
 
-  const containers = attachments
-    .filter((attachment) => !isImageAttachment(attachment))
-    .reduce<GroupedRenderedAttachment>(
-      (typeMap, attachment) => {
-        if (isSharedLocationResponse(attachment)) {
-          typeMap.geolocation.push(
-            <GeolocationContainer
-              {...rest}
-              key='geolocation-container'
-              location={attachment}
-            />,
-          );
-        } else {
-          const attachmentType = getAttachmentType(attachment);
-
-          const Container = CONTAINER_MAP[attachmentType];
-          typeMap[attachmentType].push(
-            <Container
-              key={`${attachmentType}-${typeMap[attachmentType].length}`}
-              {...rest}
-              attachment={attachment}
-            />,
-          );
-        }
-
-        return typeMap;
-      },
-      {
-        audio: [],
-        card: [],
-        file: [],
-        media: [],
-        unsupported: [],
-        // not used in reduce
-        // eslint-disable-next-line sort-keys
-        image: [],
-        // eslint-disable-next-line sort-keys
-        gallery: [],
-        geolocation: [],
-        voiceRecording: [],
-      },
+  if (mediaAttachments.length) {
+    containers.media.push(
+      <MediaContainer key='media-container' {...rest} attachments={mediaAttachments} />,
     );
-
-  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;
 };
-
-export const getAttachmentType = (
-  attachment: AttachmentProps['attachments'][number],
-): keyof typeof CONTAINER_MAP => {
-  if (isScrapedContent(attachment)) {
-    return 'card';
-  } else if (isVideoAttachment(attachment, SUPPORTED_VIDEO_FORMATS)) {
-    return 'media';
-  } else if (isAudioAttachment(attachment)) {
-    return 'audio';
-  } else if (isVoiceRecordingAttachment(attachment)) {
-    return 'voiceRecording';
-  } else if (isFileAttachment(attachment, SUPPORTED_VIDEO_FORMATS)) {
-    return 'file';
-  }
-
-  return 'unsupported';
-};

src/components/Attachment/AttachmentActions.tsx

@@ -1,9 +1,11 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import type { Action, Attachment } from 'stream-chat';
 
 import { useTranslationContext } from '../../context';
 
 import type { ActionHandlerReturnType } from '../Message/hooks/useActionHandler';
+import { Button } from '../Button';
+import clsx from 'clsx';
 
 export type AttachmentActionsProps = Attachment & {
   /** A list of actions */
@@ -14,11 +16,22 @@ export type AttachmentActionsProps = Attachment & {
   text: string;
   /** Click event handler */
   actionHandler?: ActionHandlerReturnType;
+  /** Which action should be focused on initial render (match by action.value) */
+  defaultFocusedActionValue?: string;
+};
+
+export type AttachmentActionsDefaultFocusByType = Partial<
+  Record<NonNullable<Attachment['type']>, string>
+>;
+
+export const defaultAttachmentActionsDefaultFocus: AttachmentActionsDefaultFocusByType = {
+  giphy: 'send',
 };
 
 const UnMemoizedAttachmentActions = (props: AttachmentActionsProps) => {
-  const { actionHandler, actions, id, text } = props;
+  const { actionHandler, actions, defaultFocusedActionValue, id, text } = props;
   const { t } = useTranslationContext('UnMemoizedAttachmentActions');
+  const buttonRefs = useRef<Array<HTMLButtonElement | null>>([]);
 
   const handleActionClick = (
     event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
@@ -35,20 +48,43 @@ const UnMemoizedAttachmentActions = (props: AttachmentActionsProps) => {
     [t],
   );
 
+  const focusIndex = useMemo(() => {
+    if (!defaultFocusedActionValue) return null;
+    const index = actions.findIndex(
+      (action) => action.value === defaultFocusedActionValue,
+    );
+    return index >= 0 ? index : null;
+  }, [actions, defaultFocusedActionValue]);
+
+  useEffect(() => {
+    if (focusIndex === null) return;
+    const button = buttonRefs.current[focusIndex];
+    if (button && document.activeElement !== button) {
+      button.focus();
+    }
+  }, [focusIndex]);
+
   return (
     <div className='str-chat__message-attachment-actions'>
       <div className='str-chat__message-attachment-actions-form'>
         <span>{text}</span>
-        {actions.map((action) => (
-          <button
-            className={`str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--${action.style}`}
+        {actions.map((action, index) => (
+          <Button
+            className={clsx(
+              `str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--${action.style}`,
+              'str-chat__button--ghost',
+              'str-chat__button--secondary',
+            )}
             data-testid={`${action.name}`}
             data-value={action.value}
             key={`${id}-${action.value}`}
             onClick={(event) => handleActionClick(event, action.name, action.value)}
+            ref={(element) => {
+              buttonRefs.current[index] = element;
+            }}
           >
             {action.text ? (knownActionText[action.text] ?? t(action.text)) : null}
-          </button>
+          </Button>
         ))}
       </div>
     </div>