@droppii-org/chat-sdk 0.1.2 → 0.1.4

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/conversation/ConversationBySessionItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConversationBySessionItem.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/ConversationBySessionItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAQpD,UAAU,8BAA8B;IACtC,WAAW,EAAE,gBAAgB,CAAC;CAC/B;AAED,QAAA,MAAM,yBAAyB,GAAI,kBAEhC,8BAA8B,mDA0FhC,CAAC;AAEF,eAAe,yBAAyB,CAAC"}
+{"version":3,"file":"ConversationBySessionItem.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/ConversationBySessionItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAQpD,UAAU,8BAA8B;IACtC,WAAW,EAAE,gBAAgB,CAAC;CAC/B;AAED,QAAA,MAAM,yBAAyB,GAAI,kBAEhC,8BAA8B,mDA2FhC,CAAC;AAEF,eAAe,yBAAyB,CAAC"}

package/dist/components/conversation/ConversationBySessionItem.js

@@ -10,8 +10,12 @@ import { formatTimestamp, parseLatestMessage } from "../../utils/common";
 const ConversationBySessionItem = ({ sessionItem, }) => {
     var _a;
     const { t } = useTranslation();
-    const { user } = useChatContext();
-    const isSelected = useConversationStore((state) => { var _a; return state.selectedConversationId === ((_a = sessionItem === null || sessionItem === void 0 ? void 0 : sessionItem.conversation) === null || _a === void 0 ? void 0 : _a.conversationID); });
+    const user = useChatContext().user;
+    const isSelected = useConversationStore((state) => {
+        var _a;
+        return state.selectedConversationId ===
+            ((_a = sessionItem === null || sessionItem === void 0 ? void 0 : sessionItem.conversation) === null || _a === void 0 ? void 0 : _a.conversationID);
+    });
     const conversation = sessionItem === null || sessionItem === void 0 ? void 0 : sessionItem.conversation;
     const router = useRouter();
     const pathname = usePathname();

package/dist/components/mediaCollection/LinkCollection.js

@@ -73,7 +73,7 @@ const LinkCollection = ({ onClose }) => {
                         const menuItems = [
                             {
                                 key: "open",
-                                label: "Xem tin nhắn",
+                                label: t("view_message"),
                                 onClick: () => onPressItem(item.chatLog),
                             },
                         ];

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"MediaPreviewIcon.d.ts","sourceRoot":"","sources":["../../../src/components/message/MediaPreviewIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAe,MAAM,yBAAyB,CAAC;AAInE,UAAU,qBAAqB;IAC7B,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAED,QAAA,MAAM,gBAAgB,GAAI,aAAa,qBAAqB,mDA8B3D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/message/MediaPreviewIcon.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MessageType } from "@openim/wasm-client-sdk";
+import { Image } from "antd";
+import { documentIcon } from "../../assets/svg";
+const MediaPreviewIcon = ({ message }) => {
+    var _a, _b;
+    if (!message) {
+        return null;
+    }
+    if (message.contentType === MessageType.FileMessage) {
+        return _jsx("div", { children: documentIcon });
+    }
+    if (message.contentType === MessageType.PictureMessage) {
+        const imageUrl = ((_a = message.pictureElem.sourcePicture) === null || _a === void 0 ? void 0 : _a.url) ||
+            ((_b = message.pictureElem.snapshotPicture) === null || _b === void 0 ? void 0 : _b.url);
+        return (_jsx("div", { className: "w-10 h-10", children: _jsx(Image, { rootClassName: "message-image cursor-pointer", className: "rounded-md", src: imageUrl }) }));
+    }
+    if (message.contentType === MessageType.VideoMessage) {
+        const videoUrl = message.videoElem.videoUrl;
+        return (_jsx("div", { className: "flex flex-col justify-center items-center w-10 h-10 bg-black rounded-md", children: _jsx("video", { src: videoUrl, controls: false, autoPlay: false, muted: true }) }));
+    }
+    return null;
+};
+export default MediaPreviewIcon;

package/dist/components/message/MessageHeader.js

@@ -122,6 +122,6 @@ const MessageHeader = ({ onClose, currentSession }) => {
             setCurrentSessionStatus(currentSession.status);
         }
     }, [currentSession]);
-    return (_jsxs("div", { className: "px-4 py-3 flex items-center border-b gap-3 bg-white flex-wrap", children: [_jsx(Avatar, { src: avatar, size: "large", className: "min-w-10 min-h-10", children: ((_a = displayName === null || displayName === void 0 ? void 0 : displayName.charAt) === null || _a === void 0 ? void 0 : _a.call(displayName, 0)) || "A" }), _jsxs("div", { className: "flex flex-col overflow-hidden flex-1", children: [_jsx("p", { className: "text-base truncate", children: displayName || "" }), _jsx("p", { className: "text-xs text-gray-500 truncate", children: "2 thành viên" })] }), _jsxs("div", { className: "flex items-center gap-2 justify-end overflow-hidden", children: [isCx && (_jsx(SelectSession, { placeholder: t("select_tag"), options: tagOptions, value: currentSessionTag, onChange: (value) => handleUpdateSession(value, "tag", value === currentSessionTag), excludeOptions: [SessionTag.SLOW_PROCESSING, SessionTag.NONE] })), isCx && (_jsx(SelectSession, { placeholder: t("select_status"), options: statusOptions, value: currentSessionStatus, onChange: (value) => handleUpdateSession(value, "status", value === currentSessionStatus) })), _jsx(SearchDrawer, {}), _jsx(MediaCollection, {}), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", children: _jsx(Icon, { icon: "align-justify-o", size: 22 }) }), !!onClose && (_jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: onClose, children: _jsx(Icon, { icon: "close-b", size: 22 }) }))] })] }));
+    return (_jsxs("div", { className: "px-4 py-3 flex items-center border-b gap-3 bg-white flex-wrap", children: [_jsx(Avatar, { src: avatar, size: "large", className: "min-w-10 min-h-10", children: ((_a = displayName === null || displayName === void 0 ? void 0 : displayName.charAt) === null || _a === void 0 ? void 0 : _a.call(displayName, 0)) || "A" }), _jsxs("div", { className: "flex flex-col overflow-hidden flex-1", children: [_jsx("p", { className: "text-base truncate", children: displayName || "" }), _jsx("p", { className: "text-xs text-gray-500 truncate", children: t("member_count", { count: 2 }) })] }), _jsxs("div", { className: "flex items-center gap-2 justify-end overflow-hidden", children: [isCx && (_jsx(SelectSession, { placeholder: t("select_tag"), options: tagOptions, value: currentSessionTag, onChange: (value) => handleUpdateSession(value, "tag", value === currentSessionTag), excludeOptions: [SessionTag.SLOW_PROCESSING, SessionTag.NONE] })), isCx && (_jsx(SelectSession, { placeholder: t("select_status"), options: statusOptions, value: currentSessionStatus, onChange: (value) => handleUpdateSession(value, "status", value === currentSessionStatus) })), _jsx(SearchDrawer, {}), _jsx(MediaCollection, {}), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", children: _jsx(Icon, { icon: "align-justify-o", size: 22 }) }), !!onClose && (_jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: onClose, children: _jsx(Icon, { icon: "close-b", size: 22 }) }))] })] }));
 };
 export default MessageHeader;

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":"AAwBA,UAAU,gBAAgB;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAGD,QAAA,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CAqN3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"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

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMessage } from "../../hooks/message/useMessage";
-import { Empty, Spin } from "antd";
-import { useEffect, useMemo, useRef } from "react";
+import { Empty, Modal, Spin } from "antd";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import dayjs from "dayjs";
 import isToday from "dayjs/plugin/isToday";
 import emitter from "../../utils/events";
@@ -14,26 +14,50 @@ import { images } from "../../constants/images";
 import { useTranslation } from "react-i18next";
 import useConversationStore from "../../store/conversation";
 import { isNumber } from "lodash";
-import { useDebounceFn } from "ahooks";
+import { useBoolean, useDebounceFn } from "ahooks";
 import { MSG_ITEM_CONTENT_PREFIX, MSG_ITEM_PREFIX } from "../../constants";
 import { markConversationMessageAsRead } from "../../hooks/conversation/useConversation";
 import { useChatContext } from "../../context/ChatContext";
 import { useGetSession } from "../../hooks/session/useGetSession";
+import { useRevokeMessage } from "../../hooks/message/useRevokeMessage";
 dayjs.extend(isToday);
 const BOTTOM_THRESHOLD = -5;
 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);
+    const setQuotedMessage = useConversationStore((state) => state.setQuotedMessage);
+    const setSearchClientMsgID = useConversationStore((state) => state.setSearchClientMsgID);
     const { dataFlatten: sessions, refetch: refetchSession } = useGetSession({
         filter: {
             conversationIds: !!conversationId ? [conversationId] : [],
         },
     });
+    const [openMenuId, setOpenMenuId] = useState(null);
+    const [selectedItem, setSelectedItem] = useState(null);
+    const [showConfirmRevoke, { setTrue: openConfirmRevoke, setFalse: closeConfirmRevoke },] = useBoolean(false);
+    const { revokeMessage, loading: isRevoking } = useRevokeMessage();
+    const handleOpenRevoke = useCallback((clientMsgID) => {
+        setSelectedItem(clientMsgID);
+        openConfirmRevoke();
+    }, [openConfirmRevoke]);
+    const handleCloseRevoke = useCallback(() => {
+        setSelectedItem(null);
+        closeConfirmRevoke();
+    }, [closeConfirmRevoke]);
+    const onRevokeMessage = useCallback(async () => {
+        await revokeMessage((conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationID) || "", selectedItem || "");
+        handleCloseRevoke();
+    }, [
+        conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationID,
+        selectedItem,
+        revokeMessage,
+        handleCloseRevoke,
+    ]);
     const currentSession = useMemo(() => {
         return sessions === null || sessions === void 0 ? void 0 : sessions.find((session) => session.conversationId === conversationId);
     }, [sessions, conversationId]);
@@ -84,6 +108,15 @@ const MessageList = (props) => {
             }, 500);
         }, 200);
     };
+    const onPressQuoteMessage = useCallback((clientMsgID) => {
+        const hasMessage = loadState.messageList.some((msg) => msg.clientMsgID === clientMsgID);
+        if (hasMessage) {
+            scrollToMessage(clientMsgID);
+        }
+        else {
+            setSearchClientMsgID(clientMsgID);
+        }
+    }, [scrollToMessage, loadState.messageList, setSearchClientMsgID]);
     const loadMoreOldMessage = () => {
         if (!loadState.hasMoreOld || moreOldLoading)
             return;
@@ -123,6 +156,16 @@ const MessageList = (props) => {
         loadState.initLoading,
         handleMarkConversationMessageAsRead,
     ]);
+    useEffect(() => {
+        if (!openMenuId)
+            return;
+        const scrollContainer = scrollRef.current;
+        if (!scrollContainer)
+            return;
+        const close = () => setOpenMenuId(null);
+        scrollContainer.addEventListener("scroll", close);
+        return () => scrollContainer.removeEventListener("scroll", close);
+    }, [openMenuId]);
     if (!conversationData) {
         return (_jsx("div", { className: "flex flex-1 items-center justify-center h-full", children: _jsx(Empty, { description: t("no_conversation_data") }) }));
     }
@@ -142,13 +185,13 @@ const MessageList = (props) => {
                         display: "flex",
                         flexDirection: "column-reverse",
                         minWidth: 0,
-                        width: "100%"
+                        width: "100%",
                     }, inverse: true, hasMore: loadState.hasMoreOld, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: "scrollableMessagesDiv", onScroll: (e) => {
                         const target = e.target;
                         if (target.scrollTop > BOTTOM_THRESHOLD) {
                             handleMarkConversationMessageAsRead();
                             loadMoreNewMessage();
                         }
-                    }, children: loadState.messageList.map((message, _, array) => (_jsx(MessageItem, { message: message, allMessages: array }, message.clientMsgID))) }) }), moreNewLoading && (_jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) })), _jsx(MessageFooter, { currentSession: currentSession })] }));
+                    }, 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/ActionBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/ActionBar.tsx"],"names":[],"mappings":"AAoFA,QAAA,MAAM,SAAS,+CA0Od,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/ActionBar.tsx"],"names":[],"mappings":"AAsBA,QAAA,MAAM,SAAS,+CA0Gd,CAAC;AAEF,eAAe,SAAS,CAAC"}