@selfcommunity/react-ui 0.7.0-alpha.98 → 0.7.0

package/lib/esm/components/PrivateMessageThread/PrivateMessageThread.js

@@ -1,23 +1,13 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import { __rest } from "tslib";
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { styled } from '@mui/material/styles';
-import Widget from '../Widget';
-import { UserService } from '@selfcommunity/api-services';
-import { SCPreferences, SCPreferencesContext, SCUserContext } from '@selfcommunity/react-core';
-import PrivateMessageThreadItem from '../PrivateMessageThreadItem';
-import _ from 'lodash';
+import { Endpoints, http, PrivateMessageService } from '@selfcommunity/api-services';
+import { SCUserContext, UserUtils, useSCFetchUser } from '@selfcommunity/react-core';
+import { SCNotificationTopicType, SCNotificationTypologyType, SCPrivateMessageStatusType } from '@selfcommunity/types';
+import PrivateMessageThreadItem, { PrivateMessageThreadItemSkeleton } from '../PrivateMessageThreadItem';
+import PubSub from 'pubsub-js';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import { Box, CardContent, IconButton, List, ListSubheader, TextField, Typography } from '@mui/material';
+import { Box, Card, CardContent, IconButton, List, ListSubheader, TextField, Typography } from '@mui/material';
 import PrivateMessageEditor from '../PrivateMessageEditor';
 import Autocomplete from '@mui/material/Autocomplete';
 import classNames from 'classnames';
@@ -25,15 +15,21 @@ import { useThemeProps } from '@mui/system';
 import Icon from '@mui/material/Icon';
 import PrivateMessageThreadSkeleton from './Skeleton';
 import { SCOPE_SC_UI } from '../../constants/Errors';
-import { Logger } from '@selfcommunity/utils';
-import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
+import { groupBy, Logger } from '@selfcommunity/utils';
+import { useSnackbar } from 'notistack';
+import ConfirmDialog from '../../shared/ConfirmDialog/ConfirmDialog';
+import InfiniteScroll from '../../shared/InfiniteScroll';
+import { PREFIX } from './constants';
 const translMessages = defineMessages({
     placeholder: {
         id: 'ui.privateMessage.thread.newMessage.autocomplete.placeholder',
         defaultMessage: 'ui.privateMessage.thread.newMessage.autocomplete.placeholder'
+    },
+    messageDeleted: {
+        id: 'ui.privateMessage.thread.message.deleted',
+        defaultMessage: 'ui.privateMessage.thread.message.deleted'
     }
 });
