react-pro-messenger 1.0.0 → 1.0.1

package/README.md

@@ -1,50 +1,124 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
-```
-
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
-```
+## React Pro Messenger  
+
+A feature-rich chat component with Telegram-inspired UI and modern messaging features.
+
+![Chat Interface Preview](https://github.com/user-attachments/assets/1989e6b1-e6c8-4c1b-a78b-10e979b7544c) ![image](https://github.com/user-attachments/assets/43d19d72-03fb-4637-b913-fedbbd2d58a6) ![image](https://github.com/user-attachments/assets/e47668bf-bae8-4a91-acf9-4ac2432fed39)
+
+
+
+---
+
+## Features ✨
+
+### Core Functionality
+- Telegram-style messaging interface
+- Multi-user chat support
+- Message history with scroll
+- Responsive design
+
+### Message Types
+- **Text messages** with formatting
+- **Voice messages** with audio player
+- **File attachments** (images, documents)
+- **Symbol integration** (@mentions, #tasks)
+
+### Interactive Features
+- Context menu for message actions
+- Delete/edit message functionality
+- Dynamic symbol recognition:(for example :)
+  - `@` for user mentions
+  - `#` for task references
+- Animated message transitions
+
+---
+
+## Installation 📦
+
+```bash
+npm install react-pro-messenger
+```
+# or
+```bash
+yarn add react-pro-messenger
+```
+
+## Basic Usage 🚀
+
+```tsx
+import { Chat, MessageEntity } from 'react-pro-messenger';
+
+const App = () => {
+  const [messages, setMessages] = useState<MessageEntity[]>(initialMessages);
+  const currentUser = { id: "user-1", fullName: "John Doe" };
+
+  return (
+    <Chat
+      messages={messages}
+      user={currentUser}
+      onMessageSent={(newMsg) => setMessages([...messages, newMsg])}
+      onDeleteMessage={(id) => setMessages(messages.filter(msg => msg.id !== id))}
+    />
+  );
+};
+```
+## Component Props ⚙️
+
+### Chat Component Configuration
+
+| Prop                      | Type                          | Default       | Description                              |
+|---------------------------|-------------------------------|---------------|------------------------------------------|
+| `messages`                | `MessageEntity[]`             | **Required**  | Array of message objects                 |
+| `user`                    | `UserInterface`               | **Required**  | Current user details                     |
+| `width`                   | `string`                      | `"400px"`     | Container width                          |
+| `height`                  | `string`                      | `"600px"`     | Container height                         |
+| `dynamicSymbolAssignments`| `SymbolAssignment[]`          | `[]`          | Symbol-component mappings                |
+| `className`               | `string`                      | `""`          | Additional CSS classes                   |
+
+**Key**:  
+📌 `Type` = Expected prop type  
+📌 `Default` = Default value if not required  
+📌 **Required** = Must be provided
+
+## Customization 🎨
+
+Symbol Integration
+
+```tsx
+const taskComponent = ({ listsProps, onClick }) => (
+  <div className="task-item">
+    <span>📌</span>
+    <p>{listsProps.name}</p>
+  </div>
+);
+
+<Chat
+  dynamicSymbolAssignments={[{
+    symbol: '#',
+    component: taskComponent,
+    lists: tasksList
+  }]}
+/>
+
+```
+## Contributing 🤝
+Fork the repository
+
+Create feature branch:
+
+```bash
+git checkout -b feature/new-feature
+```
+Commit changes:
+
+```bash
+git commit -m 'Add awesome feature'
+```
+Push to branch:
+
+```bash
+git push origin feature/new-feature
+```
+Open a Pull Request
+
+License 📜
+MIT License © 2023 [mahdij98]

package/package.json

@@ -1,18 +1,20 @@
 {
   "name": "react-pro-messenger",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Telegram-style chat component for React",
   "type": "module",
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",
   "types": "types/index.d.ts",
-  "files": ["dist", "types"],
+  "files": [
+    "dist",
+    "types"
+  ],
   "scripts": {
     "dev": "vite --open",
     "build": "tsc && vite build",
-    "prepublishOnly": "npm run build",
-    "lint": "eslint .",
-    "test": "jest"
+    "prepack": "npm run build",
+    "lint": "eslint ."
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -44,4 +46,4 @@
     "type": "git",
     "url": "https://github.com/yourusername/react-pro-messenger.git"
   }
-}
+}

package/types/App.d.ts

@@ -0,0 +1,20 @@
+export interface TaskInterface {
+    id: string;
+    name: string;
+}
+export interface TasksProps {
+    symbol?: string;
+    task: TaskInterface;
+    onClick: (id: string, text: string) => void;
+}
+export interface UserPropsInterface {
+    id: string;
+    name: string;
+}
+export interface UserProps {
+    symbol?: string;
+    user: UserPropsInterface;
+    onClick: (id: string, value: string) => void;
+}
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export default App;

package/types/components/ConformaitionModal/ConformationModal.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface ConfirmationModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    header: string;
+    question: string;
+}
+declare const ConfirmationModal: React.FC<ConfirmationModalProps>;
+export default ConfirmationModal;

