stream-chat-react 13.14.1 → 13.14.3

package/dist/components/Chat/hooks/useChat.js

@@ -24,7 +24,7 @@ export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialN
     useEffect(() => {
         if (!client)
             return;
-        const version = "13.14.1";
+        const version = "13.14.3";
         const userAgent = client.getUserAgent();
         if (!userAgent.includes('stream-chat-react')) {
             // result looks like: 'stream-chat-react-2.3.2-stream-chat-javascript-client-browser-2.2.2'

package/dist/components/EventComponent/EventComponent.d.ts

@@ -7,6 +7,7 @@ export type EventComponentProps = TimestampFormatterOptions & {
     message: LocalMessage & {
         event?: Event;
     };
+    unsafeHTML?: boolean;
     /** Custom UI component to display user avatar, defaults to and accepts same props as: [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) */
     Avatar?: React.ComponentType<AvatarProps>;
 };

package/dist/components/EventComponent/EventComponent.js

@@ -6,15 +6,15 @@ import { getDateString } from '../../i18n/utils';
  * Component to display system and channel event messages
  */
 const UnMemoizedEventComponent = (props) => {
-    const { Avatar = DefaultAvatar, calendar, calendarFormats, format, message } = props;
+    const { Avatar = DefaultAvatar, calendar, calendarFormats, format, message, unsafeHTML = false, } = props;
     const { t, tDateTimeParser } = useTranslationContext('EventComponent');
-    const { created_at = '', event, text, type } = message;
+    const { created_at = '', event, type } = message;
     const getDateOptions = { messageCreatedAt: created_at.toString(), tDateTimeParser };
     if (type === 'system')
         return (React.createElement("div", { className: 'str-chat__message--system', "data-testid": 'message-system' },
             React.createElement("div", { className: 'str-chat__message--system__text' },
                 React.createElement("div", { className: 'str-chat__message--system__line' }),
-                React.createElement("p", null, text),
+                unsafeHTML ? (React.createElement("div", { dangerouslySetInnerHTML: { __html: message.html || '' }, "data-unsafe-inner-html": true })) : (React.createElement("p", null, message.text)),
                 React.createElement("div", { className: 'str-chat__message--system__line' })),
             React.createElement("div", { className: 'str-chat__message--system__date' },
                 React.createElement("strong", null, getDateString({

package/dist/components/MessageList/CustomNotification.d.ts

@@ -1,7 +1,8 @@
 import type { PropsWithChildren } from 'react';
 import React from 'react';
+import type { NotificationSeverity } from 'stream-chat';
 export type CustomNotificationProps = {
-    type: string;
+    type?: NotificationSeverity | string;
     active?: boolean;
     className?: string;
 };

package/dist/components/MessageList/CustomNotification.js

@@ -4,6 +4,6 @@ const UnMemoizedCustomNotification = (props) => {
     const { active, children, className, type } = props;
     if (!active)
         return null;
-    return (React.createElement("div", { "aria-live": 'polite', className: clsx(`str-chat__custom-notification notification-${type}`, `str-chat__notification`, `str-chat-react__notification`, className), "data-testid": 'custom-notification' }, children));
+    return (React.createElement("div", { "aria-live": 'polite', className: clsx(`str-chat__custom-notification`, `str-chat__notification`, `str-chat-react__notification`, { [`notification-${type}`]: type }, className), "data-testid": 'custom-notification' }, children));
 };
 export const CustomNotification = React.memo(UnMemoizedCustomNotification);

package/dist/components/MessageList/renderMessages.js

@@ -23,7 +23,7 @@ export function defaultRenderMessages({ channelUnreadUiState, components, custom
         }
         else if (message.type === 'system') {
             renderedMessages.push(React.createElement(MessageListItem, { "data-index": index, "data-message-id": message.id, key: message.id || message.created_at.toISOString() },
-                React.createElement(MessageSystem, { message: message })));
+                React.createElement(MessageSystem, { message: message, unsafeHTML: messageProps.unsafeHTML })));
         }
         else {
             if (!firstMessage) {

package/dist/index.browser.cjs

@@ -24122,9 +24122,10 @@ var UnMemoizedCustomNotification = (props) => {
     {
       "aria-live": "polite",
       className: (0, import_clsx44.default)(
-        `str-chat__custom-notification notification-${type}`,
+        `str-chat__custom-notification`,
         `str-chat__notification`,
         `str-chat-react__notification`,
+        { [`notification-${type}`]: type },
         className
       ),
       "data-testid": "custom-notification"
@@ -28995,12 +28996,25 @@ var DateSeparator = import_react180.default.memo(
 // src/components/EventComponent/EventComponent.tsx
 var import_react181 = __toESM(require("react"));
 var UnMemoizedEventComponent = (props) => {
-  const { Avatar: Avatar2 = Avatar, calendar: calendar3, calendarFormats, format, message } = props;
+  const {
+    Avatar: Avatar2 = Avatar,
+    calendar: calendar3,
+    calendarFormats,
+    format,
+    message,
+    unsafeHTML = false
+  } = props;
   const { t, tDateTimeParser } = useTranslationContext("EventComponent");
-  const { created_at = "", event, text: text8, type } = message;
+  const { created_at = "", event, type } = message;
   const getDateOptions = { messageCreatedAt: created_at.toString(), tDateTimeParser };
   if (type === "system")
-    return /* @__PURE__ */ import_react181.default.createElement("div", { className: "str-chat__message--system", "data-testid": "message-system" }, /* @__PURE__ */ import_react181.default.createElement("div", { className: "str-chat__message--system__text" }, /* @__PURE__ */ import_react181.default.createElement("div", { className: "str-chat__message--system__line" }), /* @__PURE__ */ import_react181.default.createElement("p", null, text8), /* @__PURE__ */ import_react181.default.createElement("div", { className: "str-chat__message--system__line" })), /* @__PURE__ */ import_react181.default.createElement("div", { className: "str-chat__message--system__date" }, /* @__PURE__ */ import_react181.default.createElement("strong", null, getDateString({
+    return /* @__PURE__ */ import_react181.default.createElement("div", { className: "str-chat__message--system", "data-testid": "message-system" }, /* @__PURE__ */ import_react181.default.createElement("div", { className: "str-chat__message--system__text" }, /* @__PURE__ */ import_react181.default.createElement("div", { className: "str-chat__message--system__line" }), unsafeHTML ? /* @__PURE__ */ import_react181.default.createElement(
+      "div",
+      {
+        dangerouslySetInnerHTML: { __html: message.html || "" },
+        "data-unsafe-inner-html": true
+      }
+    ) : /* @__PURE__ */ import_react181.default.createElement("p", null, message.text), /* @__PURE__ */ import_react181.default.createElement("div", { className: "str-chat__message--system__line" })), /* @__PURE__ */ import_react181.default.createElement("div", { className: "str-chat__message--system__date" }, /* @__PURE__ */ import_react181.default.createElement("strong", null, getDateString({
       ...getDateOptions,
       calendar: calendar3,
       calendarFormats,
@@ -29070,7 +29084,7 @@ function defaultRenderMessages({
             "data-message-id": message.id,
             key: message.id || message.created_at.toISOString()
           },
-          /* @__PURE__ */ import_react182.default.createElement(MessageSystem, { message })
+          /* @__PURE__ */ import_react182.default.createElement(MessageSystem, { message, unsafeHTML: messageProps.unsafeHTML })
         )
       );
     } else {
@@ -29135,7 +29149,7 @@ var import_react184 = require("react");
 
 // src/utils/findReverse.ts
 var findReverse = (items, matches) => {
-  for (let i = items.length - 1; i > 0; i -= 1) {
+  for (let i = items.length - 1; i >= 0; i -= 1) {
     if (matches(items[i])) {
       return items[i];
     }
@@ -37408,7 +37422,7 @@ var useChat = ({
   };
   (0, import_react289.useEffect)(() => {
     if (!client) return;
-    const version = "13.14.1";
+    const version = "13.14.3";
     const userAgent = client.getUserAgent();
     if (!userAgent.includes("stream-chat-react")) {
       client.setUserAgent(`stream-chat-react-${version}-${userAgent}`);