@droppii-org/chat-sdk 0.7.3 → 0.7.4

package/dist/components/boot/BootProgressBar.d.ts

@@ -0,0 +1,13 @@
+export type BootProgressBarMode = "pending" | "indeterminate" | "progress" | "complete";
+interface BootProgressBarProps {
+    mode: BootProgressBarMode;
+    /** 0-100, read in "progress" mode. */
+    value?: number;
+    /** Accessible name, announced only in "progress" mode. */
+    label?: string;
+    className?: string;
+}
+/** Thin bar for one boot step: not started, running for an unknown time, a known percentage, or done. */
+declare const BootProgressBar: ({ mode, value, label, className }: BootProgressBarProps) => import("react/jsx-runtime").JSX.Element;
+export default BootProgressBar;
+//# sourceMappingURL=BootProgressBar.d.ts.map

package/dist/components/boot/BootProgressBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BootProgressBar.d.ts","sourceRoot":"","sources":["../../../src/components/boot/BootProgressBar.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,eAAe,GAAG,UAAU,GAAG,UAAU,CAAC;AAExF,UAAU,oBAAoB;IAC5B,IAAI,EAAE,mBAAmB,CAAC;IAC1B,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,yGAAyG;AACzG,QAAA,MAAM,eAAe,GAAI,mCAAuC,oBAAoB,4CAiCnF,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/boot/BootProgressBar.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+/** Thin bar for one boot step: not started, running for an unknown time, a known percentage, or done. */
+const BootProgressBar = ({ mode, value = 0, label, className }) => {
+    const scale = mode === "complete" ? 1 : mode === "progress" ? value / 100 : 0;
+    const a11yProps = mode === "progress"
+        ? {
+            role: "progressbar",
+            "aria-label": label,
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-valuenow": Math.round(value),
+        }
+        : { "aria-hidden": true };
+    return (_jsx("div", Object.assign({ "data-cp-name": "BootProgressBar", "data-mode": mode, className: clsx("relative h-1 overflow-hidden rounded-full bg-[var(--dc-color-primary-light)]", className) }, a11yProps, { children: mode === "indeterminate" ? (_jsx("span", { className: "absolute inset-y-0 left-0 w-full rounded-full bg-[var(--dc-color-primary)] opacity-40 motion-safe:w-[35%] motion-safe:animate-[dchat-boot-indeterminate_1.3s_ease-in-out_infinite] motion-safe:opacity-100" })) : (_jsx("span", { className: "absolute inset-0 origin-left rounded-full bg-[var(--dc-color-primary)] transition-transform duration-300 ease-out motion-reduce:transition-none", style: { transform: `scaleX(${scale})` } })) })));
+};
+export default BootProgressBar;

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

@@ -1 +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"}
+{"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,4CAmJ1B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

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

@@ -65,8 +65,8 @@ const CannedResponsePanel = ({ query, viewedTeamId, onCreate, }) => {
     };
     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) => {
+    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] touch:min-h-0 touch:max-h-[min(260px,calc(var(--dc-desk-height,100dvh)-var(--dc-composer-reserve,280px)))] 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")] })] })] }));
+                            }, 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: [_jsxs("span", { className: "contents touch:hidden", 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/common/BottomSheet.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from "react";
+interface BottomSheetProps {
+    open: boolean;
+    title: string;
+    onClose: () => void;
+    children: ReactNode;
+}
+/** Row style for actions inside a BottomSheet: 48px minimum hit area. */
+export declare const BOTTOM_SHEET_ROW = "flex min-h-12 w-full items-center gap-3 rounded-lg px-3 text-left text-base text-gray-900 active:bg-gray-5";
+/**
+ * After a sheet closes, rc-drawer refocuses its trigger; hand focus to a modal the sheet's
+ * action opened (one not in `alreadyOpen`), via a node rc-dialog makes focusable.
+ */
+export declare const restoreModalFocus: (alreadyOpen?: ReadonlySet<HTMLElement>) => number;
+/** CRM bottom sheet for phone actions: fixed 56px header, rows scroll within 85dvh. */
+declare const BottomSheet: ({ open, title, onClose, children }: BottomSheetProps) => import("react/jsx-runtime").JSX.Element;
+export default BottomSheet;
+//# sourceMappingURL=BottomSheet.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/components/common/BottomSheet.tsx"],"names":[],"mappings":"AACA,OAAO,EAAqB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI1D,UAAU,gBAAgB;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,yEAAyE;AACzE,eAAO,MAAM,gBAAgB,+GACiF,CAAC;AAO/G;;;GAGG;AACH,eAAO,MAAM,iBAAiB,GAC5B,cAAa,WAAW,CAAC,WAAW,CAAa,WAW5C,CAAC;AAER,uFAAuF;AACvF,QAAA,MAAM,WAAW,GAAI,oCAAoC,gBAAgB,4CA0CxE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/common/BottomSheet.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { Drawer } from "antd";
+import GroupPanelHeader from "../../components/group/GroupPanelHeader";
+/** Row style for actions inside a BottomSheet: 48px minimum hit area. */
+export const BOTTOM_SHEET_ROW = "flex min-h-12 w-full items-center gap-3 rounded-lg px-3 text-left text-base text-gray-900 active:bg-gray-5";
+const visibleModalWraps = () => Array.from(document.querySelectorAll(".ant-modal-wrap")).filter((wrap) => wrap.style.display !== "none");
+/**
+ * After a sheet closes, rc-drawer refocuses its trigger; hand focus to a modal the sheet's
+ * action opened (one not in `alreadyOpen`), via a node rc-dialog makes focusable.
+ */
+export const restoreModalFocus = (alreadyOpen = new Set()) => window.setTimeout(() => {
+    var _a;
+    const wrap = visibleModalWraps()
+        .filter((candidate) => !alreadyOpen.has(candidate))
+        .pop();
+    if (!wrap || wrap.contains(document.activeElement))
+        return;
+    const target = (_a = wrap.querySelector('[role="dialog"] > [tabindex="0"]')) !== null && _a !== void 0 ? _a : wrap;
+    target.focus({ preventScroll: true });
+}, 0);
+/** CRM bottom sheet for phone actions: fixed 56px header, rows scroll within 85dvh. */
+const BottomSheet = ({ open, title, onClose, children }) => {
+    const modalsAtOpen = useRef(new Set());
+    useEffect(() => {
+        if (open)
+            modalsAtOpen.current = new Set(visibleModalWraps());
+    }, [open]);
+    return (_jsxs(Drawer, { open: open, "aria-label": title, onClose: onClose, afterOpenChange: (opened) => {
+            if (!opened)
+                restoreModalFocus(modalsAtOpen.current);
+        }, placement: "bottom", height: "auto", closeIcon: false, destroyOnHidden: true, styles: {
+            mask: { background: "rgba(57, 62, 64, 0.45)" },
+            wrapper: {
+                borderTopLeftRadius: 12,
+                borderTopRightRadius: 12,
+                overflow: "hidden",
+            },
+            content: { maxHeight: "min(85dvh, var(--dc-visual-height, 85dvh))" },
+            body: {
+                padding: 0,
+                display: "flex",
+                flexDirection: "column",
+                minHeight: 0,
+            },
+        }, children: [_jsx(GroupPanelHeader, { title: title, onClose: onClose }), _jsx("div", { "data-desk-shortcuts-off": true, className: "min-h-0 flex-1 overflow-y-auto px-2 pt-1 pb-[max(12px,env(safe-area-inset-bottom))]", children: children })] }));
+};
+export default BottomSheet;

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

@@ -1 +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"}
+{"version":3,"file":"DeskPanelDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/common/DeskPanelDrawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,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,4CA4CtB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/common/DeskPanelDrawer.js

@@ -1,21 +1,35 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Drawer } from "antd";
+import useDeskPanelHostStore from "../../store/deskPanelHost";
 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 }));
