Update publish alpha

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

@@ -147,6 +147,19 @@ export const getPeerResponses = (questions, peerid, userid) => {
   );
 };
 
+export const getLastAttemptedIndex = (questions, peerid, userid = '') => {
+  const peerResponses = getPeerResponses(questions, peerid, userid) || [];
+  for (let i = 0; i < peerResponses.length; i++) {
+    // If another peer has attempted, undefined changes to an empty array
+    if (peerResponses[i] === undefined || peerResponses[i].length === 0) {
+      // Backend question index starts at 1
+      return i + 1;
+    }
+  }
+  // To indicate all have been attempted
+  return questions.length + 1;
+};
+
 export const getPeerParticipationSummary = (poll, localPeerID, localCustomerUserID) => {
   let correctResponses = 0;
   let score = 0;

packages/roomkit-react/src/Prebuilt/components/Chat/ChatActions.tsx

@@ -53,7 +53,7 @@ export const ChatActions = ({
   sentByLocalPeer: boolean;
   isMobile: boolean;
   openSheet: boolean;
-  setOpenSheet: (value: boolean) => void;
+  setOpenSheet: (value: boolean, e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
 }) => {
   const { elements } = useRoomLayoutConferencingScreen();
   const { can_hide_message = false, can_block_user = false } = elements?.chat?.real_time_controls || {};
@@ -174,7 +174,7 @@ export const ChatActions = ({
   if (isMobile) {
     return (
       <Sheet.Root open={openSheet} onOpenChange={setOpenSheet}>
-        <Sheet.Content css={{ bg: '$surface_default', pb: '$14' }} onClick={() => setOpenSheet(false)}>
+        <Sheet.Content css={{ bg: '$surface_default', pb: '$14' }} onClick={e => setOpenSheet(false, e)}>
           <Sheet.Title
             css={{
               display: 'flex',
@@ -190,7 +190,7 @@ export const ChatActions = ({
             }}
           >
             Message options
-            <Sheet.Close css={{ color: '$on_surface_high' }} onClick={() => setOpenSheet(false)}>
+            <Sheet.Close css={{ color: '$on_surface_high' }} onClick={e => setOpenSheet(false, e)}>
               <CrossIcon />
             </Sheet.Close>
           </Sheet.Title>

packages/roomkit-react/src/Prebuilt/components/Chat/ChatBody.tsx

@@ -189,7 +189,7 @@ const ChatMessage = React.memo(
       roles: message.recipientRoles,
       receiver: message.recipientPeer,
     });
-    const [openSheet, setOpenSheet] = useState(false);
+    const [openSheet, setOpenSheetBare] = useState(false);
     const showPinAction = !!elements?.chat?.allow_pinning_messages;
     const showReply = message.sender !== selectedPeer.id && message.sender !== localPeerId && isPrivateChatEnabled;
     useLayoutEffect(() => {
@@ -198,6 +198,11 @@ const ChatMessage = React.memo(
       }
     }, [index, message.id]);
 
+    const setOpenSheet = (value: boolean, e?: React.MouseEvent<HTMLElement, MouseEvent>) => {
+      e?.stopPropagation();
+      setOpenSheetBare(value);
+    };
+
     return (
       <Box
         css={{
@@ -228,9 +233,9 @@ const ChatMessage = React.memo(
             },
           }}
           data-testid="chat_msg"
-          onClick={() => {
+          onClick={e => {
             if (isMobile) {
-              setOpenSheet(true);
+              setOpenSheet(true, e);
             }
           }}
         >
@@ -321,8 +326,7 @@ const ChatMessage = React.memo(
               color: isOverlay ? '#FFF' : '$on_surface_high',
             }}
             onClick={e => {
-              e.stopPropagation();
-              setOpenSheet(true);
+              setOpenSheet(true, e);
             }}
           >
             <AnnotisedMessage message={message.message} />

packages/roomkit-react/src/Prebuilt/components/Polls/Voting/LeaderboardEntry.tsx

@@ -24,7 +24,7 @@ export const LeaderboardEntry = ({
   duration: number;
 }) => {
   return (
-    <Flex align="center" justify="between" css={{ my: '$4' }}>
+    <Flex align="center" justify="between" css={{ my: '$8' }}>
       <Flex align="center" css={{ gap: '$6' }}>
         <Flex
           align="center"

packages/roomkit-react/src/Prebuilt/components/Polls/Voting/PeerParticipationSummary.tsx

@@ -38,7 +38,7 @@ export const PeerParticipationSummary = ({ quiz }: { quiz: HMSPoll }) => {
       ]
     : [
         { title: 'Your rank', value: peerEntry?.position || '-' },
-        { title: 'Points', value: peerEntry?.score },
+        { title: 'Points', value: peerEntry?.score || 0 },
         // Time in ms
         { title: 'Time Taken', value: getFormattedTime(peerEntry?.duration) },
         {

packages/roomkit-react/src/Prebuilt/components/Polls/Voting/QuestionCard.jsx

@@ -73,11 +73,6 @@ export const QuestionCard = ({
       },
     ]);
     startTime.current = Date.now();
-
-    if (isQuiz && index !== totalQuestions) {
-      setSingleOptionAnswer(undefined);
-      setMultipleOptionAnswer(new Set());
-    }
   }, [
     isValidVote,
     actions.interactivityCenter,
@@ -118,8 +113,8 @@ export const QuestionCard = ({
             gap: '$4',
           }}
         >
-          {respondedToQuiz && isCorrectAnswer && pollEnded ? <CheckCircleIcon height={20} width={20} /> : null}
-          {respondedToQuiz && !isCorrectAnswer && pollEnded ? <CrossCircleIcon height={20} width={20} /> : null}
+          {respondedToQuiz && isCorrectAnswer && pollEnded ? <CheckCircleIcon height={16} width={16} /> : null}
+          {respondedToQuiz && !isCorrectAnswer && pollEnded ? <CrossCircleIcon height={16} width={16} /> : null}
           QUESTION {index} OF {totalQuestions}: {type.toUpperCase()}
         </Text>
       </Flex>
@@ -152,7 +147,6 @@ export const QuestionCard = ({
             showVoteCount={showVoteCount}
             localPeerResponse={localPeerResponse}
             isStopped={pollState === 'stopped'}
-            answer={singleOptionAnswer}
           />
         ) : null}
 

packages/roomkit-react/src/Prebuilt/components/Polls/Voting/StatisticBox.tsx

@@ -3,7 +3,7 @@ import { Box } from '../../../../Layout';
 import { Text } from '../../../../Text';
 
 export const StatisticBox = ({ title, value = 0 }: { title: string; value: string | number | undefined }) => {
-  if (!value) {
+  if (!value && !(typeof value === 'number')) {
     return <></>;
   }
   return (

packages/roomkit-react/src/Prebuilt/components/Polls/Voting/TimedVoting.tsx

@@ -1,33 +1,44 @@
 import React, { useState } from 'react';
-import { HMSPoll } from '@100mslive/react-sdk';
+import { HMSPoll, selectLocalPeerID, useHMSStore } from '@100mslive/react-sdk';
 // @ts-ignore
 import { QuestionCard } from './QuestionCard';
+// @ts-ignore
+import { getLastAttemptedIndex } from '../../../common/utils';
 
 export const TimedView = ({ poll }: { poll: HMSPoll }) => {
-  // Backend question index starts at 1
-  const [currentIndex, setCurrentIndex] = useState(1);
+  const localPeerId = useHMSStore(selectLocalPeerID);
+  const lastAttemptedIndex = getLastAttemptedIndex(poll.questions, localPeerId, '');
+  const [currentIndex, setCurrentIndex] = useState(lastAttemptedIndex);
   const activeQuestion = poll.questions?.find(question => question.index === currentIndex);
+  const attemptedAll = poll.questions?.length === lastAttemptedIndex - 1;
 
-  if (!activeQuestion) {
+  if (!activeQuestion || !poll.questions?.length) {
     return null;
   }
 
   return (
-    <QuestionCard
-      pollID={poll.id}
-      isQuiz={poll.type === 'quiz'}
-      startedBy={poll.startedBy}
-      pollState={poll.state}
-      index={activeQuestion.index}
-      text={activeQuestion.text}
-      type={activeQuestion.type}
-      result={activeQuestion?.result}
-      totalQuestions={poll.questions?.length || 0}
-      options={activeQuestion.options}
-      responses={activeQuestion.responses}
-      answer={activeQuestion.answer}
-      setCurrentIndex={setCurrentIndex}
-      rolesThatCanViewResponses={poll.rolesThatCanViewResponses}
-    />
+    <>
+      {poll.questions.map(question => {
+        return attemptedAll || activeQuestion.index === question.index ? (
+          <QuestionCard
+            key={question.index}
+            pollID={poll.id}
+            isQuiz={poll.type === 'quiz'}
+            startedBy={poll.startedBy}
+            pollState={poll.state}
+            index={question.index}
+            text={question.text}
+            type={question.type}
+            result={question?.result}
+            totalQuestions={poll.questions?.length || 0}
+            options={question.options}
+            responses={question.responses}
+            answer={question.answer}
+            setCurrentIndex={setCurrentIndex}
+            rolesThatCanViewResponses={poll.rolesThatCanViewResponses}
+          />
+        ) : null;
+      })}
+    </>
   );
 };

packages/roomkit-react/src/Prebuilt/components/Polls/Voting/Voting.tsx

@@ -68,30 +68,29 @@ export const Voting = ({ id, toggleVoting }: { id: string; toggleVoting: () => v
         </Box>
       </Flex>
 
-      <Flex direction="column" css={{ p: '$8 $10', overflowY: 'auto' }}>
+      <Flex direction="column" css={{ p: '$8 $10', flex: '1 1 0', overflowY: 'auto' }}>
         {poll.state === 'started' ? (
           <Text css={{ color: '$on_surface_medium', fontWeight: '$semiBold' }}>
             {pollCreatorName || 'Participant'} started a {poll.type}
           </Text>
         ) : null}
 
         {showSingleView ? <TimedView poll={poll} /> : <StandardView poll={poll} />}
-
+      </Flex>
+      <Flex
+        css={{ w: '100%', justifyContent: 'end', alignItems: 'center', p: '$8', borderTop: '1px solid $border_bright' }}
+      >
         {poll.state === 'started' && canEndActivity && (
           <Button
             variant="danger"
-            css={{ fontWeight: '$semiBold', w: 'max-content', ml: 'auto', mt: '$8' }}
+            css={{ fontWeight: '$semiBold', w: 'max-content' }}
             onClick={() => actions.interactivityCenter.stopPoll(id)}
           >
             End {poll.type}
           </Button>
         )}
-
         {canViewLeaderboard ? (
-          <Button
-            css={{ fontWeight: '$semiBold', w: 'max-content', ml: 'auto', mt: '$8' }}
-            onClick={() => setPollView(POLL_VIEWS.RESULTS)}
-          >
+          <Button css={{ fontWeight: '$semiBold', w: 'max-content' }} onClick={() => setPollView(POLL_VIEWS.RESULTS)}>
             View Leaderboard
           </Button>
         ) : null}

packages/roomkit-react/src/Prebuilt/components/Polls/common/MultipleChoiceOptions.jsx

@@ -52,7 +52,7 @@ export const MultipleChoiceOptions = ({
 
             {isStopped && correctOptionIndexes?.includes(option.index) ? (
               <Flex css={{ color: '$on_surface_high' }}>
-                <CheckCircleIcon />
+                <CheckCircleIcon height={20} width={20} />
               </Flex>
             ) : null}
 
@@ -83,7 +83,7 @@ export const MultipleChoiceOptionInputs = ({ isQuiz, options, selectAnswer, hand
     <Flex direction="column" css={{ gap: '$md', w: '100%', mb: '$md' }}>
       {options.map((option, index) => {
         return (
-          <Flex align="center" key={index} css={{ w: '100%', gap: '$5' }}>
+          <Flex align="center" key={index} css={{ w: '100%', gap: '$4' }}>
             {isQuiz && (
               <Checkbox.Root
                 onCheckedChange={checked => selectAnswer(checked, index)}

packages/roomkit-react/src/Prebuilt/components/Polls/common/SingleChoiceOptions.jsx

@@ -17,14 +17,13 @@ export const SingleChoiceOptions = ({
   isStopped,
   isQuiz,
   localPeerResponse,
-  answer,
 }) => {
   return (
-    <RadioGroup.Root value={answer || null} onValueChange={value => setAnswer(value)}>
+    <RadioGroup.Root value={localPeerResponse?.option} onValueChange={value => setAnswer(value)}>
       <Flex direction="column" css={{ gap: '$md', w: '100%', mb: '$md' }}>
         {options.map(option => {
           return (
-            <Flex align="start" key={`${questionIndex}-${option.index}`} css={{ w: '100%', gap: '$5' }}>
+            <Flex align="start" key={`${questionIndex}-${option.index}`} css={{ w: '100%', gap: '$4' }}>
               {!isStopped || !isQuiz ? (
                 <RadioGroup.Item
                   css={{
@@ -59,7 +58,7 @@ export const SingleChoiceOptions = ({
 
               {isStopped && correctOptionIndex === option.index && isQuiz ? (
                 <Flex css={{ color: '$on_surface_high' }}>
-                  <CheckCircleIcon />
+                  <CheckCircleIcon height={20} width={20} />
                 </Flex>
               ) : null}
 
@@ -95,7 +94,7 @@ export const SingleChoiceOptionInputs = ({ isQuiz, options, selectAnswer, handle
       <Flex direction="column" css={{ gap: '$md', w: '100%', mb: '$md' }}>
         {options.map((option, index) => {
           return (
-            <Flex align="center" key={`option-${index}`} css={{ w: '100%', gap: '$5' }}>
+            <Flex align="center" key={`option-${index}`} css={{ w: '100%', gap: '$4' }}>
               {isQuiz && (
                 <RadioGroup.Item
                   css={{