@droppii-org/chat-sdk 0.6.55 → 0.7.0

package/dist/components/canned-response/CannedResponseBody.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"CannedResponseBody.d.ts","sourceRoot":"","sources":["../../../src/components/canned-response/CannedResponseBody.tsx"],"names":[],"mappings":"AAkBA,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,4CAiN1D,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clickableProps, FOCUS_RING_CLASS } from "../../utils/a11yClickable";
 import { Empty, Segmented, Spin } from "antd";
 import { useFetchMyTeams } from "../../hooks/team/useFetchMyTeam";
 import { useTranslation } from "react-i18next";
@@ -97,13 +98,13 @@ const CannedResponseBody = (props) => {
                             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) => {
+                            return (_jsxs("div", Object.assign({ 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)
+                                }, className: clsx("flex flex-col flex-1 px-3 py-2 cursor-pointer hover:bg-blue-100 w-full border-b border-gray-200", FOCUS_RING_CLASS, isActive && "bg-blue-100") }, clickableProps(() => 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));
+                                        }, className: "text-sm mt-1" })] }), canned === null || canned === void 0 ? void 0 : canned.id));
                         })) })] })] }));
 };
 export default CannedResponseBody;

package/dist/components/canned-response/CannedResponsePanel.d.ts

@@ -0,0 +1,9 @@
+import { CannedCreateRequest } from "../../types/chat";
+interface CannedResponsePanelProps {
+    query: string;
+    viewedTeamId?: string;
+    onCreate?: (request: CannedCreateRequest) => void;
+}
+declare const CannedResponsePanel: ({ query, viewedTeamId, onCreate, }: CannedResponsePanelProps) => import("react/jsx-runtime").JSX.Element;
+export default CannedResponsePanel;
+//# sourceMappingURL=CannedResponsePanel.d.ts.map

package/dist/components/canned-response/CannedResponsePanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CannedResponsePanel.d.ts","sourceRoot":"","sources":["../../../src/components/canned-response/CannedResponsePanel.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,mBAAmB,EAA8B,MAAM,cAAc,CAAC;AAQ/E,UAAU,wBAAwB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAC;CACnD;AAaD,QAAA,MAAM,mBAAmB,GAAI,oCAI1B,wBAAwB,4CAiJ1B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/canned-response/CannedResponsePanel.js

