@rpg-engine/long-bow 0.7.22 → 0.7.23

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.23",
   "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,94 @@
+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,
+}) => {
+  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={() => {
+          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}
+      />
+    </ChatWrapper>
+  );
+};
+
+const ChatWrapper = styled.div`
+  flex-grow: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+`;