stream-chat-react 14.0.0-beta.5 → 14.0.0-beta.7

package/dist/cjs/{WithAudioPlayback.0c10cb67.js → WithAudioPlayback.83ba0e35.js}

@@ -997,6 +997,33 @@ class AudioPlayerPool {
     }
   }
 }
+const audioPlayerNotificationsPluginFactory = ({
+  addNotification,
+  panel = "channel",
+  t
+}) => {
+  const errors = {
+    "failed-to-start": new Error(t("Failed to play the recording")),
+    "not-playable": new Error(
+      t("Recording format is not supported and cannot be reproduced")
+    ),
+    "seek-not-supported": new Error(t("Cannot seek in the recording"))
+  };
+  return {
+    id: "AudioPlayerNotificationsPlugin",
+    onError: ({ errCode, error: e }) => {
+      const error = (errCode && errors[errCode]) ?? e ?? new Error(t("Error reproducing the recording"));
+      addNotification({
+        emitter: "AudioPlayer",
+        error,
+        message: error.message,
+        severity: "error",
+        targetPanels: [panel],
+        type: "browser:audio:playback:error"
+      });
+    }
+  };
+};
 const NOTIFICATION_TARGET_PANELS = [
   "channel",
   "thread",
@@ -1013,46 +1040,29 @@ const getNotificationTargetPanel = (notification) => {
   const panel = notification.origin.context?.panel;
   return isNotificationTargetPanel(panel) ? panel : void 0;
 };
+const getNotificationTargetPanels = (notification) => {
+  const targetPanels = (notification.tags ?? []).filter((tag) => tag.startsWith("target:")).map((tag) => tag.slice("target:".length)).filter(
+    (value) => isNotificationTargetPanel(value)
+  );
+  if (targetPanels.length > 0) {
+    return Array.from(new Set(targetPanels));
+  }
+  const panel = notification.origin.context?.panel;
+  return isNotificationTargetPanel(panel) ? [panel] : [];
+};
 const getNotificationTargetTag = (panel) => `target:${panel}`;
 const addNotificationTargetTag = (panel, tags) => {
   if (!panel) return tags ?? [];
   return Array.from(/* @__PURE__ */ new Set([getNotificationTargetTag(panel), ...tags ?? []]));
 };
 const isNotificationForPanel = (notification, panel, options) => {
-  const fallbackPanel = options?.fallbackPanel ?? "channel";
-  const resolvedPanel = getNotificationTargetPanel(notification) ?? fallbackPanel;
+  const explicitTargetPanels = getNotificationTargetPanels(notification);
+  if (explicitTargetPanels.length > 0) {
+    return explicitTargetPanels.includes(panel);
+  }
+  const resolvedPanel = options?.fallbackPanel ?? "channel";
   return resolvedPanel === panel;
 };
-const audioPlayerNotificationsPluginFactory = ({
-  client,
-  panel = "channel",
-  t
-}) => {
-  const errors = {
-    "failed-to-start": new Error(t("Failed to play the recording")),
-    "not-playable": new Error(
-      t("Recording format is not supported and cannot be reproduced")
-    ),
-    "seek-not-supported": new Error(t("Cannot seek in the recording"))
-  };
-  return {
-    id: "AudioPlayerNotificationsPlugin",
-    onError: ({ errCode, error: e }) => {
-      const error = (errCode && errors[errCode]) ?? e ?? new Error(t("Error reproducing the recording"));
-      client?.notifications.addError({
-        message: error.message,
-        options: {
-          originalError: error,
-          tags: addNotificationTargetTag(panel),
-          type: "browser:audio:playback:error"
-        },
-        origin: {
-          emitter: "AudioPlayer"
-        }
-      });
-    }
-  };
-};
 const variantToClass = {
   danger: "str-chat__button--destructive",
   primary: "str-chat__button--primary",
@@ -1161,7 +1171,8 @@ const IconArrowLeft = createIcon(
       strokeLinejoin: "round",
       strokeWidth: "1.5"
     }
-  )
+  ),
+  { "data-rtl-mirror": "" }
 );
 const IconArrowUpRight = createIcon(
   "IconArrowUpRight",
@@ -1175,7 +1186,8 @@ const IconArrowUpRight = createIcon(
       strokeLinejoin: "round",
       strokeWidth: "1.5"
     }
-  )
+  ),
+  { "data-rtl-mirror": "" }
 );
 const IconRetry = createIcon(
   "IconRetry",
@@ -1217,7 +1229,8 @@ const IconReply = createIcon(
       strokeLinejoin: "round",
       strokeWidth: "1.5"
     }
-  )
+  ),
+  { "data-rtl-mirror": "" }
 );
 const IconArrowUp = createIcon(
   "IconArrowUp",
@@ -1261,8 +1274,8 @@ const IconBellOff = createIcon(
     }
   )
 );
-const IconSave = createIcon(
-  "IconSave",
+const IconBookmark = createIcon(
+  "IconBookmark",
   /* @__PURE__ */ jsxRuntime.jsx(
     "path",
     {
@@ -1275,8 +1288,8 @@ const IconSave = createIcon(
     }
   )
 );
-const IconUnsave = createIcon(
-  "IconUnsave",
+const IconBookmarkRemove = createIcon(
+  "IconBookmarkRemove",
   /* @__PURE__ */ jsxRuntime.jsx(
     "path",
     {
@@ -1462,7 +1475,8 @@ const IconChevronLeft = createIcon(
       strokeLinejoin: "round",
       strokeWidth: "1.5"
     }
-  )
+  ),
+  { "data-rtl-mirror": "" }
 );
 const IconChevronRight = createIcon(
   "IconChevronRight",
@@ -1476,7 +1490,8 @@ const IconChevronRight = createIcon(
       strokeLinejoin: "round",
       strokeWidth: "1.5"
     }
-  )
+  ),
+  { "data-rtl-mirror": "" }
 );
 const IconNoSign = createIcon(
   "IconNoSign",
@@ -1506,6 +1521,16 @@ const IconMinusCircle = createIcon(
     }
   )
 );
