@droppii-org/chat-sdk 0.1.2 → 0.1.3

package/dist/components/message/footer/MediaActions.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $getSelection, $isRangeSelection } from "lexical";
+import { Button, Upload, message as antdMessage } from "antd";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import EmojiPicker from "./EmojiPicker";
+import { Icon } from "../../icon";
+import { validateFile, validateVideoLimit } from "../../../utils/fileValidation";
+import { DOCUMENT_TYPES } from "./editorConfig";
+const EmojiIcon = (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M7.59997 12.4C7.59997 12.4 8.49997 13.2 9.99997 13.2C11.5 13.2 12.4 12.4 12.4 12.4M14 8.39997C14 8.8418 13.6418 9.19997 13.2 9.19997C12.7581 9.19997 12.4 8.8418 12.4 8.39997C12.4 7.95814 12.7581 7.59997 13.2 7.59997C13.6418 7.59997 14 7.95814 14 8.39997ZM18 9.99997C18 14.4182 14.4182 18 9.99997 18C5.58169 18 1.99997 14.4182 1.99997 9.99997C1.99997 5.58169 5.58169 1.99997 9.99997 1.99997C14.4182 1.99997 18 5.58169 18 9.99997ZM7.59997 8.39997C7.59997 8.8418 7.2418 9.19997 6.79997 9.19997C6.35814 9.19997 5.99997 8.8418 5.99997 8.39997C5.99997 7.95814 6.35814 7.59997 6.79997 7.59997C7.2418 7.59997 7.59997 7.95814 7.59997 8.39997Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const AttachIcon = (_jsx("svg", { width: "22", height: "22", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M15.6 10.0001V11.2001C15.6 14.5137 12.9137 17.2001 9.59998 17.2001C6.28626 17.2001 3.59998 14.5137 3.59998 11.2001V6.79999C3.59998 4.59085 5.39084 2.79999 7.59998 2.79999C9.8091 2.79999 11.6 4.59085 11.6 6.79999V11.2C11.6 12.3045 10.7045 13.2 9.59998 13.2C8.49542 13.2 7.59998 12.3045 7.59998 11.2V7.99999", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+export default function MediaActions({ listUploadFiles, onFilesChange, buttonClassName, showMediaUpload = true, }) {
+    const [editor] = useLexicalComposerContext();
+    const { t } = useTranslation();
+    const [showEmojiPicker, setShowEmojiPicker] = useState(false);
+    const containerRef = useRef(null);
+    const handleEmojiSelect = useCallback((emoji) => {
+        editor.update(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+                selection.insertText(emoji);
+            }
+        });
+        setShowEmojiPicker(false);
+    }, [editor]);
+    const beforeUploadImagesAndVideo = (file, fileList) => {
+        const validation = validateFile(file, t);
+        if (!validation.isValid) {
+            antdMessage.error(validation.error);
+            return Upload.LIST_IGNORE;
+        }
+        const videoValidation = validateVideoLimit([file], listUploadFiles, t);
+        if (!videoValidation.isValid) {
+            antdMessage.error(videoValidation.error);
+            return Upload.LIST_IGNORE;
+        }
+        const newVideos = fileList.filter((f) => { var _a; return (_a = f.type) === null || _a === void 0 ? void 0 : _a.startsWith("video/"); });
+        if (newVideos.length > 1) {
+            antdMessage.error(t("video_limit_exceeded"));
+            return Upload.LIST_IGNORE;
+        }
+        return false;
+    };
+    const beforeUploadFile = (file) => {
+        const isAllowed = DOCUMENT_TYPES.includes(file.type);
+        if (!isAllowed) {
+            antdMessage.error(t("invalid_document_format", { fileName: file.name }));
+            return Upload.LIST_IGNORE;
+        }
+        return false;
+    };
+    const handleChange = (info) => {
+        var _a;
+        let newList = [...info.fileList];
+        const lastFile = info.file;
+        if (DOCUMENT_TYPES.includes(lastFile.type || "")) {
+            newList = newList.filter((f) => !DOCUMENT_TYPES.includes(f.type || ""));
+            const originFile = ((_a = lastFile.originFileObj) !== null && _a !== void 0 ? _a : lastFile);
+            newList.push(Object.assign(Object.assign({}, lastFile), { originFileObj: originFile }));
+        }
+        onFilesChange(newList);
+    };
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current &&
+                !containerRef.current.contains(event.target)) {
+                setShowEmojiPicker(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+    const btnClass = buttonClassName !== null && buttonClassName !== void 0 ? buttonClassName : "w-8 h-8 p-0 text-gray-500 hover:text-gray-700 hover:bg-gray-100";
+    return (_jsxs("div", { className: "flex items-center gap-1 relative", ref: containerRef, children: [_jsx(Button, { type: "text", shape: "default", className: clsx(btnClass, showEmojiPicker && "bg-blue-100 text-blue-600"), onClick: () => setShowEmojiPicker(!showEmojiPicker), children: EmojiIcon }), showMediaUpload && (_jsxs(_Fragment, { children: [_jsx(Upload, { accept: "image/jpeg, image/png, image/jpg, video/*", beforeUpload: beforeUploadImagesAndVideo, multiple: true, onChange: handleChange, showUploadList: false, fileList: listUploadFiles, children: _jsx(Button, { type: "text", shape: "default", className: btnClass, children: _jsx(Icon, { icon: "image-02-o", size: 22 }) }) }), _jsx(Upload, { accept: ".doc,.docx,.pdf", beforeUpload: beforeUploadFile, onChange: handleChange, showUploadList: false, fileList: listUploadFiles, children: _jsx(Button, { type: "text", shape: "default", className: btnClass, children: AttachIcon }) })] })), showEmojiPicker && (_jsx(EmojiPicker, { onEmojiSelect: handleEmojiSelect, onClose: () => setShowEmojiPicker(false) }))] }));
+}

package/dist/components/message/footer/QuotedMessage.d.ts

@@ -0,0 +1,2 @@
+export declare const QuotedMessageFooter: () => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=QuotedMessage.d.ts.map

package/dist/components/message/footer/QuotedMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuotedMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/QuotedMessage.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,mBAAmB,sDA4C/B,CAAC"}

package/dist/components/message/footer/QuotedMessage.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import useConversationStore from "../../../store/conversation";
+import { Icon } from "../../icon";
+import { useCallback } from "react";
+import { Button } from "antd";
+import { useChatContext } from "../../../context/ChatContext";
+import { generateContentBasedOnMessageType } from "../../../utils/common";
+export const QuotedMessageFooter = () => {
+    var _a;
+    const { t } = useTranslation();
+    const quotedMessage = useConversationStore((state) => state.quotedMessage);
+    const setQuotedMessage = useConversationStore((state) => state.setQuotedMessage);
+    const user = useChatContext().user;
+    const isMe = (quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.sendID) === (user === null || user === void 0 ? void 0 : user.userID);
+    const handleClearQuotedMessage = useCallback(() => {
+        setQuotedMessage(null);
+    }, [setQuotedMessage]);
+    if (!quotedMessage)
+        return null;
+    return (_jsxs("div", { className: "flex flex-row items-center py-2 px-3 bg-blue-50 flex-1 gap-3", children: [_jsx("div", { className: "flex pr-3 items-center justify-items-center border-r-2 border-blue-500 h-full", children: _jsx(Icon, { icon: "arrow-forward-b", className: "text-blue-500", size: 16 }) }), _jsxs("div", { className: "flex-1", children: [_jsx("p", { className: "text-sm font-medium", children: t("reply_to", {
+                            name: isMe ? t("your_self") : (quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.senderNickname) || "",
+                        }) }), _jsx("p", { className: "text-sm text-gray-500 truncate", children: generateContentBasedOnMessageType(quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.contentType, (_a = quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.textElem) === null || _a === void 0 ? void 0 : _a.content) })] }), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: handleClearQuotedMessage, children: _jsx(Icon, { icon: "close-o", size: 16 }) })] }));
+};

