@rpg-engine/long-bow 0.7.8 → 0.7.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.7.8",
+  "version": "0.7.10",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/ChatRevamp/ChatRevamp.tsx

@@ -130,6 +130,7 @@ export const ChatRevamp: React.FC<IChatRevampProps> = ({
             </Ellipsis>
           </ListElement>
           <CloseButton
+            className="close-button"
             onPointerDown={() => onRemoveRecentChatCharacter?.(character)}
           >
             <RxCross2 size={16} />
@@ -184,7 +185,7 @@ export const ChatRevamp: React.FC<IChatRevampProps> = ({
           {renderRecentChatTopBar()}
           {renderRecentChatList()}
         </RecentChatTabContainer>
-        {renderChatContent()}
+        <ChatWrapper>{renderChatContent()}</ChatWrapper>
       </PrivateChatContainer>
     </>
   );
@@ -212,15 +213,15 @@ const Tab = styled.button<{ active: boolean }>`
 
   background-color: ${props =>
     props.active ? uiColors.orange : 'rgba(0, 0, 0, 0.2)'};
-  color: ${props => (props.active ? 'white' : uiColors.gray)};
+  color: ${props => (props.active ? 'white' : uiColors.darkGray)};
 `;
 
 const PrivateChatContainer = styled.div<{ width: string; height: string }>`
   width: ${({ width }) => width};
-  min-height: ${({ height }) => height} !important;
+  height: ${({ height }) => height};
+
   padding: 10px;
   background-color: rgba(0, 0, 0, 0.2);
-  height: auto;
   display: flex;
   gap: 10px;
 `;
@@ -238,6 +239,7 @@ const RecentChatTabContainer = styled.div<{
   min-width: ${props => (props.isOpen ? '180px' : '30px')};
   transition: all 0.3s ease-in-out;
   overflow: hidden;
+  height: 100%;
   @media (max-width: 768px) {
     width: ${props => (props.isOpen ? '50%' : '30px')};
     min-width: ${props => (props.isOpen ? '150px' : '30px')};
@@ -249,6 +251,7 @@ const RecentChatTopBar = styled.div`
   align-items: center;
   justify-content: space-between;
   height: 30px;
+  flex-shrink: 0;
 `;
 
 const SearchButton = styled.button`
@@ -292,16 +295,41 @@ const BurgerLineIcon = styled.span`
 `;
 
 const RecentChatLogContainer = styled.div<{ isOpen: boolean }>`
-  border: none;
-  list-style: none;
-  display: flex;
+  display: ${props => (props.isOpen ? 'flex' : 'none')};
   opacity: ${props => (props.isOpen ? 1 : 0)};
   flex-direction: column;
   gap: 0.5rem;
   transition: opacity 0.3s ease-in-out;
   padding: 0;
   margin: 0;
-  flex: 1;
+  overflow-y: auto;
+  flex-grow: 1;
+  height: 0;
+
+  /* Firefox */
+  scrollbar-width: thin;
+  scrollbar-color: rgba(51, 51, 51, 0.4) rgba(30, 30, 30, 0.4);
+
+  /* WebKit and Chromium-based browsers */
+  &::-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);
+  }
 `;
 
 const ListElementContainer = styled.div`
@@ -325,7 +353,7 @@ const ListElement = styled.button<{ active: boolean }>`
   &:hover {
     color: #ff0;
   }
-  max-width: calc(100% - 24px); // Adjust for close button width
+  max-width: calc(100% - 24px);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -348,8 +376,21 @@ const CloseButton = styled.button`
   transition: all 0.2s ease-in-out;
   background-color: ${uiColors.red};
   color: ${uiColors.white};
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   &:hover {
     background-color: ${uiColors.white};
     color: ${uiColors.red};
   }
 `;
+
+const ChatWrapper = styled.div`
+  flex-grow: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+`;

package/src/stories/ChatRevamp.stories.tsx

@@ -208,6 +208,14 @@ const tabsMock = [
 const recentPrivateChatCharactersMock = [
   { _id: 'someid', name: 'Guilhermexxxxxxxxxxxx' },
   { _id: 'someid2', name: 'Guilherme2' },
+  { _id: 'someid2', name: 'Guilherme2' },
+  { _id: 'someid2', name: 'Guilherme2' },
+  { _id: 'someid2', name: 'Guilherme2' },
+  { _id: 'someid2', name: 'Guilherme2' },
+  { _id: 'someid2', name: 'Guilherme2' },
+  { _id: 'someid2', name: 'Guilherme2' },
+  { _id: 'someid2', name: 'Guilherme2' },
+  { _id: 'someid2', name: 'Guilherme2' },
 ];
 
 const Template: Story<IChatRevampProps> = args => (