+const IconMinus = createIcon(
+  "IconMinus",
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M16.875 9.40039C17.2064 9.40039 17.4746 9.66863 17.4746 10C17.4746 10.3314 17.2064 10.5996 16.875 10.5996H3.125C2.79363 10.5996 2.52539 10.3314 2.52539 10C2.52539 9.66863 2.79363 9.40039 3.125 9.40039H16.875Z",
+      fill: "currentColor"
+    }
+  )
+);
 const IconXCircle = createIcon(
   "IconXCircle",
   /* @__PURE__ */ jsxRuntime.jsx(
@@ -1558,16 +1583,16 @@ const IconXmark = createIcon(
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      strokeWidth: "1.5"
+      strokeWidth: "2"
     }
   )
 );
-const IconCrossSmall = createIcon(
-  "IconCrossSmall",
+const IconXmarkSmall = createIcon(
+  "IconXmarkSmall",
   /* @__PURE__ */ jsxRuntime.jsx(
     "path",
     {
-      d: "M15.625 4.375L4.375 15.625M15.625 15.625L4.375 4.375",
+      d: "M13.5 6.5L6.5 13.5M13.5 13.5L6.5 6.5",
       fill: "none",
       stroke: "currentColor",
       strokeLinecap: "round",
@@ -1625,6 +1650,46 @@ const IconEmoji = createIcon(
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.4756 11.499C12.683 11.1407 13.1425 11.0182 13.501 11.2256C13.8593 11.433 13.9818 11.8925 13.7744 12.251C13.0125 13.568 11.6947 14.5 10 14.5C8.30531 14.5 6.98748 13.568 6.22559 12.251C6.01825 11.8925 6.14067 11.433 6.49902 11.2256C6.85749 11.0182 7.31695 11.1407 7.52441 11.499C8.05942 12.424 8.91824 13 10 13C11.0818 13 11.9406 12.424 12.4756 11.499Z" })
   ] })
 );
+const IconEmojiAdd = createIcon(
+  "IconEmojiAdd",
+  /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M1.75 10C1.75 5.44365 5.44365 1.75 10 1.75C10.4142 1.75 10.75 2.08579 10.75 2.5C10.75 2.91421 10.4142 3.25 10 3.25C6.27208 3.25 3.25 6.27208 3.25 10C3.25 13.7279 6.27208 16.75 10 16.75C13.7279 16.75 16.75 13.7279 16.75 10C16.75 9.58579 17.0858 9.25 17.5 9.25C17.9142 9.25 18.25 9.58579 18.25 10C18.25 14.5563 14.5563 18.25 10 18.25C5.44365 18.25 1.75 14.5563 1.75 10Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M7.1875 9.375C7.70527 9.375 8.125 8.95527 8.125 8.4375C8.125 7.91973 7.70527 7.5 7.1875 7.5C6.66973 7.5 6.25 7.91973 6.25 8.4375C6.25 8.95527 6.66973 9.375 7.1875 9.375Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M12.8125 9.375C13.3303 9.375 13.75 8.95527 13.75 8.4375C13.75 7.91973 13.3303 7.5 12.8125 7.5C12.2947 7.5 11.875 7.91973 11.875 8.4375C11.875 8.95527 12.2947 9.375 12.8125 9.375Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M12.4756 11.499C12.683 11.1407 13.1425 11.0182 13.501 11.2256C13.8593 11.433 13.9818 11.8925 13.7744 12.251C13.0125 13.568 11.6947 14.5 10 14.5C8.30531 14.5 6.98748 13.568 6.22559 12.251C6.01825 11.8925 6.14067 11.433 6.49902 11.2256C6.85749 11.0182 7.31695 11.1407 7.52441 11.499C8.05942 12.424 8.91824 13 10 13C11.0818 13 11.9406 12.424 12.4756 11.499Z",
+        fill: "currentColor"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M15.083 6.87524V4.91626H13.125C12.7108 4.91626 12.375 4.58047 12.375 4.16626C12.3752 3.7522 12.7109 3.41626 13.125 3.41626H15.083V1.45825C15.083 1.04415 15.4189 0.708427 15.833 0.708252C16.2472 0.708252 16.583 1.04404 16.583 1.45825V3.41626H18.542C18.9559 3.41644 19.2918 3.7523 19.292 4.16626C19.292 4.58036 18.9561 4.91608 18.542 4.91626H16.583V6.87524C16.5828 7.28931 16.2471 7.62524 15.833 7.62524C15.4191 7.62507 15.0832 7.2892 15.083 6.87524Z",
+        fill: "currentColor"
+      }
+    )
+  ] })
+);
 const IconExclamationMarkFill = createIcon(
   "IconExclamationMarkFill",
   /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -1644,15 +1709,23 @@ const IconExclamationMark = createIcon(
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 14.375C10.5178 14.375 10.9375 13.9553 10.9375 13.4375C10.9375 12.9197 10.5178 12.5 10 12.5C9.48223 12.5 9.0625 12.9197 9.0625 13.4375C9.0625 13.9553 9.48223 14.375 10 14.375Z" })
   ] })
 );
