stream-chat-react 14.12.0 → 15.0.0-rc.1

package/dist/es/components/MessageActions/DeleteMessageAlert.mjs

@@ -1,7 +1,7 @@
-import { useModalContext } from "../../context/ModalContext.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
 import { Button } from "../Button/Button.mjs";
 import { Alert } from "../Dialog/components/Alert.mjs";
+import { useModalContext } from "../../context/ModalContext.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/MessageActions/DeleteMessageAlert.tsx
@@ -12,8 +12,8 @@ var DeleteMessageAlert = ({ onCancel, onDelete }) => {
 		className: "str-chat__delete-message-alert",
 		"data-testid": "message-delete-alert",
 		children: [/* @__PURE__ */ jsx(Alert.Header, {
-			description: t("Are you sure you want to delete this message?"),
-			title: t("Delete message")
+			description: t("messageActions.deleteMessageAlert.description", "Are you sure you want to delete this message?"),
+			title: t("messageActions.deleteMessageAlert.deleteMessage.title", "Delete message")
 		}), /* @__PURE__ */ jsxs(Alert.Actions, { children: [/* @__PURE__ */ jsx(Button, {
 			appearance: "outline",
 			className: "str-chat__delete-message-alert__delete-button",
@@ -21,7 +21,7 @@ var DeleteMessageAlert = ({ onCancel, onDelete }) => {
 			onClick: onDelete,
 			size: "md",
 			variant: "danger",
-			children: t("Delete message")
+			children: t("messageActions.deleteMessageAlert.deleteMessage.title", "Delete message")
 		}), /* @__PURE__ */ jsx(Button, {
 			appearance: "outline",
 			autoFocus: true,
@@ -33,7 +33,7 @@ var DeleteMessageAlert = ({ onCancel, onDelete }) => {
 			},
 			size: "md",
 			variant: "secondary",
-			children: t("Cancel")
+			children: t("common.cancel.label", "Cancel")
 		})] })]
 	});
 };

package/dist/es/components/MessageActions/DeleteMessageAlert.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DeleteMessageAlert.mjs","names":[],"sources":["../../../../src/components/MessageActions/DeleteMessageAlert.tsx"],"sourcesContent":["import { Alert } from '../Dialog';\nimport { Button } from '../Button';\nimport React from 'react';\nimport { useModalContext, useTranslationContext } from '../../context';\n\nexport type DeleteMessageAlertProps = {\n  onCancel: () => void;\n  onDelete: () => void;\n};\n\nexport const DeleteMessageAlert = ({ onCancel, onDelete }: DeleteMessageAlertProps) => {\n  const { t } = useTranslationContext();\n  const { close } = useModalContext();\n\n  return (\n    <Alert.Root\n      className='str-chat__delete-message-alert'\n      data-testid='message-delete-alert'\n    >\n      <Alert.Header\n        description={t('Are you sure you want to delete this message?')}\n        title={t('Delete message')}\n      />\n      <Alert.Actions>\n        <Button\n          appearance='outline'\n          className='str-chat__delete-message-alert__delete-button'\n          data-testid='delete-message-alert-delete-button'\n          onClick={onDelete}\n          size='md'\n          variant='danger'\n        >\n          {t('Delete message')}\n        </Button>\n        <Button\n          appearance='outline'\n          autoFocus\n          className='str-chat__delete-message-alert__cancel-button'\n          data-testid='delete-message-alert-cancel-button'\n          onClick={() => {\n            onCancel();\n            close();\n          }}\n          size='md'\n          variant='secondary'\n        >\n          {t('Cancel')}\n        </Button>\n      </Alert.Actions>\n    </Alert.Root>\n  );\n};\n"],"mappings":";;;;;;;AAUA,IAAa,sBAAsB,EAAE,UAAU,eAAwC;CACrF,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,UAAU,gBAAgB;CAElC,OACE,qBAAC,MAAM,MAAP;EACE,WAAU;EACV,eAAY;YAFd,CAIE,oBAAC,MAAM,QAAP;GACE,aAAa,EAAE,+CAA+C;GAC9D,OAAO,EAAE,gBAAgB;EAC1B,CAAA,GACD,qBAAC,MAAM,SAAP,EAAA,UAAA,CACE,oBAAC,QAAD;GACE,YAAW;GACX,WAAU;GACV,eAAY;GACZ,SAAS;GACT,MAAK;GACL,SAAQ;aAEP,EAAE,gBAAgB;EACb,CAAA,GACR,oBAAC,QAAD;GACE,YAAW;GACX,WAAA;GACA,WAAU;GACV,eAAY;GACZ,eAAe;IACb,SAAS;IACT,MAAM;GACR;GACA,MAAK;GACL,SAAQ;aAEP,EAAE,QAAQ;EACL,CAAA,CACK,EAAA,CAAA,CACL;;AAEhB"}
+{"version":3,"file":"DeleteMessageAlert.mjs","names":[],"sources":["../../../../src/components/MessageActions/DeleteMessageAlert.tsx"],"sourcesContent":["import { Alert } from '../Dialog';\nimport { Button } from '../Button';\nimport React from 'react';\nimport { useModalContext, useTranslationContext } from '../../context';\n\nexport type DeleteMessageAlertProps = {\n  onCancel: () => void;\n  onDelete: () => void;\n};\n\nexport const DeleteMessageAlert = ({ onCancel, onDelete }: DeleteMessageAlertProps) => {\n  const { t } = useTranslationContext();\n  const { close } = useModalContext();\n\n  return (\n    <Alert.Root\n      className='str-chat__delete-message-alert'\n      data-testid='message-delete-alert'\n    >\n      <Alert.Header\n        description={t(\n          'messageActions.deleteMessageAlert.description',\n          'Are you sure you want to delete this message?',\n        )}\n        title={t(\n          'messageActions.deleteMessageAlert.deleteMessage.title',\n          'Delete message',\n        )}\n      />\n      <Alert.Actions>\n        <Button\n          appearance='outline'\n          className='str-chat__delete-message-alert__delete-button'\n          data-testid='delete-message-alert-delete-button'\n          onClick={onDelete}\n          size='md'\n          variant='danger'\n        >\n          {t('messageActions.deleteMessageAlert.deleteMessage.title', 'Delete message')}\n        </Button>\n        <Button\n          appearance='outline'\n          autoFocus\n          className='str-chat__delete-message-alert__cancel-button'\n          data-testid='delete-message-alert-cancel-button'\n          onClick={() => {\n            onCancel();\n            close();\n          }}\n          size='md'\n          variant='secondary'\n        >\n          {t('common.cancel.label', 'Cancel')}\n        </Button>\n      </Alert.Actions>\n    </Alert.Root>\n  );\n};\n"],"mappings":";;;;;;;AAUA,IAAa,sBAAsB,EAAE,UAAU,eAAwC;CACrF,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,UAAU,gBAAgB;CAElC,OACE,qBAAC,MAAM,MAAP;EACE,WAAU;EACV,eAAY;YAFd,CAIE,oBAAC,MAAM,QAAP;GACE,aAAa,EACX,iDACA,+CACF;GACA,OAAO,EACL,yDACA,gBACF;EACD,CAAA,GACD,qBAAC,MAAM,SAAP,EAAA,UAAA,CACE,oBAAC,QAAD;GACE,YAAW;GACX,WAAU;GACV,eAAY;GACZ,SAAS;GACT,MAAK;GACL,SAAQ;aAEP,EAAE,yDAAyD,gBAAgB;EACtE,CAAA,GACR,oBAAC,QAAD;GACE,YAAW;GACX,WAAA;GACA,WAAU;GACV,eAAY;GACZ,eAAe;IACb,SAAS;IACT,MAAM;GACR;GACA,MAAK;GACL,SAAQ;aAEP,EAAE,uBAAuB,QAAQ;EAC5B,CAAA,CACK,EAAA,CAAA,CACL;;AAEhB"}