@@ -0,0 +1,72 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Spin } from "antd";
+import { StrokeIcon } from "../../components/icon/StrokeIcon";
+import { useDebounce } from "ahooks";
+import { useTranslation } from "react-i18next";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useFetchMyTeams } from "../../hooks/team/useFetchMyTeam";
+import { useSearchCannedAcrossScopes } from "../../hooks/canned-response/useSearchCannedAcrossScopes";
+import { useMessageFooterContext } from "../../components/message/footer";
+import { CannedResponseVisibleScope } from "../../types/chat";
+import { sanitizeHtml } from "../../utils/common";
+import emitter from "../../utils/events";
+import { insertCannedContent } from "./insertCannedContent";
+import { buildCannedScopes } from "./cannedScopes";
+import CannedScopeChips, { ALL_SCOPES_KEY } from "./CannedScopeChips";
+import CannedResponseRow from "./CannedResponseRow";
+const Kbd = ({ children }) => (_jsx("kbd", { className: "inline-flex h-6 min-w-[24px] items-center justify-center rounded border border-b-2 border-gray-50 bg-white px-1.5 font-sans text-xs font-semibold text-gray-900", children: children }));
+const toPreview = (html) => {
+    var _a;
+    return (_a = new DOMParser().parseFromString(sanitizeHtml(html), "text/html").body
+        .textContent) !== null && _a !== void 0 ? _a : "";
+};
+// CRM only: lists matches for the "#shortcut" being typed; focus stays in the composer.
+const CannedResponsePanel = ({ query, viewedTeamId, onCreate, }) => {
+    const { t } = useTranslation();
+    const [editor] = useLexicalComposerContext();
+    const { activeCannedIndex, setActiveCannedIndex, setMaxActiveCannedIndex } = useMessageFooterContext();
+    const { data: myTeams } = useFetchMyTeams();
+    const [filter, setFilter] = useState(ALL_SCOPES_KEY);
+    const debouncedQuery = useDebounce(query, { wait: 200 });
+    const itemRefs = useRef([]);
+    const scopes = useMemo(() => buildCannedScopes(myTeams !== null && myTeams !== void 0 ? myTeams : [], t("personal"), viewedTeamId), [myTeams, t, viewedTeamId]);
+    const activeScopes = useMemo(() => (filter === ALL_SCOPES_KEY ? scopes : scopes.filter((s) => s.key === filter)), [scopes, filter]);
+    const { rows, isLoading, isError } = useSearchCannedAcrossScopes(activeScopes, debouncedQuery);
+    const settling = query !== debouncedQuery;
+    const insertRow = useCallback((row) => insertCannedContent(editor, sanitizeHtml(row.content || "")), [editor]);
+    useEffect(() => {
+        const onSelect = (index) => {
+            const row = index === null ? undefined : rows[Math.min(index, rows.length - 1)];
+            if (row)
+                insertRow(row);
+        };
+        emitter.on("CANNED_RESPONSE_SELECT", onSelect);
+        return () => emitter.off("CANNED_RESPONSE_SELECT", onSelect);
+    }, [rows, insertRow]);
+    useEffect(() => setActiveCannedIndex(0), [debouncedQuery, filter, setActiveCannedIndex]);
+    useEffect(() => setMaxActiveCannedIndex(Math.max(rows.length - 1, 0)), [rows.length, setMaxActiveCannedIndex]);
+    useEffect(() => {
+        var _a, _b;
+        if (activeCannedIndex !== null) {
+            (_b = (_a = itemRefs.current[activeCannedIndex]) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, { block: "nearest" });
+        }
+    }, [activeCannedIndex]);
+    const create = () => {
+        var _a;
+        const scope = scopes.find((s) => s.key === filter);
+        const isPersonal = (scope === null || scope === void 0 ? void 0 : scope.visibilityScope) === CannedResponseVisibleScope.PRIVATE;
+        onCreate === null || onCreate === void 0 ? void 0 : onCreate({
+            visibilityScope: isPersonal ? "PRIVATE" : "TEAM",
+            teamId: isPersonal ? undefined : (_a = scope === null || scope === void 0 ? void 0 : scope.teamId) !== null && _a !== void 0 ? _a : viewedTeamId,
+            onCreated: (content) => editor.focus(() => insertCannedContent(editor, sanitizeHtml(content))),
+        });
+    };
+    const noQuery = query.length === 0;
+    const empty = !noQuery && !settling && !isLoading && rows.length === 0;
+    return (_jsxs("div", { "data-cp-name": "CannedResponsePanel", role: "region", "aria-label": t("composer_quick_reply"), className: "absolute inset-x-4 bottom-full z-20 mb-2 overflow-hidden rounded-xl bg-white shadow-[0_16px_16px_-8px_rgba(27,63,228,0.2),0_0_0_1px_rgba(57,62,64,0.06)]", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-gray-25 px-3 py-2.5", children: [_jsx("span", { className: "shrink-0 text-[13px] font-semibold text-gray-900", children: t("composer_quick_reply") }), _jsx("span", { className: "flex-1" }), _jsx(CannedScopeChips, { scopes: scopes, value: filter, onChange: setFilter })] }), _jsxs("div", { className: "max-h-[260px] min-h-[96px] overflow-y-auto p-1", children: [noQuery && (_jsx("p", { className: "px-3 py-6 text-center text-sm text-gray-600", children: t("canned_search_prompt") })), !noQuery && (settling || isLoading) && (_jsx("div", { className: "flex justify-center py-6", children: _jsx(Spin, { size: "small" }) })), isError && !settling && (_jsx("p", { role: "alert", className: "px-3 py-6 text-center text-sm text-danger-600", children: t("canned_loading_failed") })), empty && !isError && (_jsxs("div", { className: "flex flex-col items-center gap-3 px-3 py-5", children: [_jsx("p", { className: "text-center text-sm text-gray-600", children: t("canned_search_empty", { query }) }), _jsxs("button", { type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault(), onClick: create, className: "flex h-8 items-center gap-1.5 rounded-lg border border-gray-50 bg-white px-3.5 text-sm font-medium text-gray-900 hover:bg-gray-5", children: [_jsx(StrokeIcon, { name: "plus", size: 16 }), t("canned_create_new")] })] })), !settling && rows.length > 0 && (_jsx("ul", { className: "m-0 flex list-none flex-col gap-0.5 p-0", children: rows.map((row, index) => (_jsx(CannedResponseRow, { ref: (el) => {
+                                itemRefs.current[index] = el;
+                            }, row: row, preview: toPreview(row.content || ""), active: index === activeCannedIndex, onSelect: () => insertRow(row) }, row.id))) }))] }), _jsxs("div", { className: "flex items-center gap-2 border-t border-gray-25 px-3 py-2 text-xs text-gray-600", children: [_jsx(Kbd, { children: "\u2191" }), _jsx(Kbd, { children: "\u2193" }), " ", t("canned_hint_select"), " \u00B7 ", _jsx(Kbd, { children: "Enter" }), " ", t("canned_hint_insert"), " \u00B7", " ", _jsx(Kbd, { children: "Esc" }), " ", t("canned_hint_close"), _jsx("span", { className: "flex-1" }), _jsxs("button", { type: "button", tabIndex: -1, onMouseDown: (e) => e.preventDefault(), onClick: create, className: "flex h-7 items-center gap-1.5 rounded-lg px-2 text-[13px] font-medium text-primary-500 hover:bg-primary-25", children: [_jsx(StrokeIcon, { name: "plus", size: 16 }), t("canned_create_quick")] })] })] }));
+};
+export default CannedResponsePanel;

