@100mslive/roomkit-react 0.1.0

package/src/Prebuilt/components/MoreSettings/ChangeSelfRole.jsx

@@ -0,0 +1,67 @@
+import React, { useMemo } from 'react';
+import { useMedia } from 'react-use';
+import {
+  selectLocalPeerID,
+  selectLocalPeerRoleName,
+  selectPermissions,
+  useHMSActions,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import { ArrowRightIcon, CheckIcon, PersonIcon } from '@100mslive/react-icons';
+import { config, Dropdown, Text } from '../../../';
+import { ToastManager } from '../Toast/ToastManager';
+import { useAppLayout } from '../AppData/useAppLayout';
+import { useFilteredRoles } from '../../common/hooks';
+import { arrayIntersection } from '../../common/utils';
+
+export const ChangeSelfRole = ({ onClick }) => {
+  const roles = useFilteredRoles();
+  const permissions = useHMSStore(selectPermissions);
+  const localPeerId = useHMSStore(selectLocalPeerID);
+  const localPeerRole = useHMSStore(selectLocalPeerRoleName);
+  const hmsActions = useHMSActions();
+  const hideTriggerItem = useMedia(config.media.sm);
+  const selfRoleChangeTo = useAppLayout('selfRoleChangeTo');
+  const availableSelfChangeRoles = useMemo(() => arrayIntersection(selfRoleChangeTo, roles), [roles, selfRoleChangeTo]);
+
+  if (!permissions.changeRole) {
+    return null;
+  }
+  return hideTriggerItem ? (
+    <Dropdown.Item onClick={onClick}>
+      <PersonIcon />
+      <Text variant="sm" css={{ mx: '$4' }}>
+        Change My Role
+      </Text>
+    </Dropdown.Item>
+  ) : (
+    <Dropdown.SubMenu>
+      <Dropdown.TriggerItem data-testid="change_my_role_btn">
+        <PersonIcon />
+        <Text variant="sm" css={{ flex: '1 1 0', mx: '$4' }}>
+          Change My Role
+        </Text>
+        <ArrowRightIcon />
+      </Dropdown.TriggerItem>
+      <Dropdown.SubMenuContent sideOffset={8} alignOffset={-5} css={{ '@md': { w: '$64' } }}>
+        {availableSelfChangeRoles.map(role => (
+          <Dropdown.Item
+            key={role}
+            css={{ justifyContent: 'space-between' }}
+            onClick={async () => {
+              try {
+                await hmsActions.changeRole(localPeerId, role, true);
+              } catch (error) {
+                ToastManager.addToast({ title: error.message });
+              }
+            }}
+            data-testid={'change_to_role_' + role}
+          >
+            <Text variant="sm">{role}</Text>
+            {localPeerRole === role && <CheckIcon width={16} height={16} />}
+          </Dropdown.Item>
+        ))}
+      </Dropdown.SubMenuContent>
+    </Dropdown.SubMenu>
+  );
+};

package/src/Prebuilt/components/MoreSettings/EmbedUrl.jsx

@@ -0,0 +1,106 @@
+import React, { useState } from 'react';
+import { ViewIcon } from '@100mslive/react-icons';
+import { Button, Dialog, Dropdown, Text } from '../../../';
+import { DialogContent, DialogInput, DialogRow } from '../../primitives/DialogContent';
+import { useSetAppDataByKey } from '../AppData/useUISettings';
+import { APP_DATA } from '../../common/constants';
+
+export const EmbedUrl = ({ setShowOpenUrl }) => {
+  if (!window.CropTarget) {
+    return null;
+  }
+
+  return (
+    <Dropdown.Item
+      onClick={() => {
+        setShowOpenUrl(true);
+      }}
+      data-testid="embed_url_btn"
+    >
+      <ViewIcon />
+      <Text variant="sm" css={{ ml: '$4' }}>
+        Embed URL
+      </Text>
+    </Dropdown.Item>
+  );
+};
+
+export function EmbedUrlModal({ onOpenChange }) {
+  const [embedConfig, setEmbedConfig] = useSetAppDataByKey(APP_DATA.embedConfig);
+  const [url, setUrl] = useState(embedConfig?.url || '');
+
+  const isAnythingEmbedded = !!embedConfig?.url;
+  const isModifying = isAnythingEmbedded && url && url !== embedConfig.url;
+
+  return (
+    <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
+      <DialogContent title="Embed URL" Icon={ViewIcon}>
+        <DialogInput title="URL" value={url} onChange={setUrl} placeholder="https://www.tldraw.com/" type="url" />
+        <DialogRow>
+          <Text>
+            Embed a url and share with everyone in the room. Ensure that you're sharing the current tab when the prompt
+            opens. Note that not all websites support being embedded.
+          </Text>
+        </DialogRow>
+        <DialogRow justify="end">
+          {isAnythingEmbedded ? (
+            <>
+              <Button
+                variant="primary"
+                type="submit"
+                disabled={!isModifying}
+                onClick={() => {
+                  setEmbedConfig({ url, shareScreen: embedConfig.shareScreen });
+                  onOpenChange(false);
+                }}
+                data-testid="embed_url_btn"
+                css={{ mr: '$4' }}
+              >
+                Update Embed
+              </Button>
+              <Button
+                variant="danger"
+                type="submit"
+                onClick={() => {
+                  setEmbedConfig({ url: '' });
+                  onOpenChange(false);
+                }}
+                data-testid="embed_url_btn"
+              >
+                Stop Embed
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button
+                variant="primary"
+                type="submit"
+                disabled={!url.trim()}
+                onClick={() => {
+                  setEmbedConfig({ url });
+                  onOpenChange(false);
+                }}
+                data-testid="embed_url_btn"
+                css={{ mr: '$4' }}
+              >
+                Just Embed
+              </Button>
+              <Button
+                variant="primary"
+                type="submit"
+                disabled={!url.trim()}
+                onClick={() => {
+                  setEmbedConfig({ url, shareScreen: true });
+                  onOpenChange(false);
+                }}
+                data-testid="embed_url_btn"
+              >
+                Embed and Share
+              </Button>
+            </>
+          )}
+        </DialogRow>
+      </DialogContent>
+    </Dialog.Root>
+  );
+}

package/src/Prebuilt/components/MoreSettings/FullScreenItem.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ExpandIcon } from '@100mslive/react-icons';
+import { Dropdown, Text } from '../../../';
+import { useIsFeatureEnabled } from '../hooks/useFeatures';
+import { useFullscreen } from '../hooks/useFullscreen';
+import { FEATURE_LIST } from '../../common/constants';
+
+export const FullScreenItem = () => {
+  const { allowed, isFullscreen, toggleFullscreen } = useFullscreen();
+  const isFullscreenEnabled = useIsFeatureEnabled(FEATURE_LIST.FULLSCREEN);
+
+  if (!isFullscreenEnabled || !allowed) {
+    return null;
+  }
+
+  return (
+    <Dropdown.Item
+      onClick={() => {
+        toggleFullscreen();
+      }}
+      data-testid="full_screen_btn"
+    >
+      <ExpandIcon />
+      <Text variant="sm" css={{ ml: '$4' }}>
+        {isFullscreen ? 'Exit ' : 'Go '}Fullscreen
+      </Text>
+    </Dropdown.Item>
+  );
+};

