@gravity-ui/markdown-editor 13.17.1 → 13.18.1

package/README.md

@@ -1,3 +1,5 @@
+![Markdown Editor](https://github.com/user-attachments/assets/40be2902-a683-4167-bd8d-ffd8bff26e69)
+
 # @gravity-ui/markdown-editor · [![npm package](https://img.shields.io/npm/v/@gravity-ui/markdown-editor)](https://www.npmjs.com/package/@gravity-ui/markdown-editor) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/markdown-editor/ci.yml?branch=main&label=CI)](https://github.com/gravity-ui/markdown-editor/actions/workflows/ci.yml?query=branch:main) [![Release](https://img.shields.io/github/actions/workflow/status/gravity-ui/markdown-editor/release.yml?branch=main&label=Release)](https://github.com/gravity-ui/markdown-editor/actions/workflows/release.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/md-editor/)
 
 ## Markdown wysiwyg and markup editor
@@ -56,6 +58,8 @@ Read more:
 - [How to add Latex extension](docs/how-to-connect-latex-extension.md)
 - [How to add Mermaid extension](docs/how-to-connect-mermaid-extension.md)
 - [How to write extension](docs/how-to-create-extension.md)
+- [How to add GPT extension](docs/how-to-connect-gpt-extensions.md)
+
 
 ### i18n
 

package/build/cjs/bundle/config/action-names.d.ts

@@ -1,3 +1,3 @@
-declare const namesObj: Record<"bold" | "link" | "italic" | "strike" | "underline" | "mark" | "quote" | "mono" | "paragraph" | "anchor" | "table" | "image" | "code_inline" | "code_block" | "file" | "checkbox" | "bulletList" | "orderedList" | "emoji" | "tabs" | "yfm_cut" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "yfm_note" | "undo" | "redo" | "math_inline" | "math_block" | "mermaid" | "liftListItem" | "sinkListItem" | "yfm_block" | "yfm_html_block" | "yfm_layout" | "horizontalrule", string>;
+declare const namesObj: Record<"bold" | "link" | "italic" | "strike" | "underline" | "mark" | "quote" | "mono" | "paragraph" | "anchor" | "table" | "image" | "code_inline" | "code_block" | "file" | "checkbox" | "bulletList" | "orderedList" | "emoji" | "tabs" | "yfm_cut" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "yfm_note" | "gpt" | "undo" | "redo" | "math_inline" | "math_block" | "mermaid" | "liftListItem" | "sinkListItem" | "yfm_block" | "yfm_html_block" | "yfm_layout" | "horizontalrule", string>;
 export declare const ActionName: Readonly<typeof namesObj>;
 export {};

package/build/cjs/bundle/config/action-names.js

@@ -41,6 +41,7 @@ const names = [
     'math_block',
     'tabs',
     'mermaid',
+    'gpt',
 ];
 const namesObj = names.reduce((obj, val) => {
     obj[val] = val;

package/build/cjs/bundle/config/icons.d.ts

@@ -1,5 +1,5 @@
 import { ToolbarIconData } from '../../toolbar/types';
-declare type Icon = 'undo' | 'redo' | 'bold' | 'italic' | 'underline' | 'strikethrough' | 'mono' | 'mark' | 'textColor' | 'text' | 'headline' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'bulletList' | 'orderedList' | 'sink' | 'lift' | 'cut' | 'note' | 'code' | 'codeBlock' | 'link' | 'image' | 'table' | 'quote' | 'checklist' | 'horizontalRule' | 'file' | 'functionInline' | 'functionBlock' | 'emoji' | 'tabs' | 'mermaid' | 'html' | 'foldingHeading';
+declare type Icon = 'undo' | 'redo' | 'bold' | 'italic' | 'underline' | 'strikethrough' | 'mono' | 'mark' | 'textColor' | 'text' | 'headline' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'bulletList' | 'orderedList' | 'sink' | 'lift' | 'cut' | 'note' | 'code' | 'codeBlock' | 'link' | 'image' | 'table' | 'quote' | 'checklist' | 'horizontalRule' | 'file' | 'functionInline' | 'functionBlock' | 'emoji' | 'tabs' | 'mermaid' | 'html' | 'foldingHeading' | 'gpt';
 declare type Icons = Record<Icon, ToolbarIconData>;
 export declare const icons: Icons;
 export {};

package/build/cjs/bundle/config/icons.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.icons = void 0;
+const tslib_1 = require("tslib");
 const icons_1 = require("../../icons");
+const GPT_1 = tslib_1.__importDefault(require("../../icons/GPT"));
 exports.icons = {
     undo: { data: icons_1.UndoIcon },
     redo: { data: icons_1.RedoIcon },
@@ -42,4 +44,5 @@ exports.icons = {
     tabs: { data: icons_1.TabsIcon },
     mermaid: { data: icons_1.MermaidIcon },
     foldingHeading: { data: icons_1.FoldingHeadingIcon },
+    gpt: { data: GPT_1.default },
 };

package/build/cjs/bundle/config/wysiwyg.d.ts

@@ -45,6 +45,7 @@ export declare const wMathBlockItemData: WToolbarSingleItemData;
 export declare const wMathListConfig: WToolbarListButtonData;
 export declare const wMathListItem: WToolbarListItemData;
 export declare const wYfmHtmlBlockItemData: WToolbarSingleItemData;
+export declare const wGptItemData: WToolbarSingleItemData;
 export declare const wCommandMenuConfig: WToolbarItemData[];
 export declare const wHiddenData: WToolbarItemData[];
 /** prepared wysiwyg toolbar config */

package/build/cjs/bundle/config/wysiwyg.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.wSelectionMenuConfigByPreset = exports.wHiddenDataByPreset = exports.wCommandMenuConfigByPreset = exports.wToolbarConfigByPreset = exports.wMermaidItemData = exports.wSelectionMenuConfig = exports.wToggleHeadingFoldingItemData = exports.wToolbarConfig = exports.wHiddenData = exports.wCommandMenuConfig = exports.wYfmHtmlBlockItemData = exports.wMathListItem = exports.wMathListConfig = exports.wMathBlockItemData = exports.wTabsItemData = exports.wMathInlineItemData = exports.wFileItemData = exports.wEmojiItemData = exports.wHruleItemData = exports.wImageItemData = exports.wCodeListConfig = exports.wCodeBlockItemData = exports.wCodeItemData = exports.wTableItemData = exports.wNoteItemData = exports.wListMoveListConfig = exports.wCutItemData = exports.wQuoteItemData = exports.wLinkItemData = exports.wCheckboxItemData = exports.wListsListConfig = exports.wHeadingListConfig = exports.wTextItemData = exports.wBiusGroupConfig = exports.wMarkedItemData = exports.wMonospaceItemData = exports.wStrikethroughItemData = exports.wUnderlineItemData = exports.wItalicItemData = exports.wBoldItemData = exports.wHistoryGroupConfig = void 0;
+exports.wSelectionMenuConfigByPreset = exports.wHiddenDataByPreset = exports.wCommandMenuConfigByPreset = exports.wToolbarConfigByPreset = exports.wMermaidItemData = exports.wSelectionMenuConfig = exports.wToggleHeadingFoldingItemData = exports.wToolbarConfig = exports.wHiddenData = exports.wCommandMenuConfig = exports.wGptItemData = exports.wYfmHtmlBlockItemData = exports.wMathListItem = exports.wMathListConfig = exports.wMathBlockItemData = exports.wTabsItemData = exports.wMathInlineItemData = exports.wFileItemData = exports.wEmojiItemData = exports.wHruleItemData = exports.wImageItemData = exports.wCodeListConfig = exports.wCodeBlockItemData = exports.wCodeItemData = exports.wTableItemData = exports.wNoteItemData = exports.wListMoveListConfig = exports.wCutItemData = exports.wQuoteItemData = exports.wLinkItemData = exports.wCheckboxItemData = exports.wListsListConfig = exports.wHeadingListConfig = exports.wTextItemData = exports.wBiusGroupConfig = exports.wMarkedItemData = exports.wMonospaceItemData = exports.wStrikethroughItemData = exports.wUnderlineItemData = exports.wItalicItemData = exports.wBoldItemData = exports.wHistoryGroupConfig = void 0;
 const extensions_1 = require("../../extensions");
+// for typings from Math
+const constants_1 = require("../../extensions/yfm/GPT/constants");
 const hints_1 = require("../../i18n/hints");
 const menubar_1 = require("../../i18n/menubar");
 const shortcuts_1 = require("../../shortcuts");
@@ -403,6 +405,16 @@ exports.wYfmHtmlBlockItemData = {
     isActive: (e) => e.actions.createYfmHtmlBlock.isActive(),
     isEnable: (e) => e.actions.createYfmHtmlBlock.isEnable(),
 };
+exports.wGptItemData = {
+    id: action_names_1.ActionName.gpt,
+    type: types_1.ToolbarDataType.SingleButton,
+    title: menubar_1.i18n.bind(null, 'gpt'),
+    hotkey: constants_1.gptHotKeys.openGptKeyTooltip,
+    icon: icons_1.icons.gpt,
+    exec: (e) => e.actions.addGptWidget.run({}),
+    isActive: (e) => e.actions.addGptWidget.isActive(),
+    isEnable: (e) => e.actions.addGptWidget.isEnable(),
+};
 exports.wCommandMenuConfig = [
     ...exports.wHeadingListConfig.data,
     ...exports.wListsListConfig.data,

package/build/cjs/extensions/behavior/Clipboard/clipboard.js

@@ -92,7 +92,10 @@ const clipboard = ({ textParser, mdParser, serializer, pasteFileHandler, }) => {
                         const codeType = (0, code_1.isInsideCode)(view.state);
                         if (codeType) {
                             const schema = view.state.schema;
-                            view.dispatch((0, core_1.trackTransactionMetrics)(view.state.tr.replaceSelectionWith(schema.text(codeType === 'inline' ? data.trim() : data)), 'paste', { clipboardDataFormat: dataFormat, code: codeType }));
+                            const insideCodeData = e.clipboardData.getData(utils_1.DataTransferType.Text);
+                            view.dispatch((0, core_1.trackTransactionMetrics)(view.state.tr.replaceSelectionWith(schema.text(codeType === 'inline'
+                                ? insideCodeData.trim()
+                                : insideCodeData)), 'paste', { clipboardDataFormat: utils_1.DataTransferType.Text, code: codeType }));
                             isPasteHandled = true;
                         }
                         else {

package/build/cjs/extensions/markdown/Table/actions/innerActions.d.ts

@@ -1,2 +1,2 @@
 import { ActionSpec } from '../../../../core';
-export declare const innerActions: Record<"addRow" | "deleteRow" | "addColumn" | "deleteColumn" | "setCellLeftAlign" | "setCellCenterAlign" | "setCellRightAlign", ActionSpec>;
+export declare const innerActions: Record<"deleteRow" | "deleteColumn" | "setCellLeftAlign" | "setCellCenterAlign" | "setCellRightAlign" | "addRow" | "addColumn", ActionSpec>;

package/build/cjs/extensions/yfm/GPT/ErrorScreen/ErrorScreen.css

@@ -0,0 +1,18 @@
+.g-md-gpt-dialog-error-screen__content {
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--g-spacing-2);
+}
+.g-md-gpt-dialog-error-screen__icon {
+  color: var(--g-color-base-danger-heavy);
+}
+.g-md-gpt-dialog-error-screen__text {
+  flex: auto;
+  font-size: var(--g-text-body-2-font-size);
+  font-weight: 500;
+}
+.g-md-gpt-dialog-error-screen__buttons {
+  display: flex;
+  align-items: center;
+  gap: var(--g-spacing-2);
+}

package/build/cjs/extensions/yfm/GPT/ErrorScreen/ErrorScreen.d.ts

@@ -0,0 +1,8 @@
+import type { FC } from 'react';
+declare type ErrorScreenProps = {
+    onRetry: () => void;
+    onStartAgain: () => void;
+};
+export declare const cnGptDialogErrorScreen: import("@bem-react/classname").ClassNameFormatter;
+export declare const ErrorScreen: FC<ErrorScreenProps>;
+export {};

package/build/cjs/extensions/yfm/GPT/ErrorScreen/ErrorScreen.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorScreen = exports.cnGptDialogErrorScreen = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const classname_1 = require("../../../../classname");
+const errors_1 = require("../../../../i18n/gpt/errors");
+const IconRefuge_1 = require("../IconRefuge/IconRefuge");
+exports.cnGptDialogErrorScreen = (0, classname_1.cn)('gpt-dialog-error-screen');
+const ErrorScreen = ({ onRetry, onStartAgain }) => {
+    return (react_1.default.createElement("div", { className: (0, exports.cnGptDialogErrorScreen)() },
+        react_1.default.createElement("div", { className: (0, exports.cnGptDialogErrorScreen)('content') },
+            react_1.default.createElement(IconRefuge_1.IconRefuge, { containerClassName: (0, exports.cnGptDialogErrorScreen)('icon'), data: icons_1.CircleXmarkFill, refugeSize: 28, size: 16 }),
+            react_1.default.createElement("span", { className: (0, exports.cnGptDialogErrorScreen)('text') }, (0, errors_1.i18n)('error-text'))),
+        react_1.default.createElement("div", { className: (0, exports.cnGptDialogErrorScreen)('buttons') },
+            react_1.default.createElement(uikit_1.Button, { view: "normal", onClick: onStartAgain }, (0, errors_1.i18n)('start-again-button')),
+            react_1.default.createElement(uikit_1.Button, { view: "normal", onClick: onRetry }, (0, errors_1.i18n)('retry-button')))));
+};
+exports.ErrorScreen = ErrorScreen;

package/build/cjs/extensions/yfm/GPT/ErrorScreen/types.d.ts

@@ -0,0 +1,14 @@
+export declare type PromptPreset<PromptData extends unknown = unknown> = {
+    display: string;
+    key: string;
+    data?: PromptData;
+    hotKey?: string;
+};
+export declare type CommonAnswer = {
+    rawText: string;
+};
+export declare type GptRequestData<PromptData extends unknown = unknown> = {
+    markup: string;
+    customPrompt?: string;
+    promptData?: PromptData;
+};

package/build/cjs/extensions/yfm/GPT/ErrorScreen/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/cjs/extensions/yfm/GPT/GptDialog/GptDialog.css

@@ -0,0 +1,75 @@
+.g-md-gpt-dialog__header-top {
+  display: flex;
+  align-items: center;
+}
+.g-md-gpt-dialog__custom-prompt-input {
+  margin-right: var(--g-spacing-2);
+}
+.g-md-gpt-dialog__custom-prompt-input .g-text-input__control {
+  font-size: var(--g-text-body-2-font-size);
+}
+.g-md-gpt-dialog__header-bottom {
+  margin-top: var(--g-spacing-2);
+}
+.g-md-gpt-dialog__custom-prompt {
+  display: flex;
+  flex: auto;
+  align-items: center;
+}
+.g-md-gpt-dialog__alone-presets-text {
+  margin-right: var(--g-spacing-8);
+}
+.g-md-gpt-dialog__alone-presets {
+  display: flex;
+  flex: auto;
+  align-items: center;
+  width: 100%;
+  font-size: var(--g-text-body-2-font-size);
+  font-weight: 500;
+}
+.g-md-gpt-dialog__alone-presets .g-md-gpt-dialog-preset-list {
+  flex: auto;
+}
+.g-md-gpt-dialog__answer-title {
+  font-size: var(--g-text-body-2-font-size);
+  font-weight: 500;
+}
+.g-md-gpt-dialog__gpt-icon {
+  margin-right: var(--g-spacing-1);
+}
+.g-md-gpt-dialog__try-again-button {
+  margin-right: var(--g-spacing-2);
+}
+.g-md-gpt-dialog__body {
+  margin: var(--g-spacing-2) calc(-1 * var(--g-spacing-3));
+  padding: var(--g-spacing-4) var(--g-spacing-3);
+  border-top: 1px solid var(--g-color-line-generic);
+}
+.g-md-gpt-dialog__answer {
+  overflow: auto;
+  max-height: 300px;
+}
+.g-md-gpt-dialog__answer-actions {
+  display: flex;
+  align-items: center;
+}
+.g-md-gpt-dialog__feedback-message {
+  margin-left: var(--g-spacing-2);
+}
+.g-md-gpt-dialog__like-button {
+  margin-right: var(--g-spacing-2);
+}
+.g-md-gpt-dialog__close-button {
+  margin-right: var(--g-spacing-2);
+  margin-left: auto;
+}
+.g-md-gpt-dialog__footer {
+  display: flex;
+  align-items: center;
+  margin-top: var(--g-spacing-2);
+}
+.g-md-gpt-dialog__description-alert {
+  min-height: 34px;
+  margin-top: var(--g-spacing-3);
+  padding: var(--g-spacing-1) var(--g-spacing-2);
+}

package/build/cjs/extensions/yfm/GPT/GptDialog/GptDialog.d.ts

@@ -0,0 +1,28 @@
+import type { FC } from 'react';
+import { AlertProps } from '@gravity-ui/uikit';
+import type { CommonAnswer, GptRequestData, PromptPreset } from '../ErrorScreen/types';
+export declare type GptDialogProps<AnswerData extends CommonAnswer = CommonAnswer, PromptData extends unknown = unknown> = {
+    markup: string;
+    answerRender: (data: AnswerData) => JSX.Element;
+    onApplyResult: (markup: string) => void;
+    promptPresets?: PromptPreset<PromptData>[];
+    disablePromptPresets?: boolean;
+    customPromptPlaceholder?: string;
+    disabledPromptPlaceholder?: string;
+    onCustomPromptApply?: (data: GptRequestData<PromptData>) => Promise<AnswerData | undefined>;
+    onPromptPresetClick?: (data: GptRequestData<PromptData>) => Promise<AnswerData | undefined>;
+    onTryAgain?: (data: GptRequestData<PromptData>) => Promise<AnswerData | undefined>;
+    onLike?: (data: GptRequestData<PromptData>) => Promise<void>;
+    onDislike?: (data: GptRequestData<PromptData>) => Promise<void>;
+    onClose?: () => void;
+    onUpdate?: (value: AnswerData | undefined) => void;
+    gptAlertProps?: {
+        showedGptAlert: boolean;
+        onCloseGptAlert?: () => void;
+        message?: string;
+        theme?: AlertProps['theme'];
+        className?: string;
+    };
+};
+export declare const cnGptDialog: import("@bem-react/classname").ClassNameFormatter;
+export declare const GptDialog: FC<GptDialogProps>;

package/build/cjs/extensions/yfm/GPT/GptDialog/GptDialog.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GptDialog = exports.cnGptDialog = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const classname_1 = require("../../../../classname");
+const dialog_1 = require("../../../../i18n/gpt/dialog");
+const GPT_1 = tslib_1.__importDefault(require("../../../../icons/GPT"));
+const useAutoFocus_1 = require("../../../../react-utils/useAutoFocus");
+const ErrorScreen_1 = require("../ErrorScreen/ErrorScreen");
+const IconRefuge_1 = require("../IconRefuge/IconRefuge");
+const PresetList_1 = require("../PresetList/PresetList");
+const constants_1 = require("../constants");
+const useGpt_1 = require("../hooks/useGpt");
+const useGptHotKeys_1 = require("../hooks/useGptHotKeys");
+const utils_1 = require("../utils");
+const LoadingScreen_1 = require("./LoadingScreen/LoadingScreen");
+exports.cnGptDialog = (0, classname_1.cn)('gpt-dialog');
+const GptDialog = ({ markup, answerRender, promptPresets, disablePromptPresets, customPromptPlaceholder, disabledPromptPlaceholder, onCustomPromptApply, onPromptPresetClick, onTryAgain, onApplyResult, onClose, onLike, onDislike, onUpdate, gptAlertProps, }) => {
+    const { answer, customPrompt, loading, mode, feedbackType, feedbackTypeLoading, handleLike, handleDislike, handleCustomPromptUpdate, handleCustomPromptKeyPress, handleCustomPromptApply, handlePresetClick, handleTryAgain, handleFreshStart, handleApplyResult, showAnswer, showError, showAnswerActions, showTryAgainButton, } = (0, useGpt_1.useGpt)({
+        markup,
+        promptPresets,
+        onLike,
+        onDislike,
+        onCustomPromptApply,
+        onPromptPresetClick,
+        onTryAgain,
+        onApplyResult,
+        onUpdate,
+    });
+    const gptAlert = gptAlertProps;
+    const customPromptContainerRef = (0, react_1.useRef)(null);
+    const [showedGptAlert, setShowedGptAlert] = (0, react_1.useState)(gptAlert === null || gptAlert === void 0 ? void 0 : gptAlert.showedGptAlert);
+    const { alertMessage, alertTheme, alertClassName } = (0, utils_1.getAlertGptInfo)(gptAlert);
+    const onCloseAlert = (0, react_1.useCallback)(() => {
+        var _a;
+        if (gptAlert) {
+            gptAlert.showedGptAlert = false;
+        }
+        (_a = gptAlert === null || gptAlert === void 0 ? void 0 : gptAlert.onCloseGptAlert) === null || _a === void 0 ? void 0 : _a.call(gptAlert);
+        setShowedGptAlert(false);
+    }, [gptAlert]);
+    (0, useAutoFocus_1.useAutoFocus)(customPromptContainerRef, [showAnswer]);
+    (0, useGptHotKeys_1.useGptHotKeys)(constants_1.gptHotKeys.tryAgainGpt, handleTryAgain);
+    (0, useGptHotKeys_1.useGptHotKeys)(constants_1.gptHotKeys.freshStartGpt, handleFreshStart);
+    (0, useGptHotKeys_1.useGptHotKeys)(constants_1.gptHotKeys.applyResultGpt, handleApplyResult);
+    const replaceButtonText = (0, utils_1.getDisableReplaceButtonText)(disablePromptPresets);
+    const inputPlaceholderText = (0, utils_1.getInputPlaceHolder)(disablePromptPresets, disabledPromptPlaceholder, customPromptPlaceholder);
+    const tryAgainButton = (react_1.default.createElement(uikit_1.ActionTooltip, { hotkey: constants_1.gptHotKeys.tryAgainGpt, title: (0, dialog_1.i18n)('try-again') },
+        react_1.default.createElement(uikit_1.Button, { className: (0, exports.cnGptDialog)('try-again-button'), view: "normal", size: "m", onClick: handleTryAgain },
+            react_1.default.createElement(uikit_1.Icon, { data: icons_1.ArrowRotateLeft, size: 16 }),
+            (0, dialog_1.i18n)('try-again'))));
+    let content = null;
+    if (loading) {
+        content = react_1.default.createElement(LoadingScreen_1.LoadingScreen, null);
+    }
+    else if (showError) {
+        content = react_1.default.createElement(ErrorScreen_1.ErrorScreen, { onRetry: handleTryAgain, onStartAgain: handleFreshStart });
+    }
+    else {
+        content = (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { className: (0, exports.cnGptDialog)('header') },
+                react_1.default.createElement("div", { className: (0, exports.cnGptDialog)('header-top') },
+                    react_1.default.createElement(IconRefuge_1.IconRefuge, { containerClassName: (0, exports.cnGptDialog)('gpt-icon'), data: GPT_1.default, refugeSize: 28, size: 16 }),
+                    (mode === 'only-custom' || mode === 'custom-and-presets') &&
+                        (showAnswer ? (react_1.default.createElement("span", { className: (0, exports.cnGptDialog)('answer-title') }, (0, dialog_1.i18n)('answer-title'))) : (react_1.default.createElement("div", { className: (0, exports.cnGptDialog)('custom-prompt') },
+                            react_1.default.createElement(uikit_1.TextInput, { controlRef: customPromptContainerRef, view: "clear", size: "m", className: (0, exports.cnGptDialog)('custom-prompt-input'), placeholder: inputPlaceholderText, onKeyPress: handleCustomPromptKeyPress, onUpdate: handleCustomPromptUpdate }),
+                            react_1.default.createElement(uikit_1.Button, { className: (0, exports.cnGptDialog)('custom-prompt-ask-button'), view: "normal", size: "s", disabled: !customPrompt, onClick: handleCustomPromptApply },
+                                react_1.default.createElement(uikit_1.Icon, { data: icons_1.ArrowRight, size: 16 }))))),
+                    mode === 'only-presets' && (react_1.default.createElement("div", { className: (0, exports.cnGptDialog)('alone-presets') },
+                        react_1.default.createElement("span", { className: (0, exports.cnGptDialog)('alone-presets-text') }, (0, dialog_1.i18n)('only-presets-title'))))),
+                (mode === 'custom-and-presets' || mode === 'only-presets') &&
+                    ((showTryAgainButton && (react_1.default.createElement("div", { className: (0, exports.cnGptDialog)('header-bottom') },
+                        tryAgainButton,
+                        react_1.default.createElement(uikit_1.ActionTooltip, { title: (0, dialog_1.i18n)('fresh-start-button'), hotkey: constants_1.gptHotKeys.freshStartGpt },
+                            react_1.default.createElement(uikit_1.Button, { className: (0, exports.cnGptDialog)('back-to-start'), view: "normal", size: "m", onClick: handleFreshStart }, (0, dialog_1.i18n)('fresh-start-button')))))) ||
+                        (!disablePromptPresets && (react_1.default.createElement("div", { className: (0, exports.cnGptDialog)('header-bottom') },
+                            react_1.default.createElement(PresetList_1.PresetList, { disablePromptPresets: disablePromptPresets, promptPresets: promptPresets, onPresetClick: handlePresetClick })))) ||
+                        (disablePromptPresets && showedGptAlert && (react_1.default.createElement(uikit_1.Alert, { theme: alertTheme, message: alertMessage, align: "center", className: (0, exports.cnGptDialog)('description-alert', alertClassName), onClose: onCloseAlert }))))),
+            showAnswer && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("div", { className: (0, exports.cnGptDialog)('body') },
+                    react_1.default.createElement("div", { className: (0, exports.cnGptDialog)('answer') }, answerRender(answer))),
+                react_1.default.createElement("div", { className: (0, exports.cnGptDialog)('footer') },
+                    showAnswerActions && (react_1.default.createElement("div", { className: (0, exports.cnGptDialog)('answer-actions') },
+                        react_1.default.createElement(uikit_1.Button, { className: (0, exports.cnGptDialog)('like-button'), view: "normal", size: "m", onClick: handleLike, selected: feedbackType === 'like', loading: feedbackTypeLoading === 'like' },
+                            react_1.default.createElement(uikit_1.Icon, { data: icons_1.ThumbsUp, size: 16 })),
+                        react_1.default.createElement(uikit_1.Button, { className: (0, exports.cnGptDialog)('dislike-button'), view: "normal", size: "m", onClick: handleDislike, selected: feedbackType === 'dislike', loading: feedbackTypeLoading === 'dislike' },
+                            react_1.default.createElement(uikit_1.Icon, { data: icons_1.ThumbsDown, size: 16 })),
+                        feedbackType && (react_1.default.createElement("span", { className: (0, exports.cnGptDialog)('feedback-message') }, (0, dialog_1.i18n)('feedback-message'))))),
+                    react_1.default.createElement(uikit_1.ActionTooltip, { title: (0, dialog_1.i18n)('close-button'), hotkey: constants_1.gptHotKeys.closeGpt },
+                        react_1.default.createElement(uikit_1.Button, { className: (0, exports.cnGptDialog)('close-button'), view: "flat", size: "m", onClick: onClose }, (0, dialog_1.i18n)('close-button'))),
+                    react_1.default.createElement(uikit_1.ActionTooltip, { title: replaceButtonText, hotkey: constants_1.gptHotKeys.applyResultGpt },
+                        react_1.default.createElement(uikit_1.Button, { className: (0, exports.cnGptDialog)('apply-button'), view: "action", size: "m", onClick: handleApplyResult }, replaceButtonText)))))));
+    }
+    return react_1.default.createElement("div", { className: (0, exports.cnGptDialog)() },
+        " ",
+        content,
+        " ");
+};
+exports.GptDialog = GptDialog;

package/build/cjs/extensions/yfm/GPT/GptDialog/LoadingScreen/LoadingScreen.css

@@ -0,0 +1,22 @@
+.g-md-gpt-dialog-loading-screen__header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+}
+.g-md-gpt-dialog-loading-screen__icon {
+  margin-right: 4px;
+}
+.g-md-gpt-dialog-loading-screen__text {
+  margin-right: 8px;
+  font-size: var(--g-text-body-2-font-size);
+  font-weight: 500;
+}
+.g-md-gpt-dialog-loading-screen__skeleton-small-button {
+  width: 90px;
+  height: 28px;
+  margin-right: 8px;
+}
+.g-md-gpt-dialog-loading-screen__skeleton-medium-button {
+  width: 120px;
+  height: 28px;
+}

package/build/cjs/extensions/yfm/GPT/GptDialog/LoadingScreen/LoadingScreen.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+export declare const cnGptDialogLoadingScreen: import("@bem-react/classname").ClassNameFormatter;
+export declare const LoadingScreen: FC;

package/build/cjs/extensions/yfm/GPT/GptDialog/LoadingScreen/LoadingScreen.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingScreen = exports.cnGptDialogLoadingScreen = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const classname_1 = require("../../../../../classname");
+const loading_1 = require("../../../../../i18n/gpt/loading");
+const GPTLoading_1 = tslib_1.__importDefault(require("../../../../../icons/GPTLoading"));
+const IconRefuge_1 = require("../../IconRefuge/IconRefuge");
+exports.cnGptDialogLoadingScreen = (0, classname_1.cn)('gpt-dialog-loading-screen');
+const LoadingScreen = () => {
+    return (react_1.default.createElement("div", { className: (0, exports.cnGptDialogLoadingScreen)() },
+        react_1.default.createElement("div", { className: (0, exports.cnGptDialogLoadingScreen)('header') },
+            react_1.default.createElement(IconRefuge_1.IconRefuge, { containerClassName: (0, exports.cnGptDialogLoadingScreen)('icon'), data: GPTLoading_1.default, refugeSize: 28, size: 20 }),
+            react_1.default.createElement("span", { className: (0, exports.cnGptDialogLoadingScreen)('text') }, (0, loading_1.i18n)('loading-text'))),
+        react_1.default.createElement("div", { className: (0, exports.cnGptDialogLoadingScreen)('skeleton') },
+            react_1.default.createElement(uikit_1.Skeleton, { className: (0, exports.cnGptDialogLoadingScreen)('skeleton-small-button') }),
+            react_1.default.createElement(uikit_1.Skeleton, { className: (0, exports.cnGptDialogLoadingScreen)('skeleton-medium-button') }))));
+};
+exports.LoadingScreen = LoadingScreen;

package/build/cjs/extensions/yfm/GPT/IconRefuge/IconRefuge.classname.d.ts

@@ -0,0 +1 @@
+export declare const cnIconRefuge: import("@bem-react/classname").ClassNameFormatter;

package/build/cjs/extensions/yfm/GPT/IconRefuge/IconRefuge.classname.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cnIconRefuge = void 0;
+const classname_1 = require("@bem-react/classname");
+exports.cnIconRefuge = (0, classname_1.cn)('icon-refuge');

package/build/cjs/extensions/yfm/GPT/IconRefuge/IconRefuge.css

@@ -0,0 +1,8 @@
+.icon-refuge {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+.icon-refuge_inline {
+  display: inline-flex;
+}

package/build/cjs/extensions/yfm/GPT/IconRefuge/IconRefuge.d.ts

@@ -0,0 +1,14 @@
+import type { FC } from 'react';
+import type { IconRefugeProps } from './IconRefuge.types';
+/**
+ * Creates a div wrapper above the icon, which sets the min-width and min-height
+ * equal to its refugeSize prop, puts the original icon in the middle and
+ * proxies the rest of the propses to it.
+ *
+ * The component is made in order to add margins to icons that have
+ * margins are indented, but their svg exactly wrap around the edges of the image
+ *
+ * It seems that all icons will be square, if not, then you can simply add
+ * refugeWidth and refugeHeight
+ */
+export declare const IconRefuge: FC<IconRefugeProps>;

package/build/cjs/extensions/yfm/GPT/IconRefuge/IconRefuge.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconRefuge = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const IconRefuge_classname_1 = require("./IconRefuge.classname");
+/**
+ * Creates a div wrapper above the icon, which sets the min-width and min-height
+ * equal to its refugeSize prop, puts the original icon in the middle and
+ * proxies the rest of the propses to it.
+ *
+ * The component is made in order to add margins to icons that have
+ * margins are indented, but their svg exactly wrap around the edges of the image
+ *
+ * It seems that all icons will be square, if not, then you can simply add
+ * refugeWidth and refugeHeight
+ */
+const IconRefuge = (_a) => {
+    var { refugeSize, containerClassName, containerStyle, widthOnly, inlineIcon, title, 'aria-label': ariaLabel } = _a, props = tslib_1.__rest(_a, ["refugeSize", "containerClassName", "containerStyle", "widthOnly", "inlineIcon", "title", 'aria-label']);
+    if (props.size === refugeSize && !title && !ariaLabel && !containerStyle) {
+        return react_1.default.createElement(uikit_1.Icon, Object.assign({}, props));
+    }
+    return (react_1.default.createElement("div", { className: (0, IconRefuge_classname_1.cnIconRefuge)({ inline: inlineIcon }, containerClassName), title: title, "aria-label": ariaLabel, style: Object.assign({ minWidth: refugeSize, minHeight: widthOnly ? undefined : refugeSize }, containerStyle) },
+        react_1.default.createElement(uikit_1.Icon, Object.assign({ size: refugeSize }, props))));
+};
+exports.IconRefuge = IconRefuge;
+exports.IconRefuge.displayName = 'Icon';

package/build/cjs/extensions/yfm/GPT/IconRefuge/index.d.ts

@@ -0,0 +1,2 @@
+export { IconRefuge } from './IconRefuge';
+export type { IconRefugeProps } from './IconRefuge.types';

package/build/cjs/extensions/yfm/GPT/IconRefuge/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconRefuge = void 0;
+var IconRefuge_1 = require("./IconRefuge");
+Object.defineProperty(exports, "IconRefuge", { enumerable: true, get: function () { return IconRefuge_1.IconRefuge; } });

package/build/cjs/extensions/yfm/GPT/PresetList/PresetList.d.ts

@@ -0,0 +1,9 @@
+import type { FC } from 'react';
+import type { GptDialogProps } from '../GptDialog/GptDialog';
+export declare type PresetListProps<PromptData extends unknown = unknown> = {
+    disablePromptPresets: GptDialogProps['disablePromptPresets'];
+    promptPresets: GptDialogProps['promptPresets'];
+    onPresetClick: (data: PromptData) => void;
+};
+export declare const cnGptDialogPresetList: import("@bem-react/classname").ClassNameFormatter;
+export declare const PresetList: FC<PresetListProps>;

package/build/cjs/extensions/yfm/GPT/PresetList/PresetList.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PresetList = exports.cnGptDialogPresetList = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const classname_1 = require("../../../../classname");
+const dialog_1 = require("../../../../i18n/gpt/dialog");
+const constants_1 = require("../constants");
+const useGptHotKeys_1 = require("../hooks/useGptHotKeys");
+const usePresetList_1 = require("../hooks/usePresetList");
+exports.cnGptDialogPresetList = (0, classname_1.cn)('gpt-dialog-preset-list');
+const PresetItem = ({ preset, onPresetClick, disablePromptPresets, hotKey }) => {
+    (0, useGptHotKeys_1.useGptHotKeys)(hotKey, () => {
+        onPresetClick(preset.data);
+    }, { enableOnFormTags: true, enableOnContentEditable: true });
+    return (react_1.default.createElement(uikit_1.ActionTooltip, { title: preset.display, hotkey: hotKey },
+        react_1.default.createElement(uikit_1.Button, { className: (0, exports.cnGptDialogPresetList)('preset'), view: "normal", size: "m", disabled: disablePromptPresets, onClick: () => onPresetClick(preset.data) }, preset.display)));
+};
+const PresetList = ({ disablePromptPresets, promptPresets, onPresetClick, }) => {
+    const { presetsContainerRef, visiblePresets, hiddenPresets, showMoreButton, measured } = (0, usePresetList_1.usePresetList)({
+        promptPresets,
+        onPresetClick,
+    });
+    return (react_1.default.createElement("div", { className: (0, exports.cnGptDialogPresetList)({ measured }), ref: presetsContainerRef },
+        visiblePresets.map((preset, index) => (react_1.default.createElement(PresetItem, { preset: preset, key: preset.display, hotKey: preset.hotKey || constants_1.gptHotKeys.presetsKey(String(index + 1)), disablePromptPresets: disablePromptPresets, onPresetClick: onPresetClick }))),
+        showMoreButton && (react_1.default.createElement(uikit_1.DropdownMenu, { switcherWrapperClassName: (0, exports.cnGptDialogPresetList)('more-button-wrapper'), switcher: react_1.default.createElement(uikit_1.Button, { className: (0, exports.cnGptDialogPresetList)('more-button'), view: "normal", size: "m" }, (0, dialog_1.i18n)('more')), items: hiddenPresets }))));
+};
+exports.PresetList = PresetList;

package/build/cjs/extensions/yfm/GPT/PresetList/Presetlist.css

@@ -0,0 +1,6 @@
+.g-md-gpt-dialog-preset-list__preset + .g-md-gpt-dialog-preset-list__preset {
+  margin-left: var(--g-spacing-2);
+}
+.g-md-gpt-dialog-preset-list__more-button-wrapper {
+  margin-left: var(--g-spacing-2);
+}

package/build/cjs/extensions/yfm/GPT/actions.d.ts

@@ -0,0 +1,2 @@
+import type { ActionSpec, ExtensionDeps } from 'src/core';
+export declare const showGptWidget: (deps: ExtensionDeps) => ActionSpec;

package/build/cjs/extensions/yfm/GPT/actions.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.showGptWidget = void 0;
+const commands_1 = require("./commands");
+const showGptWidget = (_deps) => ({
+    isActive() {
+        return false;
+    },
+    isEnable() {
+        return true;
+    },
+    run: commands_1.runGpt,
+});
+exports.showGptWidget = showGptWidget;

package/build/cjs/extensions/yfm/GPT/commands.d.ts

@@ -0,0 +1,2 @@
+import { Command } from 'prosemirror-state';
+export declare const runGpt: Command;

package/build/cjs/extensions/yfm/GPT/commands.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.runGpt = void 0;
+const prosemirror_state_1 = require("prosemirror-state");
+const plugin_1 = require("./plugin");
+const runGpt = (state, dispatch) => {
+    const { selection: sel } = state;
+    const meta = { action: 'show', from: sel.from, to: sel.to };
+    const tr = state.tr.setMeta(plugin_1.pluginKey, meta);
+    dispatch === null || dispatch === void 0 ? void 0 : dispatch(tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, sel.to)));
+    return true;
+};
+exports.runGpt = runGpt;