+ 
+
);
-}
+};
export const App = (
Required
linkPreviews
+
+An array of `LinkPreview` objects - a union type of `LinkPreviewState` and `OGAttachment`. The array is derived from `linkPreviews` Map of `MessageInputContextValue`.
+
+| Type |
+| ------------- |
+| LinkPreview[] |
+
## QuotedMessagePreview Props
### Required
quotedMessage
@@ -131,7 +143,7 @@ If true, updates the CSS class name of the `div` container and renders a smaller
The existing message to be quoted by the next sent message.
| Type |
-|--------|
+| ------ |
| object |
## SendButton Props
@@ -141,7 +153,7 @@ The existing message to be quoted by the next sent message.
Function to send a message to the currently active channel.
| Type |
-|-------------------------------------------|
+| ----------------------------------------- |
| (event: React.BaseSyntheticEvent) => void |
## UploadsPreview
diff --git a/docusaurus/docs/React/components/utility-components/channel-header.mdx b/docusaurus/docs/React/components/utility-components/channel-header.mdx
index cbff948b8..d4f2bcaab 100644
--- a/docusaurus/docs/React/components/utility-components/channel-header.mdx
+++ b/docusaurus/docs/React/components/utility-components/channel-header.mdx
@@ -56,8 +56,8 @@ A boolean for showing a little indicator below the title if the `channel` is liv
A custom UI component to display menu icon.
-| Type | Default |
-| --------- | ----------------------------------------------------------------------------------------------------- |
+| Type | Default |
+| --------- | ------------------------------------------------------------------------------------------------------------- |
| component | [MenuIcon](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelHeader/icons.tsx) |
### title
diff --git a/docusaurus/docs/React/components/utility-components/channel-preview-ui.mdx b/docusaurus/docs/React/components/utility-components/channel-preview-ui.mdx
index 0cb089c93..24c77d235 100644
--- a/docusaurus/docs/React/components/utility-components/channel-preview-ui.mdx
+++ b/docusaurus/docs/React/components/utility-components/channel-preview-ui.mdx
@@ -18,13 +18,12 @@ This UI component is very customizable; below is an example of how to use the `P
see [ChannelPreview Code Example](../../guides/customization/channel-list-preview.mdx#the-preview-prop-component).
```tsx
-const YourCustomChannelPreview = (props) => {
+const YourCustomChannelPreview = (previewProps) => {
// render custom preview info here
+ return `params: ChannelSearchFunctionParams
`result: ChannelOrUserResponse
) => Promise
-
-
- Profile -
- New Group -
- Sign Out +
- + Profile + +
- + New Group + +
- + Sign Out +
+ +**Edit message form** + +
+ {Array.from(linkPreviews.values()).map((linkPreview) => {
+ switch (linkPreview.state) {
+ case LinkPreviewState.LOADED:
+ return (
+
+ );
+};
+
+const App = () => (
+ // highlight-next-line
+
- Event: {text} at {date}
-
- Actor:
- )
- }
-
- return null;
-}
+ const { Avatar = DefaultAvatar, message } = props;
+
+ const { created_at = '', text, type, user } = message;
+ const date = created_at.toString();
+
+ if (type === 'system') {
+ return (
+
+
+ Event: {text} at {date}
+
+
+ Actor:
+ );
+ }
+
+ return null;
+};
const App = () => (
-
- 
-
- );
+ return (
+
-
+
+
+ );
};
+
-
- );
+ const { t } = useTranslationContext();
+
+ const {
+ closeEmojiPicker,
+ emojiPickerIsOpen,
+ handleEmojiKeyDown,
+ handleSubmit,
+ openEmojiPicker,
+ } = useMessageInputContext();
+
+ return (
+
-
-
-
-
-
- {emojiPickerIsOpen ? t('Close emoji picker') : t('Open emoji picker')}
-
-
-
-
+
+ );
};
```
diff --git a/docusaurus/docs/React/guides/theming/translations.mdx b/docusaurus/docs/React/guides/theming/translations.mdx
index 6cd05b4a9..65304a384 100644
--- a/docusaurus/docs/React/guides/theming/translations.mdx
+++ b/docusaurus/docs/React/guides/theming/translations.mdx
@@ -251,6 +251,7 @@ i18n.registerTranslation(
}
);
```
+
2. Provide your own `Momentjs` object
```js
@@ -270,7 +271,7 @@ const i18n = new Streami18n({
3. Provide your own Dayjs object
```js
-import Dayjs from 'dayjs'
+import Dayjs from 'dayjs';
import 'dayjs/locale/nl';
import 'dayjs/locale/it';
@@ -278,10 +279,11 @@ import 'dayjs/locale/it';
import 'dayjs/min/locales';
const i18n = new Streami18n({
- language: 'nl',
- DateTimeParser: Dayjs
-})
+ language: 'nl',
+ DateTimeParser: Dayjs,
+});
```
+
If you would like to stick with english language for dates and times in Stream components, you can set `disableDateTimeTranslations` to true.
### Translating Messages
@@ -307,7 +309,7 @@ The `Streami18n` class wraps [`i18next`](https://www.npmjs.com/package/i18next)
### Class Constructor Options
| Option | Description | Type | Default |
-|------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|------------|
+| ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ---------- |
| language | connected user's language | string | 'en' |
| translationsForLanguage | overrides existing component text | object | {} |
| disableDateTimeTranslations | disables translation of date times | boolean | false |
diff --git a/docusaurus/docs/React/guides/typescript.mdx b/docusaurus/docs/React/guides/typescript.mdx
index 75ef94884..e25569681 100644
--- a/docusaurus/docs/React/guides/typescript.mdx
+++ b/docusaurus/docs/React/guides/typescript.mdx
@@ -126,5 +126,3 @@ custom code example.
The current default types can be seen in the [`stream-chat-react` component library](https://github.com/GetStream/stream-chat-js/blob/master/src/types.ts). Any additional custom types
will extend these defaults. Core to understanding this pattern is how generics can be
[applied to JSX elements](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html#generic-type-arguments-in-jsx-elements).
-
-
diff --git a/docusaurus/docs/React/hooks/channel-list-hooks.mdx b/docusaurus/docs/React/hooks/channel-list-hooks.mdx
index c186f61a1..b55eb6489 100644
--- a/docusaurus/docs/React/hooks/channel-list-hooks.mdx
+++ b/docusaurus/docs/React/hooks/channel-list-hooks.mdx
@@ -15,11 +15,11 @@ To view the list of these custom handler functions to override (if there is one)
### useChannelDeletedListener
-A [custom hook](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/hooks/useChannelDeletedListener.ts) that handles the deletion of a channel from the list.
+A [custom hook](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/hooks/useChannelDeletedListener.ts) that handles the deletion of a channel from the list.
### useChannelHiddenListener
-A [custom hook](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/hooks/useChannelHiddenListener.ts) that handles the hiding of a channel from the list.
+A [custom hook](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/hooks/useChannelHiddenListener.ts) that handles the hiding of a channel from the list.
### useChannelTruncatedListener
@@ -64,4 +64,3 @@ A [custom hook](https://github.com/GetStream/stream-chat-react/blob/master/src/c
### useMobileNavigation
A [custom hook](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/hooks/useMobileNavigation.ts) that handles the opening and closing of a mobile navigation via Javascript click event listeners, not Stream events.
-
diff --git a/docusaurus/docs/React/hooks/message-hooks.mdx b/docusaurus/docs/React/hooks/message-hooks.mdx
index 866441165..aba036871 100644
--- a/docusaurus/docs/React/hooks/message-hooks.mdx
+++ b/docusaurus/docs/React/hooks/message-hooks.mdx
@@ -110,7 +110,7 @@ const MyCustomMessageComponent = () => {
return (
+
+
+
+
+
+ {emojiPickerIsOpen ? t('Close emoji picker') : t('Open emoji picker')}
+
+
+
+
{message.text}
-
+
);
};
diff --git a/docusaurus/docs/React/resources/resources.mdx b/docusaurus/docs/React/resources/resources.mdx
index 53d93b120..b9acf6743 100644
--- a/docusaurus/docs/React/resources/resources.mdx
+++ b/docusaurus/docs/React/resources/resources.mdx
@@ -22,28 +22,28 @@ Here's a list of external and internal resource links that could be helpful duri
> ### React Documentation
-* [React - Getting Started](https://reactjs.org/docs/getting-started.html)
+- [React - Getting Started](https://reactjs.org/docs/getting-started.html)
-* [React - Context](https://reactjs.org/docs/context.html)
+- [React - Context](https://reactjs.org/docs/context.html)
> ### Internal Articles
- * [Stream Chat Glossary](https://getstream.zendesk.com/hc/en-us/articles/1500007212082-Stream-Chat-Glossary)
+- [Stream Chat Glossary](https://getstream.zendesk.com/hc/en-us/articles/1500007212082-Stream-Chat-Glossary)
- * [Stream Chat Success Checklist](https://getstream.zendesk.com/hc/en-us/articles/1500007673721-Stream-Chat-Success-Checklist)
+- [Stream Chat Success Checklist](https://getstream.zendesk.com/hc/en-us/articles/1500007673721-Stream-Chat-Success-Checklist)
- * [React - Customizing Message Actions](https://getstream.zendesk.com/hc/en-us/articles/1500008025241--Customizing-Message-Actions-in-React-Chat)
+- [React - Customizing Message Actions](https://getstream.zendesk.com/hc/en-us/articles/1500008025241--Customizing-Message-Actions-in-React-Chat)
- * [Stream Webhooks](https://getstream.zendesk.com/hc/en-us/articles/1500006478421-How-can-I-use-the-Stream-Webhook-to-send-customers-emails-based-on-Chat-events-)
+- [Stream Webhooks](https://getstream.zendesk.com/hc/en-us/articles/1500006478421-How-can-I-use-the-Stream-Webhook-to-send-customers-emails-based-on-Chat-events-)
- * [Stream Rate limits](https://getstream.zendesk.com/hc/en-us/articles/360056792833-Rate-limits-and-HTTP-429-Errors)
+- [Stream Rate limits](https://getstream.zendesk.com/hc/en-us/articles/360056792833-Rate-limits-and-HTTP-429-Errors)
- * [Stream API → Client → Server](https://getstream.zendesk.com/hc/en-us/articles/360061669873-How-do-the-Chat-Client-Server-Stream-API-communicate-with-each-other-)
+- [Stream API → Client → Server](https://getstream.zendesk.com/hc/en-us/articles/360061669873-How-do-the-Chat-Client-Server-Stream-API-communicate-with-each-other-)
- * [Stream Chat Moderation](https://getstream.zendesk.com/hc/en-us/articles/360041455753)
+- [Stream Chat Moderation](https://getstream.zendesk.com/hc/en-us/articles/360041455753)
- * [Stream User Roles and Permissions](https://getstream.zendesk.com/hc/en-us/articles/360053064274-User-Roles-and-Permission-Policies-Chat)
+- [Stream User Roles and Permissions](https://getstream.zendesk.com/hc/en-us/articles/360053064274-User-Roles-and-Permission-Policies-Chat)
- * [Stream queryChannels filters](https://getstream.zendesk.com/hc/en-us/articles/360057461213-Filters-for-queryChannels-Chat)
+- [Stream queryChannels filters](https://getstream.zendesk.com/hc/en-us/articles/360057461213-Filters-for-queryChannels-Chat)
- * [Stream Unread Messages](https://getstream.zendesk.com/hc/en-us/articles/360042753154-How-do-I-retrieve-unread-messages-Chat)
+- [Stream Unread Messages](https://getstream.zendesk.com/hc/en-us/articles/360042753154-How-do-I-retrieve-unread-messages-Chat)
diff --git a/src/components/AutoCompleteTextarea/Textarea.jsx b/src/components/AutoCompleteTextarea/Textarea.jsx
index a998c173d..8867cb2f1 100644
--- a/src/components/AutoCompleteTextarea/Textarea.jsx
+++ b/src/components/AutoCompleteTextarea/Textarea.jsx
@@ -57,6 +57,7 @@ export class ReactTextareaAutocomplete extends React.Component {
};
}
+ // FIXME: unused method
getSelectionPosition = () => {
if (!this.textareaRef) return null;
@@ -66,6 +67,7 @@ export class ReactTextareaAutocomplete extends React.Component {
};
};
+ // FIXME: unused method
getSelectedText = () => {
if (!this.textareaRef) return null;
const { selectionEnd, selectionStart } = this.textareaRef;
diff --git a/src/components/Channel/Channel.tsx b/src/components/Channel/Channel.tsx
index 9d91609e5..a220c2147 100644
--- a/src/components/Channel/Channel.tsx
+++ b/src/components/Channel/Channel.tsx
@@ -79,6 +79,8 @@ import type {
DefaultStreamChatGenerics,
GiphyVersions,
ImageAttachmentSizeHandler,
+ SendMessageOptions,
+ UpdateMessageOptions,
VideoAttachmentSizeHandler,
} from '../../types/types';
import { useChannelContainerClasses } from './hooks/useChannelContainerClasses';
@@ -86,6 +88,7 @@ import {
getImageAttachmentConfiguration,
getVideoAttachmentConfiguration,
} from '../Attachment/attachment-sizing';
+import type { URLEnrichmentConfig } from '../MessageInput/hooks/useLinkPreviews';
export type ChannelProps<
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -97,6 +100,8 @@ export type ChannelProps<
activeUnreadHandler?: (unread: number, documentTitle: string) => void;
/** Custom UI component to display a message attachment, defaults to and accepts same props as: [Attachment](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/Attachment.tsx) */
Attachment?: ComponentContextValue{text}
,
+ ({ id, status, text }) => status !== 'failed' && {text}
,
);
};
@@ -680,6 +683,7 @@ describe('Channel', () => {
expect(doSendMessageRequest).toHaveBeenCalledWith(
channel.cid,
expect.objectContaining(message),
+ undefined,
),
);
});
@@ -710,7 +714,9 @@ describe('Channel', () => {
renderComponent({}, ({ editMessage }) => {
editMessage(updatedMessage);
});
- await waitFor(() => expect(clientUpdateMessageSpy).toHaveBeenCalledWith(updatedMessage));
+ await waitFor(() =>
+ expect(clientUpdateMessageSpy).toHaveBeenCalledWith(updatedMessage, undefined, undefined),
+ );
});
it('should use doUpdateMessageRequest for the editMessage callback if provided', async () => {
@@ -721,7 +727,7 @@ describe('Channel', () => {
});
await waitFor(() =>
- expect(doUpdateMessageRequest).toHaveBeenCalledWith(channel.cid, messages[0]),
+ expect(doUpdateMessageRequest).toHaveBeenCalledWith(channel.cid, messages[0], undefined),
);
});
@@ -770,6 +776,45 @@ describe('Channel', () => {
});
});
+ it('should remove scraped attachment on retry-sending message', async () => {
+ // flag to prevent infinite loop
+ let hasSent = false;
+ let hasRetried = false;
+ const fileAttachment = generateFileAttachment();
+ const scrapedAttachment = generateScrapedDataAttachment();
+ const attachments = [fileAttachment, scrapedAttachment];
+ const messageObject = { attachments, text: 'bla bla' };
+ const sendMessageSpy = jest
+ .spyOn(channel, 'sendMessage')
+ .mockImplementationOnce(() => Promise.reject());
+
+ await act(() => {
+ renderComponent(
+ { children:
+ {Array.from(linkPreviews.values()).map((linkPreview) =>
+ linkPreview.state === LinkPreviewState.LOADED ? (
+
+ );
+};
+
+type LinkPreviewProps = {
+ linkPreview: LinkPreview;
+};
+
+const LinkPreviewCard = ({ linkPreview }: LinkPreviewProps) => {
+ const { dismissLinkPreview } = useMessageInputContext();
+ const { handleEnter, handleLeave, tooltipVisible } = useEnterLeaveHandlers
+
+ {linkPreview.og_scrape_url}
+
+
+ );
+};
diff --git a/src/components/MessageInput/MessageInput.tsx b/src/components/MessageInput/MessageInput.tsx
index 56481a889..46e9d4b94 100644
--- a/src/components/MessageInput/MessageInput.tsx
+++ b/src/components/MessageInput/MessageInput.tsx
@@ -6,7 +6,7 @@ import { MessageInputFlat } from './MessageInputFlat';
import { useCooldownTimer } from './hooks/useCooldownTimer';
import { useCreateMessageInputContext } from './hooks/useCreateMessageInputContext';
-import { FileUpload, ImageUpload, useMessageInputState } from './hooks/useMessageInputState';
+import { useMessageInputState } from './hooks/useMessageInputState';
import { StreamMessage, useChannelStateContext } from '../../context/ChannelStateContext';
import { useComponentContext } from '../../context/ComponentContext';
@@ -17,7 +17,13 @@ import type { Channel, SendFileAPIResponse } from 'stream-chat';
import type { SearchQueryParams } from '../ChannelSearch/hooks/useChannelSearch';
import type { MessageToSend } from '../../context/ChannelActionContext';
-import type { CustomTrigger, DefaultStreamChatGenerics } from '../../types/types';
+import type {
+ CustomTrigger,
+ DefaultStreamChatGenerics,
+ SendMessageOptions,
+} from '../../types/types';
+import type { URLEnrichmentConfig } from './hooks/useLinkPreviews';
+import type { FileUpload, ImageUpload } from './types';
export type MessageInputProps<
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -72,6 +78,7 @@ export type MessageInputProps<
message: MessageToSend
+
+
+
+
+ {linkPreview.title}
+ {linkPreview.text}
+
- {isUploadEnabled &&
@@ -184,8 +186,10 @@ const MessageInputV2 = <
closeEmojiPicker,
cooldownRemaining,
emojiPickerIsOpen,
+ findAndEnqueueURLsToEnrich,
handleSubmit,
isUploadEnabled,
+ linkPreviews,
maxFilesLeft,
message,
numberOfUploads,
@@ -196,9 +200,11 @@ const MessageInputV2 = <
} = useMessageInputContext('MessageInputV2');
const {
+ AttachmentPreviewList = DefaultAttachmentPreviewList,
CooldownTimer = DefaultCooldownTimer,
EmojiIcon = DefaultEmojiPickerIcon,
FileUploadIcon = DefaultUploadIcon,
+ LinkPreviewList = DefaultLinkPreviewList,
QuotedMessagePreview = DefaultQuotedMessagePreview,
SendButton = DefaultSendButton,
} = useComponentContext('MessageInputV2');
@@ -235,6 +241,9 @@ const MessageInputV2 = <
return (
<>
+ {findAndEnqueueURLsToEnrich && (
+
{displayQuotedMessage &&
diff --git a/src/components/MessageInput/__tests__/LinkPreviewList.test.js b/src/components/MessageInput/__tests__/LinkPreviewList.test.js
new file mode 100644
index 000000000..6d10f5274
--- /dev/null
+++ b/src/components/MessageInput/__tests__/LinkPreviewList.test.js
@@ -0,0 +1,1385 @@
+import debounce from 'lodash.debounce';
+import { MessageInputFlat } from '../MessageInputFlat';
+import {
+ generateChannel,
+ generateMember,
+ generateMessage,
+ generateScrapedAudioAttachment,
+ generateScrapedDataAttachment,
+ generateScrapedImageAttachment,
+ generateUser,
+ getOrCreateChannelApi,
+ getTestClientWithUser,
+ useMockedApis,
+} from '../../../mock-builders';
+import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import {
+ ChatProvider,
+ MessageProvider,
+ useChatContext,
+ useMessageInputContext,
+} from '../../../context';
+import React, { useEffect } from 'react';
+import { Chat } from '../../Chat';
+import { Channel } from '../../Channel';
+import { MessageActionsBox } from '../../MessageActions';
+import { MessageInput } from '../MessageInput';
+
+import '@testing-library/jest-dom';
+import { SendButton } from '../icons';
+
+// Mock out lodash debounce implementation, so it calls the debounced method immediately
+jest.mock('lodash.debounce', () =>
+ jest.fn((fn) => {
+ //eslint-disable-next-line
+ fn.cancel = jest.fn();
+ //eslint-disable-next-line
+ fn.flush = jest.fn();
+ return fn;
+ }),
+);
+
+const inputPlaceholder = 'Type your message';
+const userId = 'userId';
+const username = 'username';
+const mentionId = 'mention-id';
+const mentionName = 'mention-name';
+const user1 = generateUser({ id: userId, name: username });
+const mentionUser = generateUser({
+ id: mentionId,
+ name: mentionName,
+});
+const mainListMessage = generateMessage({ user: user1 });
+const threadMessage = generateMessage({
+ parent_id: mainListMessage.id,
+ type: 'reply',
+ user: user1,
+});
+const mockedChannel = generateChannel({
+ members: [generateMember({ user: user1 }), generateMember({ user: mentionUser })],
+ messages: [mainListMessage],
+ thread: [threadMessage],
+});
+
+const defaultMessageContextValue = {
+ getMessageActions: () => ['delete', 'edit', 'quote'],
+ handleDelete: () => {},
+ handleFlag: () => {},
+ handleMute: () => {},
+ handlePin: () => {},
+ isMyMessage: () => true,
+ message: mainListMessage,
+ setEditingState: () => {},
+};
+
+let chatClient;
+let channel;
+
+const initQuotedMessagePreview = async (message) => {
+ await waitFor(() => expect(screen.queryByText(message.text)).not.toBeInTheDocument());
+
+ const quoteButton = await screen.findByText(/^reply$/i);
+ await waitFor(() => expect(quoteButton).toBeInTheDocument());
+
+ act(() => {
+ fireEvent.click(quoteButton);
+ });
+};
+
+const ActiveChannelSetter = ({ activeChannel }) => {
+ const { setActiveChannel } = useChatContext();
+ useEffect(() => {
+ setActiveChannel(activeChannel);
+ }, [activeChannel]);
+ return null;
+};
+
+const ChatContextOverrider = ({ children, contextOverrides }) => {
+ const context = useChatContext();
+ return {children} ;
+};
+
+const makeRenderFn = (InputComponent) => async ({
+ messageInputProps = {},
+ channelProps = {},
+ chatContextOverrides = {},
+ client = chatClient,
+ messageContextOverrides = {},
+ messageActionsBoxProps = {},
+} = {}) => {
+ // circumvents not so good decision to render SendButton conditionally
+ const InputContainer = () => {
+ const { handleSubmit, message } = useMessageInputContext();
+ return (
+ <>
+
+
+
+
+
+
+
+ ,
+ );
+ });
+ const submit = async () => {
+ const submitButton = renderResult.findByText('Send') || renderResult.findByTitle('Send');
+ fireEvent.click(await submitButton);
+ };
+
+ return { submit, ...renderResult };
+};
+
+const tearDown = () => {
+ cleanup();
+ jest.clearAllMocks();
+};
+
+describe('Link preview', () => {
+ const LINK_PREVIEW_TEST_ID = 'link-preview-card';
+ const LINK_PREVIEW_DISMISS_BTN_TEST_ID = 'link-preview-card-dismiss-btn';
+ const CHAT_CONTEXT_OVERRIDES_COMMON = { themeVersion: '2' };
+ const MESSAGE_INPUT_PROPS_COMMON = {
+ urlEnrichmentConfig: { enrichURLForPreview: true },
+ };
+ const renderComponent = makeRenderFn(MessageInputFlat);
+ const scrapedData = generateScrapedDataAttachment({
+ og_scrape_url: 'http://getstream.io',
+ title: 'http://getstream.io',
+ });
+ const scrapedData1 = generateScrapedDataAttachment({
+ og_scrape_url: 'http://getstream.io',
+ title: 'http://getstream.io',
+ });
+ const scrapedData2 = generateScrapedDataAttachment({
+ og_scrape_url: 'http://getstream.io/',
+ title: 'http://getstream.io/',
+ });
+ const scrapedData3 = generateScrapedDataAttachment({
+ og_scrape_url: 'http://getstream.io/abc',
+ title: 'http://getstream.io/abc',
+ });
+
+ beforeEach(async () => {
+ chatClient = await getTestClientWithUser({ id: user1.id });
+ useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+ channel = chatClient.channel('messaging', mockedChannel.id);
+ });
+
+ afterEach(tearDown);
+
+ it('does not request URL enrichment if disabled in channel config', async () => {
+ const channel = chatClient.channel('messaging', mockedChannel.id);
+ const {
+ channel: { config },
+ } = generateChannel({ config: { url_enrichment: false } });
+ channel.getConfig = () => config;
+ const enrichSpy = jest.spyOn(chatClient, 'enrichURL');
+ await renderComponent({
+ channelProps: { channel },
+ chatContextOverrides: CHAT_CONTEXT_OVERRIDES_COMMON,
+ messageInputProps: MESSAGE_INPUT_PROPS_COMMON,
+ });
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData.og_scrape_url}`,
+ },
+ });
+ });
+
+ expect(enrichSpy).not.toHaveBeenCalled();
+ });
+
+ it('does not request URL enrichment + not render if link previews are not enabled through Channel props', async () => {
+ const enrichSpy = jest.spyOn(chatClient, 'enrichURL');
+ await renderComponent({
+ chatContextOverrides: CHAT_CONTEXT_OVERRIDES_COMMON,
+ });
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: '',
+ },
+ });
+ });
+
+ expect(enrichSpy).not.toHaveBeenCalled();
+ const linkPreviews = await screen.queryByTestId(LINK_PREVIEW_TEST_ID);
+ expect(linkPreviews).not.toBeInTheDocument();
+ });
+
+ it('request URL enrichment + render if link previews are enabled through Channel props', async () => {
+ const enrichSpy = jest
+ .spyOn(chatClient, 'enrichURL')
+ .mockResolvedValue({ duration: '10ms', ...scrapedData });
+ await renderComponent({
+ channelProps: { enrichURLForPreview: true },
+ chatContextOverrides: CHAT_CONTEXT_OVERRIDES_COMMON,
+ });
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData.og_scrape_url}`,
+ },
+ });
+ });
+
+ expect(enrichSpy).toHaveBeenCalledWith(scrapedData.og_scrape_url);
+ const linkPreviews = await screen.queryByTestId(LINK_PREVIEW_TEST_ID);
+ expect(linkPreviews).toBeInTheDocument();
+ });
+
+ it('does not render if link previews are disabled through MessageInput props', async () => {
+ const enrichSpy = jest
+ .spyOn(chatClient, 'enrichURL')
+ .mockResolvedValue({ duration: '10ms', ...scrapedData });
+ await renderComponent({
+ channelProps: { enrichURLForPreview: true },
+ chatContextOverrides: CHAT_CONTEXT_OVERRIDES_COMMON,
+ messageInputProps: { urlEnrichmentConfig: { enrichURLForPreview: false } },
+ });
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData.og_scrape_url}`,
+ },
+ });
+ });
+
+ expect(enrichSpy).not.toHaveBeenCalled();
+ const linkPreviews = await screen.queryByTestId(LINK_PREVIEW_TEST_ID);
+ expect(linkPreviews).not.toBeInTheDocument();
+ });
+
+ it('does not render if no text', async () => {
+ await renderComponent({
+ chatContextOverrides: CHAT_CONTEXT_OVERRIDES_COMMON,
+ messageInputProps: MESSAGE_INPUT_PROPS_COMMON,
+ });
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: '',
+ },
+ });
+ });
+ const linkPreviews = await screen.queryByTestId(LINK_PREVIEW_TEST_ID);
+ expect(linkPreviews).not.toBeInTheDocument();
+ });
+
+ it('does not render if no URLs found', async () => {
+ await renderComponent({
+ chatContextOverrides: CHAT_CONTEXT_OVERRIDES_COMMON,
+ messageInputProps: MESSAGE_INPUT_PROPS_COMMON,
+ });
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: 'X',
+ },
+ });
+ });
+ const linkPreviews = await screen.queryByTestId(LINK_PREVIEW_TEST_ID);
+ expect(linkPreviews).not.toBeInTheDocument();
+ });
+
+ it('does not render queued or loading links', async () => {
+ await renderComponent({
+ chatContextOverrides: CHAT_CONTEXT_OVERRIDES_COMMON,
+ messageInputProps: MESSAGE_INPUT_PROPS_COMMON,
+ });
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: 'X https://getstream.io',
+ },
+ });
+ });
+ const linkPreviews = await screen.queryByTestId(LINK_PREVIEW_TEST_ID);
+ expect(linkPreviews).not.toBeInTheDocument();
+ });
+
+ it('does not render failed-to-fetch links', async () => {
+ jest.spyOn(chatClient, 'enrichURL').mockRejectedValueOnce(new Error());
+ await renderComponent({
+ chatContextOverrides: { ...CHAT_CONTEXT_OVERRIDES_COMMON },
+ messageInputProps: MESSAGE_INPUT_PROPS_COMMON,
+ });
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: 'X https://getstream.io',
+ },
+ });
+ });
+ const linkPreviews = await screen.queryByTestId(LINK_PREVIEW_TEST_ID);
+ expect(linkPreviews).not.toBeInTheDocument();
+ });
+
+ it('renders for URL with protocol', async () => {
+ jest.spyOn(chatClient, 'enrichURL').mockResolvedValueOnce({ duration: '10ms', ...scrapedData });
+ await renderComponent({
+ chatContextOverrides: CHAT_CONTEXT_OVERRIDES_COMMON,
+ messageInputProps: MESSAGE_INPUT_PROPS_COMMON,
+ });
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData.og_scrape_url}`,
+ },
+ });
+ });
+ const linkPreviews = await screen.queryByTestId(LINK_PREVIEW_TEST_ID);
+ await waitFor(() => {
+ expect(linkPreviews).toBeInTheDocument();
+ });
+ });
+
+ it('renders for URL without protocol', async () => {
+ jest.spyOn(chatClient, 'enrichURL').mockResolvedValueOnce({ duration: '10ms', ...scrapedData });
+ await renderComponent({
+ chatContextOverrides: CHAT_CONTEXT_OVERRIDES_COMMON,
+ messageInputProps: MESSAGE_INPUT_PROPS_COMMON,
+ });
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData.og_scrape_url}`,
+ },
+ });
+ });
+ const linkPreviews = await screen.queryAllByTestId(LINK_PREVIEW_TEST_ID);
+ // eslint-disable-next-line
+ expect(linkPreviews).toHaveLength(1);
+ expect(linkPreviews[0]).toHaveTextContent(scrapedData.og_scrape_url);
+ });
+
+ it('does not render with quoted message', async () => {
+ const { message } = defaultMessageContextValue;
+ jest.spyOn(chatClient, 'enrichURL').mockResolvedValueOnce({ duration: '10ms', ...scrapedData });
+ await renderComponent({
+ chatContextOverrides: CHAT_CONTEXT_OVERRIDES_COMMON,
+ messageContextOverrides: { message },
+ messageInputProps: MESSAGE_INPUT_PROPS_COMMON,
+ });
+ await initQuotedMessagePreview(message);
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData.og_scrape_url}`,
+ },
+ });
+ });
+ const linkPreview = await screen.queryByTestId(LINK_PREVIEW_TEST_ID);
+ expect(linkPreview).not.toBeInTheDocument();
+ });
+
+ it('renders for all the URLs', async () => {
+ jest
+ .spyOn(chatClient, 'enrichURL')
+ .mockResolvedValueOnce({ duration: '10ms', ...scrapedData1 });
+ jest
+ .spyOn(chatClient, 'enrichURL')
+ .mockResolvedValueOnce({ duration: '10ms', ...scrapedData2 });
+ jest
+ .spyOn(chatClient, 'enrichURL')
+ .mockResolvedValueOnce({ duration: '10ms', ...scrapedData3 });
+ await renderComponent({
+ chatContextOverrides: CHAT_CONTEXT_OVERRIDES_COMMON,
+ messageInputProps: MESSAGE_INPUT_PROPS_COMMON,
+ });
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData1.og_scrape_url}`,
+ },
+ });
+ });
+ let linkPreviews = await screen.queryAllByTestId(LINK_PREVIEW_TEST_ID);
+ // eslint-disable-next-line
+ expect(linkPreviews).toHaveLength(1);
+ expect(linkPreviews[0]).toHaveTextContent(scrapedData1.og_scrape_url);
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData1.og_scrape_url} X ${scrapedData2.og_scrape_url}`,
+ },
+ });
+ });
+ linkPreviews = await screen.queryAllByTestId(LINK_PREVIEW_TEST_ID);
+ // eslint-disable-next-line
+ expect(linkPreviews).toHaveLength(2);
+ expect(linkPreviews[0]).toHaveTextContent(scrapedData1.og_scrape_url);
+ expect(linkPreviews[1]).toHaveTextContent(scrapedData2.og_scrape_url);
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData1.og_scrape_url} X ${scrapedData2.og_scrape_url} ${scrapedData3.og_scrape_url}`,
+ },
+ });
+ });
+ linkPreviews = await screen.queryAllByTestId(LINK_PREVIEW_TEST_ID);
+ // eslint-disable-next-line
+ expect(linkPreviews).toHaveLength(3);
+ expect(linkPreviews[0]).toHaveTextContent(scrapedData1.og_scrape_url);
+ expect(linkPreviews[1]).toHaveTextContent(scrapedData2.og_scrape_url);
+ expect(linkPreviews[2]).toHaveTextContent(scrapedData3.og_scrape_url);
+ });
+
+ it('renders for all the pasted URLs', async () => {
+ const pastedText = `X ${scrapedData1.og_scrape_url} X ${scrapedData2.og_scrape_url} ${scrapedData3.og_scrape_url}`;
+ jest
+ .spyOn(chatClient, 'enrichURL')
+ .mockResolvedValueOnce({ duration: '10ms', ...scrapedData1 });
+ jest
+ .spyOn(chatClient, 'enrichURL')
+ .mockResolvedValueOnce({ duration: '10ms', ...scrapedData2 });
+ jest
+ .spyOn(chatClient, 'enrichURL')
+ .mockResolvedValueOnce({ duration: '10ms', ...scrapedData3 });
+
+ const pastedItem = {
+ getAsString: (cb) => cb(pastedText),
+ kind: 'string',
+ };
+ await renderComponent({
+ chatContextOverrides: CHAT_CONTEXT_OVERRIDES_COMMON,
+ messageInputProps: MESSAGE_INPUT_PROPS_COMMON,
+ });
+
+ await act(async () => {
+ fireEvent.paste(await screen.findByPlaceholderText(inputPlaceholder), {
+ clipboardData: {
+ items: [
+ {
+ ...pastedItem,
+ type: 'text/plain',
+ },
+ {
+ ...pastedItem,
+ type: 'text/html',
+ },
+ ],
+ },
+ });
+ });
+
+ await waitFor(() => {
+ const linkPreviews = screen.queryAllByTestId(LINK_PREVIEW_TEST_ID);
+ // eslint-disable-next-line
+ expect(linkPreviews).toHaveLength(3);
+ expect(linkPreviews[0]).toHaveTextContent(scrapedData1.og_scrape_url);
+ expect(linkPreviews[1]).toHaveTextContent(scrapedData2.og_scrape_url);
+ expect(linkPreviews[2]).toHaveTextContent(scrapedData3.og_scrape_url);
+ });
+ });
+
+ it('renders as single preview if duplicates are present', async () => {
+ jest.spyOn(chatClient, 'enrichURL').mockResolvedValueOnce({ duration: '10ms', ...scrapedData });
+ await renderComponent({
+ chatContextOverrides: CHAT_CONTEXT_OVERRIDES_COMMON,
+ messageInputProps: MESSAGE_INPUT_PROPS_COMMON,
+ });
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData.og_scrape_url}`,
+ },
+ });
+ });
+ let linkPreviews = await screen.queryAllByTestId(LINK_PREVIEW_TEST_ID);
+ // eslint-disable-next-line
+ expect(linkPreviews).toHaveLength(1);
+ expect(linkPreviews[0]).toHaveTextContent(scrapedData.og_scrape_url);
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData.og_scrape_url} ${scrapedData.og_scrape_url}`,
+ },
+ });
+ });
+ linkPreviews = await screen.queryAllByTestId(LINK_PREVIEW_TEST_ID);
+ // eslint-disable-next-line
+ expect(linkPreviews).toHaveLength(1);
+ expect(linkPreviews[0]).toHaveTextContent(scrapedData.og_scrape_url);
+ });
+
+ it('prevent duplicate URL enrichment for URLs, where enrichment has not failed', async () => {
+ const enrichSpy = jest
+ .spyOn(chatClient, 'enrichURL')
+ .mockResolvedValue({ duration: '10ms', ...scrapedData });
+ await renderComponent({
+ chatContextOverrides: CHAT_CONTEXT_OVERRIDES_COMMON,
+ messageInputProps: MESSAGE_INPUT_PROPS_COMMON,
+ });
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData.og_scrape_url}`,
+ },
+ });
+ });
+
+ expect(enrichSpy).toHaveBeenCalledWith(scrapedData.og_scrape_url);
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData.og_scrape_url} ${scrapedData.og_scrape_url}`,
+ },
+ });
+ });
+
+ expect(enrichSpy).toHaveBeenCalledTimes(1);
+ });
+
+ it('request enrichment for duplicate URLs where enrichment previously failed', async () => {
+ const enrichSpy = jest.spyOn(chatClient, 'enrichURL').mockRejectedValueOnce(new Error());
+ await renderComponent({
+ chatContextOverrides: CHAT_CONTEXT_OVERRIDES_COMMON,
+ messageInputProps: MESSAGE_INPUT_PROPS_COMMON,
+ });
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData.og_scrape_url}`,
+ },
+ });
+ });
+
+ expect(enrichSpy).toHaveBeenCalledWith(scrapedData.og_scrape_url);
+ expect(enrichSpy).toHaveBeenCalledTimes(1);
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData.og_scrape_url} ${scrapedData.og_scrape_url}`,
+ },
+ });
+ });
+
+ expect(enrichSpy).toHaveBeenCalledWith(scrapedData.og_scrape_url);
+ expect(enrichSpy).toHaveBeenCalledTimes(2);
+ });
+
+ it('is unmounted when the URL is removed from the textarea value', async () => {
+ jest.spyOn(chatClient, 'enrichURL').mockResolvedValueOnce({ duration: '10ms', ...scrapedData });
+ await renderComponent({
+ chatContextOverrides: CHAT_CONTEXT_OVERRIDES_COMMON,
+ messageInputProps: MESSAGE_INPUT_PROPS_COMMON,
+ });
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData.og_scrape_url}`,
+ },
+ });
+ });
+ let linkPreviews = screen.queryAllByTestId(LINK_PREVIEW_TEST_ID);
+ // eslint-disable-next-line
+ expect(linkPreviews).toHaveLength(1);
+ expect(linkPreviews[0]).toHaveTextContent(scrapedData.og_scrape_url);
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData.og_scrape_url.slice(0, -1)}`,
+ },
+ });
+ });
+ linkPreviews = screen.queryAllByTestId(LINK_PREVIEW_TEST_ID);
+ // eslint-disable-next-line
+ expect(linkPreviews).toHaveLength(0);
+ });
+
+ it('is unmounted and disabled when dismissed', async () => {
+ const typedText = `X ${scrapedData.og_scrape_url}`;
+ jest.spyOn(chatClient, 'enrichURL').mockResolvedValueOnce({ duration: '10ms', ...scrapedData });
+ await renderComponent({
+ chatContextOverrides: CHAT_CONTEXT_OVERRIDES_COMMON,
+ messageInputProps: MESSAGE_INPUT_PROPS_COMMON,
+ });
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: typedText,
+ },
+ });
+ });
+ let linkPreviews = screen.queryAllByTestId(LINK_PREVIEW_TEST_ID);
+ // eslint-disable-next-line
+ expect(linkPreviews).toHaveLength(1);
+ expect(linkPreviews[0]).toHaveTextContent(scrapedData.og_scrape_url);
+
+ await act(async () => {
+ fireEvent.click(await screen.findByTestId(LINK_PREVIEW_DISMISS_BTN_TEST_ID));
+ });
+ linkPreviews = screen.queryAllByTestId(LINK_PREVIEW_TEST_ID);
+ // eslint-disable-next-line
+ expect(linkPreviews).toHaveLength(0);
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: typedText,
+ },
+ });
+ });
+
+ expect(screen.queryByTestId(LINK_PREVIEW_TEST_ID)).not.toBeInTheDocument();
+ });
+
+ it('are sent as attachments to posted message with skip_enrich_url:true', async () => {
+ const channel = chatClient.channel('messaging', mockedChannel.id);
+ const sendMessageSpy = jest.spyOn(channel, 'sendMessage').mockImplementation();
+
+ jest
+ .spyOn(chatClient, 'enrichURL')
+ .mockResolvedValueOnce({ duration: '10ms', ...scrapedData1 });
+ jest
+ .spyOn(chatClient, 'enrichURL')
+ .mockResolvedValueOnce({ duration: '10ms', ...scrapedData2 });
+ jest
+ .spyOn(chatClient, 'enrichURL')
+ .mockResolvedValueOnce({ duration: '10ms', ...scrapedData3 });
+ const { submit } = await renderComponent({
+ channelProps: { channel },
+ chatContextOverrides: CHAT_CONTEXT_OVERRIDES_COMMON,
+ messageInputProps: MESSAGE_INPUT_PROPS_COMMON,
+ });
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData1.og_scrape_url}`,
+ },
+ });
+ });
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData1.og_scrape_url} X ${scrapedData2.og_scrape_url}`,
+ },
+ });
+ });
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData1.og_scrape_url} X ${scrapedData2.og_scrape_url} ${scrapedData3.og_scrape_url}`,
+ },
+ });
+ });
+ await act(() => submit());
+
+ expect(sendMessageSpy).toHaveBeenCalledWith(
+ expect.objectContaining({
+ attachments: expect.arrayContaining([
+ expect.objectContaining(scrapedData1),
+ expect.objectContaining(scrapedData2),
+ expect.objectContaining(scrapedData3),
+ ]),
+ }),
+ expect.objectContaining({ skip_enrich_url: true }),
+ );
+ });
+
+ it('are not sent as attachments to posted message with skip_enrich_url:true if dismissed', async () => {
+ const channel = chatClient.channel('messaging', mockedChannel.id);
+ const sendMessageSpy = jest.spyOn(channel, 'sendMessage').mockImplementation();
+
+ jest
+ .spyOn(chatClient, 'enrichURL')
+ .mockResolvedValueOnce({ duration: '10ms', ...scrapedData1 });
+ jest
+ .spyOn(chatClient, 'enrichURL')
+ .mockResolvedValueOnce({ duration: '10ms', ...scrapedData2 });
+ const { submit } = await renderComponent({
+ channelProps: { channel },
+ chatContextOverrides: CHAT_CONTEXT_OVERRIDES_COMMON,
+ messageInputProps: MESSAGE_INPUT_PROPS_COMMON,
+ });
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData1.og_scrape_url}`,
+ },
+ });
+ });
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData1.og_scrape_url} X ${scrapedData2.og_scrape_url}`,
+ },
+ });
+ });
+
+ await act(async () => {
+ const dismissButtons = await screen.findAllByTestId(LINK_PREVIEW_DISMISS_BTN_TEST_ID);
+ fireEvent.click(dismissButtons[1]);
+ });
+
+ await act(() => submit());
+ expect(sendMessageSpy.mock.calls[0][0].attachments).toHaveLength(1);
+ expect(sendMessageSpy).toHaveBeenCalledWith(
+ expect.objectContaining({
+ attachments: expect.arrayContaining([expect.objectContaining(scrapedData1)]),
+ }),
+ expect.objectContaining({ skip_enrich_url: true }),
+ );
+ });
+
+ it('does not add failed link previews among attachments', async () => {
+ const channel = chatClient.channel('messaging', mockedChannel.id);
+ const sendMessageSpy = jest.spyOn(channel, 'sendMessage').mockImplementation();
+
+ jest
+ .spyOn(chatClient, 'enrichURL')
+ .mockResolvedValueOnce({ duration: '10ms', ...scrapedData1 });
+ jest.spyOn(chatClient, 'enrichURL').mockRejectedValueOnce();
+ const { submit } = await renderComponent({
+ channelProps: { channel },
+ chatContextOverrides: CHAT_CONTEXT_OVERRIDES_COMMON,
+ messageInputProps: MESSAGE_INPUT_PROPS_COMMON,
+ });
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData1.og_scrape_url}`,
+ },
+ });
+ });
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData1.og_scrape_url} X ${scrapedData2.og_scrape_url}`,
+ },
+ });
+ });
+
+ await act(() => submit());
+
+ expect(sendMessageSpy.mock.calls[0][0].attachments).toHaveLength(1);
+ expect(sendMessageSpy).toHaveBeenCalledWith(
+ expect.objectContaining({
+ attachments: expect.arrayContaining([expect.objectContaining(scrapedData1)]),
+ }),
+ expect.objectContaining({ skip_enrich_url: true }),
+ );
+ });
+
+ it('does not add dismissed link previews among attachments', async () => {
+ const channel = chatClient.channel('messaging', mockedChannel.id);
+ const sendMessageSpy = jest.spyOn(channel, 'sendMessage').mockImplementation();
+ jest
+ .spyOn(chatClient, 'enrichURL')
+ .mockResolvedValueOnce({ duration: '10ms', ...scrapedData1 });
+ jest
+ .spyOn(chatClient, 'enrichURL')
+ .mockResolvedValueOnce({ duration: '10ms', ...scrapedData2 });
+ const { submit } = await renderComponent({
+ channelProps: { channel },
+ chatContextOverrides: CHAT_CONTEXT_OVERRIDES_COMMON,
+ messageInputProps: MESSAGE_INPUT_PROPS_COMMON,
+ });
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData1.og_scrape_url}`,
+ },
+ });
+ });
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData1.og_scrape_url} X ${scrapedData2.og_scrape_url}`,
+ },
+ });
+ });
+
+ await act(async () => {
+ const dismissButtons = await screen.findAllByTestId(LINK_PREVIEW_DISMISS_BTN_TEST_ID);
+ fireEvent.click(dismissButtons[1]);
+ });
+
+ await act(() => submit());
+
+ expect(sendMessageSpy.mock.calls[0][0].attachments).toHaveLength(1);
+ expect(sendMessageSpy).toHaveBeenCalledWith(
+ expect.objectContaining({
+ attachments: expect.arrayContaining([expect.objectContaining(scrapedData1)]),
+ }),
+ expect.objectContaining({ skip_enrich_url: true }),
+ );
+ });
+
+ it('does not render duplicate link previews', async () => {
+ jest
+ .spyOn(chatClient, 'enrichURL')
+ .mockResolvedValueOnce({ duration: '10ms', ...scrapedData1 });
+ jest
+ .spyOn(chatClient, 'enrichURL')
+ .mockResolvedValueOnce({ duration: '10ms', ...scrapedData1 });
+ await renderComponent({
+ chatContextOverrides: CHAT_CONTEXT_OVERRIDES_COMMON,
+ messageInputProps: MESSAGE_INPUT_PROPS_COMMON,
+ });
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData1.og_scrape_url}`,
+ },
+ });
+ });
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData1.og_scrape_url} X ${scrapedData1.og_scrape_url}`,
+ },
+ });
+ });
+
+ const linkPreviews = await screen.queryAllByTestId(LINK_PREVIEW_TEST_ID);
+ // eslint-disable-next-line
+ expect(linkPreviews).toHaveLength(1);
+ expect(linkPreviews[0]).toHaveTextContent(scrapedData1.og_scrape_url);
+ });
+
+ it('are sent as attachments to posted message with skip_enrich_url:true on message update', async () => {
+ const editMessageSpy = jest.spyOn(chatClient, 'updateMessage').mockImplementation();
+ const existingMessage = generateMessage({ attachments: [scrapedData1] });
+ jest
+ .spyOn(chatClient, 'enrichURL')
+ .mockResolvedValueOnce({ duration: '10ms', ...scrapedData1 });
+
+ const { submit } = await renderComponent({
+ chatContextOverrides: CHAT_CONTEXT_OVERRIDES_COMMON,
+ messageInputProps: {
+ ...MESSAGE_INPUT_PROPS_COMMON,
+ message: existingMessage,
+ },
+ });
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData1.og_scrape_url} Y`,
+ },
+ });
+ });
+
+ await act(() => submit());
+
+ expect(editMessageSpy.mock.calls[0][0].attachments).toHaveLength(1);
+ expect(editMessageSpy).toHaveBeenCalledWith(
+ expect.objectContaining({
+ attachments: expect.arrayContaining([expect.objectContaining(scrapedData1)]),
+ }),
+ undefined,
+ expect.objectContaining({ skip_enrich_url: true }),
+ );
+ });
+
+ it('are sent with updated attachments on message update', async () => {
+ const editMessageSpy = jest.spyOn(chatClient, 'updateMessage').mockImplementation();
+ const scrapedAudioAttachment = generateScrapedAudioAttachment({
+ og_scrape_url: 'http://getstream.io/audio',
+ });
+ const scrapedImageAttachment = generateScrapedImageAttachment({
+ og_scrape_url: 'http://getstream.io/image',
+ });
+ const existingMessage = generateMessage({ attachments: [scrapedAudioAttachment] });
+ jest
+ .spyOn(chatClient, 'enrichURL')
+ .mockResolvedValueOnce({ duration: '10ms', ...scrapedImageAttachment });
+
+ const { submit } = await renderComponent({
+ chatContextOverrides: CHAT_CONTEXT_OVERRIDES_COMMON,
+ messageInputProps: {
+ ...MESSAGE_INPUT_PROPS_COMMON,
+ message: existingMessage,
+ },
+ });
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedImageAttachment.og_scrape_url}`,
+ },
+ });
+ });
+
+ await act(() => submit());
+
+ expect(editMessageSpy.mock.calls[0][0].attachments).toHaveLength(1);
+ expect(editMessageSpy).toHaveBeenCalledWith(
+ expect.objectContaining({
+ attachments: expect.arrayContaining([expect.objectContaining(scrapedImageAttachment)]),
+ }),
+ undefined,
+ expect.objectContaining({ skip_enrich_url: true }),
+ );
+ });
+
+ it('should not submit updated scraped data when enrichment in preview is disabled', async () => {
+ const editMessageSpy = jest.spyOn(chatClient, 'updateMessage').mockImplementation();
+ const scrapedAudioAttachment = generateScrapedAudioAttachment({
+ og_scrape_url: 'http://getstream.io/audio',
+ });
+ const scrapedImageAttachment = generateScrapedImageAttachment({
+ og_scrape_url: 'http://getstream.io/image',
+ });
+ const existingMessage = generateMessage({ attachments: [scrapedAudioAttachment] });
+ jest
+ .spyOn(chatClient, 'enrichURL')
+ .mockResolvedValueOnce({ duration: '10ms', ...scrapedImageAttachment });
+
+ const { submit } = await renderComponent({
+ chatContextOverrides: CHAT_CONTEXT_OVERRIDES_COMMON,
+ messageInputProps: {
+ message: existingMessage,
+ },
+ });
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedImageAttachment.og_scrape_url}`,
+ },
+ });
+ });
+
+ await act(() => submit());
+
+ expect(editMessageSpy.mock.calls[0][0].attachments).toHaveLength(1);
+ expect(editMessageSpy).toHaveBeenCalledWith(
+ expect.objectContaining({
+ attachments: expect.arrayContaining([expect.objectContaining(scrapedAudioAttachment)]),
+ }),
+ undefined,
+ undefined,
+ );
+ });
+
+ it('submit new message with skip_url_enrich:false if no link previews managed to get loaded', async () => {
+ const channel = chatClient.channel('messaging', mockedChannel.id);
+ const sendMessageSpy = jest.spyOn(channel, 'sendMessage').mockImplementation();
+ let resolveEnrichURLPromise;
+ jest
+ .spyOn(chatClient, 'enrichURL')
+ // eslint-disable-next-line no-unused-vars
+ .mockImplementationOnce(() => new Promise((res) => (resolveEnrichURLPromise = res)));
+
+ const { submit } = await renderComponent({
+ channelProps: { channel },
+ chatContextOverrides: CHAT_CONTEXT_OVERRIDES_COMMON,
+ messageInputProps: MESSAGE_INPUT_PROPS_COMMON,
+ });
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData1.og_scrape_url}`,
+ },
+ });
+ });
+
+ await act(() => submit());
+
+ expect(sendMessageSpy.mock.calls[0][0].attachments).toHaveLength(0);
+ expect(sendMessageSpy.mock.calls[0][1].skip_enrich_url).toBe(false);
+ });
+
+ it('submit updated message with skip_url_enrich:false if no link previews managed to get loaded', async () => {
+ const channel = chatClient.channel('messaging', mockedChannel.id);
+ const scrapedAudioAttachment = generateScrapedAudioAttachment({
+ og_scrape_url: 'http://getstream.io/audio',
+ });
+ const scrapedImageAttachment = generateScrapedImageAttachment({
+ og_scrape_url: 'http://getstream.io/image',
+ });
+ const existingMessage = generateMessage({ attachments: [scrapedAudioAttachment] });
+
+ const sendMessageSpy = jest.spyOn(channel, 'sendMessage').mockImplementation();
+
+ let resolveEnrichURLPromise;
+ jest
+ .spyOn(chatClient, 'enrichURL')
+ // eslint-disable-next-line no-unused-vars
+ .mockImplementationOnce(() => new Promise((res) => (resolveEnrichURLPromise = res)));
+
+ const { submit } = await renderComponent({
+ channelProps: { channel },
+ chatContextOverrides: CHAT_CONTEXT_OVERRIDES_COMMON,
+ messageInputProps: {
+ ...MESSAGE_INPUT_PROPS_COMMON,
+ existingMessage,
+ },
+ });
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedImageAttachment.og_scrape_url}`,
+ },
+ });
+ });
+
+ await act(() => submit());
+
+ expect(sendMessageSpy.mock.calls[0][0].attachments).toHaveLength(0);
+ expect(sendMessageSpy.mock.calls[0][1].skip_enrich_url).toBe(false);
+ });
+
+ it('should not be shown after submit if the URL enrichment has not finished', async () => {
+ jest
+ .spyOn(chatClient, 'enrichURL')
+ .mockResolvedValueOnce({ duration: '10ms', ...scrapedData1 });
+ const { submit } = await renderComponent({
+ chatContextOverrides: CHAT_CONTEXT_OVERRIDES_COMMON,
+ messageInputProps: MESSAGE_INPUT_PROPS_COMMON,
+ });
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData1.og_scrape_url}`,
+ },
+ });
+ });
+
+ await act(() => submit());
+ const linkPreviews = await screen.queryByTestId(LINK_PREVIEW_TEST_ID);
+ expect(linkPreviews).not.toBeInTheDocument();
+ });
+
+ it('are retrieved with custom search function', async () => {
+ // on purpose returning scrapedData2
+ const findURLFn = jest.fn().mockReturnValueOnce([scrapedData2.og_scrape_url]);
+ const typedText = `X ${scrapedData1.og_scrape_url}`;
+ jest
+ .spyOn(chatClient, 'enrichURL')
+ .mockResolvedValueOnce({ duration: '10ms', ...scrapedData1 });
+ await renderComponent({
+ chatContextOverrides: CHAT_CONTEXT_OVERRIDES_COMMON,
+ messageInputProps: {
+ urlEnrichmentConfig: {
+ enrichURLForPreview: true,
+ findURLFn,
+ },
+ },
+ });
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: typedText,
+ },
+ });
+ });
+
+ expect(findURLFn).toHaveBeenCalledWith(typedText);
+ });
+
+ it('calls findURLFn passed to Channel', async () => {
+ const enrichSpy = jest
+ .spyOn(chatClient, 'enrichURL')
+ .mockResolvedValue({ duration: '10ms', ...scrapedData });
+ const findURLFnChannel = jest.fn().mockReturnValueOnce([scrapedData.og_scrape_url]);
+ await renderComponent({
+ channelProps: {
+ enrichURLForPreview: true,
+ enrichURLForPreviewConfig: { findURLFn: findURLFnChannel },
+ },
+ chatContextOverrides: CHAT_CONTEXT_OVERRIDES_COMMON,
+ });
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData.og_scrape_url}`,
+ },
+ });
+ });
+
+ expect(enrichSpy).toHaveBeenCalledTimes(1);
+ expect(findURLFnChannel).toHaveBeenCalledTimes(1);
+ });
+
+ it('gives preference to findURLFn passed directly to MessageInput over the channel state context', async () => {
+ const enrichSpy = jest
+ .spyOn(chatClient, 'enrichURL')
+ .mockResolvedValue({ duration: '10ms', ...scrapedData });
+ const findURLFnChannel = jest.fn().mockReturnValueOnce([scrapedData.og_scrape_url]);
+ const findURLFnMsgInput = jest.fn().mockReturnValueOnce([scrapedData.og_scrape_url]);
+ await renderComponent({
+ channelProps: {
+ enrichURLForPreview: true,
+ enrichURLForPreviewConfig: { findURLFn: findURLFnChannel },
+ },
+ chatContextOverrides: CHAT_CONTEXT_OVERRIDES_COMMON,
+ messageInputProps: { urlEnrichmentConfig: { findURLFn: findURLFnMsgInput } },
+ });
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData.og_scrape_url}`,
+ },
+ });
+ });
+
+ expect(enrichSpy).toHaveBeenCalledTimes(1);
+ expect(findURLFnChannel).not.toHaveBeenCalled();
+ expect(findURLFnMsgInput).toHaveBeenCalledTimes(1);
+ });
+
+ it('enables custom handling of dismissal', async () => {
+ const onLinkPreviewDismissed = jest.fn();
+ const typedText = `X ${scrapedData1.og_scrape_url}`;
+ jest
+ .spyOn(chatClient, 'enrichURL')
+ .mockResolvedValueOnce({ duration: '10ms', ...scrapedData1 });
+ await renderComponent({
+ chatContextOverrides: CHAT_CONTEXT_OVERRIDES_COMMON,
+ messageInputProps: {
+ urlEnrichmentConfig: {
+ enrichURLForPreview: true,
+ onLinkPreviewDismissed,
+ },
+ },
+ });
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: typedText,
+ },
+ });
+ });
+
+ await act(async () => {
+ fireEvent.click(await screen.findByTestId(LINK_PREVIEW_DISMISS_BTN_TEST_ID));
+ });
+
+ expect(onLinkPreviewDismissed).toHaveBeenCalledTimes(1);
+ });
+
+ it('calls onLinkPreviewDismissed passed to Channel', async () => {
+ const enrichSpy = jest
+ .spyOn(chatClient, 'enrichURL')
+ .mockResolvedValue({ duration: '10ms', ...scrapedData });
+ const onLinkPreviewDismissedChannel = jest.fn();
+ await renderComponent({
+ channelProps: {
+ enrichURLForPreview: true,
+ enrichURLForPreviewConfig: { onLinkPreviewDismissed: onLinkPreviewDismissedChannel },
+ },
+ chatContextOverrides: CHAT_CONTEXT_OVERRIDES_COMMON,
+ });
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData.og_scrape_url}`,
+ },
+ });
+ });
+
+ await act(async () => {
+ fireEvent.click(await screen.findByTestId(LINK_PREVIEW_DISMISS_BTN_TEST_ID));
+ });
+
+ expect(enrichSpy).toHaveBeenCalledTimes(1);
+ expect(onLinkPreviewDismissedChannel).toHaveBeenCalledWith(
+ expect.objectContaining(scrapedData),
+ );
+ });
+
+ it('gives preference to onLinkPreviewDismissed passed directly to MessageInput over the channel state context', async () => {
+ const enrichSpy = jest
+ .spyOn(chatClient, 'enrichURL')
+ .mockResolvedValue({ duration: '10ms', ...scrapedData });
+ const onLinkPreviewDismissedChannel = jest.fn();
+ const onLinkPreviewDismissedInput = jest.fn();
+ await renderComponent({
+ channelProps: {
+ enrichURLForPreview: true,
+ enrichURLForPreviewConfig: { onLinkPreviewDismissed: onLinkPreviewDismissedChannel },
+ },
+ chatContextOverrides: CHAT_CONTEXT_OVERRIDES_COMMON,
+ messageInputProps: {
+ urlEnrichmentConfig: {
+ onLinkPreviewDismissed: onLinkPreviewDismissedInput,
+ },
+ },
+ });
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData.og_scrape_url}`,
+ },
+ });
+ });
+
+ await act(async () => {
+ fireEvent.click(await screen.findByTestId(LINK_PREVIEW_DISMISS_BTN_TEST_ID));
+ });
+
+ expect(enrichSpy).toHaveBeenCalledTimes(1);
+ expect(onLinkPreviewDismissedInput).toHaveBeenCalledWith(expect.objectContaining(scrapedData));
+ expect(onLinkPreviewDismissedChannel).not.toHaveBeenCalled();
+ });
+
+ it('gives preference to debounceURLEnrichmentMs passed to Channel', async () => {
+ const debounceURLEnrichmentMsChannel = 500;
+ await renderComponent({
+ channelProps: {
+ enrichURLForPreview: true,
+ enrichURLForPreviewConfig: { debounceURLEnrichmentMs: debounceURLEnrichmentMsChannel },
+ },
+ chatContextOverrides: CHAT_CONTEXT_OVERRIDES_COMMON,
+ });
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData.og_scrape_url}`,
+ },
+ });
+ });
+
+ expect(debounce).toHaveBeenCalledWith(expect.any(Function), debounceURLEnrichmentMsChannel, {
+ leading: false,
+ trailing: true,
+ });
+ });
+
+ it('gives preference to debounceURLEnrichmentMs passed directly over the channel state context', async () => {
+ const debounceURLEnrichmentMsChannel = 500;
+ const debounceURLEnrichmentMsInput = 1000;
+ await renderComponent({
+ channelProps: {
+ enrichURLForPreview: true,
+ enrichURLForPreviewConfig: { debounceURLEnrichmentMs: debounceURLEnrichmentMsChannel },
+ },
+ chatContextOverrides: CHAT_CONTEXT_OVERRIDES_COMMON,
+ messageInputProps: {
+ urlEnrichmentConfig: {
+ debounceURLEnrichmentMs: debounceURLEnrichmentMsInput,
+ },
+ },
+ });
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData.og_scrape_url}`,
+ },
+ });
+ });
+
+ expect(debounce).toHaveBeenCalledWith(expect.any(Function), debounceURLEnrichmentMsInput, {
+ leading: false,
+ trailing: true,
+ });
+ });
+
+ it('are rendered in custom LinkPreviewList component', async () => {
+ jest
+ .spyOn(chatClient, 'enrichURL')
+ .mockResolvedValueOnce({ duration: '10ms', ...scrapedData1 });
+ const customTestId = 'custom-link-preview';
+ const CustomLinkPreviewList = () => ;
+ await renderComponent({
+ channelProps: { enrichURLForPreview: true, LinkPreviewList: CustomLinkPreviewList },
+ chatContextOverrides: CHAT_CONTEXT_OVERRIDES_COMMON,
+ });
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData.og_scrape_url}`,
+ },
+ });
+ });
+
+ expect(await screen.queryByTestId(customTestId)).toBeInTheDocument();
+ expect(await screen.queryByTestId(LINK_PREVIEW_TEST_ID)).not.toBeInTheDocument();
+ });
+
+ it('link preview state is cleared after message submission', async () => {
+ const channel = chatClient.channel('messaging', mockedChannel.id);
+ const sendMessageSpy = jest.spyOn(channel, 'sendMessage').mockImplementation();
+ let resolveEnrichURLPromise;
+ jest
+ .spyOn(chatClient, 'enrichURL')
+ .mockImplementationOnce(() => new Promise((res) => (resolveEnrichURLPromise = res)));
+
+ const { submit } = await renderComponent({
+ channelProps: { channel, enrichURLForPreview: true },
+ chatContextOverrides: CHAT_CONTEXT_OVERRIDES_COMMON,
+ });
+
+ await act(async () => {
+ fireEvent.change(await screen.findByPlaceholderText(inputPlaceholder), {
+ target: {
+ value: `X ${scrapedData1.og_scrape_url}`,
+ },
+ });
+ });
+
+ await act(() => submit());
+
+ expect(screen.queryByTestId(LINK_PREVIEW_TEST_ID)).not.toBeInTheDocument();
+ expect(sendMessageSpy.mock.calls[0][0].attachments).toHaveLength(0);
+ expect(sendMessageSpy.mock.calls[0][1].skip_enrich_url).toBe(false);
+
+ await act(() => {
+ resolveEnrichURLPromise({ duration: '10ms', ...scrapedData1 });
+ });
+
+ await waitFor(() => {
+ expect(screen.queryByTestId(LINK_PREVIEW_TEST_ID)).not.toBeInTheDocument();
+ });
+ });
+});
diff --git a/src/components/MessageInput/__tests__/MessageInput.test.js b/src/components/MessageInput/__tests__/MessageInput.test.js
index ca4ef8f4d..319d6e6b9 100644
--- a/src/components/MessageInput/__tests__/MessageInput.test.js
+++ b/src/components/MessageInput/__tests__/MessageInput.test.js
@@ -650,6 +650,7 @@ function axeNoViolations(container) {
expect.objectContaining({
text: messageText,
}),
+ undefined,
);
await axeNoViolations(container);
});
@@ -700,6 +701,7 @@ function axeNoViolations(container) {
expect(calledMock).toHaveBeenCalledWith(
expect.stringMatching(/.+:.+/),
expect.objectContaining(customMessageData),
+ undefined,
);
});
await axeNoViolations(container);
@@ -729,6 +731,7 @@ function axeNoViolations(container) {
}),
channel.cid,
customMessageData,
+ undefined,
);
await axeNoViolations(container);
});
@@ -771,6 +774,7 @@ function axeNoViolations(container) {
}),
]),
}),
+ undefined,
);
await axeNoViolations(container);
});
@@ -804,6 +808,7 @@ function axeNoViolations(container) {
}),
]),
}),
+ undefined,
);
await axeNoViolations(container);
});
@@ -839,6 +844,7 @@ function axeNoViolations(container) {
}),
]),
}),
+ undefined,
);
await axeNoViolations(container);
});
@@ -869,6 +875,7 @@ function axeNoViolations(container) {
}),
channel.cid,
undefined,
+ undefined,
);
await axeNoViolations(container);
});
@@ -928,6 +935,7 @@ function axeNoViolations(container) {
}),
channel.cid,
undefined,
+ undefined,
);
await axeNoViolations(container);
@@ -1002,6 +1010,7 @@ function axeNoViolations(container) {
mentioned_users: [{ id: userId, name: username }],
text: message.text,
}),
+ undefined,
);
const results = await axe(container);
expect(results).toHaveNoViolations();
@@ -1035,6 +1044,7 @@ function axeNoViolations(container) {
expect.objectContaining({
mentioned_users: expect.arrayContaining([mentionId]),
}),
+ undefined,
);
const results = await axe(container);
expect(results).toHaveNoViolations();
@@ -1068,6 +1078,7 @@ function axeNoViolations(container) {
expect.objectContaining({
mentioned_users: [],
}),
+ undefined,
);
const results = await axe(container);
expect(results).toHaveNoViolations();
diff --git a/src/components/MessageInput/hooks/useCreateMessageInputContext.ts b/src/components/MessageInput/hooks/useCreateMessageInputContext.ts
index d152bc295..a4e672da8 100644
--- a/src/components/MessageInput/hooks/useCreateMessageInputContext.ts
+++ b/src/components/MessageInput/hooks/useCreateMessageInputContext.ts
@@ -13,6 +13,7 @@ export const useCreateMessageInputContext = <
additionalTextareaProps,
attachments,
autocompleteTriggers,
+ cancelURLEnrichment,
clearEditingState,
closeCommandsList,
closeEmojiPicker,
@@ -21,6 +22,7 @@ export const useCreateMessageInputContext = <
cooldownRemaining,
disabled,
disableMentions,
+ dismissLinkPreview,
doFileUploadRequest,
doImageUploadRequest,
emojiIndex,
@@ -29,6 +31,7 @@ export const useCreateMessageInputContext = <
errorHandler,
fileOrder,
fileUploads,
+ findAndEnqueueURLsToEnrich,
focus,
grow,
handleChange,
@@ -38,6 +41,7 @@ export const useCreateMessageInputContext = <
imageUploads,
insertText,
isUploadEnabled,
+ linkPreviews,
maxFilesLeft,
maxRows,
mentionAllAppUsers,
@@ -79,6 +83,7 @@ export const useCreateMessageInputContext = <
// eslint-disable-next-line
.map(([_, value]) => value.state)
.join();
+ const linkPreviewsValue = Array.from(linkPreviews.values()).join();
const mentionedUsersLength = mentioned_users.length;
const parentId = parent?.id;
@@ -87,6 +92,7 @@ export const useCreateMessageInputContext = <
additionalTextareaProps,
attachments,
autocompleteTriggers,
+ cancelURLEnrichment,
clearEditingState,
closeCommandsList,
closeEmojiPicker,
@@ -95,6 +101,7 @@ export const useCreateMessageInputContext = <
cooldownRemaining,
disabled,
disableMentions,
+ dismissLinkPreview,
doFileUploadRequest,
doImageUploadRequest,
emojiIndex,
@@ -103,6 +110,7 @@ export const useCreateMessageInputContext = <
errorHandler,
fileOrder,
fileUploads,
+ findAndEnqueueURLsToEnrich,
focus,
grow,
handleChange,
@@ -112,6 +120,7 @@ export const useCreateMessageInputContext = <
imageUploads,
insertText,
isUploadEnabled,
+ linkPreviews,
maxFilesLeft,
maxRows,
mentionAllAppUsers,
@@ -144,13 +153,17 @@ export const useCreateMessageInputContext = <
useMentionsTransliteration,
}),
[
+ cancelURLEnrichment,
cooldownInterval,
cooldownRemaining,
+ dismissLinkPreview,
editing,
emojiPickerIsOpen,
fileUploadsValue,
+ findAndEnqueueURLsToEnrich,
imageUploadsValue,
isUploadEnabled,
+ linkPreviewsValue,
mentionedUsersLength,
parentId,
publishTypingEvent,
diff --git a/src/components/MessageInput/hooks/useFileState.ts b/src/components/MessageInput/hooks/useFileState.ts
index fc8443996..f692a9619 100644
--- a/src/components/MessageInput/hooks/useFileState.ts
+++ b/src/components/MessageInput/hooks/useFileState.ts
@@ -1,6 +1,6 @@
import { useMemo } from 'react';
-import type { FileUpload } from './useMessageInputState';
+import type { FileUpload } from '../types';
export const useFileState = >(file: T) =>
useMemo(
diff --git a/src/components/MessageInput/hooks/useLinkPreviews.ts b/src/components/MessageInput/hooks/useLinkPreviews.ts
new file mode 100644
index 000000000..c9255ce84
--- /dev/null
+++ b/src/components/MessageInput/hooks/useLinkPreviews.ts
@@ -0,0 +1,176 @@
+import { find } from 'linkifyjs';
+import { Dispatch, useCallback, useEffect, useRef } from 'react';
+import debounce from 'lodash.debounce';
+import { useChannelStateContext, useChatContext } from '../../../context';
+import type { MessageInputReducerAction, MessageInputState } from './useMessageInputState';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+import type { LinkPreview, LinkPreviewMap } from '../types';
+import { LinkPreviewState, SetLinkPreviewMode } from '../types';
+import type { DebouncedFunc } from 'lodash';
+
+export type URLEnrichmentConfig = {
+ /** Number of milliseconds to debounce firing the URL enrichment queries when typing. The default value is 1500(ms). */
+ debounceURLEnrichmentMs?: number;
+ /** Allows for toggling the URL enrichment and link previews in `MessageInput`. By default, the feature is disabled. */
+ enrichURLForPreview?: boolean;
+ /** Custom function to identify URLs in a string and request OG data */
+ findURLFn?: (text: string) => string[];
+ /** Custom function to react to link preview dismissal */
+ onLinkPreviewDismissed?: (linkPreview: LinkPreview) => void;
+};
+
+type UseEnrichURLsParams<
+ StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+> = URLEnrichmentConfig & {
+ dispatch: Dispatch>;
+ linkPreviews: MessageInputState['linkPreviews'];
+};
+
+export type EnrichURLsController = {
+ /** Function cancels all the scheduled or in-progress URL enrichment queries and resets the state. */
+ cancelURLEnrichment: () => void;
+ /** Function called when a single link preview is dismissed. */
+ dismissLinkPreview: (linkPreview: LinkPreview) => void;
+ /** Function that triggers the search for URLs and their enrichment. */
+ findAndEnqueueURLsToEnrich?: DebouncedFunc<(text: string, mode?: SetLinkPreviewMode) => void>;
+};
+
+export const useLinkPreviews = <
+ StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+>({
+ debounceURLEnrichmentMs: debounceURLEnrichmentMsInputContext,
+ dispatch,
+ enrichURLForPreview = false,
+ findURLFn: findURLFnInputContext,
+ linkPreviews,
+ onLinkPreviewDismissed: onLinkPreviewDismissedInputContext,
+}: UseEnrichURLsParams): EnrichURLsController => {
+ const { client } = useChatContext();
+ // FIXME: the value of channelConfig is stale due to omitting it from the memoization deps in useCreateChannelStateContext
+ const {
+ channelConfig,
+ debounceURLEnrichmentMs: debounceURLEnrichmentMsChannelContext,
+ findURLFn: findURLFnChannelContext,
+ onLinkPreviewDismissed: onLinkPreviewDismissedChannelContext,
+ } = useChannelStateContext();
+
+ const shouldDiscardEnrichQueries = useRef(false);
+
+ const findURLFn = findURLFnInputContext ?? findURLFnChannelContext;
+ const onLinkPreviewDismissed =
+ onLinkPreviewDismissedInputContext ?? onLinkPreviewDismissedChannelContext;
+ const debounceURLEnrichmentMs =
+ debounceURLEnrichmentMsInputContext ?? debounceURLEnrichmentMsChannelContext ?? 1500;
+
+ const dismissLinkPreview = useCallback(
+ (linkPreview: LinkPreview) => {
+ onLinkPreviewDismissed?.(linkPreview);
+ const previewToRemoveMap = new Map();
+ linkPreview.state = LinkPreviewState.DISMISSED;
+ previewToRemoveMap.set(linkPreview.og_scrape_url, linkPreview);
+ dispatch({
+ linkPreviews: previewToRemoveMap,
+ mode: SetLinkPreviewMode.UPSERT,
+ type: 'setLinkPreviews',
+ });
+ },
+ [onLinkPreviewDismissed],
+ );
+
+ const findAndEnqueueURLsToEnrich = useCallback(
+ debounce(
+ (text: string, mode = SetLinkPreviewMode.SET) => {
+ const urls = findURLFn
+ ? findURLFn(text)
+ : find(text, 'url').reduce((acc, link) => {
+ if (link.isLink) acc.push(link.href);
+ return acc;
+ }, []);
+
+ shouldDiscardEnrichQueries.current = urls.length === 0;
+
+ dispatch({
+ linkPreviews: urls.reduce((acc, url) => {
+ acc.set(url, { og_scrape_url: url, state: LinkPreviewState.QUEUED });
+ return acc;
+ }, new Map()),
+ mode,
+ type: 'setLinkPreviews',
+ });
+ },
+ debounceURLEnrichmentMs,
+ { leading: false, trailing: true },
+ ),
+ [debounceURLEnrichmentMs, shouldDiscardEnrichQueries, findURLFn],
+ );
+
+ const cancelURLEnrichment = useCallback(() => {
+ findAndEnqueueURLsToEnrich.cancel();
+ findAndEnqueueURLsToEnrich('');
+ findAndEnqueueURLsToEnrich.flush();
+ }, [findAndEnqueueURLsToEnrich]);
+
+ useEffect(() => {
+ const enqueuedLinks = Array.from(linkPreviews.values()).reduce(
+ (acc, linkPreview) => {
+ if (linkPreview.state === 'queued') {
+ const loadingLinkPreview: LinkPreview = {
+ ...linkPreview,
+ state: LinkPreviewState.LOADING,
+ };
+ acc.set(linkPreview.og_scrape_url, loadingLinkPreview);
+ }
+ return acc;
+ },
+ new Map(),
+ );
+
+ if (!enqueuedLinks.size) return;
+
+ dispatch({
+ linkPreviews: enqueuedLinks,
+ mode: SetLinkPreviewMode.UPSERT,
+ type: 'setLinkPreviews',
+ });
+
+ enqueuedLinks.forEach((linkPreview) => {
+ client
+ .enrichURL(linkPreview.og_scrape_url)
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ .then(({ duration, ...ogAttachment }) => {
+ if (shouldDiscardEnrichQueries.current) return;
+
+ const linkPreviewsMap = new Map();
+ linkPreviewsMap.set(linkPreview.og_scrape_url, {
+ ...ogAttachment,
+ state: LinkPreviewState.LOADED,
+ });
+
+ dispatch({
+ linkPreviews: linkPreviewsMap,
+ mode: SetLinkPreviewMode.UPSERT,
+ type: 'setLinkPreviews',
+ });
+ })
+ .catch(() => {
+ const linkPreviewsMap = new Map();
+ linkPreviewsMap.set(linkPreview.og_scrape_url, {
+ ...linkPreview,
+ state: LinkPreviewState.FAILED,
+ });
+ dispatch({
+ linkPreviews: linkPreviewsMap,
+ mode: SetLinkPreviewMode.UPSERT,
+ type: 'setLinkPreviews',
+ });
+ });
+ });
+ }, [shouldDiscardEnrichQueries, linkPreviews]);
+
+ return {
+ cancelURLEnrichment,
+ dismissLinkPreview,
+ findAndEnqueueURLsToEnrich:
+ channelConfig?.url_enrichment && enrichURLForPreview ? findAndEnqueueURLsToEnrich : undefined,
+ };
+};
diff --git a/src/components/MessageInput/hooks/useMessageInputState.ts b/src/components/MessageInput/hooks/useMessageInputState.ts
index 3508dfa1d..72d5d5c33 100644
--- a/src/components/MessageInput/hooks/useMessageInputState.ts
+++ b/src/components/MessageInput/hooks/useMessageInputState.ts
@@ -12,48 +12,18 @@ import { usePasteHandler } from './usePasteHandler';
import type { EmojiData, NimbleEmojiIndex } from 'emoji-mart';
import type { FileLike } from '../../ReactFileUtilities';
-import type { Attachment, Message, UserResponse } from 'stream-chat';
+import type { Attachment, Message, OGAttachment, UserResponse } from 'stream-chat';
import type { MessageInputProps } from '../MessageInput';
-import type { CustomTrigger, DefaultStreamChatGenerics } from '../../../types/types';
-
-export type FileUpload = {
- file: {
- name: string;
- lastModified?: number;
- lastModifiedDate?: Date;
- size?: number;
- type?: string;
- uri?: string;
- };
- id: string;
- state: 'finished' | 'failed' | 'uploading';
- thumb_url?: string;
- url?: string;
-};
-
-export type ImageUpload<
- StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
-> = {
- file: {
- name: string;
- height?: number;
- lastModified?: number;
- lastModifiedDate?: Date;
- size?: number;
- type?: string;
- uri?: string;
- width?: number;
- };
- id: string;
- state: 'finished' | 'failed' | 'uploading';
- previewUri?: string;
- url?: string;
-} & Pick<
- Attachment,
- 'og_scrape_url' | 'title' | 'title_link' | 'author_name' | 'text'
->;
+import type {
+ CustomTrigger,
+ DefaultStreamChatGenerics,
+ SendMessageOptions,
+} from '../../../types/types';
+import { EnrichURLsController, useLinkPreviews } from './useLinkPreviews';
+import type { FileUpload, ImageUpload, LinkPreviewMap } from '../types';
+import { LinkPreviewState, SetLinkPreviewMode } from '../types';
export type MessageInputState<
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
@@ -64,6 +34,7 @@ export type MessageInputState<
fileUploads: Record;
imageOrder: string[];
imageUploads: Record;
+ linkPreviews: LinkPreviewMap;
mentioned_users: UserResponse[];
setText: (text: string) => void;
text: string;
@@ -101,6 +72,12 @@ type SetFileUploadAction = {
url?: string;
};
+type SetLinkPreviewsAction = {
+ linkPreviews: LinkPreviewMap;
+ mode: SetLinkPreviewMode;
+ type: 'setLinkPreviews';
+};
+
type RemoveImageUploadAction = {
id: string;
type: 'removeImageUpload';
@@ -126,13 +103,14 @@ export type MessageInputReducerAction<
| ClearAction
| SetImageUploadAction
| SetFileUploadAction
+ | SetLinkPreviewsAction
| RemoveImageUploadAction
| RemoveFileUploadAction
| AddMentionedUserAction;
export type MessageInputHookProps<
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
-> = {
+> = EnrichURLsController & {
closeEmojiPicker: React.MouseEventHandler;
emojiPickerRef: React.MutableRefObject;
handleChange: React.ChangeEventHandler;
@@ -140,6 +118,7 @@ export type MessageInputHookProps<
handleSubmit: (
event: React.BaseSyntheticEvent,
customMessageData?: Partial>,
+ options?: SendMessageOptions,
) => void;
insertText: (textToInsert: string) => void;
isUploadEnabled: boolean;
@@ -167,6 +146,7 @@ const makeEmptyMessageInputState = <
fileUploads: {},
imageOrder: [],
imageUploads: {},
+ linkPreviews: new Map(),
mentioned_users: [],
setText: () => null,
text: '',
@@ -234,6 +214,16 @@ const initState = <
{},
) ?? {};
+ const linkPreviews =
+ message.attachments?.reduce((acc, attachment) => {
+ if (!attachment.og_scrape_url) return acc;
+ acc.set(attachment.og_scrape_url, {
+ ...(attachment as OGAttachment),
+ state: LinkPreviewState.LOADED,
+ });
+ return acc;
+ }, new Map()) ?? new Map();
+
const imageOrder = Object.keys(imageUploads);
const fileOrder = Object.keys(fileUploads);
@@ -249,6 +239,7 @@ const initState = <
fileUploads,
imageOrder,
imageUploads,
+ linkPreviews,
mentioned_users,
setText: () => null,
text: message.text || '',
@@ -306,6 +297,38 @@ const messageInputReducer = <
};
}
+ case 'setLinkPreviews': {
+ const linkPreviews = new Map(state.linkPreviews);
+
+ if (action.mode === SetLinkPreviewMode.REMOVE) {
+ Array.from(action.linkPreviews.keys()).forEach((key) => {
+ linkPreviews.delete(key);
+ });
+ } else {
+ Array.from(action.linkPreviews.values()).reduce((acc, linkPreview) => {
+ const existingPreview = acc.get(linkPreview.og_scrape_url);
+ const alreadyEnqueued =
+ linkPreview.state === LinkPreviewState.QUEUED &&
+ existingPreview?.state !== LinkPreviewState.FAILED;
+
+ if (existingPreview && alreadyEnqueued) return acc;
+ acc.set(linkPreview.og_scrape_url, linkPreview);
+ return acc;
+ }, linkPreviews);
+
+ if (action.mode === SetLinkPreviewMode.SET) {
+ Array.from(state.linkPreviews.keys()).forEach((key) => {
+ if (!action.linkPreviews.get(key)) linkPreviews.delete(key);
+ });
+ }
+ }
+
+ return {
+ ...state,
+ linkPreviews,
+ };
+ }
+
case 'removeImageUpload': {
if (!state.imageUploads[action.id]) return state; // cannot remove anything
const newImageUploads = { ...state.imageUploads };
@@ -363,11 +386,19 @@ export const useMessageInputState = <
MessageInputHookProps &
CommandsListState &
MentionsListState => {
- const { additionalTextareaProps, closeEmojiPickerOnClick, getDefaultValue, message } = props;
+ const {
+ additionalTextareaProps,
+ closeEmojiPickerOnClick,
+ getDefaultValue,
+ message,
+ urlEnrichmentConfig,
+ } = props;
- const { channelCapabilities = {}, channelConfig } = useChannelStateContext(
- 'useMessageInputState',
- );
+ const {
+ channelCapabilities = {},
+ channelConfig,
+ enrichURLForPreview: enrichURLForPreviewChannelContext,
+ } = useChannelStateContext('useMessageInputState');
const defaultValue = getDefaultValue?.() || additionalTextareaProps?.defaultValue;
const initialStateValue =
@@ -385,10 +416,19 @@ export const useMessageInputState = <
initState,
);
+ const enrichURLsController = useLinkPreviews({
+ dispatch,
+ linkPreviews: state.linkPreviews,
+ ...urlEnrichmentConfig,
+ enrichURLForPreview:
+ urlEnrichmentConfig?.enrichURLForPreview ?? enrichURLForPreviewChannelContext,
+ });
+
const { handleChange, insertText, textareaRef } = useMessageInputText(
props,
state,
dispatch,
+ enrichURLsController.findAndEnqueueURLsToEnrich,
);
const [showCommandsList, setShowCommandsList] = useState(false);
@@ -443,11 +483,17 @@ export const useMessageInputState = <
state,
dispatch,
numberOfUploads,
+ enrichURLsController,
);
const isUploadEnabled =
channelConfig?.uploads !== false && channelCapabilities['upload-file'] !== false;
- const { onPaste } = usePasteHandler(uploadNewFiles, insertText, isUploadEnabled);
+ const { onPaste } = usePasteHandler(
+ uploadNewFiles,
+ insertText,
+ isUploadEnabled,
+ enrichURLsController.findAndEnqueueURLsToEnrich,
+ );
const onSelectUser = useCallback((item: UserResponse) => {
dispatch({ type: 'addMentionedUser', user: item });
@@ -459,6 +505,7 @@ export const useMessageInputState = <
return {
...state,
+ ...enrichURLsController,
closeCommandsList,
/**
* TODO: fix the below at some point because this type casting is wrong
diff --git a/src/components/MessageInput/hooks/useMessageInputText.ts b/src/components/MessageInput/hooks/useMessageInputText.ts
index cc17f764c..4e71ca756 100644
--- a/src/components/MessageInput/hooks/useMessageInputText.ts
+++ b/src/components/MessageInput/hooks/useMessageInputText.ts
@@ -5,6 +5,7 @@ import type { MessageInputProps } from '../MessageInput';
import { useChannelStateContext } from '../../../context/ChannelStateContext';
import type { CustomTrigger, DefaultStreamChatGenerics } from '../../../types/types';
+import type { EnrichURLsController } from './useLinkPreviews';
export const useMessageInputText = <
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -13,6 +14,7 @@ export const useMessageInputText = <
props: MessageInputProps,
state: MessageInputState,
dispatch: React.Dispatch>,
+ findAndEnqueueURLsToEnrich?: EnrichURLsController['findAndEnqueueURLsToEnrich'],
) => {
const { channel } = useChannelStateContext('useMessageInputText');
const { additionalTextareaProps, focus, parent, publishTypingEvent = true } = props;
@@ -89,11 +91,14 @@ export const useMessageInputText = <
getNewText: () => newText,
type: 'setText',
});
+
+ findAndEnqueueURLsToEnrich?.(newText);
+
if (publishTypingEvent && newText && channel) {
logChatPromiseExecution(channel.keystroke(parent?.id), 'start typing event');
}
},
- [channel, parent, publishTypingEvent],
+ [channel, findAndEnqueueURLsToEnrich, parent, publishTypingEvent],
);
return {
diff --git a/src/components/MessageInput/hooks/usePasteHandler.ts b/src/components/MessageInput/hooks/usePasteHandler.ts
index 4c6fded2e..5a648cebf 100644
--- a/src/components/MessageInput/hooks/usePasteHandler.ts
+++ b/src/components/MessageInput/hooks/usePasteHandler.ts
@@ -4,11 +4,14 @@ import {
dataTransferItemsToFiles,
FileLike,
} from '../../ReactFileUtilities';
+import type { EnrichURLsController } from './useLinkPreviews';
+import { SetLinkPreviewMode } from '../types';
export const usePasteHandler = (
uploadNewFiles: (files: FileList | FileLike[] | File[]) => void,
insertText: (textToInsert: string) => void,
isUploadEnabled: boolean,
+ findAndEnqueueURLsToEnrich?: EnrichURLsController['findAndEnqueueURLsToEnrich'],
) => {
const onPaste = useCallback(
(clipboardEvent: React.ClipboardEvent) => {
@@ -45,6 +48,8 @@ export const usePasteHandler = (
if (plainTextPromise) {
const pastedText = await plainTextPromise;
insertText(pastedText);
+ findAndEnqueueURLsToEnrich?.(pastedText, SetLinkPreviewMode.UPSERT);
+ findAndEnqueueURLsToEnrich?.flush();
}
})(clipboardEvent);
},
diff --git a/src/components/MessageInput/hooks/useSubmitHandler.ts b/src/components/MessageInput/hooks/useSubmitHandler.ts
index 8947f608f..8ac25c438 100644
--- a/src/components/MessageInput/hooks/useSubmitHandler.ts
+++ b/src/components/MessageInput/hooks/useSubmitHandler.ts
@@ -9,6 +9,8 @@ import type { MessageInputReducerAction, MessageInputState } from './useMessageI
import type { MessageInputProps } from '../MessageInput';
import type { CustomTrigger, DefaultStreamChatGenerics } from '../../../types/types';
+import type { EnrichURLsController } from './useLinkPreviews';
+import { LinkPreviewState } from '../types';
const getAttachmentTypeFromMime = (mime: string) => {
if (mime.includes('video/')) return 'video';
@@ -24,6 +26,7 @@ export const useSubmitHandler = <
state: MessageInputState,
dispatch: React.Dispatch>,
numberOfUploads: number,
+ enrichURLsController: EnrichURLsController,
) => {
const { clearEditingState, message, overrideSubmitHandler, parent, publishTypingEvent } = props;
@@ -33,10 +36,12 @@ export const useSubmitHandler = <
fileUploads,
imageOrder,
imageUploads,
+ linkPreviews,
mentioned_users,
text,
} = state;
+ const { cancelURLEnrichment, findAndEnqueueURLsToEnrich } = enrichURLsController;
const { channel } = useChannelStateContext('useSubmitHandler');
const { addNotification, editMessage, sendMessage } = useChannelActionContext(
'useSubmitHandler',
@@ -127,7 +132,39 @@ export const useSubmitHandler = <
return addNotification(t('Wait until all attachments have uploaded'), 'error');
}
- const newAttachments = getAttachmentsFromUploads();
+ let attachmentsFromUploads = getAttachmentsFromUploads();
+ let attachmentsFromLinkPreviews: Attachment[] = [];
+ let someLinkPreviewsLoading;
+ let someLinkPreviewsDismissed;
+ if (findAndEnqueueURLsToEnrich) {
+ // filter out all the attachments scraped before the message was edited - only if the scr
+ attachmentsFromUploads = attachmentsFromUploads.filter(
+ (attachment) => !attachment.og_scrape_url,
+ );
+ // prevent showing link preview in MessageInput after the message has been sent
+ cancelURLEnrichment();
+ someLinkPreviewsLoading = Array.from(linkPreviews.values()).some((linkPreview) =>
+ [LinkPreviewState.QUEUED, LinkPreviewState.LOADING].includes(linkPreview.state),
+ );
+ someLinkPreviewsDismissed = Array.from(linkPreviews.values()).some(
+ (linkPreview) => linkPreview.state === LinkPreviewState.DISMISSED,
+ );
+
+ if (!someLinkPreviewsLoading) {
+ attachmentsFromLinkPreviews = Array.from(linkPreviews.values())
+ .filter(
+ (linkPreview) =>
+ linkPreview.state === LinkPreviewState.LOADED &&
+ !attachmentsFromUploads.find(
+ (attFromUpload) => attFromUpload.og_scrape_url === linkPreview.og_scrape_url,
+ ),
+ )
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ .map(({ state: linkPreviewState, ...ogAttachment }) => ogAttachment as Attachment);
+ }
+ }
+
+ const newAttachments = [...attachmentsFromUploads, ...attachmentsFromLinkPreviews];
// Instead of checking if a user is still mentioned every time the text changes,
// just filter out non-mentioned users before submit, which is cheaper
@@ -145,16 +182,25 @@ export const useSubmitHandler = <
mentioned_users: actualMentionedUsers,
text,
};
-
+ // scraped attachments are added only if all enrich queries has completed. Otherwise, the scraping has to be done server-side.
+ const linkPreviewsEnabled = !!findAndEnqueueURLsToEnrich;
+ const skip_enrich_url =
+ linkPreviewsEnabled &&
+ ((!someLinkPreviewsLoading && attachmentsFromLinkPreviews.length > 0) ||
+ someLinkPreviewsDismissed);
+ const sendOptions = linkPreviewsEnabled ? { skip_enrich_url } : undefined;
if (message) {
delete message.i18n;
try {
- await editMessage(({
- ...message,
- ...updatedMessage,
- ...customMessageData,
- } as unknown) as UpdatedMessage);
+ await editMessage(
+ ({
+ ...message,
+ ...updatedMessage,
+ ...customMessageData,
+ } as unknown) as UpdatedMessage,
+ sendOptions,
+ );
clearEditingState?.();
dispatch({ type: 'clear' });
@@ -173,6 +219,7 @@ export const useSubmitHandler = <
},
channel.cid,
customMessageData,
+ sendOptions,
);
} else {
await sendMessage(
@@ -181,6 +228,7 @@ export const useSubmitHandler = <
parent,
},
customMessageData,
+ sendOptions,
);
}
diff --git a/src/components/MessageInput/icons.tsx b/src/components/MessageInput/icons.tsx
index 54ac1b7c4..b3309de47 100644
--- a/src/components/MessageInput/icons.tsx
+++ b/src/components/MessageInput/icons.tsx
@@ -176,6 +176,17 @@ export const DownloadIcon = () => (
);
+export const LinkIcon = () => (
+
+);
+
export const SendIconV1 = () => {
const { t } = useTranslationContext('SendButton');
return (
diff --git a/src/components/MessageInput/index.ts b/src/components/MessageInput/index.ts
index baf5ce71d..2a7cd048e 100644
--- a/src/components/MessageInput/index.ts
+++ b/src/components/MessageInput/index.ts
@@ -10,3 +10,4 @@ export * from './MessageInputFlat';
export * from './MessageInputSmall';
export * from './QuotedMessagePreview';
export * from './UploadsPreview';
+export * from './types';
diff --git a/src/components/MessageInput/types.ts b/src/components/MessageInput/types.ts
new file mode 100644
index 000000000..7c43be1d3
--- /dev/null
+++ b/src/components/MessageInput/types.ts
@@ -0,0 +1,67 @@
+import type { Attachment, OGAttachment } from 'stream-chat';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+
+type AttachmentLoadingState = 'uploading' | 'finished' | 'failed';
+
+export type FileUpload = {
+ file: {
+ name: string;
+ lastModified?: number;
+ lastModifiedDate?: Date;
+ size?: number;
+ type?: string;
+ uri?: string;
+ };
+ id: string;
+ state: AttachmentLoadingState;
+ thumb_url?: string;
+ url?: string;
+};
+export type ImageUpload<
+ StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+> = {
+ file: {
+ name: string;
+ height?: number;
+ lastModified?: number;
+ lastModifiedDate?: Date;
+ size?: number;
+ type?: string;
+ uri?: string;
+ width?: number;
+ };
+ id: string;
+ state: AttachmentLoadingState;
+ previewUri?: string;
+ url?: string;
+} & Pick<
+ Attachment,
+ 'og_scrape_url' | 'title' | 'title_link' | 'author_name' | 'text'
+>;
+
+export enum LinkPreviewState {
+ /** Link preview has been dismissed using MessageInputContextValue.dismissLinkPreview **/
+ DISMISSED = 'dismissed',
+ /** Link preview could not be loaded, the enrichment request has failed. **/
+ FAILED = 'failed',
+ /** Link preview has been successfully loaded. **/
+ LOADED = 'loaded',
+ /** The enrichment query is in progress for a given link. **/
+ LOADING = 'loading',
+ /** The link is scheduled for enrichment. **/
+ QUEUED = 'queued',
+}
+
+export type LinkURL = string;
+
+export type LinkPreview = OGAttachment & {
+ state: LinkPreviewState;
+};
+
+export enum SetLinkPreviewMode {
+ UPSERT,
+ SET,
+ REMOVE,
+}
+
+export type LinkPreviewMap = Map;
diff --git a/src/components/MessageList/VirtualizedMessageList.tsx b/src/components/MessageList/VirtualizedMessageList.tsx
index d89053f48..1a4f56acb 100644
--- a/src/components/MessageList/VirtualizedMessageList.tsx
+++ b/src/components/MessageList/VirtualizedMessageList.tsx
@@ -376,6 +376,7 @@ const VirtualizedMessageListWithContext = <
return (
= Partial, 'customMessageActions' | 'messageActions'>> & {
+> = Partial, PropsDrilledToMessage>> & {
/** Additional props to be passed the underlying [`react-virtuoso` virtualized list dependency](https://virtuoso.dev/virtuoso-api-reference/) */
additionalVirtuosoProps?: VirtuosoProps;
/** If true, picking a reaction from the `ReactionSelector` component will close the selector */
diff --git a/src/context/ChannelActionContext.tsx b/src/context/ChannelActionContext.tsx
index c8c48459e..15b721238 100644
--- a/src/context/ChannelActionContext.tsx
+++ b/src/context/ChannelActionContext.tsx
@@ -15,7 +15,12 @@ import type { StreamMessage } from './ChannelStateContext';
import type { ChannelStateReducerAction } from '../components/Channel/channelState';
import type { CustomMentionHandler } from '../components/Message/hooks/useMentionsHandler';
-import type { DefaultStreamChatGenerics, UnknownType } from '../types/types';
+import type {
+ DefaultStreamChatGenerics,
+ SendMessageOptions,
+ UnknownType,
+ UpdateMessageOptions,
+} from '../types/types';
export type MessageAttachments<
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
@@ -47,6 +52,7 @@ export type ChannelActionContextValue<
dispatch: React.Dispatch>;
editMessage: (
message: UpdatedMessage,
+ options?: UpdateMessageOptions,
) => Promise | void>;
jumpToLatestMessage: () => Promise;
jumpToMessage: (messageId: string, limit?: number) => Promise;
@@ -64,6 +70,7 @@ export type ChannelActionContextValue<
sendMessage: (
message: MessageToSend,
customMessageData?: Partial>,
+ options?: SendMessageOptions,
) => Promise;
setQuotedMessage: React.Dispatch<
React.SetStateAction | undefined>
diff --git a/src/context/ChannelStateContext.tsx b/src/context/ChannelStateContext.tsx
index 6bc8dd035..b44f8bb52 100644
--- a/src/context/ChannelStateContext.tsx
+++ b/src/context/ChannelStateContext.tsx
@@ -15,6 +15,7 @@ import type {
UnknownType,
VideoAttachmentSizeHandler,
} from '../types/types';
+import type { URLEnrichmentConfig } from '../components/MessageInput/hooks/useLinkPreviews';
export type ChannelNotifications = Array<{
id: string;
@@ -66,10 +67,14 @@ export type ChannelStateContextValue<
shouldGenerateVideoThumbnail: boolean;
videoAttachmentSizeHandler: VideoAttachmentSizeHandler;
acceptedFiles?: string[];
+ debounceURLEnrichmentMs?: URLEnrichmentConfig['debounceURLEnrichmentMs'];
dragAndDropWindow?: boolean;
+ enrichURLForPreview?: URLEnrichmentConfig['enrichURLForPreview'];
+ findURLFn?: URLEnrichmentConfig['findURLFn'];
giphyVersion?: GiphyVersions;
maxNumberOfFiles?: number;
mutes?: Array>;
+ onLinkPreviewDismissed?: URLEnrichmentConfig['onLinkPreviewDismissed'];
watcher_count?: number;
};
diff --git a/src/context/ComponentContext.tsx b/src/context/ComponentContext.tsx
index 740f7f1ef..9de91337b 100644
--- a/src/context/ComponentContext.tsx
+++ b/src/context/ComponentContext.tsx
@@ -33,6 +33,7 @@ import type { TypingIndicatorProps } from '../components/TypingIndicator/TypingI
import type { CustomTrigger, DefaultStreamChatGenerics, UnknownType } from '../types/types';
import type { CooldownTimerProps } from '../components';
+import type { LinkPreviewListProps } from '../components/MessageInput/LinkPreviewList';
export type ComponentContextValue<
StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -40,6 +41,7 @@ export type ComponentContextValue<
> = {
Attachment: React.ComponentType>;
Message: React.ComponentType>;
+ AttachmentPreviewList?: React.ComponentType;
AutocompleteSuggestionHeader?: React.ComponentType;
AutocompleteSuggestionItem?: React.ComponentType>;
AutocompleteSuggestionList?: React.ComponentType>;
@@ -53,6 +55,7 @@ export type ComponentContextValue<
GiphyPreviewMessage?: React.ComponentType>;
HeaderComponent?: React.ComponentType;
Input?: React.ComponentType>;
+ LinkPreviewList?: React.ComponentType;
LoadingIndicator?: React.ComponentType;
MessageDeleted?: React.ComponentType>;
MessageListNotifications?: React.ComponentType;
diff --git a/src/types/types.ts b/src/types/types.ts
index be7b38c1f..1cb81fb07 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -129,3 +129,19 @@ export type VideoAttachmentSizeHandler = (
element: HTMLElement,
shouldGenerateVideoThumbnail: boolean,
) => VideoAttachmentConfiguration;
+
+// todo: fix export from stream-chat - for some reason not exported
+export type SendMessageOptions = {
+ force_moderation?: boolean;
+ is_pending_message?: boolean;
+ keep_channel_hidden?: boolean;
+ pending?: boolean;
+ pending_message_metadata?: Record;
+ skip_enrich_url?: boolean;
+ skip_push?: boolean;
+};
+
+// todo: fix export from stream-chat - for some reason not exported
+export type UpdateMessageOptions = {
+ skip_enrich_url?: boolean;
+};