@droppii-org/chat-sdk 0.0.21 → 0.0.22

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

@@ -0,0 +1,169 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $createParagraphNode, $getSelection, $isRangeSelection, FORMAT_TEXT_COMMAND, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_LOW, } from "lexical";
+import { $isListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, } from "@lexical/list";
+import { $createQuoteNode, $isQuoteNode } from "@lexical/rich-text";
+import { TOGGLE_LINK_COMMAND } from "@lexical/link";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { BoldOutlined, ItalicOutlined, StrikethroughOutlined, OrderedListOutlined, UnorderedListOutlined, LinkOutlined, } from "@ant-design/icons";
+import { Button } from "antd";
+const quoteIcon = (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M5.24615 10.5714C4.5616 10.5714 3.99078 10.5715 3.53762 10.5105C3.0593 10.4462 2.62745 10.3047 2.28042 9.95769C1.9334 9.61072 1.79194 9.17887 1.72763 8.70055C1.6667 8.24737 1.66673 7.67654 1.66675 6.99199V6.91274C1.66673 6.22819 1.6667 5.65734 1.72763 5.20419C1.79194 4.72586 1.9334 4.29401 2.28043 3.94699C2.62746 3.59997 3.0593 3.4585 3.53762 3.3942C3.99078 3.33327 4.56161 3.33329 5.24615 3.33331H5.32541C6.00995 3.33329 6.5808 3.33327 7.03397 3.3942C7.51228 3.4585 7.94413 3.59997 8.29116 3.94699C8.63817 4.29401 8.77966 4.72586 8.84396 5.20419C8.90491 5.65734 8.90484 6.22817 8.90484 6.91272V6.99198C8.90484 7.67652 8.90491 8.24737 8.84396 8.70055C8.77966 9.17887 8.63817 9.61072 8.29116 9.95769C7.94413 10.3047 7.51228 10.4462 7.03397 10.5105C6.5808 10.5715 6.00998 10.5714 5.32544 10.5714H5.24615Z", fill: "currentColor" }), _jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M2.84403 16.1313C2.71884 15.7295 2.94301 15.3023 3.34474 15.1772C5.71249 14.4393 7.38095 12.3426 7.38095 9.914V6.76172C7.38095 6.34094 7.72207 5.99982 8.14286 5.99982C8.56366 5.99982 8.90476 6.34094 8.90476 6.76172V9.914C8.90476 13.0731 6.73976 15.7152 3.79812 16.6319C3.39638 16.7572 2.96923 16.533 2.84403 16.1313Z", fill: "currentColor" }), _jsx("path", { d: "M14.389 10.5714C13.7044 10.5714 13.1336 10.5715 12.6804 10.5105C12.2021 10.4462 11.7703 10.3047 11.4233 9.95769C11.0762 9.61072 10.9348 9.17887 10.8704 8.70055C10.8095 8.24737 10.8096 7.67654 10.8096 6.99199V6.91274C10.8096 6.22819 10.8095 5.65734 10.8704 5.20419C10.9348 4.72586 11.0762 4.29401 11.4233 3.94699C11.7703 3.59997 12.2021 3.4585 12.6804 3.3942C13.1336 3.33327 13.7044 3.33329 14.389 3.33331H14.4682C15.1528 3.33329 15.7236 3.33327 16.1768 3.3942C16.6551 3.4585 17.087 3.59997 17.4339 3.94699C17.781 4.29401 17.9225 4.72586 17.9868 5.20419C18.0477 5.65734 18.0477 6.22817 18.0477 6.91272V6.99198C18.0477 7.67652 18.0477 8.24737 17.9868 8.70055C17.9225 9.17887 17.781 9.61072 17.4339 9.95769C17.087 10.3047 16.6551 10.4462 16.1768 10.5105C15.7236 10.5715 15.1528 10.5714 14.4682 10.5714H14.389Z", fill: "currentColor" }), _jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.9869 16.1313C11.8617 15.7295 12.0858 15.3023 12.4876 15.1772C14.8553 14.4393 16.5238 12.3426 16.5238 9.914V6.76172C16.5238 6.34094 16.8649 5.99982 17.2857 5.99982C17.7065 5.99982 18.0476 6.34094 18.0476 6.76172V9.914C18.0476 13.0731 15.8825 15.7152 12.9409 16.6319C12.5392 16.7572 12.112 16.533 11.9869 16.1313Z", fill: "currentColor" })] }));
+const codeIcon = (_jsxs("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M6.41925 6.07724C6.74925 6.40268 6.74925 6.93031 6.41925 7.25575L3.63676 9.99983L6.41925 12.7439C6.74925 13.0693 6.74925 13.597 6.41925 13.9224C6.08926 14.2479 5.55424 14.2479 5.22424 13.9224L1.96374 10.7069C1.56775 10.3164 1.56775 9.68325 1.96374 9.29272L5.22424 6.07724C5.55424 5.7518 6.08926 5.7518 6.41925 6.07724Z", fill: "currentColor" }), _jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.5809 6.07724C13.2509 6.40268 13.2509 6.93031 13.5809 7.25575L16.3634 9.99983L13.5809 12.7439C13.2509 13.0693 13.2509 13.597 13.5809 13.9224C13.9109 14.2479 14.4459 14.2479 14.7759 13.9224L18.0364 10.7069C18.4324 10.3164 18.4324 9.68325 18.0364 9.29272L14.7759 6.07724C14.4459 5.7518 13.9109 5.7518 13.5809 6.07724Z", fill: "currentColor" }), _jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8957 3.36522C12.3382 3.49166 12.5945 3.9529 12.468 4.39543L9.13468 16.0621C9.00825 16.5046 8.54701 16.7609 8.10448 16.6344C7.66195 16.508 7.40571 16.0468 7.53214 15.6042L10.8655 3.93756C10.9919 3.49503 11.4532 3.23879 11.8957 3.36522Z", fill: "currentColor" })] }));
+export const ToolbarPlugin = () => {
+    const [editor] = useLexicalComposerContext();
+    const [activeMarks, setActiveMarks] = useState([]);
+    const formatTextButtons = useMemo(() => {
+        return [
+            {
+                key: "bold",
+                icon: _jsx(BoldOutlined, { size: 22 }),
+                onPress: () => formatText("bold"),
+                isActive: activeMarks.includes("bold"),
+            },
+            {
+                key: "italic",
+                icon: _jsx(ItalicOutlined, { size: 22 }),
+                onPress: () => formatText("italic"),
+                isActive: activeMarks.includes("italic"),
+            },
+            {
+                key: "strikethrough",
+                icon: _jsx(StrikethroughOutlined, { size: 22 }),
+                onPress: () => formatText("strikethrough"),
+                isActive: activeMarks.includes("strikethrough"),
+            },
+        ];
+    }, [activeMarks]);
+    const insertListButtons = useMemo(() => {
+        return [
+            {
+                key: "number",
+                icon: _jsx(OrderedListOutlined, { size: 22 }),
+                onPress: () => insertList("number"),
+                isActive: activeMarks.includes("number"),
+            },
+            {
+                key: "bullet",
+                icon: _jsx(UnorderedListOutlined, { size: 22 }),
+                onPress: () => insertList("bullet"),
+                isActive: activeMarks.includes("bullet"),
+            },
+        ];
+    }, [activeMarks]);
+    const otherButtons = useMemo(() => {
+        return [
+            {
+                key: "link",
+                icon: _jsx(LinkOutlined, { size: 22 }),
+                onPress: () => insertLink(),
+                isActive: activeMarks.includes("link"),
+            },
+            {
+                key: "quote",
+                icon: quoteIcon,
+                onPress: () => insertQuote(),
+                isActive: activeMarks.includes("quote"),
+            },
+        ];
+    }, [activeMarks]);
+    const formatText = useCallback((format) => {
+        editor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
+    }, [editor]);
+    const insertList = useCallback((listType) => {
+        if (listType === "number") {
+            editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
+        }
+        else {
+            editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
+        }
+    }, [editor]);
+    const insertQuote = useCallback(() => {
+        editor.update(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+                const anchorNode = selection.anchor.getNode();
+                const topLevelNode = anchorNode.getTopLevelElementOrThrow();
+                if ($isQuoteNode(topLevelNode)) {
+                    // Nếu đang là QuoteNode → chuyển về Paragraph (bình thường)
+                    const paragraph = $createParagraphNode();
+                    // copy con của quote sang paragraph
+                    const children = topLevelNode.getChildren();
+                    children.forEach((child) => paragraph.append(child));
+                    topLevelNode.replace(paragraph);
+                }
+                else {
+                    // Nếu chưa có → tạo QuoteNode
+                    const quote = $createQuoteNode();
+                    const children = topLevelNode.getChildren();
+                    children.forEach((child) => quote.append(child));
+                    topLevelNode.replace(quote);
+                }
+            }
+        });
+    }, [editor]);
+    const insertLink = useCallback(() => {
+        editor.dispatchCommand(TOGGLE_LINK_COMMAND, "https://");
+    }, [editor]);
+    const getButtonClasses = (isActive) => {
+        return `w-8 h-8 p-0 border-sm ${isActive
+            ? "bg-blue-100 text-blue-600"
+            : "text-gray-500 hover:text-gray-700 hover:bg-gray-100"}`;
+    };
+    useEffect(() => {
+        const updateToolbar = () => {
+            editor.getEditorState().read(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    const marks = [];
+                    // inline
+                    if (selection.hasFormat("bold"))
+                        marks.push("bold");
+                    if (selection.hasFormat("italic"))
+                        marks.push("italic");
+                    if (selection.hasFormat("underline"))
+                        marks.push("underline");
+                    if (selection.hasFormat("code"))
+                        marks.push("code");
+                    // block
+                    const anchorNode = selection.anchor.getNode();
+                    const topLevelNode = anchorNode.getTopLevelElementOrThrow();
+                    if ($isQuoteNode(topLevelNode)) {
+                        marks.push("quote");
+                    }
+                    else if ($isListNode(topLevelNode)) {
+                        marks.push(topLevelNode.getListType() === "number" ? "number" : "bullet");
+                    }
+                    else if (topLevelNode.getType() === "heading") {
+                        marks.push("heading");
+                    }
+                    setActiveMarks(marks);
+                }
+                else {
+                    setActiveMarks([]);
+                }
+            });
+        };
+        const removeUpdateListener = editor.registerUpdateListener(() => {
+            updateToolbar();
+        });
+        const removeSelectionListener = editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
+            updateToolbar();
+            return false;
+        }, COMMAND_PRIORITY_LOW);
+        return () => {
+            removeUpdateListener();
+            removeSelectionListener();
+        };
+    }, [editor]);
+    return (_jsxs("div", { className: "flex items-center gap-2 px-4", children: [formatTextButtons.map((button) => {
+                const { icon, onPress, key, isActive } = button;
+                return (_jsx(Button, { type: "text", shape: "default", className: getButtonClasses(isActive), onClick: onPress, children: icon }, key));
+            }), insertListButtons.map((button) => {
+                const { icon, onPress, key, isActive } = button;
+                return (_jsx(Button, { type: "text", shape: "default", className: getButtonClasses(isActive), onClick: onPress, children: icon }, key));
+            }), otherButtons.map((button) => {
+                const { icon, onPress, key, isActive } = button;
+                return (_jsx(Button, { type: "text", shape: "default", className: getButtonClasses(isActive), onClick: onPress, children: icon }, key));
+            })] }));
+};

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

