@droppii-org/chat-sdk 0.6.56 → 0.7.1

package/dist/components/thread/SingleThreadInfo.js

@@ -1,25 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { Avatar, Switch, message } from "antd";
+import { Switch, message } from "antd";
 import ConfirmModal from "../../components/common/ConfirmModal";
 import { useTranslation } from "react-i18next";
 import { MessageReceiveOptType } from "@droppii-org/wasm-client-sdk";
-import { Icon } from "../../components/icon";
+import { StrokeIcon } from "../../components/icon/StrokeIcon";
+import TintedAvatar from "../../components/common/TintedAvatar";
 import useConversationStore from "../../store/conversation";
 import { useConversationDisplayData } from "../../hooks/conversation/useConversation";
 import { useIsUserBlocked, useBlockUser } from "../../hooks/session/useBlockUser";
 import { useDeleteConversation } from "../../hooks/session/useDeleteConversation";
 import { useToggleConversationNotification } from "../../hooks/session/useToggleConversationNotification";
-import { PeerType } from "../../types/conversation";
+import ThreadInfoHeader from "./ThreadInfoHeader";
+import { splitDisplayName } from "../../components/conversation/rowDisplayName";
+import { useBotSessionOwnerIdentity } from "../../hooks/session/useBotSessionOwnerIdentity";
 const SingleThreadInfo = ({ onClose }) => {
     var _a;
     const { t } = useTranslation();
     const conversationData = useConversationStore((state) => state.conversationData);
-    const { avatar, displayName } = useConversationDisplayData(conversationData);
+    const conversationDisplay = useConversationDisplayData(conversationData);
+    // A support thread is about its customer, as in the chat header, not the bot group.
+    const { identity: ownerIdentity } = useBotSessionOwnerIdentity(conversationData);
+    const displayName = (_a = ownerIdentity === null || ownerIdentity === void 0 ? void 0 : ownerIdentity.displayName) !== null && _a !== void 0 ? _a : conversationDisplay.displayName;
+    const avatar = ownerIdentity ? ownerIdentity.avatarUrl : conversationDisplay.avatar;
     const conversationID = (conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationID) || "";
     const peerUserID = (conversationData === null || conversationData === void 0 ? void 0 : conversationData.userID) || "";
-    const isBot = (conversationData === null || conversationData === void 0 ? void 0 : conversationData.peerType) === PeerType.BOT;
     const [confirmDelete, setConfirmDelete] = useState(false);
+    const [confirmBlock, setConfirmBlock] = useState(false);
     const [notifyEnabled, setNotifyEnabled] = useState((conversationData === null || conversationData === void 0 ? void 0 : conversationData.recvMsgOpt) !== MessageReceiveOptType.NotNotify);
     const { isBlocked } = useIsUserBlocked(peerUserID);
     const { mutate: toggleBlock, isPending: isTogglingBlock } = useBlockUser();
@@ -38,6 +45,7 @@ const SingleThreadInfo = ({ onClose }) => {
         });
     };
     const handleToggleBlock = () => {
+        setConfirmBlock(false);
         if (!peerUserID)
             return;
         toggleBlock({ userID: peerUserID, block: !isBlocked }, {
@@ -66,6 +74,8 @@ const SingleThreadInfo = ({ onClose }) => {
     if (!conversationID) {
         return null;
     }
-    return (_jsxs("div", { className: "h-full w-[330px] bg-white shadow-md flex flex-col relative", "data-cp-name": "SingleThreadInfo", children: [_jsxs("div", { className: "flex items-center justify-between px-4 py-4 border-b border-gray-100", children: [_jsx("span", { className: "text-lg font-medium", children: t("thread_info_title") }), _jsx("button", { type: "button", className: "flex items-center justify-center w-8 h-8 rounded-full text-gray-500 hover:bg-gray-100", onClick: onClose, children: _jsx(Icon, { icon: "close-o", size: 20 }) })] }), _jsxs("div", { className: "flex-1 overflow-y-auto", children: [_jsxs("div", { className: "flex items-center gap-3 px-4 py-4", children: [_jsx(Avatar, { src: avatar, size: 56, className: "shrink-0", children: ((_a = displayName === null || displayName === void 0 ? void 0 : displayName.charAt) === null || _a === void 0 ? void 0 : _a.call(displayName, 0)) || "A" }), _jsxs("div", { className: "flex-1 min-w-0 flex items-center gap-2", children: [_jsx("p", { className: "text-base font-medium truncate", children: displayName }), isBot && (_jsx("span", { className: "shrink-0 rounded px-1.5 py-0.5 text-xs font-semibold bg-orange-50 text-orange-500", children: t("bot_tag") }))] })] }), _jsx("div", { className: "bg-[#f5f5f5] mx-4 rounded-lg overflow-hidden", children: _jsxs("div", { className: "flex items-center justify-between px-3 py-3", children: [_jsxs("span", { className: "flex items-center gap-3 text-sm", children: [_jsx(Icon, { icon: "bell-o", size: 18 }), t("notification")] }), _jsx(Switch, { checked: notifyEnabled, onChange: handleToggleNotification, loading: isTogglingNotification })] }) }), _jsx("div", { className: "bg-[#f5f5f5] mx-4 mt-3 rounded-lg overflow-hidden", children: _jsxs("button", { type: "button", className: "flex items-center gap-3 px-3 py-3 text-left text-sm w-full", onClick: handleToggleBlock, disabled: isTogglingBlock, children: [_jsx(Icon, { icon: "user-del-o", size: 18 }), t(isBlocked ? "unblock_user" : "block_user")] }) }), _jsx("div", { className: "flex flex-col gap-1 bg-[#f5f5f5] mx-4 mt-3 rounded-lg overflow-hidden", children: _jsxs("button", { type: "button", className: "flex items-center gap-3 px-3 py-3 text-left text-sm text-red-500", onClick: () => setConfirmDelete(true), children: [_jsx(Icon, { icon: "trash-o", size: 18 }), t("delete_conversation")] }) })] }), _jsx(ConfirmModal, { open: confirmDelete, onOk: handleConfirmDelete, onCancel: () => setConfirmDelete(false), title: t("delete_conversation_confirm_title"), okText: t("delete_conversation"), cancelText: t("cancel"), okType: "danger", confirmLoading: isDeleting, children: _jsx("p", { children: t("delete_conversation_confirm_message") }) })] }));
+    return (_jsxs("div", { className: "h-full w-full bg-white flex flex-col relative", "data-cp-name": "SingleThreadInfo", children: [_jsx(ThreadInfoHeader, { onClose: onClose }), _jsxs("div", { className: "flex-1 overflow-y-auto", children: [_jsxs("div", { className: "flex items-center gap-3 px-4 py-4", children: [_jsx(TintedAvatar, { name: splitDisplayName(displayName !== null && displayName !== void 0 ? displayName : "").name, src: avatar, size: 48 }), _jsx("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: _jsx("p", { className: "text-base font-semibold truncate", children: splitDisplayName(displayName !== null && displayName !== void 0 ? displayName : "").name }) })] }), _jsx("div", { className: "bg-gray-5 mx-4 rounded-lg overflow-hidden", children: _jsxs("div", { className: "flex items-center justify-between px-3 py-3", children: [_jsxs("span", { className: "flex items-center gap-3 text-sm", children: [_jsx(StrokeIcon, { name: "bell", size: 18 }), t("notification")] }), _jsx(Switch, { checked: notifyEnabled, onChange: handleToggleNotification, loading: isTogglingNotification })] }) }), _jsx("div", { className: "bg-gray-5 mx-4 mt-3 rounded-lg overflow-hidden", children: _jsxs("button", { type: "button", className: "flex items-center gap-3 px-3 py-3 text-left text-sm w-full", onClick: () => setConfirmBlock(true), disabled: isTogglingBlock, children: [_jsx(StrokeIcon, { name: "user-x", size: 18 }), t(isBlocked ? "unblock_user" : "block_user")] }) }), _jsx("div", { className: "flex flex-col gap-1 bg-gray-5 mx-4 mt-3 rounded-lg overflow-hidden", children: _jsxs("button", { type: "button", className: "flex items-center gap-3 px-3 py-3 text-left text-sm text-danger-600", onClick: () => setConfirmDelete(true), children: [_jsx(StrokeIcon, { name: "trash", size: 18 }), t("thread_delete_action")] }) })] }), _jsx(ConfirmModal, { open: confirmBlock, onOk: handleToggleBlock, onCancel: () => setConfirmBlock(false), title: t(isBlocked ? "unblock_user_confirm_title" : "block_user_confirm_title", {
+                    name: splitDisplayName(displayName !== null && displayName !== void 0 ? displayName : "").name,
+                }), okText: t(isBlocked ? "unblock_user_confirm_ok" : "block_user_confirm_ok"), cancelText: t("action_cancel"), okType: isBlocked ? "primary" : "danger", destructive: !isBlocked, children: _jsx("p", { children: t(isBlocked ? "unblock_user_confirm_body" : "block_user_confirm_body") }) }), _jsx(ConfirmModal, { open: confirmDelete, onOk: handleConfirmDelete, onCancel: () => setConfirmDelete(false), title: t("thread_delete_confirm_title"), okText: t("thread_delete_action"), okIcon: "trash", warning: t("thread_delete_irreversible"), cancelText: t("action_cancel"), okType: "danger", destructive: true, confirmLoading: isDeleting, children: _jsx("p", { children: t("thread_delete_confirm_message") }) })] }));
 };
 export default SingleThreadInfo;

package/dist/components/thread/SupportSessionPanel.d.ts

@@ -0,0 +1,18 @@
+interface SupportSessionPanelProps {
+    conversationId: string;
+    width: number;
+    /** Drawer variant only: "Thông tin" over this panel, opened from its ⓘ button. */
+    isDetailsOpen?: boolean;
+    onCloseDetails?: () => void;
+    /** `drawer` (narrow screens) adds × and an ⓘ button; `inline` is always on screen. */
+    variant: "inline" | "drawer";
+    onClose?: () => void;
+    onOpenDetails?: () => void;
+}
+/**
+ * "Phiên hỗ trợ" for a bot support thread: customer, past sessions and the active
+ * session card. In the drawer variant, ⓘ opens "Thông tin" over it inside the same box.
+ */
+declare const SupportSessionPanel: ({ conversationId, width, isDetailsOpen, onCloseDetails, variant, onClose, onOpenDetails, }: SupportSessionPanelProps) => import("react/jsx-runtime").JSX.Element;
+export default SupportSessionPanel;
+//# sourceMappingURL=SupportSessionPanel.d.ts.map

package/dist/components/thread/SupportSessionPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SupportSessionPanel.d.ts","sourceRoot":"","sources":["../../../src/components/thread/SupportSessionPanel.tsx"],"names":[],"mappings":"AAeA,UAAU,wBAAwB;IAChC,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,kFAAkF;IAClF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,sFAAsF;IACtF,OAAO,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED;;;GAGG;AACH,QAAA,MAAM,mBAAmB,GAAI,4FAQ1B,wBAAwB,4CAgG1B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/thread/SupportSessionPanel.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Drawer } from "antd";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import UserSection from "./UserSection";
+import SessionSection from "./SessionSection";
+import { SessionDetailCard } from "./SessionDetailCard";
+import SingleThreadInfo from "./SingleThreadInfo";
+import ThreadInfoHeader, { threadInfoIconButtonClass, } from "./ThreadInfoHeader";
+import { StrokeIcon } from "../../components/icon/StrokeIcon";
+import { useGetListSessionByConversation } from "../../hooks/session/useGetListSessionByConversation";
+import { PAGE_SIZE } from "../../constants";
+/**
+ * "Phiên hỗ trợ" for a bot support thread: customer, past sessions and the active
+ * session card. In the drawer variant, ⓘ opens "Thông tin" over it inside the same box.
+ */
+const SupportSessionPanel = ({ conversationId, width, isDetailsOpen = false, onCloseDetails, variant, onClose, onOpenDetails, }) => {
+    const { t } = useTranslation();
+    const [panelEl, setPanelEl] = useState(null);
+    const detailsButtonRef = useRef(null);
+    const { data: sessions, isLoading } = useGetListSessionByConversation({
+        conversationId,
+        page: 1,
+        pageSize: PAGE_SIZE.large,
+        enabled: !!conversationId,
+    });
+    const { closedSessions, activeSession } = useMemo(() => {
+        if (!sessions)
+            return { closedSessions: [], activeSession: null };
+        return {
+            closedSessions: sessions.filter((s) => s.isClosed),
+            activeSession: sessions.find((s) => !s.isClosed),
+        };
+    }, [sessions]);
+    // Focus goes back to the in-panel ⓘ button when the details drawer closes over it.
+    const wasDetailsOpen = useRef(isDetailsOpen);
+    useEffect(() => {
+        var _a;
+        if (wasDetailsOpen.current && !isDetailsOpen)
+            (_a = detailsButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        wasDetailsOpen.current = isDetailsOpen;
+    }, [isDetailsOpen]);
+    return (_jsxs("div", { ref: setPanelEl, className: "relative flex h-full shrink-0 flex-col overflow-hidden rounded-xl bg-white shadow-sm", style: { width }, "data-cp-name": "SupportSessionPanel", "data-testid": "session-info-column", children: [variant === "drawer" ? (_jsx(ThreadInfoHeader, { title: t("support_session_panel_title"), onClose: onClose, actions: _jsx("button", { ref: detailsButtonRef, type: "button", "aria-label": t("thread_info_open"), title: t("thread_info_open"), "aria-expanded": isDetailsOpen, onClick: onOpenDetails, className: threadInfoIconButtonClass, children: _jsx(StrokeIcon, { name: "info", size: 18 }) }) })) : (_jsx("div", { className: "flex h-14 shrink-0 items-center border-b border-gray-25 px-4", children: _jsx("h2", { className: "m-0 truncate text-base font-bold text-gray-900", children: t("support_session_panel_title") }) })), _jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto", children: [_jsx(UserSection, {}), _jsx(SessionSection, { sessions: closedSessions, isLoading: isLoading })] }), activeSession && (_jsx("div", { className: "max-h-[70%] shrink-0 overflow-y-auto border-t border-gray-25 bg-white p-4", "data-testid": "active-session-dock", children: _jsx(SessionDetailCard, { session: activeSession, isActive: true }, activeSession.id) })), variant === "drawer" && panelEl && (_jsx(Drawer, { open: isDetailsOpen, onClose: onCloseDetails, "aria-label": t("thread_info_title"), getContainer: panelEl, rootStyle: { position: "absolute" }, width: "100%", mask: false, closeIcon: false, destroyOnHidden: true, styles: { body: { padding: 0 }, wrapper: { boxShadow: "none" } }, children: _jsx("div", { className: "h-full", "data-testid": "thread-details-overlay", children: _jsx(SingleThreadInfo, { onClose: onCloseDetails }) }) }))] }));
+};
+export default SupportSessionPanel;

package/dist/components/thread/ThreadInfo.d.ts

@@ -3,7 +3,14 @@ export interface ThreadInfoProps {
     isOpen?: boolean;
     onClose?: () => void;
     groupConfig?: GroupThreadInfoConfig;
+    /** Element the "Phiên hỗ trợ" drawer (and its scrim) is rendered into; it must be positioned. */
+    drawerContainer?: HTMLElement | null;
+    /**
+     * Bot support threads: "Phiên hỗ trợ" stays on screen from this width and `isOpen` opens
+     * "Thông tin" like the other side panels. Below it the panel is a drawer that `isOpen` shows.
+     */
+    supportPanelInline?: boolean;
 }
-declare const ThreadInfo: ({ isOpen, onClose, groupConfig }: ThreadInfoProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const ThreadInfo: ({ isOpen, onClose, groupConfig, drawerContainer, supportPanelInline, }: ThreadInfoProps) => import("react/jsx-runtime").JSX.Element | null;
 export default ThreadInfo;
 //# sourceMappingURL=ThreadInfo.d.ts.map

package/dist/components/thread/ThreadInfo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThreadInfo.d.ts","sourceRoot":"","sources":["../../../src/components/thread/ThreadInfo.tsx"],"names":[],"mappings":"AAGA,OAAwB,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAQ3E,MAAM,WAAW,eAAe;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,qBAAqB,CAAC;CACrC;AAED,QAAA,MAAM,UAAU,GAAI,kCAAyC,eAAe,mDA2D3E,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ThreadInfo.d.ts","sourceRoot":"","sources":["../../../src/components/thread/ThreadInfo.tsx"],"names":[],"mappings":"AAGA,OAAwB,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAU3E,MAAM,WAAW,eAAe;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,qBAAqB,CAAC;IACpC,iGAAiG;IACjG,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACrC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,QAAA,MAAM,UAAU,GAAI,wEAMjB,eAAe,mDAuEjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/thread/ThreadInfo.js

@@ -1,44 +1,42 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import useConversationStore from "../../store/conversation";
-import UserSection from "./UserSection";
-import SessionSection, { SessionDetailCard } from "./SessionSection";
 import GroupThreadInfo from "./GroupThreadInfo";
 import SingleThreadInfo from "./SingleThreadInfo";
-import { useGetListSessionByConversation } from "../../hooks/session/useGetListSessionByConversation";
-import { useMemo } from "react";
-import { PAGE_SIZE } from "../../constants";
+import SupportSessionPanel from "./SupportSessionPanel";
+import { useEscapeLayer } from "../../hooks/common/useEscapeLayer";
 import { PeerType } from "../../types/conversation";
 import { isGroupConversation } from "../../utils/imCommon";
-const ThreadInfo = ({ isOpen = true, onClose, groupConfig }) => {
+import { LAYOUT_WIDTHS } from "../../constants/layout";
+import DeskSidePanel from "../../components/common/DeskSidePanel";
+import DeskPanelDrawer from "../../components/common/DeskPanelDrawer";
+const ThreadInfo = ({ isOpen = true, onClose, groupConfig, drawerContainer, supportPanelInline = true, }) => {
+    const { t } = useTranslation();
     const conversationData = useConversationStore((state) => state.conversationData);
     const conversationId = (conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationID) || "";
     const isGroup = isGroupConversation(conversationData !== null && conversationData !== void 0 ? conversationData : undefined);
     const isBot = (conversationData === null || conversationData === void 0 ? void 0 : conversationData.peerType) === PeerType.BOT;
-    const { data: sessions, isLoading } = useGetListSessionByConversation({
-        conversationId,
-        page: 1,
-        pageSize: PAGE_SIZE.large,
-        enabled: isBot,
-    });
-    const { closedSessions, activeSession } = useMemo(() => {
-        if (!sessions)
-            return { closedSessions: [], activeSession: null };
-        const active = sessions.find((s) => !s.isClosed);
-        const closed = sessions.filter((s) => s.isClosed);
-        return { closedSessions: closed, activeSession: active };
-    }, [sessions]);
+    // Narrow screens only: "Thông tin" over the "Phiên hỗ trợ" drawer, opened from inside it.
+    const [isNarrowDetailsOpen, setIsNarrowDetailsOpen] = useState(false);
+    useEffect(() => {
+        setIsNarrowDetailsOpen(false);
+    }, [conversationId, isOpen]);
+    useEscapeLayer(isNarrowDetailsOpen, () => setIsNarrowDetailsOpen(false));
     if (!conversationId) {
         return null;
     }
-    if (isGroup) {
-        // Keyed on conversationId so switching threads remounts GroupThreadInfo
-        // instead of reusing the instance — otherwise its local edit state
-        // (editingField/nameValue/descriptionValue) leaks from the previous thread.
-        return isOpen ? (_jsx(GroupThreadInfo, { onClose: onClose, config: groupConfig }, conversationId)) : null;
+    // "Thông tin" opens like the members, search and library panels.
+    const details = (_jsx(DeskSidePanel, { open: isOpen, label: t("thread_info_open"), onClose: () => onClose === null || onClose === void 0 ? void 0 : onClose(), children: () => isGroup && !isBot ? (
+        // Keyed so switching threads remounts it and its edit state never leaks across.
+        _jsx(GroupThreadInfo, { onClose: onClose, config: groupConfig }, conversationId)) : (_jsx("div", { className: "h-full", "data-cp-name": "ThreadInfo", "data-testid": "thread-details-overlay", children: _jsx(SingleThreadInfo, { onClose: onClose }) })) }));
+    if (!isBot)
+        return details;
+    if (supportPanelInline) {
+        return (_jsxs(_Fragment, { children: [_jsx(SupportSessionPanel, { conversationId: conversationId, width: LAYOUT_WIDTHS.infoInline, variant: "inline" }), details] }));
     }
-    if (!isOpen && !isBot) {
-        return null;
-    }
-    return (_jsxs("div", { className: "h-full flex flex-row", "data-cp-name": "ThreadInfo", children: [isOpen && _jsx(SingleThreadInfo, { onClose: onClose }), isBot && (_jsxs("div", { className: "h-full w-[330px] bg-white shadow-md flex flex-col relative", children: [_jsxs("div", { className: `flex-grow overflow-y-auto ${activeSession ? "pb-60" : ""}`, children: [_jsx(UserSection, {}), _jsx(SessionSection, { sessions: closedSessions, isLoading: isLoading })] }), activeSession && (_jsx("div", { className: "absolute bottom-0 left-0 right-0 p-4 z-20 bg-white backdrop-blur-sm", children: _jsx(SessionDetailCard, { session: activeSession, isActive: true }) }))] }))] }));
+    return (_jsx(DeskPanelDrawer, { open: isOpen, label: t("support_session_panel_title"), onClose: () => onClose === null || onClose === void 0 ? void 0 : onClose(), container: drawerContainer, 
+        // Esc closes "Thông tin" first, then the drawer.
+        keyboard: !isNarrowDetailsOpen, children: _jsx(SupportSessionPanel, { conversationId: conversationId, width: LAYOUT_WIDTHS.infoDrawer, isDetailsOpen: isNarrowDetailsOpen, onCloseDetails: () => setIsNarrowDetailsOpen(false), variant: "drawer", onClose: onClose, onOpenDetails: () => setIsNarrowDetailsOpen(true) }) }));
 };
 export default ThreadInfo;

package/dist/components/thread/ThreadInfoHeader.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+interface ThreadInfoHeaderProps {
+    /** Defaults to "Thông tin". */
+    title?: string;
+    onClose?: () => void;
+    /** Extra icon buttons placed before the close button. */
+    actions?: ReactNode;
+}
+export declare const threadInfoIconButtonClass = "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";
+/** 56px title bar shared by the right-hand panels, inline and in the drawer. */
+declare const ThreadInfoHeader: ({ title, onClose, actions }: ThreadInfoHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default ThreadInfoHeader;
+//# sourceMappingURL=ThreadInfoHeader.d.ts.map

package/dist/components/thread/ThreadInfoHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadInfoHeader.d.ts","sourceRoot":"","sources":["../../../src/components/thread/ThreadInfoHeader.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlC,UAAU,qBAAqB;IAC7B,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,yDAAyD;IACzD,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,yBAAyB,+KACwI,CAAC;AAE/K,gFAAgF;AAChF,QAAA,MAAM,gBAAgB,GAAI,6BAA6B,qBAAqB,4CAmB3E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/thread/ThreadInfoHeader.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { StrokeIcon } from "../../components/icon/StrokeIcon";
+export const threadInfoIconButtonClass = "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";
+/** 56px title bar shared by the right-hand panels, inline and in the drawer. */
+const ThreadInfoHeader = ({ title, onClose, actions }) => {
+    const { t } = useTranslation();
+    return (_jsxs("div", { className: "flex h-14 shrink-0 items-center gap-1 border-b border-gray-25 pl-4 pr-2", children: [_jsx("h2", { className: "m-0 min-w-0 flex-1 truncate text-base font-bold text-gray-900", children: title !== null && title !== void 0 ? title : t("thread_info_title") }), actions, _jsx("button", { type: "button", "aria-label": t("thread_info_close"), title: t("thread_info_close"), onClick: onClose, className: threadInfoIconButtonClass, children: _jsx(StrokeIcon, { name: "x", size: 18 }) })] }));
+};
+export default ThreadInfoHeader;

package/dist/components/thread/UserSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UserSection.d.ts","sourceRoot":"","sources":["../../../src/components/thread/UserSection.tsx"],"names":[],"mappings":"AAYA,QAAA,MAAM,WAAW,+CA2IhB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"UserSection.d.ts","sourceRoot":"","sources":["../../../src/components/thread/UserSection.tsx"],"names":[],"mappings":"AAwBA,QAAA,MAAM,WAAW,+CAyJhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/thread/UserSection.js

@@ -1,28 +1,40 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Avatar, Input, message } from "antd";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { message } from "antd";
 import { useGetUserSideInfo } from "../../hooks/session/useGetUserSideInfo";
 import useConversationStore from "../../store/conversation";
-import { Icon } from "../../components/icon";
+import { resolveSupportSessionOwnerId } from "../../utils/conversation";
+import { StrokeIcon } from "../../components/icon/StrokeIcon";
+import TintedAvatar from "../../components/common/TintedAvatar";
 import { useCreateNote } from "../../hooks/session/useCreateNote";
 import { useUpdateNote } from "../../hooks/session/useUpdateNote";
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useBoolean } from "ahooks";
-const { TextArea } = Input;
+const readExOwnerId = (ex) => {
+    var _a, _b, _c;
+    try {
+        return ((_c = (_b = (_a = JSON.parse(ex || "{}")) === null || _a === void 0 ? void 0 : _a.sessionInfo) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.ownerId) || "";
+    }
+    catch (_d) {
+        return "";
+    }
+};
+/** "5364d782…97b": keeps both ends of an id that would otherwise be cut at the end. */
+const middleEllipsis = (value, head = 8, tail = 3) => value.length > head + tail + 1 ? `${value.slice(0, head)}…${value.slice(-tail)}` : value;
 const UserSection = () => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c;
     const { t } = useTranslation();
     const conversationData = useConversationStore((state) => state.conversationData);
-    const exConversationInfo = JSON.parse((conversationData === null || conversationData === void 0 ? void 0 : conversationData.ex) || "{}");
     const timerRef = useRef(null);
     const conversationId = (conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationID) || "";
-    const userId = ((_b = (_a = exConversationInfo === null || exConversationInfo === void 0 ? void 0 : exConversationInfo.sessionInfo) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.ownerId) || "";
+    // Core leaves ex without the session on some rows, so the owner also comes from the id.
+    const userId = readExOwnerId(conversationData === null || conversationData === void 0 ? void 0 : conversationData.ex) ||
+        resolveSupportSessionOwnerId(conversationData !== null && conversationData !== void 0 ? conversationData : undefined);
     const { data } = useGetUserSideInfo(conversationId, userId);
     const { mutate: createNote } = useCreateNote();
     const { mutate: updateNote } = useUpdateNote();
-    const initialNote = (_d = (_c = data === null || data === void 0 ? void 0 : data.note) === null || _c === void 0 ? void 0 : _c.content) !== null && _d !== void 0 ? _d : "";
+    const initialNote = (_b = (_a = data === null || data === void 0 ? void 0 : data.note) === null || _a === void 0 ? void 0 : _a.content) !== null && _b !== void 0 ? _b : "";
     const [noteValue, setNoteValue] = useState(initialNote);
-    const [isOpen, { toggle }] = useBoolean(true);
+    const [isEditingNote, setIsEditingNote] = useState(false);
     const scheduleSave = (value) => {
         if (timerRef.current) {
             window.clearTimeout(timerRef.current);
@@ -65,17 +77,18 @@ const UserSection = () => {
         var _a, _b;
         setNoteValue((_b = (_a = data === null || data === void 0 ? void 0 : data.note) === null || _a === void 0 ? void 0 : _a.content) !== null && _b !== void 0 ? _b : "");
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [(_e = data === null || data === void 0 ? void 0 : data.note) === null || _e === void 0 ? void 0 : _e.content, conversationId, userId]);
-    return (_jsxs("div", { className: "flex flex-col gap-3 border-b px-4 py-3", "data-cp-name": "UserSection", children: [_jsxs("div", { role: "button", onClick: toggle, className: "flex items-center gap-3 bg-white flex-wrap", children: [_jsx(Avatar, { src: data === null || data === void 0 ? void 0 : data.avatar, className: "min-w-6 min-h-6", children: ((_g = (_f = data === null || data === void 0 ? void 0 : data.fullName) === null || _f === void 0 ? void 0 : _f.charAt) === null || _g === void 0 ? void 0 : _g.call(_f, 0)) || "A" }), _jsx("div", { className: "flex flex-col overflow-hidden flex-1", children: _jsxs("p", { className: "text-sm truncate", children: [(data === null || data === void 0 ? void 0 : data.fullName) || "", "(", data === null || data === void 0 ? void 0 : data.username, ")"] }) }), _jsx(Icon, { icon: isOpen ? "angle-up-o" : "angle-down-o", size: 18 })] }), isOpen && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex justify-between items-center gap-2", children: [_jsxs("p", { className: "text-sm flex items-center gap-3 flex-1 min-w-0", children: [" ", _jsx("span", { className: "font-light w-16 text-gray-400 flex-shrink-0", children: "User ID" }), _jsx("span", { className: "truncate", children: (data === null || data === void 0 ? void 0 : data.id) || "" }), " "] }), _jsx(Icon, { icon: "copy-o", size: 16, onClick: () => {
-                                    navigator.clipboard.writeText((data === null || data === void 0 ? void 0 : data.id) || "");
-                                    message.success(t("copied_to_clipboard"));
-                                } })] }), _jsxs("div", { className: "flex justify-between items-center gap-2", children: [_jsxs("p", { className: "text-sm truncate flex gap-3", children: [_jsx("span", { className: "font-light text-gray-400 w-16", children: "Username" }), (data === null || data === void 0 ? void 0 : data.username) || ""] }), _jsx(Icon, { icon: "copy-o", size: 16, onClick: () => {
-                                    navigator.clipboard.writeText((data === null || data === void 0 ? void 0 : data.username) || "");
-                                    message.success(t("copied_to_clipboard"));
-                                } })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("p", { className: "text-sm flex gap-3", children: _jsx("span", { className: "font-light text-gray-400 w-16", children: "Note" }) }), _jsx(TextArea, { value: noteValue, placeholder: t("add_note"), className: "border-none py-0", autoSize: { minRows: 1, maxRows: 6 }, onChange: (e) => {
-                                    const v = e.target.value;
-                                    setNoteValue(v);
-                                    scheduleSave(v);
-                                } })] })] }))] }));
+    }, [(_c = data === null || data === void 0 ? void 0 : data.note) === null || _c === void 0 ? void 0 : _c.content, conversationId, userId]);
+    const copyValue = (value) => {
+        navigator.clipboard.writeText(value);
+        message.success(t("copied_to_clipboard"));
+    };
+    const rowLabelClass = "text-gray-600";
+    const copyButtonClass = "flex h-6 w-6 shrink-0 items-center justify-center rounded-lg text-gray-600 hover:bg-gray-5";
+    const fullName = (data === null || data === void 0 ? void 0 : data.fullName) || "";
+    return (_jsxs("div", { className: "flex flex-col gap-4 px-4 py-4", "data-cp-name": "UserSection", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(TintedAvatar, { name: fullName, src: data === null || data === void 0 ? void 0 : data.avatar, size: 48 }), _jsx("div", { className: "flex min-w-0 flex-col gap-1", children: _jsx("p", { className: "m-0 truncate text-base font-semibold text-gray-900", children: fullName }) })] }), _jsxs("dl", { className: "m-0 grid grid-cols-[112px_minmax(0,1fr)] items-center gap-y-2 text-[13px]", children: [_jsx("dt", { className: rowLabelClass, children: t("user_username_label") }), _jsxs("dd", { className: "m-0 flex min-w-0 items-center gap-1 text-gray-900", children: [_jsx("span", { className: "truncate", children: (data === null || data === void 0 ? void 0 : data.username) || "" }), _jsx("button", { type: "button", className: copyButtonClass, "aria-label": t("user_copy_username"), title: t("user_copy_username"), onClick: () => copyValue((data === null || data === void 0 ? void 0 : data.username) || ""), children: _jsx(StrokeIcon, { name: "copy", size: 14 }) })] }), _jsx("dt", { className: rowLabelClass, children: t("user_id_label") }), _jsxs("dd", { className: "m-0 flex min-w-0 items-center gap-1 text-gray-900", children: [_jsx("span", { className: "truncate", title: (data === null || data === void 0 ? void 0 : data.id) || undefined, children: middleEllipsis((data === null || data === void 0 ? void 0 : data.id) || "") }), _jsx("button", { type: "button", className: copyButtonClass, "aria-label": t("user_copy_id"), title: t("user_copy_id"), onClick: () => copyValue((data === null || data === void 0 ? void 0 : data.id) || ""), children: _jsx(StrokeIcon, { name: "copy", size: 14 }) })] }), _jsx("dt", { className: `${rowLabelClass} self-start`, children: _jsx("label", { htmlFor: "customer-note", children: t("user_note_label") }) }), _jsx("dd", { className: "m-0", children: isEditingNote ? (_jsx("textarea", { id: "customer-note", autoFocus: true, rows: Math.min(Math.max(noteValue.split("\n").length, 2), 6), value: noteValue, placeholder: t("add_note"), className: "w-full resize-none rounded-lg border border-gray-50 px-2.5 py-1.5 text-[13px] text-gray-900 outline-none focus:border-primary-400", onChange: (e) => {
+                                const v = e.target.value;
+                                setNoteValue(v);
+                                scheduleSave(v);
+                            }, onBlur: () => setIsEditingNote(false) })) : (_jsx("button", { id: "customer-note", type: "button", onClick: () => setIsEditingNote(true), className: "m-0 w-full whitespace-pre-wrap break-words border-0 bg-transparent p-0 text-left text-[13px] font-medium leading-5 text-primary-500 hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-200", children: noteValue ? (_jsx("span", { className: "font-normal text-gray-900", children: noteValue })) : (t("add_note")) })) })] })] }));
 };
 export default UserSection;