package/src/Prebuilt/components/MoreSettings/MoreSettings.jsx

@@ -0,0 +1,225 @@
+import React, { Fragment, useState } from 'react';
+import { useMedia } from 'react-use';
+import Hls from 'hls.js';
+import {
+  selectAppData,
+  selectIsAllowedToPublish,
+  selectLocalPeerID,
+  selectLocalPeerRoleName,
+  selectPermissions,
+  useHMSActions,
+  useHMSStore,
+  useRecordingStreaming,
+} from '@100mslive/react-sdk';
+import {
+  ChangeRoleIcon,
+  CheckIcon,
+  InfoIcon,
+  MicOffIcon,
+  PencilIcon,
+  RecordIcon,
+  SettingsIcon,
+  VerticalMenuIcon,
+} from '@100mslive/react-icons';
+import { Box, Checkbox, config as cssConfig, Dropdown, Flex, Text, Tooltip } from '../../../';
+import IconButton from '../../IconButton';
+import { RoleChangeModal } from '../RoleChangeModal';
+import SettingsModal from '../Settings/SettingsModal';
+import StartRecording from '../Settings/StartRecording';
+import { StatsForNerds } from '../StatsForNerds';
+import { BulkRoleChangeModal } from './BulkRoleChangeModal';
+import { ChangeNameModal } from './ChangeNameModal';
+import { ChangeSelfRole } from './ChangeSelfRole';
+import { EmbedUrl, EmbedUrlModal } from './EmbedUrl';
+import { FullScreenItem } from './FullScreenItem';
+import { MuteAllModal } from './MuteAllModal';
+import { useDropdownList } from '../hooks/useDropdownList';
+import { useIsFeatureEnabled } from '../hooks/useFeatures';
+import { FeatureFlags } from '../../services/FeatureFlags';
+import { APP_DATA, FEATURE_LIST, isAndroid, isIOS, isMacOS } from '../../common/constants';
+
+const isMobileOS = isAndroid || isIOS;
+
+const MODALS = {
+  CHANGE_NAME: 'changeName',
+  SELF_ROLE_CHANGE: 'selfRoleChange',
+  MORE_SETTINGS: 'moreSettings',
+  START_RECORDING: 'startRecording',
+  DEVICE_SETTINGS: 'deviceSettings',
+  STATS_FOR_NERDS: 'statsForNerds',
+  BULK_ROLE_CHANGE: 'bulkRoleChange',
+  MUTE_ALL: 'muteAll',
+  EMBED_URL: 'embedUrl',
+};
+
+export const MoreSettings = () => {
+  const permissions = useHMSStore(selectPermissions);
+  const isAllowedToPublish = useHMSStore(selectIsAllowedToPublish);
+  const localPeerId = useHMSStore(selectLocalPeerID);
+  const localPeerRole = useHMSStore(selectLocalPeerRoleName);
+  const hmsActions = useHMSActions();
+  const enablHlsStats = useHMSStore(selectAppData(APP_DATA.hlsStats));
+  const isMobile = useMedia(cssConfig.media.md);
+  const { isBrowserRecordingOn } = useRecordingStreaming();
+  const isChangeNameEnabled = useIsFeatureEnabled(FEATURE_LIST.CHANGE_NAME);
+  const isEmbedEnabled = useIsFeatureEnabled(FEATURE_LIST.EMBED_URL);
+  const isSFNEnabled = useIsFeatureEnabled(FEATURE_LIST.STARTS_FOR_NERDS);
+  const [openModals, setOpenModals] = useState(new Set());
+  useDropdownList({ open: openModals.size > 0, name: 'MoreSettings' });
+
+  const updateState = (modalName, value) => {
+    setOpenModals(modals => {
+      const copy = new Set(modals);
+      if (value) {
+        copy.add(modalName);
+      } else {
+        copy.delete(modalName);
+      }
+      return copy;
+    });
+  };
+
+  return (
+    <Fragment>
+      <Dropdown.Root
+        open={openModals.has(MODALS.MORE_SETTINGS)}
+        onOpenChange={value => updateState(MODALS.MORE_SETTINGS, value)}
+      >
+        <Dropdown.Trigger asChild data-testid="more_settings_btn">
+          <IconButton>
+            <Tooltip title="More options">
+              <Box>
+                <VerticalMenuIcon />
+              </Box>
+            </Tooltip>
+          </IconButton>
+        </Dropdown.Trigger>
+
+        <Dropdown.Content
+          sideOffset={5}
+          align="center"
+          css={{
+            maxHeight: '$96',
+            '@md': { w: '$64' },
+            "div[role='separator']:first-child": {
+              display: 'none',
+            },
+          }}
+        >
+          {isMobile && permissions?.browserRecording ? (
+            <>
+              <Dropdown.Item onClick={() => updateState(MODALS.START_RECORDING, true)}>
+                <RecordIcon />
+                <Text variant="sm" css={{ ml: '$4' }}>
+                  {isBrowserRecordingOn ? 'Stop' : 'Start'} Recording
+                </Text>
+              </Dropdown.Item>
+              <Dropdown.ItemSeparator />
+            </>
+          ) : null}
+          {isChangeNameEnabled && (
+            <Dropdown.Item onClick={() => updateState(MODALS.CHANGE_NAME, true)} data-testid="change_name_btn">
+              <PencilIcon />
+              <Text variant="sm" css={{ ml: '$4' }}>
+                Change Name
+              </Text>
+            </Dropdown.Item>
+          )}
+          <ChangeSelfRole onClick={() => updateState(MODALS.SELF_ROLE_CHANGE, true)} />
+          {permissions?.changeRole && (
+            <Dropdown.Item
+              onClick={() => updateState(MODALS.BULK_ROLE_CHANGE, true)}
+              data-testid="bulk_role_change_btn"
+            >
+              <ChangeRoleIcon />
+              <Text variant="sm" css={{ ml: '$4' }}>
+                Bulk Role Change
+              </Text>
+            </Dropdown.Item>
+          )}
+          <FullScreenItem />
+          {isAllowedToPublish.screen && isEmbedEnabled && (
+            <EmbedUrl setShowOpenUrl={() => updateState(MODALS.EMBED_URL, true)} />
+          )}
+          {permissions.mute && (
+            <Dropdown.Item onClick={() => updateState(MODALS.MUTE_ALL, true)} data-testid="mute_all_btn">
+              <MicOffIcon />
+              <Text variant="sm" css={{ ml: '$4' }}>
+                Mute All
+              </Text>
+            </Dropdown.Item>
+          )}
+          <Dropdown.ItemSeparator />
+          <Dropdown.Item onClick={() => updateState(MODALS.DEVICE_SETTINGS, true)} data-testid="device_settings_btn">
+            <SettingsIcon />
+            <Text variant="sm" css={{ ml: '$4' }}>
+              Settings
+            </Text>
+          </Dropdown.Item>
+          {FeatureFlags.enableStatsForNerds &&
+            isSFNEnabled &&
+            (localPeerRole === 'hls-viewer' ? (
+              Hls.isSupported() ? (
+                <Dropdown.Item
+                  onClick={() => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats)}
+                  data-testid="hls_stats"
+                >
+                  <Checkbox.Root
+                    css={{ margin: '$2' }}
+                    checked={enablHlsStats}
+                    onCheckedChange={() => hmsActions.setAppData(APP_DATA.hlsStats, !enablHlsStats)}
+                  >
+                    <Checkbox.Indicator>
+                      <CheckIcon width={16} height={16} />
+                    </Checkbox.Indicator>
+                  </Checkbox.Root>
+                  <Flex justify="between" css={{ width: '100%' }}>
+                    <Text variant="sm" css={{ ml: '$4' }}>
+                      Show HLS Stats
+                    </Text>
+                    {!isMobileOS ? (
+                      <Text variant="sm" css={{ ml: '$4' }}>
+                        {`${isMacOS ? '⌘' : 'ctrl'} + ]`}
+                      </Text>
+                    ) : null}
+                  </Flex>
+                </Dropdown.Item>
+              ) : null
+            ) : (
+              <Dropdown.Item
+                onClick={() => updateState(MODALS.STATS_FOR_NERDS, true)}
+                data-testid="stats_for_nreds_btn"
+              >
+                <InfoIcon />
+                <Text variant="sm" css={{ ml: '$4' }}>
+                  Stats for Nerds
+                </Text>
+              </Dropdown.Item>
+            ))}
+        </Dropdown.Content>
+      </Dropdown.Root>
+      {openModals.has(MODALS.BULK_ROLE_CHANGE) && (
+        <BulkRoleChangeModal onOpenChange={value => updateState(MODALS.BULK_ROLE_CHANGE, value)} />
+      )}
+      {openModals.has(MODALS.MUTE_ALL) && <MuteAllModal onOpenChange={value => updateState(MODALS.MUTE_ALL, value)} />}
+      {openModals.has(MODALS.CHANGE_NAME) && (
+        <ChangeNameModal onOpenChange={value => updateState(MODALS.CHANGE_NAME, value)} />
+      )}
+      {openModals.has(MODALS.DEVICE_SETTINGS) && (
+        <SettingsModal open onOpenChange={value => updateState(MODALS.DEVICE_SETTINGS, value)} />
+      )}
+      {FeatureFlags.enableStatsForNerds && openModals.has(MODALS.STATS_FOR_NERDS) && (
+        <StatsForNerds open onOpenChange={value => updateState(MODALS.STATS_FOR_NERDS, value)} />
+      )}
+      {openModals.has(MODALS.SELF_ROLE_CHANGE) && (
+        <RoleChangeModal peerId={localPeerId} onOpenChange={value => updateState(MODALS.SELF_ROLE_CHANGE, value)} />
+      )}
+      {openModals.has(MODALS.START_RECORDING) && (
+        <StartRecording open onOpenChange={value => updateState(MODALS.START_RECORDING, value)} />
+      )}
+      {openModals.has(MODALS.EMBED_URL) && (
+        <EmbedUrlModal onOpenChange={value => updateState(MODALS.EMBED_URL, value)} />
+      )}
+    </Fragment>
+  );
+};