package/dist/es/components/MessageActions/DownloadSubmenu.mjs

@@ -1,8 +1,8 @@
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useMessageContext } from "../../context/MessageContext.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
 import { ContextMenuBackButton, ContextMenuButton, ContextMenuHeader, useContextMenuContext } from "../Dialog/components/ContextMenu.mjs";
 import { downloadAllAttachments, downloadAttachment, isDownloadableAttachment } from "./downloadUtils.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/MessageActions/DownloadSubmenu.tsx
@@ -13,7 +13,7 @@ var DownloadSubmenuHeader = () => {
 	const { t } = useTranslationContext();
 	return /* @__PURE__ */ jsx(ContextMenuHeader, { children: /* @__PURE__ */ jsxs(ContextMenuBackButton, {
 		onClick: goBack,
-		children: [/* @__PURE__ */ jsx(IconChevronLeft, {}), /* @__PURE__ */ jsx("span", { children: t("Download Attachment") })]
+		children: [/* @__PURE__ */ jsx(IconChevronLeft, {}), /* @__PURE__ */ jsx("span", { children: t("common.downloadAttachment.title", "Download Attachment") })]
 	}) });
 };
 var DownloadSubmenu = () => {
@@ -33,7 +33,7 @@ var DownloadSubmenu = () => {
 					downloadAttachment(attachment);
 					closeMenu();
 				},
-				children: fileName ? t("Download {{ fileName }}", { fileName }) : t("Download attachment {{ number }}", { number: index + 1 })
+				children: fileName ? t("messageActions.downloadSubmenu.download.label", "Download {{ fileName }}", { fileName }) : t("messageActions.downloadSubmenu.downloadAttachment.label", "Download attachment {{ number }}", { number: index + 1 })
 			}, attachment.localMetadata?.id ?? attachment.asset_url ?? attachment.image_url ?? `${fileName ?? "attachment"}-${index}`);
 		}), /* @__PURE__ */ jsx(ContextMenuButton, {
 			className: msgActionsBoxButtonClassName,
@@ -42,7 +42,7 @@ var DownloadSubmenu = () => {
 				downloadAllAttachments(downloadableAttachments);
 				closeMenu();
 			},
-			children: t("Download All")
+			children: t("messageActions.downloadSubmenu.download.text", "Download All")
 		})]
 	});
 };

