@100mslive/roomkit-react 0.1.4 → 0.1.6-alpha.0

package/src/Prebuilt/components/AuthToken.jsx

@@ -1,14 +1,10 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { matchPath, useLocation } from 'react-router-dom';
-import { useSearchParam } from 'react-use';
-import { v4 as uuid } from 'uuid';
+import React, { useEffect, useState } from 'react';
 import { useHMSActions } from '@100mslive/react-sdk';
 import { styled } from '../../Theme';
 import { useHMSPrebuiltContext } from '../AppContext';
 import { ErrorDialog } from '../primitives/DialogContent';
 import { useSetAppDataByKey, useTokenEndpoint } from './AppData/useUISettings';
-import getToken from '../services/tokenService';
-import { APP_DATA, QUERY_PARAM_AUTH_TOKEN } from '../common/constants';
+import { APP_DATA } from '../common/constants';
 
 /**
  * query params exposed -
@@ -19,20 +15,12 @@ import { APP_DATA, QUERY_PARAM_AUTH_TOKEN } from '../common/constants';
  * auth_token=123 => uses the passed in token to join instead of fetching from token endpoint
  * ui_mode=activespeaker => lands in active speaker mode after joining the room
  */
-const AuthToken = React.memo(({ authTokenByRoomCodeEndpoint }) => {
+const AuthToken = React.memo(({ authTokenByRoomCodeEndpoint, defaultAuthToken }) => {
   const hmsActions = useHMSActions();
   const tokenEndpoint = useTokenEndpoint();
-  const { showPreview, roomCode, userId } = useHMSPrebuiltContext();
-  const location = useLocation();
-  const matches = useMemo(
-    () =>
-      matchPath(`${showPreview ? 'preview' : 'meeting'}/:roomId/:role`, location.pathname) ||
-      matchPath(`${showPreview ? 'preview' : 'meeting'}/:roomCode/`, location.pathname),
-    [location, showPreview],
-  );
-  const { roomCode: urlRoomCode, roomId: urlRoomId, role: userRole } = matches?.params || {};
+  const { roomCode, userId } = useHMSPrebuiltContext();
   const [error, setError] = useState({ title: '', body: '' });
-  let authToken = useSearchParam(QUERY_PARAM_AUTH_TOKEN);
+  let authToken = defaultAuthToken;
   const [, setAuthTokenInAppData] = useSetAppDataByKey(APP_DATA.authToken);
 
   useEffect(() => {
@@ -40,34 +28,15 @@ const AuthToken = React.memo(({ authTokenByRoomCodeEndpoint }) => {
       setAuthTokenInAppData(authToken);
       return;
     }
-    if (!tokenEndpoint && !urlRoomId && !roomCode && !urlRoomCode) {
+    if (!tokenEndpoint && !roomCode) {
       return;
     }
-    const code = !userRole && (roomCode || urlRoomCode);
 
-    const getTokenFn = code
-      ? () => hmsActions.getAuthTokenByRoomCode({ roomCode: code, userId }, { endpoint: authTokenByRoomCodeEndpoint })
-      : () => getToken(tokenEndpoint, uuid(), userRole, urlRoomId);
-
-    getTokenFn()
-      .then(token => {
-        setAuthTokenInAppData(token);
-      })
-      .catch(error => {
-        setError(convertError(error));
-      });
-  }, [
-    hmsActions,
-    tokenEndpoint,
-    urlRoomId,
-    urlRoomCode,
-    userRole,
-    authToken,
-    authTokenByRoomCodeEndpoint,
-    setAuthTokenInAppData,
-    roomCode,
-    userId,
-  ]);
+    hmsActions
+      .getAuthTokenByRoomCode({ roomCode, userId }, { endpoint: authTokenByRoomCodeEndpoint })
+      .then(token => setAuthTokenInAppData(token))
+      .catch(error => setError(convertError(error)));
+  }, [hmsActions, tokenEndpoint, authToken, authTokenByRoomCodeEndpoint, setAuthTokenInAppData, roomCode, userId]);
 
   if (error.title) {
     return <ErrorDialog title={error.title}>{error.body}</ErrorDialog>;

package/src/Prebuilt/components/Chat/Chat.jsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useMedia } from 'react-use';
 import {
   HMSNotificationTypes,
   selectHMSMessagesCount,
@@ -13,31 +14,36 @@ import { ChevronDownIcon, CrossIcon, PinIcon } from '@100mslive/react-icons';
 import { Button } from '../../../Button';
 import { Box, Flex } from '../../../Layout';
 import { Text } from '../../../Text';
-import IconButton from '../../IconButton';
+import { config as cssConfig } from '../../../Theme';
 import { AnnotisedMessage, ChatBody } from './ChatBody';
 import { ChatFooter } from './ChatFooter';
-import { ChatHeader } from './ChatHeader';
+import { ChatParticipantHeader } from './ChatParticipantHeader';
 import { useSetSubscribedChatSelector } from '../AppData/useUISettings';
 import { useSetPinnedMessage } from '../hooks/useSetPinnedMessage';
 import { useUnreadCount } from './useUnreadCount';
 import { CHAT_SELECTOR, SESSION_STORE_KEY } from '../../common/constants';
 
+const PINNED_MESSAGE_LENGTH = 80;
+
 const PinnedMessage = ({ clearPinnedMessage }) => {
   const permissions = useHMSStore(selectPermissions);
   const pinnedMessage = useHMSStore(selectSessionStore(SESSION_STORE_KEY.PINNED_MESSAGE));
+  const formattedPinnedMessage =
+    pinnedMessage?.length && pinnedMessage.length > PINNED_MESSAGE_LENGTH
+      ? `${pinnedMessage.slice(0, PINNED_MESSAGE_LENGTH)}...`
+      : pinnedMessage;
 
   return pinnedMessage ? (
     <Flex
-      css={{ p: '$8', color: '$on_surface_medium', bg: '$surface_bright', r: '$1' }}
+      title={pinnedMessage}
+      css={{ p: '$4', color: '$on_surface_medium', bg: '$surface_default', r: '$1', gap: '$4', mb: '$8', mt: '$8' }}
       align="center"
       justify="between"
     >
-      <Box>
-        <PinIcon />
-      </Box>
+      <PinIcon />
+
       <Box
         css={{
-          ml: '$8',
           color: '$on_surface_medium',
           w: '100%',
           maxHeight: '$18',
@@ -45,19 +51,22 @@ const PinnedMessage = ({ clearPinnedMessage }) => {
         }}
       >
         <Text variant="sm">
-          <AnnotisedMessage message={pinnedMessage} />
+          <AnnotisedMessage message={formattedPinnedMessage} />
         </Text>
       </Box>
       {permissions.removeOthers && (
-        <IconButton onClick={() => clearPinnedMessage()}>
+        <Flex
+          onClick={() => clearPinnedMessage()}
+          css={{ cursor: 'pointer', color: '$on_surface_medium', '&:hover': { color: '$on_surface_high' } }}
+        >
           <CrossIcon />
-        </IconButton>
+        </Flex>
       )}
     </Flex>
   ) : null;
 };
 
-export const Chat = () => {
+export const Chat = ({ screenType }) => {
   const notification = useHMSNotifications(HMSNotificationTypes.PEER_LEFT);
   const [peerSelector, setPeerSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.PEER_ID);
   const [roleSelector, setRoleSelector] = useSetSubscribedChatSelector(CHAT_SELECTOR.ROLE);
@@ -83,6 +92,7 @@ export const Chat = () => {
   }, [notification, peerSelector, setPeerSelector]);
 
   const storeMessageSelector = selectHMSMessagesCount;
+  const isMobile = useMedia(cssConfig.media.md);
 
   const messagesCount = useHMSStore(storeMessageSelector) || 0;
   const scrollToBottom = useCallback(
@@ -99,10 +109,26 @@ export const Chat = () => {
   );
 
   return (
-    <Flex direction="column" css={{ size: '100%' }}>
-      <ChatHeader
-        selectorOpen={isSelectorOpen}
+    <Flex direction="column" css={{ size: '100%', gap: '$4' }}>
+      {!isMobile ? (
+        <>
+          <ChatParticipantHeader selectorOpen={isSelectorOpen} onToggle={() => setSelectorOpen(value => !value)} />
+          <PinnedMessage clearPinnedMessage={setPinnedMessage} />
+        </>
+      ) : null}
+
+      <ChatBody
+        role={chatOptions.role}
+        peerId={chatOptions.peerId}
+        ref={listRef}
+        scrollToBottom={scrollToBottom}
+        screenType={screenType}
+      />
+      <ChatFooter
+        role={chatOptions.role}
+        onSend={() => scrollToBottom(1)}
         selection={chatOptions.selection}
+        screenType={screenType}
         onSelect={({ role, peerId, selection }) => {
           setChatOptions({
             role,
@@ -112,16 +138,8 @@ export const Chat = () => {
           setPeerSelector(peerId);
           setRoleSelector(role);
         }}
-        role={chatOptions.role}
         peerId={chatOptions.peerId}
-        onToggle={() => {
-          setSelectorOpen(value => !value);
-        }}
-      />
-      <PinnedMessage clearPinnedMessage={setPinnedMessage} />
-
-      <ChatBody role={chatOptions.role} peerId={chatOptions.peerId} ref={listRef} scrollToBottom={scrollToBottom} />
-      <ChatFooter role={chatOptions.role} peerId={chatOptions.peerId} onSend={() => scrollToBottom(1)}>
+      >
         {!isSelectorOpen && (
           <NewMessageIndicator role={chatOptions.role} peerId={chatOptions.peerId} scrollToBottom={scrollToBottom} />
         )}
@@ -146,13 +164,26 @@ const NewMessageIndicator = ({ role, peerId, scrollToBottom }) => {
       }}
     >
       <Button
+        variant="standard"
         onClick={() => {
           scrollToBottom(unreadCount);
         }}
-        css={{ p: '$2 $4', '& > svg': { ml: '$4' } }}
+        icon
+        css={{
+          p: '$4',
+          pl: '$8',
+          pr: '$6',
+          '& > svg': { ml: '$4' },
+          borderRadius: '$round',
+          position: 'relative',
+          bottom: '$16',
+          fontSize: '$xs',
+          fontWeight: '$semiBold',
+          c: '$on_secondary_high',
+        }}
       >
-        New Messages
-        <ChevronDownIcon width={16} height={16} />
+        New {unreadCount === 1 ? 'message' : 'messages'}
+        <ChevronDownIcon />
       </Button>
     </Flex>
   );

package/src/Prebuilt/components/Chat/ChatBody.jsx

@@ -1,5 +1,6 @@
-import React, { Fragment, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useInView } from 'react-intersection-observer';
+import { useMedia } from 'react-use';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { VariableSizeList } from 'react-window';
 import {
@@ -13,13 +14,15 @@ import {
   useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
-import { HorizontalMenuIcon, PinIcon } from '@100mslive/react-icons';
+import { CopyIcon, PinIcon, VerticalMenuIcon } from '@100mslive/react-icons';
 import { Dropdown } from '../../../Dropdown';
 import { IconButton } from '../../../IconButton';
 import { Box, Flex } from '../../../Layout';
 import { Text } from '../../../Text';
-import { styled } from '../../../Theme';
+import { config as cssConfig, styled } from '../../../Theme';
 import { Tooltip } from '../../../Tooltip';
+import emptyChat from '../../images/empty-chat.svg';
+import { ToastManager } from '../Toast/ToastManager';
 import { useSetPinnedMessage } from '../hooks/useSetPinnedMessage';
 
 const formatTime = date => {
@@ -46,7 +49,7 @@ const MessageTypeContainer = ({ left, right }) => {
         ml: 'auto',
         mr: '$4',
         p: '$2 $4',
-        border: '1px solid $on_surface_low',
+        border: '1px solid $border_bright',
         r: '$0',
       }}
     >
@@ -55,9 +58,9 @@ const MessageTypeContainer = ({ left, right }) => {
           {left}
         </SenderName>
       )}
-      {left && right && <Box css={{ borderLeft: '1px solid $on_surface_low', mx: '$4', h: '$8' }} />}
+      {left && right && <Box css={{ borderLeft: '1px solid $border_bright', mx: '$4', h: '$8' }} />}
       {right && (
-        <SenderName as="span" variant="tiny">
+        <SenderName as="span" variant="tiny" css={{ textTransform: 'uppercase' }}>
           {right}
         </SenderName>
       )}
@@ -123,16 +126,19 @@ const getMessageType = ({ roles, receiver }) => {
   }
   return receiver ? 'private' : '';
 };
-
-const ChatActions = ({ onPin }) => {
+const ChatActions = ({ onPin, showPinAction, messageContent }) => {
   const [open, setOpen] = useState(false);
+  const isMobile = useMedia(cssConfig.media.md);
+  if (!isMobile && !showPinAction) {
+    return null;
+  }
 
   return (
     <Dropdown.Root open={open} onOpenChange={setOpen}>
-      <Dropdown.Trigger asChild>
+      <Dropdown.Trigger className="chat_actions" css={{ opacity: open ? 1 : 0, '@md': { opacity: 1 } }} asChild>
         <IconButton>
           <Tooltip title="More options">
-            <HorizontalMenuIcon />
+            <VerticalMenuIcon />
           </Tooltip>
         </IconButton>
       </Dropdown.Trigger>
@@ -140,7 +146,7 @@ const ChatActions = ({ onPin }) => {
         <Dropdown.Content
           sideOffset={5}
           align="end"
-          css={{ width: '$48', backgroundColor: '$surface_bright', py: '$0' }}
+          css={{ width: '$48', backgroundColor: '$surface_bright', py: '$0', border: '1px solid $border_bright' }}
         >
           <Dropdown.Item data-testid="pin_message_btn" onClick={onPin}>
             <PinIcon />
@@ -148,6 +154,30 @@ const ChatActions = ({ onPin }) => {
               Pin Message
             </Text>
           </Dropdown.Item>
+          {isMobile && showPinAction ? <Dropdown.ItemSeparator css={{ my: 0 }} /> : null}
+          {isMobile ? (
+            <Dropdown.Item
+              data-testid="copy_message_btn"
+              onClick={() => {
+                try {
+                  navigator?.clipboard.writeText(messageContent);
+                  ToastManager.addToast({
+                    title: 'Message copied successfully',
+                  });
+                } catch (e) {
+                  console.log(e);
+                  ToastManager.addToast({
+                    title: 'Could not copy message',
+                  });
+                }
+              }}
+            >
+              <CopyIcon />
+              <Text variant="sm" css={{ ml: '$4' }}>
+                Copy Message
+              </Text>
+            </Dropdown.Item>
+          ) : null}
         </Dropdown.Content>
       </Dropdown.Portal>
     </Dropdown.Root>
@@ -160,6 +190,8 @@ const SenderName = styled(Text, {
   whiteSpace: 'nowrap',
   maxWidth: '24ch',
   minWidth: 0,
+  color: '$on_surface_high',
+  fontWeight: '$semiBold',
 });
 
 const ChatMessage = React.memo(({ index, style = {}, message, setRowHeight, onPin }) => {
@@ -170,6 +202,7 @@ const ChatMessage = React.memo(({ index, style = {}, message, setRowHeight, onPi
       setRowHeight(index, rowRef.current.clientHeight);
     }
   }, [index, setRowHeight]);
+  const isMobile = useMedia(cssConfig.media.md);
 
   const hmsActions = useHMSActions();
   const localPeerId = useHMSStore(selectLocalPeerID);
@@ -188,13 +221,19 @@ const ChatMessage = React.memo(({ index, style = {}, message, setRowHeight, onPi
   }, [message.read, hmsActions, inView, message.id]);
 
   return (
-    <Box ref={ref} as="div" css={{ mb: '$10', pr: '$10' }} style={style}>
+    <Box
+      ref={ref}
+      as="div"
+      css={{ mb: '$10', pr: '$10', mt: '$8', '&:hover .chat_actions': { opacity: 1 } }}
+      style={style}
+    >
       <Flex
         ref={rowRef}
         align="center"
         css={{
           flexWrap: 'wrap',
-          bg: messageType ? '$surface_bright' : undefined,
+          // Theme independent color, token should not be used for transparent chat
+          bg: messageType ? (isMobile ? 'rgba(0, 0, 0, 0.64)' : '$surface_default') : undefined,
           r: messageType ? '$1' : undefined,
           px: messageType ? '$4' : '$2',
           py: messageType ? '$4' : 0,
@@ -214,32 +253,40 @@ const ChatMessage = React.memo(({ index, style = {}, message, setRowHeight, onPi
           }}
           as="div"
         >
-          <Flex align="center">
+          <Flex align="baseline">
             {message.senderName === 'You' || !message.senderName ? (
-              <SenderName as="span">{message.senderName || 'Anonymous'}</SenderName>
+              <SenderName as="span" variant="sm">
+                {message.senderName || 'Anonymous'}
+              </SenderName>
             ) : (
               <Tooltip title={message.senderName} side="top" align="start">
-                <SenderName as="span">{message.senderName}</SenderName>
+                <SenderName as="span" variant="sm">
+                  {message.senderName}
+                </SenderName>
               </Tooltip>
             )}
-            <Text
-              as="span"
-              variant="sm"
-              css={{
-                ml: '$4',
-                color: '$on_primary_medium',
-                flexShrink: 0,
-              }}
-            >
-              {formatTime(message.time)}
-            </Text>
+            {!isMobile ? (
+              <Text
+                as="span"
+                variant="xs"
+                css={{
+                  ml: '$4',
+                  color: '$on_primary_medium',
+                  flexShrink: 0,
+                }}
+              >
+                {formatTime(message.time)}
+              </Text>
+            ) : null}
           </Flex>
           <MessageType
             hasCurrentUserSent={message.sender === localPeerId}
             receiver={message.recipientPeer}
             roles={message.recipientRoles}
           />
-          {showPinAction && <ChatActions onPin={onPin} />}
+          {!isMobile ? (
+            <ChatActions onPin={onPin} showPinAction={showPinAction} messageContent={message.message} />
+          ) : null}
         </Text>
         <Text
           variant="body2"
@@ -345,21 +392,34 @@ export const ChatBody = React.forwardRef(({ role, peerId, scrollToBottom }, list
     : peerId
     ? selectMessagesByPeerID(peerId)
     : selectHMSMessages;
-  const messages = useHMSStore(storeMessageSelector) || [];
+  let messages = useHMSStore(storeMessageSelector);
+  messages = useMemo(() => messages?.filter(message => message.type === 'chat') || [], [messages]);
+  const isMobile = useMedia(cssConfig.media.md);
 
-  if (messages.length === 0) {
+  if (messages.length === 0 && !isMobile) {
     return (
       <Flex
         css={{
           width: '100%',
-          height: '100%',
+          flex: '1 1 0',
           textAlign: 'center',
           px: '$4',
         }}
         align="center"
         justify="center"
       >
-        <Text>There are no messages here</Text>
+        <Box>
+          <img src={emptyChat} alt="Empty Chat" height={132} width={185} style={{ margin: '0 auto' }} />
+          <Text variant="h5" css={{ mt: '$8', c: '$on_surface_high' }}>
+            Start a conversation
+          </Text>
+          <Text
+            variant="sm"
+            css={{ mt: '$4', maxWidth: '80%', textAlign: 'center', mx: 'auto', c: '$on_surface_medium' }}
+          >
+            There are no messages here yet. Start a conversation by sending a message.
+          </Text>
+        </Box>
       </Flex>
     );
   }

package/src/Prebuilt/components/Chat/ChatFooter.jsx

@@ -1,10 +1,12 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useMedia } from 'react-use';
 import data from '@emoji-mart/data';
 import Picker from '@emoji-mart/react';
 import { useHMSActions } from '@100mslive/react-sdk';
 import { EmojiIcon, SendIcon } from '@100mslive/react-icons';
-import { Box, Flex, IconButton, Popover, styled } from '../../../';
+import { Box, config as cssConfig, Flex, IconButton as BaseIconButton, Popover, styled } from '../../../';
 import { ToastManager } from '../Toast/ToastManager';
+// import { ChatSelectorContainer } from './ChatSelectorContainer';
 import { useChatDraftMessage } from '../AppData/useChatState';
 import { useEmojiPickerStyles } from './useEmojiPickerStyles';
 
@@ -32,9 +34,9 @@ function EmojiPicker({ onSelect }) {
   return (
     <Popover.Root open={showEmoji} onOpenChange={setShowEmoji}>
       <Popover.Trigger asChild css={{ appearance: 'none' }}>
-        <IconButton as="div">
+        <BaseIconButton as="div">
           <EmojiIcon />
-        </IconButton>
+        </BaseIconButton>
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Content
@@ -60,10 +62,11 @@ function EmojiPicker({ onSelect }) {
   );
 }
 
-export const ChatFooter = ({ role, peerId, onSend, children }) => {
+export const ChatFooter = ({ role, peerId, onSend, children /* onSelect, selection, screenType */ }) => {
   const hmsActions = useHMSActions();
   const inputRef = useRef(null);
   const [draftMessage, setDraftMessage] = useChatDraftMessage();
+  const isMobile = useMedia(cssConfig.media.md);
 
   const sendMessage = useCallback(async () => {
     const message = inputRef.current.value;
@@ -102,49 +105,70 @@ export const ChatFooter = ({ role, peerId, onSend, children }) => {
   }, [setDraftMessage]);
 
   return (
-    <Flex
-      align="center"
-      css={{
-        bg: '$surface_bright',
-        minHeight: '$16',
-        maxHeight: '$24',
-        position: 'relative',
-        py: '$6',
-        pl: '$8',
-        r: '$1',
-      }}
-    >
-      {children}
-      <TextArea
-        placeholder="Write something here"
-        ref={inputRef}
-        autoFocus
-        onKeyPress={async event => {
-          if (event.key === 'Enter') {
-            if (!event.shiftKey) {
-              event.preventDefault();
-              await sendMessage();
-            }
-          }
-        }}
-        autoComplete="off"
-        aria-autocomplete="none"
-        onPaste={e => e.stopPropagation()}
-        onCut={e => e.stopPropagation()}
-        onCopy={e => e.stopPropagation()}
-      />
-      <EmojiPicker
-        onSelect={emoji => {
-          inputRef.current.value += ` ${emoji.native} `;
-        }}
-      />
-      <IconButton
-        onClick={sendMessage}
-        css={{ ml: 'auto', height: 'max-content', mr: '$4' }}
-        data-testid="send_msg_btn"
-      >
-        <SendIcon />
-      </IconButton>
-    </Flex>
+    <>
+      {/* {screenType !== 'hls_live_streaming' ? (
+        <ChatSelectorContainer onSelect={onSelect} role={role} peerId={peerId} selection={selection} />
+      ) : null} */}
+      <Flex align="center" css={{ gap: '$4', w: '100%' }}>
+        <Flex
+          align="center"
+          css={{
+            bg: isMobile ? '$surface_dim' : '$surface_default',
+            minHeight: '$16',
+            maxHeight: '$24',
+            position: 'relative',
+            py: '$6',
+            pl: '$8',
+            flexGrow: 1,
+            r: '$1',
+            '@md': {
+              minHeight: 'unset',
+              h: '$14',
+              boxSizing: 'border-box',
+            },
+          }}
+        >
+          {children}
+          <TextArea
+            placeholder="Send a message...."
+            ref={inputRef}
+            autoFocus
+            onKeyPress={async event => {
+              if (event.key === 'Enter') {
+                if (!event.shiftKey) {
+                  event.preventDefault();
+                  await sendMessage();
+                }
+              }
+            }}
+            autoComplete="off"
+            aria-autocomplete="none"
+            onPaste={e => e.stopPropagation()}
+            onCut={e => e.stopPropagation()}
+            onCopy={e => e.stopPropagation()}
+          />
+          {!isMobile ? (
+            <EmojiPicker
+              onSelect={emoji => {
+                inputRef.current.value += ` ${emoji.native} `;
+              }}
+            />
+          ) : null}
+          <BaseIconButton
+            onClick={sendMessage}
+            css={{
+              ml: 'auto',
+              height: 'max-content',
+              mr: '$4',
+              color: '$on_surface_low',
+              '&:hover': { c: '$on_surface_high' },
+            }}
+            data-testid="send_msg_btn"
+          >
+            <SendIcon />
+          </BaseIconButton>
+        </Flex>
+      </Flex>
+    </>
   );
 };