@rpg-engine/long-bow 0.7.19 → 0.7.22

package/dist/components/Chat/Chat.d.ts

@@ -20,5 +20,6 @@ export interface IChatProps {
     opacity?: number;
     sendMessage: boolean;
     styles?: IStyles;
+    isExpanded: boolean;
 }
 export declare const Chat: React.FC<IChatProps>;

package/dist/components/ChatRevamp/ChatRevamp.d.ts

@@ -29,5 +29,7 @@ export interface IChatRevampProps {
     searchCharacterUI: boolean;
     hideSearchCharacterUI: () => void;
     showSearchCharacterUI: () => void;
+    minimizedByDefault?: boolean;
+    autoCloseOnSend?: boolean;
 }
 export declare const ChatRevamp: React.FC<IChatRevampProps>;

package/dist/long-bow.cjs.development.js

@@ -14,6 +14,7 @@ var shared = require('@rpg-engine/shared');
 var dayjs = _interopDefault(require('dayjs'));
 var reactErrorBoundary = require('react-error-boundary');
 var fa = require('react-icons/fa');
+var io = require('react-icons/io');
 var rx = require('react-icons/rx');
 var Draggable = _interopDefault(require('react-draggable'));
 var ReactDOM = _interopDefault(require('react-dom'));
@@ -26117,17 +26118,19 @@ var Chat = function Chat(_ref) {
       buttonBackgroundColor: '#333',
       width: '100%',
       height: '100%'
-    } : _ref$styles;
+    } : _ref$styles,
+    isExpanded = _ref.isExpanded;
   var _useState = React.useState(''),
     message = _useState[0],
     setMessage = _useState[1];
   var inputRef = React.useRef(null);
   React.useEffect(function () {
     var _inputRef$current;
-    scrollChatToBottom();
-    // Focus the input element when the component mounts
+    if (isExpanded) {
+      scrollChatToBottom();
+    }
     (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
-  }, [chatMessages]);
+  }, [chatMessages, isExpanded]);
   var scrollChatToBottom = function scrollChatToBottom() {
     var scrollingElement = document.querySelector('.chat-body');
     if (scrollingElement) {
@@ -26153,20 +26156,22 @@ var Chat = function Chat(_ref) {
   };
   return React__default.createElement(ChatContainer, {
     width: styles.width || 'auto',
-    height: styles.height || 'auto'
+    height: styles.height || 'auto',
+    isExpanded: isExpanded
+  }, isExpanded && React__default.createElement(reactErrorBoundary.ErrorBoundary, {
+    fallback: React__default.createElement("p", null, "Oops! Your chat has crashed.")
   }, React__default.createElement(CloseButton, {
     onClick: onCloseButton
-  }, React__default.createElement(fa.FaTimes, null)), React__default.createElement(reactErrorBoundary.ErrorBoundary, {
-    fallback: React__default.createElement("p", null, "Oops! Your chat has crashed.")
-  }, React__default.createElement(MessagesContainer, {
+  }, React__default.createElement(fa.FaTimes, null)), React__default.createElement(MessagesContainer, {
     className: "chat-body"
   }, chatMessages.map(function (chatMessage, index) {
     return React__default.createElement(Message, {
       color: styles.textColor || uiColors.yellow,
       key: chatMessage._id + "_" + index
     }, formatMessage(chatMessage));
-  })), React__default.createElement(Form, {
-    onSubmit: handleSubmit
+  }))), React__default.createElement(Form, {
+    onSubmit: handleSubmit,
+    isExpanded: isExpanded
   }, React__default.createElement(TextField, {
     ref: inputRef,
     value: message,
@@ -26182,7 +26187,7 @@ var Chat = function Chat(_ref) {
   }), React__default.createElement(SendButton, {
     type: "submit",
     disabled: !message.trim()
-  }, "\u25B6"))));
+  }, "\u25B6")));
 };
 var ChatContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Chat__ChatContainer",