package/dist/components/thread/sessionDateFormat.d.ts

@@ -0,0 +1,3 @@
+export declare const formatSessionTime: (dateString?: string | null) => string;
+export declare const formatSessionDate: (dateString?: string | null) => string;
+//# sourceMappingURL=sessionDateFormat.d.ts.map

package/dist/components/thread/sessionDateFormat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sessionDateFormat.d.ts","sourceRoot":"","sources":["../../../src/components/thread/sessionDateFormat.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,GAAI,aAAa,MAAM,GAAG,IAAI,WAI3D,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,aAAa,MAAM,GAAG,IAAI,WAI3D,CAAC"}

package/dist/components/thread/sessionDateFormat.js

@@ -0,0 +1,13 @@
+const pad = (value) => String(value).padStart(2, "0");
+export const formatSessionTime = (dateString) => {
+    if (!dateString)
+        return "";
+    const date = new Date(dateString);
+    return `${pad(date.getHours())}:${pad(date.getMinutes())}`;
+};
+export const formatSessionDate = (dateString) => {
+    if (!dateString)
+        return "";
+    const date = new Date(dateString);
+    return `${formatSessionTime(dateString)} ${pad(date.getDate())}/${pad(date.getMonth() + 1)}`;
+};

package/dist/components/thread/sessionDuration.d.ts