@@ -1,3 +1,10 @@
-declare const MessageFooter: () => import("react/jsx-runtime").JSX.Element;
-export default MessageFooter;
+import { MessageFooterContextType } from "../../../types/chat";
+import { MessageItem } from "@openim/wasm-client-sdk";
+interface IMessageFooterProviderProps {
+    lastMessage?: MessageItem;
+}
+export declare const MessageFooterContext: import("react").Context<MessageFooterContextType>;
+export declare const useMessageFooterContext: () => MessageFooterContextType;
+declare const MessageFooterProvider: (props: IMessageFooterProviderProps) => import("react/jsx-runtime").JSX.Element;
+export default MessageFooterProvider;
 //# sourceMappingURL=index.d.ts.map

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":"AAwBA,QAAA,MAAM,aAAa,+CAsBlB,CAAC;AACF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/index.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAKtD,UAAU,2BAA2B;IACnC,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AA+BD,eAAO,MAAM,oBAAoB,mDAI/B,CAAC;AAEH,eAAO,MAAM,uBAAuB,gCAAyC,CAAC;AAE9E,QAAA,MAAM,qBAAqB,GAAI,OAAO,2BAA2B,4CAuDhE,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

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

@@ -4,13 +4,34 @@ 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 FooterBottomSection from "./BottomSection";
+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 { createContext, useCallback, useContext, useState } from "react";
+import EnterHandler from "./EnterHandler";
+import ActionBar from "./ActionBar";
+import { useSendMessage } from "../../../hooks/message/useSendMessage";
+import FilePreview from "./FilePreview";
 const theme = {
-// Theme styling goes here
+    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",
 };
