@rpg-engine/long-bow 0.7.22 → 0.7.23

package/dist/long-bow.esm.js

@@ -6,8 +6,8 @@ import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemRarit
 import dayjs from 'dayjs';
 import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
 import { FaTimes } from 'react-icons/fa';
-import { IoMdContract, IoMdExpand } from 'react-icons/io';
 import { RxMagnifyingGlass, RxCross2 } from 'react-icons/rx';
+import { IoMdContract, IoMdExpand } from 'react-icons/io';
 import Draggable from 'react-draggable';
 import ReactDOM from 'react-dom';
 import { camelCase, debounce } from 'lodash-es';
@@ -26386,6 +26386,55 @@ var MessageText = /*#__PURE__*/styled.p.withConfig({
   componentId: "sc-fuuod3-5"
 })(["display:block !important;width:100%;font-size:", " !important;overflow-y:auto;margin:0;"], uiFonts.size.xsmall);
 
+var useChat = function useChat(_ref) {
+  var minimizedByDefault = _ref.minimizedByDefault,
+    isPrivate = _ref.isPrivate,
+    onChangeTab = _ref.onChangeTab,
+    onPreviousChatCharacterClick = _ref.onPreviousChatCharacterClick,
+    hideSearchCharacterUI = _ref.hideSearchCharacterUI,
+    unseenMessageCharacterIds = _ref.unseenMessageCharacterIds;
+  var _useState = useState(false),
+    showRecentChats = _useState[0],
+    setShowRecentChats = _useState[1];
+  var _useState2 = useState(!minimizedByDefault),
+    isExpanded = _useState2[0],
+    setIsExpanded = _useState2[1];
+  useEffect(function () {
+    if (isPrivate) {
+      setIsExpanded(true);
+    }
+  }, [isPrivate]);
+  var toggleExpand = function toggleExpand() {
+    return setIsExpanded(function (prev) {
+      return !prev;
+    });
+  };
+  var toggleRecentChats = function toggleRecentChats() {
+    return setShowRecentChats(function (prev) {
+      return !prev;
+    });
+  };
+  var handleTabChange = function handleTabChange(tabId) {
+    if (tabId === 'private') {
+      setIsExpanded(true);
+    }
+    onChangeTab(tabId);
+  };
+  var handlePreviousChatCharacterClick = function handlePreviousChatCharacterClick(character) {
+    onPreviousChatCharacterClick == null ? void 0 : onPreviousChatCharacterClick(character);
+    hideSearchCharacterUI();
+  };
+  return {
+    showRecentChats: showRecentChats,
+    isExpanded: isExpanded,
+    toggleExpand: toggleExpand,
+    toggleRecentChats: toggleRecentChats,
+    handleTabChange: handleTabChange,
+    handlePreviousChatCharacterClick: handlePreviousChatCharacterClick,
+    hasUnseenMessages: unseenMessageCharacterIds && (unseenMessageCharacterIds == null ? void 0 : unseenMessageCharacterIds.length) > 0
+  };
+};
+
 var SearchCharacter = function SearchCharacter(_ref) {
   var onChangeCharacterName = _ref.onChangeCharacterName,
     onBlur = _ref.onBlur,
@@ -26434,12 +26483,12 @@ var SearchCharacter = function SearchCharacter(_ref) {
     value: characterName,
     ref: searchCharacterRef,
     id: "characterName",
-    name: 'characterName',
+    name: "characterName",
     onChange: function onChange(e) {
       setCharacterName(e.target.value);
       onChangeCharacterName(e.target.value);
     },
-    placeholder: 'Search for a character...',
+    placeholder: "Search for a character...",
     height: 20,
     type: "text",
     autoComplete: "off",
@@ -26449,7 +26498,7 @@ var SearchCharacter = function SearchCharacter(_ref) {
   })), React.createElement(Column, {
     justifyContent: "flex-end"
   }, React.createElement(SearchButton, {
-    type: 'submit',
+    type: "submit",
     buttonColor: (styles == null ? void 0 : styles.buttonColor) || '#005b96',
     buttonBackgroundColor: (styles == null ? void 0 : styles.buttonBackgroundColor) || 'rgba(0,0,0,.5)',
     id: "chat-send-button",
@@ -26465,7 +26514,7 @@ var SearchCharacter = function SearchCharacter(_ref) {
       },
       key: character._id
     }, React.createElement(Ellipsis, {
-      maxWidth: '150px',
+      maxWidth: "150px",
       maxLines: 1
     }, character.name));
   })));