@@ -0,0 +1,5 @@
+type Translate = (key: string, options?: Record<string, unknown>) => string;
+/** Human duration of a closed session ("12 phút", "1 giờ 5 phút"); "" while open or invalid. */
+export declare const formatSessionDuration: (createdDate: string | null | undefined, closedDate: string | null | undefined, t: Translate) => string;
+export {};
+//# sourceMappingURL=sessionDuration.d.ts.map

package/dist/components/thread/sessionDuration.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sessionDuration.d.ts","sourceRoot":"","sources":["../../../src/components/thread/sessionDuration.ts"],"names":[],"mappings":"AAAA,KAAK,SAAS,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,CAAC;AAM5E,gGAAgG;AAChG,eAAO,MAAM,qBAAqB,GAChC,aAAa,MAAM,GAAG,IAAI,GAAG,SAAS,EACtC,YAAY,MAAM,GAAG,IAAI,GAAG,SAAS,EACrC,GAAG,SAAS,WAiBb,CAAC"}

package/dist/components/thread/sessionDuration.js

@@ -0,0 +1,24 @@
+const MINUTE_MS = 60 * 1000;
+const HOUR_MS = 60 * MINUTE_MS;
+const DAY_MS = 24 * HOUR_MS;
+/** Human duration of a closed session ("12 phút", "1 giờ 5 phút"); "" while open or invalid. */
+export const formatSessionDuration = (createdDate, closedDate, t) => {
+    if (!createdDate || !closedDate)
+        return "";
+    const ms = new Date(closedDate).getTime() - new Date(createdDate).getTime();
+    if (!Number.isFinite(ms) || ms < 0)
+        return "";
+    if (ms < MINUTE_MS)
+        return t("duration_under_minute");
+    if (ms < HOUR_MS) {
+        return t("duration_minutes", { count: Math.floor(ms / MINUTE_MS) });
+    }
+    if (ms < DAY_MS) {
+        const hours = Math.floor(ms / HOUR_MS);
+        const minutes = Math.floor((ms % HOUR_MS) / MINUTE_MS);
+        return minutes
+            ? t("duration_hours_minutes", { hours, minutes })
+            : t("duration_hours", { count: hours });
+    }
+    return t("duration_days", { count: Math.floor(ms / DAY_MS) });
+};