package/dist/components/canned-response/CannedResponseRow.d.ts

@@ -0,0 +1,10 @@
+import { CannedRow } from "./cannedScopes";
+interface CannedResponseRowProps {
+    row: CannedRow;
+    preview: string;
+    active: boolean;
+    onSelect: () => void;
+}
+declare const CannedResponseRow: import("react").ForwardRefExoticComponent<CannedResponseRowProps & import("react").RefAttributes<HTMLLIElement>>;
+export default CannedResponseRow;
+//# sourceMappingURL=CannedResponseRow.d.ts.map

package/dist/components/canned-response/CannedResponseRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CannedResponseRow.d.ts","sourceRoot":"","sources":["../../../src/components/canned-response/CannedResponseRow.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,UAAU,sBAAsB;IAC9B,GAAG,EAAE,SAAS,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,iBAAiB,kHA2BtB,CAAC;AAGF,eAAe,iBAAiB,CAAC"}

package/dist/components/canned-response/CannedResponseRow.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { forwardRef } from "react";
+const CannedResponseRow = forwardRef(({ row, preview, active, onSelect }, ref) => (_jsx("li", { ref: ref, children: _jsxs("button", { type: "button", tabIndex: -1, "aria-current": active, onMouseDown: (e) => e.preventDefault(), onClick: onSelect, className: clsx("flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left", active ? "bg-primary-25" : "hover:bg-gray-5"), children: [_jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsxs("span", { className: "flex items-baseline gap-2 text-[13px]", children: [_jsx("span", { className: "font-semibold text-primary-500", children: `#${row.shortcut}` }), _jsx("span", { className: "truncate font-medium text-gray-900", children: row.name })] }), _jsx("span", { className: "truncate text-[13px] text-gray-600", children: preview })] }), _jsx("span", { className: "inline-flex h-[22px] max-w-[140px] shrink-0 items-center truncate rounded-full bg-[var(--dc-color-neutral-surface)] px-2 text-xs font-medium text-gray-900", children: row.scopeLabel })] }) })));
+CannedResponseRow.displayName = "CannedResponseRow";
+export default CannedResponseRow;

package/dist/components/canned-response/CannedScopeChips.d.ts

@@ -0,0 +1,10 @@
+import { CannedScope } from "./cannedScopes";
+export declare const ALL_SCOPES_KEY = "ALL";
+interface CannedScopeChipsProps {
+    scopes: CannedScope[];
+    value: string;
+    onChange: (key: string) => void;
+}
+declare const CannedScopeChips: ({ scopes, value, onChange }: CannedScopeChipsProps) => import("react/jsx-runtime").JSX.Element;
+export default CannedScopeChips;
+//# sourceMappingURL=CannedScopeChips.d.ts.map

