@elice/material-exercise 1.230217.0-sepmatlec.3 → 1.230220.1

package/cjs/components/material-exercise/context/ExerciseProvider.js

@@ -44,8 +44,8 @@ const ExerciseProvider = _a => {
   const exercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
   const exerciseRoom = recoil.useRecoilValue(recoil$1.exerciseRoomState(exerciseRoomId)); // lecture
 
-  const lecture = recoil.useRecoilValue(recoil$1.exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise._lectureId));
-  const resetLecture = recoil.useResetRecoilState(recoil$1.exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise._lectureId)); // multilang languages
+  const lecture = recoil.useRecoilValue(recoil$1.exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise.lectureId));
+  const resetLecture = recoil.useResetRecoilState(recoil$1.exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise.lectureId)); // multilang languages
 
   const exerciseMultilangLanguages = recoil.useRecoilValue(recoil$1.exerciseMultilangLanguagesState(exercise === null || exercise === void 0 ? void 0 : exercise.id));
   const resetExerciseMultilangLanguages = recoil.useResetRecoilState(recoil$1.exerciseMultilangLanguagesState(exercise === null || exercise === void 0 ? void 0 : exercise.id)); // etc
@@ -83,7 +83,7 @@ const ExerciseProvider = _a => {
   //
 
   React__default["default"].useEffect(() => {
-    if (!(exercise === null || exercise === void 0 ? void 0 : exercise._lectureId)) {
+    if (!(exercise === null || exercise === void 0 ? void 0 : exercise.lectureId)) {
       return;
     }
 

package/cjs/components/material-exercise/context/recoil.js

@@ -74,17 +74,7 @@ const exerciseState = recoil.atomFamily({
     const get = async () => {
       setSelf(await apiClient.getOrgMaterialExerciseGet({
         materialExerciseId
-      }).then(res => res.materialExercise).then(materialExercise => Promise.all([materialExercise, apiClient.getOrgLecturePageResolve({
-        materialId: materialExercise.id,
-        materialType: types.enums.LectureMaterialType.Exercise
-      }).then(res => ({
-        _courseId: res.courseId,
-        _lectureId: res.lectureId,
-        _lecturePageId: res.lecturePageId,
-        _orderNo: res.orderNo
-      })).catch(err => {
-        throw err;
-      })])).then(([materialExercise, lecturePageResolve]) => Object.assign(Object.assign({}, materialExercise), lecturePageResolve)).catch(() => null));
+      }).then(res => res.materialExercise).catch(() => null));
     };
 
     if (trigger === 'get') {

package/cjs/components/material-exercise/context/recoilTypes.d.ts

@@ -10,12 +10,7 @@ export declare type AtomLectureState = GetOrgLectureGetResponses['lecture'] | nu
 /**
  * Material exercise.
  */
-export declare type AtomExerciseState = (GetOrgMaterialExerciseGetResponses['materialExercise'] & {
-    _courseId: number;
-    _lectureId: number;
-    _lecturePageId: number;
-    _orderNo: number;
-}) | null;
+export declare type AtomExerciseState = GetOrgMaterialExerciseGetResponses['materialExercise'] | null;
 /**
  * Material exercise room.
  */

package/cjs/components/material-exercise/exercise-file-editor/ExerciseFileEditor.js

@@ -53,7 +53,7 @@ const ExerciseFileEditor = () => {
   } = React__default["default"].useContext(context.ExerciseContext);
   const exercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
   const exerciseRoom = recoil.useRecoilValue(recoil$1.exerciseRoomState(exerciseRoomId));
-  const lecture = recoil.useRecoilValue(recoil$1.exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise._lectureId));
+  const lecture = recoil.useRecoilValue(recoil$1.exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise.lectureId));
   const preference = recoil.useRecoilValue(recoil$1.exerciseEditorPreferenceState);
   const activeFilename = recoil.useRecoilValue(recoil$1.exerciseActiveFilenameState);
   const readOnly = readOnlyEditor || readOnlyActiveFile;

package/cjs/components/material-exercise/exercise-menu/ExerciseMenuDropdown.js

@@ -27,7 +27,7 @@ const ExerciseMenuDropdown = () => {
   } = React__default["default"].useContext(context.ExerciseContext);
   const user = recoil.useRecoilValue(recoil$1.exerciseUserState);
   const exercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
-  const lecture = recoil.useRecoilValue(recoil$1.exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise._lectureId));
+  const lecture = recoil.useRecoilValue(recoil$1.exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise.lectureId));
   const activeFilename = recoil.useRecoilValue(recoil$1.exerciseActiveFilenameState);
   const setRightpaneActiveState = recoil.useSetRecoilState(recoil$1.exerciseRightpaneActiveState);
   const [isSubmitHistoryModalOpen, setIsSubmitHistoryModalOpen] = React__default["default"].useState(false);

package/cjs/components/material-exercise/exercise-room/ExerciseRoomDetail.js

