@rpg-engine/long-bow 0.5.14 → 0.5.16

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

@@ -1,6 +1,6 @@
-import { IChatMessage } from '@rpg-engine/shared';
+import { IChatMessage, IPrivateChatMessage } from '@rpg-engine/shared';
 import React from 'react';
-interface IStyles {
+export interface IStyles {
     textColor?: string;
     buttonColor?: string;
     buttonBackgroundColor?: string;
@@ -8,7 +8,7 @@ interface IStyles {
     height?: string;
 }
 export interface IChatProps {
-    chatMessages: IChatMessage[];
+    chatMessages: IChatMessage[] | IPrivateChatMessage[];
     onSendChatMessage: (message: string) => void;
     onCloseButton: () => void;
     onFocus?: () => void;
@@ -18,4 +18,3 @@ export interface IChatProps {
     styles?: IStyles;
 }
 export declare const Chat: React.FC<IChatProps>;
-export {};

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

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { ICharacter, IChatMessage, IPrivateChatMessage } from '@rpg-engine/shared';
+import { IStyles } from '../Chat/Chat';
+export interface ITabStyles {
+    width?: string;
+    height?: string;
+}
+export declare type PrivateChatCharacter = Pick<ICharacter, '_id' | 'name'>;
+export interface IChatRevampProps {
+    chatMessages: IChatMessage[] | IPrivateChatMessage[];
+    onSendGlobalChatMessage: (message: string) => void;
+    onCloseButton: () => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    opacity?: number;
+    styles?: IStyles;
+    tabs: {
+        label: string;
+        id: string;
+    }[];
+    activeTab: string;
+    onChangeTab: (tabId: string) => void;
+    privateChatCharacters?: PrivateChatCharacter[];
+    onChangeCharacterName: (characterName: string) => void;
+    onCharacterClick?: (character: PrivateChatCharacter) => void;
+    onSendPrivateChatMessage: (message: string) => void;
+}
+export declare const ChatRevamp: ({ chatMessages, onSendGlobalChatMessage, onChangeCharacterName, onFocus, onBlur, onCloseButton, styles, tabs, onChangeTab, activeTab, privateChatCharacters, onCharacterClick, onSendPrivateChatMessage, }: IChatRevampProps) => JSX.Element;

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { IStyles } from '../Chat/Chat';
+import type { PrivateChatCharacter } from './ChatRevamp';
+interface ISearchCharacterProps {
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onChangeCharacterName: (characterName: string) => void;
+    styles?: IStyles;
+    recentCharacters?: PrivateChatCharacter[];
+    setShowSearchCharacter: (show: boolean) => void;
+    onCharacterClick?: (character: PrivateChatCharacter) => void;
+}
+export declare const SearchCharacter: ({ onChangeCharacterName, onBlur, onFocus, recentCharacters, setShowSearchCharacter, onCharacterClick, styles, }: ISearchCharacterProps) => JSX.Element;
+export {};

package/dist/components/Multitab/TabBody.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
+import { IStyles } from '../Chat/Chat';
 interface IProps {
     id: string;
     children: React.ReactNode;
+    styles?: IStyles;
 }
 export declare const TabBody: React.FC<IProps>;
 export {};

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export * from './components/Button';
 export * from './components/Character/CharacterSelection';
 export * from './components/Chat/Chat';
+export * from './components/ChatRevamp/ChatRevamp';
 export * from './components/Chatdeprecated/ChatDeprecated';
 export * from './components/CheckButton';
 export * from './components/CircularController/CircularController';

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

@@ -12559,15 +12559,11 @@ var Chat = function Chat(_ref) {
     return dayjs(createdAt || new Date()).format('HH:mm') + " " + (emitter != null && emitter.name ? emitter.name + ": " : 'Unknown: ') + " " + message;
   };
   var onRenderChatMessages = function onRenderChatMessages(chatMessages) {
-    return chatMessages != null && chatMessages.length ? chatMessages == null ? void 0 : chatMessages.map(function (_ref2, index) {
-      var _id = _ref2._id,
-        createdAt = _ref2.createdAt,
-        emitter = _ref2.emitter,
-        message = _ref2.message;
+    return chatMessages != null && chatMessages.length ? chatMessages == null ? void 0 : chatMessages.map(function (chatMessage, index) {
       return React__default.createElement(Message, {
         color: (styles == null ? void 0 : styles.textColor) || '#c65102',
-        key: _id + "_" + index
-      }, onRenderMessageLines(emitter, createdAt, message));
+        key: chatMessage._id + "_" + index
+      }, onRenderMessageLines(chatMessage.emitter, chatMessage.createdAt, chatMessage.message));
     }) : React__default.createElement(Message, {
       color: (styles == null ? void 0 : styles.textColor) || '#c65102'
     }, "No messages available.");
@@ -12614,8 +12610,8 @@ var ChatContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1bk05n6-0"
 })(["height:", ";width:", ";padding:10px;background-color:rgba(0,0,0,0.2);height:auto;"], function (props) {
   return props.height;
-}, function (_ref3) {
-  var width = _ref3.width;
+}, function (_ref2) {
+  var width = _ref2.width;
   return width;
 });
 var TextField = /*#__PURE__*/styled.input.withConfig({
@@ -12629,8 +12625,8 @@ var MessagesContainer = /*#__PURE__*/styled.div.withConfig({
 var Message = /*#__PURE__*/styled.div.withConfig({
   displayName: "Chat__Message",
   componentId: "sc-1bk05n6-3"
-})(["margin-bottom:8px;color:", ";"], function (_ref4) {
-  var color = _ref4.color;
+})(["margin-bottom:8px;color:", ";"], function (_ref3) {
+  var color = _ref3.color;
   return color;
 });
 var Form = /*#__PURE__*/styled.form.withConfig({
@@ -12640,11 +12636,11 @@ var Form = /*#__PURE__*/styled.form.withConfig({
 var Button$1 = /*#__PURE__*/styled.button.withConfig({
   displayName: "Chat__Button",
   componentId: "sc-1bk05n6-5"
-})(["color:", ";background-color:", ";width:28px;height:28px;border:none !important;"], function (_ref5) {
-  var buttonColor = _ref5.buttonColor;
+})(["color:", ";background-color:", ";width:28px;height:28px;border:none !important;"], function (_ref4) {
+  var buttonColor = _ref4.buttonColor;
   return buttonColor;
-}, function (_ref6) {
-  var buttonBackgroundColor = _ref6.buttonBackgroundColor;
+}, function (_ref5) {
+  var buttonBackgroundColor = _ref5.buttonBackgroundColor;
   return buttonBackgroundColor;
 });
 
@@ -12670,6 +12666,174 @@ var uiColors = {
   white: '#fff'
 };
 
+var SearchCharacter = function SearchCharacter(_ref) {
+  var onChangeCharacterName = _ref.onChangeCharacterName,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
+    recentCharacters = _ref.recentCharacters,
+    setShowSearchCharacter = _ref.setShowSearchCharacter,
+    onCharacterClick = _ref.onCharacterClick,
+    _ref$styles = _ref.styles,
+    styles = _ref$styles === void 0 ? {
+      textColor: '#c65102',
+      buttonColor: '#005b96',
+      buttonBackgroundColor: 'rgba(0,0,0,.2)',
+      width: '80%',
+      height: 'auto'
+    } : _ref$styles;
+  var _useState = React.useState(''),
+    characterName = _useState[0],
+    setCharacterName = _useState[1];
+  var handleSubmit = function handleSubmit(event) {
+    event.preventDefault();
+    if (!characterName || characterName.trim() === '') return;
+    onChangeCharacterName(characterName);
+  };
+  var handleCharacterClick = function handleCharacterClick(character) {
+    if (!onCharacterClick) return;
+    setCharacterName('');
+    onCharacterClick(character);
+    setShowSearchCharacter(false);
+  };
+  return React__default.createElement(SearchCharacterContainer, {
+    width: (styles == null ? void 0 : styles.width) || '80%',
+    height: (styles == null ? void 0 : styles.height) || 'auto'
+  }, React__default.createElement(Form$1, {
+    onSubmit: handleSubmit
+  }, React__default.createElement(Column, {
+    flex: 70
+  }, React__default.createElement(TextField$1, {
+    value: characterName,
+    id: "inputCharacterName",
+    onChange: function onChange(e) {
+      setCharacterName(e.target.value);
+      onChangeCharacterName(e.target.value);
+    },
+    height: 20,
+    type: "text",
+    autoComplete: "off",
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onPointerDown: onFocus,
+    autoFocus: true
+  })), React__default.createElement(Column, {
+    justifyContent: "flex-end"
+  }, React__default.createElement(SearchButton, {
+    buttonColor: (styles == null ? void 0 : styles.buttonColor) || '#005b96',
+    buttonBackgroundColor: (styles == null ? void 0 : styles.buttonBackgroundColor) || 'rgba(0,0,0,.5)',
+    id: "chat-send-button",
+    style: {
+      borderRadius: '20%'
+    }
+  }, React__default.createElement(rx.RxMagnifyingGlass, {
+    size: 15
+  })))), recentCharacters && recentCharacters.length > 0 && React__default.createElement(ListContainer, null, recentCharacters.map(function (character) {
+    return React__default.createElement(ListElement, {
+      onPointerDown: function onPointerDown() {
+        return handleCharacterClick(character);
+      },
+      key: character._id
+    }, character.name);
+  })));
+};
+var SearchCharacterContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SearchCharacter__SearchCharacterContainer",
+  componentId: "sc-172lyfr-0"
+})(["height:", ";width:", ";padding:10px;background-color:rgba(0,0,0,0.2);height:auto;"], function (props) {
+  return props.height;
+}, function (_ref2) {
+  var width = _ref2.width;
+  return width;
+});
+var Form$1 = /*#__PURE__*/styled.form.withConfig({
+  displayName: "SearchCharacter__Form",
+  componentId: "sc-172lyfr-1"
+})(["display:flex;width:100%;justify-content:center;align-items:center;"]);
+var TextField$1 = /*#__PURE__*/styled.input.withConfig({
+  displayName: "SearchCharacter__TextField",
+  componentId: "sc-172lyfr-2"
+})(["width:100%;background-color:rgba(0,0,0,0.25) !important;border:none !important;max-height:28px !important;"]);
+var SearchButton = /*#__PURE__*/styled.button.withConfig({
+  displayName: "SearchCharacter__SearchButton",
+  componentId: "sc-172lyfr-3"
+})(["color:", ";background-color:", ";width:28px;height:28px;border:none !important;"], function (_ref3) {
+  var buttonColor = _ref3.buttonColor;
+  return buttonColor;
+}, function (_ref4) {
+  var buttonBackgroundColor = _ref4.buttonBackgroundColor;
+  return buttonBackgroundColor;
+});
+var ListContainer = /*#__PURE__*/styled.ul.withConfig({
+  displayName: "SearchCharacter__ListContainer",
+  componentId: "sc-172lyfr-4"
+})(["border:none;overflow-y:scroll;list-style:none;padding:0;"]);
+var ListElement = /*#__PURE__*/styled.li.withConfig({
+  displayName: "SearchCharacter__ListElement",
+  componentId: "sc-172lyfr-5"
+})(["margin:0.5rem 0 !important;font-size:", ";&:hover{color:#ff0;background-color:", ";}button{all:unset;}"], uiFonts.size.small, uiColors.darkGray);
+
+var ChatRevamp = function ChatRevamp(_ref) {
+  var chatMessages = _ref.chatMessages,
+    onSendGlobalChatMessage = _ref.onSendGlobalChatMessage,
+    onChangeCharacterName = _ref.onChangeCharacterName,
+    onFocus = _ref.onFocus,
+    onBlur = _ref.onBlur,
+    onCloseButton = _ref.onCloseButton,
+    styles = _ref.styles,
+    tabs = _ref.tabs,
+    onChangeTab = _ref.onChangeTab,
+    activeTab = _ref.activeTab,
+    privateChatCharacters = _ref.privateChatCharacters,
+    onCharacterClick = _ref.onCharacterClick,
+    onSendPrivateChatMessage = _ref.onSendPrivateChatMessage;
+  var _useState = React.useState(true),
+    showSearchCharacter = _useState[0],
+    setShowSearchCharacter = _useState[1];
+  React.useEffect(function () {
+    setShowSearchCharacter(true);
+  }, [activeTab]);
+  var isPrivate = activeTab === 'private';
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(TabContainer, null, tabs.map(function (tab, index) {
+    return React__default.createElement(Tab, {
+      key: tab.label + "_" + index,
+      active: tab.id === activeTab,
+      onPointerDown: function onPointerDown() {
+        return onChangeTab(tab.id);
+      }
+    }, tab.label);
+  })), isPrivate && showSearchCharacter ? React__default.createElement(SearchCharacter, {
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onChangeCharacterName: onChangeCharacterName,
+    styles: styles,
+    recentCharacters: privateChatCharacters,
+    setShowSearchCharacter: setShowSearchCharacter,
+    onCharacterClick: onCharacterClick
+  }) : React__default.createElement(Chat, {
+    chatMessages: chatMessages,
+    onSendChatMessage: isPrivate ? onSendPrivateChatMessage : onSendGlobalChatMessage,
+    sendMessage: true,
+    onCloseButton: onCloseButton,
+    styles: styles,
+    onFocus: onFocus,
+    onBlur: onBlur
+  }));
+};
+var TabContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ChatRevamp__TabContainer",
+  componentId: "sc-1sdiknw-0"
+})(["width:100%;display:flex;gap:10px;"]);
+var Tab = /*#__PURE__*/styled.button.withConfig({
+  displayName: "ChatRevamp__Tab",
+  componentId: "sc-1sdiknw-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 ? '#c65102' : uiColors.gray;
+}, function (props) {
+  return props.active ? uiColors.orange : 'transparent';
+}, function (props) {
+  return props.active ? 'white' : uiColors.raisinBlack;
+});
+
 var _excluded$2 = ["innerRef"];
 var Input = function Input(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
@@ -12772,7 +12936,7 @@ var ChatDeprecated = function ChatDeprecated(_ref) {
     width: '100%',
     height: '80%',
     className: "chat-body dark-background"
-  }, onRenderChatMessages(chatMessages)), React__default.createElement(Form$1, {
+  }, onRenderChatMessages(chatMessages)), React__default.createElement(Form$2, {
     onSubmit: handleSubmit
   }, React__default.createElement(Column, {
     flex: 70
@@ -12813,7 +12977,7 @@ var CustomContainer = /*#__PURE__*/styled(RPGUIContainer).withConfig({
 })(["display:block;opacity:", ";&:hover{opacity:1;}.dark-background{background-color:", " !important;}.chat-body{&.rpgui-container.framed-grey{background:unset;}max-height:170px;overflow-y:auto;}"], function (props) {
   return props.opacity;
 }, uiColors.darkGray);
-var Form$1 = /*#__PURE__*/styled.form.withConfig({
+var Form$2 = /*#__PURE__*/styled.form.withConfig({
   displayName: "ChatDeprecated__Form",
   componentId: "sc-fuuod3-4"
 })(["display:flex;width:100%;justify-content:center;align-items:center;"]);
@@ -13257,7 +13421,7 @@ var RelativeListMenu = function RelativeListMenu(_ref) {
       overflow: 'hidden'
     }
   }, options.map(function (params, index) {
-    return React__default.createElement(ListElement, {
+    return React__default.createElement(ListElement$1, {
       key: (params == null ? void 0 : params.id) || index,
       onPointerDown: function onPointerDown() {
         onSelected(params == null ? void 0 : params.id);
@@ -13275,7 +13439,7 @@ var Container$8 = /*#__PURE__*/styled.div.withConfig({
 }, function (props) {
   return props.fontSize;
 });
-var ListElement = /*#__PURE__*/styled.li.withConfig({
+var ListElement$1 = /*#__PURE__*/styled.li.withConfig({
   displayName: "RelativeListMenu__ListElement",
   componentId: "sc-7hohf-1"
 })(["margin-right:0.5rem;"]);
@@ -15688,7 +15852,7 @@ var ItemContainer$1 = function ItemContainer(_ref) {
 var ItemsContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemContainer__ItemsContainer",
   componentId: "sc-15y5p9l-0"
-})(["display:flex;justify-content:center;flex-wrap:wrap;"]);
+})(["display:flex;justify-content:center;flex-wrap:wrap;max-height:270px;overflow-y:auto;"]);
 var QuantitySelectorContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemContainer__QuantitySelectorContainer",
   componentId: "sc-15y5p9l-1"
@@ -15826,7 +15990,7 @@ var ListMenu = function ListMenu(_ref) {
       overflow: 'hidden'
     }
   }, options.map(function (params, index) {
-    return React__default.createElement(ListElement$1, {
+    return React__default.createElement(ListElement$2, {
       key: (params == null ? void 0 : params.id) || index,
       onPointerDown: function onPointerDown() {
         onSelected(params == null ? void 0 : params.id);
@@ -15842,7 +16006,7 @@ var Container$j = /*#__PURE__*/styled.div.withConfig({
 }, function (props) {
   return props.x || 0;
 }, uiFonts.size.xsmall);
-var ListElement$1 = /*#__PURE__*/styled.li.withConfig({
+var ListElement$2 = /*#__PURE__*/styled.li.withConfig({
   displayName: "ListMenu__ListElement",
   componentId: "sc-i9097t-1"
 })(["margin-right:0.5rem;"]);
@@ -18337,6 +18501,7 @@ exports.Button = Button;
 exports.CharacterSelection = CharacterSelection;
 exports.Chat = Chat;
 exports.ChatDeprecated = ChatDeprecated;
+exports.ChatRevamp = ChatRevamp;
 exports.CheckButton = CheckButton;
 exports.CircularController = CircularController;
 exports.CraftBook = CraftBook;