+const DeskPanelDrawer = ({ open, label, onClose, container, autoFocus = true, keyboard = true, children, }) => {
+    const isFullScreen = useDeskPanelHostStore((state) => state.isFullScreen);
+    return (_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: isFullScreen ? "100%" : LAYOUT_WIDTHS.infoDrawer, styles: {
+            mask: { background: "rgba(57, 62, 64, 0.16)" },
+            wrapper: isFullScreen
+                ? {
+                    top: 0,
+                    right: 0,
+                    bottom: 0,
+                    height: "auto",
+                    borderRadius: 0,
+                    overflow: "hidden",
+                    boxShadow: "none",
+                }
+                : {
+                    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.map

@@ -1 +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"}
+{"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,mDAmCpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/common/DeskSidePanel.js

@@ -16,7 +16,7 @@ const DeskSidePanel = ({ open, label, onClose, autoFocus, children, }) => {
             : 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 (_jsx(DeskPanelDrawer, { open: open, label: label, onClose: onClose, container: host.workspace, autoFocus: autoFocus, children: _jsx("div", { className: `h-full overflow-hidden bg-white ${host.isFullScreen ? "" : "rounded-xl"}`, children: children(false) }) }));
     }
     return null;
 };

package/dist/components/compose/ComposeNewMessageModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComposeNewMessageModal.d.ts","sourceRoot":"","sources":["../../../src/components/compose/ComposeNewMessageModal.tsx"],"names":[],"mappings":"AAmBA,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAID,QAAA,MAAM,sBAAsB,GAAI,oBAG7B,2BAA2B,4CAwO7B,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"ComposeNewMessageModal.d.ts","sourceRoot":"","sources":["../../../src/components/compose/ComposeNewMessageModal.tsx"],"names":[],"mappings":"AAmBA,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAID,QAAA,MAAM,sBAAsB,GAAI,oBAG7B,2BAA2B,4CA2O7B,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/dist/components/compose/ComposeNewMessageModal.js

@@ -14,7 +14,7 @@ import CreateGroupForm from "../../components/group/CreateGroupForm";
 import useAuthStore from "../../store/auth";
 import { StrokeIcon } from "../../components/icon/StrokeIcon";
 import TintedAvatar from "../../components/common/TintedAvatar";
-import { useChatNavigate } from "../../hooks/conversation/useChatNavigate";
+import { useDeskThreadNavigation } from "../../hooks/conversation/useDeskThreadNavigation";
 const ComposeNewMessageModal = ({ open, onClose, }) => {
     const { t } = useTranslation("conversation-inbox");
     const isCrm = useAuthStore((state) => state.isCrm);
@@ -24,7 +24,7 @@ const ComposeNewMessageModal = ({ open, onClose, }) => {
     const [openingUserID, setOpeningUserID] = useState(null);
     const debouncedSearch = useDebounce(search, { wait: 300 });
     const { accounts, isLoading } = useEligibleAccounts(debouncedSearch, open);
-    const onNavigate = useChatNavigate();
+    const { openThread } = useDeskThreadNavigation();
     const setConversationData = useConversationStore((state) => state.setConversationData);
     const setSelectedConversationId = useConversationStore((state) => state.setSelectedConversationId);
     const handleClose = () => {
@@ -53,7 +53,7 @@ const ComposeNewMessageModal = ({ open, onClose, }) => {
             newSearchParams.delete("userId");
             newSearchParams.delete("groupId");
             newSearchParams.delete("botId");
-            onNavigate(`${window.location.pathname}?${newSearchParams.toString()}`);
+            openThread({ threadId: conversation.conversationID }, `${window.location.pathname}?${newSearchParams.toString()}`);
             handleClose();
         }
         finally {

package/dist/components/conversation/ConversationByGroupItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConversationByGroupItem.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/ConversationByGroupItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAC7E,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,qCAAqC,CAAC;AAaxF,UAAU,4BAA4B;IACpC,KAAK,EAAE,4BAA4B,CAAC;IACpC,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,QAAA,MAAM,uBAAuB,GAAI,2BAG9B,4BAA4B,4CAoE9B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"ConversationByGroupItem.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/ConversationByGroupItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAC7E,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,qCAAqC,CAAC;AAaxF,UAAU,4BAA4B;IACpC,KAAK,EAAE,4BAA4B,CAAC;IACpC,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,QAAA,MAAM,uBAAuB,GAAI,2BAG9B,4BAA4B,4CA8D9B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/dist/components/conversation/ConversationByGroupItem.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 import useConversationStore from "../../store/conversation";
 import { useChatContext } from "../../context/ChatContext";
-import { useChatNavigate } from "../../hooks/conversation/useChatNavigate";
+import { useDeskThreadNavigation } from "../../hooks/conversation/useDeskThreadNavigation";
 import { parseLatestMessage } from "../../utils/common";
 import GroupCompositeAvatar from "../../components/group/GroupCompositeAvatar";
 import DeskConversationRow from "./DeskConversationRow";
@@ -15,7 +15,7 @@ import MentionIndicatorIcon from "./MentionIndicatorIcon";
 const ConversationByGroupItem = ({ group, latestPreview, }) => {
     const { t } = useTranslation();
     const { user } = useChatContext();
-    const onNavigate = useChatNavigate();
+    const { openFromList } = useDeskThreadNavigation();
     const setConversationData = useConversationStore((state) => state.setConversationData);
     const setSelectedConversationId = useConversationStore((state) => state.setSelectedConversationId);
     const isSelected = useConversationStore((state) => state.selectedConversationId === group.conversationId);
@@ -23,12 +23,7 @@ const ConversationByGroupItem = ({ group, latestPreview, }) => {
     const handleClick = () => {
         setConversationData(conversation);
         setSelectedConversationId(conversation.conversationID);
-        const newSearchParams = new URLSearchParams(window.location.search);
-        newSearchParams.set("threadId", conversation.conversationID);
-        newSearchParams.delete("userId");
-        newSearchParams.delete("groupId");
-        newSearchParams.delete("botId");
-        onNavigate(`${window.location.pathname}?${newSearchParams.toString()}`);
+        openFromList({ threadId: conversation.conversationID });
     };
     const latestMsg = (latestPreview === null || latestPreview === void 0 ? void 0 : latestPreview.latestMsg) || "";
     const latestMsgSendTime = (latestPreview === null || latestPreview === void 0 ? void 0 : latestPreview.latestMsgSendTime) || 0;

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

@@ -1 +1 @@
-{"version":3,"file":"ConversationBySessionItem.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/ConversationBySessionItem.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAE7E,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAQhD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAU1C,UAAU,8BAA8B;IACtC,WAAW,EAAE,gBAAgB,CAAC;IAC9B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,qFAAqF;IACrF,SAAS,CAAC,EAAE,UAAU,CAAC;CACxB;AAaD,QAAA,MAAM,yBAAyB,GAAI,4CAIhC,8BAA8B,mDAsGhC,CAAC;AAEF,eAAe,yBAAyB,CAAC"}
+{"version":3,"file":"ConversationBySessionItem.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/ConversationBySessionItem.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAE7E,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAQhD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAU1C,UAAU,8BAA8B;IACtC,WAAW,EAAE,gBAAgB,CAAC;IAC9B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,qFAAqF;IACrF,SAAS,CAAC,EAAE,UAAU,CAAC;CACxB;AAaD,QAAA,MAAM,yBAAyB,GAAI,4CAIhC,8BAA8B,mDAiGhC,CAAC;AAEF,eAAe,yBAAyB,CAAC"}

package/dist/components/conversation/ConversationBySessionItem.js

@@ -4,7 +4,7 @@ import { PeerType } from "../../types/conversation";
 import { useTranslation } from "react-i18next";
 import useConversationStore from "../../store/conversation";
 import { useChatContext } from "../../context/ChatContext";
-import { useChatNavigate } from "../../hooks/conversation/useChatNavigate";
+import { useDeskThreadNavigation } from "../../hooks/conversation/useDeskThreadNavigation";
 import { useConversationDisplayData } from "../../hooks/conversation/useConversation";
 import { isGroupSession } from "../../utils/imCommon";
 import { resolveBotSessionOwnerIdentity } from "../../utils/conversation";
@@ -29,7 +29,7 @@ const ConversationBySessionItem = ({ sessionItem, latestPreview, folderTag, }) =
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const { t } = useTranslation();
     const { user } = useChatContext();
-    const onNavigate = useChatNavigate();
+    const { openFromList } = useDeskThreadNavigation();
     const isSelected = useConversationStore((state) => {
         var _a;
         return state.selectedConversationId ===
@@ -40,12 +40,7 @@ const ConversationBySessionItem = ({ sessionItem, latestPreview, folderTag, }) =
     const setSelectedConversationId = useConversationStore((state) => state.setSelectedConversationId);
     const handleConversationClick = (conversation) => {
         setConversationData(conversation);
-        const newSearchParams = new URLSearchParams(window.location.search);
-        newSearchParams.set("threadId", conversation.conversationID);
-        newSearchParams.delete("userId");
-        newSearchParams.delete("groupId");
-        newSearchParams.delete("botId");
-        onNavigate(`${window.location.pathname}?${newSearchParams.toString()}`);
+        openFromList({ threadId: conversation.conversationID });
         setSelectedConversationId(conversation.conversationID);
     };
     const { avatar, displayName = "" } = useConversationDisplayData(conversation || null);

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

@@ -1,3 +1,6 @@
-declare const DeskConversationList: () => import("react/jsx-runtime").JSX.Element;
+interface DeskConversationListProps {
+    onOpenAppMenu?: (opener: HTMLElement | null) => void;
+}
+declare const DeskConversationList: ({ onOpenAppMenu }: DeskConversationListProps) => import("react/jsx-runtime").JSX.Element;
 export default DeskConversationList;
 //# sourceMappingURL=DeskConversationList.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DeskConversationList.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/DeskConversationList.tsx"],"names":[],"mappings":"AA+BA,QAAA,MAAM,oBAAoB,+CAgRzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"DeskConversationList.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/DeskConversationList.tsx"],"names":[],"mappings":"AA+BA,UAAU,yBAAyB;IACjC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CACtD;AAED,QAAA,MAAM,oBAAoB,GAAI,mBAAmB,yBAAyB,4CAiRzE,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/components/conversation/DeskConversationList.js

@@ -27,7 +27,7 @@ import DeskListSkeleton from "./DeskListSkeleton";
 import { getListHeading } from "./listHeading";
 import ComposeNewMessageModal from "../../components/compose/ComposeNewMessageModal";
 import { useCloseOnSidePanelOpen } from "../../hooks/common/useCloseOnSidePanelOpen";
-const DeskConversationList = () => {
+const DeskConversationList = ({ onOpenAppMenu }) => {
     const searchInputRef = useRef(null);
     const { t } = useTranslation();
     const [search, setSearch] = useState("");
@@ -150,7 +150,7 @@ const DeskConversationList = () => {
                     if (!showSearch && value)
                         setShowSearchTrue();
                     setSearch(value);
-                }, onSearchFocus: onSearchFocus, onCloseSearch: onCloseSearch, onCompose: () => setIsComposeOpen(true) }), _jsxs("div", { className: "relative flex-1 min-h-0", children: [_jsx("div", { id: "scrollableConversationsDiv", "aria-busy": isListLoading, style: {
+                }, onSearchFocus: onSearchFocus, onCloseSearch: onCloseSearch, onCompose: () => setIsComposeOpen(true), onOpenAppMenu: onOpenAppMenu }), _jsxs("div", { className: "relative flex-1 min-h-0", children: [_jsx("div", { id: "scrollableConversationsDiv", "aria-busy": isListLoading, style: {
                             height: "100%",
                             overflow: showSearch ? "hidden" : "auto",
                         }, children: isAllGroupsView ? (isConversationGroupsLoading ? (_jsx(DeskListSkeleton, { rows: 8 })) : !(conversationGroups === null || conversationGroups === void 0 ? void 0 : conversationGroups.length) ? (_jsx(DeskListEmptyState, { filterKey: emptyFilterKey })) : (_jsx(InfiniteScroll, { dataLength: conversationGroups.length, next: fetchNextGroupsPage, hasMore: !!hasNextGroupsPage, loader: _jsx(DeskListSkeleton, { rows: 2 }), scrollableTarget: "scrollableConversationsDiv", children: _jsx("div", { className: "flex flex-col gap-0.5 px-1 pb-2", children: conversationGroups.map((group) => (_jsx(ConversationByGroupItem, { group: group, latestPreview: groupLatestPreviewMap.get(group.conversationId) }, group.groupId))) }) }))) : isSessionsLoading || (isSyncing && !(sessions === null || sessions === void 0 ? void 0 : sessions.length)) ? (

package/dist/components/conversation/DeskListHeader.d.ts

@@ -7,6 +7,8 @@ interface DeskListHeaderProps {
     onSearchFocus: () => void;
     onCloseSearch: () => void;
     onCompose: () => void;
+    /** Phone only: ☰ that opens the host app menu. */
+    onOpenAppMenu?: (opener: HTMLElement | null) => void;
 }
 /** Search row plus a title that names the folder the list below is built from. */
 declare const DeskListHeader: import("react").ForwardRefExoticComponent<DeskListHeaderProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/conversation/DeskListHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DeskListHeader.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/DeskListHeader.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjD,UAAU,mBAAmB;IAC3B,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,kFAAkF;AAClF,QAAA,MAAM,cAAc,kHAkJnB,CAAC;AAGF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"DeskListHeader.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/DeskListHeader.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjD,UAAU,mBAAmB;IAC3B,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,kDAAkD;IAClD,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CACtD;AAED,kFAAkF;AAClF,QAAA,MAAM,cAAc,kHA8JnB,CAAC;AAGF,eAAe,cAAc,CAAC"}

package/dist/components/conversation/DeskListHeader.js

@@ -9,7 +9,7 @@ import useWorkspaceLayoutStore from "../../store/workspaceLayout";
 import useShortcutPrefsStore from "../../store/shortcutPrefs";
 import { LAYOUT_BREAKPOINTS } from "../../constants/layout";
 /** Search row plus a title that names the folder the list below is built from. */
-const DeskListHeader = forwardRef(({ heading, search, isSearching, onSearchChange, onSearchFocus, onCloseSearch, onCompose, }, inputRef) => {
+const DeskListHeader = forwardRef(({ heading, search, isSearching, onSearchChange, onSearchFocus, onCloseSearch, onCompose, onOpenAppMenu, }, inputRef) => {
     var _a, _b;
     const { t } = useTranslation();
     const [isFocused, setIsFocused] = useState(false);
@@ -18,7 +18,7 @@ const DeskListHeader = forwardRef(({ heading, search, isSearching, onSearchChang
     const singleKeyEnabled = useShortcutPrefsStore((s) => s.singleKeyEnabled);
     const context = (_a = heading.contextText) !== null && _a !== void 0 ? _a : t((_b = heading.contextKey) !== null && _b !== void 0 ? _b : "my_messages");
     const showSlashHint = singleKeyEnabled && !isFocused && !search && !isSearching;
-    return (_jsxs("div", { "data-cp-name": "DeskListHeader", children: [_jsxs("div", { className: "flex items-center gap-2 p-3", children: [!isFolderInline && (_jsx(Tooltip, { title: t("folder_panel_open"), children: _jsx(Button, { onClick: () => setFolderOverlayOpen(true), className: "flex h-9 w-9 shrink-0 items-center justify-center border-0 bg-gray-5 p-0 text-gray-900", "aria-label": t("folder_panel_open"), children: _jsx(StrokeIcon, { name: "panel-left", size: 20 }) }) })), _jsx("label", { htmlFor: "desk-list-search", className: "sr-only", children: t("search_conversation_label") }), _jsxs("div", { className: "flex h-9 min-w-0 flex-1 items-center gap-2 rounded-lg bg-gray-5 pl-2.5 pr-2 text-gray-600 focus-within:ring-2 focus-within:ring-primary-200", children: [_jsx(StrokeIcon, { name: "search", size: 18 }), _jsx("input", { id: "desk-list-search", ref: inputRef, type: "text", "data-desk-search": true, autoComplete: "off", 
+    return (_jsxs("div", { "data-cp-name": "DeskListHeader", children: [_jsxs("div", { className: "flex items-center gap-2 p-3", children: [onOpenAppMenu && (_jsx("button", { type: "button", "data-app-menu-button": true, onClick: (event) => onOpenAppMenu(event.currentTarget), className: "hidden phone:flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border-0 bg-transparent p-0 text-gray-900 touch:min-h-10 touch:min-w-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-200", "aria-label": t("app_menu_open"), children: _jsx(StrokeIcon, { name: "menu", size: 20 }) })), !isFolderInline && (_jsx(Tooltip, { title: t("folder_panel_open"), children: _jsx(Button, { onClick: () => setFolderOverlayOpen(true), className: "flex h-9 w-9 shrink-0 items-center justify-center border-0 bg-gray-5 p-0 text-gray-900 max-lg:!hidden", "aria-label": t("folder_panel_open"), children: _jsx(StrokeIcon, { name: "panel-left", size: 20 }) }) })), _jsx("label", { htmlFor: "desk-list-search", className: "sr-only", children: t("search_conversation_label") }), _jsxs("div", { className: "flex h-9 min-w-0 flex-1 items-center gap-2 rounded-lg bg-gray-5 pl-2.5 pr-2 text-gray-600 focus-within:ring-2 focus-within:ring-primary-200", children: [_jsx(StrokeIcon, { name: "search", size: 18 }), _jsx("input", { id: "desk-list-search", ref: inputRef, type: "text", "data-desk-search": true, autoComplete: "off", 
                                 // The narrow list (folder toggle shown) has no room for the long hint.
                                 placeholder: t(isFolderInline ? "desk_search_placeholder" : "search_conversation_label"), value: search, onChange: (e) => onSearchChange(e.target.value), onFocus: () => {
                                     setIsFocused(true);
@@ -33,7 +33,7 @@ const DeskListHeader = forwardRef(({ heading, search, isSearching, onSearchChang
                                         e.stopPropagation();
                                         onCloseSearch();
                                     }
-                                }, className: "min-w-0 flex-1 border-0 bg-transparent p-0 text-sm text-gray-900 outline-none placeholder:text-gray-600" }), search && (_jsx("button", { type: "button", "aria-label": t("clear"), onClick: onCloseSearch, className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-gray-600 hover:text-gray-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-200", children: _jsx(StrokeIcon, { name: "x", size: 14 }) })), showSlashHint && (_jsx("kbd", { "aria-hidden": "true", 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: "/" }))] }), isSearching ? (_jsx(Tooltip, { title: t("close"), children: _jsx(Button, { onClick: onCloseSearch, "aria-label": t("close"), className: "h-9 w-9 shrink-0 p-0 text-gray-600", children: _jsx(StrokeIcon, { name: "x", size: 20 }) }) })) : (_jsx(Tooltip, { title: t("compose_new_message"), children: _jsx(Button, { "data-testid": "conversation-list-compose-icon", onClick: onCompose, "aria-label": t("compose_new_message"), className: "flex !h-8 !w-8 shrink-0 items-center justify-center rounded-lg border-0 bg-primary-25 p-0 text-primary-500", children: _jsx(StrokeIcon, { name: "edit", size: 18 }) }) }))] }), !isSearching && (_jsxs("div", { className: "flex flex-col gap-0.5 border-b border-gray-25 px-4 pb-3 pt-1", children: [isFolderInline ? (_jsx("span", { className: "truncate text-xs font-medium text-gray-600", children: context })) : (_jsxs("button", { type: "button", "aria-label": `${t("folder_panel_open")}: ${context}`, onClick: () => setFolderOverlayOpen(true), className: "flex min-w-0 items-center gap-1 self-start rounded border-0 bg-transparent p-0 text-xs font-medium leading-[1.4] text-gray-600 hover:text-gray-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-200", children: [_jsx("span", { className: "truncate", children: context }), _jsx(StrokeIcon, { name: "chevron-down", size: 14 })] })), _jsxs("h2", { className: "m-0 flex min-w-0 items-center gap-2 text-lg font-bold text-gray-900", children: [_jsx("span", { className: "truncate", children: t(heading.titleKey) }), " ", !!heading.count && (_jsx("span", { className: "inline-flex h-6 shrink-0 items-center rounded-full bg-primary-25 px-2 text-sm font-semibold tabular-nums text-primary-500", children: heading.count }))] })] }))] }));
+                                }, className: "min-w-0 flex-1 border-0 bg-transparent p-0 text-sm text-gray-900 outline-none placeholder:text-gray-600" }), search && (_jsx("button", { type: "button", "aria-label": t("clear"), onClick: onCloseSearch, className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-gray-600 hover:text-gray-900 touch:min-h-8 touch:min-w-8 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-200", children: _jsx(StrokeIcon, { name: "x", size: 14 }) })), showSlashHint && (_jsx("kbd", { "aria-hidden": "true", className: "touch:hidden 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: "/" }))] }), isSearching ? (_jsx(Tooltip, { title: t("close"), children: _jsx(Button, { onClick: onCloseSearch, "aria-label": t("close"), className: "h-9 w-9 shrink-0 p-0 text-gray-600 touch:min-h-10 touch:min-w-10", children: _jsx(StrokeIcon, { name: "x", size: 20 }) }) })) : (_jsx(Tooltip, { title: t("compose_new_message"), children: _jsx(Button, { "data-testid": "conversation-list-compose-icon", onClick: onCompose, "aria-label": t("compose_new_message"), className: "flex !h-8 !w-8 shrink-0 items-center justify-center rounded-lg border-0 bg-primary-25 p-0 text-primary-500 touch:!min-h-10 touch:!min-w-10", children: _jsx(StrokeIcon, { name: "edit", size: 18 }) }) }))] }), !isSearching && (_jsxs("div", { className: "flex flex-col gap-0.5 border-b border-gray-25 px-4 pb-3 pt-1", children: [isFolderInline ? (_jsx("span", { className: "truncate text-xs font-medium text-gray-600", children: context })) : (_jsxs("button", { type: "button", "aria-label": `${t("folder_panel_open")}: ${context}`, onClick: () => setFolderOverlayOpen(true), className: "flex min-w-0 items-center gap-1 self-start rounded border-0 bg-transparent p-0 touch:-my-3 touch:py-3 text-xs font-medium leading-[1.4] text-gray-600 hover:text-gray-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-200", children: [_jsx("span", { className: "truncate", children: context }), _jsx(StrokeIcon, { name: "chevron-down", size: 14 })] })), _jsxs("h2", { className: "m-0 flex min-w-0 items-center gap-2 text-lg font-bold text-gray-900", children: [_jsx("span", { className: "truncate", children: t(heading.titleKey) }), " ", !!heading.count && (_jsx("span", { className: "inline-flex h-6 shrink-0 items-center rounded-full bg-primary-25 px-2 text-sm font-semibold tabular-nums text-primary-500", children: heading.count }))] })] }))] }));
 });
 DeskListHeader.displayName = "DeskListHeader";
 export default DeskListHeader;

package/dist/components/conversation-detail/ConversationMessageList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConversationMessageList.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/ConversationMessageList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAiCf,MAAM,WAAW,4BAA4B;IAC3C,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1E,kGAAkG;IAClG,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;CACrC;AAED,QAAA,MAAM,uBAAuB,GAAI,4DAI9B,4BAA4B,4CAoS9B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"ConversationMessageList.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-detail/ConversationMessageList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAiCf,MAAM,WAAW,4BAA4B;IAC3C,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1E,kGAAkG;IAClG,sBAAsB,CAAC,EAAE,MAAM,IAAI,CAAC;CACrC;AAED,QAAA,MAAM,uBAAuB,GAAI,4DAI9B,4BAA4B,4CAsS9B,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/dist/components/conversation-detail/ConversationMessageList.js

@@ -158,7 +158,7 @@ const ConversationMessageList = ({ bottomSlot, onCopyMessageLink, onSearchMessag
         target: scrollRef,
         enable: !!openToolboxMessageId,
     });
-    return (_jsxs("div", { "data-testid": "conversation-message-list", "data-cp-name": "ConversationMessageList", className: "relative flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden bg-white", children: [isMessageLoading ? (_jsx("div", { className: "flex flex-1 items-center justify-center py-12", children: _jsx(Spin, {}) })) : (_jsxs(MessageInfiniteScroll, { scrollRef: scrollRef, scrollableTargetId: "scrollableConversationMessagesDiv", loadState: loadState, moreOldLoading: moreOldLoading, onLoadMoreOld: loadMoreOldMessage, onScroll: handleInfiniteScroll, containerClassName: "h-full", empty: _jsx("div", { className: "flex flex-1 items-center justify-center py-12", children: _jsx(Empty, { description: t("empty.no_messages") }) }), children: [_jsx("div", { "aria-hidden": "true", className: "h-3 shrink-0" }), bottomSlot, _jsx(ConsultantCtaContext.Provider, { value: consultantCta, children: loadState.messageList.map((message, index, array) => (_jsx(MessageItem, { message: message, allMessages: array, isGroupChat: isGroupChat, forceHideTip: index === 0 && !!bottomSlot, contextMenuOpen: openToolboxMessageId === message.clientMsgID, onContextMenuOpenChange: (open) => setOpenToolboxMessageId(open ? message.clientMsgID : null), onQuoteMessage: setQuotedMessage, onRevokeMessage: handleRevokeMessage, timeRevealed: revealedTimeMsgId === message.clientMsgID, onToggleTimeReveal: handleToggleTimeReveal, onPressQuoteMessage: onPressQuoteMessage, onPinMessage: canPinMessage ? handlePinMessage : undefined, onUnpinMessage: canPinMessage ? handleUnpinMessage : undefined, onCopyMessageLink: handleCopyMessageLink, showUnreadDivider: !!unreadDividerMessageId &&
+    return (_jsxs("div", { "data-testid": "conversation-message-list", "data-cp-name": "ConversationMessageList", className: "relative flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden bg-white", children: [isMessageLoading ? (_jsx("div", { className: "flex flex-1 items-center justify-center py-12", children: _jsx(Spin, {}) })) : (_jsxs(MessageInfiniteScroll, { scrollRef: scrollRef, scrollableTargetId: "scrollableConversationMessagesDiv", loadState: loadState, moreOldLoading: moreOldLoading, onLoadMoreOld: loadMoreOldMessage, onScroll: handleInfiniteScroll, containerClassName: "h-full", empty: _jsx("div", { className: "flex flex-1 items-center justify-center py-12", children: _jsx(Empty, { description: t("empty.no_messages") }) }), children: [_jsx("div", { "aria-hidden": "true", className: "h-3 shrink-0" }), bottomSlot, _jsx(ConsultantCtaContext.Provider, { value: consultantCta, children: loadState.messageList.map((message, index, array) => (_jsx(MessageItem, { message: message, allMessages: array, isGroupChat: isGroupChat, forceHideTip: index === 0 && !!bottomSlot, contextMenuOpen: openToolboxMessageId === message.clientMsgID, onContextMenuOpenChange: (open) => setOpenToolboxMessageId(open ? message.clientMsgID : null), onQuoteMessage: setQuotedMessage, onRevokeMessage: handleRevokeMessage, timeRevealed: revealedTimeMsgId === message.clientMsgID, onToggleTimeReveal: handleToggleTimeReveal, onPressQuoteMessage: onPressQuoteMessage, onPinMessage: canPinMessage ? handlePinMessage : undefined, onUnpinMessage: canPinMessage ? handleUnpinMessage : undefined, onCopyMessageLink: onCopyMessageLink ? handleCopyMessageLink : undefined, showUnreadDivider: !!unreadDividerMessageId &&
                                 message.clientMsgID === unreadDividerMessageId, onUnreadDividerSeen: markDividerSeen, enableLongPress: true }, message.clientMsgID))) })] })), !isMessageLoading && showJumpButton && (_jsx(UnreadMessageJumpButton, { className: "absolute right-0 top-4 z-10", onClick: handleJumpToFirstUnread })), _jsx(PinLimitModal, { open: pinLimitModalOpen, max: pinnedTotalCount, onClose: () => setPinLimitModalOpen(false) })] }));
 };
 export default ConversationMessageList;

package/dist/components/conversation-inbox/ConversationInboxList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConversationInboxList.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-inbox/ConversationInboxList.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAMjE,MAAM,WAAW,0BAA0B;IACzC,KAAK,EAAE,oBAAoB,EAAE,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;CACvD;AAYD,QAAA,MAAM,qBAAqB,GAAI,oFAO5B,0BAA0B,4CAkF5B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"ConversationInboxList.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-inbox/ConversationInboxList.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAYjE,MAAM,WAAW,0BAA0B;IACzC,KAAK,EAAE,oBAAoB,EAAE,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;CACvD;AAYD,QAAA,MAAM,qBAAqB,GAAI,oFAO5B,0BAA0B,4CA8F5B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/components/conversation-inbox/ConversationInboxList.js

@@ -1,16 +1,23 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
-import { Empty, Spin } from "antd";
+import { Empty } from "antd";
 import InfiniteScroll from "react-infinite-scroll-component";
 import useConversationStore from "../../store/conversation";
 import { useChatNavigate } from "../../hooks/conversation/useChatNavigate";
 import { Icon } from "../../components/icon";
+import useBootStore from "../../store/boot";
+import { useChatBootPhase } from "../../hooks/init/useChatBootPhase";
 import ConversationInboxItem from "./ConversationInboxItem";
+import InboxBootStatus from "./InboxBootStatus";
+import InboxListSkeleton from "./InboxListSkeleton";
+const INBOX_SLOW_AFTER_MS = 8000;
 const FooterSkeleton = () => (_jsxs("div", { className: "flex items-center gap-3 p-3", children: [_jsx("div", { className: "h-10 w-10 animate-pulse rounded-full bg-neutral-200" }), _jsxs("div", { className: "flex flex-1 flex-col gap-2", children: [_jsx("div", { className: "h-3 w-1/2 animate-pulse rounded bg-neutral-200" }), _jsx("div", { className: "h-2.5 w-1/3 animate-pulse rounded bg-neutral-200" })] })] }));
 const ConversationInboxList = ({ items, isLoading, isFetchingNextPage, hasNextPage, onLoadMore, onSelectThread, }) => {
     const { t } = useTranslation("conversation-inbox");
     const onNavigate = useChatNavigate();
+    const boot = useChatBootPhase({ slowAfterMs: INBOX_SLOW_AFTER_MS });
+    const isListSettled = useBootStore((state) => state.isListSettled);
     const setConversationData = useConversationStore((state) => state.setConversationData);
     const setSelectedConversationId = useConversationStore((state) => state.setSelectedConversationId);
     const handleSelectThread = (item) => {
@@ -29,8 +36,10 @@ const ConversationInboxList = ({ items, isLoading, isFetchingNextPage, hasNextPa
             onLoadMore();
         }
     };
-    if (isLoading) {
-        return (_jsx("div", { "data-testid": "conversation-inbox-thread-list", className: "flex flex-1 items-center justify-center py-12", children: _jsx(Spin, {}) }));
+    // Until the list has loaded once after the first sync, an empty list means "not loaded yet".
+    if (items.length === 0 && (!isListSettled || isLoading)) {
+        return (_jsxs("div", { "data-testid": "conversation-inbox-thread-list", className: "min-h-0 w-full flex-1 overflow-hidden", children: [!isListSettled && (_jsx(InboxBootStatus, { boot: boot.phase === "ready"
+                        ? Object.assign(Object.assign({}, boot), { phase: "sync", syncProgress: 100 }) : boot })), boot.phase !== "error" && _jsx(InboxListSkeleton, { rows: 6 })] }));
     }
     return (_jsx("div", { id: "scrollableConversationThreadsDiv", "data-testid": "conversation-inbox-thread-list", "data-cp-name": "ConversationInboxList", className: "min-h-0 w-full flex-1 overflow-auto", children: _jsx(InfiniteScroll, { dataLength: items.length, next: handleEndReached, hasMore: hasNextPage, loader: isFetchingNextPage ? _jsx(FooterSkeleton, {}) : null, scrollableTarget: "scrollableConversationThreadsDiv", children: items.length === 0 ? (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Empty, { image: _jsx("div", { className: "flex justify-center", children: _jsx(Icon, { icon: "chat-square-b", size: 80, className: "text-[var(--dc-color-primary-light)]" }) }), description: t("empty.no_conversations") }) })) : (items.map((item) => (_jsx(ConversationInboxItem, { item: item, onClick: handleSelectThread }, item.conversationID)))) }) }));
 };

package/dist/components/conversation-inbox/InboxBootStatus.d.ts

@@ -0,0 +1,10 @@
+import type { ChatBootState } from "../../hooks/init/useChatBootPhase";
+/**
+ * "Đang tải tin nhắn" block shown above the inbox skeleton until the list first loads.
+ * Three bars, one per boot step; no percentage text (PO decision for end-customer apps).
+ */
+declare const InboxBootStatus: ({ boot }: {
+    boot: ChatBootState;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default InboxBootStatus;
+//# sourceMappingURL=InboxBootStatus.d.ts.map

package/dist/components/conversation-inbox/InboxBootStatus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InboxBootStatus.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-inbox/InboxBootStatus.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAyCnE;;;GAGG;AACH,QAAA,MAAM,eAAe,GAAI,UAAU;IAAE,IAAI,EAAE,aAAa,CAAA;CAAE,mDAmDzD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/conversation-inbox/InboxBootStatus.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Button } from "antd";
+import { useTranslation } from "react-i18next";
+import BootProgressBar from "../../components/boot/BootProgressBar";
+const SEGMENTS = ["engine", "connect", "sync"];
+const DOT_DELAYS = ["0ms", "160ms", "320ms"];
+const segmentMode = (segment, boot) => {
+    const current = SEGMENTS.indexOf(boot.phase);
+    const index = SEGMENTS.indexOf(segment);
+    if (index < current)
+        return "complete";
+    if (index > current)
+        return "pending";
+    // Core only reports sync progress on a fresh device; otherwise the last bar just runs.
+    return segment === "sync" && boot.syncProgress > 0 ? "progress" : "indeterminate";
+};
+/** Chat bubble with the "typing" dots while loading, or a "!" when loading failed. */
+const TypingBubble = ({ isError }) => (_jsxs("div", { "aria-hidden": "true", className: clsx("relative mb-2 flex h-[50px] w-16 items-center justify-center gap-1.5 rounded-2xl", isError ? "bg-danger-25" : "bg-[var(--dc-color-primary-light)]"), children: [_jsx("span", { className: "absolute -bottom-1.5 left-3 h-3.5 w-3.5 rotate-45 rounded-sm bg-inherit" }), isError ? (_jsx("span", { className: "relative text-xl font-bold leading-none text-danger-500", children: "!" })) : (DOT_DELAYS.map((delay) => (_jsx("span", { className: "relative h-2 w-2 rounded-full bg-[var(--dc-color-primary)] motion-safe:animate-[dchat-boot-typing_1.2s_ease-in-out_infinite]", style: { animationDelay: delay } }, delay))))] }));
+/**
+ * "Đang tải tin nhắn" block shown above the inbox skeleton until the list first loads.
+ * Three bars, one per boot step; no percentage text (PO decision for end-customer apps).
+ */
+const InboxBootStatus = ({ boot }) => {
+    const { t } = useTranslation("boot");
+    if (boot.phase === "ready")
+        return null;
+    const isError = boot.phase === "error";
+    const title = isError ? t("inbox.error_title") : t("inbox.title");
+    const detail = isError ? t("inbox.error_hint") : t(`inbox.${boot.phase}`);
+    return (_jsxs("div", { "data-cp-name": "InboxBootStatus", "data-phase": boot.phase, className: clsx("flex flex-col items-center gap-2 px-6 pb-4 pt-7 text-center transition-opacity duration-200", !boot.isStatusVisible && "opacity-0"), children: [_jsx("p", { role: "status", "aria-live": "polite", className: "sr-only", children: boot.isStatusVisible ? `${title}. ${detail}` : "" }), _jsx(TypingBubble, { isError: isError }), _jsx("p", { "aria-hidden": "true", className: "text-base font-semibold text-gray-900", children: title }), _jsx("p", { "aria-hidden": "true", className: "min-h-[1.5em] text-sm text-gray-500", children: detail }), isError ? (_jsx(Button, { type: "primary", className: "mt-2", onClick: () => window.location.reload(), children: t("retry") })) : (_jsx("div", { className: "mt-1 flex w-[168px] max-w-full gap-1", children: SEGMENTS.map((segment) => (_jsx(BootProgressBar, { className: "flex-1", mode: segmentMode(segment, boot), value: boot.syncProgress, label: t("sync_progress_label") }, segment))) })), boot.isSlow && !isError && (_jsx("p", { className: "mt-1.5 rounded-lg bg-warning-25 px-3 py-2 text-[13px] leading-normal text-warning-900", children: t("inbox.slow") }))] }));
+};
+export default InboxBootStatus;

package/dist/components/conversation-inbox/InboxListSkeleton.d.ts

@@ -0,0 +1,6 @@
+/** Placeholder rows shaped like the inbox ThreadCard, shown until the list has loaded once. */
+declare const InboxListSkeleton: ({ rows }: {
+    rows: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export default InboxListSkeleton;
+//# sourceMappingURL=InboxListSkeleton.d.ts.map

package/dist/components/conversation-inbox/InboxListSkeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InboxListSkeleton.d.ts","sourceRoot":"","sources":["../../../src/components/conversation-inbox/InboxListSkeleton.tsx"],"names":[],"mappings":"AAOA,+FAA+F;AAC/F,QAAA,MAAM,iBAAiB,GAAI,UAAU;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,4CAyBpD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/conversation-inbox/InboxListSkeleton.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+const TITLE_WIDTHS = ["w-2/5", "w-1/2", "w-1/3"];
+const PREVIEW_WIDTHS = ["w-4/5", "w-3/5", "w-2/3"];
+/** Placeholder rows shaped like the inbox ThreadCard, shown until the list has loaded once. */
+const InboxListSkeleton = ({ rows }) => (_jsx("div", { "aria-hidden": "true", "data-testid": "inbox-list-skeleton", children: Array.from({ length: rows }, (_, index) => (_jsxs("div", { className: "flex items-start gap-2 border-b border-gray-25 p-3", children: [_jsx("span", { className: "h-12 w-12 shrink-0 rounded-full bg-neutral-200 motion-safe:animate-pulse" }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-2 pt-1", children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: clsx("h-3.5 rounded bg-neutral-200 motion-safe:animate-pulse", TITLE_WIDTHS[index % TITLE_WIDTHS.length]) }), _jsx("span", { className: "ml-auto h-3 w-9 rounded bg-neutral-200 motion-safe:animate-pulse" })] }), _jsx("span", { className: clsx("h-3 rounded bg-neutral-200 motion-safe:animate-pulse", PREVIEW_WIDTHS[index % PREVIEW_WIDTHS.length]) })] })] }, index))) }));
+export default InboxListSkeleton;

package/dist/components/group/GroupPanelHeader.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 import { CrmIcon as Icon } from "../../components/group/crmIcon";
-const ICON_BUTTON = "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-gray-600 hover:bg-gray-5 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-200";
+const ICON_BUTTON = "flex h-8 w-8 touch:min-h-10 touch:min-w-10 shrink-0 items-center justify-center rounded-lg text-gray-600 hover:bg-gray-5 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-200";
 /** CRM side-panel header: 56px bar with an optional back button and a close button. */
 const GroupPanelHeader = ({ title, onClose, onBack, backLabel, }) => {
     const { t } = useTranslation();