@elice/material-exercise 1.260305.0 → 1.260430.0

package/cjs/components/material-exercise/exercise-runner/ExerciseRunner.js

@@ -6,7 +6,6 @@ var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHel
 var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var reactUse = require('react-use');
 var apiClient = require('@elice/api-client');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
@@ -20,10 +19,10 @@ var ExerciseRunnerController = require('./ExerciseRunnerController.js');
 var en = require('./locales/en.json.js');
 var ko = require('./locales/ko.json.js');
 var recoil$1 = require('../context/recoil.js');
-var useArduino = require('../../../hooks/useArduino.js');
 var useRunnerRoomWebSocket = require('../../../hooks/useRunnerRoomWebSocket.js');
 var useStdioWebSocket = require('../../../hooks/useStdioWebSocket.js');
 var subjects = require('../context/subjects.js');
+var ArduinoProvider = require('./arduino/ArduinoProvider.js');
 var XtermLazy = require('../../shared/xterm/XtermLazy.js');
 var async = require('../../../utils/async.js');
 var runner = require('../../../utils/runner.js');
@@ -111,26 +110,8 @@ var ExerciseRunner = function ExerciseRunner(_ref) {
   var arduinoTextBuffer = React__default.default.useRef('');
   var runnerRunTypeRef = React__default.default.useRef(runnerRunTypeState);
   var xterm = React__default.default.useRef(null);
-  /**
-   * Handle text received from arduino serial output.
-   */
-  var handleArduinoDigitalOutput = function handleArduinoDigitalOutput(text) {
-    var _a;
-    (_a = xterm.current) === null || _a === void 0 ? void 0 : _a.write(text);
-  };
-  // Arduino
-  var arduino = useArduino.useArduino({
-    writeTerminal: handleArduinoDigitalOutput
-  });
+  var arduinoBridgeApi = React__default.default.useRef(null);
   var isArduinoExercise = (exercise === null || exercise === void 0 ? void 0 : exercise.envType) === types.enums.ExerciseEnvType.Arduino;
-  /**
-   * Handle destroy arduino client.
-   */
-  var handleArduinoDistroy = React__default.default.useCallback(function () {
-    if (isArduinoExercise) {
-      arduino.destroy();
-    }
-  }, [isArduinoExercise, arduino]);
   /**
    * Handle text received from stdio websocket.
    */
@@ -153,10 +134,11 @@ var ExerciseRunner = function ExerciseRunner(_ref) {
    * Handle file received from stdio websocket.
    */
   var handleWsStdioFileReceive = function handleWsStdioFileReceive(stdioFile) {
+    var _a;
     // arduino exercise
     if (isArduinoExercise) {
       if ('filename' in stdioFile && stdioFile.filename.startsWith('firmware') && stdioFile.filename.endsWith('hex')) {
-        arduino.uploadHexFile(stdioFile);
+        (_a = arduinoBridgeApi.current) === null || _a === void 0 ? void 0 : _a.handleIncomingHex(stdioFile.data);
       }
       return;
     }
@@ -416,7 +398,7 @@ var ExerciseRunner = function ExerciseRunner(_ref) {
    * Handle input requests for arduino.
    */
   var handleXtermArduinoInputRequest = function handleXtermArduinoInputRequest(_char) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     switch (_char) {
       // backspace
       case "\x7F":
@@ -427,13 +409,13 @@ var ExerciseRunner = function ExerciseRunner(_ref) {
       case '\r':
         if (arduinoTextBuffer.current.length) {
           (_b = xterm.current) === null || _b === void 0 ? void 0 : _b.write('\r\n');
-          arduino.sendText(arduinoTextBuffer.current);
+          (_c = arduinoBridgeApi.current) === null || _c === void 0 ? void 0 : _c.sendText(arduinoTextBuffer.current);
           arduinoTextBuffer.current = '';
         }
         break;
       // any char
       default:
-        (_c = xterm.current) === null || _c === void 0 ? void 0 : _c.write(_char);
+        (_d = xterm.current) === null || _d === void 0 ? void 0 : _d.write(_char);
         arduinoTextBuffer.current = "".concat(arduinoTextBuffer.current).concat(_char);
         break;
     }
@@ -449,24 +431,6 @@ var ExerciseRunner = function ExerciseRunner(_ref) {
     }
   };
   //
-  // Initialize Arduino devices.
-  //
-  React__default.default.useEffect(function () {
-    if (!isArduinoExercise) {
-      return;
-    }
-    void arduino.init();
-    return function () {
-      void arduino.destroy();
-    };
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [exercise]);
-  //
-  // Destroy arduino client when unload window.
-  //
-  reactUse.useEvent('beforeunload', handleArduinoDistroy, window);
-  //
   // Update runner room websocket state.
   //
   React__default.default.useEffect(function () {
@@ -603,23 +567,29 @@ var ExerciseRunner = function ExerciseRunner(_ref) {
   //
   //
   //
+  var runnerBody = jsxRuntime.jsxs(ExerciseRunnerContext.ExerciseRunnerContext.Provider, {
+    value: {
+      onSubmit: handleRunnerSubmit,
+      onCancel: handleRunnerCancel,
+      onSyncRequest: handleRunnerSyncRequest
+    },
+    children: [jsxRuntime.jsx(ExerciseRunnerController.default, {}), jsxRuntime.jsxs(blocks.Flex, {
+      auto: true,
+      style: {
+        minHeight: 0
+      },
+      overflow: "hidden",
+      children: [renderPreview(), renderXterm(), renderRunnerSubmitErrorDialog()]
+    })]
+  });
   return jsxRuntime.jsx(intl.RawEliceIntlProvider, {
     value: __intl,
     children: jsxRuntime.jsx(StyledExerciseRunner, {
-      children: jsxRuntime.jsxs(ExerciseRunnerContext.ExerciseRunnerContext.Provider, {
-        value: {
-          onSubmit: handleRunnerSubmit,
-          onCancel: handleRunnerCancel,
-          onSyncRequest: handleRunnerSyncRequest
-        },
-        children: [jsxRuntime.jsx(ExerciseRunnerController.default, {}), jsxRuntime.jsxs(blocks.Flex, {
-          auto: true,
-          style: {
-            minHeight: 0
-          },
-          overflow: "hidden",
-          children: [renderPreview(), renderXterm(), renderRunnerSubmitErrorDialog()]
-        })]
+      children: jsxRuntime.jsx(ArduinoProvider.default, {
+        enabled: isArduinoExercise,
+        xtermRef: xterm,
+        apiRef: arduinoBridgeApi,
+        children: runnerBody
       })
     })
   });

package/cjs/components/material-exercise/exercise-runner/ExerciseRunnerController.js

@@ -9,12 +9,12 @@ var blocks = require('@elice/blocks');
 var types = require('@elice/types');
 var recoil = require('recoil');
 var stylesheets = require('../../../constants/stylesheets.js');
-var ExerciseRunnerControllerArduinoAgentModal = require('./ExerciseRunnerControllerArduinoAgentModal.js');
-var ExerciseRunnerControllerArduinoStatusMessage = require('./ExerciseRunnerControllerArduinoStatusMessage.js');
 var ExerciseRunnerControllerButtonGroup = require('./ExerciseRunnerControllerButtonGroup.js');
 var ExerciseRunnerControllerRunningInfo = require('./ExerciseRunnerControllerRunningInfo.js');
 var ExerciseRunnerControllerStatusMessage = require('./ExerciseRunnerControllerStatusMessage.js');
 var ExerciseRunnerControllerTimer = require('./ExerciseRunnerControllerTimer.js');
+var ArduinoControllerButtonGroup = require('./arduino/ArduinoControllerButtonGroup.js');
+var ArduinoControllerStatusMessage = require('./arduino/ArduinoControllerStatusMessage.js');
 var context = require('../context/context.js');
 var recoil$1 = require('../context/recoil.js');
 var useExerciseFile = require('../../../hooks/useExerciseFile.js');
@@ -32,20 +32,47 @@ var ExerciseRunnerController = function ExerciseRunnerController() {
   var _React$useContext = React__default.default.useContext(context.ExerciseContext),
     materialExerciseId = _React$useContext.materialExerciseId;
   var exercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
-  var isArduinoExercise = (exercise === null || exercise === void 0 ? void 0 : exercise.envType) === types.enums.ExerciseEnvType.Arduino;
   var activeFilename = recoil.useRecoilValue(recoil$1.exerciseActiveFilenameState);
   var isFileEditable = useExerciseFile.useExerciseFileEditable(activeFilename);
+  /**
+   *
+   */
+  var renderControllerButtonGroup = function renderControllerButtonGroup() {
+    switch (exercise === null || exercise === void 0 ? void 0 : exercise.envType) {
+      case types.enums.ExerciseEnvType.Arduino:
+        return jsxRuntime.jsx(ArduinoControllerButtonGroup.default, {});
+      default:
+        return jsxRuntime.jsx(ExerciseRunnerControllerButtonGroup.default, {});
+    }
+  };
+  /**
+   *
+   */
+  var renderControllerStatusMessage = function renderControllerStatusMessage() {
+    if (!isFileEditable) {
+      return null;
+    }
+    switch (exercise === null || exercise === void 0 ? void 0 : exercise.envType) {
+      case types.enums.ExerciseEnvType.Arduino:
+        return jsxRuntime.jsx(ArduinoControllerStatusMessage.default, {});
+      default:
+        return jsxRuntime.jsx(ExerciseRunnerControllerStatusMessage.default, {});
+    }
+  };
+  //
+  //
+  //
   return jsxRuntime.jsxs(StyledController, {
     children: [jsxRuntime.jsxs(blocks.Flex, {
       align: "center",
-      children: [jsxRuntime.jsx(ExerciseRunnerControllerButtonGroup.default, {}), jsxRuntime.jsx(blocks.Hspace, {
+      children: [renderControllerButtonGroup(), jsxRuntime.jsx(blocks.Hspace, {
         width: 1
       }), jsxRuntime.jsx(ExerciseRunnerControllerRunningInfo.default, {}), jsxRuntime.jsx(ExerciseRunnerControllerTimer.default, {})]
-    }), isFileEditable ? jsxRuntime.jsxs(blocks.Flex, {
+    }), jsxRuntime.jsx(blocks.Flex, {
       column: true,
       align: "flex-end",
-      children: [jsxRuntime.jsx(ExerciseRunnerControllerStatusMessage.default, {}), isArduinoExercise ? jsxRuntime.jsx(ExerciseRunnerControllerArduinoStatusMessage.default, {}) : null]
-    }) : null, isArduinoExercise ? jsxRuntime.jsx(ExerciseRunnerControllerArduinoAgentModal.default, {}) : null]
+      children: renderControllerStatusMessage()
+    })]
   });
 };
 

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

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

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

@@ -2,228 +2,22 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
-var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var blocks = require('@elice/blocks');
-var intl = require('@elice/intl');
-var muiSystem = require('@elice/mui-system');
-var types = require('@elice/types');
-var websocket = require('@elice/websocket');
-var recoil = require('recoil');
-var ExerciseRunnerContext = require('./ExerciseRunnerContext.js');
-var recoil$1 = require('../context/recoil.js');
-var useExericseShortcut = require('../../../hooks/useExericseShortcut.js');
-var context = require('../context/context.js');
-var useExerciseFile = require('../../../hooks/useExerciseFile.js');
-var subjects = require('../context/subjects.js');
+var material = require('@mui/material');
+var ControllerActionRun = require('./action/ControllerActionRun.js');
+var ControllerActionGrade = require('./action/ControllerActionGrade.js');
+var ControllerActionCancel = require('./action/ControllerActionCancel.js');
+var ControllerActionSyncRequest = require('./action/ControllerActionSyncRequest.js');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-var StyledControllerButton = /*#__PURE__*/_styled__default.default(blocks.Button, {
-  target: "e45p2z2"
-})("position:relative;transition:none;&.eb-button--role-danger{border-color:", muiSystem.colors.red[700], ";background-color:", muiSystem.colors.red[700], ";}");
-var StyledControllerButtonWrap = /*#__PURE__*/_styled__default.default("div", {
-  target: "e45p2z1"
-})("production" === "production" ? {
-  name: "zjik7",
-  styles: "display:flex"
-} : {
-  name: "zjik7",
-  styles: "display:flex",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var StyledControllerButtonGroup = /*#__PURE__*/_styled__default.default("div", {
-  target: "e45p2z0"
-})("display:flex;flex-direction:row;align-items:center;>", StyledControllerButtonWrap, ",>", StyledControllerButton, "{margin-right:0.5rem;&:last-child{margin-right:0;}}");
+//
+//
+//
 var ExerciseRunnerControllerButtonGroup = function ExerciseRunnerControllerButtonGroup() {
-  var _a;
-  var intl$1 = intl.useRawEliceIntl();
-  var _React$useContext = React__default.default.useContext(context.ExerciseContext),
-    materialExerciseId = _React$useContext.materialExerciseId;
-  var _React$useContext2 = React__default.default.useContext(ExerciseRunnerContext.ExerciseRunnerContext),
-    onSubmit = _React$useContext2.onSubmit,
-    onSyncRequest = _React$useContext2.onSyncRequest,
-    onCancel = _React$useContext2.onCancel;
-  var activeFilename = recoil.useRecoilValue(recoil$1.exerciseActiveFilenameState);
-  var isFileEditable = useExerciseFile.useExerciseFileEditable(activeFilename);
-  var runnerWebsocketStatus = recoil.useRecoilValue(recoil$1.exerciseWebSocketTotalStatusQuery([].concat(_rollupPluginBabelHelpers.toConsumableArray(isFileEditable ? ['usercodeEdit'] : []), ['runnerRoom', 'stdio'])));
-  var exercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
-  var exerciseRunType = recoil.useRecoilValue(recoil$1.exerciseRunnerRunTypeState);
-  var exerciseWithNoGrade = Boolean(exercise === null || exercise === void 0 ? void 0 : exercise.isNoSubmitGrade);
-  var lecture = recoil.useRecoilValue(recoil$1.exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise._lectureId));
-  var isTestLecture = (lecture === null || lecture === void 0 ? void 0 : lecture.lectureType) === types.enums.LectureType.Test;
-  var isTestLectureCompleted = (lecture === null || lecture === void 0 ? void 0 : lecture.testAdmissionStatus) === types.enums.TestAdmissionStatus.Completed;
-  // runner states
-  var isSubmitting = recoil.useRecoilValue(recoil$1.exerciseRunnerSubmittingState);
-  var isRunning = recoil.useRecoilValue(recoil$1.exerciseRunnerRunningState);
-  var isConnecting = runnerWebsocketStatus === websocket.EliceWebSocket.CONNECTING;
-  var isNotReady = runnerWebsocketStatus !== websocket.EliceWebSocket.OPEN;
-  // arduino
-  var isArduinoExercise = (exercise === null || exercise === void 0 ? void 0 : exercise.envType) === types.enums.ExerciseEnvType.Arduino;
-  var arduinoUploadProgress = recoil.useRecoilValue(recoil$1.exerciseArduinoUploadProgressState);
-  var arduinoOpenedPortName = recoil.useRecoilValue(recoil$1.exerciseArduinoOpenedPortNameState);
-  //
-  // ========= ui states =========
-  //
-  // submit run
-  var isSubmitRunHidden = isRunning;
-  var isSubmitRunArduinoDisabled = isArduinoExercise ? arduinoUploadProgress !== 'ready' && arduinoUploadProgress !== 'error' || !arduinoOpenedPortName : false;
-  var isSubmitRunDisabled = isSubmitRunHidden || isSubmitRunArduinoDisabled || isNotReady || isConnecting || isSubmitting;
-  // submit grade
-  var isSubmitGradeHidden = isRunning;
-  var isSubmitGradeDisabled = isSubmitGradeHidden || exerciseWithNoGrade || isTestLecture && isTestLectureCompleted || isNotReady || isConnecting || isSubmitting;
-  // cancel
-  var isCancelHidden = !isRunning;
-  var isCancelDisabled = isCancelHidden || isNotReady || isConnecting;
-  // sync request
-  var isSyncRequestHidden = !isRunning || !((_a = exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage) === null || _a === void 0 ? void 0 : _a.httpPort);
-  var isSyncRequestDisabled = isSyncRequestHidden || isNotReady || isConnecting;
-  //
-  //
-  //
-  /**
-   * Submit to run
-   */
-  var handleSubmitRun = function handleSubmitRun() {
-    if (!isSubmitRunDisabled) {
-      void onSubmit(types.enums.ExerciseRunType.Run);
-    }
-  };
-  /**
-   * Submit to grade
-   */
-  var handleSubmitGrade = function handleSubmitGrade() {
-    if (!isSubmitGradeDisabled) {
-      void onSubmit(types.enums.ExerciseRunType.Grade);
-    }
-  };
-  /**
-   * Cancel
-   */
-  var handleCancel = function handleCancel() {
-    if (!isCancelDisabled) {
-      onCancel();
-    }
-  };
-  /**
-   * Sync request
-   */
-  var handleSyncRequest = function handleSyncRequest() {
-    if (!isSyncRequestDisabled) {
-      onSyncRequest();
-    }
-  };
-  //
-  // keyboard shortcuts to control runner
-  //
-  useExericseShortcut.useExericseShortcut('RUNNER_SUBMIT_RUN', handleSubmitRun);
-  useExericseShortcut.useExericseShortcut('RUNNER_SUBMIT_GRADE', handleSubmitGrade);
-  useExericseShortcut.useExericseShortcut('RUNNER_CANCEL', handleCancel);
-  useExericseShortcut.useExericseShortcut('RUNNER_SYNC_REQUEST', handleSyncRequest);
-  //
-  // handle save action emitted by file editor
-  //
-  React__default.default.useEffect(function () {
-    var saveActionSub = subjects.exerciseFileEditorSaveAction$.subscribe(handleSyncRequest);
-    return function () {
-      saveActionSub.unsubscribe();
-    };
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [isSyncRequestDisabled]);
-  /**
-   * Submit to run button
-   */
-  var renderSubmitRunButton = function renderSubmitRunButton() {
-    if (isSubmitRunHidden) {
-      return null;
-    }
-    return jsxRuntime.jsx(StyledControllerButton, {
-      size: "tiny",
-      loading: isConnecting || isSubmitting && exerciseRunType === types.enums.ExerciseRunType.Run,
-      disabled: isSubmitRunDisabled,
-      onClick: handleSubmitRun,
-      children: isArduinoExercise ? intl$1.formatMessage({
-        id: 'exerciseRunner.controller.buttonGroup.button.compile'
-      }) : intl$1.formatMessage({
-        id: 'exerciseRunner.controller.buttonGroup.button.run'
-      })
-    });
-  };
-  /**
-   * Submit to grade button
-   */
-  var renderSubmitGradeButton = function renderSubmitGradeButton() {
-    if (isSubmitGradeHidden) {
-      return null;
-    }
-    return jsxRuntime.jsx(blocks.Tooltip, {
-      dark: true,
-      title: exerciseWithNoGrade ? intl$1.formatMessage({
-        id: 'exerciseRunner.controller.buttonGroup.button.submit.tooltip.noSubmit'
-      }) : undefined,
-      placement: "top",
-      children: jsxRuntime.jsx(StyledControllerButtonWrap, {
-        children: jsxRuntime.jsx(StyledControllerButton, {
-          size: "tiny",
-          role: "secondary",
-          loading: isConnecting || isSubmitting && exerciseRunType === types.enums.ExerciseRunType.Grade,
-          disabled: isSubmitGradeDisabled,
-          onClick: handleSubmitGrade,
-          children: intl$1.formatMessage({
-            id: 'exerciseRunner.controller.buttonGroup.button.submit'
-          })
-        })
-      })
-    });
-  };
-  /**
-   * Cancel button
-   */
-  var renderCancelButton = function renderCancelButton() {
-    if (isCancelHidden) {
-      return null;
-    }
-    return jsxRuntime.jsx(StyledControllerButton, {
-      size: "tiny",
-      role: "danger",
-      loading: isConnecting,
-      disabled: isCancelDisabled,
-      onClick: handleCancel,
-      children: intl$1.formatMessage({
-        id: 'exerciseRunner.controller.buttonGroup.button.stop'
-      })
-    });
-  };
-  /**
-   * Sync request button
-   */
-  var renderSyncRequestButton = function renderSyncRequestButton() {
-    if (isSyncRequestHidden) {
-      return null;
-    }
-    return jsxRuntime.jsx(StyledControllerButton, {
-      size: "tiny",
-      role: "secondary",
-      loading: isConnecting,
-      disabled: isSyncRequestDisabled,
-      onClick: handleSyncRequest,
-      children: intl$1.formatMessage({
-        id: 'exerciseRunner.controller.buttonGroup.button.syncRequest'
-      })
-    });
-  };
-  //
-  //
-  //
-  return jsxRuntime.jsxs(StyledControllerButtonGroup, {
-    children: [renderSubmitRunButton(), renderSubmitGradeButton(), renderCancelButton(), renderSyncRequestButton()]
+  return jsxRuntime.jsxs(material.Stack, {
+    direction: "row",
+    alignItems: "center",
+    gap: "0.5rem",
+    children: [jsxRuntime.jsx(ControllerActionRun.default, {}), jsxRuntime.jsx(ControllerActionGrade.default, {}), jsxRuntime.jsx(ControllerActionCancel.default, {}), jsxRuntime.jsx(ControllerActionSyncRequest.default, {})]
   });
 };
 

package/cjs/components/material-exercise/exercise-runner/ExerciseRunnerControllerCodeHelpRequestButton.d.ts

@@ -1,6 +1,6 @@
 import type React from 'react';
-interface ExerciseRunnerControllerCodeHelpRequestButtonProps {
+interface CodeHelpRequestButtonProps {
     onClick: () => void;
 }
-declare const ExerciseRunnerControllerCodeHelpRequestButton: React.FC<ExerciseRunnerControllerCodeHelpRequestButtonProps>;
+declare const ExerciseRunnerControllerCodeHelpRequestButton: React.FC<CodeHelpRequestButtonProps>;
 export default ExerciseRunnerControllerCodeHelpRequestButton;

package/cjs/components/material-exercise/exercise-runner/action/ControllerActionCancel.d.ts

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

package/cjs/components/material-exercise/exercise-runner/action/ControllerActionCancel.js

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var intl = require('@elice/intl');
+var lab = require('@mui/lab');
+var useControllerActionCancel = require('./useControllerActionCancel.js');
+var useExericseShortcut = require('../../../../hooks/useExericseShortcut.js');
+
+//
+//
+//
+var ControllerActionCancel = function ControllerActionCancel() {
+  var intl$1 = intl.useRawEliceIntl();
+  var _useControllerActionC = useControllerActionCancel.useControllerActionCancel(),
+    isHidden = _useControllerActionC.isHidden,
+    isDisabled = _useControllerActionC.isDisabled,
+    isLoading = _useControllerActionC.isLoading,
+    cancel = _useControllerActionC.cancel;
+  //
+  // register the shortcut
+  //
+  useExericseShortcut.useExericseShortcut('RUNNER_CANCEL', cancel);
+  //
+  //
+  //
+  if (isHidden) {
+    return null;
+  }
+  return jsxRuntime.jsx(lab.LoadingButton, {
+    size: "small",
+    variant: "contained",
+    color: "error",
+    loading: isLoading,
+    disabled: isDisabled,
+    onClick: cancel,
+    children: intl$1.formatMessage({
+      id: 'exerciseRunner.controller.buttonGroup.button.stop'
+    })
+  });
+};
+
+exports.default = ControllerActionCancel;

package/cjs/components/material-exercise/exercise-runner/action/ControllerActionGrade.d.ts

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

package/cjs/components/material-exercise/exercise-runner/action/ControllerActionGrade.js

@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var intl = require('@elice/intl');
+var lab = require('@mui/lab');
+var material = require('@mui/material');
+var useControllerActionGrade = require('./useControllerActionGrade.js');
+var useExericseShortcut = require('../../../../hooks/useExericseShortcut.js');
+
+//
+//
+//
+var ControllerActionGrade = function ControllerActionGrade() {
+  var intl$1 = intl.useRawEliceIntl();
+  var _useControllerActionG = useControllerActionGrade.useControllerActionGrade(),
+    isHidden = _useControllerActionG.isHidden,
+    isDisabled = _useControllerActionG.isDisabled,
+    isLoading = _useControllerActionG.isLoading,
+    isNoGrade = _useControllerActionG.isNoGrade,
+    grade = _useControllerActionG.grade;
+  //
+  // register the shortcut
+  //
+  useExericseShortcut.useExericseShortcut('RUNNER_SUBMIT_GRADE', grade);
+  //
+  //
+  //
+  if (isHidden) {
+    return null;
+  }
+  return jsxRuntime.jsx(material.Tooltip, {
+    title: isNoGrade ? intl$1.formatMessage({
+      id: 'exerciseRunner.controller.buttonGroup.button.submit.tooltip.noSubmit'
+    }) : '',
+    placement: "top",
+    children: jsxRuntime.jsx(material.Box, {
+      component: "span",
+      sx: {
+        display: 'inline-flex'
+      },
+      children: jsxRuntime.jsx(lab.LoadingButton, {
+        size: "small",
+        variant: "contained",
+        color: "info",
+        loading: isLoading,
+        disabled: isDisabled,
+        onClick: grade,
+        children: intl$1.formatMessage({
+          id: 'exerciseRunner.controller.buttonGroup.button.submit'
+        })
+      })
+    })
+  });
+};
+
+exports.default = ControllerActionGrade;

package/cjs/components/material-exercise/exercise-runner/action/ControllerActionRun.d.ts

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

package/cjs/components/material-exercise/exercise-runner/action/ControllerActionRun.js

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var intl = require('@elice/intl');
+var lab = require('@mui/lab');
+var useControllerActionRun = require('./useControllerActionRun.js');
+var useExericseShortcut = require('../../../../hooks/useExericseShortcut.js');
+
+//
+//
+//
+var ControllerActionRun = function ControllerActionRun() {
+  var intl$1 = intl.useRawEliceIntl();
+  var _useControllerActionR = useControllerActionRun.useControllerActionRun(),
+    isHidden = _useControllerActionR.isHidden,
+    isDisabled = _useControllerActionR.isDisabled,
+    isLoading = _useControllerActionR.isLoading,
+    run = _useControllerActionR.run;
+  //
+  // register the shortcut
+  //
+  useExericseShortcut.useExericseShortcut('RUNNER_SUBMIT_RUN', run);
+  //
+  //
+  //
+  if (isHidden) {
+    return null;
+  }
+  return jsxRuntime.jsx(lab.LoadingButton, {
+    size: "small",
+    variant: "contained",
+    color: "primary",
+    loading: isLoading,
+    disabled: isDisabled,
+    onClick: run,
+    children: intl$1.formatMessage({
+      id: 'exerciseRunner.controller.buttonGroup.button.run'
+    })
+  });
+};
+
+exports.default = ControllerActionRun;

package/cjs/components/material-exercise/exercise-runner/action/ControllerActionSyncRequest.d.ts

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