react-peer-chat 0.11.10 → 0.12.0

package/README.md

@@ -47,6 +47,7 @@ The default export of `react-peer-chat` is the `<Chat>` component, which offers
 ```jsx
 import React from "react";
 import Chat, { clearChat } from "react-peer-chat";
+import "react-peer-chat/style.css";
 
 export default function App() {
   return (
@@ -64,6 +65,7 @@ export default function App() {
 ```jsx
 import React from "react";
 import Chat, { clearChat } from "react-peer-chat";
+import "react-peer-chat/style.css";
 
 export default function App() {
   return (
@@ -89,6 +91,7 @@ Use the props provided by the `<Chat>` component for customization.
 ```jsx
 import React from "react";
 import Chat from "react-peer-chat";
+import "react-peer-chat/style.css";
 
 export default function App() {
   return (
@@ -141,6 +144,7 @@ You can also provide custom ICE servers to avoid connectivity issues if the free
 ```jsx
 import React from "react";
 import Chat from "react-peer-chat";
+import "react-peer-chat/style.css";
 
 export default function App() {
   return (
@@ -176,6 +180,7 @@ The `useChat` hook is ideal when you want to completely redesign the Chat UI.
 import React, { useEffect, useRef, useState } from "react";
 import { clearChat, useChat } from "react-peer-chat";
 import { BiSolidMessageDetail, BiSolidMessageX, BsFillMicFill, BsFillMicMuteFill, GrSend } from "react-peer-chat/icons";
+import "react-peer-chat/style.css";
 
 function Chat({ text = true, audio = true, onMessageReceived, dialogOptions, props = {}, children, ...hookProps }) {
   const {

package/dist/{icons.d.ts → icons.d.mts}

@@ -1,11 +1,11 @@
-import React from 'react';
-import { IconProps } from './types.js';
-import 'peerjs';
+import { l as IconProps } from "./types-CwAnkJpd.mjs";
+import React from "react";
 
+//#region src/icons.d.ts
 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 };
+//#endregion
+export { BiSolidMessageDetail, BiSolidMessageX, BsFillMicFill, BsFillMicMuteFill, GrSend };

package/dist/icons.mjs

@@ -0,0 +1,62 @@
+import React from "react";
+//#region src/icons.tsx
+function BiSolidMessageDetail(props) {
+	return /* @__PURE__ */ React.createElement("span", {
+		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" })));
+}
+function BiSolidMessageX(props) {
+	return /* @__PURE__ */ React.createElement("span", {
+		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-3.293 11.293-1.414 1.414L12 11.414l-3.293 3.293-1.414-1.414L10.586 10 7.293 6.707l1.414-1.414L12 8.586l3.293-3.293 1.414 1.414L13.414 10l3.293 3.293z" })));
+}
+function GrSend(props) {
+	return /* @__PURE__ */ React.createElement("span", {
+		className: "rpc-icon-container",
+		...props
+	}, /* @__PURE__ */ React.createElement("svg", {
+		viewBox: "0 0 24 24",
+		width: "1.25rem",
+		height: "1.25rem",
+		className: "rpc-invert"
+	}, /* @__PURE__ */ React.createElement("path", {
+		fill: "none",
+		stroke: "#000",
+		strokeWidth: 2,
+		d: "M22,3 L2,11 L20.5,19 L22,3 Z M10,20.5 L13,16 M15.5,9.5 L9,14 L9.85884537,20.0119176 C9.93680292,20.5576204 10.0751625,20.5490248 10.1651297,20.009222 L11,15 L15.5,9.5 Z"
+	})));
+}
+function BsFillMicFill(props) {
+	return /* @__PURE__ */ React.createElement("span", {
+		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: "M5 3a3 3 0 0 1 6 0v5a3 3 0 0 1-6 0V3z" }), /* @__PURE__ */ React.createElement("path", { d: "M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.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 .5-.5z" })));
+}
+function BsFillMicMuteFill(props) {
+	return /* @__PURE__ */ React.createElement("span", {
+		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" })));
+}
+//#endregion
+export { BiSolidMessageDetail, BiSolidMessageX, BsFillMicFill, BsFillMicMuteFill, GrSend };

package/dist/index.d.mts

@@ -0,0 +1,34 @@
+import { b as UseChatReturn, t as ChatProps, y as UseChatProps } from "./types-CwAnkJpd.mjs";
+import React, { SetStateAction } from "react";
+
+//#region src/components.d.ts
+declare function Chat({
+  text,
+  audio,
+  onMessageReceived,
+  dialogOptions,
+  props,
+  children,
+  ...hookProps
+}: ChatProps): React.JSX.Element;
+//#endregion
+//#region src/hooks.d.ts
+declare function useChat({
+  peerId,
+  name,
+  remotePeerId,
+  peerOptions,
+  text,
+  recoverChat,
+  audio: allowed,
+  onError,
+  onPeerError,
+  onNetworkError,
+  onMessageSent,
+  onMessageReceived
+}: UseChatProps): UseChatReturn;
+//#endregion
+//#region src/lib/storage.d.ts
+declare function clearChat(): void;
+//#endregion
+export { clearChat, Chat as default, useChat };

package/dist/index.mjs

@@ -0,0 +1,440 @@
+import { BiSolidMessageDetail, BiSolidMessageX, BsFillMicFill, BsFillMicMuteFill, GrSend } from "./icons.mjs";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+const defaults = {
+	config: { iceServers: [{ urls: ["stun:stun.l.google.com:19302", "stun:stun.relay.metered.ca:80"] }].concat([
+		{
+			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"
+		}
+	].map((account) => ({
+		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: []
+};
+const iosRegex = /iPhone|iPad|iPod/i;
+const mobileRegex = /Android|webOS|BlackBerry|IEMobile|Opera Mini/i;
+//#endregion
+//#region src/lib/connection.ts
+function closeConnection(conn) {
+	conn.removeAllListeners();
+	conn.close();
+}
+//#endregion
+//#region src/lib/react.ts
+function isSetStateFunction(v) {
+	return typeof v === "function";
+}
+//#endregion
+//#region src/lib/storage.ts
+const listeners = /* @__PURE__ */ new Map();
+function clearChat() {
+	removeStorage("rpc-remote-peer", false);
+	removeStorage("rpc-messages", false);
+}
+const getStorageInstance = (local) => local ? localStorage : sessionStorage;
+const getNamespacedKey = (key, local) => `${local ? "local" : "session"}:${key}`;
+function getStorage(key, local, fallbackValue) {
+	if (typeof window === "undefined") return fallbackValue;
+	const value = getStorageInstance(local).getItem(key);
+	if (value) try {
+		return JSON.parse(value);
+	} catch {
+		removeStorage(key, local);
+	}
+	if (fallbackValue !== void 0) setStorage(key, fallbackValue, local);
+	return fallbackValue;
+}
+function publish(key, local, value) {
+	const callbacks = listeners.get(getNamespacedKey(key, local));
+	if (callbacks) callbacks.forEach((callback) => callback(value));
+}
+function removeStorage(key, local) {
+	getStorageInstance(local).removeItem(key);
+	publish(key, local);
+}
+function setStorage(key, value, local) {
+	const next = isSetStateFunction(value) ? value(getStorage(key, local)) : value;
+	getStorageInstance(local).setItem(key, JSON.stringify(next));
+	publish(key, local, next);
+}
+function subscribeToStorage(key, local, callback) {
+	key = getNamespacedKey(key, local);
+	if (!listeners.has(key)) listeners.set(key, /* @__PURE__ */ new Set());
+	const set = listeners.get(key);
+	set.add(callback);
+	return () => {
+		set.delete(callback);
+		if (set.size === 0) listeners.delete(key);
+	};
+}
+//#endregion
+//#region src/lib/utils.ts
+const addPrefix = (str) => `rpc-${str}`;
+function isMobile(iOS = true) {
+	let result = navigator.userAgentData?.mobile;
+	result ??= mobileRegex.test(navigator.userAgent) || iOS && iosRegex.test(navigator.userAgent);
+	return result;
+}
+//#endregion
+//#region src/hooks.ts
+const { 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 = console.error, onPeerError = console.error, onNetworkError, onMessageSent, onMessageReceived }) {
+	const [peerEpoch, setPeerEpoch] = useState(0);
+	const [peerGeneration, setPeerGeneration] = useState(0);
+	const [audio, setAudio] = useAudio(allowed);
+	const peerRef = useRef(null);
+	const scheduleReconnectRef = useRef(null);
+	const connRef = useRef({});
+	const callsRef = useRef({});
+	const localStreamRef = useRef(null);
+	const audioContextRef = useRef(null);
+	const mixerRef = useRef(null);
+	const sourceNodesRef = 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 resetConnections(type = "all") {
+		switch (type) {
+			case "all":
+				resetConnections("data");
+				resetConnections("call");
+				break;
+			case "data":
+				Object.values(connRef.current).forEach(closeConnection);
+				connRef.current = {};
+				break;
+			case "call":
+				Object.values(callsRef.current).forEach(closeConnection);
+				Object.keys(sourceNodesRef.current).forEach(removePeerAudio);
+				callsRef.current = {};
+				break;
+		}
+	}
+	function handleConnection(conn) {
+		const peerId = conn.peer;
+		conn.on("open", () => {
+			connRef.current[peerId]?.close();
+			connRef.current[peerId] = conn;
+			conn.on("data", ({ type, message, messages, remotePeerName }) => {
+				switch (type) {
+					case "init":
+						setRemotePeers((prev) => ({
+							...prev,
+							[peerId]: remotePeerName
+						}));
+						if (recoverChat) setMessages((old) => messages.length > old.length ? messages : old);
+						break;
+					case "message":
+						receiveMessage(message);
+						break;
+				}
+			});
+			conn.send({
+				type: "init",
+				remotePeerName: name,
+				messages
+			});
+		});
+		conn.on("close", () => {
+			conn.removeAllListeners();
+			if (connRef.current[peerId] === conn) delete connRef.current[peerId];
+		});
+	}
+	function handleCall(call) {
+		const peerId = call.peer;
+		if (!call.localStream) {
+			if (!localStreamRef.current) return call.close();
+			call.answer(localStreamRef.current);
+		}
+		call.on("stream", () => {
+			callsRef.current[peerId]?.close();
+			callsRef.current[peerId] = call;
+			if (!audioContextRef.current) audioContextRef.current = new AudioContext();
+			if (audioContextRef.current.state === "suspended") audioContextRef.current.resume();
+			if (!mixerRef.current) {
+				mixerRef.current = audioContextRef.current.createGain();
+				mixerRef.current.connect(audioContextRef.current.destination);
+			}
+			removePeerAudio(peerId);
+			const audio = new Audio();
+			audio.srcObject = call.remoteStream;
+			audio.autoplay = true;
+			audio.muted = false;
+			const source = audioContextRef.current.createMediaElementSource(audio);
+			source.connect(mixerRef.current);
+			sourceNodesRef.current[peerId] = source;
+		});
+		call.on("close", () => {
+			call.removeAllListeners();
+			if (callsRef.current[peerId] === call) {
+				removePeerAudio(peerId);
+				delete callsRef.current[peerId];
+			}
+		});
+	}
+	function receiveMessage(message) {
+		addMessage(message);
+		onMessageReceived?.(message);
+	}
+	function removePeerAudio(peerId) {
+		const source = sourceNodesRef.current[peerId];
+		if (!source) return;
+		source.disconnect();
+		delete sourceNodesRef.current[peerId];
+	}
+	function sendMessage(message) {
+		const event = {
+			type: "message",
+			message: {
+				...message,
+				name
+			}
+		};
+		addMessage(event.message);
+		Object.values(connRef.current).forEach((conn) => conn.send(event));
+		onMessageSent?.(event.message);
+	}
+	useEffect(() => {
+		const onOnline = () => peerRef.current?.disconnected && scheduleReconnectRef.current?.();
+		window.addEventListener("online", onOnline);
+		return () => window.removeEventListener("online", onOnline);
+	}, []);
+	useEffect(() => {
+		if (!text && !audio) return;
+		let destroyed = false;
+		let reconnecting = false;
+		let reconnectTimer;
+		scheduleReconnectRef.current = () => {
+			if (destroyed || reconnecting) return;
+			reconnecting = true;
+			reconnectTimer = setTimeout(() => {
+				const peer = peerRef.current;
+				if (peer) if (isMobile()) setPeerGeneration((prev) => prev + 1);
+				else peer.reconnect();
+				reconnecting = false;
+			}, 1e3);
+		};
+		const scheduleReconnect = scheduleReconnectRef.current;
+		import("peerjs").then(({ Peer, util: { supports: { audioVideo, data } } }) => {
+			if (destroyed) return;
+			if (!data || !audioVideo) return onError(/* @__PURE__ */ new Error("Browser not supported! Try some other browser."));
+			peerRef.current = new Peer(completePeerId, {
+				config: defaultConfig,
+				...peerOptions
+			});
+			setPeerEpoch((prev) => prev + 1);
+			const peer = peerRef.current;
+			peer.on("connection", handleConnection);
+			peer.on("call", handleCall);
+			peer.on("disconnected", () => {
+				resetConnections();
+				scheduleReconnect();
+			});
+			peer.on("error", (error) => {
+				if (error.type === "network" || error.type === "server-error") {
+					resetConnections();
+					scheduleReconnect();
+					onNetworkError?.(error);
+				}
+				onPeerError(error);
+			});
+		});
+		return () => {
+			destroyed = true;
+			reconnecting = false;
+			clearTimeout(reconnectTimer);
+			peerRef.current?.removeAllListeners();
+			peerRef.current?.destroy();
+			peerRef.current = null;
+		};
+	}, [completePeerId, peerGeneration]);
+	useEffect(() => {
+		if (!text) return;
+		const peer = peerRef.current;
+		if (!peer) return;
+		const connectData = () => completeRemotePeerIds.forEach((id) => handleConnection(peer.connect(id)));
+		if (peer.open) connectData();
+		peer.on("open", connectData);
+		return () => {
+			peer.off("open", connectData);
+			resetConnections("data");
+		};
+	}, [text, peerEpoch]);
+	useEffect(() => {
+		if (!audio) return;
+		const peer = peerRef.current;
+		if (!peer) return;
+		const setupAudio = async () => {
+			try {
+				if (!localStreamRef.current) localStreamRef.current = await navigator.mediaDevices.getUserMedia({
+					video: false,
+					audio: {
+						autoGainControl: true,
+						noiseSuppression: true,
+						echoCancellation: true
+					}
+				});
+				completeRemotePeerIds.forEach((id) => localStreamRef.current && handleCall(peer.call(id, localStreamRef.current)));
+			} catch {
+				setAudio(false);
+				onError(/* @__PURE__ */ new Error("Microphone not accessible"));
+			}
+		};
+		if (peer.open) setupAudio();
+		peer.on("open", setupAudio);
+		return () => {
+			peer.off("open", setupAudio);
+			localStreamRef.current?.getTracks().forEach((track) => track.stop());
+			resetConnections("call");
+			audioContextRef.current?.close();
+			localStreamRef.current = null;
+			audioContextRef.current = null;
+			mixerRef.current = null;
+		};
+	}, [audio, peerEpoch]);
+	return {
+		peerId: completePeerId,
+		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(() => typeof window === "undefined" ? initialValue : getStorage(key, local, initialValue));
+	const setValue = (value) => {
+		setStoredValue((prev) => {
+			const next = isSetStateFunction(value) ? value(prev) : value;
+			setStorage(key, next, local);
+			return next;
+		});
+	};
+	useEffect(() => {
+		return subscribeToStorage(key, local, (value) => setStoredValue(value ?? initialValue));
+	}, [key, local]);
+	return [storedValue, setValue];
+}
+function useAudio(allowed) {
+	const [audio, setAudio] = useStorage("rpc-audio", false, true);
+	return [audio && allowed, setAudio];
+}
+//#endregion
+//#region src/components.tsx
+function Chat({ text = true, audio = true, onMessageReceived, dialogOptions, props = {}, children, ...hookProps }) {
+	const { peerId, ...childrenOptions } = useChat({
+		text,
+		audio,
+		onMessageReceived: receiveMessageHandler,
+		...hookProps
+	});
+	const { remotePeers, messages, sendMessage, audio: audioEnabled, setAudio } = childrenOptions;
+	const containerRef = useRef(null);
+	const [dialog, setDialog] = useState(false);
+	const dialogRef = useRef(null);
+	const inputRef = useRef(null);
+	const [notification, setNotification] = useState(false);
+	function receiveMessageHandler(message) {
+		if (!dialogRef.current?.open) setNotification(true);
+		onMessageReceived?.(message);
+	}
+	useEffect(() => {
+		if (dialog) dialogRef.current?.show();
+		else dialogRef.current?.close();
+	}, [dialog]);
+	useEffect(() => {
+		const container = containerRef.current;
+		if (container) container.scrollTop = container.scrollHeight;
+	}, [
+		dialog,
+		remotePeers,
+		messages
+	]);
+	return /* @__PURE__ */ React.createElement("div", {
+		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?.position || "center"}`,
+		style: 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, name, text }, i) => /* @__PURE__ */ React.createElement("div", { key: i }, /* @__PURE__ */ React.createElement("strong", null, id === peerId ? "You" : name, ": "), /* @__PURE__ */ React.createElement("span", null, text)))), /* @__PURE__ */ React.createElement("hr", { className: "rpc-hr" }), /* @__PURE__ */ React.createElement("form", {
+		className: "rpc-input-container",
+		onSubmit: (e) => {
+			e.preventDefault();
+			const text = inputRef.current?.value;
+			if (text) {
+				inputRef.current.value = "";
+				sendMessage({
+					id: peerId,
+					text
+				});
+			}
+		}
+	}, /* @__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" }))));
+}
+//#endregion
+export { clearChat, Chat as default, useChat };