package/dist/constants/index.d.ts

@@ -6,6 +6,7 @@ export declare const PAGE_SIZE: {
     readonly large: 50;
 };
 export declare const VIEW_ONLY_REFRESH_INTERVAL_MS = 10000;
+export declare const SUPPORT_SYSTEM_SENDER_ID = "00000000-0000-0000-0000-000000000000";
 export declare const MSG_ITEM_PREFIX = "msg-item-";
 export declare const MSG_ITEM_CONTENT_PREFIX = "msg-item-content-";
 export declare const MSG_ITEM_BUBBLE_GROUP_PREFIX = "msg-item-bubble-group-";

package/dist/constants/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/constants/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,qFAC2D,CAAC;AAErF,eAAO,MAAM,SAAS;;;;;CAKZ,CAAC;AAGX,eAAO,MAAM,6BAA6B,QAAS,CAAC;AAEpD,eAAO,MAAM,eAAe,cAAc,CAAC;AAC3C,eAAO,MAAM,uBAAuB,sBAAsB,CAAC;AAE3D,eAAO,MAAM,4BAA4B,2BAA2B,CAAC;AAMrE,eAAO,MAAM,sBAAsB,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/constants/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,qFAC2D,CAAC;AAErF,eAAO,MAAM,SAAS;;;;;CAKZ,CAAC;AAGX,eAAO,MAAM,6BAA6B,QAAS,CAAC;AAGpD,eAAO,MAAM,wBAAwB,yCAAyC,CAAC;AAE/E,eAAO,MAAM,eAAe,cAAc,CAAC;AAC3C,eAAO,MAAM,uBAAuB,sBAAsB,CAAC;AAE3D,eAAO,MAAM,4BAA4B,2BAA2B,CAAC;AAMrE,eAAO,MAAM,sBAAsB,4BAA4B,CAAC"}