@@ -26501,186 +26550,83 @@ var ListElement = /*#__PURE__*/styled.li.withConfig({
   componentId: "sc-172lyfr-5"
 })(["margin:0.5rem 0 !important;font-size:", ";padding:0.5rem 2px;&:hover{color:#ff0;background-color:", ";}button{all:unset;}"], uiFonts.size.small, uiColors.darkGray);
 
-var ChatRevamp = function ChatRevamp(_ref) {
-  var chatMessages = _ref.chatMessages,
+var ChatContent = function ChatContent(_ref) {
+  var isPrivate = _ref.isPrivate,
+    isTrade = _ref.isTrade,
+    searchCharacterUI = _ref.searchCharacterUI,
+    chatMessages = _ref.chatMessages,
     onSendGlobalChatMessage = _ref.onSendGlobalChatMessage,
-    onChangeCharacterName = _ref.onChangeCharacterName,
-    onFocus = _ref.onFocus,
-    onBlur = _ref.onBlur,
+    onSendPrivateChatMessage = _ref.onSendPrivateChatMessage,
+    onSendTradeMessage = _ref.onSendTradeMessage,
     onCloseButton = _ref.onCloseButton,
     styles = _ref.styles,
-    tabs = _ref.tabs,
-    onChangeTab = _ref.onChangeTab,
-    activeTab = _ref.activeTab,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur,
+    isExpanded = _ref.isExpanded,
+    autoCloseOnSend = _ref.autoCloseOnSend,
+    onChangeCharacterName = _ref.onChangeCharacterName,
     privateChatCharacters = _ref.privateChatCharacters,
-    onCharacterClick = _ref.onCharacterClick,
-    onSendPrivateChatMessage = _ref.onSendPrivateChatMessage,
-    recentChatCharacters = _ref.recentChatCharacters,
-    _ref$recentSelectedCh = _ref.recentSelectedChatCharacterId,
-    recentSelectedChatCharacterId = _ref$recentSelectedCh === void 0 ? '' : _ref$recentSelectedCh,
-    onPreviousChatCharacterClick = _ref.onPreviousChatCharacterClick,
-    onRemoveRecentChatCharacter = _ref.onRemoveRecentChatCharacter,
-    _ref$unseenMessageCha = _ref.unseenMessageCharacterIds,
-    unseenMessageCharacterIds = _ref$unseenMessageCha === void 0 ? [] : _ref$unseenMessageCha,
-    onSendTradeMessage = _ref.onSendTradeMessage,
-    searchCharacterUI = _ref.searchCharacterUI,
     hideSearchCharacterUI = _ref.hideSearchCharacterUI,
-    showSearchCharacterUI = _ref.showSearchCharacterUI,
-    _ref$minimizedByDefau = _ref.minimizedByDefault,
-    minimizedByDefault = _ref$minimizedByDefau === void 0 ? false : _ref$minimizedByDefau,
-    _ref$autoCloseOnSend = _ref.autoCloseOnSend,
-    autoCloseOnSend = _ref$autoCloseOnSend === void 0 ? false : _ref$autoCloseOnSend;
-  var _useState = useState(false),
-    showRecentChats = _useState[0],
-    setShowRecentChats = _useState[1];
-  var _useState2 = useState(!minimizedByDefault),
-    isExpanded = _useState2[0],
-    setIsExpanded = _useState2[1];
-  var isPrivate = activeTab === 'private';
-  var isTrade = activeTab === 'trade';
-  useEffect(function () {
-    if (isPrivate) {
-      setIsExpanded(true);
-    }
-  }, [isPrivate]);
-  var toggleExpand = function toggleExpand() {
-    return setIsExpanded(function (prev) {
-      return !prev;
-    });
-  };
-  var toggleRecentChats = function toggleRecentChats() {
-    return setShowRecentChats(function (prev) {
-      return !prev;
-    });
-  };
-  var handleTabChange = function handleTabChange(tabId) {
-    if (tabId === 'private') {
-      setIsExpanded(true);
-    }
-    onChangeTab(tabId);
-  };
-  var handlePreviousChatCharacterClick = function handlePreviousChatCharacterClick(character) {
-    onPreviousChatCharacterClick == null ? void 0 : onPreviousChatCharacterClick(character);
-    hideSearchCharacterUI();
-  };
-  var renderTabs = function renderTabs() {
-    return React.createElement(TabContainer, null, tabs.map(function (tab, index) {
-      return React.createElement(Tab, {
-        key: tab.label + "_" + index,
-        active: tab.id === activeTab,
-        onPointerDown: function onPointerDown() {
-          return handleTabChange(tab.id);
-        }
-      }, tab.label);
-    }));
-  };
-  var renderRecentChatTopBar = function renderRecentChatTopBar() {
-    return React.createElement(RecentChatTopBar, null, React.createElement(BurgerIconContainer, {
-      onPointerDown: toggleRecentChats,
-      hasUnseenMessages: unseenMessageCharacterIds.length > 0
-    }, React.createElement(BurgerLineIcon, null), React.createElement(BurgerLineIcon, null), React.createElement(BurgerLineIcon, null)), showRecentChats && React.createElement(SearchButton$1, {
-      onPointerDown: showSearchCharacterUI
-    }, React.createElement(RxMagnifyingGlass, {
-      size: 16,
-      color: uiColors.white
-    })));
-  };
-  var renderRecentChatList = function renderRecentChatList() {
-    return React.createElement(RecentChatLogContainer, {
-      isOpen: showRecentChats
-    }, recentChatCharacters == null ? void 0 : recentChatCharacters.map(function (character) {
-      return React.createElement(ListElementContainer, {
-        key: character._id
-      }, React.createElement(ListElement$1, {
-        active: character._id === recentSelectedChatCharacterId,
-        onPointerDown: function onPointerDown() {
-          return handlePreviousChatCharacterClick(character);
-        }
-      }, React.createElement(StatusDot, {
-        isUnseen: unseenMessageCharacterIds.includes(character._id)
-      }), React.createElement(Ellipsis, {
-        maxWidth: "140px",
-        maxLines: 1
-      }, character.name)), React.createElement(CloseButton$2, {
-        className: "close-button",
-        onPointerDown: function onPointerDown() {
-          return onRemoveRecentChatCharacter == null ? void 0 : onRemoveRecentChatCharacter(character);
-        }
-      }, React.createElement(RxCross2, {
-        size: 16
-      })));
-    }));
-  };
-  var renderChatContent = function renderChatContent() {
-    if (isPrivate && searchCharacterUI) {
-      return React.createElement(SearchCharacter, {
-        onFocus: onFocus,
-        onBlur: onBlur,
-        onChangeCharacterName: onChangeCharacterName,
-        styles: styles,
-        recentCharacters: privateChatCharacters,
-        hideSearchCharacterUI: hideSearchCharacterUI,
-        onCharacterClick: onCharacterClick
-      });
-    }
-    return React.createElement(Chat, {
-      chatMessages: chatMessages,
-      onSendChatMessage: function onSendChatMessage() {
-        if (autoCloseOnSend) {
-          onCloseButton();
-        }
-        if (isPrivate) {
-          return onSendPrivateChatMessage;
-        } else if (isTrade) {
-          return onSendTradeMessage;
-        } else {
-          return onSendGlobalChatMessage;
-        }
-      },
-      sendMessage: true,
-      onCloseButton: onCloseButton,
-      styles: styles,
+    onCharacterClick = _ref.onCharacterClick;
+  if (isPrivate && searchCharacterUI) {
+    return React.createElement(SearchCharacter, {
       onFocus: onFocus,
       onBlur: onBlur,
-      isExpanded: isExpanded
+      onChangeCharacterName: onChangeCharacterName,
+      styles: styles,
+      recentCharacters: privateChatCharacters,
+      hideSearchCharacterUI: hideSearchCharacterUI,
+      onCharacterClick: onCharacterClick
     });
-  };
-  return React.createElement(ChatRevampContainer, null, React.createElement(TopBar, {
-    isExpanded: isExpanded
-  }, isExpanded && renderTabs(), React.createElement(ExpandButton, {
-    onClick: toggleExpand,
-    isExpanded: isExpanded
-  }, isExpanded ? React.createElement(IoMdContract, {
-    size: 20
-  }) : React.createElement(IoMdExpand, {
-    size: 20
-  }))), React.createElement(PrivateChatContainer, {
-    width: (styles == null ? void 0 : styles.width) || '80%',
-    height: (styles == null ? void 0 : styles.height) || 'auto',
+  }
+  return React.createElement(ChatWrapper, null, React.createElement(Chat, {
+    chatMessages: chatMessages,
+    onSendChatMessage: function onSendChatMessage() {
+      if (autoCloseOnSend) {
+        onCloseButton();
+      }
+      if (isPrivate) {
+        return onSendPrivateChatMessage;
+      } else if (isTrade) {
+        return onSendTradeMessage;
+      } else {
+        return onSendGlobalChatMessage;
+      }
+    },
+    sendMessage: true,
+    onCloseButton: onCloseButton,
+    styles: styles,
+    onFocus: onFocus,
+    onBlur: onBlur,
     isExpanded: isExpanded
-  }, isExpanded && React.createElement(RecentChatTabContainer, {
-    isPrivate: isPrivate,
-    isOpen: showRecentChats
-  }, renderRecentChatTopBar(), renderRecentChatList()), React.createElement(ChatWrapper, null, renderChatContent())));
+  }));
+};
+var ChatWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ChatContent__ChatWrapper",
+  componentId: "sc-1380qen-0"
+})(["flex-grow:1;overflow:hidden;display:flex;flex-direction:column;position:relative;"]);
+
+var ChatTabs = function ChatTabs(_ref) {
+  var tabs = _ref.tabs,
+    activeTab = _ref.activeTab,
+    onChangeTab = _ref.onChangeTab;
+  return React.createElement(TabContainer, null, tabs.map(function (tab, index) {
+    return React.createElement(Tab, {
+      key: tab.label + "_" + index,
+      active: tab.id === activeTab,
+      onPointerDown: function onPointerDown() {
+        return onChangeTab(tab.id);
+      }
+    }, tab.label);
+  }));
 };
-var ChatRevampContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ChatRevamp__ChatRevampContainer",
-  componentId: "sc-1sdiknw-0"
-})(["display:flex;flex-direction:column;width:100%;position:relative;"]);
-var TopBar = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ChatRevamp__TopBar",
-  componentId: "sc-1sdiknw-1"
-})(["display:flex;align-items:center;justify-content:flex-start;", ""], function (_ref2) {
-  var isExpanded = _ref2.isExpanded;
-  return !isExpanded && css(["min-height:32px;"]);
-});
 var TabContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ChatRevamp__TabContainer",