package/dist/components/canned-response/CannedScopeChips.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CannedScopeChips.d.ts","sourceRoot":"","sources":["../../../src/components/canned-response/CannedScopeChips.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,eAAO,MAAM,cAAc,QAAQ,CAAC;AAEpC,UAAU,qBAAqB;IAC7B,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAGD,QAAA,MAAM,gBAAgB,GAAI,6BAA6B,qBAAqB,4CAsD3E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/canned-response/CannedScopeChips.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+export const ALL_SCOPES_KEY = "ALL";
+// Chips never take focus: the agent keeps typing in the composer while filtering.
+const CannedScopeChips = ({ scopes, value, onChange }) => {
+    const { t } = useTranslation();
+    const chips = [{ key: ALL_SCOPES_KEY, label: t("all") }, ...scopes];
+    const ref = useRef(null);
+    const [hasMoreRight, setHasMoreRight] = useState(false);
+    // With many teams the row scrolls sideways; a fade on the right edge shows there is more.
+    const measure = useCallback(() => {
+        const el = ref.current;
+        if (el)
+            setHasMoreRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+    }, []);
+    useEffect(() => {
+        measure();
+        const el = ref.current;
+        if (!el || typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(measure);
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [measure, chips.length]);
+    return (_jsx("div", { ref: ref, role: "group", "aria-label": t("canned_scope_filter"), onScroll: measure, className: clsx("flex min-w-0 gap-1.5 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", hasMoreRight && "[mask-image:linear-gradient(to_right,#000_calc(100%-32px),transparent)]"), children: chips.map((chip) => {
+            const selected = chip.key === value;
+            return (_jsx("button", { type: "button", tabIndex: -1, "aria-pressed": selected, onMouseDown: (e) => e.preventDefault(), onClick: () => onChange(chip.key), className: clsx("h-7 shrink-0 whitespace-nowrap rounded-full border px-2.5 text-xs font-medium", selected
+                    ? "border-primary-25 bg-primary-25 text-primary-500"
+                    : "border-gray-50 bg-white text-gray-900 hover:bg-gray-5"), children: chip.label }, chip.key));
+        }) }));
+};
+export default CannedScopeChips;

package/dist/components/canned-response/cannedScopes.d.ts

@@ -0,0 +1,16 @@
+import { CannedResponseVisibleScope } from "../../types/chat";
+import { ICannedResponseItem, IMyTeamResponse } from "../../types/dto";
+export declare const PERSONAL_SCOPE_KEY = "PRIVATE";
+export interface CannedScope {
+    key: string;
+    visibilityScope: CannedResponseVisibleScope;
+    teamId?: string;
+    label: string;
+}
+export interface CannedRow extends ICannedResponseItem {
+    scopeKey: string;
+    scopeLabel: string;
+}
+export declare const buildCannedScopes: (teams: IMyTeamResponse[], personalLabel: string, viewedTeamId?: string) => CannedScope[];
+export declare const mergeCannedResults: (scopes: CannedScope[], results: ICannedResponseItem[][]) => CannedRow[];
+//# sourceMappingURL=cannedScopes.d.ts.map

package/dist/components/canned-response/cannedScopes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cannedScopes.d.ts","sourceRoot":"","sources":["../../../src/components/canned-response/cannedScopes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEnE,eAAO,MAAM,kBAAkB,YAAY,CAAC;AAE5C,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,eAAe,EAAE,0BAA0B,CAAC;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,SAAU,SAAQ,mBAAmB;IACpD,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;CACpB;AAID,eAAO,MAAM,iBAAiB,GAC5B,OAAO,eAAe,EAAE,EACxB,eAAe,MAAM,EACrB,eAAe,MAAM,KACpB,WAAW,EAmBb,CAAC;AAGF,eAAO,MAAM,kBAAkB,GAC7B,QAAQ,WAAW,EAAE,EACrB,SAAS,mBAAmB,EAAE,EAAE,KAC/B,SAAS,EAWX,CAAC"}

package/dist/components/canned-response/cannedScopes.js

@@ -0,0 +1,39 @@
+import { CannedResponseVisibleScope } from "../../types/chat";
+export const PERSONAL_SCOPE_KEY = "PRIVATE";
+// The search endpoint takes one scope per call, so the picker queries each scope.
+// Order is the display order: personal first, then the team being viewed, then the rest.
+export const buildCannedScopes = (teams, personalLabel, viewedTeamId) => {
+    const teamScopes = teams.map((team) => ({
+        key: team.teamId,
+        visibilityScope: CannedResponseVisibleScope.TEAM,
+        teamId: team.teamId,
+        label: team.name,
+    }));
+    const viewedIndex = teamScopes.findIndex((scope) => scope.key === viewedTeamId);
+    if (viewedIndex > 0) {
+        teamScopes.unshift(...teamScopes.splice(viewedIndex, 1));
+    }
+    return [
+        {
+            key: PERSONAL_SCOPE_KEY,
+            visibilityScope: CannedResponseVisibleScope.PRIVATE,
+            label: personalLabel,
+        },
+        ...teamScopes,
+    ];
+};
+// Concatenates per-scope results in scope order and drops repeated ids.
+export const mergeCannedResults = (scopes, results) => {
+    const seen = new Set();
+    const rows = [];
+    scopes.forEach((scope, index) => {
+        var _a;
+        ((_a = results[index]) !== null && _a !== void 0 ? _a : []).forEach((item) => {
+            if (seen.has(item.id))
+                return;
+            seen.add(item.id);
+            rows.push(Object.assign(Object.assign({}, item), { scopeKey: scope.key, scopeLabel: scope.label }));
+        });
+    });
+    return rows;
+};

package/dist/components/canned-response/index.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/canned-response/index.tsx"],"names":[],"mappings":"AAWA,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,4CA0CtB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/canned-response/index.js

@@ -7,28 +7,29 @@ import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext
 import { $getRoot } from "lexical";
 import { $generateNodesFromDOM } from "@lexical/html";
 import CannedResponseFooter from "./CannedResponseFooter";
+import useAuthStore from "../../store/auth";
+import { insertCannedContent } from "./insertCannedContent";
 const CannedResponse = ({ onClose, openCreateCannedModal, cannedQuery = "", }) => {
     const [editor] = useLexicalComposerContext();
+    const isCrm = useAuthStore((state) => state.isCrm);
     const [search, setSearch] = useState("");
     const debouncedSearch = useDebounce(search, {
         wait: 300,
     });
     const onSelectCannedResponse = useCallback((content) => {
+        // The composer is shared with BIZ/PDP/Mall, which keep replacing the draft.
+        if (isCrm) {
+            insertCannedContent(editor, content);
+            return;
+        }
         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ó)
+            const dom = new DOMParser().parseFromString(content, "text/html");
+            root.append(...$generateNodesFromDOM(editor, dom));
             root.selectEnd();
         });
-    }, [editor]);
+    }, [editor, isCrm]);
     return (_jsxs("div", { className: "w-[600px]", "data-cp-name": "CannedResponse", 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/canned-response/insertCannedContent.d.ts

@@ -0,0 +1,7 @@
+import { type LexicalEditor } from "lexical";
+/**
+ * Inserts a canned reply at the cursor, keeping the draft. The insert is its own
+ * undo step so Cmd+Z returns to the draft.
+ */
+export declare const insertCannedContent: (editor: LexicalEditor, content: string) => void;
+//# sourceMappingURL=insertCannedContent.d.ts.map

package/dist/components/canned-response/insertCannedContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"insertCannedContent.d.ts","sourceRoot":"","sources":["../../../src/components/canned-response/insertCannedContent.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,aAAa,EACnB,MAAM,SAAS,CAAC;AAkBjB;;;GAGG;AACH,eAAO,MAAM,mBAAmB,GAAI,QAAQ,aAAa,EAAE,SAAS,MAAM,SAqBzE,CAAC"}

package/dist/components/canned-response/insertCannedContent.js

@@ -0,0 +1,39 @@
+import { $createParagraphNode, $getRoot, $getSelection, $isRangeSelection, $isTextNode, } from "lexical";
+import { $generateNodesFromDOM } from "@lexical/html";
+const TRIGGER_BEFORE_CURSOR = /(^|\s)#\w*$/;
+// Drops the "#shortcut" the agent typed to open the picker, so only the reply stays.
+const $removeTriggerBeforeCursor = () => {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection) || !selection.isCollapsed())
+        return;
+    const { anchor } = selection;
+    const node = anchor.getNode();
+    if (!$isTextNode(node))
+        return;
+    const match = node.getTextContent().slice(0, anchor.offset).match(TRIGGER_BEFORE_CURSOR);
+    if (!match)
+        return;
+    const triggerStart = anchor.offset - match[0].replace(/^\s/, "").length;
+    node.spliceText(triggerStart, anchor.offset - triggerStart, "", true);
+};
+/**
+ * Inserts a canned reply at the cursor, keeping the draft. The insert is its own
+ * undo step so Cmd+Z returns to the draft.
+ */
+export const insertCannedContent = (editor, content) => {
+    editor.update(() => {
+        const root = $getRoot();
+        const nodes = $generateNodesFromDOM(editor, new DOMParser().parseFromString(content, "text/html"));
+        if (!$isRangeSelection($getSelection())) {
+            if (root.getTextContentSize() === 0) {
+                root.clear();
+                root.append($createParagraphNode());
+            }
+            root.selectEnd();
+        }
+        $removeTriggerBeforeCursor();
+        const selection = $getSelection();
+        if ($isRangeSelection(selection))
+            selection.insertNodes(nodes);
+    }, { tag: "history-push" });
+};

package/dist/components/canned-response/team/TeamItem.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"TeamItem.d.ts","sourceRoot":"","sources":["../../../../src/components/canned-response/team/TeamItem.tsx"],"names":[],"mappings":"AACA,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,4CAsFf,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/canned-response/team/TeamItem.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clickableProps, FOCUS_RING_CLASS } from "../../../utils/a11yClickable";
 import { useFetchCannedCategories } from "../../../hooks/canned-response/useFetchCannedCategories";
 import { useBoolean } from "ahooks";
 import { Icon } from "../../../components/icon";
@@ -15,17 +16,17 @@ const TeamItem = ({ team, onSelectCategory, selectedTeamId, selectedCategoryId,
         }
         toggle();
     }, [toggle, isOpen, onSelectCategory, team === null || team === void 0 ? void 0 : team.teamId, selectedTeamId]);
