@droppii-org/chat-sdk 0.7.3 → 0.7.5

package/dist/components/message/footer/MediaActions.d.ts

@@ -5,7 +5,8 @@ interface MediaActionsProps {
     buttonClassName?: string;
     showMediaUpload?: boolean;
     crmComposer?: boolean;
+    hideEmojiOnPhone?: boolean;
 }
-export default function MediaActions({ listUploadFiles, onFilesChange, buttonClassName, showMediaUpload, crmComposer, }: MediaActionsProps): import("react/jsx-runtime").JSX.Element;
+export default function MediaActions({ listUploadFiles, onFilesChange, buttonClassName, showMediaUpload, crmComposer, hideEmojiOnPhone, }: MediaActionsProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=MediaActions.d.ts.map

package/dist/components/message/footer/MediaActions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MediaActions.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/MediaActions.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAkB,UAAU,EAA0B,MAAM,MAAM,CAAC;AAuD1E,UAAU,iBAAiB;IACzB,eAAe,EAAE,UAAU,EAAE,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAC7C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,eAAe,EACf,aAAa,EACb,eAAe,EACf,eAAsB,EACtB,WAAmB,GACpB,EAAE,iBAAiB,2CA6LnB"}
+{"version":3,"file":"MediaActions.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/MediaActions.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAkB,UAAU,EAA0B,MAAM,MAAM,CAAC;AAuD1E,UAAU,iBAAiB;IACzB,eAAe,EAAE,UAAU,EAAE,CAAC;IAC9B,aAAa,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAC7C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,eAAe,EACf,aAAa,EACb,eAAe,EACf,eAAsB,EACtB,WAAmB,EACnB,gBAAwB,GACzB,EAAE,iBAAiB,2CA+LnB"}

package/dist/components/message/footer/MediaActions.js

@@ -18,7 +18,7 @@ import useAuthStore from "../../../store/auth";
 import { StrokeIcon } from "../../../components/icon/StrokeIcon";
 const EmojiIcon = (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M7.59997 12.4C7.59997 12.4 8.49997 13.2 9.99997 13.2C11.5 13.2 12.4 12.4 12.4 12.4M14 8.39997C14 8.8418 13.6418 9.19997 13.2 9.19997C12.7581 9.19997 12.4 8.8418 12.4 8.39997C12.4 7.95814 12.7581 7.59997 13.2 7.59997C13.6418 7.59997 14 7.95814 14 8.39997ZM18 9.99997C18 14.4182 14.4182 18 9.99997 18C5.58169 18 1.99997 14.4182 1.99997 9.99997C1.99997 5.58169 5.58169 1.99997 9.99997 1.99997C14.4182 1.99997 18 5.58169 18 9.99997ZM7.59997 8.39997C7.59997 8.8418 7.2418 9.19997 6.79997 9.19997C6.35814 9.19997 5.99997 8.8418 5.99997 8.39997C5.99997 7.95814 6.35814 7.59997 6.79997 7.59997C7.2418 7.59997 7.59997 7.95814 7.59997 8.39997Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 const AttachIcon = (_jsx("svg", { width: "22", height: "22", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M15.6 10.0001V11.2001C15.6 14.5137 12.9137 17.2001 9.59998 17.2001C6.28626 17.2001 3.59998 14.5137 3.59998 11.2001V6.79999C3.59998 4.59085 5.39084 2.79999 7.59998 2.79999C9.8091 2.79999 11.6 4.59085 11.6 6.79999V11.2C11.6 12.3045 10.7045 13.2 9.59998 13.2C8.49542 13.2 7.59998 12.3045 7.59998 11.2V7.99999", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-export default function MediaActions({ listUploadFiles, onFilesChange, buttonClassName, showMediaUpload = true, crmComposer = false, }) {
+export default function MediaActions({ listUploadFiles, onFilesChange, buttonClassName, showMediaUpload = true, crmComposer = false, hideEmojiOnPhone = false, }) {
     const [editor] = useLexicalComposerContext();
     const { t } = useTranslation();
     const [showEmojiPicker, setShowEmojiPicker] = useState(false);
@@ -96,14 +96,14 @@ export default function MediaActions({ listUploadFiles, onFilesChange, buttonCla
         return () => document.removeEventListener("mousedown", handleClickOutside);
     }, []);
     const btnClass = crmComposer
-        ? "!flex !h-8 !w-8 items-center justify-center rounded-lg p-0 text-gray-600 hover:!bg-gray-5 hover:!text-gray-900"
+        ? "!flex !h-8 !w-8 items-center justify-center rounded-lg p-0 text-gray-600 hover:!bg-gray-5 hover:!text-gray-900 touch:min-h-10 touch:min-w-10"
         : buttonClassName !== null && buttonClassName !== void 0 ? buttonClassName : "w-8 h-8 p-0 text-gray-500 hover:text-gray-700 hover:bg-gray-100";
     const activeCls = crmComposer
         ? "!bg-primary-25 !text-primary-500"
         : "bg-blue-100 text-blue-600";
     const crmLabel = (key) => crmComposer ? { "aria-label": t(key), title: t(key) } : {};
-    return (_jsxs("div", { "data-cp-name": "MediaActions", className: clsx("flex items-center relative", crmComposer ? "gap-0.5" : "gap-1"), ref: containerRef, children: [isCrm && (_jsx(Button, Object.assign({ type: "text", shape: "default", className: clsx(btnClass, isOpenCanned && activeCls), onClick: onPressCanned }, crmLabel("composer_quick_reply"), { children: crmComposer ? (_jsx(StrokeIcon, { name: "hash", size: 18 })) : (_jsx(CannedResponseIcon, { className: clsx("hover:text-gray-700", isOpenCanned && "text-blue-600") })) }))), _jsx(Button, Object.assign({ type: "text", shape: "default", className: clsx(btnClass, showEmojiPicker &&
+    return (_jsxs("div", { "data-cp-name": "MediaActions", className: clsx("flex items-center relative", crmComposer ? "gap-0.5" : "gap-1"), ref: containerRef, children: [isCrm && (_jsx(Button, Object.assign({ type: "text", shape: "default", className: clsx(btnClass, isOpenCanned && activeCls), onClick: onPressCanned }, crmLabel("composer_quick_reply"), { children: crmComposer ? (_jsx(StrokeIcon, { name: "hash", size: 18 })) : (_jsx(CannedResponseIcon, { className: clsx("hover:text-gray-700", isOpenCanned && "text-blue-600") })) }))), _jsx(Button, Object.assign({ type: "text", shape: "default", className: clsx(btnClass, hideEmojiOnPhone && "phone:!hidden", showEmojiPicker &&
                     (crmComposer
                         ? activeCls
-                        : "bg-[var(--dc-color-primary-light)] text-[var(--dc-color-primary)]")), onClick: () => setShowEmojiPicker(!showEmojiPicker) }, crmLabel("composer_emoji"), { children: crmComposer ? _jsx(StrokeIcon, { name: "smile", size: 18 }) : EmojiIcon })), showMediaUpload && (_jsxs(_Fragment, { children: [_jsx(Upload, { accept: "image/jpeg, image/png, image/jpg, video/*", beforeUpload: beforeUploadImagesAndVideo, multiple: true, onChange: handleChange, showUploadList: false, fileList: listUploadFiles, children: _jsx(Button, Object.assign({ type: "text", shape: "default", className: btnClass }, crmLabel("composer_attach_image"), { children: crmComposer ? (_jsx(StrokeIcon, { name: "image", size: 18 })) : (_jsx(Icon, { icon: "image-02-o", size: 22 })) })) }), _jsx(Upload, { accept: ".doc,.docx,.pdf", beforeUpload: beforeUploadFile, onChange: handleChange, showUploadList: false, fileList: listUploadFiles, children: _jsx(Button, Object.assign({ type: "text", shape: "default", className: btnClass }, crmLabel("composer_attach_file"), { children: crmComposer ? _jsx(StrokeIcon, { name: "paperclip", size: 18 }) : AttachIcon })) })] })), showEmojiPicker && (_jsx(EmojiPicker, { onEmojiSelect: handleEmojiSelect, onClose: () => setShowEmojiPicker(false) }))] }));
+                        : "bg-[var(--dc-color-primary-light)] text-[var(--dc-color-primary)]")), onClick: () => setShowEmojiPicker(!showEmojiPicker) }, crmLabel("composer_emoji"), { children: crmComposer ? _jsx(StrokeIcon, { name: "smile", size: 18 }) : EmojiIcon })), showMediaUpload && (_jsxs(_Fragment, { children: [_jsx(Upload, { accept: "image/jpeg, image/png, image/jpg, video/*", beforeUpload: beforeUploadImagesAndVideo, multiple: true, onChange: handleChange, showUploadList: false, fileList: listUploadFiles, children: _jsx(Button, Object.assign({ type: "text", shape: "default", className: btnClass }, crmLabel("composer_attach_image"), { children: crmComposer ? (_jsx(StrokeIcon, { name: "image", size: 18 })) : (_jsx(Icon, { icon: "image-02-o", size: 22 })) })) }), _jsx(Upload, { accept: ".doc,.docx,.pdf", beforeUpload: beforeUploadFile, onChange: handleChange, showUploadList: false, fileList: listUploadFiles, children: _jsx(Button, Object.assign({ type: "text", shape: "default", className: btnClass }, crmLabel("composer_attach_file"), { children: crmComposer ? _jsx(StrokeIcon, { name: "paperclip", size: 18 }) : AttachIcon })) })] })), showEmojiPicker && (_jsx(EmojiPicker, { className: crmComposer ? "max-lg:w-80" : undefined, onEmojiSelect: handleEmojiSelect, onClose: () => setShowEmojiPicker(false) }))] }));
 }

package/dist/components/message/footer/ToolbarPlugin.js

@@ -105,7 +105,7 @@ export const ToolbarPlugin = ({ compact = false }) => {
         editor.dispatchCommand(TOGGLE_LINK_COMMAND, "https://");
     }, [editor]);
     const getButtonClasses = (isActive) => {
-        return `w-8 h-8 p-0 border-sm ${isActive
+        return `w-8 h-8 p-0 border-sm ${compact ? "touch:min-h-10 touch:min-w-10" : ""} ${isActive
             ? "bg-blue-100 text-blue-600"
             : "text-gray-500 hover:text-gray-700 hover:bg-gray-100"}`;
     };

package/dist/components/message/footer/mention/MentionMenu.js

@@ -95,7 +95,7 @@ const MentionMenu = ({ groupID, isBotThread }) => {
             // overlapped the composer's own top portion. MentionMenuOffset
             // pushes the extra distance from the caret up to the composer's
             // actual top edge, so the menu clears the input entirely.
-            _jsxs(MentionMenuOffset, { "data-cp-name": "MentionMenu", className: "absolute left-0 z-50 max-h-[220px] w-[260px] overflow-y-auto rounded-md border border-gray-200 bg-white py-1 shadow-lg", children: [_jsx("div", { className: "px-3 py-1 text-xs font-medium text-gray-400", children: t("mention.menu_title") }), typeaheadOptions.length === 0 ? (_jsx("div", { className: "px-3 py-2 text-sm text-gray-500", children: limitReached
+            _jsxs(MentionMenuOffset, { "data-cp-name": "MentionMenu", className: "absolute left-0 z-50 max-h-[220px] touch:max-h-[min(220px,calc(var(--dc-desk-height,100dvh)-var(--dc-composer-reserve,280px)))] w-[260px] overflow-y-auto rounded-md border border-gray-200 bg-white py-1 shadow-lg", children: [_jsx("div", { className: "px-3 py-1 text-xs font-medium text-gray-400", children: t("mention.menu_title") }), typeaheadOptions.length === 0 ? (_jsx("div", { className: "px-3 py-2 text-sm text-gray-500", children: limitReached
                             ? t("mention.limit_reached", { max: MAX_MENTIONED_USERS })
                             : t("mention.no_result") })) : (typeaheadOptions.map((option, index) => (_jsxs("button", { type: "button", className: `flex w-full items-center gap-2 px-3 py-2 text-left text-sm ${index === selectedIndex ? "bg-blue-50" : "hover:bg-gray-50"}`, onMouseEnter: () => setHighlightedIndex(index), onClick: () => selectOptionAndCleanUp(option), children: [option.option.isAtAll ? (_jsx("span", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-gray-100 text-gray-500", children: "@" })) : isCrm ? (_jsx(TintedAvatar, { name: option.option.displayName, src: option.option.faceURL, size: 24 })) : (_jsx(Avatar, { size: 24, src: option.option.faceURL, children: option.option.displayName.charAt(0) })), _jsx("span", { className: "min-w-0 flex-1 truncate", children: option.option.displayName })] }, option.key))))] }), anchorElementRef.current);
         } }));

package/dist/components/message/headerIconButton.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon } from "../../components/icon";
 import { StrokeIcon } from "../../components/icon/StrokeIcon";
 /** Classes of a header icon button; an open panel gets the Primary-25 tile in CRM. */
-export const headerIconButtonClass = (isCrm, isOpen) => `${isCrm ? "w-9 h-9 [@container(max-width:699px)]:!w-8 [@container(max-width:699px)]:!h-8" : "w-8 h-8"} p-0 ${isCrm && isOpen
+export const headerIconButtonClass = (isCrm, isOpen) => `${isCrm ? "w-9 h-9 [@container(max-width:699px)]:!w-8 [@container(max-width:699px)]:!h-8 touch:min-h-10 touch:min-w-10" : "w-8 h-8"} p-0 ${isCrm && isOpen
     ? "bg-primary-25 text-primary-500"
     : "text-[var(--dc-color-header-icon)]"}`;
 /** Mockup line icon in CRM, the icon-font glyph elsewhere. */

package/dist/components/message/item/MessageMoreButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageMoreButton.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/MessageMoreButton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,MAAM,CAAC;AAwBtC,UAAU,sBAAsB;IAC9B,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;IACvC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,MAAM,EAAE,OAAO,CAAC;IAChB,uEAAuE;IACvE,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,oFAAoF;AACpF,QAAA,MAAM,iBAAiB,GAAI,mDAMxB,sBAAsB,4CAyDxB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"MessageMoreButton.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/MessageMoreButton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,MAAM,CAAC;AAsCtC,UAAU,sBAAsB;IAC9B,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;IACvC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,MAAM,EAAE,OAAO,CAAC;IAChB,uEAAuE;IACvE,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,oFAAoF;AACpF,QAAA,MAAM,iBAAiB,GAAI,mDAMxB,sBAAsB,4CAmFxB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/message/item/MessageMoreButton.js

@@ -1,18 +1,29 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
-import { Dropdown } from "antd";
+import { Dropdown, Menu } from "antd";
 import clsx from "clsx";
 import { StrokeIcon } from "../../../components/icon/StrokeIcon";
 import { useTranslation } from "react-i18next";
 import { useEscapeLayer } from "../../../hooks/common/useEscapeLayer";
+import BottomSheet from "../../../components/common/BottomSheet";
+import { LAYOUT_MEDIA } from "../../../constants/layout";
 // Compact text menu from the design: 260px, 36px rows, 14px text, 18px icons.
 const MORE_MENU_CLASSNAME = clsx("[&_.ant-dropdown-menu]:!w-[260px]", "[&_.ant-dropdown-menu]:!rounded-xl", "[&_.ant-dropdown-menu]:!p-1", "[&_.ant-dropdown-menu-item]:!h-9", "[&_.ant-dropdown-menu-item]:!rounded-lg", "[&_.ant-dropdown-menu-item]:!px-3", "[&_.ant-dropdown-menu-item]:!py-0", "[&_.ant-dropdown-menu-item]:flex", "[&_.ant-dropdown-menu-item]:items-center", "[&_[data-cp-name=ToolboxMenuRow]]:gap-2.5", "[&_[data-cp-name=ToolboxMenuRow]_span]:!text-sm", "[&_[data-cp-name=ToolboxMenuRow]_span]:!font-normal", "[&_[data-cp-name=ToolboxMenuRow]_svg]:!h-[18px]", "[&_[data-cp-name=ToolboxMenuRow]_svg]:!w-[18px]");
+// Sheet rows: 48px, borderless, same labeled items as the dropdown.
+const SHEET_MENU_CLASSNAME = clsx("!border-0", "[&_.ant-menu-item]:!h-12", "[&_.ant-menu-item]:!leading-[48px]", "[&_.ant-menu-item]:!rounded-lg", "[&_.ant-menu-item]:!px-3", "[&_.ant-menu-item]:!m-0", "[&_.ant-menu-item]:!w-full", "[&_[data-cp-name=ToolboxMenuRow]]:gap-3");
 /** CRM only: "…" beside the bubble that opens the same text menu as right-click. */
 const MessageMoreButton = ({ items, open, onOpenChange, isMine, reachable, }) => {
     const { t } = useTranslation();
     const buttonRef = useRef(null);
     useEscapeLayer(open, () => onOpenChange(false));
+    // A plain matchMedia read per render, no per-row subscription.
+    const isPhoneTier = typeof window !== "undefined" && window.matchMedia(LAYOUT_MEDIA.phone).matches;
+    const asSheet = open && isPhoneTier;
+    // Mounted on first sheet use only, so rows that never open one carry no Drawer.
+    const sheetUsedRef = useRef(false);
+    if (asSheet)
+        sheetUsedRef.current = true;
     // Opened from the keyboard: move into the menu; closing returns focus to the button.
     const openedByKeyboardRef = useRef(false);
     useEffect(() => {
@@ -25,7 +36,9 @@ const MessageMoreButton = ({ items, open, onOpenChange, isMine, reachable, }) =>
             // The popup mounts a frame or two after `open`; retry briefly.
             let tries = 0;
             const id = window.setInterval(() => {
-                const item = document.querySelector(".ant-dropdown:not(.ant-dropdown-hidden) [role=menuitem]");
+                const item = document.querySelector(asSheet
+                    ? ".ant-drawer-open [role=menuitem]"
+                    : ".ant-dropdown:not(.ant-dropdown-hidden) [role=menuitem]");
                 item === null || item === void 0 ? void 0 : item.focus();
                 if (item || ++tries > 20)
                     window.clearInterval(id);
@@ -36,7 +49,7 @@ const MessageMoreButton = ({ items, open, onOpenChange, isMine, reachable, }) =>
             openedByKeyboardRef.current = false;
             (_b = buttonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
         }
-    }, [open]);
-    return (_jsx(Dropdown, { menu: { items }, trigger: ["click"], open: open, onOpenChange: onOpenChange, placement: isMine ? "bottomRight" : "bottomLeft", overlayClassName: MORE_MENU_CLASSNAME, children: _jsx("button", { ref: buttonRef, type: "button", "data-testid": "message-more-button", "aria-label": t("message_actions"), title: t("message_actions"), "aria-haspopup": "menu", "aria-expanded": open, tabIndex: reachable || open ? 0 : -1, className: clsx("absolute top-1/2 z-[1] flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-lg border-0 bg-gray-5 p-0 text-gray-900 opacity-0 transition-opacity hover:bg-gray-25 focus-visible:opacity-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-200 group-hover/msg:opacity-100 group-focus-within/msg:opacity-100", open && "opacity-100", isMine ? "right-full mr-1" : "left-full ml-1"), children: _jsx(StrokeIcon, { name: "more", size: 18 }) }) }));
+    }, [open, asSheet]);
+    return (_jsxs(_Fragment, { children: [_jsx(Dropdown, { menu: { items }, trigger: ["click"], open: open && !asSheet, onOpenChange: onOpenChange, placement: isMine ? "bottomRight" : "bottomLeft", overlayClassName: MORE_MENU_CLASSNAME, children: _jsx("button", { ref: buttonRef, type: "button", "data-testid": "message-more-button", "aria-label": t("message_actions"), title: t("message_actions"), "aria-haspopup": isPhoneTier ? "dialog" : "menu", "aria-expanded": open, tabIndex: reachable || open ? 0 : -1, className: clsx("absolute top-1/2 z-[1] flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-lg border-0 bg-gray-5 p-0 text-gray-900 opacity-0 transition-opacity hover:bg-gray-25 focus-visible:opacity-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary-200 group-hover/msg:opacity-100 group-focus-within/msg:opacity-100 touch-any:opacity-100 touch:min-h-10 touch:min-w-10", open && "opacity-100", isMine ? "right-full mr-1" : "left-full ml-1"), children: _jsx(StrokeIcon, { name: "more", size: 18 }) }) }), sheetUsedRef.current && (_jsx(BottomSheet, { open: asSheet, title: t("message_actions"), onClose: () => onOpenChange(false), children: _jsx(Menu, { items: items, selectable: false, onClick: () => onOpenChange(false), className: SHEET_MENU_CLASSNAME }) }))] }));
 };
 export default MessageMoreButton;

package/dist/components/message/item/QuoteMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuoteMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/QuoteMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAS3D,UAAU,qBAAqB;IAC7B,OAAO,EAAE,WAAW,CAAC;IACrB,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CACrD;AAED,QAAA,MAAM,gBAAgB,GAAI,mCAGvB,qBAAqB,mDA0EvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"QuoteMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/QuoteMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAK3D,UAAU,qBAAqB;IAC7B,OAAO,EAAE,WAAW,CAAC;IACrB,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CACrD;AAED,QAAA,MAAM,gBAAgB,GAAI,mCAGvB,qBAAqB,mDAoBvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/message/item/QuoteMessage.js

@@ -1,62 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
-import { useCallback, useMemo } from "react";
-import useAuthStore from "../../../store/auth";
-import useConversationStore from "../../../store/conversation";
 import ReplyQuoteContent from "../../../components/message/reply/ReplyQuoteContent";
-import { useUserUsername } from "../../../hooks/user/useUserUsername";
-import { isSupportSessionAgentView } from "../../../utils/conversation";
+import { useQuotedSenderName } from "../../../hooks/message/useQuotedSenderName";
 const QuoteMessageItem = ({ message, onPressQuoteMessage, }) => {
     var _a, _b;
-    const userID = useAuthStore((state) => state.userID);
-    const isCrm = useAuthStore((state) => state.isCrm);
-    const conversationData = useConversationStore((state) => state.conversationData);
     const { t } = useTranslation();
-    const isChatSupport = useMemo(() => {
-        var _a, _b, _c;
-        try {
-            return (_c = (_b = (_a = JSON.parse((conversationData === null || conversationData === void 0 ? void 0 : conversationData.ex) || "{}")) === null || _a === void 0 ? void 0 : _a.sessionInfo) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.botId;
-        }
-        catch (_d) {
-            return false;
-        }
-    }, [conversationData === null || conversationData === void 0 ? void 0 : conversationData.ex]);
     const quoteMessage = ((_a = message === null || message === void 0 ? void 0 : message.quoteElem) === null || _a === void 0 ? void 0 : _a.quoteMessage) || ((_b = message === null || message === void 0 ? void 0 : message.atTextElem) === null || _b === void 0 ? void 0 : _b.quoteMessage);
-    // Outside CRM, an agent identifies quoted senders by username; the session
-    // owner keeps seeing the thread's own name.
-    const isAgentView = !isCrm && isSupportSessionAgentView(conversationData, userID);
-    const quotedUsername = useUserUsername(isAgentView && (quoteMessage === null || quoteMessage === void 0 ? void 0 : quoteMessage.sendID) !== userID
-        ? quoteMessage === null || quoteMessage === void 0 ? void 0 : quoteMessage.sendID
-        : undefined);
-    const getDisplayName = useCallback(({ name, id }) => {
-        if (isAgentView) {
-            if (id === userID)
-                return t("you");
-            return quotedUsername || name || "";
-        }
-        if (!name)
-            return "";
-        if (!isCrm && isChatSupport) {
-            return conversationData === null || conversationData === void 0 ? void 0 : conversationData.showName;
-        }
-        if (id === userID)
-            return t("you");
-        return name;
-    }, [
-        isAgentView,
-        quotedUsername,
-        isCrm,
-        isChatSupport,
-        conversationData === null || conversationData === void 0 ? void 0 : conversationData.showName,
-        userID,
-        t,
-    ]);
+    const { isMe, name } = useQuotedSenderName(quoteMessage);
     if (!quoteMessage)
         return null;
-    const title = getDisplayName({
-        name: quoteMessage.senderNickname,
-        id: quoteMessage.sendID,
-    });
+    const title = isMe ? t("you") : name;
     return (_jsx("div", { className: "flex cursor-pointer items-center overflow-hidden rounded-r-xl bg-white/70", onClick: () => onPressQuoteMessage === null || onPressQuoteMessage === void 0 ? void 0 : onPressQuoteMessage(quoteMessage.clientMsgID || ""), "data-cp-name": "QuoteMessageItem", children: _jsx(ReplyQuoteContent, { message: quoteMessage, title: title }) }));
 };
 export default QuoteMessageItem;

package/dist/components/message/reply/ReplyPreviewBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReplyPreviewBar.d.ts","sourceRoot":"","sources":["../../../../src/components/message/reply/ReplyPreviewBar.tsx"],"names":[],"mappings":"AAQA,eAAO,MAAM,eAAe,sDAmD3B,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ReplyPreviewBar.d.ts","sourceRoot":"","sources":["../../../../src/components/message/reply/ReplyPreviewBar.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,eAAe,sDAuC3B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/message/reply/ReplyPreviewBar.js

@@ -1,30 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 import { AdaptiveIcon } from "../../../components/icon/AdaptiveIcon";
-import useAuthStore from "../../../store/auth";
 import useConversationStore from "../../../store/conversation";
-import { useUserUsername } from "../../../hooks/user/useUserUsername";
-import { isSupportSessionAgentView } from "../../../utils/conversation";
+import { useQuotedSenderName } from "../../../hooks/message/useQuotedSenderName";
 import { ReplyQuoteContent } from "./ReplyQuoteContent";
 export const ReplyPreviewBar = () => {
     const { t } = useTranslation();
     const quotedMessage = useConversationStore((state) => state.quotedMessage);
     const setQuotedMessage = useConversationStore((state) => state.setQuotedMessage);
-    const conversationData = useConversationStore((state) => state.conversationData);
-    const userID = useAuthStore((state) => state.userID);
-    const isCrm = useAuthStore((state) => state.isCrm);
-    const isMe = (quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.sendID) === userID;
-    // Matches the sent quote's title, which shows agents outside CRM the username.
-    const isAgentView = !isCrm && isSupportSessionAgentView(conversationData, userID);
-    const quotedUsername = useUserUsername(isAgentView && !isMe ? quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.sendID : undefined);
+    // Same name the sent quote will carry.
+    const { isMe, name } = useQuotedSenderName(quotedMessage);
     const handleClearQuotedMessage = () => {
         setQuotedMessage(null);
     };
     if (!quotedMessage)
         return null;
-    const senderName = isMe
-        ? t("your_self")
-        : quotedUsername || quotedMessage.senderNickname || "";
+    const senderName = isMe ? t("your_self") : name;
     return (_jsxs("div", { "data-testid": "reply-preview-bar", "data-cp-name": "ReplyPreviewBar", className: "flex h-[59px] w-full shrink-0 items-center bg-gray-200/10 px-2 py-1", children: [_jsx(ReplyQuoteContent, { message: quotedMessage, title: t("reply_to", { name: senderName }) }), _jsx("button", { type: "button", onClick: handleClearQuotedMessage, "aria-label": t("cancel"), "data-testid": "reply-preview-bar-close", className: "flex h-4 w-4 shrink-0 items-center justify-center", children: _jsx(AdaptiveIcon, { stroke: "x", font: "close-o", size: 16, className: "text-gray-600" }) })] }));
 };
 export default ReplyPreviewBar;

package/dist/components/rich-text-editor/RichTextEditor.d.ts

@@ -6,7 +6,9 @@ interface RichTextEditorProps {
     onFilesChange?: (files: UploadFile[]) => void;
     minHeight?: string;
     showMediaUpload?: boolean;
+    /** CRM: hide the emoji button on phones (the system keyboard has emoji). */
+    hideEmojiOnPhone?: boolean;
 }
-export default function RichTextEditor({ initialHtml, placeholder, onChange, onFilesChange, minHeight, showMediaUpload, }: RichTextEditorProps): import("react/jsx-runtime").JSX.Element;
+export default function RichTextEditor({ initialHtml, placeholder, onChange, onFilesChange, minHeight, showMediaUpload, hideEmojiOnPhone, }: RichTextEditorProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=RichTextEditor.d.ts.map

package/dist/components/rich-text-editor/RichTextEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../../../src/components/rich-text-editor/RichTextEditor.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AA0ClC,UAAU,mBAAmB;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,WAAW,EACX,WAAW,EACX,QAAQ,EACR,aAAa,EACb,SAAmB,EACnB,eAAsB,GACvB,EAAE,mBAAmB,2CA6DrB"}
+{"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../../../src/components/rich-text-editor/RichTextEditor.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AA2ClC,UAAU,mBAAmB;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,WAAW,EACX,WAAW,EACX,QAAQ,EACR,aAAa,EACb,SAAmB,EACnB,eAAsB,EACtB,gBAAwB,GACzB,EAAE,mBAAmB,2CAkErB"}

package/dist/components/rich-text-editor/RichTextEditor.js

@@ -13,6 +13,7 @@ import { $getRoot } from "lexical";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { useEffect } from "react";
 import { ToolbarPlugin } from "../../components/message/footer/ToolbarPlugin";
+import clsx from "clsx";
 import MediaActions from "../../components/message/footer/MediaActions";
 import { FilePreviewList } from "../../components/message/footer/FilePreview";
 import { editorTheme, editorNodes, editorOnError, } from "../../components/message/footer/editorConfig";
@@ -38,7 +39,7 @@ function HtmlPlugin({ initialHtml }) {
     }, [editor, initialHtml]);
     return null;
 }
-export default function RichTextEditor({ initialHtml, placeholder, onChange, onFilesChange, minHeight = "160px", showMediaUpload = true, }) {
+export default function RichTextEditor({ initialHtml, placeholder, onChange, onFilesChange, minHeight = "160px", showMediaUpload = true, hideEmojiOnPhone = false, }) {
     const [listUploadFiles, setListUploadFiles] = useState([]);
     const handleChange = (editorState, editor, tags) => {
         if (tags.has("initial-html"))
@@ -58,5 +59,6 @@ export default function RichTextEditor({ initialHtml, placeholder, onChange, onF
         setListUploadFiles(files);
         onFilesChange === null || onFilesChange === void 0 ? void 0 : onFilesChange(files);
     };
-    return (_jsxs(LexicalComposer, { initialConfig: EDITOR_CONFIG, children: [_jsxs("div", { className: "border border-gray-200 rounded-lg", children: [_jsx(FilePreviewList, { files: listUploadFiles, onRemove: handleRemoveFile }), _jsx("div", { className: "relative", children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "px-3 py-2 text-sm outline-none", style: { minHeight } }), ErrorBoundary: LexicalErrorBoundary, placeholder: placeholder ? (_jsx("div", { className: "absolute top-2 left-3 pointer-events-none", children: _jsx("p", { className: "text-gray-400 text-sm", children: placeholder }) })) : null }) }), _jsxs("div", { className: "flex items-center border-t border-gray-100 px-2 py-1", children: [_jsx(ToolbarPlugin, {}), _jsx(MediaActions, { listUploadFiles: listUploadFiles, onFilesChange: handleFilesChange, showMediaUpload: showMediaUpload })] })] }), _jsx(LinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(OnChangePlugin, { onChange: handleChange, ignoreSelectionChange: true }), _jsx(HtmlPlugin, { initialHtml: initialHtml })] }));
+    return (_jsxs(LexicalComposer, { initialConfig: EDITOR_CONFIG, children: [_jsxs("div", { className: "border border-gray-200 rounded-lg", children: [_jsx(FilePreviewList, { files: listUploadFiles, onRemove: handleRemoveFile }), _jsx("div", { className: "relative", children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "px-3 py-2 text-sm outline-none", style: { minHeight } }), ErrorBoundary: LexicalErrorBoundary, placeholder: placeholder ? (_jsx("div", { className: "absolute top-2 left-3 pointer-events-none", children: _jsx("p", { className: "text-gray-400 text-sm", children: placeholder }) })) : null }) }), _jsxs("div", { className: clsx("flex items-center border-t border-gray-100 px-2 py-1", hideEmojiOnPhone &&
+                            "flex-wrap max-sm:[&_[data-cp-name=ToolbarPlugin]]:!gap-1 max-sm:[&_[data-cp-name=ToolbarPlugin]]:!px-1"), children: [_jsx(ToolbarPlugin, {}), _jsx(MediaActions, { listUploadFiles: listUploadFiles, onFilesChange: handleFilesChange, showMediaUpload: showMediaUpload, hideEmojiOnPhone: hideEmojiOnPhone })] })] }), _jsx(LinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(OnChangePlugin, { onChange: handleChange, ignoreSelectionChange: true }), _jsx(HtmlPlugin, { initialHtml: initialHtml })] }));
 }

package/dist/components/search-conversation/item/SearchItemAsGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchItemAsGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/search-conversation/item/SearchItemAsGroup.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,qCAAqC,CAAC;AAUxF,UAAU,sBAAsB;IAC9B,KAAK,EAAE,4BAA4B,CAAC;IACpC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,4CA4FvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"SearchItemAsGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/search-conversation/item/SearchItemAsGroup.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,qCAAqC,CAAC;AAUxF,UAAU,sBAAsB;IAC9B,KAAK,EAAE,4BAA4B,CAAC;IACpC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,4CA8FvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/search-conversation/item/SearchItemAsGroup.js

@@ -7,9 +7,9 @@ import { AdaptiveIcon } from "../../../components/icon/AdaptiveIcon";
 import { useTranslation } from "react-i18next";
 import { GroupVisibility } from "@droppii-org/wasm-client-sdk";
 import useConversationStore from "../../../store/conversation";
-import { useChatNavigate } from "../../../hooks/conversation/useChatNavigate";
+import { useDeskThreadNavigation } from "../../../hooks/conversation/useDeskThreadNavigation";
 import { highlightSearch, sanitizeHtml } from "../../../utils/common";
-import GroupCompositeAvatar from "../../../components/group/GroupCompositeAvatar";
+import GroupAvatar from "../../../components/group/GroupAvatar";
 import RowChip from "../../../components/conversation/RowChip";
 import { StrokeIcon } from "../../../components/icon/StrokeIcon";
 import { useOpenPdpSearchResult } from "../../../hooks/search/useOpenPdpSearchResult";
@@ -18,7 +18,7 @@ const SearchItemAsGroup = (props) => {
     const { group, searchTerm = "" } = props;
     const { t } = useTranslation();
     const isCrm = useAuthStore((state) => state.isCrm);
-    const onNavigate = useChatNavigate();
+    const { openThread } = useDeskThreadNavigation();
     const scope = useSearchScope();
     const openPdpResult = useOpenPdpSearchResult();
     const setConversationData = useConversationStore((state) => state.setConversationData);
@@ -39,9 +39,9 @@ const SearchItemAsGroup = (props) => {
         newSearchParams.delete("userId");
         newSearchParams.delete("groupId");
         newSearchParams.delete("botId");
-        onNavigate(`${window.location.pathname}?${newSearchParams.toString()}`);
+        openThread({ threadId: conversation.conversationID }, `${window.location.pathname}?${newSearchParams.toString()}`);
     };
-    return (_jsxs("div", Object.assign({ className: searchRowClass(isCrm) }, clickableProps(onPressItem), { "data-cp-name": "SearchItemAsGroup", children: [_jsx(GroupCompositeAvatar, { groupID: group.groupId, faceURL: conversation.faceURL, groupName: conversation.showName, size: isCrm ? 40 : 48 }), _jsxs("div", { className: "flex flex-col flex-1 min-w-0 gap-0.5", children: [_jsx("p", { className: isCrm
+    return (_jsxs("div", Object.assign({ className: searchRowClass(isCrm) }, clickableProps(onPressItem), { "data-cp-name": "SearchItemAsGroup", children: [_jsx(GroupAvatar, { faceURL: conversation.faceURL, groupName: conversation.showName, size: isCrm ? 40 : 48 }), _jsxs("div", { className: "flex flex-col flex-1 min-w-0 gap-0.5", children: [_jsx("p", { className: isCrm
                             ? "m-0 truncate text-sm font-medium text-gray-900"
                             : "text-sm font-semibold truncate", dangerouslySetInnerHTML: {
                             __html: sanitizeHtml(highlightSearch(conversation.showName || "", searchTerm)),

package/dist/components/search-conversation/item/SearchItemAsMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchItemAsMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/search-conversation/item/SearchItemAsMessage.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAA4B,MAAM,8BAA8B,CAAC;AA0BrF,UAAU,wBAAwB;IAChC,OAAO,EAAE,WAAW,GAAG;QAAE,SAAS,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IAC/C,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2EAA2E;IAC3E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,mBAAmB,GAAI,OAAO,wBAAwB,4CAsJ3D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"SearchItemAsMessage.d.ts","sourceRoot":"","sources":["../../../../src/components/search-conversation/item/SearchItemAsMessage.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAA4B,MAAM,8BAA8B,CAAC;AA6BrF,UAAU,wBAAwB;IAChC,OAAO,EAAE,WAAW,GAAG;QAAE,SAAS,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IAC/C,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2EAA2E;IAC3E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,mBAAmB,GAAI,OAAO,wBAAwB,4CAqK3D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/search-conversation/item/SearchItemAsMessage.js

@@ -12,10 +12,13 @@ import { useTranslation } from "react-i18next";
 import useConversationStore from "../../../store/conversation";
 import { useMemo } from "react";
 import TintedAvatar from "../../../components/common/TintedAvatar";
+import GroupAvatar from "../../../components/group/GroupAvatar";
+import { isGroupConversation } from "../../../utils/imCommon";
 import RowChip from "../../../components/conversation/RowChip";
 import useAuthStore from "../../../store/auth";
 import { getConversationIdFromMessage } from "../../../utils/conversation";
 import { useOpenPdpSearchResult } from "../../../hooks/search/useOpenPdpSearchResult";
+import { useDeskThreadNavigation } from "../../../hooks/conversation/useDeskThreadNavigation";
 import { useSearchScope } from "../SearchScopeContext";
 // PDP labels the source by its inbox tab; BE's displayTag carries the CS team name.
 const PDP_TAG_LABEL_KEYS = {
@@ -31,6 +34,7 @@ const SearchItemAsMessage = (props) => {
     const scope = useSearchScope();
     const isPdpPortal = scope === "pdp-portal";
     const openPdpResult = useOpenPdpSearchResult();
+    const { openFromList } = useDeskThreadNavigation();
     const conversationData = useConversationStore((state) => state.conversationData);
     const useConversationDisplay = useMemo(() => {
         // PDP results span many threads, so show the sender like CRM does.
@@ -66,9 +70,17 @@ const SearchItemAsMessage = (props) => {
             .setConversationData(data, message.clientMsgID, {
             forceRevalidate: true,
         });
+        const previousId = useConversationStore.getState().selectedConversationId;
         useConversationStore
             .getState()
             .setSelectedConversationId(data.conversationID);
+        // CRM hits get a URL (and history entry) like list rows; hits inside the open thread don't.
+        if (isCrm && data.conversationID !== previousId) {
+            openFromList({
+                threadId: data.conversationID,
+                messageId: message.clientMsgID,
+            });
+        }
         onClick === null || onClick === void 0 ? void 0 : onClick();
     };
     let msgContent = "";
@@ -84,7 +96,7 @@ const SearchItemAsMessage = (props) => {
             msgContent = message === null || message === void 0 ? void 0 : message.content;
         }
     }
-    return (_jsxs("div", Object.assign({ className: searchRowClass(isCrm) }, clickableProps(onPressItem), { "data-cp-name": "SearchItemAsMessage", children: [_jsx("div", { children: isCrm ? (_jsx(TintedAvatar, { name: (_b = (useConversationDisplay
+    return (_jsxs("div", Object.assign({ className: searchRowClass(isCrm) }, clickableProps(onPressItem), { "data-cp-name": "SearchItemAsMessage", children: [_jsx("div", { children: !useConversationDisplay && isGroupConversation(conversationData !== null && conversationData !== void 0 ? conversationData : undefined) ? (_jsx(GroupAvatar, { faceURL: conversationData === null || conversationData === void 0 ? void 0 : conversationData.faceURL, groupName: conversationData === null || conversationData === void 0 ? void 0 : conversationData.showName, size: 40 })) : isCrm ? (_jsx(TintedAvatar, { name: (_b = (useConversationDisplay
                         ? message.senderNickname
                         : conversationData === null || conversationData === void 0 ? void 0 : conversationData.showName)) !== null && _b !== void 0 ? _b : "", src: useConversationDisplay
                         ? message.senderFaceUrl

package/dist/components/search-conversation/item/SearchItemAsUser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchItemAsUser.d.ts","sourceRoot":"","sources":["../../../../src/components/search-conversation/item/SearchItemAsUser.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAIhD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAclF,UAAU,qBAAqB;IAE7B,OAAO,EAAE,kBAAkB,GAAG,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,cAAc,CAAC,CAAC,CAAC;IAC9E,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,4CAsFrD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"SearchItemAsUser.d.ts","sourceRoot":"","sources":["../../../../src/components/search-conversation/item/SearchItemAsUser.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAIhD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAelF,UAAU,qBAAqB;IAE7B,OAAO,EAAE,kBAAkB,GAAG,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,cAAc,CAAC,CAAC,CAAC;IAC9E,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,4CA2FrD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/search-conversation/item/SearchItemAsUser.js

@@ -7,6 +7,7 @@ import { highlightSearch, sanitizeHtml } from "../../../utils/common";
 import useConversationStore from "../../../store/conversation";
 import { useTranslation } from "react-i18next";
 import { useOpenPdpSearchResult } from "../../../hooks/search/useOpenPdpSearchResult";
+import { useDeskThreadNavigation } from "../../../hooks/conversation/useDeskThreadNavigation";
 import { useSearchScope } from "../SearchScopeContext";
 import useAuthStore from "../../../store/auth";
 import { SessionStatus } from "../../../types/chat";
@@ -23,6 +24,7 @@ const SearchItemAsUser = (props) => {
     const { t } = useTranslation();
     const scope = useSearchScope();
     const openPdpResult = useOpenPdpSearchResult();
+    const { openFromList } = useDeskThreadNavigation();
     const isCrm = useAuthStore((state) => state.isCrm);
     const ownerName = `${(_a = session.owner) === null || _a === void 0 ? void 0 : _a.fullName}${((_b = session.owner) === null || _b === void 0 ? void 0 : _b.username) ? ` (${(_c = session.owner) === null || _c === void 0 ? void 0 : _c.username})` : ""}`;
     const onPressItem = async () => {
@@ -32,10 +34,14 @@ const SearchItemAsUser = (props) => {
         if (!(session === null || session === void 0 ? void 0 : session.conversation)) {
             return message.error(t("err_get_conversation"));
         }
+        const previousId = useConversationStore.getState().selectedConversationId;
         useConversationStore.getState().setConversationData(session.conversation);
         useConversationStore
             .getState()
             .setSelectedConversationId(session.conversationId);
+        if (isCrm && session.conversationId !== previousId) {
+            openFromList({ threadId: session.conversationId });
+        }
     };
     return (_jsxs("div", Object.assign({ className: searchRowClass(isCrm) }, clickableProps(onPressItem), { "data-cp-name": "SearchItemAsUser", children: [isCrm ? (_jsx(TintedAvatar, { name: ((_d = session.owner) === null || _d === void 0 ? void 0 : _d.fullName) || ((_e = session.owner) === null || _e === void 0 ? void 0 : _e.username) || "", src: (_f = session.owner) === null || _f === void 0 ? void 0 : _f.avatar, size: 40 })) : (_jsx(Avatar, { size: "large", src: (_g = session.owner) === null || _g === void 0 ? void 0 : _g.avatar, alt: (_h = session.owner) === null || _h === void 0 ? void 0 : _h.username, children: (_k = (_j = session.owner) === null || _j === void 0 ? void 0 : _j.fullName) === null || _k === void 0 ? void 0 : _k.charAt(0).toUpperCase() })), _jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [_jsx("p", { className: isCrm
                             ? "m-0 truncate text-sm font-medium text-gray-900"

package/dist/components/session/DeskAssignedSession.js

@@ -54,9 +54,9 @@ const DeskAssignedSession = ({ variant = "inline" }) => {
         };
     }, [refetch]);
     if (collapsed) {
-        return (_jsx("div", { className: "flex flex-col items-center shrink-0 pt-3 rounded-xl bg-white shadow-sm", style: { width: LAYOUT_WIDTHS.folderCollapsed }, "data-cp-name": "DeskAssignedSession", children: _jsx(Tooltip, { title: t("folder_panel_expand"), placement: "right", children: _jsx(Button, { type: "text", className: "text-gray-600 w-8 h-8 p-0", "aria-label": t("folder_panel_expand"), onClick: () => setFolderCollapsedChoice(false), children: _jsx(StrokeIcon, { name: "chevrons-right", size: 20 }) }) }) }));
+        return (_jsx("div", { className: "flex flex-col items-center shrink-0 pt-3 rounded-xl bg-white shadow-sm", style: { width: LAYOUT_WIDTHS.folderCollapsed }, "data-cp-name": "DeskAssignedSession", children: _jsx(Tooltip, { title: t("folder_panel_expand"), placement: "right", children: _jsx(Button, { type: "text", className: "text-gray-600 w-8 h-8 p-0 touch:min-h-10 touch:min-w-10", "aria-label": t("folder_panel_expand"), onClick: () => setFolderCollapsedChoice(false), children: _jsx(StrokeIcon, { name: "chevrons-right", size: 20 }) }) }) }));
     }
-    return (_jsxs("aside", { "aria-label": t("folder_panel_title"), className: `flex flex-col h-full shrink-0 overflow-hidden rounded-xl bg-white ${isOverlay ? "shadow-lg" : "shadow-sm"}`, style: { width: LAYOUT_WIDTHS.folder }, "data-cp-name": "DeskAssignedSession", children: [_jsxs("div", { className: "flex items-center justify-between h-14 pl-4 pr-2 border-b border-gray-25 shrink-0", children: [_jsx("span", { className: "text-base font-bold flex-1 truncate", children: t("desk_brand") }), _jsx(Tooltip, { title: t(isOverlay ? "folder_panel_close" : "folder_panel_collapse"), children: _jsx(Button, { type: "text", className: "text-gray-600 w-8 h-8 p-0", "aria-label": t(isOverlay ? "folder_panel_close" : "folder_panel_collapse"), onClick: () => isOverlay ? setFolderOverlayOpen(false) : setFolderCollapsedChoice(true), children: _jsx(StrokeIcon, { name: isOverlay ? "x" : "chevrons-left", size: 18 }) }) })] }), _jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto px-2 pb-2 pt-1", children: [_jsx("div", { className: "px-2 pb-1 pt-3 text-xs font-medium text-gray-600", children: t("my_messages") }), sessionSummary && (_jsx(SessionFolderList, { summary: sessionSummary, activeFolderId: activeFolderId, onFilterSelect: onFilterSelect, allGroups: {
+    return (_jsxs("aside", { "aria-label": t("folder_panel_title"), className: `flex flex-col h-full shrink-0 overflow-hidden rounded-xl bg-white ${isOverlay ? "shadow-lg" : "shadow-sm"}`, style: { width: LAYOUT_WIDTHS.folder }, "data-cp-name": "DeskAssignedSession", children: [_jsxs("div", { className: "flex items-center justify-between h-14 pl-4 pr-2 border-b border-gray-25 shrink-0", children: [_jsx("span", { className: "text-base font-bold flex-1 truncate", children: t("desk_brand") }), _jsx(Tooltip, { title: t(isOverlay ? "folder_panel_close" : "folder_panel_collapse"), children: _jsx(Button, { type: "text", className: "text-gray-600 w-8 h-8 p-0 touch:min-h-10 touch:min-w-10", "aria-label": t(isOverlay ? "folder_panel_close" : "folder_panel_collapse"), onClick: () => isOverlay ? setFolderOverlayOpen(false) : setFolderCollapsedChoice(true), children: _jsx(StrokeIcon, { name: isOverlay ? "x" : "chevrons-left", size: 18 }) }) })] }), _jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto px-2 pb-2 pt-1", children: [_jsx("div", { className: "px-2 pb-1 pt-3 text-xs font-medium text-gray-600", children: t("my_messages") }), sessionSummary && (_jsx(SessionFolderList, { summary: sessionSummary, activeFolderId: activeFolderId, onFilterSelect: onFilterSelect, allGroups: {
                             active: viewMode === "allGroups",
                             onSelect: onAllGroupsSelect,
                         } })), _jsx(DeskTeamInbox, {})] })] }));

package/dist/components/session/FolderRow.js

@@ -10,7 +10,7 @@ export const FolderCount = ({ count, highlighted, }) => {
     return highlighted ? (_jsx("span", { className: "inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full bg-danger-600 px-1.5 text-xs font-semibold tabular-nums text-white", children: formatCount(count) })) : (_jsx("span", { className: "shrink-0 text-xs tabular-nums text-gray-600", children: formatCount(count) }));
 };
 /** One selectable folder in the desk sidebar. */
-const FolderRow = ({ label, iconName, iconClassName, count = 0, highlighted, active = false, indentClassName = "pl-2", onClick, }) => (_jsxs("button", { type: "button", onClick: onClick, "aria-current": active ? "true" : undefined, "data-cp-name": "FolderRow", className: clsx("flex h-9 min-w-0 flex-1 items-center gap-2 rounded-lg pr-2 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400", indentClassName, active
+const FolderRow = ({ label, iconName, iconClassName, count = 0, highlighted, active = false, indentClassName = "pl-2", onClick, }) => (_jsxs("button", { type: "button", onClick: onClick, "aria-current": active ? "true" : undefined, "data-cp-name": "FolderRow", className: clsx("flex h-9 touch:min-h-10 min-w-0 flex-1 items-center gap-2 rounded-lg pr-2 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400", indentClassName, active
         ? "bg-primary-25 font-semibold text-primary-500"
         : "text-gray-900 hover:bg-gray-5"), children: [_jsx(StrokeIcon, { name: iconName, size: 18, className: iconClassName }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: label }), _jsx(FolderCount, { count: count, highlighted: highlighted })] }));
 export default FolderRow;

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

@@ -2,10 +2,8 @@ import type { ChangeEvent } from "react";
 export type GroupInfoRow = "member-permission" | "admin-permission" | "invite-link";
 export type GroupInfoConfirm = "leave" | "disband" | "delete";
 export interface GroupInfoBodyCrmProps {
-    groupID: string;
     groupName?: string;
     faceURL?: string;
-    ownerUserID?: string;
     introduction?: string;
     memberCount?: number;
     isPublic: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"GroupInfoBodyCrm.d.ts","sourceRoot":"","sources":["../../../src/components/thread/GroupInfoBodyCrm.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAUzC,MAAM,MAAM,YAAY,GAAG,mBAAmB,GAAG,kBAAkB,GAAG,aAAa,CAAC;AACpF,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE9D,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,OAAO,CAAC;IACrB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,cAAc,EAAE,OAAO,CAAC;IACxB,aAAa,EAAE,OAAO,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,EAAE,OAAO,CAAC;IACxB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,aAAa,EAAE,OAAO,CAAC;IACvB,sBAAsB,EAAE,OAAO,CAAC;IAChC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,qBAAqB,EAAE,OAAO,CAAC;IAC/B,iBAAiB,EAAE,OAAO,CAAC;IAC3B,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,MAAM,GAAG,aAAa,GAAG,IAAI,CAAC;IAC5C,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAClD,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,KAAK,IAAI,CAAC;IACrD,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,KAAK,IAAI,CAAC;IACtD,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,KAAK,IAAI,CAAC;IACpD,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D,oBAAoB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,mBAAmB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,SAAS,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,SAAS,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC/C;AA6BD,kGAAkG;AAClG,QAAA,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,4CA8JrD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"GroupInfoBodyCrm.d.ts","sourceRoot":"","sources":["../../../src/components/thread/GroupInfoBodyCrm.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAUzC,MAAM,MAAM,YAAY,GAAG,mBAAmB,GAAG,kBAAkB,GAAG,aAAa,CAAC;AACpF,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE9D,MAAM,WAAW,qBAAqB;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,OAAO,CAAC;IACrB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,cAAc,EAAE,OAAO,CAAC;IACxB,aAAa,EAAE,OAAO,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,EAAE,OAAO,CAAC;IACxB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,aAAa,EAAE,OAAO,CAAC;IACvB,sBAAsB,EAAE,OAAO,CAAC;IAChC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,qBAAqB,EAAE,OAAO,CAAC;IAC/B,iBAAiB,EAAE,OAAO,CAAC;IAC3B,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,MAAM,GAAG,aAAa,GAAG,IAAI,CAAC;IAC5C,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAClD,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,KAAK,IAAI,CAAC;IACrD,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,KAAK,IAAI,CAAC;IACtD,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,KAAK,IAAI,CAAC;IACpD,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D,oBAAoB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,mBAAmB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,SAAS,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,SAAS,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC/C;AA6BD,kGAAkG;AAClG,QAAA,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,4CA4JrD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/thread/GroupInfoBodyCrm.js

@@ -4,7 +4,7 @@ import { useEffect, useRef } from "react";
 import { Input } from "antd";
 import { useTranslation } from "react-i18next";
 import { CrmIcon as Icon } from "../../components/group/crmIcon";
-import GroupCompositeAvatar from "../../components/group/GroupCompositeAvatar";
+import GroupAvatar from "../../components/group/GroupAvatar";
 import { ACCEPTED_IMAGE_TYPES } from "../../utils/fileValidation";
 import { FOCUS_RING_CLASS } from "../../utils/a11yClickable";
 import { DangerRow, InfoCard, NavRow, SectionLabel, SwitchRow } from "./GroupInfoRows";
@@ -29,7 +29,7 @@ const GroupInfoBodyCrm = (props) => {
     const nameChanged = props.nameValue.trim() !== "" && props.nameValue.trim() !== ((_a = props.groupName) !== null && _a !== void 0 ? _a : "");
     const descChanged = props.descriptionValue.trim() !== ((_b = props.introduction) !== null && _b !== void 0 ? _b : "");
     const hasAdminRows = props.canConfigPermissions || props.showInviteLink;
-    return (_jsxs("div", { className: "flex flex-1 flex-col gap-4 overflow-y-auto p-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("span", { className: "relative block h-[60px] w-[60px] shrink-0", children: [_jsx(GroupCompositeAvatar, { groupID: props.groupID, faceURL: props.faceURL, ownerUserID: props.ownerUserID, groupName: props.groupName, size: 56 }), props.isAvatarUploading && (_jsx("span", { className: "absolute left-0 top-0 flex h-14 w-14 items-center justify-center rounded-full bg-gray-900/30", children: _jsx("span", { className: "h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" }) })), props.canEditAvatar && (_jsxs(_Fragment, { children: [_jsx("input", { ref: props.avatarInputRef, type: "file", accept: ACCEPTED_IMAGE_TYPES.join(", "), className: "hidden", onChange: props.onAvatarSelect }), _jsx("button", { type: "button", disabled: props.isAvatarUploading, onClick: props.onAvatarClick, "aria-label": t("group_info_edit_avatar"), title: t("group_info_edit_avatar"), className: `absolute bottom-0 right-0 flex h-6 w-6 items-center justify-center rounded-full border-2 border-white bg-gray-900 text-white ${FOCUS_RING_CLASS}`, children: _jsx(Icon, { icon: "camera-o", size: 12 }) })] }))] }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [editingField === "name" ? (_jsx(Input, { autoFocus: true, value: props.nameValue, onChange: (event) => props.onNameChange(event.target.value), maxLength: 255, disabled: props.isSaving, "aria-label": t("group_info_edit_name"), onPressEnter: () => nameChanged && props.onSaveEdit("name") })) : (_jsxs("span", { className: "flex items-center gap-0.5", children: [_jsx("span", { className: "truncate text-base font-semibold text-gray-900", title: props.groupName, children: props.groupName }), props.canEditName && (_jsx("button", { type: "button", className: `h-7 w-7 ${ICON_BUTTON}`, onClick: () => props.onStartEdit("name"), "aria-label": t("group_info_edit_name"), title: t("group_info_edit_name"), children: _jsx(Icon, { icon: "edit-o", size: 16 }) }))] })), _jsxs("span", { className: "flex flex-wrap gap-1.5", children: [_jsx(Chip, { icon: props.isPublic ? "globe-o" : "lock-o", tone: "primary", children: t(props.isPublic ? "group_visibility_public" : "group_visibility_private") }), typeof props.memberCount === "number" && (_jsx(Chip, { icon: "user-two-o", tone: "neutral", children: t("member_count", { count: props.memberCount }) }))] })] })] }), editingField === "name" && (_jsx(EditActions, { disabled: props.isSaving, canSave: !props.isSaving && nameChanged, onCancel: () => props.onCancelEdit("name"), onSave: () => props.onSaveEdit("name") })), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-xs font-medium text-gray-600", children: t("description") }), editingField === "description" ? (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Input.TextArea, { ref: descriptionRef, value: props.descriptionValue, onChange: (event) => props.onDescriptionChange(event.target.value), placeholder: t("enter_group_description"), "aria-label": t("description"), autoSize: { minRows: 2, maxRows: 5 }, maxLength: 500, showCount: true, disabled: props.isSaving }), _jsx(EditActions, { disabled: props.isSaving, canSave: !props.isSaving && descChanged, onCancel: () => props.onCancelEdit("description"), onSave: () => props.onSaveEdit("description") })] })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "m-0 whitespace-pre-wrap break-words text-sm text-gray-600", children: hasDescription ? props.introduction : t("group_info_no_description") }), props.canEditDescription && (_jsxs("button", { type: "button", onClick: () => props.onStartEdit("description"), className: `flex h-6 items-center gap-1.5 self-start rounded-lg text-[13px] font-medium text-primary-500 hover:text-primary-600 ${FOCUS_RING_CLASS}`, children: [_jsx(Icon, { icon: hasDescription ? "edit-o" : "plus-o", size: 14 }), t(hasDescription ? "group_info_edit_description" : "group_info_add_description")] }))] }))] }), _jsx(SectionLabel, { children: t("group_settings_section") }), _jsx(InfoCard, { children: [
+    return (_jsxs("div", { className: "flex flex-1 flex-col gap-4 overflow-y-auto p-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("span", { className: "relative block h-[60px] w-[60px] shrink-0", children: [_jsx(GroupAvatar, { faceURL: props.faceURL, groupName: props.groupName, size: 56 }), props.isAvatarUploading && (_jsx("span", { className: "absolute left-0 top-0 flex h-14 w-14 items-center justify-center rounded-full bg-gray-900/30", children: _jsx("span", { className: "h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" }) })), props.canEditAvatar && (_jsxs(_Fragment, { children: [_jsx("input", { ref: props.avatarInputRef, type: "file", accept: ACCEPTED_IMAGE_TYPES.join(", "), className: "hidden", onChange: props.onAvatarSelect }), _jsx("button", { type: "button", disabled: props.isAvatarUploading, onClick: props.onAvatarClick, "aria-label": t("group_info_edit_avatar"), title: t("group_info_edit_avatar"), className: `absolute bottom-0 right-0 flex h-6 w-6 items-center justify-center rounded-full border-2 border-white bg-gray-900 text-white ${FOCUS_RING_CLASS}`, children: _jsx(Icon, { icon: "camera-o", size: 12 }) })] }))] }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [editingField === "name" ? (_jsx(Input, { autoFocus: true, value: props.nameValue, onChange: (event) => props.onNameChange(event.target.value), maxLength: 255, disabled: props.isSaving, "aria-label": t("group_info_edit_name"), onPressEnter: () => nameChanged && props.onSaveEdit("name") })) : (_jsxs("span", { className: "flex items-center gap-0.5", children: [_jsx("span", { className: "truncate text-base font-semibold text-gray-900", title: props.groupName, children: props.groupName }), props.canEditName && (_jsx("button", { type: "button", className: `h-7 w-7 ${ICON_BUTTON}`, onClick: () => props.onStartEdit("name"), "aria-label": t("group_info_edit_name"), title: t("group_info_edit_name"), children: _jsx(Icon, { icon: "edit-o", size: 16 }) }))] })), _jsxs("span", { className: "flex flex-wrap gap-1.5", children: [_jsx(Chip, { icon: props.isPublic ? "globe-o" : "lock-o", tone: "primary", children: t(props.isPublic ? "group_visibility_public" : "group_visibility_private") }), typeof props.memberCount === "number" && (_jsx(Chip, { icon: "user-two-o", tone: "neutral", children: t("member_count", { count: props.memberCount }) }))] })] })] }), editingField === "name" && (_jsx(EditActions, { disabled: props.isSaving, canSave: !props.isSaving && nameChanged, onCancel: () => props.onCancelEdit("name"), onSave: () => props.onSaveEdit("name") })), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-xs font-medium text-gray-600", children: t("description") }), editingField === "description" ? (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Input.TextArea, { ref: descriptionRef, value: props.descriptionValue, onChange: (event) => props.onDescriptionChange(event.target.value), placeholder: t("enter_group_description"), "aria-label": t("description"), autoSize: { minRows: 2, maxRows: 5 }, maxLength: 500, showCount: true, disabled: props.isSaving }), _jsx(EditActions, { disabled: props.isSaving, canSave: !props.isSaving && descChanged, onCancel: () => props.onCancelEdit("description"), onSave: () => props.onSaveEdit("description") })] })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "m-0 whitespace-pre-wrap break-words text-sm text-gray-600", children: hasDescription ? props.introduction : t("group_info_no_description") }), props.canEditDescription && (_jsxs("button", { type: "button", onClick: () => props.onStartEdit("description"), className: `flex h-6 items-center gap-1.5 self-start rounded-lg text-[13px] font-medium text-primary-500 hover:text-primary-600 ${FOCUS_RING_CLASS}`, children: [_jsx(Icon, { icon: hasDescription ? "edit-o" : "plus-o", size: 14 }), t(hasDescription ? "group_info_edit_description" : "group_info_add_description")] }))] }))] }), _jsx(SectionLabel, { children: t("group_settings_section") }), _jsx(InfoCard, { children: [
                     _jsx(SwitchRow, { icon: "bell-o", label: t("notification"), checked: props.notifyEnabled, loading: props.isTogglingNotification, onChange: props.onToggleNotification }, "notify"),
                     props.showAllowSend && (_jsx(SwitchRow, { icon: "chat-square-o", label: t("members_can_send_message"), hint: t("allow_send_message_hint"), checked: props.allowSendMessage, loading: props.isTogglingSendMessage, onChange: props.onToggleSendMessage }, "send")),
                 ] }), hasAdminRows && (_jsxs(_Fragment, { children: [_jsx(SectionLabel, { children: t("group_admin_section") }), _jsx(InfoCard, { children: [

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

@@ -1 +1 @@
-{"version":3,"file":"GroupThreadInfo.d.ts","sourceRoot":"","sources":["../../../src/components/thread/GroupThreadInfo.tsx"],"names":[],"mappings":"AA0BA,MAAM,WAAW,qBAAqB;IACpC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,UAAU,oBAAoB;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,qBAAqB,CAAC;CAChC;AASD,QAAA,MAAM,eAAe,GAAI,qBAAqB,oBAAoB,mDAqrBjE,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"GroupThreadInfo.d.ts","sourceRoot":"","sources":["../../../src/components/thread/GroupThreadInfo.tsx"],"names":[],"mappings":"AA0BA,MAAM,WAAW,qBAAqB;IACpC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,UAAU,oBAAoB;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,qBAAqB,CAAC;CAChC;AASD,QAAA,MAAM,eAAe,GAAI,qBAAqB,oBAAoB,mDAirBjE,CAAC;AAEF,eAAe,eAAe,CAAC"}