-const IconExclamationTriangle = createIcon(
-  "IconExclamationTriangle",
-  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.33838 2.1211C7.08775 0.860752 8.91225 0.860759 9.66162 2.1211L14.6509 10.5117C15.4171 11.8003 14.4889 13.4333 12.9897 13.4336H3.01026C1.51115 13.4333 0.582944 11.8003 1.34912 10.5117L6.33838 2.1211ZM8.63037 2.73438C8.34614 2.25634 7.65386 2.25634 7.36963 2.73438L2.38037 11.125C2.08977 11.6138 2.44181 12.2331 3.01026 12.2334H12.9897C13.5582 12.2331 13.9102 11.6138 13.6196 11.125L8.63037 2.73438ZM7.3999 8.50001V5.83302C7.40008 5.5018 7.66923 5.23341 8.00049 5.23341C8.33153 5.23367 8.59993 5.50196 8.6001 5.83302V8.50001C8.6001 8.83122 8.33164 9.09936 8.00049 9.09962C7.66912 9.09962 7.39991 8.83138 7.3999 8.50001ZM8.76709 10.333C8.76709 10.7563 8.4237 11.0994 8.00049 11.0996C7.57705 11.0996 7.23291 10.7565 7.23291 10.333C7.23309 9.90973 7.57716 9.56642 8.00049 9.56642L8.07862 9.57032C8.46503 9.60966 8.76693 9.93626 8.76709 10.333Z" }),
-  { viewBox: "0 0 16 16" }
+const IconExclamationTriangleFill = createIcon(
+  "IconExclamationTriangleFill",
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18.4999 14.6946L11.6678 2.82974C11.4971 2.53906 11.2534 2.29803 10.9608 2.13057C10.6682 1.9631 10.337 1.875 9.99986 1.875C9.66275 1.875 9.33149 1.9631 9.03892 2.13057C8.74635 2.29803 8.50262 2.53906 8.33189 2.82974L1.49986 14.6946C1.33559 14.9757 1.24902 15.2955 1.24902 15.6211C1.24902 15.9468 1.33559 16.2665 1.49986 16.5477C1.6684 16.8401 1.91171 17.0825 2.20483 17.2498C2.49795 17.4172 2.83032 17.5036 3.16783 17.5001H16.8319C17.1691 17.5033 17.5012 17.4168 17.794 17.2494C18.0868 17.0821 18.3299 16.8399 18.4983 16.5477C18.6628 16.2667 18.7496 15.947 18.7499 15.6214C18.7502 15.2957 18.6639 14.9759 18.4999 14.6946ZM9.37486 8.12505C9.37486 7.95929 9.44071 7.80032 9.55792 7.68311C9.67513 7.5659 9.8341 7.50005 9.99986 7.50005C10.1656 7.50005 10.3246 7.5659 10.4418 7.68311C10.559 7.80032 10.6249 7.95929 10.6249 8.12505V11.2501C10.6249 11.4158 10.559 11.5748 10.4418 11.692C10.3246 11.8092 10.1656 11.8751 9.99986 11.8751C9.8341 11.8751 9.67513 11.8092 9.55792 11.692C9.44071 11.5748 9.37486 11.4158 9.37486 11.2501V8.12505ZM9.99986 15.0001C9.81444 15.0001 9.63319 14.9451 9.47901 14.8421C9.32484 14.739 9.20468 14.5926 9.13372 14.4213C9.06277 14.25 9.0442 14.0615 9.08038 13.8797C9.11655 13.6978 9.20584 13.5308 9.33695 13.3996C9.46806 13.2685 9.63511 13.1792 9.81696 13.1431C9.99882 13.1069 10.1873 13.1255 10.3586 13.1964C10.5299 13.2674 10.6764 13.3875 10.7794 13.5417C10.8824 13.6959 10.9374 13.8771 10.9374 14.0626C10.9374 14.3112 10.8386 14.5496 10.6628 14.7255C10.487 14.9013 10.2485 15.0001 9.99986 15.0001Z" })
 );
-const IconEyeOpen = createIcon(
-  "IconEyeOpen",
-  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8.00001 2.56708C10.6293 2.5671 13.1778 4.13929 14.874 7.11591C15.1862 7.66419 15.1864 8.33627 14.874 8.88446C13.1778 11.861 10.6292 13.4333 8.00001 13.4333C5.37079 13.4333 2.82216 11.861 1.12598 8.88446C0.813474 8.33611 0.813474 7.66328 1.12598 7.11493C2.82216 4.13867 5.37091 2.56707 8.00001 2.56708ZM8.00001 3.7663C5.88909 3.76629 3.69769 5.02518 2.16798 7.70966C2.06545 7.88967 2.0654 8.11071 2.16798 8.29071C3.69768 10.9751 5.88913 12.2331 8.00001 12.2331C10.1109 12.2331 12.3023 10.9751 13.832 8.29071C13.9346 8.11071 13.9346 7.8898 13.832 7.70966C12.3023 5.02517 10.1109 3.76631 8.00001 3.7663ZM9.56641 7.99969C9.56624 7.13461 8.86513 6.43329 8.00001 6.43329C7.13489 6.43329 6.43378 7.13461 6.4336 7.99969C6.4336 8.86492 7.13478 9.56708 8.00001 9.56708C8.86524 9.56708 9.56641 8.86492 9.56641 7.99969ZM10.7666 7.99969C10.7666 9.52767 9.52798 10.7663 8.00001 10.7663C6.47204 10.7663 5.23341 9.52767 5.23341 7.99969C5.23358 6.47187 6.47214 5.23309 8.00001 5.23309C9.52787 5.23309 10.7664 6.47187 10.7666 7.99969Z" }),
-  { viewBox: "0 0 16 16" }
+const IconEyeFill = createIcon(
+  "IconEyeFill",
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19.3211 9.74688C19.2937 9.68516 18.632 8.21719 17.1609 6.74609C15.2008 4.78594 12.725 3.75 9.99999 3.75C7.27499 3.75 4.79921 4.78594 2.83905 6.74609C1.36796 8.21719 0.703118 9.6875 0.678899 9.74688C0.643362 9.82681 0.625 9.91331 0.625 10.0008C0.625 10.0883 0.643362 10.1748 0.678899 10.2547C0.706243 10.3164 1.36796 11.7836 2.83905 13.2547C4.79921 15.2141 7.27499 16.25 9.99999 16.25C12.725 16.25 15.2008 15.2141 17.1609 13.2547C18.632 11.7836 19.2937 10.3164 19.3211 10.2547C19.3566 10.1748 19.375 10.0883 19.375 10.0008C19.375 9.91331 19.3566 9.82681 19.3211 9.74688ZM9.99999 13.125C9.38193 13.125 8.77774 12.9417 8.26384 12.5983C7.74993 12.255 7.34939 11.7669 7.11287 11.1959C6.87634 10.6249 6.81446 9.99653 6.93504 9.39034C7.05562 8.78415 7.35324 8.22733 7.79028 7.79029C8.22732 7.35325 8.78414 7.05562 9.39033 6.93505C9.99652 6.81447 10.6249 6.87635 11.1959 7.11288C11.7669 7.3494 12.255 7.74994 12.5983 8.26384C12.9417 8.77775 13.125 9.38193 13.125 10C13.125 10.8288 12.7958 11.6237 12.2097 12.2097C11.6236 12.7958 10.8288 13.125 9.99999 13.125Z" })
+);
+const IconUnsupportedAttachment = createIcon(
+  "IconUnsupportedAttachment",
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M4.5 16.75H15.5V7.625H11.875C11.4608 7.625 11.125 7.28921 11.125 6.875V3.25H4.5V16.75ZM11.3447 9.46973C11.6376 9.17683 12.1124 9.17683 12.4053 9.46973C12.6982 9.76262 12.6982 10.2374 12.4053 10.5303L11.0605 11.875L12.4053 13.2197C12.6982 13.5126 12.6982 13.9874 12.4053 14.2803C12.1124 14.5732 11.6376 14.5732 11.3447 14.2803L10 12.9355L8.65527 14.2803C8.36238 14.5732 7.88762 14.5732 7.59473 14.2803C7.30183 13.9874 7.30183 13.5126 7.59473 13.2197L8.93945 11.875L7.59473 10.5303C7.30183 10.2374 7.30183 9.76262 7.59473 9.46973C7.88762 9.17683 8.36238 9.17683 8.65527 9.46973L10 10.8145L11.3447 9.46973ZM12.625 6.125H14.4395L12.625 4.31055V6.125ZM17 16.875C17 17.2397 16.8555 17.5898 16.5977 17.8477C16.3398 18.1055 15.9897 18.25 15.625 18.25H4.375C4.01033 18.25 3.66021 18.1055 3.40234 17.8477C3.14448 17.5898 3 17.2397 3 16.875V3.125C3 2.76033 3.14448 2.41021 3.40234 2.15234L3.50391 2.06152C3.74856 1.86111 4.05597 1.75 4.375 1.75H11.875C12.0739 1.75 12.2646 1.82907 12.4053 1.96973L16.7803 6.34473C16.9209 6.48538 17 6.67609 17 6.875V16.875Z",
+      fill: "currentColor"
+    }
+  )
 );
 const IconUpload = createIcon(
   "IconUpload",
@@ -1710,20 +1783,6 @@ const IconImage = createIcon(
     }
   )
 );
