fix: Use util function for the component className

src/hooks/useModal/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useCallback, ReactElement, createContext, useMemo, useContext } from 'react';
 import { match } from 'ts-pattern';
 
-import { noop } from '../../utils/utils';
+import { classnames, noop } from '../../utils/utils';
 import Modal, { type ModalProps } from '../../ui/Modal';
 
 export type OpenGlobalModalProps = {
@@ -39,7 +39,7 @@ export const GlobalModalProvider = ({ children }: GlobalModalProviderProps) => {
         return (
           <Modal
             {...modalProps}
-            className={`sendbird-global-modal ${modalProps?.className}`}
+            className={classnames('sendbird-global-modal', modalProps?.className)}
             onClose={() => {
               modalProps?.onClose?.();
               closeModal();

src/modules/App/DesktopLayout.tsx

@@ -12,6 +12,7 @@ import ChannelSettings from '../ChannelSettings';
 import MessageSearchPannel from '../MessageSearch';
 import Thread from '../Thread';
 import { SendableMessageType } from '../../utils';
+import { classnames } from '../../utils/utils';
 
 export const DesktopLayout: React.FC<DesktopLayoutProps> = (props: DesktopLayoutProps) => {
   const {
@@ -113,11 +114,11 @@ export const DesktopLayout: React.FC<DesktopLayoutProps> = (props: DesktopLayout
         {enableLegacyChannelModules ? <ChannelList {...channelListProps} /> : <GroupChannelList {...channelListProps} />}
       </div>
       <div
-        className={`
-          ${showSettings ? 'sendbird-app__conversation--settings-open' : ''}
-          ${showSearch ? 'sendbird-app__conversation--search-open' : ''}
-          sendbird-app__conversation-wrap
-        `}
+        className={classnames(
+          'sendbird-app__conversation-wrap',
+          showSettings && 'sendbird-app__conversation--settings-open',
+          showSearch && 'sendbird-app__conversation--search-open',
+        )}
       >
         {enableLegacyChannelModules ? <Channel {...channelProps} /> : <GroupChannel {...channelProps} />}
       </div>

src/modules/GroupChannel/components/FrozenNotification/index.tsx

@@ -3,6 +3,7 @@ import React, { useContext } from 'react';
 
 import { LocalizationContext } from '../../../../lib/LocalizationContext';
 import Label, { LabelTypography } from '../../../../ui/Label';
+import { classnames } from '../../../../utils/utils';
 
 export interface FrozenNotificationProps {
   className?: string;
@@ -13,7 +14,7 @@ export const FrozenNotification = ({
 }: FrozenNotificationProps): React.ReactElement => {
   const { stringSet } = useContext(LocalizationContext);
   return (
-    <div className={`sendbird-notification sendbird-notification--frozen ${className}`}>
+    <div className={classnames('sendbird-notification', 'sendbird-notification--frozen', className)}>
       <Label
         className="sendbird-notification__text"
         type={LabelTypography.CAPTION_2}

src/modules/GroupChannel/components/MessageInputWrapper/MessageInputWrapperView.tsx

@@ -146,7 +146,7 @@ export const MessageInputWrapperView = React.forwardRef((
   }
   // other conditions
   return (
-    <div className={`sendbird-message-input-wrapper${showVoiceMessageInput ? '--voice-message' : ''}`}>
+    <div className={showVoiceMessageInput ? 'sendbird-message-input-wrapper--voice-message' : 'sendbird-message-input-wrapper'}>
       {showSuggestedMentionList && (
         <SuggestedMentionList
           currentChannel={currentChannel}

src/modules/GroupChannel/components/SuggestedMentionList/SuggestedUserMentionItem.tsx

@@ -6,6 +6,7 @@ import Avatar from '../../../../ui/Avatar';
 import Label, { LabelTypography, LabelColors } from '../../../../ui/Label';
 import { LocalizationContext } from '../../../../lib/LocalizationContext';
 import uuidv4 from '../../../../utils/uuid';
+import { classnames } from '../../../../utils/utils';
 
 type MentionItemUIEvent = {
   event: any,
@@ -64,7 +65,7 @@ function SuggestedUserMentionItem(props: SuggestedUserMentionItemProps): JSX.Ele
   }
   return (
     <div
-      className={`sendbird-mention-suggest-list__user-item ${isFocused ? 'focused' : ''}`}
+      className={classnames('sendbird-mention-suggest-list__user-item', isFocused && 'focused')}
       onClick={(event) => onClick?.({ event, member: (member as Member), itemRef: scrollRef })}
       onMouseOver={(event) => onMouseOver?.({ event, member: (member as Member), itemRef: scrollRef })}
       onMouseMove={(event) => onMouseMove?.({ event, member: (member as Member), itemRef: scrollRef })}

src/modules/GroupChannel/components/UnreadCount/index.tsx

@@ -5,6 +5,7 @@ import { LocalizationContext } from '../../../../lib/LocalizationContext';
 import Label, { LabelTypography, LabelColors } from '../../../../ui/Label';
 import Icon, { IconTypes, IconColors } from '../../../../ui/Icon';
 import format from 'date-fns/format';
+import { classnames } from '../../../../utils/utils';
 
 export interface UnreadCountProps {
   className?: string;
@@ -37,7 +38,7 @@ export const UnreadCount: React.FC<UnreadCountProps> = ({
 
   return (
     <div
-      className={`sendbird-notification${count < 1 ? '--hide' : ''} ${className}`}
+      className={classnames(count < 1 ? 'sendbird-notification--hide' : 'sendbird-notification', className)}
       onClick={onClick}
     >
       <Label className="sendbird-notification__text" color={LabelColors.ONCONTENT_1} type={LabelTypography.CAPTION_2}>

src/modules/GroupChannelList/components/GroupChannelListHeader/index.tsx

@@ -6,6 +6,7 @@ import { useLocalization } from '../../../../lib/LocalizationContext';
 import Avatar from '../../../../ui/Avatar';
 import Label, { LabelColors, LabelTypography } from '../../../../ui/Label';
 import Header, { HeaderCustomProps } from '../../../../ui/Header';
+import { classnames } from '../../../../utils/utils';
 
 export interface GroupChannelListHeaderProps extends HeaderCustomProps {
   /** @deprecated Use the props `renderMiddle` instead */
@@ -33,7 +34,7 @@ export const GroupChannelListHeader = ({
 
   return (
     <Header
-      className={`sendbird-channel-header ${allowProfileEdit ? 'sendbird-channel-header--allow-edit' : ''}`}
+      className={classnames('sendbird-channel-header', allowProfileEdit && 'sendbird-channel-header--allow-edit')}
       renderLeft={renderLeft}
       renderMiddle={() => (
         renderProfile?.() ?? (

src/modules/MessageSearch/components/MessageSearchUI/index.tsx

@@ -10,8 +10,6 @@ import PlaceHolder, { PlaceHolderTypes } from '../../../../ui/PlaceHolder';
 import MessageSearchFileItem from '../../../../ui/MessageSearchFileItem';
 import { ClientSentMessages } from '../../../../types';
 
-const COMPONENT_CLASS_NAME = 'sendbird-message-search';
-
 export interface MessageSearchUIProps {
   renderPlaceHolderError?: (props: void) => React.ReactElement;
   renderPlaceHolderLoading?: (props: void) => React.ReactElement;
@@ -88,7 +86,7 @@ export const MessageSearchUI: React.FC<MessageSearchUIProps> = ({
 
   if (isInvalid && searchString && requestString) {
     return renderPlaceHolderError?.() || (
-      <div className={COMPONENT_CLASS_NAME}>
+      <div className="sendbird-message-search">
         <PlaceHolder
           type={PlaceHolderTypes.WRONG}
           retryToConnect={handleRetryToConnect}
@@ -99,15 +97,15 @@ export const MessageSearchUI: React.FC<MessageSearchUIProps> = ({
 
   if (loading && searchString && requestString) {
     return renderPlaceHolderLoading?.() || (
-      <div className={COMPONENT_CLASS_NAME}>
+      <div className="sendbird-message-search">
         <PlaceHolder type={PlaceHolderTypes.SEARCHING} />
       </div>
     );
   }
 
   if (!searchString) {
     return renderPlaceHolderNoString?.() || (
-      <div className={COMPONENT_CLASS_NAME}>
+      <div className="sendbird-message-search">
         <PlaceHolder
           type={PlaceHolderTypes.SEARCH_IN}
           searchInString={getChannelName()}
@@ -118,7 +116,7 @@ export const MessageSearchUI: React.FC<MessageSearchUIProps> = ({
 
   return (
     <div
-      className={COMPONENT_CLASS_NAME}
+      className="sendbird-message-search"
       onScroll={handleOnScroll}
       ref={scrollRef}
     >
@@ -132,7 +130,7 @@ export const MessageSearchUI: React.FC<MessageSearchUIProps> = ({
               if (message.messageType === 'file') {
                 return (
                   <MessageSearchFileItem
-                    className={`${COMPONENT_CLASS_NAME}__message-search-item`}
+                    className="sendbird-message-search__message-search-item"
                     message={message as FileMessage}
                     key={message.messageId}
                     selected={(selectedMessageId === message.messageId)}
@@ -145,7 +143,7 @@ export const MessageSearchUI: React.FC<MessageSearchUIProps> = ({
               }
               return (
                 <MessageSearchItem
-                  className={`${COMPONENT_CLASS_NAME}__message-search-item`}
+                  className="sendbird-message-search__message-search-item"
                   message={message as UserMessage}
                   key={message.messageId}
                   selected={(selectedMessageId === message.messageId)}

src/modules/MessageSearch/index.tsx

@@ -12,8 +12,6 @@ export interface MessageSearchPannelProps extends MessageSearchUIProps, MessageS
   onCloseClick?: () => void;
 }
 
-const COMPONENT_CLASS_NAME = 'sendbird-message-search-pannel';
-
 function MessageSearchPannel(props: MessageSearchPannelProps): JSX.Element {
   const {
     channelUrl,
@@ -59,40 +57,40 @@ function MessageSearchPannel(props: MessageSearchPannelProps): JSX.Element {
   };
 
   return (
-    <div className={COMPONENT_CLASS_NAME}>
+    <div className="sendbird-message-search-pannel">
       <Header
-        className={`${COMPONENT_CLASS_NAME}__header`}
+        className="sendbird-message-search-pannel__header"
         renderMiddle={() => (
           <Header.Title title={stringSet.SEARCH_IN_CHANNEL} />
         )}
         renderRight={() => (
           <Header.IconButton
-            className={`${COMPONENT_CLASS_NAME}__header__close-button`}
+            className="sendbird-message-search-pannel__header__close-button"
             onClick={onCloseClick}
             type={IconTypes.CLOSE}
             color={IconColors.ON_BACKGROUND_1}
           />
         )}
       />
-      <div className={`${COMPONENT_CLASS_NAME}__input`}>
-        <div className={`${COMPONENT_CLASS_NAME}__input__container`}>
+      <div className="sendbird-message-search-pannel__input">
+        <div className="sendbird-message-search-pannel__input__container">
           <Icon
-            className={`${COMPONENT_CLASS_NAME}__input__container__search-icon`}
+            className="sendbird-message-search-pannel__input__container__search-icon"
             type={IconTypes.SEARCH}
             fillColor={IconColors.ON_BACKGROUND_3}
             width="24px"
             height="24px"
           />
           <input
-            className={`${COMPONENT_CLASS_NAME}__input__container__input-area`}
+            className="sendbird-message-search-pannel__input__container__input-area"
             placeholder={stringSet.SEARCH}
             value={inputString}
             onChange={handleOnChangeInputString}
           />
           {
             inputString && loading && (
               <Loader
-                className={`${COMPONENT_CLASS_NAME}__input__container__spinner`}
+                className="sendbird-message-search-pannel__input__container__spinner"
                 width="20px"
                 height="20px"
               >
@@ -108,7 +106,7 @@ function MessageSearchPannel(props: MessageSearchPannelProps): JSX.Element {
           {
             !loading && inputString && (
               <Icon
-                className={`${COMPONENT_CLASS_NAME}__input__container__reset-input-button`}
+                className="sendbird-message-search-pannel__input__container__reset-input-button"
                 type={IconTypes.REMOVE}
                 fillColor={IconColors.ON_BACKGROUND_3}
                 width="20px"
@@ -119,7 +117,7 @@ function MessageSearchPannel(props: MessageSearchPannelProps): JSX.Element {
           }
         </div>
       </div>
-      <div className={`${COMPONENT_CLASS_NAME}__message-search`}>
+      <div className="sendbird-message-search-pannel__message-search">
         <MessageSearchProvider
           channelUrl={channelUrl}
           searchString={searchString}

src/modules/OpenChannelApp/components/OpenChannelPreview.tsx

@@ -7,6 +7,7 @@ import { Freeze } from '../assets/Icons';
 import Avatar from '../../../ui/Avatar';
 import Icon, { IconTypes, IconColors } from '../../../ui/Icon';
 import { OpenChannel } from '@sendbird/chat/openChannel';
+import { classnames } from '../../../utils/utils';
 
 interface Props {
   channel: OpenChannel;
@@ -42,11 +43,7 @@ export default function OpenChannelPreview({
   }, [isStreaming]);
   return (
     <div
-      className={`
-        channel-preview
-        ${selected ? 'channel-preview--selected' : null}
-        ${isStreaming ? 'channel-preview--streaming' : null}
-      `}
+      className={classnames('channel-preview', selected && 'channel-preview--selected', isStreaming && 'channel-preview--streaming')}
       onClick={onClick}
     >
       <div className="channel-preview__selection" />

src/modules/OpenChannelList/components/OpenChannelPreview/index.tsx

@@ -5,6 +5,7 @@ import { OpenChannel } from '@sendbird/chat/openChannel';
 import Avatar from '../../../../ui/Avatar';
 import Icon, { IconTypes, IconColors } from '../../../../ui/Icon';
 import Label, { LabelTypography, LabelColors } from '../../../../ui/Label';
+import { classnames } from '../../../../utils/utils';
 
 interface OpenChannelPreviewProps {
   className?: string;
@@ -21,7 +22,7 @@ function OpenChannelPreview({
 }: OpenChannelPreviewProps): React.ReactElement {
   return (
     <div
-      className={`sendbird-open-channel-preview ${isSelected ? 'selected' : ''} ${className}`}
+      className={classnames('sendbird-open-channel-preview', isSelected && 'selected', className)}
       onClick={onClick}
     >
       <div className="sendbird-open-channel-preview__cover-image">
@@ -46,7 +47,7 @@ function OpenChannelPreview({
       <div className="sendbird-open-channel-preview__context">
         <div className="sendbird-open-channel-preview__context__title">
           <Label
-            className={`sendbird-open-channel-preview__context__title__channel-name ${channel?.isFrozen ? 'frozen' : ''}`}
+            className={classnames('sendbird-open-channel-preview__context__title__channel-name', channel?.isFrozen && 'frozen')}
             type={LabelTypography.SUBTITLE_2}
             color={isSelected ? LabelColors.PRIMARY : LabelColors.ONBACKGROUND_1}
           >

src/modules/Thread/components/ParentMessageInfo/index.tsx

@@ -30,6 +30,7 @@ import MobileMenu from '../../../../ui/MobileMenu';
 import { useDirtyGetMentions } from '../../../Message/hooks/useDirtyGetMentions';
 import { User } from '@sendbird/chat';
 import { getCaseResolvedReplyType } from '../../../../lib/utils/resolvedReplyType';
+import { classnames } from '../../../../utils/utils';
 
 export interface ParentMessageInfoProps {
   className?: string;
@@ -270,7 +271,11 @@ export default function ParentMessageInfo({
       <div className="sendbird-parent-message-info__content">
         <div className="sendbird-parent-message-info__content__info">
           <Label
-            className={`sendbird-parent-message-info__content__info__sender-name${isReactionEnabled ? '--use-reaction' : ''}`}
+            className={
+              isReactionEnabled
+                ? 'sendbird-parent-message-info__content__info__sender-name--use-reaction'
+                : 'sendbird-parent-message-info__content__info__sender-name'
+            }
             type={LabelTypography.CAPTION_2}
             color={LabelColors.ONBACKGROUND_2}
           >
@@ -297,7 +302,7 @@ export default function ParentMessageInfo({
       {/* context menu */}
       {!isMobile && (
         <MessageItemMenu
-          className={`sendbird-parent-message-info__context-menu ${isReactionEnabled ? 'use-reaction' : ''} ${supposedHover ? 'sendbird-mouse-hover' : ''}`}
+          className={classnames('sendbird-parent-message-info__context-menu', isReactionEnabled && 'use-reaction', supposedHover && 'sendbird-mouse-hover')}
           channel={currentChannel}
           message={parentMessage}
           isByMe={userId === parentMessage?.sender?.userId}
@@ -314,7 +319,7 @@ export default function ParentMessageInfo({
       )}
       {(isReactionEnabled && !isMobile) && (
         <MessageItemReactionMenu
-          className={`sendbird-parent-message-info__reaction-menu ${supposedHover ? 'sendbird-mouse-hover' : ''}`}
+          className={classnames('sendbird-parent-message-info__reaction-menu', supposedHover && 'sendbird-mouse-hover')}
           message={parentMessage}
           userId={userId}
           emojiContainer={emojiContainer}

src/modules/Thread/components/ThreadList/ThreadListItemContent.tsx

@@ -43,6 +43,7 @@ import MultipleFilesMessageItemBody, { ThreadMessageKind } from '../../../../ui/
 import { useThreadMessageKindKeySelector } from '../../../Channel/context/hooks/useThreadMessageKindKeySelector';
 import { useFileInfoListWithUploaded } from '../../../Channel/context/hooks/useFileInfoListWithUploaded';
 import { useThreadContext } from '../../context/ThreadProvider';
+import { classnames } from '../../../../utils/utils';
 
 export interface ThreadListItemContentProps {
   className?: string;
@@ -131,10 +132,10 @@ export default function ThreadListItemContent({
 
   return (
     <div
-      className={`sendbird-thread-list-item-content ${className} ${isByMe ? 'outgoing' : 'incoming'}`}
+      className={classnames('sendbird-thread-list-item-content', className, isByMe ? 'outgoing' : 'incoming')}
       ref={mobileMenuRef}
     >
-      <div className={`sendbird-thread-list-item-content__left ${isReactionEnabledInChannel ? 'use-reaction' : ''} ${isByMe ? 'outgoing' : 'incoming'}`}>
+      <div className={classnames('sendbird-thread-list-item-content__left', isReactionEnabledInChannel && 'use-reaction', isByMe ? 'outgoing' : 'incoming')}>
         {(!isByMe && !chainBottom) && (
           <ContextMenu
             menuTrigger={(toggleDropdown) => (
@@ -177,9 +178,12 @@ export default function ThreadListItemContent({
         )}
         {(isByMe && !isMobile) && (
           <div
-            className={`sendbird-thread-list-item-content-menu ${isReactionEnabledInChannel ? 'use-reaction' : ''
-            } ${isByMe ? 'outgoing' : 'incoming'
-            } ${supposedHoverClassName}`}
+            className={classnames(
+              'sendbird-thread-list-item-content-menu',
+              isReactionEnabledInChannel && 'use-reaction',
+              isByMe ? 'outgoing' : 'incoming',
+              supposedHoverClassName,
+            )}
           >
             <MessageItemMenu
               className="sendbird-thread-list-item-content-menu__normal-menu"
@@ -343,10 +347,7 @@ export default function ThreadListItemContent({
           )}
         </div>
       </div>
-      <div
-        className={`sendbird-thread-list-item-content__right ${chainTop ? 'chain-top' : ''
-        } ${isByMe ? 'outgoing' : 'incoming'}`}
-      >
+      <div className={classnames('sendbird-thread-list-item-content__right', chainTop && 'chain-top', isByMe ? 'outgoing' : 'incoming')}>
         {(!isByMe && !isMobile) && (
           <div className={`sendbird-thread-list-item-content-menu ${supposedHoverClassName}`}>
             {isReactionEnabledInChannel && (