@elice/material-exercise 1.220803.0

package/es/components/material-exercise/exercise-runner/ExerciseRunnerControllerArduinoStatusMessage.js

@@ -0,0 +1,105 @@
+import React, { useState, useEffect } from 'react';
+import { useIntl } from 'react-intl';
+import { Flex, Text } from '@elice/blocks';
+import { useRecoilValue } from 'recoil';
+import styled from 'styled-components';
+import { getPortFromName, getDisplayName } from '../../../utils/arduino.js';
+import { exerciseArduinoPortsState, exerciseArduinoOpenedPortNameState, exerciseArduinoUploadProgressState, exerciseArduinoAgentConnectionState } from '../context/recoil.js';
+import '../context/context.js';
+import '../context/recoilTypes.js';
+import '../context/subjects.js';
+import '../context/ExerciseProvider.js';
+import ExerciseRunnerControllerStatusIndicator from './ExerciseRunnerControllerStatusIndicator.js';
+
+const StyledMessageWrapper = styled(Flex).withConfig({
+  componentId: "sc-19z7lun-0"
+})(["height:1rem;"]);
+
+const ExerciseRunnerControllerArduinoStatusMessage = () => {
+  const intl = useIntl();
+  const ports = useRecoilValue(exerciseArduinoPortsState);
+  const [message, setMessage] = useState('');
+  const [status, setStatus] = useState('error');
+  const arduinoOpenedPort = useRecoilValue(exerciseArduinoOpenedPortNameState);
+  const arduinoUploadProgress = useRecoilValue(exerciseArduinoUploadProgressState);
+  const arduinoAgentConnectionStatus = useRecoilValue(exerciseArduinoAgentConnectionState);
+  useEffect(() => {
+    if (arduinoAgentConnectionStatus === 'disconnected') {
+      setStatus('error');
+      setMessage(intl.formatMessage({
+        id: 'exerciseRunner.controller.arduino.connectionStatus.disconnected'
+      }));
+      return;
+    }
+
+    if (arduinoAgentConnectionStatus === 'connecting') {
+      setStatus('warning');
+      setMessage(intl.formatMessage({
+        id: 'exerciseRunner.controller.arduino.connectionStatus.connecting'
+      }));
+      return;
+    }
+
+    if (arduinoAgentConnectionStatus === 'reconnecting') {
+      setStatus('warning');
+      setMessage(intl.formatMessage({
+        id: 'exerciseRunner.controller.arduino.connectionStatus.reconnecting'
+      }));
+      return;
+    } // Arduino agent is connected.
+
+
+    if (arduinoOpenedPort === '' && arduinoUploadProgress === 'ready') {
+      setStatus('error');
+      setMessage(intl.formatMessage({
+        id: 'exerciseRunner.controller.arduino.connectionStatus.noDevice'
+      }));
+      return;
+    }
+
+    setStatus('success');
+
+    switch (arduinoUploadProgress) {
+      case 'receivedHex':
+      case 'starting':
+      case 'busy':
+        setMessage(intl.formatMessage({
+          id: 'exerciseRunner.controller.arduino.connectionStatus.uploading'
+        }));
+        return;
+
+      case 'ready':
+      case 'error':
+      case 'done':
+      default:
+        const device = getPortFromName(ports, arduinoOpenedPort);
+
+        if (device) {
+          setMessage(intl.formatMessage({
+            id: 'exerciseRunner.controller.arduino.connectionStatus.connectedDevice'
+          }, {
+            device: getDisplayName(device)
+          }));
+        } else {
+          setMessage(intl.formatMessage({
+            id: 'exerciseRunner.controller.arduino.connectionStatus.connected'
+          }));
+        }
+
+        return;
+    }
+  }, [intl, arduinoOpenedPort, arduinoUploadProgress, arduinoAgentConnectionStatus, ports]); //
+  //
+  //
+
+  return React.createElement(StyledMessageWrapper, {
+    align: "center"
+  }, React.createElement(ExerciseRunnerControllerStatusIndicator, {
+    status: status
+  }), React.createElement(Text, {
+    role: "gray3",
+    size: "tiny"
+  }, message));
+};
+
+export { ExerciseRunnerControllerArduinoStatusMessage as default };

package/es/components/material-exercise/exercise-runner/ExerciseRunnerControllerButtonGroup.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ExerciseRunnerControllerButtonGroup: React.VFC;
+export default ExerciseRunnerControllerButtonGroup;

