@seafile/sdoc-editor 2.0.82 → 2.0.83

package/dist/extension/plugins/ai/ai-module/index.js

@@ -0,0 +1,629 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = AIModule;
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _copyToClipboard = _interopRequireDefault(require("copy-to-clipboard"));
+var _isHotkey = _interopRequireDefault(require("is-hotkey"));
+var _toast = _interopRequireDefault(require("../../../../components/toast"));
+var _context2 = _interopRequireDefault(require("../../../../context"));
+var _mdToHtml = _interopRequireDefault(require("../../../../slate-convert/md-to-html"));
+var _mdToSlate = _interopRequireDefault(require("../../../../slate-convert/md-to-slate"));
+var _commons = require("../../../commons");
+var _dropdownMenuItem = _interopRequireDefault(require("../../../commons/dropdown-menu-item"));
+var _constants = require("../../../constants");
+var _core = require("../../../core");
+var _aiIcon = _interopRequireDefault(require("../ai-icon"));
+var _constants2 = require("../constants");
+var _adjustSubMenu = _interopRequireDefault(require("./adjust-sub-menu"));
+var _helpers = require("./helpers");
+var _langSubMenu = _interopRequireDefault(require("./lang-sub-menu"));
+var _tipDialog = _interopRequireDefault(require("./tip-dialog"));
+require("./style.css");
+function AIModule(_ref) {
+  var editor = _ref.editor,
+    element = _ref.element,
+    closeModule = _ref.closeModule;
+  var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
+    t = _useTranslation.t;
+  var aiRef = (0, _react.useRef)(null);
+  var inputRef = (0, _react.useRef)(null);
+  var scrollRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isShowAIPopover = _useState2[0],
+    setIsShowAIPopover = _useState2[1];
+  var _useState3 = (0, _react.useState)(''),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    opType = _useState4[0],
+    setOpType = _useState4[1];
+  var _useState5 = (0, _react.useState)(''),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    selectedValue = _useState6[0],
+    setSelectedValue = _useState6[1];
+  var _useState7 = (0, _react.useState)(''),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    searchValue = _useState8[0],
+    setSearchValue = _useState8[1];
+  var _useState9 = (0, _react.useState)(''),
+    _useState0 = (0, _slicedToArray2["default"])(_useState9, 2),
+    oldSearchValue = _useState0[0],
+    setOldSearchValue = _useState0[1];
+  var _useState1 = (0, _react.useState)(false),
+    _useState10 = (0, _slicedToArray2["default"])(_useState1, 2),
+    isGenerating = _useState10[0],
+    setIsGenerating = _useState10[1];
+  var _useState11 = (0, _react.useState)(null),
+    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+    searchResult = _useState12[0],
+    setSearchResult = _useState12[1];
+  var _useState13 = (0, _react.useState)('en'),
+    _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
+    currentLang = _useState14[0],
+    setCurrentLang = _useState14[1];
+  var _useState15 = (0, _react.useState)(false),
+    _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
+    isShowTipDialog = _useState16[0],
+    setIsShowTipDialog = _useState16[1];
+  var toggleAskAI = (0, _react.useCallback)(function () {
+    // Add marks for selection
+    _slate.Editor.addMark(editor, 'sdoc_ai', true);
+    scrollRef.current = document.querySelector('.sdoc-scroll-container');
+    var _scrollRef$current = scrollRef.current,
+      scrollTop = _scrollRef$current.scrollTop,
+      scrollHeight = _scrollRef$current.scrollHeight;
+    if (!element) {
+      var _content = window.getSelection().toString();
+      if (_content) {
+        setSelectedValue(_content);
+      }
+      var domSelection = window.getSelection();
+      var domRange = domSelection.getRangeAt(0);
+      var rect = domRange.getBoundingClientRect();
+      var _needPaddingBottomHeight = scrollTop + rect.bottom + _constants2.AI_MIN_HEIGHT - scrollHeight;
+      if (_needPaddingBottomHeight > 0) {
+        var articleDom = document.querySelector('.sdoc-editor__article');
+        articleDom.style.paddingBottom = _needPaddingBottomHeight + 'px';
+      }
+      var isInView = rect.top + rect.height - window.innerHeight;
+      var _heightDiff = rect.bottom + _constants2.AI_MIN_HEIGHT - window.innerHeight;
+      if (_heightDiff > 0) {
+        if (isInView < 0) {
+          scrollRef.current.scrollTo({
+            top: scrollTop + rect.top - 94,
+            behavior: 'smooth'
+          });
+        } else {
+          scrollRef.current.scrollTo({
+            top: scrollTop + (rect.bottom - 94) - 100,
+            // scroll top + the rect bottom with container top - shown content height
+            behavior: 'smooth'
+          });
+        }
+      }
+      setTimeout(function () {
+        var _rect, _inputRef$current;
+        var aboveNode = (0, _core.getAboveBlockNode)(editor);
+        var slateDom = _slateReact.ReactEditor.toDOMNode(editor, aboveNode[0]);
+        var slateRect = slateDom.getBoundingClientRect();
+        var markedSpan = document.querySelectorAll('span[data-slate-leaf="true"].sdoc_ai');
+        var rect;
+        if (markedSpan.length) {
+          rect = markedSpan[markedSpan.length - 1].getBoundingClientRect();
+        }
+        var el = aiRef.current;
+        el.style.top = "".concat(((_rect = rect) === null || _rect === void 0 ? void 0 : _rect.bottom) + 8 - 3.23, "px"); // top = Current top + Element height - Element padding bottom
+        el.style.left = "".concat(slateRect.left, "px");
+        el.style.display = 'block';
+        setIsShowAIPopover(true);
+        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+      }, 500);
+      return;
+    }
+    var slateDom = _slateReact.ReactEditor.toDOMNode(editor, element);
+    var slateRect = slateDom.getBoundingClientRect();
+    var content = _slate.Node.string(element);
+    if (content) {
+      setSelectedValue(content);
+    }
+    var needPaddingBottomHeight = scrollTop + slateRect.bottom + _constants2.AI_MIN_HEIGHT - scrollHeight;
+    if (needPaddingBottomHeight > 0) {
+      var _articleDom = document.querySelector('.sdoc-editor__article');
+      _articleDom.style.paddingBottom = needPaddingBottomHeight + 'px';
+    }
+    var heightDiff = slateRect.bottom + _constants2.AI_MIN_HEIGHT - window.innerHeight;
+    if (heightDiff > 0) {
+      scrollRef.current.scrollTo({
+        top: scrollTop + slateRect.top - 94,
+        behavior: 'smooth'
+      });
+    }
+    setTimeout(function () {
+      var _inputRef$current2;
+      var slateRect = slateDom.getBoundingClientRect();
+      var el = aiRef.current;
+      el.style.top = "".concat(slateRect.bottom + 8, "px"); // top = Current top + Element height
+      el.style.left = "".concat(slateRect.left, "px");
+      el.style.display = 'block';
+      setIsShowAIPopover(true);
+      (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
+    }, 500);
+  }, [editor, element]);
+  var onCloseClick = (0, _react.useCallback)(function () {
+    (0, _helpers.removeMarks)(editor);
+    var element = aiRef.current;
+    element.style.display = 'none';
+    var articleDom = document.querySelector('.sdoc-editor__article');
+    articleDom.style.removeProperty('padding-bottom');
+    setSearchValue('');
+    setSearchResult('');
+    setIsShowAIPopover(false);
+    closeModule();
+  }, [closeModule, editor]);
+  var onDocumentClick = (0, _react.useCallback)(function (event) {
+    // not in ai container
+    if (aiRef.current && aiRef.current.contains(event.target) && aiRef.current !== event.target) return;
+    // context menu toggle
+    var contextAskAI = document.querySelector('#context-toolbar-ai');
+    if (contextAskAI && contextAskAI.contains(event.target)) return;
+    var sideAskAI = document.querySelector('#side-toolbar-ai');
+    if (sideAskAI && sideAskAI.contains(event.target)) return;
+
+    // click in submenu
+    var adjustSubMenu = document.querySelector('.ai-adjust-sub-menu');
+    if (adjustSubMenu && adjustSubMenu.contains(event.target)) return;
+    var langSubMenu = document.querySelector('.ai-lang-sub-menu');
+    if (langSubMenu && langSubMenu.contains(event.target)) return;
+    if (!searchResult || opType === _constants2.OPERATION_TYPES.TRANSLATE) {
+      onCloseClick();
+      return;
+    }
+    if (searchResult) {
+      setIsShowTipDialog(true);
+    }
+  }, [onCloseClick, opType, searchResult]);
+  (0, _react.useEffect)(function () {
+    toggleAskAI();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  (0, _react.useEffect)(function () {
+    window.addEventListener('click', onDocumentClick);
+    return function () {
+      window.removeEventListener('click', onDocumentClick);
+    };
+  }, [onDocumentClick]);
+  var onScroll = (0, _react.useCallback)(function (event) {
+    if (!element) {
+      var _rect2;
+      var markedSpan = document.querySelectorAll('span[data-slate-leaf="true"].sdoc_ai');
+      var rect;
+      if (markedSpan.length) {
+        rect = markedSpan[markedSpan.length - 1].getBoundingClientRect();
+      }
+      var aboveNode = (0, _core.getAboveBlockNode)(editor);
+      var slateDom = _slateReact.ReactEditor.toDOMNode(editor, aboveNode[0]);
+      var slateRect = slateDom.getBoundingClientRect();
+      var el = aiRef.current;
+      el.style.top = "".concat(((_rect2 = rect) === null || _rect2 === void 0 ? void 0 : _rect2.bottom) + 8 - 3.23, "px"); // top = Current top + Element height - Element padding bottom
+      el.style.left = "".concat(slateRect.left, "px");
+      el.style.display = 'block';
+    } else {
+      var _slateDom = _slateReact.ReactEditor.toDOMNode(editor, element);
+      var _slateRect = _slateDom.getBoundingClientRect();
+      var _el = aiRef.current;
+      _el.style.top = "".concat(_slateRect.bottom + 8, "px"); // top = Current top + Element height
+      _el.style.left = "".concat(_slateRect.left, "px");
+      _el.style.display = 'block';
+    }
+  }, [editor, element]);
+  (0, _react.useEffect)(function () {
+    var observerRefValue = null;
+    if (isShowAIPopover) {
+      scrollRef.current && scrollRef.current.addEventListener('scroll', onScroll);
+      observerRefValue = scrollRef.current;
+    } else {
+      scrollRef.current && scrollRef.current.removeEventListener('scroll', onScroll);
+    }
+    return function () {
+      if (observerRefValue) {
+        observerRefValue.removeEventListener('scroll', onScroll);
+      }
+    };
+  }, [isShowAIPopover, onScroll]);
+  var onSearchValueChanged = (0, _react.useCallback)(function (event) {
+    var value = event.target.value;
+    if (value === searchValue) return;
+    setSearchValue(value);
+  }, [searchValue]);
+  var transferHtml = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee(mdString) {
+      var htmlString, formatHtml;
+      return (0, _regeneratorRuntime2["default"])().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return _mdToHtml["default"].process(mdString);
+          case 2:
+            htmlString = _context.sent;
+            formatHtml = String(htmlString).trim();
+            setSearchResult(formatHtml);
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function transferHtml(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var onEnter = (0, _react.useCallback)(function (event) {
+    if (!searchValue) return;
+    setOpType(_constants2.OPERATION_TYPES.DEFAULT);
+    setIsGenerating(true);
+    var defaultContent = selectedValue;
+    var custom_prompt = searchValue;
+    if (!custom_prompt) {
+      _toast["default"].danger(t('Processing_content_cannot_be_empty'));
+      return;
+    }
+    _context2["default"].writingAssistant(defaultContent, 'ask', custom_prompt).then(function (res) {
+      var content = res.data.content;
+      transferHtml(content);
+      setIsGenerating(false);
+      setSearchValue('');
+      setOldSearchValue(searchValue);
+    })["catch"](function (err) {
+      setIsGenerating(false);
+      _toast["default"].danger('AI_error_message');
+      setSearchValue('');
+      setOldSearchValue(searchValue);
+    });
+  }, [searchValue, selectedValue, t]);
+  var onKeyDown = (0, _react.useCallback)(function (event) {
+    if ((0, _isHotkey["default"])('enter', event)) {
+      event.preventDefault();
+      onEnter();
+    }
+  }, [onEnter]);
+  var inputValue = (0, _react.useMemo)(function () {
+    var generatingPlaceHolder = t('Thinking');
+    if (isGenerating) return generatingPlaceHolder;
+    if (!isGenerating) return searchValue;
+  }, [isGenerating, searchValue, t]);
+  var onContinuationClick = (0, _react.useCallback)(function () {
+    setOpType(_constants2.OPERATION_TYPES.CONTINUATION);
+    setIsGenerating(true);
+    var defaultContent = selectedValue;
+    if (!defaultContent) {
+      _toast["default"].danger(t('Processing_content_cannot_be_empty'));
+      return;
+    }
+    _context2["default"].writingAssistant(defaultContent, 'continue_writing').then(function (res) {
+      var content = res.data.content;
+      transferHtml(content);
+      setIsGenerating(false);
+    })["catch"](function (err) {
+      setIsGenerating(false);
+      _toast["default"].danger('AI_error_message');
+    });
+  }, [selectedValue, t]);
+  var onMoreDetailsClick = (0, _react.useCallback)(function () {
+    setOpType(_constants2.OPERATION_TYPES.MORE_DETAILS);
+    setIsGenerating(true);
+    var defaultContent = selectedValue;
+    if (!defaultContent) {
+      _toast["default"].danger(t('Processing_content_cannot_be_empty'));
+      return;
+    }
+    _context2["default"].writingAssistant(defaultContent, _constants2.OPERATION_TYPES.MORE_DETAILS).then(function (res) {
+      var content = res.data.content;
+      transferHtml(content);
+      setIsGenerating(false);
+    })["catch"](function (err) {
+      setIsGenerating(false);
+      _toast["default"].danger('AI_error_message');
+    });
+  }, [selectedValue, t]);
+  var onMoreFluentClick = (0, _react.useCallback)(function () {
+    setOpType(_constants2.OPERATION_TYPES.MORE_FLUENT);
+    setIsGenerating(true);
+    var defaultContent = selectedValue;
+    if (!defaultContent) {
+      _toast["default"].danger(t('Processing_content_cannot_be_empty'));
+      return;
+    }
+    _context2["default"].writingAssistant(defaultContent, _constants2.OPERATION_TYPES.MORE_FLUENT).then(function (res) {
+      var content = res.data.content;
+      transferHtml(content);
+      setIsGenerating(false);
+    })["catch"](function (err) {
+      setIsGenerating(false);
+      _toast["default"].danger('AI_error_message');
+    });
+  }, [selectedValue, t]);
+  var onMoreConciseClick = (0, _react.useCallback)(function () {
+    setOpType(_constants2.OPERATION_TYPES.MORE_CONCISE);
+    setIsGenerating(true);
+    var defaultContent = selectedValue;
+    if (!defaultContent) {
+      _toast["default"].danger(t('Processing_content_cannot_be_empty'));
+      return;
+    }
+    _context2["default"].writingAssistant(defaultContent, _constants2.OPERATION_TYPES.MORE_CONCISE).then(function (res) {
+      var content = res.data.content;
+      transferHtml(content);
+      setIsGenerating(false);
+    })["catch"](function (err) {
+      setIsGenerating(false);
+      _toast["default"].danger('AI_error_message');
+    });
+  }, [selectedValue, t]);
+  var onMoreVividClick = (0, _react.useCallback)(function () {
+    setOpType(_constants2.OPERATION_TYPES.MORE_VIVID);
+    setIsGenerating(true);
+    var defaultContent = selectedValue;
+    if (!defaultContent) {
+      _toast["default"].danger(t('Processing_content_cannot_be_empty'));
+      return;
+    }
+    _context2["default"].writingAssistant(defaultContent, _constants2.OPERATION_TYPES.MORE_VIVID).then(function (res) {
+      var content = res.data.content;
+      transferHtml(content);
+      setIsGenerating(false);
+    })["catch"](function (err) {
+      setIsGenerating(false);
+      _toast["default"].danger('Translation_error_message');
+    });
+  }, [selectedValue, t]);
+  var onTranslateClick = (0, _react.useCallback)(function (lang) {
+    var translateValue = selectedValue;
+    if (!translateValue) {
+      _toast["default"].warning(t('The_translation_content_cannot_be_empty'));
+      return;
+    }
+    setOpType(_constants2.OPERATION_TYPES.TRANSLATE);
+    var translateLang = lang ? lang : currentLang;
+    setCurrentLang(translateLang);
+    setIsGenerating(true);
+    _context2["default"].aiTranslate(translateValue, translateLang).then(function (res) {
+      var translation = res.data.translation;
+      transferHtml(translation);
+      setIsGenerating(false);
+    })["catch"](function (err) {
+      setIsGenerating(false);
+      _toast["default"].danger('Translation_error_message');
+    });
+  }, [currentLang, selectedValue, t]);
+  var focusToEndPath = (0, _react.useCallback)(function (path) {
+    setTimeout(function () {
+      var endOfLastNodePoint = _slate.Editor.end(editor, path);
+      var range = {
+        anchor: endOfLastNodePoint,
+        focus: endOfLastNodePoint
+      };
+      (0, _core.focusEditor)(editor, range);
+    }, 0);
+  }, [editor]);
+  var onInsertClick = (0, _react.useCallback)(function () {
+    var nextPath = null;
+    if (!element) {
+      var end = _slate.Range.end(editor.selection);
+      var aboveNode = (0, _core.getAboveBlockNode)(editor, {
+        at: end
+      });
+      nextPath = _slate.Path.next(aboveNode[1]);
+    } else {
+      var path = _slateReact.ReactEditor.findPath(editor, element);
+      nextPath = _slate.Path.next(path);
+    }
+
+    // Transfer markdown search result to slate
+    // If codeMd，keep all; otherwise，delete \n and empty area
+    var optimizedSearchResult = searchResult.replace(/<pre[\s\S]*?<\/pre>|>\s+</g, function (match) {
+      return match.startsWith('<pre') ? match : '><';
+    }).trim();
+    var slateNodeList = (0, _mdToSlate["default"])(optimizedSearchResult);
+    (0, _helpers.insertHtmlTransferredNodes)(slateNodeList, nextPath, editor);
+    onCloseClick();
+    focusToEndPath(nextPath);
+  }, [editor, element, focusToEndPath, onCloseClick, searchResult]);
+  var onTryAgainClick = (0, _react.useCallback)(function (event) {
+    switch (opType) {
+      case _constants2.OPERATION_TYPES.TRANSLATE:
+        onTranslateClick();
+        return;
+      case _constants2.OPERATION_TYPES.MORE_DETAILS:
+        onMoreDetailsClick();
+        return;
+      case _constants2.OPERATION_TYPES.MORE_CONCISE:
+        onMoreConciseClick();
+        return;
+      case _constants2.OPERATION_TYPES.MORE_VIVID:
+        onMoreVividClick();
+        return;
+      case _constants2.OPERATION_TYPES.CONTINUATION:
+        onContinuationClick();
+        return;
+      case _constants2.OPERATION_TYPES.DEFAULT:
+        event.stopPropagation();
+        event.nativeEvent.stopImmediatePropagation();
+        setSearchValue(oldSearchValue);
+        setSearchResult('');
+        setOldSearchValue('');
+        return;
+      default:
+        return;
+    }
+  }, [oldSearchValue, onContinuationClick, onMoreConciseClick, onMoreDetailsClick, onMoreVividClick, onTranslateClick, opType]);
+  var onReplaceClick = (0, _react.useCallback)(function () {
+    if (!element) {
+      editor.deleteFragment();
+      if (searchResult) {
+        var optimizedSearchResult = searchResult.replace(/<pre[\s\S]*?<\/pre>|>\s+</g, function (match) {
+          return match.startsWith('<pre') ? match : '><';
+        }).trim();
+        var slateNodeList = (0, _mdToSlate["default"])(optimizedSearchResult);
+        // Insert selection as text if result node is one paragraph nodes; otherwise, insert below
+        if (slateNodeList.length === 1 && slateNodeList[0].type === _constants.PARAGRAPH && slateNodeList[0].children.length <= 1) {
+          var text = slateNodeList[0].children[0].text;
+          editor.insertText(text);
+        } else {
+          var topBlockNode = (0, _core.getTopLevelBlockNode)(editor);
+          var nextPath = _slate.Path.next(topBlockNode[1]);
+          (0, _helpers.insertHtmlTransferredNodes)(slateNodeList, nextPath, editor);
+        }
+      }
+      onCloseClick();
+      var end = _slate.Range.end(editor.selection);
+      var aboveNode = (0, _core.getAboveBlockNode)(editor, {
+        at: end
+      });
+      focusToEndPath(aboveNode[1]);
+    } else {
+      var path = _slateReact.ReactEditor.findPath(editor, element);
+      _slate.Transforms.removeNodes(editor, {
+        at: path
+      });
+      var p = (0, _core.generateEmptyElement)(_constants.PARAGRAPH);
+      p.children[0].text = searchResult;
+      _slate.Transforms.insertNodes(editor, p, {
+        at: path
+      });
+      onCloseClick();
+      focusToEndPath(path);
+    }
+  }, [editor, element, focusToEndPath, onCloseClick, searchResult]);
+  var onCopyClick = (0, _react.useCallback)(function () {
+    (0, _copyToClipboard["default"])(searchResult);
+    _toast["default"].success(t('Copied'), {
+      hasCloseButton: false,
+      duration: 2
+    });
+    onCloseClick();
+  }, [onCloseClick, searchResult, t]);
+  var onDeprecationClick = (0, _react.useCallback)(function () {
+    onCloseClick();
+  }, [onCloseClick]);
+  var isShowAdjust = (0, _react.useMemo)(function () {
+    return ![_constants2.OPERATION_TYPES.DEFAULT, _constants2.OPERATION_TYPES.TRANSLATE].includes(opType);
+  }, [opType]);
+  var closeTipDialog = (0, _react.useCallback)(function () {
+    setIsShowTipDialog(false);
+  }, []);
+  var discardCurrentContent = (0, _react.useCallback)(function () {
+    onCloseClick();
+    setIsShowTipDialog(false);
+    (0, _core.focusEditor)(editor);
+  }, [editor, onCloseClick]);
+  return /*#__PURE__*/_react["default"].createElement(_commons.ElementPopover, null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-ai-module-container",
+    ref: aiRef
+  }, !searchResult && /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-ai-content"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-ai-search"
+  }, /*#__PURE__*/_react["default"].createElement(_aiIcon["default"], null), /*#__PURE__*/_react["default"].createElement("input", {
+    type: "text",
+    ref: inputRef,
+    autoFocus: true,
+    placeholder: t('Ask_AI_anything'),
+    value: inputValue,
+    onKeyDown: onKeyDown,
+    onChange: onSearchValueChanged
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "sdocfont sdoc-send-arrow ".concat(!searchValue ? 'disable' : ''),
+    onClick: onEnter
+  }))), !searchValue && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-ai-operations sdoc-dropdown-menu"
+  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "op-type"
+  }, t('Suggestion')), /*#__PURE__*/_react["default"].createElement(_dropdownMenuItem["default"], {
+    menuConfig: _constants2.OPERATION_MENUS_CONFIG.CONTINUATION,
+    onClick: onContinuationClick
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-dropdown-menu-divider"
+  }), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "op-type"
+  }, t('Edit')), /*#__PURE__*/_react["default"].createElement(_dropdownMenuItem["default"], {
+    menuConfig: _constants2.OPERATION_MENUS_CONFIG.MORE_FLUENT,
+    onClick: onMoreFluentClick
+  }), /*#__PURE__*/_react["default"].createElement(_dropdownMenuItem["default"], {
+    menuConfig: _constants2.OPERATION_MENUS_CONFIG.MORE_DETAILS,
+    onClick: onMoreDetailsClick
+  }), /*#__PURE__*/_react["default"].createElement(_dropdownMenuItem["default"], {
+    menuConfig: _constants2.OPERATION_MENUS_CONFIG.MORE_CONCISE,
+    onClick: onMoreConciseClick
+  }), /*#__PURE__*/_react["default"].createElement(_dropdownMenuItem["default"], {
+    menuConfig: _constants2.OPERATION_MENUS_CONFIG.MORE_VIVID,
+    onClick: onMoreVividClick
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-dropdown-menu-divider"
+  }), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "op-type"
+  }, t('Translate')), /*#__PURE__*/_react["default"].createElement(_dropdownMenuItem["default"], {
+    menuConfig: _constants2.OPERATION_MENUS_CONFIG.TRANSLATE
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "sdocfont sdoc-right-slide sdoc-dropdown-item-right-icon"
+  }), /*#__PURE__*/_react["default"].createElement(_langSubMenu["default"], {
+    target: _constants2.OPERATION_MENUS_CONFIG.TRANSLATE.id,
+    onTranslateClick: onTranslateClick
+  }))))), searchResult && /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-ai-content has-result"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-ai-result"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-ai-result-content"
+  }, isGenerating ? t('Processing_message') : (0, _helpers.markdownTableRenderer)(searchResult))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-ai-search"
+  }, /*#__PURE__*/_react["default"].createElement(_aiIcon["default"], null), /*#__PURE__*/_react["default"].createElement("input", {
+    placeholder: t('Ask_AI_anything'),
+    value: inputValue,
+    onKeyDown: onKeyDown,
+    onChange: onSearchValueChanged
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "sdocfont sdoc-send-arrow ".concat(!searchValue ? 'disable' : ''),
+    onClick: onEnter
+  }))), !searchValue && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-ai-operations sdoc-dropdown-menu"
+  }, /*#__PURE__*/_react["default"].createElement(_dropdownMenuItem["default"], {
+    menuConfig: _constants2.OPERATION_MENUS_CONFIG.ADJUSTMENT,
+    isHidden: !isShowAdjust
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "sdocfont sdoc-right-slide sdoc-dropdown-item-right-icon"
+  }), /*#__PURE__*/_react["default"].createElement(_adjustSubMenu["default"], {
+    target: _constants2.OPERATION_MENUS_CONFIG.ADJUSTMENT.id,
+    onMoreFluentClick: onMoreFluentClick,
+    onMoreDetailsClick: onMoreDetailsClick,
+    onMoreConciseClick: onMoreConciseClick,
+    onMoreVividClick: onMoreVividClick
+  })), /*#__PURE__*/_react["default"].createElement(_dropdownMenuItem["default"], {
+    menuConfig: _constants2.OPERATION_MENUS_CONFIG.INSERT_BELOW,
+    onClick: onInsertClick
+  }), /*#__PURE__*/_react["default"].createElement(_dropdownMenuItem["default"], {
+    menuConfig: _constants2.OPERATION_MENUS_CONFIG.TRY_AGAIN,
+    onClick: onTryAgainClick
+  }), /*#__PURE__*/_react["default"].createElement(_dropdownMenuItem["default"], {
+    menuConfig: _constants2.OPERATION_MENUS_CONFIG.REPLACE,
+    onClick: onReplaceClick
+  }), /*#__PURE__*/_react["default"].createElement(_dropdownMenuItem["default"], {
+    menuConfig: _constants2.OPERATION_MENUS_CONFIG.COPY,
+    onClick: onCopyClick
+  }), /*#__PURE__*/_react["default"].createElement(_dropdownMenuItem["default"], {
+    menuConfig: _constants2.OPERATION_MENUS_CONFIG.DEPRECATION,
+    onClick: onDeprecationClick
+  })))), isShowTipDialog && /*#__PURE__*/_react["default"].createElement(_tipDialog["default"], {
+    closeDialog: closeTipDialog,
+    discardCurrentContent: discardCurrentContent
+  }));
+}

