@elice/material-exercise 1.230220.1 → 1.230220.2

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

@@ -46,7 +46,8 @@ const ExerciseRunnerControllerButtonGroup = () => {
 
   const intl = reactIntl.useIntl();
   const {
-    materialExerciseId
+    materialExerciseId,
+    onCodeHelpRequest
   } = React__default["default"].useContext(context.ExerciseContext);
   const {
     onSubmit,
@@ -54,6 +55,7 @@ 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);
@@ -239,8 +241,12 @@ const ExerciseRunnerControllerButtonGroup = () => {
 
 
   const renderCodeHelpRequestButton = () => {
+    if (isCodeHelpHidden || !editorCursorSelectionValue || typeof onCodeHelpRequest !== 'function') {
+      return null;
+    }
+
     return React__default["default"].createElement(ExerciseRunnerControllerCodeHelpRequestButton, {
-      isCodeHelpHidden: isCodeHelpHidden
+      onClick: () => onCodeHelpRequest(editorCursorSelectionValue)
     });
   }; //
   //

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

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

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

@@ -4,115 +4,106 @@ 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 IS_TOOLTIP_OPENED_KEY = 'isTooltipOpened';
-const IS_TOOLTIP_OPENED_VALUE = 'true';
+const ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_KEY = 'elice-material-exercise-aibot-tooltip-hidden';
+const ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_VALUE = 'true';
 const StyledControllerButton = styled__default["default"](blocks.Button).withConfig({
   componentId: "sc-10grd0k-0"
 })(["position:relative;transition:none;"]);
-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 ExerciseRunnerControllerCodeHelpRequestButton = React__default["default"].forwardRef((props, ref) => {
   const {
     orgNameShort
   } = materialSharedUtils.useMaterialConfig();
-  const editorCursorSelectionValue = recoil.useRecoilValue(recoil$1.exerciseFileEditorCursorSelectionValueState);
-  const [isTooltipOpened, setIsTooltipOpened] = React__default["default"].useState(false);
-  const [aiInfo, setAiInfo] = React__default["default"].useState(null); //
+  const [isTooltipHidden, setIsTooltipHidden] = React__default["default"].useState(false); //
   //
   // Get ai info from organization and check all resovle below conditions.
-  // - isEnable is true
-  // - quotaPerDay is upper than zero
-  // - tooltipOpenSession is false
+  // - isEnable is true.
+  // - quotaPerDay is upper than zero.
+  // - tooltip hidden is false.
 
   React__default["default"].useEffect(() => {
-    void apiClient.getGlobalOrganizationGet({
-      organizationNameShort: orgNameShort
-    }).then(res => {
-      setAiInfo(res.organization.aibotInfo);
-    });
-    const isTooltipOpend = sessionStorage.getItem(IS_TOOLTIP_OPENED_KEY);
+    const isTooltipHidden = sessionStorage.getItem(ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_KEY) === ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_VALUE;
 
-    if (isTooltipOpend === IS_TOOLTIP_OPENED_VALUE) {
-      setIsTooltipOpened(true);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
+    if (isTooltipHidden) {
+      setIsTooltipHidden(true);
+      return;
+    }
 
+    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
   }, []); //
   //
   //
 
-  if (isCodeHelpHidden || !editorCursorSelectionValue || typeof onCodeHelpRequest !== 'function') {
-    return null;
-  }
+  /**
+   *
+   */
+
+  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);
+      }
+    }));
+  };
 