@@ -26190,7 +26195,7 @@ var ChatContainer = /*#__PURE__*/styled__default.div.withConfig({
 })(["width:", ";height:", ";background-color:rgba(30,30,30,0.3);display:flex;flex-direction:column;position:relative;border-radius:8px;border:1px solid rgba(0,0,0,0.1);overflow:hidden;"], function (props) {
   return props.width;
 }, function (props) {
-  return props.height;
+  return props.isExpanded ? props.height : 'auto';
 });
 var CloseButton = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "Chat__CloseButton",
@@ -26210,7 +26215,9 @@ var Message = /*#__PURE__*/styled__default.div.withConfig({
 var Form = /*#__PURE__*/styled__default.form.withConfig({
   displayName: "Chat__Form",
   componentId: "sc-1bk05n6-4"
-})(["display:flex;padding:8px;background-color:rgba(42,42,42,0.4);"]);
+})(["display:flex;padding:8px;background-color:rgba(42,42,42,0.4);border-radius:", ";"], function (props) {
+  return props.isExpanded ? '0' : '8px';
+});
 var TextField = /*#__PURE__*/styled__default.input.withConfig({
   displayName: "Chat__TextField",
   componentId: "sc-1bk05n6-5"
@@ -26524,17 +26531,40 @@ var ChatRevamp = function ChatRevamp(_ref) {
     onSendTradeMessage = _ref.onSendTradeMessage,
     searchCharacterUI = _ref.searchCharacterUI,
     hideSearchCharacterUI = _ref.hideSearchCharacterUI,
-    showSearchCharacterUI = _ref.showSearchCharacterUI;
+    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 = React.useState(false),
     showRecentChats = _useState[0],
     setShowRecentChats = _useState[1];
+  var _useState2 = React.useState(!minimizedByDefault),
+    isExpanded = _useState2[0],
+    setIsExpanded = _useState2[1];
   var isPrivate = activeTab === 'private';
   var isTrade = activeTab === 'trade';
+  React.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();
@@ -26545,7 +26575,7 @@ var ChatRevamp = function ChatRevamp(_ref) {
         key: tab.label + "_" + index,
         active: tab.id === activeTab,
         onPointerDown: function onPointerDown() {
-          return onChangeTab(tab.id);
+          return handleTabChange(tab.id);
         }
       }, tab.label);
     }));
@@ -26601,29 +26631,62 @@ var ChatRevamp = function ChatRevamp(_ref) {
     }
     return React__default.createElement(Chat, {
       chatMessages: chatMessages,
-      onSendChatMessage: isPrivate ? onSendPrivateChatMessage : isTrade ? onSendTradeMessage : onSendGlobalChatMessage,
+      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
+      onBlur: onBlur,
+      isExpanded: isExpanded
     });
   };
-  return React__default.createElement(React__default.Fragment, null, renderTabs(), React__default.createElement(PrivateChatContainer, {
+  return React__default.createElement(ChatRevampContainer, null, React__default.createElement(TopBar, {
+    isExpanded: isExpanded
+  }, isExpanded && renderTabs(), React__default.createElement(ExpandButton, {
+    onClick: toggleExpand,
+    isExpanded: isExpanded
+  }, isExpanded ? React__default.createElement(io.IoMdContract, {
+    size: 20
+  }) : React__default.createElement(io.IoMdExpand, {
+    size: 20
+  }))), React__default.createElement(PrivateChatContainer, {
     width: (styles == null ? void 0 : styles.width) || '80%',
-    height: (styles == null ? void 0 : styles.height) || 'auto'
-  }, React__default.createElement(RecentChatTabContainer, {
+    height: (styles == null ? void 0 : styles.height) || 'auto',
+    isExpanded: isExpanded
+  }, isExpanded && React__default.createElement(RecentChatTabContainer, {
     isPrivate: isPrivate,
     isOpen: showRecentChats
   }, renderRecentChatTopBar(), renderRecentChatList()), React__default.createElement(ChatWrapper, null, renderChatContent())));
 };
+var ChatRevampContainer = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "ChatRevamp__ChatRevampContainer",
+  componentId: "sc-1sdiknw-0"
+})(["display:flex;flex-direction:column;width:100%;position:relative;"]);
+var TopBar = /*#__PURE__*/styled__default.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 && styled.css(["min-height:32px;"]);
+});
 var TabContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ChatRevamp__TabContainer",