package/dist/components/message/footer/editorConfig.d.ts

@@ -0,0 +1,24 @@
+import { LinkNode } from "@lexical/link";
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
+import { ListItemNode, ListNode } from "@lexical/list";
+export declare const editorTheme: {
+    text: {
+        bold: string;
+        italic: string;
+        strikethrough: string;
+        underline: string;
+    };
+    quote: string;
+    list: {
+        nested: {
+            listitem: string;
+        };
+        ol: string;
+        ul: string;
+    };
+    link: string;
+};
+export declare const editorNodes: (typeof HeadingNode | typeof ListNode | typeof ListItemNode | typeof QuoteNode | typeof LinkNode)[];
+export declare const editorOnError: (error: Error) => void;
+export declare const DOCUMENT_TYPES: string[];
+//# sourceMappingURL=editorConfig.d.ts.map

package/dist/components/message/footer/editorConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editorConfig.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/editorConfig.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEvD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;CAcvB,CAAC;AAEF,eAAO,MAAM,WAAW,qGAMvB,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,OAAO,KAAK,SAEzC,CAAC;AAEF,eAAO,MAAM,cAAc,UAI1B,CAAC"}

package/dist/components/message/footer/editorConfig.js

@@ -0,0 +1,33 @@
+import { LinkNode } from "@lexical/link";
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
+import { ListItemNode, ListNode } from "@lexical/list";
+export const editorTheme = {
+    text: {
+        bold: "font-bold",
+        italic: "italic",
+        strikethrough: "line-through",
+        underline: "underline",
+    },
+    quote: "border-l-4 border-gray-300 pl-4 italic text-gray-600",
+    list: {
+        nested: { listitem: "list-none" },
+        ol: "list-decimal list-inside",
+        ul: "list-disc list-inside",
+    },
+    link: "text-blue-500 underline hover:text-blue-700",
+};
+export const editorNodes = [
+    HeadingNode,
+    ListNode,
+    ListItemNode,
+    QuoteNode,
+    LinkNode,
+];
+export const editorOnError = (error) => {
+    console.error(error);
+};
+export const DOCUMENT_TYPES = [
+    "application/pdf",
+    "application/msword",
+    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+];

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/index.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAK/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAGvD,UAAU,kBAAkB;IAC1B,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AA+BD,eAAO,MAAM,oBAAoB,mDAI/B,CAAC;AAEH,eAAO,MAAM,uBAAuB,gCAAyC,CAAC;AAE9E,QAAA,MAAM,qBAAqB,GAAI,oBAAoB,kBAAkB,4CA6DpE,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/index.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAK/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAIvD,UAAU,kBAAkB;IAC1B,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AASD,eAAO,MAAM,oBAAoB,mDAI/B,CAAC;AAEH,eAAO,MAAM,uBAAuB,gCAAyC,CAAC;AAE9E,QAAA,MAAM,qBAAqB,GAAI,oBAAoB,kBAAkB,4CA8DpE,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

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

