fix: crash, spacing

packages/roomkit-react/src/Prebuilt/common/hooks.js

@@ -88,7 +88,7 @@ export const useParticipants = params => {
     participantList = participantList.filter(peer => peer.roleName === params.role);
   }
   if (params?.search) {
-    const search = params.search.toLowerCase();
+    const search = params.search;
     // Removed peer.roleName?.toLowerCase().includes(search)
     participantList = participantList.filter(peer => peer.name.toLowerCase().includes(search));
   }

packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.jsx

@@ -52,7 +52,7 @@ export const ParticipantList = () => {
       if (!filterValue) {
         filterValue = {};
       }
-      filterValue.search = value;
+      filterValue.search = value.toLowerCase();
       return { ...filterValue };
     });
   }, []);
@@ -139,6 +139,10 @@ const VirtualizedParticipants = ({
       css={{
         gap: '$8',
         mt: '$4',
+        maxHeight: '100%',
+        overflowY: 'auto',
+        overflowX: 'hidden',
+        pr: '$3',
       }}
     >
       <RoleAccordion

packages/roomkit-react/src/Prebuilt/components/Footer/RoleAccordion.jsx

@@ -6,7 +6,7 @@ import { Box, Flex } from '../../../Layout';
 import { Participant } from './ParticipantList';
 import { getFormattedCount } from '../../common/utils';
 
-const ROW_HEIGHT = 54;
+const ROW_HEIGHT = 50;
 
 function itemKey(index, data) {
   return data.peerList[index].id;
@@ -39,7 +39,7 @@ export const RoleAccordion = ({
   }
 
   return (
-    <Flex direction="column" css={{ w: '100%' }} ref={ref}>
+    <Flex direction="column" css={{ flexGrow: 1 }} ref={ref}>
       <Accordion.Root
         type="single"
         collapsible

packages/roomkit-react/src/Prebuilt/components/SecondaryTiles.tsx

@@ -14,7 +14,9 @@ export const SecondaryTiles = ({ peers, onPageChange, onPageSize }: LayoutProps)
   const pageSize = pagesWithTiles[0]?.length || 0;
 
   useEffect(() => {
-    onPageSize?.(pageSize);
+    if (pageSize > 0) {
+      onPageSize?.(pageSize + 1); // include screenshare peer as well for page size
+    }
   }, [pageSize, onPageSize]);
 
   return (

packages/roomkit-react/src/Prebuilt/components/Toast/ToastConfig.jsx

@@ -34,8 +34,11 @@ const HandRaiseAction = React.forwardRef(({ id = '', isSingleHandRaise = true },
   const isParticipantsOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.PARTICIPANTS);
   const peer = useHMSStore(selectPeerByID(id));
   const layout = useRoomLayout();
-  const { bring_to_stage_label, on_stage_role, off_stage_roles } =
-    layout?.screens?.conferencing?.default?.elements.on_stage_exp || {};
+  const {
+    bring_to_stage_label,
+    on_stage_role,
+    off_stage_roles = [],
+  } = layout?.screens?.conferencing?.default?.elements.on_stage_exp || {};
 
   const onClickHandler = useCallback(() => {
     if (isSingleHandRaise) {

packages/roomkit-react/src/Prebuilt/components/VideoLayouts/EqualProminence.tsx

@@ -33,7 +33,9 @@ export function EqualProminence({ peers, onPageChange, onPageSize }: LayoutProps
   const pageSize = pagesWithTiles[0]?.length || 0;
 
   useEffect(() => {
-    onPageSize?.(pageSize);
+    if (pageSize > 0) {
+      onPageSize?.(pageSize);
+    }
   }, [pageSize, onPageSize]);
 
   return (

packages/roomkit-react/src/Prebuilt/components/VideoLayouts/RoleProminence.tsx

@@ -25,7 +25,9 @@ export function RoleProminence({ peers, onPageChange, onPageSize }: LayoutProps)
   const pageSize = pagesWithTiles[0]?.length || 0;
 
   useEffect(() => {
-    onPageSize?.(pageSize);
+    if (pageSize > 0) {
+      onPageSize?.(pageSize);
+    }
   }, [pageSize, onPageSize]);
 
   return (

packages/roomkit-react/src/Prebuilt/components/pdfAnnotator/pdfFileOptions.jsx

@@ -1,17 +1,12 @@
 import React, { useState } from 'react';
-import { Dialog, Flex, HorizontalDivider, Input, Text } from '../../../';
-import { DialogInputFile, DialogRow } from '../../primitives/DialogContent';
-import { PdfErrorView } from './pdfErrorView';
+import { Dialog, Flex } from '../../../';
+import { DialogInputFile } from '../../primitives/DialogContent';
 import { PDFHeader } from './pdfHeader';
-import { PDFInfo } from './pdfInfo';
 import { SubmitPDF } from './submitPdf';
 import { UploadedFile } from './uploadedFile';
 
 export function PDFFileOptions({ onOpenChange }) {
-  const [isPDFUrlValid, setIsPDFUrlValid] = useState(true);
-  const [isValidateProgress, setIsValidateProgress] = useState(false);
   const [pdfFile, setPDFFile] = useState(null);
-  const [pdfURL, setPDFURL] = useState('');
 
   return !pdfFile ? (
     <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
@@ -35,75 +30,13 @@ export function PDFFileOptions({ onOpenChange }) {
               type="file"
               accept=".pdf"
             />
-            <DialogRow
-              css={{
-                m: '$10 0',
-              }}
-            >
-              <HorizontalDivider
-                css={{
-                  mr: '$4',
-                }}
-              />
-              <Text
-                variant="tiny"
-                css={{
-                  color: '$on_surface_low',
-                }}
-              >
-                OR
-              </Text>
-              <HorizontalDivider
-                css={{
-                  ml: '$4',
-                }}
-              />
-            </DialogRow>
-            <Text
-              variant="sm"
-              css={{
-                py: '$2',
-              }}
-            >
-              Import from URL
-            </Text>
-            <Input
-              css={{ w: '100%', mb: '$10' }}
-              value={pdfURL}
-              onFocus={() => {
-                setIsPDFUrlValid(true);
-                setIsValidateProgress(false);
-              }}
-              onChange={e => {
-                setPDFURL(e.target.value);
-              }}
-              placeholder="Paste PDF URL"
-              type="text"
-              error={!isPDFUrlValid}
-            />
-            {!isPDFUrlValid && <PdfErrorView isPDFUrlValid={isPDFUrlValid} />}
-            <PDFInfo />
-            <SubmitPDF
-              pdfFile={pdfFile}
-              pdfURL={pdfURL}
-              isValidateProgress={isValidateProgress}
-              setIsPDFUrlValid={setIsPDFUrlValid}
-              setIsValidateProgress={setIsValidateProgress}
-              onOpenChange={onOpenChange}
-            />
+
+            <SubmitPDF pdfFile={pdfFile} onOpenChange={onOpenChange} />
           </Flex>
         </Dialog.Content>
       </Dialog.Portal>
     </Dialog.Root>
   ) : (
-    <UploadedFile
-      pdfFile={pdfFile}
-      pdfURL={pdfURL}
-      isValidateProgress={isValidateProgress}
-      setPDFFile={setPDFFile}
-      setIsPDFUrlValid={setIsPDFUrlValid}
-      setIsValidateProgress={setIsValidateProgress}
-      onOpenChange={onOpenChange}
-    />
+    <UploadedFile pdfFile={pdfFile} setPDFFile={setPDFFile} onOpenChange={onOpenChange} />
   );
 }

packages/roomkit-react/src/Prebuilt/components/pdfAnnotator/submitPdf.jsx

@@ -1,49 +1,11 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import { Button, Flex } from '../../../';
 import { useSetAppDataByKey } from '../AppData/useUISettings';
 import { APP_DATA } from '../../common/constants';
 
-export const SubmitPDF = ({
-  pdfFile,
-  pdfURL,
-  isValidateProgress,
-  setIsPDFUrlValid,
-  setIsValidateProgress,
-  onOpenChange,
-}) => {
+export const SubmitPDF = ({ pdfFile, onOpenChange }) => {
   const [, setPDFConfig] = useSetAppDataByKey(APP_DATA.pdfConfig);
 
-  const isValidPDF = useCallback(
-    pdfURL => {
-      const extension = pdfURL.split('.').pop().toLowerCase();
-      setIsValidateProgress(true);
-      if (extension === 'pdf') {
-        setIsPDFUrlValid(true);
-        setIsValidateProgress(false);
-        setPDFConfig({ state: true, file: pdfFile, url: pdfURL });
-        onOpenChange(false);
-      }
-
-      fetch(pdfURL, { method: 'HEAD' })
-        .then(response => response.headers.get('content-type'))
-        .then(contentType => {
-          if (contentType === 'application/pdf') {
-            setIsPDFUrlValid(true);
-            setIsValidateProgress(false);
-            setPDFConfig({ state: true, file: pdfFile, url: pdfURL });
-            onOpenChange(false);
-          } else {
-            setIsPDFUrlValid(false);
-            setIsValidateProgress(false);
-          }
-        })
-        .catch(() => {
-          setIsPDFUrlValid(false);
-          setIsValidateProgress(false);
-        });
-    },
-    [onOpenChange, pdfFile, setIsPDFUrlValid, setIsValidateProgress, setPDFConfig],
-  );
   return (
     <Flex
       direction="row"
@@ -69,14 +31,11 @@ export const SubmitPDF = ({
         type="submit"
         onClick={() => {
           if (pdfFile) {
-            setPDFConfig({ state: true, file: pdfFile, url: pdfURL });
+            setPDFConfig({ state: true, file: pdfFile });
             onOpenChange(false);
-          } else if (pdfURL) {
-            isValidPDF(pdfURL);
           }
         }}
-        disabled={!pdfFile && !pdfURL}
-        loading={isValidateProgress}
+        disabled={!pdfFile}
         data-testid="share_pdf_btn"
         css={{
           w: '50%',

packages/roomkit-react/src/Prebuilt/components/pdfAnnotator/uploadedFile.jsx

@@ -6,15 +6,7 @@ import { PDFHeader } from './pdfHeader';
 import { PDFInfo } from './pdfInfo';
 import { SubmitPDF } from './submitPdf';
 
-export const UploadedFile = ({
-  pdfFile,
-  pdfURL,
-  isValidateProgress,
-  setPDFFile,
-  setIsPDFUrlValid,
-  setIsValidateProgress,
-  onOpenChange,
-}) => {
+export const UploadedFile = ({ pdfFile, setPDFFile, onOpenChange }) => {
   const [fileName, ext] = pdfFile.name.split('.');
   return (
     <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
@@ -70,14 +62,7 @@ export const UploadedFile = ({
               />
             </DialogRow>
             <PDFInfo />
-            <SubmitPDF
-              pdfFile={pdfFile}
-              pdfURL={pdfURL}
-              isValidateProgress={isValidateProgress}
-              setIsPDFUrlValid={setIsPDFUrlValid}
-              setIsValidateProgress={setIsValidateProgress}
-              onOpenChange={onOpenChange}
-            />
+            <SubmitPDF pdfFile={pdfFile} onOpenChange={onOpenChange} />
           </Flex>
         </Dialog.Content>
       </Dialog.Portal>

packages/roomkit-react/src/Prebuilt/layouts/SidePane.jsx

@@ -25,7 +25,7 @@ const SidePane = ({ css = {} }) => {
   } else if (sidepane === SIDE_PANE_OPTIONS.STREAMING) {
     ViewComponent = StreamingLanding;
   }
-  if (!ViewComponent && !activeScreensharePeerId) {
+  if (!ViewComponent && !trackId) {
     return null;
   }
 
@@ -39,6 +39,7 @@ const SidePane = ({ css = {} }) => {
         w: '$100',
         h: '100%',
         flexShrink: 0,
+        gap: '$4',
         '@md': { position: mwebStreamingChat ? 'absolute' : '', zIndex: 21 },
       }}
     >
@@ -58,6 +59,8 @@ const SidePane = ({ css = {} }) => {
             w: '$100',
             h: mwebStreamingChat ? '0' : '100%',
             p: '$10',
+            flex: '1 1 0',
+            minHeight: 0,
             maxHeight: mwebStreamingChat ? '300px' : 'unset',
             background: mwebStreamingChat
               ? 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 35.94%, rgba(0, 0, 0, 0.64) 100%)'