package/types/components/ContextMenu/ContextMenu.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+export interface ContextMenuItem {
+    name: string;
+    icon: React.JSX.Element;
+    onClick: (id: string) => void;
+    onlyCurrentUserMessage?: boolean;
+}
+interface ContextMenuProps {
+    items: ContextMenuItem[];
+    isVisible: boolean;
+    messageId: string;
+    position: {
+        x: number;
+        y: number;
+    };
+    isCurrentUserMessage: boolean;
+}
+declare const ContextMenu: React.FC<ContextMenuProps>;
+export default ContextMenu;

package/types/components/Icons/DoubleCheckIcon.d.ts

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

package/types/components/Icons/FileIcon.d.ts

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

package/types/components/Icons/MicIcon.d.ts

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

package/types/components/Icons/PlayIcon.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const PlayIcon: (props: React.JSX.IntrinsicElements["svg"]) => import("react/jsx-runtime").JSX.Element;
+export default PlayIcon;

package/types/components/Icons/PuaseIcon.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const PauseIcon: (props: React.JSX.IntrinsicElements["svg"]) => import("react/jsx-runtime").JSX.Element;
+export default PauseIcon;

package/types/components/Icons/SendIcon.d.ts

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

package/types/components/Icons/SpeechBubbleCornerIcon.d.ts

@@ -0,0 +1,2 @@
+declare const SpeechBubbleCornerIcon: (props: React.JSX.IntrinsicElements["svg"]) => import("react/jsx-runtime").JSX.Element;
+export default SpeechBubbleCornerIcon;

package/types/components/Input/Input.d.ts

@@ -0,0 +1,8 @@
+import { SymbolAssignment } from "../../ts/interfaces";
+declare const ChatInput: ({ onSendMessage, onSendVoice, onFileSend, dynamicSymbolAssignments, }: {
+    onSendMessage: (newMessage: string) => void;
+    onSendVoice: (voiceBlobUrl: string) => void;
+    onFileSend: (blob: Blob) => void;
+    dynamicSymbolAssignments?: SymbolAssignment<any>[];
+}) => import("react/jsx-runtime").JSX.Element;
+export default ChatInput;

package/types/components/Media/File/File.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface FilePreviewProps {
+    format?: string;
+    fileName: string;
+    fileSize: number;
+    src: string;
+}
+declare const FilePreview: React.FC<FilePreviewProps>;
+export default FilePreview;

package/types/components/Media/Media.d.ts

@@ -0,0 +1,7 @@
+import { AttachmentTypeEnum } from "../../ts/enum";
+interface MediaProps {
+    attachment: string;
+    attachmentType?: AttachmentTypeEnum;
+}
+declare const Media: ({ attachment, attachmentType }: MediaProps) => import("react/jsx-runtime").JSX.Element | null | undefined;
+export default Media;

package/types/components/Media/Voice/Voice.d.ts

@@ -0,0 +1,6 @@
+interface VoicePlayerProps {
+    src: string;
+    className?: string;
+}
+declare const VoicePlayer: ({ src, className }: VoicePlayerProps) => import("react/jsx-runtime").JSX.Element;
+export default VoicePlayer;

