@rpg-engine/long-bow 0.5.13 → 0.5.15

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/components/TradingMenu/TradingItemRow.d.ts

@@ -8,5 +8,6 @@ export interface ITradeComponentProps {
     selectedQty: number;
     equipmentSet?: IEquipmentSet | null;
     scale?: number;
+    isBuy?: boolean;
 }
 export declare const TradingItemRow: React.FC<ITradeComponentProps>;

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;"]);
@@ -15580,7 +15744,6 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     isDepotSystem = _ref.isDepotSystem,
     onPositionChangeEnd = _ref.onPositionChangeEnd,
     onPositionChangeStart = _ref.onPositionChangeStart;
-  var MAX_SLOTS_PER_PAGE = 20;
   var _useState = React.useState({
       isOpen: false,
       maxQuantity: 1,
@@ -15591,10 +15754,6 @@ var ItemContainer$1 = function ItemContainer(_ref) {
   var _useState2 = React.useState(-1),
     settingShortcutIndex = _useState2[0],
     setSettingShortcutIndex = _useState2[1];
-  var _useState3 = React.useState(1),
-    currentPage = _useState3[0],
-    setCurrentPage = _useState3[1];
-  var totalPages = Math.ceil(itemContainer.slotQty / MAX_SLOTS_PER_PAGE);
   var handleSetShortcut = function handleSetShortcut(item, index) {
     if (item.type === shared.ItemType.Consumable || item.type === shared.ItemType.Tool) {
       setItemShortcut == null ? void 0 : setItemShortcut(item.key, index);
@@ -15602,11 +15761,8 @@ var ItemContainer$1 = function ItemContainer(_ref) {
   };
   var onRenderSlots = function onRenderSlots() {
     var slots = [];
-    var start = (currentPage - 1) * MAX_SLOTS_PER_PAGE;
-    var end = start + MAX_SLOTS_PER_PAGE;
-    for (var i = start; i < end && i < itemContainer.slotQty; i++) {
+    for (var i = 0; i < itemContainer.slotQty; i++) {
       var _itemContainer$slots;
-      console.log(itemContainer);
       slots.push(React__default.createElement(ItemSlot, {
         isContextMenuDisabled: disableContextMenu,
         key: i,
@@ -15657,16 +15813,6 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     }
     return slots;
   };
-  var goToNextPage = function goToNextPage() {
-    setCurrentPage(function (current) {
-      return Math.min(current + 1, totalPages);
-    });
-  };
-  var goToPreviousPage = function goToPreviousPage() {
-    setCurrentPage(function (current) {
-      return Math.max(current - 1, 1);
-    });
-  };
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(SlotsContainer, {
     title: itemContainer.name || 'Container',
     onClose: onClose,
@@ -15683,23 +15829,7 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     atlasJSON: atlasJSON
   }), React__default.createElement(ItemsContainer, {
     className: "item-container-body"
-  }, onRenderSlots()), totalPages > 1 && React__default.createElement(ArrowContainer$1, null, currentPage > 1 && React__default.createElement(SelectArrow, {
-    className: 'arrow .arrow-up',
-    direction: "left",
-    onPointerDown: function onPointerDown() {
-      if (currentPage > 1) {
-        goToPreviousPage();
-      }
-    }
-  }), currentPage < totalPages && React__default.createElement(SelectArrow, {
-    className: 'arrow .arrow-down',
-    direction: "right",
-    onPointerDown: function onPointerDown() {
-      if (currentPage < totalPages) {
-        goToNextPage();
-      }
-    }
-  }))), quantitySelect.isOpen && React__default.createElement(ModalPortal, null, React__default.createElement(QuantitySelectorContainer, null, React__default.createElement(ItemQuantitySelector, {
+  }, onRenderSlots())), quantitySelect.isOpen && React__default.createElement(ModalPortal, null, React__default.createElement(QuantitySelectorContainer, null, React__default.createElement(ItemQuantitySelector, {
     quantity: quantitySelect.maxQuantity,
     onConfirm: function onConfirm(quantity) {
       quantitySelect.callback(quantity);
@@ -15722,15 +15852,11 @@ 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"
 })(["position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:100;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,0.5);"]);
-var ArrowContainer$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ItemContainer__ArrowContainer",
-  componentId: "sc-15y5p9l-2"
-})(["margin-top:10px;margin-bottom:30px;span:first-child{margin-left:20px;}span:last-child{margin-right:20px;}"]);
 
 var LeaderboardTable = function LeaderboardTable(props) {
   var items = props.items,
@@ -15864,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);
@@ -15880,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;"]);
@@ -18001,7 +18127,8 @@ var TradingItemRow = function TradingItemRow(_ref) {
     traderItem = _ref.traderItem,
     selectedQty = _ref.selectedQty,
     equipmentSet = _ref.equipmentSet,
-    scale = _ref.scale;
+    scale = _ref.scale,
+    isBuy = _ref.isBuy;
   var onLeftClick = function onLeftClick(qty) {
     if (qty === void 0) {
       qty = 1;
@@ -18015,6 +18142,39 @@ var TradingItemRow = function TradingItemRow(_ref) {
     }
     onQuantityChange(traderItem, Math.min((_traderItem$stackQty = traderItem.stackQty) != null ? _traderItem$stackQty : 999, selectedQty + qty));
   };
+  var renderAccountTypeIndicator = function renderAccountTypeIndicator() {
+    if (isBuy && traderItem.canBePurchasedOnlyByPremiumPlans) {
+      return traderItem.canBePurchasedOnlyByPremiumPlans.map(function (accountType) {
+        if (accountType !== shared.UserAccountTypes.Free) {
+          var backgroundColor;
+          var textColor = 'black';
+          switch (accountType) {
+            case shared.UserAccountTypes.PremiumBronze:
+              backgroundColor = '#CD7F32';
+              break;
+            case shared.UserAccountTypes.PremiumSilver:
+              backgroundColor = '#C0C0C0';
+              break;
+            case shared.UserAccountTypes.PremiumGold:
+              backgroundColor = '#FFD700';
+              break;
+            case shared.UserAccountTypes.PremiumUltimate:
+              backgroundColor = '#002E99';
+              break;
+            default:
+              return null;
+          }
+          return React__default.createElement(PremiumLabel, {
+            backgroundColor: backgroundColor,
+            textColor: textColor,
+            key: accountType
+          }, capitalize(accountType) + ' PA');
+        }
+        return null;
+      });
+    }
+    return null;
+  };
   return React__default.createElement(ItemWrapper, null, React__default.createElement(ItemIconContainer$1, null, React__default.createElement(SpriteContainer$2, null, React__default.createElement(ItemInfoWrapper, {
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
@@ -18034,7 +18194,7 @@ var TradingItemRow = function TradingItemRow(_ref) {
   })))), React__default.createElement(ItemNameContainer, null, React__default.createElement(NameValue, null, React__default.createElement("p", null, React__default.createElement(Ellipsis, {
     maxLines: 1,
     maxWidth: "250px"
-  }, capitalize(traderItem.name))), React__default.createElement("p", null, "$", traderItem.price))), React__default.createElement(QuantityContainer$1, null, React__default.createElement(SelectArrow, {
+  }, capitalize(traderItem.name))), React__default.createElement("p", null, "$", traderItem.price), React__default.createElement("p", null, renderAccountTypeIndicator()))), React__default.createElement(QuantityContainer$1, null, React__default.createElement(SelectArrow, {
     size: 32,
     className: "arrow-selector",
     direction: "left",
@@ -18056,45 +18216,55 @@ var TradingItemRow = function TradingItemRow(_ref) {
     onPointerDown: onRightClick.bind(null, outerQty)
   })));
 };
+var PremiumLabel = /*#__PURE__*/styled.span.withConfig({
+  displayName: "TradingItemRow__PremiumLabel",
+  componentId: "sc-mja0b5-0"
+})(["background-color:", ";color:", ";font-weight:bold;padding:2px 5px;border-radius:5px;margin-right:5px;margin-bottom:5px;display:inline-block;"], function (_ref2) {
+  var backgroundColor = _ref2.backgroundColor;
+  return backgroundColor;
+}, function (_ref3) {
+  var textColor = _ref3.textColor;
+  return textColor;
+});
 var StyledArrow = /*#__PURE__*/styled(SelectArrow).withConfig({
   displayName: "TradingItemRow__StyledArrow",
-  componentId: "sc-mja0b5-0"
+  componentId: "sc-mja0b5-1"
 })(["margin:40px;"]);
 var ItemWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__ItemWrapper",
-  componentId: "sc-mja0b5-1"
+  componentId: "sc-mja0b5-2"
 })(["width:100%;margin:auto;display:flex;justify-content:space-between;margin-bottom:1rem;&:hover{background-color:", ";}padding:0.5rem;"], uiColors.darkGray);
 var ItemNameContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__ItemNameContainer",
-  componentId: "sc-mja0b5-2"
+  componentId: "sc-mja0b5-3"
 })(["flex:60%;"]);
 var ItemIconContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__ItemIconContainer",
-  componentId: "sc-mja0b5-3"
+  componentId: "sc-mja0b5-4"
 })(["display:flex;justify-content:flex-start;align-items:center;flex:0 0 58px;"]);
 var SpriteContainer$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__SpriteContainer",
-  componentId: "sc-mja0b5-4"
+  componentId: "sc-mja0b5-5"
 })(["position:relative;top:-0.5rem;left:0.5rem;"]);
 var NameValue = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__NameValue",
-  componentId: "sc-mja0b5-5"
+  componentId: "sc-mja0b5-6"
 })(["p{font-size:0.75rem;margin:0;}"]);
 var Item$1 = /*#__PURE__*/styled.span.withConfig({
   displayName: "TradingItemRow__Item",
-  componentId: "sc-mja0b5-6"
+  componentId: "sc-mja0b5-7"
 })(["color:white;text-align:center;z-index:1;width:100%;"]);
 var TextOverlay$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__TextOverlay",
