@rpg-engine/long-bow 0.7.23 → 0.7.25

package/package.json

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

package/src/components/ChatRevamp/ChatContent.tsx

@@ -43,6 +43,20 @@ export const ChatContent: React.FC<ChatContentProps> = ({
   hideSearchCharacterUI,
   onCharacterClick,
 }) => {
+  const handleSendMessage = (message: string) => {
+    if (autoCloseOnSend) {
+      onCloseButton();
+    }
+
+    if (isPrivate) {
+      onSendPrivateChatMessage(message);
+    } else if (isTrade) {
+      onSendTradeMessage(message);
+    } else {
+      onSendGlobalChatMessage(message);
+    }
+  };
+
   if (isPrivate && searchCharacterUI) {
     return (
       <SearchCharacter
@@ -61,19 +75,7 @@ export const ChatContent: React.FC<ChatContentProps> = ({
     <ChatWrapper>
       <Chat
         chatMessages={chatMessages}
-        onSendChatMessage={() => {
-          if (autoCloseOnSend) {
-            onCloseButton();
-          }
-
-          if (isPrivate) {
-            return onSendPrivateChatMessage;
-          } else if (isTrade) {
-            return onSendTradeMessage;
-          } else {
-            return onSendGlobalChatMessage;
-          }
-        }}
+        onSendChatMessage={handleSendMessage}
         sendMessage={true}
         onCloseButton={onCloseButton}
         styles={styles}

package/src/components/ChatRevamp/ChatRevamp.tsx

@@ -8,44 +8,40 @@ import { ExpandButton } from './ExpandButton';
 import { RecentChats } from './RecentChats';
 import { IChatRevampProps } from './types';
 
-export const ChatRevamp: React.FC<IChatRevampProps> = props => {
-  const {
-    chatMessages,
-    onSendGlobalChatMessage,
-    onChangeCharacterName,
-    onFocus,
-    onBlur,
-    onCloseButton,
-    styles,
-    tabs,
-    onChangeTab,
-    activeTab,
-    privateChatCharacters,
-    onCharacterClick,
-    onSendPrivateChatMessage,
-    recentChatCharacters,
-    recentSelectedChatCharacterId,
-    onPreviousChatCharacterClick,
-    onRemoveRecentChatCharacter,
-    unseenMessageCharacterIds,
-    onSendTradeMessage,
-    searchCharacterUI,
-    hideSearchCharacterUI,
-    showSearchCharacterUI,
-    minimizedByDefault,
-    autoCloseOnSend,
-  } = props;
-
+export const ChatRevamp: React.FC<IChatRevampProps> = ({
+  chatMessages,
+  onSendGlobalChatMessage,
+  onChangeCharacterName,
+  onFocus,
+  onBlur,
+  onCloseButton,
+  styles,
+  tabs,
+  onChangeTab,
+  activeTab = 'global',
+  privateChatCharacters,
+  onCharacterClick,
+  onSendPrivateChatMessage,
+  recentChatCharacters,
+  recentSelectedChatCharacterId,
+  onPreviousChatCharacterClick,
+  onRemoveRecentChatCharacter,
+  unseenMessageCharacterIds,
+  onSendTradeMessage,
+  searchCharacterUI,
+  hideSearchCharacterUI,
+  showSearchCharacterUI,
+  minimizedByDefault = false,
+  autoCloseOnSend,
+}) => {
   const isPrivate = activeTab === 'private';
   const isTrade = activeTab === 'trade';
 
   const chatHook = useChat({
-    activeTab,
     minimizedByDefault,
     isPrivate,
     onChangeTab,
     onPreviousChatCharacterClick,
-    hideSearchCharacterUI,
     unseenMessageCharacterIds,
   });
 
@@ -70,7 +66,7 @@ export const ChatRevamp: React.FC<IChatRevampProps> = props => {
         isExpanded={chatHook.isExpanded}
       >
         {chatHook.isExpanded ? (
-          <>
+          <ExpandedChatContent>
             {isPrivate && (
               <RecentChats
                 showRecentChats={chatHook.showRecentChats}
@@ -80,11 +76,12 @@ export const ChatRevamp: React.FC<IChatRevampProps> = props => {
                 recentChatCharacters={recentChatCharacters}
                 recentSelectedChatCharacterId={recentSelectedChatCharacterId}
                 unseenMessageCharacterIds={unseenMessageCharacterIds}
-                onPreviousChatCharacterClick={character =>
-                  chatHook.handlePreviousChatCharacterClick(character)
+                onPreviousChatCharacterClick={
+                  chatHook.handlePreviousChatCharacterClick
                 }
                 onRemoveRecentChatCharacter={onRemoveRecentChatCharacter}
                 isPrivate={isPrivate}
+                hideSearchCharacterUI={hideSearchCharacterUI}
               />
             )}
             <ChatContentWrapper isPrivate={isPrivate}>
@@ -108,7 +105,7 @@ export const ChatRevamp: React.FC<IChatRevampProps> = props => {
                 onCharacterClick={onCharacterClick}
               />
             </ChatContentWrapper>
-          </>
+          </ExpandedChatContent>
         ) : (
           <CollapsedChatInput>
             <Chat
@@ -162,7 +159,7 @@ const ChatContentWrapper = styled.div<{ isPrivate: boolean }>`
   display: flex;
   flex-direction: column;
   position: relative;
-  width: ${props => (props.isPrivate ? 'calc(75% - 10px)' : '100%')};
+  width: ${props => (props.isPrivate ? '75%' : '100%')};
 `;
 
 const CollapsedChatInput = styled.div`
@@ -171,3 +168,9 @@ const CollapsedChatInput = styled.div`
   display: flex;
   align-items: center;
 `;
+
+const ExpandedChatContent = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+`;

package/src/components/ChatRevamp/ExpandButton.tsx

@@ -20,7 +20,7 @@ export const ExpandButton: React.FC<ExpandButtonProps> = ({
 const StyledExpandButton = styled.button<{ isExpanded: boolean }>`
   position: absolute;
   top: 0;
-  ${({ isExpanded }) => (isExpanded ? 'right: 0' : 'left: 0')};
+  ${({ isExpanded }) => (isExpanded ? 'right: 0' : 'left: 0.5rem')};
   width: 30px;
   height: 30px;
   background-color: ${uiColors.orange};

package/src/components/ChatRevamp/RecentChats.tsx

@@ -17,6 +17,7 @@ interface IRecentChatsProps {
   onPreviousChatCharacterClick: (character: PrivateChatCharacter) => void;
   onRemoveRecentChatCharacter?: (character: PrivateChatCharacter) => void;
   isPrivate: boolean;
+  hideSearchCharacterUI: () => void; // Add this line
 }
 
 export const RecentChats: React.FC<IRecentChatsProps> = ({
@@ -30,50 +31,60 @@ export const RecentChats: React.FC<IRecentChatsProps> = ({
   onPreviousChatCharacterClick,
   onRemoveRecentChatCharacter,
   isPrivate,
-}) => (
-  <RecentChatTabContainer isOpen={showRecentChats} isPrivate={isPrivate}>
-    <RecentChatTopBar>
-      <BurgerIconContainer
-        onPointerDown={toggleRecentChats}
-        hasUnseenMessages={hasUnseenMessages}
-      >
-        <BurgerLineIcon />
-        <BurgerLineIcon />
-        <BurgerLineIcon />
-      </BurgerIconContainer>
-      {showRecentChats && (
-        <SearchButton onPointerDown={showSearchCharacterUI}>
-          <RxMagnifyingGlass size={16} color={uiColors.white} />
-        </SearchButton>
-      )}
-    </RecentChatTopBar>
-    <RecentChatLogContainer isOpen={showRecentChats}>
-      {recentChatCharacters?.map(character => (
-        <ListElementContainer key={character._id}>
-          <ListElement
-            active={character._id === recentSelectedChatCharacterId}
-            onPointerDown={() => onPreviousChatCharacterClick(character)}
-          >
-            <StatusDot
-              isUnseen={
-                unseenMessageCharacterIds?.includes(character._id) ?? false
-              }
-            />
-            <Ellipsis maxWidth="140px" maxLines={1}>
-              {character.name}
-            </Ellipsis>
-          </ListElement>
-          <CloseButton
-            className="close-button"
-            onPointerDown={() => onRemoveRecentChatCharacter?.(character)}
-          >
-            <RxCross2 size={16} />
-          </CloseButton>
-        </ListElementContainer>
-      ))}
-    </RecentChatLogContainer>
-  </RecentChatTabContainer>
-);
+  hideSearchCharacterUI, // Add this line
+}) => {
+  const handlePreviousChatCharacterClick = (
+    character: PrivateChatCharacter
+  ) => {
+    onPreviousChatCharacterClick(character);
+    hideSearchCharacterUI(); // Call hideSearchCharacterUI here
+  };
+
+  return (
+    <RecentChatTabContainer isOpen={showRecentChats} isPrivate={isPrivate}>
+      <RecentChatTopBar>
+        <BurgerIconContainer
+          onPointerDown={toggleRecentChats}
+          hasUnseenMessages={hasUnseenMessages}
+        >
+          <BurgerLineIcon />
+          <BurgerLineIcon />
+          <BurgerLineIcon />
+        </BurgerIconContainer>
+        {showRecentChats && (
+          <SearchButton onPointerDown={showSearchCharacterUI}>
+            <RxMagnifyingGlass size={16} color={uiColors.white} />
+          </SearchButton>
+        )}
+      </RecentChatTopBar>
+      <RecentChatLogContainer isOpen={showRecentChats}>
+        {recentChatCharacters?.map(character => (
+          <ListElementContainer key={character._id}>
+            <ListElement
+              active={character._id === recentSelectedChatCharacterId}
+              onPointerDown={() => handlePreviousChatCharacterClick(character)}
+            >
+              <StatusDot
+                isUnseen={
+                  unseenMessageCharacterIds?.includes(character._id) ?? false
+                }
+              />
+              <Ellipsis maxWidth="140px" maxLines={1}>
+                {character.name}
+              </Ellipsis>
+            </ListElement>
+            <CloseButton
+              className="close-button"
+              onPointerDown={() => onRemoveRecentChatCharacter?.(character)}
+            >
+              <RxCross2 size={16} />
+            </CloseButton>
+          </ListElementContainer>
+        ))}
+      </RecentChatLogContainer>
+    </RecentChatTabContainer>
+  );
+};
 
 const RecentChatTabContainer = styled.div<{
   isPrivate: boolean;

package/src/hooks/useChat.ts

@@ -1,8 +1,14 @@
 import { useEffect, useState } from 'react';
-import {
-  IChatRevampProps,
-  PrivateChatCharacter,
-} from '../components/ChatRevamp/types';
+import { PrivateChatCharacter } from '../components/ChatRevamp/types';
+
+interface IUseChat {
+  minimizedByDefault: boolean;
+  isPrivate: boolean;
+  onChangeTab: (tabId: string) => void;
+  onPreviousChatCharacterClick?: (character: PrivateChatCharacter) => void;
+  hideSearchCharacterUI?: () => void;
+  unseenMessageCharacterIds?: string[];
+}
 
 export const useChat = ({
   minimizedByDefault,
@@ -11,17 +17,7 @@ export const useChat = ({
   onPreviousChatCharacterClick,
   hideSearchCharacterUI,
   unseenMessageCharacterIds,
-}: Pick<
-  IChatRevampProps,
-  | 'activeTab'
-  | 'minimizedByDefault'
-  | 'onChangeTab'
-  | 'onPreviousChatCharacterClick'
-  | 'hideSearchCharacterUI'
-  | 'unseenMessageCharacterIds'
-> & {
-  isPrivate: boolean;
-}) => {
+}: IUseChat) => {
   const [showRecentChats, setShowRecentChats] = useState(false);
   const [isExpanded, setIsExpanded] = useState(!minimizedByDefault);
 
@@ -45,8 +41,12 @@ export const useChat = ({
   const handlePreviousChatCharacterClick = (
     character: PrivateChatCharacter
   ) => {
-    onPreviousChatCharacterClick?.(character);
-    hideSearchCharacterUI();
+    if (onPreviousChatCharacterClick) {
+      onPreviousChatCharacterClick(character);
+    }
+    if (hideSearchCharacterUI) {
+      hideSearchCharacterUI();
+    }
   };
 
   return {

package/src/stories/ChatRevamp.stories.tsx

@@ -156,23 +156,43 @@ const Template: Story<IChatRevampProps> = args => (
 export const Default = Template.bind({});
 
 Default.args = {
-  onSendGlobalChatMessage: () => {},
-  onChangeCharacterName: () => {},
+  onSendGlobalChatMessage: value => {
+    console.log('Sending global chat message:', value);
+  },
+  onChangeCharacterName: value => {
+    console.log('Changing character name to:', value);
+  },
   chatMessages: chatMessagesMock,
   styles: { width: `calc(100% - 0.5rem * 2)`, height: '200px' },
-  onCloseButton: () => console.log('closing chat...'),
+  onCloseButton: () => {
+    console.log('Closing chat...');
+  },
   tabs: tabsMock,
   privateChatCharacters: recentPrivateChatCharactersMock,
   activeTab: 'global',
-  onChangeTab: () => {},
-  onSendPrivateChatMessage: () => {},
-  onSendTradeMessage: () => {},
+  onChangeTab: tab => {
+    console.log('Changing tab to:', tab);
+  },
+  onSendPrivateChatMessage: value => {
+    console.log('Sending private chat message:', value);
+  },
+  onSendTradeMessage: value => {
+    console.log('Sending trade message:', value);
+  },
+  hideSearchCharacterUI: () => {
+    console.log('Hiding search character UI...');
+  },
 };
 
 export const Private = Template.bind({});
 
 Private.args = {
-  onSendGlobalChatMessage: () => {},
+  onSendGlobalChatMessage: () => {
+    console.log('Sending private chat message...');
+  },
+  onSendPrivateChatMessage: () => {
+    console.log('Sending private message...');
+  },
   onChangeCharacterName: () => {},
   chatMessages: chatMessagesMock,
   styles: { width: `calc(100% - 0.5rem * 2)`, height: '200px' },
@@ -180,18 +200,26 @@ Private.args = {
   tabs: tabsMock,
   privateChatCharacters: recentPrivateChatCharactersMock,
   activeTab: 'private',
-  onChangeTab: () => {},
-  onSendPrivateChatMessage: () => {},
+  onChangeTab: () => {
+    console.log('Changing tab...');
+  },
   recentChatCharacters: recentPrivateChatCharactersMock,
   recentSelectedChatCharacterId: recentPrivateChatCharactersMock[0]._id,
   unseenMessageCharacterIds: [recentPrivateChatCharactersMock[0]._id],
   onSendTradeMessage: () => {},
+  searchCharacterUI: false,
+  hideSearchCharacterUI: () => {},
 };
 
 export const Trade = Template.bind({});
 
 Trade.args = {
-  onSendGlobalChatMessage: () => {},
+  onSendGlobalChatMessage: () => {
+    console.log('Sending global message...');
+  },
+  onSendPrivateChatMessage: () => {
+    console.log('Sending private message...');
+  },
   onChangeCharacterName: () => {},
   chatMessages: chatMessagesMock,
   styles: { width: `calc(100% - 0.5rem * 2)`, height: '200px' },