@seafile/sdoc-editor 1.0.177 → 1.0.178

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

@@ -0,0 +1,452 @@
+"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 _slateReact = require("@seafile/slate-react");
+var _slate = require("@seafile/slate");
+var _reactI18next = require("react-i18next");
+var _isHotkey = _interopRequireDefault(require("is-hotkey"));
+var _copyToClipboard = _interopRequireDefault(require("copy-to-clipboard"));
+var _commons = require("../../../commons");
+var _constants = require("../constants");
+var _dropdownMenuItem = _interopRequireDefault(require("../../../commons/dropdown-menu-item"));
+var _toast = _interopRequireDefault(require("../../../../../components/toast"));
+var _context = _interopRequireDefault(require("../../../../../context"));
+var _langSubMenu = _interopRequireDefault(require("./lang-sub-menu"));
+var _adjustSubMenu = _interopRequireDefault(require("./adjust-sub-menu"));
+var _tipDialog = _interopRequireDefault(require("./tip-dialog"));
+var _core = require("../../../core");
+var _constants2 = require("../../../constants");
+var _aiIcon = _interopRequireDefault(require("../ai-icon"));
+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 [searchValue, setSearchValue] = (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)(() => {
+    const content = window.getSelection().toString();
+    if (content) {
+      setSearchValue(content);
+    }
+    scrollRef.current = document.querySelector('.sdoc-scroll-container');
+    const {
+      scrollTop,
+      scrollHeight
+    } = scrollRef.current;
+    if (!element) {
+      const domSelection = window.getSelection();
+      const domRange = domSelection.getRangeAt(0);
+      const rect = domRange.getBoundingClientRect();
+      const needPaddingBottomHeight = scrollTop + rect.bottom + _constants.AI_MIN_HEIGHT - scrollHeight;
+      if (needPaddingBottomHeight > 0) {
+        const articleDom = document.querySelector('.sdoc-editor__article');
+        articleDom.style.paddingBottom = needPaddingBottomHeight + 'px';
+      }
+      const heightDiff = rect.bottom + _constants.AI_MIN_HEIGHT - window.innerHeight;
+      if (heightDiff > 0) {
+        scrollRef.current.scrollTo({
+          top: scrollRef.current.scrollTop + heightDiff + 100,
+          behavior: 'smooth'
+        });
+      }
+      setTimeout(() => {
+        var _inputRef$current;
+        const aboveNode = (0, _core.getAboveBlockNode)(editor);
+        const slateDom = _slateReact.ReactEditor.toDOMNode(editor, aboveNode[0]);
+        const slateRect = slateDom.getBoundingClientRect();
+        const newRect = domRange.getBoundingClientRect();
+        const el = aiRef.current;
+        el.style.top = `${newRect.bottom + 8}px`; // top = Current top + Element height
+        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 needPaddingBottomHeight = scrollTop + slateRect.bottom + _constants.AI_MIN_HEIGHT - scrollHeight;
+    if (needPaddingBottomHeight > 0) {
+      const articleDom = document.querySelector('.sdoc-editor__article');
+      articleDom.style.paddingBottom = needPaddingBottomHeight + 'px';
+    }
+    const heightDiff = slateRect.bottom + _constants.AI_MIN_HEIGHT - window.innerHeight;
+    if (heightDiff > 0) {
+      scrollRef.current.scrollTo({
+        top: scrollRef.current.scrollTop + heightDiff + 100,
+        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)(() => {
+    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]);
+  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) {
+      onCloseClick();
+      return;
+    }
+    if (searchResult) {
+      setIsShowTipDialog(true);
+    }
+  }, [onCloseClick, 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]);
+  (0, _react.useEffect)(() => {
+    let observerRefValue = null;
+    if (isShowAIPopover) {
+      scrollRef.current && scrollRef.current.addEventListener('scroll', onCloseClick);
+      observerRefValue = scrollRef.current;
+    } else {
+      scrollRef.current && scrollRef.current.removeEventListener('scroll', onCloseClick);
+    }
+    return () => {
+      if (observerRefValue) {
+        observerRefValue.removeEventListener('scroll', onCloseClick);
+      }
+    };
+  }, [isShowAIPopover, onCloseClick]);
+  const onSearchValueChanged = (0, _react.useCallback)(event => {
+    const value = event.target.value;
+    if (value === searchValue) return;
+    setSearchValue(value);
+  }, [searchValue]);
+  const onEnter = (0, _react.useCallback)(() => {
+    if (!searchValue) return;
+    setOpType(_constants.OPERATION_TYPES.DEFAULT);
+    setIsGenerating(true);
+    setTimeout(() => {
+      setIsGenerating(false);
+      setSearchResult('1 + 1 等于2.');
+    });
+  }, [searchValue]);
+  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(_constants.OPERATION_TYPES.CONTINUATION);
+    setIsGenerating(true);
+    setTimeout(() => {
+      setSearchResult('[Feature is under development...]Thank you, the world becomes more beautiful because of you!');
+      setIsGenerating(false);
+    }, 2000);
+  }, []);
+  const onMoreDetailsClick = (0, _react.useCallback)(() => {
+    setOpType(_constants.OPERATION_TYPES.MORE_DETAILS);
+    setIsGenerating(true);
+    setTimeout(() => {
+      setSearchResult('[Function is under development...]Thank you, because of you, the world becomes more beautiful! Thank you for your attention, we will continue to provide you with high-quality services');
+      setIsGenerating(false);
+    }, 2000);
+  }, []);
+  const onMoreConciseClick = (0, _react.useCallback)(() => {
+    setOpType(_constants.OPERATION_TYPES.MORE_CONCISE);
+    setIsGenerating(true);
+    setTimeout(() => {
+      setSearchResult('[Functions are under development...] Because of you, the world becomes more beautiful!');
+      setIsGenerating(false);
+    }, 2000);
+  }, []);
+  const onMoreVividClick = (0, _react.useCallback)(() => {
+    setOpType(_constants.OPERATION_TYPES.MORE_VIVID);
+    setIsGenerating(true);
+    setTimeout(() => {
+      setSearchResult('[Functions are under development...] Because of you, the world has become full of flowers and seasons, allowing people to live in a happy time!');
+      setIsGenerating(false);
+    }, 2000);
+  }, []);
+  const onTranslateClick = (0, _react.useCallback)(lang => {
+    if (!searchValue) {
+      _toast.default.warning(t('The_translation_content_cannot_be_empty'));
+      return;
+    }
+    setOpType(_constants.OPERATION_TYPES.TRANSLATE);
+    const translateLang = lang ? lang : currentLang;
+    setCurrentLang(translateLang);
+    setIsGenerating(true);
+    _context.default.aiTranslate(searchValue, translateLang).then(res => {
+      const {
+        translation
+      } = res.data;
+      setSearchResult(translation);
+      setIsGenerating(false);
+    }).catch(err => {
+      setIsGenerating(false);
+      _toast.default.danger('Translation_error_message');
+    });
+  }, [currentLang, searchValue, 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 aboveNode = (0, _core.getAboveBlockNode)(editor);
+      nextPath = _slate.Path.next(aboveNode[1]);
+    } else {
+      const path = _slateReact.ReactEditor.findPath(editor, element);
+      nextPath = _slate.Path.next(path);
+    }
+    const p = (0, _core.generateEmptyElement)(_constants2.PARAGRAPH);
+    p.children[0].text = searchResult;
+    _slate.Transforms.insertNodes(editor, p, {
+      at: nextPath
+    });
+    onCloseClick();
+    focusToEndPath(nextPath);
+  }, [editor, element, focusToEndPath, onCloseClick, searchResult]);
+  const onTryAgainClick = (0, _react.useCallback)(() => {
+    switch (opType) {
+      case _constants.OPERATION_TYPES.TRANSLATE:
+        onTranslateClick();
+        return;
+      case _constants.OPERATION_TYPES.MORE_DETAILS:
+        onMoreDetailsClick();
+        return;
+      case _constants.OPERATION_TYPES.MORE_CONCISE:
+        onMoreConciseClick();
+        return;
+      case _constants.OPERATION_TYPES.MORE_VIVID:
+        onMoreVividClick();
+        return;
+      case _constants.OPERATION_TYPES.CONTINUATION:
+        onContinuationClick();
+        return;
+      default:
+        return;
+    }
+  }, [onContinuationClick, onMoreConciseClick, onMoreDetailsClick, onMoreVividClick, onTranslateClick, opType]);
+  const onReplaceClick = (0, _react.useCallback)(() => {
+    if (!element) {
+      editor.deleteFragment();
+      if (searchResult) {
+        editor.insertText(searchResult);
+      }
+      onCloseClick();
+      const aboveNode = (0, _core.getAboveBlockNode)(editor);
+      focusToEndPath(aboveNode[1]);
+    } else {
+      const path = _slateReact.ReactEditor.findPath(editor, element);
+      _slate.Transforms.removeNodes(editor, {
+        at: path
+      });
+      const p = (0, _core.generateEmptyElement)(_constants2.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
+    });
+  }, [searchResult, t]);
+  const onDeprecationClick = (0, _react.useCallback)(() => {
+    setIsShowTipDialog(true);
+  }, []);
+  const isShowAdjust = (0, _react.useMemo)(() => {
+    return ![_constants.OPERATION_TYPES.DEFAULT, _constants.OPERATION_TYPES.TRANSLATE].includes(opType);
+  }, [opType]);
+  const isShowReplace = (0, _react.useMemo)(() => {
+    return opType !== _constants.OPERATION_TYPES.DEFAULT;
+  }, [opType]);
+  const resultMenu = (0, _react.useMemo)(() => {
+    const type = opType && opType.toUpperCase();
+    if (opType === _constants.OPERATION_TYPES.TRANSLATE) {
+      return _constants.LANG_MENU_CONFIG[currentLang.toUpperCase()];
+    }
+    return _constants.OPERATION_MENUS_CONFIG[type];
+  }, [currentLang, opType]);
+  const closeTipDialog = (0, _react.useCallback)(() => {
+    setIsShowTipDialog(false);
+  }, []);
+  const discardCurrentContent = (0, _react.useCallback)(() => {
+    onCloseClick();
+    setIsShowTipDialog(false);
+  }, [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
+  }))), /*#__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: _constants.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: _constants.OPERATION_MENUS_CONFIG.MORE_DETAILS,
+    onClick: onMoreDetailsClick
+  }), /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
+    menuConfig: _constants.OPERATION_MENUS_CONFIG.MORE_CONCISE,
+    onClick: onMoreConciseClick
+  }), /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
+    menuConfig: _constants.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: _constants.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: _constants.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"
+  }, resultMenu && /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-ai-result-header"
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_aiIcon.default, null), /*#__PURE__*/_react.default.createElement("span", null, t(resultMenu.text))), /*#__PURE__*/_react.default.createElement("span", {
+    className: "sdocfont sdoc-close",
+    onClick: onDeprecationClick
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-ai-result-content"
+  }, isGenerating ? t('Processing_message') : searchResult), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-ai-statistic"
+  }, t('Generated_content_x_words', {
+    count: searchResult.length
+  }))), /*#__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",
+    onClick: onEnter
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-ai-operations sdoc-dropdown-menu"
+  }, /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
+    menuConfig: _constants.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: _constants.OPERATION_MENUS_CONFIG.ADJUSTMENT.id,
+    onMoreDetailsClick: onMoreDetailsClick,
+    onMoreConciseClick: onMoreConciseClick,
+    onMoreVividClick: onMoreVividClick
+  })), /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
+    menuConfig: _constants.OPERATION_MENUS_CONFIG.INSERT_BELOW,
+    onClick: onInsertClick
+  }), /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
+    menuConfig: _constants.OPERATION_MENUS_CONFIG.TRY_AGAIN,
+    onClick: onTryAgainClick
+  }), /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
+    menuConfig: _constants.OPERATION_MENUS_CONFIG.REPLACE,
+    isHidden: !isShowReplace,
+    onClick: onReplaceClick
+  }), /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
+    menuConfig: _constants.OPERATION_MENUS_CONFIG.COPY,
+    onClick: onCopyClick
+  }), /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
+    menuConfig: _constants.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 _constants = require("../constants");
+var _dropdownMenuItem = _interopRequireDefault(require("../../../commons/dropdown-menu-item"));
+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;

package/dist/basic-sdk/extension/plugins/ai/ai-module/style.css

@@ -0,0 +1,104 @@
+.sdoc-ai-module-container {
+  position: absolute;
+  z-index: 1000;
+  width: 100%;
+  max-width: 672px;
+  display: none;
+}
+
+.sdoc-ai-module-container .sdoc-ai-content {
+  background-color: #fff;
+  border: 1px solid #eee;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px rgba(255, 255, 255, 0.1);
+}
+
+.sdoc-ai-content .sdoc-ai-search {
+  position: relative;
+  height: 50px;
+  line-height: 50px;
+  display: flex;
+  align-items: center;
+}
+
+.sdoc-ai-content .sdoc-ai-search input {
+  border: none;
+  padding: 0 44px;
+  border-radius: 10px;
+  width: 100%;
+  outline: none;
+}
+
+.sdoc-ai-content .sdoc-ai-search input {
+  border: none;
+  padding: 0 44px;
+  border-radius: 10px;
+  width: 100%;
+}
+
+.sdoc-ai-content .sdoc-ai-search .sdoc-send-arrow {
+  position: absolute;
+  right: 16px;
+  color: #ff9800;
+  cursor: pointer;
+}
+
+.sdoc-ai-content .sdoc-ai-search .sdoc-send-arrow.disable {
+  color: #BDBDBD;
+}
+
+.sdoc-ai-content .sdoc-ai-result {
+  position: relative;
+  height: 50px;
+}
+
+.sdoc-ai-module-container .sdoc-ai-operations {
+  width: 200px;
+  margin-top: 8px;
+  padding: 8px 0;
+  border: 1px solid #eee;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px rgba(255, 255, 255, 0.1);
+  background-color: #fff;
+}
+
+.sdoc-ai-module-container .sdoc-ai-operations .op-type {
+  color: #666;
+  font-size: 14px;
+  min-height: 32px;
+  padding: 3px 12px;
+}
+
+.sdoc-ai-module-container .sdoc-ai-result {
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  height: auto;
+  max-height: 300px;
+}
+
+.sdoc-ai-module-container .sdoc-ai-result .sdoc-ai-result-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.sdoc-ai-module-container .sdoc-ai-result .sdoc-ai-result-header .sdocfont {
+  font-size: 14px;
+}
+
+.sdoc-ai-module-container .sdoc-ai-result .sdoc-ai-result-header .sdoc-ask-ai {
+  margin-right: 10px;
+}
+
+.sdoc-ai-module-container .sdoc-ai-result .sdoc-ai-result-header .sdoc-close {
+  color: #999;
+}
+
+.sdoc-ai-module-container .sdoc-ai-result .sdoc-ai-result-header .sdoc-close:hover {
+  color: #555;
+}
+
+.sdoc-ai-module-container .sdoc-ai-result .sdoc-ai-result-content {
+  padding: 16px 0;
+}

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

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = TipDialog;
+var _react = _interopRequireDefault(require("react"));
+var _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
+function TipDialog(_ref) {
+  let {
+    closeDialog,
+    discardCurrentContent
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)('sdoc-editor');
+  return /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
+    isOpen: true,
+    toggle: closeDialog
+  }, /*#__PURE__*/_react.default.createElement(_reactstrap.ModalHeader, {
+    toggle: closeDialog
+  }, t('Tip')), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalBody, null, t('AI_tip_content')), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
+    color: "secondary",
+    className: "mr-2",
+    onClick: closeDialog
+  }, t('Cancel')), /*#__PURE__*/_react.default.createElement(_reactstrap.Button, {
+    color: "primary",
+    onClick: discardCurrentContent
+  }, t('Discard'))));
+}