@100mslive/roomkit-react 0.1.12 → 0.1.13

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

@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useInView } from 'react-intersection-observer';
 import { useMedia } from 'react-use';
 import AutoSizer from 'react-virtualized-auto-sizer';
@@ -6,25 +6,41 @@ import { VariableSizeList } from 'react-window';
 import {
   selectHMSMessages,
   selectLocalPeerID,
+  selectLocalPeerName,
   selectLocalPeerRoleName,
   selectMessagesByPeerID,
   selectMessagesByRole,
   selectPeerNameByID,
   selectPermissions,
+  selectSessionStore,
   useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
-import { PinIcon, VerticalMenuIcon } from '@100mslive/react-icons';
+import { CopyIcon, CrossCircleIcon, CrossIcon, EyeCloseIcon, PinIcon, VerticalMenuIcon } from '@100mslive/react-icons';
 import { Dropdown } from '../../../Dropdown';
 import { IconButton } from '../../../IconButton';
 import { Box, Flex } from '../../../Layout';
+import { Sheet } from '../../../Sheet';
 import { Text } from '../../../Text';
 import { config as cssConfig, styled } from '../../../Theme';
 import { Tooltip } from '../../../Tooltip';
 import emptyChat from '../../images/empty-chat.svg';
+import { ToastManager } from '../Toast/ToastManager';
+import { MwebChatOption } from './MwebChatOption';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
-import { useSetPinnedMessage } from '../hooks/useSetPinnedMessage';
+import { useChatBlacklist } from '../hooks/useChatBlacklist';
+import { useSetPinnedMessages } from '../hooks/useSetPinnedMessages';
 import { useUnreadCount } from './useUnreadCount';
+import { SESSION_STORE_KEY } from '../../common/constants';
+
+const iconStyle = { height: '1.125rem', width: '1.125rem' };
+const tooltipBoxCSS = {
+  fontSize: '$xs',
+  backgroundColor: '$surface_default',
+  p: '$1 $5',
+  fontWeight: '$regular',
+  borderRadius: '$3',
+};
 
 const formatTime = date => {
   if (!(date instanceof Date)) {
@@ -127,56 +143,188 @@ const getMessageType = ({ roles, receiver }) => {
   }
   return receiver ? 'private' : '';
 };
-const ChatActions = ({ onPin, showPinAction }) => {
+const ChatActions = ({ onPin, showPinAction, message, sentByLocalPeer, isMobile, openSheet, setOpenSheet }) => {
+  const { elements } = useRoomLayoutConferencingScreen();
+  const { can_hide_message, can_block_user } = elements?.chat?.real_time_controls || {
+    can_hide_message: false,
+    can_block_user: false,
+  };
   const [open, setOpen] = useState(false);
-  if (!showPinAction) {
-    return null;
+  const blacklistedPeerIDs = useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_PEER_BLACKLIST)) || [];
+  const { blacklistItem: blacklistPeer } = useChatBlacklist(SESSION_STORE_KEY.CHAT_PEER_BLACKLIST);
+
+  const blacklistedMessageIDs = useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_MESSAGE_BLACKLIST)) || [];
+  const { blacklistItem: blacklistMessage } = useChatBlacklist(SESSION_STORE_KEY.CHAT_MESSAGE_BLACKLIST);
+
+  const { unpinBlacklistedMessages } = useSetPinnedMessages();
+
+  const pinnedMessages = useHMSStore(selectSessionStore(SESSION_STORE_KEY.PINNED_MESSAGES)) || [];
+
+  const updatePinnedMessages = useCallback(
+    ({ messageID = '', peerID = '' }) => {
+      const blacklistedMessageIDSet = new Set([...blacklistedMessageIDs, messageID]);
+      const blacklistedPeerIDSet = new Set([...blacklistedPeerIDs, peerID]);
+      unpinBlacklistedMessages(pinnedMessages, blacklistedPeerIDSet, blacklistedMessageIDSet);
+    },
+    [pinnedMessages, blacklistedMessageIDs, blacklistedPeerIDs],
+  );
+
+  const copyMessageContent = useCallback(() => {
+    try {
+      navigator?.clipboard.writeText(message.message);
+      ToastManager.addToast({
+        title: 'Message copied successfully',
+      });
+    } catch (e) {
+      console.log(e);
+      ToastManager.addToast({
+        title: 'Could not copy message',
+      });
+    }
+  }, [message]);
+
+  const options = {
+    pin: {
+      text: 'Pin message',
+      tooltipText: 'Pin',
+      icon: <PinIcon style={iconStyle} />,
+      onClick: onPin,
+      show: showPinAction,
+    },
+    copy: {
+      text: 'Copy text',
+      tooltipText: 'Copy',
+      icon: <CopyIcon style={iconStyle} />,
+      onClick: copyMessageContent,
+      show: true,
+    },
+    hide: {
+      text: 'Hide for everyone',
+      icon: <EyeCloseIcon style={iconStyle} />,
+      onClick: async () => {
+        blacklistMessage(blacklistedMessageIDs, message.id);
+        updatePinnedMessages({ messageID: message.id });
+      },
+      show: can_hide_message,
+    },
+    block: {
+      text: 'Block from chat',
+      icon: <CrossCircleIcon style={iconStyle} />,
+      onClick: async () => {
+        blacklistPeer(blacklistedPeerIDs, message?.senderUserId);
+        updatePinnedMessages({ peerID: message?.senderUserId });
+      },
+      color: '$alert_error_default',
+      show: can_block_user && !sentByLocalPeer,
+    },
+  };
+
+  if (isMobile) {
+    return (
+      <Sheet.Root open={openSheet} onOpenChange={setOpenSheet}>
+        <Sheet.Content css={{ bg: '$surface_default', pb: '$14' }} onClick={() => setOpenSheet(false)}>
+          <Sheet.Title
+            css={{
+              display: 'flex',
+              color: '$on_surface_high',
+              w: '100%',
+              justifyContent: 'space-between',
+              mt: '$8',
+              fontSize: '$md',
+              px: '$10',
+              pb: '$8',
+              borderBottom: '1px solid $border_bright',
+              alignItems: 'center',
+            }}
+          >
+            Message options
+            <Sheet.Close css={{ color: '$on_surface_high' }} onClick={() => setOpenSheet(false)}>
+              <CrossIcon />
+            </Sheet.Close>
+          </Sheet.Title>
+
+          {Object.keys(options).map(optionKey => {
+            const option = options[optionKey];
+            return option.show ? (
+              <MwebChatOption
+                key={optionKey}
+                text={option.text}
+                icon={option.icon}
+                onClick={option.onClick}
+                color={option?.color}
+              />
+            ) : null;
+          })}
+        </Sheet.Content>
+      </Sheet.Root>
+    );
   }
 
   return (
-    <Dropdown.Root open={open} onOpenChange={setOpen}>
-      <Dropdown.Trigger className="chat_actions" css={{ opacity: open ? 1 : 0, '@md': { opacity: 1 } }} asChild>
-        <IconButton>
-          <Tooltip title="More options">
-            <VerticalMenuIcon />
+    <Dropdown.Root open={open} onOpenChange={setOpen} css={{ '@md': { display: 'none' } }}>
+      <Flex
+        className="chat_actions"
+        css={{
+          background: '$surface_bright',
+          borderRadius: '$1',
+          p: '$2',
+          opacity: open ? 1 : 0,
+          '@md': { opacity: 1 },
+        }}
+      >
+        {options.pin.show ? (
+          <Tooltip boxCss={tooltipBoxCSS} title={options.pin.tooltipText}>
+            <IconButton data-testid="pin_message_btn" onClick={options.pin.onClick}>
+              {options.pin.icon}
+            </IconButton>
+          </Tooltip>
+        ) : null}
+
+        {options.copy.show ? (
+          <Tooltip boxCss={tooltipBoxCSS} title={options.copy.tooltipText}>
+            <IconButton onClick={options.copy.onClick} data-testid="copy_message_btn">
+              <CopyIcon style={iconStyle} />
+            </IconButton>
+          </Tooltip>
+        ) : null}
+
+        {options.block.show || options.hide.show ? (
+          <Tooltip boxCss={tooltipBoxCSS} title="More actions">
+            <Dropdown.Trigger asChild>
+              <IconButton>
+                <VerticalMenuIcon style={iconStyle} />
+              </IconButton>
+            </Dropdown.Trigger>
           </Tooltip>
-        </IconButton>
-      </Dropdown.Trigger>
+        ) : null}
+      </Flex>
       <Dropdown.Portal>
         <Dropdown.Content
           sideOffset={5}
           align="end"
           css={{ width: '$48', backgroundColor: '$surface_bright', py: '$0', border: '1px solid $border_bright' }}
         >
-          <Dropdown.Item data-testid="pin_message_btn" onClick={onPin}>
-            <PinIcon />
-            <Text variant="sm" css={{ ml: '$4' }}>
-              Pin Message
-            </Text>
-          </Dropdown.Item>
-          {/* {isMobile ? (
+          {options.hide.show ? (
+            <Dropdown.Item data-testid="hide_message_btn" onClick={options.hide.onClick}>
+              {options.hide.icon}
+              <Text variant="sm" css={{ ml: '$4', fontWeight: '$semiBold' }}>
+                {options.hide.text}
+              </Text>
+            </Dropdown.Item>
+          ) : null}
+
+          {options.block.show ? (
             <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',
-                  });
-                }
-              }}
+              data-testid="block_peer_btn"
+              onClick={options.block.onClick}
+              css={{ color: options.block.color }}
             >
-              <CopyIcon />
-              <Text variant="sm" css={{ ml: '$4' }}>
-                Copy Message
+              {options.block.icon}
+              <Text variant="sm" css={{ ml: '$4', color: 'inherit', fontWeight: '$semiBold' }}>
+                {options.block.text}
               </Text>
             </Dropdown.Item>
-          ) : null} */}
+          ) : null}
         </Dropdown.Content>
       </Dropdown.Portal>
     </Dropdown.Root>