@@ -7,9 +7,7 @@ import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
 import { ToolbarPlugin } from "./ToolbarPlugin";
 import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
 import { ListPlugin } from "@lexical/react/LexicalListPlugin";
-import { LinkNode } from "@lexical/link";
-import { HeadingNode, QuoteNode } from "@lexical/rich-text";
-import { ListItemNode, ListNode } from "@lexical/list";
+import { editorTheme, editorNodes, editorOnError } from "./editorConfig";
 import { createContext, useCallback, useContext, useState } from "react";
 import EnterHandler from "./EnterHandler";
 import ActionBar from "./ActionBar";
@@ -17,31 +15,12 @@ import { useSendMessage } from "../../../hooks/message/useSendMessage";
 import FilePreview from "./FilePreview";
 import { useTranslation } from "react-i18next";
 import PasteAndDropPlugin from "./PasteAndDropPlugin";
-const theme = {
-    text: {
-        bold: "font-bold",
-        italic: "italic",
-        strikethrough: "line-through",
-        underline: "underline",
-    },
-    quote: "border-l-4 border-gray-300 pl-4 italic text-gray-600",
-    list: {
-        nested: {
-            listitem: "list-none",
-        },
-        ol: "list-decimal list-inside",
-        ul: "list-disc list-inside",
-    },
-    link: "text-blue-500 underline hover:text-blue-700",
-};
-const onError = (error) => {
-    console.error(error);
-};
+import { QuotedMessageFooter } from "./QuotedMessage";
 const initialConfig = {
     namespace: "ChatInput",
-    theme,
-    onError,
-    nodes: [HeadingNode, ListNode, ListItemNode, QuoteNode, LinkNode],
+    theme: editorTheme,
+    onError: editorOnError,
+    nodes: editorNodes,
 };
 export const MessageFooterContext = createContext({
     onSendMessage: () => { },
@@ -67,6 +46,6 @@ const MessageFooterProvider = ({ currentSession }) => {
         }
         setListUploadFiles([]);
     }, [sendMergeMessage, sendTextMessage, listUploadFiles, currentSession]);