-const IconSidebar = createIcon(
-  "IconSidebar",
-  /* @__PURE__ */ jsxRuntime.jsx(
-    "path",
-    {
-      d: "M6.875 3.75V16.25M3.125 3.75H16.875C17.2202 3.75 17.5 4.02982 17.5 4.375V15.625C17.5 15.9702 17.2202 16.25 16.875 16.25H3.125C2.77982 16.25 2.5 15.9702 2.5 15.625V4.375C2.5 4.02982 2.77982 3.75 3.125 3.75Z",
-      fill: "none",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: "1.5"
-    }
-  )
-);
 const IconSearch = createIcon(
   "IconSearch",
   /* @__PURE__ */ jsxRuntime.jsx(
@@ -1736,7 +1795,8 @@ const IconSearch = createIcon(
       strokeLinejoin: "round",
       strokeWidth: "1.5"
     }
-  )
+  ),
+  { "data-rtl-mirror": "" }
 );
 const IconLocation = createIcon(
   "IconLocation",
@@ -1779,6 +1839,16 @@ const IconVoice = createIcon(
     }
   )
 );
+const IconMicrophoneSolid = createIcon(
+  "IconMicrophoneSolid",
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M6.25 10V5C6.25 4.00544 6.64509 3.05161 7.34835 2.34835C8.05161 1.64509 9.00544 1.25 10 1.25C10.9946 1.25 11.9484 1.64509 12.6517 2.34835C13.3549 3.05161 13.75 4.00544 13.75 5V10C13.75 10.9946 13.3549 11.9484 12.6517 12.6517C11.9484 13.3549 10.9946 13.75 10 13.75C9.00544 13.75 8.05161 13.3549 7.34835 12.6517C6.64509 11.9484 6.25 10.9946 6.25 10ZM16.25 10C16.25 9.83424 16.1842 9.67527 16.0669 9.55806C15.9497 9.44085 15.7908 9.375 15.625 9.375C15.4592 9.375 15.3003 9.44085 15.1831 9.55806C15.0658 9.67527 15 9.83424 15 10C15 11.3261 14.4732 12.5979 13.5355 13.5355C12.5979 14.4732 11.3261 15 10 15C8.67392 15 7.40215 14.4732 6.46447 13.5355C5.52678 12.5979 5 11.3261 5 10C5 9.83424 4.93415 9.67527 4.81694 9.55806C4.69973 9.44085 4.54076 9.375 4.375 9.375C4.20924 9.375 4.05027 9.44085 3.93306 9.55806C3.81585 9.67527 3.75 9.83424 3.75 10C3.7519 11.5489 4.32806 13.042 5.36707 14.1907C6.40607 15.3393 7.83409 16.062 9.375 16.2188V18.75C9.375 18.9158 9.44085 19.0747 9.55806 19.1919C9.67527 19.3092 9.83424 19.375 10 19.375C10.1658 19.375 10.3247 19.3092 10.4419 19.1919C10.5592 19.0747 10.625 18.9158 10.625 18.75V16.2188C12.1659 16.062 13.5939 15.3393 14.6329 14.1907C15.6719 13.042 16.2481 11.5489 16.25 10Z",
+      fill: "currentColor"
+    }
+  )
+);
 const IconMute = createIcon(
   "IconMute",
   /* @__PURE__ */ jsxRuntime.jsx(
@@ -1791,7 +1861,8 @@ const IconMute = createIcon(
       strokeLinejoin: "round",
       strokeWidth: "1.5"
     }
-  )
+  ),
+  { "data-rtl-mirror": "" }
 );
 const IconSend = createIcon(
   "IconSend",
@@ -1805,7 +1876,8 @@ const IconSend = createIcon(
       strokeLinejoin: "round",
       strokeWidth: "1.5"
     }
-  )
+  ),
+  { "data-rtl-mirror": "" }
 );
 const IconAttachment = createIcon(
   "IconAttachment",
@@ -1918,7 +1990,7 @@ const IconPlus = createIcon(
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      strokeWidth: "1.5"
+      strokeWidth: "2"
     }
   )
 );