package/dist/extension/plugins/ai/ai-module/lang-sub-menu.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactstrap = require("reactstrap");
+var _dropdownMenuItem = _interopRequireDefault(require("../../../commons/dropdown-menu-item"));
+var _constants = require("../constants");
+var LangSubMenu = function LangSubMenu(_ref) {
+  var target = _ref.target,
+    onTranslateClick = _ref.onTranslateClick;
+  var onEnClick = (0, _react.useCallback)(function () {
+    onTranslateClick('en');
+  }, [onTranslateClick]);
+  var onZhcnClick = (0, _react.useCallback)(function () {
+    onTranslateClick('zh-cn');
+  }, [onTranslateClick]);
+
+  // const onFrClick = useCallback(() => {
+  //   onTranslateClick('fr');
+  // }, [onTranslateClick]);
+
+  // const onDeClick = useCallback(() => {
+  //   onTranslateClick('de');
+  // }, [onTranslateClick]);
+
+  // const onRuClick = useCallback(() => {
+  //   onTranslateClick('ru');
+  // }, [onTranslateClick]);
+
+  return /*#__PURE__*/_react["default"].createElement(_reactstrap.UncontrolledPopover, {
+    boundariesElement: "viewport",
+    target: target,
+    className: "ai-lang-sub-menu sdoc-sub-dropdown-menu sdoc-dropdown-menu",
+    trigger: "hover",
+    placement: "right-start",
+    hideArrow: true,
+    fade: false
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-dropdown-menu-container"
+  }, /*#__PURE__*/_react["default"].createElement(_dropdownMenuItem["default"], {
+    menuConfig: _constants.LANG_MENU_CONFIG.EN,
+    onClick: onEnClick
+  }), /*#__PURE__*/_react["default"].createElement(_dropdownMenuItem["default"], {
+    menuConfig: _constants.LANG_MENU_CONFIG.ZH_CN,
+    onClick: onZhcnClick
+  })));
+};
+var _default = exports["default"] = LangSubMenu;