+ {ATTACHMENT_GROUPS_ORDER.reduce(
+ (acc, groupName) => [...acc, ...groupedAttachments[groupName]],
+ [] as React.ReactNode[],
+ )}
+
+ );
+};
- if (isImageAttachment(attachment)) {
- return renderImage({ ...rest, attachment });
- }
+const renderGroupedAttachments = <
+ StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+>({
+ attachments,
+ ...rest
+}: AttachmentProps
- {text}
+ {text}
{actions.map((action) => (
@@ -102,6 +79,90 @@ const UnMemoizedAudio = <
);
};
+type PlayButtonProps = {
+ isPlaying: boolean;
+ onClick: () => void;
+};
+
+export const PlayButton = ({ isPlaying, onClick }: PlayButtonProps) => (
+
+);
+
+type ProgressBarProps = {
+ progress: number;
+} & Pick
+
+
+);
+
+const AudioV2 = ({ og }: AudioProps) => {
+ const { asset_url, file_size, title } = og;
+ const { audioRef, isPlaying, progress, seek, togglePlay } = useAudioController();
+
+ if (!asset_url) return null;
+
+ const dataTestId = 'audio-widget';
+ const rootClassName = 'str-chat__message-attachment-audio-widget';
+
+ return (
+
+
+
+ );
+};
+
+const UnMemoizedAudio = <
+ StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+>(
+ props: AudioProps
+
+
+
+
+
+ {title}
+
+
+
+
+ );
+};
+
+interface CardV1Props {
giphy?: Attachment['giphy'];
/** The url of the full sized image */
image_url?: string;
@@ -22,15 +58,14 @@ export type CardProps = {
title_link?: string;
/** The card type used in the className attribute */
type?: string;
-};
+}
-const UnMemoizedCard = (props: PropsWithChildren
+
+
+ {t('this content could not be displayed')}
+
+
-
- );
+ return
-
-
- {t('this content could not be displayed')}
-
-
+
+ {author_name || getHostFromURL(url)}
+
+
+);
+
+type CardHeaderProps = Pick<
+ CardProps,
+ 'asset_url' | 'title' | 'type' | 'image_url' | 'thumb_url'
+> & {
+ dimensions: Dimensions;
+ image?: string;
+};
+
+const CardHeader = (props: CardHeaderProps) => {
+ const { asset_url, dimensions, image, image_url, thumb_url, title, type } = props;
+
+ let visual = null;
+ if (asset_url && type === 'video') {
+ visual = (
+
+ {visual}
+
+ ) : null;
+};
+
+type CardContentProps = RenderAttachmentProps['attachment'];
+
+const CardContent = (props: CardContentProps) => {
+ const { author_name, og_scrape_url, text, title, title_link, type } = props;
+ const url = title_link || og_scrape_url;
+
+ return (
+
+ {type === 'audio' ? (
+
+ );
+};
+
+const CardV2 = (props: CardProps) => {
+ const { asset_url, giphy, image_url, thumb_url, title, title_link, type } = props;
+ const { giphyVersion: giphyVersionName } = useChannelStateContext('CardHeader');
+
+ let image = thumb_url || image_url;
+ const dimensions: { height?: string; width?: string } = {};
+
+ if (type === 'giphy' && typeof giphy !== 'undefined') {
+ const giphyVersion = giphy[giphyVersionName as keyof NonNullable
+ {url &&
+ )}
+ {title}
}
+ {text && {text}
}
+
+
+ );
+};
+
+export const CardAudio = ({
+ og: { asset_url, author_name, og_scrape_url, text, title, title_link },
+}: AudioProps) => {
+ const { audioRef, isPlaying, progress, seek, togglePlay } = useAudioController();
+
+ const url = title_link || og_scrape_url;
+ const dataTestId = 'card-audio-widget';
+ const rootClassName = 'str-chat__message-attachment-card-audio-widget';
+ return (
+
+ {asset_url && (
+ <>
+
+
+ );
+};
+
+export type CardProps = RenderAttachmentProps['attachment'];
+
+const UnMemoizedCard = (props: CardProps) => {
+ const { themeVersion } = useChatContext('Card');
+
+ return themeVersion === '2' ?
+
+
+ )}
+
+
+
+ {url &&
+ {title}
}
+ {text && (
+ {text}
+ )}
+
+
+);
+
+const UnMemoizedFileAttachmentV2 = <
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
->(
- props: FileAttachmentProps
+
+ {attachment.title}
+
+
+
-
-
+>({
+ attachment,
+}: FileAttachmentProps) => (
+ ) => {
+ const { themeVersion } = useChatContext('FileAttachment');
+
+ return themeVersion === '2' ? (
+
+
+ ,
+ );
const playButtonTestId = 'play-audio';
const pauseButtonTestId = 'pause-audio';
@@ -25,91 +36,123 @@ describe('Audio', () => {
});
afterEach(cleanup);
- it('should render title and description as text, and render the image with description as alt tag', () => {
- const { getByAltText, getByText } = renderComponent();
+ it('in v1 should render title and render the image with description as alt tag', () => {
+ const { container } = renderComponent({
+ chatContext: { themeVersion: '1' },
+ og: { ...AUDIO, title: 'deterministic' },
+ });
- expect(getByText(mockAudioAsset.title)).toBeInTheDocument();
- expect(getByText(mockAudioAsset.text)).toBeInTheDocument();
+ expect(container).toMatchSnapshot();
+ });
- const image = getByAltText(mockAudioAsset.description);
- expect(image).toBeInTheDocument();
- expect(image.src).toBe(mockAudioAsset.image_url);
+ it('in v2 uploaded should render title and file size', () => {
+ const { container, getByText } = renderComponent({
+ chatContext: { themeVersion: '2' },
+ og: AUDIO,
+ });
+
+ expect(getByText(AUDIO.title)).toBeInTheDocument();
+ expect(getByText(prettybytes(AUDIO.file_size))).toBeInTheDocument();
+ expect(container.querySelector('img')).not.toBeInTheDocument();
});
- it('should render an audio element with the right source', () => {
- const { getByTestId } = renderComponent();
+ it('in v2 should show the correct progress after clicking to the middle of a progress bar (seeking)', async () => {
+ const { getByTestId } = renderComponent({ chatContext: { themeVersion: '2' }, og: AUDIO });
+
+ jest
+ .spyOn(HTMLDivElement.prototype, 'getBoundingClientRect')
+ .mockImplementationOnce(() => ({ width: 120, x: 0 }));
- const source = getByTestId('audio-source');
+ jest.spyOn(HTMLAudioElement.prototype, 'currentTime', 'set').mockImplementationOnce(() => {});
+
+ fireEvent.click(getByTestId('audio-progress'), {
+ clientX: 60,
+ });
- expect(source).toBeInTheDocument();
- expect(source.src).toBe(mockAudioAsset.asset_url);
- expect(source.parentElement).toBeInstanceOf(HTMLAudioElement);
+ await waitFor(() => {
+ expect(getByTestId('audio-progress')).toHaveAttribute('data-progress', '50');
+ });
});
- it('should show the correct button if the song is paused/playing', async () => {
- const { queryByTestId } = renderComponent();
+ describe.each([['1'], ['2']])('version %s', (themeVersion) => {
+ it('should render an audio element with the right source', () => {
+ const { getByTestId } = renderComponent({ chatContext: { themeVersion }, og: AUDIO });
+
+ const source = getByTestId('audio-source');
- const playButton = () => queryByTestId(playButtonTestId);
- const pauseButton = () => queryByTestId(pauseButtonTestId);
+ expect(source).toBeInTheDocument();
+ expect(source.src).toBe(AUDIO.asset_url);
+ expect(source.parentElement).toBeInstanceOf(HTMLAudioElement);
+ });
- expect(await playButton()).toBeInTheDocument();
- expect(await pauseButton()).not.toBeInTheDocument();
+ it('should show the correct button if the song is paused/playing', async () => {
+ const { queryByTestId } = renderComponent({ chatContext: { themeVersion }, og: AUDIO });
- fireEvent.click(playButton());
+ const playButton = () => queryByTestId(playButtonTestId);
+ const pauseButton = () => queryByTestId(pauseButtonTestId);
- expect(await playButton()).not.toBeInTheDocument();
- expect(await pauseButton()).toBeInTheDocument();
+ expect(await playButton()).toBeInTheDocument();
+ expect(await pauseButton()).not.toBeInTheDocument();
- fireEvent.click(pauseButton());
+ fireEvent.click(playButton());
- expect(await playButton()).toBeInTheDocument();
- expect(await pauseButton()).not.toBeInTheDocument();
- });
+ expect(await playButton()).not.toBeInTheDocument();
+ expect(await pauseButton()).toBeInTheDocument();
- it('should poll for progress every 500ms if the file is played, and stop doing that when it is paused', () => {
- const { getByTestId } = renderComponent();
+ fireEvent.click(pauseButton());
- let intervalId;
- const setIntervalSpy = jest.spyOn(window, 'setInterval').mockImplementationOnce(() => {
- intervalId = 'something';
- return intervalId;
+ expect(await playButton()).toBeInTheDocument();
+ expect(await pauseButton()).not.toBeInTheDocument();
});
- const clearIntervalSpy = jest.spyOn(window, 'clearInterval');
- fireEvent.click(getByTestId(playButtonTestId));
- expect(setIntervalSpy).toHaveBeenCalledWith(expect.any(Function), 500);
+ it(`should poll for progress every ${PROGRESS_UPDATE_INTERVAL}ms if the file is played, and stop doing that when it is paused`, () => {
+ const { getByTestId } = renderComponent({ chatContext: { themeVersion }, og: AUDIO });
- fireEvent.click(getByTestId(pauseButtonTestId));
- expect(clearIntervalSpy).toHaveBeenCalledWith(intervalId);
- });
+ let intervalId;
+ const setIntervalSpy = jest.spyOn(window, 'setInterval').mockImplementationOnce(() => {
+ intervalId = 'something';
+ return intervalId;
+ });
+ const clearIntervalSpy = jest.spyOn(window, 'clearInterval');
- it('should clean up the progress interval if the component is unmounted while the file is playing', () => {
- const { getByTestId, unmount = cleanup } = renderComponent();
+ fireEvent.click(getByTestId(playButtonTestId));
+ expect(setIntervalSpy).toHaveBeenCalledWith(expect.any(Function), PROGRESS_UPDATE_INTERVAL);
- let intervalId;
- jest.spyOn(window, 'setInterval').mockImplementationOnce(() => {
- intervalId = 'something';
- return intervalId;
+ fireEvent.click(getByTestId(pauseButtonTestId));
+ expect(clearIntervalSpy).toHaveBeenCalledWith(intervalId);
});
- fireEvent.click(getByTestId(playButtonTestId));
- const clearIntervalSpy = jest.spyOn(window, 'clearInterval');
+ it('should clean up the progress interval if the component is unmounted while the file is playing', () => {
+ const { getByTestId, unmount = cleanup } = renderComponent({
+ chatContext: { themeVersion },
+ og: AUDIO,
+ });
- unmount();
+ let intervalId;
+ jest.spyOn(window, 'setInterval').mockImplementationOnce(() => {
+ intervalId = 'something';
+ return intervalId;
+ });
+ fireEvent.click(getByTestId(playButtonTestId));
- expect(clearIntervalSpy).toHaveBeenCalledWith(intervalId);
- });
+ const clearIntervalSpy = jest.spyOn(window, 'clearInterval');
- it('should show the correct progress', async () => {
- const { getByTestId } = renderComponent();
+ unmount();
- jest.spyOn(HTMLAudioElement.prototype, 'duration', 'get').mockImplementationOnce(() => 100);
- jest.spyOn(HTMLAudioElement.prototype, 'currentTime', 'get').mockImplementationOnce(() => 50);
+ expect(clearIntervalSpy).toHaveBeenCalledWith(intervalId);
+ });
- fireEvent.click(getByTestId(playButtonTestId));
+ it('should show the correct progress', async () => {
+ const { getByTestId } = renderComponent({ chatContext: { themeVersion }, og: AUDIO });
- await waitFor(() => {
- expect(getByTestId('audio-progress')).toHaveStyle({ width: '50%' });
+ jest.spyOn(HTMLAudioElement.prototype, 'duration', 'get').mockImplementationOnce(() => 100);
+ jest.spyOn(HTMLAudioElement.prototype, 'currentTime', 'get').mockImplementationOnce(() => 50);
+
+ fireEvent.click(getByTestId(playButtonTestId));
+
+ await waitFor(() => {
+ expect(getByTestId('audio-progress')).toHaveAttribute('data-progress', '50');
+ });
});
});
});
diff --git a/src/components/Attachment/__tests__/Card.test.js b/src/components/Attachment/__tests__/Card.test.js
index 428f17745..8f63d5b8e 100644
--- a/src/components/Attachment/__tests__/Card.test.js
+++ b/src/components/Attachment/__tests__/Card.test.js
@@ -1,14 +1,16 @@
import React from 'react';
-import { cleanup, render } from '@testing-library/react';
+import { cleanup, render, waitFor } from '@testing-library/react';
import '@testing-library/jest-dom';
import { Card } from '../Card';
import { ChannelStateProvider } from '../../../context/ChannelStateContext';
import { ChatProvider } from '../../../context/ChatContext';
+import { ComponentProvider } from '../../../context/ComponentContext';
import {
generateChannel,
+ generateGiphyAttachment,
generateMember,
generateUser,
getOrCreateChannelApi,
@@ -26,11 +28,13 @@ const mockedChannel = generateChannel({
thread: [],
});
-const renderCard = (client, cardProps, theRenderer = render) =>
+const renderCard = ({ cardProps, chatContext, theRenderer = render }) =>
theRenderer(
-
+
-
+
,
);
@@ -45,195 +49,458 @@ describe('Card', () => {
afterEach(cleanup);
- it('should render Card with default props', async () => {
- const { container } = await renderCard(chatClient);
- expect(container.firstChild).toMatchInlineSnapshot(`
-
- `);
- });
-
- it('should render Card with default props and image_url', async () => {
- const { container } = await renderCard(chatClient, { image_url: 'test.jpg' });
- expect(container.firstChild).toMatchInlineSnapshot(`null`);
- });
-
- it('should render Card with default props and title', async () => {
- const { container } = await renderCard(chatClient, { title: 'test' });
- expect(container.firstChild).toMatchInlineSnapshot(`null`);
- });
-
- it('should render Card with default props and og_scrape_url', async () => {
- const { container } = await renderCard(chatClient, { og_scrape_url: 'https://google.com' });
- expect(container.firstChild).toMatchInlineSnapshot(`
-
- `);
- });
-
- it('should render Card with default props and title and og_scrape_url', async () => {
- const { container } = await renderCard(chatClient, {
- og_scrape_url: 'https://google.com',
- title: 'test',
- });
- expect(container.firstChild).toMatchInlineSnapshot(`
-
- `);
- });
+ `);
+ });
- it('should render Card with default props and title, og_scrape_url, image_url', async () => {
- const { container } = await renderCard(chatClient, {
- image_url: 'test.jpg',
- og_scrape_url: 'https://google.com',
- title: 'test',
+ it('should render Card with default props and image_url', async () => {
+ const { container } = await renderCard({
+ cardProps: { image_url: 'test.jpg' },
+ chatContext: { chatClient },
+ });
+ expect(container.firstChild).toMatchInlineSnapshot(`null`);
});
- expect(container.firstChild).toMatchInlineSnapshot(`
-
+
+);
+
+const file = {
+ asset_url: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
+ file_size: 1337,
+ mime_type: 'application/pdf',
+ text: 'My file',
+ title: 'Nice file',
+ type: 'file',
+};
describe('File', () => {
- it('should render File component', () => {
- const file = {
- asset_url: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
- file_size: 1337,
- mime_type: 'application/pdf',
- text: 'My file',
- title: 'Nice file',
- type: 'file',
- };
- const tree = renderer.create(getComponent(file)).toJSON();
+ it.each([['1'], ['2']])('should render File component in V%s', (themeVersion) => {
+ const tree = renderer
+ .create(getComponent({ attachment: file, chatContext: { themeVersion } }))
+ .toJSON();
expect(tree).toMatchSnapshot();
});
});
diff --git a/src/components/Attachment/__tests__/__snapshots__/Attachment.test.js.snap b/src/components/Attachment/__tests__/__snapshots__/Attachment.test.js.snap
new file mode 100644
index 000000000..34c5f9e42
--- /dev/null
+++ b/src/components/Attachment/__tests__/__snapshots__/Attachment.test.js.snap
@@ -0,0 +1,127 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`attachment combines scraped & uploaded content should render all uploaded attachments 1`] = `
+
+`;
+
+exports[`File should render File component in V2 1`] = `
+
+
+);
+
+const UnMemoizedFileAttachment = <
+ StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+>({
+ attachment,
+}: FileAttachmentProps
+
+
+
+
{attachment.title}
-
- {attachment.file_size && Number.isFinite(Number(attachment.file_size)) && (
- {prettybytes(attachment.file_size as number)}
- )}
+
+ {props.customTestId}
;
+const Card = (props) => {props.customTestId}
;
+const Media = (props) => {props.customTestId}
;
const AttachmentActions = () => ;
-const Image = () => ;
-const File = () => ;
-const Gallery = () => ;
-
-const getAttachmentComponent = (props) => (
- {props.customTestId}
;
+const File = (props) => {props.customTestId}
;
+const Gallery = (props) => {props.customTestId}
;
+
+const ATTACHMENTS = {
+ scraped: {
+ audio: generateScrapedAudioAttachment(),
+ giphy: generateGiphyAttachment(),
+ image: generateScrapedImageAttachment(),
+ unrecognized: generateScrapedDataAttachment({ type: nanoid() }),
+ video: generateScrapedVideoAttachment(),
+ },
+ uploaded: {
+ audio: generateAudioAttachment(),
+ file: generateFileAttachment(),
+ gallery: Array.from({ length: 3 }, generateImageAttachment),
+ image: generateImageAttachment(),
+ video: generateVideoAttachment(),
+ },
+};
+
+const renderComponent = (props) =>
+ render(
+
-
- `);
- });
- it('should render Card with default props and title, og_scrape_url, image_url, text', async () => {
- const { container } = await renderCard(chatClient, {
- image_url: 'test.jpg',
- og_scrape_url: 'https://google.com',
- text: 'test text',
- title: 'test',
+ it('should render Card with default props and title', async () => {
+ const { container } = await renderCard({
+ cardProps: { title: 'test' },
+ chatContext: { chatClient },
+ });
+ expect(container.firstChild).toMatchInlineSnapshot(`null`);
});
- expect(container.firstChild).toMatchInlineSnapshot(`
-
- 
-
-
-
-
+ it('should render Card with default props and og_scrape_url', async () => {
+ const { container } = await renderCard({
+ cardProps: { og_scrape_url: 'https://google.com' },
+ chatContext: { chatClient },
+ });
+ expect(container.firstChild).toMatchInlineSnapshot(`
- `);
- });
+ `);
+ });
+
+ it('should render Card with default props and title and og_scrape_url', async () => {
+ const { container } = await renderCard({
+ cardProps: {
+ og_scrape_url: 'https://google.com',
+ title: 'test',
+ },
+ chatContext: { chatClient },
+ });
+ expect(container.firstChild).toMatchInlineSnapshot(`
+
+ `);
+ });
- it('should render trimmed url', async () => {
- const { getByText } = await renderCard(chatClient, {
- og_scrape_url:
- 'https://www.theverge.com/2020/6/15/21291288/sony-ps5-software-user-interface-ui-design-dashboard-teaser-video',
- title: 'test',
+ it('should render Card with default props and title, og_scrape_url, image_url', async () => {
+ const { container } = await renderCard({
+ cardProps: {
+ image_url: 'test.jpg',
+ og_scrape_url: 'https://google.com',
+ title: 'test',
+ },
+ chatContext: { chatClient },
+ });
+ expect(container.firstChild).toMatchInlineSnapshot(`
+
-
-
-
-
-
+
+ `);
+ });
+
+ it('should render Card with default props and title, og_scrape_url, image_url, text', async () => {
+ const { container } = await renderCard({
+ cardProps: {
+ image_url: 'test.jpg',
+ og_scrape_url: 'https://google.com',
+ text: 'test text',
+ title: 'test',
+ },
+ chatContext: { chatClient },
+ });
+
+ expect(container.firstChild).toMatchInlineSnapshot(`
+
+
+
+
+
+
+
+ `);
+ });
+
+ it('should render trimmed url', async () => {
+ const { getByText } = await renderCard({
+ cardProps: {
+ og_scrape_url:
+ 'https://www.theverge.com/2020/6/15/21291288/sony-ps5-software-user-interface-ui-design-dashboard-teaser-video',
+ title: 'test',
+ },
+ chatContext: { chatClient },
+ });
+ expect(getByText('theverge.com')).toBeInTheDocument();
+ });
+
+ it('should return null if no og_scrape_url && no title_link', async () => {
+ const { container } = await renderCard({
+ cardProps: { title: 'test card' },
+ chatContext: { chatClient },
+ });
+ expect(container).toBeEmptyDOMElement();
});
- expect(getByText('theverge.com')).toBeInTheDocument();
});
- it('should return null if no og_scrape_url && no title_link', async () => {
- const { container } = await renderCard(chatClient, { title: 'test card' }, render);
- expect(container).toBeEmptyDOMElement();
+ describe('theme V2', () => {
+ beforeAll(() => {
+ jest.spyOn(window.HTMLMediaElement.prototype, 'pause').mockImplementation(() => {});
+ });
+
+ afterAll(jest.restoreAllMocks);
+
+ const dummyAttachment = {
+ asset_url: 'dummyAttachment_asset_url',
+ author_name: 'dummyAttachment_author_name',
+ image_url: 'dummyAttachment_image_url',
+ og_scrape_url: 'dummyAttachment_og_scrape_url',
+ text: 'dummyAttachment_text',
+ thumb_url: 'dummyAttachment_thumb_url',
+ title: 'dummyAttachment_title',
+ title_link: 'dummyAttachment_title_link',
+ };
+
+ const attachmentTypes = ['audio', 'image', 'video'];
+
+ const cases = attachmentTypes.reduce((acc, type) => {
+ const attachment = { ...dummyAttachment, type };
+ acc[type] = [
+ {
+ attachment: { ...attachment, og_scrape_url: undefined, title_link: undefined },
+ props: 'og_scrape_url neither title_link is available',
+ render: `card without caption`,
+ },
+ {
+ attachment: {
+ ...attachment,
+ asset_url: undefined,
+ image_url: undefined,
+ thumb_url: undefined,
+ title: undefined,
+ title_link: undefined,
+ },
+ props: 'neither image and asset urls nor title_link are available',
+ render: 'unable-to-display card',
+ },
+ {
+ attachment: { ...attachment, title_link: undefined },
+ props: 'title_link is not available',
+ render: `${type} with caption using og_scrape_url and with asset in header`,
+ },
+ {
+ attachment: { ...attachment, title: undefined },
+ props: 'title is not available',
+ render: `${type} without title`,
+ },
+ {
+ attachment: { ...attachment, title: undefined, title_link: undefined },
+ props: 'title_link neither title is available',
+ render: `${type} without title and with caption using og_scrape_url and with image in header`,
+ },
+ ];
+ if (type === 'audio') {
+ acc[type].push(
+ {
+ attachment: {
+ ...attachment,
+ image_url: undefined,
+ thumb_url: undefined,
+ },
+ props: 'og image URLs are not available',
+ render: `audio widget with title & text in Card content and without Card header`,
+ },
+ {
+ attachment: { ...attachment, asset_url: undefined, image_url: undefined },
+ props: 'thumb_url is available, but not asset_url, image_url',
+ render: `image loaded from thumb_url not ${type} widget`,
+ },
+ {
+ attachment: { ...attachment, asset_url: undefined, thumb_url: undefined },
+ props: 'image_url is available, but not asset_url, thumb_url',
+ render: `image loaded from image_url not ${type} widget`,
+ },
+ {
+ attachment,
+ props: 'all props are available',
+ render: `audio widget with image loaded from thumb_url and title & text in Card content`,
+ },
+ {
+ attachment: {
+ ...attachment,
+ asset_url: undefined,
+ image_url: undefined,
+ thumb_url: undefined,
+ },
+ props: 'asset and neither og image URL is available',
+ render: 'content part with title and text only and without the header part of the Card',
+ },
+ );
+ } else if (type === 'video') {
+ acc[type].push(
+ {
+ attachment: {
+ ...attachment,
+ image_url: undefined,
+ thumb_url: undefined,
+ },
+ props: 'og image URLs are not available',
+ render: `video widget in header and title & text in Card content`,
+ },
+ {
+ attachment: { ...attachment, asset_url: undefined, image_url: undefined },
+ props: 'thumb_url is available, but not asset_url, image_url',
+ render: `image loaded from thumb_url not ${type} widget`,
+ },
+ {
+ attachment: { ...attachment, asset_url: undefined, thumb_url: undefined },
+ props: 'image_url is available, but not asset_url, thumb_url',
+ render: `image loaded from image_url not ${type} widget`,
+ },
+ {
+ attachment,
+ props: 'all props are available',
+ render: `video widget in header and title & text in Card content`,
+ },
+ {
+ attachment: {
+ ...attachment,
+ asset_url: undefined,
+ image_url: undefined,
+ thumb_url: undefined,
+ },
+ props: 'scraped media URL is not available',
+ render: `content part with title and text only and without the header part of the Card`,
+ },
+ );
+ } else if (type === 'image') {
+ acc[type].push(
+ {
+ attachment: {
+ ...attachment,
+ image_url: undefined,
+ thumb_url: undefined,
+ },
+ props: 'og image URLs are not available',
+ render: `card with title and text only and without the image in the header part of the Card`,
+ },
+ {
+ attachment: { ...attachment, image_url: undefined },
+ props: 'thumb_url is available, but not image_url',
+ render: `image loaded from thumb_url`,
+ },
+ {
+ attachment: { ...attachment, thumb_url: undefined },
+ props: 'image_url is available, but not thumb_url',
+ render: `image loaded from image_url`,
+ },
+ );
+ }
+ return acc;
+ }, {});
+
+ it.each`
+ num | render | type | props | attachment
+ ${1} | ${cases.audio[0].render} | ${cases.audio[0].attachment.type} | ${cases.audio[0].props} | ${cases.audio[0].attachment}
+ ${2} | ${cases.video[0].render} | ${cases.video[0].attachment.type} | ${cases.video[0].props} | ${cases.video[0].attachment}
+ ${3} | ${cases.image[0].render} | ${cases.image[0].attachment.type} | ${cases.image[0].props} | ${cases.image[0].attachment}
+ ${4} | ${cases.audio[1].render} | ${cases.audio[1].attachment.type} | ${cases.audio[1].props} | ${cases.audio[1].attachment}
+ ${5} | ${cases.video[1].render} | ${cases.video[1].attachment.type} | ${cases.video[1].props} | ${cases.video[1].attachment}
+ ${6} | ${cases.image[1].render} | ${cases.image[1].attachment.type} | ${cases.image[1].props} | ${cases.image[1].attachment}
+ ${7} | ${cases.audio[2].render} | ${cases.audio[2].attachment.type} | ${cases.audio[2].props} | ${cases.audio[2].attachment}
+ ${8} | ${cases.video[2].render} | ${cases.video[2].attachment.type} | ${cases.video[2].props} | ${cases.video[2].attachment}
+ ${9} | ${cases.image[2].render} | ${cases.image[2].attachment.type} | ${cases.image[2].props} | ${cases.image[2].attachment}
+ ${10} | ${cases.audio[3].render} | ${cases.audio[3].attachment.type} | ${cases.audio[3].props} | ${cases.audio[3].attachment}
+ ${11} | ${cases.video[3].render} | ${cases.video[3].attachment.type} | ${cases.video[3].props} | ${cases.video[3].attachment}
+ ${12} | ${cases.image[3].render} | ${cases.image[3].attachment.type} | ${cases.image[3].props} | ${cases.image[3].attachment}
+ ${13} | ${cases.audio[4].render} | ${cases.audio[4].attachment.type} | ${cases.audio[4].props} | ${cases.audio[4].attachment}
+ ${14} | ${cases.video[4].render} | ${cases.video[4].attachment.type} | ${cases.video[4].props} | ${cases.video[4].attachment}
+ ${15} | ${cases.image[4].render} | ${cases.image[4].attachment.type} | ${cases.image[4].props} | ${cases.image[4].attachment}
+ ${16} | ${cases.audio[5].render} | ${cases.audio[5].attachment.type} | ${cases.audio[5].props} | ${cases.audio[5].attachment}
+ ${17} | ${cases.video[5].render} | ${cases.video[5].attachment.type} | ${cases.video[5].props} | ${cases.video[5].attachment}
+ ${18} | ${cases.image[5].render} | ${cases.image[5].attachment.type} | ${cases.image[5].props} | ${cases.image[5].attachment}
+ ${19} | ${cases.audio[6].render} | ${cases.audio[6].attachment.type} | ${cases.audio[6].props} | ${cases.audio[6].attachment}
+ ${20} | ${cases.video[6].render} | ${cases.video[6].attachment.type} | ${cases.video[6].props} | ${cases.video[6].attachment}
+ ${21} | ${cases.image[6].render} | ${cases.image[6].attachment.type} | ${cases.image[6].props} | ${cases.image[6].attachment}
+ ${22} | ${cases.audio[7].render} | ${cases.audio[7].attachment.type} | ${cases.audio[7].props} | ${cases.audio[7].attachment}
+ ${23} | ${cases.video[7].render} | ${cases.video[7].attachment.type} | ${cases.video[7].props} | ${cases.video[7].attachment}
+ ${24} | ${cases.image[7].render} | ${cases.image[7].attachment.type} | ${cases.image[7].props} | ${cases.image[7].attachment}
+ ${25} | ${cases.audio[8].render} | ${cases.audio[8].attachment.type} | ${cases.audio[8].props} | ${cases.audio[8].attachment}
+ ${26} | ${cases.video[8].render} | ${cases.video[8].attachment.type} | ${cases.video[8].props} | ${cases.video[8].attachment}
+ ${27} | ${cases.audio[9].render} | ${cases.audio[9].attachment.type} | ${cases.audio[9].props} | ${cases.audio[9].attachment}
+ ${28} | ${cases.video[9].render} | ${cases.video[9].attachment.type} | ${cases.video[9].props} | ${cases.video[9].attachment}
+ `(
+ '($num) should render $render if attachment type is $type and $props',
+ async ({ attachment }) => {
+ const { container } = await renderCard({
+ cardProps: attachment,
+ chatContext: { chatClient, themeVersion: '2' },
+ render,
+ });
+
+ await waitFor(() => {
+ expect(container).toMatchSnapshot();
+ });
+ },
+ );
+
+ it('should render giphy image if type is giphy', async () => {
+ const { container } = await renderCard({
+ cardProps: { attachment: generateGiphyAttachment() },
+ chatContext: { chatClient, themeVersion: '2' },
+ render,
+ });
+
+ await waitFor(() => {
+ expect(container).toMatchSnapshot();
+ });
+ });
+ it('should not render giphy image if url is not available', async () => {
+ const { queryByTestId } = await renderCard({
+ cardProps: { attachment: generateGiphyAttachment({ giphy: undefined }) },
+ chatContext: { chatClient, themeVersion: '2' },
+ render,
+ });
+
+ await waitFor(() => {
+ expect(queryByTestId('card-header')).not.toBeInTheDocument();
+ });
+ });
+
+ it('should display trimmed URL in caption if author_name is not available', async () => {
+ const { getByText } = await renderCard({
+ cardProps: {
+ og_scrape_url:
+ 'https://www.theverge.com/2020/6/15/21291288/sony-ps5-software-user-interface-ui-design-dashboard-teaser-video',
+ title: 'test',
+ },
+ chatContext: { chatClient },
+ });
+ expect(getByText('theverge.com')).toBeInTheDocument();
+ });
});
});
diff --git a/src/components/Attachment/__tests__/File.test.js b/src/components/Attachment/__tests__/File.test.js
index ee2cb0648..0a80bcdc1 100644
--- a/src/components/Attachment/__tests__/File.test.js
+++ b/src/components/Attachment/__tests__/File.test.js
@@ -1,21 +1,31 @@
import React from 'react';
import '@testing-library/jest-dom';
import renderer from 'react-test-renderer';
+
import { FileAttachment } from '../FileAttachment';
-const getComponent = (attachment) =>
+
+
+
+
+
+
+
+`;
+
+exports[`attachment combines scraped & uploaded content should render attachments in default order 1`] = `
+
+
+
+`;
diff --git a/src/components/Attachment/__tests__/__snapshots__/Audio.test.js.snap b/src/components/Attachment/__tests__/__snapshots__/Audio.test.js.snap
new file mode 100644
index 000000000..ec86ca8f3
--- /dev/null
+++ b/src/components/Attachment/__tests__/__snapshots__/Audio.test.js.snap
@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Audio in v1 should render title and render the image with description as alt tag 1`] = `
+
+
+`;
diff --git a/src/components/Attachment/__tests__/__snapshots__/Card.test.js.snap b/src/components/Attachment/__tests__/__snapshots__/Card.test.js.snap
new file mode 100644
index 000000000..6c6ab2619
--- /dev/null
+++ b/src/components/Attachment/__tests__/__snapshots__/Card.test.js.snap
@@ -0,0 +1,1586 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Card theme V2 (1) should render card without caption if attachment type is audio and og_scrape_url neither title_link is available 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+ deterministic
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Card theme V2 (2) should render card without caption if attachment type is video and og_scrape_url neither title_link is available 1`] = `
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Card theme V2 (3) should render card without caption if attachment type is image and og_scrape_url neither title_link is available 1`] = `
+
+
+`;
+
+exports[`Card theme V2 (4) should render unable-to-display card if attachment type is audio and neither image and asset urls nor title_link are available 1`] = `
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Card theme V2 (5) should render unable-to-display card if attachment type is video and neither image and asset urls nor title_link are available 1`] = `
+
+
+
+`;
+
+exports[`Card theme V2 (6) should render unable-to-display card if attachment type is image and neither image and asset urls nor title_link are available 1`] = `
+
+
+
+`;
+
+exports[`Card theme V2 (7) should render audio with caption using og_scrape_url and with asset in header if attachment type is audio and title_link is not available 1`] = `
+
+
+`;
+
+exports[`Card theme V2 (8) should render video with caption using og_scrape_url and with asset in header if attachment type is video and title_link is not available 1`] = `
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Card theme V2 (9) should render image with caption using og_scrape_url and with asset in header if attachment type is image and title_link is not available 1`] = `
+
+
+`;
+
+exports[`Card theme V2 (10) should render audio without title if attachment type is audio and title is not available 1`] = `
+
+
+
+
+
+
+
+
+`;
+
+exports[`Card theme V2 (11) should render video without title if attachment type is video and title is not available 1`] = `
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Card theme V2 (12) should render image without title if attachment type is image and title is not available 1`] = `
+
+
+`;
+
+exports[`Card theme V2 (13) should render audio without title and with caption using og_scrape_url and with image in header if attachment type is audio and title_link neither title is available 1`] = `
+
+
+
+
+
+
+
+
+`;
+
+exports[`Card theme V2 (14) should render video without title and with caption using og_scrape_url and with image in header if attachment type is video and title_link neither title is available 1`] = `
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Card theme V2 (15) should render image without title and with caption using og_scrape_url and with image in header if attachment type is image and title_link neither title is available 1`] = `
+
+
+`;
+
+exports[`Card theme V2 (16) should render audio widget with title & text in Card content and without Card header if attachment type is audio and og image URLs are not available 1`] = `
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Card theme V2 (17) should render video widget in header and title & text in Card content if attachment type is video and og image URLs are not available 1`] = `
+
+
+
+`;
+
+exports[`Card theme V2 (18) should render card with title and text only and without the image in the header part of the Card if attachment type is image and og image URLs are not available 1`] = `
+
+
+
+`;
+
+exports[`Card theme V2 (19) should render image loaded from thumb_url not audio widget if attachment type is audio and thumb_url is available, but not asset_url, image_url 1`] = `
+
+
+`;
+
+exports[`Card theme V2 (20) should render image loaded from thumb_url not video widget if attachment type is video and thumb_url is available, but not asset_url, image_url 1`] = `
+
+
+
+
+
+
+
+
+`;
+
+exports[`Card theme V2 (21) should render image loaded from thumb_url if attachment type is image and thumb_url is available, but not image_url 1`] = `
+
+
+
+
+
+
+
+
+`;
+
+exports[`Card theme V2 (22) should render image loaded from image_url not audio widget if attachment type is audio and image_url is available, but not asset_url, thumb_url 1`] = `
+
+
+
+
+
+
+
+
+`;
+
+exports[`Card theme V2 (23) should render image loaded from image_url not video widget if attachment type is video and image_url is available, but not asset_url, thumb_url 1`] = `
+
+
+
+
+
+
+
+
+`;
+
+exports[`Card theme V2 (24) should render image loaded from image_url if attachment type is image and image_url is available, but not thumb_url 1`] = `
+
+
+
+
+
+
+
+
+`;
+
+exports[`Card theme V2 (25) should render audio widget with image loaded from thumb_url and title & text in Card content if attachment type is audio and all props are available 1`] = `
+
+
+
+
+
+
+
+
+`;
+
+exports[`Card theme V2 (26) should render video widget in header and title & text in Card content if attachment type is video and all props are available 1`] = `
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Card theme V2 (27) should render content part with title and text only and without the header part of the Card if attachment type is audio and asset and neither og image URL is available 1`] = `
+
+
+
+`;
+
+exports[`Card theme V2 (28) should render content part with title and text only and without the header part of the Card if attachment type is video and scraped media URL is not available 1`] = `
+
+
+
+`;
+
+exports[`Card theme V2 should render giphy image if type is giphy 1`] = `
+
+
+
+`;
diff --git a/src/components/Attachment/__tests__/__snapshots__/File.test.js.snap b/src/components/Attachment/__tests__/__snapshots__/File.test.js.snap
index 21af715c3..fe9ba5d41 100644
--- a/src/components/Attachment/__tests__/__snapshots__/File.test.js.snap
+++ b/src/components/Attachment/__tests__/__snapshots__/File.test.js.snap
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`File should render File component 1`] = `
+exports[`File should render File component in V1 1`] = `
Nice file
-
+
+ 1.34 kB
+
+
+
+
+ (null);
+
+ const togglePlay = useCallback(() => {
+ setIsPlaying((playing) => !playing);
+ }, []);
+
+ const seek = useCallback>(
+ ({ clientX, currentTarget }) => {
+ if (!audioRef.current) return;
+
+ const { width, x } = currentTarget.getBoundingClientRect();
+
+ const ratio = (clientX - x) / width;
+
+ if (!isPlaying) setProgress(ratio * 100);
+
+ audioRef.current.currentTime = ratio * audioRef.current.duration;
+ },
+ [isPlaying],
+ );
+
+ useEffect(() => {
+ if (!audioRef.current || !isPlaying) return;
+
+ const interval = window.setInterval(() => {
+ if (!audioRef.current) return;
+
+ const { currentTime, duration } = audioRef.current;
+
+ setProgress((currentTime / duration) * 100);
+
+ if (currentTime === duration) setIsPlaying(false);
+ }, PROGRESS_UPDATE_INTERVAL);
+
+ audioRef.current.play();
+
+ return () => {
+ audioRef.current?.pause();
+
+ window.clearInterval(interval);
+ };
+ }, [isPlaying]);
+
+ return {
+ audioRef,
+ isPlaying,
+ progress,
+ seek,
+ togglePlay,
+ };
+};
diff --git a/src/components/Attachment/icons.tsx b/src/components/Attachment/icons.tsx
new file mode 100644
index 000000000..6e26b2c39
--- /dev/null
+++ b/src/components/Attachment/icons.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import type { IconProps } from '../../types/types';
+
+export const DownloadIcon = ({ className }: IconProps) => (
+
+);
+
+export const PlayTriangleIcon = () => (
+
+);
+
+export const PauseIcon = () => (
+
+);
diff --git a/src/components/Attachment/index.ts b/src/components/Attachment/index.ts
index a5b5b7226..00ab79559 100644
--- a/src/components/Attachment/index.ts
+++ b/src/components/Attachment/index.ts
@@ -1,5 +1,6 @@
export * from './Attachment';
export * from './AttachmentActions';
+export * from './AttachmentContainer';
export * from './Audio';
export * from './Card';
export * from './FileAttachment';
diff --git a/src/components/Attachment/utils.tsx b/src/components/Attachment/utils.tsx
index a12422364..7bd1add56 100644
--- a/src/components/Attachment/utils.tsx
+++ b/src/components/Attachment/utils.tsx
@@ -1,7 +1,8 @@
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, ReactNode } from 'react';
import ReactPlayer from 'react-player';
-import { nanoid } from 'nanoid';
+import clsx from 'clsx';
+import type { ATTACHMENT_GROUPS_ORDER } from './Attachment';
import { AttachmentActions as DefaultAttachmentActions } from './AttachmentActions';
import { Audio as DefaultAudio } from './Audio';
import { Card as DefaultCard } from './Card';
@@ -14,18 +15,22 @@ import type { DefaultStreamChatGenerics } from '../../types/types';
export const SUPPORTED_VIDEO_FORMATS = ['video/mp4', 'video/ogg', 'video/webm', 'video/quicktime'];
+export type AttachmentComponentType = typeof ATTACHMENT_GROUPS_ORDER[number];
+
+export type GroupedRenderedAttachment = Record;
+
export type GalleryAttachment<
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
> = {
images: Attachment[];
- type: string;
+ type: 'gallery';
};
export type AttachmentContainerProps<
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
> = {
attachment: Attachment | GalleryAttachment;
- componentType: string;
+ componentType: AttachmentComponentType;
};
export type RenderAttachmentProps<
@@ -40,12 +45,23 @@ export type RenderGalleryProps<
attachment: GalleryAttachment;
};
+export const isScrapedContent = <
+ StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+>(
+ attachment: Attachment,
+) => attachment.og_scrape_url || attachment.title_link;
+
+export const isUploadedImage = <
+ StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+>(
+ attachment: Attachment,
+) => attachment.type === 'image' && !isScrapedContent(attachment);
+
export const isGalleryAttachmentType = <
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
>(
output: Attachment | GalleryAttachment,
-): output is GalleryAttachment =>
- (output as GalleryAttachment).images != null;
+): output is GalleryAttachment => Array.isArray(output.images);
export const isAudioAttachment = <
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
@@ -63,12 +79,6 @@ export const isFileAttachment = <
SUPPORTED_VIDEO_FORMATS.indexOf(attachment.mime_type) === -1 &&
attachment.type !== 'video');
-export const isImageAttachment = <
- StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
->(
- attachment: Attachment,
-) => attachment.type === 'image' && !attachment.title_link && !attachment.og_scrape_url;
-
export const isMediaAttachment = <
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
>(
@@ -77,38 +87,48 @@ export const isMediaAttachment = <
(attachment.mime_type && SUPPORTED_VIDEO_FORMATS.indexOf(attachment.mime_type) !== -1) ||
attachment.type === 'video';
+export const isSvgAttachment = (attachment: Attachment) => {
+ const filename = attachment.fallback || '';
+ return filename.toLowerCase().endsWith('.svg');
+};
+
+/**
+ * @deprecated will be removed in the next major release,
+ * replaced with the proper component equivalent `AttachmentContainer/AttachmentWithinContainer`
+ */
export const renderAttachmentWithinContainer = <
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
>(
props: PropsWithChildren>,
) => {
const { attachment, children, componentType } = props;
-
+ const isGAT = isGalleryAttachmentType(attachment);
let extra = '';
- if (!isGalleryAttachmentType(attachment)) {
+ if (!isGAT) {
extra =
componentType === 'card' && !attachment?.image_url && !attachment?.thumb_url
? 'no-image'
- : attachment && attachment.actions && attachment.actions.length
+ : attachment?.actions?.length
? 'actions'
: '';
}
- return (
-
+
+
+ );
return (
-
+
+
diff --git a/src/components/Attachment/hooks/useAudioController.ts b/src/components/Attachment/hooks/useAudioController.ts
new file mode 100644
index 000000000..6b8c58ff6
--- /dev/null
+++ b/src/components/Attachment/hooks/useAudioController.ts
@@ -0,0 +1,59 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+export const PROGRESS_UPDATE_INTERVAL = 100;
+
+export const useAudioController = () => {
+ const [isPlaying, setIsPlaying] = useState(false);
+ const [progress, setProgress] = useState(0);
+
+ const audioRef = useRef
+
+
1.34 kB
+ Nice file
+
+
+
+
+
- {children}
-
- );
+ const classNames = clsx('str-chat__message-attachment', {
+ [`str-chat__message-attachment--${componentType}`]: componentType,
+ [`str-chat__message-attachment--${attachment?.type}`]: attachment?.type,
+ [`str-chat__message-attachment--${componentType}--${extra}`]: componentType && extra,
+ 'str-chat__message-attachment--svg-image': isSvgAttachment(attachment),
+ 'str-chat__message-attachment-with-actions': extra === 'actions', // added for theme V2 (better readability)
+ });
+
+ return {children}
;
};
+/**
+ * @deprecated will be removed in the next major release,
+ * replaced with the proper component equivalent `AttachmentContainer/AttachmentActionsContainer`
+ */
export const renderAttachmentActions = <
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
>(
@@ -130,6 +150,10 @@ export const renderAttachmentActions = <
);
};
+/**
+ * @deprecated will be removed in the next major release,
+ * replaced with the proper component equivalent `AttachmentContainer/GalleryContainer`
+ */
export const renderGallery = <
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
>(
@@ -144,6 +168,10 @@ export const renderGallery = <
});
};
+/**
+ * @deprecated will be removed in the next major release,
+ * replaced with the proper component equivalent `AttachmentContainer/ImageContainer`
+ */
export const renderImage = <
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
>(
@@ -171,6 +199,10 @@ export const renderImage = <
});
};
+/**
+ * @deprecated will be removed in the next major release,
+ * replaced with the proper component equivalent `AttachmentContainer/CardContainer`
+ */
export const renderCard = <
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
>(
@@ -198,6 +230,10 @@ export const renderCard = <
});
};
+/**
+ * @deprecated will be removed in the next major release,
+ * replaced with the proper component equivalent `AttachmentContainer/FileContainer`
+ */
export const renderFile = <
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
>(
@@ -214,6 +250,10 @@ export const renderFile = <
});
};
+/**
+ * @deprecated will be removed in the next major release,
+ * replaced with the proper component equivalent `AttachmentContainer/AudioContainer`
+ */
export const renderAudio = <
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
>(
@@ -232,6 +272,10 @@ export const renderAudio = <
});
};
+/**
+ * @deprecated will be removed in the next major release,
+ * replaced with the proper component equivalent `AttachmentContainer/MediaContainer`
+ */
export const renderMedia = <
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
>(
diff --git a/src/components/AutoCompleteTextarea/Item.jsx b/src/components/AutoCompleteTextarea/Item.jsx
index 73380894f..e8d20acd7 100644
--- a/src/components/AutoCompleteTextarea/Item.jsx
+++ b/src/components/AutoCompleteTextarea/Item.jsx
@@ -1,4 +1,7 @@
-import React from 'react';
+import React, { useCallback } from 'react';
+import clsx from 'clsx';
+
+import { useChatContext } from '../../context/ChatContext';
export const Item = React.forwardRef(function Item(props, innerRef) {
const {
@@ -11,12 +14,32 @@ export const Item = React.forwardRef(function Item(props, innerRef) {
style,
} = props;
- const selectItem = () => onSelectHandler(item);
+ const { themeVersion } = useChatContext('SuggestionItem');
+
+ const selectItem = useCallback(() => onSelectHandler(item), [item, onClickHandler]);
+
+ if (themeVersion === '2')
+ return (
+