stream-chat-react 10.9.1 → 10.10.1

package/dist/components/MessageInput/LinkPreviewList.js

@@ -0,0 +1,34 @@
+import clsx from 'clsx';
+import React, { useState } from 'react';
+import { useChannelStateContext, useMessageInputContext } from '../../context';
+import { LinkPreviewState } from './types';
+import { CloseIcon, LinkIcon } from './icons';
+import { PopperTooltip } from '../Tooltip';
+import { useEnterLeaveHandlers } from '../Tooltip/hooks';
+export var LinkPreviewList = function (_a) {
+    var linkPreviews = _a.linkPreviews;
+    var quotedMessage = useChannelStateContext().quotedMessage;
+    var showLinkPreviews = linkPreviews.length > 0 && !quotedMessage;
+    if (!showLinkPreviews)
+        return null;
+    return (React.createElement("div", { className: 'str-chat__link-preview-list' }, Array.from(linkPreviews.values()).map(function (linkPreview) {
+        return linkPreview.state === LinkPreviewState.LOADED ? (React.createElement(LinkPreviewCard, { key: linkPreview.og_scrape_url, linkPreview: linkPreview })) : null;
+    })));
+};
+var LinkPreviewCard = function (_a) {
+    var linkPreview = _a.linkPreview;
+    var dismissLinkPreview = useMessageInputContext().dismissLinkPreview;
+    var _b = useEnterLeaveHandlers(), handleEnter = _b.handleEnter, handleLeave = _b.handleLeave, tooltipVisible = _b.tooltipVisible;
+    var _c = useState(null), referenceElement = _c[0], setReferenceElement = _c[1];
+    return (React.createElement("div", { className: clsx('str-chat__link-preview-card', {
+            'str-chat__link-preview-card--loading': linkPreview.state === LinkPreviewState.LOADING,
+        }), "data-testid": 'link-preview-card' },
+        React.createElement(PopperTooltip, { offset: [0, 5], referenceElement: referenceElement, visible: tooltipVisible }, linkPreview.og_scrape_url),
+        React.createElement("div", { className: 'str-chat__link-preview-card__icon-container', onMouseEnter: handleEnter, onMouseLeave: handleLeave, ref: setReferenceElement },
+            React.createElement(LinkIcon, null)),
+        React.createElement("div", { className: 'str-chat__link-preview-card__content' },
+            React.createElement("div", { className: 'str-chat__link-preview-card__content-title' }, linkPreview.title),
+            React.createElement("div", { className: 'str-chat__link-preview-card__content-description' }, linkPreview.text)),
+        React.createElement("button", { className: 'str-chat__link-preview-card__dismiss-button', "data-testid": 'link-preview-card-dismiss-btn', onClick: function () { return dismissLinkPreview(linkPreview); } },
+            React.createElement(CloseIcon, null))));
+};

package/dist/components/MessageInput/MessageInput.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
 import type { Message } from 'stream-chat';