-// Catch any errors that occur during Lexical updates and log them
-// or throw them as needed. If you don't throw them, Lexical will
-// try to recover gracefully without losing user data.
 const onError = (error) => {
     console.error(error);
 };
@@ -18,8 +39,27 @@ const initialConfig = {
     namespace: "ChatInput",
     theme,
     onError,
+    nodes: [HeadingNode, ListNode, ListItemNode, QuoteNode, LinkNode],
 };
-const MessageFooter = () => {
-    return (_jsx(LexicalComposer, { initialConfig: initialConfig, children: _jsxs("div", { className: "border-t px-4 py-3", children: [_jsx("div", { className: "relative", children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "border border-indigo-500 rounded-md bg-blue-100 min-h-[64px] px-3 py-2 text-sm" }), ErrorBoundary: LexicalErrorBoundary, "aria-placeholder": "Nh\u1EADp tin nh\u1EAFn", placeholder: _jsx("div", { className: "absolute top-2 left-3", children: _jsx("p", { className: "text-gray-500 text-sm", children: "Nh\u1EADp tin nh\u1EAFn" }) }) }) }), _jsx(FooterBottomSection, {})] }) }));
+export const MessageFooterContext = createContext({
+    onSendMessage: () => { },
+    listUploadFiles: [],
+    setListUploadFiles: () => { },
+});
+export const useMessageFooterContext = () => useContext(MessageFooterContext);
+const MessageFooterProvider = (props) => {
+    const { lastMessage } = props;
+    const { sendTextMessage, sendMergeMessage } = useSendMessage(lastMessage);
+    const [listUploadFiles, setListUploadFiles] = useState([]);
+    const onSendMessage = useCallback(async ({ plainText, richText, type, }) => {
+        if (type === "text") {
+            sendTextMessage({ plainText, richText });
+        }
+        else {
+            sendMergeMessage({ plainText, richText, files: listUploadFiles });
+        }
+        setListUploadFiles([]);
+    }, [sendMergeMessage, sendTextMessage, listUploadFiles]);
+    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", 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": "Nh\u1EADp tin nh\u1EAFn", placeholder: _jsx("div", { className: "absolute top-2 left-7 pointer-events-none", children: _jsx("p", { className: "text-gray-500 text-sm", children: "Nh\u1EADp tin nh\u1EAFn" }) }) }) }), _jsx(ActionBar, {})] }), _jsx(LinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(EnterHandler, {})] }) }));
 };
