@droppii-org/chat-sdk 0.1.3 → 0.1.5

package/dist/assets/svg/cannedResponse.d.ts

@@ -0,0 +1,7 @@
+interface ISvgProps {
+    size?: number;
+    className?: string;
+}
+declare const CannedResponseIcon: (props: ISvgProps) => import("react/jsx-runtime").JSX.Element;
+export default CannedResponseIcon;
+//# sourceMappingURL=cannedResponse.d.ts.map

package/dist/assets/svg/cannedResponse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cannedResponse.d.ts","sourceRoot":"","sources":["../../../src/assets/svg/cannedResponse.tsx"],"names":[],"mappings":"AAAA,UAAU,SAAS;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,kBAAkB,GAAI,OAAO,SAAS,4CAyC3C,CAAC;AACF,eAAe,kBAAkB,CAAC"}

package/dist/assets/svg/cannedResponse.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CannedResponseIcon = (props) => (_jsxs("svg", { width: props.size || 18, height: props.size || 18, viewBox: `${0} ${0} ${props.size || 18} ${props.size || 18}`, fill: "none", xmlns: "http://www.w3.org/2000/svg", className: props === null || props === void 0 ? void 0 : props.className, children: [_jsxs("g", { clipPath: "url(#clip0_4070_70030)", children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.66732 0.833374C7.12755 0.833374 7.50065 1.20647 7.50065 1.66671L5.00065 18.3334C5.00065 18.7936 4.62755 19.1667 4.16732 19.1667C3.70708 19.1667 3.33398 18.7936 3.33398 18.3334L5.83398 1.66671C5.83398 1.20647 6.20708 0.833374 6.66732 0.833374Z", fill: "currentColor" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.9993 0.833374C15.4596 0.833374 15.8327 1.20647 15.8327 1.66671L13.3327 18.3334C13.3327 18.7936 12.9596 19.1667 12.4993 19.1667C12.0391 19.1667 11.666 18.7936 11.666 18.3334L14.166 1.66671C14.166 1.20647 14.5391 0.833374 14.9993 0.833374Z", fill: "currentColor" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M19.1673 5.83333C19.1673 6.29357 18.7942 6.66667 18.334 6.66667H1.66732C1.20708 6.66667 0.833984 6.29357 0.833984 5.83333C0.833984 5.37309 1.20708 5 1.66732 5H18.334C18.7942 5 19.1673 5.3731 19.1673 5.83333Z", fill: "currentColor" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M19.1673 14.1667C19.1673 14.627 18.7942 15 18.334 15H1.66732C1.20708 15 0.833984 14.627 0.833984 14.1667C0.833984 13.7065 1.20708 13.3334 1.66732 13.3334H18.334C18.7942 13.3334 19.1673 13.7065 19.1673 14.1667Z", fill: "currentColor" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_4070_70030", children: _jsx("rect", { width: props.size || 18, height: props.size || 18, fill: "white" }) }) })] }));
+export default CannedResponseIcon;

package/dist/assets/svg/cannedResponse.tsx

@@ -0,0 +1,48 @@
+interface ISvgProps {
+  size?: number;
+  className?: string;
+}
+
+const CannedResponseIcon = (props: ISvgProps) => (
+  <svg
+    width={props.size || 18}
+    height={props.size || 18}
+    viewBox={`${0} ${0} ${props.size || 18} ${props.size || 18}`}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={props?.className}
+  >
+    <g clipPath="url(#clip0_4070_70030)">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.66732 0.833374C7.12755 0.833374 7.50065 1.20647 7.50065 1.66671L5.00065 18.3334C5.00065 18.7936 4.62755 19.1667 4.16732 19.1667C3.70708 19.1667 3.33398 18.7936 3.33398 18.3334L5.83398 1.66671C5.83398 1.20647 6.20708 0.833374 6.66732 0.833374Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.9993 0.833374C15.4596 0.833374 15.8327 1.20647 15.8327 1.66671L13.3327 18.3334C13.3327 18.7936 12.9596 19.1667 12.4993 19.1667C12.0391 19.1667 11.666 18.7936 11.666 18.3334L14.166 1.66671C14.166 1.20647 14.5391 0.833374 14.9993 0.833374Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M19.1673 5.83333C19.1673 6.29357 18.7942 6.66667 18.334 6.66667H1.66732C1.20708 6.66667 0.833984 6.29357 0.833984 5.83333C0.833984 5.37309 1.20708 5 1.66732 5H18.334C18.7942 5 19.1673 5.3731 19.1673 5.83333Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M19.1673 14.1667C19.1673 14.627 18.7942 15 18.334 15H1.66732C1.20708 15 0.833984 14.627 0.833984 14.1667C0.833984 13.7065 1.20708 13.3334 1.66732 13.3334H18.334C18.7942 13.3334 19.1673 13.7065 19.1673 14.1667Z"
+        fill="currentColor"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_4070_70030">
+        <rect width={props.size || 18} height={props.size || 18} fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default CannedResponseIcon;

package/dist/assets/svg/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./document";
+export * from "./cannedResponse";
 //# sourceMappingURL=index.d.ts.map

package/dist/assets/svg/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/assets/svg/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/assets/svg/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}

package/dist/assets/svg/index.js

@@ -1 +1,2 @@
 export * from "./document";
+export * from "./cannedResponse";

package/dist/assets/svg/index.ts

@@ -1 +1,2 @@
 export * from "./document";
+export * from "./cannedResponse";

package/dist/components/cannedResponse/CannedResponseBody.d.ts

@@ -0,0 +1,8 @@
+interface ICannedResponseBodyProps {
+    search?: string;
+    onSelectCannedResponse?: (content: string) => void;
+    cannedQuery?: string;
+}
+declare const CannedResponseBody: (props: ICannedResponseBodyProps) => import("react/jsx-runtime").JSX.Element;
+export default CannedResponseBody;
+//# sourceMappingURL=CannedResponseBody.d.ts.map

package/dist/components/cannedResponse/CannedResponseBody.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CannedResponseBody.d.ts","sourceRoot":"","sources":["../../../src/components/cannedResponse/CannedResponseBody.tsx"],"names":[],"mappings":"AAaA,UAAU,wBAAwB;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sBAAsB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,kBAAkB,GAAI,OAAO,wBAAwB,4CA6J1D,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/cannedResponse/CannedResponseBody.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Empty, Segmented, Spin } from "antd";
+import { useFetchMyTeams } from "../../hooks/team/useFetchMyTeam";
+import { useTranslation } from "react-i18next";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { CannedResponseVisibleScope } from "../../types/chat";
+import TeamItem from "./team/TeamItem";
+import { useFetchCannedResponse } from "../../hooks/cannedResponse/useFetchCannedResponse";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { Icon } from "../icon";
+import { sanitizeHtml } from "../../utils/common";
+import { useDebounce } from "ahooks";
+const CannedResponseBody = (props) => {
+    var _a, _b;
+    const { search, onSelectCannedResponse, cannedQuery } = props;
+    const { t } = useTranslation();
+    const { data: myTeams, isLoading: isLoadingTeams } = useFetchMyTeams();
+    const [scope, setScope] = useState(CannedResponseVisibleScope.TEAM);
+    const [selectedTeamId, setSelectedTeamId] = useState(undefined);
+    const [selectedCategoryId, setSelectedCategoryId] = useState(undefined);
+    const cannedQueryDebounced = useDebounce(cannedQuery, { wait: 300 });
+    const { dataFlatten: cannedResponses, fetchNextPage, hasNextPage, } = useFetchCannedResponse({
+        visibilityScope: scope,
+        teamId: selectedTeamId,
+        categoryId: selectedCategoryId,
+        shortcut: search || cannedQueryDebounced || "",
+    });
+    const options = useMemo(() => {
+        return [
+            { label: t("team"), value: CannedResponseVisibleScope.TEAM },
+            { label: t("personal"), value: CannedResponseVisibleScope.PRIVATE },
+        ];
+    }, [t]);
+    const onSelectCategory = useCallback((teamId, categoryId) => {
+        setSelectedTeamId(teamId);
+        setSelectedCategoryId(categoryId);
+    }, []);
+    const renderTeamItem = useCallback((team, index) => {
+        return (_jsx(TeamItem, { team: team, onSelectCategory: onSelectCategory, selectedTeamId: selectedTeamId, selectedCategoryId: selectedCategoryId, defaultOpen: index === 0 }, team === null || team === void 0 ? void 0 : team.teamId));
+    }, [onSelectCategory, selectedTeamId, selectedCategoryId]);
+    useEffect(() => {
+        if (!isLoadingTeams && myTeams && myTeams.length > 0) {
+            setSelectedTeamId(myTeams[0].teamId);
+        }
+    }, [isLoadingTeams, myTeams]);
+    return (_jsxs("div", { className: "flex flex-1 flex-row h-[400px]", children: [_jsxs("div", { className: "w-[170px] p-2 border-r border-gray-200", children: [_jsx(Segmented, { options: options, block: true, size: "small", value: scope, onChange: setScope }), _jsx("div", { className: "overflow-y-auto h-full", children: scope === CannedResponseVisibleScope.TEAM && (_jsx("div", { className: "mt-1 flex flex-col", children: (_a = myTeams === null || myTeams === void 0 ? void 0 : myTeams.map) === null || _a === void 0 ? void 0 : _a.call(myTeams, (team, index) => renderTeamItem(team, index)) })) })] }), _jsxs("div", { id: "scrollableCannedDiv", className: "flex flex-col flex-1 h-full overflow-y-auto", children: [!!cannedQuery && !search && (_jsx("div", { className: "px-3 py-2 border-b border-gray-200", children: _jsxs("span", { className: "text-sm text-gray-500", children: [t("canned_response_quick_search_placeholder"), _jsx("span", { className: "text-blue-600", children: ` #${cannedQuery}` })] }) })), _jsx(InfiniteScroll, { dataLength: (cannedResponses === null || cannedResponses === void 0 ? void 0 : cannedResponses.length) || 0, next: fetchNextPage, hasMore: hasNextPage, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: "scrollableCannedDiv", children: (cannedResponses === null || cannedResponses === void 0 ? void 0 : cannedResponses.length) === 0 ? (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Empty, { image: _jsx(Icon, { icon: "chat-square-b", size: 80, className: "text-gray-300" }), description: t("no_canned_response") }) })) : ((_b = cannedResponses === null || cannedResponses === void 0 ? void 0 : cannedResponses.map) === null || _b === void 0 ? void 0 : _b.call(cannedResponses, (canned) => {
+                            var _a, _b;
+                            const htmlContent = (canned === null || canned === void 0 ? void 0 : canned.content) || "";
+                            // 🔒 Sanitize HTML to prevent XSS attacks
+                            const sanitizedContent = sanitizeHtml(htmlContent);
+                            return (_jsxs("div", { className: "flex flex-col flex-1 px-3 py-2 cursor-pointer hover:bg-blue-100 w-full border-b border-gray-200", onClick: () => onSelectCannedResponse === null || onSelectCannedResponse === void 0 ? void 0 : onSelectCannedResponse(sanitizedContent), children: [_jsxs("span", { className: "text-xs truncate text-gray-500", children: [`${((_a = canned === null || canned === void 0 ? void 0 : canned.category) === null || _a === void 0 ? void 0 : _a.name)
+                                                ? `${(_b = canned === null || canned === void 0 ? void 0 : canned.category) === null || _b === void 0 ? void 0 : _b.name} / `
+                                                : ""}`, _jsx("span", { className: "text-black", children: `${(canned === null || canned === void 0 ? void 0 : canned.name) || ""} ` }), _jsx("span", { children: "/" }), _jsx("span", { className: "text-blue-500", children: ` #${(canned === null || canned === void 0 ? void 0 : canned.shortcut) || ""}` })] }), _jsx("div", { dangerouslySetInnerHTML: {
+                                            __html: sanitizedContent,
+                                        }, className: "text-sm mt-1" })] }, canned === null || canned === void 0 ? void 0 : canned.id));
+                        })) })] })] }));
+};
+export default CannedResponseBody;

package/dist/components/cannedResponse/CannedResponseFooter.d.ts

@@ -0,0 +1,6 @@
+interface ICannedResponseFooterProps {
+    openCreateCannedModal?: () => void;
+}
+declare const CannedResponseFooter: ({ openCreateCannedModal, }: ICannedResponseFooterProps) => import("react/jsx-runtime").JSX.Element;
+export default CannedResponseFooter;
+//# sourceMappingURL=CannedResponseFooter.d.ts.map

package/dist/components/cannedResponse/CannedResponseFooter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CannedResponseFooter.d.ts","sourceRoot":"","sources":["../../../src/components/cannedResponse/CannedResponseFooter.tsx"],"names":[],"mappings":"AAGA,UAAU,0BAA0B;IAClC,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;CACpC;AAED,QAAA,MAAM,oBAAoB,GAAI,4BAE3B,0BAA0B,4CAgB5B,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/components/cannedResponse/CannedResponseFooter.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { Icon } from "../icon";
+const CannedResponseFooter = ({ openCreateCannedModal, }) => {
+    const { t } = useTranslation();
+    return (_jsx("div", { className: "flex items-center justify-end border-t border-gray-200 p-2", children: _jsxs("div", { className: "flex cursor-pointer items-center gap-1", onClick: openCreateCannedModal, children: [_jsx(Icon, { icon: "plus-circle-o", size: 16, className: "text-blue-500" }), _jsx("span", { className: "text-sm text-blue-500", children: t("add_canned_response") })] }) }));
+};
+export default CannedResponseFooter;

package/dist/components/cannedResponse/CannedResponseHeader.d.ts

@@ -0,0 +1,8 @@
+interface ICannedResponseHeaderProps {
+    onClose?: () => void;
+    search?: string;
+    setSearch?: (search: string) => void;
+}
+declare const CannedResponseHeader: (props: ICannedResponseHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default CannedResponseHeader;
+//# sourceMappingURL=CannedResponseHeader.d.ts.map

package/dist/components/cannedResponse/CannedResponseHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CannedResponseHeader.d.ts","sourceRoot":"","sources":["../../../src/components/cannedResponse/CannedResponseHeader.tsx"],"names":[],"mappings":"AAKA,UAAU,0BAA0B;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,QAAA,MAAM,oBAAoB,GAAI,OAAO,0BAA0B,4CA+B9D,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/components/cannedResponse/CannedResponseHeader.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import CannedResponseIcon from "../../assets/svg/cannedResponse";
+import { Button, Input } from "antd";
+import { Icon } from "../icon";
+const CannedResponseHeader = (props) => {
+    const { onClose, search, setSearch } = props;
+    const { t } = useTranslation();
+    return (_jsxs("div", { className: "px-3 py-2 flex flex-row items-center gap-2 border-b border-gray-200", children: [_jsxs("div", { className: "flex flex-row items-center gap-2", children: [_jsx(CannedResponseIcon, { size: 20, className: "text-blue-500" }), _jsx("span", { className: "text-base font-medium", children: t("canned_responses") })] }), _jsxs("div", { className: "flex flex-1 flex-row items-center justify-end gap-2", children: [_jsx(Input, { size: "large", placeholder: t("search"), prefix: _jsx(Icon, { icon: "search-o", size: 20, className: "text-gray-500" }), style: { width: 260 }, className: "text-sm", value: search, onChange: (e) => setSearch === null || setSearch === void 0 ? void 0 : setSearch(e.target.value) }), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: onClose, children: _jsx(Icon, { icon: "close-o", size: 16 }) })] })] }));
+};
+export default CannedResponseHeader;

package/dist/components/cannedResponse/index.d.ts

@@ -0,0 +1,8 @@
+interface ICannedResponseProps {
+    onClose?: () => void;
+    openCreateCannedModal?: () => void;
+    cannedQuery?: string;
+}
+declare const CannedResponse: ({ onClose, openCreateCannedModal, cannedQuery, }: ICannedResponseProps) => import("react/jsx-runtime").JSX.Element;
+export default CannedResponse;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/cannedResponse/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/cannedResponse/index.tsx"],"names":[],"mappings":"AASA,UAAU,oBAAoB;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,cAAc,GAAI,kDAIrB,oBAAoB,4CAgDtB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/cannedResponse/index.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDebounce } from "ahooks";
+import CannedResponseBody from "./CannedResponseBody";
+import CannedResponseHeader from "./CannedResponseHeader";
+import { useCallback, useState } from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $getRoot } from "lexical";
+import { $generateNodesFromDOM } from "@lexical/html";
+import CannedResponseFooter from "./CannedResponseFooter";
+const CannedResponse = ({ onClose, openCreateCannedModal, cannedQuery = "", }) => {
+    const [editor] = useLexicalComposerContext();
+    const [search, setSearch] = useState("");
+    const debouncedSearch = useDebounce(search, {
+        wait: 300,
+    });
+    const onSelectCannedResponse = useCallback((content) => {
+        editor.update(() => {
+            const root = $getRoot();
+            // 1. Clear content cũ
+            root.clear();
+            // 2. Parse HTML -> DOM
+            const parser = new DOMParser();
+            const dom = parser.parseFromString(content, "text/html");
+            // 3. Convert DOM -> Lexical nodes
+            const nodes = $generateNodesFromDOM(editor, dom);
+            // 4. Append vào editor
+            root.append(...nodes);
+            // 5. Move cursor về cuối (optional nhưng nên có)
+            root.selectEnd();
+        });
+    }, [editor]);
+    return (_jsxs("div", { className: "w-[600px]", children: [_jsx(CannedResponseHeader, { onClose: onClose, search: search, setSearch: setSearch }), _jsx(CannedResponseBody, { search: debouncedSearch, onSelectCannedResponse: onSelectCannedResponse, cannedQuery: cannedQuery }), _jsx(CannedResponseFooter, { openCreateCannedModal: openCreateCannedModal })] }));
+};
+export default CannedResponse;