-  componentId: "sc-1sdiknw-2"
+  displayName: "ChatTabs__TabContainer",
+  componentId: "sc-rcifrl-0"
 })(["display:flex;gap:10px;align-items:center;flex-grow:1;"]);
 var Tab = /*#__PURE__*/styled.button.withConfig({
-  displayName: "ChatRevamp__Tab",
-  componentId: "sc-1sdiknw-3"
+  displayName: "ChatTabs__Tab",
+  componentId: "sc-rcifrl-1"
 })(["width:120px;color:white;font-size:0.8rem;all:unset;padding:0.6rem;font-size:0.8rem;border-radius:5px 5px 0 0;border-width:0.25rem 0.25rem 0 0.25rem;border-style:solid;border-color:", ";background-color:", ";color:", ";"], function (props) {
   return props.active ? 'rgba(198, 81, 2, 0.5)' : 'rgba(128, 128, 128, 0.5)';
 }, function (props) {
@@ -26688,27 +26634,78 @@ var Tab = /*#__PURE__*/styled.button.withConfig({
 }, function (props) {
   return props.active ? 'white' : uiColors.darkGray;
 });
-var ExpandButton = /*#__PURE__*/styled.button.withConfig({
-  displayName: "ChatRevamp__ExpandButton",
-  componentId: "sc-1sdiknw-4"
-})(["position:absolute;top:0;", ";width:30px;height:30px;background-color:", ";color:white;border:none;border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all 0.3s ease;z-index:10;&:hover{background-color:", ";}"], function (_ref3) {
-  var isExpanded = _ref3.isExpanded;
+
+var ExpandButton = function ExpandButton(_ref) {
+  var isExpanded = _ref.isExpanded,
+    onClick = _ref.onClick;
+  return React.createElement(StyledExpandButton, {
+    isExpanded: isExpanded,
+    onClick: onClick
+  }, isExpanded ? React.createElement(IoMdContract, {
+    size: 20
+  }) : React.createElement(IoMdExpand, {
+    size: 20
+  }));
+};
+var StyledExpandButton = /*#__PURE__*/styled.button.withConfig({
+  displayName: "ExpandButton__StyledExpandButton",
+  componentId: "sc-vdxez5-0"
+})(["position:absolute;top:0;", ";width:30px;height:30px;background-color:", ";color:white;border:none;border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all 0.3s ease;z-index:10;&:hover{background-color:", ";}"], function (_ref2) {
+  var isExpanded = _ref2.isExpanded;
   return isExpanded ? 'right: 0' : 'left: 0';
 }, uiColors.orange, uiColors.orange);
-var PrivateChatContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ChatRevamp__PrivateChatContainer",
-  componentId: "sc-1sdiknw-5"
-})(["width:", ";height:", ";padding:10px;background-color:rgba(0,0,0,0.2);display:flex;gap:10px;flex-wrap:wrap;"], function (_ref4) {
-  var width = _ref4.width;
-  return width;
-}, function (_ref5) {
-  var height = _ref5.height,
-    isExpanded = _ref5.isExpanded;
-  return isExpanded ? height : 'auto';
-});
+
+var RecentChats = function RecentChats(_ref) {
+  var showRecentChats = _ref.showRecentChats,
+    toggleRecentChats = _ref.toggleRecentChats,
+    hasUnseenMessages = _ref.hasUnseenMessages,
+    showSearchCharacterUI = _ref.showSearchCharacterUI,
+    recentChatCharacters = _ref.recentChatCharacters,
+    recentSelectedChatCharacterId = _ref.recentSelectedChatCharacterId,
+    unseenMessageCharacterIds = _ref.unseenMessageCharacterIds,
+    onPreviousChatCharacterClick = _ref.onPreviousChatCharacterClick,
+    onRemoveRecentChatCharacter = _ref.onRemoveRecentChatCharacter,
+    isPrivate = _ref.isPrivate;
+  return React.createElement(RecentChatTabContainer, {
+    isOpen: showRecentChats,
+    isPrivate: isPrivate
+  }, React.createElement(RecentChatTopBar, null, React.createElement(BurgerIconContainer, {
+    onPointerDown: toggleRecentChats,
+    hasUnseenMessages: hasUnseenMessages
+  }, React.createElement(BurgerLineIcon, null), React.createElement(BurgerLineIcon, null), React.createElement(BurgerLineIcon, null)), showRecentChats && React.createElement(SearchButton$1, {
+    onPointerDown: showSearchCharacterUI
+  }, React.createElement(RxMagnifyingGlass, {
+    size: 16,
+    color: uiColors.white
+  }))), React.createElement(RecentChatLogContainer, {
+    isOpen: showRecentChats
+  }, recentChatCharacters == null ? void 0 : recentChatCharacters.map(function (character) {
+    var _unseenMessageCharact;
+    return React.createElement(ListElementContainer, {
+      key: character._id
+    }, React.createElement(ListElement$1, {
+      active: character._id === recentSelectedChatCharacterId,
+      onPointerDown: function onPointerDown() {
+        return onPreviousChatCharacterClick(character);
+      }
+    }, React.createElement(StatusDot, {
+      isUnseen: (_unseenMessageCharact = unseenMessageCharacterIds == null ? void 0 : unseenMessageCharacterIds.includes(character._id)) != null ? _unseenMessageCharact : false
+    }), React.createElement(Ellipsis, {
+      maxWidth: "140px",
+      maxLines: 1
+    }, character.name)), React.createElement(CloseButton$2, {
+      className: "close-button",
+      onPointerDown: function onPointerDown() {
+        return onRemoveRecentChatCharacter == null ? void 0 : onRemoveRecentChatCharacter(character);
+      }
+    }, React.createElement(RxCross2, {
+      size: 16
+    })));
+  })));
+};
 var RecentChatTabContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ChatRevamp__RecentChatTabContainer",
-  componentId: "sc-1sdiknw-6"
+  displayName: "RecentChats__RecentChatTabContainer",
+  componentId: "sc-uzad2m-0"
 })(["display:", ";flex-direction:column;border-right:1px solid ", ";outline:none;width:", ";max-width:200px;min-width:", ";transition:all 0.3s ease-in-out;overflow:hidden;height:100%;@media (max-width:768px){width:", ";min-width:", ";}"], function (props) {
   return props.isPrivate ? 'flex' : 'none';
 }, uiColors.gray, function (props) {
@@ -26721,55 +26718,177 @@ var RecentChatTabContainer = /*#__PURE__*/styled.div.withConfig({
   return props.isOpen ? '150px' : '30px';
 });
 var RecentChatTopBar = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ChatRevamp__RecentChatTopBar",
-  componentId: "sc-1sdiknw-7"
+  displayName: "RecentChats__RecentChatTopBar",
+  componentId: "sc-uzad2m-1"
 })(["display:flex;align-items:center;justify-content:space-between;height:30px;flex-shrink:0;"]);
 var SearchButton$1 = /*#__PURE__*/styled.button.withConfig({
-  displayName: "ChatRevamp__SearchButton",
-  componentId: "sc-1sdiknw-8"
+  displayName: "RecentChats__SearchButton",
+  componentId: "sc-uzad2m-2"
 })(["border:none;background-color:transparent;display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding:4px;position:relative;"]);
 var BurgerIconContainer = /*#__PURE__*/styled.button.withConfig({
-  displayName: "ChatRevamp__BurgerIconContainer",
-  componentId: "sc-1sdiknw-9"
+  displayName: "RecentChats__BurgerIconContainer",
+  componentId: "sc-uzad2m-3"
 })(["border:none;background-color:transparent;display:flex;flex-direction:column;align-items:flex-end;padding:4px;gap:2px;position:relative;&:after{content:'';width:6px;height:6px;position:absolute;top:0;right:2px;border-radius:50%;background-color:", ";display:", ";}"], uiColors.lightGreen, function (props) {
   return props.hasUnseenMessages ? 'block' : 'none';
 });
 var BurgerLineIcon = /*#__PURE__*/styled.span.withConfig({
-  displayName: "ChatRevamp__BurgerLineIcon",
-  componentId: "sc-1sdiknw-10"
+  displayName: "RecentChats__BurgerLineIcon",
+  componentId: "sc-uzad2m-4"
 })(["width:1rem;height:2px;background-color:#ffffff;"]);
 var RecentChatLogContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ChatRevamp__RecentChatLogContainer",