package/es/components/material-exercise/exercise-runner/ExerciseRunnerControllerButtonGroup.js

@@ -0,0 +1,262 @@
+import React from 'react';
+import { useIntl, FormattedMessage } from 'react-intl';
+import { Button, Tooltip, Icon } from '@elice/blocks';
+import { eilArrowRightwardsBasic } from '@elice/icons';
+import { enums } from '@elice/types';
+import { EliceWebSocket } from '@elice/websocket';
+import { useRecoilValue } from 'recoil';
+import styled from 'styled-components';
+import 'react-use';
+import 'socket.io-client';
+import { exerciseFileEditorCursorSelectionValueState, exerciseRunnerWebSocketStatusQuery, exerciseState, exerciseRunnerRunTypeState, exerciseLectureState, exerciseRunnerSubmittingState, exerciseRunnerRunningState, exerciseArduinoUploadProgressState, exerciseArduinoOpenedPortNameState } from '../context/recoil.js';
+import { ExerciseContext } from '../context/context.js';
+import '../context/recoilTypes.js';
+import { exerciseFileEditorSaveAction$ } from '../context/subjects.js';
+import '../context/ExerciseProvider.js';
+import '../../../constants/arduino.js';
+import { useExericseShortcut } from '../../../hooks/useExericseShortcut.js';
+import '@elice/api-client';
+import '@elice/material-shared-utils';
+import 'humps';
+import 'ot-text-unicode';
+import 'lodash/debounce';
+import 'random-words';
+import 'unicount';
+import { ExerciseRunnerContext } from './ExerciseRunnerContext.js';
+
+const StyledControllerButton = styled(Button).withConfig({
+  componentId: "sc-d9xhed-0"
+})(["transition:none;"]);
+const StyledControllerButtonWrap = styled.div.withConfig({
+  componentId: "sc-d9xhed-1"
+})(["display:flex;"]);
+const StyledControllerButtonGroup = styled.div.withConfig({
+  componentId: "sc-d9xhed-2"
+})(["display:flex;flex-direction:row;align-items:center;> ", ",> ", "{margin-right:0.5rem;&:last-child{margin-right:0;}}"], StyledControllerButtonWrap, StyledControllerButton);
+
+const ExerciseRunnerControllerButtonGroup = () => {
+  var _a;
+
+  const intl = useIntl();
+  const {
+    materialExerciseId,
+    onCodeHelpRequest
+  } = React.useContext(ExerciseContext);
+  const {
+    onSubmit,
+    onSyncRequest,
+    onCancel
+  } = React.useContext(ExerciseRunnerContext);
+  const editorCursorSelectionValue = useRecoilValue(exerciseFileEditorCursorSelectionValueState);
+  const runnerWebsocketStatus = useRecoilValue(exerciseRunnerWebSocketStatusQuery);
+  const exercise = useRecoilValue(exerciseState(materialExerciseId));
+  const exerciseRunType = useRecoilValue(exerciseRunnerRunTypeState);
+  const exerciseWithNoGrade = Boolean(exercise === null || exercise === void 0 ? void 0 : exercise.isNoSubmitGrade);
+  const lecture = useRecoilValue(exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise.lectureId));
+  const isTestLecture = (lecture === null || lecture === void 0 ? void 0 : lecture.lectureType) === enums.LectureType.Test;
+  const isTestLectureCompleted = (lecture === null || lecture === void 0 ? void 0 : lecture.testAdmissionStatus) === enums.TestAdmissionStatus.Completed; // runner states
+
+  const isSubmitting = useRecoilValue(exerciseRunnerSubmittingState);
+  const isRunning = useRecoilValue(exerciseRunnerRunningState);
+  const isConnecting = runnerWebsocketStatus === EliceWebSocket.CONNECTING;
+  const isNotReady = runnerWebsocketStatus !== EliceWebSocket.OPEN; // arduino
+
+  const isArduinoExercise = (exercise === null || exercise === void 0 ? void 0 : exercise.envType) === enums.ExerciseEnvType.Arduino;
+  const arduinoUploadProgress = useRecoilValue(exerciseArduinoUploadProgressState);
+  const arduinoOpenedPortName = useRecoilValue(exerciseArduinoOpenedPortNameState); //
+  // ========= ui states =========
+  //
+  // submit run
+
+  const isSubmitRunHidden = isRunning;
+  const isSubmitRunArduinoDisabled = isArduinoExercise ? arduinoUploadProgress !== 'ready' && arduinoUploadProgress !== 'error' || !arduinoOpenedPortName : false;
+  const isSubmitRunDisabled = isSubmitRunHidden || isSubmitRunArduinoDisabled || isNotReady || isConnecting || isSubmitting; // submit grade
+
+  const isSubmitGradeHidden = isRunning || isArduinoExercise;
+  const isSubmitGradeDisabled = isSubmitGradeHidden || exerciseWithNoGrade || isTestLecture && isTestLectureCompleted || isNotReady || isConnecting || isSubmitting; // cancel
+
+  const isCancelHidden = !isRunning;
+  const isCancelDisabled = isCancelHidden || isNotReady || isConnecting; // sync request
+
+  const isSyncRequestHidden = !isRunning || !((_a = exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage) === null || _a === void 0 ? void 0 : _a.httpPort);
+  const isSyncRequestDisabled = isSyncRequestHidden || isNotReady || isConnecting; // code help
+
+  const isCodeHelpHidden = isRunning || isTestLecture && !isTestLectureCompleted; //
+  //
+  //
+
+  /**
+   * Submit to run
+   */
+
+  const handleSubmitRun = () => {
+    if (!isSubmitRunDisabled) {
+      void onSubmit(enums.ExerciseRunType.Run);
+    }
+  };
+  /**
+   * Submit to grade
+   */
+
+
+  const handleSubmitGrade = () => {
+    if (!isSubmitGradeDisabled) {
+      void onSubmit(enums.ExerciseRunType.Grade);
+    }
+  };
+  /**
+   * Cancel
+   */
+
+
+  const handleCancel = () => {
+    if (!isCancelDisabled) {
+      onCancel();
+    }
+  };
+  /**
+   * Sync request
+   */
+
+
+  const handleSyncRequest = () => {
+    if (!isSyncRequestDisabled) {
+      onSyncRequest();
+    }
+  }; //
+  // keyboard shortcuts to control runner
+  //
+
+
+  useExericseShortcut('RUNNER_SUBMIT_RUN', handleSubmitRun);
+  useExericseShortcut('RUNNER_SUBMIT_GRADE', handleSubmitGrade);
+  useExericseShortcut('RUNNER_CANCEL', handleCancel);
+  useExericseShortcut('RUNNER_SYNC_REQUEST', handleSyncRequest); //
+  // handle save action emitted by file editor
+  //
+
+  React.useEffect(() => {
+    const saveActionSub = exerciseFileEditorSaveAction$.subscribe(handleSyncRequest);
+    return () => {
+      saveActionSub.unsubscribe();
+    };
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [isSyncRequestDisabled]);
+  /**
+   * Submit to run button
+   */
+
+  const renderSubmitRunButton = () => {
+    if (isSubmitRunHidden) {
+      return null;
+    }
+
+    return React.createElement(StyledControllerButton, {
+      size: "tiny",
+      loading: isConnecting || isSubmitting && exerciseRunType === enums.ExerciseRunType.Run,
+      disabled: isSubmitRunDisabled,
+      onClick: handleSubmitRun
+    }, isArduinoExercise ? React.createElement(FormattedMessage, {
+      id: "exerciseRunner.controller.buttonGroup.button.compile"
+    }) : React.createElement(FormattedMessage, {
+      id: "exerciseRunner.controller.buttonGroup.button.run"
+    }));
+  };
+  /**
+   * Submit to grade button
+   */
+
+
+  const renderSubmitGradeButton = () => {
+    if (isSubmitGradeHidden) {
+      return null;
+    }
+
+    return React.createElement(Tooltip, {
+      title: exerciseWithNoGrade ? intl.formatMessage({
+        id: 'exerciseRunner.controller.buttonGroup.button.submit.tooltip.noSubmit'
+      }) : undefined,
+      placement: "top",
+      dark: true
+    }, React.createElement(StyledControllerButtonWrap, null, React.createElement(StyledControllerButton, {
+      size: "tiny",
+      role: "secondary",
+      loading: isConnecting || isSubmitting && exerciseRunType === enums.ExerciseRunType.Grade,
+      disabled: isSubmitGradeDisabled,
+      onClick: handleSubmitGrade
+    }, React.createElement(FormattedMessage, {
+      id: "exerciseRunner.controller.buttonGroup.button.submit"
+    }))));
+  };
+  /**
+   * Cancel button
+   */
+
+
+  const renderCancelButton = () => {
+    if (isCancelHidden) {
+      return null;
+    }
+
+    return React.createElement(StyledControllerButton, {
+      size: "tiny",
+      role: "danger",
+      loading: isConnecting,
+      disabled: isCancelDisabled,
+      onClick: handleCancel
+    }, React.createElement(FormattedMessage, {
+      id: "exerciseRunner.controller.buttonGroup.button.stop"
+    }));
+  };
+  /**
+   * Sync request button
+   */
+
+
+  const renderSyncRequestButton = () => {
+    if (isSyncRequestHidden) {
+      return null;
+    }
+
+    return React.createElement(StyledControllerButton, {
+      size: "tiny",
+      role: "secondary",
+      loading: isConnecting,
+      disabled: isSyncRequestDisabled,
+      onClick: handleSyncRequest
+    }, React.createElement(FormattedMessage, {
+      id: "exerciseRunner.controller.buttonGroup.button.syncRequest"
+    }));
+  };
+  /**
+   * Code help button
+   */
+
+
+  const renderCodeHelpRequestButton = () => {
+    if (isCodeHelpHidden || !editorCursorSelectionValue || typeof onCodeHelpRequest !== 'function') {
+      return null;
+    }
+
+    return React.createElement(StyledControllerButton, {
+      size: "tiny",
+      role: "darkblue",
+      icon: React.createElement(Icon, {
+        icon: eilArrowRightwardsBasic
+      }),
+      iconAlign: "right",
+      onClick: () => {
+        onCodeHelpRequest(editorCursorSelectionValue);
+      }
+    }, React.createElement(FormattedMessage, {
+      id: "exerciseRunner.controller.buttonGroup.button.helpRequest"
+    }));
+  }; //
+  //
+  //
+
+
+  return React.createElement(StyledControllerButtonGroup, null, renderSubmitRunButton(), renderSubmitGradeButton(), renderCancelButton(), renderSyncRequestButton(), renderCodeHelpRequestButton());
+};
+
+export { ExerciseRunnerControllerButtonGroup as default };

