@rpg-engine/long-bow 0.7.18 → 0.7.21

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,6 @@ export interface IChatRevampProps {
     searchCharacterUI: boolean;
     hideSearchCharacterUI: () => void;
     showSearchCharacterUI: () => void;
+    minimizedByDefault?: 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,13 +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 () {
-    scrollChatToBottom();
-  }, [chatMessages]);
+    var _inputRef$current;
+    if (isExpanded) {
+      scrollChatToBottom();
+    }
+    (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
+  }, [chatMessages, isExpanded]);
   var scrollChatToBottom = function scrollChatToBottom() {
     var scrollingElement = document.querySelector('.chat-body');
     if (scrollingElement) {
@@ -26149,21 +26156,24 @@ 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,
     onChange: function onChange(e) {
       return setMessage(e.target.value);
@@ -26173,12 +26183,11 @@ var Chat = function Chat(_ref) {
     onFocus: onFocus,
     onBlur: onBlur,
     onPointerDown: onFocus,
-    autoFocus: true,
     placeholder: "Type your message..."
   }), React__default.createElement(SendButton, {
     type: "submit",
     disabled: !message.trim()
-  }, "\u25B6"))));
+  }, "\u25B6")));
 };
 var ChatContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Chat__ChatContainer",
@@ -26186,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",
@@ -26206,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"
@@ -26520,17 +26531,38 @@ 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;
   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();
@@ -26541,7 +26573,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);
     }));
@@ -26602,24 +26634,46 @@ var ChatRevamp = function ChatRevamp(_ref) {
       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) {
@@ -26627,19 +26681,24 @@ 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;right: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:", ";}"], 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-direction:column;"], function (_ref3) {
+  var width = _ref3.width;
   return width;
-}, function (_ref3) {
-  var height = _ref3.height;
-  return height;
+}, function (_ref4) {
+  var height = _ref4.height,
+    isExpanded = _ref4.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) {
@@ -26653,25 +26712,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) {
@@ -26679,28 +26738,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,