package/dist/components/cannedResponse/team/TeamItem.d.ts

@@ -0,0 +1,11 @@
+import { IMyTeamResponse } from "../../../types/dto";
+interface TeamItemProps {
+    team: IMyTeamResponse;
+    onSelectCategory?: (teamId: string, categoryId?: string) => void;
+    selectedTeamId?: string;
+    selectedCategoryId?: string;
+    defaultOpen?: boolean;
+}
+declare const TeamItem: ({ team, onSelectCategory, selectedTeamId, selectedCategoryId, defaultOpen, }: TeamItemProps) => import("react/jsx-runtime").JSX.Element;
+export default TeamItem;
+//# sourceMappingURL=TeamItem.d.ts.map

package/dist/components/cannedResponse/team/TeamItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TeamItem.d.ts","sourceRoot":"","sources":["../../../../src/components/cannedResponse/team/TeamItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAQrD,UAAU,aAAa;IACrB,IAAI,EAAE,eAAe,CAAC;IACtB,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACjE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,QAAQ,GAAI,8EAMf,aAAa,4CAiFf,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/cannedResponse/team/TeamItem.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFetchCannedCategories } from "../../../hooks/cannedResponse/useFetchCannedCategories";
+import { useBoolean } from "ahooks";
+import { Icon } from "../../icon";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { useCallback } from "react";
+const TeamItem = ({ team, onSelectCategory, selectedTeamId, selectedCategoryId, defaultOpen = false, }) => {
+    const { t } = useTranslation();
+    const [isOpen, { toggle }] = useBoolean(defaultOpen);
+    const { data: categories } = useFetchCannedCategories(team.teamId, isOpen);
+    const onToggle = useCallback(() => {
+        if (!isOpen && !selectedTeamId && !!(team === null || team === void 0 ? void 0 : team.teamId)) {
+            onSelectCategory === null || onSelectCategory === void 0 ? void 0 : onSelectCategory(team === null || team === void 0 ? void 0 : team.teamId, undefined);
+        }
+        toggle();
+    }, [toggle, isOpen, onSelectCategory, team === null || team === void 0 ? void 0 : team.teamId, selectedTeamId]);
+    return (_jsxs("div", { className: "border-b border-gray-200", children: [_jsxs("div", { className: "flex items-center justify-between py-2 cursor-pointer", onClick: onToggle, children: [_jsx("span", { className: "text-sm font-medium truncate flex-1", children: (team === null || team === void 0 ? void 0 : team.name) || "" }), _jsx(Icon, { icon: isOpen ? "angle-up-b" : "angle-down-b", size: 16, className: clsx(!isOpen && "text-gray-500") })] }), isOpen && (_jsxs("div", { className: "mb-2", children: [_jsx("div", { className: clsx("px-3 py-1 cursor-pointer hover:bg-gray-100 rounded-md", selectedTeamId &&
+                            selectedTeamId === (team === null || team === void 0 ? void 0 : team.teamId) &&
+                            !selectedCategoryId &&
+                            "bg-gray-100"), onClick: () => onSelectCategory === null || onSelectCategory === void 0 ? void 0 : onSelectCategory(team === null || team === void 0 ? void 0 : team.teamId, undefined), children: _jsx("span", { className: clsx("text-sm truncate", selectedTeamId === (team === null || team === void 0 ? void 0 : team.teamId) && !selectedCategoryId
+                                ? "font-medium text-blue-500"
+                                : "text-gray-500"), children: t("all") }) }, `${team.teamId}-all`), categories === null || categories === void 0 ? void 0 : categories.map((category) => {
+                        const isSelected = selectedTeamId &&
+                            selectedCategoryId &&
+                            selectedTeamId === (category === null || category === void 0 ? void 0 : category.teamId) &&
+                            selectedCategoryId === (category === null || category === void 0 ? void 0 : category.id);
+                        return (_jsx("div", { className: clsx("px-3 py-1 cursor-pointer hover:bg-gray-100 rounded-md", isSelected && "bg-gray-100"), onClick: () => onSelectCategory === null || onSelectCategory === void 0 ? void 0 : onSelectCategory(team === null || team === void 0 ? void 0 : team.teamId, category === null || category === void 0 ? void 0 : category.id), children: _jsx("span", { className: clsx("text-sm truncate", isSelected ? "font-medium text-blue-500" : "text-gray-500"), children: category === null || category === void 0 ? void 0 : category.name }) }, `${team.teamId}-${category.id}`));
+                    })] }))] }));
+};
+export default TeamItem;

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

