- {renderContent(content_type, content)}
+ {edit ? (
+
+ ) : (
+ renderContent(content_type, content, edited)
+ )}
- uids.includes(currUser.uid))
+ .map(([reaction]) => {
+ return reaction;
+ })}
+ mid={mid}
+ uid={fromUid}
+ toggleMenu={toggleMenu}
+ menuVisible={menuVisible}
+ emojiPopVisible={emojiPopVisible}
+ toggleEmojiPopover={toggleEmojiPopover}
+ toggleEditMessage={toggleEditMessage}
+ />
+ )}
);
}
diff --git a/src/common/component/Message/renderContent.js b/src/common/component/Message/renderContent.js
index 82733aaa..eec55c84 100644
--- a/src/common/component/Message/renderContent.js
+++ b/src/common/component/Message/renderContent.js
@@ -1,19 +1,30 @@
import Linkify from "react-linkify";
+import dayjs from "dayjs";
import BASE_URL from "../../../app/config";
-const renderContent = (type, content) => {
+const renderContent = (type, content, edited = false) => {
let ctn = null;
switch (type) {
case "text/plain":
ctn = (
- (
-
- {decoratedText}
-
+ <>
+ (
+
+ {decoratedText}
+
+ )}
+ >
+ {content}
+
+ {edited && (
+
+ (edited)
+
)}
- >
- {content}
-
+
);
break;
case "image/jpeg":
diff --git a/src/common/component/Message/styled.js b/src/common/component/Message/styled.js
index 2d7d0b4a..69689cd3 100644
--- a/src/common/component/Message/styled.js
+++ b/src/common/component/Message/styled.js
@@ -26,6 +26,7 @@ const StyledMsg = styled.div`
}
}
.details {
+ width: 100%;
display: flex;
flex-direction: column;
gap: 8px;
@@ -78,6 +79,11 @@ const StyledMsg = styled.div`
line-height: 20px;
word-break: break-all;
white-space: break-spaces;
+ .edited {
+ margin-left: 5px;
+ color: #999;
+ font-size: 10px;
+ }
&.pending {
opacity: 0.5;
}
diff --git a/src/common/component/NotificationHub/useMessageHandler.js b/src/common/component/NotificationHub/useMessageHandler.js
index 643aaf02..c1395fc0 100644
--- a/src/common/component/NotificationHub/useMessageHandler.js
+++ b/src/common/component/NotificationHub/useMessageHandler.js
@@ -1,10 +1,12 @@
// import React from "react";
import {
+ updateChannelMsg,
addChannelMsg,
deleteChannelMsg,
likeChannelMsg,
} from "../../../app/slices/message.channel";
import {
+ updateUserMsg,
addUserMsg,
deleteUserMsg,
likeUserMsg,
@@ -14,15 +16,27 @@ import { useDispatch } from "react-redux";
export default function useMessageHandler(currUser) {
const { showNotification } = useNotification();
const dispatch = useDispatch();
- const handleReaction = ({ from = "user", id, mid, detail = {} }) => {
+ const dispatchReaction = ({
+ to = "user",
+ id,
+ from_uid,
+ mid,
+ created_at,
+ detail = {},
+ }) => {
const { type = "" } = detail;
- const deleteMsg = from == "user" ? deleteUserMsg : deleteChannelMsg;
- const likeMsg = from == "user" ? likeUserMsg : likeChannelMsg;
+ const updateMsg = to == "user" ? updateUserMsg : updateChannelMsg;
+ const deleteMsg = to == "user" ? deleteUserMsg : deleteChannelMsg;
+ const likeMsg = to == "user" ? likeUserMsg : likeChannelMsg;
switch (type) {
case "edit":
+ {
+ const { content } = detail;
+ dispatch(updateMsg({ id, mid, content, time: created_at }));
+ }
break;
case "like":
- dispatch(likeMsg({ id, mid, action: detail.action }));
+ dispatch(likeMsg({ id, from_uid, mid, action: detail.action }));
break;
case "delete":
dispatch(deleteMsg({ id, mid }));
@@ -32,98 +46,20 @@ export default function useMessageHandler(currUser) {
break;
}
};
- const handleUserMessage = ({
- self = false,
- uid,
- from_uid,
- created_at,
- content,
- mid,
- detailMid,
- content_type,
- expires_in,
- type,
- detail,
- }) => {
- switch (type) {
- case "normal":
- dispatch(
- addUserMsg({
- // 此处需要特别注意
- id: self ? uid : from_uid,
- from_uid: from_uid,
- unread: !self,
- created_at,
- mid,
- content,
- content_type,
- expires_in,
- type,
- })
- );
- break;
- case "reaction":
- handleReaction({
- from: "user",
- id: self ? uid : from_uid,
- mid: detailMid,
- detail,
- });
- break;
- default:
- break;
- }
- if (!self && type == "normal") {
+ const dispatchAddMessage = ({ to = "user", id, self = false, common }) => {
+ const addMessage = to == "user" ? addUserMsg : addChannelMsg;
+ dispatch(
+ addMessage({
+ id, // 自己发的 就不用标记未读
+ unread: !self,
+ ...common,
+ })
+ );
+ if (!self) {
showNotification({
- body: content,
+ body: common.content,
data: {
- path: `/chat/dm/${from_uid}`,
- },
- });
- }
- };
- const handleChannelMessage = ({
- gid,
- from_uid,
- created_at,
- content,
- mid,
- detailMid,
- content_type,
- expires_in,
- type,
- detail,
- }) => {
- const isSelf = from_uid == currUser.uid;
- switch (type) {
- case "normal":
- dispatch(
- addChannelMsg({
- id: gid,
- from_uid,
- // 自己发的 就不用标记未读
- unread: !isSelf,
- created_at,
- mid,
- content,
- content_type,
- expires_in,
- type,
- })
- );
- break;
- case "reaction":
- handleReaction({ from: "channel", id: gid, mid: detailMid, detail });
- break;
- default:
- break;
- }
- // group message notification
- if (!isSelf && type == "normal") {
- showNotification({
- body: content,
- data: {
- path: `/chat/channel/${gid}`,
+ path: `/chat/${to}/${id}`,
},
});
}
@@ -143,35 +79,37 @@ export default function useMessageHandler(currUser) {
detail = {},
},
} = data;
- if (typeof target.gid !== "undefined") {
- // channel message
- handleChannelMessage({
- gid: target.gid,
- created_at,
- mid,
- detailMid,
- from_uid,
- content,
- content_type,
- expires_in,
- type,
- detail,
- });
- } else {
- const isSelf = data.from_uid == currUser.uid;
- handleUserMessage({
- self: isSelf,
- uid: target.uid,
- from_uid,
- created_at,
- content,
- mid,
- detailMid,
- content_type,
- expires_in,
- type,
- detail,
- });
+ const to = typeof target.gid !== "undefined" ? "channel" : "user";
+ const self = from_uid == currUser.uid;
+ const id = to == "user" ? (self ? target.uid : from_uid) : target.gid;
+ switch (type) {
+ case "normal":
+ {
+ dispatchAddMessage({
+ to,
+ id,
+ self,
+ common: {
+ mid,
+ content,
+ content_type,
+ from_uid,
+ created_at,
+ expires_in,
+ },
+ });
+ }
+ break;
+ case "reaction": {
+ dispatchReaction({
+ to,
+ id,
+ from_uid,
+ created_at,
+ mid: detailMid,
+ detail,
+ });
+ }
}
};
return handleMessage;
diff --git a/src/common/component/Send/index.js b/src/common/component/Send/index.js
index 11da35b1..4291d85c 100644
--- a/src/common/component/Send/index.js
+++ b/src/common/component/Send/index.js
@@ -92,6 +92,12 @@ export default function Send({
+ e.currentTarget.setSelectionRange(
+ e.currentTarget.value.length,
+ e.currentTarget.value.length
+ )
+ }
ref={inputRef}
className="content"
maxRows={8}
diff --git a/src/common/utils.js b/src/common/utils.js
index a6c71a3c..82bba118 100644
--- a/src/common/utils.js
+++ b/src/common/utils.js
@@ -46,8 +46,12 @@ export const getInitialsAvatar = ({
context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = background;
context.fill();
- context.font = `${weight} ${initial_size || height / 2}px ${fontFamily}`;
+ // 两个字符，自动缩放40
+ context.font = `${weight} ${
+ ((initial_size || height) - (initials.length == 2 ? 40 : 0)) / 2
+ }px ${fontFamily}`;
context.textAlign = "center";
+
context.textBaseline = "middle";
context.fillStyle = foreground;
context.fillText(initials, width / 2, height / 2);
diff --git a/src/routes/chat/ChannelChat/index.js b/src/routes/chat/ChannelChat/index.js
index 1fecabc4..4c39215b 100644
--- a/src/routes/chat/ChannelChat/index.js
+++ b/src/routes/chat/ChannelChat/index.js
@@ -104,7 +104,7 @@ export default function ChannelChat({
.map(([mid, msg]) => {
if (!msg) return null;
const {
- likes = null,
+ likes = {},
pending = false,
from_uid,
content,
@@ -112,9 +112,11 @@ export default function ChannelChat({
created_at,
unread,
removed = false,
+ edited,
} = msg;
return (
{menuVisible && (