@rpg-engine/long-bow 0.7.22 → 0.7.24

package/dist/stories/ChatRevamp.stories.d.ts

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/react';
-import { IChatRevampProps } from '../components/ChatRevamp/ChatRevamp';
+import { IChatRevampProps } from '../components/ChatRevamp/types';
 declare const meta: Meta;
 export default meta;
 export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IChatRevampProps>;

package/package.json

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

package/src/components/Chat/Chat.tsx

@@ -4,7 +4,7 @@ import { ErrorBoundary } from 'react-error-boundary';
 import { FaTimes } from 'react-icons/fa';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
-import { ChatMessage } from '../ChatRevamp/ChatRevamp';
+import { ChatMessage } from '../ChatRevamp/types';
 
 export interface IStyles {
   textColor?: string;

package/src/components/ChatRevamp/ChatContent.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Chat, IStyles } from '../Chat/Chat';
+import { SearchCharacter } from './SearchCharacter';
+import { ChatMessage, PrivateChatCharacter } from './types';
+
+interface ChatContentProps {
+  isPrivate: boolean;
+  isTrade: boolean;
+  searchCharacterUI: boolean;
+  chatMessages: ChatMessage[];
+  onSendGlobalChatMessage: (message: string) => void;
+  onSendPrivateChatMessage: (message: string) => void;
+  onSendTradeMessage: (message: string) => void;
+  onCloseButton: () => void;
+  styles?: IStyles;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  isExpanded: boolean;
+  autoCloseOnSend: boolean;
+  onChangeCharacterName: (characterName: string) => void;
+  privateChatCharacters?: PrivateChatCharacter[];
+  hideSearchCharacterUI: () => void;
+  onCharacterClick?: (character: PrivateChatCharacter) => void;
+}
+
+export const ChatContent: React.FC<ChatContentProps> = ({
+  isPrivate,
+  isTrade,
+  searchCharacterUI,
+  chatMessages,
+  onSendGlobalChatMessage,
+  onSendPrivateChatMessage,
+  onSendTradeMessage,
+  onCloseButton,
+  styles,
+  onFocus,
+  onBlur,
+  isExpanded,
+  autoCloseOnSend,
+  onChangeCharacterName,
+  privateChatCharacters,
+  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
+        onFocus={onFocus}
+        onBlur={onBlur}
+        onChangeCharacterName={onChangeCharacterName}
+        styles={styles}
+        recentCharacters={privateChatCharacters}
+        hideSearchCharacterUI={hideSearchCharacterUI}
+        onCharacterClick={onCharacterClick}
+      />
+    );
+  }
+
+  return (
+    <ChatWrapper>
+      <Chat
+        chatMessages={chatMessages}
+        onSendChatMessage={handleSendMessage}
+        sendMessage={true}
+        onCloseButton={onCloseButton}
+        styles={styles}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        isExpanded={isExpanded}
+      />
+    </ChatWrapper>
+  );
+};
+
+const ChatWrapper = styled.div`
+  flex-grow: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+`;

package/src/components/ChatRevamp/ChatRevamp.tsx