@@ -3,6 +3,7 @@ interface MessageListProps {
     searchClientMsgID?: string;
     className?: string;
     onClose?: () => void;
+    openCreateCannedModal?: () => void;
 }
 declare const MessageList: (props: MessageListProps) => import("react/jsx-runtime").JSX.Element;
 export default MessageList;

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

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

package/dist/components/message/MessageList.js

@@ -26,7 +26,7 @@ const MessageList = (props) => {
     var _a;
     const { t } = useTranslation();
     const { user } = useChatContext();
-    const { onClose, conversationId, searchClientMsgID } = props;
+    const { onClose, conversationId, searchClientMsgID, openCreateCannedModal } = props;
     const scrollRef = useRef(null);
     const { getMoreOldMessages, moreOldLoading, loadState, getMoreNewMessages, moreNewLoading, latestLoadState, } = useMessage(conversationId, searchClientMsgID);
     const conversationData = useConversationStore((state) => state.conversationData);
@@ -192,6 +192,6 @@ const MessageList = (props) => {
                             handleMarkConversationMessageAsRead();
                             loadMoreNewMessage();
                         }
-                    }, children: loadState.messageList.map((message, _, array) => (_jsx(MessageItem, { message: message, allMessages: array, contextMenuOpen: openMenuId === message.clientMsgID, onContextMenuOpenChange: (open) => setOpenMenuId(open ? message.clientMsgID : null), onRevokeMessage: handleOpenRevoke, onQuoteMessage: setQuotedMessage, onPressQuoteMessage: onPressQuoteMessage }, message.clientMsgID))) }) }), moreNewLoading && (_jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) })), _jsx(MessageFooter, { currentSession: currentSession }), _jsx(Modal, { centered: true, open: showConfirmRevoke, onOk: onRevokeMessage, onCancel: handleCloseRevoke, title: t("revoke_message_confirm_title"), okText: t("revoke"), cancelText: t("cancel"), okType: "danger", confirmLoading: isRevoking, getContainer: false, forceRender: true, children: _jsx("p", { children: t("revoke_message_confirm_message") }) })] }));
+                    }, children: loadState.messageList.map((message, _, array) => (_jsx(MessageItem, { message: message, allMessages: array, contextMenuOpen: openMenuId === message.clientMsgID, onContextMenuOpenChange: (open) => setOpenMenuId(open ? message.clientMsgID : null), onRevokeMessage: handleOpenRevoke, onQuoteMessage: setQuotedMessage, onPressQuoteMessage: onPressQuoteMessage }, message.clientMsgID))) }) }), moreNewLoading && (_jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) })), _jsx(MessageFooter, { currentSession: currentSession, openCreateCannedModal: openCreateCannedModal }), _jsx(Modal, { centered: true, open: showConfirmRevoke, onOk: onRevokeMessage, onCancel: handleCloseRevoke, title: t("revoke_message_confirm_title"), okText: t("revoke"), cancelText: t("cancel"), okType: "danger", confirmLoading: isRevoking, getContainer: false, forceRender: true, children: _jsx("p", { children: t("revoke_message_confirm_message") }) })] }));
 };
 export default MessageList;

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