package/dist/constants/index.js

@@ -7,6 +7,8 @@ export const PAGE_SIZE = {
 };
 // A non-member viewing a public group gets no pushes, so the view polls at this pace.
 export const VIEW_ONLY_REFRESH_INTERVAL_MS = 10000;
+// chat-service sends bot, greeting and closing messages in support threads as the OpenIM admin.
+export const SUPPORT_SYSTEM_SENDER_ID = "00000000-0000-0000-0000-000000000000";
 export const MSG_ITEM_PREFIX = "msg-item-";
 export const MSG_ITEM_CONTENT_PREFIX = "msg-item-content-";
 // Bubble plus its pin badge, so the jump-to-message pulse moves both together.

package/dist/constants/layout.d.ts

@@ -0,0 +1,24 @@
+/** Viewport breakpoints (px) for the CRM desk workspace. */
+export declare const LAYOUT_BREAKPOINTS: {
+    /** Below this the desk shows a "use a wider screen" notice. */
+    readonly minWorkspace: 1024;
+    /** From this width the folder panel stays inline; below it, it overlays the list. */
+    readonly folderInline: 1600;
+    /** From this width a bot thread's "Phiên hỗ trợ" panel is always on screen; below it, a drawer. */
+    readonly supportPanelInline: 1280;
+    /** From this width the info panel sits inline; below it, it is an overlay drawer. */
+    readonly infoInline: 1600;
+    /** From this width the "new message" button shows its label; below it, an icon with a tooltip. */
+    readonly composeLabel: 1440;
+};
+/** Panel widths (px) of the desk workspace. */
+export declare const LAYOUT_WIDTHS: {
+    readonly folder: 220;
+    readonly folderCollapsed: 48;
+    readonly list: 320;
+    readonly listCompact: 300;
+    readonly infoInline: 330;
+    readonly infoDrawer: 360;
+    readonly chatMin: 480;
+};
+//# sourceMappingURL=layout.d.ts.map

