@droppii-org/chat-sdk 0.1.0 → 0.1.2

package/dist/components/message/MessageList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/message/MessageList.tsx"],"names":[],"mappings":"AAwBA,UAAU,gBAAgB;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAGD,QAAA,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CA+M3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/message/MessageList.tsx"],"names":[],"mappings":"AAwBA,UAAU,gBAAgB;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAGD,QAAA,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CAqN3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/message/MessageList.js

@@ -126,10 +126,11 @@ const MessageList = (props) => {
     if (!conversationData) {
         return (_jsx("div", { className: "flex flex-1 items-center justify-center h-full", children: _jsx(Empty, { description: t("no_conversation_data") }) }));
     }
-    return (_jsxs("div", { className: "flex flex-col flex-1 relative h-full", style: {
+    return (_jsxs("div", { className: "flex flex-col flex-1 relative h-full min-w-0", style: {
             backgroundImage: `url(${images.conversationBg})`,
             backgroundSize: "cover",
             backgroundPosition: "center",
+            overflowX: "hidden",
         }, children: [_jsx(MessageHeader, { onClose: onClose, currentSession: currentSession }), _jsx("div", { id: "scrollableMessagesDiv", ref: scrollRef, style: {
                     height: "100%",
                     overflowY: "auto",
@@ -137,7 +138,12 @@ const MessageList = (props) => {
                     display: "flex",
                     flexDirection: "column-reverse",
                     paddingBottom: 12,
-                }, children: _jsx(InfiniteScroll, { dataLength: ((_a = loadState.messageList) === null || _a === void 0 ? void 0 : _a.length) || 0, next: loadMoreOldMessage, style: { display: "flex", flexDirection: "column-reverse" }, inverse: true, hasMore: loadState.hasMoreOld, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: "scrollableMessagesDiv", onScroll: (e) => {
+                }, children: _jsx(InfiniteScroll, { dataLength: ((_a = loadState.messageList) === null || _a === void 0 ? void 0 : _a.length) || 0, next: loadMoreOldMessage, style: {
+                        display: "flex",
+                        flexDirection: "column-reverse",
+                        minWidth: 0,
+                        width: "100%"
+                    }, inverse: true, hasMore: loadState.hasMoreOld, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: "scrollableMessagesDiv", onScroll: (e) => {
                         const target = e.target;
                         if (target.scrollTop > BOTTOM_THRESHOLD) {
                             handleMarkConversationMessageAsRead();

package/dist/components/message/item/MessageStatusIndicator.d.ts

@@ -0,0 +1,8 @@
+import { MessageItem } from "@openim/wasm-client-sdk";
+interface Props {
+    message: MessageItem;
+    isLatest: boolean;
+}
+declare const MessageStatusIndicator: ({ message, isLatest }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export default MessageStatusIndicator;
+//# sourceMappingURL=MessageStatusIndicator.d.ts.map

package/dist/components/message/item/MessageStatusIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageStatusIndicator.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/MessageStatusIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAiB,MAAM,yBAAyB,CAAC;AAOrE,UAAU,KAAK;IACb,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,sBAAsB,GAAI,uBAAuB,KAAK,mDAkB3D,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/dist/components/message/item/MessageStatusIndicator.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MessageStatus } from "@openim/wasm-client-sdk";
+import { LoadingOutlined, CheckCircleFilled, ExclamationCircleFilled, } from "@ant-design/icons";
+const MessageStatusIndicator = ({ message, isLatest }) => {
+    if (message.status === MessageStatus.Sending) {
+        return _jsx(LoadingOutlined, { className: "text-gray-400 text-sm" });
+    }
+    if (message.status === MessageStatus.Succeed && isLatest) {
+        return _jsx(CheckCircleFilled, { className: "text-blue-500 text-sm" });
+    }
+    if (message.status === MessageStatus.Failed) {
+        return (_jsx(ExclamationCircleFilled, { className: "text-red-500 text-sm" }));
+    }
+    return null;
+};
+export default MessageStatusIndicator;

package/dist/components/message/item/TextMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/TextMessage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAe,MAAM,yBAAyB,CAAC;AAInE,UAAU,oBAAoB;IAC5B,OAAO,EAAE,WAAW,CAAC;CACtB;AACD,QAAA,MAAM,eAAe,GAAI,OAAO,oBAAoB,mDAiCnD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"TextMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/TextMessage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAe,MAAM,yBAAyB,CAAC;AAKnE,UAAU,oBAAoB;IAC5B,OAAO,EAAE,WAAW,CAAC;CACtB;AACD,QAAA,MAAM,eAAe,GAAI,OAAO,oBAAoB,mDAoCnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/message/item/TextMessage.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { MessageType } from "@openim/wasm-client-sdk";
 import { useAuthStore } from "../../..";
+import { sanitizeHtml } from "../../../utils/common";
 const TextMessageItem = (props) => {
     var _a, _b, _c;
     const { message } = props;
@@ -20,7 +21,9 @@ const TextMessageItem = (props) => {
     if (Object.keys(extendMessageInfo).length > 0 &&
         (extendMessageInfo === null || extendMessageInfo === void 0 ? void 0 : extendMessageInfo.messageInfo)) {
         const htmlContent = ((_b = (_a = extendMessageInfo === null || extendMessageInfo === void 0 ? void 0 : extendMessageInfo.messageInfo) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.content) || "";
-        return (_jsx("div", { className: "!text-sm sm:text-base break-words whitespace-pre-line flex-1", dangerouslySetInnerHTML: { __html: htmlContent } }));
+        // 🔒 Sanitize HTML to prevent XSS attacks
+        const sanitizedContent = sanitizeHtml(htmlContent);
+        return (_jsx("div", { className: "!text-sm sm:text-base break-words whitespace-pre-line flex-1", style: { wordBreak: "break-word", overflowWrap: "anywhere" }, dangerouslySetInnerHTML: { __html: sanitizedContent } }));
     }
     return (_jsx("span", { className: "!text-sm sm:text-base whitespace-pre-wrap", children: ((_c = message === null || message === void 0 ? void 0 : message.textElem) === null || _c === void 0 ? void 0 : _c.content) || "" }));
 };

package/dist/components/message/item/UrlTextMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UrlTextMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/UrlTextMessage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAMtD,UAAU,uBAAuB;IAC/B,OAAO,EAAE,WAAW,CAAC;CACtB;AACD,QAAA,MAAM,kBAAkB,GAAI,OAAO,uBAAuB,4CAiEzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"UrlTextMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/UrlTextMessage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAMtD,UAAU,uBAAuB;IAC/B,OAAO,EAAE,WAAW,CAAC;CACtB;AACD,QAAA,MAAM,kBAAkB,GAAI,OAAO,uBAAuB,4CAwEzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/message/item/UrlTextMessage.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getHostFromUrl, wrapLinksInHtml } from "../../../utils/common";
+import { getHostFromUrl, wrapLinksInHtml, sanitizeHtml } from "../../../utils/common";
 import { useFetchExternalLink } from "../../../hooks/common/useFetchExternalLink";
 import { Image } from "antd";
 const UrlTextMessageItem = (props) => {
@@ -23,8 +23,10 @@ const UrlTextMessageItem = (props) => {
     if (Object.keys(extendMessageInfo).length > 0 &&
         (extendMessageInfo === null || extendMessageInfo === void 0 ? void 0 : extendMessageInfo.messageInfo)) {
         const htmlContent = ((_d = (_c = extendMessageInfo === null || extendMessageInfo === void 0 ? void 0 : extendMessageInfo.messageInfo) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.content) || "";
-        return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "!text-sm sm:text-base break-words whitespace-pre-line flex-1 break-all", dangerouslySetInnerHTML: { __html: wrapLinksInHtml(htmlContent) } }), !!externalLinkData && (_jsxs("div", { className: "flex items-center rounded-md px-3 py-2 border-l-4 border-l-blue-500 bg-blue-50 gap-2 cursor-pointer", onClick: () => onPressExternalLink((externalLinkData === null || externalLinkData === void 0 ? void 0 : externalLinkData.url) || ""), children: [_jsxs("div", { className: "flex flex-1 flex-col gap-1", children: [(externalLinkData === null || externalLinkData === void 0 ? void 0 : externalLinkData.title) && (_jsx("span", { className: "!text-sm font-semibold truncate", children: externalLinkData === null || externalLinkData === void 0 ? void 0 : externalLinkData.title })), (externalLinkData === null || externalLinkData === void 0 ? void 0 : externalLinkData.description) && (_jsx("span", { className: "!text-sm text-gray-500 line-clamp-2", children: externalLinkData === null || externalLinkData === void 0 ? void 0 : externalLinkData.description })), (externalLinkData === null || externalLinkData === void 0 ? void 0 : externalLinkData.url) && (_jsx("span", { className: "!text-sm font-medium text-blue-500", children: getHostFromUrl(externalLinkData === null || externalLinkData === void 0 ? void 0 : externalLinkData.url) }))] }), ((_e = externalLinkData === null || externalLinkData === void 0 ? void 0 : externalLinkData.logo) === null || _e === void 0 ? void 0 : _e.url) && (_jsx(Image, { src: (_f = externalLinkData === null || externalLinkData === void 0 ? void 0 : externalLinkData.logo) === null || _f === void 0 ? void 0 : _f.url, width: 48, height: 48 }))] }))] }));
+        // 🔒 Sanitize HTML to prevent XSS attacks
+        const sanitizedContent = sanitizeHtml(wrapLinksInHtml(htmlContent));
+        return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "!text-sm sm:text-base break-words whitespace-pre-line flex-1", style: { wordBreak: "break-word", overflowWrap: "anywhere" }, dangerouslySetInnerHTML: { __html: sanitizedContent } }), !!externalLinkData && (_jsxs("div", { className: "flex items-center rounded-md px-3 py-2 border-l-4 border-l-blue-500 bg-blue-50 gap-2 cursor-pointer overflow-hidden", style: { wordBreak: "break-word", overflowWrap: "anywhere" }, onClick: () => onPressExternalLink((externalLinkData === null || externalLinkData === void 0 ? void 0 : externalLinkData.url) || ""), children: [_jsxs("div", { className: "flex flex-1 flex-col gap-1", children: [(externalLinkData === null || externalLinkData === void 0 ? void 0 : externalLinkData.title) && (_jsx("span", { className: "!text-sm font-semibold truncate", children: externalLinkData === null || externalLinkData === void 0 ? void 0 : externalLinkData.title })), (externalLinkData === null || externalLinkData === void 0 ? void 0 : externalLinkData.description) && (_jsx("span", { className: "!text-sm text-gray-500 line-clamp-2", children: externalLinkData === null || externalLinkData === void 0 ? void 0 : externalLinkData.description })), (externalLinkData === null || externalLinkData === void 0 ? void 0 : externalLinkData.url) && (_jsx("span", { className: "!text-sm font-medium text-blue-500", children: getHostFromUrl(externalLinkData === null || externalLinkData === void 0 ? void 0 : externalLinkData.url) }))] }), ((_e = externalLinkData === null || externalLinkData === void 0 ? void 0 : externalLinkData.logo) === null || _e === void 0 ? void 0 : _e.url) && (_jsx(Image, { src: (_f = externalLinkData === null || externalLinkData === void 0 ? void 0 : externalLinkData.logo) === null || _f === void 0 ? void 0 : _f.url, width: 48, height: 48 }))] }))] }));
     }
-    return (_jsx("span", { className: "!text-sm sm:text-base break-words whitespace-pre-line flex-1 break-all", children: ((_h = (_g = message === null || message === void 0 ? void 0 : message.urlTextElem) === null || _g === void 0 ? void 0 : _g.urls) === null || _h === void 0 ? void 0 : _h[0]) || "" }));
+    return (_jsx("span", { className: "!text-sm sm:text-base break-words whitespace-pre-line flex-1", style: { wordBreak: "break-word", overflowWrap: "anywhere" }, children: ((_h = (_g = message === null || message === void 0 ? void 0 : message.urlTextElem) === null || _g === void 0 ? void 0 : _g.urls) === null || _h === void 0 ? void 0 : _h[0]) || "" }));
 };
 export default UrlTextMessageItem;

package/dist/components/message/item/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,WAAW,IAAI,eAAe,EAE/B,MAAM,yBAAyB,CAAC;AAgBjC,UAAU,gBAAgB;IACxB,OAAO,EAAE,eAAe,CAAC;IACzB,WAAW,EAAE,eAAe,EAAE,CAAC;CAChC;AAED,QAAA,MAAM,WAAW,GAAI,0BAA0B,gBAAgB,mDAgI9D,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,WAAW,IAAI,eAAe,EAG/B,MAAM,yBAAyB,CAAC;AAmBjC,UAAU,gBAAgB;IACxB,OAAO,EAAE,eAAe,CAAC;IACzB,WAAW,EAAE,eAAe,EAAE,CAAC;CAChC;AAED,QAAA,MAAM,WAAW,GAAI,0BAA0B,gBAAgB,mDA6J9D,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/message/item/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import dayjs from "dayjs";
 import clsx from "clsx";
 import { Avatar } from "antd";
-import { MessageType, } from "@openim/wasm-client-sdk";
+import { MessageStatus, MessageType, } from "@openim/wasm-client-sdk";
 import TextMessageItem from "./TextMessage";
 import ImageMessageItem from "./ImageMessage";
 import FileMessageItem from "./FileMessage";
@@ -13,9 +13,14 @@ import { formatTimestamp } from "../../../utils/common";
 import useAuthStore from "../../../store/auth";
 import useConversationStore from "../../../store/conversation";
 import { useMemo } from "react";
+import { Trans, useTranslation } from "react-i18next";
 import UrlTextMessageItem from "./UrlTextMessage";
+import MessageStatusIndicator from "./MessageStatusIndicator";
+import { useSendMessage, isMediaResendable } from "../../../hooks/message/useSendMessage";
 const MessageItem = ({ message, allMessages }) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
+    const { t } = useTranslation();
+    const { resendMessage } = useSendMessage();
     const userID = useAuthStore((state) => state.userID);
     const isCrm = useAuthStore((state) => state.isCrm);
     const conversationData = useConversationStore((state) => state.conversationData);
@@ -49,6 +54,8 @@ const MessageItem = ({ message, allMessages }) => {
     if (!isVisibleGroup)
         return null;
     const isMine = (message === null || message === void 0 ? void 0 : message.sendID) === userID;
+    const isLatestMine = ((_a = allMessages.find((m) => m.sendID === userID)) === null || _a === void 0 ? void 0 : _a.clientMsgID) ===
+        message.clientMsgID;
     const previousMessage = getVisibleNeighbor(allMessages, message, "prev");
     const nextMessage = getVisibleNeighbor(allMessages, message, "next");
     const prevSameUser = (previousMessage === null || previousMessage === void 0 ? void 0 : previousMessage.sendID) === (message === null || message === void 0 ? void 0 : message.sendID);
@@ -61,10 +68,12 @@ const MessageItem = ({ message, allMessages }) => {
     if (!isCrm && MessageType.CustomMessage === (message === null || message === void 0 ? void 0 : message.contentType)) {
         return null;
     }
-    return (_jsxs("div", { className: "flex flex-col gap-2 py-1 px-3 sm:p x-4", id: `${MSG_ITEM_PREFIX}${message === null || message === void 0 ? void 0 : message.clientMsgID}`, children: [showTimeBreak && (_jsx("div", { className: "flex justify-center", children: _jsx("span", { className: "text-xs text-gray-600 text-center bg-neutral-100 px-2 py-1 rounded-full", children: formatTimestamp(message.sendTime, {
+    return (_jsxs("div", { className: "flex flex-col gap-2 py-1 px-3 sm:px-4 min-w-0", id: `${MSG_ITEM_PREFIX}${message === null || message === void 0 ? void 0 : message.clientMsgID}`, children: [showTimeBreak && (_jsx("div", { className: "flex justify-center", children: _jsx("span", { className: "text-xs text-gray-600 text-center bg-neutral-100 px-2 py-1 rounded-full", children: formatTimestamp(message.sendTime, {
                         dateMonthFormat: "DD MMMM",
-                    }) }) })), _jsx("div", { className: clsx("flex", isMine ? "justify-end" : "justify-start"), children: _jsxs("div", { className: clsx("flex flex-1 items-end gap-2", isMine ? "justify-end" : "justify-start"), children: [!isMine && showSenderInfo && (_jsx("div", { className: "flex items-center justify-center w-[32px] h-[32px]", children: showSenderAvatar && (_jsx(Avatar, { src: message === null || message === void 0 ? void 0 : message.senderFaceUrl, children: ((_b = (_a = message === null || message === void 0 ? void 0 : message.senderNickname) === null || _a === void 0 ? void 0 : _a.charAt) === null || _b === void 0 ? void 0 : _b.call(_a, 0)) || "A" })) })), _jsxs("div", { className: clsx("flex flex-col flex-[0.8]", isMine ? "items-end" : "items-start"), children: [showSenderName && showSenderInfo && (_jsx("span", { className: "text-xs text-gray-500 mb-1 px-3", children: message === null || message === void 0 ? void 0 : message.senderNickname })), _jsxs("div", { className: clsx("px-3 py-2 rounded-2xl max-w-full break-words flex flex-col flex-1 text-gray-900 gap-1", isMine ? "bg-blue-100" : "bg-white"), id: `${MSG_ITEM_CONTENT_PREFIX}${message === null || message === void 0 ? void 0 : message.clientMsgID}`, children: [(message === null || message === void 0 ? void 0 : message.contentType) === MessageType.MergeMessage ? (_jsxs("div", { children: [(_d = (_c = message === null || message === void 0 ? void 0 : message.mergeElem) === null || _c === void 0 ? void 0 : _c.multiMessage) === null || _d === void 0 ? void 0 : _d.map((item) => {
-                                                    return renderMessageByType(item);
-                                                }), (message === null || message === void 0 ? void 0 : message.textElem) && _jsx(TextMessageItem, { message: message })] })) : (renderMessageByType(message)), _jsx("span", { className: clsx("text-xs text-gray-500 text-right"), children: dayjs(message === null || message === void 0 ? void 0 : message.sendTime).format("HH:mm") })] })] })] }) }, message === null || message === void 0 ? void 0 : message.clientMsgID)] }, message === null || message === void 0 ? void 0 : message.clientMsgID));
+                    }) }) })), _jsx("div", { className: clsx("flex min-w-0", isMine ? "justify-end" : "justify-start"), children: _jsxs("div", { className: clsx("flex flex-1 items-end gap-2 min-w-0", isMine ? "justify-end" : "justify-start"), children: [!isMine && showSenderInfo && (_jsx("div", { className: "flex items-center justify-center w-[32px] h-[32px]", children: showSenderAvatar && (_jsx(Avatar, { src: message === null || message === void 0 ? void 0 : message.senderFaceUrl, children: ((_c = (_b = message === null || message === void 0 ? void 0 : message.senderNickname) === null || _b === void 0 ? void 0 : _b.charAt) === null || _c === void 0 ? void 0 : _c.call(_b, 0)) || "A" })) })), _jsxs("div", { className: clsx("flex flex-col flex-[0.8] min-w-0", isMine ? "items-end" : "items-start"), children: [showSenderName && showSenderInfo && (_jsx("span", { className: "text-xs text-gray-500 mb-1 px-3", children: message === null || message === void 0 ? void 0 : message.senderNickname })), _jsxs("div", { className: "flex items-end gap-1.5", children: [isMine && _jsx(MessageStatusIndicator, { message: message, isLatest: isLatestMine }), _jsxs("div", { className: clsx("px-3 py-2 rounded-2xl max-w-full min-w-0 break-words flex flex-col flex-1 text-gray-900 gap-1", isMine ? "bg-blue-100" : "bg-white"), style: { wordBreak: "break-word", overflowWrap: "anywhere" }, id: `${MSG_ITEM_CONTENT_PREFIX}${message === null || message === void 0 ? void 0 : message.clientMsgID}`, children: [(message === null || message === void 0 ? void 0 : message.contentType) === MessageType.MergeMessage ? (_jsxs("div", { children: [(_e = (_d = message === null || message === void 0 ? void 0 : message.mergeElem) === null || _d === void 0 ? void 0 : _d.multiMessage) === null || _e === void 0 ? void 0 : _e.map((item) => {
+                                                            return renderMessageByType(item);
+                                                        }), (message === null || message === void 0 ? void 0 : message.textElem) && _jsx(TextMessageItem, { message: message })] })) : (renderMessageByType(message)), _jsx("span", { className: clsx("text-xs text-gray-500 text-right"), children: dayjs(message === null || message === void 0 ? void 0 : message.sendTime).format("HH:mm") })] })] }), isMine && message.status === MessageStatus.Failed && (_jsx("span", { className: "text-red-500 text-xs mt-1", children: isMediaResendable(message) ? (_jsx(Trans, { i18nKey: "message_send_failed", components: {
+                                            bold: (_jsx("strong", { className: "cursor-pointer", onClick: () => resendMessage(message) })),
+                                        } })) : (t("message_send_failed_no_retry")) }))] })] }) }, message === null || message === void 0 ? void 0 : message.clientMsgID)] }, message === null || message === void 0 ? void 0 : message.clientMsgID));
 };
 export default MessageItem;

package/dist/components/searchConversation/item/SearchItemAsMessage.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SessionType } from "@openim/wasm-client-sdk";
 import { Avatar } from "antd";
-import { formatTimestamp, highlightSearch } from "../../../utils/common";
+import { formatTimestamp, highlightSearch, sanitizeHtml } from "../../../utils/common";
 import { DChatSDK } from "../../../constants/sdk";
 import { useChatContext } from "../../../context/ChatContext";
 import { message as antdMessage } from "antd";
@@ -63,7 +63,7 @@ const SearchItemAsMessage = (props) => {
                                     : conversationData === null || conversationData === void 0 ? void 0 : conversationData.showName }), _jsx("span", { className: "text-xs text-gray-500", children: formatTimestamp(message.sendTime, {
                                     hasTime: true,
                                 }) })] }), _jsx("div", { className: "flex flex-col flex-1 min-w-0", children: _jsx("span", { className: "text-xs flex-1 text-gray-500 truncate", dangerouslySetInnerHTML: {
-                                __html: highlightSearch(msgContent, searchTerm),
+                                __html: sanitizeHtml(highlightSearch(msgContent, searchTerm)),
                             } }) })] })] }, message.clientMsgID));
 };
 export default SearchItemAsMessage;