@@ -34,7 +34,7 @@ const MaterialExerciseExerciseRoomDetail = ({
   goToList,
   onHide
 }) => {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f;
 
   const intl = reactIntl.useIntl();
   const {
@@ -52,7 +52,7 @@ const MaterialExerciseExerciseRoomDetail = ({
   const [isLeaveDialogOpen, setIsLeaveDialogOpen] = React__default["default"].useState(false);
   const [isDeleting, setIsDeleting] = React__default["default"].useState(false);
   const isThisChatRoomOwner = (_b = ((_a = exerciseRoom === null || exerciseRoom === void 0 ? void 0 : exerciseRoom.roomUsers.find(roomUser => roomUser.user.id === (user === null || user === void 0 ? void 0 : user.id))) === null || _a === void 0 ? void 0 : _a.permission) === types.enums.ExerciseRoomPermission.Owner) !== null && _b !== void 0 ? _b : false;
-  const shareLink = materialExercise ? `https://${window.location.host}/courses/${materialExercise._courseId}/lectures/${materialExercise === null || materialExercise === void 0 ? void 0 : materialExercise._lectureId}/materials/${materialExercise === null || materialExercise === void 0 ? void 0 : materialExercise._orderNo}/projects/${selectedExerciseRoomId}` : '';
+  const shareLink = materialExercise ? `https://${window.location.host}/courses/${materialExercise.courseId}/lectures/${materialExercise.lectureId}/materials/${(_c = materialExercise === null || materialExercise === void 0 ? void 0 : materialExercise.mainOrderNo) !== null && _c !== void 0 ? _c : 0}/projects/${selectedExerciseRoomId}` : '';
   const [, copyToClipboard] = reactUse.useCopyToClipboard();
   const doGetOrgMaterialExerciseExerciseRoomGet = React__default["default"].useCallback(() => {
     return apiClient.getOrgMaterialExerciseExerciseRoomGet({
@@ -100,7 +100,7 @@ const MaterialExerciseExerciseRoomDetail = ({
   const doGetOrgCourseUserList = React__default["default"].useCallback(() => {
     if (materialExercise) {
       return apiClient.getOrgCourseUserList({
-        courseId: materialExercise._courseId,
+        courseId: materialExercise.courseId,
         isForTutoring: false,
         count: 20,
         offset: 0,
@@ -174,7 +174,7 @@ const MaterialExerciseExerciseRoomDetail = ({
   return React__default["default"].createElement(StyledModal, {
     theme: "dark",
     onHide: onHide,
-    title: (_c = exerciseRoom === null || exerciseRoom === void 0 ? void 0 : exerciseRoom.title) !== null && _c !== void 0 ? _c : '',
+    title: (_d = exerciseRoom === null || exerciseRoom === void 0 ? void 0 : exerciseRoom.title) !== null && _d !== void 0 ? _d : '',
     headerIcon: icons.eilArrowLeftwardsSingle,
     onHeaderIconClick: goToList,
     footerChild: exerciseRoom ? exerciseRoom.isDefaultRoom ? React__default["default"].createElement(blocks.Flex, {
@@ -217,7 +217,7 @@ const MaterialExerciseExerciseRoomDetail = ({
       label: intl.formatMessage({
         id: 'materialExerciseExerciseRoom.leave'
       }),
-      disabled: (_d = exerciseRoom === null || exerciseRoom === void 0 ? void 0 : exerciseRoom.isDefaultRoom) !== null && _d !== void 0 ? _d : false,
+      disabled: (_e = exerciseRoom === null || exerciseRoom === void 0 ? void 0 : exerciseRoom.isDefaultRoom) !== null && _e !== void 0 ? _e : false,
       role: 'gray6',
       onClick: () => {
         setIsLeaveDialogOpen(true);
@@ -449,7 +449,7 @@ const MaterialExerciseExerciseRoomDetail = ({
   }), isThisChatRoomOwner ? React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(blocks.Select, {
     size: "small",
     width: "small",
-    value: (_e = exerciseRoom === null || exerciseRoom === void 0 ? void 0 : exerciseRoom.publicPermission) !== null && _e !== void 0 ? _e : types.enums.ExerciseRoomPermission.Nothing,
+    value: (_f = exerciseRoom === null || exerciseRoom === void 0 ? void 0 : exerciseRoom.publicPermission) !== null && _f !== void 0 ? _f : types.enums.ExerciseRoomPermission.Nothing,
     onChange: value => {
       doPostOrgMaterialExerciseExerciseRoomEdit(value);
     },

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

@@ -46,8 +46,7 @@ const ExerciseRunnerControllerButtonGroup = () => {
 
   const intl = reactIntl.useIntl();
   const {
-    materialExerciseId,
-    onCodeHelpRequest
+    materialExerciseId
   } = React__default["default"].useContext(context.ExerciseContext);
   const {
     onSubmit,
@@ -55,11 +54,10 @@ const ExerciseRunnerControllerButtonGroup = () => {
     onCancel
   } = React__default["default"].useContext(ExerciseRunnerContext.ExerciseRunnerContext);
   const runnerWebsocketStatus = recoil.useRecoilValue(recoil$1.exerciseRunnerWebSocketStatusQuery);
-  const editorCursorSelectionValue = recoil.useRecoilValue(recoil$1.exerciseFileEditorCursorSelectionValueState);
   const exercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
   const exerciseRunType = recoil.useRecoilValue(recoil$1.exerciseRunnerRunTypeState);
   const exerciseWithNoGrade = Boolean(exercise === null || exercise === void 0 ? void 0 : exercise.isNoSubmitGrade);
-  const lecture = recoil.useRecoilValue(recoil$1.exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise._lectureId));
+  const lecture = recoil.useRecoilValue(recoil$1.exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise.lectureId));
   const isTestLecture = (lecture === null || lecture === void 0 ? void 0 : lecture.lectureType) === types.enums.LectureType.Test;
   const isTestLectureCompleted = (lecture === null || lecture === void 0 ? void 0 : lecture.testAdmissionStatus) === types.enums.TestAdmissionStatus.Completed; // runner states
 
@@ -241,12 +239,8 @@ const ExerciseRunnerControllerButtonGroup = () => {
 
 
   const renderCodeHelpRequestButton = () => {
-    if (isCodeHelpHidden || !editorCursorSelectionValue || typeof onCodeHelpRequest !== 'function') {
-      return null;
-    }
-
     return React__default["default"].createElement(ExerciseRunnerControllerCodeHelpRequestButton, {
-      onClick: () => onCodeHelpRequest(editorCursorSelectionValue)
+      isCodeHelpHidden: isCodeHelpHidden
     });
   }; //
   //

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import type { ButtonProps } from '@elice/blocks';
-declare type OmittedButtonProps = Omit<ButtonProps, 'size' | 'role' | 'icon' | 'iconAlign'>;
-declare const ExerciseRunnerControllerCodeHelpRequestButton: React.ForwardRefExoticComponent<OmittedButtonProps & React.RefAttributes<HTMLButtonElement>>;
+interface ExerciseRunnerControllerCodeHelpRequestButtonProps {
+    isCodeHelpHidden: boolean;
+}
+declare const ExerciseRunnerControllerCodeHelpRequestButton: React.FC<ExerciseRunnerControllerCodeHelpRequestButtonProps>;
 export default ExerciseRunnerControllerCodeHelpRequestButton;

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

@@ -4,106 +4,115 @@ var React = require('react');
 var reactIntl = require('react-intl');
 var apiClient = require('@elice/api-client');
 var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
 var icons = require('@elice/icons');
 var materialSharedUtils = require('@elice/material-shared-utils');
+var recoil = require('recoil');
 var styled = require('styled-components');
+var recoil$1 = require('../context/recoil.js');
+var context = require('../context/context.js');
+require('../context/recoilTypes.js');
+require('../context/subjects.js');
+require('../context/ExerciseProvider.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_KEY = 'elice-material-exercise-aibot-tooltip-hidden';
-const ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_VALUE = 'true';
+const IS_TOOLTIP_OPENED_KEY = 'isTooltipOpened';
+const IS_TOOLTIP_OPENED_VALUE = 'true';
 const StyledControllerButton = styled__default["default"](blocks.Button).withConfig({
   componentId: "sc-10grd0k-0"
 })(["position:relative;transition:none;"]);
-const ExerciseRunnerControllerCodeHelpRequestButton = React__default["default"].forwardRef((props, ref) => {
+const StyledCustomTooltip = styled__default["default"].div.withConfig({
+  componentId: "sc-10grd0k-1"
+})(["position:absolute;top:calc(-100% - 1.25rem);left:calc(-100% - 1.5rem);display:flex;align-items:center;gap:0.25rem;padding:0.5rem 0.75rem;border-radius:0.5rem;background-color:", ";"], designTokens.base.color.white);
+const StyledTip = styled__default["default"].svg.withConfig({
+  componentId: "sc-10grd0k-2"
+})(["position:absolute;left:50%;bottom:calc(-0.25rem);transform:rotate(225deg);"]);
+const StyledCustomBadge = styled__default["default"].div.withConfig({
+  componentId: "sc-10grd0k-3"
+})(["padding:0.0625rem 0.25rem;border-radius:0.25rem;background-color:", ";font-size:0.6875rem;"], designTokens.base.color.red7);
+
+const ExerciseRunnerControllerCodeHelpRequestButton = ({
+  isCodeHelpHidden
+}) => {
+  const {
+    onCodeHelpRequest
+  } = React__default["default"].useContext(context.ExerciseContext);
   const {
     orgNameShort
   } = materialSharedUtils.useMaterialConfig();
-  const [isTooltipHidden, setIsTooltipHidden] = React__default["default"].useState(false); //
+  const editorCursorSelectionValue = recoil.useRecoilValue(recoil$1.exerciseFileEditorCursorSelectionValueState);
+  const [isTooltipOpened, setIsTooltipOpened] = React__default["default"].useState(false);
+  const [aiInfo, setAiInfo] = React__default["default"].useState(null); //
   //
   // Get ai info from organization and check all resovle below conditions.
-  // - isEnable is true.
-  // - quotaPerDay is upper than zero.
-  // - tooltip hidden is false.
+  // - isEnable is true
+  // - quotaPerDay is upper than zero
+  // - tooltipOpenSession is false
 
   React__default["default"].useEffect(() => {
-    const isTooltipHidden = sessionStorage.getItem(ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_KEY) === ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_VALUE;
-
-    if (isTooltipHidden) {
-      setIsTooltipHidden(true);
-      return;
-    }
-
-    apiClient.getGlobalOrganizationGet({
+    void apiClient.getGlobalOrganizationGet({
       organizationNameShort: orgNameShort
     }).then(res => {
-      const {
-        aibotInfo
-      } = res.organization;
-      const isHidden = !aibotInfo.isEnabled || aibotInfo.quotaPerDay <= 0;
-      setIsTooltipHidden(isHidden);
-    }).catch(() => {
-      setIsTooltipHidden(true);
-    }); // eslint-disable-next-line react-hooks/exhaustive-deps
+      setAiInfo(res.organization.aibotInfo);
+    });
+    const isTooltipOpend = sessionStorage.getItem(IS_TOOLTIP_OPENED_KEY);
+
+    if (isTooltipOpend === IS_TOOLTIP_OPENED_VALUE) {
+      setIsTooltipOpened(true);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, []); //
   //
   //
 
-  /**
-   *
-   */
-
-  const renderAiBotTooltipTitle = () => {
-    return React__default["default"].createElement(blocks.Flex, {
-      align: "center"
-    }, React__default["default"].createElement(blocks.BadgeNext, {
-      role: "red"
-    }, React__default["default"].createElement(blocks.Text, {
-      role: "white",
-      size: "tiny",
-      bold: true
-    }, "NEW")), React__default["default"].createElement(blocks.Hspace, {
-      width: 0.25
-    }), React__default["default"].createElement(blocks.Text, {
-      role: "gray7",
-      size: "small",
-      bold: true
-    }, React__default["default"].createElement(reactIntl.FormattedMessage, {
-      id: "exerciseRunner.controller.buttonGroup.button.tooltip.aiHelp"
-    })), React__default["default"].createElement(blocks.Hspace, {
-      width: 0.25
-    }), React__default["default"].createElement(blocks.IconButton, {
-      size: "tiny",
-      role: "gray6",
-      hasPadding: false,
-      border: false,
-      icon: icons.eilMathsignMultiplyBasic,
-      onClick: () => {
-        sessionStorage.setItem(ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_KEY, ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_VALUE);
-        setIsTooltipHidden(true);
-      }
-    }));
-  };
+  if (isCodeHelpHidden || !editorCursorSelectionValue || typeof onCodeHelpRequest !== 'function') {
+    return null;
+  }
 
-  return React__default["default"].createElement(blocks.Tooltip, {
-    placement: "top",
-    dark: false,
-    visible: !isTooltipHidden,
-    title: renderAiBotTooltipTitle()
-  }, React__default["default"].createElement(StyledControllerButton, Object.assign({}, props, {
-    ref: ref,
+  return React__default["default"].createElement(StyledControllerButton, {
     size: "tiny",
     role: "darkblue",
     icon: React__default["default"].createElement(blocks.Icon, {
       icon: icons.eilArrowRightwardsBasic
     }),
-    iconAlign: "right"
-  }), React__default["default"].createElement(reactIntl.FormattedMessage, {
+    iconAlign: "right",
+    onClick: () => {
+      onCodeHelpRequest(editorCursorSelectionValue);
+    }
+  }, React__default["default"].createElement(reactIntl.FormattedMessage, {
     id: "exerciseRunner.controller.buttonGroup.button.helpRequest"
-  })));
-});
+  }), aiInfo && aiInfo.isEnabled && aiInfo.quotaPerDay > 0 && !isTooltipOpened ? React__default["default"].createElement(StyledCustomTooltip, {
+    onClick: e => {
+      e.stopPropagation();
+    }
+  }, React__default["default"].createElement(StyledCustomBadge, null, React__default["default"].createElement(blocks.Text, {
+    role: "white",
+    size: "tiny"
+  }, "NEW")), React__default["default"].createElement(blocks.Text, {
+    role: "gray7",
+    size: "small"
+  }, React__default["default"].createElement(reactIntl.FormattedMessage, {
+    id: "exerciseRunner.controller.buttonGroup.button.tooltip.aiHelp"
+  })), React__default["default"].createElement(blocks.IconButton, {
+    size: "tiny",
+    hasPadding: false,
+    border: false,
+    icon: icons.eilMathsignMultiplyBasic,
+    onClick: () => {
+      sessionStorage.setItem(IS_TOOLTIP_OPENED_KEY, IS_TOOLTIP_OPENED_VALUE);
+      setIsTooltipOpened(true);
+    }
+  }), React__default["default"].createElement(StyledTip, {
+    viewBox: "0 0 50 50",
+    height: "0.5rem"
+  }, React__default["default"].createElement("path", {
+    d: "M1 50 V10 Q1 1 10 1 H50z",
+    fill: designTokens.base.color.white
+  }))) : null);
+};
 
 module.exports = ExerciseRunnerControllerCodeHelpRequestButton;

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

@@ -104,19 +104,15 @@ const ExerciseRunnerControllerRunningInfo = () => {
   //
 
   React__default["default"].useEffect(() => {
-    if (!exercise) {
-      return;
+    if (exercise === null || exercise === void 0 ? void 0 : exercise.courseId) {
+      apiClient.getOrgCourseGet({
+        courseId: exercise.courseId
+      }).then(({
+        course
+      }) => {
+        setCourse(course);
+      }).catch(console.error);
     }
-
-    const abortCtrl = new AbortController();
-    apiClient.getOrgCourseGet({
-      courseId: exercise._courseId
-    }, {
-      signal: abortCtrl.signal
-    }).then(res => res.course).then(setCourse).catch(console.error);
-    return () => {
-      abortCtrl.abort();
-    };
   }, [exercise]);
   /**
    * Last running score.

package/es/components/material-exercise/context/ExerciseProvider.js

@@ -37,8 +37,8 @@ const ExerciseProvider = _a => {
   const exercise = useRecoilValue(exerciseState(materialExerciseId));
   const exerciseRoom = useRecoilValue(exerciseRoomState(exerciseRoomId)); // lecture
 
-  const lecture = useRecoilValue(exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise._lectureId));
-  const resetLecture = useResetRecoilState(exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise._lectureId)); // multilang languages
+  const lecture = useRecoilValue(exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise.lectureId));
+  const resetLecture = useResetRecoilState(exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise.lectureId)); // multilang languages
 
   const exerciseMultilangLanguages = useRecoilValue(exerciseMultilangLanguagesState(exercise === null || exercise === void 0 ? void 0 : exercise.id));
   const resetExerciseMultilangLanguages = useResetRecoilState(exerciseMultilangLanguagesState(exercise === null || exercise === void 0 ? void 0 : exercise.id)); // etc
@@ -76,7 +76,7 @@ const ExerciseProvider = _a => {
   //
 
   React.useEffect(() => {
-    if (!(exercise === null || exercise === void 0 ? void 0 : exercise._lectureId)) {
+    if (!(exercise === null || exercise === void 0 ? void 0 : exercise.lectureId)) {
       return;
     }
 

package/es/components/material-exercise/context/recoil.js

@@ -1,4 +1,4 @@
-import { postGlobalAccountPreferenceEdit, postOrgMaterialExerciseExerciseRoomUserFileAdd, getOrgLectureGet, getOrgMaterialExerciseGet, getOrgLecturePageResolve, getOrgMaterialExerciseExerciseRoomGet, getOrgUserGet, getGlobalAccountPreferenceGet, getOrgMaterialExerciseExerciseImageExerciseFileGet, getOrgMaterialExerciseExerciseRoomUserFileGet } from '@elice/api-client';
+import { postGlobalAccountPreferenceEdit, postOrgMaterialExerciseExerciseRoomUserFileAdd, getOrgLectureGet, getOrgMaterialExerciseGet, getOrgMaterialExerciseExerciseRoomGet, getOrgUserGet, getGlobalAccountPreferenceGet, getOrgMaterialExerciseExerciseImageExerciseFileGet, getOrgMaterialExerciseExerciseRoomUserFileGet } from '@elice/api-client';
 import { enums } from '@elice/types';
 import { EliceWebSocket } from '@elice/websocket';
 import { camelizeKeys } from 'humps';
@@ -66,17 +66,7 @@ const exerciseState = atomFamily({
     const get = async () => {
       setSelf(await getOrgMaterialExerciseGet({
         materialExerciseId
-      }).then(res => res.materialExercise).then(materialExercise => Promise.all([materialExercise, getOrgLecturePageResolve({
-        materialId: materialExercise.id,
-        materialType: enums.LectureMaterialType.Exercise
-      }).then(res => ({
-        _courseId: res.courseId,
-        _lectureId: res.lectureId,
-        _lecturePageId: res.lecturePageId,
-        _orderNo: res.orderNo
-      })).catch(err => {
-        throw err;
-      })])).then(([materialExercise, lecturePageResolve]) => Object.assign(Object.assign({}, materialExercise), lecturePageResolve)).catch(() => null));
+      }).then(res => res.materialExercise).catch(() => null));
     };
 
     if (trigger === 'get') {

package/es/components/material-exercise/context/recoilTypes.d.ts

@@ -10,12 +10,7 @@ export declare type AtomLectureState = GetOrgLectureGetResponses['lecture'] | nu
 /**
  * Material exercise.
  */
-export declare type AtomExerciseState = (GetOrgMaterialExerciseGetResponses['materialExercise'] & {
-    _courseId: number;
-    _lectureId: number;
-    _lecturePageId: number;
-    _orderNo: number;
-}) | null;
+export declare type AtomExerciseState = GetOrgMaterialExerciseGetResponses['materialExercise'] | null;
 /**
  * Material exercise room.
  */

package/es/components/material-exercise/exercise-file-editor/ExerciseFileEditor.js

@@ -47,7 +47,7 @@ const ExerciseFileEditor = () => {
   } = React.useContext(ExerciseContext);
   const exercise = useRecoilValue(exerciseState(materialExerciseId));
   const exerciseRoom = useRecoilValue(exerciseRoomState(exerciseRoomId));
-  const lecture = useRecoilValue(exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise._lectureId));
+  const lecture = useRecoilValue(exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise.lectureId));
   const preference = useRecoilValue(exerciseEditorPreferenceState);
   const activeFilename = useRecoilValue(exerciseActiveFilenameState);
   const readOnly = readOnlyEditor || readOnlyActiveFile;

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

@@ -21,7 +21,7 @@ const ExerciseMenuDropdown = () => {
   } = React.useContext(ExerciseContext);
   const user = useRecoilValue(exerciseUserState);
   const exercise = useRecoilValue(exerciseState(materialExerciseId));
-  const lecture = useRecoilValue(exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise._lectureId));
+  const lecture = useRecoilValue(exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise.lectureId));
   const activeFilename = useRecoilValue(exerciseActiveFilenameState);
   const setRightpaneActiveState = useSetRecoilState(exerciseRightpaneActiveState);
   const [isSubmitHistoryModalOpen, setIsSubmitHistoryModalOpen] = React.useState(false);

package/es/components/material-exercise/exercise-room/ExerciseRoomDetail.js

@@ -26,7 +26,7 @@ const MaterialExerciseExerciseRoomDetail = ({
   goToList,
   onHide
 }) => {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f;
 
   const intl = useIntl();
   const {
@@ -44,7 +44,7 @@ const MaterialExerciseExerciseRoomDetail = ({
   const [isLeaveDialogOpen, setIsLeaveDialogOpen] = React.useState(false);
   const [isDeleting, setIsDeleting] = React.useState(false);
   const isThisChatRoomOwner = (_b = ((_a = exerciseRoom === null || exerciseRoom === void 0 ? void 0 : exerciseRoom.roomUsers.find(roomUser => roomUser.user.id === (user === null || user === void 0 ? void 0 : user.id))) === null || _a === void 0 ? void 0 : _a.permission) === enums.ExerciseRoomPermission.Owner) !== null && _b !== void 0 ? _b : false;
-  const shareLink = materialExercise ? `https://${window.location.host}/courses/${materialExercise._courseId}/lectures/${materialExercise === null || materialExercise === void 0 ? void 0 : materialExercise._lectureId}/materials/${materialExercise === null || materialExercise === void 0 ? void 0 : materialExercise._orderNo}/projects/${selectedExerciseRoomId}` : '';
+  const shareLink = materialExercise ? `https://${window.location.host}/courses/${materialExercise.courseId}/lectures/${materialExercise.lectureId}/materials/${(_c = materialExercise === null || materialExercise === void 0 ? void 0 : materialExercise.mainOrderNo) !== null && _c !== void 0 ? _c : 0}/projects/${selectedExerciseRoomId}` : '';
   const [, copyToClipboard] = useCopyToClipboard();
   const doGetOrgMaterialExerciseExerciseRoomGet = React.useCallback(() => {
     return getOrgMaterialExerciseExerciseRoomGet({
@@ -92,7 +92,7 @@ const MaterialExerciseExerciseRoomDetail = ({
   const doGetOrgCourseUserList = React.useCallback(() => {
     if (materialExercise) {
       return getOrgCourseUserList({
-        courseId: materialExercise._courseId,
+        courseId: materialExercise.courseId,
         isForTutoring: false,
         count: 20,
         offset: 0,
@@ -166,7 +166,7 @@ const MaterialExerciseExerciseRoomDetail = ({
   return React.createElement(StyledModal, {
     theme: "dark",
     onHide: onHide,
-    title: (_c = exerciseRoom === null || exerciseRoom === void 0 ? void 0 : exerciseRoom.title) !== null && _c !== void 0 ? _c : '',
+    title: (_d = exerciseRoom === null || exerciseRoom === void 0 ? void 0 : exerciseRoom.title) !== null && _d !== void 0 ? _d : '',
     headerIcon: eilArrowLeftwardsSingle,
     onHeaderIconClick: goToList,
     footerChild: exerciseRoom ? exerciseRoom.isDefaultRoom ? React.createElement(Flex, {
@@ -209,7 +209,7 @@ const MaterialExerciseExerciseRoomDetail = ({
       label: intl.formatMessage({
         id: 'materialExerciseExerciseRoom.leave'
       }),
-      disabled: (_d = exerciseRoom === null || exerciseRoom === void 0 ? void 0 : exerciseRoom.isDefaultRoom) !== null && _d !== void 0 ? _d : false,
+      disabled: (_e = exerciseRoom === null || exerciseRoom === void 0 ? void 0 : exerciseRoom.isDefaultRoom) !== null && _e !== void 0 ? _e : false,
       role: 'gray6',
       onClick: () => {
         setIsLeaveDialogOpen(true);
@@ -441,7 +441,7 @@ const MaterialExerciseExerciseRoomDetail = ({
   }), isThisChatRoomOwner ? React.createElement(React.Fragment, null, React.createElement(Select, {
     size: "small",
     width: "small",
-    value: (_e = exerciseRoom === null || exerciseRoom === void 0 ? void 0 : exerciseRoom.publicPermission) !== null && _e !== void 0 ? _e : enums.ExerciseRoomPermission.Nothing,
+    value: (_f = exerciseRoom === null || exerciseRoom === void 0 ? void 0 : exerciseRoom.publicPermission) !== null && _f !== void 0 ? _f : enums.ExerciseRoomPermission.Nothing,
     onChange: value => {
       doPostOrgMaterialExerciseExerciseRoomEdit(value);
     },

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

@@ -7,7 +7,7 @@ import { useRecoilValue } from 'recoil';
 import styled from 'styled-components';
 import 'react-use';
 import 'socket.io-client';
-import { exerciseRunnerWebSocketStatusQuery, exerciseFileEditorCursorSelectionValueState, exerciseState, exerciseRunnerRunTypeState, exerciseLectureState, exerciseRunnerSubmittingState, exerciseRunnerRunningState, exerciseArduinoUploadProgressState, exerciseArduinoOpenedPortNameState } from '../context/recoil.js';
+import { 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';
@@ -39,8 +39,7 @@ const ExerciseRunnerControllerButtonGroup = () => {
 
   const intl = useIntl();
   const {
-    materialExerciseId,
-    onCodeHelpRequest
+    materialExerciseId
   } = React.useContext(ExerciseContext);
   const {
     onSubmit,
@@ -48,11 +47,10 @@ const ExerciseRunnerControllerButtonGroup = () => {
     onCancel
   } = React.useContext(ExerciseRunnerContext);
   const runnerWebsocketStatus = useRecoilValue(exerciseRunnerWebSocketStatusQuery);
-  const editorCursorSelectionValue = useRecoilValue(exerciseFileEditorCursorSelectionValueState);
   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 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
 
@@ -234,12 +232,8 @@ const ExerciseRunnerControllerButtonGroup = () => {
 
 
   const renderCodeHelpRequestButton = () => {
-    if (isCodeHelpHidden || !editorCursorSelectionValue || typeof onCodeHelpRequest !== 'function') {
-      return null;
-    }
-
     return React.createElement(ExerciseRunnerControllerCodeHelpRequestButton, {
-      onClick: () => onCodeHelpRequest(editorCursorSelectionValue)
+      isCodeHelpHidden: isCodeHelpHidden
     });
   }; //
   //

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import type { ButtonProps } from '@elice/blocks';
-declare type OmittedButtonProps = Omit<ButtonProps, 'size' | 'role' | 'icon' | 'iconAlign'>;
-declare const ExerciseRunnerControllerCodeHelpRequestButton: React.ForwardRefExoticComponent<OmittedButtonProps & React.RefAttributes<HTMLButtonElement>>;
+interface ExerciseRunnerControllerCodeHelpRequestButtonProps {
+    isCodeHelpHidden: boolean;
+}
+declare const ExerciseRunnerControllerCodeHelpRequestButton: React.FC<ExerciseRunnerControllerCodeHelpRequestButtonProps>;
 export default ExerciseRunnerControllerCodeHelpRequestButton;

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

@@ -1,102 +1,111 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { getGlobalOrganizationGet } from '@elice/api-client';
-import { Button, Tooltip, Flex, BadgeNext, Text, Hspace, IconButton, Icon } from '@elice/blocks';
-import { eilMathsignMultiplyBasic, eilArrowRightwardsBasic } from '@elice/icons';
+import { Button, Icon, Text, IconButton } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
+import { eilArrowRightwardsBasic, eilMathsignMultiplyBasic } from '@elice/icons';
 import { useMaterialConfig } from '@elice/material-shared-utils';
+import { useRecoilValue } from 'recoil';
 import styled from 'styled-components';
+import { exerciseFileEditorCursorSelectionValueState } from '../context/recoil.js';
+import { ExerciseContext } from '../context/context.js';
+import '../context/recoilTypes.js';
+import '../context/subjects.js';
+import '../context/ExerciseProvider.js';
 
-const ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_KEY = 'elice-material-exercise-aibot-tooltip-hidden';
-const ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_VALUE = 'true';
+const IS_TOOLTIP_OPENED_KEY = 'isTooltipOpened';
+const IS_TOOLTIP_OPENED_VALUE = 'true';
 const StyledControllerButton = styled(Button).withConfig({
   componentId: "sc-10grd0k-0"
 })(["position:relative;transition:none;"]);
-const ExerciseRunnerControllerCodeHelpRequestButton = React.forwardRef((props, ref) => {
+const StyledCustomTooltip = styled.div.withConfig({
+  componentId: "sc-10grd0k-1"
+})(["position:absolute;top:calc(-100% - 1.25rem);left:calc(-100% - 1.5rem);display:flex;align-items:center;gap:0.25rem;padding:0.5rem 0.75rem;border-radius:0.5rem;background-color:", ";"], base.color.white);
+const StyledTip = styled.svg.withConfig({
+  componentId: "sc-10grd0k-2"
+})(["position:absolute;left:50%;bottom:calc(-0.25rem);transform:rotate(225deg);"]);
+const StyledCustomBadge = styled.div.withConfig({
+  componentId: "sc-10grd0k-3"
+})(["padding:0.0625rem 0.25rem;border-radius:0.25rem;background-color:", ";font-size:0.6875rem;"], base.color.red7);
+
+const ExerciseRunnerControllerCodeHelpRequestButton = ({
+  isCodeHelpHidden
+}) => {
+  const {
+    onCodeHelpRequest
+  } = React.useContext(ExerciseContext);
   const {
     orgNameShort
   } = useMaterialConfig();
-  const [isTooltipHidden, setIsTooltipHidden] = React.useState(false); //
+  const editorCursorSelectionValue = useRecoilValue(exerciseFileEditorCursorSelectionValueState);
+  const [isTooltipOpened, setIsTooltipOpened] = React.useState(false);
+  const [aiInfo, setAiInfo] = React.useState(null); //
   //
   // Get ai info from organization and check all resovle below conditions.
-  // - isEnable is true.
-  // - quotaPerDay is upper than zero.
-  // - tooltip hidden is false.
+  // - isEnable is true
+  // - quotaPerDay is upper than zero
+  // - tooltipOpenSession is false
 
   React.useEffect(() => {
-    const isTooltipHidden = sessionStorage.getItem(ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_KEY) === ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_VALUE;
-
-    if (isTooltipHidden) {
-      setIsTooltipHidden(true);
-      return;
-    }
-
-    getGlobalOrganizationGet({
+    void getGlobalOrganizationGet({
       organizationNameShort: orgNameShort
     }).then(res => {
-      const {
-        aibotInfo
-      } = res.organization;
-      const isHidden = !aibotInfo.isEnabled || aibotInfo.quotaPerDay <= 0;
-      setIsTooltipHidden(isHidden);
-    }).catch(() => {
-      setIsTooltipHidden(true);
-    }); // eslint-disable-next-line react-hooks/exhaustive-deps
+      setAiInfo(res.organization.aibotInfo);
+    });
+    const isTooltipOpend = sessionStorage.getItem(IS_TOOLTIP_OPENED_KEY);
+
+    if (isTooltipOpend === IS_TOOLTIP_OPENED_VALUE) {
+      setIsTooltipOpened(true);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, []); //
   //
   //
 
-  /**
-   *
-   */
-
-  const renderAiBotTooltipTitle = () => {
-    return React.createElement(Flex, {
-      align: "center"
-    }, React.createElement(BadgeNext, {
-      role: "red"
-    }, React.createElement(Text, {
-      role: "white",
-      size: "tiny",
-      bold: true
-    }, "NEW")), React.createElement(Hspace, {
-      width: 0.25
-    }), React.createElement(Text, {
-      role: "gray7",
-      size: "small",
-      bold: true
-    }, React.createElement(FormattedMessage, {
-      id: "exerciseRunner.controller.buttonGroup.button.tooltip.aiHelp"
-    })), React.createElement(Hspace, {
-      width: 0.25
-    }), React.createElement(IconButton, {
-      size: "tiny",
-      role: "gray6",
-      hasPadding: false,
-      border: false,
-      icon: eilMathsignMultiplyBasic,
-      onClick: () => {
-        sessionStorage.setItem(ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_KEY, ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_VALUE);
-        setIsTooltipHidden(true);
-      }
-    }));
-  };
+  if (isCodeHelpHidden || !editorCursorSelectionValue || typeof onCodeHelpRequest !== 'function') {
+    return null;
+  }
 
-  return React.createElement(Tooltip, {
-    placement: "top",
-    dark: false,
-    visible: !isTooltipHidden,
-    title: renderAiBotTooltipTitle()
-  }, React.createElement(StyledControllerButton, Object.assign({}, props, {
-    ref: ref,
+  return React.createElement(StyledControllerButton, {
     size: "tiny",
     role: "darkblue",
     icon: React.createElement(Icon, {
       icon: eilArrowRightwardsBasic
     }),
-    iconAlign: "right"
-  }), React.createElement(FormattedMessage, {
+    iconAlign: "right",
+    onClick: () => {
+      onCodeHelpRequest(editorCursorSelectionValue);
+    }
+  }, React.createElement(FormattedMessage, {
     id: "exerciseRunner.controller.buttonGroup.button.helpRequest"
-  })));
-});
+  }), aiInfo && aiInfo.isEnabled && aiInfo.quotaPerDay > 0 && !isTooltipOpened ? React.createElement(StyledCustomTooltip, {
+    onClick: e => {
+      e.stopPropagation();
+    }
+  }, React.createElement(StyledCustomBadge, null, React.createElement(Text, {
+    role: "white",
+    size: "tiny"
+  }, "NEW")), React.createElement(Text, {
+    role: "gray7",
+    size: "small"
+  }, React.createElement(FormattedMessage, {
+    id: "exerciseRunner.controller.buttonGroup.button.tooltip.aiHelp"
+  })), React.createElement(IconButton, {
+    size: "tiny",
+    hasPadding: false,
+    border: false,
+    icon: eilMathsignMultiplyBasic,
+    onClick: () => {
+      sessionStorage.setItem(IS_TOOLTIP_OPENED_KEY, IS_TOOLTIP_OPENED_VALUE);
+      setIsTooltipOpened(true);
+    }
+  }), React.createElement(StyledTip, {
+    viewBox: "0 0 50 50",
+    height: "0.5rem"
+  }, React.createElement("path", {
+    d: "M1 50 V10 Q1 1 10 1 H50z",
+    fill: base.color.white
+  }))) : null);
+};
 
 export { ExerciseRunnerControllerCodeHelpRequestButton as default };

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

@@ -97,19 +97,15 @@ const ExerciseRunnerControllerRunningInfo = () => {
   //
 
   React.useEffect(() => {
-    if (!exercise) {
-      return;
+    if (exercise === null || exercise === void 0 ? void 0 : exercise.courseId) {
+      getOrgCourseGet({
+        courseId: exercise.courseId
+      }).then(({
+        course
+      }) => {
+        setCourse(course);
+      }).catch(console.error);
     }
-
-    const abortCtrl = new AbortController();
-    getOrgCourseGet({
-      courseId: exercise._courseId
-    }, {
-      signal: abortCtrl.signal
-    }).then(res => res.course).then(setCourse).catch(console.error);
-    return () => {
-      abortCtrl.abort();
-    };
   }, [exercise]);
   /**
    * Last running score.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-exercise",
-  "version": "1.230217.0-sepmatlec.3",
+  "version": "1.230220.1",
   "description": "User view and editing components of Elice material exercise",
   "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
   "license": "UNLICENSED",
@@ -29,14 +29,14 @@
     "clean": "del-cli \"es/*\" \"cjs/*\" \"dist/*\""
   },
   "peerDependencies": {
-    "@elice/api-client": "1.230126.0-sepmatlec.4",
+    "@elice/api-client": "1.230215.1",
     "@elice/blocks": "^1.220803.0",
     "@elice/design-tokens": "^1.220803.0",
     "@elice/icons": "^1.220803.0",
     "@elice/markdown": "^1.220803.0",
     "@elice/material-shared-types": "*",
     "@elice/material-shared-utils": "*",
-    "@elice/types": "1.230126.0-sepmatlec.5",
+    "@elice/types": "1.230215.1",
     "@elice/websocket": "^1.220803.0",
     "humps": "^2.0.1",
     "lodash": "^4.17.21",
@@ -74,14 +74,14 @@
     "xterm-addon-fit": "^0.5.0"
   },
   "devDependencies": {
-    "@elice/api-client": "1.230126.0-sepmatlec.4",
+    "@elice/api-client": "1.230215.1",
     "@elice/blocks": "^1.220803.0",
     "@elice/design-tokens": "^1.220803.0",
     "@elice/icons": "^1.220803.0",
     "@elice/markdown": "^1.220803.0",
-    "@elice/material-shared-types": "1.230217.0-sepmatlec.3",
-    "@elice/material-shared-utils": "1.230217.0-sepmatlec.3",
-    "@elice/types": "1.230126.0-sepmatlec.5",
+    "@elice/material-shared-types": "1.230220.1",
+    "@elice/material-shared-utils": "1.230220.1",
+    "@elice/types": "1.230215.1",
     "@elice/websocket": "^1.220803.0",
     "@types/classnames": "^2.3.1",
     "@types/color": "^3.0.3",
@@ -102,5 +102,5 @@
     "recoil": "^0.6.1",
     "styled-components": "^5.2.0"
   },
-  "gitHead": "9256c4bde755c55a27550e7036c56bdae5104f50"
+  "gitHead": "f8c978d25b5efb10d7c75a2023e9a32ca864754b"
 }