@droppii-org/chat-sdk 0.1.71 → 0.1.73

package/dist/src/components/message/footer/PasteAndDropPlugin.js

@@ -0,0 +1,115 @@
+"use client";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useEffect } from "react";
+import { COMMAND_PRIORITY_HIGH, PASTE_COMMAND, DROP_COMMAND } from "lexical";
+import { useMessageFooterContext } from ".";
+import { useTranslation } from "react-i18next";
+import { processAndValidateFiles, ACCEPTED_IMAGE_TYPES } from "../../../utils/fileValidation";
+const PasteAndDropPlugin = ({ onFilesAdded }) => {
+    const [editor] = useLexicalComposerContext();
+    const { setListUploadFiles } = useMessageFooterContext();
+    const { t } = useTranslation();
+    useEffect(() => {
+        // Handle paste event
+        const unregisterPaste = editor.registerCommand(PASTE_COMMAND, (event) => {
+            try {
+                const clipboardData = event.clipboardData;
+                if (!clipboardData)
+                    return false;
+                const items = Array.from(clipboardData.items);
+                const imageItems = items.filter((item) => item.type.startsWith("image/"));
+                if (imageItems.length > 0) {
+                    event.preventDefault();
+                    const files = [];
+                    imageItems.forEach((item) => {
+                        const file = item.getAsFile();
+                        if (file) {
+                            files.push(file);
+                        }
+                    });
+                    if (files.length > 0) {
+                        setListUploadFiles((prev) => {
+                            const validFiles = processAndValidateFiles(files, {
+                                t,
+                                currentUploadedFiles: prev,
+                            });
+                            if (validFiles.length > 0) {
+                                onFilesAdded === null || onFilesAdded === void 0 ? void 0 : onFilesAdded(files);
+                                return [...prev, ...validFiles];
+                            }
+                            return prev;
+                        });
+                    }
+                    return true;
+                }
+                return false;
+            }
+            catch (error) {
+                console.error("Error handling paste:", error);
+                return false;
+            }
+        }, COMMAND_PRIORITY_HIGH);
+        // Handle drop event
+        const unregisterDrop = editor.registerCommand(DROP_COMMAND, (event) => {
+            try {
+                const dataTransfer = event.dataTransfer;
+                if (!dataTransfer)
+                    return false;
+                const files = Array.from(dataTransfer.files);
+                const imageOrVideoFiles = files.filter((file) => ACCEPTED_IMAGE_TYPES.includes(file.type) ||
+                    file.type.startsWith("video/"));
+                if (imageOrVideoFiles.length > 0) {
+                    event.preventDefault();
+                    setListUploadFiles((prev) => {
+                        const validFiles = processAndValidateFiles(imageOrVideoFiles, {
+                            t,
+                            currentUploadedFiles: prev,
+                        });
+                        if (validFiles.length > 0) {
+                            onFilesAdded === null || onFilesAdded === void 0 ? void 0 : onFilesAdded(imageOrVideoFiles);
+                            return [...prev, ...validFiles];
+                        }
+                        return prev;
+                    });
+                    return true;
+                }
+                return false;
+            }
+            catch (error) {
+                console.error("Error handling drop:", error);
+                return false;
+            }
+        }, COMMAND_PRIORITY_HIGH);
+        return () => {
+            unregisterPaste();
+            unregisterDrop();
+        };
+    }, [editor, setListUploadFiles, t, onFilesAdded]);
+    // Add visual feedback for drag over
+    useEffect(() => {
+        const editorElement = editor.getRootElement();
+        if (!editorElement)
+            return;
+        const handleDragOverVisual = (e) => {
+            e.preventDefault();
+            editorElement.classList.add("border-blue-500", "bg-blue-50");
+        };
+        const handleDragLeaveVisual = (e) => {
+            e.preventDefault();
+            editorElement.classList.remove("border-blue-500", "bg-blue-50");
+        };
+        const handleDropVisual = () => {
+            editorElement.classList.remove("border-blue-500", "bg-blue-50");
+        };
+        editorElement.addEventListener("dragover", handleDragOverVisual);
+        editorElement.addEventListener("dragleave", handleDragLeaveVisual);
+        editorElement.addEventListener("drop", handleDropVisual);
+        return () => {
+            editorElement.removeEventListener("dragover", handleDragOverVisual);
+            editorElement.removeEventListener("dragleave", handleDragLeaveVisual);
+            editorElement.removeEventListener("drop", handleDropVisual);
+        };
+    }, [editor]);
+    return null;
+};
+export default PasteAndDropPlugin;