-export default MessageFooter;
+export default MessageFooterProvider;

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

@@ -0,0 +1,7 @@
+import { MessageItem } from "@openim/wasm-client-sdk";
+interface ImageMessageItemProps {
+    message: MessageItem;
+}
+declare const FileMessageItem: (props: ImageMessageItemProps) => import("react/jsx-runtime").JSX.Element;
+export default FileMessageItem;
+//# sourceMappingURL=FileMessage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/FileMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGtD,UAAU,qBAAqB;IAC7B,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,QAAA,MAAM,eAAe,GAAI,OAAO,qBAAqB,4CAmCpD,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { documentIcon, shortenFileName } from "../footer/FilePreview";
+const FileMessageItem = (props) => {
+    var _a;
+    const { message } = props;
+    const handleDownload = () => {
+        var _a, _b;
+        const url = ((_a = message.fileElem) === null || _a === void 0 ? void 0 : _a.sourceUrl) || "";
+        const fileName = ((_b = message.fileElem) === null || _b === void 0 ? void 0 : _b.fileName) || "";
+        if (!url) {
+            console.warn("Không có link file để tải");
+            return;
+        }
+        const link = document.createElement("a");
+        link.href = url;
+        if (fileName) {
+            link.setAttribute("download", fileName);
+        }
+        link.setAttribute("target", "_blank");
+        link.setAttribute("rel", "noopener noreferrer");
+        document.body.appendChild(link);
+        link.click();
+        link.remove();
+    };
+    return (_jsxs("div", { className: "relative flex flex-row items-center gap-2 align-center bg-gray-100 rounded-md p-1 pr-2 cursor-pointer", onClick: handleDownload, children: [documentIcon, _jsx("span", { className: "text-xs text-gray-500", children: shortenFileName(((_a = message.fileElem) === null || _a === void 0 ? void 0 : _a.fileName) || "") })] }));
+};
+export default FileMessageItem;

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