package/dist/constants/layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/constants/layout.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,eAAO,MAAM,kBAAkB;IAC7B,+DAA+D;;IAE/D,qFAAqF;;IAErF,mGAAmG;;IAEnG,qFAAqF;;IAErF,kGAAkG;;CAE1F,CAAC;AAEX,+CAA+C;AAC/C,eAAO,MAAM,aAAa;;;;;;;;CAQhB,CAAC"}

package/dist/constants/layout.js

@@ -0,0 +1,23 @@
+/** Viewport breakpoints (px) for the CRM desk workspace. */
+export const LAYOUT_BREAKPOINTS = {
+    /** Below this the desk shows a "use a wider screen" notice. */
+    minWorkspace: 1024,
+    /** From this width the folder panel stays inline; below it, it overlays the list. */
+    folderInline: 1600,
+    /** From this width a bot thread's "Phiên hỗ trợ" panel is always on screen; below it, a drawer. */
+    supportPanelInline: 1280,
+    /** From this width the info panel sits inline; below it, it is an overlay drawer. */
+    infoInline: 1600,
+    /** From this width the "new message" button shows its label; below it, an icon with a tooltip. */
+    composeLabel: 1440,
+};
+/** Panel widths (px) of the desk workspace. */
+export const LAYOUT_WIDTHS = {
+    folder: 220,
+    folderCollapsed: 48,
+    list: 320,
+    listCompact: 300,
+    infoInline: 330,
+    infoDrawer: 360,
+    chatMin: 480,
+};