package/dist/components/searchConversation/item/SearchItemAsUser.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Avatar, message } from "antd";
-import { highlightSearch } from "../../../utils/common";
+import { highlightSearch, sanitizeHtml } from "../../../utils/common";
 import useConversationStore from "../../../store/conversation";
 import { useTranslation } from "react-i18next";
 const SearchItemAsUser = (props) => {
@@ -19,7 +19,7 @@ const SearchItemAsUser = (props) => {
             .setSelectedConversationId(session.conversationId);
     };
     return (_jsxs("div", { className: "py-3 px-2 flex items-center gap-3 hover:bg-gray-100 hover:rounded-sm cursor-pointer border-b mx-1", onClick: onPressItem, children: [_jsx(Avatar, { size: "large", src: (_d = session.owner) === null || _d === void 0 ? void 0 : _d.avatar, alt: (_e = session.owner) === null || _e === void 0 ? void 0 : _e.username, children: (_f = session.owner) === null || _f === void 0 ? void 0 : _f.fullName.charAt(0).toUpperCase() }), _jsx("div", { className: "flex flex-col flex-1 min-w-0", children: _jsx("p", { className: "text-sm font-semibold truncate", dangerouslySetInnerHTML: {
-                        __html: highlightSearch(ownerName, searchTerm),
+                        __html: sanitizeHtml(highlightSearch(ownerName, searchTerm)),
                     } }) })] }, session.id));
 };
 export default SearchItemAsUser;

