stream-chat-react 11.21.0 → 12.0.0-rc.1

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

@@ -1,4 +1,3 @@
-import { __assign, __awaiter, __generator, __rest } from "tslib";
 import { useCallback } from 'react';
 import { nanoid } from 'nanoid';
 import { useImageUploads } from './useImageUploads';
@@ -6,69 +5,67 @@ import { useFileUploads } from './useFileUploads';
 import { checkUploadPermissions } from './utils';
 import { isLocalAttachment, isLocalImageAttachment, isUploadedImage } from '../../Attachment';
 import { useChannelActionContext, useChannelStateContext, useChatContext, useTranslationContext, } from '../../../context';
-var apiMaxNumberOfFiles = 10;
-var ensureIsLocalAttachment = function (attachment) {
+const apiMaxNumberOfFiles = 10;
+const ensureIsLocalAttachment = (attachment) => {
     if (isLocalAttachment(attachment)) {
         return attachment;
     }
-    var localMetadata = attachment.localMetadata, rest = __rest(attachment, ["localMetadata"]);
-    return __assign({ localMetadata: __assign(__assign({}, (localMetadata !== null && localMetadata !== void 0 ? localMetadata : {})), { id: (localMetadata === null || localMetadata === void 0 ? void 0 : localMetadata.id) || nanoid() }) }, rest);
+    const { localMetadata, ...rest } = attachment;
+    return {
+        localMetadata: {
+            ...(localMetadata ?? {}),
+            id: localMetadata?.id || nanoid(),
+        },
+        ...rest,
+    };
 };
-export var useAttachments = function (props, state, dispatch, textareaRef) {
-    var doFileUploadRequest = props.doFileUploadRequest, doImageUploadRequest = props.doImageUploadRequest, errorHandler = props.errorHandler, noFiles = props.noFiles;
-    var fileUploads = state.fileUploads, imageUploads = state.imageUploads;
-    var getAppSettings = useChatContext('useAttachments').getAppSettings;
-    var t = useTranslationContext('useAttachments').t;
-    var addNotification = useChannelActionContext('useAttachments').addNotification;
-    var _a = useChannelStateContext('useAttachments'), channel = _a.channel, maxNumberOfFiles = _a.maxNumberOfFiles, multipleUploads = _a.multipleUploads;
-    var _b = useFileUploads(props, state, dispatch), removeFile = _b.removeFile, uploadFile = _b.uploadFile;
-    var _c = useImageUploads(props, state, dispatch), removeImage = _c.removeImage, uploadImage = _c.uploadImage;
+export const useAttachments = (props, state, dispatch, textareaRef) => {
+    const { doFileUploadRequest, doImageUploadRequest, errorHandler, noFiles } = props;
+    const { fileUploads, imageUploads } = state;
+    const { getAppSettings } = useChatContext('useAttachments');
+    const { t } = useTranslationContext('useAttachments');
+    const { addNotification } = useChannelActionContext('useAttachments');
+    const { channel, maxNumberOfFiles, multipleUploads } = useChannelStateContext('useAttachments');
+    const { removeFile, uploadFile } = useFileUploads(props, state, dispatch);
+    const { removeImage, uploadImage } = useImageUploads(props, state, dispatch);
     // Number of files that the user can still add. Should never be more than the amount allowed by the API.
     // If multipleUploads is false, we only want to allow a single upload.
-    var maxFilesAllowed = !multipleUploads ? 1 : maxNumberOfFiles || apiMaxNumberOfFiles;
+    const maxFilesAllowed = !multipleUploads ? 1 : maxNumberOfFiles || apiMaxNumberOfFiles;
     // OG attachments should not be counted towards "numberOfImages"
-    var numberOfImages = Object.values(imageUploads).filter(function (_a) {
-        var og_scrape_url = _a.og_scrape_url, state = _a.state;
-        return state !== 'failed' && !og_scrape_url;
-    }).length;
-    var numberOfFiles = Object.values(fileUploads).filter(function (_a) {
-        var state = _a.state;
-        return state !== 'failed';
-    }).length;
-    var numberOfUploads = numberOfImages + numberOfFiles;
-    var maxFilesLeft = maxFilesAllowed - numberOfUploads;
-    var uploadNewFiles = useCallback(function (files) {
-        var _a;
+    const numberOfImages = Object.values(imageUploads).filter(({ og_scrape_url, state }) => state !== 'failed' && !og_scrape_url).length;
+    const numberOfFiles = Object.values(fileUploads).filter(({ state }) => state !== 'failed').length;
+    const numberOfUploads = numberOfImages + numberOfFiles;
+    const maxFilesLeft = maxFilesAllowed - numberOfUploads;
+    const uploadNewFiles = useCallback((files) => {
         Array.from(files)
             .slice(0, maxFilesLeft)
-            .forEach(function (file) {
-            var _a;
-            var id = nanoid();
+            .forEach((file) => {
+            const id = nanoid();
             if (file.type.startsWith('image/') &&
                 !file.type.endsWith('.photoshop') // photoshop files begin with 'image/'
             ) {
                 dispatch({
-                    file: file,
-                    id: id,
-                    previewUri: (_a = URL.createObjectURL) === null || _a === void 0 ? void 0 : _a.call(URL, file),
+                    file,
+                    id,
+                    previewUri: URL.createObjectURL?.(file),
                     state: 'uploading',
                     type: 'setImageUpload',
                 });
             }
             else if (file instanceof File && !noFiles) {
-                dispatch({ file: file, id: id, state: 'uploading', type: 'setFileUpload' });
+                dispatch({ file, id, state: 'uploading', type: 'setFileUpload' });
             }
         });
-        (_a = textareaRef === null || textareaRef === void 0 ? void 0 : textareaRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        textareaRef?.current?.focus();
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [maxFilesLeft, noFiles]);
-    var removeAttachments = useCallback(function (ids) {
+    const removeAttachments = useCallback((ids) => {
         if (!ids.length)
             return;
-        dispatch({ ids: ids, type: 'removeAttachments' });
+        dispatch({ ids, type: 'removeAttachments' });
     }, [dispatch]);
-    var upsertAttachments = useCallback(function (attachments) {
+    const upsertAttachments = useCallback((attachments) => {
         if (!attachments.length)
             return;
         dispatch({
@@ -76,91 +73,96 @@ export var useAttachments = function (props, state, dispatch, textareaRef) {
             type: 'upsertAttachments',
         });
     }, [dispatch]);
-    var uploadAttachment = useCallback(function (att) { return __awaiter(void 0, void 0, void 0, function () {
-        var localMetadata, attachment, isImage, id, file, canUpload, notificationText, response, doUploadRequest, error_1, finalError, failedAttachment, uploadedAttachment;
-        var _a;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0:
-                    localMetadata = att.localMetadata, attachment = __rest(att, ["localMetadata"]);
-                    if (!(localMetadata === null || localMetadata === void 0 ? void 0 : localMetadata.file))
-                        return [2 /*return*/, att];
-                    isImage = isUploadedImage(attachment);
-                    id = (_a = localMetadata === null || localMetadata === void 0 ? void 0 : localMetadata.id) !== null && _a !== void 0 ? _a : nanoid();
-                    file = localMetadata.file;
-                    return [4 /*yield*/, checkUploadPermissions({
-                            addNotification: addNotification,
-                            file: file,
-                            getAppSettings: getAppSettings,
-                            t: t,
-                            uploadType: isImage ? 'image' : 'file',
-                        })];
-                case 1:
-                    canUpload = _b.sent();
-                    if (!canUpload) {
-                        notificationText = t('Missing permissions to upload the attachment');
-                        console.error(new Error(notificationText));
-                        addNotification(notificationText, 'error');
-                        return [2 /*return*/, att];
-                    }
-                    upsertAttachments([
-                        __assign(__assign({}, attachment), { localMetadata: __assign(__assign({}, localMetadata), { id: id, uploadState: 'uploading' }) }),
-                    ]);
-                    _b.label = 2;
-                case 2:
-                    _b.trys.push([2, 7, , 8]);
-                    doUploadRequest = isImage ? doImageUploadRequest : doFileUploadRequest;
-                    if (!doUploadRequest) return [3 /*break*/, 4];
-                    return [4 /*yield*/, doUploadRequest(file, channel)];
-                case 3:
-                    response = _b.sent();
-                    return [3 /*break*/, 6];
-                case 4: return [4 /*yield*/, channel[isImage ? 'sendImage' : 'sendFile'](file)];
-                case 5:
-                    response = _b.sent();
-                    _b.label = 6;
-                case 6: return [3 /*break*/, 8];
-                case 7:
-                    error_1 = _b.sent();
-                    finalError = { message: t('Error uploading attachment'), name: 'Error' };
-                    if (typeof error_1.message === 'string') {
-                        finalError = error_1;
-                    }
-                    else if (typeof error_1 === 'object') {
-                        finalError = Object.assign(finalError, error_1);
-                    }
-                    console.error(finalError);
-                    addNotification(finalError.message, 'error');
-                    failedAttachment = __assign(__assign({}, attachment), { localMetadata: __assign(__assign({}, localMetadata), { uploadState: 'failed' }) });
-                    upsertAttachments([failedAttachment]);
-                    if (errorHandler) {
-                        errorHandler(finalError, 'upload-attachment', file);
-                    }
-                    return [2 /*return*/, failedAttachment];
-                case 8:
-                    if (!response) {
-                        // Copied this from useImageUpload / useFileUpload. Not sure how failure could be handled on app level.
-                        // If doUploadRequest returns any falsy value, then don't create the upload preview.
-                        // This is for the case if someone wants to handle failure on app level.
-                        removeAttachments([id]);
-                        return [2 /*return*/];
-                    }
-                    uploadedAttachment = __assign(__assign({}, attachment), { localMetadata: __assign(__assign({}, localMetadata), { uploadState: 'finished' }) });
-                    if (isLocalImageAttachment(uploadedAttachment)) {
-                        if (uploadedAttachment.localMetadata.previewUri) {
-                            URL.revokeObjectURL(uploadedAttachment.localMetadata.previewUri);
-                            delete uploadedAttachment.localMetadata.previewUri;
-                        }
-                        uploadedAttachment.image_url = response.file;
-                    }
-                    else {
-                        uploadedAttachment.asset_url = response.file;
-                    }
-                    upsertAttachments([uploadedAttachment]);
-                    return [2 /*return*/, uploadedAttachment];
-            }
+    const uploadAttachment = useCallback(async (att) => {
+        const { localMetadata, ...attachment } = att;
+        if (!localMetadata?.file)
+            return att;
+        const isImage = isUploadedImage(attachment);
+        const id = localMetadata?.id ?? nanoid();
+        const { file } = localMetadata;
+        const canUpload = await checkUploadPermissions({
+            addNotification,
+            file,
+            getAppSettings,
+            t,
+            uploadType: isImage ? 'image' : 'file',
         });
-    }); }, [
+        if (!canUpload) {
+            const notificationText = t('Missing permissions to upload the attachment');
+            console.error(new Error(notificationText));
+            addNotification(notificationText, 'error');
+            return att;
+        }
+        upsertAttachments([
+            {
+                ...attachment,
+                localMetadata: {
+                    ...localMetadata,
+                    id,
+                    uploadState: 'uploading',
+                },
+            },
+        ]);
+        let response;
+        try {
+            const doUploadRequest = isImage ? doImageUploadRequest : doFileUploadRequest;
+            if (doUploadRequest) {
+                response = await doUploadRequest(file, channel);
+            }
+            else {
+                response = await channel[isImage ? 'sendImage' : 'sendFile'](file);
+            }
+        }
+        catch (error) {
+            let finalError = { message: t('Error uploading attachment'), name: 'Error' };
+            if (typeof error.message === 'string') {
+                finalError = error;
+            }
+            else if (typeof error === 'object') {
+                finalError = Object.assign(finalError, error);
+            }
+            console.error(finalError);
+            addNotification(finalError.message, 'error');
+            const failedAttachment = {
+                ...attachment,
+                localMetadata: {
+                    ...localMetadata,
+                    uploadState: 'failed',
+                },
+            };
+            upsertAttachments([failedAttachment]);
+            if (errorHandler) {
+                errorHandler(finalError, 'upload-attachment', file);
+            }
+            return failedAttachment;
+        }
+        if (!response) {
+            // Copied this from useImageUpload / useFileUpload. Not sure how failure could be handled on app level.
+            // If doUploadRequest returns any falsy value, then don't create the upload preview.
+            // This is for the case if someone wants to handle failure on app level.
+            removeAttachments([id]);
+            return;
+        }
+        const uploadedAttachment = {
+            ...attachment,
+            localMetadata: {
+                ...localMetadata,
+                uploadState: 'finished',
+            },
+        };
+        if (isLocalImageAttachment(uploadedAttachment)) {
+            if (uploadedAttachment.localMetadata.previewUri) {
+                URL.revokeObjectURL(uploadedAttachment.localMetadata.previewUri);
+                delete uploadedAttachment.localMetadata.previewUri;
+            }
+            uploadedAttachment.image_url = response.file;
+        }
+        else {
+            uploadedAttachment.asset_url = response.file;
+        }
+        upsertAttachments([uploadedAttachment]);
+        return uploadedAttachment;
+    }, [
         addNotification,
         channel,
         doFileUploadRequest,
@@ -172,15 +174,15 @@ export var useAttachments = function (props, state, dispatch, textareaRef) {
         upsertAttachments,
     ]);
     return {
-        maxFilesLeft: maxFilesLeft,
-        numberOfUploads: numberOfUploads,
-        removeAttachments: removeAttachments,
-        removeFile: removeFile,
-        removeImage: removeImage,
-        uploadAttachment: uploadAttachment,
-        uploadFile: uploadFile,
-        uploadImage: uploadImage,
-        uploadNewFiles: uploadNewFiles,
-        upsertAttachments: upsertAttachments,
+        maxFilesLeft,
+        numberOfUploads,
+        removeAttachments,
+        removeFile,
+        removeImage,
+        uploadAttachment,
+        uploadFile,
+        uploadImage,
+        uploadNewFiles,
+        upsertAttachments,
     };
 };

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

@@ -1,4 +1,3 @@
 import type { CommandTriggerSetting } from '../DefaultTriggerProvider';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 export declare const useCommandTrigger: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>() => CommandTriggerSetting<StreamChatGenerics>;
-//# sourceMappingURL=useCommandTrigger.d.ts.map

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

@@ -1,29 +1,26 @@
 import { CommandItem } from '../../CommandItem/CommandItem';
 import { useChannelStateContext } from '../../../context/ChannelStateContext';
-import { useChatContext } from '../../../context/ChatContext';
 import { useTranslationContext } from '../../../context';
-export var useCommandTrigger = function () {
-    var themeVersion = useChatContext('useCommandTrigger').themeVersion;
-    var channelConfig = useChannelStateContext('useCommandTrigger').channelConfig;
-    var t = useTranslationContext('useCommandTrigger').t;
-    var commands = channelConfig === null || channelConfig === void 0 ? void 0 : channelConfig.commands;
+export const useCommandTrigger = () => {
+    const { channelConfig } = useChannelStateContext('useCommandTrigger');
+    const { t } = useTranslationContext('useCommandTrigger');
+    const commands = channelConfig?.commands;
     return {
         component: CommandItem,
-        dataProvider: function (query, text, onReady) {
+        dataProvider: (query, text, onReady) => {
             if (text.indexOf('/') !== 0 || !commands) {
                 return [];
             }
-            var selectedCommands = commands.filter(function (command) { var _a; return ((_a = command.name) === null || _a === void 0 ? void 0 : _a.indexOf(query)) !== -1; });
+            const selectedCommands = commands.filter((command) => command.name?.indexOf(query) !== -1);
             // sort alphabetically unless you're matching the first char
-            selectedCommands.sort(function (a, b) {
-                var _a, _b;
-                var nameA = (_a = a.name) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-                var nameB = (_b = b.name) === null || _b === void 0 ? void 0 : _b.toLowerCase();
-                if ((nameA === null || nameA === void 0 ? void 0 : nameA.indexOf(query)) === 0) {
-                    nameA = "0".concat(nameA);
+            selectedCommands.sort((a, b) => {
+                let nameA = a.name?.toLowerCase();
+                let nameB = b.name?.toLowerCase();
+                if (nameA?.indexOf(query) === 0) {
+                    nameA = `0${nameA}`;
                 }
-                if ((nameB === null || nameB === void 0 ? void 0 : nameB.indexOf(query)) === 0) {
-                    nameB = "0".concat(nameB);
+                if (nameB?.indexOf(query) === 0) {
+                    nameB = `0${nameB}`;
                 }
                 // Should confirm possible null / undefined when TS is fully implemented
                 if (nameA != null && nameB != null) {
@@ -36,32 +33,30 @@ export var useCommandTrigger = function () {
                 }
                 return 0;
             });
-            var result = selectedCommands.slice(0, themeVersion === '2' ? 5 : 10);
+            const result = selectedCommands.slice(0, 5);
             if (onReady)
                 onReady(result
-                    .filter(function (result) {
-                    return result.name !== undefined;
-                })
-                    .map(function (commandData) {
-                    var translatedCommandData = {
+                    .filter((result) => result.name !== undefined)
+                    .map((commandData) => {
+                    const translatedCommandData = {
                         name: commandData.name,
                     };
                     if (commandData.args)
-                        translatedCommandData.args = t("".concat(commandData.name, "-command-args"), {
+                        translatedCommandData.args = t(`${commandData.name}-command-args`, {
                             defaultValue: commandData.args,
                         });
                     if (commandData.description)
-                        translatedCommandData.description = t("".concat(commandData.name, "-command-description"), {
+                        translatedCommandData.description = t(`${commandData.name}-command-description`, {
                             defaultValue: commandData.description,
                         });
                     return translatedCommandData;
                 }), query);
             return result;
         },
-        output: function (entity) { return ({
+        output: (entity) => ({
             caretPosition: 'next',
             key: entity.name,
-            text: "/".concat(entity.name),
-        }); },
+            text: `/${entity.name}`,
+        }),
     };
 };

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

@@ -6,4 +6,3 @@ export type CooldownTimerState = {
     cooldownRemaining?: number;
 };
 export declare const useCooldownTimer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>() => CooldownTimerState;
-//# sourceMappingURL=useCooldownTimer.d.ts.map

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

@@ -1,25 +1,22 @@
-import { __spreadArray } from "tslib";
 import { useEffect, useMemo, useState } from 'react';
 import { useChannelStateContext, useChatContext } from '../../../context';
-export var useCooldownTimer = function () {
-    var _a;
-    var _b = useChatContext('useCooldownTimer'), client = _b.client, latestMessageDatesByChannels = _b.latestMessageDatesByChannels;
-    var _c = useChannelStateContext('useCooldownTimer'), channel = _c.channel, _d = _c.messages, messages = _d === void 0 ? [] : _d;
-    var _e = useState(), cooldownRemaining = _e[0], setCooldownRemaining = _e[1];
-    var _f = (channel.data ||
-        {}), _g = _f.cooldown, cooldownInterval = _g === void 0 ? 0 : _g, own_capabilities = _f.own_capabilities;
-    var skipCooldown = own_capabilities === null || own_capabilities === void 0 ? void 0 : own_capabilities.includes('skip-slow-mode');
-    var ownLatestMessageDate = useMemo(function () {
-        var _a, _b;
-        return (_a = latestMessageDatesByChannels[channel.cid]) !== null && _a !== void 0 ? _a : (_b = __spreadArray([], messages, true).sort(function (a, b) { var _a, _b; return ((_a = b.created_at) === null || _a === void 0 ? void 0 : _a.getTime()) - ((_b = a.created_at) === null || _b === void 0 ? void 0 : _b.getTime()); })
-            .find(function (v) { var _a, _b; return ((_a = v.user) === null || _a === void 0 ? void 0 : _a.id) === ((_b = client.user) === null || _b === void 0 ? void 0 : _b.id); })) === null || _b === void 0 ? void 0 : _b.created_at;
-    }, [messages, (_a = client.user) === null || _a === void 0 ? void 0 : _a.id, latestMessageDatesByChannels, channel.cid]);
-    useEffect(function () {
-        var timeSinceOwnLastMessage = ownLatestMessageDate
+export const useCooldownTimer = () => {
+    const { client, latestMessageDatesByChannels } = useChatContext('useCooldownTimer');
+    const { channel, messages = [] } = useChannelStateContext('useCooldownTimer');
+    const [cooldownRemaining, setCooldownRemaining] = useState();
+    const { cooldown: cooldownInterval = 0, own_capabilities } = (channel.data ||
+        {});
+    const skipCooldown = own_capabilities?.includes('skip-slow-mode');
+    const ownLatestMessageDate = useMemo(() => latestMessageDatesByChannels[channel.cid] ??
+        [...messages]
+            .sort((a, b) => b.created_at?.getTime() - a.created_at?.getTime())
+            .find((v) => v.user?.id === client.user?.id)?.created_at, [messages, client.user?.id, latestMessageDatesByChannels, channel.cid]);
+    useEffect(() => {
+        const timeSinceOwnLastMessage = ownLatestMessageDate
             ? // prevent negative values
                 Math.max(0, (new Date().getTime() - ownLatestMessageDate.getTime()) / 1000)
             : undefined;
-        var remaining = !skipCooldown &&
+        const remaining = !skipCooldown &&
             typeof timeSinceOwnLastMessage !== 'undefined' &&
             cooldownInterval > timeSinceOwnLastMessage
             ? Math.round(cooldownInterval - timeSinceOwnLastMessage)
@@ -27,16 +24,16 @@ export var useCooldownTimer = function () {
         setCooldownRemaining(remaining);
         if (!remaining)
             return;
-        var timeout = setTimeout(function () {
+        const timeout = setTimeout(() => {
             setCooldownRemaining(0);
         }, remaining * 1000);
-        return function () {
+        return () => {
             clearTimeout(timeout);
         };
     }, [cooldownInterval, ownLatestMessageDate, skipCooldown]);
     return {
-        cooldownInterval: cooldownInterval,
-        cooldownRemaining: cooldownRemaining,
-        setCooldownRemaining: setCooldownRemaining,
+        cooldownInterval,
+        cooldownRemaining,
+        setCooldownRemaining,
     };
 };

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

@@ -1,4 +1,3 @@
 import type { MessageInputContextValue } from '../../../context/MessageInputContext';
 import type { CustomTrigger, DefaultStreamChatGenerics } from '../../../types/types';
 export declare const useCreateMessageInputContext: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger>(value: MessageInputContextValue<StreamChatGenerics, V>) => MessageInputContextValue<StreamChatGenerics, V>;
-//# sourceMappingURL=useCreateMessageInputContext.d.ts.map