stream-chat-react 12.13.1 → 13.0.0-rc.1

package/README.md

@@ -42,46 +42,35 @@ For complete pricing and details visit our [Chat Pricing Page](https://getstream
 
 ## Installation
 
-### Install with NPM
+### With NPM
 
-`npm install react react-dom stream-chat stream-chat-react`
+`npm install stream-chat stream-chat-react`
 
-### Install with Yarn
+### With Yarn
 
-`yarn add react react-dom stream-chat stream-chat-react`
+`yarn add stream-chat stream-chat-react`
 
-### Install via CDN
-
-```
-<script src="https://cdn.jsdelivr.net/npm/react@16.13.1/umd/react.production.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/react-dom@16/umd/react-dom.production.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/stream-chat"></script>
-<script src="https://cdn.jsdelivr.net/npm/stream-chat-react"></script>
-```
-
-## Example Apps
+## Example Applications
 
 We have built five demo applications showcasing a variety of chat use cases, including social messaging, team collaboration, customer support, livestream gaming, and virtual event. You can preview these [demos](https://getstream.io/chat/demos/) on our website. Also, the code is [open source](https://github.com/GetStream/website-react-examples/).
 
-## Docs
+## Documentation
 
 We use a doc generator to build our [component documentation](https://getstream.io/chat/docs/sdk/react/). We provide a brief description of each chat component and define all of the props it accepts.
 
-The React components are created using the [stream-chat-js](https://github.com/getstream/stream-chat-js) library. If you're customizing the components, it's likely you'll need to make additional calls to our Chat API using our JavaScript client, which has [documentation](https://getstream.io/chat/docs/js/) on our website.
-
-##  TypeScript Support
+The React components are created using the [stream-chat](https://github.com/getstream/stream-chat-js) library. If you're customizing the components, it's likely you'll need to make additional calls to our Chat API using our JavaScript client, which has [documentation](https://getstream.io/chat/docs/javascript/) on our website.
 
-As of version `5.0.0`, the component library has been converted to TypeScript. Please read the [TypeScript guide](https://github.com/GetStream/stream-chat-react/wiki/Typescript-support) for details and implementation assistance.
+## Component Reusability
 
-##  Component Reusability
-
-For components that implement significant logic, it's helpful to split the component into two parts: a top-level component which handles functionality and a lower level component which renders the UI. This way you can swap UI without altering the logic that gives the component its functionality. We use this provider/consumer pattern frequently in the library, and the below example shows how to swap out the `Message` UI component with `MessageTeam`, without affecting any logic in the app.
+For components that implement significant logic, it's helpful to split the component into two parts: a top-level component which handles functionality and a lower level component which renders the UI. This way you can swap UI without altering the logic that gives the component its functionality. We use this provider/consumer pattern frequently in the library, and the below example shows how to swap out the `Message` UI component with `CustomMessageUI` (using `WithComponents`), without affecting any logic in the application.
 
 ```jsx
-<Channel Message={MessageTeam}>
+<Channel>
   <Window>
     <ChannelHeader />
-    <MessageList />
+    <WithComponents overrides={{ Message: CustomMessageUI }}>
+      <MessageList />
+    </WithComponents>
     <MessageInput />
   </Window>
   <Thread />
@@ -90,11 +79,18 @@ For components that implement significant logic, it's helpful to split the compo
 
 ### Customizing Styles
 
-The preferred method for overriding the pre-defined styles in the library is to two-step process. First, import our bundled CSS into the file where you instantiate your chat application. Second, locate any Stream styles you want to override using either the browser inspector or by viewing the library code. You can then add selectors to your local CSS file to override our defaults. For example:
+The preferred method for overriding the pre-defined styles in the library is to two-step process. First, import our bundled CSS into your main CSS file (or CSS file loaded with your chat application). Second, locate any Stream styles you want to override using either the browser inspector or by viewing the library code. You can then add selectors to your local CSS file to override our defaults (ideally within the stream-overrides layer). Layers (when ordered correctly, see example) ensure that your overrides take precedence even if your overriding selectors are less specific. For example:
+
+```css title="index.css"
+@layer stream, stream-overrides;
 
-```js
-import 'stream-chat-react/dist/css/v2/index.css';
-import './App.css';
+@import 'stream-chat-react/css/v2/index.css' layer(stream);
+/* or */
+@import 'stream-chat-react/dist/css/v2/index.css' layer(stream);
+
+@layer stream-overrides {
+  /* your overrides */
+}
 ```
 
 ## Internationalization
@@ -106,6 +102,7 @@ Our library supports auto-translation for various user languages. Please read ou
 We welcome code changes that improve this library or fix a problem. Please make sure to follow all best practices and add tests, if applicable, before submitting a pull request on GitHub. We are pleased to merge your code into the official repository if it meets a need. Make sure to sign our [Contributor License Agreement (CLA)](https://docs.google.com/forms/d/e/1FAIpQLScFKsKkAJI7mhCr7K9rEIOpqIDThrWxuvxnwUq2XkHyG154vQ/viewform) first. See our license file for more details.
 
 ## We are hiring!
+
 We recently closed a [$38 million Series B funding round](https://techcrunch.com/2021/03/04/stream-raises-38m-as-its-chat-and-activity-feed-apis-power-communications-for-1b-users/) and are actively growing.
 Our APIs are used by more than a billion end-users, and by working at Stream, you have the chance to make a huge impact on a team of very strong engineers.
 
@@ -113,10 +110,10 @@ Check out our current openings and apply via [Stream's website](https://getstrea
 
 ## Acknowledgements
 
-### Lamejs
+### lamejs
 
 This project uses `lamejs` library under the LGPL license to convert the recorded audio to mp3 format.
 The library source code is dynamically imported and used only if audio recording is enabled.
 
 You can obtain the source code for `lamejs` from the [lamejs repository](https://github.com/gideonstele/lamejs) that is a fork of [the original JS library](https://github.com/zhuker/lamejs).
-You can find the source code for LAME at https://lame.sourceforge.net  and its license at: https://lame.sourceforge.net/license.txt
+You can find the source code for LAME at https://lame.sourceforge.net and its license at: https://lame.sourceforge.net/license.txt

package/dist/components/AIStateIndicator/AIStateIndicator.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import { Channel } from 'stream-chat';
-import type { DefaultStreamChatGenerics } from '../../types/types';
-export type AIStateIndicatorProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    channel?: Channel<StreamChatGenerics>;
+import type { Channel } from 'stream-chat';
+export type AIStateIndicatorProps = {
+    channel?: Channel;
 };
-export declare const AIStateIndicator: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ channel: channelFromProps, }: AIStateIndicatorProps<StreamChatGenerics>) => React.JSX.Element | null;
+export declare const AIStateIndicator: ({ channel: channelFromProps, }: AIStateIndicatorProps) => React.JSX.Element | null;

package/dist/components/AIStateIndicator/hooks/useAIState.d.ts

@@ -1,5 +1,4 @@
-import { AIState, Channel } from 'stream-chat';
-import type { DefaultStreamChatGenerics } from '../../../types/types';
+import type { AIState, Channel } from 'stream-chat';
 export declare const AIStates: {
     Error: string;
     ExternalSources: string;
@@ -12,6 +11,6 @@ export declare const AIStates: {
  * @param {Channel} channel - The channel for which we want to know the AI state.
  * @returns {{ aiState: AIState }} The current AI state for the given channel.
  */
-export declare const useAIState: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(channel?: Channel<StreamChatGenerics>) => {
+export declare const useAIState: (channel?: Channel) => {
     aiState: AIState;
 };

package/dist/components/Attachment/Attachment.d.ts

@@ -9,23 +9,22 @@ 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 { DefaultStreamChatGenerics } from '../../types/types';
 export declare const ATTACHMENT_GROUPS_ORDER: readonly ["card", "gallery", "image", "media", "audio", "voiceRecording", "file", "unsupported"];
-export type AttachmentProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+export type AttachmentProps = {
     /** The message attachments to render, see [attachment structure](https://getstream.io/chat/docs/javascript/message_format/?language=javascript) **/
-    attachments: StreamAttachment<StreamChatGenerics>[];
+    attachments: StreamAttachment[];
     /**	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;
     /** 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<StreamChatGenerics>>;
+    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) */
-    Audio?: React.ComponentType<AudioProps<StreamChatGenerics>>;
+    Audio?: React.ComponentType<AudioProps>;
     /** Custom UI component for displaying a card type attachment, defaults to and accepts same props as: [Card](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/Card.tsx) */
     Card?: React.ComponentType<CardProps>;
     /** Custom UI component for displaying a file type attachment, defaults to and accepts same props as: [File](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/FileAttachment.tsx) */
-    File?: React.ComponentType<FileAttachmentProps<StreamChatGenerics>>;
+    File?: React.ComponentType<FileAttachmentProps>;
     /** 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<StreamChatGenerics>>;
+    Gallery?: React.ComponentType<GalleryProps>;
     /** 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 */
@@ -35,9 +34,9 @@ export type AttachmentProps<StreamChatGenerics extends DefaultStreamChatGenerics
     /** Custom UI component for displaying unsupported attachment types, defaults to NullComponent */
     UnsupportedAttachment?: React.ComponentType<UnsupportedAttachmentProps>;
     /** Custom UI component for displaying an audio recording attachment, defaults to and accepts same props as: [VoiceRecording](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/VoiceRecording.tsx) */
-    VoiceRecording?: React.ComponentType<VoiceRecordingProps<StreamChatGenerics>>;
+    VoiceRecording?: React.ComponentType<VoiceRecordingProps>;
 };
 /**
  * A component used for rendering message attachments. By default, the component supports: AttachmentActions, Audio, Card, File, Gallery, Image, and Video
  */
-export declare const Attachment: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: AttachmentProps<StreamChatGenerics>) => React.JSX.Element;
+export declare const Attachment: (props: AttachmentProps) => React.JSX.Element;

package/dist/components/Attachment/Attachment.js

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
-import { isAudioAttachment, isFileAttachment, isMediaAttachment, isScrapedContent, isUploadedImage, isVoiceRecordingAttachment, } from './utils';
+import { isAudioAttachment, isFileAttachment, isImageAttachment, isScrapedContent, isVideoAttachment, isVoiceRecordingAttachment, } from 'stream-chat';
 import { AudioContainer, CardContainer, FileContainer, GalleryContainer, ImageContainer, MediaContainer, UnsupportedAttachmentContainer, VoiceRecordingContainer, } from './AttachmentContainer';
+import { SUPPORTED_VIDEO_FORMATS } from './utils';
 const CONTAINER_MAP = {
     audio: AudioContainer,
     card: CardContainer,
@@ -30,9 +31,9 @@ export const Attachment = (props) => {
     return (React.createElement("div", { className: 'str-chat__attachment-list' }, ATTACHMENT_GROUPS_ORDER.reduce((acc, groupName) => [...acc, ...groupedAttachments[groupName]], [])));
 };
 const renderGroupedAttachments = ({ attachments, ...rest }) => {
-    const uploadedImages = attachments.filter((attachment) => isUploadedImage(attachment));
+    const uploadedImages = attachments.filter((attachment) => isImageAttachment(attachment));
     const containers = attachments
-        .filter((attachment) => !isUploadedImage(attachment))
+        .filter((attachment) => !isImageAttachment(attachment))
         .reduce((typeMap, attachment) => {
         const attachmentType = getAttachmentType(attachment);
         const Container = CONTAINER_MAP[attachmentType];
@@ -70,7 +71,7 @@ const getAttachmentType = (attachment) => {
     if (isScrapedContent(attachment)) {
         return 'card';
     }
-    else if (isMediaAttachment(attachment)) {
+    else if (isVideoAttachment(attachment, SUPPORTED_VIDEO_FORMATS)) {
         return 'media';
     }
     else if (isAudioAttachment(attachment)) {
@@ -79,7 +80,7 @@ const getAttachmentType = (attachment) => {
     else if (isVoiceRecordingAttachment(attachment)) {
         return 'voiceRecording';
     }
-    else if (isFileAttachment(attachment)) {
+    else if (isFileAttachment(attachment, SUPPORTED_VIDEO_FORMATS)) {
         return 'file';
     }
     return 'unsupported';

package/dist/components/Attachment/AttachmentActions.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
 import type { Action, Attachment } from 'stream-chat';
 import type { ActionHandlerReturnType } from '../Message/hooks/useActionHandler';
-import type { DefaultStreamChatGenerics } from '../../types/types';
-export type AttachmentActionsProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Attachment<StreamChatGenerics> & {
+export type AttachmentActionsProps = Attachment & {
     /** A list of actions */
     actions: Action[];
     /** Unique id for action button key. Key is generated by concatenating this id with action value - {`${id}-${action.value}`} */
@@ -15,4 +14,4 @@ export type AttachmentActionsProps<StreamChatGenerics extends DefaultStreamChatG
 /**
  * A component for rendering the actions you can take on an attachment.
  */
-export declare const AttachmentActions: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: AttachmentActionsProps<StreamChatGenerics>) => React.JSX.Element;
+export declare const AttachmentActions: (props: AttachmentActionsProps) => React.JSX.Element;

package/dist/components/Attachment/AttachmentContainer.d.ts

@@ -1,18 +1,18 @@
-import React, { PropsWithChildren } from 'react';
-import { AttachmentComponentType, GalleryAttachment, RenderAttachmentProps, RenderGalleryProps } from './utils';
-import type { DefaultStreamChatGenerics } from '../../types/types';
+import type { PropsWithChildren } from 'react';
+import React from 'react';
 import type { Attachment } from 'stream-chat';
-export type AttachmentContainerProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    attachment: Attachment<StreamChatGenerics> | GalleryAttachment<StreamChatGenerics>;
+import type { AttachmentComponentType, GalleryAttachment, RenderAttachmentProps, RenderGalleryProps } from './utils';
+export type AttachmentContainerProps = {
+    attachment: Attachment | GalleryAttachment;
     componentType: AttachmentComponentType;
 };
-export declare const AttachmentWithinContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ attachment, children, componentType, }: PropsWithChildren<AttachmentContainerProps<StreamChatGenerics>>) => React.JSX.Element;
-export declare const AttachmentActionsContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ actionHandler, attachment, AttachmentActions, }: RenderAttachmentProps<StreamChatGenerics>) => React.JSX.Element | null;
-export declare const GalleryContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ attachment, Gallery, }: RenderGalleryProps<StreamChatGenerics>) => React.JSX.Element;
-export declare const ImageContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: RenderAttachmentProps<StreamChatGenerics>) => React.JSX.Element;
-export declare const CardContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: RenderAttachmentProps<StreamChatGenerics>) => React.JSX.Element;
-export declare const FileContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ attachment, File, }: RenderAttachmentProps<StreamChatGenerics>) => React.JSX.Element | null;
-export declare const AudioContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ attachment, Audio, }: RenderAttachmentProps<StreamChatGenerics>) => React.JSX.Element;
-export declare const VoiceRecordingContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ attachment, isQuoted, VoiceRecording, }: RenderAttachmentProps<StreamChatGenerics>) => React.JSX.Element;
-export declare const MediaContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: RenderAttachmentProps<StreamChatGenerics>) => React.JSX.Element;
-export declare const UnsupportedAttachmentContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ attachment, UnsupportedAttachment, }: RenderAttachmentProps<StreamChatGenerics>) => React.JSX.Element;
+export declare const AttachmentWithinContainer: ({ attachment, children, componentType, }: PropsWithChildren<AttachmentContainerProps>) => React.JSX.Element;
+export declare const AttachmentActionsContainer: ({ actionHandler, attachment, AttachmentActions, }: RenderAttachmentProps) => React.JSX.Element | null;
+export declare const GalleryContainer: ({ attachment, Gallery, }: RenderGalleryProps) => React.JSX.Element;
+export declare const ImageContainer: (props: RenderAttachmentProps) => React.JSX.Element;
+export declare const CardContainer: (props: RenderAttachmentProps) => React.JSX.Element;
+export declare const FileContainer: ({ attachment, File, }: RenderAttachmentProps) => React.JSX.Element | null;
+export declare const AudioContainer: ({ attachment, Audio, }: RenderAttachmentProps) => React.JSX.Element;
+export declare const VoiceRecordingContainer: ({ attachment, isQuoted, VoiceRecording, }: RenderAttachmentProps) => React.JSX.Element;
+export declare const MediaContainer: (props: RenderAttachmentProps) => React.JSX.Element;
+export declare const UnsupportedAttachmentContainer: ({ attachment, UnsupportedAttachment, }: RenderAttachmentProps) => React.JSX.Element;

package/dist/components/Attachment/AttachmentContainer.js

@@ -9,7 +9,7 @@ import { Gallery as DefaultGallery, ImageComponent as DefaultImage } from '../Ga
 import { Card as DefaultCard } from './Card';
 import { FileAttachment as DefaultFile } from './FileAttachment';
 import { UnsupportedAttachment as DefaultUnsupportedAttachment } from './UnsupportedAttachment';
-import { isGalleryAttachmentType, isSvgAttachment, } from './utils';
+import { isGalleryAttachmentType, isSvgAttachment } from './utils';
 import { useChannelStateContext } from '../../context/ChannelStateContext';
 export const AttachmentWithinContainer = ({ attachment, children, componentType, }) => {
     const isGAT = isGalleryAttachmentType(attachment);
@@ -34,7 +34,7 @@ export const AttachmentWithinContainer = ({ attachment, children, componentType,
 export const AttachmentActionsContainer = ({ actionHandler, attachment, AttachmentActions = DefaultAttachmentActions, }) => {
     if (!attachment.actions?.length)
         return null;
-    return (React.createElement(AttachmentActions, { ...attachment, actionHandler: actionHandler, actions: attachment.actions, id: attachment.id || '', text: attachment.text || '' }));
+    return (React.createElement(AttachmentActions, { ...attachment, actionHandler: actionHandler, actions: attachment.actions, id: attachment.localMetadata?.id || '', text: attachment.text || '' }));
 };
 function getCssDimensionsVariables(url) {
     const cssVars = {

package/dist/components/Attachment/Audio.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
 import type { Attachment } from 'stream-chat';
-import type { DefaultStreamChatGenerics } from '../../types/types';
-export type AudioProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    og: Attachment<StreamChatGenerics>;
+export type AudioProps = {
+    og: Attachment;
 };
 /**
  * Audio attachment with play/pause button and progress bar
  */
-export declare const Audio: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: AudioProps<StreamChatGenerics>) => React.JSX.Element | null;
+export declare const Audio: (props: AudioProps) => React.JSX.Element | null;

package/dist/components/Attachment/Card.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AudioProps } from './Audio';
+import type { AudioProps } from './Audio';
 import type { RenderAttachmentProps } from './utils';
 export declare const CardAudio: ({ og: { asset_url, author_name, mime_type, og_scrape_url, text, title, title_link }, }: AudioProps) => React.JSX.Element;
 export type CardProps = RenderAttachmentProps['attachment'];

package/dist/components/Attachment/FileAttachment.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import type { Attachment } from 'stream-chat';
-import type { DefaultStreamChatGenerics } from '../../types/types';
-export type FileAttachmentProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    attachment: Attachment<StreamChatGenerics>;
+export type FileAttachmentProps = {
+    attachment: Attachment;
 };
-export declare const FileAttachment: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ attachment, }: FileAttachmentProps<StreamChatGenerics>) => React.JSX.Element;
+export declare const FileAttachment: ({ attachment }: FileAttachmentProps) => React.JSX.Element;

package/dist/components/Attachment/FileAttachment.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FileIcon } from '../ReactFileUtilities';
 import { DownloadButton, FileSizeIndicator } from './components';
-const UnMemoizedFileAttachment = ({ attachment, }) => (React.createElement("div", { className: 'str-chat__message-attachment-file--item', "data-testid": 'attachment-file' },
+const UnMemoizedFileAttachment = ({ attachment }) => (React.createElement("div", { className: 'str-chat__message-attachment-file--item', "data-testid": 'attachment-file' },
     React.createElement(FileIcon, { className: 'str-chat__file-icon', mimeType: attachment.mime_type }),
     React.createElement("div", { className: 'str-chat__message-attachment-file--item-text' },
         React.createElement("div", { className: 'str-chat__message-attachment-file--item-first-row' },

package/dist/components/Attachment/UnsupportedAttachment.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import type { Attachment } from 'stream-chat';
-import type { DefaultStreamChatGenerics } from '../../types/types';
-export type UnsupportedAttachmentProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    attachment: Attachment<StreamChatGenerics>;
+export type UnsupportedAttachmentProps = {
+    attachment: Attachment;
 };
-export declare const UnsupportedAttachment: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ attachment, }: UnsupportedAttachmentProps<StreamChatGenerics>) => React.JSX.Element;
+export declare const UnsupportedAttachment: ({ attachment }: UnsupportedAttachmentProps) => React.JSX.Element;

package/dist/components/Attachment/UnsupportedAttachment.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FileIcon } from '../ReactFileUtilities';
 import { useTranslationContext } from '../../context';
-export const UnsupportedAttachment = ({ attachment, }) => {
+export const UnsupportedAttachment = ({ attachment }) => {
     const { t } = useTranslationContext('UnsupportedAttachment');
     return (React.createElement("div", { className: 'str-chat__message-attachment-unsupported', "data-testid": 'attachment-unsupported' },
         React.createElement(FileIcon, { className: 'str-chat__file-icon' }),

package/dist/components/Attachment/VoiceRecording.d.ts

@@ -1,16 +1,15 @@
 import React from 'react';
 import type { Attachment } from 'stream-chat';
-import type { DefaultStreamChatGenerics } from '../../types';
-export type VoiceRecordingPlayerProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<VoiceRecordingProps<StreamChatGenerics>, 'attachment'> & {
+export type VoiceRecordingPlayerProps = Pick<VoiceRecordingProps, 'attachment'> & {
     /** An array of fractional numeric values of playback speed to override the defaults (1.0, 1.5, 2.0) */
     playbackRates?: number[];
 };
 export declare const VoiceRecordingPlayer: ({ attachment, playbackRates, }: VoiceRecordingPlayerProps) => React.JSX.Element | null;
-export type QuotedVoiceRecordingProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<VoiceRecordingProps<StreamChatGenerics>, 'attachment'>;
+export type QuotedVoiceRecordingProps = Pick<VoiceRecordingProps, 'attachment'>;
 export declare const QuotedVoiceRecording: ({ attachment }: QuotedVoiceRecordingProps) => React.JSX.Element;
-export type VoiceRecordingProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+export type VoiceRecordingProps = {
     /** The attachment object from the message's attachment list. */
-    attachment: Attachment<StreamChatGenerics>;
+    attachment: Attachment;
     /** A boolean flag to signal whether the attachment will be rendered inside the quoted reply. */
     isQuoted?: boolean;
 };

package/dist/components/Attachment/components/FileSizeIndicator.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 type FileSizeIndicatorProps = {
     /** file size in byte */
-    fileSize?: number;
+    fileSize?: number | string;
     /**
      The maximum number of fraction digits to display. If not set, the default behavior is to round to 3 significant digits.
      @default undefined

package/dist/components/Attachment/components/FileSizeIndicator.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import { prettifyFileSize } from '../../MessageInput/hooks/utils';
 export const FileSizeIndicator = ({ fileSize, maximumFractionDigits, }) => {
-    if (!(fileSize && Number.isFinite(Number(fileSize))))
+    const actualFileSize = typeof fileSize === 'string' ? parseFloat(fileSize) : fileSize;
+    if (typeof actualFileSize === 'undefined' || !Number.isFinite(Number(actualFileSize))) {
         return null;
-    return (React.createElement("span", { className: 'str-chat__message-attachment-file--item-size', "data-testid": 'file-size-indicator' }, prettifyFileSize(fileSize, maximumFractionDigits)));
+    }
+    return (React.createElement("span", { className: 'str-chat__message-attachment-file--item-size', "data-testid": 'file-size-indicator' }, prettifyFileSize(actualFileSize, maximumFractionDigits)));
 };

package/dist/components/Attachment/utils.d.ts

@@ -1,34 +1,20 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import type { Attachment } from 'stream-chat';
 import type { ATTACHMENT_GROUPS_ORDER, AttachmentProps } from './Attachment';
-import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
-import type { LocalAttachment, LocalAudioAttachment, LocalFileAttachment, LocalImageAttachment, LocalVideoAttachment, LocalVoiceRecordingAttachment, VoiceRecordingAttachment } from '../MessageInput';
 export declare const SUPPORTED_VIDEO_FORMATS: string[];
 export type AttachmentComponentType = (typeof ATTACHMENT_GROUPS_ORDER)[number];
 export type GroupedRenderedAttachment = Record<AttachmentComponentType, ReactNode[]>;
-export type GalleryAttachment<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    images: Attachment<StreamChatGenerics>[];
+export type GalleryAttachment = {
+    images: Attachment[];
     type: 'gallery';
 };
-export type RenderAttachmentProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Omit<AttachmentProps<StreamChatGenerics>, 'attachments'> & {
-    attachment: Attachment<StreamChatGenerics>;
+export type RenderAttachmentProps = Omit<AttachmentProps, 'attachments'> & {
+    attachment: Attachment;
 };
-export type RenderGalleryProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Omit<AttachmentProps<StreamChatGenerics>, 'attachments'> & {
-    attachment: GalleryAttachment<StreamChatGenerics>;
+export type RenderGalleryProps = Omit<AttachmentProps, 'attachments'> & {
+    attachment: GalleryAttachment;
 };
-export declare const isLocalAttachment: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(attachment: UnknownType) => attachment is LocalAttachment<StreamChatGenerics>;
-export declare const isScrapedContent: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(attachment: Attachment<StreamChatGenerics>) => string | undefined;
-export declare const isUploadedImage: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(attachment: Attachment<StreamChatGenerics>) => boolean;
-export declare const isLocalImageAttachment: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(attachment: Attachment<StreamChatGenerics> | LocalAttachment<StreamChatGenerics>) => attachment is LocalImageAttachment<StreamChatGenerics>;
-export declare const isGalleryAttachmentType: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(output: Attachment<StreamChatGenerics> | GalleryAttachment<StreamChatGenerics>) => output is GalleryAttachment<StreamChatGenerics>;
-export declare const isAudioAttachment: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(attachment: Attachment<StreamChatGenerics> | LocalAttachment<StreamChatGenerics>) => boolean;
-export declare const isLocalAudioAttachment: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(attachment: Attachment<StreamChatGenerics> | LocalAttachment<StreamChatGenerics>) => attachment is LocalAudioAttachment<StreamChatGenerics>;
-export declare const isVoiceRecordingAttachment: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(attachment: Attachment<StreamChatGenerics> | LocalAttachment<StreamChatGenerics>) => attachment is VoiceRecordingAttachment;
-export declare const isLocalVoiceRecordingAttachment: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(attachment: Attachment<StreamChatGenerics> | LocalAttachment<StreamChatGenerics>) => attachment is LocalVoiceRecordingAttachment<StreamChatGenerics>;
-export declare const isFileAttachment: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(attachment: Attachment<StreamChatGenerics> | LocalAttachment<StreamChatGenerics>) => boolean;
-export declare const isLocalFileAttachment: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(attachment: Attachment<StreamChatGenerics> | LocalAttachment<StreamChatGenerics>) => attachment is LocalFileAttachment<StreamChatGenerics>;
-export declare const isMediaAttachment: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(attachment: Attachment<StreamChatGenerics> | LocalAttachment<StreamChatGenerics>) => boolean;
-export declare const isLocalMediaAttachment: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(attachment: Attachment<StreamChatGenerics> | LocalAttachment<StreamChatGenerics>) => attachment is LocalVideoAttachment<StreamChatGenerics>;
+export declare const isGalleryAttachmentType: (attachment: Attachment | GalleryAttachment) => attachment is GalleryAttachment;
 export declare const isSvgAttachment: (attachment: Attachment) => boolean;
 export declare const divMod: (num: number, divisor: number) => number[];
 export declare const displayDuration: (totalSeconds?: number) => string;

package/dist/components/Attachment/utils.js

@@ -4,24 +4,9 @@ export const SUPPORTED_VIDEO_FORMATS = [
     'video/webm',
     'video/quicktime',
 ];
-export const isLocalAttachment = (attachment) => !!attachment.localMetadata?.id;
-export const isScrapedContent = (attachment) => attachment.og_scrape_url || attachment.title_link;
-export const isUploadedImage = (attachment) => attachment.type === 'image' && !isScrapedContent(attachment);
-export const isLocalImageAttachment = (attachment) => isUploadedImage(attachment) && isLocalAttachment(attachment);
-export const isGalleryAttachmentType = (output) => Array.isArray(output.images);
-export const isAudioAttachment = (attachment) => attachment.type === 'audio';
-export const isLocalAudioAttachment = (attachment) => isAudioAttachment(attachment) && isLocalAttachment(attachment);
-export const isVoiceRecordingAttachment = (attachment) => attachment.type === 'voiceRecording';
-export const isLocalVoiceRecordingAttachment = (attachment) => isVoiceRecordingAttachment(attachment) && isLocalAttachment(attachment);
-export const isFileAttachment = (attachment) => attachment.type === 'file' ||
-    !!(attachment.mime_type &&
-        SUPPORTED_VIDEO_FORMATS.indexOf(attachment.mime_type) === -1 &&
-        attachment.type !== 'video');
-export const isLocalFileAttachment = (attachment) => isFileAttachment(attachment) && isLocalAttachment(attachment);
-export const isMediaAttachment = (attachment) => (attachment.mime_type &&
-    SUPPORTED_VIDEO_FORMATS.indexOf(attachment.mime_type) !== -1) ||
-    attachment.type === 'video';
-export const isLocalMediaAttachment = (attachment) => isMediaAttachment(attachment) && isLocalAttachment(attachment);
+// This identity function determines attachment type specific to React.
+// Once made sure other SDKs support the same logic, move to stream-chat-js
+export const isGalleryAttachmentType = (attachment) => Array.isArray(attachment.images);
 export const isSvgAttachment = (attachment) => {
     const filename = attachment.fallback || '';
     return filename.toLowerCase().endsWith('.svg');

package/dist/components/Avatar/Avatar.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import type { UserResponse } from 'stream-chat';
-import type { DefaultStreamChatGenerics } from '../../types/types';
-export type AvatarProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+export type AvatarProps = {
     /** Custom root element class that will be merged with the default class */
     className?: string;
     /** Image URL or default is an image of the first initial of the name if there is one  */
@@ -13,9 +12,9 @@ export type AvatarProps<StreamChatGenerics extends DefaultStreamChatGenerics = D
     /** mouseOver event handler attached to the component root element */
     onMouseOver?: (event: React.BaseSyntheticEvent) => void;
     /** The entire user object for the chat user displayed in the component */
-    user?: UserResponse<StreamChatGenerics>;
+    user?: UserResponse;
 };
 /**
  * A round avatar image with fallback to username's first letter
  */
-export declare const Avatar: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: AvatarProps<StreamChatGenerics>) => React.JSX.Element;
+export declare const Avatar: (props: AvatarProps) => React.JSX.Element;

package/dist/components/Avatar/ChannelAvatar.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import { AvatarProps, GroupAvatarProps } from './index';
-import type { DefaultStreamChatGenerics } from '../../types';
-export type ChannelAvatarProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Partial<GroupAvatarProps> & AvatarProps<StreamChatGenerics>;
-export declare const ChannelAvatar: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ groupChannelDisplayInfo, image, name, user, ...sharedProps }: ChannelAvatarProps<StreamChatGenerics>) => React.JSX.Element;
+import type { AvatarProps, GroupAvatarProps } from './';
+export type ChannelAvatarProps = Partial<GroupAvatarProps> & AvatarProps;
+export declare const ChannelAvatar: ({ groupChannelDisplayInfo, image, name, user, ...sharedProps }: ChannelAvatarProps) => React.JSX.Element;

package/dist/components/Avatar/ChannelAvatar.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Avatar, GroupAvatar } from './index';
+import { Avatar, GroupAvatar } from './';
 export const ChannelAvatar = ({ groupChannelDisplayInfo, image, name, user, ...sharedProps }) => {
     if (groupChannelDisplayInfo) {
         return (React.createElement(GroupAvatar, { groupChannelDisplayInfo: groupChannelDisplayInfo, ...sharedProps }));

package/dist/components/Avatar/GroupAvatar.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { AvatarProps } from './Avatar';
-import { GroupChannelDisplayInfo } from '../ChannelPreview';
+import type { AvatarProps } from './Avatar';
+import type { GroupChannelDisplayInfo } from '../ChannelPreview';
 export type GroupAvatarProps = Pick<AvatarProps, 'className' | 'onClick' | 'onMouseOver'> & {
     /** Mapping of image URLs to names which initials will be used as fallbacks in case image assets fail to load. */
     groupChannelDisplayInfo: GroupChannelDisplayInfo;