-  componentId: "sc-mja0b5-7"
+  componentId: "sc-mja0b5-8"
 })(["width:100%;position:relative;"]);
 var QuantityContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__QuantityContainer",
-  componentId: "sc-mja0b5-8"
+  componentId: "sc-mja0b5-9"
 })(["position:relative;display:flex;min-width:100px;width:40%;justify-content:center;align-items:center;flex:40%;"]);
 var QuantityDisplay = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__QuantityDisplay",
-  componentId: "sc-mja0b5-9"
+  componentId: "sc-mja0b5-10"
 })(["font-size:", ";"], uiFonts.size.small);
 
 var TradingMenu = function TradingMenu(_ref) {
@@ -18180,7 +18350,8 @@ var TradingMenu = function TradingMenu(_ref) {
       traderItem: tradeItem,
       selectedQty: (_qtyMap$get = qtyMap.get(tradeItem.key)) != null ? _qtyMap$get : 0,
       equipmentSet: equipmentSet,
-      scale: scale
+      scale: scale,
+      isBuy: isBuy()
     }));
   })), React__default.createElement(GoldWrapper, null, React__default.createElement("p", null, "Available Gold:"), React__default.createElement("p", null, "$", characterAvailableGold)), React__default.createElement(TotalWrapper, null, React__default.createElement("p", null, "Total:"), React__default.createElement("p", null, "$", sum)), !hasGoldForSale() ? React__default.createElement(AlertWrapper, null, React__default.createElement("p", null, " Sorry, not enough money.")) : React__default.createElement(GoldWrapper, null, React__default.createElement("p", null, "Final Gold:"), React__default.createElement("p", null, "$", getFinalGold())), React__default.createElement(ButtonWrapper$2, null, React__default.createElement(Button, {
     buttonType: exports.ButtonTypes.RPGUIButton,
@@ -18330,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;