@webinex/chatify 2.0.0-alpha12 → 2.0.0-alpha14

package/dist/{Chatify-CwAfN1wu.js → Chatify-CP2jgo8d.js}

@@ -2,14 +2,14 @@ import './Chatify.css';var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { Button, Avatar as Avatar$1, List, Space, Tooltip, Input, Skeleton, Menu, Row, Col, Form, DatePicker, Checkbox } from "antd";
+import { Button, Avatar as Avatar$1, List, Space, Tooltip, Row, Col, Input, Skeleton, Menu, Form, DatePicker, Checkbox } from "antd";
 import React, { useContext, useState, useMemo, forwardRef, useCallback, useRef, useEffect, memo, useLayoutEffect } from "react";
-import { SettingOutlined, DownloadOutlined, DeleteOutlined, EyeInvisibleOutlined, EyeOutlined, TeamOutlined, CloseOutlined, EditOutlined, UsergroupAddOutlined, UserAddOutlined, UsergroupDeleteOutlined, UserDeleteOutlined, SendOutlined, PaperClipOutlined } from "@ant-design/icons";
+import { SettingOutlined, DownloadOutlined, DeleteOutlined, EyeInvisibleOutlined, EyeOutlined, TeamOutlined, CloseOutlined, EditOutlined, UsergroupAddOutlined, UserAddOutlined, UsergroupDeleteOutlined, UserDeleteOutlined, SendOutlined, PaperClipOutlined, LeftOutlined } from "@ant-design/icons";
 import { createApi, fakeBaseQuery } from "@reduxjs/toolkit/query/react";
 import { useSelector } from "react-redux";
 import * as SignalR from "@microsoft/signalr";
-import { isHotkey } from "is-hotkey";
 import dayjs from "dayjs";
