softchatjs-react-native
Version:
React native UI SDK for softchatjs-core. Create a free account at: https://www.softchatjs.com
1,037 lines (1,017 loc) • 575 kB
JavaScript
var __getOwnPropNames = Object.getOwnPropertyNames;
var __commonJS = (cb, mod) => function __require() {
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
};
// src/assets/img_placeholder.png
var require_img_placeholder = __commonJS({
"src/assets/img_placeholder.png"(exports, module) {
module.exports = "./img_placeholder-O5LURPPU.png";
}
});
// src/components/Conversations/index.tsx
import React11, { useMemo as useMemo3 } from "react";
import {
ActivityIndicator,
FlatList as FlatList3,
Text as Text8,
TouchableOpacity as TouchableOpacity5,
View as View8
} from "react-native";
import {
forwardRef,
useCallback as useCallback2,
useEffect as useEffect3,
useImperativeHandle,
useRef as useRef3,
useState as useState3
} from "react";
// src/components/Conversations/Conversation.tsx
import { TouchableOpacity as TouchableOpacity2, View as View4, StyleSheet as StyleSheet3, Text as Text4 } from "react-native";
import React6, { useCallback, useMemo as useMemo2 } from "react";
// src/utils/index.ts
import moment from "moment";
import { MessageStates } from "softchatjs-core";
var generateId = () => {
let uuid = "";
const characters = "abcdef0123456789";
for (let i = 0; i < 32; i++) {
const randomNumber = Math.floor(Math.random() * characters.length);
const character = characters.charAt(randomNumber);
if (i === 8 || i === 12 || i === 16 || i === 20) {
uuid += "-";
}
uuid += character;
}
return uuid;
};
var getUserInfoWithId = (userId, participantList) => {
let presentUser = participantList.find((participant) => participant.participantId === userId);
let otherParticipants = participantList.filter((participant) => participant.participantId !== userId);
return { presentUser: presentUser?.participantDetails, receivingUser: otherParticipants[0]?.participantDetails };
};
var truncate = (str, len) => {
return str.length > len ? str.substring(0, len) + "..." : str;
};
var getConversationTitle = (userId, converstaion) => {
if (converstaion.conversationType !== "group-chat") {
const userInfos = getUserInfoWithId(userId, converstaion.participantList);
const firstname = userInfos.receivingUser?.firstname;
const username = userInfos.receivingUser?.username;
return firstname ? firstname : username;
}
return converstaion.groupMeta?.groupName || "no-groupname";
};
function formatMessageTime(time) {
return moment(new Date(time)).format("hh:mm a");
}
function formatConversationTime(time) {
const now = moment();
const then = moment(time);
const duration = moment.duration(now.diff(then));
const years = Math.floor(duration.asYears());
if (years > 0) return years + "yr";
const months = Math.floor(duration.asMonths());
if (months > 0) return months + "mo";
const weeks = Math.floor(duration.asWeeks());
if (weeks > 0) return weeks + "w";
const days = Math.floor(duration.asDays());
if (days > 0) return days + "d";
const hours = Math.floor(duration.asHours());
if (hours > 0) return hours + "h";
const minutes = Math.floor(duration.asMinutes());
if (minutes > 0) return minutes + "m";
return "Just now";
}
var getUnreadMessageIds = (conversation, userId) => {
var ids = [];
conversation.messages.map((m) => {
if (m.messageState === MessageStates.SENT && m.from !== userId) {
ids.push(m.messageId);
}
});
return ids;
};
var getParticipant = (uid, participantList) => {
return participantList.find((p) => p.participantDetails.uid === uid);
};
function convertToMinutes(seconds) {
var _seconds = Number(seconds.toFixed(0));
const minutes = Math.floor(_seconds / 60);
const remainingSeconds = _seconds % 60;
const paddedMinutes = String(minutes).padStart(2, "0");
const paddedSeconds = String(remainingSeconds).padStart(2, "0");
return `${paddedMinutes}:${paddedSeconds}`;
}
var restructureMessages = (data) => {
const groupMessagesByDate = data.reduce((acc, item) => {
if (typeof item !== "string") {
var date = moment(item.createdAt).format("MMMM DD, YYYY");
if (acc[date]) {
acc[date].unshift(item);
} else {
acc[date] = [item];
}
}
return acc;
}, {});
const _messages = Object.entries(groupMessagesByDate).flatMap(
([date, messages]) => [...messages.reverse(), date]
);
return _messages;
};
// src/components/Conversations/ConversationAvatar.tsx
import {
View as View2,
StyleSheet as StyleSheet2,
Text as Text2
} from "react-native";
import React4, { useMemo } from "react";
// src/constants/Colors.ts
var Colors = {
greyLighter: "#F0F0F0"
};
// src/components/Conversations/ConversationAvatar.tsx
import { Image } from "expo-image";
// src/contexts/ChatProvider.tsx
import React3, { createContext as createContext3, useContext as useContext3 } from "react";
// src/contexts/ModalProvider.tsx
import React, { createContext, useContext, useState } from "react";
import {
Modal,
View
} from "react-native";
var initial = {
displayModal: () => {
},
resetModal: () => {
},
modalProps: {
dismissable: true,
justifyContent: "center",
children: null,
animation: "slide",
containerWidth: "100%"
}
};
var ModalProviderContext = createContext(initial);
var useModalProvider = () => useContext(ModalProviderContext);
function ModalProvider(props) {
const { children } = props;
const [modal, showModal] = useState(false);
const [modalProps, setModalProps] = useState(initial.modalProps);
const displayModal = (props2) => {
showModal(true);
setModalProps({ ...initial.modalProps, ...props2 });
};
const dismiss = () => {
if (modalProps?.dismissable) {
showModal(false);
}
};
const resetModal = (cb) => {
showModal(false);
cb?.();
};
return /* @__PURE__ */ React.createElement(
ModalProviderContext.Provider,
{
value: {
displayModal,
resetModal
}
},
children,
/* @__PURE__ */ React.createElement(
Modal,
{
animationType: modalProps?.animation,
style: { height: "100%", width: "100%" },
visible: modal,
transparent: true
},
/* @__PURE__ */ React.createElement(
View,
{
style: {
flex: 1,
height: "100%",
width: "100%",
alignItems: "center",
justifyContent: modalProps?.justifyContent,
backgroundColor: "rgba(0,0,0,.3)"
}
},
/* @__PURE__ */ React.createElement(View, { style: { flex: 1, width: "100%", height: "100%" } }, modalProps?.children)
)
)
);
}
// src/theme/colors.ts
var teal = {
50: "#DCF2F0",
100: "#A9DFD8",
200: "#73CABE",
300: "#3AB4A4",
400: "#00A391",
500: "#00927E",
600: "#008572",
700: "#007662",
800: "#006654",
900: "#004A38"
};
var green = {
50: "#E6F5E4",
100: "#C2E6BD",
200: "#9AD693",
300: "#6FC666",
400: "#4ABA42",
500: "#17AE13",
600: "#029F04",
700: "#008D00",
800: "#007C00",
900: "#005E00"
};
var grey = {
50: "#F6F6FF",
100: "#F2F1FF",
200: "#EBEBF9",
300: "#CAC9D7",
400: "#ACACB9",
500: "#82818F",
600: "#6D6D7A",
700: "#4D4D59",
800: "#2B2B36",
900: "#21222D",
A100: "#1D1E26"
};
var stone = {
50: "#F8F8F8",
100: "#EFEFEF",
200: "#E8E8E8",
300: "#D9D9D9",
400: "#D2D2D2",
500: "#A0A0A0",
600: "#87888C",
700: "#2C2D33",
800: "#1D1E26",
900: "#171821"
};
// src/theme/index.ts
var theme = {
background: {
primary: stone[900],
secondary: grey[900],
disabled: grey[800]
},
text: {
primary: "black",
secondary: stone[200],
disabled: stone[500]
},
action: {
primary: teal[50],
secondary: stone[300]
},
chatBubble: {
left: {
bgColor: grey[900],
messageColor: stone[200],
messageTimeColor: "grey",
replyBorderColor: stone[200]
},
right: {
bgColor: "#474952",
messageColor: "white",
messageTimeColor: "grey",
replyBorderColor: green[900]
}
},
icon: "white",
divider: stone[700]
};
var theme_default = theme;
// src/contexts/MessageStateContext.tsx
import React2, {
createContext as createContext2,
useState as useState2,
useContext as useContext2
} from "react";
import { Audio } from "expo-av";
// src/constants/defaultUser.ts
var defaultUser_default = {
id: "",
uid: "",
username: "",
firstname: "",
lastname: "",
profileUrl: "",
color: "",
custom: {}
};
// src/contexts/MessageStateContext.tsx
var initialMessageStateContext = {
globalTextMessage: "",
setGlobalTextMessage: () => {
},
stickers: [],
setStickers: () => {
},
pendingMessages: [],
addNewPendingMessages: (message) => {
},
removePendingMessage: (messageId) => {
},
updatePendingMessage: (messageId, message) => {
},
playVoiceMessage: (media) => {
},
pauseVoiceMessage: () => {
},
resumeVoiceMessage: () => {
},
audioState: null,
unload: () => {
},
sound: null,
activeVoiceMessage: null,
avPlayBackStatus: null,
userMeta: defaultUser_default,
setUserMeta: () => {
},
conversationList: [],
setConversationList: () => {
}
};
var MessageStateContext = createContext2(
initialMessageStateContext
);
var useMessageState = () => useContext2(MessageStateContext);
var MessageStateProvider = ({ children }) => {
const [conversationList, setConversationList] = useState2([]);
const [globalTextMessage, setGlobalTextMessage] = useState2("");
const [stickers, setStickers] = useState2([]);
const [pendingMessages, setPendingMessages] = useState2([]);
const [sound, setSound] = useState2(null);
const [audioState, setAudioState] = useState2(null);
const [activeVoiceMessage, setActiveVoiceMessage] = useState2(null);
const [avPlayBackStatus, setAvPlayBackStatus] = useState2(null);
const [userMeta, setUserMeta] = useState2(defaultUser_default);
const addNewPendingMessages = (message) => {
setPendingMessages((prev) => {
return [...prev, message];
});
};
const removePendingMessage = (messageId) => {
setPendingMessages((prev) => {
const filtered = prev.filter((m) => m.messageId !== messageId);
return filtered;
});
};
const updatePendingMessage = (messageId, updatedMessage) => {
const clonedMessage = JSON.parse(JSON.stringify(updatedMessage));
setPendingMessages(
(prev) => prev.map(
(message) => message.messageId === messageId ? { ...message, ...clonedMessage } : message
)
);
};
const onPlaybackStatusUpdate = (data) => {
console.log(data);
setAvPlayBackStatus(data);
if (data?.didJustFinish) {
setAudioState(null);
unload();
}
};
const playVoiceMessage = async (media) => {
if (activeVoiceMessage !== null && media.mediaId !== activeVoiceMessage?.mediaId) {
return unload();
}
setActiveVoiceMessage(media);
setAudioState("loading");
try {
console.log("Loading Sound");
console.log(media.mediaUrl);
const { sound: avSound } = await Audio.Sound.createAsync({ uri: media.mediaUrl }, {}, onPlaybackStatusUpdate);
setSound(avSound);
console.log("Playing Sound");
setAudioState("playing");
await avSound.playAsync();
} catch (error) {
console.error("Error loading audio: ", error);
setAudioState(null);
}
};
const pauseVoiceMessage = async () => {
await sound?.pauseAsync();
setAudioState("paused");
};
const resumeVoiceMessage = async () => {
if (audioState === "paused") {
await sound?.playAsync();
setAudioState("playing");
}
};
const unload = () => {
console.log("Unloading Sound");
sound?.stopAsync();
sound?.unloadAsync();
setSound(null);
setActiveVoiceMessage(null);
setAudioState(null);
};
return /* @__PURE__ */ React2.createElement(
MessageStateContext.Provider,
{
value: {
globalTextMessage,
setGlobalTextMessage,
stickers,
setStickers,
pendingMessages,
addNewPendingMessages,
removePendingMessage,
updatePendingMessage,
playVoiceMessage,
pauseVoiceMessage,
resumeVoiceMessage,
audioState,
unload,
sound,
activeVoiceMessage,
avPlayBackStatus,
userMeta,
setUserMeta,
conversationList,
setConversationList
}
},
children
);
};
// src/contexts/ChatProvider.tsx
var ConfigContext = createContext3({
theme: theme_default,
client: null,
fontFamily: void 0,
fontScale: 1
});
function useConfig() {
return useContext3(ConfigContext);
}
function ChatProvider(props) {
const { children, client, theme: theme2 = theme_default, fontFamily, fontScale } = props;
return /* @__PURE__ */ React3.createElement(ConfigContext.Provider, { value: { theme: theme2, client, fontFamily, fontScale } }, /* @__PURE__ */ React3.createElement(MessageStateProvider, null, /* @__PURE__ */ React3.createElement(ModalProvider, null, children)));
}
// src/components/Conversations/ConversationAvatar.tsx
var avatarSize = 50;
var ConversationAvatar = ({
type,
chatUserId,
participantList,
groupMeta,
conversationTitle
}) => {
const { fontFamily, fontScale } = useConfig();
const userInfo = useMemo(() => {
if (type === "private-chat") {
return getUserInfoWithId(chatUserId, participantList);
}
return null;
}, [chatUserId, participantList, type]);
const imageUri = type === "private-chat" ? userInfo?.receivingUser?.profileUrl : groupMeta?.groupIcon;
const initials = conversationTitle ? conversationTitle.substring(0, 1) : "";
return imageUri ? /* @__PURE__ */ React4.createElement(Image, { source: { uri: imageUri }, style: styles.avatar, cachePolicy: "disk" }) : /* @__PURE__ */ React4.createElement(View2, { style: styles.avatar }, /* @__PURE__ */ React4.createElement(Text2, { style: { ...styles.avatarInitials, fontSize: 30 * fontScale, fontFamily } }, initials));
};
var styles = StyleSheet2.create({
main: {
height: "100%",
width: "100%"
},
conversationTitle: {
color: "black",
fontSize: 20,
textTransform: "capitalize"
},
messageText: {
color: "black",
fontSize: 17
},
messageTime: {},
avatar: {
height: avatarSize,
width: avatarSize,
borderRadius: avatarSize,
backgroundColor: Colors.greyLighter,
alignItems: "center",
justifyContent: "center",
marginEnd: 10
},
avatarInitials: {
fontSize: 30,
textTransform: "capitalize",
color: "white"
},
listItem: {
height: 80,
width: "100%",
paddingHorizontal: 10,
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between"
}
});
// src/components/Badge.tsx
import React5 from "react";
import { View as View3, Text as Text3 } from "react-native";
var UnreadMessagesBadge = (props) => {
const { label } = props;
return /* @__PURE__ */ React5.createElement(View3, { style: {
height: 25,
width: 25,
borderRadius: 25,
backgroundColor: "lightblue",
alignItems: "center",
justifyContent: "center"
} }, /* @__PURE__ */ React5.createElement(Text3, { style: { color: "white", fontWeight: "bold" } }, label));
};
// src/components/Conversations/Conversation.tsx
var ConversationItem = (props) => {
const { theme: theme2, fontFamily, fontScale } = useConfig();
const { conversation, chatUserId, isLastItem, onPress, lastMessage, unread } = props;
let conversationTitle = useMemo2(() => {
return getConversationTitle(chatUserId, conversation);
}, [chatUserId, conversation]);
let getUnreadMessages = useMemo2(() => {
return getUnreadMessageIds(conversation, chatUserId);
}, [conversation]);
const renderLastMessage = useCallback(() => {
if (!lastMessage) {
return null;
}
if (lastMessage.reactions.length > 0 && chatUserId !== lastMessage?.reactions[lastMessage.reactions.length - 1].uid) {
return /* @__PURE__ */ React6.createElement(Text4, { style: { fontSize: 15.5 * fontScale, color: theme2?.text.secondary, fontFamily } }, /* @__PURE__ */ React6.createElement(Text4, { style: { fontStyle: "italic" } }, "@", getParticipant(
lastMessage.reactions[lastMessage.reactions.length - 1]?.uid,
conversation.participantList
)?.participantDetails.username), " ", 'reacted "', lastMessage.reactions[0]?.emoji, '" to your message.');
}
if (lastMessage.message) {
return /* @__PURE__ */ React6.createElement(Text4, { style: { fontSize: 15.5 * fontScale, color: theme2?.text.secondary, fontFamily } }, lastMessage.from === chatUserId ? "You: " : "", truncate(lastMessage.message, 35));
} else {
return /* @__PURE__ */ React6.createElement(View4, { style: { flexDirection: "row", alignItems: "center" } }, /* @__PURE__ */ React6.createElement(Text4, { style: { fontSize: 15.5 * fontScale, color: theme2?.text.secondary, fontFamily } }, lastMessage.from === chatUserId ? "You: " : ""), /* @__PURE__ */ React6.createElement(View4, { style: { padding: 3, borderWidth: 1, borderColor: theme2?.divider, borderRadius: 3 } }, /* @__PURE__ */ React6.createElement(
Text4,
{
style: {
fontFamily,
fontSize: 10 * fontScale,
color: theme2?.text.secondary
}
},
lastMessage.attachmentType || "media"
)));
}
}, [lastMessage]);
return (
// <Draggeble actionContainer={
// <View style={{ flex: 1, backgroundColor: 'red', width: '100%', height: '100%' }}>
// <Text>hello</Text>
// </View>
// }>
/* @__PURE__ */ React6.createElement(
TouchableOpacity2,
{
style: styles2.listItemContainer,
onPress: () => onPress()
},
/* @__PURE__ */ React6.createElement(
ConversationAvatar,
{
chatUserId,
participantList: conversation.participantList,
type: conversation.conversationType,
groupMeta: conversation.groupMeta,
conversationTitle
}
),
/* @__PURE__ */ React6.createElement(
View4,
{
style: [
{
...styles2.listItem
},
!isLastItem && {
borderBottomWidth: 0.5,
borderBottomColor: theme2?.divider
}
]
},
/* @__PURE__ */ React6.createElement(
View4,
{
style: { flexDirection: "row", flex: 1, alignItems: "center" }
},
/* @__PURE__ */ React6.createElement(View4, { style: { flex: 1 } }, /* @__PURE__ */ React6.createElement(
Text4,
{
style: {
textTransform: "capitalize",
fontSize: 20 * fontScale,
color: theme2?.text.secondary,
fontFamily
}
},
conversationTitle
), /* @__PURE__ */ React6.createElement(React6.Fragment, null, renderLastMessage()))
),
/* @__PURE__ */ React6.createElement(View4, { style: { alignItems: "flex-end" } }, unread.length > 0 && /* @__PURE__ */ React6.createElement(UnreadMessagesBadge, { label: unread.length }), lastMessage && /* @__PURE__ */ React6.createElement(
Text4,
{
style: {
fontSize: 15.5 * fontScale,
color: theme2?.text.secondary,
fontFamily
}
},
formatConversationTime(lastMessage?.createdAt)
))
)
)
);
};
var styles2 = StyleSheet3.create({
main: {
height: "100%",
width: "100%"
},
conversationTitle: {
fontSize: 20,
textTransform: "capitalize"
},
messageText: {
fontSize: 15.5
},
messageTime: {},
avatarInitials: {
fontSize: 30,
textTransform: "capitalize",
color: "white"
},
listItemContainer: {
flexDirection: "row",
height: 80,
flex: 1,
alignItems: "center"
},
listItem: {
width: "100%",
height: "100%",
flexDirection: "row",
alignItems: "center",
flex: 1,
justifyContent: "space-between"
},
typing: {
fontStyle: "italic",
color: "green"
}
});
// src/components/Conversations/index.tsx
import { GestureHandlerRootView } from "react-native-gesture-handler";
import {
Events
} from "softchatjs-core";
// src/assets/icons.tsx
import React7 from "react";
import { View as View5 } from "react-native";
import { Svg, Path, G, Defs, ClipPath, Rect } from "react-native-svg";
function XIcon(props) {
const { size = 25, color = "black" } = props;
return /* @__PURE__ */ React7.createElement(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React7.createElement(
Path,
{
d: "M6 18L17.94 6M18 18L6.06 6",
stroke: color,
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
}
));
}
function TimesIcon(props) {
const { size = 25, color = "black" } = props;
return /* @__PURE__ */ React7.createElement(XIcon, { size, color });
}
function CloseIcon(props) {
const { size = 25, color = "black", bgColor } = props;
return /* @__PURE__ */ React7.createElement(
View5,
{
style: { padding: 3, borderRadius: size * 2, backgroundColor: bgColor }
},
/* @__PURE__ */ React7.createElement(TimesIcon, { size, color })
);
}
function EmojiIcon(props) {
const { size = 25, color = "black" } = props;
return /* @__PURE__ */ React7.createElement(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React7.createElement(
Path,
{
d: "M12 17.5C14.33 17.5 16.3 16.04 17.11 14H6.89C7.69 16.04 9.67 17.5 12 17.5ZM8.5 11C8.89782 11 9.27936 10.842 9.56066 10.5607C9.84196 10.2794 10 9.89782 10 9.5C10 9.10218 9.84196 8.72064 9.56066 8.43934C9.27936 8.15804 8.89782 8 8.5 8C8.10218 8 7.72064 8.15804 7.43934 8.43934C7.15804 8.72064 7 9.10218 7 9.5C7 9.89782 7.15804 10.2794 7.43934 10.5607C7.72064 10.842 8.10218 11 8.5 11ZM15.5 11C15.8978 11 16.2794 10.842 16.5607 10.5607C16.842 10.2794 17 9.89782 17 9.5C17 9.10218 16.842 8.72064 16.5607 8.43934C16.2794 8.15804 15.8978 8 15.5 8C15.1022 8 14.7206 8.15804 14.4393 8.43934C14.158 8.72064 14 9.10218 14 9.5C14 9.89782 14.158 10.2794 14.4393 10.5607C14.7206 10.842 15.1022 11 15.5 11ZM12 20C9.87827 20 7.84344 19.1571 6.34315 17.6569C4.84285 16.1566 4 14.1217 4 12C4 9.87827 4.84285 7.84344 6.34315 6.34315C7.84344 4.84285 9.87827 4 12 4C14.1217 4 16.1566 4.84285 17.6569 6.34315C19.1571 7.84344 20 9.87827 20 12C20 14.1217 19.1571 16.1566 17.6569 17.6569C16.1566 19.1571 14.1217 20 12 20ZM12 2C6.47 2 2 6.5 2 12C2 14.6522 3.05357 17.1957 4.92893 19.0711C5.85752 19.9997 6.95991 20.7362 8.17317 21.2388C9.38642 21.7413 10.6868 22 12 22C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z",
fill: color
}
));
}
function SendIcon(props) {
const { size = 25, color = "black" } = props;
return /* @__PURE__ */ React7.createElement(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React7.createElement(
Path,
{
"fill-rule": "evenodd",
"clip-rule": "evenodd",
d: "M9.94011 12.646L7.69211 11.897C5.33911 11.113 4.16211 10.721 4.16211 9.99998C4.16211 9.27998 5.33911 8.88698 7.69211 8.10298L16.2051 5.26498C17.8611 4.71298 18.6891 4.43698 19.1261 4.87398C19.5631 5.31098 19.2871 6.13898 18.7361 7.79398L15.8971 16.308C15.1131 18.661 14.7211 19.838 14.0001 19.838C13.2801 19.838 12.8871 18.661 12.1031 16.308L11.3531 14.061L15.7071 9.70698C15.8893 9.51838 15.9901 9.26578 15.9878 9.00358C15.9855 8.74138 15.8803 8.49057 15.6949 8.30516C15.5095 8.11976 15.2587 8.01459 14.9965 8.01231C14.7343 8.01003 14.4817 8.11082 14.2931 8.29298L9.94011 12.646Z",
fill: color
}
));
}
function AttachmentIcon(props) {
const { size = 25, color = "black" } = props;
return /* @__PURE__ */ React7.createElement(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React7.createElement(
Path,
{
d: "M21.4381 11.662L12.2481 20.852C11.1222 21.9778 9.59528 22.6103 8.00309 22.6103C6.41091 22.6103 4.88394 21.9778 3.75809 20.852C2.63225 19.7261 1.99976 18.1992 1.99976 16.607C1.99976 15.0148 2.63225 13.4878 3.75809 12.362L12.9481 3.17198C13.6987 2.42142 14.7166 1.99976 15.7781 1.99976C16.8395 1.99976 17.8575 2.42142 18.6081 3.17198C19.3587 3.92254 19.7803 4.94052 19.7803 6.00198C19.7803 7.06344 19.3587 8.08142 18.6081 8.83198L9.40809 18.022C9.22227 18.2078 9.00167 18.3552 8.75889 18.4558C8.5161 18.5563 8.25588 18.6081 7.99309 18.6081C7.7303 18.6081 7.47009 18.5563 7.2273 18.4558C6.98451 18.3552 6.76391 18.2078 6.57809 18.022C6.39227 17.8362 6.24487 17.6156 6.14431 17.3728C6.04374 17.13 5.99198 16.8698 5.99198 16.607C5.99198 16.3442 6.04374 16.084 6.14431 15.8412C6.24487 15.5984 6.39227 15.3778 6.57809 15.192L15.0681 6.71198",
stroke: color,
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}
));
}
function MicIcon(props) {
const { size = 25, color = "black" } = props;
return /* @__PURE__ */ React7.createElement(Svg, { width: size, height: size, viewBox: "0 0 256 256", fill: "none" }, /* @__PURE__ */ React7.createElement(
Path,
{
d: "M128 176C140.726 175.987 152.928 170.925 161.927 161.927C170.925 152.928 175.987 140.726 176 128V64C176 51.2696 170.943 39.0606 161.941 30.0589C152.939 21.0571 140.73 16 128 16C115.27 16 103.061 21.0571 94.0589 30.0589C85.0571 39.0606 80 51.2696 80 64V128C80.0132 140.726 85.0746 152.928 94.0735 161.927C103.072 170.925 115.274 175.987 128 176ZM96 64C96 55.5131 99.3714 47.3737 105.373 41.3726C111.374 35.3714 119.513 32 128 32C136.487 32 144.626 35.3714 150.627 41.3726C156.629 47.3737 160 55.5131 160 64V128C160 136.487 156.629 144.626 150.627 150.627C144.626 156.629 136.487 160 128 160C119.513 160 111.374 156.629 105.373 150.627C99.3714 144.626 96 136.487 96 128V64ZM136 207.6V232C136 234.122 135.157 236.157 133.657 237.657C132.157 239.157 130.122 240 128 240C125.878 240 123.843 239.157 122.343 237.657C120.843 236.157 120 234.122 120 232V207.6C100.276 205.593 81.9976 196.344 68.6984 181.641C55.3992 166.938 48.0244 147.825 48 128C48 125.878 48.8429 123.843 50.3431 122.343C51.8434 120.843 53.8783 120 56 120C58.1217 120 60.1566 120.843 61.6569 122.343C63.1571 123.843 64 125.878 64 128C64 144.974 70.7428 161.253 82.7452 173.255C94.7475 185.257 111.026 192 128 192C144.974 192 161.253 185.257 173.255 173.255C185.257 161.253 192 144.974 192 128C192 125.878 192.843 123.843 194.343 122.343C195.843 120.843 197.878 120 200 120C202.122 120 204.157 120.843 205.657 122.343C207.157 123.843 208 125.878 208 128C207.976 147.825 200.601 166.938 187.302 181.641C174.002 196.344 155.724 205.593 136 207.6Z",
fill: color
}
));
}
function ReplyIcon(props) {
const { size = 25, color = "black" } = props;
return /* @__PURE__ */ React7.createElement(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React7.createElement(
Path,
{
d: "M8 9.8V10.7L9.7 11C12.3 11.4 14.2 12.4 15.6 13.7C13.9 13.2 12.1 12.9 10 12.9H8V14.2L5.8 12L8 9.8ZM10 5L3 12L10 19V14.9C15 14.9 18.5 16.5 21 20C20 15 17 10 10 9",
fill: color
}
));
}
function ImageIcon(props) {
const { color = "#85B6FF", size = 25 } = props;
return /* @__PURE__ */ React7.createElement(Svg, { width: size, height: size, viewBox: "0 0 2 2", fill: "none" }, /* @__PURE__ */ React7.createElement(
Path,
{
d: "M1.75895 0.4375H0.554688C0.421875 0.4375 0.3125 0.544961 0.3125 0.67707V1.63543C0.3125 1.76754 0.421875 1.875 0.554688 1.875H1.75781C1.89062 1.875 2 1.77273 2 1.64062V0.67707C2 0.544961 1.89188 0.4375 1.75895 0.4375ZM1.45758 0.677109C1.49307 0.677325 1.5277 0.688047 1.55711 0.707922C1.58651 0.727798 1.60937 0.755936 1.62281 0.788788C1.63624 0.82164 1.63964 0.857734 1.63258 0.892518C1.62553 0.927301 1.60833 0.959216 1.58316 0.984237C1.55798 1.00926 1.52597 1.02626 1.49114 1.03311C1.45631 1.03995 1.42024 1.03633 1.38747 1.0227C1.3547 1.00907 1.3267 0.986037 1.30701 0.956511C1.28731 0.926986 1.2768 0.892289 1.2768 0.856797C1.27698 0.809005 1.29612 0.763239 1.33002 0.729544C1.36391 0.695849 1.40979 0.676977 1.45758 0.67707V0.677109ZM0.553086 1.75523C0.48668 1.75523 0.436445 1.70152 0.436445 1.63547V1.38223L0.789805 1.06664C0.824349 1.03625 0.86913 1.02009 0.915118 1.02142C0.961107 1.02275 1.00488 1.04146 1.03762 1.07379L1.2823 1.31641L0.840898 1.7552L0.553086 1.75523ZM1.875 1.63543C1.87499 1.65117 1.87189 1.66676 1.86585 1.6813C1.85982 1.69584 1.85098 1.70905 1.83984 1.72017C1.8287 1.7313 1.81548 1.74012 1.80093 1.74612C1.78637 1.75213 1.77078 1.75522 1.75504 1.7552H1.01172L1.46906 1.30078C1.50152 1.2734 1.54258 1.25833 1.58504 1.25822C1.6275 1.2581 1.66865 1.27295 1.70125 1.30016L1.875 1.44762V1.63543Z",
fill: color
}
), /* @__PURE__ */ React7.createElement(
Path,
{
d: "M1.5 0.125H0.25C0.183696 0.125 0.120107 0.151339 0.0732233 0.198223C0.0263392 0.245107 0 0.308696 0 0.375L0 1.375C4.57233e-05 1.43043 0.0184781 1.48427 0.0524089 1.5281C0.0863397 1.57193 0.133852 1.60326 0.1875 1.61719V0.59375C0.1875 0.519158 0.217132 0.447621 0.269876 0.394876C0.322621 0.342132 0.394158 0.3125 0.46875 0.3125H1.74219C1.72826 0.258852 1.69693 0.21134 1.6531 0.177409C1.60927 0.143478 1.55543 0.125046 1.5 0.125Z",
fill: color
}
));
}
function LocationIcon(props) {
const { size = 25, color = "#4ECB71" } = props;
return /* @__PURE__ */ React7.createElement(Svg, { width: size, height: size, viewBox: "0 0 2 2", fill: "none" }, /* @__PURE__ */ React7.createElement(G, { "clip-path": "url(#clip0_653_253)" }, /* @__PURE__ */ React7.createElement(
Path,
{
d: "M1 0.125C0.654961 0.125 0.375 0.376992 0.375 0.6875C0.375 1.1875 1 1.875 1 1.875C1 1.875 1.625 1.1875 1.625 0.6875C1.625 0.376992 1.34504 0.125 1 0.125ZM1 1C0.950555 1 0.90222 0.985338 0.861107 0.957867C0.819995 0.930397 0.787952 0.891352 0.76903 0.845671C0.750108 0.799989 0.745157 0.749723 0.754804 0.701227C0.76445 0.652732 0.78826 0.608186 0.823223 0.573223C0.858186 0.53826 0.902732 0.51445 0.951227 0.504804C0.999723 0.495157 1.04999 0.500108 1.09567 0.51903C1.14135 0.537952 1.1804 0.569995 1.20787 0.611107C1.23534 0.65222 1.25 0.700555 1.25 0.75C1.24993 0.816282 1.22357 0.879828 1.1767 0.926697C1.12983 0.973565 1.06628 0.999928 1 1Z",
fill: color
}
)), /* @__PURE__ */ React7.createElement(Defs, null, /* @__PURE__ */ React7.createElement(ClipPath, { id: "clip0_653_253" }, /* @__PURE__ */ React7.createElement(Rect, { width: "2", height: "2", fill: "white" }))));
}
function DoubleCheck(props) {
const { color = "black" } = props;
return /* @__PURE__ */ React7.createElement(Svg, { width: "17", height: "8", viewBox: "0 0 20 11", fill: "none" }, /* @__PURE__ */ React7.createElement(
Path,
{
d: "M6 5.48498L10.243 9.72798L18.727 1.24298M1 5.48498L5.243 9.72798M13.728 1.24298L10.5 4.49998",
stroke: color,
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
}
));
}
function SingleCheck(props) {
const { color = "black" } = props;
return /* @__PURE__ */ React7.createElement(Svg, { width: "12", height: "7", viewBox: "0 0 18 13", fill: "none" }, /* @__PURE__ */ React7.createElement(
Path,
{
d: "M1 7.00002L5.95 11.95L16.557 1.34302",
stroke: color,
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
}
));
}
function ClockIcon(props) {
const { size = 25, color = "black" } = props;
return /* @__PURE__ */ React7.createElement(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React7.createElement(
Path,
{
d: "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z",
stroke: color,
strokeWidth: "2"
}
), /* @__PURE__ */ React7.createElement(
Path,
{
d: "M16.5 12H12.25C12.1837 12 12.1201 11.9737 12.0732 11.9268C12.0263 11.8799 12 11.8163 12 11.75V8.5",
stroke: color,
strokeWidth: "2",
strokeLinecap: "round"
}
));
}
function ErrorIcon(props) {
const { size = 25, color = "#F24E1E" } = props;
return /* @__PURE__ */ React7.createElement(Svg, { width: size, height: size, viewBox: "0 0 2 2", fill: "none" }, /* @__PURE__ */ React7.createElement(
Path,
{
d: "M1.00004 0.333496C0.868187 0.333496 0.739294 0.372595 0.629661 0.44585C0.520028 0.519104 0.43458 0.623223 0.384121 0.745041C0.333663 0.866858 0.320461 1.0009 0.346184 1.13022C0.371908 1.25954 0.435401 1.37833 0.528636 1.47157C0.621871 1.5648 0.74066 1.6283 0.869981 1.65402C0.999301 1.67974 1.13335 1.66654 1.25516 1.61608C1.37698 1.56562 1.4811 1.48018 1.55435 1.37054C1.62761 1.26091 1.66671 1.13202 1.66671 1.00016C1.66671 0.823352 1.59647 0.653783 1.47145 0.528758C1.34642 0.403734 1.17685 0.333496 1.00004 0.333496ZM0.917263 0.666829C0.917263 0.644728 0.926043 0.623532 0.941671 0.607904C0.957299 0.592276 0.978495 0.583496 1.0006 0.583496C1.0227 0.583496 1.04389 0.592276 1.05952 0.607904C1.07515 0.623532 1.08393 0.644728 1.08393 0.666829V1.04961C1.08393 1.06055 1.08177 1.07139 1.07759 1.0815C1.0734 1.09161 1.06726 1.10079 1.05952 1.10853C1.05178 1.11627 1.0426 1.12241 1.03249 1.1266C1.02238 1.13079 1.01154 1.13294 1.0006 1.13294C0.989653 1.13294 0.978817 1.13079 0.968706 1.1266C0.958596 1.12241 0.949409 1.11627 0.941671 1.10853C0.933933 1.10079 0.927794 1.09161 0.923607 1.0815C0.919419 1.07139 0.917263 1.06055 0.917263 1.04961V0.666829ZM1.00004 1.41683C0.981142 1.41683 0.962667 1.41123 0.946953 1.40073C0.931239 1.39023 0.918992 1.3753 0.911759 1.35784C0.904527 1.34038 0.902634 1.32117 0.906321 1.30263C0.910009 1.2841 0.919109 1.26707 0.932473 1.25371C0.945837 1.24034 0.962863 1.23124 0.981399 1.22755C0.999935 1.22387 1.01915 1.22576 1.03661 1.23299C1.05407 1.24022 1.06899 1.25247 1.07949 1.26819C1.08999 1.2839 1.0956 1.30237 1.0956 1.32127C1.0956 1.34662 1.08553 1.37092 1.06761 1.38884C1.04969 1.40676 1.02538 1.41683 1.00004 1.41683Z",
fill: color
}
));
}
function TrashIcon(props) {
const { size = 25, color = "red" } = props;
return /* @__PURE__ */ React7.createElement(Svg, { width: size, height: size, viewBox: "0 0 20 20", fill: "none" }, /* @__PURE__ */ React7.createElement(
Path,
{
fillRule: "evenodd",
clipRule: "evenodd",
d: "M8.75009 1C8.02075 1 7.32127 1.28973 6.80555 1.80546C6.28982 2.32118 6.00009 3.02065 6.00009 3.75V4.193C5.20476 4.26967 4.41643 4.369 3.63509 4.491C3.53634 4.50445 3.44126 4.53745 3.35541 4.58807C3.26956 4.63869 3.19465 4.70591 3.13508 4.78581C3.0755 4.86571 3.03245 4.95667 3.00843 5.0534C2.98441 5.15013 2.97992 5.25067 2.9952 5.34916C3.01048 5.44764 3.04524 5.54209 3.09745 5.62699C3.14965 5.71189 3.21825 5.78553 3.29924 5.84361C3.38023 5.90169 3.47199 5.94305 3.56914 5.96526C3.6663 5.98748 3.76691 5.99011 3.86509 5.973L4.01409 5.951L4.85509 16.469C4.91015 17.1582 5.22279 17.8014 5.73075 18.2704C6.23871 18.7394 6.9047 18.9999 7.59609 19H12.4031C13.0945 19.0002 13.7606 18.74 14.2687 18.2711C14.7769 17.8022 15.0898 17.1592 15.1451 16.47L15.9861 5.95L16.1351 5.973C16.3298 5.99952 16.5271 5.94858 16.6847 5.83111C16.8422 5.71365 16.9473 5.53906 16.9775 5.34488C17.0076 5.15071 16.9603 4.95246 16.8458 4.79278C16.7313 4.6331 16.5587 4.52474 16.3651 4.491C15.5798 4.36877 14.7911 4.26939 14.0001 4.193V3.75C14.0001 3.02065 13.7104 2.32118 13.1946 1.80546C12.6789 1.28973 11.9794 1 11.2501 1H8.75009ZM10.0001 4C10.8401 4 11.6734 4.025 12.5001 4.075V3.75C12.5001 3.06 11.9401 2.5 11.2501 2.5H8.75009C8.06009 2.5 7.50009 3.06 7.50009 3.75V4.075C8.32676 4.025 9.16009 4 10.0001 4ZM8.58009 7.72C8.57213 7.52109 8.48549 7.33348 8.33921 7.19846C8.19293 7.06343 7.999 6.99204 7.80009 7C7.60118 7.00796 7.41357 7.0946 7.27855 7.24088C7.14352 7.38716 7.07213 7.58109 7.08009 7.78L7.38009 15.28C7.38403 15.3785 7.40733 15.4752 7.44866 15.5647C7.48999 15.6542 7.54854 15.7347 7.62097 15.8015C7.6934 15.8684 7.77829 15.9203 7.8708 15.9544C7.9633 15.9884 8.0616 16.0039 8.16009 16C8.25858 15.9961 8.35533 15.9728 8.44482 15.9314C8.53431 15.8901 8.61478 15.8315 8.68163 15.7591C8.74849 15.6867 8.80043 15.6018 8.83448 15.5093C8.86853 15.4168 8.88403 15.3185 8.88009 15.22L8.58009 7.72ZM12.9201 7.78C12.924 7.68151 12.9085 7.58321 12.8745 7.4907C12.8404 7.3982 12.7885 7.31331 12.7216 7.24088C12.6548 7.16845 12.5743 7.1099 12.4848 7.06857C12.3953 7.02724 12.2986 7.00394 12.2001 7C12.0012 6.99204 11.8073 7.06343 11.661 7.19846C11.5147 7.33348 11.428 7.52109 11.4201 7.72L11.1201 15.22C11.1162 15.3185 11.1317 15.4168 11.1657 15.5093C11.1998 15.6018 11.2517 15.6867 11.3185 15.7591C11.3854 15.8315 11.4659 15.8901 11.5554 15.9314C11.6448 15.9728 11.7416 15.9961 11.8401 16C11.9386 16.0039 12.0369 15.9884 12.1294 15.9544C12.2219 15.9203 12.3068 15.8684 12.3792 15.8015C12.4516 15.7347 12.5102 15.6542 12.5515 15.5647C12.5929 15.4752 12.6162 15.3785 12.6201 15.28L12.9201 7.78Z",
fill: color
}
));
}
function EditIcon(props) {
const { size = 25, color = "black" } = props;
return /* @__PURE__ */ React7.createElement(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React7.createElement(
Path,
{
d: "M7 7H6C5.46957 7 4.96086 7.21071 4.58579 7.58579C4.21071 7.96086 4 8.46957 4 9V18C4 18.5304 4.21071 19.0391 4.58579 19.4142C4.96086 19.7893 5.46957 20 6 20H15C15.5304 20 16.0391 19.7893 16.4142 19.4142C16.7893 19.0391 17 18.5304 17 18V17",
stroke: color,
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
}
), /* @__PURE__ */ React7.createElement(
Path,
{
d: "M16 5.00011L19 8.00011M20.385 6.58511C20.7788 6.19126 21.0001 5.65709 21.0001 5.10011C21.0001 4.54312 20.7788 4.00895 20.385 3.61511C19.9912 3.22126 19.457 3 18.9 3C18.343 3 17.8088 3.22126 17.415 3.61511L9 12.0001V15.0001H12L20.385 6.58511Z",
stroke: color,
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
}
));
}
function CopyIcon(props) {
const { size = 25, color = "black" } = props;
return /* @__PURE__ */ React7.createElement(Svg, { width: size, height: size, viewBox: "0 0 16 18", fill: "none" }, /* @__PURE__ */ React7.createElement(
Path,
{
fillRule: "evenodd",
clipRule: "evenodd",
d: "M14 0C14.5304 0 15.0391 0.210714 15.4142 0.585786C15.7893 0.960859 16 1.46957 16 2V12C16 12.5304 15.7893 13.0391 15.4142 13.4142C15.0391 13.7893 14.5304 14 14 14H13V6C13 4.93913 12.5786 3.92172 11.8284 3.17157C11.0783 2.42143 10.0609 2 9 2H6C5.64895 1.99924 5.30395 2.09135 5 2.267V2C5 1.46957 5.21071 0.960859 5.58579 0.585786C5.96086 0.210714 6.46957 0 7 0H14Z",
fill: color
}
), /* @__PURE__ */ React7.createElement(
Path,
{
fillRule: "evenodd",
clipRule: "evenodd",
d: "M4 4.054V8H0.2C0.274644 7.84448 0.369095 7.69928 0.481 7.568L2.941 4.698C3.2169 4.37661 3.58771 4.15111 4 4.054ZM6 4V8C6 8.53043 5.78929 9.03914 5.41421 9.41421C5.03914 9.78929 4.53043 10 4 10H0V16C0 16.5304 0.210714 17.0391 0.585786 17.4142C0.960859 17.7893 1.46957 18 2 18H9C9.53043 18 10.0391 17.7893 10.4142 17.4142C10.7893 17.0391 11 16.5304 11 16V6C11 5.46957 10.7893 4.96086 10.4142 4.58579C10.0391 4.21071 9.53043 4 9 4H6Z",
fill: color
}
));
}
var ChatIcon = (props) => {
const { size = 25, color = "black" } = props;
return /* @__PURE__ */ React7.createElement(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React7.createElement(
Path,
{
d: "M12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22H4C3.46957 22 2.96086 21.7893 2.58579 21.4142C2.21071 21.0391 2 20.5304 2 20V12C2 6.477 6.477 2 12 2ZM12 14H9C8.73478 14 8.48043 14.1054 8.29289 14.2929C8.10536 14.4804 8 14.7348 8 15C8 15.2652 8.10536 15.5196 8.29289 15.7071C8.48043 15.8946 8.73478 16 9 16H12C12.2652 16 12.5196 15.8946 12.7071 15.7071C12.8946 15.5196 13 15.2652 13 15C13 14.7348 12.8946 14.4804 12.7071 14.2929C12.5196 14.1054 12.2652 14 12 14ZM15 10H9C8.74512 10.0003 8.49997 10.0979 8.31463 10.2728C8.1293 10.4478 8.01776 10.687 8.00283 10.9414C7.98789 11.1958 8.07067 11.4464 8.23426 11.6418C8.39785 11.8373 8.6299 11.9629 8.883 11.993L9 12H15C15.2549 11.9997 15.5 11.9021 15.6854 11.7272C15.8707 11.5522 15.9822 11.313 15.9972 11.0586C16.0121 10.8042 15.9293 10.5536 15.7657 10.3582C15.6021 10.1627 15.3701 10.0371 15.117 10.007L15 10Z",
fill: color
}
));
};
var ChatIconPlus = (props) => {
const { size = 25, color = "black" } = props;
return /* @__PURE__ */ React7.createElement(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React7.createElement(
Path,
{
d: "M19 8V2",
stroke: color,
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
}
), /* @__PURE__ */ React7.createElement(
Path,
{
fillRule: "evenodd",
clipRule: "evenodd",
d: "M20.7299 9.80407C21.064 11.1317 21.0907 12.5181 20.8082 13.8576C20.5256 15.1972 19.9412 16.4546 19.0994 17.5342C18.2575 18.6138 17.1805 19.4872 15.9503 20.0878C14.72 20.6884 13.369 21.0004 11.9999 21.0001H7.49993C6.10193 21.0001 5.40293 21.0001 4.85193 20.7721C4.48784 20.6213 4.15702 20.4003 3.87837 20.1216C3.59972 19.843 3.3787 19.5122 3.22793 19.1481C2.99993 18.5971 2.99993 17.8981 2.99993 16.5001V12.0001C2.99962 10.631 3.31164 9.27999 3.91223 8.04974C4.51282 6.81949 5.38616 5.74246 6.46578 4.90064C7.54539 4.05882 8.80283 3.47439 10.1424 3.19183C11.4819 2.90927 12.8683 2.93603 14.1959 3.27007C13.8569 3.62372 13.6293 4.06918 13.5413 4.5511C13.4533 5.03303 13.5089 5.53018 13.7011 5.9808C13.8933 6.43142 14.2136 6.81565 14.6223 7.08575C15.031 7.35585 15.51 7.49992 15.9999 7.50007H16.4999V8.00007C16.5001 8.48996 16.6441 8.96901 16.9143 9.37771C17.1844 9.78641 17.5686 10.1067 18.0192 10.2989C18.4698 10.4911 18.967 10.5467 19.4489 10.4587C19.9308 10.3707 20.3763 10.1431 20.7299 9.80407ZM14.9999 10.0001C15.2651 10.0001 15.5195 10.1054 15.707 10.293C15.8946 10.4805 15.9999 10.7349 15.9999 11.0001C15.9999 11.2653 15.8946 11.5196 15.707 11.7072C15.5195 11.8947 15.2651 12.0001 14.9999 12.0001H8.99993C8.73471 12.0001 8.48036 11.8947 8.29282 11.7072C8.10529 11.5196 7.99993 11.2653 7.99993 11.0001C7.99993 10.7349 8.10529 10.4805 8.29282 10.293C8.48036 10.1054 8.73471 10.0001 8.99993 10.0001H14.9999ZM11.9999 14.0001C12.2651 14.0001 12.5195 14.1054 12.707 14.293C12.8946 14.4805 12.9999 14.7349 12.9999 15.0001C12.9999 15.2653 12.8946 15.5196 12.707 15.7072C12.5195 15.8947 12.2651 16.0001 11.9999 16.0001H8.99993C8.73471 16.0001 8.48036 15.8947 8.29282 15.7072C8.10529 15.5196 7.99993 15.2653 7.99993 15.0001C7.99993 14.7349 8.10529 14.4805 8.29282 14.293C8.48036 14.1054 8.73471 14.0001 8.99993 14.0001H11.9999Z",
fill: color
}
), /* @__PURE__ */ React7.createElement(
Path,
{
d: "M22 5H16",
stroke: color,
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
}
));
};
var PauseIcon = (props) => {
const { size = 25, color = "black" } = props;
return /* @__PURE__ */ React7.createElement(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React7.createElement(
Path,
{
"fill-rule": "evenodd",
"clip-rule": "evenodd",
d: "M8 5C7.46957 5 6.96086 5.21071 6.58579 5.58579C6.21071 5.96086 6 6.46957 6 7V17C6 17.5304 6.21071 18.0391 6.58579 18.4142C6.96086 18.7893 7.46957 19 8 19H9C9.53043 19 10.0391 18.7893 10.4142 18.4142C10.7893 18.0391 11 17.5304 11 17V7C11 6.46957 10.7893 5.96086 10.4142 5.58579C10.0391 5.21071 9.53043 5 9 5H8ZM15 5C14.4696 5 13.9609 5.21071 13.5858 5.58579C13.2107 5.96086 13 6.46957 13 7V17C13 17.5304 13.2107 18.0391 13.5858 18.4142C13.9609 18.7893 14.4696 19 15 19H16C16.5304 19 17.0391 18.7893 17.4142 18.4142C17.7893 18.0391 18 17.5304 18 17V7C18 6.46957 17.7893 5.96086 17.4142 5.58579C17.0391 5.21071 16.5304 5 16 5H15Z",
fill: color
}
));
};
var PlayIcon = (props) => {
const { size = 25, color = "black" } = props;
return /* @__PURE__ */ React7.createElement(Svg, { width: size, height: size, viewBox: "0 0 256 256", fill: "none" }, /* @__PURE__ */ React7.createElement(
Path,
{
d: "M240 128C240.007 130.716 239.31 133.388 237.978 135.756C236.647 138.123 234.725 140.105 232.4 141.51L88.32 229.65C85.8909 231.138 83.1087 231.95 80.2608 232.002C77.4129 232.055 74.6025 231.347 72.12 229.95C69.6611 228.575 67.6128 226.57 66.1856 224.141C64.7585 221.712 64.0041 218.947 64 216.13V39.8701C64.0041 37.053 64.7585 34.2877 66.1856 31.8588C67.6128 29.4299 69.6611 27.4249 72.12 26.0501C74.6025 24.6536 77.4129 23.9451 80.2608 23.9979C83.1087 24.0506 85.8909 24.8626 88.32 26.3501L232.4 114.49C234.725 115.895 236.647 117.877 237.978 120.245C239.31 122.612 240.007 125.284 240 128Z",
fill: color
}
));
};
var LinkIcon = (props) => {
const { size = 25, color = "black" } = props;
return /* @__PURE__ */ React7.createElement(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React7.createElement(
Path,
{
d: "M11 17H7C5.61667 17 4.43767 16.5123 3.463 15.537C2.48833 14.5617 2.00067 13.3827 2 12C1.99933 10.6173 2.487 9.43833 3.463 8.463C4.439 7.48767 5.618 7 7 7H11V9H7C6.16667 9 5.45833 9.29167 4.875 9.875C4.29167 10.4583 4 11.1667 4 12C4 12.8333 4.29167 13.5417 4.875 14.125C5.45833 14.7083 6.16667 15 7 15H11V17ZM8 13V11H16V13H8ZM13 17V15H17C17.8333 15 18.5417 14.7083 19.125 14.125C19.7083 13.5417 20 12.8333 20 12C20 11.1667 19.7083 10.4583 19.125 9.875C18.5417 9.29167 17.8333 9 17 9H13V7H17C18.3833 7 19.5627 7.48767 20.538 8.463C21.5133 9.43833 22.0007 10.6173 22 12C21.9993 13.3827 21.5117 14.562 20.537 15.538C19.5623 16.514 18.3833 17.0013 17 17H13Z",
fill: color
}
));
};
var MessagePlus = (props) => {
const { size = 25, color = "black" } = props;
return /* @__PURE__ */ React7.createElement(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React7.createElement(
Path,
{
d: "M8 9H16M8 13H14M12.5 20.5L12 21L9 18H6C5.20435 18 4.44129 17.6839 3.87868 17.1213C3.31607 16.5587 3 15.7956 3 15V7C3 6.20435 3.31607 5.44129 3.87868 4.87868C4.44129 4.31607 5.20435 4 6 4H18C18.7956 4 19.5587 4.31607 20.1213 4.87868C20.6839 5.44129 21 6.20435 21 7V12.5M16 19H22M19 16V22",
stroke: color,
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
}
));
};
var LockIcon = (props) => {
const { size = 25, color = "black" } = props;
return /* @__PURE__ */ React7.createElement(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React7.createElement(
Path,
{
d: "M18 8H17V6C17 3.24 14.76 1 12 1C9.24 1 7 3.24 7 6V8H6C4.9 8 4 8.9 4 10V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V10C20 8.9 19.1 8 18 8ZM9 6C9 4.34 10.34 3 12 3C13.66 3 15 4.34 15 6V8H9V6ZM18 20H6V10H18V20ZM12 17C13.1 17 14 16.1 14 15C14 13.9 13.1 13 12 13C10.9 13 10 13.9 10 15C10 16.1 10.9 17 12 17Z",
fill: color
}
));
};
var ArrowRight = (props) => {
const { size = 25, color = "black" } = props;
return /* @__PURE__ */ React7.createElement(Svg, { width: size, height: size * 2, viewBox: "0 0 12 24", fill: "none" }, /* @__PURE__ */ React7.createElement(
Path,
{
fillRule: "evenodd",
clipRule: "evenodd",
d: "M10.1569 12.7111L4.49994 18.3681L3.08594 16.9541L8.03594 12.0041L3.08594 7.05414L4.49994 5.64014L10.1569 11.2971C10.3444 11.4847 10.4497 11.739 10.4497 12.0041C10.4497 12.2693 10.3444 12.5236 10.1569 12.7111Z",
fill: color
}
));
};
var BroadcastIcon = (props) => {
const { size = 25, color = "black" } = props;
return /* @__PURE__ */ React7.createElement(Svg, { width: size, height: size, viewBox: "0 0 20 20", fill: "none" }, /* @__PURE__ */ React7.createElement(
Path,
{
d: "M14.158 1.02584C14.2838 1.06763 14.3879 1.15768 14.4474 1.2762C14.5068 1.39472 14.5167 1.532 14.475 1.65784L13.975 3.15784C13.9331 3.28382 13.8428 3.38799 13.7241 3.44744C13.6054 3.50689 13.468 3.51675 13.342 3.47484C13.216 3.43294 13.1118 3.34271 13.0524 3.224C12.9929 3.10529 12.9831 2.96782 13.025 2.84184L13.525 1.34184C13.5458 1.27951 13.5786 1.22189 13.6217 1.17226C13.6648 1.12264 13.7172 1.08199 13.776 1.05265C13.8348 1.0233 13.8988 1.00582 13.9643 1.00123C14.0299 0.996627 14.0957 1.00499 14.158 1.02584ZM17.855 2.85384C17.9014 2.80736 17.9382 2.75218 17.9633 2.69147C17.9884 2.63075 18.0013 2.56569 18.0013 2.49999C18.0012 2.43429 17.9882 2.36925 17.963 2.30857C17.9379 2.24789 17.901 2.19277 17.8545 2.14634C17.808 2.09992 17.7528 2.06311 17.6921 2.03801C17.6314 2.01291 17.5663 2.00002 17.5006 2.00007C17.4349 2.00011 17.3699 2.0131 17.3092 2.03828C17.2485 2.06347 17.1934 2.10036 17.147 2.14684L15.147 4.14684C15.0559 4.24115 15.0055 4.36745 15.0066 4.49855C15.0078 4.62964 15.0604 4.75505 15.1531 4.84775C15.2458 4.94046 15.3712 4.99304 15.5023 4.99418C15.6334 4.99532 15.7597 4.94492 15.854 4.85384L17.855 2.85384ZM7.60698 3.14584C7.74648 2.85208 7.95551 2.59676 8.21596 2.40201C8.47641 2.20726 8.78042 2.07897 9.10164 2.02824C9.42287 1.97751 9.75162 2.00587 10.0594 2.11088C10.3672 2.21589 10.6447 2.39436 10.868 2.63084L17.455 9.61084C17.6748 9.84373 17.8355 10.126 17.9235 10.4339C18.0115 10.7418 18.0243 11.0663 17.9608 11.3802C17.8973 11.6941 17.7594 11.9882 17.5586 12.2376C17.3578 12.4871 17.1 12.6847 16.807 12.8138L12.87 14.5498C13.0159 15.0703 13.0395 15.6175 12.9387 16.1486C12.838 16.6797 12.6158 17.1803 12.2895 17.6113C11.9631 18.0422 11.5415 18.3918 11.0576 18.6327C10.57