package/es/components/material-exercise/exercise-runner/ExerciseRunnerControllerRunningInfo.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ExerciseRunnerControllerRunningInfo: React.VFC;
+export default ExerciseRunnerControllerRunningInfo;

package/es/components/material-exercise/exercise-runner/ExerciseRunnerControllerRunningInfo.js

@@ -0,0 +1,180 @@
+import React from 'react';
+import { useIntl, FormattedMessage, FormattedDate } from 'react-intl';
+import { usePrevious } from 'react-use';
+import { getOrgMaterialExerciseExerciseRunningList, getOrgCourseGet } from '@elice/api-client';
+import { Hr, Notification, Flex } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
+import { enums } from '@elice/types';
+import { useRecoilValue } from 'recoil';
+import styled from 'styled-components';
+import { exerciseRunnerRunningState, exerciseState, exerciseUserState } from '../context/recoil.js';
+import { ExerciseContext } from '../context/context.js';
+import '../context/recoilTypes.js';
+import '../context/subjects.js';
+import '../context/ExerciseProvider.js';
+
+const StyledHr = styled(Hr).withConfig({
+  componentId: "sc-30ywzi-0"
+})(["height:2rem;"]);
+const StyledRunnerInfoTitle = styled.span.withConfig({
+  componentId: "sc-30ywzi-1"
+})(["display:block;color:", ";font-size:11px;line-height:1.25;"], base.color.navy3);
+const StyledRunnerInfoContent = styled.span.withConfig({
+  componentId: "sc-30ywzi-2"
+})(["display:block;color:", ";font-size:12px;line-height:1.25;"], base.color.navy1);
+
+const ExerciseRunnerControllerRunningInfo = () => {
+  const intl = useIntl();
+  const {
+    materialExerciseId,
+    exerciseRoomId,
+    onExerciseRunningDone,
+    onError
+  } = React.useContext(ExerciseContext);
+  const isRunning = useRecoilValue(exerciseRunnerRunningState);
+  const isPrevRunning = usePrevious(isRunning);
+  const isNoRunning = isPrevRunning === undefined;
+  const isRunningDone = isPrevRunning === true && !isRunning;
+  const exercise = useRecoilValue(exerciseState(materialExerciseId));
+  const user = useRecoilValue(exerciseUserState);
+  const [course, setCourse] = React.useState();
+  const [exerciseLastRunning, setExerciseLastRunning] = React.useState(null); //
+  // Get exercise running list.
+  //
+
+  React.useEffect(() => {
+    const userId = user === null || user === void 0 ? void 0 : user.id;
+
+    if (!userId || !exercise || !exerciseRoomId) {
+      return;
+    } // fetch last running only if
+    // - not running yet (no history)
+    // - or, running done
+
+
+    if (!isNoRunning && !isRunningDone) {
+      return;
+    }
+
+    const abortCtrl = new AbortController();
+    getOrgMaterialExerciseExerciseRunningList({
+      exerciseRoomId,
+      filterRunType: exercise.isNoSubmitGrade ? enums.ExerciseRunType.Run : undefined,
+      offset: 0,
+      count: 1,
+      userId
+    }, {
+      signal: abortCtrl.signal
+    }).then(res => {
+      var _a;
+
+      return (_a = res.exerciseRunnings[0]) !== null && _a !== void 0 ? _a : null;
+    }).then(running => {
+      setExerciseLastRunning(running);
+
+      if (isRunningDone && typeof onExerciseRunningDone === 'function') {
+        onExerciseRunningDone(running);
+      }
+    }).catch(err => {
+      if (err.name === 'AbortError') {
+        return;
+      }
+
+      if (typeof onError === 'function') {
+        onError(err);
+      }
+
+      Notification.error(intl.formatMessage({
+        id: 'exerciseRunner.controller.runningInfo.error.fetch'
+      }));
+    });
+    return () => {
+      abortCtrl.abort();
+    };
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [isRunningDone, exercise, exerciseRoomId, user]); //
+  // Get course
+  //
+
+  React.useEffect(() => {
+    if (exercise === null || exercise === void 0 ? void 0 : exercise.courseId) {
+      getOrgCourseGet({
+        courseId: exercise.courseId
+      }).then(({
+        course
+      }) => {
+        setCourse(course);
+      }).catch(console.error);
+    }
+  }, [exercise]);
+  /**
+   * Last running score.
+   */
+
+  const renderRunningInfoLastRunningScore = () => {
+    if (exercise === null || exercise === void 0 ? void 0 : exercise.isNoSubmitGrade) {
+      return null;
+    }
+
+    if (!course || course.courseType === enums.CourseType.Challenge) {
+      return;
+    }
+
+    return React.createElement(React.Fragment, null, React.createElement(Flex, {
+      column: true,
+      justify: "center"
+    }, React.createElement(StyledRunnerInfoTitle, null, React.createElement(FormattedMessage, {
+      id: "exerciseRunner.controller.runningInfo.lastSubmitScore"
+    })), React.createElement(StyledRunnerInfoContent, null, typeof (exerciseLastRunning === null || exerciseLastRunning === void 0 ? void 0 : exerciseLastRunning.score) === 'string' ? React.createElement(FormattedMessage, {
+      id: "exerciseRunner.controller.runningInfo.score",
+      values: {
+        score: exerciseLastRunning.score
+      }
+    }) : '--')), React.createElement(StyledHr, {
+      color: base.color.navy6,
+      vertical: true,
+      marginStart: "0.5rem",
+      marginEnd: "0.5rem"
+    }));
+  };
+  /**
+   * Last running time.
+   */
+
+
+  const renderRunningInfoLastRunningTime = () => {
+    if (!course || (course === null || course === void 0 ? void 0 : course.courseType) === enums.CourseType.Challenge) {
+      return;
+    }
+
+    return React.createElement(Flex, {
+      column: true,
+      justify: "center"
+    }, React.createElement(StyledRunnerInfoTitle, null, (exercise === null || exercise === void 0 ? void 0 : exercise.isNoSubmitGrade) ? React.createElement(FormattedMessage, {
+      id: "exerciseRunner.controller.runningInfo.lastRunningDatetime"
+    }) : React.createElement(FormattedMessage, {
+      id: "exerciseRunner.controller.runningInfo.lastSubmitDatetime"
+    })), React.createElement(StyledRunnerInfoContent, null, (exerciseLastRunning === null || exerciseLastRunning === void 0 ? void 0 : exerciseLastRunning.createdDatetime) ? React.createElement(FormattedDate, {
+      value: exerciseLastRunning.createdDatetime,
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      hour12: false
+    }) : '--'));
+  }; //
+  //
+  //
+  // hide running info, if exercise running.
+
+
+  if (isRunning) {
+    return null;
+  }
+
+  return React.createElement(Flex, null, renderRunningInfoLastRunningScore(), renderRunningInfoLastRunningTime());
+};
+
+export { ExerciseRunnerControllerRunningInfo as default };

package/es/components/material-exercise/exercise-runner/ExerciseRunnerControllerStatusIndicator.d.ts

@@ -0,0 +1,5 @@
+interface ExerciseRunnerControllerStatusIndicatorProps {
+    status: 'success' | 'warning' | 'error';
+}
+declare const ExerciseRunnerControllerStatusIndicator: import("styled-components").StyledComponent<"div", any, ExerciseRunnerControllerStatusIndicatorProps, never>;
+export default ExerciseRunnerControllerStatusIndicator;

package/es/components/material-exercise/exercise-runner/ExerciseRunnerControllerStatusIndicator.js

@@ -0,0 +1,19 @@
+import { base } from '@elice/design-tokens';
+import styled from 'styled-components';
+
+const ExerciseRunnerControllerStatusIndicator = styled.div.withConfig({
+  componentId: "sc-15703mt-0"
+})(["margin-top:1px;margin-right:0.3rem;width:0.375rem;height:0.375rem;border-radius:50%;vertical-align:middle;background-color:", ";"], props => {
+  switch (props.status) {
+    case 'success':
+      return base.color.green8;
+
+    case 'warning':
+      return base.color.orange8;
+
+    case 'error':
+      return base.color.red8;
+  }
+});
+
+export { ExerciseRunnerControllerStatusIndicator as default };

package/es/components/material-exercise/exercise-runner/ExerciseRunnerControllerStatusMessage.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ExerciseRunnerControllerStatusMessage: React.FC;
+export default ExerciseRunnerControllerStatusMessage;

package/es/components/material-exercise/exercise-runner/ExerciseRunnerControllerStatusMessage.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Flex, Text } from '@elice/blocks';
+import { EliceWebSocket } from '@elice/websocket';
+import { useRecoilValue } from 'recoil';
+import styled from 'styled-components';
+import { exerciseRunnerWebSocketStatusQuery } from '../context/recoil.js';
+import '../context/context.js';
+import '../context/recoilTypes.js';
+import '../context/subjects.js';
+import '../context/ExerciseProvider.js';
+import ExerciseRunnerControllerStatusIndicator from './ExerciseRunnerControllerStatusIndicator.js';
+
+const StyledMessageWrapper = styled(Flex).withConfig({
+  componentId: "sc-1yqi8o2-0"
+})(["height:1rem;"]);
+
+const ExerciseRunnerControllerStatusMessage = () => {
+  const websocketStatus = useRecoilValue(exerciseRunnerWebSocketStatusQuery);
+  /**
+   * Websocket state message.
+   */
+
+  const getWebsocketStateMessage = () => {
+    switch (websocketStatus) {
+      case EliceWebSocket.OPEN:
+        return React.createElement(FormattedMessage, {
+          id: "exerciseRunner.controller.statusMessage.open"
+        });
+
+      case EliceWebSocket.CLOSED:
+        return React.createElement(FormattedMessage, {
+          id: "exerciseRunner.controller.statusMessage.closed"
+        });
+
+      case EliceWebSocket.CONNECTING:
+      default:
+        return React.createElement(FormattedMessage, {
+          id: "exerciseRunner.controller.statusMessage.connecting"
+        });
+    }
+  }; //
+  //
+  //
+
+
+  return React.createElement(StyledMessageWrapper, {
+    align: "center"
+  }, React.createElement(ExerciseRunnerControllerStatusIndicator, {
+    status: websocketStatus === EliceWebSocket.OPEN ? 'success' : websocketStatus === EliceWebSocket.CLOSED ? 'error' : 'warning'
+  }), React.createElement(Text, {
+    role: "gray3",
+    size: "tiny",
+    bold: true
+  }, getWebsocketStateMessage()));
+};
+
+export { ExerciseRunnerControllerStatusMessage as default };

package/es/components/material-exercise/exercise-runner/ExerciseRunnerControllerTimer.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ExerciseRunnerControllerTimer: React.VFC;
+export default ExerciseRunnerControllerTimer;