@@ -0,0 +1,7 @@
+type Props = {
+    onOpen: (query: string) => void;
+    onClose: () => void;
+};
+export declare function CannedResponseTriggerPlugin({ onOpen, onClose }: Props): null;
+export {};
+//# sourceMappingURL=CannedResponsePlugin.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CannedResponsePlugin.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/CannedResponsePlugin.tsx"],"names":[],"mappings":"AAIA,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,wBAAgB,2BAA2B,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,KAAK,QAiCrE"}

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

@@ -0,0 +1,31 @@
+import { useEffect } from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $getSelection, $isRangeSelection } from "lexical";
+export function CannedResponseTriggerPlugin({ onOpen, onClose }) {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        return editor.registerUpdateListener(({ editorState }) => {
+            editorState.read(() => {
+                const selection = $getSelection();
+                if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
+                    onClose();
+                    return;
+                }
+                const anchor = selection.anchor;
+                const node = anchor.getNode();
+                const text = node.getTextContent();
+                const offset = anchor.offset;
+                const before = text.slice(0, offset);
+                // match #abc (KHÔNG có space phía sau)
+                const match = before.match(/(^|\s)#(\w*)$/);
+                if (match) {
+                    onOpen(match[2] || "");
+                }
+                else {
+                    onClose();
+                }
+            });
+        });
+    }, [editor, onOpen, onClose]);
+    return null;
+}

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

