@sendbird/uikit-react 3.5.0-rc.1 → 3.5.0

package/CHANGELOG.md

@@ -1,5 +1,549 @@
 # Changelog - v3
 
+## [v3.5.0] (June 14 2023)
+
+### Feat:
+* Mobile Browser UX Revamp
+  We have revamped the UX to support mobile devices -
+  * Revamped Modals
+  * Revamped Context Menu -> Long press to open context menu
+  * Revamped Message Input
+
+  This feature is disabled by default. To enable this feature, add the following prop to `SendBirdProvider` & `App` component.
+  ```javascript
+  breakpoint?: string | boolean
+  ```
+
+  Example:
+  ```javascript
+  <SendBirdProvider breakpoint="768px">
+  ```
+  ```javascript
+  const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+  return (
+    <SendbirdProvider breakpoint={isMobile} />
+      {
+        isMobile
+          ? <MobileChatLayout />
+          : <DesktopChatLayout />
+      }
+    </SendbirdProvider>
+  )
+  ```
+
+  Other props:
+  * SendbirdProvider?.onUserProfileMessage?: (channel: GroupChannel) => void
+  Callback for handling when user sends a user profile message.
+  * Channel?.onBackClick?: () => void
+  Callback for handling when user clicks on back button in channel.
+  This is only applicable for mobile devices.
+
+* Configure UIKit through Dashboard(not released yet)
+  We are doing groundwork to support configuring  UIKit through
+  the dashboard. This will allow you to configure UIKit without
+  having to add props to each component. This feature *will not* be a
+  breaking change and will be backwards compatible.
+
+### Chore:
+* TSC error in typescript sample
+* Samples -> Upgrade vite to 4.3.9
+
+### Fixes:
+* Connection
+  * Disconnect SDK on Sendbird provider component unmount
+* Message
+  * Desktop - allow text select on Labels
+  * Remove loading placeholder on ThumbnailMessage
+  * OGMessage width overflow while adding reaction
+  * Center align & remove ellipsis from admin message
+* Voice Message
+  * Hide download option for voice message
+  * Show warning when there is no voice recording permission
+  * Race condition in playing audio files simultaneously
+  * Stop voice player when recorder exits
+  * Pause voice when component is removed from layout
+* Replies
+  * Quoted text alignment for reply messages
+  * MessageList: Triggering of random clicks while scroll to parent
+* Thread
+  * Improve parent message detection
+  * Emoji reactions overflow in message
+* Settings
+  * <AllMemebers />: Show context menu on click
+* Open Channel
+  * OpenChannel Context menu click leak
+  * Vertical scroll on labels in open channel list
+
+## [v3.4.9] (June 02 2023)
+
+Fixes:
+* ChannelList
+  * Display a channel on channel list only when there's a message
+  * Remove edited message from ChannelPreview
+
+* MarkAsRead & MarkAsDelivered
+  * Batch markAsRead & markAsDelivered requests
+
+* Scrolling
+  * Various scroll issues in Channel component
+  * Shaky scroll on messages when fetching messages
+  * Scroll into view when starting point is set
+  * Scroll into message on clicking quote reply
+  * Inconsistent rendering on scrollToBottom button
+
+* Mention
+  * Improve max mention count logic in Messages
+  * Improve mention detection when there are curly braces in user's name Mentions
+  were not working when user nickname had curly braces
+
+* Special channels
+  * Disable mention in the broadcast channel
+  * Change OpenChannelInput muted state notice text in broadcast channel
+
+* Reply
+  * Apply ellipsis to a sender of quote and admin message
+
+* Thread
+  * Add border bottom to the ParentMessageInfo component
+  * Modify string set for thread menu "Reply to Thread" -> "Reply in Thread"
+    Do not display "Reply in Thread" to the reply messages
+  * Prevent hover style of ParentMessageInfo component
+
+* OpenChannel
+  * Apply theme to the OpenChannelList header
+
+Chores:
+* Add a sample with router
+* Add dataId to the every menu items
+
+## [v3.4.8] (May 19 2023)
+
+Fixes:
+* Prevent white space only text sending
+* Mentioned user Regex parsing
+  Mention will now work even if userId has `.*+?^${}()|[\]\\` characters.
+* ChannelList blink when when message is send
+  Happened when there were two channelLists in the same page with
+  different query params.
+* ChannelSetting `renderUserProfile` prop
+  We were applying `renderChannelProfile` in place of `renderUserProfile`.
+* MessageBody: Words break mid word
+  Words were breaking midword because all white spaces
+  were converted into nbsps. CSS couldnt distinguish nbsps
+  as whitespaces, so wrapping didnt work well.
+
+Chores:
+* Setup CircleCI
+  * We are moving from Github Actions to CircleCI
+* Setup Husky
+  * Setup lint on post push
+  * Auto run yarn install on post pull
+* Update EsLint
+  * Update version to 8.40.x
+  * Apply more strict rules
+
+## [v3.4.7] (May 4 2023)
+
+Important Notes:
+* @sendbird/chat@4.8.0 has an issue with `abortcontroller-polyfill` plugin. Please use version 4.7.2 or install it separately.
+
+Features:
+* Set Chat SDK v4.3.0 as the minimum required version.
+* Add a new UI component, Toggle:
+  * `ToggleContainer`: A context provider component that manages only the toggle status.
+  * `ToggleUI`: A UI component that does not include the status managing logic.
+  * `Toggle`: A combination of ToggleContainer and ToggleUI components.
+  * `useToggleContext`: A custom useContext hook that provides context from ToggleContainer.
+  ```javascript
+  import { Toggle, ToggleContainer, ToggleUI,  useToggleContext } from '@sendbird/ui/Toggle';
+  ```
+  
+Fixes:
+* Apply `isMuted` to the participant list. Operators can now unmute the muted participants from the participant list.
+* Update the max mention count notice message.
+* Modify the URL Regex to filter various types of formats.
+* Give a left margin to the link text inside the message.
+* Move the message list scroll after the OG image is loaded.
+* Specify that getSdk returns SendbirdGroupChannel or SendbirdOpenChannel.
+* Fix the issue where the current channel flickers on the ChannelList while creating a new group channel.
+
+Chores: 
+* Rewrite the connection logic in sdk/thunks to hooks/useConnect
+  ```
+  const reconnect = useConnect({
+    appId,
+    userId,
+    accessToken,
+  }, {
+    logger,
+    nickname,
+    profileUrl,
+    configureSession,
+    customApiHost,
+    customWebSocketHost,
+    sdk: sdkStore?.sdk,
+    sdkDispatcher,
+    userDispatcher,
+  });
+  ```
+* Rename `smart-components/` to `modules/`.
+* Modify Logger method:
+  * The first parameter (log message) of the method is now required.
+  * Any other values can be passed to the second parameter of the method in a key-value format.
+
+## [v3.4.6] (Apr 21 2023)
+
+Fixes:
+* Use markAsReadScheduler in MessageList:
+  * `markAsReadScheduler` method throttles `markAsRead` calls.
+  * Reduces cmd no ack error.
+* Apply common scroll hook to GroupChannel MessageList:
+  * Prevent whole page from scrolling when <GroupChannel /> scrolls. This issue occurs when customer implements an <GroupChannel /> in a web page with scroll.
+  * This is a same fix that we fixed OpenChannel in `v3.4.4`.
+* To unify message sending policies with ios & android:
+  * Do not show send button when there is only new line or empty space in the input.
+  * Do not trim leading white spaces in message text.
+* Optimize lamjs import:
+  * Lazy load the audio converting processor(lamejs) only when `isVoiceMessageEnabled` is true.
+  * This saves 106KB Gzipped(85KB Brotli) if you are not using the VoiceMessage feature.
+
+## [v3.4.5] (Apr 7 2023)
+
+Features:
+
+* Add a message list filter of UI level in the `Channel` module
+  * Add `Channel.filterMessageList?: (messages: BaseMessage): boolean;`, a UI level filter prop
+    to Channel. This function will be used to filter messages in `<MessageList />`
+
+    example:
+    ```javascript
+    // set your channel URL
+    const channel = "";
+    export const ChannelWithFilter = () => {
+      const channelFilter = useCallback((message) => {
+        const now = Date.now();
+        const twoWeeksAgo = now - 1000 * 60 * 60 * 24 * 14;
+        return message.createdAt > twoWeeksAgo;
+      }, []);
+      return (
+        <Channel
+              channelUrl={channel}
+              filterMessageList={channelFilter}
+            />
+      );
+    };
+    ```
+
+* Improve structure of message UI for copying
+    Before:
+    * The words inside messages were kept in separate spans
+    * This would lead to unfavourable formatting when pasted in other applications
+
+    After:
+    * Remove span for wrapping simple strings in message body
+    * Urls and Mentions will still be wrapped in spans(for formatting)
+    * Apply new logic & components(TextFragment) to tokenize strings
+    * Improve keys used in rendering inside message,
+      * UUIDs are not the optimal way to improve rendering
+      * Create a composite key with message.updatedAt
+    * Refactor usePaste hook to make mentions work ~
+    * Fix overflow of long strings
+    * Deprecate `Word` and `convertWordToStringObj`
+
+* Export MessageProvider, a simple provider to avoid prop drilling into Messages
+    Note - this is still in works, but these props will remain
+    * In the future, we will add methods - to this module - to:
+      * Edit & delete callbacks
+      * Menu render options(ACLs)
+      * Reaction configs
+      * This will improve the customizability and remove a lot of prop drilling in Messages
+
+    ```
+    export type MessageProviderProps = {
+      children: React.ReactNode;
+      message: BaseMessage;
+      isByMe?: boolean;
+    }
+
+    import { MessageProvider, useMessageContext } from '@sendbird/uikit-react/Message/context'
+    ```
+    Incase if you were using MessageComponents and see error message
+    `useMessageContext must be used within a MessageProvider `
+    use: `<MessageProvider message={message}><CustomMessage /></MessageProvider>`
+
+* Add a scheduler for calling markAsRead intervally
+  * The `markAsRead` is called on individual channels is un-optimal(causes command ack. error)
+because we have a list of channels that do this
+ideally this should be fixed in server/SDK
+this is a work around for the meantime to un-throttle the customer
+
+Fixes:
+* Set current channel on `ChannelList` when opening channel from the parent message of `Thread`
+  * Issue: The ChannelPreview item is not selected when opening the channel from
+  the ParentMessage of the Thread
+  * Fix: Set activeChannelUrl of ChannelList
+* Detect new lines in safari on the `MessageInput` component
+  * Safari puts `<div>text</div>` for new lines inside content editable div(input)
+  * Other browsers put newline or `br`
+
+## [v3.4.4] (Mar 31 2023)
+
+Features:
+* Increase default maximum recording time of Voice Message to 10 minutes
+* Add logger to VoicePlayer, VoiceRecorder, and useSendVoiceMessage hook
+
+Fixes:
+* Prevent whole page from scrolling when OpenChannel scrolls
+  This issue occurs when customer implements an OpenChannel in a web page with scroll
+* Fix edgecase in which voice messages were sent twice
+* Clean up Thread interface
+  If message.parentMessage doesnt exist, treat message as parentMessage
+  `<Thread message={message} />`
+
+## [v3.4.3] (Mar 24 2023)
+
+Features:
+* Add rollup-plugin-size-snapshot for bundle-size
+  Run rollup-plugin-size-snapshot on build,
+  we will check bundle size before every release
+* Move old samples to use vite
+  React team these days are using vite for their samples,
+  CRA is discourged
+* Run code coverage on commenting `./coverage`
+  Check code coverage on PR comment
+* Add prop to disable Channel & Thread inputs
+  Add prop: `disabled?: false` for Channel & Thread MessageInputWrapper
+* Replace renderToString(react-dom) with custom fn
+  Replace renderToString from react-dom/server with custom function
+  This function was creating issue in customers with cra@4 & react@17
+
+Fixes:
+* Replace outdated CSS rules
+  `justify-content: start;` and  `height: fill-available;`
+* Menu position in tight screens
+  * Condition where some menus get clipped in left side:
+    * Usually user profile in channel moderation
+  * Context menu of last item in channel gets clipped in the bottom
+
+
+## [v3.4.2] (Mar 17 2023)
+
+Features:
+* Mentions should be preserved when copy pasted from sendbird-messages and message input
+  * Make sure you are posting mentions of users from same channel
+  * We dont support pasting of rich text from other applications
+  * For copying simple text, we recommend using paste option in message context-menu
+
+  * Conditions tested:
+    1. paste simple text
+    2. paste text with mention
+    3. paste text with mention and text
+    4. paste text with mention and text and paste again before and after
+    5. copy message with mention(only one mention, no other text) and paste
+    6. copy message with mention from input and paste(before and after)
+
+Chores:
+* Arrange the order of the string set table
+Some string-set were missing on the current string set table, so our customers werent able to use the latest state of the string set feature
+
+Library added:
+* [dompurify@3.0.1](https://www.npmjs.com/package/dompurify): +8Kb Gzipped
+
+## [v3.4.1] (Mar 10 2023)
+
+Fixes:
+* Keep scroll if context menu is opened when receiving messages
+* Handle Ephemeral channel
+  * Group channel list
+    * Remove the message receipt status (channel preview)
+    * Remove the unread message count (channel preview)
+  * Group channel
+    * Remove the message edit
+    * Remove the message delete
+    * Remove the message reactions
+    * Remove the message receipt status (message)
+    * Remove the message reply (quote_reply, thread)
+  * Group channel settings
+    * Remove the search in channel
+  * Open channel
+    * Remove the message edit
+    * Remove the message delete
+* Clear timeout in useLayoutEffect of Message
+  * This removes memory leak warnings
+
+## [v3.4.0] (Mar 6 2023)
+
+### Voice Message
+Voice message is a new type of message and feature that you can use in group channel. You can record your voice on the message input and send it to the channel. Also the messages will be displayed as a new design of the voice message. You are able to use this feature from this version.
+
+#### How to turn on/off
+* You can turn this feature on/off using the props `isVoiceMessageEnabled` on the <App /> and <SendbirdProvider /> components. Here is an example.
+```javascript
+import App from '@sendbird/uikit-react/App'
+import SendbirdProvider from '@sendbird/uikit-react/SendbirdProvider'
+import { useEffect } from 'react'
+
+const QuickStart = () => (<App isVoiceMessageEnabled />)
+const CustomApp = () => {
+  const [useVoiceMessage, setUseVoiceMessage] = useEffect(true)
+  return (
+    <SendbirdProvider
+      isVoiceMessageEnabled={useVoiceMessage}
+    >
+      {/* Implement your custom app here */}
+    </SendbirdProvider>
+  )
+}
+```
+
+#### How to customize the voice message in Channel and Thread?
+You can identify the voice message to check if `message.type` includes `sbu_type=voice`. But you can use `isVoiceMessage` util function to do that.
+```javascript
+import Channel from '@sendbird/uikit-react/Channel'
+import isVoiceMessage from '@sendbird/uikit-react/utils/message/isVoiceMessage'
+
+const CustomChannel = () => {
+  return (
+    <Channel
+      renderMessage={({ message }) => {
+        if (isVoiceMessage(message)) {
+          // Return your custom voice message item component
+        }
+        return null
+      }}
+    />
+  )
+}
+```
+
+#### Limitation & Next step
+* For now, it's not able to customize the inner components of VoiceMessageInput. We are going to provide an interface to customize it in the future. Until that time, you can replace the VoiceMessageInput component using the `renderVoiceMessageIcon` props of MessageInput component.
+
+#### What has been changed?
+* Add props `isVoiceMessageEnabled` and `voiceRecord` props to the App, `SendbirdProvider`, and `MessageInput` components, to turn on/off the voice message recording feature
+  ```javascript
+  import SendbirdProvider from '@sendbird/uikit-react/SendbirdProvider'
+  const CustomApp = () => {
+    return (
+      <SendbirdProvider
+        isVoiceMessageEnabled
+        voiceRecord={{
+          maxRecordingTime: 60000,
+          minRecordingTime: 1000,
+        }}
+      >
+        {/* implement custom application */}
+      </SendbirdProvider>
+    )
+  }
+  ```
+* Add props `onVoiceMessageIconClick` to the `MessageInput` component
+* Add props `onBeforeSendVoiceMessage` to the `Channel` component
+* Fetch message list including `MetaArray` in the `Channel` and `Thread` modules
+* Provide new IconType `AudioOnLined` & new IconColor `Primary2` and `OnBackground4`
+* Provide new string sets
+  ```javascript
+  import SendbirdProvider from '@sendbird/uikit-react/SendbirdProvider'
+  const CustomApp = () => {
+    return (
+      <SendbirdProvider
+        stringSet={{
+          BUTTON__OK: 'OK',
+          VOICE_MESSAGE: 'Voice Message',
+          MODAL__VOICE_MESSAGE_INPUT_DISABLED__TITLE_MUTED: 'You\'re muted by the operator.',
+          MODAL__VOICE_MESSAGE_INPUT_DISABLED__TITLE_FROZEN: 'Channel is frozen.',
+        }}
+      >
+        {/* implement custom application */}
+      </SendbirdProvider>
+    )
+  }
+  ```
+  * `BUTTON__OK`: 'OK' → Used on the submit button of pop up modal
+  * `MODAL__VOICE_MESSAGE_INPUT_DISABLED__TITLE_MUTED`: 'You\'re muted by the operator.' → Used in an alert pop-up modal
+  * `MODAL__VOICE_MESSAGE_INPUT_DISABLED__TITLE_FROZEN`: 'Channel is frozen.' → Used in an alert pop-up modal
+  * `VOICE_MESSAGE`: 'Voice Message' → Used in ChannelPreviewItem, QuoteMessage, and MessageSearch to appear that the message type is the voice## External Contributions
+
+#### What has been added?
+* Install `lamejs` to convert the audio file to mp3 (iOS support)
+* UI components
+  ```javascript
+  import PlaybackTime from "@sendbird/uikit-react/ui/PlaybackTime"
+  import ProgressBar from "@sendbird/uikit-react/ui/ProgressBar"
+  import VoiceMessageInput from "@sendbird/uikit-react/ui/VoiceMessageInput"
+  import VoiceMessageItemBody from "@sendbird/uikit-react/ui/VoiceMessageItemBody"
+  ```
+  * PlaybackTime: Display the current time in 00:00 format with the received millisecond value
+  * ProgressBar: Display the current progress status with the received maxSize and currentSize of millisecond unit value
+  * VoiceMessageInput: UI component for recording and playing a voice message
+  * VoiceMessageItemBody: UI component for rendering a voice message also able to play voice message
+* VoiceRecorder
+  ```javascript
+  import { VoiceRecorderProvider, useVoiceRecorderContext } from '@sendbird/uikit-react/VoiceRecorder/context'
+  import useVoiceRecorder from '@sendbird/uikit-react/VoiceRecorder/useVoiceRecorder'
+  ```
+  * VoiceRecorderProvider: A react context provider component providing `start`, and `stop` functions
+  * useVoiceRecorderContext: A react useContext hook of VoiceRecorderProvider
+  * useVoiceRecorder: A react hook that provides advanced context, `recordingLimit`, `recordingTime`, `recordingFile`, and `recordingStatus`. Recommend using this hook in the customized components.
+* VoicePlayer
+  ```javascript
+  import { VoicePlayerProvider, useVoicePlayerContext } from '@sendbird/uikit-react/VoicePlayer/context'
+  import useVoicePlayer from '@sendbird/uikit-react/VoicePlayer/useVoicePlayer'
+  ```
+  * VoicePlayerProvider: A react context provider component providing `play`, and `pause` functions
+  * useVoicePlayerContext: A react useContext hook of VoicePlayerProvider
+  * useVoicePlayer: A react hook that provides advanced context, `playbackTime`, `duration`, and `playingStatus`. Recommend using this hook in the customized components.
+* utils/isVoiceMessage: A function that you can check if the given message is a voice message
+  ```javascript
+  import isVoiceMessage from '@sendbird/uikit-react/utils/message/isVoiceMessage'
+  const isVoiceMsg: boolean = isVoiceMessage(message);
+  ```
+
+Features:
+* Add props `renderFileUploadIcon`, `renderVoiceMessageIcon`, and `renderSendMessageIcon` into the `Channel`, `ChannelUI`, and `MessageInput` component
+  ```javascript
+  interface MessageInputProps {
+    renderFileUploadIcon?: () =>  React.ReactElement;
+    renderVoiceMessageIcon?: () =>  React.ReactElement;
+    renderSendMessageIcon?: () =>  React.ReactElement;
+  }
+  ```
+
+Fixes:
+* Use ApplicationUserListQuery on ChannelSettings component
+* Fix some visual issues on the normal User Panel of ChannelSettings
+* Indentify faulty images in OG message
+* Add classname: sendbird-og-message-item-body__og-thumbnail__empty to identify faulty images in OG message
+  Clients can use CSS to target this class~
+  ```css
+  .sendbird-og-message-item-body__og-thumbnail__empty {
+    display: none;
+  }
+  ```
+
+## [v3.3.7] (Feb 24 2023)
+
+Features:
+* Add props `activeChannelUrl` to ChannelList to give an option to pragmatically set a channel from a parent component router
+  ```javascript
+  const MyChannelList = () => {
+    const [myActiveChannel] = useState()
+    return (<ChannelList activeChannelUrl={myActiveChannel.url} />)
+  }
+  ```
+
+Fixes:
+* Fix not showing newly recived messages in channel which has less messages
+* Use a real `channel.invitedAt` value when trying to fetch MessageSearchQuery
+* Disable the checkbox of the joined users on the InviteUsersModal
+* Set the default value of CheckBox component: `@sendbird/uikit-react/ui/CheckBox` as false
+
+## [v3.3.6] (Feb 13 2023)
+
+Fixes:
+* pubsub should be initialized with useState
+* update onBeforeCreateChannel example to use chat V4
+
 ## [v3.5.0-beta.0] (Feb 6 2023)
 
 ### Notification Channel

package/Channel/components/ChannelHeader.js

@@ -1,57 +1,61 @@
 import React__default, { useContext } from 'react';
-import { g as getChannelTitle } from '../../utils-2976f2c1.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-2784bdd8.js';
+import { g as getChannelTitle } from '../../utils-77f7e8b2.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-e33f7f55.js';
 import Icon, { IconColors, IconTypes } from '../../ui/Icon.js';
 import IconButton from '../../ui/IconButton.js';
 import ChannelAvatar from '../../ui/ChannelAvatar.js';
-import { a as LocalizationContext } from '../../LocalizationContext-289c1917.js';
+import { a as LocalizationContext } from '../../LocalizationContext-04c0c9dc.js';
 import useSendbirdStateContext from '../../useSendbirdStateContext.js';
-import { u as useChannelContext } from '../../ChannelProvider-289cd35f.js';
-import { u as useMediaQueryContext } from '../../MediaQueryContext-273d29f6.js';
-import { n as noop } from '../../utils-ea66f822.js';
+import { u as useChannelContext } from '../../ChannelProvider-6e8e99df.js';
+import { u as useMediaQueryContext } from '../../MediaQueryContext-ff9dca2b.js';
+import { n as noop } from '../../utils-56cb7de5.js';
 import 'prop-types';
-import '../../stringSet-9ae71b7d.js';
-import '../../tslib.es6-72df3331.js';
+import '../../stringSet-e0ee1265.js';
+import '../../_rollupPluginBabelHelpers-fb0e05a4.js';
 import '../../ui/Avatar.js';
 import '../../ui/ImageRenderer.js';
-import '../../uuid-7e004f47.js';
-import '../../utils-6b69fb18.js';
-import '../../index-4ebfc7a7.js';
+import '../../uuid-92d22300.js';
+import '../../utils-af9b1c06.js';
+import '../../index-319984d0.js';
 import '../../withSendbird.js';
-import '../../_rollupPluginBabelHelpers-519f674b.js';
-import '../../UserProfileContext-e3530842.js';
-import '../../index-3c013a28.js';
-import '../../topics-e2963bba.js';
-import '../../index-855ef33d.js';
+import '../../UserProfileContext-c776d522.js';
+import '../../const-18dba7a4.js';
+import '../../index-4455855e.js';
+import '../../topics-70f569e9.js';
+import '../../index-cf859f03.js';
 import '../../utils/message/getOutgoingMessageState.js';
-import '../../compareIds-ef41eb2c.js';
-import '../../const-da6f3d34.js';
+import '../../compareIds-3a43c11b.js';
 import '@sendbird/chat/groupChannel';
 import '@sendbird/chat/message';
-import '../../ui/ContextMenu.js';
-import 'react-dom';
-import '../../ui/SortByRow.js';
-import '../../ui/ReactionButton.js';
+import '../../consts-c1baf70a.js';
+import '../../resolvedReplyType-8776d777.js';
 
-var ChannelHeader = function () {
-  var _a, _b, _c;
-
-  var globalStore = useSendbirdStateContext();
-  var userId = (_a = globalStore === null || globalStore === void 0 ? void 0 : globalStore.config) === null || _a === void 0 ? void 0 : _a.userId;
-  var theme = (_b = globalStore === null || globalStore === void 0 ? void 0 : globalStore.config) === null || _b === void 0 ? void 0 : _b.theme;
-  var channelStore = useChannelContext();
-  var isMobile = useMediaQueryContext().isMobile;
-  var currentGroupChannel = channelStore.currentGroupChannel,
-      showSearchIcon = channelStore.showSearchIcon,
-      onSearchClick = channelStore.onSearchClick,
-      onChatHeaderActionClick = channelStore.onChatHeaderActionClick,
-      _d = channelStore.onBackClick,
-      onBackClick = _d === void 0 ? noop : _d;
-  var subTitle = (currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.members) && ((_c = currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.members) === null || _c === void 0 ? void 0 : _c.length) !== 2;
-  var isMuted = (currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.myMutedState) === "muted";
-  var stringSet = useContext(LocalizationContext).stringSet;
+const ChannelHeader = _ref => {
+  var _globalStore$config, _globalStore$config2, _currentGroupChannel$;
+  let {
+    className = ''
+  } = _ref;
+  const globalStore = useSendbirdStateContext();
+  const userId = globalStore === null || globalStore === void 0 ? void 0 : (_globalStore$config = globalStore.config) === null || _globalStore$config === void 0 ? void 0 : _globalStore$config.userId;
+  const theme = globalStore === null || globalStore === void 0 ? void 0 : (_globalStore$config2 = globalStore.config) === null || _globalStore$config2 === void 0 ? void 0 : _globalStore$config2.theme;
+  const channelStore = useChannelContext();
+  const {
+    isMobile
+  } = useMediaQueryContext();
+  const {
+    currentGroupChannel,
+    showSearchIcon,
+    onSearchClick,
+    onChatHeaderActionClick,
+    onBackClick = noop
+  } = channelStore;
+  const subTitle = (currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.members) && (currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : (_currentGroupChannel$ = currentGroupChannel.members) === null || _currentGroupChannel$ === void 0 ? void 0 : _currentGroupChannel$.length) !== 2;
+  const isMuted = (currentGroupChannel === null || currentGroupChannel === void 0 ? void 0 : currentGroupChannel.myMutedState) === 'muted';
+  const {
+    stringSet
+  } = useContext(LocalizationContext);
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "sendbird-chat-header"
+    className: `sendbird-chat-header ${className}`
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-chat-header__left"
   }, isMobile && /*#__PURE__*/React__default.createElement(Icon, {
@@ -80,9 +84,10 @@ var ChannelHeader = function () {
   }, (typeof isMuted === 'string' && isMuted === 'true' || typeof isMuted === 'boolean' && isMuted) && /*#__PURE__*/React__default.createElement(Icon, {
     className: "sendbird-chat-header__right__mute",
     type: IconTypes.NOTIFICATIONS_OFF_FILLED,
+    fillColor: IconColors.ON_BACKGROUND_2,
     width: "24px",
     height: "24px"
-  }), showSearchIcon && /*#__PURE__*/React__default.createElement(IconButton, {
+  }), showSearchIcon && !(currentGroupChannel !== null && currentGroupChannel !== void 0 && currentGroupChannel.isEphemeral) && /*#__PURE__*/React__default.createElement(IconButton, {
     className: "sendbird-chat-header__right__search",
     width: "32px",
     height: "32px",