@droppii-org/chat-sdk 0.1.71 → 0.1.73

package/dist/src/assets/svg/canned-response.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=canned-response.d.ts.map

package/dist/src/assets/svg/canned-response.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canned-response.d.ts","sourceRoot":"","sources":["../../../../src/assets/svg/canned-response.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/src/assets/svg/canned-response.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/src/assets/svg/document.d.ts

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

package/dist/src/assets/svg/document.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"document.d.ts","sourceRoot":"","sources":["../../../../src/assets/svg/document.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,yCAoCxB,CAAC"}

package/dist/src/assets/svg/document.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const documentIcon = (_jsxs("svg", { width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M10.1923 5.83301L23.4363 5.83301L34.1656 14.2054V29.8639C34.1656 31.8997 32.5286 34.1663 29.8068 34.1663C27.0849 34.1663 10.1923 34.1663 10.1923 34.1663C7.4704 34.1663 5.8335 31.8997 5.8335 29.8639V10.0305C5.8335 7.99475 7.4704 5.83301 10.1923 5.83301Z", fill: "#24B0FF" }), _jsx("path", { d: "M10.8335 28.1394V20.833H16.0309V22.4222H12.7026V23.5916H15.3612V25.1708H12.7026V28.1394H10.8335Z", fill: "#edf6ff" }), _jsx("path", { d: "M19.0073 28.0885V20.833H20.8613V26.5118H24.0146V28.0885L19.0073 28.0885Z", fill: "#edf6ff" }), _jsx("path", { d: "M16.5918 28.1001V20.833H18.4485V28.1001H16.5918Z", fill: "#edf6ff" }), _jsx("path", { d: "M24.5737 20.833V28.1393H29.7723V26.5573H26.439L26.4422 25.1708H29.1017V23.5916H26.4422V22.4222H29.7723V20.833H24.5737Z", fill: "#edf6ff" }), _jsx("path", { opacity: "0.302", fillRule: "evenodd", clipRule: "evenodd", d: "M23.2686 5.83301V14.2281H34.1655L23.2686 5.83301Z", fill: "#edf6ff" })] }));

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

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

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

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

package/dist/src/assets/svg/index.js

@@ -0,0 +1,2 @@
+export * from "./document";
+export * from "./canned-response";

package/dist/src/components/canned-response/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/src/components/canned-response/CannedResponseBody.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CannedResponseBody.d.ts","sourceRoot":"","sources":["../../../../src/components/canned-response/CannedResponseBody.tsx"],"names":[],"mappings":"AAiBA,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;AASD,QAAA,MAAM,kBAAkB,GAAI,OAAO,wBAAwB,4CA8M1D,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/src/components/canned-response/CannedResponseBody.js

@@ -0,0 +1,109 @@
+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, useRef, useState } from "react";
+import { CannedResponseVisibleScope } from "../../types/chat";
+import TeamItem from "./team/TeamItem";
+import { useFetchCannedResponse } from "../../hooks/canned-response/useFetchCannedResponse";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { Icon } from "../../components/icon";
+import { sanitizeHtml } from "../../utils/common";
+import { useDebounce } from "ahooks";
+import clsx from "clsx";
+import emitter from "../../utils/events";
+import { isArray } from "lodash";
+import { useMessageFooterContext } from "../../components/message/footer";
+const parseIndex = (index, length) => {
+    if (index === null)
+        return null;
+    if (index < 0)
+        return 0;
+    if (index >= length)
+        return length - 1;
+    return index;
+};
+const CannedResponseBody = (props) => {
+    var _a, _b;
+    const { search, onSelectCannedResponse, cannedQuery } = props;
+    const { activeCannedIndex, setActiveCannedIndex, setMaxActiveCannedIndex } = useMessageFooterContext();
+    const itemRefs = useRef([]);
+    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 validActiveCannedIndex = useMemo(() => {
+        return parseIndex(activeCannedIndex, (cannedResponses === null || cannedResponses === void 0 ? void 0 : cannedResponses.length) || 0);
+    }, [activeCannedIndex, cannedResponses === null || cannedResponses === void 0 ? void 0 : cannedResponses.length]);
+    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]);
+    useEffect(() => {
+        const handler = (index) => {
+            var _a;
+            const validIndex = parseIndex(index, cannedResponses === null || cannedResponses === void 0 ? void 0 : cannedResponses.length);
+            if (validIndex !== null && !!(cannedResponses === null || cannedResponses === void 0 ? void 0 : cannedResponses[validIndex])) {
+                const htmlContent = ((_a = cannedResponses === null || cannedResponses === void 0 ? void 0 : cannedResponses[validIndex]) === null || _a === void 0 ? void 0 : _a.content) || "";
+                // 🔒 Sanitize HTML to prevent XSS attacks
+                const sanitizedContent = sanitizeHtml(htmlContent);
+                onSelectCannedResponse === null || onSelectCannedResponse === void 0 ? void 0 : onSelectCannedResponse(sanitizedContent);
+            }
+        };
+        emitter.on("CANNED_RESPONSE_SELECT", handler);
+        return () => {
+            emitter.off("CANNED_RESPONSE_SELECT", handler);
+        };
+    }, [cannedResponses, onSelectCannedResponse]);
+    useEffect(() => {
+        setActiveCannedIndex(0);
+    }, [search, cannedQueryDebounced, setActiveCannedIndex]);
+    useEffect(() => {
+        var _a, _b;
+        if (activeCannedIndex !== null) {
+            (_b = (_a = itemRefs.current) === null || _a === void 0 ? void 0 : _a[activeCannedIndex]) === null || _b === void 0 ? void 0 : _b.scrollIntoView({
+                block: "nearest",
+            });
+        }
+    }, [activeCannedIndex]);
+    useEffect(() => {
+        setMaxActiveCannedIndex((cannedResponses === null || cannedResponses === void 0 ? void 0 : cannedResponses.length) - 1 > 0 ? (cannedResponses === null || cannedResponses === void 0 ? void 0 : cannedResponses.length) - 1 : 0);
+    }, [cannedResponses, setMaxActiveCannedIndex]);
+    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: !isArray(cannedResponses) || (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, index) => {
+                            var _a, _b;
+                            const isActive = index === validActiveCannedIndex;
+                            const htmlContent = (canned === null || canned === void 0 ? void 0 : canned.content) || "";
+                            // 🔒 Sanitize HTML to prevent XSS attacks
+                            const sanitizedContent = sanitizeHtml(htmlContent);
+                            return (_jsxs("div", { ref: (el) => {
+                                    itemRefs.current[index] = el;
+                                }, className: clsx("flex flex-col flex-1 px-3 py-2 cursor-pointer hover:bg-blue-100 w-full border-b border-gray-200", isActive && "bg-blue-100"), 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/src/components/canned-response/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/src/components/canned-response/CannedResponseFooter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CannedResponseFooter.d.ts","sourceRoot":"","sources":["../../../../src/components/canned-response/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/src/components/canned-response/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 "../../components/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/src/components/canned-response/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/src/components/canned-response/CannedResponseHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CannedResponseHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/canned-response/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/src/components/canned-response/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/canned-response";
+import { Button, Input } from "antd";
+import { Icon } from "../../components/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/src/components/canned-response/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/src/components/canned-response/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/canned-response/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/src/components/canned-response/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/src/components/canned-response/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/src/components/canned-response/team/TeamItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TeamItem.d.ts","sourceRoot":"","sources":["../../../../../src/components/canned-response/team/TeamItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAQ9C,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/src/components/canned-response/team/TeamItem.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFetchCannedCategories } from "../../../hooks/canned-response/useFetchCannedCategories";
+import { useBoolean } from "ahooks";
+import { Icon } from "../../../components/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/src/components/chat-bubble/ChatBubble.d.ts

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

package/dist/src/components/chat-bubble/ChatBubble.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatBubble.d.ts","sourceRoot":"","sources":["../../../../src/components/chat-bubble/ChatBubble.tsx"],"names":[],"mappings":"AAQA,UAAU,eAAe;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,UAAU,GAAI,eAAe,eAAe,4CA4FjD,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/src/components/chat-bubble/ChatBubble.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { FloatButton, Drawer, Popover } from "antd";
+import { MessageOutlined, CloseOutlined } from "@ant-design/icons";
+import MessageList from "../../components/message/MessageList";
+import useConversationStore from "../../store/conversation";
+import { useIsMobile } from "../../hooks/common/useIsMobile";
+import { useBoolean } from "ahooks";
+const ChatBubble = ({ className }) => {
+    const isMobile = useIsMobile();
+    const selectedConversationId = useConversationStore((state) => state.selectedConversationId);
+    const searchClientMsgID = useConversationStore((state) => state.searchClientMsgID);
+    const unreadCount = useConversationStore((state) => { var _a; return ((_a = state.conversationData) === null || _a === void 0 ? void 0 : _a.unreadCount) || 0; });
+    const displayUnread = unreadCount > 99 ? "99+" : unreadCount;
+    const [isOpen, { setFalse: setOpenFalse, toggle: toggleChat }] = useBoolean(false);
+    if (isMobile) {
+        return (_jsxs(_Fragment, { children: [_jsx(FloatButton, { icon: isOpen ? _jsx(CloseOutlined, {}) : _jsx(MessageOutlined, {}), type: "primary", style: {
+                        right: 24,
+                        bottom: 24,
+                        width: 60,
+                        height: 60,
+                    }, onClick: toggleChat, className: className, badge: { count: displayUnread, color: "red" } }), _jsx(Drawer, { placement: "right", onClose: setOpenFalse, open: isOpen, mask: true, closable: false, styles: {
+                        body: { padding: 0 },
+                    }, classNames: {
+                        wrapper: "!z-[9999]",
+                    }, width: "100%", push: false, children: _jsx(MessageList, { conversationId: selectedConversationId, className: "flex-1", onClose: setOpenFalse, searchClientMsgID: searchClientMsgID }) })] }));
+    }
+    return (_jsx(Popover, { placement: "topLeft", trigger: "click", open: isOpen, destroyOnHidden: true, content: () => (_jsx("div", { className: "w-[400px] h-[600px]", children: _jsx(MessageList, { conversationId: selectedConversationId, className: "flex-1", onClose: setOpenFalse, searchClientMsgID: searchClientMsgID }) })), styles: { body: { padding: 0 } }, children: _jsx(FloatButton, { icon: isOpen ? _jsx(CloseOutlined, {}) : _jsx(MessageOutlined, {}), type: "primary", style: {
+                right: 24,
+                bottom: 24,
+                width: 60,
+                height: 60,
+            }, className: className, badge: { count: displayUnread, color: "red" }, onClick: toggleChat }) }));
+};
+export default ChatBubble;

package/dist/src/components/conversation/ConversationBySessionItem.d.ts

@@ -0,0 +1,9 @@
+import type { LatestPreview } from "../../hooks/session/useSessionLatestPreview";
+import { ISessionByStatus } from "../../store/type";
+interface ConversationBySessionItemProps {
+    sessionItem: ISessionByStatus;
+    latestPreview?: LatestPreview;
+}
+declare const ConversationBySessionItem: ({ sessionItem, latestPreview, }: ConversationBySessionItemProps) => import("react/jsx-runtime").JSX.Element | null;
+export default ConversationBySessionItem;
+//# sourceMappingURL=ConversationBySessionItem.d.ts.map

package/dist/src/components/conversation/ConversationBySessionItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationBySessionItem.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation/ConversationBySessionItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAE7E,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAShD,UAAU,8BAA8B;IACtC,WAAW,EAAE,gBAAgB,CAAC;IAC9B,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,QAAA,MAAM,yBAAyB,GAAI,iCAGhC,8BAA8B,mDAiEhC,CAAC;AAEF,eAAe,yBAAyB,CAAC"}

package/dist/src/components/conversation/ConversationBySessionItem.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import useConversationStore from "../../store/conversation";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { Avatar } from "antd";
+import { useChatContext } from "../../context/ChatContext";
+import { useConversationDisplayData } from "../../hooks/conversation/useConversation";
+import { formatTimestamp, parseLatestMessage } from "../../utils/common";
+import ThreadCard from "./ThreadCard";
+const ConversationBySessionItem = ({ sessionItem, latestPreview, }) => {
+    var _a;
+    const { t } = useTranslation();
+    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();
+    const searchParams = useSearchParams();
+    const setConversationData = useConversationStore((state) => state.setConversationData);
+    const setSelectedConversationId = useConversationStore((state) => state.setSelectedConversationId);
+    const handleConversationClick = (conversation) => {
+        setConversationData(conversation);
+        const newSearchParams = new URLSearchParams(searchParams);
+        newSearchParams.set("threadId", conversation.conversationID);
+        router.push(`${pathname}?${newSearchParams.toString()}`);
+        setSelectedConversationId(conversation.conversationID);
+    };
+    const { avatar, displayName = "" } = useConversationDisplayData(conversation || null);
+    const latestMsg = (latestPreview === null || latestPreview === void 0 ? void 0 : latestPreview.latestMsg) || "";
+    const latestMsgSendTime = (latestPreview === null || latestPreview === void 0 ? void 0 : latestPreview.latestMsgSendTime) || 0;
+    if (!conversation)
+        return null;
+    return (_jsx(ThreadCard, { onClick: () => handleConversationClick(conversation), isSelected: isSelected, unreadCount: conversation.unreadCount, preview: parseLatestMessage(latestMsg, user === null || user === void 0 ? void 0 : user.userID, t, {
+            peerType: conversation.peerType,
+            showName: conversation.showName,
+        }), time: latestMsgSendTime > 0
+            ? formatTimestamp(latestMsgSendTime, { hasTime: true })
+            : undefined, avatar: _jsx(Avatar, { size: 48, src: avatar, children: ((_a = displayName === null || displayName === void 0 ? void 0 : displayName.charAt) === null || _a === void 0 ? void 0 : _a.call(displayName, 0)) || "A" }), title: _jsx("h3", { className: "truncate text-sm font-semibold text-gray-900", children: displayName }) }));
+};
+export default ConversationBySessionItem;

package/dist/src/components/conversation/DeskConversationList.d.ts

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

package/dist/src/components/conversation/DeskConversationList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeskConversationList.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation/DeskConversationList.tsx"],"names":[],"mappings":"AAsBA,QAAA,MAAM,oBAAoB,+CAgNzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/src/components/conversation/DeskConversationList.js

@@ -0,0 +1,104 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+import { useSearchParams } from "next/navigation";
+import { Input, Empty, Drawer, Button, Spin } from "antd";
+import { Icon } from "../../components/icon";
+import useConversationStore from "../../store/conversation";
+import { useTranslation } from "react-i18next";
+import { useBoolean, useDebounce } from "ahooks";
+import SearchConversation from "../../components/search-conversation";
+import useSessionStore from "../../store/session";
+import InfiniteScroll from "react-infinite-scroll-component";
+import ConversationBySessionItem from "./ConversationBySessionItem";
+import { useGetSession } from "../../hooks/session/useGetSession";
+import { useSortedSessions } from "../../hooks/session/useSortedSessions";
+import { useSessionLatestPreview } from "../../hooks/session/useSessionLatestPreview";
+import { useGetTeamSessionSummary } from "../../hooks/session/useGetTeamSessionSummary";
+import { DChatSDK } from "../../constants/sdk";
+import emitter from "../../utils/events";
+import { getFilterConfig } from "../../components/session/sessionMenuItems";
+const DeskConversationList = () => {
+    var _a, _b;
+    const searchInputRef = useRef(null);
+    const { t } = useTranslation();
+    const [search, setSearch] = useState("");
+    const [showSearch, { setTrue: setShowSearchTrue, setFalse: setShowSearchFalse },] = useBoolean(false);
+    const searchParams = useSearchParams();
+    const setConversationData = useConversationStore((state) => state.setConversationData);
+    const setSelectedConversationId = useConversationStore((state) => state.setSelectedConversationId);
+    const conversationList = useConversationStore((state) => state.conversationList);
+    const updateConversationList = useConversationStore((state) => state.updateConversationList);
+    const filterSummary = useSessionStore((state) => state.filterSummary);
+    const { data: teamSummaries } = useGetTeamSessionSummary();
+    const { dataFlatten: rawSessions, hasNextPage, fetchNextPage, refetch, } = useGetSession({ filter: filterSummary });
+    const latestPreviewMap = useSessionLatestPreview(rawSessions);
+    const sessions = useSortedSessions(rawSessions, latestPreviewMap);
+    const currentFilterKey = filterSummary.status || filterSummary.tag || "";
+    const filterConfig = getFilterConfig(currentFilterKey);
+    const pathName = filterSummary.teamId
+        ? ((_a = teamSummaries === null || teamSummaries === void 0 ? void 0 : teamSummaries.find((team) => team.teamId === filterSummary.teamId)) === null || _a === void 0 ? void 0 : _a.teamName) || ""
+        : t("my_messages");
+    const debouncedSearch = useDebounce(search, { wait: 500 });
+    const onCloseSearch = () => {
+        setSearch("");
+        setShowSearchFalse();
+        setTimeout(() => {
+            var _a;
+            (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+        }, 500);
+    };
+    useEffect(() => {
+        if (showSearch) {
+            setTimeout(() => {
+                var _a;
+                (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 100);
+        }
+    }, [showSearch]);
+    useEffect(() => {
+        const threadId = searchParams.get("threadId");
+        if (threadId) {
+            setSelectedConversationId(threadId);
+            const selectedConversation = conversationList.find((conv) => conv.conversationID === threadId);
+            if (selectedConversation) {
+                setConversationData(selectedConversation);
+            }
+            else {
+                DChatSDK.getMultipleConversation([threadId]).then((res) => {
+                    if (res.data.length > 0) {
+                        setConversationData(res.data[0]);
+                        updateConversationList(res.data, "filter");
+                    }
+                });
+            }
+        }
+    }, [searchParams, conversationList]);
+    useEffect(() => {
+        const handler = (sessionUpdated) => {
+            if (sessionUpdated.status !== filterSummary.status ||
+                sessionUpdated.tag !== filterSummary.tag) {
+                refetch();
+            }
+        };
+        emitter.on("UPDATE_SESSION", handler);
+        return () => {
+            emitter.off("UPDATE_SESSION", handler);
+        };
+    }, [filterSummary, refetch]);
+    return (_jsxs("div", { className: "flex flex-col h-full bg-white border-r border-gray-200 w-[320px]", children: [_jsxs("div", { className: "p-3 border-b border-gray-100", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { ref: searchInputRef, placeholder: t("search"), prefix: _jsx(Icon, { icon: "search-o", size: 18, className: "text-gray-400" }), onChange: (e) => {
+                                    if (!showSearch && e.target.value) {
+                                        setShowSearchTrue();
+                                    }
+                                    setSearch(e.target.value);
+                                }, className: "rounded-lg text-sm flex-1 h-[36px]", size: "large", allowClear: true, onClick: setShowSearchTrue, value: search, autoFocus: false, onClear: onCloseSearch }), showSearch && (_jsx(Button, { onClick: onCloseSearch, variant: "outlined", className: "p-0 w-[36px] h-[36px] text-gray-500", children: _jsx(Icon, { icon: "close-b", size: 22 }) }))] }), _jsxs("div", { className: "flex items-center justify-between mt-2", children: [_jsx("span", { className: "text-sm font-semibold text-blue-500 truncate", children: pathName }), filterConfig && (_jsxs("span", { className: "flex items-center gap-1.5 shrink-0", children: [_jsx(Icon, { icon: filterConfig.iconName, size: 16, className: "text-gray-500" }), _jsx("span", { className: "text-sm font-semibold text-gray-800", children: t(filterConfig.labelKey) })] }))] })] }), _jsxs("div", { id: "scrollableConversationsDiv", style: {
+                    height: "100%",
+                    overflow: showSearch ? "hidden" : "auto",
+                    position: "relative",
+                }, children: [_jsx(InfiniteScroll, { dataLength: (sessions === null || sessions === void 0 ? void 0 : sessions.length) || 0, next: fetchNextPage, hasMore: hasNextPage, loader: _jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }), scrollableTarget: "scrollableConversationsDiv", children: (sessions === null || sessions === void 0 ? void 0 : sessions.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_conversation") }) })) : ((_b = sessions === null || sessions === void 0 ? void 0 : sessions.map) === null || _b === void 0 ? void 0 : _b.call(sessions, (session) => (_jsx(ConversationBySessionItem, { sessionItem: session, latestPreview: latestPreviewMap.get(session.conversationId) }, session.conversationId)))) }), _jsx(Drawer, { open: showSearch, mask: false, closeIcon: false, styles: {
+                            body: {
+                                padding: 0,
+                            },
+                        }, getContainer: false, width: "100%", children: _jsx(SearchConversation, { searchTerm: debouncedSearch }) })] })] }));
+};
+export default DeskConversationList;

package/dist/src/components/conversation/ThreadCard.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+export interface ThreadCardProps {
+    avatar: ReactNode;
+    title: ReactNode;
+    preview: string;
+    time?: string;
+    unreadCount?: number;
+    isSelected?: boolean;
+    onClick: () => void;
+    testId?: string;
+}
+declare const ThreadCard: ({ avatar, title, preview, time, unreadCount, isSelected, onClick, testId, }: ThreadCardProps) => import("react/jsx-runtime").JSX.Element;
+export default ThreadCard;
+//# sourceMappingURL=ThreadCard.d.ts.map

package/dist/src/components/conversation/ThreadCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadCard.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation/ThreadCard.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAoBvC,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,SAAS,CAAC;IAClB,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,UAAU,GAAI,6EASjB,eAAe,4CA4CjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/src/components/conversation/ThreadCard.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+const formatUnreadCount = (count) => (count > 99 ? "99+" : count);
+const UnreadBadge = ({ count }) => {
+    const label = String(formatUnreadCount(count));
+    const isWide = label.length > 1;
+    return (_jsx("span", { className: clsx("inline-flex h-5 shrink-0 items-center justify-center rounded-[32px] border-2 border-white bg-gradient-danger-light px-[3px] text-center text-[12px] font-semibold leading-[160%] text-white", isWide ? "min-w-8" : "min-w-5"), children: label }));
+};
+const ThreadCard = ({ avatar, title, preview, time, unreadCount = 0, isSelected = false, onClick, testId, }) => {
+    const hasUnread = unreadCount > 0;
+    return (_jsxs("button", { type: "button", onClick: onClick, "data-testid": testId, className: clsx("relative flex w-full shrink-0 items-start gap-2 border-b border-gray-25 p-3 text-left transition-colors hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-chat-ring", isSelected ? "bg-blue-50" : "bg-white"), children: [isSelected && (_jsx("span", { className: "absolute bottom-0 left-0 top-0 w-1 bg-blue-500" })), avatar, _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsxs("div", { className: "flex min-h-[25.6px] items-center justify-between gap-1", children: [_jsx("div", { className: "min-w-0 flex-1", children: title }), time && (_jsx("span", { className: "shrink-0 text-[12px] font-normal leading-[160%] text-gray-400 [font-feature-settings:'liga'_off,'clig'_off]", children: time }))] }), _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("p", { className: clsx("min-w-0 flex-1 truncate text-[14px] leading-[160%] [font-feature-settings:'liga'_off,'clig'_off]", hasUnread
+                                    ? "font-[510] text-black"
+                                    : "font-normal tracking-[0.14px] text-gray-600"), children: preview }), hasUnread && _jsx(UnreadBadge, { count: unreadCount })] })] })] }));
+};
+export default ThreadCard;

package/dist/src/components/conversation-detail/ConversationDetailHeader.d.ts

@@ -0,0 +1,8 @@
+import type { ConversationItem } from "@openim/wasm-client-sdk";
+export interface ConversationDetailHeaderProps {
+    conversation: ConversationItem;
+    onBack?: () => void;
+}
+declare const ConversationDetailHeader: ({ conversation, onBack, }: ConversationDetailHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default ConversationDetailHeader;
+//# sourceMappingURL=ConversationDetailHeader.d.ts.map

package/dist/src/components/conversation-detail/ConversationDetailHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationDetailHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation-detail/ConversationDetailHeader.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAQhE,MAAM,WAAW,6BAA6B;IAC5C,YAAY,EAAE,gBAAgB,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAqBD,QAAA,MAAM,wBAAwB,GAAI,2BAG/B,6BAA6B,4CAyC/B,CAAC;AAEF,eAAe,wBAAwB,CAAC"}