react-peer-chat 0.6.8 → 0.7.0

package/.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "editor.tabSize": 2,
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}

package/README.md

@@ -1,17 +1,22 @@
 # react-peer-chat
-An easy to use react component for impleting peer-to-peer chatting using [peerjs](https://peerjs.com/) under the hood.
+
+A simple-to-use React component for implementing peer-to-peer chatting, powered by [peerjs](https://peerjs.com/).
 
 ## Features
-- Peer-to-peer chat without need to have any knowledge about [WebRTC](https://webrtc.org/)
-- Easy to use
-- Supports text chat that persists on page reload
-- Recovers old chat upon reconnection
-- Clear text chat on command
-- Supports voice chat
-- Multiple peer connections. See [multi peer usage](#Multi-Peer-Usage)
-- Fully Customizable. See [usage with FaC](#Full-Customization)
+
+- Peer-to-peer chat without requiring knowledge of [WebRTC](https://webrtc.org/)
+- Easy integration
+- Supports persistent text chat across page reloads
+- Recovers old chats upon reconnection
+- Option to clear chat on command
+- Supports audio/voice chat
+- Multiple peer connections. See [multi-peer usage](#Multi-Peer-Usage)
+- Fully customizable. See [usage with FaC](#Full-Customization)
+
 ## Installation
-To install react-peer-chat
+
+To install `react-peer-chat`:
+
 ```bash
   # with npm:
   npm install react-peer-chat --save
@@ -25,74 +30,92 @@ To install react-peer-chat
   # with bun:
   bun add react-peer-chat
 ```
+
 ## Usage
-`react-peer-chat` default exports `<Chat>` component. When you use the `<Chat>` component, initially the user will see 2 buttons (svg icons), one for text chat and other for voice chat.
 
-It also exports a `clearChat` function that clears the text chat whenever invoked.
+`react-peer-chat` provides two primary methods to integrate chat functionality into your React apps: through the `<Chat>` component and the `useSpeech` hook.
+
+It also exports a `clearChat` function that clears the text chat from the browser's session storage when called.
+
+### Chat Component
+
+The default export of `react-peer-chat` is the `<Chat>` component, which offers the easiest integration and is fully configurable. When using the `<Chat>` component, the user will initially see two buttons (SVG icons) - one for text chat and the other for voice chat.
+
 #### Basic Usage
+
 ```jsx
-import React from 'react';
-import Chat, { clearChat } from 'react-peer-chat';
-import 'react-peer-chat/dist/styles.css';
+import React from "react";
+import Chat, { clearChat } from "react-peer-chat";
+import "react-peer-chat/styles.css";
 
 export default function App() {
-    return <div>
-        <Chat
-            name='John Doe'
-            peerId='my-unique-id'
-            remotePeerId='remote-unique-id'
-        />
-        {/* Text chat will be cleared when following button is clicked. */}
-        <button onClick={clearChat}>Clear Chat</button>
+  return (
+    <div>
+      <Chat name="John Doe" peerId="my-unique-id" remotePeerId="remote-unique-id" />
+      {/* Text chat will be cleared when following button is clicked. */}
+      <button onClick={clearChat}>Clear Chat</button>
     </div>
+  );
 }
 ```
+
 #### Multi Peer Usage
+
 ```jsx
-import React from 'react';
-import Chat, { clearChat } from 'react-peer-chat';
-import 'react-peer-chat/dist/styles.css';
+import React from "react";
+import Chat, { clearChat } from "react-peer-chat";
+import "react-peer-chat/styles.css";
 
 export default function App() {
-    return <div>
-        <Chat
-            name='John Doe'
-            peerId='my-unique-id'
-            remotePeerId={['remote-unique-id-1', 'remote-unique-id-2', 'remote-unique-id-3']} // Array of remote peer ids
-        />
-        {/* Text chat will be cleared when following button is clicked. */}
-        <button onClick={clearChat}>Clear Chat</button>
+  return (
+    <div>
+      <Chat
+        name="John Doe"
+        peerId="my-unique-id"
+        remotePeerId={["remote-unique-id-1", "remote-unique-id-2", "remote-unique-id-3"]} // Array of remote peer ids
+      />
+      {/* Text chat will be cleared when following button is clicked. */}
+      <button onClick={clearChat}>Clear Chat</button>
     </div>
+  );
 }
 ```
+
 #### Partial Customization
-Use props provided by `<Chat>` component to customize it.
+
+Use the props provided by the `<Chat>` component for customization.
+
 ```jsx
-import React from 'react';
-import Chat from 'react-peer-chat';
-import 'react-peer-chat/dist/styles.css';
+import React from "react";
+import Chat from "react-peer-chat";
+import "react-peer-chat/styles.css";
 
 export default function App() {
-    return <Chat 
-        name='John Doe'
-        peerId='my-unique-id'
-        remotePeerId='remote-unique-id'
-        dialogOptions={{
-            position: 'left',
-            style: { padding: '4px' }
-        }}
-        props={{ title: 'React Peer Chat Component' }}
-        onError={() => console.error('Browser not supported!')}
-        onMicError={() => console.error('Microphone not accessible!')}
+  return (
+    <Chat
+      name="John Doe"
+      peerId="my-unique-id"
+      remotePeerId="remote-unique-id"
+      dialogOptions={{
+        position: "left",
+        style: { padding: "4px" },
+      }}
+      props={{ title: "React Peer Chat Component" }}
+      onError={() => console.error("Browser not supported!")}
+      onMicError={() => console.error("Microphone not accessible!")}
     />
+  );
 }
 ```
-#### Full Customization 
-Use Function as Children(FaC) to fully customize the `<Chat>` component.
+
+#### Full Customization
+
+Use Function as Children (FaC) to fully customize the `<Chat>` component.
+
 ```jsx
 import React from 'react'
 import Chat from 'react-peer-chat'
-// import 'react-peer-chat/dist/styles.css' (No need to import CSS when using custom component)
+// import 'react-peer-chat/styles.css' (No need to import CSS when using custom component)
 
 export default function App() {
     return <Chat
@@ -102,7 +125,7 @@ export default function App() {
         onError={() => console.error('Browser not supported!')}
         onMicError={() => console.error('Microphone not accessible!')}
     >
-        {({ remotePeers, messages, addMessage, audio, setAudio }) => (
+        {({ remotePeers, messages, sendMessage, audio, setAudio }) => (
             <YourCustomComponent>
                 {...}
             </YourCustomComponent>
@@ -110,36 +133,160 @@ export default function App() {
     </Chat>
 }
 ```
+
 #### Custom ICE Servers
-You can also use custom ICE servers to avoid any connectivity issues in case free TURN server limit provided by `react-peer-chat` expires.
+
+You can also provide custom ICE servers to avoid connectivity issues if the free TURN server provided by `react-peer-chat` expires.
+
 ```jsx
-import React from 'react';
-import Chat from 'react-peer-chat';
-import 'react-peer-chat/dist/styles.css';
+import React from "react";
+import Chat from "react-peer-chat";
+import "react-peer-chat/styles.css";
 
 export default function App() {
-    return <Chat
-        name='John Doe'
-        peerId='my-unique-id'
-        remotePeerId='remote-unique-id'
-        peerOptions={{
-            config: {
-                iceServers: [
-                    { urls: "stun:stun-server.example.com:19302" },
-                    {
-                        urls: 'turn:turn-server.example.com:19403',
-                        username: 'optional-username',
-                        credential: 'auth-token'
-                    }
-                ]
-            }
-            // other peerjs options (optional)
-        }}
+  return (
+    <Chat
+      name="John Doe"
+      peerId="my-unique-id"
+      remotePeerId="remote-unique-id"
+      peerOptions={{
+        config: {
+          iceServers: [
+            { urls: "stun:stun-server.example.com:19302" },
+            {
+              urls: "turn:turn-server.example.com:19403",
+              username: "optional-username",
+              credential: "auth-token",
+            },
+          ],
+        },
+        // other peerjs options (optional)
+      }}
     />
+  );
 }
 ```
-## Chat Component API Reference
-Here is the full API for the `<Chat>` component, these properties can be set on an instance of Chat:
+
+### useChat Hook
+
+The `useChat` hook is ideal when you want to completely redesign the Chat UI or handle the audio stream differently, instead of using traditional playback methods.
+
+```jsx
+import React, { useEffect, useRef, useState } from "react";
+import { clearChat, useChat } from "react-peer-chat";
+import { BiSolidMessageDetail, BiSolidMessageX, BsFillMicFill, BsFillMicMuteFill, GrSend } from "react-peer-chat/icons";
+import "react-peer-chat/styles.css"; // (No need to import CSS when using custom styles)
+
+function Chat({ text = true, audio = true, onMessageReceived, dialogOptions, props = {}, children, ...hookProps }) {
+  const { peerId, audioStreamRef, ...childrenOptions } = useChat({
+    text,
+    audio,
+    onMessageReceived: modifiedOnMessageReceived,
+    ...hookProps,
+  });
+  const { remotePeers, messages, sendMessage, audio: audioEnabled, setAudio } = childrenOptions;
+  const containerRef = useRef(null);
+  const [dialog, setDialog] = useState(false);
+  const dialogRef = useRef(null);
+  const inputRef = useRef(null);
+  const [notification, setNotification] = useState(false);
+
+  function modifiedOnMessageReceived(message) {
+    if (!dialogRef.current?.open) setNotification(true);
+    onMessageReceived?.(message);
+  }
+
+  useEffect(() => {
+    if (dialog) dialogRef.current?.show();
+    else dialogRef.current?.close();
+  }, [dialog]);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (container) container.scrollTop = container.scrollHeight;
+  }, [dialog, remotePeers, messages]);
+
+  return (
+    <div className="rpc-main rpc-font" {...props}>
+      {typeof children === "function" ? (
+        children(childrenOptions)
+      ) : (
+        <>
+          {text && (
+            <div className="rpc-dialog-container">
+              {dialog ? (
+                <BiSolidMessageX title="Close chat" onClick={() => setDialog(false)} />
+              ) : (
+                <div className="rpc-notification">
+                  <BiSolidMessageDetail
+                    title="Open chat"
+                    onClick={() => {
+                      setNotification(false);
+                      setDialog(true);
+                    }}
+                  />
+                  {notification && <span className="rpc-badge" />}
+                </div>
+              )}
+              <dialog ref={dialogRef} className={`${dialog ? "rpc-dialog" : ""} rpc-position-${dialogOptions?.position || "center"}`} style={dialogOptions?.style}>
+                <div className="rpc-heading">Chat</div>
+                <hr className="rpc-hr" />
+                <div>
+                  <div ref={containerRef} className="rpc-message-container">
+                    {messages.map(({ id, text }, i) => (
+                      <div key={i}>
+                        <strong>{id === peerId ? "You" : remotePeers[id]}: </strong>
+                        <span>{text}</span>
+                      </div>
+                    ))}
+                  </div>
+                  <hr className="rpc-hr" />
+                  <form
+                    className="rpc-input-container"
+                    onSubmit={(e) => {
+                      e.preventDefault();
+                      const text = inputRef.current?.value;
+                      if (text) {
+                        inputRef.current.value = "";
+                        sendMessage({ id: peerId, text });
+                      }
+                    }}
+                  >
+                    <input ref={inputRef} className="rpc-input rpc-font" placeholder="Enter a message" />
+                    <button type="submit" className="rpc-button">
+                      <GrSend title="Send message" />
+                    </button>
+                  </form>
+                </div>
+              </dialog>
+            </div>
+          )}
+          {audio && <button>{audioEnabled ? <BsFillMicFill title="Turn mic off" onClick={() => setAudio(false)} /> : <BsFillMicMuteFill title="Turn mic on" onClick={() => setAudio(true)} />}</button>}
+        </>
+      )}
+      {audio && audioEnabled && <audio ref={audioStreamRef} autoPlay style={{ display: "none" }} />}
+    </div>
+  );
+}
+
+export default function App() {
+  return (
+    <div>
+      <Chat name="John Doe" peerId="my-unique-id" remotePeerId="remote-unique-id" />
+      {/* Text chat will be cleared when following button is clicked. */}
+      <button onClick={clearChat}>Clear Chat</button>
+    </div>
+  );
+}
+```
+
+#### Basic Usage
+
+## API Reference
+
+### useChat Hook
+
+Here is the full API for the `useChat` hook, these options can be passed as paramerters to the hook:
 | Parameter | Type | Required | Default | Description |
 | - | - | - | - | - |
 | `name` | `string` | No | Anonymous User | Name of the peer which will be shown to the remote peer. |
@@ -147,43 +294,61 @@ Here is the full API for the `<Chat>` component, these properties can be set on
 | `remotePeerId` | `string \| string[]` | No | - | It is the unique id (or array of unique ids) of the remote peer(s). If provided, the peer will try to connect to the remote peer(s). |
 | `text` | `boolean` | No | `true` | Text chat will be enabled if this property is set to true. |
 | `recoverChat` | `boolean` | No | `false` | Old chats will be recovered upon reconnecting with the same peer(s). |
-| `voice` | `boolean` | No | `true` | Voice chat will be enabled if this property is set to true. |
+| `audio` | `boolean` | No | `true` | Voice chat will be enabled if this property is set to true. |
 | `peerOptions` | [`PeerOptions`](#PeerOptions) | No | - | Options to customize peerjs Peer instance. |
-| `dialogOptions` | [`DialogOptions`](#DialogOptions) | No | { position: 'center' } | Options to customize text dialog box styling. |
 | `onError` | `Function` | No | `() => alert('Browser not supported! Try some other browser.')` | Function to be executed if browser doesn't support `WebRTC` |
 | `onMicError` | `Function` | No | `() => alert('Microphone not accessible!')` | Function to be executed when microphone is not accessible. |
+| `onMessageSent` | `Function` | No | - | Function to be executed when a text message is sent to other peers. |
+| `onMessageReceived` | `Function` | No | - | Function to be executed when a text message is received from other peers. |
+
+### Chat Component
+
+Here is the full API for the `<Chat>` component, these properties can be set on an instance of `<Chat>`. It contains all the parameters
+that are listed in [useChat Hook API Reference](#usechat-hook-1) along with the following parameters:
+| Parameter | Type | Required | Default | Description |
+| - | - | - | - | - |
+| `dialogOptions` | [`DialogOptions`](#DialogOptions) | No | { position: 'center' } | Options to customize text dialog box styling. |
 | `props` | `React.DetailedHTMLProps` | No | - | Props to customize the `<Chat>` component. |
 | `children` | [`Children`](#Children) | No | - | See [usage with FaC](#Full-Customization) |
+
 ### Types
+
 #### PeerOptions
+
 ```typescript
-import { PeerOptions } from 'peerjs'
+import { PeerOptions } from "peerjs";
 ```
+
 #### DialogOptions
+
 ```typescript
-import { CSSProperties } from 'react';
-type DialogPosition = 'left' | 'center' | 'right';
+import { CSSProperties } from "react";
+type DialogPosition = "left" | "center" | "right";
 type DialogOptions = {
-    position: DialogPosition;
-    style: CSSProperties;
+  position: DialogPosition;
+  style: CSSProperties;
 };
 ```
+
 #### Children
+
 ```typescript
-import { ReactNode } from 'react';
-type RemotePeers = { [id: string]: string }
+import { ReactNode } from "react";
+type RemotePeers = { [id: string]: string };
 type Message = {
-    id: string;
-    text: string;
+  id: string;
+  text: string;
 };
 type ChildrenOptions = {
-    remotePeers?: RemotePeers;
-    messages?: Message[];
-    addMessage?: (message: Message, sendToRemotePeer?: boolean) => void;
-    audio?: boolean;
-    setAudio?: (audio: boolean) => void;
+  remotePeers?: RemotePeers;
+  messages?: Message[];
+  sendMessage?: (message: Message) => void;
+  audio?: boolean;
+  setAudio?: (audio: boolean) => void;
 };
 type Children = (childrenOptions: ChildrenOptions) => ReactNode;
 ```
+
 ## Author
-[Sahil Aggarwal](https://www.github.com/SahilAggarwal2004)
+
+[Sahil Aggarwal](https://www.github.com/SahilAggarwal2004)

package/dist/connection.d.ts

@@ -0,0 +1,2 @@
+import { DataConnection, MediaConnection } from "peerjs";
+export declare function closeConnection(conn: DataConnection | MediaConnection): void;

package/dist/connection.js

@@ -0,0 +1,4 @@
+export function closeConnection(conn) {
+    conn.removeAllListeners();
+    conn.close();
+}

package/dist/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const defaultConfig: {
+    iceServers: {
+        urls: string[];
+    }[];
+};

package/dist/constants.js

@@ -0,0 +1,15 @@
+const turnAccounts = [
+    { username: "70061a377b51f3a3d01c11e3", credential: "lHV4NYJ5Rfl5JNa9" },
+    { username: "13b19eb65bbf6e9f96d64b72", credential: "7R9P/+7y7Q516Etv" },
+    { username: "3469603f5cdc7ca4a1e891ae", credential: "/jMyLSDbbcgqpVQv" },
+    { username: "a7926f4dcc4a688d41f89752", credential: "ZYM8jFYeb8bQkL+N" },
+    { username: "0be25ab7f61d9d733ba94809", credential: "hiiSwWVch+ftt3SX" },
+    { username: "3c25ba948daeab04f9b66187", credential: "FQB3GQwd27Y0dPeK" },
+];
+export const defaultConfig = {
+    iceServers: [
+        {
+            urls: ["stun:stun.l.google.com:19302", "stun:stun.relay.metered.ca:80"],
+        },
+    ].concat(turnAccounts.map((account) => (Object.assign({ urls: ["turn:standard.relay.metered.ca:80", "turn:standard.relay.metered.ca:80?transport=tcp", "turn:standard.relay.metered.ca:443", "turns:standard.relay.metered.ca:443?transport=tcp"] }, account)))),
+};

package/dist/hooks.d.ts

@@ -0,0 +1,13 @@
+import { Message, RemotePeers, useChatProps } from "./types.js";
+export declare function useChat({ name, peerId, remotePeerId, peerOptions, text, recoverChat, audio: allowed, onError, onMicError, onMessageSent, onMessageReceived }: useChatProps): {
+    peerId: string;
+    audioStreamRef: import("react").RefObject<HTMLMediaElement>;
+    remotePeers: RemotePeers;
+    messages: Message[];
+    sendMessage: (message: Message) => void;
+    audio: boolean;
+    setAudio: (value: boolean | ((old: boolean) => boolean)) => void;
+};
+export declare function useMessages(): readonly [Message[], (value: Message[] | ((old: Message[]) => Message[])) => void, (message: Message) => void];
+export declare function useStorage<Value>(key: string, initialValue: Value, local?: boolean): [Value, (value: Value | ((old: Value) => Value)) => void];
+export declare function useAudio(allowed: boolean): readonly [boolean, (value: boolean | ((old: boolean) => boolean)) => void];

package/dist/hooks.js

@@ -0,0 +1,155 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { useEffect, useRef, useState } from "react";
+import { closeConnection } from "./connection.js";
+import { defaultConfig } from "./constants.js";
+import { getStorage, setStorage } from "./storage.js";
+import { addPrefix } from "./utils.js";
+export function useChat({ name, peerId, remotePeerId = [], peerOptions, text = true, recoverChat = false, audio: allowed = true, onError = () => alert("Browser not supported! Try some other browser."), onMicError = () => alert("Microphone not accessible!"), onMessageSent, onMessageReceived }) {
+    const [audio, setAudio] = useAudio(allowed);
+    const audioStreamRef = useRef(null);
+    const connRef = useRef({});
+    const localStream = useRef();
+    const [messages, setMessages, addMessage] = useMessages();
+    const [peer, setPeer] = useState();
+    const [remotePeers, setRemotePeers] = useStorage("rpc-remote-peer", {});
+    peerId = addPrefix(peerId);
+    if (typeof remotePeerId === "string")
+        remotePeerId = [remotePeerId];
+    const remotePeerIds = remotePeerId.map(addPrefix);
+    function handleConnection(conn) {
+        connRef.current[conn.peer] = conn;
+        conn.on("open", () => {
+            conn.on("data", ({ message, messages, remotePeerName, type }) => {
+                if (type === "message")
+                    receiveMessage(message);
+                else if (type === "init") {
+                    setRemotePeers((prev) => {
+                        prev[conn.peer] = remotePeerName || "Anonymous User";
+                        return prev;
+                    });
+                    if (recoverChat)
+                        setMessages((old) => (messages.length > old.length ? messages : old));
+                }
+            });
+            conn.send({ type: "init", remotePeerName: name, messages });
+        });
+        conn.on("close", conn.removeAllListeners);
+    }
+    function handleError() {
+        setAudio(false);
+        onMicError();
+    }
+    function handleRemoteStream(remoteStream) {
+        if (audioStreamRef.current)
+            audioStreamRef.current.srcObject = remoteStream;
+    }
+    function receiveMessage(message) {
+        addMessage(message);
+        onMessageReceived === null || onMessageReceived === void 0 ? void 0 : onMessageReceived(message);
+    }
+    function sendMessage(message) {
+        addMessage(message);
+        Object.values(connRef.current).forEach((conn) => conn.send({ type: "message", message }));
+        onMessageSent === null || onMessageSent === void 0 ? void 0 : onMessageSent(message);
+    }
+    useEffect(() => {
+        if (!text && !audio) {
+            setPeer(undefined);
+            return;
+        }
+        (function () {
+            return __awaiter(this, void 0, void 0, function* () {
+                const { Peer, util: { supports: { audioVideo, data }, }, } = yield import("peerjs");
+                if (!data || !audioVideo)
+                    return onError();
+                const peer = new Peer(peerId, Object.assign({ config: defaultConfig }, peerOptions));
+                setPeer(peer);
+            });
+        })();
+    }, [audio]);
+    useEffect(() => {
+        if (!peer)
+            return;
+        let calls = {};
+        peer.on("open", () => {
+            remotePeerIds.forEach((id) => {
+                if (text)
+                    handleConnection(peer.connect(id));
+            });
+            if (audio) {
+                const getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+                try {
+                    getUserMedia({
+                        video: false,
+                        audio: {
+                            autoGainControl: false,
+                            noiseSuppression: true,
+                            echoCancellation: true,
+                        },
+                    }, (stream) => {
+                        localStream.current = stream;
+                        remotePeerIds.forEach((id) => {
+                            const call = peer.call(id, stream);
+                            call.on("stream", handleRemoteStream);
+                            call.on("close", call.removeAllListeners);
+                            calls[id] = call;
+                        });
+                        peer.on("call", (call) => {
+                            call.answer(stream);
+                            call.on("stream", handleRemoteStream);
+                            call.on("close", call.removeAllListeners);
+                            calls[call.peer] = call;
+                        });
+                    }, handleError);
+                }
+                catch (_a) {
+                    handleError();
+                }
+            }
+        });
+        peer.on("connection", handleConnection);
+        return () => {
+            var _a;
+            (_a = localStream.current) === null || _a === void 0 ? void 0 : _a.getTracks().forEach((track) => track.stop());
+            Object.values(connRef.current).forEach(closeConnection);
+            connRef.current = {};
+            Object.values(calls).forEach(closeConnection);
+            peer.removeAllListeners();
+            peer.destroy();
+        };
+    }, [peer]);
+    return { peerId, audioStreamRef, remotePeers, messages, sendMessage, audio, setAudio };
+}
+export function useMessages() {
+    const [messages, setMessages] = useStorage("rpc-messages", []);
+    const addMessage = (message) => setMessages((prev) => prev.concat(message));
+    return [messages, setMessages, addMessage];
+}
+export function useStorage(key, initialValue, local = false) {
+    const [storedValue, setStoredValue] = useState(() => {
+        if (typeof window === "undefined")
+            return initialValue;
+        return getStorage(key, initialValue, local);
+    });
+    const setValue = (value) => {
+        setStoredValue((old) => {
+            const updatedValue = typeof value === "function" ? value(old) : value;
+            setStorage(key, updatedValue, local);
+            return updatedValue;
+        });
+    };
+    return [storedValue, setValue];
+}
+export function useAudio(allowed) {
+    const [audio, setAudio] = useStorage("rpc-audio", false, true);
+    const enabled = audio || allowed;
+    return [enabled, setAudio];
+}

package/dist/icons.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-export type IconProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+import { IconProps } from "./types.js";
 export declare function BiSolidMessageDetail(props: IconProps): React.JSX.Element;
 export declare function BiSolidMessageX(props: IconProps): React.JSX.Element;
 export declare function GrSend(props: IconProps): React.JSX.Element;

package/dist/index.d.ts

@@ -1,42 +1,6 @@
-import React, { CSSProperties, DetailedHTMLProps, HTMLAttributes, ReactNode } from "react";
-import { PeerOptions } from "peerjs";
-export type RemotePeerId = string | string[];
-export type { PeerOptions };
-export type DialogPosition = "left" | "center" | "right";
-export type DialogOptions = {
-    position?: DialogPosition;
-    style?: CSSProperties;
-};
-export type RemotePeers = {
-    [id: string]: string;
-};
-export type Message = {
-    id: string;
-    text: string;
-};
-export type ChildrenOptions = {
-    remotePeers?: RemotePeers;
-    messages?: Message[];
-    addMessage?: (message: Message, sendToRemotePeer?: boolean) => void;
-    audio?: boolean;
-    setAudio?: (audio: boolean) => void;
-};
-export type Children = (childrenOptions: ChildrenOptions) => ReactNode;
-export type Props = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-export type ChatProps = {
-    name?: string;
-    peerId: string;
-    remotePeerId?: RemotePeerId;
-    text?: boolean;
-    recoverChat?: boolean;
-    voice?: boolean;
-    peerOptions?: PeerOptions;
-    dialogOptions?: DialogOptions;
-    onError?: Function;
-    onMicError?: Function;
-    children?: Children;
-    props?: Props;
-};
-export type { IconProps } from "./icons.js";
-export default function Chat({ name, peerId, remotePeerId, peerOptions, text, recoverChat, voice, dialogOptions, onError, onMicError, children, props }: ChatProps): React.JSX.Element;
-export declare const clearChat: () => void;
+import React from "react";
+import { useChat } from "./hooks.js";
+import { clearChat } from "./storage.js";
+import { ChatProps } from "./types.js";
+export default function Chat({ text, audio, onMessageReceived, dialogOptions, props, children, ...hookProps }: ChatProps): React.JSX.Element;
+export { clearChat, useChat };

package/dist/index.js

@@ -1,149 +1,34 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
 };
 import React, { useEffect, useRef, useState } from "react";
-import useStorage, { removeStorage } from "./storage.js";
+import { useChat } from "./hooks.js";
 import { BiSolidMessageDetail, BiSolidMessageX, BsFillMicFill, BsFillMicMuteFill, GrSend } from "./icons.js";
-const turnAccounts = [
-    { username: "70061a377b51f3a3d01c11e3", credential: "lHV4NYJ5Rfl5JNa9" },
-    { username: "13b19eb65bbf6e9f96d64b72", credential: "7R9P/+7y7Q516Etv" },
-    { username: "3469603f5cdc7ca4a1e891ae", credential: "/jMyLSDbbcgqpVQv" },
-    { username: "a7926f4dcc4a688d41f89752", credential: "ZYM8jFYeb8bQkL+N" },
-    { username: "0be25ab7f61d9d733ba94809", credential: "hiiSwWVch+ftt3SX" },
-    { username: "3c25ba948daeab04f9b66187", credential: "FQB3GQwd27Y0dPeK" },
-];
-const defaultConfig = {
-    iceServers: [
-        {
-            urls: ["stun:stun.l.google.com:19302", "stun:stun.relay.metered.ca:80"],
-        },
-    ].concat(turnAccounts.map((account) => (Object.assign({ urls: ["turn:standard.relay.metered.ca:80", "turn:standard.relay.metered.ca:80?transport=tcp", "turn:standard.relay.metered.ca:443", "turns:standard.relay.metered.ca:443?transport=tcp"] }, account)))),
-};
-function closeConnection(conn) {
-    conn.removeAllListeners();
-    conn.close();
-}
-export default function Chat({ name, peerId, remotePeerId = [], peerOptions, text = true, recoverChat = false, voice = true, dialogOptions, onError = () => alert("Browser not supported! Try some other browser."), onMicError = () => alert("Microphone not accessible!"), children, props = {} }) {
-    const [peer, setPeer] = useState();
-    const [notification, setNotification] = useState(false);
-    const [remotePeers, setRemotePeers] = useStorage("rpc-remote-peer", {});
-    const [messages, setMessages] = useStorage("rpc-messages", []);
-    const connRef = useRef({});
+import { clearChat } from "./storage.js";
+export default function Chat(_a) {
+    var { text = true, audio = true, onMessageReceived, dialogOptions, props = {}, children } = _a, hookProps = __rest(_a, ["text", "audio", "onMessageReceived", "dialogOptions", "props", "children"]);
+    const _b = useChat(Object.assign({ text,
+        audio, onMessageReceived: modifiedOnMessageReceived }, hookProps)), { peerId, audioStreamRef } = _b, childrenOptions = __rest(_b, ["peerId", "audioStreamRef"]);
+    const { remotePeers, messages, sendMessage, audio: audioEnabled, setAudio } = childrenOptions;
+    const containerRef = useRef(null);
     const [dialog, setDialog] = useState(false);
     const dialogRef = useRef(null);
-    const containerRef = useRef(null);
     const inputRef = useRef(null);
-    const [audio, setAudio] = useStorage("rpc-audio", false, true);
-    const streamRef = useRef(null);
-    const localStream = useRef();
-    peerId = `rpc-${peerId}`;
-    if (typeof remotePeerId === "string")
-        remotePeerId = [remotePeerId];
-    const remotePeerIds = remotePeerId.map((id) => `rpc-${id}`);
-    const handleRemoteStream = (remoteStream) => (streamRef.current.srcObject = remoteStream);
-    function addMessage(message, sendToRemotePeer = false) {
+    const [notification, setNotification] = useState(false);
+    function modifiedOnMessageReceived(message) {
         var _a;
-        setMessages((prev) => prev.concat(message));
-        if (sendToRemotePeer)
-            Object.values(connRef.current).forEach((conn) => conn.send({ type: "message", message }));
-        else if (!((_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.open))
+        if (!((_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.open))
             setNotification(true);
+        onMessageReceived === null || onMessageReceived === void 0 ? void 0 : onMessageReceived(message);
     }
-    function handleConnection(conn) {
-        connRef.current[conn.peer] = conn;
-        conn.on("open", () => {
-            conn.on("data", ({ type, message, remotePeerName, messages }) => {
-                if (type === "message")
-                    addMessage(message);
-                else if (type === "init") {
-                    setRemotePeers((prev) => {
-                        prev[conn.peer] = remotePeerName || "Anonymous User";
-                        return prev;
-                    });
-                    if (recoverChat)
-                        setMessages((old) => (messages.length > old.length ? messages : old));
-                }
-            });
-            conn.send({ type: "init", remotePeerName: name, messages });
-        });
-        conn.on("close", conn.removeAllListeners);
-    }
-    function handleError() {
-        setAudio(false);
-        onMicError();
-    }
-    useEffect(() => {
-        if (!text && !audio) {
-            setPeer(undefined);
-            return;
-        }
-        (function () {
-            return __awaiter(this, void 0, void 0, function* () {
-                const { Peer, util: { supports: { audioVideo, data }, }, } = yield import("peerjs");
-                if (!data || !audioVideo)
-                    return onError();
-                const peer = new Peer(peerId, Object.assign({ config: defaultConfig }, peerOptions));
-                setPeer(peer);
-            });
-        })();
-    }, [audio]);
-    useEffect(() => {
-        if (!peer)
-            return;
-        let calls = {};
-        peer.on("open", () => {
-            remotePeerIds.forEach((id) => {
-                if (text)
-                    handleConnection(peer.connect(id));
-            });
-            if (audio) {
-                const getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
-                try {
-                    getUserMedia({
-                        video: false,
-                        audio: {
-                            autoGainControl: false,
-                            noiseSuppression: true,
-                            echoCancellation: true,
-                        },
-                    }, (stream) => {
-                        localStream.current = stream;
-                        remotePeerIds.forEach((id) => {
-                            const call = peer.call(id, stream);
-                            call.on("stream", handleRemoteStream);
-                            call.on("close", call.removeAllListeners);
-                            calls[id] = call;
-                        });
-                        peer.on("call", (call) => {
-                            call.answer(stream);
-                            call.on("stream", handleRemoteStream);
-                            call.on("close", call.removeAllListeners);
-                            calls[call.peer] = call;
-                        });
-                    }, handleError);
-                }
-                catch (_a) {
-                    handleError();
-                }
-            }
-        });
-        peer.on("connection", handleConnection);
-        return () => {
-            var _a;
-            (_a = localStream.current) === null || _a === void 0 ? void 0 : _a.getTracks().forEach((track) => track.stop());
-            Object.values(connRef.current).forEach(closeConnection);
-            connRef.current = {};
-            Object.values(calls).forEach(closeConnection);
-            peer.removeAllListeners();
-            peer.destroy();
-        };
-    }, [peer]);
     useEffect(() => {
         var _a, _b;
         if (dialog)
@@ -157,7 +42,7 @@ export default function Chat({ name, peerId, remotePeerId = [], peerOptions, tex
             container.scrollTop = container.scrollHeight;
     }, [dialog, remotePeers, messages]);
     return (React.createElement("div", Object.assign({ className: "rpc-main rpc-font" }, props),
-        typeof children === "function" ? (children({ remotePeers, messages, addMessage, audio, setAudio })) : (React.createElement(React.Fragment, null,
+        typeof children === "function" ? (children(childrenOptions)) : (React.createElement(React.Fragment, null,
             text && (React.createElement("div", { className: "rpc-dialog-container" },
                 dialog ? (React.createElement(BiSolidMessageX, { title: "Close chat", onClick: () => setDialog(false) })) : (React.createElement("div", { className: "rpc-notification" },
                     React.createElement(BiSolidMessageDetail, { title: "Open chat", onClick: () => {
@@ -181,16 +66,13 @@ export default function Chat({ name, peerId, remotePeerId = [], peerOptions, tex
                                 const text = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value;
                                 if (text) {
                                     inputRef.current.value = "";
-                                    addMessage({ id: peerId, text }, true);
+                                    sendMessage({ id: peerId, text });
                                 }
                             } },
                             React.createElement("input", { ref: inputRef, className: "rpc-input rpc-font", placeholder: "Enter a message" }),
                             React.createElement("button", { type: "submit", className: "rpc-button" },
                                 React.createElement(GrSend, { title: "Send message" }))))))),
-            voice && React.createElement("div", null, audio ? React.createElement(BsFillMicFill, { title: "Turn mic off", onClick: () => setAudio(false) }) : React.createElement(BsFillMicMuteFill, { title: "Turn mic on", onClick: () => setAudio(true) })))),
-        voice && audio && React.createElement("audio", { ref: streamRef, autoPlay: true, style: { display: "none" } })));
+            audio && React.createElement("button", null, audioEnabled ? React.createElement(BsFillMicFill, { title: "Turn mic off", onClick: () => setAudio(false) }) : React.createElement(BsFillMicMuteFill, { title: "Turn mic on", onClick: () => setAudio(true) })))),
+        audio && audioEnabled && React.createElement("audio", { ref: audioStreamRef, autoPlay: true, style: { display: "none" } })));
 }
-export const clearChat = () => {
-    removeStorage("rpc-remote-peer");
-    removeStorage("rpc-messages");
-};
+export { clearChat, useChat };

package/dist/storage.d.ts

@@ -1,2 +1,4 @@
 export declare const removeStorage: (key: string, local?: boolean) => void;
-export default function useStorage<Value>(key: string, initialValue: Value, local?: boolean): [Value, (value: Value | ((old: Value) => Value)) => void];
+export declare const setStorage: (key: string, value: any, local?: boolean) => void;
+export declare const getStorage: (key: string, fallbackValue?: any, local?: boolean) => any;
+export declare const clearChat: () => void;

package/dist/storage.js

@@ -1,7 +1,6 @@
-import { useState } from "react";
-const setStorage = (key, value, local = false) => (local ? localStorage : sessionStorage).setItem(key, JSON.stringify(value));
 export const removeStorage = (key, local = false) => (local ? localStorage : sessionStorage).removeItem(key);
-const getStorage = (key, fallbackValue, local = false) => {
+export const setStorage = (key, value, local = false) => (local ? localStorage : sessionStorage).setItem(key, JSON.stringify(value));
+export const getStorage = (key, fallbackValue, local = false) => {
     let value = (local ? localStorage : sessionStorage).getItem(key);
     try {
         if (!value)
@@ -20,18 +19,7 @@ const getStorage = (key, fallbackValue, local = false) => {
     }
     return value;
 };
-export default function useStorage(key, initialValue, local = false) {
-    const [storedValue, setStoredValue] = useState(() => {
-        if (typeof window === "undefined")
-            return initialValue;
-        return getStorage(key, initialValue, local);
-    });
-    const setValue = (value) => {
-        setStoredValue((old) => {
-            const updatedValue = typeof value === "function" ? value(old) : value;
-            setStorage(key, updatedValue, local);
-            return updatedValue;
-        });
-    };
-    return [storedValue, setValue];
-}
+export const clearChat = () => {
+    removeStorage("rpc-remote-peer");
+    removeStorage("rpc-messages");
+};

package/dist/types.d.ts

@@ -0,0 +1,45 @@
+import { PeerOptions } from "peerjs";
+import { CSSProperties, DetailedHTMLProps, HTMLAttributes, ReactNode } from "react";
+export type Message = {
+    id: string;
+    text: string;
+};
+export type MessageEvent = (message: Message) => void;
+export type { PeerOptions };
+export type RemotePeerId = string | string[];
+export type useChatProps = {
+    name?: string;
+    peerId: string;
+    remotePeerId?: RemotePeerId;
+    text?: boolean;
+    recoverChat?: boolean;
+    audio?: boolean;
+    peerOptions?: PeerOptions;
+    onError?: Function;
+    onMicError?: Function;
+    onMessageSent?: MessageEvent;
+    onMessageReceived?: MessageEvent;
+};
+export type IconProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+export type RemotePeers = {
+    [id: string]: string;
+};
+export type Children = (childrenOptions: ChildrenOptions) => ReactNode;
+export type ChildrenOptions = {
+    remotePeers?: RemotePeers;
+    messages?: Message[];
+    sendMessage?: (message: Message) => void;
+    audio?: boolean;
+    setAudio?: (audio: boolean) => void;
+};
+export type ChatProps = useChatProps & {
+    dialogOptions?: DialogOptions;
+    props?: DivProps;
+    children?: Children;
+};
+export type DialogOptions = {
+    position?: DialogPosition;
+    style?: CSSProperties;
+};
+export type DialogPosition = "left" | "center" | "right";
+export type DivProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils.d.ts

@@ -0,0 +1 @@
+export declare const addPrefix: (str: string) => string;

package/dist/utils.js

@@ -0,0 +1 @@
+export const addPrefix = (str) => `rpc-${str}`;

package/package.json

@@ -1,14 +1,37 @@
 {
   "name": "react-peer-chat",
-  "version": "0.6.8",
+  "version": "0.7.0",
   "description": "An easy to use react component for impleting peer-to-peer chatting.",
-  "type": "module",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "license": "MIT",
+  "author": "Sahil Aggarwal <aggarwalsahil2004@gmail.com>",
+  "contributors": [],
+  "homepage": "https://github.com/SahilAggarwal2004/react-peer-chat#readme",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/SahilAggarwal2004/react-peer-chat.git"
   },
+  "bugs": {
+    "url": "https://github.com/SahilAggarwal2004/react-peer-chat/issues"
+  },
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.js",
+    "./icons": "./dist/icons.js",
+    "./styles.css": "./dist/styles.css",
+    "./types": "./dist/types.js"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "peerjs": "^1.5.4"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
   "keywords": [
     "react",
     "chat",
@@ -20,27 +43,11 @@
     "webrtc",
     "react-peer-chat",
     "typescript",
-    "voice-chat",
     "p2p-chat",
     "text-chat",
-    "peerjs-webrtc"
+    "voice-chat",
+    "audio-chat"
   ],
-  "author": "Sahil Aggarwal",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/SahilAggarwal2004/react-peer-chat/issues"
-  },
-  "homepage": "https://github.com/SahilAggarwal2004/react-peer-chat#readme",
-  "peerDependencies": {
-    "react": ">=17.0.0",
-    "react-dom": ">=17.0.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.3.12"
-  },
-  "dependencies": {
-    "peerjs": "^1.5.4"
-  },
   "scripts": {
     "copy": "copy .\\src\\*.css dist",
     "build": "pnpm i && tsc && pnpm copy"