@selfcommunity/react-ui 0.7.0-alpha.80 → 0.7.0-alpha.81

package/lib/cjs/components/PrivateMessageThread/PrivateMessageThread.d.ts

@@ -0,0 +1,84 @@
+import { SCPrivateMessageThreadType } from '@selfcommunity/types';
+export interface PrivateMessageThreadProps {
+    /**
+     * User object (thread receiver)
+     * default null
+     */
+    userObj?: SCPrivateMessageThreadType | number;
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Hides this component
+     * @default false
+     */
+    autoHide?: boolean;
+    /**
+     * Opens new message screen
+     * @default false
+     */
+    openNewMessage?: boolean;
+    /**
+     * Functions called on thread actions
+     */
+    threadCallbacks?: {
+        /**
+         * Callback fired when a  message is sent
+         * @param data
+         * @default null
+         */
+        onMessageSentOrDeleted?: (data: any, reason: string) => void;
+        /**
+         * Callback fired only when exiting a thread.
+         * @default null
+         */
+        onMessageBack?: (dispatch: any) => void;
+        /**
+         * Callback fired when deleting a thread.
+         * @default null
+         */
+        onThreadDelete?: (dispatch: any) => void;
+    };
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ *
+ > API documentation for the Community-JS PrivateMessage Thread component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {PrivateMessageThread} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCPrivateMessageThread` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCPrivateMessageThread-root|Styles applied to the root 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.|
+ |mobileHeader|.SCPrivateMessageThread-mobile-header|Styles applied to mobile header element.|
+ |mobileHeaderContent|.SCPrivateMessageThread-mobile-header-content|Styles applied to mobile header 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.|
+
+ * @param inProps
+ */
+export default function PrivateMessageThread(inProps: PrivateMessageThreadProps): JSX.Element;
+//# sourceMappingURL=PrivateMessageThread.d.ts.map

package/lib/cjs/components/PrivateMessageThread/PrivateMessageThread.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrivateMessageThread.d.ts","sourceRoot":"","sources":["../../../../src/components/PrivateMessageThread/PrivateMessageThread.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAyE,0BAA0B,EAAC,MAAM,sBAAsB,CAAC;AA8DxI,MAAM,WAAW,yBAAyB;IACxC;;;OAGG;IACH,OAAO,CAAC,EAAE,0BAA0B,GAAG,MAAM,CAAC;IAC9C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,eAAe,CAAC,EAAE;QAChB;;;;WAIG;QACH,sBAAsB,CAAC,EAAE,CAAC,IAAI,KAAA,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;QACxD;;;WAGG;QACH,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,IAAI,CAAC;QACxC;;;WAGG;QACH,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,KAAK,IAAI,CAAC;KAC1C,CAAC;IACF;;OAEG;IACH,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC;CAClB;AACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,OAAO,EAAE,yBAAyB,GAAG,GAAG,CAAC,OAAO,CAmZ5F"}

package/lib/cjs/components/{Thread/Thread.js → PrivateMessageThread/PrivateMessageThread.js}

@@ -43,12 +43,12 @@ const Widget_1 = __importDefault(require("../Widget"));
 const api_services_1 = require("@selfcommunity/api-services");
 const react_core_1 = require("@selfcommunity/react-core");
 const types_1 = require("@selfcommunity/types");
-const Message_1 = __importDefault(require("../Message"));
+const PrivateMessageThreadItem_1 = __importDefault(require("../PrivateMessageThreadItem"));
 const lodash_1 = __importDefault(require("lodash"));
 const react_intl_1 = require("react-intl");
 const material_1 = require("@mui/material");
 const ConfirmDialog_1 = __importDefault(require("../../shared/ConfirmDialog/ConfirmDialog"));
-const MessageEditor_1 = __importDefault(require("../MessageEditor"));
+const PrivateMessageEditor_1 = __importDefault(require("../PrivateMessageEditor"));
 const Autocomplete_1 = __importDefault(require("@mui/material/Autocomplete"));
 const classnames_1 = __importDefault(require("classnames"));
 const notistack_1 = require("notistack");
@@ -56,159 +56,76 @@ const pubsub_js_1 = __importDefault(require("pubsub-js"));
 const system_1 = require("@mui/system");
 const Icon_1 = __importDefault(require("@mui/material/Icon"));
 const Skeleton_1 = __importDefault(require("./Skeleton"));
+const Errors_1 = require("../../constants/Errors");
+const utils_1 = require("@selfcommunity/utils");
+const HiddenPlaceholder_1 = __importDefault(require("../../shared/HiddenPlaceholder"));
 const messages = (0, react_intl_1.defineMessages)({
     placeholder: {
-        id: 'ui.thread.newMessage.autocomplete.placeholder',
-        defaultMessage: 'ui.thread.newMessage.autocomplete.placeholder'
+        id: 'ui.privateMessage.thread.newMessage.autocomplete.placeholder',
+        defaultMessage: 'ui.privateMessage.thread.newMessage.autocomplete.placeholder'
     }
 });
-const PREFIX = 'SCThread';
+const PREFIX = 'SCPrivateMessageThread';
 const classes = {
     root: `${PREFIX}-root`,
-    threadBox: `${PREFIX}-thread-box`,
-    emptyBox: `${PREFIX}-empty-box`,
-    newMessageBox: `${PREFIX}-new-message-box`,
-    newMessageEditor: `${PREFIX}-new-message-editor`,
-    newMessageEmptyBox: `${PREFIX}-new-message-empty-box`,
+    subHeader: `${PREFIX}-subheader`,
+    section: `${PREFIX}-section`,
+    mobileHeader: `${PREFIX}-mobile-header`,
+    mobileHeaderContent: `${PREFIX}-mobile-header-content`,
+    emptyMessage: `${PREFIX}-empty-message`,
     newMessageHeader: `${PREFIX}-new-message-header`,
+    newMessageHeaderContent: `${PREFIX}-new-message-header-content`,
+    newMessageHeaderIcon: `${PREFIX}-new-message-header-icon`,
     sender: `${PREFIX}-sender`,
     receiver: `${PREFIX}-receiver`,
-    center: `${PREFIX}-center`,
-    autocomplete: `${PREFIX}-autocomplete`,
-    toolBar: `${PREFIX}-tool-bar`
+    autocomplete: `${PREFIX}-autocomplete`
 };
 const Root = (0, styles_1.styled)(Widget_1.default, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    width: '600px',
-    height: '100%',
-    position: 'relative',
-    [theme.breakpoints.down('md')]: {
-        width: '100%',
-        boxShadow: 'none'
-        //overflow: 'auto'
-        //maxWidth: '345px'
-    },
-    [`& .${classes.threadBox}`]: {
-        [theme.breakpoints.up('sm')]: {
-            maxHeight: '540px',
-            overflow: 'auto'
-            // width: 'inherit',
-        }
-    },
-    [`& .${classes.emptyBox}`]: {
-        display: 'flex',
-        height: '100%',
-        background: theme.palette.grey['A200'],
-        justifyContent: 'center',
-        alignItems: 'center',
-        '& .MuiTypography-root': {
-            fontSize: '1.5rem'
-        },
-        minHeight: '550px',
-        [theme.breakpoints.down('md')]: {
-            maxHeight: '450px'
-        }
-    },
-    [`& .${classes.newMessageBox}`]: {
-        display: 'flex',
-        flexFlow: 'column',
-        height: '100%'
-    },
-    [`& .${classes.newMessageEditor}`]: {
-        flexGrow: 0,
-        flexShrink: 1,
-        flexBasis: '40px'
-    },
-    [`& .${classes.newMessageEmptyBox}`]: {
-        flexGrow: 1,
-        flexShrink: 1,
-        flexBasis: 'auto',
-        minHeight: '550px',
-        [theme.breakpoints.down('md')]: {
-            height: '450px'
-        }
-    },
-    [`& .${classes.sender}`]: {
-        display: 'flex',
-        justifyContent: 'flex-end',
-        '& .SCMessage-message-box': {
-            backgroundColor: theme.palette.grey[400]
-        }
-    },
-    [`& .${classes.receiver}`]: {
-        display: 'flex',
-        justifyContent: 'flex-start',
-        '& .SCMessage-message-box': {
-            backgroundColor: theme.palette.grey['A200']
-        },
-        '& .SCMessage-message-time': {
-            display: 'flex',
-            justifyContent: 'flex-start'
-        }
-    },
-    [`& .${classes.center}`]: {
-        display: 'flex',
-        justifyContent: 'center'
-    },
-    [`& .${classes.newMessageHeader}`]: {
-        marginLeft: theme.spacing(1),
-        marginTop: theme.spacing(1)
-    },
-    [`& .${classes.autocomplete}`]: {
-        marginRight: theme.spacing(1)
-    },
-    [`& .${classes.toolBar}`]: {
-        alignItems: 'center',
-        paddingLeft: '8px',
-        paddingRight: '8px',
-        justifyContent: 'space-between',
-        backgroundColor: theme.palette.primary.main
-    }
-}));
+})(({ theme }) => ({}));
 /**
  *
- > API documentation for the Community-JS 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.
 
  #### Import
 
  ```jsx
- import {Thread} from '@selfcommunity/react-ui';
+ import {PrivateMessageThread} from '@selfcommunity/react-ui';
  ```
 
  #### Component Name
 
- The name `SCThread` can be used when providing style overrides in the theme.
+ The name `SCPrivateMessageThread` can be used when providing style overrides in the theme.
 
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCThread-root|Styles applied to the root element.|
- |threadBox|.SCThread-thread-box|Styles applied to the thread box element.|
- |emptyBox|.SCThread-empty-box|Styles applied to the empty box element.|
- |newMessageBox|.SCThread-new-message-box|Styles applied to the new message box element.|
- |newMessageEditor|.SCThread-new-message-editor|Styles applied to the new message editor.|
- |newMessageEmptyBox|.SCThread-new-message-empty-box|Styles applied to the new message empty box element.|
- |newMessageHeader|.SCThread-new-message-header|Styles applied to the new message header section.|
- |sender|.SCThread-sender|Styles applied to the sender element.|
- |receiver|.SCThread-receiver|Styles applied to the receiver element.|
- |center|.SCThread-center|Styles applied to the center section.|
- |autocomplete|.SCThread-autocomplete|Styles applied to new message user insertion autocomplete.|
- |toolBar|.SCThread-toolBar|Styles applied to the toolBar element.|
+ |root|.SCPrivateMessageThread-root|Styles applied to the root 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.|
+ |mobileHeader|.SCPrivateMessageThread-mobile-header|Styles applied to mobile header element.|
+ |mobileHeaderContent|.SCPrivateMessageThread-mobile-header-content|Styles applied to mobile header 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.|
 
  * @param inProps
  */
-function Thread(inProps) {
+function PrivateMessageThread(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
         name: PREFIX
     });
-    const { userObj, autoHide, className, openNewMessage, onNewMessageSent, onMessageSent, shouldUpdate, onMessageBack, onMessageDelete } = props, rest = __rest(props, ["userObj", "autoHide", "className", "openNewMessage", "onNewMessageSent", "onMessageSent", "shouldUpdate", "onMessageBack", "onMessageDelete"]);
+    const { userObj, autoHide, className, openNewMessage, threadCallbacks } = props, rest = __rest(props, ["userObj", "autoHide", "className", "openNewMessage", "threadCallbacks"]);
     // CONTEXT
     const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
     const { enqueueSnackbar, closeSnackbar } = (0, notistack_1.useSnackbar)();
@@ -218,25 +135,26 @@ function Thread(inProps) {
     // STATE
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    const scFollowersManager = scUserContext.managers.followers;
     const [loading, setLoading] = (0, react_1.useState)(true);
     const [messageObjs, setMessageObjs] = (0, react_1.useState)([]);
-    const loggedUser = scUserContext.user && scUserContext.user.id;
     const [isHovered, setIsHovered] = (0, react_1.useState)({});
     const [openDeleteMessageDialog, setOpenDeleteMessageDialog] = (0, react_1.useState)(false);
     const [deletingMsg, setDeletingMsg] = (0, react_1.useState)(null);
     const [followers, setFollowers] = (0, react_1.useState)([]);
     const [recipients, setRecipients] = (0, react_1.useState)([]);
-    const [isFollowed, setIsFollowed] = (0, react_1.useState)(false);
+    const [isFollower, setIsFollower] = (0, react_1.useState)(false);
     const [receiver, setReceiver] = (0, react_1.useState)(null);
     const [newMessageThread, setNewMessageThread] = (0, react_1.useState)(false);
     const [newMessageUser, setNewMessageUser] = (0, react_1.useState)('');
     // REFS
     const refreshSubscription = (0, react_1.useRef)(null);
+    const authUserId = scUserContext.user ? scUserContext.user.id : null;
     // INTL
     const intl = (0, react_intl_1.useIntl)();
     // UTILS
     const format = (item) => intl.formatDate(item.created_at, {
-        weekday: 'long',
+        year: 'numeric',
         day: 'numeric',
         month: 'long'
     });
@@ -257,16 +175,19 @@ function Thread(inProps) {
             return Object.assign(Object.assign({}, prevState), { [index]: false });
         });
     };
-    const handleClose = () => {
+    const handleCloseDeleteDialog = () => {
         setOpenDeleteMessageDialog(false);
     };
-    function handleDeleteDialog(msg) {
+    const handleOpenDeleteDialog = (msg) => {
         setOpenDeleteMessageDialog(true);
         setDeletingMsg(msg);
-    }
+    };
     const selectRecipients = (event, recipient) => {
         setRecipients(recipient);
     };
+    /**
+     * Memoized message recipients ids
+     */
     const ids = (0, react_1.useMemo)(() => {
         if (recipients !== null && openNewMessage) {
             return recipients.map((u) => {
@@ -278,15 +199,15 @@ function Thread(inProps) {
         }
     }, [recipients]);
     /**
-     * Handles deletion of a single message
+     * Handles the deletion of a single message
      */
     function handleDelete() {
         api_services_1.PrivateMessageService.deleteAMessage(deletingMsg.id)
             .then(() => {
             const result = messageObjs.filter((m) => m.id !== deletingMsg.id);
             setMessageObjs(result);
-            shouldUpdate(true);
-            handleClose();
+            threadCallbacks.onMessageSentOrDeleted(result.length > 1 ? result.slice(-1)[0] : deletingMsg, 'deleted');
+            handleCloseDeleteDialog();
         })
             .catch((error) => {
             console.log(error);
@@ -298,6 +219,11 @@ function Thread(inProps) {
             });
         });
     }
+    /**
+     * Sends a message
+     * @param m
+     * @param f
+     */
     function sendMessage(m, f) {
         if (react_core_1.UserUtils.isBlocked(scUserContext.user)) {
             enqueueSnackbar(react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
@@ -318,10 +244,8 @@ function Thread(inProps) {
             })
                 .then((res) => {
                 setMessageObjs((prev) => [...prev, res.data]);
-                onMessageSent(res.data);
+                threadCallbacks.onMessageSentOrDeleted(res.data, 'sent');
                 if (openNewMessage || newMessageThread) {
-                    onNewMessageSent(res.data);
-                    shouldUpdate(true);
                     setNewMessageThread(false);
                     setRecipients([]);
                 }
@@ -338,40 +262,27 @@ function Thread(inProps) {
         }
     }
     /**
-     * Fetches user followers/connections
+     * Memoized fetchFollowers
      */
-    function fetchFollowers() {
+    const fetchFollowers = (0, react_1.useMemo)(() => () => {
         let fetch;
         if (followEnabled) {
-            fetch = api_services_1.UserService.getUserFollowers(scUserContext['user'].id);
+            fetch = api_services_1.UserService.getUserFollowers(authUserId);
         }
         else {
-            fetch = api_services_1.UserService.getUserConnections(scUserContext['user'].id);
+            fetch = api_services_1.UserService.getUserConnections(authUserId);
         }
-        fetch
+        return fetch
             .then((data) => {
             setFollowers(data.results);
-            if (data.results && userObj) {
-                let u;
-                if (typeof userObj === 'number') {
-                    u = userObj;
-                }
-                else {
-                    u = userObj.receiver.id;
-                }
-                setIsFollowed(data.results.some((f) => f.id === u));
-                const r = data.results.filter((o) => o.id === userObj);
-                setNewMessageUser(r[0]);
-            }
-            if (openNewMessage || newMessageThread || react_core_1.UserUtils.isStaff(scUserContext.user)) {
-                setIsFollowed(true);
-            }
             setLoading(false);
         })
             .catch((error) => {
+            setLoading(false);
             console.log(error);
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, { error });
         });
-    }
+    }, []);
     /**
      * Fetches thread
      */
@@ -395,7 +306,7 @@ function Thread(inProps) {
             const data = res.data;
             setMessageObjs(data.results);
             if (data.results.length) {
-                if (data.results[0].receiver.id !== loggedUser) {
+                if (data.results[0].receiver.id !== scUserContext.user.id) {
                     setReceiver(data.results[0].receiver);
                 }
                 else {
@@ -404,13 +315,15 @@ function Thread(inProps) {
                 setNewMessageThread(false);
             }
             else {
-                setNewMessageThread(true);
+                // setNewMessageThread(true);
                 setRecipients(u);
             }
             setLoading(false);
         })
             .catch((error) => {
+            setLoading(false);
             console.log(error);
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, { error });
         });
     }
     /**
@@ -418,14 +331,17 @@ function Thread(inProps) {
      * if openNewMessage is true, fetches user followers too.
      */
     (0, react_1.useEffect)(() => {
-        if (userObj) {
-            fetchThread();
-            fetchFollowers();
-        }
-        if (openNewMessage) {
-            fetchFollowers();
+        userObj && fetchThread();
+        openNewMessage && fetchFollowers();
+    }, [userObj, openNewMessage, authUserId]);
+    /**
+     * Checks is thread receiver is a user follower
+     */
+    (0, react_1.useEffect)(() => {
+        if (receiver) {
+            setIsFollower(scFollowersManager.isFollower(receiver));
         }
-    }, [userObj, openNewMessage]);
+    });
     /**
      * When a ws notification arrives, update data
      */
@@ -451,47 +367,41 @@ function Thread(inProps) {
      * @return {JSX.Element}
      */
     function renderThread() {
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            isMobile && receiver && (react_1.default.createElement(material_1.AppBar, { position: "fixed" },
-                react_1.default.createElement(material_1.Toolbar, { className: classes.toolBar },
-                    react_1.default.createElement(material_1.Box, { sx: { display: 'flex', justifyContent: 'flex-start', alignItems: 'center' } },
-                        react_1.default.createElement(Icon_1.default, { onClick: onMessageBack }, "chevron_left"),
-                        react_1.default.createElement(material_1.Avatar, { alt: receiver.username, src: receiver.avatar, sx: { marginRight: '8px' } }),
-                        react_1.default.createElement(material_1.Typography, { variant: "h6", color: "inherit", component: "div" }, receiver.username)),
-                    react_1.default.createElement(material_1.Box, { sx: { display: 'flex', justifyContent: 'flex-end', alignItems: 'center' } },
-                        react_1.default.createElement(Icon_1.default, { onClick: onMessageDelete }, "delete"))))),
-            react_1.default.createElement(material_1.Box, { className: classes.threadBox },
-                openDeleteMessageDialog && (react_1.default.createElement(ConfirmDialog_1.default, { open: openDeleteMessageDialog, title: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.thread.message.dialog.msg", defaultMessage: "ui.thread.message.dialog.msg" }), btnConfirm: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.thread.message.dialog.confirm", defaultMessage: "ui.thread.message.dialog.confirm" }), onConfirm: () => handleDelete(), onClose: handleClose })),
-                Object.keys(formattedMessages).map((key, index) => (react_1.default.createElement(react_1.default.Fragment, { key: index },
-                    react_1.default.createElement(material_1.ListSubheader, { className: classes.center }, key),
-                    formattedMessages[key].map((msg, index) => (react_1.default.createElement(material_1.Box, { key: index, className: loggedUser === msg.sender.id ? classes.sender : classes.receiver },
-                        react_1.default.createElement(Message_1.default, { elevation: 0, message: msg, key: msg.id, snippetType: false, onMouseEnter: () => handleMouseEnter(msg.id), onMouseLeave: () => handleMouseLeave(msg.id), isHovering: isHovered[msg.id], showDeleteIcon: loggedUser === msg.sender.id, onDeleteIconClick: () => handleDeleteDialog(msg) })))))))),
-            react_1.default.createElement(MessageEditor_1.default, { send: (m, f) => sendMessage(m, f), autoHide: !isFollowed, onThreadChangeId: userObj })));
+        return (react_1.default.createElement(material_1.CardContent, null,
+            isMobile && receiver && (react_1.default.createElement(material_1.Box, { className: classes.mobileHeader },
+                react_1.default.createElement(material_1.Box, { className: classes.mobileHeaderContent },
+                    react_1.default.createElement(Icon_1.default, { onClick: () => threadCallbacks.onMessageBack('default') }, "chevron_left"),
+                    react_1.default.createElement(material_1.Avatar, { alt: receiver.username, src: receiver.avatar }),
+                    react_1.default.createElement(material_1.Typography, { variant: "body1", color: "inherit" }, receiver.username)),
+                react_1.default.createElement(Icon_1.default, { fontSize: "medium", onClick: threadCallbacks.onThreadDelete }, "delete"))),
+            openDeleteMessageDialog && (react_1.default.createElement(ConfirmDialog_1.default, { open: openDeleteMessageDialog, title: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.privateMessage.thread.message.dialog.msg", defaultMessage: "ui.privateMessage.thread.message.dialog.msg" }), btnConfirm: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.privateMessage.thread.message.dialog.confirm", defaultMessage: "ui.privateMessage.thread.message.dialog.confirm" }), onConfirm: () => handleDelete(), onClose: handleCloseDeleteDialog })),
+            react_1.default.createElement(material_1.List, { subheader: react_1.default.createElement("li", null) }, Object.keys(formattedMessages).map((key, index) => (react_1.default.createElement("li", { key: key, className: classes.section },
+                react_1.default.createElement("ul", null,
+                    react_1.default.createElement(material_1.ListSubheader, null,
+                        react_1.default.createElement(material_1.Typography, { align: "center", className: classes.subHeader }, key)),
+                    formattedMessages[key].map((msg, index) => (react_1.default.createElement(PrivateMessageThreadItem_1.default, { className: scUserContext['user'].id === 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: scUserContext['user'].id === msg.sender.id, onMenuIconClick: () => handleOpenDeleteDialog(msg) })))))))),
+            react_1.default.createElement(PrivateMessageEditor_1.default, { send: (m, f) => sendMessage(m, f), autoHide: !isFollower, onThreadChangeId: userObj })));
     }
     /**
      * Renders empty box (when there is no thread open) or new message box
      * @return {JSX.Element}
      */
     function renderNewOrNoMessageBox() {
-        return (react_1.default.createElement(react_1.default.Fragment, null, openNewMessage || newMessageThread ? (react_1.default.createElement(material_1.Box, { className: classes.newMessageBox },
-            react_1.default.createElement(material_1.Box, { sx: { flexGrow: 0, flexShrink: 1, flexBasis: 'auto' } },
-                react_1.default.createElement(material_1.Grid, { container: true, className: classes.newMessageHeader },
-                    react_1.default.createElement(material_1.Grid, { item: true, xs: 4, sx: { display: 'flex', alignItems: 'center' } },
-                        isMobile && react_1.default.createElement(Icon_1.default, { onClick: () => onMessageBack('default') }, "chevron_left"),
-                        react_1.default.createElement(Icon_1.default, { sx: { marginRight: '8px' }, fontSize: "small" }, "person"),
-                        react_1.default.createElement(material_1.Typography, { sx: { fontWeight: 'bold' } },
-                            react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.thread.newMessage.to", id: "ui.thread.newMessage.to" }))),
-                    react_1.default.createElement(material_1.Grid, { item: true, xs: 8 },
-                        react_1.default.createElement(Autocomplete_1.default, { className: classes.autocomplete, multiple: !newMessageThread, freeSolo: true, options: followers, value: newMessageThread ? newMessageUser : recipients, getOptionLabel: (option) => (option ? option.username : '...'), renderInput: (params) => (react_1.default.createElement(material_1.TextField, Object.assign({}, params, { placeholder: `${intl.formatMessage(messages.placeholder)}`, variant: "standard", InputProps: Object.assign(Object.assign({}, params.InputProps), { disableUnderline: true }) }))), onChange: selectRecipients, disabled: !followers })))),
-            react_1.default.createElement(material_1.Box, { className: classes.newMessageEmptyBox }),
-            react_1.default.createElement(material_1.Box, { className: classes.newMessageEditor },
-                react_1.default.createElement(MessageEditor_1.default, { send: (m, f) => sendMessage(m, f), autoHide: !followers })))) : (react_1.default.createElement(material_1.Box, { className: classes.emptyBox },
-            react_1.default.createElement(material_1.Typography, { component: "h3" },
-                react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.thread.emptyBox.message", defaultMessage: "ui.thread.emptyBox.message" }))))));
+        return (react_1.default.createElement(material_1.CardContent, null, openNewMessage || newMessageThread ? (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(material_1.Box, { className: classes.newMessageHeader },
+                react_1.default.createElement(material_1.Box, { className: classes.newMessageHeaderContent },
+                    react_1.default.createElement(Icon_1.default, { className: classes.newMessageHeaderIcon }, "person"),
+                    react_1.default.createElement(material_1.Typography, null,
+                        react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.privateMessage.thread.newMessage.to", id: "ui.privateMessage.thread.newMessage.to" })),
+                    react_1.default.createElement(Autocomplete_1.default, { className: classes.autocomplete, multiple: !newMessageThread, limitTags: 3, freeSolo: true, options: followers, value: newMessageThread ? newMessageUser : recipients, getOptionLabel: (option) => (option ? option.username : '...'), renderInput: (params) => (react_1.default.createElement(material_1.TextField, Object.assign({}, params, { placeholder: `${intl.formatMessage(messages.placeholder)}`, variant: "standard", InputProps: Object.assign(Object.assign({}, params.InputProps), { disableUnderline: true }) }))), onChange: selectRecipients, disabled: !followers })),
+                react_1.default.createElement(material_1.IconButton, { size: "small", onClick: threadCallbacks.onMessageBack },
+                    react_1.default.createElement(Icon_1.default, { fontSize: "small" }, "close"))),
+            react_1.default.createElement(PrivateMessageEditor_1.default, { send: (m, f) => sendMessage(m, f), autoHide: !followers }))) : (react_1.default.createElement(material_1.Typography, { component: "span", className: classes.emptyMessage },
+            react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.privateMessage.thread.emptyBox.message", defaultMessage: "ui.privateMessage.thread.emptyBox.message" })))));
     }
     // Anonymous
     if (!scUserContext.user) {
-        return null;
+        return react_1.default.createElement(HiddenPlaceholder_1.default, null);
     }
     if (loading && userObj) {
         return react_1.default.createElement(Skeleton_1.default, null);
@@ -504,5 +414,5 @@ function Thread(inProps) {
     }
     return null;
 }
-exports.default = Thread;
-//# sourceMappingURL=Thread.js.map
+exports.default = PrivateMessageThread;
+//# sourceMappingURL=PrivateMessageThread.js.map

package/lib/cjs/components/PrivateMessageThread/PrivateMessageThread.js.map

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

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

@@ -0,0 +1,23 @@
+/**
+ * > API documentation for the Community-JS PrivateMessage Thread Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {PrivateMessageThreadSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCPrivateMessageThreadSkeleton` 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.|
+ *
+ */
+export default function PrivateMessageThreadSkeleton(props: any): JSX.Element;
+//# sourceMappingURL=Skeleton.d.ts.map

package/lib/cjs/components/PrivateMessageThread/Skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/PrivateMessageThread/Skeleton.tsx"],"names":[],"mappings":"AA8BA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,OAAO,UAAU,4BAA4B,CAAC,KAAK,KAAA,GAAG,GAAG,CAAC,OAAO,CAsBvE"}