-  return React__default["default"].createElement(StyledControllerButton, {
+  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,
     size: "tiny",
     role: "darkblue",
     icon: React__default["default"].createElement(blocks.Icon, {
       icon: icons.eilArrowRightwardsBasic
     }),
-    iconAlign: "right",
-    onClick: () => {
-      onCodeHelpRequest(editorCursorSelectionValue);
-    }
-  }, React__default["default"].createElement(reactIntl.FormattedMessage, {
+    iconAlign: "right"
+  }), 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/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, exerciseState, exerciseRunnerRunTypeState, exerciseLectureState, exerciseRunnerSubmittingState, exerciseRunnerRunningState, exerciseArduinoUploadProgressState, exerciseArduinoOpenedPortNameState } from '../context/recoil.js';
+import { exerciseRunnerWebSocketStatusQuery, exerciseFileEditorCursorSelectionValueState, 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,7 +39,8 @@ const ExerciseRunnerControllerButtonGroup = () => {
 
   const intl = useIntl();
   const {
-    materialExerciseId
+    materialExerciseId,
+    onCodeHelpRequest
   } = React.useContext(ExerciseContext);
   const {
     onSubmit,
@@ -47,6 +48,7 @@ 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);
@@ -232,8 +234,12 @@ const ExerciseRunnerControllerButtonGroup = () => {
 
 
   const renderCodeHelpRequestButton = () => {
+    if (isCodeHelpHidden || !editorCursorSelectionValue || typeof onCodeHelpRequest !== 'function') {
+      return null;
+    }
+
     return React.createElement(ExerciseRunnerControllerCodeHelpRequestButton, {
-      isCodeHelpHidden: isCodeHelpHidden
+      onClick: () => onCodeHelpRequest(editorCursorSelectionValue)
     });
   }; //
   //

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

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

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

@@ -1,111 +1,102 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { getGlobalOrganizationGet } from '@elice/api-client';
-import { Button, Icon, Text, IconButton } from '@elice/blocks';
-import { base } from '@elice/design-tokens';
-import { eilArrowRightwardsBasic, eilMathsignMultiplyBasic } from '@elice/icons';
+import { Button, Tooltip, Flex, BadgeNext, Text, Hspace, IconButton, Icon } from '@elice/blocks';
+import { eilMathsignMultiplyBasic, eilArrowRightwardsBasic } 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 IS_TOOLTIP_OPENED_KEY = 'isTooltipOpened';
-const IS_TOOLTIP_OPENED_VALUE = 'true';
+const ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_KEY = 'elice-material-exercise-aibot-tooltip-hidden';
+const ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_VALUE = 'true';
 const StyledControllerButton = styled(Button).withConfig({
   componentId: "sc-10grd0k-0"
 })(["position:relative;transition:none;"]);
-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 ExerciseRunnerControllerCodeHelpRequestButton = React.forwardRef((props, ref) => {
   const {
     orgNameShort
   } = useMaterialConfig();
-  const editorCursorSelectionValue = useRecoilValue(exerciseFileEditorCursorSelectionValueState);
-  const [isTooltipOpened, setIsTooltipOpened] = React.useState(false);
-  const [aiInfo, setAiInfo] = React.useState(null); //
+  const [isTooltipHidden, setIsTooltipHidden] = React.useState(false); //
   //
   // Get ai info from organization and check all resovle below conditions.
-  // - isEnable is true
-  // - quotaPerDay is upper than zero
-  // - tooltipOpenSession is false
+  // - isEnable is true.
+  // - quotaPerDay is upper than zero.
+  // - tooltip hidden is false.
 
   React.useEffect(() => {
-    void getGlobalOrganizationGet({
-      organizationNameShort: orgNameShort
-    }).then(res => {
-      setAiInfo(res.organization.aibotInfo);
-    });
-    const isTooltipOpend = sessionStorage.getItem(IS_TOOLTIP_OPENED_KEY);
+    const isTooltipHidden = sessionStorage.getItem(ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_KEY) === ELICE_MATERIAL_EXERCISE_AI_BOT_TOOLTIP_VALUE;
 
-    if (isTooltipOpend === IS_TOOLTIP_OPENED_VALUE) {
-      setIsTooltipOpened(true);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
+    if (isTooltipHidden) {
+      setIsTooltipHidden(true);
+      return;
+    }
 
+    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
   }, []); //
   //
   //
 
-  if (isCodeHelpHidden || !editorCursorSelectionValue || typeof onCodeHelpRequest !== 'function') {
-    return null;
-  }
+  /**
+   *
+   */
+
+  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);
+      }
+    }));
+  };
 
-  return React.createElement(StyledControllerButton, {
+  return React.createElement(Tooltip, {
+    placement: "top",
+    dark: false,
+    visible: !isTooltipHidden,
+    title: renderAiBotTooltipTitle()
+  }, React.createElement(StyledControllerButton, Object.assign({}, props, {
+    ref: ref,
     size: "tiny",
     role: "darkblue",
     icon: React.createElement(Icon, {
       icon: eilArrowRightwardsBasic
     }),
-    iconAlign: "right",
-    onClick: () => {
-      onCodeHelpRequest(editorCursorSelectionValue);
-    }
-  }, React.createElement(FormattedMessage, {
+    iconAlign: "right"
+  }), 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-exercise",
-  "version": "1.230220.1",
+  "version": "1.230220.2",
   "description": "User view and editing components of Elice material exercise",
   "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
   "license": "UNLICENSED",
@@ -79,8 +79,8 @@
     "@elice/design-tokens": "^1.220803.0",
     "@elice/icons": "^1.220803.0",
     "@elice/markdown": "^1.220803.0",
-    "@elice/material-shared-types": "1.230220.1",
-    "@elice/material-shared-utils": "1.230220.1",
+    "@elice/material-shared-types": "1.230220.2",
+    "@elice/material-shared-utils": "1.230220.2",
     "@elice/types": "1.230215.1",
     "@elice/websocket": "^1.220803.0",
     "@types/classnames": "^2.3.1",
@@ -102,5 +102,5 @@
     "recoil": "^0.6.1",
     "styled-components": "^5.2.0"
   },
-  "gitHead": "f8c978d25b5efb10d7c75a2023e9a32ca864754b"
+  "gitHead": "f49499e86ce2ccbea6a1b83e070649a3167f8074"
 }