package/dist/context/ChatContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatContext.d.ts","sourceRoot":"","sources":["../../src/context/ChatContext.tsx"],"names":[],"mappings":"AAEA,OAAO,sBAAsB,CAAC;AAG9B,OAAO,EACL,eAAe,EACf,iBAAiB,EAGlB,MAAM,cAAc,CAAC;AAUtB,eAAO,MAAM,WAAW,0CAStB,CAAC;AAEH,eAAO,MAAM,cAAc,uBAAgC,CAAC;AAc5D,eAAO,MAAM,YAAY,GAAI,sIAS1B,iBAAiB,4CA2JnB,CAAC"}
+{"version":3,"file":"ChatContext.d.ts","sourceRoot":"","sources":["../../src/context/ChatContext.tsx"],"names":[],"mappings":"AAEA,OAAO,sBAAsB,CAAC;AAG9B,OAAO,EACL,eAAe,EACf,iBAAiB,EAGlB,MAAM,cAAc,CAAC;AAUtB,eAAO,MAAM,WAAW,0CAStB,CAAC;AAEH,eAAO,MAAM,cAAc,uBAAgC,CAAC;AA2B5D,eAAO,MAAM,YAAY,GAAI,sIAS1B,iBAAiB,4CAoLnB,CAAC"}

