@100mslive/roomkit-react 0.3.16-alpha.0 → 0.3.16-alpha.2

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.16-alpha.0",
+  "version": "0.3.16-alpha.2",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -75,12 +75,12 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.16-alpha.0",
+    "@100mslive/hls-player": "0.3.16-alpha.2",
     "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@100mslive/hms-virtual-background": "1.13.16-alpha.0",
-    "@100mslive/hms-whiteboard": "0.0.6-alpha.0",
-    "@100mslive/react-icons": "0.10.16-alpha.0",
-    "@100mslive/react-sdk": "0.10.16-alpha.0",
+    "@100mslive/hms-virtual-background": "1.13.16-alpha.2",
+    "@100mslive/hms-whiteboard": "0.0.6-alpha.2",
+    "@100mslive/react-icons": "0.10.16-alpha.2",
+    "@100mslive/react-sdk": "0.10.16-alpha.2",
     "@100mslive/types-prebuilt": "0.12.9",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -104,6 +104,7 @@
     "eventemitter2": "^6.4.9",
     "lodash.merge": "^4.6.2",
     "qrcode.react": "^3.1.0",
+    "react-dom": "^18.2.0",
     "react-draggable": "^4.4.5",
     "react-intersection-observer": "^9.4.3",
     "react-swipeable": "^7.0.1",
@@ -116,5 +117,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "0ba6be8700e395887440d6ab1cadaacb6a769e98"
+  "gitHead": "0be9feff65c2b2ae3a0def2236e41b492ac17e98"
 }

package/src/Prebuilt/components/AudioVideoToggle.tsx

