@ethora/chat-component 24.10.11 → 24.10.16

package/README.md

@@ -21,9 +21,9 @@ Note: scroll below for use cases and functionality break down of this Chat Compo
 2. specify a name for your project (e.g. "vite-project") 
 3. select framework and variant (for example, React -> Typescript but may be different depending on your project requirements, it will work with plain Javascript too)
 
-<img src="https://github.com/user-attachments/assets/c5c45898-cc86-469c-947c-7ca9974fd649" width="500" />
+<img src="./img/readme01.png" width="500" />
 
-<img src="https://github.com/user-attachments/assets/20b732d3-482d-4538-bb03-359a9beb8a51" width="500" />
+<img src="./img/readme02.png" width="500" />
 
 4. cd vite-project _(use your name instead of "vite-project")_
 5. npm i
@@ -49,14 +49,14 @@ npm run dev
 ```
 
 you should see something like this:
-<br /><img src="https://github.com/user-attachments/assets/7a4022cc-ad95-4561-bf40-c097a6aaa94c" width="350" />
+<br /><img src="./img/readme03.png" width="350" />
 
 
 8. Open http://localhost:5173/ in your browser
 
 Voilà - your chat app should work like so:
 
-<img src="https://github.com/user-attachments/assets/e4d05fd1-7dcc-438b-9bfd-895ec29b494a" width="600" />
+<img src="./img/readme04.png" width="600" />
 
 ℹ️ Note: your Ethora App, User and Chat credentials are hard-coded and login screen is bypassed. This is done so that you can scaffold and test the functionality quickly.
 Leave this as is if you only need to demo or validate the chat functionality as part of your project.

package/dist/assets/icons.d.ts

@@ -11,3 +11,15 @@ export declare const SendIcon: ({ color, ...props }: {
 export declare const GoogleIcon: ({ ...props }: {
     [x: string]: any;
 }) => import("react/jsx-runtime").JSX.Element;
+export declare const MoreIcon: ({ color, ...props }: {
+    [x: string]: any;
+    color?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const SearchIcon: ({ color, ...props }: {
+    [x: string]: any;
+    color?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const NoMessages: ({ color, ...props }: {
+    [x: string]: any;
+    color?: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/InputComponents/AudioRecorder.d.ts

@@ -3,7 +3,7 @@ import { default as React } from 'react';
 interface AudioRecorderProps {
     setIsRecording: (state: boolean) => void;
     isRecording: boolean;
-    handleSendClick: (audioBlob?: string) => void;
+    handleSendClick: (audioBlob?: any) => void;
 }
 declare const AudioRecorder: React.FC<AudioRecorderProps>;
 export default AudioRecorder;

package/dist/components/InputComponents/Search.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+
+interface SearchInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    icon?: React.ReactNode;
+    animated?: boolean;
+    direction?: "left" | "right";
+}
+declare const SearchInput: React.FC<SearchInputProps>;
+export { SearchInput };

package/dist/components/MainComponents/ChatHeaderAvatar.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+
+interface ChatHeaderAvatarProps {
+    name?: string;
+    onClick?: () => void;
+    size?: number;
+}
+export declare const ChatHeaderAvatar: React.FC<ChatHeaderAvatarProps>;
+export {};

package/dist/components/MainComponents/ChatRoom.d.ts

@@ -5,7 +5,7 @@ interface ChatRoomProps {
     roomJID?: string;
     defaultUser: User;
     isLoading?: boolean;
-    defaultRoom: IRoom;
+    room: IRoom;
     CustomMessageComponent?: any;
     MainComponentStyles?: any;
     config?: IConfig;

package/dist/components/MainComponents/MessageList.d.ts

@@ -2,15 +2,15 @@ import { default as React } from 'react';
 import { IConfig, IMessage, IRoom, User } from '../../types/types';
 
 interface MessageListProps<TMessage extends IMessage> {
-    messages: TMessage[];
     CustomMessage?: React.ComponentType<{
-        message: TMessage;
+        message: IMessage;
         isUser: boolean;
     }>;
     user: User;
     room: IRoom;
     loadMoreMessages: (chatJID: string, max: number, amount?: number) => Promise<void>;
+    loading: boolean;
     config?: IConfig;
 }
-declare const MessageList: <TMessage extends IMessage>({ messages, CustomMessage, user, loadMoreMessages, room, config, }: MessageListProps<TMessage>) => import("react/jsx-runtime").JSX.Element;
+declare const MessageList: <TMessage extends IMessage>({ CustomMessage, user, loadMoreMessages, room, config, loading, }: MessageListProps<TMessage>) => import("react/jsx-runtime").JSX.Element;
 export default MessageList;

package/dist/components/MainComponents/NoMessagesPlaceholder.d.ts

@@ -0,0 +1,2 @@
+declare const NoMessagesPlaceholder: () => import("react/jsx-runtime").JSX.Element;
+export default NoMessagesPlaceholder;

package/dist/components/MainComponents/RoomList.d.ts

@@ -5,6 +5,7 @@ interface RoomListProps {
     chats: IRoom[];
     burgerMenu?: boolean;
     onRoomClick?: (chat: IRoom) => void;
+    activeJID: string;
 }
 declare const RoomList: React.FC<RoomListProps>;
 export default RoomList;

package/dist/components/MainComponents/SystemMessage.d.ts

@@ -2,6 +2,14 @@ import { default as React } from 'react';
 
 interface SystemMessageProps {
     messageText: string;
+    colors?: {
+        primary?: string;
+        secondary?: string;
+    };
 }
+export declare const CustomSystemMessageText: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    primary?: string;
+    secondary?: string;
+}>> & string;
 declare const SystemMessage: React.FC<SystemMessageProps>;
 export default SystemMessage;

package/dist/components/MessageBubble/Avatar.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+
+interface AvatarProps {
+    username?: string;
+    firstName?: string;
+    lastName?: string;
+}
+export declare const Avatar: React.FC<AvatarProps>;
+export {};

package/dist/components/styled/SendInput.d.ts

@@ -4,7 +4,7 @@ import { IConfig } from '../../types/types';
 interface SendInputProps {
     sendMessage: (message: string) => void;
     isLoading: boolean;
-    sendMedia: (data: any) => void;
+    sendMedia: (data: any, type: string) => void;
     config?: IConfig;
     onFocus?: () => void;
     onBlur?: () => void;