package/types/components/Message/LeftSide/LeftSide.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { MessageEntity } from "../../../domain/MessageEntity";
+declare const LeftSide: ({ message, showUserProfile, handleContextMenu, media, }: {
+    media: React.JSX.Element | null;
+    message: MessageEntity;
+    showUserProfile: boolean;
+    handleContextMenu: (event: React.MouseEvent, message: MessageEntity) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default LeftSide;

package/types/components/Message/RightSide/RightSide.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { MessageEntity } from "../../../domain/MessageEntity";
+declare const RightSide: ({ handleContextMenu, media, message, }: {
+    media: React.JSX.Element | null;
+    message: MessageEntity;
+    handleContextMenu: (event: React.MouseEvent, message: MessageEntity) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default RightSide;

package/types/components/Tasks/Tasks.d.ts

@@ -0,0 +1,11 @@
+export interface TaskInterface {
+    id: string;
+    name: string;
+}
+export interface TasksProps {
+    symbol?: string;
+    task: TaskInterface;
+    onClick: (id: string, text: string) => void;
+}
+declare const Tasks: ({ symbol, onClick, task }: TasksProps) => import("react/jsx-runtime").JSX.Element;
+export default Tasks;

package/types/domain/MessageEntity.d.ts

@@ -0,0 +1,34 @@
+import { AttachmentTypeEnum } from "../ts/enum";
+import { UserInterface } from "../ts/interfaces";
+export declare class MessageEntity {
+    id: string;
+    text: string;
+    createdDate: string;
+    attachment: undefined | string;
+    attachmentType: AttachmentTypeEnum | undefined;
+    user: UserInterface;
+    isRightSided: boolean | undefined;
+    symbols: {
+        symbol: string;
+        value: {
+            name: string;
+            id: string;
+        };
+    } | undefined;
+    constructor({ id, text, createdDate, attachment, attachmentType, user, isRightSided, symbols, }: {
+        id: string;
+        text: string;
+        createdDate: string;
+        attachment?: string;
+        attachmentType?: AttachmentTypeEnum;
+        user: UserInterface;
+        isRightSided?: boolean;
+        symbols?: {
+            symbol: string;
+            value: {
+                name: string;
+                id: string;
+            };
+        } | undefined;
+    });
+}

package/types/features/Chat/index.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { MessageEntity } from "../../domain/MessageEntity";
+import { SymbolAssignment, UserInterface } from "../../ts/interfaces";
+export interface ChatPropsInterface {
+    messages: MessageEntity[];
+    user: UserInterface;
+    width?: string;
+    height?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    updateMessages: (messages: MessageEntity[]) => void;
+    onMessageSent: (message: MessageEntity) => void;
+    dynamicSymbolAssignments?: SymbolAssignment<any>[];
+    onDeleteMessage: (id: string) => void;
+    onEditMessage: (id: string) => void;
+}
+declare const Chat: ({ width, height, className, style, messages, user, updateMessages, onMessageSent, onDeleteMessage, onEditMessage, dynamicSymbolAssignments, }: ChatPropsInterface) => import("react/jsx-runtime").JSX.Element;
+export default Chat;

package/types/features/Chat/logic.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import { ContextMenuItem } from "../../components/ContextMenu/ContextMenu";
+import { MessageEntity } from "../../domain/MessageEntity";
+import { UserInterface } from "../../ts/interfaces";
+declare const Logic: ({ user, messages, updateMessages, onMessageSent, onEditMessage, onDeleteMessage, }: {
+    messages: MessageEntity[];
+    user: UserInterface;
+    updateMessages: (messages: MessageEntity[]) => void;
+    onMessageSent: (message: MessageEntity) => void;
+    onDeleteMessage: (id: string) => void;
+    onEditMessage: (id: string) => void;
+}) => {
+    handleDeleteConfirmation: () => void;
+    handleCloseContextMenu: () => void;
+    contextMenuItems: ContextMenuItem[];
+    handleSendFile: (file: Blob) => void;
+    handleSendVoice: (voiceBlobUrl: string) => void;
+    handleSendMessage: (text: string) => void;
+    handleContextMenu: (event: React.MouseEvent, message: MessageEntity) => void;
+    isModalOpen: boolean;
+    contextMenu: {
+        x: number;
+        y: number;
+        message: MessageEntity | null;
+    } | null;
+    chatRef: React.RefObject<HTMLDivElement | null>;
+    setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+export default Logic;

package/types/index.d.ts

@@ -0,0 +1,4 @@
+export { MessageEntity } from "./domain/MessageEntity";
+export { default as Chat } from "./features/Chat";
+export { AttachmentTypeEnum } from "./ts/enum";
+export type { SymbolAssignment, UserInterface } from "./ts/interfaces";

package/types/main.d.ts

@@ -0,0 +1 @@
+import "./index.css";

package/types/ts/enum.d.ts

@@ -0,0 +1,6 @@
+export declare enum AttachmentTypeEnum {
+    "File" = 0,
+    "Voice" = 1,
+    "Video" = 2,
+    "Image" = 3
+}

package/types/ts/interfaces.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+export interface UserInterface {
+    id: string;
+    profileImageUrl?: string;
+    fullName?: string;
+    firstName?: string;
+    lastName?: string;
+}
+export interface SymbolAssignment<T = any> {
+    symbol: string;
+    component?: ({ onClick, listsProps, }: {
+        onClick: (id: string, value: string) => void;
+        listsProps: T;
+    }) => React.JSX.Element;
+    lists?: T[];
+    pagNumber: number;
+    updatePageNumber: (newPage: number) => void;
+}