-const PREFIX = 'SCPrivateMessageThread';
 const classes = {
     root: `${PREFIX}-root`,
     subHeader: `${PREFIX}-subheader`,
@@ -42,18 +38,23 @@ const classes = {
     newMessageHeader: `${PREFIX}-new-message-header`,
     newMessageHeaderContent: `${PREFIX}-new-message-header-content`,
     newMessageHeaderIcon: `${PREFIX}-new-message-header-icon`,
+    newMessageContent: `${PREFIX}-new-message-content`,
     sender: `${PREFIX}-sender`,
     receiver: `${PREFIX}-receiver`,
-    autocomplete: `${PREFIX}-autocomplete`
+    autocomplete: `${PREFIX}-autocomplete`,
+    autocompleteDialog: `${PREFIX}-autocomplete-dialog`,
+    editor: `${PREFIX}-editor`
 };
-const Root = styled(Widget, {
+const Root = styled(Card, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    slot: 'Root'
+})(() => ({}));
 /**
+ * > API documentation for the Community-JS PrivateMessage Thread component. Learn about the available props and the CSS API.
+ *
  *
- > API documentation for the Community-JS PrivateMessage Thread component. Learn about the available props and the CSS API.
+ * This component renders the conversation between two users.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/Thread)
 
  #### Import
 
@@ -71,15 +72,18 @@ const Root = styled(Widget, {
  |Rule Name|Global class|Description|
  |---|---|---|
  |root|.SCPrivateMessageThread-root|Styles applied to the root element.|
+ |subHeader|.SCPrivateMessageThread-subheader|Styles applied to thread list subheader element.|
  |section|.SCPrivateMessageThread-section|Styles applied to the list section|
  |emptyMessage|.SCPrivateMessageThread-empty-message|Styles applied to the empty message element.|
  |newMessageHeader|.SCPrivateMessageThread-new-message-header|Styles applied to the new message header section.|
- |newMessageHeaderIcon|.SCPrivateMessageThread-new-message-header-icon|Styles applied to the new message header icon element.|
  |newMessageHeaderContent|.SCPrivateMessageThread-new-message-header-content|Styles applied to the new message header content.|
- |subHeader|.SCPrivateMessageThread-subheader|Styles applied to thread list subheader element.|
+ |newMessageHeaderIcon|.SCPrivateMessageThread-new-message-header-icon|Styles applied to the new message header icon element.|
+ |newMessageContent|.SCPrivateMessageThread-new-message-content|Styles applied to the new message content.|
  |sender|.SCPrivateMessageThread-sender|Styles applied to the sender element.|
  |receiver|.SCPrivateMessageThread-receiver|Styles applied to the receiver element.|
- |autocomplete|.SCPrivateMessageThread-autocomplete|Styles applied to new message user insertion autocomplete.|
+ |autocomplete|.SCPrivateMessageThread-autocomplete|Styles applied to autocomplete element.|
+ |autocompleteDialog|.SCPrivateMessageThread-autocomplete-dialog|Styles applied to autocomplete dialog element.|
+ |editor|.SCPrivateMessageThread-editor|Styles applied to the editor element.|
 
  * @param inProps
  */
@@ -89,35 +93,56 @@ export default function PrivateMessageThread(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { threadObj, messages, loadingMessageObjs, receiver, recipients, openNewMessage, threadCallbacks, newMessageThread, autoHide, className } = props, rest = __rest(props, ["threadObj", "messages", "loadingMessageObjs", "receiver", "recipients", "openNewMessage", "threadCallbacks", "newMessageThread", "autoHide", "className"]);
+    const { userObj, openNewMessage = false, onNewMessageClose = null, onNewMessageSent = null, onSingleMessageOpen = null, className } = props, rest = __rest(props, ["userObj", "openNewMessage", "onNewMessageClose", "onNewMessageSent", "onSingleMessageOpen", "className"]);
     // CONTEXT
     const scUserContext = useContext(SCUserContext);
-    const scPreferencesContext = useContext(SCPreferencesContext);
-    const followEnabled = SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED in scPreferencesContext.preferences &&
-        scPreferencesContext.preferences[SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED].value;
     // STATE
-    const scFollowersManager = scUserContext.managers.followers;
-    const [loading, setLoading] = useState(true);
+    const [value, setValue] = useState('');
+    const [previous, setPrevious] = useState(null);
+    const [messageObjs, setMessageObjs] = useState([]);
+    const [loadingMessageObjs, setLoadingMessageObjs] = useState(true);
+    const [loading, setLoading] = useState(false);
     const [isHovered, setIsHovered] = useState({});
     const [followers, setFollowers] = useState([]);
-    const [isFollower, setIsFollower] = useState(false);
-    const isNumber = typeof threadObj === 'number';
+    const isNew = userObj && userObj === SCPrivateMessageStatusType.NEW;
     const authUserId = scUserContext.user ? scUserContext.user.id : null;
+    const [singleMessageUser, setSingleMessageUser] = useState(null);
+    const [receiver, setReceiver] = useState(null);
+    const [deletingMsg, setDeletingMsg] = useState(null);
+    const [singleMessageThread, setSingleMessageThread] = useState(false);
+    const [openDeleteMessageDialog, setOpenDeleteMessageDialog] = useState(false);
+    const [recipients, setRecipients] = useState([]);
+    const { enqueueSnackbar, closeSnackbar } = useSnackbar();
+    const isNumber = typeof userObj === 'number';
+    const messageReceiver = (item, loggedUserId) => {
+        var _a, _b, _c;
+        return ((_a = item === null || item === void 0 ? void 0 : item.receiver) === null || _a === void 0 ? void 0 : _a.id) !== loggedUserId ? (_b = item === null || item === void 0 ? void 0 : item.receiver) === null || _b === void 0 ? void 0 : _b.id : (_c = item === null || item === void 0 ? void 0 : item.sender) === null || _c === void 0 ? void 0 : _c.id;
+    };
+    const [error, setError] = useState(false);
+    // REFS
+    const refreshSubscription = useRef(null);
     // INTL
     const intl = useIntl();
+    // HOOKS
+    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+    // @ts-ignore
+    const { scUser } = useSCFetchUser({ id: userObj, userObj });
+    const messagesEndRef = useRef(null);
+    const scrollToBottom = () => {
+        var _a;
+        (_a = messagesEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'end', behavior: 'instant' });
+    };
     // UTILS
     const format = (item) => intl.formatDate(item.created_at, {
         year: 'numeric',
         day: 'numeric',
         month: 'long'
     });
-    const formatMessages = (messages) => {
-        return _.groupBy(messages, format);
-    };
     // CONST
     const formattedMessages = useMemo(() => {
-        return formatMessages(messages);
-    }, [messages]);
+        const _messages = [...messageObjs];
+        return groupBy(_messages, format);
+    }, [messageObjs]);
     // HANDLERS
     const handleMouseEnter = (index) => {
         setIsHovered((prevState) => {
@@ -130,84 +155,333 @@ export default function PrivateMessageThread(inProps) {
         });
     };
     /**
-     * Memoized fetchFollowers
+     * Handles delete message dialog opening
+     * @param msg
      */
-    const fetchFollowers = useMemo(() => () => {
-        let fetch;
-        if (followEnabled) {
-            fetch = UserService.getUserFollowers(authUserId);
-        }
-        else {
-            fetch = UserService.getUserConnections(authUserId);
+    const handleOpenDeleteMessageDialog = (msg) => {
+        setOpenDeleteMessageDialog(true);
+        setDeletingMsg(msg);
+    };
+    /**
+     * Handles delete message dialog close
+     */
+    const handleCloseDeleteMessageDialog = () => {
+        setOpenDeleteMessageDialog(false);
+    };
+    /**
+     * Memoized message recipients ids
+     */
+    const ids = useMemo(() => {
+        if (recipients && openNewMessage) {
+            return recipients.map((u) => {
+                return parseInt(u.id, 10);
+            });
         }
-        return fetch
+        return [recipients];
+    }, [recipients]);
+    function fetchResults() {
+        setLoading(true);
+        PrivateMessageService.searchUser(value)
             .then((data) => {
-            setFollowers(data.results);
             setLoading(false);
+            setFollowers(data.results.filter((user) => user.id !== authUserId));
         })
             .catch((error) => {
             setLoading(false);
             console.log(error);
-            Logger.error(SCOPE_SC_UI, { error });
         });
-    }, []);
+    }
+    const handleInputChange = (event, value, reason) => {
+        switch (reason) {
+            case 'input':
+                setValue(value);
+                !value && setFollowers([]);
+                break;
+            case 'reset':
+                setValue(value);
+                break;
+        }
+    };
+    const handleChange = (event, value, reason) => {
+        event.preventDefault();
+        event.stopPropagation();
+        switch (reason) {
+            case 'selectOption':
+                handleClear(event);
+                setRecipients(value);
+                break;
+            case 'removeOption':
+                handleClear(event, value);
+                break;
+        }
+        return false;
+    };
+    const handleClear = (event, value) => {
+        setValue('');
+        setFollowers([]);
+        setRecipients(value !== null && value !== void 0 ? value : []);
+    };
+    const handleNewMessageClose = () => {
+        handleClear();
+        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        // @ts-ignore
+        onNewMessageClose && onNewMessageClose();
+    };
+    function updateAndDeleteURLParameters(url, paramToUpdate, newValue, paramToDelete) {
+        const urlObj = new URL(url);
+        urlObj.searchParams.set(paramToUpdate, newValue);
+        urlObj.searchParams.delete(paramToDelete);
+        return urlObj.toString();
+    }
+    const handlePrevious = useMemo(() => () => {
+        if (!previous) {
+            return;
+        }
+        return http
+            .request({
+            url: previous,
+            method: Endpoints.GetAThread.method
+        })
+            .then((res) => {
+            const _prev = [...messageObjs];
+            _prev.unshift(...res.data.results);
+            setMessageObjs(_prev);
+            setPrevious(res.data.next && updateAndDeleteURLParameters(res.data.next, 'before_message', res.data.results[0].id, 'offset'));
+        })
+            .catch((error) => console.log(error));
+    }, [previous, messageObjs]);
+    /**
+     * Fetches thread
+     */
+    function fetchThread() {
+        if (userObj && typeof userObj !== 'string') {
+            setLoadingMessageObjs(true);
+            const _userObjId = isNumber ? userObj : messageReceiver(userObj, authUserId);
+            PrivateMessageService.getAThread({ user: _userObjId, limit: 10 })
+                .then((res) => {
+                setMessageObjs(res.results);
+                setPrevious(res.next && updateAndDeleteURLParameters(res.next, 'before_message', res.results[0].id, 'offset'));
+                if (res.results.length) {
+                    if (res.results[0].receiver.id !== authUserId) {
+                        setReceiver(res.results[0].receiver);
+                    }
+                    else {
+                        setReceiver(res.results[0].sender);
+                    }
+                    setSingleMessageThread(false);
+                }
+                else {
+                    if (scUser === null || scUser === void 0 ? void 0 : scUser.can_send_pm_to) {
+                        setSingleMessageThread(true);
+                        setRecipients(_userObjId);
+                        onSingleMessageOpen(true);
+                        setSingleMessageUser(scUser);
+                    }
+                    else {
+                        setSingleMessageThread(false);
+                    }
+                }
+                setLoadingMessageObjs(false);
+            })
+                .catch((error) => {
+                setLoadingMessageObjs(false);
+                console.log(error);
+                Logger.error(SCOPE_SC_UI, { error });
+            });
+        }
+    }
+    const isNewerThan60Seconds = (creationTime) => {
+        const date = new Date(creationTime);
+        const now = new Date();
+        return now.getTime() - date.getTime() < 60000;
+    };
+    function updateMessageAfterDeletion(id) {
+        const newMessageObjects = [...messageObjs];
+        const index = newMessageObjects.findIndex((s) => s.id === id);
+        if (index !== -1) {
+            newMessageObjects[index].message = `${intl.formatMessage(translMessages.messageDeleted)}`;
+            newMessageObjects[index].file = null;
+            newMessageObjects[index].status = SCPrivateMessageStatusType.HIDDEN;
+            setMessageObjs(newMessageObjects);
+        }
+    }
+    /**
+     * Handles the deletion of a single message
+     */
+    function handleDeleteMessage() {
+        const toHide = isNewerThan60Seconds(deletingMsg.created_at);
+        PrivateMessageService.deleteAMessage(deletingMsg.id)
+            .then(() => {
+            const result = messageObjs.filter((m) => m.id !== deletingMsg.id);
+            toHide ? setMessageObjs(result) : updateMessageAfterDeletion(deletingMsg.id);
+            handleSnippetsUpdate((result.length >= 1 && toHide) || (!toHide && deletingMsg.id !== messageObjs.slice(-1)[0].id) ? result.slice(-1) : [deletingMsg]);
+            handleCloseDeleteMessageDialog();
+        })
+            .catch((error) => {
+            console.log(error);
+            let _snackBar = enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.privateMessage.thread.error.delete.msg", defaultMessage: "ui.privateMessage.thread.error.delete.msg" }), {
+                variant: 'error',
+                SnackbarProps: {
+                    onClick: () => {
+                        closeSnackbar(_snackBar);
+                    }
+                }
+            });
+        });
+    }
+    /**
+     * Updates snippets list when a new message(or more) are sent or another one is deleted
+     * @param message, it can be a single object or an array of objects
+     */
+    function handleSnippetsUpdate(message) {
+        PubSub.publish('snippetsChannel', message);
+    }
     /**
-     * Fetches followers when a new message is selected
+     * Handles message sending
+     * @param message
+     * @param file
+     */
+    function handleSend(message, file) {
+        if (UserUtils.isBlocked(scUserContext.user)) {
+            enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
+                variant: 'warning',
+                autoHideDuration: 3000
+            });
+        }
+        else {
+            http
+                .request({
+                url: Endpoints.SendMessage.url(),
+                method: Endpoints.SendMessage.method,
+                data: {
+                    recipients: openNewMessage || isNew || singleMessageThread ? ids : [isNumber && userObj ? userObj : messageReceiver(userObj, authUserId)],
+                    message: message,
+                    file_uuid: file && !message ? file : null
+                }
+            })
+                .then((res) => {
+                const isOne = res.data.length <= 1;
+                isOne && setMessageObjs((prev) => [...prev, res.data[0]]);
+                handleSnippetsUpdate(res.data);
+                if (openNewMessage || singleMessageThread) {
+                    setSingleMessageThread(false);
+                    onSingleMessageOpen(false);
+                    setRecipients([]);
+                    onNewMessageSent(res.data[0], isOne);
+                }
+                scrollToBottom();
+            })
+                .catch((error) => {
+                console.log(error);
+                setError(true);
+            });
+        }
+    }
+    /**
+     * Reset component state
+     */
+    const reset = useCallback(() => () => {
+        setLoadingMessageObjs(true);
+        setMessageObjs([]);
+        setPrevious(null);
+        setReceiver(null);
+        setSingleMessageThread(false);
+    }, [setLoadingMessageObjs, setMessageObjs, setPrevious, setReceiver, setSingleMessageThread]);
+    // EFFECTS
+    /**
+     * If a value is entered in new message field, it fetches user followers
      */
     useEffect(() => {
-        openNewMessage && fetchFollowers();
-    }, [openNewMessage, authUserId]);
+        if (value) {
+            fetchResults();
+        }
+    }, [value]);
     /**
-     * Checks is thread receiver is a user follower
+     * On mount, if obj, fetches thread
      */
     useEffect(() => {
-        if (receiver) {
-            setIsFollower(scFollowersManager.isFollower(receiver));
+        if (!authUserId) {
+            return;
         }
-    });
+        if (userObj) {
+            fetchThread();
+        }
+        else {
+            reset();
+        }
+    }, [userObj, authUserId, scUser]);
+    /**
+     * Notification subscriber
+     */
+    const subscriber = (msg, data) => {
+        const res = data.data;
+        const newMessages = [...messageObjs];
+        const index = newMessages.findIndex((m) => m.thread_id === res.thread_id);
+        const _message = res.notification_obj.message;
+        _message.receiver = res.notification_obj.snippet.receiver;
+        _message.thread_status = res.notification_obj.snippet.thread_status;
+        handleSnippetsUpdate([_message]);
+        if (index !== -1) {
+            setMessageObjs((prev) => [...prev, res.notification_obj.message]);
+        }
+        if (isNumber ? userObj === res.thread_id : userObj.id === res.thread_id) {
+            scrollToBottom();
+        }
+    };
+    /**
+     * When a ws notification arrives, updates thread and snippets data
+     */
+    useEffect(() => {
+        refreshSubscription.current = PubSub.subscribe(`${SCNotificationTopicType.INTERACTION}.${SCNotificationTypologyType.PRIVATE_MESSAGE}`, subscriber);
+        return () => {
+            PubSub.unsubscribe(refreshSubscription.current);
+        };
+    }, [messageObjs]);
     /**
      * Renders thread component
      * @return {JSX.Element}
      */
     function renderThread() {
+        if (loadingMessageObjs) {
+            return React.createElement(PrivateMessageThreadSkeleton, null);
+        }
         return (React.createElement(CardContent, null,
-            React.createElement(List, { subheader: React.createElement("li", null) }, Object.keys(formattedMessages).map((key) => (React.createElement("li", { key: key, className: classes.section },
-                React.createElement("ul", null,
-                    React.createElement(ListSubheader, null,
-                        React.createElement(Typography, { align: "center", className: classes.subHeader }, key)),
-                    formattedMessages[key].map((msg) => (React.createElement(PrivateMessageThreadItem, { className: authUserId === msg.sender.id ? classes.sender : classes.receiver, message: msg, key: msg.id, mouseEvents: { onMouseEnter: () => handleMouseEnter(msg.id), onMouseLeave: () => handleMouseLeave(msg.id) }, isHovering: isHovered[msg.id], showMenuIcon: authUserId === msg.sender.id, onMenuIconClick: () => threadCallbacks.onMessageDelete(msg) })))))))),
-            React.createElement(PrivateMessageEditor, { send: threadCallbacks.onMessageSend, autoHide: !isFollower, onThreadChangeId: isNumber ? threadObj : threadObj === null || threadObj === void 0 ? void 0 : threadObj.id })));
+            React.createElement(InfiniteScroll, { height: '100%', dataLength: messageObjs.length, previous: handlePrevious, inverse: true, hasMorePrevious: Boolean(previous), loaderPrevious: React.createElement(PrivateMessageThreadItemSkeleton, null) },
+                React.createElement(List, { ref: messagesEndRef }, Object.keys(formattedMessages).map((key) => (React.createElement("li", { key: key, className: classes.section },
+                    React.createElement("ul", null,
+                        React.createElement(ListSubheader, null,
+                            React.createElement(Typography, { align: "center", className: classes.subHeader }, key)),
+                        formattedMessages[key].map((msg) => (React.createElement(PrivateMessageThreadItem, { className: authUserId === msg.sender.id ? classes.sender : classes.receiver, message: msg, key: msg.id, mouseEvents: {
+                                onMouseEnter: () => handleMouseEnter(msg.id),
+                                onMouseLeave: () => handleMouseLeave(msg.id)
+                            }, isHovering: isHovered[msg.id], showMenuIcon: authUserId === msg.sender.id, onMenuIconClick: () => handleOpenDeleteMessageDialog(msg) }))))))))),
+            React.createElement(PrivateMessageEditor, { className: classes.editor, send: handleSend, autoHide: !(scUser === null || scUser === void 0 ? void 0 : scUser.can_send_pm_to), autoHideDeletion: (receiver === null || receiver === void 0 ? void 0 : receiver.deleted) || (scUser === null || scUser === void 0 ? void 0 : scUser.deleted), onThreadChangeId: isNumber ? userObj : userObj.receiver.id, error: error, onErrorRemove: () => setError(false) }),
+            openDeleteMessageDialog && (React.createElement(ConfirmDialog, { open: openDeleteMessageDialog, title: React.createElement(FormattedMessage, { id: "ui.privateMessage.component.delete.message.dialog.msg", defaultMessage: "ui.privateMessage.component.delete.message.dialog.msg" }), btnConfirm: React.createElement(FormattedMessage, { id: "ui.privateMessage.component.delete.message.dialog.confirm", defaultMessage: "ui.privateMessage.component.delete.message.dialog.confirm" }), onConfirm: handleDeleteMessage, onClose: handleCloseDeleteMessageDialog }))));
     }
     /**
      * Renders empty box (when there is no thread open) or new message box
      * @return {JSX.Element}
      */
     function renderNewOrNoMessageBox() {
-        return (React.createElement(CardContent, null, openNewMessage || newMessageThread ? (React.createElement(React.Fragment, null,
+        return (React.createElement(CardContent, null, isNew || singleMessageThread ? (React.createElement(React.Fragment, null,
             React.createElement(Box, { className: classes.newMessageHeader },
                 React.createElement(Box, { className: classes.newMessageHeaderContent },
                     React.createElement(Icon, { className: classes.newMessageHeaderIcon }, "person"),
                     React.createElement(Typography, null,
                         React.createElement(FormattedMessage, { defaultMessage: "ui.privateMessage.thread.newMessage.to", id: "ui.privateMessage.thread.newMessage.to" })),
-                    React.createElement(Autocomplete, { className: classes.autocomplete, loading: loading, multiple: !newMessageThread, limitTags: 3, freeSolo: true, options: followers, value: newMessageThread ? (isNumber ? threadObj : threadObj === null || threadObj === void 0 ? void 0 : threadObj.receiver.id) : recipients, getOptionLabel: (option) => (option ? option.username : '...'), renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { placeholder: `${intl.formatMessage(translMessages.placeholder)}`, variant: "standard", InputProps: Object.assign(Object.assign({}, params.InputProps), { disableUnderline: true }) }))), onChange: threadCallbacks.onRecipientSelect, disabled: !followers })),
-                React.createElement(IconButton, { size: "small", onClick: threadCallbacks.onMessageBack },
+                    React.createElement(Autocomplete, { className: classes.autocomplete, loading: loading, multiple: !singleMessageThread, limitTags: 3, freeSolo: true, disableClearable: true, options: followers, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, value: singleMessageThread ? singleMessageUser : recipients, getOptionLabel: (option) => (option ? option.username : '...'), isOptionEqualToValue: (option, value) => (option ? value.id === option.id : false), renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { placeholder: singleMessageThread ? '...' : `${intl.formatMessage(translMessages.placeholder)}`, variant: "standard", InputProps: Object.assign(Object.assign({}, params.InputProps), { disableUnderline: true }) }))), classes: { popper: classes.autocompleteDialog }, disabled: Boolean(singleMessageUser) })),
+                React.createElement(IconButton, { size: "small", onClick: handleNewMessageClose },
                     React.createElement(Icon, { fontSize: "small" }, "close"))),
-            React.createElement(PrivateMessageEditor, { send: threadCallbacks.onMessageSend, autoHide: !followers }))) : (React.createElement(Typography, { component: "span", className: classes.emptyMessage },
+            React.createElement(List, { className: classes.newMessageContent }),
+            React.createElement(PrivateMessageEditor, { className: classes.editor, send: handleSend, autoHide: !followers, error: error, onErrorRemove: () => setError(false) }))) : (React.createElement(Typography, { className: classes.emptyMessage },
             React.createElement(FormattedMessage, { id: "ui.privateMessage.thread.emptyBox.message", defaultMessage: "ui.privateMessage.thread.emptyBox.message" })))));
     }
     // Anonymous