-  componentId: "sc-1sdiknw-11"
+  displayName: "RecentChats__RecentChatLogContainer",
+  componentId: "sc-uzad2m-5"
 })(["display:", ";opacity:", ";flex-direction:column;gap:0.25rem;transition:opacity 0.3s ease-in-out;padding:0;margin:0;overflow-y:auto;flex-grow:1;height:0;scrollbar-width:thin;scrollbar-color:rgba(51,51,51,0.4) rgba(30,30,30,0.4);&::-webkit-scrollbar{width:8px;height:8px;}&::-webkit-scrollbar-track{background:rgba(30,30,30,0.2);border-radius:4px;}&::-webkit-scrollbar-thumb{background-color:rgba(255,102,0,0.5);border-radius:4px;border:2px solid rgba(30,30,30,0.2);}&::-webkit-scrollbar-thumb:hover{background-color:rgba(255,102,0,0.7);}"], function (props) {
   return props.isOpen ? 'flex' : 'none';
 }, function (props) {
   return props.isOpen ? 1 : 0;
 });
 var ListElementContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ChatRevamp__ListElementContainer",
-  componentId: "sc-1sdiknw-12"
+  displayName: "RecentChats__ListElementContainer",
+  componentId: "sc-uzad2m-6"
 })(["display:flex;justify-content:space-between;align-items:center;padding:2px 0;"]);
 var ListElement$1 = /*#__PURE__*/styled.button.withConfig({
-  displayName: "ChatRevamp__ListElement",
-  componentId: "sc-1sdiknw-13"
+  displayName: "RecentChats__ListElement",
+  componentId: "sc-uzad2m-7"
 })(["margin:0 !important;font-size:", " !important;padding:2px;all:unset;color:", ";width:100%;position:relative;display:flex;align-items:center;gap:4px;&:hover{color:#ff0;}max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"], uiFonts.size.small, function (props) {
   return props.active ? uiColors.yellow : uiColors.white;
 });
 var StatusDot = /*#__PURE__*/styled.span.withConfig({
-  displayName: "ChatRevamp__StatusDot",
-  componentId: "sc-1sdiknw-14"
+  displayName: "RecentChats__StatusDot",
+  componentId: "sc-uzad2m-8"
 })(["width:6px;height:6px;border-radius:50%;background-color:", ";display:inline-block;margin-right:6px;"], function (props) {
   return props.isUnseen ? uiColors.lightGreen : uiColors.gray;
 });
 var CloseButton$2 = /*#__PURE__*/styled.button.withConfig({
-  displayName: "ChatRevamp__CloseButton",
-  componentId: "sc-1sdiknw-15"
+  displayName: "RecentChats__CloseButton",
+  componentId: "sc-uzad2m-9"
 })(["all:unset;font-size:", ";margin:0 0.5rem;transition:all 0.2s ease-in-out;background-color:", ";color:", ";width:16px;height:16px;border-radius:50%;display:flex;justify-content:center;align-items:center;&:hover{background-color:", ";color:", ";}"], uiFonts.size.xxsmall, uiColors.red, uiColors.white, uiColors.white, uiColors.red);