package/dist/hooks/message/useMessage.d.ts

@@ -20,5 +20,6 @@ export declare const useMessage: (conversationId?: string, searchClientMsgID?: s
 };
 export declare const pushNewMessage: (message: MessageItem) => void;
 export declare const updateOneMessage: (message: MessageItem) => void;
+export declare const removeOneMessage: (clientMsgID: string) => void;
 export declare const getVisibleNeighbor: (allMessages: MessageItem[], current: MessageItem, direction: "prev" | "next") => MessageItem | undefined;
 //# sourceMappingURL=useMessage.d.ts.map

package/dist/hooks/message/useMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMessage.d.ts","sourceRoot":"","sources":["../../../src/hooks/message/useMessage.ts"],"names":[],"mappings":"AACA,OAAO,EAAY,WAAW,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAQ7E,eAAO,MAAM,kBAAkB,eAc9B,CAAC;AAEF,eAAO,MAAM,UAAU,GACrB,iBAAiB,MAAM,EACvB,oBAAoB,MAAM;;;;;qBAML,WAAW,EAAE;;;;;;qBAAb,WAAW,EAAE;;;;;;CAuMnC,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,SAAS,WAAW,SACpB,CAAC;AAChC,eAAO,MAAM,gBAAgB,GAAI,SAAS,WAAW,SACpB,CAAC;AAElC,eAAO,MAAM,kBAAkB,GAC7B,aAAa,WAAW,EAAE,EAC1B,SAAS,WAAW,EACpB,WAAW,MAAM,GAAG,MAAM,KACzB,WAAW,GAAG,SAkBhB,CAAC"}
+{"version":3,"file":"useMessage.d.ts","sourceRoot":"","sources":["../../../src/hooks/message/useMessage.ts"],"names":[],"mappings":"AACA,OAAO,EAAY,WAAW,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAQ7E,eAAO,MAAM,kBAAkB,eAc9B,CAAC;AAEF,eAAO,MAAM,UAAU,GACrB,iBAAiB,MAAM,EACvB,oBAAoB,MAAM;;;;;qBAML,WAAW,EAAE;;;;;;qBAAb,WAAW,EAAE;;;;;;CAkNnC,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,SAAS,WAAW,SACpB,CAAC;AAChC,eAAO,MAAM,gBAAgB,GAAI,SAAS,WAAW,SACpB,CAAC;AAClC,eAAO,MAAM,gBAAgB,GAAI,aAAa,MAAM,SACf,CAAC;AAEtC,eAAO,MAAM,kBAAkB,GAC7B,aAAa,WAAW,EAAE,EAC1B,SAAS,WAAW,EACpB,WAAW,MAAM,GAAG,MAAM,KACzB,WAAW,GAAG,SAkBhB,CAAC"}