package/dist/es/components/MessageActions/DownloadSubmenu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DownloadSubmenu.mjs","names":[],"sources":["../../../../src/components/MessageActions/DownloadSubmenu.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  useComponentContextIcons,\n  useMessageContext,\n  useTranslationContext,\n} from '../../context';\nimport {\n  ContextMenuBackButton,\n  ContextMenuButton,\n  ContextMenuHeader,\n  useContextMenuContext,\n} from '../Dialog';\nimport {\n  downloadAllAttachments,\n  downloadAttachment,\n  isDownloadableAttachment,\n} from './downloadUtils';\n\nconst msgActionsBoxButtonClassName =\n  'str-chat__message-actions-list-item-button' as const;\n\nexport const DownloadSubmenuHeader = () => {\n  const { IconChevronLeft } = useComponentContextIcons();\n\n  const { returnToParentMenu: goBack } = useContextMenuContext();\n  const { t } = useTranslationContext();\n  return (\n    <ContextMenuHeader>\n      <ContextMenuBackButton onClick={goBack}>\n        <IconChevronLeft />\n        <span>{t('Download Attachment')}</span>\n      </ContextMenuBackButton>\n    </ContextMenuHeader>\n  );\n};\n\nexport const DownloadSubmenu = () => {\n  const { IconDownload } = useComponentContextIcons();\n  const { closeMenu } = useContextMenuContext();\n  const { message } = useMessageContext();\n  const { t } = useTranslationContext();\n\n  const downloadableAttachments = (message.attachments ?? []).filter(\n    isDownloadableAttachment,\n  );\n\n  return (\n    <div className='str-chat__message-actions-box__submenu str-chat__message-actions-box__submenu--download-attachments'>\n      {downloadableAttachments.map((attachment, index) => {\n        const fileName = attachment.localMetadata?.file?.name ?? attachment.title;\n        const label = fileName\n          ? t('Download {{ fileName }}', { fileName })\n          : t('Download attachment {{ number }}', { number: index + 1 });\n\n        return (\n          <ContextMenuButton\n            className={msgActionsBoxButtonClassName}\n            Icon={IconDownload}\n            key={\n              attachment.localMetadata?.id ??\n              attachment.asset_url ??\n              attachment.image_url ??\n              `${fileName ?? 'attachment'}-${index}`\n            }\n            onClick={() => {\n              void downloadAttachment(attachment);\n              closeMenu();\n            }}\n          >\n            {label}\n          </ContextMenuButton>\n        );\n      })}\n      <ContextMenuButton\n        className={msgActionsBoxButtonClassName}\n        Icon={IconDownload}\n        onClick={() => {\n          void downloadAllAttachments(downloadableAttachments);\n          closeMenu();\n        }}\n      >\n        {t('Download All')}\n      </ContextMenuButton>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAkBA,IAAM,+BACJ;AAEF,IAAa,8BAA8B;CACzC,MAAM,EAAE,oBAAoB,yBAAyB;CAErD,MAAM,EAAE,oBAAoB,WAAW,sBAAsB;CAC7D,MAAM,EAAE,MAAM,sBAAsB;CACpC,OACE,oBAAC,mBAAD,EAAA,UACE,qBAAC,uBAAD;EAAuB,SAAS;YAAhC,CACE,oBAAC,iBAAD,CAAkB,CAAA,GAClB,oBAAC,QAAD,EAAA,UAAO,EAAE,qBAAqB,EAAQ,CAAA,CACjB;IACN,CAAA;AAEvB;AAEA,IAAa,wBAAwB;CACnC,MAAM,EAAE,iBAAiB,yBAAyB;CAClD,MAAM,EAAE,cAAc,sBAAsB;CAC5C,MAAM,EAAE,YAAY,kBAAkB;CACtC,MAAM,EAAE,MAAM,sBAAsB;CAEpC,MAAM,2BAA2B,QAAQ,eAAe,CAAC,EAAA,CAAG,OAC1D,wBACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACG,wBAAwB,KAAK,YAAY,UAAU;GAClD,MAAM,WAAW,WAAW,eAAe,MAAM,QAAQ,WAAW;GAKpE,OACE,oBAAC,mBAAD;IACE,WAAW;IACX,MAAM;IAON,eAAe;KACb,mBAAwB,UAAU;KAClC,UAAU;IACZ;cAjBU,WACV,EAAE,2BAA2B,EAAE,SAAS,CAAC,IACzC,EAAE,oCAAoC,EAAE,QAAQ,QAAQ,EAAE,CAAC;GAkB1C,GAXf,WAAW,eAAe,MAC1B,WAAW,aACX,WAAW,aACX,GAAG,YAAY,aAAa,GAAG,OAQhB;EAEvB,CAAC,GACD,oBAAC,mBAAD;GACE,WAAW;GACX,MAAM;GACN,eAAe;IACb,uBAA4B,uBAAuB;IACnD,UAAU;GACZ;aAEC,EAAE,cAAc;EACA,CAAA,CAChB;;AAET"}
+{"version":3,"file":"DownloadSubmenu.mjs","names":[],"sources":["../../../../src/components/MessageActions/DownloadSubmenu.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  useComponentContextIcons,\n  useMessageContext,\n  useTranslationContext,\n} from '../../context';\nimport {\n  ContextMenuBackButton,\n  ContextMenuButton,\n  ContextMenuHeader,\n  useContextMenuContext,\n} from '../Dialog';\nimport {\n  type DownloadableAttachment,\n  downloadAllAttachments,\n  downloadAttachment,\n  isDownloadableAttachment,\n} from './downloadUtils';\n\nconst msgActionsBoxButtonClassName =\n  'str-chat__message-actions-list-item-button' as const;\n\nexport const DownloadSubmenuHeader = () => {\n  const { IconChevronLeft } = useComponentContextIcons();\n  const { returnToParentMenu: goBack } = useContextMenuContext();\n  const { t } = useTranslationContext();\n  return (\n    <ContextMenuHeader>\n      <ContextMenuBackButton onClick={goBack}>\n        <IconChevronLeft />\n        <span>{t('common.downloadAttachment.title', 'Download Attachment')}</span>\n      </ContextMenuBackButton>\n    </ContextMenuHeader>\n  );\n};\n\nexport const DownloadSubmenu = () => {\n  const { IconDownload } = useComponentContextIcons();\n  const { closeMenu } = useContextMenuContext();\n  const { message } = useMessageContext();\n  const { t } = useTranslationContext();\n\n  const downloadableAttachments = (message.attachments ?? []).filter(\n    isDownloadableAttachment,\n  ) as DownloadableAttachment[];\n\n  return (\n    <div className='str-chat__message-actions-box__submenu str-chat__message-actions-box__submenu--download-attachments'>\n      {downloadableAttachments.map((attachment, index) => {\n        const fileName = attachment.localMetadata?.file?.name ?? attachment.title;\n        const label = fileName\n          ? t(\n              'messageActions.downloadSubmenu.download.label',\n              'Download {{ fileName }}',\n              { fileName },\n            )\n          : t(\n              'messageActions.downloadSubmenu.downloadAttachment.label',\n              'Download attachment {{ number }}',\n              { number: index + 1 },\n            );\n\n        return (\n          <ContextMenuButton\n            className={msgActionsBoxButtonClassName}\n            Icon={IconDownload}\n            key={\n              attachment.localMetadata?.id ??\n              attachment.asset_url ??\n              attachment.image_url ??\n              `${fileName ?? 'attachment'}-${index}`\n            }\n            onClick={() => {\n              void downloadAttachment(attachment);\n              closeMenu();\n            }}\n          >\n            {label}\n          </ContextMenuButton>\n        );\n      })}\n      <ContextMenuButton\n        className={msgActionsBoxButtonClassName}\n        Icon={IconDownload}\n        onClick={() => {\n          void downloadAllAttachments(downloadableAttachments);\n          closeMenu();\n        }}\n      >\n        {t('messageActions.downloadSubmenu.download.text', 'Download All')}\n      </ContextMenuButton>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAmBA,IAAM,+BACJ;AAEF,IAAa,8BAA8B;CACzC,MAAM,EAAE,oBAAoB,yBAAyB;CACrD,MAAM,EAAE,oBAAoB,WAAW,sBAAsB;CAC7D,MAAM,EAAE,MAAM,sBAAsB;CACpC,OACE,oBAAC,mBAAD,EAAA,UACE,qBAAC,uBAAD;EAAuB,SAAS;YAAhC,CACE,oBAAC,iBAAD,CAAkB,CAAA,GAClB,oBAAC,QAAD,EAAA,UAAO,EAAE,mCAAmC,qBAAqB,EAAQ,CAAA,CACpD;IACN,CAAA;AAEvB;AAEA,IAAa,wBAAwB;CACnC,MAAM,EAAE,iBAAiB,yBAAyB;CAClD,MAAM,EAAE,cAAc,sBAAsB;CAC5C,MAAM,EAAE,YAAY,kBAAkB;CACtC,MAAM,EAAE,MAAM,sBAAsB;CAEpC,MAAM,2BAA2B,QAAQ,eAAe,CAAC,EAAA,CAAG,OAC1D,wBACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACG,wBAAwB,KAAK,YAAY,UAAU;GAClD,MAAM,WAAW,WAAW,eAAe,MAAM,QAAQ,WAAW;GAapE,OACE,oBAAC,mBAAD;IACE,WAAW;IACX,MAAM;IAON,eAAe;KACb,mBAAwB,UAAU;KAClC,UAAU;IACZ;cAzBU,WACV,EACE,iDACA,2BACA,EAAE,SAAS,CACb,IACA,EACE,2DACA,oCACA,EAAE,QAAQ,QAAQ,EAAE,CACtB;GAkBiB,GAXf,WAAW,eAAe,MAC1B,WAAW,aACX,WAAW,aACX,GAAG,YAAY,aAAa,GAAG,OAQhB;EAEvB,CAAC,GACD,oBAAC,mBAAD;GACE,WAAW;GACX,MAAM;GACN,eAAe;IACb,uBAA4B,uBAAuB;IACnD,UAAU;GACZ;aAEC,EAAE,gDAAgD,cAAc;EAChD,CAAA,CAChB;;AAET"}

package/dist/es/components/MessageActions/MessageActions.defaults.mjs

@@ -1,16 +1,16 @@
 import { useChatContext } from "../../context/ChatContext.mjs";
 import { useComponentContext } from "../../context/ComponentContext.mjs";
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useDialogIsOpen, useDialogOnNearestManager } from "../Dialog/hooks/useDialog.mjs";
 import { useMessageContext } from "../../context/MessageContext.mjs";
-import { savePreEditSnapshot } from "../MessageComposer/preEditSnapshot.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
-import { isMessageDeleted, isUserMuted } from "../Message/utils.mjs";
-import { useMessageReminder } from "../Message/hooks/useMessageReminder.mjs";
+import { useNotificationApi } from "../Notifications/hooks/useNotificationApi.mjs";
 import { DialogAnchor } from "../Dialog/service/DialogAnchor.mjs";
 import { ContextMenuButton, useContextMenuContext } from "../Dialog/components/ContextMenu.mjs";
+import { isMessageDeleted, isUserMuted } from "../Message/utils.mjs";
+import { useMessageReminder } from "../Message/hooks/useMessageReminder.mjs";
 import { GlobalModal } from "../Modal/GlobalModal.mjs";
 import { useMessageComposerController } from "../MessageComposer/hooks/useMessageComposerController.mjs";
+import { savePreEditSnapshot } from "../MessageComposer/preEditSnapshot.mjs";
 import { ReactionSelector } from "../Reactions/ReactionSelector.mjs";
 import { ReactionSelectorWithButton } from "../Reactions/ReactionSelectorWithButton.mjs";
 import { RemindMeSubmenu, RemindMeSubmenuHeader } from "./RemindMeSubmenu.mjs";
@@ -19,7 +19,7 @@ import { DownloadSubmenu, DownloadSubmenuHeader } from "./DownloadSubmenu.mjs";
 import { QuickMessageActionsButton } from "./QuickMessageActionButton.mjs";
 import { DeleteMessageAlert } from "./DeleteMessageAlert.mjs";
 import { MessageActions } from "./MessageActions.mjs";
-import { useNotificationApi } from "../Notifications/hooks/useNotificationApi.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { forwardRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
@@ -38,6 +38,7 @@ var getNotificationError = (error) => {
 var DefaultMessageActionComponents = {
 	dropdown: {
 		React() {
+			const { IconEmoji } = useComponentContextIcons();
 			const { ReactionSelector: ReactionSelector$1 = ReactionSelector } = useComponentContext();
 			const { anchorReferenceElement } = useContextMenuContext();
 			const { isMyMessage, message, threadList } = useMessageContext();
@@ -49,7 +50,6 @@ var DefaultMessageActionComponents = {
 			})}-dropdown`;
 			const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId });
 			const dialogIsOpen = useDialogIsOpen(dialogId, dialogManager?.id);
-			const { IconEmoji } = useComponentContextIcons();
 			return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DialogAnchor, {
 				dialogManagerId: dialogManager?.id,
 				id: dialogId,
@@ -61,7 +61,7 @@ var DefaultMessageActionComponents = {
 				children: /* @__PURE__ */ jsx(ReactionSelector$1, { dialogId })
 			}), /* @__PURE__ */ jsx(MessageActionsMenuItemButton, {
 				"aria-expanded": dialogIsOpen,
-				"aria-label": t("aria/Open Reaction Selector"),
+				"aria-label": t("common.openReactionSelector.ariaLabel", "Open Reaction Selector"),
 				className: clsx(msgActionsBoxButtonClassName, "str-chat__message-actions-list-item-button--react"),
 				"data-testid": "dropdown-react-action",
 				Icon: IconEmoji,
@@ -73,16 +73,16 @@ var DefaultMessageActionComponents = {
 					setReferenceElement(anchorReferenceElement instanceof HTMLElement ? anchorReferenceElement : event.currentTarget);
 					dialog.open();
 				},
-				children: t("Add reaction")
+				children: t("common.addReaction.text", "Add reaction")
 			})] });
 		},
 		ThreadReply() {
+			const { IconThread } = useComponentContextIcons();
 			const { closeMenu } = useContextMenuContext();
 			const { handleOpenThread } = useMessageContext();
 			const { t } = useTranslationContext();
-			const { IconThread } = useComponentContextIcons();
 			return /* @__PURE__ */ jsx(MessageActionsMenuItemButton, {
-				"aria-label": t("aria/Open Thread"),
+				"aria-label": t("messageActions.openThread.ariaLabel", "Open Thread"),
 				className: msgActionsBoxButtonClassName,
 				"data-testid": "thread-action",
 				Icon: IconThread,
@@ -90,10 +90,11 @@ var DefaultMessageActionComponents = {
 					handleOpenThread(e);
 					closeMenu();
 				},
-				children: t("Thread Reply")
+				children: t("messageActions.threadReply.text", "Thread Reply")
 			});
 		},
 		Quote() {
+			const { IconQuote } = useComponentContextIcons();
 			const { closeMenu } = useContextMenuContext();
 			const { message } = useMessageContext();
 			const { t } = useTranslationContext();
@@ -103,27 +104,26 @@ var DefaultMessageActionComponents = {
 				const textarea = (message.parent_id ? document.querySelectorAll(".str-chat__thread .str-chat__textarea__textarea") : document.getElementsByClassName("str-chat__textarea__textarea")).item(0);
 				if (textarea instanceof HTMLTextAreaElement) textarea.focus();
 			};
-			const { IconQuote } = useComponentContextIcons();
 			return /* @__PURE__ */ jsx(MessageActionsMenuItemButton, {
-				"aria-label": t("aria/Quote Message"),
+				"aria-label": t("messageActions.quoteMessage.ariaLabel", "Quote Message"),
 				className: msgActionsBoxButtonClassName,
 				Icon: IconQuote,
 				onClick: () => {
 					handleQuote();
 					closeMenu();
 				},
-				children: t("Quote Reply")
+				children: t("messageActions.quoteReply.text", "Quote Reply")
 			});
 		},
 		Download() {
+			const { IconDownload } = useComponentContextIcons();
 			const { closeMenu, openSubmenu } = useContextMenuContext();
 			const { message } = useMessageContext();
 			const { t } = useTranslationContext();
-			const { IconDownload } = useComponentContextIcons();
 			const downloadableAttachments = (message.attachments ?? []).filter(isDownloadableAttachment);
 			if (!downloadableAttachments.length) return null;
 			return /* @__PURE__ */ jsx(MessageActionsMenuItemButton, {
-				"aria-label": t("aria/Download attachment"),
+				"aria-label": t("common.downloadAttachment.ariaLabel", "Download attachment"),
 				className: msgActionsBoxButtonClassName,
 				hasSubMenu: downloadableAttachments.length > 1,
 				Icon: IconDownload,
@@ -139,18 +139,18 @@ var DefaultMessageActionComponents = {
 					downloadAttachment(downloadableAttachments[0]);
 					closeMenu();
 				},
-				children: t("Download Attachment")
+				children: t("common.downloadAttachment.title", "Download Attachment")
 			});
 		},
 		Pin() {
+			const { IconPin, IconUnpin } = useComponentContextIcons();
 			const { closeMenu } = useContextMenuContext();
 			const { handlePin, message } = useMessageContext();
 			const { addNotification } = useNotificationApi();
 			const { t } = useTranslationContext();
 			const isPinned = !!message.pinned;
-			const { IconPin, IconUnpin } = useComponentContextIcons();
 			return /* @__PURE__ */ jsx(MessageActionsMenuItemButton, {
-				"aria-label": isPinned ? t("aria/Unpin Message") : t("aria/Pin Message"),
+				"aria-label": isPinned ? t("messageActions.unpinMessage.ariaLabel", "Unpin Message") : t("messageActions.pinMessage.ariaLabel", "Pin Message"),
 				className: msgActionsBoxButtonClassName,
 				Icon: isPinned ? IconUnpin : IconPin,
 				onClick: async (event) => {
@@ -159,7 +159,7 @@ var DefaultMessageActionComponents = {
 						addNotification({
 							context: { message },
 							emitter: "MessageActions",
-							message: isPinned ? t("Message unpinned") : t("Message pinned"),
+							message: isPinned ? t("messageActions.messageUnpinned.text", "Message unpinned") : t("common.messagePinned.label", "Message pinned"),
 							severity: "success",
 							type: isPinned ? "api:message:unpin:success" : "api:message:pin:success"
 						});
@@ -168,56 +168,56 @@ var DefaultMessageActionComponents = {
 							context: { message },
 							emitter: "MessageActions",
 							error: getNotificationError(error),
-							message: getErrorMessage(error, isPinned ? t("Error removing message pin") : t("Error pinning message")),
+							message: getErrorMessage(error, isPinned ? t("common.errorRemovingMessagePin.label", "Error removing message pin") : t("common.errorPinningMessage.label", "Error pinning message")),
 							severity: "error",
 							type: isPinned ? "api:message:unpin:failed" : "api:message:pin:failed"
 						});
 					}
 					closeMenu();
 				},
-				children: isPinned ? t("Unpin") : t("Pin")
+				children: isPinned ? t("common.unpin.title", "Unpin") : t("common.pin.title", "Pin")
 			});
 		},
 		CopyMessageText() {
+			const { IconCopy } = useComponentContextIcons();
 			const { closeMenu } = useContextMenuContext();
 			const { message } = useMessageContext();
 			const { t } = useTranslationContext();
-			const { IconCopy } = useComponentContextIcons();
 			return /* @__PURE__ */ jsx(MessageActionsMenuItemButton, {
-				"aria-label": t("aria/Copy Message Text"),
+				"aria-label": t("messageActions.copyMessageText.ariaLabel", "Copy Message Text"),
 				className: msgActionsBoxButtonClassName,
 				Icon: IconCopy,
 				onClick: () => {
 					if (message.text) navigator.clipboard.writeText(message.text);
 					closeMenu();
 				},
-				children: t("Copy Message")
+				children: t("messageActions.copyMessage.text", "Copy Message")
 			});
 		},
 		Resend() {
+			const { IconRetry } = useComponentContextIcons();
 			const { closeMenu } = useContextMenuContext();
 			const { handleRetry, message } = useMessageContext();
 			const { t } = useTranslationContext();
-			const { IconRetry } = useComponentContextIcons();
 			return /* @__PURE__ */ jsx(MessageActionsMenuItemButton, {
-				"aria-label": t("aria/Resend Message"),
+				"aria-label": t("messageActions.resendMessage.ariaLabel", "Resend Message"),
 				className: msgActionsBoxButtonClassName,
 				Icon: IconRetry,
 				onClick: () => {
 					handleRetry(message);
 					closeMenu();
 				},
-				children: t("Resend")
+				children: t("messageActions.resend.text", "Resend")
 			});
 		},
 		Edit() {
+			const { IconEdit } = useComponentContextIcons();
 			const messageComposer = useMessageComposerController();
 			const { message } = useMessageContext();
 			const { t } = useTranslationContext();
 			const { closeMenu } = useContextMenuContext();
-			const { IconEdit } = useComponentContextIcons();
 			return /* @__PURE__ */ jsx(MessageActionsMenuItemButton, {
-				"aria-label": t("aria/Edit Message"),
+				"aria-label": t("messageActions.editMessage.ariaLabel", "Edit Message"),
 				className: msgActionsBoxButtonClassName,
 				Icon: IconEdit,
 				onClick: () => {
@@ -225,17 +225,17 @@ var DefaultMessageActionComponents = {
 					messageComposer.initState({ composition: message });
 					closeMenu();
 				},
-				children: t("Edit Message")
+				children: t("common.editMessage.text", "Edit Message")
 			});
 		},
 		MarkUnread() {
+			const { IconNotification } = useComponentContextIcons();
 			const { closeMenu } = useContextMenuContext();
 			const { handleMarkUnread, message } = useMessageContext();
 			const { addNotification } = useNotificationApi();
 			const { t } = useTranslationContext();
-			const { IconNotification } = useComponentContextIcons();
 			return /* @__PURE__ */ jsx(MessageActionsMenuItemButton, {
-				"aria-label": t("aria/Mark Message Unread"),
+				"aria-label": t("messageActions.markMessageUnread.ariaLabel", "Mark Message Unread"),
 				className: msgActionsBoxButtonClassName,
 				Icon: IconNotification,
 				onClick: async (event) => {
@@ -244,7 +244,7 @@ var DefaultMessageActionComponents = {
 						addNotification({
 							context: { message },
 							emitter: "MessageActions",
-							message: t("Message marked as unread"),
+							message: t("messageActions.messageMarkedUnread.text", "Message marked as unread"),
 							severity: "success",
 							type: "api:message:markUnread:success"
 						});
@@ -253,27 +253,27 @@ var DefaultMessageActionComponents = {
 							context: { message },
 							emitter: "MessageActions",
 							error: getNotificationError(error),
-							message: getErrorMessage(error, t("Error marking message unread. Cannot mark unread messages older than the newest 100 channel messages.")),
+							message: getErrorMessage(error, t("messageActions.errorMarkingMessageUnread.text", "Error marking message unread. Cannot mark unread messages older than the newest 100 channel messages.")),
 							severity: "error",
 							type: "api:message:markUnread:failed"
 						});
 					}
 					closeMenu();
 				},
-				children: t("Mark as unread")
+				children: t("messageActions.markUnread.text", "Mark as unread")
 			});
 		},
 		RemindMe() {
+			const { IconBell, IconBellOff } = useComponentContextIcons();
 			const { closeMenu, openSubmenu } = useContextMenuContext();
 			const { client } = useChatContext();
 			const { addNotification } = useNotificationApi();
 			const { t } = useTranslationContext();
 			const { message } = useMessageContext();
 			const reminder = useMessageReminder(message.id);
-			const { IconBell, IconBellOff } = useComponentContextIcons();
-			if (reminder && !reminder?.remindAt) return null;
+			if (reminder != null && reminder.remindAt == null) return null;
 			return /* @__PURE__ */ jsx(MessageActionsMenuItemButton, {
-				"aria-label": reminder ? t("aria/Remind Me Message") : t("aria/Remove Reminder"),
+				"aria-label": reminder ? t("messageActions.remindMeMessage.ariaLabel", "Remind Me Message") : t("messageActions.removeReminder.ariaLabel", "Remove Reminder"),
 				className: msgActionsBoxButtonClassName,
 				hasSubMenu: !reminder,
 				Icon: reminder ? IconBellOff : IconBell,
@@ -283,7 +283,7 @@ var DefaultMessageActionComponents = {
 						addNotification({
 							context: { message },
 							emitter: "MessageActions",
-							message: t("Remove reminder"),
+							message: t("messageActions.removeReminder.text", "Remove reminder"),
 							severity: "success",
 							type: "api:message:reminder:delete:success"
 						});
@@ -305,20 +305,20 @@ var DefaultMessageActionComponents = {
 						Submenu: RemindMeSubmenu
 					});
 				},
-				children: reminder ? t("Remove reminder") : t("Remind me")
+				children: reminder ? t("messageActions.removeReminder.text", "Remove reminder") : t("messageActions.remindMe.text", "Remind me")
 			});
 		},
 		SaveForLater() {
+			const { IconBookmark, IconBookmarkRemove } = useComponentContextIcons();
 			const { closeMenu } = useContextMenuContext();
 			const { client } = useChatContext();
 			const { addNotification } = useNotificationApi();
 			const { message } = useMessageContext();
 			const { t } = useTranslationContext();
 			const reminder = useMessageReminder(message.id);
-			const { IconBookmark, IconBookmarkRemove } = useComponentContextIcons();
-			if (Boolean(reminder && reminder?.remindAt)) return null;
+			if (reminder?.remindAt != null) return null;
 			return /* @__PURE__ */ jsx(MessageActionsMenuItemButton, {
-				"aria-label": reminder ? t("aria/Remove Save For Later") : t("aria/Bookmark Message"),
+				"aria-label": reminder ? t("messageActions.removeSaveLater.ariaLabel", "Remove Save For Later") : t("messageActions.bookmarkMessage.ariaLabel", "Bookmark Message"),
 				className: msgActionsBoxButtonClassName,
 				Icon: reminder ? IconBookmarkRemove : IconBookmark,
 				onClick: async () => {
@@ -328,16 +328,16 @@ var DefaultMessageActionComponents = {
 							addNotification({
 								context: { message },
 								emitter: "MessageActions",
-								message: t("Remove save for later"),
+								message: t("messageActions.removeSaveLater.text", "Remove save for later"),
 								severity: "success",
 								type: "api:message:saveForLater:delete:success"
 							});
 						} else {
-							await client.reminders.createReminder({ messageId: message.id });
+							await client.reminders.createReminder({ message_id: message.id });
 							addNotification({
 								context: { message },
 								emitter: "MessageActions",
-								message: t("Saved for later"),
+								message: t("common.savedLater.text", "Saved for later"),
 								severity: "success",
 								type: "api:message:saveForLater:create:success"
 							});
@@ -355,17 +355,17 @@ var DefaultMessageActionComponents = {
 						closeMenu();
 					}
 				},
-				children: reminder ? t("Remove save for later") : t("Save for later")
+				children: reminder ? t("messageActions.removeSaveLater.text", "Remove save for later") : t("messageActions.saveLater.text", "Save for later")
 			});
 		},
 		Flag() {
+			const { IconFlag } = useComponentContextIcons();
 			const { closeMenu } = useContextMenuContext();
 			const { handleFlag, message } = useMessageContext();
 			const { addNotification } = useNotificationApi();
 			const { t } = useTranslationContext();
-			const { IconFlag } = useComponentContextIcons();
 			return /* @__PURE__ */ jsx(MessageActionsMenuItemButton, {
-				"aria-label": t("aria/Flag Message"),
+				"aria-label": t("messageActions.flagMessage.ariaLabel", "Flag Message"),
 				className: msgActionsBoxButtonClassName,
 				Icon: IconFlag,
 				onClick: async (event) => {
@@ -374,7 +374,7 @@ var DefaultMessageActionComponents = {
 						addNotification({
 							context: { message },
 							emitter: "MessageActions",
-							message: t("Message has been successfully flagged"),
+							message: t("messageActions.messageSuccessfullyFlagged.text", "Message has been successfully flagged"),
 							severity: "success",
 							type: "api:message:flag:success"
 						});
@@ -383,26 +383,26 @@ var DefaultMessageActionComponents = {
 							context: { message },
 							emitter: "MessageActions",
 							error: getNotificationError(error),
-							message: getErrorMessage(error, t("Error adding flag")),
+							message: getErrorMessage(error, t("messageActions.errorAddingFlag.text", "Error adding flag")),
 							severity: "error",
 							type: "api:message:flag:failed"
 						});
 					}
 					closeMenu();
 				},
-				children: t("Flag")
+				children: t("messageActions.flag.text", "Flag")
 			});
 		},
 		Mute() {
+			const { IconAudio, IconMute } = useComponentContextIcons();
 			const { closeMenu } = useContextMenuContext();
 			const { handleMute, message } = useMessageContext();
 			const { addNotification } = useNotificationApi();
 			const { mutes } = useChatContext();
 			const { t } = useTranslationContext();
 			const isMuted = isUserMuted(message, mutes);
-			const { IconAudio, IconMute } = useComponentContextIcons();
 			return /* @__PURE__ */ jsx(MessageActionsMenuItemButton, {
-				"aria-label": isMuted ? t("aria/Unmute User") : t("aria/Mute User"),
+				"aria-label": isMuted ? t("messageActions.unmuteUser.ariaLabel", "Unmute User") : t("messageActions.muteUser.ariaLabel", "Mute User"),
 				className: msgActionsBoxButtonClassName,
 				Icon: isMuted ? IconAudio : IconMute,
 				onClick: async (event) => {
@@ -411,7 +411,7 @@ var DefaultMessageActionComponents = {
 						addNotification({
 							context: { message },
 							emitter: "MessageActions",
-							message: isMuted ? t("{{ user }} has been unmuted", { user: message.user?.name || message.user?.id }) : t("{{ user }} has been muted", { user: message.user?.name || message.user?.id }),
+							message: isMuted ? t("common.unmuted.label", "{{ user }} has been unmuted", { user: message.user?.name || message.user?.id }) : t("common.muted.label", "{{ user }} has been muted", { user: message.user?.name || message.user?.id }),
 							severity: "success",
 							type: isMuted ? "api:user:unmute:success" : "api:user:mute:success"
 						});
@@ -420,34 +420,34 @@ var DefaultMessageActionComponents = {
 							context: { message },
 							emitter: "MessageActions",
 							error: getNotificationError(error),
-							message: getErrorMessage(error, isMuted ? t("Error unmuting a user ...") : t("Error muting a user ...")),
+							message: getErrorMessage(error, isMuted ? t("common.errorUnmutingUser.label", "Error unmuting a user ...") : t("common.errorMutingUser.label", "Error muting a user ...")),
 							severity: "error",
 							type: isMuted ? "api:user:unmute:failed" : "api:user:mute:failed"
 						});
 					}
 					closeMenu();
 				},
-				children: isMuted ? t("Unmute") : t("Mute")
+				children: isMuted ? t("common.unmute.title", "Unmute") : t("common.mute.title", "Mute")
 			});
 		},
 		Delete() {
+			const { IconDelete } = useComponentContextIcons();
 			const { closeMenu } = useContextMenuContext();
 			const { addNotification } = useNotificationApi();
 			const { Modal = GlobalModal } = useComponentContext();
-			const { IconDelete } = useComponentContextIcons();
 			const { handleDelete, message } = useMessageContext();
 			const { t } = useTranslationContext();
 			const [openModal, setOpenModal] = useState(false);
 			if (isMessageDeleted(message)) return null;
 			return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MessageActionsMenuItemButton, {
-				"aria-label": t("aria/Delete Message"),
+				"aria-label": t("messageActions.deleteMessage.ariaLabel", "Delete Message"),
 				className: msgActionsBoxButtonClassName,
 				Icon: IconDelete,
 				onClick: () => {
 					setOpenModal(true);
 				},
 				variant: "destructive",
-				children: t("Delete message")
+				children: t("messageActions.deleteMessageAlert.deleteMessage.title", "Delete message")
 			}), /* @__PURE__ */ jsx(Modal, {
 				open: openModal,
 				role: "alertdialog",
@@ -462,7 +462,7 @@ var DefaultMessageActionComponents = {
 							addNotification({
 								context: { message },
 								emitter: "MessageActions",
-								message: t("Message deleted"),
+								message: t("common.messageDeleted.text", "Message deleted"),
 								severity: "success",
 								type: "api:message:delete:success"
 							});
@@ -471,7 +471,7 @@ var DefaultMessageActionComponents = {
 								context: { message },
 								emitter: "MessageActions",
 								error: getNotificationError(error),
-								message: getErrorMessage(error, t("Error deleting message")),
+								message: getErrorMessage(error, t("common.errorDeletingMessage.label", "Error deleting message")),
 								severity: "error",
 								type: "api:message:delete:failed"
 							});
@@ -484,28 +484,29 @@ var DefaultMessageActionComponents = {
 			})] });
 		},
 		BlockUser() {
+			const { IconNoSign, IconUserCheck } = useComponentContextIcons();
 			const { closeMenu } = useContextMenuContext();
 			const { client } = useChatContext();
 			const { message } = useMessageContext();
 			const { t } = useTranslationContext();
 			const isBlocked = !message.user?.id || new Set(client.blockedUsers.getLatestValue().userIds).has(message.user?.id);
-			const { IconNoSign, IconUserCheck } = useComponentContextIcons();
 			return /* @__PURE__ */ jsx(MessageActionsMenuItemButton, {
-				"aria-label": isBlocked ? t("Unblock") : t("aria/Block User"),
+				"aria-label": isBlocked ? t("common.unblock.ariaLabel", "Unblock") : t("messageActions.blockUser.ariaLabel", "Block User"),
 				className: clsx(msgActionsBoxButtonClassName),
 				Icon: isBlocked ? IconUserCheck : IconNoSign,
 				onClick: () => {
 					const targetId = message.user?.id;
-					if (targetId) if (isBlocked) client.unBlockUser(targetId);
+					if (targetId) if (isBlocked) client.unblockUser(targetId);
 					else client.blockUser(targetId);
 					closeMenu();
 				},
-				children: isBlocked ? t("Unblock") : t("Block User")
+				children: isBlocked ? t("common.unblock.ariaLabel", "Unblock") : t("common.blockUser.title", "Block User")
 			});
 		}
 	},
 	quick: {
 		DropdownToggle: forwardRef((_, ref) => {
+			const { IconMore } = useComponentContextIcons();
 			const { t } = useTranslationContext();
 			const { message, threadList } = useMessageContext();
 			const dropdownDialogIsOpen = useDialogIsOpen(MessageActions.getDialogId({ messageId: message.id }));
@@ -514,11 +515,10 @@ var DefaultMessageActionComponents = {
 				messageId: message.id,
 				threadList
 			})}-dropdown` });
-			const { IconMore } = useComponentContextIcons();
 			return /* @__PURE__ */ jsx(QuickMessageActionsButton, {
 				"aria-expanded": dropdownDialogIsOpen,
 				"aria-haspopup": "true",
-				"aria-label": t("aria/Open Message Actions Menu"),
+				"aria-label": t("messageActions.openMessageActionsMenu.ariaLabel", "Open Message Actions Menu"),
 				className: "str-chat__message-actions-box-button",
 				"data-testid": "message-actions-toggle-button",
 				onClick: () => {
@@ -530,15 +530,14 @@ var DefaultMessageActionComponents = {
 			});
 		}),
 		React() {
-			const { IconEmoji } = useComponentContextIcons();
-			return /* @__PURE__ */ jsx(ReactionSelectorWithButton, { ReactionIcon: IconEmoji });
+			return /* @__PURE__ */ jsx(ReactionSelectorWithButton, {});
 		},
 		Reply() {
+			const { IconReply } = useComponentContextIcons();
 			const { handleOpenThread } = useMessageContext();
 			const { t } = useTranslationContext();
-			const { IconReply } = useComponentContextIcons();
 			return /* @__PURE__ */ jsx(QuickMessageActionsButton, {
-				"aria-label": t("aria/Open Thread"),
+				"aria-label": t("messageActions.openThread.ariaLabel", "Open Thread"),
 				className: "str-chat__message-reply-in-thread-button",
 				"data-testid": "thread-action",
 				onClick: handleOpenThread,