@@ -0,0 +1,7 @@
+import { MessageItem } from "@openim/wasm-client-sdk";
+interface ImageMessageItemProps {
+    message: MessageItem;
+}
+declare const ImageMessageItem: (props: ImageMessageItemProps) => import("react/jsx-runtime").JSX.Element;
+export default ImageMessageItem;
+//# sourceMappingURL=ImageMessage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/ImageMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAiB,MAAM,yBAAyB,CAAC;AAGrE,UAAU,qBAAqB;IAC7B,OAAO,EAAE,WAAW,CAAC;CACtB;AAID,QAAA,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,4CAoCrD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MessageStatus } from "@openim/wasm-client-sdk";
+import { Image, Spin } from "antd";
+const min = (a, b) => (a > b ? b : a);
+const ImageMessageItem = (props) => {
+    var _a, _b, _c;
+    const { message } = props;
+    const imageHeight = message.pictureElem.sourcePicture.height;
+    const imageWidth = message.pictureElem.sourcePicture.width;
+    const snapshotMaxHeight = (_b = (_a = message.pictureElem.snapshotPicture) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : imageHeight;
+    const minHeight = min(200, imageWidth) * (imageHeight / imageWidth) + 2;
+    const adaptedHight = min(minHeight, snapshotMaxHeight) + 10;
+    const adaptedWidth = min(imageWidth, 200) + 10;
+    const sourceUrl = ((_c = message.pictureElem.snapshotPicture) === null || _c === void 0 ? void 0 : _c.url) ||
+        message.pictureElem.sourcePicture.url;
+    const isSending = message.status === MessageStatus.Sending;
+    const minStyle = {
+        minHeight: `${adaptedHight}px`,
+        minWidth: `${adaptedWidth}px`,
+    };
+    return (_jsx(Spin, { spinning: isSending, children: _jsx("div", { className: "relative max-w-[200px]", style: minStyle, children: _jsx(Image, { rootClassName: "message-image cursor-pointer", className: "max-w-[200px] rounded-md", src: sourceUrl, preview: true, placeholder: _jsx("div", { style: minStyle, className: "flex items-center justify-center", children: _jsx(Spin, {}) }) }) }) }));
+};
+export default ImageMessageItem;

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

@@ -0,0 +1,7 @@
+import { MessageItem } from "@openim/wasm-client-sdk";
+interface TextMessageItemProps {
+    message: MessageItem;
+}
+declare const TextMessageItem: (props: TextMessageItemProps) => import("react/jsx-runtime").JSX.Element;
+export default TextMessageItem;
+//# sourceMappingURL=TextMessage.d.ts.map

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

@@ -0,0 +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;AAGtD,UAAU,oBAAoB;IAC5B,OAAO,EAAE,WAAW,CAAC;CACtB;AACD,QAAA,MAAM,eAAe,GAAI,OAAO,oBAAoB,4CA4BnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+const TextMessageItem = (props) => {
+    var _a, _b, _c;
+    const { message } = props;
+    let extendMessageInfo = null;
+    try {
+        extendMessageInfo = JSON.parse((message === null || message === void 0 ? void 0 : message.ex) || "{}");
+    }
+    catch (error) {
+        extendMessageInfo = {};
+        console.error("Failed to parse extendMessageInfo", error);
+    }
+    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 } }));
+    }
+    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) || "" }));
+};
+export default TextMessageItem;

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