package/src/Prebuilt/components/MoreSettings/MuteAllModal.jsx

@@ -0,0 +1,90 @@
+import React, { useCallback, useState } from 'react';
+import { useHMSActions } from '@100mslive/react-sdk';
+import { MicOffIcon } from '@100mslive/react-icons';
+import { Button, Dialog, Flex, Label, RadioGroup, Text } from '../../../';
+import { DialogContent, DialogRow, DialogSelect } from '../../primitives/DialogContent';
+import { useFilteredRoles } from '../../common/hooks';
+
+const trackSourceOptions = [
+  { label: 'All Track Sources', value: '' },
+  { label: 'regular', value: 'regular' },
+  { label: 'screen', value: 'screen' },
+  { label: 'audioplaylist', value: 'audioplaylist' },
+  { label: 'videoplaylist', value: 'videoplaylist' },
+];
+const trackTypeOptions = [
+  { label: 'All Track Types', value: '' },
+  { label: 'audio', value: 'audio' },
+  { label: 'video', value: 'video' },
+];
+export const MuteAllModal = ({ onOpenChange }) => {
+  const roles = useFilteredRoles();
+  const hmsActions = useHMSActions();
+  const [enabled, setEnabled] = useState(false);
+  const [trackType, setTrackType] = useState();
+  const [selectedRole, setRole] = useState();
+  const [selectedSource, setSource] = useState();
+
+  const muteAll = useCallback(async () => {
+    await hmsActions.setRemoteTracksEnabled({
+      enabled: enabled,
+      type: trackType,
+      source: selectedSource,
+      roles: selectedRole ? [selectedRole] : undefined,
+    });
+    onOpenChange(false);
+  }, [selectedRole, enabled, trackType, selectedSource, hmsActions, onOpenChange]);
+
+  return (
+    <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
+      <DialogContent title="Mute/Unmute Remote Tracks" Icon={MicOffIcon}>
+        <DialogSelect
+          title="Role"
+          options={[{ label: 'All Roles', value: '' }, ...roles.map(role => ({ label: role, value: role }))]}
+          selected={selectedRole}
+          keyField="value"
+          labelField="label"
+          onChange={setRole}
+        />
+        <DialogSelect
+          title="Track type"
+          options={trackTypeOptions}
+          selected={trackType}
+          onChange={setTrackType}
+          keyField="value"
+          labelField="label"
+        />
+        <DialogSelect
+          title="Track source"
+          options={trackSourceOptions}
+          selected={selectedSource}
+          onChange={setSource}
+          keyField="value"
+          labelField="label"
+        />
+        <DialogRow>
+          <Text variant="md">Track status</Text>
+          <RadioGroup.Root value={enabled} onValueChange={setEnabled}>
+            <Flex align="center" css={{ mr: '$8' }}>
+              <RadioGroup.Item value={false} id="trackDisableRadio" css={{ mr: '$4' }}>
+                <RadioGroup.Indicator />
+              </RadioGroup.Item>
+              <Label htmlFor="trackDisableRadio">Mute</Label>
+            </Flex>
+            <Flex align="center" css={{ cursor: 'pointer' }}>
+              <RadioGroup.Item value={true} id="trackEnableRadio" css={{ mr: '$4' }}>
+                <RadioGroup.Indicator />
+              </RadioGroup.Item>
+              <Label htmlFor="trackEnableRadio">Request Unmute</Label>
+            </Flex>
+          </RadioGroup.Root>
+        </DialogRow>
+        <DialogRow justify="end">
+          <Button variant="primary" onClick={muteAll}>
+            Apply
+          </Button>
+        </DialogRow>
+      </DialogContent>
+    </Dialog.Root>
+  );
+};