@@ -212,9 +360,9 @@ const ChatMessage = React.memo(
       roles: message.recipientRoles,
       receiver: message.recipientPeer,
     });
+    const [openSheet, setOpenSheet] = useState(false);
     // show pin action only if peer has remove others permission and the message is of broadcast type
     const showPinAction = permissions.removeOthers && !messageType && elements?.chat?.allow_pinning_messages;
-
     useEffect(() => {
       if (message.id && !message.read && inView) {
         hmsActions.setMessageRead(true, message.id);
@@ -231,7 +379,12 @@ const ChatMessage = React.memo(
       <Box
         ref={ref}
         as="div"
-        css={{ mb: '$10', pr: '$10', mt: '$8', '&:hover .chat_actions': { opacity: 1 } }}
+        css={{
+          mb: '$5',
+          pr: '$10',
+          mt: '$4',
+          '&:hover .chat_actions': { opacity: 1 },
+        }}
         style={style}
       >
         <Flex
@@ -241,13 +394,23 @@ const ChatMessage = React.memo(
             flexWrap: 'wrap',
             // Theme independent color, token should not be used for transparent chat
             bg: messageType ? (isOverlay ? 'rgba(0, 0, 0, 0.64)' : '$surface_default') : undefined,
-            r: messageType ? '$1' : undefined,
-            px: messageType ? '$4' : '$2',
-            py: messageType ? '$4' : 0,
+            r: '$1',
+            p: '$1 $2',
             userSelect: 'none',
+            '@md': {
+              cursor: 'pointer',
+            },
+            '&:hover': {
+              background: 'linear-gradient(277deg, $surface_default 0%, $surface_dim 60.87%)',
+            },
           }}
           key={message.time}
           data-testid="chat_msg"
+          onClick={() => {
+            if (isMobile) {
+              setOpenSheet(true);
+            }
+          }}
         >
           <Text
             css={{
@@ -291,7 +454,16 @@ const ChatMessage = React.memo(
               receiver={message.recipientPeer}
               roles={message.recipientRoles}
             />
-            {!isOverlay ? <ChatActions onPin={onPin} showPinAction={showPinAction} /> : null}
+
+            <ChatActions
+              onPin={onPin}
+              showPinAction={showPinAction}
+              message={message}
+              sentByLocalPeer={message.sender === localPeerId}
+              isMobile={isMobile}
+              openSheet={openSheet}
+              setOpenSheet={setOpenSheet}
+            />
           </Text>
           <Text
             variant="sm"
@@ -303,7 +475,10 @@ const ChatMessage = React.memo(
               userSelect: 'all',
               color: isOverlay ? '#FFF' : '$on_surface_high',
             }}
-            onClick={e => e.stopPropagation()}
+            onClick={e => {
+              e.stopPropagation();
+              setOpenSheet(true);
+            }}
           >
             <AnnotisedMessage message={message.message} />
           </Text>
@@ -314,7 +489,9 @@ const ChatMessage = React.memo(
 );
 const ChatList = React.forwardRef(
   ({ width, height, setRowHeight, getRowHeight, messages, unreadCount = 0, scrollToBottom }, listRef) => {
-    const { setPinnedMessage } = useSetPinnedMessage();
+    const { setPinnedMessages } = useSetPinnedMessages();
+    const pinnedMessages = useHMSStore(selectSessionStore(SESSION_STORE_KEY.PINNED_MESSAGES)) || [];
+    const localPeerName = useHMSStore(selectLocalPeerName);
     useLayoutEffect(() => {
       if (listRef.current && listRef.current.scrollToItem) {
         scrollToBottom(1);
@@ -343,7 +520,7 @@ const ChatList = React.forwardRef(
             unreadCount={unreadCount}
             isLast={index >= messages.length - 2}
             scrollToBottom={scrollToBottom}
-            onPin={() => setPinnedMessage(messages[index])}
+            onPin={() => setPinnedMessages(pinnedMessages, messages[index], localPeerName)}
           />
         )}
       </VariableSizeList>
@@ -397,14 +574,27 @@ const VirtualizedChatMessages = React.forwardRef(({ messages, unreadCount = 0, s
   );
 });
 
-export const ChatBody = React.forwardRef(({ role, peerId, scrollToBottom }, listRef) => {
+export const ChatBody = React.forwardRef(({ role, peerId, scrollToBottom, blacklistedPeerIDs }, listRef) => {
   const storeMessageSelector = role
     ? selectMessagesByRole(role)
     : peerId
     ? selectMessagesByPeerID(peerId)
     : selectHMSMessages;
-  let messages = useHMSStore(storeMessageSelector);
-  messages = useMemo(() => messages?.filter(message => message.type === 'chat') || [], [messages]);
+  let messages = useHMSStore(storeMessageSelector) || [];
+  const blacklistedMessageIDs = useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_MESSAGE_BLACKLIST)) || [];
+  const getFilteredMessages = () => {
+    const blacklistedMessageIDSet = new Set(blacklistedMessageIDs);
+    const blacklistedPeerIDSet = new Set(blacklistedPeerIDs);
+    return (
+      messages?.filter(
+        message =>
+          message.type === 'chat' &&
+          !blacklistedMessageIDSet.has(message.id) &&
+          !blacklistedPeerIDSet.has(message?.senderUserId),
+      ) || []
+    );
+  };
+
   const isMobile = useMedia(cssConfig.media.md);
   const { elements } = useRoomLayoutConferencingScreen();
   const unreadCount = useUnreadCount({ role, peerId });
@@ -440,7 +630,7 @@ export const ChatBody = React.forwardRef(({ role, peerId, scrollToBottom }, list
   return (
     <Fragment>
       <VirtualizedChatMessages
-        messages={messages}
+        messages={getFilteredMessages()}
         scrollToBottom={scrollToBottom}
         unreadCount={unreadCount}
         ref={listRef}

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

@@ -2,9 +2,10 @@ import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'reac
 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, config as cssConfig, Flex, IconButton as BaseIconButton, Popover, styled } from '../../..';
+import { selectLocalPeer, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { EmojiIcon, PauseCircleIcon, SendIcon, VerticalMenuIcon } from '@100mslive/react-icons';
+import { Box, config as cssConfig, Flex, IconButton as BaseIconButton, Popover, styled, Text } from '../../..';
+import { IconButton } from '../../../IconButton';
 // @ts-ignore
 import { ToastManager } from '../Toast/ToastManager';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
@@ -13,6 +14,8 @@ import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvid
 import { useChatDraftMessage } from '../AppData/useChatState';
 // @ts-ignore
 import { useEmojiPickerStyles } from './useEmojiPickerStyles';
+// @ts-ignore
+import { SESSION_STORE_KEY } from '../../common/constants';
 
 const TextArea = styled('textarea', {
   width: '100%',
@@ -82,7 +85,10 @@ export const ChatFooter = ({
   const [draftMessage, setDraftMessage] = useChatDraftMessage();
   const isMobile = useMedia(cssConfig.media.md);
   const { elements } = useRoomLayoutConferencingScreen();
+  const message_placeholder = elements?.chat?.message_placeholder || 'Send a message';
+  const localPeer = useHMSStore(selectLocalPeer);
   const isOverlayChat = elements?.chat?.is_overlay;
+  const canDisableChat = !!elements?.chat?.real_time_controls?.can_disable_chat;
 
   const sendMessage = useCallback(async () => {
     const message = inputRef?.current?.value;
@@ -122,10 +128,54 @@ export const ChatFooter = ({
   }, [setDraftMessage]);
 
   return (
-    <>
+    <Box>
       {/* {screenType !== 'hls_live_streaming' ? (
         <ChatSelectorContainer onSelect={onSelect} role={role} peerId={peerId} selection={selection} />
       ) : null} */}
+      {canDisableChat ? (
+        <Flex align="center" justify="end" css={{ w: '100%', mb: '$4' }}>
+          <Popover.Root>
+            <Popover.Trigger asChild>
+              <IconButton css={{ border: '1px solid $border_bright' }}>
+                <VerticalMenuIcon height="16" width="16" />
+              </IconButton>
+            </Popover.Trigger>
+            <Popover.Portal>
+              <Popover.Content
+                align="end"
+                side="top"
+                onClick={() => {
+                  const chatState = {
+                    enabled: false,
+                    updatedBy: {
+                      peerId: localPeer?.id,
+                      userId: localPeer?.customerUserId,
+                      userName: localPeer?.name,
+                    },
+                    updatedAt: Date.now(),
+                  };
+                  hmsActions.sessionStore.set(SESSION_STORE_KEY.CHAT_STATE, chatState);
+                }}
+                css={{
+                  backgroundColor: '$surface_default',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '$4',
+                  borderRadius: '$1',
+                  color: '$on_surface_high',
+                  cursor: 'pointer',
+                  '&:hover': { backgroundColor: '$surface_dim' },
+                }}
+              >
+                <PauseCircleIcon />
+                <Text variant="sm" css={{ fontWeight: '$semiBold' }}>
+                  Pause Chat
+                </Text>
+              </Popover.Content>
+            </Popover.Portal>
+          </Popover.Root>
+        </Flex>
+      ) : null}
       <Flex align="center" css={{ gap: '$4', w: '100%' }}>
         <Flex
           align="center"
@@ -153,7 +203,7 @@ export const ChatFooter = ({
               '& ~ .send-msg': { color: '$on_surface_low' },
               '&::placeholder': { color: '$on_surface_medium' },
             }}
-            placeholder="Send a message...."
+            placeholder={message_placeholder}
             ref={inputRef}
             required
             autoFocus={!isMobile}
@@ -195,6 +245,6 @@ export const ChatFooter = ({
           </BaseIconButton>
         </Flex>
       </Flex>
-    </>
+    </Box>
   );
 };

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

@@ -0,0 +1,68 @@
+import React, { useCallback } from 'react';
+import { selectLocalPeer, selectSessionStore, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { Button } from '../../../Button';
+import { Box, Flex } from '../../../Layout';
+import { Text } from '../../../Text';
+import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+import { SESSION_STORE_KEY } from '../../common/constants';
+
+export const ChatPaused = () => {
+  const hmsActions = useHMSActions();
+  const { elements } = useRoomLayoutConferencingScreen();
+  const { can_disable_chat } = elements?.chat.real_time_controls || false;
+  const { enabled: isChatEnabled = true, updatedBy: chatStateUpdatedBy } =
+    useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_STATE)) || {};
+
+  const localPeer = useHMSStore(selectLocalPeer);
+
+  const unPauseChat = useCallback(
+    async () =>
+      await hmsActions.sessionStore.set(SESSION_STORE_KEY.CHAT_STATE, {
+        enabled: true,
+        updatedBy: { userName: localPeer.name, userId: localPeer?.customerUserId, peerId: localPeer.id },
+        updatedAt: Date.now(),
+      }),
+    [hmsActions, localPeer],
+  );
+
+  return isChatEnabled ? null : (
+    <Flex
+      align="center"
+      justify="between"
+      css={{ borderRadius: '$1', bg: '$surface_default', p: '$4 $4 $4 $8', w: '100%' }}
+    >
+      <Box>
+        <Text variant="sm" css={{ fontWeight: '$semiBold', color: '$on_surface_high' }}>
+          Chat paused
+        </Text>
+        <Text
+          variant="xs"
+          css={{ color: '$on_surface_medium', maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis' }}
+        >
+          Chat has been paused by {chatStateUpdatedBy?.peerId === localPeer.id ? 'you' : chatStateUpdatedBy?.userName}
+        </Text>
+      </Box>
+      {can_disable_chat ? (
+        <Button css={{ fontWeight: '$semiBold', fontSize: '$sm', borderRadius: '$2' }} onClick={unPauseChat}>
+          Resume
+        </Button>
+      ) : (
+        <></>
+      )}
+    </Flex>
+  );
+};
+
+export const ChatBlocked = () => {
+  return (
+    <Flex
+      align="center"
+      justify="between"
+      css={{ borderRadius: '$1', bg: '$surface_default', p: '$4 $4 $4 $8', w: '100%' }}
+    >
+      <Text variant="sm" css={{ color: '$on_surface_medium', textAlign: 'center', w: '100%' }}>
+        You've been blocked from sending messages
+      </Text>
+    </Flex>
+  );
+};

package/src/Prebuilt/components/Chat/MwebChatOption.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Flex } from '../../../Layout';
+import { Text } from '../../../Text';
+
+export const MwebChatOption = ({
+  icon,
+  text,
+  onClick,
+  color = '$on_surface_high',
+}: {
+  icon: any;
+  text: string;
+  onClick: () => void | Promise<void>;
+  color: string;
+}) => {
+  return (
+    <Flex align="center" css={{ w: '100%', color, cursor: 'pointer', gap: '$4', p: '$8' }} onClick={onClick}>
+      {icon}
+      <Text variant="sm" css={{ color, fontWeight: '$semiBold' }}>
+        {text}
+      </Text>
+    </Flex>
+  );
+};

package/src/Prebuilt/components/Chat/Navigation.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { ChevronDownIcon, ChevronUpIcon } from '@100mslive/react-icons';
+import { Box, Flex } from '../../../Layout';
+
+export const Navigation = ({
+  total,
+  index,
+  showPrevious,
+  showNext,
+  isMobile,
+}: {
+  total: number;
+  index: number;
+  showPrevious: () => void;
+  showNext: () => void;
+  isMobile: boolean;
+}) => {
+  const sticksCount = Math.min(3, total);
+
+  if (total < 2) {
+    return null;
+  }
+
+  return isMobile ? (
+    <Flex direction="column" css={{ gap: '$1' }}>
+      {[...Array(sticksCount)].map((_, i) => (
+        <Box
+          css={{
+            borderLeft: '2px solid',
+            height: '$4',
+            borderColor: i === index ? '$on_surface_high' : '$on_surface_low',
+          }}
+        />
+      ))}
+    </Flex>
+  ) : (
+    <Flex direction="column" css={{ gap: '$4' }}>
+      <Flex
+        onClick={showPrevious}
+        css={
+          index === 0
+            ? { cursor: 'not-allowed', color: '$on_surface_low' }
+            : { cursor: 'pointer', color: '$on_surface_medium' }
+        }
+      >
+        <ChevronUpIcon height={20} width={20} />
+      </Flex>
+      <Flex
+        onClick={showNext}
+        css={
+          index === total - 1
+            ? { cursor: 'not-allowed', color: '$on_surface_low' }
+            : { cursor: 'pointer', color: '$on_surface_medium' }
+        }
+      >
+        <ChevronDownIcon height={20} width={20} />
+      </Flex>
+    </Flex>
+  );
+};