-    return (_jsx(MessageFooterContext.Provider, { value: { onSendMessage, listUploadFiles, setListUploadFiles }, children: _jsxs(LexicalComposer, { initialConfig: initialConfig, children: [_jsxs("div", { className: "border-t pb-2 flex flex-col gap-1 bg-white", children: [listUploadFiles.length > 0 && _jsx(FilePreview, {}), _jsx(ToolbarPlugin, {}), _jsx("div", { className: "relative px-4", children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "border border-indigo-500 rounded-md bg-blue-100 min-h-[64px] max-h-[140px] overflow-y-auto px-3 py-2 text-sm" }), ErrorBoundary: LexicalErrorBoundary, "aria-placeholder": t("enter_message"), placeholder: _jsx("div", { className: "absolute top-2 left-7 pointer-events-none", children: _jsx("p", { className: "text-gray-500 text-sm", children: t("enter_message") }) }) }) }), _jsx(ActionBar, {})] }), _jsx(LinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(EnterHandler, {}), _jsx(PasteAndDropPlugin, {})] }) }));
+    return (_jsx(MessageFooterContext.Provider, { value: { onSendMessage, listUploadFiles, setListUploadFiles }, children: _jsxs(LexicalComposer, { initialConfig: initialConfig, children: [_jsxs("div", { className: "border-t pb-2 flex flex-col gap-1 bg-white", children: [_jsx(QuotedMessageFooter, {}), listUploadFiles.length > 0 && _jsx(FilePreview, {}), _jsx(ToolbarPlugin, {}), _jsx("div", { className: "relative px-4", children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "border border-indigo-500 rounded-md bg-blue-100 min-h-[64px] max-h-[140px] overflow-y-auto px-3 py-2 text-sm" }), ErrorBoundary: LexicalErrorBoundary, "aria-placeholder": t("enter_message"), placeholder: _jsx("div", { className: "absolute top-2 left-7 pointer-events-none", children: _jsx("p", { className: "text-gray-500 text-sm", children: t("enter_message") }) }) }) }), _jsx(ActionBar, {})] }), _jsx(LinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(EnterHandler, {}), _jsx(PasteAndDropPlugin, {})] }) }));
 };
 export default MessageFooterProvider;

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