@@ -1 +1 @@
-{"version":3,"file":"MediaActions.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/MediaActions.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAkB,UAAU,EAA0B,MAAM,MAAM,CAAC;AAsB1E,UAAU,iBAAiB;IACzB,eAAe,EAAE,UAAU,EAAE,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAC7C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,eAAe,EACf,aAAa,EACb,eAAe,EACf,eAAsB,GACvB,EAAE,iBAAiB,2CAsInB"}
+{"version":3,"file":"MediaActions.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/MediaActions.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAkB,UAAU,EAA0B,MAAM,MAAM,CAAC;AAoD1E,UAAU,iBAAiB;IACzB,eAAe,EAAE,UAAU,EAAE,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAC7C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,eAAe,EACf,aAAa,EACb,eAAe,EACf,eAAsB,GACvB,EAAE,iBAAiB,2CAwKnB"}

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

@@ -8,8 +8,11 @@ import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import EmojiPicker from "./EmojiPicker";
 import { Icon } from "../../icon";
-import { validateFile, validateVideoLimit } from "../../../utils/fileValidation";
+import { validateFile, validateVideoLimit, } from "../../../utils/fileValidation";
 import { DOCUMENT_TYPES } from "./editorConfig";
+import CannedResponseIcon from "../../../assets/svg/cannedResponse";
+import { useMessageFooterContext } from ".";
+import useAuthStore from "../../../store/auth";
 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, }) {
@@ -17,6 +20,8 @@ export default function MediaActions({ listUploadFiles, onFilesChange, buttonCla
     const { t } = useTranslation();
     const [showEmojiPicker, setShowEmojiPicker] = useState(false);
     const containerRef = useRef(null);
+    const { isOpenCanned, setIsOpenCanned } = useMessageFooterContext();
+    const isCrm = useAuthStore((state) => state.isCrm);
     const handleEmojiSelect = useCallback((emoji) => {
         editor.update(() => {
             const selection = $getSelection();
@@ -63,6 +68,21 @@ export default function MediaActions({ listUploadFiles, onFilesChange, buttonCla
         }
         onFilesChange(newList);
     };
+    const onPressCanned = useCallback(async () => {
+        if (!isOpenCanned) {
+            editor.focus();
+            await new Promise((resolve) => setTimeout(resolve, 0)); // Wait for focus to complete
+            editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    selection.insertText(" #");
+                }
+            });
+        }
+        else {
+            setIsOpenCanned(false);
+        }
+    }, [isOpenCanned, editor]);
     useEffect(() => {
         const handleClickOutside = (event) => {
             if (containerRef.current &&
@@ -74,5 +94,5 @@ export default function MediaActions({ listUploadFiles, onFilesChange, buttonCla
         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) }))] }));
+    return (_jsxs("div", { className: "flex items-center gap-1 relative", ref: containerRef, children: [isCrm && (_jsx(Button, { type: "text", shape: "default", className: clsx(btnClass, isOpenCanned && "bg-blue-100 text-blue-600"), onClick: onPressCanned, children: _jsx(CannedResponseIcon, { className: clsx("hover:text-gray-700", isOpenCanned && "text-blue-600") }) })), _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/index.d.ts

@@ -2,9 +2,10 @@ import { MessageFooterContextType } from "../../../types/chat";
 import { ISessionByStatus } from "../../../store/type";
 interface MessageFooterProps {
     currentSession?: ISessionByStatus;
+    openCreateCannedModal?: () => void;
 }
 export declare const MessageFooterContext: import("react").Context<MessageFooterContextType>;
 export declare const useMessageFooterContext: () => MessageFooterContextType;
-declare const MessageFooterProvider: ({ currentSession }: MessageFooterProps) => import("react/jsx-runtime").JSX.Element;
+declare const MessageFooterProvider: ({ currentSession, openCreateCannedModal, }: MessageFooterProps) => 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":"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"}
+{"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;AAQvD,UAAU,kBAAkB;IAC1B,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;CACpC;AASD,eAAO,MAAM,oBAAoB,mDAM/B,CAAC;AAEH,eAAO,MAAM,uBAAuB,gCAAyC,CAAC;AAE9E,QAAA,MAAM,qBAAqB,GAAI,4CAG5B,kBAAkB,4CAiHpB,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

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

@@ -12,10 +12,15 @@ import { createContext, useCallback, useContext, useState } from "react";
 import EnterHandler from "./EnterHandler";
 import ActionBar from "./ActionBar";
 import { useSendMessage } from "../../../hooks/message/useSendMessage";
+import { Popover } from "antd";
 import FilePreview from "./FilePreview";
 import { useTranslation } from "react-i18next";
 import PasteAndDropPlugin from "./PasteAndDropPlugin";
 import { QuotedMessageFooter } from "./QuotedMessage";
+import CannedResponse from "../../cannedResponse";
+import { CannedResponseTriggerPlugin } from "./CannedResponsePlugin";
+import { useBoolean } from "ahooks";
+import useAuthStore from "../../../store/auth";
 const initialConfig = {
     namespace: "ChatInput",
     theme: editorTheme,
@@ -26,12 +31,17 @@ export const MessageFooterContext = createContext({
     onSendMessage: () => { },
     listUploadFiles: [],
     setListUploadFiles: () => { },
+    isOpenCanned: false,
+    setIsOpenCanned: () => { },
 });
 export const useMessageFooterContext = () => useContext(MessageFooterContext);
-const MessageFooterProvider = ({ currentSession }) => {
+const MessageFooterProvider = ({ currentSession, openCreateCannedModal, }) => {
     const { t } = useTranslation();
     const { sendTextMessage, sendMergeMessage } = useSendMessage();
     const [listUploadFiles, setListUploadFiles] = useState([]);
+    const [isOpenCanned, { setTrue: openCanned, setFalse: closeCanned, toggle: toggleCanned },] = useBoolean(false);
+    const isCrm = useAuthStore((state) => state.isCrm);
+    const [cannedQuery, setCannedQuery] = useState("");
     const onSendMessage = useCallback(async ({ plainText, richText, type, }) => {
         if (type === "text") {
             sendTextMessage({ plainText, richText, currentSession });
@@ -46,6 +56,22 @@ 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: [_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, {})] }) }));
+    const onOpenCreateCannedModal = useCallback(() => {
+        closeCanned();
+        openCreateCannedModal === null || openCreateCannedModal === void 0 ? void 0 : openCreateCannedModal();
+    }, [closeCanned, openCreateCannedModal]);
+    const onOpenCanned = useCallback((query) => {
+        setCannedQuery(query);
+        openCanned();
+    }, [openCanned]);
+    return (_jsx(MessageFooterContext.Provider, { value: {
+            onSendMessage,
+            listUploadFiles,
+            setListUploadFiles,
+            isOpenCanned,
+            setIsOpenCanned: toggleCanned,
+        }, 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(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, {}), isCrm && (_jsx(CannedResponseTriggerPlugin, { onClose: closeCanned, onOpen: onOpenCanned }))] }) }));
 };
 export default MessageFooterProvider;

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

@@ -1 +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"}
+{"version":3,"file":"QuoteMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/QuoteMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAe,MAAM,yBAAyB,CAAC;AAUnE,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,4CAuGvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}