package/dist/context/ChatContext.js

@@ -31,9 +31,22 @@ const DEFAULT_THEME = {
     "--dc-color-header-icon": "#686F72",
     "--dc-color-nav-icon": "#393E40",
     "--dc-color-link": "#1B3FE4",
+    "--dc-composer-bg": "#A1D0FF",
+    "--dc-composer-border": "#6366F1",
+    "--dc-composer-border-focus": "#6366F1",
+    "--dc-color-bubble-mine": "rgba(0, 81, 255, 0.1)",
+    "--dc-color-bubble-mine-text": "inherit",
+    "--dc-color-bubble-other": "rgba(131, 137, 157, 0.1)",
+    "--dc-color-bubble-other-text": "inherit",
+    "--dc-color-highlight": "Mark",
+    "--dc-color-highlight-text": "MarkText",
+    "--dc-highlight-weight": "inherit",
+    "--dc-color-neutral-surface": "#EFEFEF",
+    "--dc-message-font-size": "16px",
+    "--dc-message-line-height": "160%",
 };
 export const ChatProvider = ({ children, config, renderCustomMessage, onNavigate, useUrlState = true, allowPinMessageWithoutPermission = false, renderGroupAccessModal, theme, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
     // The store's clearSelectedConversation touches window.history directly
     // (it has no React context access) — mirror the flag there so bubble mode
     // doesn't clobber the host page's own URL.
@@ -60,6 +73,19 @@ export const ChatProvider = ({ children, config, renderCustomMessage, onNavigate
         "--dc-color-header-icon": (_g = theme === null || theme === void 0 ? void 0 : theme.headerIcon) !== null && _g !== void 0 ? _g : DEFAULT_THEME["--dc-color-header-icon"],
         "--dc-color-nav-icon": (_h = theme === null || theme === void 0 ? void 0 : theme.navIcon) !== null && _h !== void 0 ? _h : DEFAULT_THEME["--dc-color-nav-icon"],
         "--dc-color-link": (_j = theme === null || theme === void 0 ? void 0 : theme.link) !== null && _j !== void 0 ? _j : DEFAULT_THEME["--dc-color-link"],
+        "--dc-composer-bg": (_k = theme === null || theme === void 0 ? void 0 : theme.composerBg) !== null && _k !== void 0 ? _k : DEFAULT_THEME["--dc-composer-bg"],
+        "--dc-composer-border": (_l = theme === null || theme === void 0 ? void 0 : theme.composerBorder) !== null && _l !== void 0 ? _l : DEFAULT_THEME["--dc-composer-border"],
+        "--dc-composer-border-focus": (_m = theme === null || theme === void 0 ? void 0 : theme.composerBorderFocus) !== null && _m !== void 0 ? _m : DEFAULT_THEME["--dc-composer-border-focus"],
+        "--dc-color-bubble-mine": (_o = theme === null || theme === void 0 ? void 0 : theme.bubbleMine) !== null && _o !== void 0 ? _o : DEFAULT_THEME["--dc-color-bubble-mine"],
+        "--dc-color-bubble-mine-text": (_p = theme === null || theme === void 0 ? void 0 : theme.bubbleMineText) !== null && _p !== void 0 ? _p : DEFAULT_THEME["--dc-color-bubble-mine-text"],
+        "--dc-color-bubble-other": (_q = theme === null || theme === void 0 ? void 0 : theme.bubbleOther) !== null && _q !== void 0 ? _q : DEFAULT_THEME["--dc-color-bubble-other"],
+        "--dc-color-bubble-other-text": (_r = theme === null || theme === void 0 ? void 0 : theme.bubbleOtherText) !== null && _r !== void 0 ? _r : DEFAULT_THEME["--dc-color-bubble-other-text"],
+        "--dc-color-highlight": (_s = theme === null || theme === void 0 ? void 0 : theme.highlight) !== null && _s !== void 0 ? _s : DEFAULT_THEME["--dc-color-highlight"],
+        "--dc-color-highlight-text": (_t = theme === null || theme === void 0 ? void 0 : theme.highlightText) !== null && _t !== void 0 ? _t : DEFAULT_THEME["--dc-color-highlight-text"],
+        "--dc-highlight-weight": (_u = theme === null || theme === void 0 ? void 0 : theme.highlightWeight) !== null && _u !== void 0 ? _u : DEFAULT_THEME["--dc-highlight-weight"],
+        "--dc-color-neutral-surface": (_v = theme === null || theme === void 0 ? void 0 : theme.neutralSurface) !== null && _v !== void 0 ? _v : DEFAULT_THEME["--dc-color-neutral-surface"],
+        "--dc-message-font-size": (_w = theme === null || theme === void 0 ? void 0 : theme.messageFontSize) !== null && _w !== void 0 ? _w : DEFAULT_THEME["--dc-message-font-size"],
+        "--dc-message-line-height": (_x = theme === null || theme === void 0 ? void 0 : theme.messageLineHeight) !== null && _x !== void 0 ? _x : DEFAULT_THEME["--dc-message-line-height"],
     };
     const rootRef = useRef(null);
     const [connectStatus, setConnectStatus] = useState(ConnectStatus.Disconnected);

package/dist/hooks/canned-response/useSearchCannedAcrossScopes.d.ts

@@ -0,0 +1,7 @@
+import { CannedRow, CannedScope } from "../../components/canned-response/cannedScopes";
+export declare const useSearchCannedAcrossScopes: (scopes: CannedScope[], shortcut: string) => {
+    rows: CannedRow[];
+    isLoading: boolean;
+    isError: boolean;
+};
+//# sourceMappingURL=useSearchCannedAcrossScopes.d.ts.map

package/dist/hooks/canned-response/useSearchCannedAcrossScopes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSearchCannedAcrossScopes.d.ts","sourceRoot":"","sources":["../../../src/hooks/canned-response/useSearchCannedAcrossScopes.ts"],"names":[],"mappings":"AAOA,OAAO,EACL,SAAS,EACT,WAAW,EAEZ,MAAM,2CAA2C,CAAC;AAGnD,eAAO,MAAM,2BAA2B,GACtC,QAAQ,WAAW,EAAE,EACrB,UAAU,MAAM;;;;CA6CjB,CAAC"}