-    return (_jsxs("div", { className: "border-b border-gray-200", "data-cp-name": "TeamItem", 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 &&
+    return (_jsxs("div", { className: "border-b border-gray-200", "data-cp-name": "TeamItem", children: [_jsxs("div", Object.assign({ className: `flex items-center justify-between py-2 cursor-pointer ${FOCUS_RING_CLASS}` }, clickableProps(onToggle), { "aria-expanded": isOpen, 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", Object.assign({ className: clsx("px-3 py-1 cursor-pointer hover:bg-gray-100 rounded-md", FOCUS_RING_CLASS, 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
+                            "bg-gray-100") }, clickableProps(() => 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) => {
+                                : "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}`));
+                        return (_jsx("div", Object.assign({ className: clsx("px-3 py-1 cursor-pointer hover:bg-gray-100 rounded-md", FOCUS_RING_CLASS, isSelected && "bg-gray-100") }, clickableProps(() => 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/common/ConfirmModal.d.ts

@@ -1,4 +1,6 @@
+import type { ModalProps } from "antd";
 import type { ReactNode } from "react";
+import type { StrokeIconName } from "../../components/icon/strokeIconNodes";
 export interface ConfirmModalProps {
     open: boolean;
     title: ReactNode;
@@ -11,8 +13,18 @@ export interface ConfirmModalProps {
     okButtonProps?: {
         disabled?: boolean;
     };
+    /** CRM only: danger icon beside the title and a solid danger OK button. */
+    destructive?: boolean;
+    /** CRM only: line under the body, e.g. "Không thể hoàn tác.". */
+    warning?: ReactNode;
+    /** CRM only: line icon before the OK label. */
+    okIcon?: StrokeIconName;
+    /** CRM only: muted text at the left of the footer, before the buttons. */
+    footerNote?: ReactNode;
+    /** Where the modal mounts; defaults to inline (`false`). */
+    getContainer?: ModalProps["getContainer"];
     children: ReactNode;
 }
-declare const ConfirmModal: ({ open, title, okText, cancelText, onOk, onCancel, okType, confirmLoading, okButtonProps, children, }: ConfirmModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const ConfirmModal: ({ open, title, okText, cancelText, onOk, onCancel, okType, confirmLoading, okButtonProps, destructive, okIcon, warning, footerNote, getContainer, children, }: ConfirmModalProps) => import("react/jsx-runtime").JSX.Element;
 export default ConfirmModal;
 //# sourceMappingURL=ConfirmModal.d.ts.map

package/dist/components/common/ConfirmModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmModal.d.ts","sourceRoot":"","sources":["../../../src/components/common/ConfirmModal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,MAAM,EAAE,SAAS,CAAC;IAClB,UAAU,EAAE,SAAS,CAAC;IACtB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC9B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IACvC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,QAAA,MAAM,YAAY,GAAI,uGAWnB,iBAAiB,4CAkCnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ConfirmModal.d.ts","sourceRoot":"","sources":["../../../src/components/common/ConfirmModal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAExE,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,MAAM,EAAE,SAAS,CAAC;IAClB,UAAU,EAAE,SAAS,CAAC;IACtB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC9B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IACvC,2EAA2E;IAC3E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iEAAiE;IACjE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,0EAA0E;IAC1E,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,4DAA4D;IAC5D,YAAY,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,CAAC;IAC1C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,QAAA,MAAM,YAAY,GAAI,+JAgBnB,iBAAiB,4CAoFnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/common/ConfirmModal.js

@@ -1,15 +1,33 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Modal } from "antd";
-const ConfirmModal = ({ open, title, okText, cancelText, onOk, onCancel, okType = "primary", confirmLoading, okButtonProps, children, }) => {
-    return (_jsx(Modal, { "data-cp-name": "ConfirmModal", centered: true, open: open, onOk: onOk, onCancel: onCancel, okText: okText, cancelText: cancelText, confirmLoading: confirmLoading, okButtonProps: Object.assign(Object.assign({}, okButtonProps), { className: okType === "danger"
+import useAuthStore from "../../store/auth";
+import { StrokeIcon } from "../../components/icon/StrokeIcon";
+const ConfirmModal = ({ open, title, okText, cancelText, onOk, onCancel, okType = "primary", confirmLoading, okButtonProps, destructive = false, okIcon, warning, footerNote, getContainer = false, children, }) => {
+    // CRM takes header/body/footer and button styling from its antd theme;
+    // other hosts keep this component's own look.
+    const isCrm = useAuthStore((state) => state.isCrm);
+    const isDanger = destructive || okType === "danger";
+    const crmTitle = destructive ? (_jsxs("span", { className: "flex items-center gap-3", children: [_jsx("span", { "aria-hidden": "true", className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-danger-25 text-danger-600", children: _jsx(StrokeIcon, { name: "alert-triangle", size: 20 }) }), title] })) : (title);
+    const crmFooter = footerNote
+        ? (_, { OkBtn, CancelBtn }) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "min-w-0 flex-1 text-left text-[13px] text-gray-600", children: footerNote }), _jsx(CancelBtn, {}), _jsx(OkBtn, {})] }))
+        : undefined;
+    const lookProps = isCrm
+        ? Object.assign({ okType: isDanger ? "primary" : okType, okButtonProps: Object.assign(Object.assign(Object.assign({}, okButtonProps), (isDanger && { danger: true })), (okIcon && { icon: _jsx(StrokeIcon, { name: okIcon, size: 18 }) })), title: crmTitle }, (crmFooter ? { footer: crmFooter } : {})) : {
+        okButtonProps: Object.assign(Object.assign({}, okButtonProps), { className: okType === "danger"
                 ? "!h-10 !rounded-lg !border-danger-400 !bg-danger-400 !text-white hover:!border-danger-300 hover:!bg-danger-300"
-                : "!h-10 !rounded-lg !border-[var(--dc-color-primary)] !bg-[var(--dc-color-primary)] !text-white hover:!border-[var(--dc-color-primary-hover)] hover:!bg-[var(--dc-color-primary-hover)]" }), cancelButtonProps: {
+                : "!h-10 !rounded-lg !border-[var(--dc-color-primary)] !bg-[var(--dc-color-primary)] !text-white hover:!border-[var(--dc-color-primary-hover)] hover:!bg-[var(--dc-color-primary-hover)]" }),
+        cancelButtonProps: {
             className: "!h-10 !rounded-lg !border-gray-25 !bg-gray-25 !text-gray-900",
-        }, styles: {
+        },
+        styles: {
             header: { textAlign: "center", marginBottom: 0 },
             footer: { marginTop: 16 },
             body: { paddingTop: 4 },
-        }, classNames: { footer: "border-t border-gray-25 pt-4" }, title: _jsx("span", { className: "text-[18px] font-bold text-gray-900", children: title }), getContainer: false, forceRender: true, children: children }));
+        },
+        classNames: { footer: "border-t border-gray-25 pt-4" },
+        title: _jsx("span", { className: "text-[18px] font-bold text-gray-900", children: title }),
+    };
+    return (_jsxs(Modal, Object.assign({ "data-cp-name": "ConfirmModal", centered: true, open: open, onOk: onOk, onCancel: onCancel, okText: okText, cancelText: cancelText, confirmLoading: confirmLoading, getContainer: getContainer, forceRender: !isCrm, destroyOnHidden: isCrm }, lookProps, { children: [children, isCrm && warning && (_jsxs("p", { className: "mt-4 flex items-center gap-1.5 text-[13px] font-medium text-danger-600", children: [_jsx(StrokeIcon, { name: "alert-circle", size: 16 }), warning] }))] })));
 };
 export default ConfirmModal;

package/dist/components/common/DeskPanelDrawer.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+interface DeskPanelDrawerProps {
+    open: boolean;
+    label: string;
+    onClose: () => void;
+    /** Positioned element the drawer and its scrim mount into; in place when missing. */
+    container?: HTMLElement | null;
+    /** Off when the panel focuses its own field on open. */
+    autoFocus?: boolean;
+    /** Off while a layer inside the drawer should take Esc first. */
+    keyboard?: boolean;
+    children: ReactNode;
+}
+/** Overlay drawer for a desk side panel (inset 8px, rounded, light scrim). Sits below modals opened from it. */
+declare const DeskPanelDrawer: ({ open, label, onClose, container, autoFocus, keyboard, children, }: DeskPanelDrawerProps) => import("react/jsx-runtime").JSX.Element;
+export default DeskPanelDrawer;
+//# sourceMappingURL=DeskPanelDrawer.d.ts.map

package/dist/components/common/DeskPanelDrawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeskPanelDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/common/DeskPanelDrawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,UAAU,oBAAoB;IAC5B,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,qFAAqF;IACrF,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC/B,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,gHAAgH;AAChH,QAAA,MAAM,eAAe,GAAI,qEAQtB,oBAAoB,4CA+BtB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/common/DeskPanelDrawer.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Drawer } from "antd";
+import { LAYOUT_WIDTHS } from "../../constants/layout";
+/** Overlay drawer for a desk side panel (inset 8px, rounded, light scrim). Sits below modals opened from it. */
+const DeskPanelDrawer = ({ open, label, onClose, container, autoFocus = true, keyboard = true, children, }) => (_jsx(Drawer, { open: open, "aria-label": label, onClose: onClose, autoFocus: autoFocus, keyboard: keyboard, 
+    // antd slides a drawer 180px aside when one opens inside it; panels here stack in place.
+    push: false, destroyOnHidden: true, closeIcon: false, getContainer: container !== null && container !== void 0 ? container : false, rootStyle: { position: "absolute" }, zIndex: 900, width: LAYOUT_WIDTHS.infoDrawer, styles: {
+        mask: { background: "rgba(57, 62, 64, 0.16)" },
+        wrapper: {
+            top: 8,
+            right: 8,
+            bottom: 8,
+            height: "auto",
+            borderRadius: 12,
+            overflow: "hidden",
+            boxShadow: "0 8px 24px rgba(57, 62, 64, 0.16)",
+        },
+        body: { padding: 0, background: "transparent" },
+    }, children: children }));
+export default DeskPanelDrawer;

package/dist/components/common/DeskSidePanel.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+interface DeskSidePanelProps {
+    open: boolean;
+    label: string;
+    onClose: () => void;
+    /** Off when the panel focuses its own field on open. */
+    autoFocus?: boolean;
+    /** Receives `true` when the panel sits inline in the workspace row. */
+    children: (isInline: boolean) => ReactNode;
+}
+/**
+ * CRM desk side panel opened from the chat header (members, search, library, info):
+ * an inline column where the workspace has room, otherwise an inset drawer over it.
+ */
+declare const DeskSidePanel: ({ open, label, onClose, autoFocus, children, }: DeskSidePanelProps) => import("react/jsx-runtime").JSX.Element | null;
+export default DeskSidePanel;
+//# sourceMappingURL=DeskSidePanel.d.ts.map

package/dist/components/common/DeskSidePanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeskSidePanel.d.ts","sourceRoot":"","sources":["../../../src/components/common/DeskSidePanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,UAAU,kBAAkB;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uEAAuE;IACvE,QAAQ,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,SAAS,CAAC;CAC5C;AAED;;;GAGG;AACH,QAAA,MAAM,aAAa,GAAI,gDAMpB,kBAAkB,mDAiCpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/common/DeskSidePanel.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import useDeskPanelHostStore from "../../store/deskPanelHost";
+import { LAYOUT_WIDTHS } from "../../constants/layout";
+import DeskPanelDrawer from "./DeskPanelDrawer";
+/**
+ * CRM desk side panel opened from the chat header (members, search, library, info):
+ * an inline column where the workspace has room, otherwise an inset drawer over it.
+ */
+const DeskSidePanel = ({ open, label, onClose, autoFocus, children, }) => {
+    const host = useDeskPanelHostStore();
+    if (host.isInline && host.slot) {
+        return open
+            ? createPortal(_jsx("aside", { "aria-label": label, className: "h-full shrink-0 overflow-hidden rounded-xl bg-white shadow-sm", style: { width: LAYOUT_WIDTHS.infoInline }, children: children(true) }), host.slot)
+            : null;
+    }
+    if (host.workspace) {
+        return (_jsx(DeskPanelDrawer, { open: open, label: label, onClose: onClose, container: host.workspace, autoFocus: autoFocus, children: _jsx("div", { className: "h-full overflow-hidden rounded-xl bg-white", children: children(false) }) }));
+    }
+    return null;
+};
+export default DeskSidePanel;

package/dist/components/common/TintedAvatar.d.ts

@@ -0,0 +1,11 @@
+interface TintedAvatarProps {
+    name: string;
+    src?: string | null;
+    size: number;
+    className?: string;
+    testId?: string;
+}
+/** CRM avatar: the photo when it loads, otherwise initials on one of the five mockup tints. */
+declare const TintedAvatar: ({ name, src, size, className, testId, }: TintedAvatarProps) => import("react/jsx-runtime").JSX.Element;
+export default TintedAvatar;
+//# sourceMappingURL=TintedAvatar.d.ts.map

package/dist/components/common/TintedAvatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TintedAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/common/TintedAvatar.tsx"],"names":[],"mappings":"AAKA,UAAU,iBAAiB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,+FAA+F;AAC/F,QAAA,MAAM,YAAY,GAAI,yCAMnB,iBAAiB,4CA6BnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/common/TintedAvatar.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import clsx from "clsx";
+import { getAvatarTint, getInitials } from "../../components/conversation/avatarTint";
+/** CRM avatar: the photo when it loads, otherwise initials on one of the five mockup tints. */
+const TintedAvatar = ({ name, src, size, className, testId = "tinted-avatar-initials", }) => {
+    const [failedSrc, setFailedSrc] = useState(null);
+    const dimension = { width: size, height: size };
+    if (src && src !== failedSrc) {
+        return (
+        // eslint-disable-next-line @next/next/no-img-element
+        _jsx("img", { src: src, alt: "", style: dimension, className: clsx("shrink-0 rounded-full object-cover", className), onError: () => setFailedSrc(src) }));
+    }
+    return (_jsx("span", { "aria-hidden": "true", "data-testid": testId, style: Object.assign(Object.assign({}, dimension), { fontSize: Math.round(size * 0.35) }), className: clsx("flex shrink-0 items-center justify-center rounded-full font-semibold", getAvatarTint(name), className), children: getInitials(name) }));
+};
+export default TintedAvatar;