@@ -2039,14 +2111,16 @@ const IconVideo = createIcon(
       }
     ) }),
     /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_14111_491476", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { fill: "white", height: "20", width: "20" }) }) })
-  ] })
+  ] }),
+  { "data-rtl-mirror": "" }
 );
 const IconVideoFill = createIcon(
   "IconVideoFill",
   /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip0_14064_467281)", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 5.625V14.375C15 14.7065 14.8683 15.0245 14.6339 15.2589C14.3995 15.4933 14.0815 15.625 13.75 15.625H2.5C2.16848 15.625 1.85054 15.4933 1.61612 15.2589C1.3817 15.0245 1.25 14.7065 1.25 14.375V5.625C1.25 5.29348 1.3817 4.97554 1.61612 4.74112C1.85054 4.5067 2.16848 4.375 2.5 4.375H13.75C14.0815 4.375 14.3995 4.5067 14.6339 4.74112C14.8683 4.97554 15 5.29348 15 5.625ZM19.5312 5.64453C19.4431 5.62295 19.3513 5.62029 19.2621 5.63672C19.1728 5.65315 19.088 5.68829 19.0133 5.73984L16.3891 7.48906C16.3463 7.51762 16.3112 7.55631 16.2869 7.6017C16.2626 7.64708 16.25 7.69776 16.25 7.74922V12.2508C16.25 12.3022 16.2626 12.3529 16.2869 12.3983C16.3112 12.4437 16.3463 12.4824 16.3891 12.5109L19.0281 14.2703C19.1269 14.3362 19.2424 14.3726 19.3611 14.3752C19.4798 14.3779 19.5968 14.3466 19.6984 14.2852C19.7924 14.2254 19.8695 14.1425 19.9223 14.0444C19.9751 13.9464 20.0019 13.8364 20 13.725V6.25C20.0001 6.11139 19.9541 5.97668 19.8692 5.86708C19.7843 5.75747 19.6655 5.67918 19.5312 5.64453Z" }) }),
     /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_14064_467281", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { fill: "white", height: "20", width: "20" }) }) })