package/dist/hooks/message/useMessage.js

@@ -143,11 +143,16 @@ export const useMessage = (conversationId, searchClientMsgID) => {
                 return Object.assign(Object.assign({}, preState), { messageList: tmpList });
             });
         };
+        const removeOneMessage = (clientMsgID) => {
+            setLoadState((preState) => (Object.assign(Object.assign({}, preState), { messageList: preState.messageList.filter((msg) => msg.clientMsgID !== clientMsgID) })));
+        };
         emitter.on("PUSH_NEW_MSG", pushNewMessage);
         emitter.on("UPDATE_ONE_MSG", updateOneMessage);
+        emitter.on("REMOVE_ONE_MSG", removeOneMessage);
         return () => {
             emitter.off("PUSH_NEW_MSG", pushNewMessage);
             emitter.off("UPDATE_ONE_MSG", updateOneMessage);
+            emitter.off("REMOVE_ONE_MSG", removeOneMessage);
         };
     }, []);
     useEffect(() => {
@@ -179,6 +184,7 @@ export const useMessage = (conversationId, searchClientMsgID) => {
 };
 export const pushNewMessage = (message) => emit("PUSH_NEW_MSG", message);
 export const updateOneMessage = (message) => emit("UPDATE_ONE_MSG", message);
+export const removeOneMessage = (clientMsgID) => emit("REMOVE_ONE_MSG", clientMsgID);
 export const getVisibleNeighbor = (allMessages, current, direction) => {
     const currentIndex = allMessages.findIndex((m) => m.clientMsgID === current.clientMsgID);
     if (currentIndex === -1)

package/dist/hooks/message/useSendMessage.d.ts

@@ -2,6 +2,10 @@ import { MergerMsgParams, MessageItem } from "@openim/wasm-client-sdk";
 import { ExtendMessageInfo, FileMsgParamsByFile, ImageMsgParamsByFile, VideoMsgParamsByFile } from "../../types/chat";
 import { UploadFile } from "antd";
 import { ISessionByStatus } from "../../store/type";
+export declare const isMediaResendable: (message: {
+    clientMsgID: string;
+    contentType: number;
+}) => boolean;
 export declare const createTextMessage: (text: string) => Promise<MessageItem | null>;
 export declare const createImageMessageByFile: (file: ImageMsgParamsByFile) => Promise<MessageItem | null>;
 export declare const createMergerMessage: (mergerMsgParams: MergerMsgParams) => Promise<MessageItem | null>;
@@ -20,6 +24,7 @@ export declare const useSendMessage: () => {
         files: UploadFile[];
         currentSession?: ISessionByStatus;
     }) => Promise<void>;
+    resendMessage: (failedMessage: MessageItem) => Promise<void>;
 };
 export declare const generateExtendMessageInfo: ({ richText, currentSession, }: {
     richText?: string;

package/dist/hooks/message/useSendMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSendMessage.d.ts","sourceRoot":"","sources":["../../../src/hooks/message/useSendMessage.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,WAAW,EAEZ,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EACL,iBAAiB,EACjB,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACrB,MAAM,kBAAkB,CAAC;AAM1B,OAAO,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAQlC,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEpD,eAAO,MAAM,iBAAiB,GAAU,MAAM,MAAM,gCAanD,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAU,MAAM,oBAAoB,gCAaxE,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAU,iBAAiB,eAAe,gCAazE,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAU,MAAM,oBAAoB,gCAaxE,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAU,MAAM,mBAAmB,gCAatE,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAU,MAAM,MAAM,EAAE,MAAM,MAAM,EAAE,gCActE,CAAC;AAEF,eAAO,MAAM,cAAc;gEAsDpB;QACD,SAAS,EAAE,MAAM,CAAC;QAClB,QAAQ,EAAE,MAAM,CAAC;QACjB,cAAc,CAAC,EAAE,gBAAgB,CAAC;KACnC;wEA+BE;QACD,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,UAAU,EAAE,CAAC;QACpB,cAAc,CAAC,EAAE,gBAAgB,CAAC;KACnC;CA0GJ,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,+BAGvC;IACD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC,KAWM,iBACN,CAAC"}
+{"version":3,"file":"useSendMessage.d.ts","sourceRoot":"","sources":["../../../src/hooks/message/useSendMessage.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,WAAW,EAGZ,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EACL,iBAAiB,EACjB,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACrB,MAAM,kBAAkB,CAAC;AAM1B,OAAO,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAQlC,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAepD,eAAO,MAAM,iBAAiB,GAAI,SAAS;IAAE,WAAW,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,YACK,CAAC;AAE7F,eAAO,MAAM,iBAAiB,GAAU,MAAM,MAAM,gCAanD,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAU,MAAM,oBAAoB,gCAaxE,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAU,iBAAiB,eAAe,gCAazE,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAU,MAAM,oBAAoB,gCAaxE,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAU,MAAM,mBAAmB,gCAatE,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAU,MAAM,MAAM,EAAE,MAAM,MAAM,EAAE,gCActE,CAAC;AAEF,eAAO,MAAM,cAAc;gEAmJpB;QACD,SAAS,EAAE,MAAM,CAAC;QAClB,QAAQ,EAAE,MAAM,CAAC;QACjB,cAAc,CAAC,EAAE,gBAAgB,CAAC;KACnC;wEA+BE;QACD,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,UAAU,EAAE,CAAC;QACpB,cAAc,CAAC,EAAE,gBAAgB,CAAC;KACnC;mCAtIqB,WAAW;CA+PpC,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,+BAGvC;IACD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC,KAWM,iBACN,CAAC"}

package/dist/hooks/message/useSendMessage.js

@@ -1,13 +1,20 @@
-import { MessageStatus, } from "@openim/wasm-client-sdk";
+import { MessageStatus, MessageType, } from "@openim/wasm-client-sdk";
 import { DChatSDK } from "../../constants/sdk";
 import { v4 as uuidv4 } from "uuid";
 import { useChatContext } from "../../context/ChatContext";
 import { useCallback } from "react";
-import { pushNewMessage, updateOneMessage } from "./useMessage";
+import { pushNewMessage, removeOneMessage, updateOneMessage } from "./useMessage";
 import { emit } from "../../utils/events";
 import useConversationStore from "../../store/conversation";
 import useAuthStore from "../../store/auth";
 import { extractLinks, generateContentBasedOnMessageType, } from "../../utils/common";
+const messageFileStore = new Map();
+const MEDIA_CONTENT_TYPES = new Set([
+    MessageType.PictureMessage,
+    MessageType.VideoMessage,
+    MessageType.FileMessage,
+]);
+export const isMediaResendable = (message) => !MEDIA_CONTENT_TYPES.has(message.contentType) || messageFileStore.has(message.clientMsgID);
 export const createTextMessage = async (text) => {
     let textMessage = await DChatSDK.createTextMessage(text, new Date().getTime().toString())
         .then(({ data }) => {
@@ -78,34 +85,119 @@ export const useSendMessage = () => {
     const { user } = useChatContext();
     const conversationData = useConversationStore((state) => state.conversationData);
     const { userID: recvID, groupID } = conversationData || {};
+    const dispatchMessage = useCallback(async (message) => {
+        var _a;
+        const desc = generateContentBasedOnMessageType(message.contentType, ((_a = message === null || message === void 0 ? void 0 : message.textElem) === null || _a === void 0 ? void 0 : _a.content) || "") || "Bạn có tin nhắn mới";
+        const { data: successMessage } = await DChatSDK.sendMessage({
+            recvID: recvID || "",
+            groupID: groupID || "",
+            message,
+            offlinePushInfo: {
+                title: (conversationData === null || conversationData === void 0 ? void 0 : conversationData.showName) || "Droppii Chat",
+                desc,
+                ex: JSON.stringify({
+                    icon: (conversationData === null || conversationData === void 0 ? void 0 : conversationData.faceURL) || "",
+                    conversationId: (conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationID) || "",
+                    title: (conversationData === null || conversationData === void 0 ? void 0 : conversationData.showName) || "Droppii Chat",
+                    desc,
+                }),
+                iOSPushSound: "default",
+                iOSBadgeCount: true,
+            },
+        });
+        updateOneMessage(successMessage);
+        messageFileStore.delete(message.clientMsgID);
+    }, [recvID, groupID]);
     const sendMessage = useCallback(async (message) => {
-        var _a, _b;
+        pushNewMessage(message);
+        emit("CHAT_LIST_SCROLL_TO_BOTTOM");
         try {
-            pushNewMessage(message);
-            emit("CHAT_LIST_SCROLL_TO_BOTTOM");
-            const { data: successMessage } = await DChatSDK.sendMessage({
-                recvID: recvID || "",
-                groupID: groupID || "",
-                message: message,
-                offlinePushInfo: {
-                    title: (conversationData === null || conversationData === void 0 ? void 0 : conversationData.showName) || "Droppii Chat",
-                    desc: `${generateContentBasedOnMessageType(message.contentType, ((_a = message === null || message === void 0 ? void 0 : message.textElem) === null || _a === void 0 ? void 0 : _a.content) || "")}` || "Bạn có tin nhắn mới",
-                    ex: JSON.stringify({
-                        icon: (conversationData === null || conversationData === void 0 ? void 0 : conversationData.faceURL) || "",
-                        conversationId: (conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationID) || "",
-                        title: (conversationData === null || conversationData === void 0 ? void 0 : conversationData.showName) || "Droppii Chat",
-                        desc: `${generateContentBasedOnMessageType(message.contentType, ((_b = message === null || message === void 0 ? void 0 : message.textElem) === null || _b === void 0 ? void 0 : _b.content) || "")}` || "Bạn có tin nhắn mới",
-                    }),
-                    iOSPushSound: "default",
-                    iOSBadgeCount: true,
-                },
-            });
-            updateOneMessage(successMessage);
+            await dispatchMessage(message);
         }
-        catch (error) {
+        catch (_a) {
             updateOneMessage(Object.assign(Object.assign({}, message), { status: MessageStatus.Failed }));
         }
-    }, [recvID, groupID]);
+    }, [dispatchMessage]);
+    const resendMessage = useCallback(async (failedMessage) => {
+        var _a;
+        const storedFiles = messageFileStore.get(failedMessage.clientMsgID);
+        if (!storedFiles) {
+            let newTextPayload = null;
+            const textContent = ((_a = failedMessage.textElem) === null || _a === void 0 ? void 0 : _a.content) || failedMessage.content || "";
+            if (failedMessage.contentType === MessageType.UrlTextMessage && failedMessage.urlTextElem) {
+                newTextPayload = await createUrlTextMessage(textContent, failedMessage.urlTextElem.urls);
+            }
+            else {
+                newTextPayload = await createTextMessage(textContent);
+            }
+            if (!newTextPayload) {
+                updateOneMessage(Object.assign(Object.assign({}, failedMessage), { status: MessageStatus.Failed }));
+                return;
+            }
+            const conversationID = (conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationID) || "";
+            await DChatSDK.deleteMessageFromLocalStorage({
+                conversationID,
+                clientMsgID: failedMessage.clientMsgID,
+            });
+            removeOneMessage(failedMessage.clientMsgID);
+            await sendMessage(Object.assign(Object.assign({}, newTextPayload), { ex: failedMessage.ex }));
+            return;
+        }
+        let newPayload = null;
+        if (storedFiles.type === "image" && failedMessage.pictureElem) {
+            const { sourcePicture, bigPicture, snapshotPicture, sourcePath } = failedMessage.pictureElem;
+            newPayload = await createImageMessageByFile({
+                sourcePicture,
+                bigPicture,
+                snapshotPicture,
+                sourcePath,
+                file: storedFiles.file,
+            });
+        }
+        else if (storedFiles.type === "video" && failedMessage.videoElem) {
+            const elem = failedMessage.videoElem;
+            newPayload = await createVideoMessageByFile({
+                videoPath: elem.videoPath,
+                duration: elem.duration,
+                videoType: elem.videoType,
+                snapshotPath: elem.snapshotPath,
+                videoUUID: elem.videoUUID,
+                videoUrl: elem.videoUrl,
+                videoSize: elem.videoSize,
+                snapshotUUID: elem.snapshotUUID,
+                snapshotSize: elem.snapshotSize,
+                snapshotUrl: elem.snapshotUrl,
+                snapshotWidth: elem.snapshotWidth,
+                snapshotHeight: elem.snapshotHeight,
+                videoFile: storedFiles.videoFile,
+                snapshotFile: storedFiles.snapshotFile,
+            });
+        }
+        else if (storedFiles.type === "file" && failedMessage.fileElem) {
+            const elem = failedMessage.fileElem;
+            newPayload = await createFileMessageByFile({
+                filePath: elem.filePath,
+                fileName: elem.fileName,
+                uuid: elem.uuid,
+                sourceUrl: elem.sourceUrl,
+                fileSize: elem.fileSize,
+                file: storedFiles.file,
+            });
+        }
+        if (!newPayload) {
+            updateOneMessage(Object.assign(Object.assign({}, failedMessage), { status: MessageStatus.Failed }));
+            return;
+        }
+        messageFileStore.delete(failedMessage.clientMsgID);
+        messageFileStore.set(newPayload.clientMsgID, storedFiles);
+        const conversationID = (conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationID) || "";
+        await DChatSDK.deleteMessageFromLocalStorage({
+            conversationID,
+            clientMsgID: failedMessage.clientMsgID,
+        });
+        removeOneMessage(failedMessage.clientMsgID);
+        await sendMessage(Object.assign(Object.assign({}, newPayload), { ex: failedMessage.ex }));
+    }, [sendMessage]);
     const sendTextMessage = useCallback(async ({ plainText, richText, currentSession, }) => {
         if (!recvID && !groupID)
             return;
@@ -159,6 +251,10 @@ export const useSendMessage = () => {
                     const imageMessage = await createImageMessageByFile(parsedImage);
                     if (!imageMessage)
                         continue;
+                    messageFileStore.set(imageMessage.clientMsgID, {
+                        type: "image",
+                        file: file,
+                    });
                     messageList.push(imageMessage);
                 }
                 else if (isVideo) {
@@ -185,10 +281,15 @@ export const useSendMessage = () => {
                     });
                     if (!videoMessage)
                         continue;
+                    messageFileStore.set(videoMessage.clientMsgID, {
+                        type: "video",
+                        videoFile: file,
+                        snapshotFile: thumbFile,
+                    });
                     messageList.push(videoMessage);
                 }
                 else if (isDocument) {
-                    const fileMessage = await createFileMessageByFile({
+                    const fileParams = {
                         filePath: "",
                         fileName: file.name,
                         uuid: uuidv4(),
@@ -196,9 +297,14 @@ export const useSendMessage = () => {
                         fileSize: file.size,
                         fileType: file.type,
                         file: file,
-                    });
+                    };
+                    const fileMessage = await createFileMessageByFile(fileParams);
                     if (!fileMessage)
                         continue;
+                    messageFileStore.set(fileMessage.clientMsgID, {
+                        type: "file",
+                        file: file,
+                    });
                     messageList.push(fileMessage);
                 }
             }
@@ -224,6 +330,7 @@ export const useSendMessage = () => {
     return {
         sendTextMessage,
         sendMergeMessage,
+        resendMessage,
     };
 };
 export const generateExtendMessageInfo = ({ richText, currentSession, }) => {

package/dist/locales/vi/common.json

@@ -74,9 +74,26 @@
   "create_new_group": "Tạo nhóm CS mới",
   "open_session": "Mở phiên",
   "close_session": "Đóng phiên",
+  "message_send_failed": "Gửi tin nhắn thất bại, bạn vui lòng <bold>nhấn để gửi lại</bold>",
+  "message_send_failed_no_retry": "Gửi tin nhắn thất bại",
+  "general_info": "Thông tin chung",
+  "member_name": "Tên thành viên",
+  "activity_status": "Trạng thái hoạt động",
+  "online": "Trực tuyến",
+  "offline": "Ngoại tuyến",
+  "add_member_button": "Thêm thành viên",
+  "member_username": "Tên thành viên",
+  "change_status": "Thay đổi trạng thái",
+  "change_status_online_to_offline": "<bold>Bạn đang ở trạng thái Trực tuyến</bold>, khi chuyển sang Ngoại tuyến hệ thống sẽ không tự động gửi yêu cầu hỗ trợ mới cho bạn.\nBạn có chắc chắn muốn thay đổi trạng thái?",
+  "change_status_offline_to_online": "<bold>Bạn đang ở trạng thái Ngoại tuyến</bold>, khi chuyển sang Trực tuyến hệ thống sẽ tự động thêm bạn vào phiên hỗ trợ.\nBạn có chắc chắn muốn thay đổi trạng thái?",
+  "confirm": "Xác nhận",
+  "update_status_success": "Cập nhật trạng thái thành công",
+  "update_status_failed": "Cập nhật trạng thái thất bại",
+  "missing_field": "Thiếu {{field}}",
   "validation": {
     "default_message": "Nhập nội dung tin nhắn mặc định",
     "group_name": "Thiếu tên nhóm",
-    "group_name_length": "Số ký tự tối đa của tên nhóm là 200"
+    "group_name_length": "Số ký tự tối đa của tên nhóm là 200",
+    "group_description_length": "Số ký tự đối đa là 200."
   }
-}
+}