react-peer-chat 0.8.4 → 0.8.6

package/README.md

@@ -10,8 +10,8 @@ A simple-to-use React component for implementing peer-to-peer chatting, powered
 - 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)
+- Multiple peer connections. See [multi-peer usage](#multi-peer-usage)
+- Fully customizable. See [usage with FaC](#full-customization)
 
 ## Installation
 
@@ -79,6 +79,8 @@ export default function App() {
 }
 ```
 
+> **Note:** The `remotePeerId` prop is read at mount and whenever `peerId` changes. Changes to `remotePeerId` alone (without `peerId` changing) won't establish new connections. In peer-to-peer chat scenarios, new peers should connect to existing peers by providing their IDs at mount time, rather than existing peers updating this prop dynamically.
+
 #### Partial Customization
 
 Use the props provided by the `<Chat>` component for customization.
@@ -289,42 +291,59 @@ export default function App() {
 ### 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. |
-| `peerId` | `string` | Yes | - | It is the unique id that is alloted to a peer. It uniquely identifies a peer from other peers. |
-| `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). |
-| `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. |
-| `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. |
+
+| Parameter           | Type                                          | Required | Default                                                         | Description                                                                                                                                     |
+| ------------------- | --------------------------------------------- | -------- | --------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| `name`              | `string`                                      | No       | Anonymous User                                                  | Name of the peer which will be shown to the remote peer.                                                                                        |
+| `peerId`            | `string`                                      | Yes      | -                                                               | It is the unique id that is alloted to a peer. It uniquely identifies a peer from other peers.                                                  |
+| `remotePeerId`      | `string \| string[]`                          | No       | -                                                               | Unique id(s) of remote peer(s) to connect to. Read at mount and when `peerId` changes; changes to this prop alone won't create new connections. |
+| `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).                                                                            |
+| `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.                                                                                                      |
+| `onError`           | [`ErrorHandler`](#errorhandler)               | No       | `() => alert('Browser not supported! Try some other browser.')` | Function to be executed if browser doesn't support `WebRTC`                                                                                     |
+| `onMicError`        | [`ErrorHandler`](#errorhandler)               | No       | `() => alert('Microphone not accessible!')`                     | Function to be executed when microphone is not accessible.                                                                                      |
+| `onMessageSent`     | [`MessageEventHandler`](#messageeventhandler) | No       | -                                                               | Function to be executed when a text message is sent to other peers.                                                                             |
+| `onMessageReceived` | [`MessageEventHandler`](#messageeventhandler) | 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
+| Parameter       | Type                              | Required | Default                | Description                                   |
+| --------------- | --------------------------------- | -------- | ---------------------- | --------------------------------------------- |
+| `dialogOptions` | [`DialogOptions`](#dialogoptions) | No       | { position: 'center' } | Options to customize text dialog box styling. |
+| `props`         | [`DivProps`](#divprops)           | No       | -                      | Props to customize the `<Chat>` component.    |
+| `children`      | [`Children`](#children)           | No       | -                      | See [usage with FaC](#full-customization)     |
+
+## Types
 
-#### PeerOptions
+### Children
 
 ```typescript
-import { PeerOptions } from "peerjs";
+import type { ReactNode } from "react";
+
+type RemotePeers = { [id: string]: string };
+type Message = {
+  id: string;
+  text: string;
+};
+type ChildrenOptions = {
+  remotePeers?: RemotePeers;
+  messages?: Message[];
+  sendMessage?: (message: Message) => void;
+  audio?: boolean;
+  setAudio?: (audio: boolean) => void;
+};
+type Children = (childrenOptions: ChildrenOptions) => ReactNode;
 ```
 
-#### DialogOptions
+### DialogOptions
 
 ```typescript
-import { CSSProperties } from "react";
+import type { CSSProperties } from "react";
+
 type DialogPosition = "left" | "center" | "right";
 type DialogOptions = {
   position: DialogPosition;
@@ -332,25 +351,36 @@ type DialogOptions = {
 };
 ```
 
-#### Children
+### DivProps
+
+```typescript
+import type { DetailedHTMLProps, HTMLAttributes } from "react";
+
+type DivProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+```
+
+### ErrorHandler
+
+```typescript
+type ErrorHandler = () => void;
+```
+
+### MessageEventHandler
 
 ```typescript
-import { ReactNode } from "react";
-type RemotePeers = { [id: string]: string };
 type Message = {
   id: string;
   text: string;
 };
-type ChildrenOptions = {
-  remotePeers?: RemotePeers;
-  messages?: Message[];
-  sendMessage?: (message: Message) => void;
-  audio?: boolean;
-  setAudio?: (audio: boolean) => void;
-};
-type Children = (childrenOptions: ChildrenOptions) => ReactNode;
+type MessageEventHandler = (message: Message) => void;
+```
+
+### PeerOptions
+
+```typescript
+import type { PeerOptions } from "peerjs";
 ```
 
-## Author
+## License
 
-[Sahil Aggarwal](https://github.com/SahilAggarwal2004)
+This project is licensed under the [MIT License](LICENSE).

package/dist/chunks/chunk-GT3RG6VA.js

@@ -0,0 +1,203 @@
+import { getStorage, setStorage } from './chunk-ZYFPSCFE.js';
+import { __spreadValues, __spreadProps } from './chunk-LNEKYYG7.js';
+import { useState, useRef, useMemo, useEffect } from 'react';
+
+// src/constants.ts
+var 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" }
+];
+var defaults = {
+  config: {
+    iceServers: [
+      {
+        urls: ["stun:stun.l.google.com:19302", "stun:stun.relay.metered.ca:80"]
+      }
+    ].concat(
+      turnAccounts.map((account) => __spreadValues({
+        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))
+    )
+  },
+  peerOptions: {},
+  remotePeerId: []
+};
+
+// src/lib/connection.ts
+function closeConnection(conn) {
+  conn.removeAllListeners();
+  conn.close();
+}
+
+// src/lib/utils.ts
+var addPrefix = (str) => `rpc-${str}`;
+
+// src/lib/react.ts
+function isSetStateFunction(v) {
+  return typeof v === "function";
+}
+
+// src/hooks.ts
+var { config: defaultConfig, peerOptions: defaultPeerOptions, remotePeerId: defaultRemotePeerId } = defaults;
+function useChat({
+  peerId,
+  name = "Anonymous User",
+  remotePeerId = defaultRemotePeerId,
+  peerOptions = defaultPeerOptions,
+  text = true,
+  recoverChat = false,
+  audio: allowed = true,
+  onError = () => alert("Browser not supported! Try some other browser."),
+  onMicError = () => alert("Microphone not accessible!"),
+  onMessageSent,
+  onMessageReceived
+}) {
+  const [peer, setPeer] = useState();
+  const [audio, setAudio] = useAudio(allowed);
+  const connRef = useRef({});
+  const localStreamRef = useRef(null);
+  const audioStreamRef = useRef(null);
+  const callsRef = useRef({});
+  const [messages, setMessages, addMessage] = useMessages();
+  const [remotePeers, setRemotePeers] = useStorage("rpc-remote-peer", {});
+  const { completePeerId, completeRemotePeerIds } = useMemo(() => {
+    const remotePeerIds = Array.isArray(remotePeerId) ? remotePeerId : [remotePeerId];
+    return { completePeerId: addPrefix(peerId), completeRemotePeerIds: remotePeerIds.map(addPrefix) };
+  }, [peerId]);
+  function handleConnection(conn) {
+    connRef.current[conn.peer] = conn;
+    conn.on("open", () => {
+      conn.on("data", ({ message, messages: messages2, remotePeerName, type }) => {
+        if (type === "message") receiveMessage(message);
+        else if (type === "init") {
+          setRemotePeers((prev) => __spreadProps(__spreadValues({}, prev), { [conn.peer]: remotePeerName }));
+          if (recoverChat) setMessages((old) => messages2.length > old.length ? messages2 : 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 ? void 0 : onMessageReceived(message);
+  }
+  function sendMessage(message) {
+    addMessage(message);
+    Object.values(connRef.current).forEach((conn) => conn.send({ type: "message", message }));
+    onMessageSent == null ? void 0 : onMessageSent(message);
+  }
+  useEffect(() => {
+    if (!text && !audio) return;
+    import('peerjs').then(
+      ({
+        Peer,
+        util: {
+          supports: { audioVideo, data }
+        }
+      }) => {
+        if (!data || !audioVideo) return onError();
+        const peer2 = new Peer(completePeerId, __spreadValues({ config: defaultConfig }, peerOptions));
+        peer2.on("connection", handleConnection);
+        setPeer(peer2);
+      }
+    );
+    return () => {
+      setPeer((prev) => {
+        prev == null ? void 0 : prev.removeAllListeners();
+        prev == null ? void 0 : prev.destroy();
+        return void 0;
+      });
+    };
+  }, [completePeerId]);
+  useEffect(() => {
+    if (!text || !peer) return;
+    const handleOpen = () => completeRemotePeerIds.forEach((id) => handleConnection(peer.connect(id)));
+    if (peer.open) handleOpen();
+    else peer.once("open", handleOpen);
+    return () => {
+      Object.values(connRef.current).forEach(closeConnection);
+      connRef.current = {};
+    };
+  }, [text, peer]);
+  useEffect(() => {
+    if (!audio || !peer) return;
+    const setupAudio = () => navigator.mediaDevices.getUserMedia({
+      video: false,
+      audio: {
+        autoGainControl: false,
+        // Disable automatic gain control
+        noiseSuppression: true,
+        // Enable noise suppression
+        echoCancellation: true
+        // Enable echo cancellation
+      }
+    }).then((stream) => {
+      localStreamRef.current = stream;
+      completeRemotePeerIds.forEach((id) => {
+        const call = peer.call(id, stream);
+        call.on("stream", handleRemoteStream);
+        call.on("close", call.removeAllListeners);
+        callsRef.current[id] = call;
+      });
+      peer.on("call", (call) => {
+        call.answer(stream);
+        call.on("stream", handleRemoteStream);
+        call.on("close", call.removeAllListeners);
+        callsRef.current[call.peer] = call;
+      });
+    }).catch(handleError);
+    if (peer.open) setupAudio();
+    else peer.once("open", setupAudio);
+    return () => {
+      var _a;
+      (_a = localStreamRef.current) == null ? void 0 : _a.getTracks().forEach((track) => track.stop());
+      localStreamRef.current = null;
+      Object.values(callsRef.current).forEach(closeConnection);
+      callsRef.current = {};
+    };
+  }, [audio, peer]);
+  return { peerId: completePeerId, audioStreamRef, remotePeers, messages, sendMessage, audio, setAudio };
+}
+function useMessages() {
+  const [messages, setMessages] = useStorage("rpc-messages", []);
+  const addMessage = (message) => setMessages((prev) => prev.concat(message));
+  return [messages, setMessages, addMessage];
+}
+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((prev) => {
+      const next = isSetStateFunction(value) ? value(prev) : value;
+      setStorage(key, next, local);
+      return next;
+    });
+  };
+  return [storedValue, setValue];
+}
+function useAudio(allowed) {
+  const [audio, setAudio] = useStorage("rpc-audio", false, true);
+  const enabled = audio && allowed;
+  return [enabled, setAudio];
+}
+
+export { useAudio, useChat, useMessages, useStorage };

package/dist/chunks/{chunk-4CBQRGQ3.js → chunk-JJPIWKLG.js}

@@ -1,53 +1,6 @@
+import { __spreadValues } from './chunk-LNEKYYG7.js';
 import React from 'react';
 
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 function BiSolidMessageDetail(props) {
   return /* @__PURE__ */ React.createElement("span", __spreadValues({ className: "rpc-icon-container" }, props), /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", width: "1.25rem", height: "1.25rem" }, /* @__PURE__ */ React.createElement("path", { d: "M20 2H4c-1.103 0-2 .894-2 1.992v12.016C2 17.106 2.897 18 4 18h3v4l6.351-4H20c1.103 0 2-.894 2-1.992V3.992A1.998 1.998 0 0 0 20 2zm-6 11H7v-2h7v2zm3-4H7V7h10v2z" })));
 }
@@ -72,4 +25,4 @@ function BsFillMicMuteFill(props) {
   return /* @__PURE__ */ React.createElement("span", __spreadValues({ className: "rpc-icon-container" }, props), /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 16 16", fill: "currentColor", width: "1.25rem", height: "1.25rem" }, /* @__PURE__ */ React.createElement("path", { d: "M13 8c0 .564-.094 1.107-.266 1.613l-.814-.814A4.02 4.02 0 0 0 12 8V7a.5.5 0 0 1 1 0v1zm-5 4c.818 0 1.578-.245 2.212-.667l.718.719a4.973 4.973 0 0 1-2.43.923V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 1 0v1a4 4 0 0 0 4 4zm3-9v4.879L5.158 2.037A3.001 3.001 0 0 1 11 3z" }), /* @__PURE__ */ React.createElement("path", { d: "M9.486 10.607 5 6.12V8a3 3 0 0 0 4.486 2.607zm-7.84-9.253 12 12 .708-.708-12-12-.708.708z" })));
 }
 
-export { BiSolidMessageDetail, BiSolidMessageX, BsFillMicFill, BsFillMicMuteFill, GrSend, __async, __objRest, __spreadValues };
+export { BiSolidMessageDetail, BiSolidMessageX, BsFillMicFill, BsFillMicMuteFill, GrSend };

package/dist/chunks/chunk-LNEKYYG7.js

@@ -0,0 +1,33 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+export { __objRest, __spreadProps, __spreadValues };

package/dist/chunks/chunk-YDZ27MG7.js

@@ -0,0 +1,81 @@
+import { useChat } from './chunk-GT3RG6VA.js';
+import { BiSolidMessageX, BiSolidMessageDetail, GrSend, BsFillMicFill, BsFillMicMuteFill } from './chunk-JJPIWKLG.js';
+import { __objRest, __spreadValues } from './chunk-LNEKYYG7.js';
+import React, { useRef, useState, useEffect } from 'react';
+
+// src/styles.css
+function injectStyle(css) {
+  if (typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (head.firstChild) {
+    head.insertBefore(style, head.firstChild);
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+injectStyle('.rpc-font {\n  font-family:\n    "Trebuchet MS",\n    "Lucida Sans Unicode",\n    "Lucida Grande",\n    "Lucida Sans",\n    Arial,\n    sans-serif;\n}\n.rpc-main {\n  display: flex;\n  align-items: center;\n  column-gap: 0.5rem;\n}\n.rpc-dialog-container {\n  position: relative;\n}\n.rpc-notification {\n  position: relative;\n}\n.rpc-notification .rpc-badge {\n  background-color: red;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 6px;\n  aspect-ratio: 1;\n  border-radius: 100%;\n}\n.rpc-dialog {\n  position: absolute;\n  background-color: black;\n  color: white;\n  padding: 0.4rem 0 0.25rem 0;\n  border-radius: 0.4rem;\n  font-size: small;\n}\n.rpc-position-left {\n  left: 0.6rem;\n  translate: -100%;\n}\n.rpc-position-center {\n  left: 0.5rem;\n  translate: -50%;\n}\n.rpc-position-right {\n  left: 0.3rem;\n}\n.rpc-hr {\n  margin: 0.25rem 0;\n  border-color: rgba(255, 255, 255, 0.7);\n}\n.rpc-message-container {\n  height: 7rem;\n  overflow-y: scroll;\n  padding-inline: 0.5rem;\n  margin-bottom: 0.25rem;\n}\n.rpc-message-container::-webkit-scrollbar {\n  width: 2.5px;\n}\n.rpc-message-container::-webkit-scrollbar-track {\n  background: gray;\n}\n.rpc-message-container::-webkit-scrollbar-thumb {\n  background-color: white;\n}\n.rpc-heading {\n  text-align: center;\n  font-size: medium;\n  font-weight: bold;\n  padding-inline: 0.5rem;\n}\n.rpc-input-container {\n  display: flex;\n  width: 15rem;\n  max-width: 90vw;\n  column-gap: 0.25rem;\n  padding: 0.25rem 0.5rem;\n}\n.rpc-input {\n  color: white;\n  width: 100%;\n  background-color: black;\n  border: none;\n  outline: 1px solid rgba(255, 255, 255, 0.8);\n  border-radius: 0.25rem;\n  padding: 0.3rem 0.25rem;\n}\n.rpc-input::placeholder {\n  color: rgba(255, 255, 255, 0.7);\n}\n.rpc-input:focus {\n  outline: 2px solid white;\n}\n.rpc-button {\n  all: unset;\n  display: flex;\n}\n.rpc-icon-container {\n  display: flex;\n  align-items: center;\n}\n.rpc-invert {\n  filter: invert(100%);\n}\n');
+
+// src/components.tsx
+function Chat(_a) {
+  var _b = _a, { text = true, audio = true, onMessageReceived, dialogOptions, props = {}, children } = _b, hookProps = __objRest(_b, ["text", "audio", "onMessageReceived", "dialogOptions", "props", "children"]);
+  const _a2 = useChat(__spreadValues({
+    text,
+    audio,
+    onMessageReceived: modifiedOnMessageReceived
+  }, hookProps)), { peerId, audioStreamRef } = _a2, childrenOptions = __objRest(_a2, ["peerId", "audioStreamRef"]);
+  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) {
+    var _a3;
+    if (!((_a3 = dialogRef.current) == null ? void 0 : _a3.open)) setNotification(true);
+    onMessageReceived == null ? void 0 : onMessageReceived(message);
+  }
+  useEffect(() => {
+    var _a3, _b2;
+    if (dialog) (_a3 = dialogRef.current) == null ? void 0 : _a3.show();
+    else (_b2 = dialogRef.current) == null ? void 0 : _b2.close();
+  }, [dialog]);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (container) container.scrollTop = container.scrollHeight;
+  }, [dialog, remotePeers, messages]);
+  return /* @__PURE__ */ React.createElement("div", __spreadValues({ className: "rpc-main rpc-font" }, props), typeof children === "function" ? children(childrenOptions) : /* @__PURE__ */ React.createElement(React.Fragment, null, text && /* @__PURE__ */ React.createElement("div", { className: "rpc-dialog-container" }, dialog ? /* @__PURE__ */ React.createElement(BiSolidMessageX, { title: "Close chat", onClick: () => setDialog(false) }) : /* @__PURE__ */ React.createElement("div", { className: "rpc-notification" }, /* @__PURE__ */ React.createElement(
+    BiSolidMessageDetail,
+    {
+      title: "Open chat",
+      onClick: () => {
+        setNotification(false);
+        setDialog(true);
+      }
+    }
+  ), notification && /* @__PURE__ */ React.createElement("span", { className: "rpc-badge" })), /* @__PURE__ */ React.createElement("dialog", { ref: dialogRef, className: `${dialog ? "rpc-dialog" : ""} rpc-position-${(dialogOptions == null ? void 0 : dialogOptions.position) || "center"}`, style: dialogOptions == null ? void 0 : dialogOptions.style }, /* @__PURE__ */ React.createElement("div", { className: "rpc-heading" }, "Chat"), /* @__PURE__ */ React.createElement("hr", { className: "rpc-hr" }), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { ref: containerRef, className: "rpc-message-container" }, messages.map(({ id, text: text2 }, i) => /* @__PURE__ */ React.createElement("div", { key: i }, /* @__PURE__ */ React.createElement("strong", null, id === peerId ? "You" : remotePeers[id], ": "), /* @__PURE__ */ React.createElement("span", null, text2)))), /* @__PURE__ */ React.createElement("hr", { className: "rpc-hr" }), /* @__PURE__ */ React.createElement(
+    "form",
+    {
+      className: "rpc-input-container",
+      onSubmit: (e) => {
+        var _a3;
+        e.preventDefault();
+        const text2 = (_a3 = inputRef.current) == null ? void 0 : _a3.value;
+        if (text2) {
+          inputRef.current.value = "";
+          sendMessage({ id: peerId, text: text2 });
+        }
+      }
+    },
+    /* @__PURE__ */ React.createElement("input", { ref: inputRef, className: "rpc-input rpc-font", placeholder: "Enter a message" }),
+    /* @__PURE__ */ React.createElement("button", { type: "submit", className: "rpc-button" }, /* @__PURE__ */ React.createElement(GrSend, { title: "Send message" }))
+  )))), audio && /* @__PURE__ */ React.createElement("button", { className: "rpc-button", onClick: () => setAudio(!audioEnabled) }, audioEnabled ? /* @__PURE__ */ React.createElement(BsFillMicFill, { title: "Turn mic off" }) : /* @__PURE__ */ React.createElement(BsFillMicMuteFill, { title: "Turn mic on" }))), audio && audioEnabled && /* @__PURE__ */ React.createElement("audio", { ref: audioStreamRef, autoPlay: true, style: { display: "none" } }));
+}
+
+export { Chat };

package/dist/chunks/chunk-ZYFPSCFE.js

@@ -0,0 +1,22 @@
+// src/lib/storage.ts
+var getStorageInstance = (local = true) => local ? localStorage : sessionStorage;
+var removeStorage = (key, local = true) => getStorageInstance(local).removeItem(key);
+var clearChat = () => {
+  removeStorage("rpc-remote-peer");
+  removeStorage("rpc-messages");
+};
+var setStorage = (key, value, local = true) => getStorageInstance(local).setItem(key, JSON.stringify(value));
+function getStorage(key, fallbackValue, local = true) {
+  const value = getStorageInstance(local).getItem(key);
+  if (value) {
+    try {
+      return JSON.parse(value);
+    } catch (e) {
+      removeStorage(key, local);
+    }
+  }
+  if (fallbackValue !== void 0) setStorage(key, fallbackValue, local);
+  return fallbackValue;
+}
+
+export { clearChat, getStorage, removeStorage, setStorage };

package/dist/components.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ChatProps } from './types.js';
+import 'peerjs';
+
+declare function Chat({ text, audio, onMessageReceived, dialogOptions, props, children, ...hookProps }: ChatProps): React.JSX.Element;
+
+export { Chat as default };

package/dist/components.js

@@ -0,0 +1,5 @@
+export { Chat as default } from './chunks/chunk-YDZ27MG7.js';
+import './chunks/chunk-GT3RG6VA.js';
+import './chunks/chunk-JJPIWKLG.js';
+import './chunks/chunk-ZYFPSCFE.js';
+import './chunks/chunk-LNEKYYG7.js';

package/dist/hooks.d.ts

@@ -0,0 +1,11 @@
+import { SetStateAction } from 'react';
+import { UseChatProps, UseChatReturn, Message } from './types.js';
+import 'peerjs';
+
+declare function useChat({ peerId, name, remotePeerId, peerOptions, text, recoverChat, audio: allowed, onError, onMicError, onMessageSent, onMessageReceived, }: UseChatProps): UseChatReturn;
+declare function useMessages(): readonly [Message[], (value: SetStateAction<Message[]>) => void, (message: Message) => void];
+declare function useStorage<T>(key: string, initialValue: T, local?: boolean): readonly [T, (value: SetStateAction<T>) => void];
+declare function useStorage<T>(key: string, initialValue?: T, local?: boolean): readonly [T | undefined, (value: SetStateAction<T | undefined>) => void];
+declare function useAudio(allowed: boolean): readonly [boolean, (value: SetStateAction<boolean>) => void];
+
+export { useAudio, useChat, useMessages, useStorage };

package/dist/hooks.js

@@ -0,0 +1,3 @@
+export { useAudio, useChat, useMessages, useStorage } from './chunks/chunk-GT3RG6VA.js';
+import './chunks/chunk-ZYFPSCFE.js';
+import './chunks/chunk-LNEKYYG7.js';

package/dist/icons.d.ts

@@ -1,11 +1,11 @@
-import React__default from 'react';
+import React from 'react';
 import { IconProps } from './types.js';
 import 'peerjs';
 
-declare function BiSolidMessageDetail(props: IconProps): React__default.JSX.Element;
-declare function BiSolidMessageX(props: IconProps): React__default.JSX.Element;
-declare function GrSend(props: IconProps): React__default.JSX.Element;
-declare function BsFillMicFill(props: IconProps): React__default.JSX.Element;
-declare function BsFillMicMuteFill(props: IconProps): React__default.JSX.Element;
+declare function BiSolidMessageDetail(props: IconProps): React.JSX.Element;
+declare function BiSolidMessageX(props: IconProps): React.JSX.Element;
+declare function GrSend(props: IconProps): React.JSX.Element;
+declare function BsFillMicFill(props: IconProps): React.JSX.Element;
+declare function BsFillMicMuteFill(props: IconProps): React.JSX.Element;
 
 export { BiSolidMessageDetail, BiSolidMessageX, BsFillMicFill, BsFillMicMuteFill, GrSend };

package/dist/icons.js

@@ -1 +1,2 @@
-export { BiSolidMessageDetail, BiSolidMessageX, BsFillMicFill, BsFillMicMuteFill, GrSend } from './chunks/chunk-4CBQRGQ3.js';
+export { BiSolidMessageDetail, BiSolidMessageX, BsFillMicFill, BsFillMicMuteFill, GrSend } from './chunks/chunk-JJPIWKLG.js';
+import './chunks/chunk-LNEKYYG7.js';

package/dist/index.d.ts

@@ -1,20 +1,6 @@
-import * as React from 'react';
-import React__default from 'react';
-import { useChatProps, RemotePeers, Message, ChatProps } from './types.js';
+export { default } from './components.js';
+export { useChat } from './hooks.js';
+export { clearChat } from './lib/storage.js';
+import 'react';
+import './types.js';
 import 'peerjs';
-
-declare function useChat({ name, peerId, remotePeerId, peerOptions, text, recoverChat, audio: allowed, onError, onMicError, onMessageSent, onMessageReceived, }: useChatProps): {
-    peerId: string;
-    audioStreamRef: React.RefObject<HTMLMediaElement | null>;
-    remotePeers: RemotePeers;
-    messages: Message[];
-    sendMessage: (message: Message) => void;
-    audio: boolean;
-    setAudio: (value: boolean | ((old: boolean) => boolean)) => void;
-};
-
-declare const clearChat: () => void;
-
-declare function Chat({ text, audio, onMessageReceived, dialogOptions, props, children, ...hookProps }: ChatProps): React__default.JSX.Element;
-
-export { clearChat, Chat as default, useChat };

package/dist/index.js

@@ -1,296 +1,5 @@
-import { __spreadValues, __async, __objRest, BiSolidMessageX, BiSolidMessageDetail, GrSend, BsFillMicFill, BsFillMicMuteFill } from './chunks/chunk-4CBQRGQ3.js';
-import React, { useRef, useState, useEffect } from 'react';
-
-// src/constants.ts
-var 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" }
-];
-var defaultConfig = {
-  iceServers: [
-    {
-      urls: ["stun:stun.l.google.com:19302", "stun:stun.relay.metered.ca:80"]
-    }
-  ].concat(
-    turnAccounts.map((account) => __spreadValues({
-      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))
-  )
-};
-
-// src/lib/connection.ts
-function closeConnection(conn) {
-  conn.removeAllListeners();
-  conn.close();
-}
-
-// src/lib/storage.ts
-var removeStorage = (key, local = false) => (local ? localStorage : sessionStorage).removeItem(key);
-var setStorage = (key, value, local = false) => (local ? localStorage : sessionStorage).setItem(key, JSON.stringify(value));
-var getStorage = (key, fallbackValue, local = false) => {
-  let value = (local ? localStorage : sessionStorage).getItem(key);
-  try {
-    if (!value) throw new Error("Value doesn't exist");
-    value = JSON.parse(value);
-  } catch (e) {
-    if (fallbackValue !== void 0) {
-      value = fallbackValue;
-      setStorage(key, value, local);
-    } else {
-      value = null;
-      removeStorage(key, local);
-    }
-  }
-  return value;
-};
-var clearChat = () => {
-  removeStorage("rpc-remote-peer");
-  removeStorage("rpc-messages");
-};
-
-// src/lib/utils.ts
-var addPrefix = (str) => `rpc-${str}`;
-
-// src/hooks.ts
-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(null);
-  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: messages2, 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) => messages2.length > old.length ? messages2 : 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 ? void 0 : onMessageReceived(message);
-  }
-  function sendMessage(message) {
-    addMessage(message);
-    Object.values(connRef.current).forEach((conn) => conn.send({ type: "message", message }));
-    onMessageSent == null ? void 0 : onMessageSent(message);
-  }
-  useEffect(() => {
-    if (!text && !audio) {
-      setPeer(void 0);
-      return;
-    }
-    (function() {
-      return __async(this, null, function* () {
-        const {
-          Peer,
-          util: {
-            supports: { audioVideo, data }
-          }
-        } = yield import('peerjs');
-        if (!data || !audioVideo) return onError();
-        const peer2 = new Peer(peerId, __spreadValues({ config: defaultConfig }, peerOptions));
-        setPeer(peer2);
-      });
-    })();
-  }, [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,
-                // Disable automatic gain control
-                noiseSuppression: true,
-                // Enable noise suppression
-                echoCancellation: true
-                // Enable echo cancellation
-              }
-            },
-            (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 (e) {
-          handleError();
-        }
-      }
-    });
-    peer.on("connection", handleConnection);
-    return () => {
-      var _a;
-      (_a = localStream.current) == null ? 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 };
-}
-function useMessages() {
-  const [messages, setMessages] = useStorage("rpc-messages", []);
-  const addMessage = (message) => setMessages((prev) => prev.concat(message));
-  return [messages, setMessages, addMessage];
-}
-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];
-}
-function useAudio(allowed) {
-  const [audio, setAudio] = useStorage("rpc-audio", false, true);
-  const enabled = audio && allowed;
-  return [enabled, setAudio];
-}
-
-// src/styles.css
-function injectStyle(css) {
-  if (typeof document === "undefined") return;
-  const head = document.head || document.getElementsByTagName("head")[0];
-  const style = document.createElement("style");
-  style.type = "text/css";
-  if (head.firstChild) {
-    head.insertBefore(style, head.firstChild);
-  } else {
-    head.appendChild(style);
-  }
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-injectStyle('.rpc-font {\n  font-family:\n    "Trebuchet MS",\n    "Lucida Sans Unicode",\n    "Lucida Grande",\n    "Lucida Sans",\n    Arial,\n    sans-serif;\n}\n.rpc-main {\n  display: flex;\n  align-items: center;\n  column-gap: 0.5rem;\n}\n.rpc-dialog-container {\n  position: relative;\n}\n.rpc-notification {\n  position: relative;\n}\n.rpc-notification .rpc-badge {\n  background-color: red;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 6px;\n  aspect-ratio: 1;\n  border-radius: 100%;\n}\n.rpc-dialog {\n  position: absolute;\n  background-color: black;\n  color: white;\n  padding: 0.4rem 0 0.25rem 0;\n  border-radius: 0.4rem;\n  font-size: small;\n}\n.rpc-position-left {\n  left: 0.6rem;\n  translate: -100%;\n}\n.rpc-position-center {\n  left: 0.5rem;\n  translate: -50%;\n}\n.rpc-position-right {\n  left: 0.3rem;\n}\n.rpc-hr {\n  margin: 0.25rem 0;\n  border-color: rgba(255, 255, 255, 0.7);\n}\n.rpc-message-container {\n  height: 7rem;\n  overflow-y: scroll;\n  padding-inline: 0.5rem;\n  margin-bottom: 0.25rem;\n}\n.rpc-message-container::-webkit-scrollbar {\n  width: 2.5px;\n}\n.rpc-message-container::-webkit-scrollbar-track {\n  background: gray;\n}\n.rpc-message-container::-webkit-scrollbar-thumb {\n  background-color: white;\n}\n.rpc-heading {\n  text-align: center;\n  font-size: medium;\n  font-weight: bold;\n  padding-inline: 0.5rem;\n}\n.rpc-input-container {\n  display: flex;\n  width: 15rem;\n  max-width: 90vw;\n  column-gap: 0.25rem;\n  padding: 0.25rem 0.5rem;\n}\n.rpc-input {\n  color: white;\n  width: 100%;\n  background-color: black;\n  border: none;\n  outline: 1px solid rgba(255, 255, 255, 0.8);\n  border-radius: 0.25rem;\n  padding: 0.3rem 0.25rem;\n}\n.rpc-input::placeholder {\n  color: rgba(255, 255, 255, 0.7);\n}\n.rpc-input:focus {\n  outline: 2px solid white;\n}\n.rpc-button {\n  all: unset;\n  display: flex;\n}\n.rpc-icon-container {\n  display: flex;\n  align-items: center;\n}\n.rpc-invert {\n  filter: invert(100%);\n}\n');
-
-// src/index.tsx
-function Chat(_a) {
-  var _b = _a, { text = true, audio = true, onMessageReceived, dialogOptions, props = {}, children } = _b, hookProps = __objRest(_b, ["text", "audio", "onMessageReceived", "dialogOptions", "props", "children"]);
-  const _a2 = useChat(__spreadValues({
-    text,
-    audio,
-    onMessageReceived: modifiedOnMessageReceived
-  }, hookProps)), { peerId, audioStreamRef } = _a2, childrenOptions = __objRest(_a2, ["peerId", "audioStreamRef"]);
-  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) {
-    var _a3;
-    if (!((_a3 = dialogRef.current) == null ? void 0 : _a3.open)) setNotification(true);
-    onMessageReceived == null ? void 0 : onMessageReceived(message);
-  }
-  useEffect(() => {
-    var _a3, _b2;
-    if (dialog) (_a3 = dialogRef.current) == null ? void 0 : _a3.show();
-    else (_b2 = dialogRef.current) == null ? void 0 : _b2.close();
-  }, [dialog]);
-  useEffect(() => {
-    const container = containerRef.current;
-    if (container) container.scrollTop = container.scrollHeight;
-  }, [dialog, remotePeers, messages]);
-  return /* @__PURE__ */ React.createElement("div", __spreadValues({ className: "rpc-main rpc-font" }, props), typeof children === "function" ? children(childrenOptions) : /* @__PURE__ */ React.createElement(React.Fragment, null, text && /* @__PURE__ */ React.createElement("div", { className: "rpc-dialog-container" }, dialog ? /* @__PURE__ */ React.createElement(BiSolidMessageX, { title: "Close chat", onClick: () => setDialog(false) }) : /* @__PURE__ */ React.createElement("div", { className: "rpc-notification" }, /* @__PURE__ */ React.createElement(
-    BiSolidMessageDetail,
-    {
-      title: "Open chat",
-      onClick: () => {
-        setNotification(false);
-        setDialog(true);
-      }
-    }
-  ), notification && /* @__PURE__ */ React.createElement("span", { className: "rpc-badge" })), /* @__PURE__ */ React.createElement("dialog", { ref: dialogRef, className: `${dialog ? "rpc-dialog" : ""} rpc-position-${(dialogOptions == null ? void 0 : dialogOptions.position) || "center"}`, style: dialogOptions == null ? void 0 : dialogOptions.style }, /* @__PURE__ */ React.createElement("div", { className: "rpc-heading" }, "Chat"), /* @__PURE__ */ React.createElement("hr", { className: "rpc-hr" }), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { ref: containerRef, className: "rpc-message-container" }, messages.map(({ id, text: text2 }, i) => /* @__PURE__ */ React.createElement("div", { key: i }, /* @__PURE__ */ React.createElement("strong", null, id === peerId ? "You" : remotePeers[id], ": "), /* @__PURE__ */ React.createElement("span", null, text2)))), /* @__PURE__ */ React.createElement("hr", { className: "rpc-hr" }), /* @__PURE__ */ React.createElement(
-    "form",
-    {
-      className: "rpc-input-container",
-      onSubmit: (e) => {
-        var _a3;
-        e.preventDefault();
-        const text2 = (_a3 = inputRef.current) == null ? void 0 : _a3.value;
-        if (text2) {
-          inputRef.current.value = "";
-          sendMessage({ id: peerId, text: text2 });
-        }
-      }
-    },
-    /* @__PURE__ */ React.createElement("input", { ref: inputRef, className: "rpc-input rpc-font", placeholder: "Enter a message" }),
-    /* @__PURE__ */ React.createElement("button", { type: "submit", className: "rpc-button" }, /* @__PURE__ */ React.createElement(GrSend, { title: "Send message" }))
-  )))), audio && /* @__PURE__ */ React.createElement("button", { className: "rpc-button", onClick: () => setAudio(!audioEnabled) }, audioEnabled ? /* @__PURE__ */ React.createElement(BsFillMicFill, { title: "Turn mic off" }) : /* @__PURE__ */ React.createElement(BsFillMicMuteFill, { title: "Turn mic on" }))), audio && audioEnabled && /* @__PURE__ */ React.createElement("audio", { ref: audioStreamRef, autoPlay: true, style: { display: "none" } }));
-}
-
-export { clearChat, Chat as default, useChat };
+export { Chat as default } from './chunks/chunk-YDZ27MG7.js';
+export { useChat } from './chunks/chunk-GT3RG6VA.js';
+import './chunks/chunk-JJPIWKLG.js';
+export { clearChat } from './chunks/chunk-ZYFPSCFE.js';
+import './chunks/chunk-LNEKYYG7.js';

package/dist/lib/storage.d.ts

@@ -0,0 +1,6 @@
+declare const removeStorage: (key: string, local?: boolean) => void;
+declare const clearChat: () => void;
+declare const setStorage: (key: string, value: unknown, local?: boolean) => void;
+declare function getStorage<T>(key: string, fallbackValue?: T, local?: boolean): T | undefined;
+
+export { clearChat, getStorage, removeStorage, setStorage };

package/dist/lib/storage.js

@@ -0,0 +1,2 @@
+export { clearChat, getStorage, removeStorage, setStorage } from '../chunks/chunk-ZYFPSCFE.js';
+import '../chunks/chunk-LNEKYYG7.js';

package/dist/types.d.ts

@@ -1,30 +1,43 @@
-import { PeerOptions } from 'peerjs';
+import { PeerOptions, DataConnection, MediaConnection } from 'peerjs';
 export { PeerOptions } from 'peerjs';
-import { CSSProperties, DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react';
+import { CSSProperties, DetailedHTMLProps, HTMLAttributes, ReactNode, RefObject, SetStateAction } from 'react';
 
+type Connection = DataConnection | MediaConnection;
+type ErrorHandler = () => void;
 type Message = {
     id: string;
     text: string;
 };
-type MessageEvent = (message: Message) => void;
+type MessageEventHandler = (message: Message) => void;
 
 type RemotePeerId = string | string[];
-type useChatProps = {
-    name?: string;
+type UseChatProps = {
     peerId: string;
+    name?: string;
     remotePeerId?: RemotePeerId;
     text?: boolean;
     recoverChat?: boolean;
     audio?: boolean;
     peerOptions?: PeerOptions;
-    onError?: Function;
-    onMicError?: Function;
-    onMessageSent?: MessageEvent;
-    onMessageReceived?: MessageEvent;
+    onError?: ErrorHandler;
+    onMicError?: ErrorHandler;
+    onMessageSent?: MessageEventHandler;
+    onMessageReceived?: MessageEventHandler;
 };
-type IconProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
-type RemotePeers = {
-    [id: string]: string;
+type UseChatReturn = {
+    peerId: string;
+    audioStreamRef: RefObject<HTMLMediaElement | null>;
+    remotePeers: RemotePeers;
+    messages: Message[];
+    sendMessage: (message: Message) => void;
+    audio: boolean;
+    setAudio: (value: SetStateAction<boolean>) => void;
+};
+type IconProps = DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+type ChatProps = UseChatProps & {
+    dialogOptions?: DialogOptions;
+    props?: DivProps;
+    children?: Children;
 };
 type Children = (childrenOptions: ChildrenOptions) => ReactNode;
 type ChildrenOptions = {
@@ -34,16 +47,14 @@ type ChildrenOptions = {
     audio?: boolean;
     setAudio?: (audio: boolean) => void;
 };
-type ChatProps = useChatProps & {
-    dialogOptions?: DialogOptions;
-    props?: DivProps;
-    children?: Children;
-};
 type DialogOptions = {
     position?: DialogPosition;
     style?: CSSProperties;
 };
 type DialogPosition = "left" | "center" | "right";
 type DivProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+type RemotePeers = {
+    [id: string]: string;
+};
 
-export type { ChatProps, Children, ChildrenOptions, DialogOptions, DialogPosition, DivProps, IconProps, Message, MessageEvent, RemotePeerId, RemotePeers, useChatProps };
+export type { ChatProps, Children, ChildrenOptions, Connection, DialogOptions, DialogPosition, DivProps, ErrorHandler, IconProps, Message, MessageEventHandler, RemotePeerId, RemotePeers, UseChatProps, UseChatReturn };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-peer-chat",
-  "version": "0.8.4",
+  "version": "0.8.6",
   "description": "An easy to use react component for impleting peer-to-peer chatting.",
   "license": "MIT",
   "author": "Sahil Aggarwal <aggarwalsahil2004@gmail.com>",
@@ -14,54 +14,57 @@
     "url": "https://github.com/SahilAggarwal2004/react-peer-chat/issues"
   },
   "type": "module",
-  "files": [
-    "dist"
-  ],
   "exports": {
     ".": "./dist/index.js",
     "./icons": "./dist/icons.js",
     "./types": "./dist/types.js"
   },
   "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "sideEffects": [
     "**/*.css"
   ],
+  "types": "dist/index.d.ts",
   "dependencies": {
     "peerjs": "^1.5.5"
   },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
   "devDependencies": {
     "@release-it/conventional-changelog": "^10.0.4",
     "@types/react": "^19.2.7",
+    "prettier-package-json": "^2.8.0",
     "release-it": "^19.2.2",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3"
   },
-  "peerDependencies": {
-    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
-  },
   "keywords": [
-    "react",
+    "audio-chat",
     "chat",
     "component",
-    "peer",
-    "peerjs",
     "p2p",
+    "p2p-chat",
+    "peer",
     "peer-to-peer",
-    "webrtc",
+    "peerjs",
+    "react",
     "react-peer-chat",
-    "typescript",
-    "p2p-chat",
     "text-chat",
+    "typescript",
     "voice-chat",
-    "audio-chat"
+    "webrtc"
   ],
   "scripts": {
     "build": "pnpm i && pnpm run compile",
     "compile": "tsup",
     "dev": "tsup --watch",
     "dry-release": "release-it --ci --dry-run",
+    "prettier": "prettier-package-json --write package.json",
+    "pub": "pnpm login && pnpm publish",
     "release": "release-it --ci"
   }
 }