-  componentId: "sc-1sdiknw-0"
-})(["width:100%;display:flex;gap:10px;"]);
+  componentId: "sc-1sdiknw-2"
+})(["display:flex;gap:10px;align-items:center;flex-grow:1;"]);
 var Tab = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "ChatRevamp__Tab",
-  componentId: "sc-1sdiknw-1"
+  componentId: "sc-1sdiknw-3"
 })(["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) {
@@ -26631,19 +26694,27 @@ var Tab = /*#__PURE__*/styled__default.button.withConfig({
 }, function (props) {
   return props.active ? 'white' : uiColors.darkGray;
 });
+var ExpandButton = /*#__PURE__*/styled__default.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;
+  return isExpanded ? 'right: 0' : 'left: 0';
+}, uiColors.orange, uiColors.orange);
 var PrivateChatContainer = /*#__PURE__*/styled__default.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;"], function (_ref2) {
-  var width = _ref2.width;
+  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 (_ref3) {
-  var height = _ref3.height;
-  return height;
+}, function (_ref5) {
+  var height = _ref5.height,
+    isExpanded = _ref5.isExpanded;
+  return isExpanded ? height : 'auto';
 });
 var RecentChatTabContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ChatRevamp__RecentChatTabContainer",
-  componentId: "sc-1sdiknw-3"
+  componentId: "sc-1sdiknw-6"
 })(["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) {
@@ -26657,25 +26728,25 @@ var RecentChatTabContainer = /*#__PURE__*/styled__default.div.withConfig({
 });
 var RecentChatTopBar = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ChatRevamp__RecentChatTopBar",
-  componentId: "sc-1sdiknw-4"
+  componentId: "sc-1sdiknw-7"
 })(["display:flex;align-items:center;justify-content:space-between;height:30px;flex-shrink:0;"]);
 var SearchButton$1 = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "ChatRevamp__SearchButton",
-  componentId: "sc-1sdiknw-5"
+  componentId: "sc-1sdiknw-8"
 })(["border:none;background-color:transparent;display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding:4px;position:relative;"]);
 var BurgerIconContainer = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "ChatRevamp__BurgerIconContainer",
-  componentId: "sc-1sdiknw-6"
+  componentId: "sc-1sdiknw-9"
 })(["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__default.span.withConfig({
   displayName: "ChatRevamp__BurgerLineIcon",
-  componentId: "sc-1sdiknw-7"
+  componentId: "sc-1sdiknw-10"
 })(["width:1rem;height:2px;background-color:#ffffff;"]);
 var RecentChatLogContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ChatRevamp__RecentChatLogContainer",
-  componentId: "sc-1sdiknw-8"
+  componentId: "sc-1sdiknw-11"
 })(["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) {
@@ -26683,28 +26754,28 @@ var RecentChatLogContainer = /*#__PURE__*/styled__default.div.withConfig({
 });
 var ListElementContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ChatRevamp__ListElementContainer",
-  componentId: "sc-1sdiknw-9"
+  componentId: "sc-1sdiknw-12"
 })(["display:flex;justify-content:space-between;align-items:center;padding:2px 0;"]);
 var ListElement$1 = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "ChatRevamp__ListElement",
-  componentId: "sc-1sdiknw-10"
+  componentId: "sc-1sdiknw-13"
 })(["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__default.span.withConfig({
   displayName: "ChatRevamp__StatusDot",
-  componentId: "sc-1sdiknw-11"
+  componentId: "sc-1sdiknw-14"
 })(["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__default.button.withConfig({
   displayName: "ChatRevamp__CloseButton",
-  componentId: "sc-1sdiknw-12"
+  componentId: "sc-1sdiknw-15"
 })(["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__default.div.withConfig({
   displayName: "ChatRevamp__ChatWrapper",
-  componentId: "sc-1sdiknw-13"
-})(["flex-grow:1;overflow:hidden;display:flex;flex-direction:column;"]);
+  componentId: "sc-1sdiknw-16"
+})(["flex-grow:1;overflow:hidden;display:flex;flex-direction:column;position:relative;"]);
 
 var CheckButton = function CheckButton(_ref) {
   var items = _ref.items,