stream-chat-react
Version:
React components to create chat conversations or livestream style chat
1,054 lines • 225 kB
JavaScript
//#region \0rolldown/runtime.js
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
key = keys[i];
if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
get: ((k) => from[k]).bind(null, key),
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
});
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
value: mod,
enumerable: true
}) : target, mod));
//#endregion
let react = require("react");
react = __toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
let stream_chat = require("stream-chat");
let nanoid = require("nanoid");
let use_sync_external_store_shim = require("use-sync-external-store/shim");
let react_dom = require("react-dom");
let dayjs = require("dayjs");
dayjs = __toESM(dayjs);
let dayjs_plugin_calendar = require("dayjs/plugin/calendar");
dayjs_plugin_calendar = __toESM(dayjs_plugin_calendar);
let dayjs_plugin_localizedFormat = require("dayjs/plugin/localizedFormat");
dayjs_plugin_localizedFormat = __toESM(dayjs_plugin_localizedFormat);
let clsx = require("clsx");
clsx = __toESM(clsx);
let _floating_ui_react = require("@floating-ui/react");
let lodash_debounce = require("lodash.debounce");
lodash_debounce = __toESM(lodash_debounce);
let lodash_throttle = require("lodash.throttle");
lodash_throttle = __toESM(lodash_throttle);
let react_fast_compare = require("react-fast-compare");
react_fast_compare = __toESM(react_fast_compare);
let emoji_regex = require("emoji-regex");
emoji_regex = __toESM(emoji_regex);
let linkifyjs = require("linkifyjs");
linkifyjs = __toESM(linkifyjs);
//#region src/context/ChannelActionContext.tsx
var ChannelActionContext = react.default.createContext(void 0);
var ChannelActionProvider = ({ children, value }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelActionContext.Provider, {
value,
children
});
var useChannelActionContext = (componentName) => {
const contextValue = (0, react.useContext)(ChannelActionContext);
if (!contextValue) {
console.warn(`The useChannelActionContext hook was called outside of the ChannelActionContext provider. Make sure this hook is called within a child of the Channel component. The errored call is located in the ${componentName} component.`);
return {};
}
return contextValue;
};
//#endregion
//#region src/context/ChannelListContext.tsx
var ChannelListContext = (0, react.createContext)(void 0);
/**
* Context provider for components rendered within the `ChannelList`
*/
var ChannelListContextProvider = ({ children, value }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelListContext.Provider, {
value,
children
});
var useChannelListContext = () => {
const contextValue = (0, react.useContext)(ChannelListContext);
if (!contextValue) return {};
return contextValue;
};
//#endregion
//#region src/context/ChannelStateContext.tsx
var ChannelStateContext = react.default.createContext(void 0);
var ChannelStateProvider = ({ children, value }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelStateContext.Provider, {
value,
children
});
var remainingWarningCount = 1;
var useChannelStateContext = (componentName) => {
const contextValue = (0, react.useContext)(ChannelStateContext);
if (!contextValue) {
if (componentName && remainingWarningCount > 0) {
console.warn(`The useChannelStateContext hook was called outside of the ChannelStateContext provider. Make sure this hook is called within a child of the Channel component. The errored call is located in the ${componentName} component.`);
remainingWarningCount -= 1;
}
return {};
}
return contextValue;
};
//#endregion
//#region src/context/ChatContext.tsx
var ChatContext = react.default.createContext(void 0);
var ChatProvider = ({ children, value }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChatContext.Provider, {
value,
children
});
var useChatContext = (componentName) => {
const contextValue = (0, react.useContext)(ChatContext);
if (!contextValue) {
console.warn(`The useChatContext hook was called outside of the ChatContext provider. Make sure this hook is called within a child of the Chat component. The errored call is located in the ${componentName} component.`);
return {};
}
return contextValue;
};
//#endregion
//#region src/context/ComponentContext.tsx
var ComponentContext = react.default.createContext({});
var ComponentProvider = ({ children, value }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext.Provider, {
value,
children
});
var useComponentContext = (_componentName) => (0, react.useContext)(ComponentContext);
//#endregion
//#region src/components/Dialog/service/DialogManager.ts
/**
* Keeps a map of Dialog objects.
* Dialog can be controlled via `Dialog` object retrieved using `useDialog()` hook.
* The hook returns an object with the following API:
*
* - `dialog.open()` - opens the dialog
* - `dialog.close()` - closes the dialog
* - `dialog.toggle()` - toggles the dialog open state. Accepts boolean argument closeAll. If enabled closes any other dialog that would be open.
* - `dialog.remove()` - removes the dialog object reference from the state (primarily for cleanup purposes)
*/
var DialogManager = class {
constructor({ closeOnClickOutside = true, id } = {}) {
this.state = new stream_chat.StateStore({
dialogsById: {},
openedDialogIds: []
});
this.remove = (id) => {
const dialog = this.get(id);
if (!dialog) return;
if (dialog.removalTimeout) clearTimeout(dialog.removalTimeout);
this.state.next((current) => {
const newDialogs = { ...current.dialogsById };
delete newDialogs[id];
return {
...current,
dialogsById: newDialogs,
openedDialogIds: current.openedDialogIds.filter((dialogId) => dialogId !== id)
};
});
};
this.closeOnClickOutside = closeOnClickOutside;
this.id = id ?? (0, nanoid.nanoid)();
}
get openDialogCount() {
return this.state.getLatestValue().openedDialogIds.length;
}
get(id) {
return this.state.getLatestValue().dialogsById[id];
}
getOrCreate({ closeOnClickOutside, id }) {
let dialog = this.get(id);
if (!dialog) {
dialog = {
close: () => {
this.close(id);
},
closeOnClickOutside,
id,
isOpen: false,
open: () => {
this.open({ id });
},
removalTimeout: void 0,
remove: () => {
this.remove(id);
},
toggle: (closeAll = false) => {
this.toggle({ id }, closeAll);
}
};
this.state.next((current) => ({
...current,
dialogsById: {
...current.dialogsById,
[id]: dialog
}
}));
}
if (dialog.closeOnClickOutside !== closeOnClickOutside || !!dialog.removalTimeout) {
if (dialog.removalTimeout) clearTimeout(dialog.removalTimeout);
this.state.next((current) => ({
...current,
dialogsById: {
...current.dialogsById,
[id]: {
...current.dialogsById[id],
closeOnClickOutside,
removalTimeout: void 0
}
},
openedDialogIds: current.dialogsById[id]?.isOpen ? [...current.openedDialogIds.filter((dialogId) => dialogId !== id), id] : current.openedDialogIds
}));
}
return dialog;
}
open(params, closeRest) {
const dialog = this.getOrCreate(params);
if (dialog.isOpen) return;
if (closeRest) this.closeAll();
this.state.next((current) => ({
...current,
dialogsById: {
...current.dialogsById,
[dialog.id]: {
...dialog,
isOpen: true
}
},
openedDialogIds: [...current.openedDialogIds.filter((dialogId) => dialogId !== dialog.id), dialog.id]
}));
}
close(id) {
const dialog = this.state.getLatestValue().dialogsById[id];
if (!dialog?.isOpen) return;
this.state.next((current) => ({
...current,
dialogsById: {
...current.dialogsById,
[dialog.id]: {
...dialog,
isOpen: false
}
},
openedDialogIds: current.openedDialogIds.filter((dialogId) => dialogId !== id)
}));
}
closeAll() {
Object.values(this.state.getLatestValue().dialogsById).forEach((dialog) => dialog.close());
}
toggle(params, closeAll = false) {
if (this.state.getLatestValue().dialogsById[params.id]?.isOpen) this.close(params.id);
else this.open(params, closeAll);
}
/**
* Marks the dialog state as unused. If the dialog id is referenced again quickly,
* the state will not be removed. Otherwise, the state will be removed after
* a short timeout.
*/
markForRemoval(id) {
const dialog = this.get(id);
if (!dialog) return;
this.state.next((current) => ({
...current,
dialogsById: {
...current.dialogsById,
[id]: {
...dialog,
removalTimeout: setTimeout(() => {
this.remove(id);
}, 16)
}
},
openedDialogIds: current.openedDialogIds.filter((dialogId) => dialogId !== id)
}));
}
cancelPendingRemoval(id) {
const dialog = this.get(id);
if (!dialog?.removalTimeout) return;
clearTimeout(dialog.removalTimeout);
this.state.next((current) => ({
...current,
dialogsById: {
...current.dialogsById,
[id]: {
...current.dialogsById[id],
removalTimeout: void 0
}
},
openedDialogIds: current.dialogsById[id]?.isOpen ? [...current.openedDialogIds.filter((dialogId) => dialogId !== id), id] : current.openedDialogIds
}));
}
};
//#endregion
//#region src/store/hooks/useStateStore.ts
var noop = () => {};
function useStateStore(store, selector) {
return (0, use_sync_external_store_shim.useSyncExternalStore)((0, react.useCallback)((onStoreChange) => {
return store?.subscribeWithSelector(selector, onStoreChange) ?? noop;
}, [store, selector]), (0, react.useMemo)(() => {
let cachedTuple;
return () => {
const currentValue = store?.getLatestValue();
if (!currentValue) return void 0;
if (cachedTuple && cachedTuple[0] === currentValue) return cachedTuple[1];
const newlySelected = selector(currentValue);
if (cachedTuple) {
let selectededAreEqualToCached = true;
for (const key in cachedTuple[1]) {
if (cachedTuple[1][key] === newlySelected[key]) continue;
selectededAreEqualToCached = false;
break;
}
if (selectededAreEqualToCached) return cachedTuple[1];
}
cachedTuple = [currentValue, newlySelected];
return cachedTuple[1];
};
}, [store, selector]));
}
//#endregion
//#region src/components/Dialog/hooks/useDialog.ts
var useDialog = ({ closeOnClickOutside, dialogManagerId, id }) => {
const { dialogManager } = useDialogManager({ dialogManagerId });
(0, react.useEffect)(() => {
dialogManager.cancelPendingRemoval(id);
return () => {
dialogManager.markForRemoval(id);
};
}, [dialogManager, id]);
return dialogManager.getOrCreate({
closeOnClickOutside,
id
});
};
var useDialogOnNearestManager = ({ id }) => {
const { dialogManager } = useNearestDialogManagerContext() ?? {};
return {
dialog: useDialog({
dialogManagerId: dialogManager?.id,
id
}),
dialogManager
};
};
var modalDialogId = "modal-dialog";
var useModalDialog = (id = modalDialogId) => useDialog({
dialogManagerId: modalDialogManagerId,
id
});
var useDialogIsOpen = (id, dialogManagerId) => {
const { dialogManager } = useDialogManager({ dialogManagerId });
const dialogIsOpenSelector = (0, react.useCallback)(({ dialogsById }) => ({ isOpen: !!dialogsById[id]?.isOpen }), [id]);
return useStateStore(dialogManager.state, dialogIsOpenSelector).isOpen;
};
var useModalDialogIsOpen = (id = modalDialogId) => useDialogIsOpen(id, modalDialogManagerId);
var useDialogIsTopmost = (id, dialogManagerId) => {
const { dialogManager } = useDialogManager({ dialogManagerId });
const dialogIsTopmostSelector = (0, react.useCallback)(({ openedDialogIds }) => ({ isTopmost: openedDialogIds[openedDialogIds.length - 1] === id }), [id]);
return useStateStore(dialogManager.state, dialogIsTopmostSelector).isTopmost;
};
var useModalDialogIsTopmost = (id = modalDialogId) => useDialogIsTopmost(id, modalDialogManagerId);
var openedDialogCountSelector = (nextValue) => ({ openedDialogCount: nextValue.openedDialogIds.length });
var useOpenedDialogCount = ({ dialogManagerId } = {}) => {
const { dialogManager } = useDialogManager({ dialogManagerId });
return useStateStore(dialogManager.state, openedDialogCountSelector).openedDialogCount;
};
//#endregion
//#region src/components/Portal/Portal.ts
var Portal = ({ children, getPortalDestination, isOpen }) => {
const [portalDestination, setPortalDestination] = (0, react.useState)(null);
(0, react.useLayoutEffect)(() => {
const destination = getPortalDestination();
if (!destination || !isOpen) return;
setPortalDestination(destination);
}, [getPortalDestination, isOpen]);
if (!portalDestination) return null;
return (0, react_dom.createPortal)(children, portalDestination);
};
//#endregion
//#region src/components/Dialog/service/DialogPortal.tsx
var shouldCloseOnOutsideClick = ({ dialog, managerCloseOnClickOutside }) => dialog.closeOnClickOutside ?? managerCloseOnClickOutside;
var DialogPortalDestination = () => {
const { dialogManager } = useNearestDialogManagerContext() ?? {};
const openedDialogCount = useOpenedDialogCount({ dialogManagerId: dialogManager?.id });
const [destinationRoot, setDestinationRoot] = (0, react.useState)(null);
(0, react.useEffect)(() => {
if (!destinationRoot || !dialogManager) return;
const handleDocumentClick = (event) => {
const target = event.target;
const clickedOverlay = target.closest?.("[data-str-chat__portal-id]");
if (clickedOverlay && clickedOverlay !== destinationRoot) return;
if (target !== destinationRoot && destinationRoot.contains(target)) return;
setTimeout(() => {
Object.values(dialogManager.state.getLatestValue().dialogsById).forEach((dialog) => {
if (!dialog.isOpen) return;
if (!shouldCloseOnOutsideClick({
dialog,
managerCloseOnClickOutside: dialogManager.closeOnClickOutside
})) return;
dialogManager.close(dialog.id);
});
}, 0);
};
document.addEventListener("click", handleDocumentClick, { capture: true });
return () => {
document.removeEventListener("click", handleDocumentClick, { capture: true });
};
}, [destinationRoot, dialogManager]);
if (!openedDialogCount) return null;
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: "str-chat__dialog-overlay",
"data-str-chat__portal-id": dialogManager?.id,
"data-testid": "str-chat__dialog-overlay",
ref: setDestinationRoot,
style: { "--str-chat__dialog-overlay-height": openedDialogCount > 0 ? "100%" : "0" }
});
};
var DialogPortalEntry = ({ children, dialogId, dialogManagerId }) => {
const { dialogManager } = useDialogManager({
dialogId,
dialogManagerId
});
const dialogIsOpen = useDialogIsOpen(dialogId, dialogManagerId);
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Portal, {
getPortalDestination: (0, react.useCallback)(() => document.querySelector(`div[data-str-chat__portal-id="${dialogManager.id}"]`), [dialogManager.id]),
isOpen: dialogIsOpen,
children
});
};
//#endregion
//#region src/context/DialogManagerContext.tsx
var dialogManagersRegistry = new stream_chat.StateStore({});
var getDialogManager = (id) => dialogManagersRegistry.getLatestValue()[id];
var getOrCreateDialogManager = ({ closeOnClickOutside, id }) => {
let manager = getDialogManager(id);
if (!manager) {
manager = new DialogManager({
closeOnClickOutside,
id
});
dialogManagersRegistry.partialNext({ [id]: manager });
} else if (typeof closeOnClickOutside === "boolean") manager.closeOnClickOutside = closeOnClickOutside;
return manager;
};
var removeDialogManager = (id) => {
if (!getDialogManager(id)) return;
dialogManagersRegistry.partialNext({ [id]: void 0 });
};
var DialogManagerProviderContext = react.default.createContext(void 0);
/**
* Creates/provides a dialog manager and its portal destination.
*/
var DialogManagerProvider = ({ children, closeOnClickOutside, id }) => {
const [dialogManager, setDialogManager] = (0, react.useState)(() => {
if (id) return getDialogManager(id) ?? null;
return new DialogManager({ closeOnClickOutside });
});
(0, react.useEffect)(() => {
if (!id) return;
setDialogManager(getOrCreateDialogManager({
closeOnClickOutside,
id
}));
return () => {
removeDialogManager(id);
setDialogManager(null);
};
}, [closeOnClickOutside, id]);
if (!dialogManager) return null;
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogManagerProviderContext.Provider, {
value: { dialogManager },
children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogPortalDestination, {})]
});
};
var getManagerFromStore = ({ dialogId, dialogManagerId, newState, previousState }) => {
let managerInNewState;
let managerInPrevState;
if (dialogManagerId) if (!dialogId) {
managerInNewState = newState[dialogManagerId];
managerInPrevState = previousState?.[dialogManagerId];
} else {
if (newState[dialogManagerId]?.get(dialogId)) managerInNewState = newState[dialogManagerId];
if (previousState?.[dialogManagerId]?.get(dialogId)) managerInPrevState = previousState[dialogManagerId];
}
else if (dialogId) {
managerInNewState = Object.values(newState).find((dialogMng) => dialogId && dialogMng?.get(dialogId));
managerInPrevState = previousState && Object.values(previousState).find((dialogMng) => dialogId && dialogMng?.get(dialogId));
}
return {
managerInNewState,
managerInPrevState
};
};
/**
* Retrieves the nearest dialog manager or searches for the dialog manager by dialog manager id or dialog id.
* Dialog id will take precedence over dialog manager id if both are provided and dialog manager is found by dialog id.
*/
var useDialogManager = ({ dialogId, dialogManagerId } = {}) => {
const nearestDialogManagerContext = (0, react.useContext)(DialogManagerProviderContext);
const [dialogManagerContext, setDialogManagerContext] = (0, react.useState)(() => {
const { managerInNewState } = getManagerFromStore({
dialogId,
dialogManagerId,
newState: dialogManagersRegistry.getLatestValue(),
previousState: void 0
});
return managerInNewState ? { dialogManager: managerInNewState } : nearestDialogManagerContext;
});
(0, react.useEffect)(() => {
if (!dialogId && !dialogManagerId) return;
const unsubscribe = dialogManagersRegistry.subscribeWithSelector((state) => state, (newState, previousState) => {
const { managerInNewState, managerInPrevState } = getManagerFromStore({
dialogId,
dialogManagerId,
newState,
previousState
});
if (!managerInPrevState || managerInNewState?.id !== managerInPrevState.id) setDialogManagerContext((prevState) => {
if (prevState?.dialogManager.id === managerInNewState?.id) return prevState;
return { dialogManager: managerInNewState || nearestDialogManagerContext?.dialogManager };
});
});
return () => {
unsubscribe();
};
}, [
dialogId,
dialogManagerId,
nearestDialogManagerContext?.dialogManager
]);
if (!dialogManagerContext?.dialogManager) console.warn(`Dialog manager (manager id: ${dialogManagerId}, dialog id: ${dialogId}) is not available`);
return dialogManagerContext;
};
var modalDialogManagerId = "modal-dialog-manager";
var ModalDialogManagerProvider = ({ children }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogManagerProvider, {
id: modalDialogManagerId,
children
});
var useModalDialogManager = () => (0, react.useMemo)(() => getDialogManager(modalDialogManagerId), []);
var useNearestDialogManagerContext = () => (0, react.useContext)(DialogManagerProviderContext);
//#endregion
//#region src/context/MessageComposerContext.tsx
var MessageComposerContext = (0, react.createContext)(void 0);
var MessageComposerContextProvider = ({ children, value }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageComposerContext.Provider, {
value,
children
});
var useMessageComposerContext = (componentName) => {
const contextValue = (0, react.useContext)(MessageComposerContext);
if (!contextValue) return {};
return contextValue;
};
//#endregion
//#region src/i18n/utils.ts
var isNumberOrString = (output) => typeof output === "string" || typeof output === "number";
var isDayOrMoment = (output) => !!output?.isSame;
var isDate = (output) => output !== null && typeof output === "object" && typeof output.getTime === "function";
var DEFAULT_RELATIVE_COMPACT_MAX_DAYS = 6;
var DEFAULT_RELATIVE_COMPACT_MAX_WEEKS = 3;
/**
* Turns a date into a short, readable label: "Today", "Yesterday", "2d ago", "1w ago",
* or a calendar date (DD/MM/YY) for older or future dates.
*
* What appears for each period:
* - Same day → "Today"
* - Yesterday → "Yesterday"
* - 2 to maxDays days ago → "2d ago", "3d ago", … "Nd ago"
* - If maxWeeks is greater than 0: 1 to maxWeeks weeks ago → "1w ago", "2w ago", …
* - Anything older (or in the future) → calendar date
*
* To change the wording or which label is used, add these to your locale JSON (example in English):
*
* "timestamp/relativeToday": "Today",
* "timestamp/relativeYesterday": "Yesterday",
* "timestamp/relativeDaysAgo": "{{ count }}d ago",
* "timestamp/relativeWeeksAgo": "{{ count }}w ago",
*
* To use this style for a timestamp (e.g. poll votes), add for example:
*
* "timestamp/PollVote": "{{ timestamp | timestampFormatter(relativeCompact: true) }}"
*
* Only "Xd ago", no "Xw ago" (anything 7+ days ago shows as a date):
*
* "timestamp/PollVote": "{{ timestamp | timestampFormatter(relativeCompact: true; relativeCompactMaxWeeks: 0) }}"
*
* To change how far "days ago" and "weeks ago" go: use relativeCompactMaxDays and
* relativeCompactMaxWeeks in the formatter (e.g. relativeCompactMaxWeeks: 2 for only 1w and 2w ago).
*/
function getRelativeCompactDateString(messageCreatedAt, t, tDateTimeParser, maxDays = DEFAULT_RELATIVE_COMPACT_MAX_DAYS, maxWeeks = DEFAULT_RELATIVE_COMPACT_MAX_WEEKS) {
const then = tDateTimeParser(messageCreatedAt);
if (!isDayOrMoment(then)) return null;
const now = tDateTimeParser((/* @__PURE__ */ new Date()).toISOString());
if (!isDayOrMoment(now)) return null;
const diffDays = now.startOf("day").diff(then.startOf("day"), "day");
if (diffDays < 0) return then.format("DD/MM/YY");
if (diffDays === 0) return t("timestamp/relativeToday");
if (diffDays === 1) return t("timestamp/relativeYesterday");
if (diffDays >= 2 && diffDays <= maxDays) return t("timestamp/relativeDaysAgo", { count: diffDays });
if (maxWeeks > 0) {
const maxDaysForWeeks = maxWeeks * 7;
if (diffDays >= 7 && diffDays <= maxDaysForWeeks) return t("timestamp/relativeWeeksAgo", { count: Math.ceil(diffDays / 7) });
}
return then.format("DD/MM/YY");
}
function getDateString({ calendar, calendarFormats, format, formatDate, messageCreatedAt, relativeCompact, relativeCompactMaxDays, relativeCompactMaxWeeks, t, tDateTimeParser, timestampTranslationKey }) {
if (!messageCreatedAt || typeof messageCreatedAt === "string" && !Date.parse(messageCreatedAt)) return null;
if (typeof formatDate === "function") return formatDate(new Date(messageCreatedAt));
if (relativeCompact && t && tDateTimeParser) {
const maxDays = typeof relativeCompactMaxDays === "number" ? relativeCompactMaxDays : typeof relativeCompactMaxDays === "string" ? parseInt(relativeCompactMaxDays, 10) : DEFAULT_RELATIVE_COMPACT_MAX_DAYS;
const maxWeeks = typeof relativeCompactMaxWeeks === "number" ? relativeCompactMaxWeeks : typeof relativeCompactMaxWeeks === "string" ? parseInt(relativeCompactMaxWeeks, 10) : DEFAULT_RELATIVE_COMPACT_MAX_WEEKS;
const result = getRelativeCompactDateString(messageCreatedAt, t, tDateTimeParser, Number.isNaN(maxDays) ? DEFAULT_RELATIVE_COMPACT_MAX_DAYS : maxDays, Number.isNaN(maxWeeks) ? DEFAULT_RELATIVE_COMPACT_MAX_WEEKS : maxWeeks);
if (result) return result;
}
if (t && timestampTranslationKey) {
const options = {};
if (typeof calendar !== "undefined" && calendar !== null) options.calendar = calendar;
if (typeof calendarFormats !== "undefined" && calendarFormats !== null) options.calendarFormats = calendarFormats;
if (typeof format !== "undefined" && format !== null) options.format = format;
const translatedTimestamp = t(timestampTranslationKey, {
...options,
timestamp: new Date(messageCreatedAt)
});
if (timestampTranslationKey !== translatedTimestamp) return translatedTimestamp;
}
if (!tDateTimeParser) return null;
const parsedTime = tDateTimeParser(messageCreatedAt);
if (isDayOrMoment(parsedTime))
/**
* parsedTime.calendar is guaranteed on the type but is only
* available when a user calls dayjs.extend(calendar)
*/
return calendar && parsedTime.calendar ? parsedTime.calendar(void 0, calendarFormats || void 0) : parsedTime.format(format || void 0);
if (isDate(parsedTime)) return parsedTime.toDateString();
if (isNumberOrString(parsedTime)) return parsedTime;
return null;
}
var predefinedFormatters = {
durationFormatter: (streamI18n) => (value, _, { format, withSuffix }) => {
const durationValue = value;
if (format && dayjs.default.isDayjs(streamI18n.DateTimeParser)) return streamI18n.DateTimeParser.duration(durationValue).format(format);
return streamI18n.DateTimeParser.duration(durationValue).humanize(!!withSuffix);
},
timestampFormatter: (streamI18n) => (value, _, { calendarFormats, ...options }) => {
let parsedCalendarFormats;
try {
if (!options.calendar) parsedCalendarFormats = {};
else if (typeof calendarFormats === "string") parsedCalendarFormats = JSON.parse(calendarFormats);
else if (typeof calendarFormats === "object") parsedCalendarFormats = calendarFormats;
} catch (e) {
console.error("[TIMESTAMP FORMATTER]", e);
}
const result = getDateString({
...options,
calendarFormats: parsedCalendarFormats,
messageCreatedAt: value,
t: streamI18n.t,
tDateTimeParser: streamI18n.tDateTimeParser
});
if (!result || typeof result === "number") return JSON.stringify(value);
return result;
}
};
var defaultTranslatorFunction = ((key) => key);
var defaultDateTimeParser = (input) => (0, dayjs.default)(input);
var isLanguageSupported = (language) => {
return [
"de",
"en",
"es",
"fr",
"hi",
"it",
"ja",
"ko",
"nl",
"pt",
"ru",
"tr"
].some((translation) => language === translation);
};
//#endregion
//#region src/context/TranslationContext.tsx
dayjs.default.extend(dayjs_plugin_calendar.default);
dayjs.default.extend(dayjs_plugin_localizedFormat.default);
var TranslationContext = react.default.createContext({
t: defaultTranslatorFunction,
tDateTimeParser: defaultDateTimeParser,
userLanguage: "en"
});
var TranslationProvider = ({ children, value }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TranslationContext.Provider, {
value,
children
});
var useTranslationContext = (componentName) => {
const contextValue = (0, react.useContext)(TranslationContext);
if (!contextValue) {
console.warn(`The useTranslationContext hook was called outside of the TranslationContext provider. Make sure this hook is called within a child of the Chat component. The errored call is located in the ${componentName} component.`);
return {};
}
return contextValue;
};
//#endregion
//#region src/context/TypingContext.tsx
var TypingContext = react.default.createContext(void 0);
var TypingProvider = ({ children, value }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TypingContext.Provider, {
value,
children
});
var useTypingContext = (componentName) => {
const contextValue = (0, react.useContext)(TypingContext);
if (!contextValue) {
console.warn(`The useTypingContext hook was called outside of the TypingContext provider. Make sure this hook is called within a child of the Channel component. The errored call is located in the ${componentName} component.`);
return {};
}
return contextValue;
};
//#endregion
//#region src/components/Notifications/notificationTarget.ts
var NOTIFICATION_TARGET_PANELS = [
"channel",
"thread",
"channel-list",
"thread-list",
"modal"
];
var isNotificationTargetPanel = (value) => typeof value === "string" && NOTIFICATION_TARGET_PANELS.includes(value);
var getNotificationTargetPanel = (notification) => {
const targetTag = notification.tags?.find((tag) => tag.startsWith("target:"));
if (targetTag) {
const candidate = targetTag.slice(7);
if (isNotificationTargetPanel(candidate)) return candidate;
}
const panel = notification.origin.context?.panel;
return isNotificationTargetPanel(panel) ? panel : void 0;
};
var getNotificationTargetPanels = (notification) => {
const targetPanels = (notification.tags ?? []).filter((tag) => tag.startsWith("target:")).map((tag) => tag.slice(7)).filter((value) => isNotificationTargetPanel(value));
if (targetPanels.length > 0) return Array.from(new Set(targetPanels));
const panel = notification.origin.context?.panel;
return isNotificationTargetPanel(panel) ? [panel] : [];
};
var getNotificationTargetTag = (panel) => `target:${panel}`;
var addNotificationTargetTag = (panel, tags) => {
if (!panel) return tags ?? [];
return Array.from(new Set([getNotificationTargetTag(panel), ...tags ?? []]));
};
var isNotificationForPanel = (notification, panel, options) => {
const explicitTargetPanels = getNotificationTargetPanels(notification);
if (explicitTargetPanels.length > 0) return explicitTargetPanels.includes(panel);
return (options?.fallbackPanel ?? "channel") === panel;
};
//#endregion
//#region src/components/Dialog/hooks/usePopoverPosition.ts
var hasResizeObserver = typeof window !== "undefined" && "ResizeObserver" in window;
function autoMiddlewareFor(p) {
if (!String(p).startsWith("auto")) return null;
return (0, _floating_ui_react.autoPlacement)({ alignment: p === "auto-start" ? "start" : p === "auto-end" ? "end" : void 0 });
}
function toOffsetMw(opt) {
if (opt == null) return null;
if (Array.isArray(opt)) {
const [crossAxis, mainAxis] = opt;
return (0, _floating_ui_react.offset)({
crossAxis,
mainAxis
});
}
if (typeof opt === "number") return (0, _floating_ui_react.offset)(opt);
return (0, _floating_ui_react.offset)(opt);
}
function usePopoverPosition({ allowFlip = true, allowShift = true, autoUpdateOptions, fitAvailableSpace = false, freeze = false, offset, placement = "bottom-start", shiftOptions }) {
const autoMw = autoMiddlewareFor(placement);
const offsetMiddleware = toOffsetMw(offset);
const isSidePlacement = placement.startsWith("left") || placement.startsWith("right");
const mergedShiftOptions = shiftOptions ? {
padding: 8,
...shiftOptions
} : { padding: 8 };
return (0, _floating_ui_react.useFloating)({
middleware: [
...offsetMiddleware ? [offsetMiddleware] : [],
...autoMw ? [autoMw] : allowFlip && !isSidePlacement ? [(0, _floating_ui_react.flip)()] : [],
...allowShift ? [(0, _floating_ui_react.shift)(mergedShiftOptions)] : [],
...fitAvailableSpace ? [(0, _floating_ui_react.size)({ apply: () => {} })] : []
],
placement: String(placement).startsWith("auto") ? "bottom" : placement,
strategy: "fixed",
whileElementsMounted: freeze ? void 0 : (reference, floating, update) => (0, _floating_ui_react.autoUpdate)(reference, floating, update, {
ancestorResize: true,
ancestorScroll: true,
animationFrame: false,
elementResize: hasResizeObserver,
...autoUpdateOptions
})
});
}
//#endregion
//#region src/components/Button/Button.tsx
var variantToClass = {
danger: "str-chat__button--destructive",
primary: "str-chat__button--primary",
secondary: "str-chat__button--secondary"
};
var appearanceToClass = {
ghost: "str-chat__button--ghost",
outline: "str-chat__button--outline",
solid: "str-chat__button--solid"
};
var sizeToClass = {
lg: "str-chat__button--size-lg",
md: "str-chat__button--size-md",
sm: "str-chat__button--size-sm",
xs: "str-chat__button--size-xs"
};
var Button = (0, react.forwardRef)(function Button({ appearance, children, circular, className, inverseTheme, size, variant, ...props }, ref) {
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
ref,
type: "button",
...props,
className: (0, clsx.default)("str-chat__button", variant != null && variantToClass[variant], appearance != null && appearanceToClass[appearance], circular && "str-chat__button--circular", inverseTheme && "str-chat__theme-inverse", size != null && sizeToClass[size], className),
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: "str-chat__button__content",
children
})
});
});
//#endregion
//#region src/components/Icons/BaseIcon.tsx
var BaseIcon = ({ className, decorative = true, ...props }) => {
const ariaHidden = props["aria-hidden"] ?? (decorative ? true : void 0);
const focusable = props.focusable ?? (decorative ? false : void 0);
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
viewBox: "0 0 20 20",
xmlns: "http://www.w3.org/2000/svg",
...props,
"aria-hidden": ariaHidden,
className: (0, clsx.default)("str-chat__icon", className),
focusable
});
};
//#endregion
//#region src/components/Icons/createIcon.tsx
function toIconClass(name) {
return "str-chat__icon--" + name.replace(/^Icon/, "").replace(/([a-z])([A-Z])/g, "$1-$2").replace(/([A-Za-z])(\d)/g, "$1-$2").replace(/(\d)([A-Za-z])/g, "$1-$2").replace(/_/g, "-").toLowerCase();
}
function createIcon(name, content, defaultProps) {
const iconClass = toIconClass(name);
const Icon = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BaseIcon, {
...defaultProps,
...props,
className: (0, clsx.default)(iconClass, className),
children: content
});
Icon.displayName = name;
return Icon;
}
//#endregion
//#region src/components/Icons/icons.tsx
var IconLeave = createIcon("IconLeave", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
d: "M8.75 3.125H3.75V16.875H8.75M8.75 10H17.5M17.5 10L14.375 6.875M17.5 10L14.375 13.125",
fill: "none",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "1.5"
}));
var IconArrowDown = createIcon("IconArrowDown", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
d: "M10 3.125V16.875M10 16.875L4.375 11.25M10 16.875L15.625 11.25",
fill: "none",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "1.5"
}));
var IconArrowDownCircle = createIcon("IconArrowDownCircle", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
d: "M7.5 10.625L10 13.125M10 13.125L12.5 10.625M10 13.125V6.875M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z",
fill: "none",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "1.5"
}));
var IconArrowLeft = createIcon("IconArrowLeft", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
d: "M16.875 10H3.125M3.125 10L8.75 4.375M3.125 10L8.75 15.625",
fill: "none",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "1.5"
}), { "data-rtl-mirror": "" });
var IconArrowUpRight = createIcon("IconArrowUpRight", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
d: "M5 15L15 5M15 5H6.875M15 5V13.125",
fill: "none",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "1.5"
}), { "data-rtl-mirror": "" });
var IconRetry = createIcon("IconRetry", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
d: "M14.3751 8.12481H18.1251M18.1251 8.12481V4.37481M18.1251 8.12481L14.8618 5.13809C13.9063 4.18263 12.6904 3.52991 11.3661 3.26151C10.0418 2.9931 8.66771 3.12091 7.41561 3.62896C6.1635 4.137 5.08887 5.00276 4.32599 6.11806C3.5631 7.23336 3.1458 8.54875 3.12621 9.89986C3.10662 11.251 3.48562 12.5779 4.21585 13.7148C4.94609 14.8518 5.99517 15.7483 7.23202 16.2925C8.46887 16.8366 9.83865 17.0042 11.1702 16.7743C12.5018 16.5444 13.736 15.9272 14.7188 14.9998",
fill: "none",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "1.5"
}));
var IconRefresh = createIcon("IconRefresh", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
d: "M13.125 7.49978H16.875M16.875 7.49978V3.74978M16.875 7.49978L14.6656 5.29041C13.3861 4.01095 11.6538 3.2875 9.84437 3.27697C8.03494 3.26644 6.29431 3.96968 5 5.23416M6.875 12.4998H3.125M3.125 12.4998V16.2498M3.125 12.4998L5.33437 14.7092C6.61388 15.9886 8.34621 16.7121 10.1556 16.7226C11.9651 16.7331 13.7057 16.0299 15 14.7654",
fill: "none",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "1.5"
}));
var IconReply = createIcon("IconReply", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
d: "M17.5812 15.525C16.2953 14.1555 12.9195 11.25 8.12265 11.25V15L1.87265 8.75L8.12265 2.5V6.25C12.2476 6.25 17.5359 10.1914 18.1226 15.2766C18.1308 15.3424 18.1177 15.4091 18.0854 15.4671C18.0531 15.525 18.0031 15.5712 17.9428 15.5988C17.8825 15.6265 17.815 15.6343 17.75 15.621C17.685 15.6077 17.6259 15.5741 17.5812 15.525Z",
fill: "none",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "1.5"
}), { "data-rtl-mirror": "" });
var IconArrowUp = createIcon("IconArrowUp", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
d: "M10 16.875V3.125M10 3.125L4.375 8.75M10 3.125L15.625 8.75",
fill: "none",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "1.5"
}));
var IconBell = createIcon("IconBell", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
d: "M7.50015 15C7.50015 15.663 7.76354 16.2989 8.23238 16.7678C8.70122 17.2366 9.33711 17.5 10.0001 17.5C10.6632 17.5 11.2991 17.2366 11.7679 16.7678C12.2368 16.2989 12.5001 15.663 12.5001 15M4.37515 8.125C4.37515 6.63316 4.96778 5.20242 6.02267 4.14752C7.07756 3.09263 8.5083 2.5 10.0001 2.5C11.492 2.5 12.9227 3.09263 13.9776 4.14752C15.0325 5.20242 15.6251 6.63316 15.6251 8.125C15.6251 10.9234 16.2736 13.1719 16.7892 14.0625C16.844 14.1574 16.8728 14.2649 16.8729 14.3745C16.873 14.484 16.8444 14.5916 16.7898 14.6865C16.7352 14.7815 16.6566 14.8604 16.5619 14.9154C16.4672 14.9705 16.3597 14.9996 16.2501 15H3.75015C3.64076 14.9993 3.53345 14.97 3.43896 14.9149C3.34448 14.8597 3.26611 14.7808 3.2117 14.6859C3.15729 14.591 3.12874 14.4835 3.12891 14.3741C3.12907 14.2647 3.15795 14.1572 3.21265 14.0625C3.72749 13.1719 4.37515 10.9227 4.37515 8.125Z",
fill: "none",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "1.5"
}));
var IconBellOff = createIcon("IconBellOff", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
d: "M3.75015 3.12492L10.0001 9.99992C10.0001 9.99992 13.8094 14.1901 16.2501 16.8749M7.50015 14.9999C7.50015 15.663 7.76354 16.2988 8.23238 16.7677C8.70122 17.2365 9.33711 17.4999 10.0001 17.4999C10.6632 17.4999 11.2991 17.2365 11.7679 16.7677C12.2368 16.2988 12.5001 15.663 12.5001 14.9999M7.22515 3.23117C8.0809 2.74583 9.04899 2.49341 10.0328 2.49912C11.0166 2.50482 11.9817 2.76845 12.8317 3.26369C13.6818 3.75893 14.3871 4.46846 14.8773 5.32147C15.3674 6.17447 15.6253 7.14111 15.6251 8.12492C15.6251 10.3984 16.0533 12.3093 16.49 13.4218M14.5455 14.9999H3.75015C3.64076 14.9993 3.53345 14.9699 3.43896 14.9148C3.34448 14.8597 3.26611 14.7807 3.2117 14.6858C3.15729 14.5909 3.12874 14.4834 3.12891 14.374C3.12907 14.2646 3.15795 14.1572 3.21265 14.0624C3.72749 13.1718 4.37515 10.9226 4.37515 8.12492C4.37327 6.97806 4.72371 5.85829 5.37905 4.91711",
fill: "none",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "1.5"
}));
var IconBookmark = createIcon("IconBookmark", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
d: "M15 17.5L10 14.375L5 17.5V3.75C5 3.58424 5.06585 3.42527 5.18306 3.30806C5.30027 3.19085 5.45924 3.125 5.625 3.125H14.375C14.5408 3.125 14.6997 3.19085 14.8169 3.30806C14.9342 3.42527 15 3.58424 15 3.75V17.5Z",
fill: "none",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "1.5"
}));
var IconBookmarkRemove = createIcon("IconBookmarkRemove", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
d: "M5 6.49074V17.5L10 14.375L15 17.5V16M5.125 3.125H14.375C14.5408 3.125 14.6997 3.19085 14.8169 3.30806C14.9342 3.42527 15 3.58424 15 3.75V13M5.125 3.125L3.5 1.5M5.125 3.125L15 13M15 13L17.5 15.5",
fill: "none",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "1.5"
}));
var IconMessageBubbles = createIcon("IconMessageBubbles", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
d: "M12.8076 6.25836C13.7525 6.30974 14.6692 6.59868 15.4728 7.09845C16.2764 7.59821 16.941 8.29265 17.4049 9.11746C17.8688 9.94227 18.1172 10.8708 18.1269 11.8171C18.1367 12.7634 17.9075 13.6968 17.4607 14.531L18.0982 16.6998C18.1298 16.8075 18.1319 16.9217 18.1041 17.0304C18.0764 17.1392 18.0198 17.2385 17.9405 17.3178C17.8611 17.3972 17.7618 17.4537 17.6531 17.4815C17.5443 17.5092 17.4301 17.5072 17.3224 17.4756L15.156 16.8357C14.4404 17.2184 13.6504 17.4419 12.8404 17.4907C12.0303 17.5396 11.2192 17.4127 10.4628 17.1188C9.70632 16.8249 9.02237 16.3708 8.45781 15.7878C7.89325 15.2049 7.46143 14.5067 7.19195 13.7412M2.53882 10.781C1.90215 9.59158 1.71418 8.21294 2.00918 6.89647C2.30419 5.58 3.06253 4.41341 4.14591 3.60942C5.22929 2.80543 6.56555 2.4176 7.91103 2.51665C9.2565 2.6157 10.5216 3.19503 11.4755 4.149C12.4295 5.10297 13.0088 6.36803 13.1079 7.7135C13.2069 9.05898 12.8191 10.3952 12.0151 11.4786C11.2111 12.562 10.0445 13.3203 8.72806 13.6153C7.41159 13.9104 6.03295 13.7224 4.84351 13.0857L2.67476 13.7232C2.56707 13.7548 2.45285 13.7569 2.3441 13.7291C2.23535 13.7014 2.13608 13.6448 2.05671 13.5655C1.97735 13.4861 1.92082 13.3868 1.89307 13.2781C1.86531 13.1693 1.86735 13.0551 1.89898 12.9474L2.53882 10.781Z",
fill: "none",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "1.5"
}));
var IconMessageBubble = createIcon("IconMessageBubble", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
d: "M6.24431 16.4932C7.81972 17.405 9.67297 17.7127 11.4585 17.359C13.2441 17.0053 14.84 16.0143 15.9489 14.5708C17.0578 13.1273 17.6038 11.3298 17.4852 9.51341C17.3667 7.69704 16.5916 5.98577 15.3045 4.69866C14.0174 3.41156 12.3061 2.63646 10.4897 2.51789C8.67333 2.39932 6.87582 2.94537 5.43231 4.05422C3.9888 5.16308 2.99781 6.75906 2.64412 8.54461C2.29042 10.3302 2.59815 12.1834 3.50993 13.7588L2.53259 16.6768C2.49586 16.7869 2.49053 16.9051 2.5172 17.0181C2.54386 17.131 2.60146 17.2344 2.68355 17.3165C2.76563 17.3985 2.86895 17.4561 2.98194 17.4828C3.09492 17.5095 3.21309 17.5041 3.32321 17.4674L6.24431 16.4932Z",
fill: "none",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "1.5"
}));
var IconMessageBubbleFill = createIcon("IconMessageBubbleFill", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M18.125 10.0001C18.1253 11.4028 17.7624 12.7818 17.0717 14.0027C16.381 15.2236 15.3859 16.2449 14.1834 16.9671C12.9808 17.6894 11.6118 18.088 10.2095 18.1242C8.80719 18.1603 7.41942 17.8328 6.18125 17.1735L3.52109 18.0602C3.30085 18.1337 3.0645 18.1444 2.83854 18.091C2.61257 18.0377 2.40593 17.9225 2.24176 17.7583C2.07759 17.5942 1.96239 17.3875 1.90906 17.1615C1.85573 16.9356 1.86639 16.6992 1.93984 16.479L2.82656 13.8188C2.24699 12.7292 1.92328 11.5218 1.88 10.2883C1.83672 9.0549 2.075 7.8278 2.57677 6.70019C3.07854 5.57258 3.8306 4.57411 4.77587 3.78055C5.72114 2.98699 6.83478 2.41921 8.03224 2.1203C9.22971 1.82139 10.4795 1.79922 11.6868 2.05545C12.8942 2.31169 14.0272 2.8396 15.0001 3.59912C15.9729 4.35865 16.7599 5.32981 17.3014 6.43891C17.8428 7.548 18.1245 8.76588 18.125 10.0001Z" }));
var IconThread = createIcon("IconThread", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
d: "M7.5 8.75H12.8125M7.5 11.25H12.8125M10.3125 16.875H3.75C3.58424 16.875 3.42527 16.8092 3.30806 16.6919C3.19085 16.5747 3.125 16.4158 3.125 16.25V9.6875C3.125 7.78126 3.88225 5.95309 5.23017 4.60517C6.57809 3.25725 8.40626 2.5 10.3125 2.5C11.2564 2.5 12.191 2.68591 13.063 3.04712C13.9351 3.40832 14.7274 3.93775 15.3948 4.60517C16.0623 5.27259 16.5917 6.06493 16.9529 6.93696C17.3141 7.80899 17.5 8.74362 17.5 9.6875C17.5 10.6314 17.3141 11.566 16.9529 12.438C16.5917 13.3101 16.0623 14.1024 15.3948 14.7698C14.7274 15.4373 13.9351 15.9667 13.063 16.3279C12.191 16.6891 11.2564 16.875 10.3125 16.875Z",
fill: "none",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "1.5"
}));
var IconThreadFill = createIcon("IconThreadFill", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M10.3125 1.875C8.24119 1.87727 6.25538 2.70111 4.79074 4.16574C3.32611 5.63038 2.50227 7.61619 2.5 9.6875V16.25C2.5 16.5815 2.6317 16.8995 2.86612 17.1339C3.10054 17.3683 3.41848 17.5 3.75 17.5H10.3125C12.3845 17.5 14.3716 16.6769 15.8368 15.2118C17.3019 13.7466 18.125 11.7595 18.125 9.6875C18.125 7.6155 17.3019 5.62836 15.8368 4.16323C14.3716 2.6981 12.3845 1.875 10.3125 1.875ZM12.8125 11.875H7.5C7.33424 11.875 7.17527 11.8092 7.05806 11.6919C6.94085 11.5747 6.875 11.4158 6.875 11.25C6.875 11.0842 6.94085 10.9253 7.05806 10.8081C7.17527 10.6908 7.33424 10.625 7.5 10.625H12.8125C12.9783 10.625 13.1372 10.6908 13.2544 10.8081C13.3717 10.9253 13.4375 11.0842 13.4375 11.25C13.4375 11.4158 13.3717 11.5747 13.2544 11.6919C13.1372 11.8092 12.9783 11.875 12.8125 11.875ZM12.8125 9.375H7.5C7.33424 9.375 7.17527 9.30915 7.05806 9.19194C6.94085 9.07473 6.875 8.91576 6.875 8.75C6.875 8.58424 6.94085 8.42527 7.05806 8.30806C7.17527 8.19085 7.33424 8.125 7.5 8.125H12.8125C12.9783 8.125 13.1372 8.19085 13.2544 8.30806C13.3717 8.42527 13.4375 8.58424 13.4375 8.75C13.4375 8.91576 13.3717 9.07473 13.2544 9.19194C13.1372 9.30915 12.9783 9.375 12.8125 9.375Z" }));
var IconNotification = createIcon("IconNotification", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
d: "M16.25 10V16.25C16.25 16.4158 16.1842 16.5747 16.0669 16.6919C15.9497 16.8092 15.7908 16.875 15.625 16.875H3.75C3.58424 16.875 3.42527 16.8092 3.30806 16.6919C3.19085 16.5747 3.125 16.4158 3.125 16.25V4.375C3.125 4.20924 3.19085 4.05027 3.30806 3.93306C3.42527 3.81585 3.58424 3.75 3.75 3.75H10M17.5 4.6875C17.5 5.89562 16.5206 6.875 15.3125 6.875C14.1044 6.875 13.125 5.89562 13.125 4.6875C13.125 3.47938 14.1044 2.5 15.3125 2.5C16.5206 2.5 17.5 3.47938 17.5 4.6875Z",
fill: "none",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "1.5"
}));
var IconCamera = createIcon("IconCamera", /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
d: "M16.25 16.25H3.75C3.41848 16.25 3.10054 16.1183 2.86612 15.8839C2.6317 15.6495 2.5 15.3315 2.5 15V6.25C2.5 5.91848 2.6317 5.60054 2.86612 5.36612C3.10054 5.1317 3.41848 5 3.75 5H6.25L7.5 3.125H12.5L13.75 5H16.25C16.5815 5 16.8995 5.1317 17.1339 5.36612C17.3683 5.60054 17.5 5.91848 17.5 6.25V15C17.5 15.3315 17.3683 15.6495 17.1339 15.8839C16.8995 16.1183 16.5815 16.25 16.25 16.25Z",
fill: "none",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "1.5"
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
d: "M10 13.125C11.5533 13.125 12.8125 11.8658 12.8125 10.3125C12.8125 8.7592 11.5533 7.5 10 7.5C8.4467 7.5 7.1875 8.7592 7.1875 10.3125C7.1875 11.8658 8.4467 13.125 10 13.125Z",
fill: "none",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "1.5"
})] }));
var IconLink = createIcon("IconLink", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
d: "M7.49989 12.4999L12.4999 7.49989M8.74989 5.94598L11.0983 3.60223C11.8035 2.90843 12.7543 2.52139 13.7436 2.52542C14.7328 2.52945 15.6804 2.92422 16.3799 3.62374C17.0795 4.32326 17.4742 5.27086 17.4783 6.26012C17.4823 7.24938 17.0953 8.20016 16.4015 8.90536L14.053 11.2499M5.94598 8.74989L3.60223 11.0983C2.90843 11.8035 2.52139 12.7543 2.52542 13.7436C2.52945 14.7328 2.92422 15.6804 3.62374 16.3799C4.32326 17.0795 5.27086 17.4742 6.26012 17.4783C7.24938 17.4823 8.20016 17.0953 8.90536 16.4015L11.2499 14.053",
fill: "none",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "1.5"
}));
var IconPoll = createIcon("IconPoll", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
d: "M3.75 16.25V10.625H7.5M17.5 16.25H2.5M7.5 16.25V6.875H11.875M11.875 16.25V3.125H16.25V16.25",
fill: "none",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "1.5"
}));
var IconCheckmark1Small = createIcon("IconCheckmark1Small", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
d: "M3.125 11.25L7.5 15.625L17.5 5.625",
fill: "none",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "1.5"
}));
var IconCheckmark = createIcon("IconCheckmark", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
d: "M3.125 11.25L7.5 15.625L17.5 5.625",
fill: "none",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "1.5"
}));
var IconChevronDown = createIcon("IconChevronDown", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
d: "M16.25 7.5L10 13.75L3.75 7.5",
fill: "none",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "1.5"
}));
var IconChevronLeft = createIcon("IconChevronLeft", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
d: "M12.5 16.25L6.25 10L12.5 3.75",
fill: "none",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "1.5"
}), { "data-rtl-mirror": "" });
var IconChevronRight = createIcon("IconChevronRight", /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
d: "M7.5 3.75L13.75 10L7.5 16.25",
fill: "none",
stroke