-    if (!scUserContext.user) {
-        return React.createElement(HiddenPlaceholder, null);
-    }
-    if (loadingMessageObjs && threadObj) {
-        return React.createElement(PrivateMessageThreadSkeleton, null);
+    if (!authUserId) {
+        return null;
     }
     /**
-     * Renders the component (if not hidden by autoHide prop)
+     * Renders the component
      */
-    if (!autoHide) {
-        return (React.createElement(Root, Object.assign({}, rest, { className: classNames(classes.root, className) }), threadObj && !newMessageThread ? renderThread() : renderNewOrNoMessageBox()));
-    }
-    return React.createElement(HiddenPlaceholder, null);
+    return (React.createElement(Root, Object.assign({}, rest, { className: classNames(classes.root, className) }), userObj !== null && !isNew && !singleMessageThread ? renderThread() : renderNewOrNoMessageBox()));
 }
-//# sourceMappingURL=PrivateMessageThread.js.map

package/lib/esm/components/PrivateMessageThread/Skeleton.d.ts

@@ -9,15 +9,14 @@
 
  #### Component Name
 
- The name `SCPrivateMessageThreadSkeleton` can be used when providing style overrides in the theme.
+ The name `SCPrivateMessageThread-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCPrivateMessageThreadSkeleton-root|Styles applied to the root element.|
- |list|.SCPrivateMessageThreadSkeleton-list|Styles applied to the list element.|
+ |root|.SCPrivateMessageThread-skeleton-root|Styles applied to the root element.|
+ |list|.SCPrivateMessageThread-list|Styles applied to the list element.|
  *
  */
 export default function PrivateMessageThreadSkeleton(props: any): JSX.Element;
-//# sourceMappingURL=Skeleton.d.ts.map

package/lib/esm/components/PrivateMessageThread/Skeleton.js

@@ -1,21 +1,18 @@
 import React from 'react';
-import Widget from '../Widget';
 import { styled } from '@mui/material/styles';
-import { CardContent } from '@mui/material';
+import { Box, Card, CardContent, ListSubheader, Skeleton, useMediaQuery, useTheme } from '@mui/material';
 import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import Skeleton from '@mui/material/Skeleton';
-import ListItemText from '@mui/material/ListItemText';
-const PREFIX = 'SCPrivateMessageThreadSkeleton';
+import PrivateMessageThreadItemSkeleton from '../PrivateMessageThreadItem/Skeleton';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`,
-    list: `${PREFIX}-list`
+    root: `${PREFIX}-skeleton-root`,
+    list: `${PREFIX}-list`,
+    editor: `${PREFIX}-editor`
 };