-  ] })
+  ] }),
+  { "data-rtl-mirror": "" }
 );
 const IconAudio = createIcon(
   "IconAudio",
@@ -2060,7 +2134,8 @@ const IconAudio = createIcon(
       strokeLinejoin: "round",
       strokeWidth: "1.5"
     }
-  )
+  ),
+  { "data-rtl-mirror": "" }
 );
 const IconArchive = createIcon(
   "IconArchive",
@@ -2109,28 +2184,28 @@ const IconGiphy = createIcon(
       "path",
       {
         clipRule: "evenodd",
-        d: "M6.5997 5.50012H13.4008V14.4998H6.59912L6.5997 5.50012Z",
+        d: "M6.5997 5.50024H13.4008V14.4999H6.59912L6.5997 5.50024Z",
         fill: "black",
         fillRule: "evenodd"
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.24023 5.1665H6.59998V14.8335H5.24023V5.1665Z", fill: "#04FF8E" }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13.4004 7.8335H14.7601V14.8335H13.4004V7.8335Z", fill: "#8E2EFF" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.24023 14.4999H14.7602V15.8334H5.24023V14.4999Z", fill: "#00C5FF" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.24023 4.16663H10.6804V5.50013H5.24023V4.16663Z", fill: "#FFF152" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.24023 14.4998H14.7602V15.8333H5.24023V14.4998Z", fill: "#00C5FF" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.24023 4.16675H10.6804V5.50025H5.24023V4.16675Z", fill: "#FFF152" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
-        d: "M13.4003 6.83304V5.50013H12.0399V4.16663H10.6802V8.16654H14.76V6.83304",
+        d: "M13.4003 6.83316V5.50025H12.0399V4.16675H10.6802V8.16666H14.76V6.83316",
         fill: "#FF5B5B"
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13.4004 9.50013V8.16663H14.7601", fill: "#551C99" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13.4004 9.5V8.1665H14.7601", fill: "#551C99" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
         clipRule: "evenodd",
-        d: "M10.6802 4.16663V5.50013H9.31982",
+        d: "M10.6802 4.16675V5.50025H9.31982",
         fill: "#999131",
         fillRule: "evenodd"
       }
@@ -2620,63 +2695,6 @@ const MESSAGE_ACTIONS = {
   reply: "reply",
   saveForLater: "saveForLater"
 };
-const defaultPinPermissions = {
-  commerce: {
-    admin: true,
-    anonymous: false,
-    channel_member: false,
-    channel_moderator: true,
-    guest: false,
-    member: false,
-    moderator: true,
-    owner: true,
-    user: false
-  },
-  gaming: {
-    admin: true,
-    anonymous: false,
-    channel_member: false,
-    channel_moderator: true,
-    guest: false,
-    member: false,
-    moderator: true,
-    owner: false,
-    user: false
-  },
-  livestream: {
-    admin: true,
-    anonymous: false,
-    channel_member: false,
-    channel_moderator: true,
-    guest: false,
-    member: false,
-    moderator: true,
-    owner: true,
-    user: false
-  },
-  messaging: {
-    admin: true,
-    anonymous: false,
-    channel_member: true,
-    channel_moderator: true,
-    guest: false,
-    member: true,
-    moderator: true,
-    owner: true,
-    user: false
-  },
-  team: {
-    admin: true,
-    anonymous: false,
-    channel_member: true,
-    channel_moderator: true,
-    guest: false,
-    member: true,
-    moderator: true,
-    owner: true,
-    user: false
-  }
-};
 const getMessageActions = (actions, {
   canDelete,
   canEdit,
@@ -2783,6 +2801,7 @@ const areMessageUIPropsEqual = (prevProps, nextProps) => {
   return areMessagesEqual(prevMessage, nextMessage);
 };
 const messageHasReactions = (message) => Object.values(message?.reaction_groups ?? {}).some(({ count }) => count > 0);
+const messageHasQuotedMessage = (message) => !!message?.quoted_message;
 const messageHasAttachments = (message) => !!message?.attachments && !!message.attachments.length;
 const messageHasSingleAttachment = (message) => message?.attachments?.length === 1;
 const messageHasGiphyAttachment = (message) => !!message?.attachments?.some((att) => att.type === "giphy");
@@ -3102,7 +3121,6 @@ const getGroupStyles = (message, previousMessage, nextMessage, noGroupByUser, ma
   return "";
 };
 const hasMoreMessagesProbably = (returnedCountMessages, limit) => returnedCountMessages >= limit;
-const hasNotMoreMessages = (returnedCountMessages, limit) => returnedCountMessages < limit;
 function isIntroMessage(message) {
   return message.customType === CUSTOM_MESSAGE_TYPE.intro;
 }
@@ -3431,6 +3449,7 @@ const ChannelInner = (props) => {
     LoadingIndicator = LoadingChannel
   } = useComponentContext();
   const { client, customClasses, latestMessageDatesByChannels, mutes, searchController } = useChatContext("Channel");
+  const { addNotification } = useNotificationApi();
   const { t } = useTranslationContext("Channel");
   const chatContainerClass = getChatContainerClass(customClasses?.chatContainer);
   const windowsEmojiClass = useImageFlagEmojisOnWindowsClass();
@@ -3676,18 +3695,15 @@ const ChannelInner = (props) => {
     handleHighlightedMessageChange({ highlightedMessageId: jumpToMessageFromSearch.id });
   }, [jumpToMessageFromSearch, handleHighlightedMessageChange]);
   const notifyJumpToFirstUnreadError = React.useCallback(() => {
-    client.notifications.addError({
+    addNotification({
+      context: { feature: "jumpToFirstUnread" },
+      emitter: "Channel",
       message: t("Failed to jump to the first unread message"),
-      options: {
-        tags: addNotificationTargetTag("channel"),
-        type: "channel:jumpToFirstUnread:failed"
-      },
-      origin: {
-        context: { feature: "jumpToFirstUnread" },
-        emitter: "Channel"
-      }
+      severity: "error",
+      targetPanels: ["channel"],
+      type: "channel:jumpToFirstUnread:failed"
     });
-  }, [client, t]);
+  }, [addNotification, t]);
   const loadMoreFinished = React.useCallback(
     debounce(
       (hasMore, messages) => {
@@ -4288,7 +4304,6 @@ const ChatViewChannelsSelectorButton = ({
   iconOnly = true
 }) => {
   const { activeChatView, setActiveChatView } = useChatViewContext();
-  const { openMobileNav } = useChatContext("ChatViewChannelsSelectorButton");
   const { t } = useTranslationContext();
   const isActive = activeChatView === "channels";
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4299,10 +4314,7 @@ const ChatViewChannelsSelectorButton = ({
       Icon: IconMessageBubble,
       iconOnly,
       isActive,
-      onPointerDown: () => {
-        openMobileNav();
-        setActiveChatView("channels");
-      },
+      onPointerDown: () => setActiveChatView("channels"),
       text: t("Channels")
     }
   );
@@ -4310,7 +4322,7 @@ const ChatViewChannelsSelectorButton = ({
 const ChatViewThreadsSelectorButton = ({
   iconOnly = true
 }) => {
-  const { client, openMobileNav } = useChatContext();
+  const { client } = useChatContext();
   const { unreadThreadCount } = useStateStore(
     client.threads.state,
     unreadThreadCountSelector
@@ -4328,10 +4340,7 @@ const ChatViewThreadsSelectorButton = ({
       Icon: IconThread,
       iconOnly,
       isActive,
-      onPointerDown: () => {
-        openMobileNav();
-        setActiveChatView("threads");
-      },
+      onPointerDown: () => setActiveChatView("threads"),
       text: t("Threads"),
       children: /* @__PURE__ */ jsxRuntime.jsx(UnreadCountBadge, { count: unreadThreadCount, position: "top-right", children: isActive ? /* @__PURE__ */ jsxRuntime.jsx(IconThreadFill, {}) : /* @__PURE__ */ jsxRuntime.jsx(IconThread, {}) })
     }
@@ -4350,19 +4359,7 @@ const defaultChatViewSelectorItemSet = [
 const ChatViewSelector = ({
   iconOnly = true,
   itemSet = defaultChatViewSelectorItemSet
-}) => {
-  const { navOpen } = useChatContext("ChatView.Selector");
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: clsx("str-chat__chat-view__selector", {
-        "str-chat__chat-view__selector--nav-closed": navOpen === false,
-        "str-chat__chat-view__selector--nav-open": navOpen === true
-      }),
-      children: itemSet.map(({ Component, type }) => /* @__PURE__ */ jsxRuntime.jsx(Component, { iconOnly }, type))
-    }
-  );
-};
+}) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__chat-view__selector", children: itemSet.map(({ Component, type }) => /* @__PURE__ */ jsxRuntime.jsx(Component, { iconOnly }, type)) });
 ChatView.Channels = ChannelsView;
 ChatView.Threads = ThreadsView;
 ChatView.ThreadAdapter = ThreadAdapter;
@@ -4379,6 +4376,115 @@ const useNotificationTarget = () => {
   if (channels) return "channel-list";
   return void 0;
 };
+const SYSTEM_NOTIFICATION_TAG = "system";
+const hasSystemNotificationTag = (notification) => notification.tags?.includes(SYSTEM_NOTIFICATION_TAG) ?? false;
+const getTargetTags = (targetPanels, inferredPanel, tags) => {
+  if (targetPanels) {
+    return Array.from(
+      /* @__PURE__ */ new Set([...targetPanels.map(getNotificationTargetTag), ...tags ?? []])
+    );
+  }
+  return addNotificationTargetTag(inferredPanel, tags);
+};
+const getTypeFromIncident = ({
+  incident,
+  severity,
+  type
+}) => {
+  if (type) return type;
+  if (!incident) return void 0;
+  const status = incident.status ?? (severity === "error" ? "failed" : severity === "success" ? "success" : severity);
+  return [incident.domain, incident.entity, incident.operation, status].filter((segment) => !!segment).join(":");
+};
+const useNotificationApi = () => {
+  const { client } = useChatContext();
+  const inferredPanel = useNotificationTarget();
+  const addNotification = React.useCallback(
+    ({
+      actions,
+      context,
+      duration,
+      emitter,
+      error,
+      incident,
+      message,
+      severity,
+      tags,
+      targetPanels,
+      type
+    }) => {
+      const notificationTags = getTargetTags(targetPanels, inferredPanel, tags);
+      const resolvedType = getTypeFromIncident({ incident, severity, type });
+      const origin = context ? { context, emitter } : { emitter };
+      const options = {
+        ...actions ? { actions } : {},
+        ...typeof duration === "number" ? { duration } : {},
+        ...error ? { originalError: error } : {},
+        ...notificationTags.length > 0 ? { tags: notificationTags } : {},
+        ...severity ? { severity } : {},
+        ...resolvedType ? { type: resolvedType } : {}
+      };
+      client.notifications.add({
+        message,
+        options,
+        origin
+      });
+    },
+    [client, inferredPanel]
+  );
+  const addSystemNotification = React.useCallback(
+    ({
+      actions,
+      context,
+      duration,
+      emitter,
+      error,
+      incident,
+      message,
+      severity,
+      tags,
+      type
+    }) => {
+      const notificationTags = Array.from(
+        /* @__PURE__ */ new Set([SYSTEM_NOTIFICATION_TAG, ...tags ?? []])
+      );
+      const resolvedType = getTypeFromIncident({ incident, severity, type });
+      const origin = context ? { context, emitter } : { emitter };
+      const options = {
+        ...actions ? { actions } : {},
+        ...typeof duration === "number" ? { duration } : {},
+        ...error ? { originalError: error } : {},
+        ...notificationTags.length > 0 ? { tags: notificationTags } : {},
+        ...severity ? { severity } : {},
+        ...resolvedType ? { type: resolvedType } : {}
+      };
+      return client.notifications.add({
+        message,
+        options,
+        origin
+      });
+    },
+    [client]
+  );
+  const removeNotification = React.useCallback(
+    (id) => {
+      client.notifications.remove(id);
+    },
+    [client]
+  );
+  const startNotificationTimeout = React.useCallback(
+    (id) => {
+      client.notifications.startTimeout(id);
+    },
+    [client]
+  );
+  return {
+    addNotification,
+    addSystemNotification,
+    removeNotification,
+    startNotificationTimeout
+  };
+};
 const AudioPlayerContext = React.createContext({
   audioPlayers: null
 });
@@ -4407,7 +4513,7 @@ const useAudioPlayer = ({
   title,
   waveformData
 }) => {
-  const { client } = useChatContext();
+  const { addNotification } = useNotificationApi();
   const panel = useNotificationTarget();
   const { t } = useTranslationContext();
   const { audioPlayers } = React.useContext(AudioPlayerContext);
@@ -4425,7 +4531,7 @@ const useAudioPlayer = ({
   React.useEffect(() => {
     if (!audioPlayer) return;
     const notificationsPlugin = audioPlayerNotificationsPluginFactory({
-      client,
+      addNotification,
       panel,
       t
     });
@@ -4433,7 +4539,7 @@ const useAudioPlayer = ({
       ...currentPlugins.filter((plugin) => plugin.id !== notificationsPlugin.id),
       notificationsPlugin
     ]);
-  }, [audioPlayer, client, panel, t]);
+  }, [addNotification, audioPlayer, panel, t]);
   return audioPlayer;
 };
 const activeAudioPlayerSelector = ({ activeAudioPlayer }) => ({
@@ -4479,6 +4585,8 @@ exports.IconAudio = IconAudio;
 exports.IconBell = IconBell;
 exports.IconBellOff = IconBellOff;
 exports.IconBolt = IconBolt;
+exports.IconBookmark = IconBookmark;
+exports.IconBookmarkRemove = IconBookmarkRemove;
 exports.IconCamera = IconCamera;
 exports.IconCheckmark = IconCheckmark;
 exports.IconCheckmark1Small = IconCheckmark1Small;
@@ -4489,15 +4597,15 @@ exports.IconChevronRight = IconChevronRight;
 exports.IconClock = IconClock;
 exports.IconCommand = IconCommand;
 exports.IconCopy = IconCopy;
-exports.IconCrossSmall = IconCrossSmall;
 exports.IconDelete = IconDelete;
 exports.IconEdit = IconEdit;
 exports.IconEmoji = IconEmoji;
+exports.IconEmojiAdd = IconEmojiAdd;
 exports.IconExclamationCircleFill = IconExclamationCircleFill;
 exports.IconExclamationMark = IconExclamationMark;
 exports.IconExclamationMarkFill = IconExclamationMarkFill;
-exports.IconExclamationTriangle = IconExclamationTriangle;
-exports.IconEyeOpen = IconEyeOpen;
+exports.IconExclamationTriangleFill = IconExclamationTriangleFill;
+exports.IconEyeFill = IconEyeFill;
 exports.IconFile = IconFile;
 exports.IconFlag = IconFlag;
 exports.IconGiphy = IconGiphy;
@@ -4509,6 +4617,8 @@ exports.IconLocation = IconLocation;
 exports.IconMessageBubble = IconMessageBubble;
 exports.IconMessageBubbleFill = IconMessageBubbleFill;
 exports.IconMessageBubbles = IconMessageBubbles;
+exports.IconMicrophoneSolid = IconMicrophoneSolid;
+exports.IconMinus = IconMinus;
 exports.IconMinusCircle = IconMinusCircle;
 exports.IconMore = IconMore;
 exports.IconMute = IconMute;
@@ -4525,16 +4635,14 @@ exports.IconRefresh = IconRefresh;
 exports.IconReorder = IconReorder;
 exports.IconReply = IconReply;
 exports.IconRetry = IconRetry;
-exports.IconSave = IconSave;
 exports.IconSearch = IconSearch;
 exports.IconSend = IconSend;
-exports.IconSidebar = IconSidebar;
 exports.IconThread = IconThread;
 exports.IconThreadFill = IconThreadFill;
 exports.IconTranslate = IconTranslate;
 exports.IconTrophy = IconTrophy;
 exports.IconUnpin = IconUnpin;
-exports.IconUnsave = IconUnsave;
+exports.IconUnsupportedAttachment = IconUnsupportedAttachment;
 exports.IconUpload = IconUpload;
 exports.IconUser = IconUser;
 exports.IconUserAdd = IconUserAdd;
@@ -4545,6 +4653,7 @@ exports.IconVideoFill = IconVideoFill;
 exports.IconVoice = IconVoice;
 exports.IconXCircle = IconXCircle;
 exports.IconXmark = IconXmark;
+exports.IconXmarkSmall = IconXmarkSmall;
 exports.LegacyThreadContext = LegacyThreadContext;
 exports.LoadingChannel = LoadingChannel;
 exports.LoadingErrorIndicator = LoadingErrorIndicator;
@@ -4553,6 +4662,7 @@ exports.MESSAGE_ACTIONS = MESSAGE_ACTIONS;
 exports.MessageComposerContext = MessageComposerContext;
 exports.MessageComposerContextProvider = MessageComposerContextProvider;
 exports.OPTIONAL_MESSAGE_ACTIONS = OPTIONAL_MESSAGE_ACTIONS;
+exports.SYSTEM_NOTIFICATION_TAG = SYSTEM_NOTIFICATION_TAG;
 exports.ThreadContext = ThreadContext;
 exports.ThreadProvider = ThreadProvider;
 exports.TranslationContext = TranslationContext;
@@ -4568,7 +4678,6 @@ exports.countEmojis = countEmojis;
 exports.createIcon = createIcon;
 exports.defaultChatViewSelectorItemSet = defaultChatViewSelectorItemSet;
 exports.defaultDateTimeParser = defaultDateTimeParser;
-exports.defaultPinPermissions = defaultPinPermissions;
 exports.defaultRegisterAudioPlayerError = defaultRegisterAudioPlayerError;
 exports.defaultTranslatorFunction = defaultTranslatorFunction;
 exports.elementIsPlaying = elementIsPlaying;
@@ -4582,10 +4691,11 @@ exports.getLastReceived = getLastReceived;
 exports.getMessageActions = getMessageActions;
 exports.getNonImageAttachments = getNonImageAttachments;
 exports.getNotificationTargetPanel = getNotificationTargetPanel;
+exports.getNotificationTargetPanels = getNotificationTargetPanels;
 exports.getNotificationTargetTag = getNotificationTargetTag;
 exports.getReadByTooltipText = getReadByTooltipText;
 exports.hasMoreMessagesProbably = hasMoreMessagesProbably;
-exports.hasNotMoreMessages = hasNotMoreMessages;
+exports.hasSystemNotificationTag = hasSystemNotificationTag;
 exports.insertIntro = insertIntro;
 exports.isDate = isDate;
 exports.isDateSeparatorMessage = isDateSeparatorMessage;
@@ -4607,6 +4717,7 @@ exports.makeIntroMessage = makeIntroMessage;
 exports.mapToUserNameOrId = mapToUserNameOrId;
 exports.messageHasAttachments = messageHasAttachments;
 exports.messageHasGiphyAttachment = messageHasGiphyAttachment;
+exports.messageHasQuotedMessage = messageHasQuotedMessage;
 exports.messageHasReactions = messageHasReactions;
 exports.messageHasSingleAttachment = messageHasSingleAttachment;
 exports.messageTextHasEmojisOnly = messageTextHasEmojisOnly;
@@ -4627,6 +4738,7 @@ exports.useLegacyThreadContext = useLegacyThreadContext;
 exports.useMentionsHandlers = useMentionsHandlers;
 exports.useMessageComposerContext = useMessageComposerContext;
 exports.useMessageComposerController = useMessageComposerController;
+exports.useNotificationApi = useNotificationApi;
 exports.useNotificationTarget = useNotificationTarget;
 exports.usePopoverPosition = usePopoverPosition;
 exports.useStateStore = useStateStore;
@@ -4635,4 +4747,4 @@ exports.useThreadsViewContext = useThreadsViewContext;
 exports.useTranslationContext = useTranslationContext;
 exports.useTypingContext = useTypingContext;
 exports.validateAndGetMessage = validateAndGetMessage;
-//# sourceMappingURL=WithAudioPlayback.0c10cb67.js.map
+//# sourceMappingURL=WithAudioPlayback.83ba0e35.js.map