@@ -0,0 +1,9 @@
+import { MessageItem } from "@openim/wasm-client-sdk";
+interface QuoteMessageItemProps {
+    message: MessageItem;
+    isMine: boolean;
+    onPressQuoteMessage?: (clientMsgID: string) => void;
+}
+declare const QuoteMessageItem: ({ message, isMine, onPressQuoteMessage, }: QuoteMessageItemProps) => import("react/jsx-runtime").JSX.Element;
+export default QuoteMessageItem;
+//# sourceMappingURL=QuoteMessage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuoteMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/QuoteMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAe,MAAM,yBAAyB,CAAC;AAOnE,UAAU,qBAAqB;IAC7B,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CACrD;AAED,QAAA,MAAM,gBAAgB,GAAI,2CAIvB,qBAAqB,4CAwCvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { generateContentBasedOnMessageType } from "../../../utils/common";
+import { Icon } from "../../icon";
+import { useTranslation } from "react-i18next";
+import clsx from "clsx";
+import MediaPreviewIcon from "../MediaPreviewIcon";
+const QuoteMessageItem = ({ message, isMine, onPressQuoteMessage, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const { t } = useTranslation();
+    const from = isMine ? t("you") : message === null || message === void 0 ? void 0 : message.senderNickname;
+    const to = isMine
+        ? t("your_self")
+        : (_b = (_a = message === null || message === void 0 ? void 0 : message.quoteElem) === null || _a === void 0 ? void 0 : _a.quoteMessage) === null || _b === void 0 ? void 0 : _b.senderNickname;
+    return (_jsxs("div", { className: clsx("mb-[-4px] flex flex-col gap-1", isMine ? "items-end" : "items-start"), children: [_jsxs("div", { className: "flex flex-row items-center gap-2", children: [_jsx(Icon, { icon: "arrow-reply-b", size: 16, className: "text-blue-500" }), _jsx("span", { className: "text-xs text-gray-500", children: t("replied_to", {
+                            from: from,
+                            to: to,
+                        }) })] }), _jsxs("div", { className: "flex flex-row items-center gap-2 border border-gray-200 rounded-2xl min-w-0 px-3 py-2 bg-gray-100 cursor-pointer", onClick: () => {
+                    var _a, _b;
+                    return onPressQuoteMessage === null || onPressQuoteMessage === void 0 ? void 0 : onPressQuoteMessage(((_b = (_a = message === null || message === void 0 ? void 0 : message.quoteElem) === null || _a === void 0 ? void 0 : _a.quoteMessage) === null || _b === void 0 ? void 0 : _b.clientMsgID) || "");
+                }, children: [_jsx(MediaPreviewIcon, { message: (_c = message === null || message === void 0 ? void 0 : message.quoteElem) === null || _c === void 0 ? void 0 : _c.quoteMessage }), _jsx("span", { className: "text-sm text-gray-500 truncate", children: generateContentBasedOnMessageType((_e = (_d = message === null || message === void 0 ? void 0 : message.quoteElem) === null || _d === void 0 ? void 0 : _d.quoteMessage) === null || _e === void 0 ? void 0 : _e.contentType, ((_h = (_g = (_f = message === null || message === void 0 ? void 0 : message.quoteElem) === null || _f === void 0 ? void 0 : _f.quoteMessage) === null || _g === void 0 ? void 0 : _g.textElem) === null || _h === void 0 ? void 0 : _h.content) || "") })] })] }));
+};
+export default QuoteMessageItem;

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

@@ -0,0 +1,5 @@
+interface RevokeMessageItemProps {
+}
+declare const RevokeMessageItem: (_: RevokeMessageItemProps) => import("react/jsx-runtime").JSX.Element;
+export default RevokeMessageItem;
+//# sourceMappingURL=RevokeMessage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RevokeMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/RevokeMessage.tsx"],"names":[],"mappings":"AAIA,UAAU,sBAAsB;CAAG;AACnC,QAAA,MAAM,iBAAiB,GAAI,GAAG,sBAAsB,4CAQnD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

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

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+const RevokeMessageItem = (_) => {
+    const { t } = useTranslation();
+    return (_jsx("span", { className: "!text-sm sm:text-base whitespace-pre-wrap italic text-gray-500", children: t("revoked") }));
+};
+export default RevokeMessageItem;

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

@@ -23,7 +23,7 @@ const TextMessageItem = (props) => {
         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) || "";
         // 🔒 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("div", { className: "!text-sm sm:text-base break-normal whitespace-pre-line flex-1", style: { 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,4CAwEzD,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;AAUtD,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, sanitizeHtml } from "../../../utils/common";
+import { getHostFromUrl, wrapLinksInHtml, sanitizeHtml, } from "../../../utils/common";
 import { useFetchExternalLink } from "../../../hooks/common/useFetchExternalLink";
 import { Image } from "antd";
 const UrlTextMessageItem = (props) => {
@@ -25,8 +25,8 @@ const UrlTextMessageItem = (props) => {
         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) || "";
         // 🔒 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 (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "!text-sm sm:text-base break-normal whitespace-pre-line flex-1", style: { 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 break-normal", 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", 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]) || "" }));
+    return (_jsx("span", { className: "!text-sm sm:text-base break-normal whitespace-pre-line flex-1", style: { 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

@@ -2,7 +2,12 @@ import { MessageItem as MessageItemType } from "@openim/wasm-client-sdk";
 interface MessageItemProps {
     message: MessageItemType;
     allMessages: MessageItemType[];
+    contextMenuOpen?: boolean;
+    onContextMenuOpenChange?: (open: boolean) => void;
+    onRevokeMessage?: (clientMsgID: string) => void;
+    onQuoteMessage?: (message: MessageItemType) => void;
+    onPressQuoteMessage?: (clientMsgID: string) => void;
 }
-declare const MessageItem: ({ message, allMessages }: MessageItemProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const MessageItem: ({ message, allMessages, contextMenuOpen, onContextMenuOpenChange, onRevokeMessage, onQuoteMessage, onPressQuoteMessage, }: MessageItemProps) => import("react/jsx-runtime").JSX.Element | null;
 export default MessageItem;
 //# sourceMappingURL=index.d.ts.map

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,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"}
+{"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;AA2BjC,UAAU,gBAAgB;IACxB,OAAO,EAAE,eAAe,CAAC;IACzB,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uBAAuB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,eAAe,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IACpD,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CACrD;AAED,QAAA,MAAM,WAAW,GAAI,2HAQlB,gBAAgB,mDA0PlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -1,7 +1,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 { Avatar, Dropdown } from "antd";
 import { MessageStatus, MessageType, } from "@openim/wasm-client-sdk";
 import TextMessageItem from "./TextMessage";
 import ImageMessageItem from "./ImageMessage";
@@ -12,32 +12,26 @@ import { MSG_ITEM_CONTENT_PREFIX, MSG_ITEM_PREFIX } from "../../../constants";
 import { formatTimestamp } from "../../../utils/common";
 import useAuthStore from "../../../store/auth";
 import useConversationStore from "../../../store/conversation";
-import { useMemo } from "react";
+import { useCallback, 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 }) => {
+import { useSendMessage, isMediaResendable, } from "../../../hooks/message/useSendMessage";
+import { Icon } from "../../icon";
+import RevokeMessageItem from "./RevokeMessage";
+import QuoteMessageItem from "./QuoteMessage";
+const ICON_COLOR = "#3278f7";
+const MessageItem = ({ message, allMessages, contextMenuOpen, onContextMenuOpenChange, onRevokeMessage, onQuoteMessage, onPressQuoteMessage, }) => {
     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);
-    const showSenderInfo = useMemo(() => {
-        var _a, _b, _c;
-        try {
-            const isChatSupport = (_c = (_b = (_a = JSON.parse((conversationData === null || conversationData === void 0 ? void 0 : conversationData.ex) || "{}")) === null || _a === void 0 ? void 0 : _a.sessionInfo) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.botId;
-            return isChatSupport && isCrm;
-        }
-        catch (_d) {
-            console.log("Failed to parse conversationData.ex");
-        }
-    }, [conversationData === null || conversationData === void 0 ? void 0 : conversationData.ex, isCrm]);
-    const isVisibleGroup = visibleTypeMessage.includes(message === null || message === void 0 ? void 0 : message.contentType);
-    const renderMessageByType = (message) => {
+    const renderMessageByType = useCallback((message) => {
         switch (message === null || message === void 0 ? void 0 : message.contentType) {
             case MessageType.TextMessage:
+            case MessageType.QuoteMessage:
                 return _jsx(TextMessageItem, { message: message });
             case MessageType.PictureMessage:
                 return _jsx(ImageMessageItem, { message: message });
@@ -47,13 +41,68 @@ const MessageItem = ({ message, allMessages }) => {
                 return _jsx(VideoMessageItem, { message: message });
             case MessageType.UrlTextMessage:
                 return _jsx(UrlTextMessageItem, { message: message });
+            case MessageType.RevokeMessage:
+                return _jsx(RevokeMessageItem, {});
             default:
                 return _jsx(TextMessageItem, { message: message });
         }
-    };
-    if (!isVisibleGroup)
-        return null;
-    const isMine = (message === null || message === void 0 ? void 0 : message.sendID) === userID;
+    }, [message]);
+    const { isReplyable, isRevocable, isMine } = useMemo(() => {
+        const isMyMessage = (message === null || message === void 0 ? void 0 : message.sendID) === userID;
+        const isOlderThanOneDay = dayjs().diff(dayjs(message === null || message === void 0 ? void 0 : message.sendTime), "days", true) >= 1;
+        return {
+            isReplyable: message.status === MessageStatus.Succeed,
+            isRevocable: isMyMessage &&
+                message.status === MessageStatus.Succeed &&
+                !isOlderThanOneDay,
+            isMine: isMyMessage,
+        };
+    }, [userID, message]);
+    const contextMenuItems = useMemo(() => {
+        if ((message === null || message === void 0 ? void 0 : message.contentType) === MessageType.RevokeMessage)
+            return [];
+        return [
+            ...(isReplyable
+                ? [
+                    {
+                        key: "TB01",
+                        label: t("context_menu_reply"),
+                        icon: (_jsx(Icon, { icon: "arrow-reply-alt-o", size: 18, color: ICON_COLOR })),
+                        onClick: () => onQuoteMessage === null || onQuoteMessage === void 0 ? void 0 : onQuoteMessage(message),
+                    },
+                ]
+                : []),
+            ...(isRevocable
+                ? [
+                    {
+                        key: "TB05",
+                        label: t("context_menu_revoke"),
+                        icon: _jsx(Icon, { icon: "arrow-reload-o", size: 18, color: ICON_COLOR }),
+                        onClick: () => onRevokeMessage === null || onRevokeMessage === void 0 ? void 0 : onRevokeMessage((message === null || message === void 0 ? void 0 : message.clientMsgID) || ""),
+                    },
+                ]
+                : []),
+        ];
+    }, [
+        isReplyable,
+        isRevocable,
+        t,
+        onRevokeMessage,
+        message === null || message === void 0 ? void 0 : message.contentType,
+        message === null || message === void 0 ? void 0 : message.clientMsgID,
+        onQuoteMessage,
+    ]);
+    const showSenderInfo = useMemo(() => {
+        var _a, _b, _c;
+        try {
+            const isChatSupport = (_c = (_b = (_a = JSON.parse((conversationData === null || conversationData === void 0 ? void 0 : conversationData.ex) || "{}")) === null || _a === void 0 ? void 0 : _a.sessionInfo) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.botId;
+            return isChatSupport && isCrm && !isMine;
+        }
+        catch (_d) {
+            console.log("Failed to parse conversationData.ex");
+        }
+    }, [conversationData === null || conversationData === void 0 ? void 0 : conversationData.ex, isCrm, isMine]);
+    const hasContextMenu = contextMenuItems.length > 0;
     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");
@@ -65,15 +114,20 @@ const MessageItem = ({ message, allMessages }) => {
     const showTimeBreak = prevTimeBreak;
     const showSenderAvatar = !nextSameUser;
     const showSenderName = !prevSameUser && !isMine;
-    if (!isCrm && MessageType.CustomMessage === (message === null || message === void 0 ? void 0 : message.contentType)) {
+    if (!isCrm &&
+        (MessageType.CustomMessage === (message === null || message === void 0 ? void 0 : message.contentType) ||
+            !visibleTypeMessage.includes(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: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 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: {
+                    }) }) })), _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: [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 font-bold mb-1 px-3 mt-2", children: message === null || message === void 0 ? void 0 : message.senderNickname })), _jsxs("div", { className: clsx("flex flex-col flex-1", isMine ? "items-end" : "items-start"), children: [(message === null || message === void 0 ? void 0 : message.quoteElem) && (_jsx(QuoteMessageItem, { message: message, isMine: isMine, onPressQuoteMessage: onPressQuoteMessage })), _jsxs("div", { className: "flex items-end gap-1.5", children: [isMine && (_jsx(MessageStatusIndicator, { message: message, isLatest: isLatestMine })), _jsx(Dropdown, { menu: { items: contextMenuItems }, trigger: hasContextMenu ? ["contextMenu"] : [], open: contextMenuOpen, onOpenChange: onContextMenuOpenChange, children: _jsxs("div", { className: clsx("px-3 py-2 rounded-2xl max-w-full min-w-0 break-normal flex flex-col flex-1 text-gray-900 gap-1 w-fit", 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));
+                                        } })) : (t("message_send_failed_no_retry")) }))] })] }) })] }, message === null || message === void 0 ? void 0 : message.clientMsgID));
 };
 export default MessageItem;