-import { FileUpload, ImageUpload } from './hooks/useMessageInputState';
 import { StreamMessage } from '../../context/ChannelStateContext';
 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 declare type MessageInputProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger> = {
     /** Additional props to be passed to the underlying `AutoCompleteTextarea` component, [available props](https://www.npmjs.com/package/react-textarea-autosize) */
     additionalTextareaProps?: React.TextareaHTMLAttributes<HTMLTextAreaElement>;
@@ -44,7 +45,7 @@ export declare type MessageInputProps<StreamChatGenerics extends DefaultStreamCh
     /** If true, disables file uploads for all attachments except for those with type 'image'. Default: false */
     noFiles?: boolean;
     /** Function to override the default submit handler */
-    overrideSubmitHandler?: (message: MessageToSend<StreamChatGenerics>, channelCid: string, customMessageData?: Partial<Message<StreamChatGenerics>>) => Promise<void> | void;
+    overrideSubmitHandler?: (message: MessageToSend<StreamChatGenerics>, channelCid: string, customMessageData?: Partial<Message<StreamChatGenerics>>, options?: SendMessageOptions) => Promise<void> | void;
     /** When replying in a thread, the parent message object */
     parent?: StreamMessage<StreamChatGenerics>;
     /** If true, triggers typing events on text input keystroke */
@@ -60,6 +61,8 @@ export declare type MessageInputProps<StreamChatGenerics extends DefaultStreamCh
      * ```
      */
     shouldSubmit?: (event: KeyboardEvent) => boolean;
+    /** Configuration parameters for link previews. */
+    urlEnrichmentConfig?: URLEnrichmentConfig;
     useMentionsTransliteration?: boolean;
 };
 /**

package/dist/components/MessageInput/MessageInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageInput.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/MessageInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"MessageInput.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/MessageInput.tsx"],"names":[],"mappings":"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"}

package/dist/components/MessageInput/MessageInput.js

@@ -1,14 +1,4 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
+import { __assign } from "tslib";
 import React from 'react';
 import { DefaultTriggerProvider } from './DefaultTriggerProvider';
 import { MessageInputFlat } from './MessageInputFlat';

package/dist/components/MessageInput/MessageInputFlat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageInputFlat.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/MessageInputFlat.tsx"],"names":[],"mappings":"AAiCA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAGnE,eAAO,MAAM,gBAAgB,qGA8B5B,CAAC"}
+{"version":3,"file":"MessageInputFlat.d.ts","sourceRoot":"","sources":["../../../src/components/MessageInput/MessageInputFlat.tsx"],"names":[],"mappings":"AAkCA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAGnE,eAAO,MAAM,gBAAgB,qGA8B5B,CAAC"}

package/dist/components/MessageInput/MessageInputFlat.js

@@ -1,16 +1,6 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
+import { __assign } from "tslib";
 import React, { useEffect, useMemo, useState } from 'react';
-import { FileUploadButton, ImageDropzone, UploadButton } from 'react-file-utils';
+import { FileUploadButton, ImageDropzone, UploadButton } from '../ReactFileUtilities';
 import clsx from 'clsx';
 import { usePopper } from 'react-popper';
 import { useDropzone } from 'react-dropzone';
@@ -18,7 +8,8 @@ import { nanoid } from 'nanoid';
 import { EmojiPicker } from './EmojiPicker';
 import { EmojiIconLarge as DefaultEmojiIcon, EmojiPickerIcon as DefaultEmojiPickerIcon, FileUploadIconFlat as DefaultFileUploadIcon, SendButton as DefaultSendButton, UploadIcon as DefaultUploadIcon, } from './icons';
 import { QuotedMessagePreview as DefaultQuotedMessagePreview, QuotedMessagePreviewHeader, } from './QuotedMessagePreview';
-import { AttachmentPreviewList } from './AttachmentPreviewList';
+import { AttachmentPreviewList as DefaultAttachmentPreviewList } from './AttachmentPreviewList';
+import { LinkPreviewList as DefaultLinkPreviewList } from './LinkPreviewList';
 import { UploadsPreview } from './UploadsPreview';
 import { ChatAutoComplete } from '../ChatAutoComplete/ChatAutoComplete';
 import { Tooltip } from '../Tooltip/Tooltip';
@@ -57,7 +48,7 @@ var MessageInputV1 = function () {
     var _a = useChannelStateContext('MessageInputFlat'), acceptedFiles = _a.acceptedFiles, multipleUploads = _a.multipleUploads, quotedMessage = _a.quotedMessage;
     var t = useTranslationContext('MessageInputFlat').t;
     var _b = useMessageInputContext('MessageInputFlat'), closeEmojiPicker = _b.closeEmojiPicker, cooldownRemaining = _b.cooldownRemaining, emojiPickerIsOpen = _b.emojiPickerIsOpen, handleSubmit = _b.handleSubmit, isUploadEnabled = _b.isUploadEnabled, maxFilesLeft = _b.maxFilesLeft, numberOfUploads = _b.numberOfUploads, openEmojiPicker = _b.openEmojiPicker, setCooldownRemaining = _b.setCooldownRemaining, uploadNewFiles = _b.uploadNewFiles;
-    var _c = useComponentContext('MessageInputFlat'), _d = _c.CooldownTimer, CooldownTimer = _d === void 0 ? DefaultCooldownTimer : _d, _e = _c.EmojiIcon, EmojiIcon = _e === void 0 ? DefaultEmojiIcon : _e, _f = _c.FileUploadIcon, FileUploadIcon = _f === void 0 ? DefaultFileUploadIcon : _f, _g = _c.QuotedMessagePreview, QuotedMessagePreview = _g === void 0 ? DefaultQuotedMessagePreview : _g, _h = _c.SendButton, SendButton = _h === void 0 ? DefaultSendButton : _h;
+    var _c = useComponentContext('MessageInputFlat'), _d = _c.CooldownTimer, CooldownTimer = _d === void 0 ? DefaultCooldownTimer : _d, _e = _c.EmojiIcon, EmojiIcon = _e === void 0 ? DefaultEmojiIcon : _e, _f = _c.FileUploadIcon, FileUploadIcon = _f === void 0 ? DefaultFileUploadIcon : _f, _g = _c.QuotedMessagePreview, QuotedMessagePreview = _g === void 0 ? DefaultQuotedMessagePreview : _g, _h = _c.SendButton, SendButton = _h === void 0 ? DefaultSendButton : _h, _j = _c.AttachmentPreviewList, AttachmentPreviewList = _j === void 0 ? UploadsPreview : _j;
     return (React.createElement("div", { className: clsx('str-chat__input-flat', 'str-chat__message-input', {
             'str-chat__input-flat--send-button-active': !!SendButton,
             'str-chat__input-flat-has-attachments': numberOfUploads,
@@ -66,7 +57,7 @@ var MessageInputV1 = function () {
         React.createElement(ImageDropzone, { accept: acceptedFiles, disabled: !isUploadEnabled || maxFilesLeft === 0 || !!cooldownRemaining, handleFiles: uploadNewFiles, maxNumberOfFiles: maxFilesLeft, multiple: multipleUploads },
             quotedMessage && !quotedMessage.parent_id && (React.createElement(QuotedMessagePreview, { quotedMessage: quotedMessage })),
             React.createElement("div", { className: 'str-chat__input-flat-wrapper' },
-                isUploadEnabled && React.createElement(UploadsPreview, null),
+                isUploadEnabled && React.createElement(AttachmentPreviewList, null),
                 React.createElement("div", { className: 'str-chat__input-flat--textarea-wrapper' },
                     React.createElement("div", { className: 'str-chat__emojiselect-wrapper' },
                         React.createElement(Tooltip, null, emojiPickerIsOpen
@@ -88,13 +79,13 @@ var MessageInputV1 = function () {
 var MessageInputV2 = function () {
     var _a = useChannelStateContext('MessageInputV2'), _b = _a.acceptedFiles, acceptedFiles = _b === void 0 ? [] : _b, multipleUploads = _a.multipleUploads, quotedMessage = _a.quotedMessage;
     var t = useTranslationContext('MessageInputV2').t;
-    var _c = useMessageInputContext('MessageInputV2'), closeEmojiPicker = _c.closeEmojiPicker, cooldownRemaining = _c.cooldownRemaining, emojiPickerIsOpen = _c.emojiPickerIsOpen, handleSubmit = _c.handleSubmit, isUploadEnabled = _c.isUploadEnabled, maxFilesLeft = _c.maxFilesLeft, message = _c.message, numberOfUploads = _c.numberOfUploads, openEmojiPicker = _c.openEmojiPicker, setCooldownRemaining = _c.setCooldownRemaining, text = _c.text, uploadNewFiles = _c.uploadNewFiles;
-    var _d = useComponentContext('MessageInputV2'), _e = _d.CooldownTimer, CooldownTimer = _e === void 0 ? DefaultCooldownTimer : _e, _f = _d.EmojiIcon, EmojiIcon = _f === void 0 ? DefaultEmojiPickerIcon : _f, _g = _d.FileUploadIcon, FileUploadIcon = _g === void 0 ? DefaultUploadIcon : _g, _h = _d.QuotedMessagePreview, QuotedMessagePreview = _h === void 0 ? DefaultQuotedMessagePreview : _h, _j = _d.SendButton, SendButton = _j === void 0 ? DefaultSendButton : _j;
-    var _k = useState(null), referenceElement = _k[0], setReferenceElement = _k[1];
-    var _l = useState(null), popperElement = _l[0], setPopperElement = _l[1];
-    var _m = usePopper(referenceElement, popperElement, {
+    var _c = useMessageInputContext('MessageInputV2'), closeEmojiPicker = _c.closeEmojiPicker, cooldownRemaining = _c.cooldownRemaining, emojiPickerIsOpen = _c.emojiPickerIsOpen, findAndEnqueueURLsToEnrich = _c.findAndEnqueueURLsToEnrich, handleSubmit = _c.handleSubmit, isUploadEnabled = _c.isUploadEnabled, linkPreviews = _c.linkPreviews, maxFilesLeft = _c.maxFilesLeft, message = _c.message, numberOfUploads = _c.numberOfUploads, openEmojiPicker = _c.openEmojiPicker, setCooldownRemaining = _c.setCooldownRemaining, text = _c.text, uploadNewFiles = _c.uploadNewFiles;
+    var _d = useComponentContext('MessageInputV2'), _e = _d.AttachmentPreviewList, AttachmentPreviewList = _e === void 0 ? DefaultAttachmentPreviewList : _e, _f = _d.CooldownTimer, CooldownTimer = _f === void 0 ? DefaultCooldownTimer : _f, _g = _d.EmojiIcon, EmojiIcon = _g === void 0 ? DefaultEmojiPickerIcon : _g, _h = _d.FileUploadIcon, FileUploadIcon = _h === void 0 ? DefaultUploadIcon : _h, _j = _d.LinkPreviewList, LinkPreviewList = _j === void 0 ? DefaultLinkPreviewList : _j, _k = _d.QuotedMessagePreview, QuotedMessagePreview = _k === void 0 ? DefaultQuotedMessagePreview : _k, _l = _d.SendButton, SendButton = _l === void 0 ? DefaultSendButton : _l;
+    var _m = useState(null), referenceElement = _m[0], setReferenceElement = _m[1];
+    var _o = useState(null), popperElement = _o[0], setPopperElement = _o[1];
+    var _p = usePopper(referenceElement, popperElement, {
         placement: 'top-end',
-    }), attributes = _m.attributes, styles = _m.styles;
+    }), attributes = _p.attributes, styles = _p.styles;
     var id = useMemo(function () { return nanoid(); }, []);
     var accept = useMemo(function () {
         return acceptedFiles.reduce(function (mediaTypeMap, mediaType) {
@@ -103,18 +94,19 @@ var MessageInputV2 = function () {
             return mediaTypeMap;
         }, {});
     }, [acceptedFiles]);
-    var _o = useDropzone({
+    var _q = useDropzone({
         accept: accept,
         disabled: !isUploadEnabled || maxFilesLeft === 0,
         multiple: multipleUploads,
         noClick: true,
         onDrop: uploadNewFiles,
-    }), getRootProps = _o.getRootProps, isDragActive = _o.isDragActive, isDragReject = _o.isDragReject;
+    }), getRootProps = _q.getRootProps, isDragActive = _q.isDragActive, isDragReject = _q.isDragReject;
     // TODO: "!message" condition is a temporary fix for shared
     // state when editing a message (fix shared state issue)
     var displayQuotedMessage = !message && quotedMessage && !quotedMessage.parent_id;
     return (React.createElement(React.Fragment, null,
         React.createElement("div", __assign({}, getRootProps({ className: 'str-chat__message-input' })),
+            findAndEnqueueURLsToEnrich && (React.createElement(LinkPreviewList, { linkPreviews: Array.from(linkPreviews.values()) })),
             isDragActive && (React.createElement("div", { className: clsx('str-chat__dropzone-container', {
                     'str-chat__dropzone-container--not-accepted': isDragReject,
                 }) },

package/dist/components/MessageInput/MessageInputSmall.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { FileUploadButton, ImageDropzone } from 'react-file-utils';
+import { FileUploadButton, ImageDropzone } from '../ReactFileUtilities';
 import { EmojiPicker } from './EmojiPicker';
 import { EmojiIconSmall as DefaultEmojiIcon, FileUploadIconFlat as DefaultFileUploadIcon, SendButton as DefaultSendButton, } from './icons';
 import { UploadsPreview } from './UploadsPreview';

package/dist/components/MessageInput/UploadsPreview.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FilePreviewer, ImagePreviewer } from 'react-file-utils';
+import { FilePreviewer, ImagePreviewer } from '../ReactFileUtilities';
 import { useChannelStateContext } from '../../context/ChannelStateContext';
 import { useMessageInputContext } from '../../context/MessageInputContext';
 import { useChatContext } from '../../context';

package/dist/components/MessageInput/hooks/useAttachments.d.ts

@@ -1,4 +1,4 @@
-import type { FileLike } from 'react-file-utils';
+import type { FileLike } from '../../ReactFileUtilities';
 import type { MessageInputProps } from '../MessageInput';
 import type { MessageInputReducerAction, MessageInputState } from './useMessageInputState';
 import type { CustomTrigger, DefaultStreamChatGenerics } from '../../../types/types';

package/dist/components/MessageInput/hooks/useAttachments.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAttachments.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageInput/hooks/useAttachments.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEjD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,KAAK,EAAE,yBAAyB,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3F,OAAO,KAAK,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAIrF,eAAO,MAAM,cAAc,6TAOZ,MAAM,gBAAgB,CAAC,mBAAmB,GAAG,SAAS,CAAC;;;;;;;4BA+B1D,QAAQ,GAAG,IAAI,EAAE,GAAG,QAAQ,EAAE;CAoCzC,CAAC"}
+{"version":3,"file":"useAttachments.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageInput/hooks/useAttachments.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAEzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,KAAK,EAAE,yBAAyB,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3F,OAAO,KAAK,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAIrF,eAAO,MAAM,cAAc,6TAOZ,MAAM,gBAAgB,CAAC,mBAAmB,GAAG,SAAS,CAAC;;;;;;;4BA+B1D,QAAQ,GAAG,IAAI,EAAE,GAAG,QAAQ,EAAE;CAoCzC,CAAC"}

package/dist/components/MessageInput/hooks/useCooldownTimer.js

@@ -1,12 +1,4 @@
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
+import { __spreadArray } from "tslib";
 import { useEffect, useMemo, useState } from 'react';
 import { useChannelStateContext, useChatContext } from '../../../context';
 export var useCooldownTimer = function () {

package/dist/components/MessageInput/hooks/useCreateMessageInputContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCreateMessageInputContext.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageInput/hooks/useCreateMessageInputContext.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sCAAsC,CAAC;AACrF,OAAO,KAAK,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAErF,eAAO,MAAM,4BAA4B,wOA+JxC,CAAC"}
+{"version":3,"file":"useCreateMessageInputContext.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageInput/hooks/useCreateMessageInputContext.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,sCAAsC,CAAC;AACrF,OAAO,KAAK,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAErF,eAAO,MAAM,4BAA4B,wOA4KxC,CAAC"}

package/dist/components/MessageInput/hooks/useCreateMessageInputContext.js

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 export var useCreateMessageInputContext = function (value) {
-    var additionalTextareaProps = value.additionalTextareaProps, attachments = value.attachments, autocompleteTriggers = value.autocompleteTriggers, clearEditingState = value.clearEditingState, closeCommandsList = value.closeCommandsList, closeEmojiPicker = value.closeEmojiPicker, closeMentionsList = value.closeMentionsList, cooldownInterval = value.cooldownInterval, cooldownRemaining = value.cooldownRemaining, disabled = value.disabled, disableMentions = value.disableMentions, doFileUploadRequest = value.doFileUploadRequest, doImageUploadRequest = value.doImageUploadRequest, emojiIndex = value.emojiIndex, emojiPickerIsOpen = value.emojiPickerIsOpen, emojiPickerRef = value.emojiPickerRef, errorHandler = value.errorHandler, fileOrder = value.fileOrder, fileUploads = value.fileUploads, focus = value.focus, grow = value.grow, handleChange = value.handleChange, handleEmojiKeyDown = value.handleEmojiKeyDown, handleSubmit = value.handleSubmit, imageOrder = value.imageOrder, imageUploads = value.imageUploads, insertText = value.insertText, isUploadEnabled = value.isUploadEnabled, maxFilesLeft = value.maxFilesLeft, maxRows = value.maxRows, mentionAllAppUsers = value.mentionAllAppUsers, mentioned_users = value.mentioned_users, mentionQueryParams = value.mentionQueryParams, message = value.message, noFiles = value.noFiles, numberOfUploads = value.numberOfUploads, onPaste = value.onPaste, onSelectEmoji = value.onSelectEmoji, onSelectUser = value.onSelectUser, openCommandsList = value.openCommandsList, openEmojiPicker = value.openEmojiPicker, openMentionsList = value.openMentionsList, overrideSubmitHandler = value.overrideSubmitHandler, parent = value.parent, publishTypingEvent = value.publishTypingEvent, removeFile = value.removeFile, removeImage = value.removeImage, setCooldownRemaining = value.setCooldownRemaining, setText = value.setText, shouldSubmit = value.shouldSubmit, showCommandsList = value.showCommandsList, showMentionsList = value.showMentionsList, text = value.text, textareaRef = value.textareaRef, uploadFile = value.uploadFile, uploadImage = value.uploadImage, uploadNewFiles = value.uploadNewFiles, useMentionsTransliteration = value.useMentionsTransliteration;
+    var additionalTextareaProps = value.additionalTextareaProps, attachments = value.attachments, autocompleteTriggers = value.autocompleteTriggers, cancelURLEnrichment = value.cancelURLEnrichment, clearEditingState = value.clearEditingState, closeCommandsList = value.closeCommandsList, closeEmojiPicker = value.closeEmojiPicker, closeMentionsList = value.closeMentionsList, cooldownInterval = value.cooldownInterval, cooldownRemaining = value.cooldownRemaining, disabled = value.disabled, disableMentions = value.disableMentions, dismissLinkPreview = value.dismissLinkPreview, doFileUploadRequest = value.doFileUploadRequest, doImageUploadRequest = value.doImageUploadRequest, emojiIndex = value.emojiIndex, emojiPickerIsOpen = value.emojiPickerIsOpen, emojiPickerRef = value.emojiPickerRef, errorHandler = value.errorHandler, fileOrder = value.fileOrder, fileUploads = value.fileUploads, findAndEnqueueURLsToEnrich = value.findAndEnqueueURLsToEnrich, focus = value.focus, grow = value.grow, handleChange = value.handleChange, handleEmojiKeyDown = value.handleEmojiKeyDown, handleSubmit = value.handleSubmit, imageOrder = value.imageOrder, imageUploads = value.imageUploads, insertText = value.insertText, isUploadEnabled = value.isUploadEnabled, linkPreviews = value.linkPreviews, maxFilesLeft = value.maxFilesLeft, maxRows = value.maxRows, mentionAllAppUsers = value.mentionAllAppUsers, mentioned_users = value.mentioned_users, mentionQueryParams = value.mentionQueryParams, message = value.message, noFiles = value.noFiles, numberOfUploads = value.numberOfUploads, onPaste = value.onPaste, onSelectEmoji = value.onSelectEmoji, onSelectUser = value.onSelectUser, openCommandsList = value.openCommandsList, openEmojiPicker = value.openEmojiPicker, openMentionsList = value.openMentionsList, overrideSubmitHandler = value.overrideSubmitHandler, parent = value.parent, publishTypingEvent = value.publishTypingEvent, removeFile = value.removeFile, removeImage = value.removeImage, setCooldownRemaining = value.setCooldownRemaining, setText = value.setText, shouldSubmit = value.shouldSubmit, showCommandsList = value.showCommandsList, showMentionsList = value.showMentionsList, text = value.text, textareaRef = value.textareaRef, uploadFile = value.uploadFile, uploadImage = value.uploadImage, uploadNewFiles = value.uploadNewFiles, useMentionsTransliteration = value.useMentionsTransliteration;
     var editing = message === null || message === void 0 ? void 0 : message.editing;
     var fileUploadsValue = Object.entries(fileUploads)
         // eslint-disable-next-line
@@ -16,12 +16,14 @@ export var useCreateMessageInputContext = function (value) {
         return value.state;
     })
         .join();
+    var linkPreviewsValue = Array.from(linkPreviews.values()).join();
     var mentionedUsersLength = mentioned_users.length;
     var parentId = parent === null || parent === void 0 ? void 0 : parent.id;
     var messageInputContext = useMemo(function () { return ({
         additionalTextareaProps: additionalTextareaProps,
         attachments: attachments,
         autocompleteTriggers: autocompleteTriggers,
+        cancelURLEnrichment: cancelURLEnrichment,
         clearEditingState: clearEditingState,
         closeCommandsList: closeCommandsList,
         closeEmojiPicker: closeEmojiPicker,
@@ -30,6 +32,7 @@ export var useCreateMessageInputContext = function (value) {
         cooldownRemaining: cooldownRemaining,
         disabled: disabled,
         disableMentions: disableMentions,
+        dismissLinkPreview: dismissLinkPreview,
         doFileUploadRequest: doFileUploadRequest,
         doImageUploadRequest: doImageUploadRequest,
         emojiIndex: emojiIndex,
@@ -38,6 +41,7 @@ export var useCreateMessageInputContext = function (value) {
         errorHandler: errorHandler,
         fileOrder: fileOrder,
         fileUploads: fileUploads,
+        findAndEnqueueURLsToEnrich: findAndEnqueueURLsToEnrich,
         focus: focus,
         grow: grow,
         handleChange: handleChange,
@@ -47,6 +51,7 @@ export var useCreateMessageInputContext = function (value) {
         imageUploads: imageUploads,
         insertText: insertText,
         isUploadEnabled: isUploadEnabled,
+        linkPreviews: linkPreviews,
         maxFilesLeft: maxFilesLeft,
         maxRows: maxRows,
         mentionAllAppUsers: mentionAllAppUsers,
@@ -78,13 +83,17 @@ export var useCreateMessageInputContext = function (value) {
         uploadNewFiles: uploadNewFiles,
         useMentionsTransliteration: useMentionsTransliteration,
     }); }, [
+        cancelURLEnrichment,
         cooldownInterval,
         cooldownRemaining,
+        dismissLinkPreview,
         editing,
         emojiPickerIsOpen,
         fileUploadsValue,
+        findAndEnqueueURLsToEnrich,
         imageUploadsValue,
         isUploadEnabled,
+        linkPreviewsValue,
         mentionedUsersLength,
         parentId,
         publishTypingEvent,

package/dist/components/MessageInput/hooks/useFileState.d.ts

@@ -1,4 +1,4 @@
-import type { FileUpload } from './useMessageInputState';
+import type { FileUpload } from '../types';
 export declare const useFileState: <T extends Pick<FileUpload, "state">>(file: T) => {
     failed: boolean;
     finished: boolean;

package/dist/components/MessageInput/hooks/useFileState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFileState.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageInput/hooks/useFileState.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEzD,eAAO,MAAM,YAAY;;;;CAQtB,CAAC"}
+{"version":3,"file":"useFileState.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageInput/hooks/useFileState.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE3C,eAAO,MAAM,YAAY;;;;CAQtB,CAAC"}

package/dist/components/MessageInput/hooks/useFileUploads.js

@@ -1,39 +1,4 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
+import { __awaiter, __generator } from "tslib";
 import { useCallback, useEffect } from 'react';
 import { checkUploadPermissions } from './utils';
 import { useChannelActionContext } from '../../../context/ChannelActionContext';

package/dist/components/MessageInput/hooks/useImageUploads.js

@@ -1,50 +1,4 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
+import { __assign, __awaiter, __generator } from "tslib";
 import { useCallback, useEffect } from 'react';
 import { checkUploadPermissions } from './utils';
 import { useChannelActionContext } from '../../../context/ChannelActionContext';

package/dist/components/MessageInput/hooks/useLinkPreviews.d.ts

@@ -0,0 +1,31 @@
+import { Dispatch } from 'react';
+import type { MessageInputReducerAction, MessageInputState } from './useMessageInputState';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+import type { LinkPreview } from '../types';
+import { SetLinkPreviewMode } from '../types';
+import type { DebouncedFunc } from 'lodash';
+export declare 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;
+};
+declare type UseEnrichURLsParams<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = URLEnrichmentConfig & {
+    dispatch: Dispatch<MessageInputReducerAction<StreamChatGenerics>>;
+    linkPreviews: MessageInputState<StreamChatGenerics>['linkPreviews'];
+};
+export declare 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 declare const useLinkPreviews: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ debounceURLEnrichmentMs: debounceURLEnrichmentMsInputContext, dispatch, enrichURLForPreview, findURLFn: findURLFnInputContext, linkPreviews, onLinkPreviewDismissed: onLinkPreviewDismissedInputContext, }: UseEnrichURLsParams<StreamChatGenerics>) => EnrichURLsController;
+export {};
+//# sourceMappingURL=useLinkPreviews.d.ts.map

package/dist/components/MessageInput/hooks/useLinkPreviews.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLinkPreviews.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageInput/hooks/useLinkPreviews.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAkC,MAAM,OAAO,CAAC;AAGjE,OAAO,KAAK,EAAE,yBAAyB,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3F,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AACtE,OAAO,KAAK,EAAE,WAAW,EAAkB,MAAM,UAAU,CAAC;AAC5D,OAAO,EAAoB,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAChE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE5C,oBAAY,mBAAmB,GAAG;IAChC,uHAAuH;IACvH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,uHAAuH;IACvH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,uEAAuE;IACvE,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,EAAE,CAAC;IACvC,yDAAyD;IACzD,sBAAsB,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,CAAC;CAC7D,CAAC;AAEF,aAAK,mBAAmB,CACtB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,mBAAmB,GAAG;IACxB,QAAQ,EAAE,QAAQ,CAAC,yBAAyB,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAClE,YAAY,EAAE,iBAAiB,CAAC,kBAAkB,CAAC,CAAC,cAAc,CAAC,CAAC;CACrE,CAAC;AAEF,oBAAY,oBAAoB,GAAG;IACjC,qGAAqG;IACrG,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,+DAA+D;IAC/D,kBAAkB,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,CAAC;IACvD,uEAAuE;IACvE,0BAA0B,CAAC,EAAE,aAAa,CAAC,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,kBAAkB,KAAK,IAAI,CAAC,CAAC;CAC/F,CAAC;AAEF,eAAO,MAAM,eAAe,+UASiB,oBAiI5C,CAAC"}

package/dist/components/MessageInput/hooks/useLinkPreviews.js

@@ -0,0 +1,99 @@
+import { __assign, __rest } from "tslib";
+import { find } from 'linkifyjs';
+import { useCallback, useEffect, useRef } from 'react';
+import debounce from 'lodash.debounce';
+import { useChannelStateContext, useChatContext } from '../../../context';
+import { LinkPreviewState, SetLinkPreviewMode } from '../types';
+export var useLinkPreviews = function (_a) {
+    var _b;
+    var debounceURLEnrichmentMsInputContext = _a.debounceURLEnrichmentMs, dispatch = _a.dispatch, _c = _a.enrichURLForPreview, enrichURLForPreview = _c === void 0 ? false : _c, findURLFnInputContext = _a.findURLFn, linkPreviews = _a.linkPreviews, onLinkPreviewDismissedInputContext = _a.onLinkPreviewDismissed;
+    var client = useChatContext().client;
+    // FIXME: the value of channelConfig is stale due to omitting it from the memoization deps in useCreateChannelStateContext
+    var _d = useChannelStateContext(), channelConfig = _d.channelConfig, debounceURLEnrichmentMsChannelContext = _d.debounceURLEnrichmentMs, findURLFnChannelContext = _d.findURLFn, onLinkPreviewDismissedChannelContext = _d.onLinkPreviewDismissed;
+    var shouldDiscardEnrichQueries = useRef(false);
+    var findURLFn = findURLFnInputContext !== null && findURLFnInputContext !== void 0 ? findURLFnInputContext : findURLFnChannelContext;
+    var onLinkPreviewDismissed = onLinkPreviewDismissedInputContext !== null && onLinkPreviewDismissedInputContext !== void 0 ? onLinkPreviewDismissedInputContext : onLinkPreviewDismissedChannelContext;
+    var debounceURLEnrichmentMs = (_b = debounceURLEnrichmentMsInputContext !== null && debounceURLEnrichmentMsInputContext !== void 0 ? debounceURLEnrichmentMsInputContext : debounceURLEnrichmentMsChannelContext) !== null && _b !== void 0 ? _b : 1500;
+    var dismissLinkPreview = useCallback(function (linkPreview) {
+        onLinkPreviewDismissed === null || onLinkPreviewDismissed === void 0 ? void 0 : onLinkPreviewDismissed(linkPreview);
+        var previewToRemoveMap = new Map();
+        linkPreview.state = LinkPreviewState.DISMISSED;
+        previewToRemoveMap.set(linkPreview.og_scrape_url, linkPreview);
+        dispatch({
+            linkPreviews: previewToRemoveMap,
+            mode: SetLinkPreviewMode.UPSERT,
+            type: 'setLinkPreviews',
+        });
+    }, [onLinkPreviewDismissed]);
+    var findAndEnqueueURLsToEnrich = useCallback(debounce(function (text, mode) {
+        if (mode === void 0) { mode = SetLinkPreviewMode.SET; }
+        var urls = findURLFn
+            ? findURLFn(text)
+            : find(text, 'url').reduce(function (acc, link) {
+                if (link.isLink)
+                    acc.push(link.href);
+                return acc;
+            }, []);
+        shouldDiscardEnrichQueries.current = urls.length === 0;
+        dispatch({
+            linkPreviews: urls.reduce(function (acc, url) {
+                acc.set(url, { og_scrape_url: url, state: LinkPreviewState.QUEUED });
+                return acc;
+            }, new Map()),
+            mode: mode,
+            type: 'setLinkPreviews',
+        });
+    }, debounceURLEnrichmentMs, { leading: false, trailing: true }), [debounceURLEnrichmentMs, shouldDiscardEnrichQueries, findURLFn]);
+    var cancelURLEnrichment = useCallback(function () {
+        findAndEnqueueURLsToEnrich.cancel();
+        findAndEnqueueURLsToEnrich('');
+        findAndEnqueueURLsToEnrich.flush();
+    }, [findAndEnqueueURLsToEnrich]);
+    useEffect(function () {
+        var enqueuedLinks = Array.from(linkPreviews.values()).reduce(function (acc, linkPreview) {
+            if (linkPreview.state === 'queued') {
+                var loadingLinkPreview = __assign(__assign({}, 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(function (linkPreview) {
+            client
+                .enrichURL(linkPreview.og_scrape_url)
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                .then(function (_a) {
+                var duration = _a.duration, ogAttachment = __rest(_a, ["duration"]);
+                if (shouldDiscardEnrichQueries.current)
+                    return;
+                var linkPreviewsMap = new Map();
+                linkPreviewsMap.set(linkPreview.og_scrape_url, __assign(__assign({}, ogAttachment), { state: LinkPreviewState.LOADED }));
+                dispatch({
+                    linkPreviews: linkPreviewsMap,
+                    mode: SetLinkPreviewMode.UPSERT,
+                    type: 'setLinkPreviews',
+                });
+            })
+                .catch(function () {
+                var linkPreviewsMap = new Map();
+                linkPreviewsMap.set(linkPreview.og_scrape_url, __assign(__assign({}, linkPreview), { state: LinkPreviewState.FAILED }));
+                dispatch({
+                    linkPreviews: linkPreviewsMap,
+                    mode: SetLinkPreviewMode.UPSERT,
+                    type: 'setLinkPreviews',
+                });
+            });
+        });
+    }, [shouldDiscardEnrichQueries, linkPreviews]);
+    return {
+        cancelURLEnrichment: cancelURLEnrichment,
+        dismissLinkPreview: dismissLinkPreview,
+        findAndEnqueueURLsToEnrich: (channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.url_enrichment) && enrichURLForPreview ? findAndEnqueueURLsToEnrich : undefined,
+    };
+};