@seafile/comment-editor 0.0.1-alpha.0

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

@@ -0,0 +1,600 @@
+"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 = AIModule;
+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 _context = _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) {
+  let {
+    editor,
+    element,
+    closeModule
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  const aiRef = (0, _react.useRef)(null);
+  const inputRef = (0, _react.useRef)(null);
+  const scrollRef = (0, _react.useRef)(null);
+  const [isShowAIPopover, setIsShowAIPopover] = (0, _react.useState)(false);
+  const [opType, setOpType] = (0, _react.useState)('');
+  const [selectedValue, setSelectedValue] = (0, _react.useState)('');
+  const [searchValue, setSearchValue] = (0, _react.useState)('');
+  const [oldSearchValue, setOldSearchValue] = (0, _react.useState)('');
+  const [isGenerating, setIsGenerating] = (0, _react.useState)(false);
+  const [searchResult, setSearchResult] = (0, _react.useState)(null);
+  const [currentLang, setCurrentLang] = (0, _react.useState)('en');
+  const [isShowTipDialog, setIsShowTipDialog] = (0, _react.useState)(false);
+  const toggleAskAI = (0, _react.useCallback)(() => {
+    // Add marks for selection
+    _slate.Editor.addMark(editor, 'sdoc_ai', true);
+    scrollRef.current = document.querySelector('.sdoc-scroll-container');
+    const {
+      scrollTop,
+      scrollHeight
+    } = scrollRef.current;
+    if (!element) {
+      const content = window.getSelection().toString();
+      if (content) {
+        setSelectedValue(content);
+      }
+      const domSelection = window.getSelection();
+      const domRange = domSelection.getRangeAt(0);
+      const rect = domRange.getBoundingClientRect();
+      const needPaddingBottomHeight = scrollTop + rect.bottom + _constants2.AI_MIN_HEIGHT - scrollHeight;
+      if (needPaddingBottomHeight > 0) {
+        const articleDom = document.querySelector('.sdoc-editor__article');
+        articleDom.style.paddingBottom = needPaddingBottomHeight + 'px';
+      }
+      const isInView = rect.top + rect.height - window.innerHeight;
+      const 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(() => {
+        var _rect, _inputRef$current;
+        const aboveNode = (0, _core.getAboveBlockNode)(editor);
+        const slateDom = _slateReact.ReactEditor.toDOMNode(editor, aboveNode[0]);
+        const slateRect = slateDom.getBoundingClientRect();
+        const markedSpan = document.querySelectorAll('span[data-slate-leaf="true"].sdoc_ai');
+        let rect;
+        if (markedSpan.length) {
+          rect = markedSpan[markedSpan.length - 1].getBoundingClientRect();
+        }
+        const el = aiRef.current;
+        el.style.top = `${((_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 = `${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;
+    }
+    const slateDom = _slateReact.ReactEditor.toDOMNode(editor, element);
+    const slateRect = slateDom.getBoundingClientRect();
+    const content = _slate.Node.string(element);
+    if (content) {
+      setSelectedValue(content);
+    }
+    const needPaddingBottomHeight = scrollTop + slateRect.bottom + _constants2.AI_MIN_HEIGHT - scrollHeight;
+    if (needPaddingBottomHeight > 0) {
+      const articleDom = document.querySelector('.sdoc-editor__article');
+      articleDom.style.paddingBottom = needPaddingBottomHeight + 'px';
+    }
+    const heightDiff = slateRect.bottom + _constants2.AI_MIN_HEIGHT - window.innerHeight;
+    if (heightDiff > 0) {
+      scrollRef.current.scrollTo({
+        top: scrollTop + slateRect.top - 94,
+        behavior: 'smooth'
+      });
+    }
+    setTimeout(() => {
+      var _inputRef$current2;
+      const slateRect = slateDom.getBoundingClientRect();
+      const el = aiRef.current;
+      el.style.top = `${slateRect.bottom + 8}px`; // top = Current top + Element height
+      el.style.left = `${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]);
+  const onCloseClick = (0, _react.useCallback)(() => {
+    (0, _helpers.removeMarks)(editor);
+    const element = aiRef.current;
+    element.style.display = 'none';
+    const articleDom = document.querySelector('.sdoc-editor__article');
+    articleDom.style.removeProperty('padding-bottom');
+    setSearchValue('');
+    setSearchResult('');
+    setIsShowAIPopover(false);
+    closeModule();
+  }, [closeModule, editor]);
+  const onDocumentClick = (0, _react.useCallback)(event => {
+    // not in ai container
+    if (aiRef.current && aiRef.current.contains(event.target) && aiRef.current !== event.target) return;
+    // context menu toggle
+    const contextAskAI = document.querySelector('#context-toolbar-ai');
+    if (contextAskAI && contextAskAI.contains(event.target)) return;
+    const sideAskAI = document.querySelector('#side-toolbar-ai');
+    if (sideAskAI && sideAskAI.contains(event.target)) return;
+
+    // click in submenu
+    const adjustSubMenu = document.querySelector('.ai-adjust-sub-menu');
+    if (adjustSubMenu && adjustSubMenu.contains(event.target)) return;
+    const 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)(() => {
+    toggleAskAI();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  (0, _react.useEffect)(() => {
+    window.addEventListener('click', onDocumentClick);
+    return () => {
+      window.removeEventListener('click', onDocumentClick);
+    };
+  }, [onDocumentClick]);
+  const onScroll = (0, _react.useCallback)(event => {
+    if (!element) {
+      var _rect2;
+      const markedSpan = document.querySelectorAll('span[data-slate-leaf="true"].sdoc_ai');
+      let rect;
+      if (markedSpan.length) {
+        rect = markedSpan[markedSpan.length - 1].getBoundingClientRect();
+      }
+      const aboveNode = (0, _core.getAboveBlockNode)(editor);
+      const slateDom = _slateReact.ReactEditor.toDOMNode(editor, aboveNode[0]);
+      const slateRect = slateDom.getBoundingClientRect();
+      const el = aiRef.current;
+      el.style.top = `${((_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 = `${slateRect.left}px`;
+      el.style.display = 'block';
+    } else {
+      const slateDom = _slateReact.ReactEditor.toDOMNode(editor, element);
+      const slateRect = slateDom.getBoundingClientRect();
+      const el = aiRef.current;
+      el.style.top = `${slateRect.bottom + 8}px`; // top = Current top + Element height
+      el.style.left = `${slateRect.left}px`;
+      el.style.display = 'block';
+    }
+  }, [editor, element]);
+  (0, _react.useEffect)(() => {
+    let observerRefValue = null;
+    if (isShowAIPopover) {
+      scrollRef.current && scrollRef.current.addEventListener('scroll', onScroll);
+      observerRefValue = scrollRef.current;
+    } else {
+      scrollRef.current && scrollRef.current.removeEventListener('scroll', onScroll);
+    }
+    return () => {
+      if (observerRefValue) {
+        observerRefValue.removeEventListener('scroll', onScroll);
+      }
+    };
+  }, [isShowAIPopover, onScroll]);
+  const onSearchValueChanged = (0, _react.useCallback)(event => {
+    const value = event.target.value;
+    if (value === searchValue) return;
+    setSearchValue(value);
+  }, [searchValue]);
+  const transferHtml = async mdString => {
+    const htmlString = await _mdToHtml.default.process(mdString);
+    const formatHtml = String(htmlString).trim();
+    setSearchResult(formatHtml);
+  };
+  const onEnter = (0, _react.useCallback)(event => {
+    if (!searchValue) return;
+    setOpType(_constants2.OPERATION_TYPES.DEFAULT);
+    setIsGenerating(true);
+    const defaultContent = selectedValue;
+    const custom_prompt = searchValue;
+    if (!custom_prompt) {
+      _toast.default.danger(t('Processing_content_cannot_be_empty'));
+      return;
+    }
+    _context.default.writingAssistant(defaultContent, 'ask', custom_prompt).then(res => {
+      let {
+        content
+      } = res.data;
+      transferHtml(content);
+      setIsGenerating(false);
+      setSearchValue('');
+      setOldSearchValue(searchValue);
+    }).catch(err => {
+      setIsGenerating(false);
+      _toast.default.danger('AI_error_message');
+      setSearchValue('');
+      setOldSearchValue(searchValue);
+    });
+  }, [searchValue, selectedValue, t]);
+  const onKeyDown = (0, _react.useCallback)(event => {
+    if ((0, _isHotkey.default)('enter', event)) {
+      event.preventDefault();
+      onEnter();
+    }
+  }, [onEnter]);
+  const inputValue = (0, _react.useMemo)(() => {
+    const generatingPlaceHolder = t('Thinking');
+    if (isGenerating) return generatingPlaceHolder;
+    if (!isGenerating) return searchValue;
+  }, [isGenerating, searchValue, t]);
+  const onContinuationClick = (0, _react.useCallback)(() => {
+    setOpType(_constants2.OPERATION_TYPES.CONTINUATION);
+    setIsGenerating(true);
+    const defaultContent = selectedValue;
+    if (!defaultContent) {
+      _toast.default.danger(t('Processing_content_cannot_be_empty'));
+      return;
+    }
+    _context.default.writingAssistant(defaultContent, 'continue_writing').then(res => {
+      const {
+        content
+      } = res.data;
+      transferHtml(content);
+      setIsGenerating(false);
+    }).catch(err => {
+      setIsGenerating(false);
+      _toast.default.danger('AI_error_message');
+    });
+  }, [selectedValue, t]);
+  const onMoreDetailsClick = (0, _react.useCallback)(() => {
+    setOpType(_constants2.OPERATION_TYPES.MORE_DETAILS);
+    setIsGenerating(true);
+    const defaultContent = selectedValue;
+    if (!defaultContent) {
+      _toast.default.danger(t('Processing_content_cannot_be_empty'));
+      return;
+    }
+    _context.default.writingAssistant(defaultContent, _constants2.OPERATION_TYPES.MORE_DETAILS).then(res => {
+      const {
+        content
+      } = res.data;
+      transferHtml(content);
+      setIsGenerating(false);
+    }).catch(err => {
+      setIsGenerating(false);
+      _toast.default.danger('AI_error_message');
+    });
+  }, [selectedValue, t]);
+  const onMoreFluentClick = (0, _react.useCallback)(() => {
+    setOpType(_constants2.OPERATION_TYPES.MORE_FLUENT);
+    setIsGenerating(true);
+    const defaultContent = selectedValue;
+    if (!defaultContent) {
+      _toast.default.danger(t('Processing_content_cannot_be_empty'));
+      return;
+    }
+    _context.default.writingAssistant(defaultContent, _constants2.OPERATION_TYPES.MORE_FLUENT).then(res => {
+      const {
+        content
+      } = res.data;
+      transferHtml(content);
+      setIsGenerating(false);
+    }).catch(err => {
+      setIsGenerating(false);
+      _toast.default.danger('AI_error_message');
+    });
+  }, [selectedValue, t]);
+  const onMoreConciseClick = (0, _react.useCallback)(() => {
+    setOpType(_constants2.OPERATION_TYPES.MORE_CONCISE);
+    setIsGenerating(true);
+    const defaultContent = selectedValue;
+    if (!defaultContent) {
+      _toast.default.danger(t('Processing_content_cannot_be_empty'));
+      return;
+    }
+    _context.default.writingAssistant(defaultContent, _constants2.OPERATION_TYPES.MORE_CONCISE).then(res => {
+      const {
+        content
+      } = res.data;
+      transferHtml(content);
+      setIsGenerating(false);
+    }).catch(err => {
+      setIsGenerating(false);
+      _toast.default.danger('AI_error_message');
+    });
+  }, [selectedValue, t]);
+  const onMoreVividClick = (0, _react.useCallback)(() => {
+    setOpType(_constants2.OPERATION_TYPES.MORE_VIVID);
+    setIsGenerating(true);
+    const defaultContent = selectedValue;
+    if (!defaultContent) {
+      _toast.default.danger(t('Processing_content_cannot_be_empty'));
+      return;
+    }
+    _context.default.writingAssistant(defaultContent, _constants2.OPERATION_TYPES.MORE_VIVID).then(res => {
+      const {
+        content
+      } = res.data;
+      transferHtml(content);
+      setIsGenerating(false);
+    }).catch(err => {
+      setIsGenerating(false);
+      _toast.default.danger('Translation_error_message');
+    });
+  }, [selectedValue, t]);
+  const onTranslateClick = (0, _react.useCallback)(lang => {
+    const translateValue = selectedValue;
+    if (!translateValue) {
+      _toast.default.warning(t('The_translation_content_cannot_be_empty'));
+      return;
+    }
+    setOpType(_constants2.OPERATION_TYPES.TRANSLATE);
+    const translateLang = lang ? lang : currentLang;
+    setCurrentLang(translateLang);
+    setIsGenerating(true);
+    _context.default.aiTranslate(translateValue, translateLang).then(res => {
+      const {
+        translation
+      } = res.data;
+      transferHtml(translation);
+      setIsGenerating(false);
+    }).catch(err => {
+      setIsGenerating(false);
+      _toast.default.danger('Translation_error_message');
+    });
+  }, [currentLang, selectedValue, t]);
+  const focusToEndPath = (0, _react.useCallback)(path => {
+    setTimeout(() => {
+      const endOfLastNodePoint = _slate.Editor.end(editor, path);
+      const range = {
+        anchor: endOfLastNodePoint,
+        focus: endOfLastNodePoint
+      };
+      (0, _core.focusEditor)(editor, range);
+    }, 0);
+  }, [editor]);
+  const onInsertClick = (0, _react.useCallback)(() => {
+    let nextPath = null;
+    if (!element) {
+      const end = _slate.Range.end(editor.selection);
+      const aboveNode = (0, _core.getAboveBlockNode)(editor, {
+        at: end
+      });
+      nextPath = _slate.Path.next(aboveNode[1]);
+    } else {
+      const 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
+    const optimizedSearchResult = searchResult.replace(/<pre[\s\S]*?<\/pre>|>\s+</g, match => {
+      return match.startsWith('<pre') ? match : '><';
+    }).trim();
+    const slateNodeList = (0, _mdToSlate.default)(optimizedSearchResult);
+    (0, _helpers.insertHtmlTransferredNodes)(slateNodeList, nextPath, editor);
+    onCloseClick();
+    focusToEndPath(nextPath);
+  }, [editor, element, focusToEndPath, onCloseClick, searchResult]);
+  const onTryAgainClick = (0, _react.useCallback)(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]);
+  const onReplaceClick = (0, _react.useCallback)(() => {
+    if (!element) {
+      editor.deleteFragment();
+      if (searchResult) {
+        const optimizedSearchResult = searchResult.replace(/<pre[\s\S]*?<\/pre>|>\s+</g, match => {
+          return match.startsWith('<pre') ? match : '><';
+        }).trim();
+        const 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) {
+          const text = slateNodeList[0].children[0].text;
+          editor.insertText(text);
+        } else {
+          const topBlockNode = (0, _core.getTopLevelBlockNode)(editor);
+          const nextPath = _slate.Path.next(topBlockNode[1]);
+          (0, _helpers.insertHtmlTransferredNodes)(slateNodeList, nextPath, editor);
+        }
+      }
+      onCloseClick();
+      const end = _slate.Range.end(editor.selection);
+      const aboveNode = (0, _core.getAboveBlockNode)(editor, {
+        at: end
+      });
+      focusToEndPath(aboveNode[1]);
+    } else {
+      const path = _slateReact.ReactEditor.findPath(editor, element);
+      _slate.Transforms.removeNodes(editor, {
+        at: path
+      });
+      const 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]);
+  const onCopyClick = (0, _react.useCallback)(() => {
+    (0, _copyToClipboard.default)(searchResult);
+    _toast.default.success(t('Copied'), {
+      hasCloseButton: false,
+      duration: 2
+    });
+    onCloseClick();
+  }, [onCloseClick, searchResult, t]);
+  const onDeprecationClick = (0, _react.useCallback)(() => {
+    onCloseClick();
+  }, [onCloseClick]);
+  const isShowAdjust = (0, _react.useMemo)(() => {
+    return ![_constants2.OPERATION_TYPES.DEFAULT, _constants2.OPERATION_TYPES.TRANSLATE].includes(opType);
+  }, [opType]);
+  const closeTipDialog = (0, _react.useCallback)(() => {
+    setIsShowTipDialog(false);
+  }, []);
+  const discardCurrentContent = (0, _react.useCallback)(() => {
+    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 ${!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 ${!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/basic-sdk/extension/plugins/ai/ai-module/lang-sub-menu.js

@@ -0,0 +1,55 @@
+"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");
+const LangSubMenu = _ref => {
+  let {
+    target,
+    onTranslateClick
+  } = _ref;
+  const onEnClick = (0, _react.useCallback)(() => {
+    onTranslateClick('en');
+  }, [onTranslateClick]);
+  const onZhcnClick = (0, _react.useCallback)(() => {
+    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;