@@ -109,6 +109,9 @@ const useNoiseCancellationWithPlugin = () => {
     if (inProgress) {
       return;
     }
+    if (!krispPlugin.checkSupport().isSupported) {
+      throw Error('Krisp plugin is not supported');
+    }
     setInProgress(true);
     if (enabled) {
       await actions.addPluginToAudioTrack(krispPlugin);
@@ -281,13 +284,17 @@ export const AudioVideoToggle = ({ hideOptions = false }: { hideOptions?: boolea
   useEffect(() => {
     (async () => {
       if (isNoiseCancellationEnabled && !isKrispPluginAdded && !inProgress && localPeer?.audioTrack) {
-        await setNoiseCancellationWithPlugin(true);
-        ToastManager.addToast({
-          title: `Noise Reduction Enabled`,
-          variant: 'standard',
-          duration: 2000,
-          icon: <AudioLevelIcon />,
-        });
+        try {
+          await setNoiseCancellationWithPlugin(true);
+          ToastManager.addToast({
+            title: `Noise Reduction Enabled`,
+            variant: 'standard',
+            duration: 2000,
+            icon: <AudioLevelIcon />,
+          });
+        } catch (error) {
+          console.error(error);
+        }
       }
     })();
     // eslint-disable-next-line react-hooks/exhaustive-deps

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

@@ -28,18 +28,9 @@ import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvid
 // @ts-ignore: No implicit Any
 import { useSetSubscribedChatSelector } from '../AppData/useUISettings';
 import { usePinnedBy } from '../hooks/usePinnedBy';
+import { formatTime } from './utils';
 import { CHAT_SELECTOR, SESSION_STORE_KEY } from '../../common/constants';
 
-const formatTime = (date: Date) => {
-  if (!(date instanceof Date)) {
-    return '';
-  }
-  const hours = date.getHours();
-  const minutes = date.getMinutes();
-  const suffix = hours > 11 ? 'PM' : 'AM';
-  return `${hours < 10 ? '0' : ''}${hours}:${minutes < 10 ? '0' : ''}${minutes} ${suffix}`;
-};
-
 const rowHeights: Record<number, { size: number; id: string }> = {};
 let listInstance: VariableSizeList | null = null; //eslint-disable-line
 function getRowHeight(index: number) {
@@ -109,7 +100,7 @@ const MessageTypeContainer = ({ left, right }: { left?: string; right?: string }
   );
 };
 
-const MessageType = ({
+export const MessageType = ({
   roles,
   hasCurrentUserSent,
   receiver,
@@ -172,7 +163,8 @@ const getMessageType = ({ roles, receiver }: { roles?: HMSRoleName[]; receiver?:
   }
   return receiver ? 'private' : '';
 };
-const SenderName = styled(Text, {
+
+export const SenderName = styled(Text, {
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',

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

@@ -20,10 +20,9 @@ import { useIsPeerBlacklisted } from '../hooks/useChatBlacklist';
 // @ts-ignore: No implicit any
 import { useEmojiPickerStyles } from './useEmojiPickerStyles';
 import { useDefaultChatSelection, useLandscapeHLSStream, useMobileHLSStream } from '../../common/hooks';
+import { CHAT_MESSAGE_LIMIT } from './utils';
 import { CHAT_SELECTOR, SESSION_STORE_KEY } from '../../common/constants';
 
-const CHAT_MESSAGE_LIMIT = 2000;
-
 const TextArea = styled('textarea', {
   width: '100%',
   bg: 'transparent',
@@ -76,7 +75,7 @@ function EmojiPicker({ onSelect }: { onSelect: (emoji: any) => void }) {
   );
 }
 
-export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => void; children: ReactNode }) => {
+export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => void; children?: ReactNode }) => {
   const hmsActions = useHMSActions();
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const [draftMessage, setDraftMessage] = useChatDraftMessage();

package/src/Prebuilt/components/Chat/utils.ts

@@ -0,0 +1,11 @@
+export const formatTime = (date: Date) => {
+  if (!(date instanceof Date)) {
+    return '';
+  }
+  const hours = date.getHours();
+  const minutes = date.getMinutes();
+  const suffix = hours > 11 ? 'PM' : 'AM';
+  return `${hours < 10 ? '0' : ''}${hours}:${minutes < 10 ? '0' : ''}${minutes} ${suffix}`;
+};
+
+export const CHAT_MESSAGE_LIMIT = 2000;

package/src/Prebuilt/components/ConferenceScreen.tsx

@@ -6,6 +6,7 @@ import {
   selectAppData,
   selectIsConnectedToRoom,
   selectRoomState,
+  useAwayNotifications,
   useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
@@ -50,6 +51,7 @@ export const ConferenceScreen = () => {
   const isMobileDevice = isAndroid || isIOS || isIPadOS;
   const dropdownListRef = useRef<string[]>();
   const [isHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
+  const { requestPermission } = useAwayNotifications();
 
   // using it in hls stream to show action button when chat is disabled
   const showChat = !!screenProps.elements?.chat;
@@ -99,10 +101,20 @@ export const ConferenceScreen = () => {
             speakerAutoSelectionBlacklist: ['Yeti Stereo Microphone'],
           },
         })
+        .then(() => requestPermission())
         .catch(console.error);
       autoRoomJoined.current = true;
     }
-  }, [authTokenInAppData, endpoints?.init, hmsActions, isConnectedToRoom, isPreviewScreenEnabled, roomState, userName]);
+  }, [
+    authTokenInAppData,
+    endpoints?.init,
+    hmsActions,
+    isConnectedToRoom,
+    isPreviewScreenEnabled,
+    roomState,
+    userName,
+    requestPermission,
+  ]);
 
   useEffect(() => {
     onJoinFunc?.();

package/src/Prebuilt/components/Footer/ParticipantList.tsx

@@ -194,7 +194,6 @@ export const Participant = ({
         <ParticipantActions
           peerId={peer.id}
           peerType={peer.type}
-          isLocal={peer.id === localPeerId}
           role={peer.roleName}
           isHandRaisedAccordion={isHandRaisedAccordion}
         />
@@ -273,12 +272,10 @@ const ParticipantActions = React.memo(
     peerId,
     peerType,
     role,
-    isLocal,
     isHandRaisedAccordion,
   }: {
     peerId: string;
     role: string;
-    isLocal: boolean;
     isHandRaisedAccordion?: boolean;
     peerType: HMSPeerType;
   }) => {
@@ -331,7 +328,7 @@ const ParticipantActions = React.memo(
               </Flex>
             ) : null}
 
-            {shouldShowMoreActions && !isLocal ? <ParticipantMoreActions peerId={peerId} role={role} /> : null}
+            {shouldShowMoreActions ? <ParticipantMoreActions peerId={peerId} role={role} /> : null}
           </>
         )}
       </Flex>

package/src/Prebuilt/components/MoreSettings/MoreSettings.tsx

@@ -10,6 +10,7 @@ import { DesktopOptions } from './SplitComponents/DesktopOptions';
 // @ts-ignore: No implicit Any
 import { MwebOptions } from './SplitComponents/MwebOptions';
 import { config as cssConfig } from '../../..';
+import { PIPProvider } from '../PIP/PIPProvider';
 import { useLandscapeHLSStream } from '../../common/hooks';
 
 export const MoreSettings = ({
@@ -24,6 +25,8 @@ export const MoreSettings = ({
   return isMobile || isLandscapeHLSStream ? (
     <MwebOptions elements={elements} screenType={screenType} />
   ) : (
-    <DesktopOptions elements={elements} screenType={screenType} />
+    <PIPProvider>
+      <DesktopOptions elements={elements} screenType={screenType} />
+    </PIPProvider>
   );
 };

package/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx

@@ -28,8 +28,11 @@ import { Checkbox, Dropdown, Flex, Switch, Text, Tooltip } from '../../../..';
 import IconButton from '../../../IconButton';
 // @ts-ignore: No implicit any
 import { PIP } from '../../PIP';
+import { PIPChat } from '../../PIP/PIPChat';
 // @ts-ignore: No implicit any
+import { PIPChatOption } from '../../PIP/PIPChatOption';
 import { PictureInPicture } from '../../PIP/PIPManager';
+import { PIPWindow } from '../../PIP/PIPWindow';
 // @ts-ignore: No implicit any
 import { RoleChangeModal } from '../../RoleChangeModal';
 // @ts-ignore: No implicit any
@@ -48,6 +51,8 @@ import { MuteAllModal } from '../MuteAllModal';
 import { useDropdownList } from '../../hooks/useDropdownList';
 import { useMyMetadata } from '../../hooks/useMetadata';
 // @ts-ignore: No implicit any
+import { usePIPChat } from '../../PIP/usePIPChat';
+// @ts-ignore: No implicit any
 import { APP_DATA, isMacOS } from '../../../common/constants';
 
 const MODALS = {
@@ -79,6 +84,8 @@ export const DesktopOptions = ({
   const isBRBEnabled = !!elements?.brb;
   const isTranscriptionAllowed = useHMSStore(selectIsTranscriptionAllowedByMode(HMSTranscriptionMode.CAPTION));
   const isTranscriptionEnabled = useHMSStore(selectIsTranscriptionEnabled);
+  const { isSupported, pipWindow, requestPipWindow } = usePIPChat();
+  const showPipChatOption = !!elements?.chat && isSupported;
 
   useDropdownList({ open: openModals.size > 0, name: 'MoreSettings' });
 
@@ -98,6 +105,11 @@ export const DesktopOptions = ({
 
   return (
     <Fragment>
+      {isSupported && pipWindow ? (
+        <PIPWindow pipWindow={pipWindow}>
+          <PIPChat />
+        </PIPWindow>
+      ) : null}
       <Dropdown.Root
         open={openModals.has(MODALS.MORE_SETTINGS)}
         onOpenChange={value => updateState(MODALS.MORE_SETTINGS, value)}
@@ -168,13 +180,9 @@ export const DesktopOptions = ({
             </Dropdown.Item>
           ) : null}
 
+          <PIPChatOption showPIPChat={showPipChatOption} openChat={async () => await requestPipWindow(350, 500)} />
           <FullScreenItem />
-          {/* {isAllowedToPublish.screen && isEmbedEnabled && (
-            <EmbedUrl setShowOpenUrl={() => updateState(MODALS.EMBED_URL, true)} />
-          )} */}
-
           <Dropdown.ItemSeparator css={{ mx: 0 }} />
-
           <Dropdown.Item onClick={() => updateState(MODALS.DEVICE_SETTINGS, true)} data-testid="device_settings_btn">
             <SettingsIcon />
             <Text variant="sm" css={{ ml: '$4' }}>

package/src/Prebuilt/components/Notifications/HandRaisedNotifications.tsx

@@ -1,14 +1,19 @@
 import { useEffect } from 'react';
+import { useDebounce } from 'react-use';
 import {
   HMSNotificationTypes,
   HMSRoomState,
+  selectHandRaisedPeers,
   selectHasPeerHandRaised,
+  selectIsLocalScreenShared,
   selectPeerByID,
   selectRoomState,
+  useAwayNotifications,
   useHMSNotifications,
   useHMSStore,
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
+import { useRoomLayout } from '../../provider/roomLayoutProvider';
 // @ts-ignore: No implicit Any
 import { ToastBatcher } from '../Toast/ToastBatcher';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
@@ -22,6 +27,9 @@ export const HandRaisedNotifications = () => {
   const vanillaStore = useHMSVanillaStore();
   const { on_stage_exp } = useRoomLayoutConferencingScreen().elements || {};
   const isSubscribing = !!useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.METADATA_UPDATED);
+  const amIScreenSharing = useHMSStore(selectIsLocalScreenShared);
+  const { showNotification } = useAwayNotifications();
+  const logoURL = useRoomLayout()?.logo?.url;
 
   useEffect(() => {
     if (!notification?.data) {
@@ -32,6 +40,7 @@ export const HandRaisedNotifications = () => {
     if (roomState !== HMSRoomState.Connected || notification.data.isLocal || !isSubscribing) {
       return;
     }
+
     const hasPeerHandRaised = vanillaStore.getState(selectHasPeerHandRaised(notification.data.id));
     const peer = vanillaStore.getState(selectPeerByID(notification.data.id));
     if (hasPeerHandRaised) {
@@ -41,5 +50,29 @@ export const HandRaisedNotifications = () => {
     }
   }, [isSubscribing, notification, on_stage_exp, roomState, vanillaStore]);
 
+  useDebounce(
+    () => {
+      if (!notification?.data) {
+        return;
+      }
+
+      // Don't show toast message in case of local peer.
+      if (roomState !== HMSRoomState.Connected || notification.data.isLocal || !isSubscribing) {
+        return;
+      }
+
+      const hasPeerHandRaised = vanillaStore.getState(selectHasPeerHandRaised(notification.data.id));
+      const peer = vanillaStore.getState(selectPeerByID(notification.data.id));
+      const handRaisedPeers = vanillaStore.getState(selectHandRaisedPeers);
+      if (amIScreenSharing && hasPeerHandRaised) {
+        const title = `${peer?.name} ${
+          handRaisedPeers.length > 1 ? `and ${handRaisedPeers.length - 1} others` : ''
+        } raised hand`;
+        showNotification(title, { icon: logoURL });
+      }
+    },
+    1000,
+    [isSubscribing, notification, roomState, vanillaStore, amIScreenSharing],
+  );
   return null;
 };

package/src/Prebuilt/components/PIP/PIPChat.tsx

@@ -0,0 +1,225 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  selectHMSMessages,
+  selectLocalPeerID,
+  selectSessionStore,
+  selectUnreadHMSMessagesCount,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import { SendIcon } from '@100mslive/react-icons';
+import { Box, Flex } from '../../../Layout';
+import { Text } from '../../../Text';
+import { TextArea } from '../../../TextArea';
+import { Tooltip } from '../../../Tooltip';
+import IconButton from '../../IconButton';
+import { AnnotisedMessage } from '../Chat/ChatBody';
+import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+import { CHAT_MESSAGE_LIMIT, formatTime } from '../Chat/utils';
+import { SESSION_STORE_KEY } from '../../common/constants';
+
+export const PIPChat = () => {
+  const messages = useHMSStore(selectHMSMessages);
+  const localPeerID = useHMSStore(selectLocalPeerID);
+  const count = useHMSStore(selectUnreadHMSMessagesCount);
+  const [unreadMessageCount, setUnreadMessageCount] = useState(0);
+
+  const getSenderName = useCallback(
+    (senderName: string, senderID?: string) => {
+      const slicedName = senderName.length > 10 ? senderName.slice(0, 10) + '...' : senderName;
+      return slicedName + (senderID === localPeerID ? ' (You)' : '');
+    },
+    [localPeerID],
+  );
+
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      setUnreadMessageCount(count);
+    }, 100);
+    return () => clearTimeout(timeoutId);
+  }, [count]);
+
+  const blacklistedMessageIDs = useHMSStore(selectSessionStore(SESSION_STORE_KEY.CHAT_MESSAGE_BLACKLIST));
+  const filteredMessages = useMemo(() => {
+    const blacklistedMessageIDSet = new Set(blacklistedMessageIDs || []);
+    return messages?.filter(message => message.type === 'chat' && !blacklistedMessageIDSet.has(message.id)) || [];
+  }, [blacklistedMessageIDs, messages]);
+  const { elements } = useRoomLayoutConferencingScreen();
+  const message_placeholder = elements?.chat?.message_placeholder || 'Send a message';
+  const canSendChatMessages = !!elements?.chat?.public_chat_enabled || !!elements?.chat?.roles_whitelist?.length;
+
+  return (
+    <div style={{ height: '100%' }}>
+      <Box
+        id="chat-container"
+        css={{
+          bg: '$surface_dim',
+          overflowY: 'auto',
+          // Subtracting height of footer
+          h: canSendChatMessages ? 'calc(100% - 90px)' : '100%',
+          position: 'relative',
+        }}
+      >
+        {unreadMessageCount ? (
+          <Box
+            id="new-message-notif"
+            style={{
+              position: 'fixed',
+              bottom: '76px',
+              right: '4px',
+            }}
+          >
+            <Text
+              variant="xs"
+              css={{ cursor: 'pointer' }}
+              style={{ color: 'white', background: 'gray', padding: '4px', borderRadius: '4px' }}
+            >
+              {unreadMessageCount === 1 ? 'New message' : `${unreadMessageCount} new messages`}
+            </Text>
+          </Box>
+        ) : (
+          ''
+        )}
+        {filteredMessages.length === 0 ? (
+          <div
+            style={{ display: 'flex', height: '100%', width: '100%', alignItems: 'center', justifyContent: 'center' }}
+          >
+            <Text>No messages here yet</Text>
+          </div>
+        ) : (
+          filteredMessages.map(message => (
+            <Box className="pip-message" key={message.id} id={message.id} style={{ padding: '8px 0.75rem' }}>
+              <Flex style={{ width: '100%', alignItems: 'center', justifyContent: 'between' }}>
+                <Text
+                  style={{ display: 'flex', justifyContent: 'between', width: '100%', alignItems: 'center' }}
+                  css={{
+                    color: '$on_surface_high',
+                    fontWeight: '$semiBold',
+                  }}
+                >
+                  <Flex style={{ flexGrow: 1, gap: '2px', alignItems: 'center' }}>
+                    {message.senderName === 'You' || !message.senderName ? (
+                      <Text as="span" variant="sub2" css={{ color: '$on_surface_high', fontWeight: '$semiBold' }}>
+                        {message.senderName || 'Anonymous'}
+                      </Text>
+                    ) : (
+                      <Tooltip title={message.senderName} side="top" align="start">
+                        <Text as="span" variant="sub2" css={{ color: '$on_surface_high', fontWeight: '$semiBold' }}>
+                          {getSenderName(message.senderName, message?.sender)}
+                        </Text>
+                      </Tooltip>
+                    )}
+                    {message.recipientRoles ? (
+                      <Text as="span" variant="sub2" css={{ color: '$on_surface_high', fontWeight: '$semiBold' }}>
+                        to {message.recipientRoles} (Group)
+                      </Text>
+                    ) : null}
+                    {message.recipientPeer ? (
+                      <Text as="span" variant="sub2" css={{ color: '$on_surface_high', fontWeight: '$semiBold' }}>
+                        (DM)
+                      </Text>
+                    ) : null}
+                  </Flex>
+
+                  <Text
+                    variant="xs"
+                    css={{
+                      color: '$on_surface_medium',
+                      flexShrink: 0,
+                      p: '$2',
+                      whitespace: 'nowrap',
+                    }}
+                  >
+                    {formatTime(message.time)}
+                  </Text>
+                </Text>
+              </Flex>
+              <Text
+                variant="sm"
+                css={{
+                  w: '100%',
+                  mt: '$2',
+                  wordBreak: 'break-word',
+                  whiteSpace: 'pre-wrap',
+                  userSelect: 'all',
+                  color: '$on_surface_high',
+                }}
+              >
+                <AnnotisedMessage message={message.message} />
+              </Text>
+            </Box>
+          ))
+        )}
+        <div id="marker" style={{ height: filteredMessages.length ? '1px' : 0 }} />
+      </Box>
+      {canSendChatMessages && (
+        <Box css={{ bg: '$surface_dim' }}>
+          <Flex css={{ px: '$4', pb: '3px', gap: '$2', alignItems: 'center' }}>
+            <Text variant="caption">To:</Text>
+            <Flex css={{ bg: '$primary_bright', color: '$on_primary_high', r: '$2' }}>
+              <select
+                id="selector"
+                style={{
+                  background: 'inherit',
+                  color: 'inherit',
+                  border: 'none',
+                  outline: 'none',
+                  borderRadius: '4px',
+                  padding: '0 2px',
+                }}
+                defaultValue={elements.chat?.public_chat_enabled ? 'Everyone' : elements.chat?.roles_whitelist?.[0]}
+              >
+                {elements.chat?.roles_whitelist?.map(role => (
+                  <option key={role} value={role}>
+                    {role}
+                  </option>
+                ))}
+                {elements.chat?.public_chat_enabled ? <option value="Everyone">Everyone</option> : ''}
+              </select>
+            </Flex>
+          </Flex>
+          <Flex
+            align="center"
+            css={{
+              bg: '$surface_default',
+              minHeight: '$16',
+              width: '100%',
+              py: '$6',
+              pl: '$4',
+              boxSizing: 'border-box',
+              gap: '$2',
+              r: '$2',
+            }}
+          >
+            <TextArea
+              id="chat-input"
+              maxLength={CHAT_MESSAGE_LIMIT}
+              style={{ border: 'none', resize: 'none' }}
+              css={{
+                w: '100%',
+                c: '$on_surface_high',
+                padding: '0.25rem !important',
+              }}
+              placeholder={message_placeholder}
+              required
+              autoComplete="off"
+              aria-autocomplete="none"
+            />
+
+            <IconButton
+              id="send-btn"
+              css={{
+                ml: 'auto',
+                height: 'max-content',
+                mr: '$4',
+                '&:hover': { c: '$on_surface_medium' },
+              }}
+              data-testid="send_msg_btn"
+            >
+              <SendIcon />
+            </IconButton>
+          </Flex>
+        </Box>
+      )}
+    </div>
+  );
+};

package/src/Prebuilt/components/PIP/PIPChatOption.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ExternalLinkIcon } from '@100mslive/react-icons';
+import { Dropdown } from '../../../Dropdown';
+import { Text } from '../../../Text';
+
+export const PIPChatOption = ({ openChat, showPIPChat }: { openChat: () => void; showPIPChat: boolean }) => {
+  if (!showPIPChat) {
+    return <></>;
+  }
+  return (
+    <Dropdown.Item onClick={openChat} data-testid="brb_btn">
+      <ExternalLinkIcon height={18} width={18} style={{ padding: '0 $2' }} />
+      <Text variant="sm" css={{ ml: '$4', color: '$on_surface_high' }}>
+        Pop out Chat
+      </Text>
+    </Dropdown.Item>
+  );
+};

package/src/Prebuilt/components/PIP/PIPProvider.tsx

@@ -0,0 +1,56 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { PIPContext } from './context';
+
+type PIPProviderProps = {
+  children: React.ReactNode;
+};
+
+export const PIPProvider = ({ children }: PIPProviderProps) => {
+  // Detect if the feature is available.
+  const isSupported = 'documentPictureInPicture' in window;
+
+  // Expose pipWindow that is currently active
+  const [pipWindow, setPipWindow] = useState<Window | null>(null);
+
+  // Close pipWidnow programmatically
+  const closePipWindow = useCallback(() => {
+    if (pipWindow != null) {
+      pipWindow.close();
+      setPipWindow(null);
+    }
+  }, [pipWindow]);
+
+  // Open new pipWindow
+  const requestPipWindow = useCallback(
+    async (width: number, height: number) => {
+      // We don't want to allow multiple requests.
+      if (pipWindow != null) {
+        return;
+      }
+      // @ts-ignore for documentPIP
+      const pip = await window.documentPictureInPicture.requestWindow({
+        width,
+        height,
+      });
+
+      // Detect when window is closed by user
+      pip.addEventListener('pagehide', () => {
+        setPipWindow(null);
+      });
+
+      setPipWindow(pip);
+    },
+    [pipWindow],
+  );
+
+  const value = useMemo(() => {
+    return {
+      isSupported,
+      pipWindow,
+      requestPipWindow,
+      closePipWindow,
+    };
+  }, [closePipWindow, isSupported, pipWindow, requestPipWindow]);
+
+  return <PIPContext.Provider value={value}>{children}</PIPContext.Provider>;
+};

package/src/Prebuilt/components/PIP/PIPWindow.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+
+type PIPWindowProps = {
+  pipWindow: Window;
+  children: React.ReactNode;
+};
+
+export const PIPWindow = ({ pipWindow, children }: PIPWindowProps) => {
+  pipWindow.document.body.style.margin = '0';
+  pipWindow.document.body.style.overflowX = 'hidden';
+  return createPortal(children, pipWindow.document.body);
+};