@rpg-engine/long-bow 0.7.18 → 0.7.21

package/package.json

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

package/src/components/Chat/Chat.tsx

@@ -1,5 +1,5 @@
 import dayjs from 'dayjs';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { FaTimes } from 'react-icons/fa';
 import styled from 'styled-components';
@@ -28,6 +28,7 @@ export interface IChatProps {
   opacity?: number;
   sendMessage: boolean;
   styles?: IStyles;
+  isExpanded: boolean;
 }
 
 export const Chat: React.FC<IChatProps> = ({
@@ -43,12 +44,17 @@ export const Chat: React.FC<IChatProps> = ({
     width: '100%',
     height: '100%',
   },
+  isExpanded,
 }) => {
   const [message, setMessage] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
-    scrollChatToBottom();
-  }, [chatMessages]);
+    if (isExpanded) {
+      scrollChatToBottom();
+    }
+    inputRef.current?.focus();
+  }, [chatMessages, isExpanded]);
 
   const scrollChatToBottom = () => {
     const scrollingElement = document.querySelector('.chat-body');
@@ -78,39 +84,41 @@ export const Chat: React.FC<IChatProps> = ({
     <ChatContainer
       width={styles.width || 'auto'}
       height={styles.height || 'auto'}
+      isExpanded={isExpanded}
     >
-      <CloseButton onClick={onCloseButton}>
-        <FaTimes />
-      </CloseButton>
-      <ErrorBoundary fallback={<p>Oops! Your chat has crashed.</p>}>
-        <MessagesContainer className="chat-body">
-          {chatMessages.map((chatMessage, index) => (
-            <Message
-              color={styles.textColor || uiColors.yellow}
-              key={`${chatMessage._id}_${index}`}
-            >
-              {formatMessage(chatMessage)}
-            </Message>
-          ))}
-        </MessagesContainer>
-
-        <Form onSubmit={handleSubmit}>
-          <TextField
-            value={message}
-            onChange={e => setMessage(e.target.value)}
-            type="text"
-            autoComplete="off"
-            onFocus={onFocus}
-            onBlur={onBlur}
-            onPointerDown={onFocus}
-            autoFocus
-            placeholder="Type your message..."
-          />
-          <SendButton type="submit" disabled={!message.trim()}>
-            ▶
-          </SendButton>
-        </Form>
-      </ErrorBoundary>
+      {isExpanded && (
+        <ErrorBoundary fallback={<p>Oops! Your chat has crashed.</p>}>
+          <CloseButton onClick={onCloseButton}>
+            <FaTimes />
+          </CloseButton>
+          <MessagesContainer className="chat-body">
+            {chatMessages.map((chatMessage, index) => (
+              <Message
+                color={styles.textColor || uiColors.yellow}
+                key={`${chatMessage._id}_${index}`}
+              >
+                {formatMessage(chatMessage)}
+              </Message>
+            ))}
+          </MessagesContainer>
+        </ErrorBoundary>
+      )}
+      <Form onSubmit={handleSubmit} isExpanded={isExpanded}>
+        <TextField
+          ref={inputRef}
+          value={message}
+          onChange={e => setMessage(e.target.value)}
+          type="text"
+          autoComplete="off"
+          onFocus={onFocus}
+          onBlur={onBlur}
+          onPointerDown={onFocus}
+          placeholder="Type your message..."
+        />
+        <SendButton type="submit" disabled={!message.trim()}>
+          ▶
+        </SendButton>
+      </Form>
     </ChatContainer>
   );
 };
@@ -124,9 +132,9 @@ interface IMessageProps {
   color: string;
 }
 
-const ChatContainer = styled.div<IContainerProps>`
+const ChatContainer = styled.div<IContainerProps & { isExpanded: boolean }>`
   width: ${props => props.width};
-  height: ${props => props.height};
+  height: ${props => (props.isExpanded ? props.height : 'auto')};
   background-color: rgba(30, 30, 30, 0.3);
   display: flex;
   flex-direction: column;
@@ -180,10 +188,11 @@ const Message = styled.div<IMessageProps>`
   word-break: break-word;
 `;
 
-const Form = styled.form`
+const Form = styled.form<{ isExpanded: boolean }>`
   display: flex;
   padding: 8px;
   background-color: rgba(42, 42, 42, 0.4);
+  border-radius: ${props => (props.isExpanded ? '0' : '8px')};
 `;
 
 const TextField = styled.input`

package/src/components/ChatRevamp/ChatRevamp.tsx

@@ -4,9 +4,10 @@ import {
   IPrivateChatMessage,
   ITradeChatMessage,
 } from '@rpg-engine/shared';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import { IoMdContract, IoMdExpand } from 'react-icons/io';
 import { RxCross2, RxMagnifyingGlass } from 'react-icons/rx';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
 import { uiFonts } from '../../constants/uiFonts';
 import { Chat, IStyles } from '../Chat/Chat';
@@ -42,6 +43,7 @@ export interface IChatRevampProps {
   searchCharacterUI: boolean;
   hideSearchCharacterUI: () => void;
   showSearchCharacterUI: () => void;
+  minimizedByDefault?: boolean;
 }
 
 export const ChatRevamp: React.FC<IChatRevampProps> = ({
@@ -67,14 +69,31 @@ export const ChatRevamp: React.FC<IChatRevampProps> = ({
   searchCharacterUI,
   hideSearchCharacterUI,
   showSearchCharacterUI,
+  minimizedByDefault = false,
 }) => {
   const [showRecentChats, setShowRecentChats] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(!minimizedByDefault);
 
   const isPrivate = activeTab === 'private';
   const isTrade = activeTab === 'trade';
 
+  useEffect(() => {
+    if (isPrivate) {
+      setIsExpanded(true);
+    }
+  }, [isPrivate]);
+
+  const toggleExpand = () => setIsExpanded(prev => !prev);
+
   const toggleRecentChats = () => setShowRecentChats(prev => !prev);
 
+  const handleTabChange = (tabId: string) => {
+    if (tabId === 'private') {
+      setIsExpanded(true);
+    }
+    onChangeTab(tabId);
+  };
+
   const handlePreviousChatCharacterClick = (
     character: PrivateChatCharacter
   ) => {
@@ -88,7 +107,7 @@ export const ChatRevamp: React.FC<IChatRevampProps> = ({
         <Tab
           key={`${tab.label}_${index}`}
           active={tab.id === activeTab}
-          onPointerDown={() => onChangeTab(tab.id)}
+          onPointerDown={() => handleTabChange(tab.id)}
         >
           {tab.label}
         </Tab>
@@ -170,31 +189,67 @@ export const ChatRevamp: React.FC<IChatRevampProps> = ({
         styles={styles}
         onFocus={onFocus}
         onBlur={onBlur}
+        isExpanded={isExpanded}
       />
     );
   };
 
   return (
-    <>
-      {renderTabs()}
+    <ChatRevampContainer>
+      <TopBar isExpanded={isExpanded}>
+        {isExpanded && renderTabs()}
+        <ExpandButton onClick={toggleExpand} isExpanded={isExpanded}>
+          {isExpanded ? <IoMdContract size={20} /> : <IoMdExpand size={20} />}
+        </ExpandButton>
+      </TopBar>
       <PrivateChatContainer
         width={styles?.width || '80%'}
         height={styles?.height || 'auto'}
+        isExpanded={isExpanded}
       >
-        <RecentChatTabContainer isPrivate={isPrivate} isOpen={showRecentChats}>
-          {renderRecentChatTopBar()}
-          {renderRecentChatList()}
-        </RecentChatTabContainer>
+        {isExpanded && (
+          <RecentChatTabContainer
+            isPrivate={isPrivate}
+            isOpen={showRecentChats}
+          >
+            {renderRecentChatTopBar()}
+            {renderRecentChatList()}
+          </RecentChatTabContainer>
+        )}
         <ChatWrapper>{renderChatContent()}</ChatWrapper>
       </PrivateChatContainer>
-    </>
+    </ChatRevampContainer>
   );
 };
 
-const TabContainer = styled.div`
+const ChatRevampContainer = styled.div`
+  display: flex;
+  flex-direction: column;
   width: 100%;
+  position: relative;
+`;
+
+interface ITopBarProps {
+  isExpanded: boolean;
+}
+
+const TopBar = styled.div<ITopBarProps>`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+
+  ${({ isExpanded }) =>
+    !isExpanded &&
+    css`
+      min-height: 32px; // Ensure there's always space for the expand button when its collapsed
+    `}
+`;
+
+const TabContainer = styled.div`
   display: flex;
   gap: 10px;
+  align-items: center;
+  flex-grow: 1;
 `;
 
 const Tab = styled.button<{ active: boolean }>`
@@ -216,14 +271,40 @@ const Tab = styled.button<{ active: boolean }>`
   color: ${props => (props.active ? 'white' : uiColors.darkGray)};
 `;
 
-const PrivateChatContainer = styled.div<{ width: string; height: string }>`
-  width: ${({ width }) => width};
-  height: ${({ height }) => height};
+const ExpandButton = styled.button<{ isExpanded: boolean }>`
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 30px;
+  height: 30px;
+  background-color: ${uiColors.orange};
+  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};
+  }
+`;
 
+const PrivateChatContainer = styled.div<{
+  width: string;
+  height: string;
+  isExpanded: boolean;
+}>`
+  width: ${({ width }) => width};
+  height: ${({ height, isExpanded }) => (isExpanded ? height : 'auto')};
   padding: 10px;
   background-color: rgba(0, 0, 0, 0.2);
   display: flex;
   gap: 10px;
+  flex-direction: column;
 `;
 
 const RecentChatTabContainer = styled.div<{
@@ -394,4 +475,5 @@ const ChatWrapper = styled.div`
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  position: relative;
 `;