package/dist/components/richTextEditor/RichTextEditor.d.ts

@@ -0,0 +1,12 @@
+import { UploadFile } from "antd";
+interface RichTextEditorProps {
+    initialHtml?: string;
+    placeholder?: string;
+    onChange?: (html: string, plainText: string) => void;
+    onFilesChange?: (files: UploadFile[]) => void;
+    minHeight?: string;
+    showMediaUpload?: boolean;
+}
+export default function RichTextEditor({ initialHtml, placeholder, onChange, onFilesChange, minHeight, showMediaUpload, }: RichTextEditorProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=RichTextEditor.d.ts.map

package/dist/components/richTextEditor/RichTextEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../../../src/components/richTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AA0ClC,UAAU,mBAAmB;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,WAAW,EACX,WAAW,EACX,QAAQ,EACR,aAAa,EACb,SAAmB,EACnB,eAAsB,GACvB,EAAE,mBAAmB,2CA6DrB"}

package/dist/components/richTextEditor/RichTextEditor.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
+import { ListPlugin } from "@lexical/react/LexicalListPlugin";
+import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
+import { $generateHtmlFromNodes, $generateNodesFromDOM } from "@lexical/html";
+import { $getRoot } from "lexical";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useEffect } from "react";
+import { ToolbarPlugin } from "../message/footer/ToolbarPlugin";
+import MediaActions from "../message/footer/MediaActions";
+import { FilePreviewList } from "../message/footer/FilePreview";
+import { editorTheme, editorNodes, editorOnError, } from "../message/footer/editorConfig";
+const EDITOR_CONFIG = {
+    namespace: "CannedResponseEditor",
+    theme: editorTheme,
+    onError: editorOnError,
+    nodes: editorNodes,
+};
+function HtmlPlugin({ initialHtml }) {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        if (!initialHtml)
+            return;
+        editor.update(() => {
+            const parser = new DOMParser();
+            const dom = parser.parseFromString(initialHtml, "text/html");
+            const nodes = $generateNodesFromDOM(editor, dom);
+            const root = $getRoot();
+            root.clear();
+            root.append(...nodes);
+        }, { tag: "initial-html" });
+    }, [editor, initialHtml]);
+    return null;
+}
+export default function RichTextEditor({ initialHtml, placeholder, onChange, onFilesChange, minHeight = "160px", showMediaUpload = true, }) {
+    const [listUploadFiles, setListUploadFiles] = useState([]);
+    const handleChange = (editorState, editor, tags) => {
+        if (tags.has("initial-html"))
+            return;
+        editorState.read(() => {
+            const html = $generateHtmlFromNodes(editor);
+            const plainText = $getRoot().getTextContent().trim();
+            onChange === null || onChange === void 0 ? void 0 : onChange(html, plainText);
+        });
+    };
+    const handleRemoveFile = (file) => {
+        const newList = listUploadFiles.filter((f) => f.uid !== file.uid);
+        setListUploadFiles(newList);
+        onFilesChange === null || onFilesChange === void 0 ? void 0 : onFilesChange(newList);
+    };
+    const handleFilesChange = (files) => {
+        setListUploadFiles(files);
+        onFilesChange === null || onFilesChange === void 0 ? void 0 : onFilesChange(files);
+    };
+    return (_jsxs(LexicalComposer, { initialConfig: EDITOR_CONFIG, children: [_jsxs("div", { className: "border border-gray-200 rounded-lg", children: [_jsx(FilePreviewList, { files: listUploadFiles, onRemove: handleRemoveFile }), _jsx("div", { className: "relative", children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "px-3 py-2 text-sm outline-none", style: { minHeight } }), ErrorBoundary: LexicalErrorBoundary, placeholder: placeholder ? (_jsx("div", { className: "absolute top-2 left-3 pointer-events-none", children: _jsx("p", { className: "text-gray-400 text-sm", children: placeholder }) })) : null }) }), _jsxs("div", { className: "flex items-center border-t border-gray-100 px-2 py-1", children: [_jsx(ToolbarPlugin, {}), _jsx(MediaActions, { listUploadFiles: listUploadFiles, onFilesChange: handleFilesChange, showMediaUpload: showMediaUpload })] })] }), _jsx(LinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(OnChangePlugin, { onChange: handleChange, ignoreSelectionChange: true }), _jsx(HtmlPlugin, { initialHtml: initialHtml })] }));
+}