@rpg-engine/long-bow 0.7.22 → 0.7.23

package/src/components/ChatRevamp/RecentChats.tsx

@@ -0,0 +1,239 @@
+import React from 'react';
+import { RxCross2, RxMagnifyingGlass } from 'react-icons/rx';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { uiFonts } from '../../constants/uiFonts';
+import { Ellipsis } from '../shared/Ellipsis';
+import { PrivateChatCharacter } from './types';
+
+interface IRecentChatsProps {
+  showRecentChats: boolean;
+  toggleRecentChats: () => void;
+  hasUnseenMessages: boolean;
+  showSearchCharacterUI: () => void;
+  recentChatCharacters?: PrivateChatCharacter[];
+  recentSelectedChatCharacterId?: string;
+  unseenMessageCharacterIds?: string[];
+  onPreviousChatCharacterClick: (character: PrivateChatCharacter) => void;
+  onRemoveRecentChatCharacter?: (character: PrivateChatCharacter) => void;
+  isPrivate: boolean;
+}
+
+export const RecentChats: React.FC<IRecentChatsProps> = ({
+  showRecentChats,
+  toggleRecentChats,
+  hasUnseenMessages,
+  showSearchCharacterUI,
+  recentChatCharacters,
+  recentSelectedChatCharacterId,
+  unseenMessageCharacterIds,
+  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>
+);
+
+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;
+  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;
+`;
+
+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)};
+  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%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  &:hover {
+    background-color: ${uiColors.white};
+    color: ${uiColors.red};
+  }
+`;

package/src/components/ChatRevamp/SearchCharacter.tsx

@@ -6,7 +6,7 @@ import { uiFonts } from '../../constants/uiFonts';
 import { IStyles } from '../Chat/Chat';
 import { Column } from '../shared/Column';
 import { Ellipsis } from '../shared/Ellipsis';
-import type { PrivateChatCharacter } from './ChatRevamp';
+import { PrivateChatCharacter } from './types';
 
 interface ISearchCharacterProps {
   onFocus?: () => void;
@@ -37,7 +37,7 @@ export const SearchCharacter = ({
   const searchCharacterRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
-     const timer = setTimeout(() => {
+    const timer = setTimeout(() => {
       if (searchCharacterRef.current) {
         searchCharacterRef.current.focus();
       }
@@ -52,9 +52,7 @@ export const SearchCharacter = ({
     onChangeCharacterName(characterName);
   };
 
-  const handleCharacterClick = (
-    character: PrivateChatCharacter
-  ) => {
+  const handleCharacterClick = (character: PrivateChatCharacter) => {
     if (!onCharacterClick) return;
     setCharacterName('');
     onCharacterClick(character);
@@ -69,23 +67,23 @@ export const SearchCharacter = ({
             value={characterName}
             ref={searchCharacterRef}
             id="characterName"
-            name='characterName'
+            name="characterName"
             onChange={e => {
               setCharacterName(e.target.value);
               onChangeCharacterName(e.target.value);
             }}
-            placeholder='Search for a character...'
+            placeholder="Search for a character..."
             height={20}
             type="text"
             autoComplete="off"
             onFocus={onFocus}
             onBlur={onBlur}
             onPointerDown={onFocus}
-           />
+          />
         </Column>
         <Column justifyContent="flex-end">
           <SearchButton
-            type='submit'
+            type="submit"
             buttonColor={styles?.buttonColor || '#005b96'}
             buttonBackgroundColor={
               styles?.buttonBackgroundColor || 'rgba(0,0,0,.5)'
@@ -101,28 +99,29 @@ export const SearchCharacter = ({
       {recentCharacters && recentCharacters.length > 0 && (
         <ListContainer>
           {recentCharacters.map(character => (
-            <ListElement onPointerDown={() => handleCharacterClick(character)} key={character._id}>
-                <Ellipsis
-                  maxWidth='150px'
-                  maxLines={1}
-                >{character.name}</Ellipsis>
+            <ListElement
+              onPointerDown={() => handleCharacterClick(character)}
+              key={character._id}
+            >
+              <Ellipsis maxWidth="150px" maxLines={1}>
+                {character.name}
+              </Ellipsis>
             </ListElement>
           ))}
         </ListContainer>
       )}
-      </SearchContainer>
+    </SearchContainer>
   );
 };
 
-
 interface IButtonProps {
   buttonColor: string;
   buttonBackgroundColor: string;
 }
 
 const SearchContainer = styled.div`
-width: 100%;
-`
+  width: 100%;
+`;
 
 const Form = styled.form`
   display: flex;
@@ -167,5 +166,3 @@ const ListElement = styled.li`
     all: unset;
   }
 `;
-
-

package/src/components/ChatRevamp/types.ts

@@ -0,0 +1,41 @@
+import {
+  ICharacter,
+  IChatMessage,
+  IPrivateChatMessage,
+  ITradeChatMessage,
+} from '@rpg-engine/shared';
+import { IStyles } from '../Chat/Chat';
+
+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;
+}

package/src/hooks/useChat.ts

@@ -0,0 +1,62 @@
+import { useEffect, useState } from 'react';
+import {
+  IChatRevampProps,
+  PrivateChatCharacter,
+} from '../components/ChatRevamp/types';
+
+export const useChat = ({
+  minimizedByDefault,
+  isPrivate,
+  onChangeTab,
+  onPreviousChatCharacterClick,
+  hideSearchCharacterUI,
+  unseenMessageCharacterIds,
+}: Pick<
+  IChatRevampProps,
+  | 'activeTab'
+  | 'minimizedByDefault'
+  | 'onChangeTab'
+  | 'onPreviousChatCharacterClick'
+  | 'hideSearchCharacterUI'
+  | 'unseenMessageCharacterIds'
+> & {
+  isPrivate: boolean;
+}) => {
+  const [showRecentChats, setShowRecentChats] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(!minimizedByDefault);
+
+  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();
+  };
+
+  return {
+    showRecentChats,
+    isExpanded,
+    toggleExpand,
+    toggleRecentChats,
+    handleTabChange,
+    handlePreviousChatCharacterClick,
+    hasUnseenMessages:
+      unseenMessageCharacterIds && unseenMessageCharacterIds?.length > 0,
+  };
+};

package/src/stories/Chat.stories.tsx

@@ -179,6 +179,7 @@ const Template: Story<IChatMessage> = args => (
       }}
       onCloseButton={() => console.log('closing chat...')}
       sendMessage={true}
+      isExpanded={true}
       {...args}
     />
   </RPGUIRoot>

package/src/stories/ChatRevamp.stories.tsx

@@ -1,10 +1,9 @@
 import { ChatMessageType } from '@rpg-engine/shared';
 import { Meta, Story } from '@storybook/react';
 import React from 'react';
-import {
-  ChatRevamp,
-  IChatRevampProps,
-} from '../components/ChatRevamp/ChatRevamp';
+
+import { ChatRevamp } from '../components/ChatRevamp/ChatRevamp';
+import { IChatRevampProps } from '../components/ChatRevamp/types';
 import { RPGUIRoot } from '../components/RPGUI/RPGUIRoot';
 
 const meta: Meta = {
@@ -33,7 +32,7 @@ const chatMessagesMock = [
     _id: 'test-id-1',
     message: 'test message',
     emitter: {
-      _id: 'someid',
+      _id: 'someid1',
       name: 'Guilherme',
     },
     type: ChatMessageType.Global,
@@ -47,7 +46,7 @@ const chatMessagesMock = [
     _id: 'test-id-2',
     message: 'Good morning!',
     emitter: {
-      _id: 'someid',
+      _id: 'someid2',
       name: 'Guilherme',
     },
     type: ChatMessageType.Global,
@@ -61,7 +60,7 @@ const chatMessagesMock = [
     _id: 'test-id-3',
     message: 'How are you doing?',
     emitter: {
-      _id: 'someid',
+      _id: 'someid3',
       name: 'Guilherme',
     },
     type: ChatMessageType.Global,
@@ -75,7 +74,7 @@ const chatMessagesMock = [
     _id: 'test-id-4',
     message: 'Hey hey hey!!!',
     emitter: {
-      _id: 'someid',
+      _id: 'someid4',
       name: 'Guilherme',
     },
     type: ChatMessageType.Global,
@@ -89,7 +88,7 @@ const chatMessagesMock = [
     _id: 'test-id-5',
     message: 'BITCONNEEEEEEEEECT!',
     emitter: {
-      _id: 'someid',
+      _id: 'someid5',
       name: 'Guilherme',
     },
     type: ChatMessageType.Global,
@@ -103,7 +102,7 @@ const chatMessagesMock = [
     _id: 'test-id-6',
     message: 'BITCONNEEEEEEEEECT!',
     emitter: {
-      _id: 'someid',
+      _id: 'someid6',
       name: 'Guilherme',
     },
     type: ChatMessageType.Global,
@@ -117,77 +116,7 @@ const chatMessagesMock = [
     _id: 'test-id-7',
     message: 'BITCONNEEEEEEEEECT!',
     emitter: {
-      _id: 'someid',
-      name: 'Guilherme',
-    },
-    type: ChatMessageType.Global,
-    x: 128,
-    y: 128,
-    scene: 'MainScene',
-    createdAt: '2020-08-20T16:00:00.000Z',
-    updatedAt: '2020-08-20T16:00:00.000Z',
-  },
-  {
-    _id: 'test-id-8',
-    message: 'BITCONNEEEEEEEEECT!',
-    emitter: {
-      _id: 'someid',
-      name: 'Guilherme',
-    },
-    type: ChatMessageType.Global,
-    x: 128,
-    y: 128,
-    scene: 'MainScene',
-    createdAt: '2020-08-20T16:00:00.000Z',
-    updatedAt: '2020-08-20T16:00:00.000Z',
-  },
-  {
-    _id: 'test-id-9',
-    message: 'BITCONNEEEEEEEEECT!',
-    emitter: {
-      _id: 'someid',
-      name: 'Guilherme',
-    },
-    type: ChatMessageType.Global,
-    x: 128,
-    y: 128,
-    scene: 'MainScene',
-    createdAt: '2020-08-20T16:00:00.000Z',
-    updatedAt: '2020-08-20T16:00:00.000Z',
-  },
-  {
-    _id: 'test-id-9',
-    message: '22222EEECT!',
-    emitter: {
-      _id: 'someid',
-      name: 'Guilherme',
-    },
-    type: ChatMessageType.Global,
-    x: 128,
-    y: 128,
-    scene: 'MainScene',
-    createdAt: '2020-08-20T16:00:00.000Z',
-    updatedAt: '2020-08-20T16:00:00.000Z',
-  },
-  {
-    _id: 'test-id-9',
-    message: '22222EEECT!',
-    emitter: {
-      _id: 'someid',
-      name: 'Guilherme',
-    },
-    type: ChatMessageType.Global,
-    x: 128,
-    y: 128,
-    scene: 'MainScene',
-    createdAt: '2020-08-20T16:00:00.000Z',
-    updatedAt: '2020-08-20T16:00:00.000Z',
-  },
-  {
-    _id: 'test-id-9',
-    message: '22222EEECT!',
-    emitter: {
-      _id: 'someid',
+      _id: 'someid7',
       name: 'Guilherme',
     },
     type: ChatMessageType.Global,
@@ -208,14 +137,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' },
+  { _id: 'someid3', name: 'Guilherme2' },
+  { _id: 'someid4', name: 'Guilherme2' },
+  { _id: 'someid5', name: 'Guilherme2' },
+  { _id: 'someid6', name: 'Guilherme2' },
+  { _id: 'someid7', name: 'Guilherme2' },
+  { _id: 'someid8', name: 'Guilherme2' },
+  { _id: 'someid9', name: 'Guilherme2' },
+  { _id: 'someid10', name: 'Guilherme2' },
 ];
 
 const Template: Story<IChatRevampProps> = args => (