+import { isHotkey } from "is-hotkey";
 const DEFAULT_COLOR_OPTIONS = {
   saturation: 100,
   lightness: 75
@@ -80,15 +80,16 @@ function useChatContext() {
   return useContext(ChatReactContext);
 }
 function ChatContext(props) {
-  const { id, children } = props;
+  const { id, children, compact } = props;
   const [showMembers, onShowMembers] = useState(false);
   const value = useMemo(
     () => ({
       id,
       showMembers,
-      onShowMembers
+      onShowMembers,
+      compact
     }),
-    [id, showMembers]
+    [id, showMembers, compact]
   );
   return /* @__PURE__ */ jsx(ChatReactContext.Provider, { value, children });
 }
@@ -931,6 +932,69 @@ const _Avatar = forwardRef(
 );
 _Avatar.displayName = "Avatar";
 const Avatar = customize("Avatar", _Avatar);
+const LocalizerContext = React.createContext(null);
+function useLocalizer() {
+  return useContext(LocalizerContext);
+}
+const base = {
+  isToday: (value) => dayjs(value).isSame(dayjs(), "day"),
+  timestamp: (value) => dayjs(value).format("HH:mm"),
+  dateTime: (value) => dayjs(value).format("DD/MM/YYYY HH:mm"),
+  message: {
+    read: () => "Read",
+    reading: () => "Reading...",
+    sending: () => "Sending..."
+  },
+  addChat: {
+    title: () => "Add chat",
+    name: {
+      label: () => "Name",
+      required: () => `Name is required`,
+      max250: () => "Max 250 characters allowed"
+    },
+    members: {
+      label: () => "Members",
+      required: () => "Members is required"
+    },
+    submitBtn: () => "Submit"
+  },
+  system: {
+    "chatify://chat-created": () => "Chat created",
+    "chatify://member-added": () => "New member added",
+    "chatify://member-removed": () => "Member removed",
+    "chatify://chat-name-changed": (_, { newName }) => `Chat name changed to '${newName}'`
+  },
+  input: {
+    placeholder: (type) => type === "default" ? "Start typing... (Press Enter to send, and Shift+Enter to start a new line)" : "Type a message..."
+  },
+  settings: {
+    members: () => "Members"
+  },
+  size: {
+    bytes: (value) => `${value.toLocaleString(void 0, { minimumFractionDigits: 0, maximumFractionDigits: 2 })} bytes`,
+    kb: (value) => `${value.toLocaleString(void 0, { minimumFractionDigits: 0, maximumFractionDigits: 2 })} KB`,
+    mb: (value) => `${value.toLocaleString(void 0, { minimumFractionDigits: 0, maximumFractionDigits: 2 })} MB`
+  },
+  chatList: {
+    topShown: (count) => `Latest active ${count} chat${count !== 1 ? "s" : ""} shown`
+  },
+  members: {
+    title: (chatName) => `Members of ${chatName}`
+  },
+  autoReply: {
+    buttonTitle: () => "Auto-reply",
+    title: () => "Auto-reply",
+    period: {
+      label: () => "Period",
+      required: () => "Please select start and end date",
+      format: () => "DD/MM/YYYY"
+    },
+    text: { label: () => "Message", required: () => "Please enter message" },
+    submitBtn: () => "Submit",
+    clearBtn: () => "Clear"
+  }
+};
+const defaultLocalizer = base;
 function useAdd(chatId2, accountId, withHistory) {
   const [add, state] = chatifyApi.useAddChatMemberMutation();
   const onAdd = useCallback(
@@ -990,7 +1054,8 @@ const ChatMemberListItem = customize("ChatMemberListItem", (props) => {
   );
 });
 const ChatMembersPanel = customize("ChatMembersPanel", () => {
-  const { id } = useChatContext();
+  const { id, compact, onShowMembers } = useChatContext();
+  const localizer = useLocalizer();
   const { data: chat } = chatifyApi.useGetChatQuery({ id });
   const { data: accounts } = chatifyApi.useGetAccountListQuery({});
   const ordered = useMemo(
@@ -1002,14 +1067,20 @@ const ChatMembersPanel = customize("ChatMembersPanel", () => {
   if (!(chat == null ? void 0 : chat.members) || !accounts) {
     return null;
   }
-  return /* @__PURE__ */ jsx("div", { className: "wxchtf-chat-members-panel", children: /* @__PURE__ */ jsx(
-    List,
-    {
-      className: "wxchtf-chat-members-list",
-      dataSource: ordered,
-      renderItem: (item) => /* @__PURE__ */ jsx(ChatMemberListItem, { id: item.id, chatId: id })
-    }
-  ) });
+  return /* @__PURE__ */ jsxs("div", { className: "wxchtf-chat-members-panel", children: [
+    compact && /* @__PURE__ */ jsx("div", { className: "wxchtf-chat-members-panel-header", children: /* @__PURE__ */ jsxs(Row, { wrap: false, align: "middle", gutter: 10, children: [
+      /* @__PURE__ */ jsx(Col, { flex: "none", children: /* @__PURE__ */ jsx(Button, { type: "text", icon: /* @__PURE__ */ jsx(LeftOutlined, {}), onClick: () => onShowMembers(false) }) }),
+      /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx("span", { className: "wxchtf-chat-members-panel-title", children: localizer.members.title(chat.name) }) })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      List,
+      {
+        className: "wxchtf-chat-members-list",
+        dataSource: ordered,
+        renderItem: (item) => /* @__PURE__ */ jsx(ChatMemberListItem, { id: item.id, chatId: id })
+      }
+    )
+  ] });
 });
 const ChatMembersPreview = customize("ChatMembersPreview", () => {
   const { id } = useChatContext();
@@ -1086,66 +1157,10 @@ const InputFileButton = customize("InputFileButton", (props) => {
 const InputFilesBox = customize("InputFilesBox", (props) => {
   return /* @__PURE__ */ jsx("div", { className: "wxchtf-add-files-box", children: /* @__PURE__ */ jsx(InputFileButton, { ...props }) });
 });
-const LocalizerContext = React.createContext(null);
-function useLocalizer() {
-  return useContext(LocalizerContext);
+const ConversationContext = React.createContext(void 0);
+function useConversation$1() {
+  return React.useContext(ConversationContext);
 }
-const base = {
-  isToday: (value) => dayjs(value).isSame(dayjs(), "day"),
-  timestamp: (value) => dayjs(value).format("HH:mm"),
-  dateTime: (value) => dayjs(value).format("DD/MM/YYYY HH:mm"),
-  message: {
-    read: () => "Read",
-    reading: () => "Reading...",
-    sending: () => "Sending..."
-  },
-  addChat: {
-    title: () => "Add chat",
-    name: {
-      label: () => "Name",
-      required: () => `Name is required`,
-      max250: () => "Max 250 characters allowed"
-    },
-    members: {
-      label: () => "Members",
-      required: () => "Members is required"
-    },
-    submitBtn: () => "Submit"
-  },
-  system: {
-    "chatify://chat-created": () => "Chat created",
-    "chatify://member-added": () => "New member added",
-    "chatify://member-removed": () => "Member removed",
-    "chatify://chat-name-changed": (_, { newName }) => `Chat name changed to '${newName}'`
-  },
-  input: {
-    placeholder: () => "Start typing... (Press Enter to send, and Shift+Enter to start a new line)"
-  },
-  settings: {
-    members: () => "Members"
-  },
-  size: {
-    bytes: (value) => `${value.toLocaleString(void 0, { minimumFractionDigits: 0, maximumFractionDigits: 2 })} bytes`,
-    kb: (value) => `${value.toLocaleString(void 0, { minimumFractionDigits: 0, maximumFractionDigits: 2 })} KB`,
-    mb: (value) => `${value.toLocaleString(void 0, { minimumFractionDigits: 0, maximumFractionDigits: 2 })} MB`
-  },
-  chatList: {
-    topShown: (count) => `Latest active ${count} chat${count !== 1 ? "s" : ""} shown`
-  },
-  autoReply: {
-    buttonTitle: () => "Auto-reply",
-    title: () => "Auto-reply",
-    period: {
-      label: () => "Period",
-      required: () => "Please select start and end date",
-      format: () => "DD/MM/YYYY"
-    },
-    text: { label: () => "Message", required: () => "Please enter message" },
-    submitBtn: () => "Submit",
-    clearBtn: () => "Clear"
-  }
-};
-const defaultLocalizer = base;
 const isEnter$1 = isHotkey("enter");
 const isCtrlEnter = isHotkey("ctrl+enter");
 const AUTO_SIZE = { maxRows: 5, minRows: 1 };
@@ -1154,6 +1169,7 @@ const InputTextBox = customize(
   memo((props) => {
     const { value, onChange, onSend, disabled, inputRef } = props;
     const localizer = useLocalizer();
+    const { compact } = useConversation$1();
     const onInputChange = useCallback(
       (e) => onChange(e.target.value),
       [onChange]
@@ -1179,7 +1195,7 @@ const InputTextBox = customize(
         onChange: onInputChange,
         autoSize: AUTO_SIZE,
         className: "wxchtf-text-input-textarea",
-        placeholder: localizer.input.placeholder(),
+        placeholder: localizer.input.placeholder(compact ? "compact" : "default"),
         onKeyDown
       }
     ) });
@@ -1199,10 +1215,6 @@ const InputSubmitButtonBox = customize("InputSubmitButtonBox", (props) => {
     }
   ) });
 });
-const ConversationContext = React.createContext(void 0);
-function useConversation$1() {
-  return React.useContext(ConversationContext);
-}
 const MessageSkeleton = customize("MessageSkeleton", (props) => {
   const { count = 1 } = props;
   return /* @__PURE__ */ jsx(Fragment, { children: Array.from(Array(count)).map((_, index) => /* @__PURE__ */ jsxs("div", { className: "wxchtf-message-skeleton", children: [
@@ -1656,10 +1668,14 @@ const ConversationName = customize("ConversationName", () => {
   const { name } = useConversation$1();
   return /* @__PURE__ */ jsx("span", { className: "wxchtf-conversation-name", children: name });
 });
-const ConversationHeader = customize("ConversationHeader", () => {
-  return /* @__PURE__ */ jsx("div", { className: "wxchtf-conversation-header", children: /* @__PURE__ */ jsxs(Row, { justify: "space-between", align: "middle", children: [
-    /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx(ConversationName, {}) }),
-    /* @__PURE__ */ jsx(Col, { className: "wxchtf-conversation-actions", children: /* @__PURE__ */ jsx(ConversationActions, {}) })
+const ConversationHeader = customize("ConversationHeader", (props) => {
+  const { onBackClick } = props;
+  return /* @__PURE__ */ jsx("div", { className: "wxchtf-conversation-header", children: /* @__PURE__ */ jsxs(Row, { gutter: 10, children: [
+    onBackClick && /* @__PURE__ */ jsx(Col, { flex: "none", children: /* @__PURE__ */ jsx(Button, { type: "text", icon: /* @__PURE__ */ jsx(LeftOutlined, {}), onClick: onBackClick }) }),
+    /* @__PURE__ */ jsx(Col, { flex: "auto", children: /* @__PURE__ */ jsxs(Row, { justify: "space-between", align: "middle", children: [
+      /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx(ConversationName, {}) }),
+      /* @__PURE__ */ jsx(Col, { className: "wxchtf-conversation-actions", children: /* @__PURE__ */ jsx(ConversationActions, {}) })
+    ] }) })
   ] }) });
 });
 const Conversation = customize("Conversation", (props) => {
@@ -1673,7 +1689,9 @@ const Conversation = customize("Conversation", (props) => {
     onSend,
     isReading,
     noReadTracking,
-    onClose
+    onClose,
+    compact,
+    onBackClick
   } = props;
   const { id, active, name, lastReadMessageId } = value;
   const context = useMemo(
@@ -1690,7 +1708,8 @@ const Conversation = customize("Conversation", (props) => {
       onSend,
       isReading,
       noReadTracking,
-      onClose
+      onClose,
+      compact
     }),
     [
       id,
@@ -1709,7 +1728,7 @@ const Conversation = customize("Conversation", (props) => {
     ]
   );
   return /* @__PURE__ */ jsx(ConversationContext.Provider, { value: context, children: /* @__PURE__ */ jsx("div", { className: "wxchtf-conversation", children: /* @__PURE__ */ jsxs("div", { className: "wxchtf-conversation-main", children: [
-    /* @__PURE__ */ jsx(ConversationHeader, {}),
+    /* @__PURE__ */ jsx(ConversationHeader, { onBackClick }),
     /* @__PURE__ */ jsx(ConversationBody, {}),
     active && /* @__PURE__ */ jsx(InputBox, {})
   ] }) }) });
@@ -1757,12 +1776,12 @@ const ChatEditableHeaderName = customize("ChatEditableHeaderName", () => {
   return /* @__PURE__ */ jsx(Tooltip, { title: "Click to edit name...", children: /* @__PURE__ */ jsx("span", { className: "wxchtf-conversation-name --editable", onClick: () => setEdit(true), children: name }) });
 });
 const ChatHeaderActions = customize("ChatHeaderActions", () => {
-  const { active } = useConversation$1();
+  const { active, compact } = useConversation$1();
   if (!active) {
     return null;
   }
   return /* @__PURE__ */ jsxs("div", { className: "wxchtf-chat-members", children: [
-    /* @__PURE__ */ jsx(ChatMembersPreview, {}),
+    !compact && /* @__PURE__ */ jsx(ChatMembersPreview, {}),
     /* @__PURE__ */ jsx(ChatMembersButton, {})
   ] });
 });
@@ -1771,7 +1790,8 @@ const DEFAULT_CHAT_VIEW_CUSTOMIZE_VALUE = {
   ConversationActions: () => /* @__PURE__ */ jsx(ChatHeaderActions, {})
 };
 function useConversation(props) {
-  const { value: chat } = props;
+  const { value: chat, onBackClick } = props;
+  const { compact } = useChatContext();
   const { id, name, active, lastReadMessageId } = chat;
   const { data: messageList } = chatifyApi.useGetChatMessageListQuery({ chatId: id });
   const { messages, hasMore } = messageList ?? {};
@@ -1794,7 +1814,9 @@ function useConversation(props) {
       nextLoading: isFetchNextLoading,
       onRead,
       onSend,
-      isReading: (id2) => readQueue.some((x) => chatId(x.value) === chatId(id2) && id2 <= x.value)
+      isReading: (id2) => readQueue.some((x) => chatId(x.value) === chatId(id2) && id2 <= x.value),
+      compact: compact ?? false,
+      onBackClick
     };
     return result;
   }, [
@@ -1808,41 +1830,76 @@ function useConversation(props) {
     messages,
     hasMore,
     lastReadMessageId,
-    readQueue
+    readQueue,
+    compact,
+    onBackClick
   ]);
   return conversation;
 }
 function Content$1(props) {
   const conversation = useConversation(props);
-  const { showMembers } = useChatContext();
+  const { compact, showMembers } = useChatContext();
   if (!conversation) {
     return null;
   }
   return /* @__PURE__ */ jsxs("div", { className: "wxchtf-chat", children: [
-    /* @__PURE__ */ jsx(Conversation, { ...conversation }),
+    (!compact || !showMembers) && /* @__PURE__ */ jsx(Conversation, { ...conversation }),
     showMembers && /* @__PURE__ */ jsx(ChatMembersPanel, {})
   ] });
 }
 const ChatView = customize("ChatView", (props) => {
-  const { value } = props;
+  const { value, compact, onBackClick } = props;
   const customized = useCustomizeContext();
   const customize2 = useMemo(
     () => ({ ...customized ?? {}, ...DEFAULT_CHAT_VIEW_CUSTOMIZE_VALUE }),
     [customized]
   );
-  return /* @__PURE__ */ jsx(CustomizeContext.Provider, { value: customize2, children: /* @__PURE__ */ jsx(ChatContext, { id: value.id, children: /* @__PURE__ */ jsx(Content$1, { value }) }) });
+  return /* @__PURE__ */ jsx(CustomizeContext.Provider, { value: customize2, children: /* @__PURE__ */ jsx(ChatContext, { id: value.id, compact: compact ?? false, children: /* @__PURE__ */ jsx(Content$1, { value, onBackClick }) }) });
 });
+function useCompact(thresholdOrCompact = 768) {
+  const ref = useRef(null);
+  const [size, setSize] = useState();
+  const automatic = typeof thresholdOrCompact === "number";
+  useEffect(() => {
+    if (!automatic) {
+      setSize(void 0);
+      return;
+    }
+    const el = ref.current;
+    if (!el) return;
+    const observer = new ResizeObserver(() => {
+      const { width, height } = el.getBoundingClientRect();
+      setSize({ width, height });
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [automatic]);
+  if (typeof thresholdOrCompact === "boolean") {
+    return [ref, thresholdOrCompact, size];
+  }
+  const compact = size != null ? size.width < thresholdOrCompact : void 0;
+  return [ref, compact, size];
+}
 function ChatPanel(props) {
-  const { id, className = "", customize: customize2, localizer = defaultLocalizer, style } = props;
+  const { id, className = "", customize: customize2, localizer = defaultLocalizer, style, compact: compactProp } = props;
   const { data: chat } = chatifyApi.useGetChatQuery({ id });
-  return /* @__PURE__ */ jsx("div", { className: `wxchtf-chatify wxchtf-chat-panel ${className}`, style, children: /* @__PURE__ */ jsx(LocalizerContext.Provider, { value: localizer, children: /* @__PURE__ */ jsx(CustomizeContext.Provider, { value: customize2, children: chat && /* @__PURE__ */ jsx(ChatView, { value: chat }, id) }) }) });
+  const [ref, compact] = useCompact(compactProp);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: ["wxchtf-chatify", "wxchtf-chat-panel", compact && "--compact", className].filter(Boolean).join(" "),
+      style,
+      ref,
+      children: /* @__PURE__ */ jsx(LocalizerContext.Provider, { value: localizer, children: /* @__PURE__ */ jsx(CustomizeContext.Provider, { value: customize2, children: chat && /* @__PURE__ */ jsx(ChatView, { value: chat, compact }, id) }) })
+    }
+  );
 }
 const ChatGroupReactContext = React.createContext(null);
 function useChatGroupContext() {
   return useContext(ChatGroupReactContext);
 }
 function ChatGroupContext(props) {
-  const { children } = props;
+  const { children, compact } = props;
   const [state, setState] = useState({
     chatId: null,
     view: null,
@@ -1851,6 +1908,7 @@ function ChatGroupContext(props) {
   const value = useMemo(
     () => ({
       ...state,
+      compact,
       openChat: (chatId2) => setState((prev) => ({ ...prev, view: "chat", chatId: chatId2 })),
       none: () => setState((prev) => ({ ...prev, view: null, chatId: null })),
       toggleMembers: () => setState((prev) => ({ ...prev, showMembers: !prev.showMembers })),
@@ -1873,7 +1931,7 @@ function ChatGroupContext(props) {
         }
       })
     }),
-    [state]
+    [state, compact]
   );
   return /* @__PURE__ */ jsx(ChatGroupReactContext.Provider, { value, children });
 }
@@ -2155,48 +2213,62 @@ const ChatGroupHeader = customize("ChatGroupHeader", () => {
 });
 const ChatGroupFooter = customize("ChatGroupFooter", () => /* @__PURE__ */ jsx("div", { className: "wxchtf-footer" }));
 const ChatGroupMain = customize("ChatGroupMain", () => {
-  const { chatId: chatId2, view } = useChatGroupContext();
+  const { chatId: chatId2, view, compact, none } = useChatGroupContext();
   const chat = chatifyApi.useChatListItem(chatId2);
   return /* @__PURE__ */ jsxs("div", { className: "wxchtf-main", children: [
-    view === "chat" && chat && /* @__PURE__ */ jsx(ChatView, { value: chat }, chatId2),
+    view === "chat" && chat && /* @__PURE__ */ jsx(ChatView, { value: chat, compact, onBackClick: compact ? none : void 0 }, chatId2),
     view === "new-chat" && /* @__PURE__ */ jsx(CreateChatPanel, {}),
     view === "auto-reply" && /* @__PURE__ */ jsx(AutoReplyPanel, {})
   ] });
 });
-const ChatGroupBody = customize("ChatGroupBody", () => /* @__PURE__ */ jsxs("div", { className: "wxchtf-body", children: [
-  /* @__PURE__ */ jsx(ChatGroupAside, {}),
-  /* @__PURE__ */ jsx(ChatGroupMain, {})
-] }));
+const ChatGroupBody = customize("ChatGroupBody", () => {
+  const { compact, view } = useChatGroupContext();
+  const isAsideShown = !compact || !view;
+  const isMainShown = !compact || view;
+  return /* @__PURE__ */ jsxs("div", { className: "wxchtf-body", children: [
+    isAsideShown && /* @__PURE__ */ jsx(ChatGroupAside, {}),
+    isMainShown && /* @__PURE__ */ jsx(ChatGroupMain, {})
+  ] });
+});
 function Content(props) {
-  const { className = "", style } = props;
+  const { className = "", style, containerRef } = props;
   const { data: chats } = chatifyApi.useGetChatListQuery();
-  const { openChat, none, chatId: chatId2 } = useChatGroupContext();
+  const { openChat, none, chatId: chatId2, compact } = useChatGroupContext();
   const openFirstChatRef = useRef(false);
   useEffect(() => {
-    if (chats && !chats.some((x) => x.id === chatId2)) {
+    if (chats && chatId2 && !chats.some((x) => x.id === chatId2)) {
       chats.length ? openChat(chats[0].id) : none();
     }
   }, [chats, chatId2]);
   useEffect(() => {
-    if (chats && !openFirstChatRef.current) {
+    if (chats && !openFirstChatRef.current && !compact) {
       openFirstChatRef.current = true;
       chats.length && openChat(chats[0].id);
     }
-  }, [chats]);
-  return /* @__PURE__ */ jsxs("div", { className: className + " wxchtf-chatify wxchtf-chat-group", style, children: [
-    /* @__PURE__ */ jsx(ChatGroupHeader, {}),
-    /* @__PURE__ */ jsx(ChatGroupBody, {}),
-    /* @__PURE__ */ jsx(ChatGroupFooter, {})
-  ] });
+  }, [chats, compact]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: ["wxchtf-chatify", "wxchtf-chat-group", compact && "--compact", className].filter(Boolean).join(" "),
+      style,
+      ref: containerRef,
+      children: [
+        /* @__PURE__ */ jsx(ChatGroupHeader, {}),
+        /* @__PURE__ */ jsx(ChatGroupBody, {}),
+        /* @__PURE__ */ jsx(ChatGroupFooter, {})
+      ]
+    }
+  );
 }
 const DEFAULT_CUSTOMIZE$1 = {
   ChatGroupHeader: null,
   ChatGroupFooter: null
 };
 const ChatGroupPanel = (props) => {
-  const { localizer = defaultLocalizer, customize: customize2 = DEFAULT_CUSTOMIZE$1 } = props;
+  const { localizer = defaultLocalizer, customize: customize2 = DEFAULT_CUSTOMIZE$1, compact: compactProp } = props;
   const customizeValue = useMemo(() => Object.assign({}, DEFAULT_CUSTOMIZE$1, customize2), [customize2]);
-  return /* @__PURE__ */ jsx(LocalizerContext.Provider, { value: localizer, children: /* @__PURE__ */ jsx(CustomizeContext.Provider, { value: customizeValue, children: /* @__PURE__ */ jsx(ChatGroupContext, { children: /* @__PURE__ */ jsx(Content, { ...props }) }) }) });
+  const [containerRef, compact] = useCompact(compactProp);
+  return /* @__PURE__ */ jsx(LocalizerContext.Provider, { value: localizer, children: /* @__PURE__ */ jsx(CustomizeContext.Provider, { value: customizeValue, children: /* @__PURE__ */ jsx(ChatGroupContext, { compact: compact ?? true, children: /* @__PURE__ */ jsx(Content, { ...props, containerRef }) }) }) });
 };
 const ThreadContext = React.createContext(null);
 function useThreadContext() {
@@ -2238,6 +2310,7 @@ function usePanelState(props) {
       onRead,
       onSend,
       noReadTracking: !watch,
+      compact: false,
       isReading: (id2) => readQueue.some(
         (unit) => parseThreadMessageId(unit.value)[0] === parseThreadMessageId(id2)[0] && id2 <= unit.value
       )
@@ -2393,4 +2466,4 @@ export {
   CreateChatPanel as y,
   CreateChatButton as z
 };
-//# sourceMappingURL=Chatify-CwAfN1wu.js.map
+//# sourceMappingURL=Chatify-CP2jgo8d.js.map