react-peer-chat 0.8.5 → 0.8.6

package/README.md

@@ -317,12 +317,13 @@ that are listed in [useChat Hook API Reference](#usechat-hook-1) along with the
 | `props`         | [`DivProps`](#divprops)           | No       | -                      | Props to customize the `<Chat>` component.    |
 | `children`      | [`Children`](#children)           | No       | -                      | See [usage with FaC](#full-customization)     |
 
-### Types
+## Types
 
-#### Children
+### Children
 
 ```typescript
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
+
 type RemotePeers = { [id: string]: string };
 type Message = {
   id: string;
@@ -338,10 +339,11 @@ type ChildrenOptions = {
 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;
@@ -349,20 +351,21 @@ type DialogOptions = {
 };
 ```
 
-#### DivProps
+### DivProps
 
 ```typescript
-import { DetailedHTMLProps, HTMLAttributes } from "react";
+import type { DetailedHTMLProps, HTMLAttributes } from "react";
+
 type DivProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 ```
 
-#### ErrorHandler
+### ErrorHandler
 
 ```typescript
 type ErrorHandler = () => void;
 ```
 
-#### MessageEventHandler
+### MessageEventHandler
 
 ```typescript
 type Message = {
@@ -372,10 +375,10 @@ type Message = {
 type MessageEventHandler = (message: Message) => void;
 ```
 
-#### PeerOptions
+### PeerOptions
 
 ```typescript
-import { PeerOptions } from "peerjs";
+import type { PeerOptions } from "peerjs";
 ```
 
 ## 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-NXKKI6WY.js → chunk-JJPIWKLG.js}

@@ -1,36 +1,6 @@
+import { __spreadValues } from './chunk-LNEKYYG7.js';
 import React from 'react';
 
-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;
-};
 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" })));
 }
@@ -55,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, __objRest, __spreadProps, __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.js

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

package/dist/index.d.ts

@@ -1,11 +1,6 @@
-import React from 'react';
-import { UseChatProps, UseChatReturn, 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({ peerId, name, remotePeerId, peerOptions, text, recoverChat, audio: allowed, onError, onMicError, onMessageSent, onMessageReceived, }: UseChatProps): UseChatReturn;
-
-declare const clearChat: () => void;
-
-declare function Chat({ text, audio, onMessageReceived, dialogOptions, props, children, ...hookProps }: ChatProps): React.JSX.Element;
-
-export { clearChat, Chat as default, useChat };

package/dist/index.js

@@ -1,298 +1,5 @@
-import { __spreadValues, __objRest, BiSolidMessageX, BiSolidMessageDetail, GrSend, BsFillMicFill, BsFillMicMuteFill, __spreadProps } from './chunks/chunk-NXKKI6WY.js';
-import React, { 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/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;
-}
-
-// 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];
-}
-
-// 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,6 +1,6 @@
 import { PeerOptions, DataConnection, MediaConnection } from 'peerjs';
 export { PeerOptions } from 'peerjs';
-import { DetailedHTMLProps, HTMLAttributes, RefObject, SetStateAction, CSSProperties, ReactNode } from 'react';
+import { CSSProperties, DetailedHTMLProps, HTMLAttributes, ReactNode, RefObject, SetStateAction } from 'react';
 
 type Connection = DataConnection | MediaConnection;
 type ErrorHandler = () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-peer-chat",
-  "version": "0.8.5",
+  "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"
   }
 }