package/dist/src/components/message/footer/SessionClosedModal.d.ts

@@ -0,0 +1,10 @@
+interface SessionClosedModalProps {
+    open: boolean;
+    loading: boolean;
+    onReopen: () => void;
+    onCreateNew: () => void;
+    onClose: () => void;
+}
+declare const SessionClosedModal: ({ open, loading, onReopen, onCreateNew, onClose, }: SessionClosedModalProps) => import("react/jsx-runtime").JSX.Element;
+export default SessionClosedModal;
+//# sourceMappingURL=SessionClosedModal.d.ts.map

package/dist/src/components/message/footer/SessionClosedModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SessionClosedModal.d.ts","sourceRoot":"","sources":["../../../../../src/components/message/footer/SessionClosedModal.tsx"],"names":[],"mappings":"AAKA,UAAU,uBAAuB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,kBAAkB,GAAI,oDAMzB,uBAAuB,4CAmDzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/src/components/message/footer/SessionClosedModal.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal, Button } from "antd";
+import { useTranslation } from "react-i18next";
+const SessionClosedModal = ({ open, loading, onReopen, onCreateNew, onClose, }) => {
+    const { t } = useTranslation();
+    return (_jsx(Modal, { open: open, onCancel: onClose, footer: null, closable: !loading, centered: true, width: 400, maskClosable: !loading, keyboard: !loading, forceRender: true, children: _jsxs("div", { className: "flex flex-col gap-4 pt-2", role: "alertdialog", "aria-label": t("session_closed_modal_title"), children: [_jsx("p", { className: "text-base font-semibold", children: t("session_closed_modal_title") }), _jsx("p", { className: "text-sm text-gray-600", children: t("session_closed_modal_description") }), _jsxs("div", { className: "flex gap-3 w-full", children: [_jsx(Button, { type: "primary", className: "flex-1", size: "large", onClick: onReopen, loading: loading, disabled: loading, children: t("session_closed_modal_reopen") }), _jsx(Button, { type: "primary", className: "flex-1", size: "large", onClick: onCreateNew, loading: loading, disabled: loading, children: t("session_closed_modal_create_new") })] })] }) }));
+};
+export default SessionClosedModal;

package/dist/src/components/message/footer/ToolbarPlugin.d.ts

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

package/dist/src/components/message/footer/ToolbarPlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarPlugin.d.ts","sourceRoot":"","sources":["../../../../../src/components/message/footer/ToolbarPlugin.tsx"],"names":[],"mappings":"AA4DA,eAAO,MAAM,aAAa,+CAwNzB,CAAC"}

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

@@ -0,0 +1,166 @@
+"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, } 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", { fillRule: "evenodd", clipRule: "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", { fillRule: "evenodd", clipRule: "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" })] }));
+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: <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("strikethrough"))
+                        marks.push("strikethrough");
+                    // 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 pt-1", 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/src/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/src/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/src/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/src/components/message/footer/index.d.ts

@@ -0,0 +1,11 @@
+import { MessageFooterContextType } from "../../../types/chat";
+import { ISessionResponse } from "../../../types/dto";
+interface MessageFooterProps {
+    currentSession?: ISessionResponse;
+    openCreateCannedModal?: () => void;
+}
+export declare const MessageFooterContext: import("react").Context<MessageFooterContextType>;
+export declare const useMessageFooterContext: () => MessageFooterContextType;
+declare const MessageFooterProvider: ({ currentSession, openCreateCannedModal, }: MessageFooterProps) => import("react/jsx-runtime").JSX.Element;
+export default MessageFooterProvider;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/message/footer/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAEL,wBAAwB,EAEzB,MAAM,cAAc,CAAC;AAStB,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAkB/C,UAAU,kBAAkB;IAC1B,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;CACpC;AASD,eAAO,MAAM,oBAAoB,mDAY/B,CAAC;AAEH,eAAO,MAAM,uBAAuB,gCAAyC,CAAC;AAE9E,QAAA,MAAM,qBAAqB,GAAI,4CAG5B,kBAAkB,4CAsSpB,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

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