-const Root = styled(Widget, {
+const Root = styled(Card, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS PrivateMessage Thread Skeleton component. Learn about the available props and the CSS API.
 
@@ -27,22 +24,25 @@ const Root = styled(Widget, {
 
  #### Component Name
 
- The name `SCPrivateMessageThreadSkeleton` can be used when providing style overrides in the theme.
+ The name `SCPrivateMessageThread-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCPrivateMessageThreadSkeleton-root|Styles applied to the root element.|
- |list|.SCPrivateMessageThreadSkeleton-list|Styles applied to the list element.|
+ |root|.SCPrivateMessageThread-skeleton-root|Styles applied to the root element.|
+ |list|.SCPrivateMessageThread-list|Styles applied to the list element.|
  *
  */
 export default function PrivateMessageThreadSkeleton(props) {
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
     return (React.createElement(Root, Object.assign({ className: classes.root }, props),
         React.createElement(CardContent, null,
-            React.createElement(List, { className: classes.list }, [...Array(6)].map((category, index) => (React.createElement(ListItem, { key: index },
-                React.createElement(ListItemText, { sx: { display: 'flex', justifyContent: index % 2 === 0 ? 'flex-start' : 'flex-end' }, primary: React.createElement(React.Fragment, null,
-                        React.createElement(Skeleton, { animation: "wave", height: 50, width: 100, style: { borderRadius: 20 } }),
-                        React.createElement(Skeleton, { animation: "wave", height: 10, width: 30 })) }))))))));
+            React.createElement(List, { className: classes.list },
+                React.createElement(ListSubheader, { sx: { display: 'flex', justifyContent: 'center' } },
+                    React.createElement(Skeleton, { animation: "wave", height: 30, width: 120, style: { borderRadius: 20 } })),
+                [...Array(isMobile ? 6 : 8)].map((item, index) => (React.createElement(PrivateMessageThreadItemSkeleton, { index: index, key: index })))),
+            React.createElement(Box, { className: classes.editor },
+                React.createElement(Skeleton, { animation: "wave", height: 55, width: '100%', variant: 'rectangular' })))));
 }
-//# sourceMappingURL=Skeleton.js.map

package/lib/esm/components/PrivateMessageThread/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCPrivateMessageThread";

package/lib/esm/components/PrivateMessageThread/constants.js

@@ -0,0 +1 @@
+export const PREFIX = 'SCPrivateMessageThread';

package/lib/esm/components/PrivateMessageThread/index.d.ts

@@ -2,4 +2,3 @@ import PrivateMessageThread, { PrivateMessageThreadProps } from './PrivateMessag
 import PrivateMessageThreadSkeleton from './Skeleton';
 export default PrivateMessageThread;
 export { PrivateMessageThreadProps, PrivateMessageThreadSkeleton };
-//# sourceMappingURL=index.d.ts.map