@@ -0,0 +1,7 @@
+import { MessageItem } from "@openim/wasm-client-sdk";
+interface VideoMessageItemProps {
+    message: MessageItem;
+}
+declare const VideoMessageItem: (props: VideoMessageItemProps) => import("react/jsx-runtime").JSX.Element;
+export default VideoMessageItem;
+//# sourceMappingURL=VideoMessage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VideoMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/VideoMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAiB,MAAM,yBAAyB,CAAC;AAGrE,UAAU,qBAAqB;IAC7B,OAAO,EAAE,WAAW,CAAC;CACtB;AAID,QAAA,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,4CAsBrD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MessageStatus } from "@openim/wasm-client-sdk";
+import { Spin } from "antd";
+const min = (a, b) => (a > b ? b : a);
+const VideoMessageItem = (props) => {
+    const { message } = props;
+    const imageHeight = message.videoElem.snapshotHeight;
+    const imageWidth = message.videoElem.snapshotWidth;
+    const minHeight = min(200, imageWidth) * (imageHeight / imageWidth) + 2;
+    const adaptedHight = min(minHeight, imageHeight) + 10;
+    const adaptedWidth = min(imageWidth, 200) + 10;
+    const sourceUrl = message.videoElem.videoUrl;
+    const isSending = message.status === MessageStatus.Sending;
+    const minStyle = {
+        minHeight: `${adaptedHight}px`,
+        minWidth: `${adaptedWidth}px`,
+    };
+    return (_jsx(Spin, { spinning: isSending, children: _jsx("div", { className: "relative max-w-[200px]", style: minStyle, children: _jsx("video", { className: "max-w-[200px] rounded-md", src: sourceUrl, controls: true }) }) }));
+};
+export default VideoMessageItem;

package/dist/components/message/{MessageItem.d.ts → item/index.d.ts}

@@ -1,7 +1,7 @@
-import { GroupMessageItem } from "../../types/chat";
+import { GroupMessageItem } from "../../../types/chat";
 interface MessageItemProps {
     groupMessage: GroupMessageItem;
 }
 declare const MessageItem: ({ groupMessage }: MessageItemProps) => import("react/jsx-runtime").JSX.Element;
 export default MessageItem;
-//# sourceMappingURL=MessageItem.d.ts.map
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAkBvD,UAAU,gBAAgB;IACxB,YAAY,EAAE,gBAAgB,CAAC;CAChC;AACD,QAAA,MAAM,WAAW,GAAI,kBAAkB,gBAAgB,4CAiGtD,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import dayjs from "dayjs";
+import clsx from "clsx";
+import { Avatar } from "antd";
+import isToday from "dayjs/plugin/isToday";
+import { useChatContext } from "../../../context/ChatContext";
+import { MessageType, SessionType, } from "@openim/wasm-client-sdk";
+import TextMessageItem from "./TextMessage";
+import ImageMessageItem from "./ImageMessage";
+import FileMessageItem from "./FileMessage";
+import VideoMessageItem from "./VideoMessage";
+dayjs.extend(isToday);
+const MessageItem = ({ groupMessage }) => {
+    const { user } = useChatContext();
+    const messagesInGroup = (groupMessage === null || groupMessage === void 0 ? void 0 : groupMessage.messages) || [];
+    const isToday = dayjs(groupMessage === null || groupMessage === void 0 ? void 0 : groupMessage.sendTime).isToday();
+    const renderMessageByType = (message) => {
+        switch (message === null || message === void 0 ? void 0 : message.contentType) {
+            case MessageType.TextMessage:
+                return _jsx(TextMessageItem, { message: message });
+            case MessageType.PictureMessage:
+                return _jsx(ImageMessageItem, { message: message });
+            case MessageType.FileMessage:
+                return _jsx(FileMessageItem, { message: message });
+            case MessageType.VideoMessage:
+                return _jsx(VideoMessageItem, { message: message });
+            default:
+                return _jsx(TextMessageItem, { message: message });
+        }
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-2 my-4 mx-3 sm:mx-4", children: [_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: dayjs(groupMessage === null || groupMessage === void 0 ? void 0 : groupMessage.sendTime).format(isToday ? "HH:mm" : "HH:mm, DD MMMM") }) }), messagesInGroup === null || messagesInGroup === void 0 ? void 0 : messagesInGroup.map((message, messageIndex) => {
+                var _a, _b, _c, _d;
+                const isMine = (message === null || message === void 0 ? void 0 : message.sendID) === (user === null || user === void 0 ? void 0 : user.userID);
+                const showAvatar = messageIndex === messagesInGroup.length - 1;
+                const showSenderName = messageIndex === 0 && (message === null || message === void 0 ? void 0 : message.sessionType) === SessionType.Group;
+                return (_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 && (_jsx("div", { className: "flex items-center justify-center w-[32px] h-[32px]", children: showAvatar && (_jsx(Avatar, { 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: "flex flex-col items-end flex-[0.8]", children: [!isMine && showSenderName && (_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-gray-100"), 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 text-gray-500"), children: dayjs(message === null || message === void 0 ? void 0 : message.sendTime).format("HH:mm") })] })] })] }) }, message === null || message === void 0 ? void 0 : message.clientMsgID));
+            })] }, groupMessage === null || groupMessage === void 0 ? void 0 : groupMessage.groupMessageID));
+};
+export default MessageItem;