-var ChatWrapper = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ChatRevamp__ChatWrapper",
-  componentId: "sc-1sdiknw-16"
-})(["flex-grow:1;overflow:hidden;display:flex;flex-direction:column;position:relative;"]);
+
+var ChatRevamp = function ChatRevamp(props) {
+  var chatMessages = props.chatMessages,
+    onSendGlobalChatMessage = props.onSendGlobalChatMessage,
+    onChangeCharacterName = props.onChangeCharacterName,
+    onFocus = props.onFocus,
+    onBlur = props.onBlur,
+    onCloseButton = props.onCloseButton,
+    styles = props.styles,
+    tabs = props.tabs,
+    onChangeTab = props.onChangeTab,
+    activeTab = props.activeTab,
+    privateChatCharacters = props.privateChatCharacters,
+    onCharacterClick = props.onCharacterClick,
+    onSendPrivateChatMessage = props.onSendPrivateChatMessage,
+    recentChatCharacters = props.recentChatCharacters,
+    recentSelectedChatCharacterId = props.recentSelectedChatCharacterId,
+    onPreviousChatCharacterClick = props.onPreviousChatCharacterClick,
+    onRemoveRecentChatCharacter = props.onRemoveRecentChatCharacter,
+    unseenMessageCharacterIds = props.unseenMessageCharacterIds,
+    onSendTradeMessage = props.onSendTradeMessage,
+    searchCharacterUI = props.searchCharacterUI,
+    hideSearchCharacterUI = props.hideSearchCharacterUI,
+    showSearchCharacterUI = props.showSearchCharacterUI,
+    minimizedByDefault = props.minimizedByDefault,
+    autoCloseOnSend = props.autoCloseOnSend;
+  var isPrivate = activeTab === 'private';
+  var isTrade = activeTab === 'trade';
+  var chatHook = useChat({
+    activeTab: activeTab,
+    minimizedByDefault: minimizedByDefault,
+    isPrivate: isPrivate,
+    onChangeTab: onChangeTab,
+    onPreviousChatCharacterClick: onPreviousChatCharacterClick,
+    hideSearchCharacterUI: hideSearchCharacterUI,
+    unseenMessageCharacterIds: unseenMessageCharacterIds
+  });
+  return React.createElement(ChatRevampContainer, null, React.createElement(TopBar, {
+    isExpanded: chatHook.isExpanded
+  }, chatHook.isExpanded && React.createElement(ChatTabs, {
+    tabs: tabs,
+    activeTab: activeTab,
+    onChangeTab: chatHook.handleTabChange
+  }), React.createElement(ExpandButton, {
+    isExpanded: chatHook.isExpanded,
+    onClick: chatHook.toggleExpand
+  })), React.createElement(PrivateChatContainer, {
+    width: (styles == null ? void 0 : styles.width) || '80%',
+    height: (styles == null ? void 0 : styles.height) || 'auto',
+    isExpanded: chatHook.isExpanded
+  }, chatHook.isExpanded ? React.createElement(React.Fragment, null, isPrivate && React.createElement(RecentChats, {
+    showRecentChats: chatHook.showRecentChats,
+    toggleRecentChats: chatHook.toggleRecentChats,
+    hasUnseenMessages: chatHook.hasUnseenMessages || false,
+    showSearchCharacterUI: showSearchCharacterUI,
+    recentChatCharacters: recentChatCharacters,
+    recentSelectedChatCharacterId: recentSelectedChatCharacterId,
+    unseenMessageCharacterIds: unseenMessageCharacterIds,
+    onPreviousChatCharacterClick: function onPreviousChatCharacterClick(character) {
+      return chatHook.handlePreviousChatCharacterClick(character);
+    },
+    onRemoveRecentChatCharacter: onRemoveRecentChatCharacter,
+    isPrivate: isPrivate
+  }), React.createElement(ChatContentWrapper, {
+    isPrivate: isPrivate
+  }, React.createElement(ChatContent, {
+    isPrivate: isPrivate,
+    isTrade: isTrade,
+    searchCharacterUI: searchCharacterUI,
+    chatMessages: chatMessages,
+    onSendGlobalChatMessage: onSendGlobalChatMessage,
+    onSendPrivateChatMessage: onSendPrivateChatMessage,
+    onSendTradeMessage: onSendTradeMessage,
+    onCloseButton: onCloseButton,
+    styles: styles,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    isExpanded: chatHook.isExpanded,
+    autoCloseOnSend: autoCloseOnSend || false,
+    onChangeCharacterName: onChangeCharacterName,
+    privateChatCharacters: privateChatCharacters,
+    hideSearchCharacterUI: hideSearchCharacterUI,
+    onCharacterClick: onCharacterClick
+  }))) : React.createElement(CollapsedChatInput, null, React.createElement(Chat, {
+    chatMessages: [],
+    onSendChatMessage: onSendGlobalChatMessage,
+    sendMessage: true,
+    onCloseButton: onCloseButton,
+    styles: styles,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    isExpanded: false
+  }))));
+};
+var ChatRevampContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ChatRevamp__ChatRevampContainer",
+  componentId: "sc-1sdiknw-0"
+})(["display:flex;flex-direction:column;width:100%;position:relative;"]);
+var TopBar = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ChatRevamp__TopBar",
+  componentId: "sc-1sdiknw-1"
+})(["display:flex;align-items:center;justify-content:flex-start;min-height:", ";"], function (_ref) {
+  var isExpanded = _ref.isExpanded;
+  return isExpanded ? 'auto' : '32px';
+});
+var PrivateChatContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ChatRevamp__PrivateChatContainer",
+  componentId: "sc-1sdiknw-2"
+})(["width:", ";height:", ";padding:10px;background-color:rgba(0,0,0,0.2);display:flex;gap:10px;flex-wrap:wrap;"], function (_ref2) {
+  var width = _ref2.width;
+  return width;
+}, function (_ref3) {
+  var height = _ref3.height,
+    isExpanded = _ref3.isExpanded;
+  return isExpanded ? height : 'auto';
+});
+var ChatContentWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ChatRevamp__ChatContentWrapper",
+  componentId: "sc-1sdiknw-3"
+})(["flex-grow:1;overflow:hidden;display:flex;flex-direction:column;position:relative;width:", ";"], function (props) {
+  return props.isPrivate ? 'calc(75% - 10px)' : '100%';
+});
+var CollapsedChatInput = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ChatRevamp__CollapsedChatInput",
+  componentId: "sc-1sdiknw-4"
+})(["width:100%;height:100%;display:flex;align-items:center;"]);
 
 var CheckButton = function CheckButton(_ref) {
   var items = _ref.items,