package/src/Prebuilt/components/Notifications/AutoplayBlockedModal.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { useAutoplayError } from '@100mslive/react-sdk';
+import { Button, Dialog, Text } from '../../../';
+import { DialogContent, DialogRow } from '../../primitives/DialogContent';
+
+export function AutoplayBlockedModal() {
+  const { error, resetError, unblockAudio } = useAutoplayError();
+  return (
+    <Dialog.Root
+      open={!!error}
+      onOpenChange={value => {
+        if (!value) {
+          unblockAudio();
+        }
+        resetError();
+      }}
+    >
+      <DialogContent title="Permission Error" closeable={false}>
+        <DialogRow>
+          <Text variant="md">
+            The browser wants us to get a confirmation for playing the Audio. Please allow audio to proceed.
+          </Text>
+        </DialogRow>
+        <DialogRow justify="end">
+          <Button
+            variant="primary"
+            onClick={() => {
+              unblockAudio();
+              resetError();
+            }}
+          >
+            Allow Audio
+          </Button>
+        </DialogRow>
+      </DialogContent>
+    </Dialog.Root>
+  );
+}

package/src/Prebuilt/components/Notifications/InitErrorModal.jsx

@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from 'react';
+import { Text } from '../../../';
+import { ErrorDialog } from '../../primitives/DialogContent';
+
+export const InitErrorModal = ({ notification }) => {
+  const [showModal, setShowModal] = useState(false);
+  const [info, setInfo] = useState({ title: 'Init Error', description: '' });
+
+  useEffect(() => {
+    const data = notification?.data;
+    if (!data || data.action !== 'INIT') {
+      return;
+    }
+    let description;
+    let title;
+    if (data.description.includes('role is invalid')) {
+      description = 'This role does not exist for the given room. Try again with a valid role.';
+      title = 'Invalid Role';
+    } else if (data.description.includes('room is not active')) {
+      title = 'Room is disabled';
+      description =
+        'This room is disabled and cannot be joined. To enable the room, use the 100ms dashboard or the API.';
+    } else {
+      description = data.description;
+      title = 'Init Error';
+    }
+    setInfo({ title, description });
+    setShowModal(true);
+  }, [notification]);
+
+  return (
+    <ErrorDialog open={showModal} onOpenChange={setShowModal} title={info.title}>
+      <Text variant="sm" css={{ wordBreak: 'break-word' }}>
+        {info.description} <br />
+        Current URL - {window.location.href}
+      </Text>
+    </ErrorDialog>
+  );
+};

package/src/Prebuilt/components/Notifications/MessageNotifications.jsx

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
+import { ToastBatcher } from '../Toast/ToastBatcher';
+import { useIsHeadless, useSubscribedNotifications } from '../AppData/useUISettings';
+import { useIsFeatureEnabled } from '../hooks/useFeatures';
+import { FEATURE_LIST, SUBSCRIBED_NOTIFICATIONS } from '../../common/constants';
+
+export const MessageNotifications = () => {
+  const notification = useHMSNotifications(HMSNotificationTypes.NEW_MESSAGE);
+  const isChatEnabled = useIsFeatureEnabled(FEATURE_LIST.CHAT);
+  const isNewMessageSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.NEW_MESSAGE);
+  const isHeadless = useIsHeadless();
+  useEffect(() => {
+    if (!notification) {
+      return;
+    }
+    console.debug(`[${notification.type}]`, notification);
+    if (!isNewMessageSubscribed || notification.data?.ignored || !isChatEnabled) {
+      return;
+    }
+    ToastBatcher.showToast({ notification });
+  }, [notification, isNewMessageSubscribed, isHeadless, isChatEnabled]);
+
+  return null;
+};