@@ -1,51 +1,12 @@
-import {
-  ICharacter,
-  IChatMessage,
-  IPrivateChatMessage,
-  ITradeChatMessage,
-} from '@rpg-engine/shared';
-import React, { useEffect, useState } from 'react';
-import { IoMdContract, IoMdExpand } from 'react-icons/io';
-import { RxCross2, RxMagnifyingGlass } from 'react-icons/rx';
-import styled, { css } from 'styled-components';
-import { uiColors } from '../../constants/uiColors';
-import { uiFonts } from '../../constants/uiFonts';
-import { Chat, IStyles } from '../Chat/Chat';
-import { Ellipsis } from '../shared/Ellipsis';
-import { SearchCharacter } from './SearchCharacter';
-
-export type PrivateChatCharacter = Pick<ICharacter, '_id' | 'name'>;
-
-export type ChatMessage =
-  | IChatMessage
-  | IPrivateChatMessage
-  | ITradeChatMessage;
-export interface IChatRevampProps {
-  chatMessages: ChatMessage[];
-  onSendGlobalChatMessage: (message: string) => void;
-  onCloseButton: () => void;
-  onFocus?: () => void;
-  onBlur?: () => void;
-  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;
-  recentChatCharacters?: PrivateChatCharacter[];
-  recentSelectedChatCharacterId?: string;
-  onPreviousChatCharacterClick?: (character: PrivateChatCharacter) => void;
-  onRemoveRecentChatCharacter?: (character: PrivateChatCharacter) => void;
-  unseenMessageCharacterIds?: string[];
-  onSendTradeMessage: (message: string) => void;
-  searchCharacterUI: boolean;
-  hideSearchCharacterUI: () => void;
-  showSearchCharacterUI: () => void;
-  minimizedByDefault?: boolean;
-  autoCloseOnSend?: boolean;
-}
+import React from 'react';
+import styled from 'styled-components';
+import { useChat } from '../../hooks/useChat';
+import { Chat } from '../Chat/Chat';
+import { ChatContent } from './ChatContent';
+import { ChatTabs } from './ChatTabs';
+import { ExpandButton } from './ExpandButton';
+import { RecentChats } from './RecentChats';
+import { IChatRevampProps } from './types';
 
 export const ChatRevamp: React.FC<IChatRevampProps> = ({
   chatMessages,
@@ -57,174 +18,108 @@ export const ChatRevamp: React.FC<IChatRevampProps> = ({
   styles,
   tabs,
   onChangeTab,
-  activeTab,
+  activeTab = 'global',
   privateChatCharacters,
   onCharacterClick,
   onSendPrivateChatMessage,
   recentChatCharacters,
-  recentSelectedChatCharacterId = '',
+  recentSelectedChatCharacterId,
   onPreviousChatCharacterClick,
   onRemoveRecentChatCharacter,
-  unseenMessageCharacterIds = [],
+  unseenMessageCharacterIds,
   onSendTradeMessage,
   searchCharacterUI,
   hideSearchCharacterUI,
   showSearchCharacterUI,
   minimizedByDefault = false,
-  autoCloseOnSend = false,
+  autoCloseOnSend,
 }) => {
-  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
-  ) => {
-    onPreviousChatCharacterClick?.(character);
-    hideSearchCharacterUI();
-  };
-
-  const renderTabs = () => (
-    <TabContainer>
-      {tabs.map((tab, index) => (
-        <Tab
-          key={`${tab.label}_${index}`}
-          active={tab.id === activeTab}
-          onPointerDown={() => handleTabChange(tab.id)}
-        >
-          {tab.label}
-        </Tab>
-      ))}
-    </TabContainer>
-  );
-
-  const renderRecentChatTopBar = () => (
-    <RecentChatTopBar>
-      <BurgerIconContainer
-        onPointerDown={toggleRecentChats}
-        hasUnseenMessages={unseenMessageCharacterIds.length > 0}
-      >
-        <BurgerLineIcon />
-        <BurgerLineIcon />
-        <BurgerLineIcon />
-      </BurgerIconContainer>
-      {showRecentChats && (
-        <SearchButton onPointerDown={showSearchCharacterUI}>
-          <RxMagnifyingGlass size={16} color={uiColors.white} />
-        </SearchButton>
-      )}
-    </RecentChatTopBar>
-  );
-
-  const renderRecentChatList = () => (
-    <RecentChatLogContainer isOpen={showRecentChats}>
-      {recentChatCharacters?.map(character => (
-        <ListElementContainer key={character._id}>
-          <ListElement
-            active={character._id === recentSelectedChatCharacterId}
-            onPointerDown={() => handlePreviousChatCharacterClick(character)}
-          >
-            <StatusDot
-              isUnseen={unseenMessageCharacterIds.includes(character._id)}
-            />
-            <Ellipsis maxWidth="140px" maxLines={1}>
-              {character.name}
-            </Ellipsis>
-          </ListElement>
-          <CloseButton
-            className="close-button"
-            onPointerDown={() => onRemoveRecentChatCharacter?.(character)}
-          >
-            <RxCross2 size={16} />
-          </CloseButton>
-        </ListElementContainer>
-      ))}
-    </RecentChatLogContainer>
-  );
-
-  const renderChatContent = () => {
-    if (isPrivate && searchCharacterUI) {
-      return (
-        <SearchCharacter
-          onFocus={onFocus}
-          onBlur={onBlur}
-          onChangeCharacterName={onChangeCharacterName}
-          styles={styles}
-          recentCharacters={privateChatCharacters}
-          hideSearchCharacterUI={hideSearchCharacterUI}
-          onCharacterClick={onCharacterClick}
-        />
-      );
-    }
-
-    return (
-      <Chat
-        chatMessages={chatMessages}
-        onSendChatMessage={() => {
-          if (autoCloseOnSend) {
-            onCloseButton();
-          }
-
-          if (isPrivate) {
-            return onSendPrivateChatMessage;
-          } else if (isTrade) {
-            return onSendTradeMessage;
-          } else {
-            return onSendGlobalChatMessage;
-          }
-        }}
-        sendMessage={true}
-        onCloseButton={onCloseButton}
-        styles={styles}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        isExpanded={isExpanded}
-      />
-    );
-  };
+  const chatHook = useChat({
+    minimizedByDefault,
+    isPrivate,
+    onChangeTab,
+    onPreviousChatCharacterClick,
+    unseenMessageCharacterIds,
+  });
 
   return (
     <ChatRevampContainer>
-      <TopBar isExpanded={isExpanded}>
-        {isExpanded && renderTabs()}
-        <ExpandButton onClick={toggleExpand} isExpanded={isExpanded}>
-          {isExpanded ? <IoMdContract size={20} /> : <IoMdExpand size={20} />}
-        </ExpandButton>
+      <TopBar isExpanded={chatHook.isExpanded}>
+        {chatHook.isExpanded && (
+          <ChatTabs
+            tabs={tabs}
+            activeTab={activeTab}
+            onChangeTab={chatHook.handleTabChange}
+          />
+        )}
+        <ExpandButton
+          isExpanded={chatHook.isExpanded}
+          onClick={chatHook.toggleExpand}
+        />
       </TopBar>
       <PrivateChatContainer
         width={styles?.width || '80%'}
         height={styles?.height || 'auto'}
-        isExpanded={isExpanded}
+        isExpanded={chatHook.isExpanded}
       >
-        {isExpanded && (
-          <RecentChatTabContainer
-            isPrivate={isPrivate}
-            isOpen={showRecentChats}
-          >
-            {renderRecentChatTopBar()}
-            {renderRecentChatList()}
-          </RecentChatTabContainer>
+        {chatHook.isExpanded ? (
+          <ExpandedChatContent>
+            {isPrivate && (
+              <RecentChats
+                showRecentChats={chatHook.showRecentChats}
+                toggleRecentChats={chatHook.toggleRecentChats}
+                hasUnseenMessages={chatHook.hasUnseenMessages || false}
+                showSearchCharacterUI={showSearchCharacterUI}
+                recentChatCharacters={recentChatCharacters}
+                recentSelectedChatCharacterId={recentSelectedChatCharacterId}
+                unseenMessageCharacterIds={unseenMessageCharacterIds}
+                onPreviousChatCharacterClick={
+                  chatHook.handlePreviousChatCharacterClick
+                }
+                onRemoveRecentChatCharacter={onRemoveRecentChatCharacter}
+                isPrivate={isPrivate}
+                hideSearchCharacterUI={hideSearchCharacterUI}
+              />
+            )}
+            <ChatContentWrapper isPrivate={isPrivate}>
+              <ChatContent
+                isPrivate={isPrivate}
+                isTrade={isTrade}
+                searchCharacterUI={searchCharacterUI}
+                chatMessages={chatMessages}
+                onSendGlobalChatMessage={onSendGlobalChatMessage}
+                onSendPrivateChatMessage={onSendPrivateChatMessage}
+                onSendTradeMessage={onSendTradeMessage}
+                onCloseButton={onCloseButton}
+                styles={styles}
+                onFocus={onFocus}
+                onBlur={onBlur}
+                isExpanded={chatHook.isExpanded}
+                autoCloseOnSend={autoCloseOnSend || false}
+                onChangeCharacterName={onChangeCharacterName}
+                privateChatCharacters={privateChatCharacters}
+                hideSearchCharacterUI={hideSearchCharacterUI}
+                onCharacterClick={onCharacterClick}
+              />
+            </ChatContentWrapper>
+          </ExpandedChatContent>
+        ) : (
+          <CollapsedChatInput>
+            <Chat
+              chatMessages={[]}
+              onSendChatMessage={onSendGlobalChatMessage}
+              sendMessage={true}
+              onCloseButton={onCloseButton}
+              styles={styles}
+              onFocus={onFocus}
+              onBlur={onBlur}
+              isExpanded={false}
+            />
+          </CollapsedChatInput>
         )}
-        <ChatWrapper>{renderChatContent()}</ChatWrapper>
       </PrivateChatContainer>
     </ChatRevampContainer>
   );
@@ -237,68 +132,11 @@ const ChatRevampContainer = styled.div`
   position: relative;
 `;
 
-interface ITopBarProps {
-  isExpanded: boolean;
-}
-
-const TopBar = styled.div<ITopBarProps>`
+const TopBar = styled.div<{ isExpanded: boolean }>`
   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 }>`
-  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: ${props =>
-    props.active ? 'rgba(198, 81, 2, 0.5)' : 'rgba(128, 128, 128, 0.5)'};
-
-  background-color: ${props =>
-    props.active ? uiColors.orange : 'rgba(0, 0, 0, 0.2)'};
-  color: ${props => (props.active ? 'white' : uiColors.darkGray)};
-`;
-
-const ExpandButton = styled.button<{ isExpanded: boolean }>`
-  position: absolute;
-  top: 0;
-  ${({ isExpanded }) => (isExpanded ? 'right: 0' : 'left: 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};
-  }
+  min-height: ${({ isExpanded }) => (isExpanded ? 'auto' : '32px')};
 `;
 
 const PrivateChatContainer = styled.div<{
@@ -315,173 +153,24 @@ const PrivateChatContainer = styled.div<{
   flex-wrap: wrap;
 `;
 
-const RecentChatTabContainer = styled.div<{
-  isPrivate: boolean;
-  isOpen: boolean;
-}>`
-  display: ${props => (props.isPrivate ? 'flex' : 'none')};
-  flex-direction: column;
-  border-right: 1px solid ${uiColors.gray};
-  outline: none;
-  width: ${props => (props.isOpen ? '25%' : '30px')};
-  max-width: 200px;
-  min-width: ${props => (props.isOpen ? '180px' : '30px')};
-  transition: all 0.3s ease-in-out;
+const ChatContentWrapper = styled.div<{ isPrivate: boolean }>`
+  flex-grow: 1;
   overflow: hidden;
-  height: 100%;
-  @media (max-width: 768px) {
-    width: ${props => (props.isOpen ? '50%' : '30px')};
-    min-width: ${props => (props.isOpen ? '150px' : '30px')};
-  }
-`;
-
-const RecentChatTopBar = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 30px;
-  flex-shrink: 0;
-`;
-
-const SearchButton = styled.button`
-  border: none;
-  background-color: transparent;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 2px;
-  padding: 4px;
-  position: relative;
-`;
-
-const BurgerIconContainer = styled.button<{ hasUnseenMessages: boolean }>`
-  border: none;
-  background-color: transparent;
   display: flex;
   flex-direction: column;
-  align-items: flex-end;
-  padding: 4px;
-  gap: 2px;
   position: relative;
-
-  &:after {
-    content: '';
-    width: 6px;
-    height: 6px;
-    position: absolute;
-    top: 0;
-    right: 2px;
-    border-radius: 50%;
-    background-color: ${uiColors.lightGreen};
-    display: ${props => (props.hasUnseenMessages ? 'block' : 'none')};
-  }
-`;
-
-const BurgerLineIcon = styled.span`
-  width: 1rem;
-  height: 2px;
-  background-color: #ffffff;
+  width: ${props => (props.isPrivate ? '75%' : '100%')};
 `;
 
-const RecentChatLogContainer = styled.div<{ isOpen: boolean }>`
-  display: ${props => (props.isOpen ? 'flex' : 'none')};
-  opacity: ${props => (props.isOpen ? 1 : 0)};
-  flex-direction: column;
-  gap: 0.25rem; // Reduce this from 0.5rem to 0.25rem
-  transition: opacity 0.3s ease-in-out;
-  padding: 0;
-  margin: 0;
-  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`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 2px 0; // Add small vertical padding
-`;
-
-const ListElement = styled.button<{ active: boolean }>`
-  margin: 0 !important; // Remove vertical margins
-  font-size: ${uiFonts.size.small} !important;
-  padding: 2px;
-  all: unset;
-  color: ${props => (props.active ? uiColors.yellow : uiColors.white)};
+const CollapsedChatInput = styled.div`
   width: 100%;
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-
-  &:hover {
-    color: #ff0;
-  }
-  max-width: calc(100% - 24px);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-
-const StatusDot = styled.span<{ isUnseen: boolean }>`
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background-color: ${props =>
-    props.isUnseen ? uiColors.lightGreen : uiColors.gray};
-  display: inline-block;
-  margin-right: 6px;
-`;
-
-const CloseButton = styled.button`
-  all: unset;
-  font-size: ${uiFonts.size.xxsmall};
-  margin: 0 0.5rem;
-  transition: all 0.2s ease-in-out;
-  background-color: ${uiColors.red};
-  color: ${uiColors.white};
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
+  height: 100%;
   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;
+const ExpandedChatContent = styled.div`
   display: flex;
-  flex-direction: column;
-  position: relative;
+  width: 100%;
+  height: 100%;
 `;