@elice/material-exercise 1.260305.0 → 1.260430.0

package/es/components/material-exercise/exercise-code-history/ExerciseCodeHistory.js

@@ -1,10 +1,12 @@
+import _styled from '@emotion/styled/base';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
-import { Button, Text } from '@elice/blocks';
+import { Flex, Text, Button } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
 import { IntlComponentBuilder } from '@elice/intl';
+import { css } from '@emotion/react';
 import dayjs from 'dayjs';
 import { useRecoilValue } from 'recoil';
-import { StyledModalContent, StyledVersionsWrapper, StyledVersionRangeInputWrapper, StyledVersionRangeInput, StyledEditorWrapper, StyledFileNameBox } from './ExerciseCodeHistory.styled.js';
 import messageEn from './locales/en.json.js';
 import messageKo from './locales/ko.json.js';
 import { useUsercodeHistory } from '../../../hooks/useUsercodeHistory.js';
@@ -15,6 +17,48 @@ import ExerciseVersionListItem from '../../shared/exercise-version-list/Exercise
 import { ExerciseContext } from '../context/context.js';
 import { exerciseActiveFilenameState, exerciseEditorPreferenceState } from '../context/recoil.js';
 
+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 cssInputRangeTrack = "production" === "production" ? {
+  name: "jsy83f",
+  styles: "width:100%;height:0.375rem;cursor:pointer;transition:all 0.2s ease"
+} : {
+  name: "jsy83f",
+  styles: "width:100%;height:0.375rem;cursor:pointer;transition:all 0.2s ease",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var cssInputRangeThumb = /*#__PURE__*/css("height:1rem;width:1rem;border-radius:50%;background:", base.color.primary6, ";cursor:pointer;");
+var StyledModalContent = /*#__PURE__*/_styled(Flex, {
+  target: "e1y3ui135"
+})("production" === "production" ? {
+  name: "1j1fdpn",
+  styles: "position:absolute;width:100%;height:100%;overflow:hidden"
+} : {
+  name: "1j1fdpn",
+  styles: "position:absolute;width:100%;height:100%;overflow:hidden",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledVersionRangeInput = /*#__PURE__*/_styled("input", {
+  target: "e1y3ui134"
+})("--webkit-appearance:none;margin:0.5rem 0;width:100%;cursor:pointer;&:focus{outline:none;}&::-webkit-slider-runnable-track{background:", base.color.navy9, ";", cssInputRangeTrack, ";}&::-webkit-slider-thumb{-webkit-appearance:none;margin-top:calc((0.375rem - 1rem) / 2);", cssInputRangeThumb, ";}&:focus::-webkit-slider-runnable-track{background:rgba(", base.color.navy9, ", 0.05);}&::-moz-range-track{background:", base.color.navy9, ";", cssInputRangeTrack, ";}&::-moz-range-thumb{", cssInputRangeThumb, ";}");
+var StyledVersionsWrapper = /*#__PURE__*/_styled(Flex, {
+  target: "e1y3ui133"
+})("flex-direction:column;flex:1 1.75 25rem;position:relative;height:100%;border-right:1px solid ", base.color.navy9, ";");
+var StyledVersionRangeInputWrapper = /*#__PURE__*/_styled(Flex, {
+  target: "e1y3ui132"
+})("height:3rem;padding:1rem;border-bottom:1px solid ", base.color.navy9, ";");
+var StyledEditorWrapper = /*#__PURE__*/_styled(Flex, {
+  target: "e1y3ui131"
+})("production" === "production" ? {
+  name: "xf8y5j",
+  styles: "flex-direction:column;flex:1 1 auto;width:100%;height:100%;overflow:scroll"
+} : {
+  name: "xf8y5j",
+  styles: "flex-direction:column;flex:1 1 auto;width:100%;height:100%;overflow:scroll",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledFileNameBox = /*#__PURE__*/_styled(Text, {
+  target: "e1y3ui130"
+})("min-height:3rem;height:3rem;line-height:3rem;padding-left:1rem;border-bottom:1px solid ", base.color.navy9, ";");
 var ExerciseCodeHistory = function ExerciseCodeHistory(_ref) {
   var onHide = _ref.onHide,
     onLoadVersionButtonClick = _ref.onLoadVersionButtonClick,

package/es/components/material-exercise/exercise-menu/ExerciseMenu.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
 import type { WithIntlComponentBuilderProps as EliceIntlProps } from '@elice/intl';
+import type React from 'react';
 declare const _default: React.ForwardRefExoticComponent<Omit<import("@elice/intl").IntlComponentExtraProps & Omit<EliceIntlProps, keyof import("@elice/intl").IntlComponentExtraProps | "__intl">, "ref"> & React.RefAttributes<any>>;
 export default _default;

package/es/components/material-exercise/exercise-menu/ExerciseMenu.js

@@ -1,38 +1,22 @@
 import _styled from '@emotion/styled/base';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { base } from '@elice/design-tokens';
 import { IntlComponentBuilder, RawEliceIntlProvider } from '@elice/intl';
-import { enums } from '@elice/types';
-import { useRecoilValue } from 'recoil';
-import ExerciseMenuArduinoAgentModalButton from './ExerciseMenuArduinoAgentModalButton.js';
-import ExerciseMenuArduinoSettings from './ExerciseMenuArduinoSettings.js';
 import ExerciseMenuDropdown from './ExerciseMenuDropdown.js';
 import ExerciseMenuReset from './ExerciseMenuReset.js';
 import ExerciseMenuStdioFileBrowser from './ExerciseMenuStdioFileBrowser.js';
 import messageEn from './locales/en.json.js';
 import messageKo from './locales/ko.json.js';
-import { ExerciseContext } from '../context/context.js';
-import { exerciseState } from '../context/recoil.js';
 
 var StyledExerciseMenuWrapper = /*#__PURE__*/_styled("div", {
   target: "e16oipg60"
 })("display:flex;justify-content:center;align-items:center;padding:0 0.5rem 0 1rem;height:2.25rem;gap:0.5rem;background-color:", base.color.navy8, ";");
 var ExerciseMenu = function ExerciseMenu(_ref) {
   var __intl = _ref.__intl;
-  var _React$useContext = React.useContext(ExerciseContext),
-    materialExerciseId = _React$useContext.materialExerciseId;
-  var exercise = useRecoilValue(exerciseState(materialExerciseId));
-  var isArduinoExercise = (exercise === null || exercise === void 0 ? void 0 : exercise.envType) === enums.ExerciseEnvType.Arduino;
-  //
-  //
-  //
   return jsx(RawEliceIntlProvider, {
     value: __intl,
     children: jsxs(StyledExerciseMenuWrapper, {
-      children: [isArduinoExercise ? jsxs(Fragment, {
-        children: [jsx(ExerciseMenuArduinoAgentModalButton, {}), jsx(ExerciseMenuArduinoSettings, {})]
-      }) : jsx(ExerciseMenuStdioFileBrowser, {}), jsx(ExerciseMenuReset, {}), jsx(ExerciseMenuDropdown, {})]
+      children: [jsx(ExerciseMenuStdioFileBrowser, {}), jsx(ExerciseMenuReset, {}), jsx(ExerciseMenuDropdown, {})]
     })
   });
 };

package/es/components/material-exercise/exercise-menu/ExerciseMenuStdioFileBrowser.styled.js

@@ -68,7 +68,7 @@ var StyledFilePopoverBodyListItemContentImage = /*#__PURE__*/_styled("img", {
   styles: "width:100%;max-height:128px;object-fit:contain;cursor:zoom-in",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-var StyledPreferenceBodyItem = /*#__PURE__*/_styled("div", {
+/*#__PURE__*/_styled("div", {
   target: "e8nx2or1"
 })("production" === "production" ? {
   name: "10vug81",
@@ -78,8 +78,8 @@ var StyledPreferenceBodyItem = /*#__PURE__*/_styled("div", {
   styles: "display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;min-height:2rem;color:white;&:last-child{margin-bottom:0;}",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-var StyledSelect = /*#__PURE__*/_styled(Select, {
+/*#__PURE__*/_styled(Select, {
   target: "e8nx2or0"
 })(">div{background:", base.color.navy8, "!important;border-color:", base.color.navy7, "!important;}select{padding:0!important;height:2rem!important;color:#fff!important;>option{background:", base.color.navy8, "!important;}}");
 
-export { StyledFilePopoverBody, StyledFilePopoverBodyList, StyledFilePopoverBodyListItem, StyledFilePopoverBodyListItemContentFile, StyledFilePopoverBodyListItemContentImage, StyledFilePopoverBodyListItemContentImageWrap, StyledFilePopoverBodyListItemDownloadButton, StyledFilePopoverContent, StyledFilePopoverHeader, StyledMenuButtonFileCount, StyledPreferenceBodyItem, StyledSelect };
+export { StyledFilePopoverBody, StyledFilePopoverBodyList, StyledFilePopoverBodyListItem, StyledFilePopoverBodyListItemContentFile, StyledFilePopoverBodyListItemContentImage, StyledFilePopoverBodyListItemContentImageWrap, StyledFilePopoverBodyListItemDownloadButton, StyledFilePopoverContent, StyledFilePopoverHeader, StyledMenuButtonFileCount };

package/es/components/material-exercise/exercise-menu/locales/en.json.js

@@ -1,3 +1,3 @@
-var messageEn = {"exerciseMenu.dropdown.button.tooltip":"More","exerciseMenu.dropdown.item.codeHistory":"Code Revision History","exerciseMenu.dropdown.item.environment":"Environment","exerciseMenu.dropdown.item.preference":"Editor Preferences","exerciseMenu.dropdown.item.room":"Code Sharing","exerciseMenu.dropdown.item.submitHistory":"Execution/Submission History","exerciseMenu.arduino.agent.button":"Having problem with connecting to Arduino?","exerciseMenu.arduino.setting":"Arduino Setting","exerciseMenu.arduino.setting.device":"Device","exerciseMenu.arduino.setting.noDevice":"No device","exerciseMenu.arduino.setting.selectDevice":"Select device","exerciseMenu.arduino.transferSpeed":"Transfer speed","exerciseMenu.reset.button.tooltip.disabled":"The file cannot be reset","exerciseMenu.reset.button.tooltip.enabled":"Reset the file","exerciseMenu.reset.confirmDialog.body":"Are you sure you want to clear all the code you wrote at current file and reset it?","exerciseMenu.reset.confirmDialog.cancel":"Cancel","exerciseMenu.reset.confirmDialog.confirm":"Confirm","exerciseMenu.reset.confirmDialog.title":"Reset the file","exerciseMenu.stdioFileBrowser.button.tooltip":"File","exerciseMenu.stdioFileBrowser.popover.body.placeholder":"Files sent from your code\nappear here.","exerciseMenu.stdioFileBrowser.popover.header":"File"};
+var messageEn = {"exerciseMenu.dropdown.button.tooltip":"More","exerciseMenu.dropdown.item.codeHistory":"Code Revision History","exerciseMenu.dropdown.item.environment":"Environment","exerciseMenu.dropdown.item.preference":"Editor Preferences","exerciseMenu.dropdown.item.room":"Code Sharing","exerciseMenu.dropdown.item.submitHistory":"Execution/Submission History","exerciseMenu.arduino.setting":"Arduino Setting","exerciseMenu.arduino.transferSpeed":"Transfer speed","exerciseMenu.reset.button.tooltip.disabled":"The file cannot be reset","exerciseMenu.reset.button.tooltip.enabled":"Reset the file","exerciseMenu.reset.confirmDialog.body":"Are you sure you want to clear all the code you wrote at current file and reset it?","exerciseMenu.reset.confirmDialog.cancel":"Cancel","exerciseMenu.reset.confirmDialog.confirm":"Confirm","exerciseMenu.reset.confirmDialog.title":"Reset the file","exerciseMenu.stdioFileBrowser.button.tooltip":"File","exerciseMenu.stdioFileBrowser.popover.body.placeholder":"Files sent from your code\nappear here.","exerciseMenu.stdioFileBrowser.popover.header":"File"};
 
 export { messageEn as default };

package/es/components/material-exercise/exercise-menu/locales/ko.json.js

@@ -1,3 +1,3 @@
-var messageKo = {"exerciseMenu.dropdown.button.tooltip":"더 보기","exerciseMenu.dropdown.item.codeHistory":"코드 수정 이력","exerciseMenu.dropdown.item.environment":"실습 환경","exerciseMenu.dropdown.item.preference":"에디터 설정","exerciseMenu.dropdown.item.room":"코드 공유","exerciseMenu.dropdown.item.submitHistory":"실행/제출 이력","exerciseMenu.arduino.agent.button":"아두이노 연결 중 문제가 발생했나요?","exerciseMenu.arduino.setting":"아두이노 세팅","exerciseMenu.arduino.setting.device":"장치","exerciseMenu.arduino.setting.noDevice":"장치 없음","exerciseMenu.arduino.setting.selectDevice":"장치 선택","exerciseMenu.arduino.transferSpeed":"전송 속도","exerciseMenu.reset.button.tooltip.disabled":"해당 파일은 초기화를 할 수 없습니다","exerciseMenu.reset.button.tooltip.enabled":"코드 초기화","exerciseMenu.reset.confirmDialog.body":"작성한 코드를 모두 지우고 초기화하시겠습니까?","exerciseMenu.reset.confirmDialog.cancel":"취소","exerciseMenu.reset.confirmDialog.confirm":"확인","exerciseMenu.reset.confirmDialog.title":"코드 초기화","exerciseMenu.stdioFileBrowser.button.tooltip":"파일","exerciseMenu.stdioFileBrowser.popover.body.placeholder":"코드에서 전송한 파일이\n여기에 표시됩니다.","exerciseMenu.stdioFileBrowser.popover.header":"파일"};
+var messageKo = {"exerciseMenu.dropdown.button.tooltip":"더 보기","exerciseMenu.dropdown.item.codeHistory":"코드 수정 이력","exerciseMenu.dropdown.item.environment":"실습 환경","exerciseMenu.dropdown.item.preference":"에디터 설정","exerciseMenu.dropdown.item.room":"코드 공유","exerciseMenu.dropdown.item.submitHistory":"실행/제출 이력","exerciseMenu.arduino.setting":"아두이노 세팅","exerciseMenu.arduino.transferSpeed":"전송 속도","exerciseMenu.reset.button.tooltip.disabled":"해당 파일은 초기화를 할 수 없습니다","exerciseMenu.reset.button.tooltip.enabled":"코드 초기화","exerciseMenu.reset.confirmDialog.body":"작성한 코드를 모두 지우고 초기화하시겠습니까?","exerciseMenu.reset.confirmDialog.cancel":"취소","exerciseMenu.reset.confirmDialog.confirm":"확인","exerciseMenu.reset.confirmDialog.title":"코드 초기화","exerciseMenu.stdioFileBrowser.button.tooltip":"파일","exerciseMenu.stdioFileBrowser.popover.body.placeholder":"코드에서 전송한 파일이\n여기에 표시됩니다.","exerciseMenu.stdioFileBrowser.popover.header":"파일"};
 
 export { messageKo as default };

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

@@ -1,8 +1,7 @@
 import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regenerator as _regenerator, toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import _styled from '@emotion/styled/base';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
-import { useEvent } from 'react-use';
 import { postOrgMaterialExerciseExerciseRunningSubmit, postOrgMaterialExerciseExerciseRunningCancel } from '@elice/api-client';
 import { Flex, ResizableNext, Dialog } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
@@ -16,10 +15,10 @@ import ExerciseRunnerController from './ExerciseRunnerController.js';
 import messageEn from './locales/en.json.js';
 import messageKo from './locales/ko.json.js';
 import { exerciseState, exerciseEditorPreferenceState, exerciseActiveFilenameState, exerciseRunnerSubmittingState, exerciseRunnerRunningState, exerciseRunnerRunTypeState, exerciseRunnerRoomConnectionInfoState, exerciseRunnerStdioFilesState, exercisePreviewTypeState, exercisePreviewDisplayModeState, exerciseMonacoEditorApisState, exerciseWebsocketQuery, exerciseContainerSizeState } from '../context/recoil.js';
-import { useArduino } from '../../../hooks/useArduino.js';
 import { useRunnerRoomWebSocket } from '../../../hooks/useRunnerRoomWebSocket.js';
 import { useStdioWebSocket } from '../../../hooks/useStdioWebSocket.js';
 import { exerciseRunnerTextSend$, exerciseFileEditorSyncRequestAction$ } from '../context/subjects.js';
+import ArduinoBridgeProvider from './arduino/ArduinoProvider.js';
 import XtermLazy from '../../shared/xterm/XtermLazy.js';
 import { withTimeout } from '../../../utils/async.js';
 import { getProgrammingErrorResult } from '../../../utils/runner.js';
@@ -102,26 +101,8 @@ var ExerciseRunner = function ExerciseRunner(_ref) {
   var arduinoTextBuffer = React.useRef('');
   var runnerRunTypeRef = React.useRef(runnerRunTypeState);
   var xterm = React.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({
-    writeTerminal: handleArduinoDigitalOutput
-  });
+  var arduinoBridgeApi = React.useRef(null);
   var isArduinoExercise = (exercise === null || exercise === void 0 ? void 0 : exercise.envType) === enums.ExerciseEnvType.Arduino;
-  /**
-   * Handle destroy arduino client.
-   */
-  var handleArduinoDistroy = React.useCallback(function () {
-    if (isArduinoExercise) {
-      arduino.destroy();
-    }
-  }, [isArduinoExercise, arduino]);
   /**
    * Handle text received from stdio websocket.
    */
@@ -144,10 +125,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;
     }
@@ -407,7 +389,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":
@@ -418,13 +400,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;
     }
@@ -440,24 +422,6 @@ var ExerciseRunner = function ExerciseRunner(_ref) {
     }
   };
   //
-  // Initialize Arduino devices.
-  //
-  React.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.
-  //
-  useEvent('beforeunload', handleArduinoDistroy, window);
-  //
   // Update runner room websocket state.
   //
   React.useEffect(function () {
@@ -594,23 +558,29 @@ var ExerciseRunner = function ExerciseRunner(_ref) {
   //
   //
   //
+  var runnerBody = jsxs(ExerciseRunnerContext.Provider, {
+    value: {
+      onSubmit: handleRunnerSubmit,
+      onCancel: handleRunnerCancel,
+      onSyncRequest: handleRunnerSyncRequest
+    },
+    children: [jsx(ExerciseRunnerController, {}), jsxs(Flex, {
+      auto: true,
+      style: {
+        minHeight: 0
+      },
+      overflow: "hidden",
+      children: [renderPreview(), renderXterm(), renderRunnerSubmitErrorDialog()]
+    })]
+  });
   return jsx(RawEliceIntlProvider, {
     value: __intl,
     children: jsx(StyledExerciseRunner, {
-      children: jsxs(ExerciseRunnerContext.Provider, {
-        value: {
-          onSubmit: handleRunnerSubmit,
-          onCancel: handleRunnerCancel,
-          onSyncRequest: handleRunnerSyncRequest
-        },
-        children: [jsx(ExerciseRunnerController, {}), jsxs(Flex, {
-          auto: true,
-          style: {
-            minHeight: 0
-          },
-          overflow: "hidden",
-          children: [renderPreview(), renderXterm(), renderRunnerSubmitErrorDialog()]
-        })]
+      children: jsx(ArduinoBridgeProvider, {
+        enabled: isArduinoExercise,
+        xtermRef: xterm,
+        apiRef: arduinoBridgeApi,
+        children: runnerBody
       })
     })
   });

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

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

package/es/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/es/components/material-exercise/exercise-runner/ExerciseRunnerControllerButtonGroup.js

@@ -1,220 +1,19 @@
-import { toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import _styled from '@emotion/styled/base';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React from 'react';
-import { Button, Tooltip } from '@elice/blocks';
-import { useRawEliceIntl } from '@elice/intl';
-import { colors } from '@elice/mui-system';
-import { enums } from '@elice/types';
-import { EliceWebSocket } from '@elice/websocket';
-import { useRecoilValue } from 'recoil';
-import { ExerciseRunnerContext } from './ExerciseRunnerContext.js';
-import { exerciseActiveFilenameState, exerciseWebSocketTotalStatusQuery, exerciseState, exerciseRunnerRunTypeState, exerciseLectureState, exerciseRunnerSubmittingState, exerciseRunnerRunningState, exerciseArduinoUploadProgressState, exerciseArduinoOpenedPortNameState } from '../context/recoil.js';
-import { useExericseShortcut } from '../../../hooks/useExericseShortcut.js';
-import { ExerciseContext } from '../context/context.js';
-import { useExerciseFileEditable } from '../../../hooks/useExerciseFile.js';
-import { exerciseFileEditorSaveAction$ } from '../context/subjects.js';
+import { Stack } from '@mui/material';
+import ControllerActionRun from './action/ControllerActionRun.js';
+import ControllerActionGrade from './action/ControllerActionGrade.js';
+import ControllerActionCancel from './action/ControllerActionCancel.js';
+import ControllerActionSyncRequest from './action/ControllerActionSyncRequest.js';
 
-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(Button, {
-  target: "e45p2z2"
-})("position:relative;transition:none;&.eb-button--role-danger{border-color:", colors.red[700], ";background-color:", colors.red[700], ";}");
-var StyledControllerButtonWrap = /*#__PURE__*/_styled("div", {
-  target: "e45p2z1"
-})("production" === "production" ? {
-  name: "zjik7",
-  styles: "display:flex"
-} : {
-  name: "zjik7",
-  styles: "display:flex",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-var StyledControllerButtonGroup = /*#__PURE__*/_styled("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 = useRawEliceIntl();
-  var _React$useContext = React.useContext(ExerciseContext),
-    materialExerciseId = _React$useContext.materialExerciseId;
-  var _React$useContext2 = React.useContext(ExerciseRunnerContext),
-    onSubmit = _React$useContext2.onSubmit,
-    onSyncRequest = _React$useContext2.onSyncRequest,
-    onCancel = _React$useContext2.onCancel;
-  var activeFilename = useRecoilValue(exerciseActiveFilenameState);
-  var isFileEditable = useExerciseFileEditable(activeFilename);
-  var runnerWebsocketStatus = useRecoilValue(exerciseWebSocketTotalStatusQuery([].concat(_toConsumableArray(isFileEditable ? ['usercodeEdit'] : []), ['runnerRoom', 'stdio'])));
-  var exercise = useRecoilValue(exerciseState(materialExerciseId));
-  var exerciseRunType = useRecoilValue(exerciseRunnerRunTypeState);
-  var exerciseWithNoGrade = Boolean(exercise === null || exercise === void 0 ? void 0 : exercise.isNoSubmitGrade);
-  var lecture = useRecoilValue(exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise._lectureId));
-  var isTestLecture = (lecture === null || lecture === void 0 ? void 0 : lecture.lectureType) === enums.LectureType.Test;
-  var isTestLectureCompleted = (lecture === null || lecture === void 0 ? void 0 : lecture.testAdmissionStatus) === enums.TestAdmissionStatus.Completed;
-  // runner states
-  var isSubmitting = useRecoilValue(exerciseRunnerSubmittingState);
-  var isRunning = useRecoilValue(exerciseRunnerRunningState);
-  var isConnecting = runnerWebsocketStatus === EliceWebSocket.CONNECTING;
-  var isNotReady = runnerWebsocketStatus !== EliceWebSocket.OPEN;
-  // arduino
-  var isArduinoExercise = (exercise === null || exercise === void 0 ? void 0 : exercise.envType) === enums.ExerciseEnvType.Arduino;
-  var arduinoUploadProgress = useRecoilValue(exerciseArduinoUploadProgressState);
-  var arduinoOpenedPortName = useRecoilValue(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(enums.ExerciseRunType.Run);
-    }
-  };
-  /**
-   * Submit to grade
-   */
-  var handleSubmitGrade = function handleSubmitGrade() {
-    if (!isSubmitGradeDisabled) {
-      void onSubmit(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('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(function () {
-    var saveActionSub = 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 jsx(StyledControllerButton, {
-      size: "tiny",
-      loading: isConnecting || isSubmitting && exerciseRunType === enums.ExerciseRunType.Run,
-      disabled: isSubmitRunDisabled,
-      onClick: handleSubmitRun,
-      children: isArduinoExercise ? intl.formatMessage({
-        id: 'exerciseRunner.controller.buttonGroup.button.compile'
-      }) : intl.formatMessage({
-        id: 'exerciseRunner.controller.buttonGroup.button.run'
-      })
-    });
-  };
-  /**
-   * Submit to grade button
-   */
-  var renderSubmitGradeButton = function renderSubmitGradeButton() {
-    if (isSubmitGradeHidden) {
-      return null;
-    }
-    return jsx(Tooltip, {
-      dark: true,
-      title: exerciseWithNoGrade ? intl.formatMessage({
-        id: 'exerciseRunner.controller.buttonGroup.button.submit.tooltip.noSubmit'
-      }) : undefined,
-      placement: "top",
-      children: jsx(StyledControllerButtonWrap, {
-        children: jsx(StyledControllerButton, {
-          size: "tiny",
-          role: "secondary",
-          loading: isConnecting || isSubmitting && exerciseRunType === enums.ExerciseRunType.Grade,
-          disabled: isSubmitGradeDisabled,
-          onClick: handleSubmitGrade,
-          children: intl.formatMessage({
-            id: 'exerciseRunner.controller.buttonGroup.button.submit'
-          })
-        })
-      })
-    });
-  };
-  /**
-   * Cancel button
-   */
-  var renderCancelButton = function renderCancelButton() {
-    if (isCancelHidden) {
-      return null;
-    }
-    return jsx(StyledControllerButton, {
-      size: "tiny",
-      role: "danger",
-      loading: isConnecting,
-      disabled: isCancelDisabled,
-      onClick: handleCancel,
-      children: intl.formatMessage({
-        id: 'exerciseRunner.controller.buttonGroup.button.stop'
-      })
-    });
-  };
-  /**
-   * Sync request button
-   */
-  var renderSyncRequestButton = function renderSyncRequestButton() {
-    if (isSyncRequestHidden) {
-      return null;
-    }
-    return jsx(StyledControllerButton, {
-      size: "tiny",
-      role: "secondary",
-      loading: isConnecting,
-      disabled: isSyncRequestDisabled,
-      onClick: handleSyncRequest,
-      children: intl.formatMessage({
-        id: 'exerciseRunner.controller.buttonGroup.button.syncRequest'
-      })
-    });
-  };
-  //
-  //
-  //
-  return jsxs(StyledControllerButtonGroup, {
-    children: [renderSubmitRunButton(), renderSubmitGradeButton(), renderCancelButton(), renderSyncRequestButton()]
+  return jsxs(Stack, {
+    direction: "row",
+    alignItems: "center",
+    gap: "0.5rem",
+    children: [jsx(ControllerActionRun, {}), jsx(ControllerActionGrade, {}), jsx(ControllerActionCancel, {}), jsx(ControllerActionSyncRequest, {})]
   });
 };
 

package/es/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/es/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;