@@ -0,0 +1,219 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { ToolbarPlugin } from "./ToolbarPlugin";
+import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
+import { ListPlugin } from "@lexical/react/LexicalListPlugin";
+import { editorTheme, editorNodes, editorOnError } from "./editorConfig";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import EnterHandler from "./EnterHandler";
+import ActionBar from "./ActionBar";
+import { AccountType, } from "../../../types/chat";
+import { useSendMessage } from "../../../hooks/message/useSendMessage";
+import { Modal, Popover } from "antd";
+import FilePreview from "./FilePreview";
+import LinkInputPreview from "./LinkInputPreview";
+import ComposerTextSyncPlugin from "./ComposerTextSyncPlugin";
+import { extractLinkUrls } from "../../../utils/link";
+import { useFetchUrlMetadata } from "../../../hooks/common/useFetchUrlMetadata";
+import { useTranslation } from "react-i18next";
+import PasteAndDropPlugin from "./PasteAndDropPlugin";
+import { ReplyPreviewBar } from "../../../components/message/reply/ReplyPreviewBar";
+import CannedResponse from "../../../components/canned-response";
+import { CannedResponseTriggerPlugin } from "./CannedResponsePlugin";
+import { useBoolean } from "ahooks";
+import useAuthStore from "../../../store/auth";
+import useConversationStore from "../../../store/conversation";
+import { useCurrentUserAccountType } from "../../../hooks/user/useCurrentUserAccountType";
+import ComposerTabs from "./ComposerTabs";
+import ComposerEditor from "./ComposerEditor";
+import SessionClosedModal from "./SessionClosedModal";
+import { useCreateSession, useReopenSession, } from "../../../hooks/session/useReopenOrCreateSession";
+import { emit } from "../../../utils/events";
+const initialConfig = {
+    namespace: "ChatInput",
+    theme: editorTheme,
+    onError: editorOnError,
+    nodes: editorNodes,
+};
+export const MessageFooterContext = createContext({
+    onSendMessage: () => false,
+    isInternal: false,
+    setIsInternal: () => { },
+    listUploadFiles: [],
+    setListUploadFiles: () => { },
+    isOpenCanned: false,
+    setIsOpenCanned: () => { },
+    activeCannedIndex: 0,
+    setActiveCannedIndex: () => { },
+    maxActiveCannedIndex: 0,
+    setMaxActiveCannedIndex: () => { },
+});
+export const useMessageFooterContext = () => useContext(MessageFooterContext);
+const MessageFooterProvider = ({ currentSession, openCreateCannedModal, }) => {
+    const { t } = useTranslation();
+    const { sendMergeMessage } = useSendMessage();
+    const accountType = useCurrentUserAccountType();
+    const [listUploadFiles, setListUploadFiles] = useState([]);
+    const [composerText, setComposerText] = useState("");
+    const [isLinkPreviewDismissed, setIsLinkPreviewDismissed] = useState(false);
+    const [isOpenCanned, { setTrue: openCanned, setFalse: closeCanned }] = useBoolean(false);
+    const isCrm = useAuthStore((state) => state.isCrm);
+    const [cannedQuery, setCannedQuery] = useState("");
+    const [activeCannedIndex, setActiveCannedIndex] = useState(0);
+    const [maxActiveCannedIndex, setMaxActiveCannedIndex] = useState(0);
+    const [isInternal, setIsInternal] = useState(false);
+    const canUseInternal = isCrm && accountType === AccountType.Staff;
+    const quotedMessage = useConversationStore((state) => state.quotedMessage);
+    const conversationData = useConversationStore((state) => state.conversationData);
+    const lockToInternal = Boolean((quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.clientMsgID) && (quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.isInternal));
+    const previewUrl = useMemo(() => {
+        const urls = extractLinkUrls(composerText);
+        return urls.length === 1 ? urls[0] : null;
+    }, [composerText]);
+    const showLinkPreview = !!previewUrl && !isLinkPreviewDismissed && !isInternal;
+    const { data: previewMetadata } = useFetchUrlMetadata(previewUrl !== null && previewUrl !== void 0 ? previewUrl : "", showLinkPreview);
+    useEffect(() => {
+        setIsLinkPreviewDismissed(false);
+    }, [previewUrl]);
+    const resolveUrlMetadata = useCallback(() => {
+        if (!showLinkPreview || !previewUrl || !previewMetadata)
+            return undefined;
+        return {
+            title: previewMetadata.title,
+            description: previewMetadata.description,
+            image: previewMetadata.image,
+        };
+    }, [showLinkPreview, previewUrl, previewMetadata]);
+    const [isSessionClosedModalOpen, { setTrue: openSessionClosedModal, setFalse: closeSessionClosedModal },] = useBoolean(false);
+    const pendingMessageRef = useRef(null);
+    const { mutateAsync: createSession, isPending: isCreatingSession } = useCreateSession();
+    const { mutateAsync: reopenSession, isPending: isReopeningSession } = useReopenSession();
+    const isSessionActionLoading = isCreatingSession || isReopeningSession;
+    useEffect(() => {
+        if (!canUseInternal && isInternal) {
+            setIsInternal(false);
+        }
+    }, [canUseInternal, isInternal]);
+    useEffect(() => {
+        if (!canUseInternal ||
+            !(quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.clientMsgID) ||
+            !quotedMessage.isInternal) {
+            return;
+        }
+        setIsInternal(true);
+    }, [canUseInternal, quotedMessage]);
+    const placeholderText = isInternal
+        ? t("enter_internal_message")
+        : t("enter_message");
+    const onSendMessage = useCallback(({ plainText, richText, type, isInternal, }) => {
+        if ((currentSession === null || currentSession === void 0 ? void 0 : currentSession.isClosed) && !isInternal) {
+            pendingMessageRef.current = {
+                plainText,
+                richText,
+                type,
+                isInternal,
+                files: [...listUploadFiles],
+                urlMetadata: resolveUrlMetadata(),
+            };
+            openSessionClosedModal();
+            return false;
+        }
+        sendMergeMessage({
+            plainText,
+            richText,
+            files: listUploadFiles,
+            currentSession,
+            isInternal,
+            urlMetadata: resolveUrlMetadata(),
+        });
+        setListUploadFiles([]);
+        return true;
+    }, [
+        sendMergeMessage,
+        listUploadFiles,
+        currentSession,
+        openSessionClosedModal,
+        resolveUrlMetadata,
+    ]);
+    const executePendingSend = useCallback((newSession) => {
+        const pending = pendingMessageRef.current;
+        if (!pending)
+            return;
+        const sessionToUse = newSession || currentSession;
+        sendMergeMessage({
+            plainText: pending.plainText,
+            richText: pending.richText,
+            files: pending.files,
+            currentSession: sessionToUse,
+            isInternal: pending.isInternal,
+            urlMetadata: pending.urlMetadata,
+        });
+        setListUploadFiles([]);
+        pendingMessageRef.current = null;
+        emit("CLEAR_COMPOSER");
+    }, [sendMergeMessage, currentSession]);
+    const handleSessionAction = useCallback(async (action) => {
+        const conversationId = conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationID;
+        if (!conversationId)
+            return;
+        try {
+            const newSession = await action(conversationId);
+            closeSessionClosedModal();
+            setTimeout(() => {
+                executePendingSend(newSession);
+            }, 700);
+        }
+        catch (_a) {
+            closeSessionClosedModal();
+            pendingMessageRef.current = null;
+            Modal.error({
+                centered: true,
+                content: t("session_action_error"),
+            });
+        }
+    }, [
+        conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationID,
+        closeSessionClosedModal,
+        executePendingSend,
+        t,
+    ]);
+    const handleReopenSession = () => handleSessionAction(reopenSession);
+    const handleCreateNewSession = () => handleSessionAction(createSession);
+    const handleCloseSessionModal = () => {
+        if (isSessionActionLoading)
+            return;
+        closeSessionClosedModal();
+    };
+    const onOpenCreateCannedModal = () => {
+        closeCanned();
+        openCreateCannedModal === null || openCreateCannedModal === void 0 ? void 0 : openCreateCannedModal();
+    };
+    const onOpenCanned = (query) => {
+        setCannedQuery(query);
+        openCanned();
+    };
+    const setIsOpenCanned = (open) => {
+        if (open) {
+            openCanned();
+            return;
+        }
+        closeCanned();
+    };
+    return (_jsxs(MessageFooterContext.Provider, { value: {
+            onSendMessage,
+            isInternal,
+            setIsInternal,
+            listUploadFiles,
+            setListUploadFiles,
+            isOpenCanned,
+            setIsOpenCanned,
+            activeCannedIndex,
+            setActiveCannedIndex,
+            maxActiveCannedIndex,
+            setMaxActiveCannedIndex,
+        }, children: [_jsxs(LexicalComposer, { initialConfig: initialConfig, children: [_jsx(Popover, { open: isOpenCanned, content: _jsx(CannedResponse, { onClose: closeCanned, openCreateCannedModal: onOpenCreateCannedModal, cannedQuery: cannedQuery }), placement: "topLeft", trigger: "click", arrow: false, classNames: {
+                            body: "mx-1 !p-0",
+                        }, destroyOnHidden: true, children: _jsxs("div", { className: "border-t pb-2 flex flex-col gap-1 bg-white", children: [_jsx(ReplyPreviewBar, {}), listUploadFiles.length > 0 && _jsx(FilePreview, {}), showLinkPreview && previewUrl && (_jsx(LinkInputPreview, { url: previewUrl, onRemove: () => setIsLinkPreviewDismissed(true) })), _jsx(ToolbarPlugin, {}), _jsxs("div", { children: [_jsx(ComposerTabs, { canUseInternal: canUseInternal, hintText: t("canned_response_hint"), isInternal: isInternal, lockToInternal: lockToInternal, setIsInternal: setIsInternal }), _jsx(ComposerEditor, { isInternal: isInternal, placeholderText: placeholderText })] }), _jsx(ActionBar, {})] }) }), _jsx(LinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(ComposerTextSyncPlugin, { onChange: setComposerText }), _jsx(EnterHandler, {}), _jsx(PasteAndDropPlugin, {}), isCrm && (_jsx(CannedResponseTriggerPlugin, { onClose: closeCanned, onOpen: onOpenCanned }))] }), _jsx(SessionClosedModal, { open: isSessionClosedModalOpen, loading: isSessionActionLoading, onReopen: handleReopenSession, onCreateNew: handleCreateNewSession, onClose: handleCloseSessionModal })] }));
+};
+export default MessageFooterProvider;

package/dist/src/components/message/item/CustomMessage.d.ts

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

package/dist/src/components/message/item/CustomMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomMessage.d.ts","sourceRoot":"","sources":["../../../../../src/components/message/item/CustomMessage.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAMtD,UAAU,sBAAsB;IAC9B,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,QAAA,MAAM,iBAAiB,GAAI,aAAa,sBAAsB,mDAwC7D,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/src/components/message/item/CustomMessage.js

@@ -0,0 +1,26 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { useChatContext } from "../../../context/ChatContext";
+import { parseCustomMessagePayload } from "../../../utils/customMessage";
+import { MESSAGE_TEXT_CLASS } from "./textStyle";
+const CustomMessageItem = ({ message }) => {
+    var _a, _b;
+    const { t } = useTranslation();
+    const { renderCustomMessage } = useChatContext();
+    const payload = parseCustomMessagePayload(message);
+    const renderedContent = renderCustomMessage === null || renderCustomMessage === void 0 ? void 0 : renderCustomMessage({ message, payload });
+    if (renderedContent) {
+        return _jsx(_Fragment, { children: renderedContent });
+    }
+    const fallbackText = ((_a = message === null || message === void 0 ? void 0 : message.textElem) === null || _a === void 0 ? void 0 : _a.content) || ((_b = message === null || message === void 0 ? void 0 : message.quoteElem) === null || _b === void 0 ? void 0 : _b.text);
+    if (fallbackText) {
+        return (_jsx("p", { className: clsx("min-w-0 whitespace-pre-wrap [overflow-wrap:anywhere]", MESSAGE_TEXT_CLASS), children: fallbackText }));
+    }
+    if (!payload) {
+        return null;
+    }
+    return (_jsx("p", { className: clsx("min-w-0 whitespace-pre-wrap [overflow-wrap:anywhere]", MESSAGE_TEXT_CLASS), children: t("invalid_message") }));
+};
+export default CustomMessageItem;