package/dist/context/ChatContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatContext.d.ts","sourceRoot":"","sources":["../../src/context/ChatContext.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,eAAe,EACf,iBAAiB,EAElB,MAAM,eAAe,CAAC;AAIvB,eAAO,MAAM,WAAW,0CAGtB,CAAC;AAEH,eAAO,MAAM,cAAc,uBAAgC,CAAC;AAE5D,eAAO,MAAM,YAAY,GAAI,qCAI1B,iBAAiB,4CA2EnB,CAAC"}
+{"version":3,"file":"ChatContext.d.ts","sourceRoot":"","sources":["../../src/context/ChatContext.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,eAAe,EACf,iBAAiB,EAElB,MAAM,eAAe,CAAC;AAIvB,eAAO,MAAM,WAAW,0CAGtB,CAAC;AAEH,eAAO,MAAM,cAAc,uBAAgC,CAAC;AAE5D,eAAO,MAAM,YAAY,GAAI,qCAI1B,iBAAiB,4CA6EnB,CAAC"}

package/dist/context/ChatContext.js

@@ -23,13 +23,15 @@ export const ChatProvider = ({ children, config, refetchToken, }) => {
         });
     };
     const handleLogin = (newToken) => {
-        DChatSDK.login(Object.assign(Object.assign({}, config), { token: newToken || config.token }))
-            .then((res) => {
-            getUserInfo();
-        })
-            .catch(({ errCode, errMsg }) => {
-            console.log("handleLogin", errCode, errMsg);
-        });
+        if (config) {
+            DChatSDK.login(Object.assign(Object.assign({}, config), { token: newToken || config.token }))
+                .then((res) => {
+                getUserInfo();
+            })
+                .catch(({ errCode, errMsg }) => {
+                console.log("handleLogin", errCode, errMsg);
+            });
+        }
     };
     useEffect(() => {
         if (config) {

package/dist/hooks/conversation/useConversation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useConversation.d.ts","sourceRoot":"","sources":["../../../src/hooks/conversation/useConversation.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,WAAW,EAEZ,MAAM,yBAAyB,CAAC;AAIjC,eAAO,MAAM,mBAAmB,GAAI,mBAAmB,MAAM;;;oDAgBxC,MAAM;CAmC1B,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,4BAGnC;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,WAAW,CAAC;CAC1B;;CAuBA,CAAC"}
+{"version":3,"file":"useConversation.d.ts","sourceRoot":"","sources":["../../../src/hooks/conversation/useConversation.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,WAAW,EAEZ,MAAM,yBAAyB,CAAC;AAIjC,eAAO,MAAM,mBAAmB,GAAI,mBAAmB,MAAM;;;oDAgBxC,MAAM;CA+C1B,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,4BAGnC;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,WAAW,CAAC;CAC1B;;CAuBA,CAAC"}

package/dist/hooks/conversation/useConversation.js

@@ -25,11 +25,19 @@ export const useConversationList = (selectedThreadId) => {
         getAllConversationList();
     }, [getAllConversationList]);
     useEffect(() => {
-        DChatSDK.on(CbEvents.OnConversationChanged, ({ data }) => {
-            setConversationList(data);
-        });
+        const handler = ({ data }) => {
+            setConversationList((prev) => {
+                // Tạo map để cập nhật
+                const map = new Map(prev.map((c) => [c.conversationID, c]));
+                data.forEach((changed) => {
+                    map.set(changed.conversationID, changed);
+                });
+                return Array.from(map.values());
+            });
+        };
+        DChatSDK.on(CbEvents.OnConversationChanged, handler);
         return () => {
-            DChatSDK.off(CbEvents.OnConversationChanged, () => { });
+            DChatSDK.off(CbEvents.OnConversationChanged, handler);
         };
     }, []);
     useEffect(() => {

package/dist/hooks/conversation/useConversationStore.d.ts

@@ -1,6 +1,7 @@
+import { ConversationItem } from "@openim/wasm-client-sdk";
 interface ConversationStore {
-    conversationData: any;
-    setConversationData: (data: any) => void;
+    conversationData: ConversationItem | null;
+    setConversationData: (data: ConversationItem) => void;
     selectedThreadId: string;
     selectedSourceId: string;
     setSelectedThreadId: (threadId: string) => void;

package/dist/hooks/conversation/useConversationStore.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useConversationStore.d.ts","sourceRoot":"","sources":["../../../src/hooks/conversation/useConversationStore.ts"],"names":[],"mappings":"AAEA,UAAU,iBAAiB;IACzB,gBAAgB,EAAE,GAAG,CAAC;IACtB,mBAAmB,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IACzC,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,mBAAmB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED,QAAA,MAAM,oBAAoB,gFAOvB,CAAC;AAEJ,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"useConversationStore.d.ts","sourceRoot":"","sources":["../../../src/hooks/conversation/useConversationStore.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAG3D,UAAU,iBAAiB;IACzB,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC1C,mBAAmB,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACtD,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,mBAAmB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED,QAAA,MAAM,oBAAoB,gFAOvB,CAAC;AAEJ,eAAe,oBAAoB,CAAC"}

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

@@ -1,13 +1,25 @@
-import { MessageItem } from "@openim/wasm-client-sdk";
-import { ExtendMessageInfo } from "../../types/chat";
-interface SendMessageProps {
-    recvID: string;
-    groupID: string;
-}
+import { MergerMsgParams, MessageItem } from "@openim/wasm-client-sdk";
+import { ExtendMessageInfo, FileMsgParamsByFile, ImageMsgParamsByFile, VideoMsgParamsByFile } from "../../types/chat";
+import { UploadFile } from "antd";
 export declare const createTextMessage: (text: string) => Promise<MessageItem | null>;
-export declare const useSendMessage: (props: SendMessageProps) => {
-    sendTextMessage: (text: string, lastMessage?: MessageItem) => Promise<null | undefined>;
+export declare const createImageMessageByFile: (file: ImageMsgParamsByFile) => Promise<MessageItem | null>;
+export declare const createMergerMessage: (mergerMsgParams: MergerMsgParams) => Promise<MessageItem | null>;
+export declare const createVideoMessageByFile: (file: VideoMsgParamsByFile) => Promise<MessageItem | null>;
+export declare const createFileMessageByFile: (file: FileMsgParamsByFile) => Promise<MessageItem | null>;
+export declare const useSendMessage: (lastMessage?: MessageItem) => {
+    sendTextMessage: ({ plainText, richText, }: {
+        plainText: string;
+        richText: string;
+    }) => Promise<void>;
+    sendMergeMessage: ({ richText, plainText, files, }: {
+        richText: string;
+        plainText: string;
+        files: UploadFile[];
+    }) => Promise<void>;
 };
-export declare const generateExtendMessageInfo: (currentUserID: string, lastMessage?: MessageItem) => ExtendMessageInfo;
-export {};
+export declare const generateExtendMessageInfo: ({ richText, currentUserID, lastMessage, }: {
+    richText?: string;
+    currentUserID: string;
+    lastMessage?: MessageItem;
+}) => ExtendMessageInfo;
 //# sourceMappingURL=useSendMessage.d.ts.map

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,EAAE,WAAW,EAAiB,MAAM,yBAAyB,CAAC;AAErE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAQrD,UAAU,gBAAgB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,iBAAiB,GAAU,MAAM,MAAM,gCAanD,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,gBAAgB;4BAKrC,MAAM,gBAAgB,WAAW;CAqCjD,CAAC;AAEF,eAAO,MAAM,yBAAyB,GACpC,eAAe,MAAM,EACrB,cAAc,WAAW,KAapB,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;AAQ1B,OAAO,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAGlC,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,cAAc,GAAI,cAAc,WAAW;gDAiCjD;QACD,SAAS,EAAE,MAAM,CAAC;QAClB,QAAQ,EAAE,MAAM,CAAC;KAClB;wDAwBE;QACD,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,UAAU,EAAE,CAAC;KACrB;CA4FJ,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,2CAIvC;IACD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,KAmBM,iBACN,CAAC"}