rme 0.1.13 → 0.1.14

package/dist/index.d.ts

@@ -157,6 +157,7 @@ declare const createSourceCodeDelegate: (options?: CreateSourceCodeManagerOption
 declare const _default$1: react__default.NamedExoticComponent<EditorProps>;
 
 interface AIOptions {
+    defaultSelectProvider?: string;
     supportProviderInfosMap: Record<string, {
         models: string[];
     }>;
@@ -165,7 +166,7 @@ interface AIOptions {
         model: string;
         prompt: string;
         temperature?: number;
-    }) => Promise<string> | null;
+    }) => Promise<string | null>;
 }
 
 type MarkdownItToken = string;

package/dist/index.mjs

@@ -5395,16 +5395,17 @@ var getTransformerByView = (view) => {
 // src/editor/extensions/Ai/ai-nodeview.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function AINodeView(props) {
-  const { supportProviderInfosMap, generateText, getPosition } = props;
+  const { supportProviderInfosMap, generateText, getPosition, defaultSelectProvider } = props;
   const pos = getPosition();
   const [status, setStatus] = useState(0 /* WAITASK */);
   const providers = Object.keys(supportProviderInfosMap);
-  const [selectedProvider, setSelectedProvider] = useState(providers[0]);
+  const [selectedProvider, setSelectedProvider] = useState(defaultSelectProvider || providers[0]);
   const providerInfo = supportProviderInfosMap[selectedProvider];
   const [selectedModel, setSelectedModel] = useState(providerInfo.models[0]);
   const [generatedText, setGeneratedText] = useState("");
   const [prompt, setPrompt] = useState("");
   const inputRef = useRef(null);
+  const controllerRef = useRef(null);
   useEffect(() => {
     inputRef.current?.focus();
   }, []);
@@ -5412,12 +5413,19 @@ function AINodeView(props) {
   const generateTextHandler = async () => {
     setStatus(1 /* LOADING */);
     try {
+      if (controllerRef.current) {
+        controllerRef.current.abort();
+      }
+      controllerRef.current = new AbortController();
       const text = await generateText({
         provider: selectedProvider,
         model: selectedModel,
         prompt,
         temperature: 0.7
       });
+      if (controllerRef.current?.signal.aborted) {
+        return;
+      }
       if (text) {
         setGeneratedText(text);
         setStatus(2 /* SUCCESS */);
@@ -5431,14 +5439,31 @@ function AINodeView(props) {
   const renderActionButton = () => {
     switch (status) {
       case 0 /* WAITASK */:
-        return /* @__PURE__ */ jsx2(Button, { size: "small", btnType: "primary", onClick: generateTextHandler, children: t("ai.generate") });
+        return /* @__PURE__ */ jsxs(Button, { size: "small", btnType: "primary", onClick: generateTextHandler, children: [
+          /* @__PURE__ */ jsx2("i", { className: "ri-bard-line" }),
+          t("ai.generate")
+        ] });
       case 1 /* LOADING */:
         return [
           /* @__PURE__ */ jsxs(Button, { size: "small", disabled: true, children: [
             t("common.loading"),
             "..."
-          ] }, 1 /* LOADING */),
-          /* @__PURE__ */ jsx2(Button, { size: "small", children: t("ai.stop") })
+          ] }, "loading"),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              size: "small",
+              onClick: () => {
+                controllerRef.current?.abort();
+                setStatus(0 /* WAITASK */);
+              },
+              children: [
+                /* @__PURE__ */ jsx2("i", { className: "ri-stop-line" }),
+                t("ai.stop")
+              ]
+            },
+            "stop"
+          )
         ];
       case 2 /* SUCCESS */:
         return [
@@ -5457,12 +5482,13 @@ function AINodeView(props) {
                 }
               },
               children: t("common.accept")
-            }
+            },
+            "accept"
           ),
-          /* @__PURE__ */ jsx2(Button, { size: "small", onClick: generateTextHandler, children: t("ai.regenerate") })
+          /* @__PURE__ */ jsx2(Button, { size: "small", onClick: generateTextHandler, children: t("ai.regenerate") }, "regenerate")
         ];
       case 3 /* ERROR */:
-        return /* @__PURE__ */ jsx2(Button, { size: "small", btnType: "primary", children: t("ai.retry") });
+        return /* @__PURE__ */ jsx2(Button, { size: "small", btnType: "primary", onClick: generateTextHandler, children: t("ai.retry") });
     }
   };
   const renderPreview = () => {
@@ -5486,7 +5512,14 @@ function AINodeView(props) {
     /* @__PURE__ */ jsxs("div", { children: [
       renderPreview(),
       /* @__PURE__ */ jsx2(StatusTitle, { children: t("ai.prompt") }),
-      /* @__PURE__ */ jsx2(InputAskTextarea, { ref: inputRef, value: prompt, onChange: (e) => setPrompt(e.target.value) })
+      /* @__PURE__ */ jsx2(
+        InputAskTextarea,
+        {
+          ref: inputRef,
+          value: prompt,
+          onChange: (e) => setPrompt(e.target.value)
+        }
+      )
     ] }),
     /* @__PURE__ */ jsx2("div", { className: "divider" }),
     /* @__PURE__ */ jsxs(BottomBar, { children: [
@@ -5505,6 +5538,7 @@ function AINodeView(props) {
               value: provider,
               handler: () => {
                 setSelectedProvider(provider);
+                setSelectedModel(supportProviderInfosMap[provider]?.models[0]);
               }
             })),
             children: selectedProvider || "Select Provider"
@@ -5600,13 +5634,11 @@ var AIExtension = class extends NodeExtension {
   constructor() {
     super(...arguments);
     this.ReactComponent = (props) => {
-      const { supportProviderInfosMap, generateText } = this.options;
       return /* @__PURE__ */ jsx3(
         AINodeView,
         {
-          supportProviderInfosMap,
-          generateText,
-          ...props
+          ...props,
+          ...this.options
         }
       );
     };
@@ -5651,8 +5683,7 @@ AIExtension = __decorateClass([
         openai: {
           models: ["gpt-3.5-turbo", "gpt-4"]
         }
-      },
-      generateText: async () => ""
+      }
     },
     staticKeys: [],
     handlerKeys: [],
@@ -6375,7 +6406,7 @@ var styledDarkTheme = {
   preBgColor: "#252525",
   // components
   contextMenuBgColor: "#1E1F20",
-  contextMenuBgColorHover: "#1552B3",
+  contextMenuBgColorHover: "#2D3134",
   slashMenuBorderColor: "rgb(38 38 38 / 1)"
 };
 
@@ -6420,7 +6451,7 @@ var styledLightTheme = {
   preBgColor: "#e7e7e7",
   // components
   contextMenuBgColor: "#f6f7f9",
-  contextMenuBgColorHover: "#1552B3",
+  contextMenuBgColorHover: "#E8E8EC",
   slashMenuBorderColor: "rgb(229 229 229 / 1)"
 };
 
@@ -19714,20 +19745,14 @@ import { useExtension, useRemirrorContext as useRemirrorContext2 } from "@remirr
 import { useCallback as useCallback3, useEffect as useEffect6, useMemo as useMemo2, useRef as useRef7, useState as useState8 } from "react";
 import { usePopper } from "react-popper";
 
-// src/editor/theme/darken-colors.ts
-import Color from "color";
-var opposite = (color, amount) => {
-  if (Color(color).isDark()) {
-    return Color(color).lighten(amount).string();
-  } else {
-    return Color(color).darken(amount).string();
-  }
-};
-
 // src/editor/toolbar/SlashMenu/SlashMenuRoot.tsx
 import { memo as memo4, useCallback as useCallback2, useEffect as useEffect5, useMemo, useRef as useRef6, useState as useState7 } from "react";
 import styled10, { css as css5 } from "styled-components";
 
+// src/editor/theme/darken-colors.ts
+import Color from "color";
+var darken = (color, amount) => Color(color).darken(amount).string();
+
 // src/editor/toolbar/SlashMenu/TablePanel.tsx
 import { forwardRef, useState as useState6, useImperativeHandle, memo as memo3 } from "react";
 import styled9 from "styled-components";
@@ -19998,11 +20023,6 @@ var SlashMenuRoot = memo4(
     ] });
   }
 );
-var DividingLine = styled10.div`
-  flex: 1;
-  width: 1px;
-  background-color: ${(props) => props.theme.primaryFontColor};
-`;
 var MenuPanel = styled10.div.attrs((p) => p)`
   display: flex;
   min-width: 130px;
@@ -20010,7 +20030,7 @@ var MenuPanel = styled10.div.attrs((p) => p)`
   overscroll-behavior: contain;
   border-radius: ${(props) => props.location === "left" ? `${props.theme.smallBorderRadius} 0 0
     ${props.theme.smallBorderRadius}` : `0 ${props.theme.smallBorderRadius} ${props.theme.smallBorderRadius} 0`};
-  background-color: ${(props) => props.active ? opposite(props.theme.contextMenuBgColor, 0.4) : props.theme.contextMenuBgColor};
+  background-color: ${(props) => props.active ? darken(props.theme.contextMenuBgColorHover, 0.2) : props.theme.contextMenuBgColorHover};
   padding: ${(props) => props.theme.spaceXs};
   color: ${(props) => props.theme.primaryFontColor};
   font-size: ${(props) => props.theme.fontXs};
@@ -20029,14 +20049,12 @@ var MenuItem2 = styled10.li.attrs((props) => ({
 
   &:hover {
     background-color: ${(props) => props.theme.contextMenuBgColorHover};
-    color: hsl(204 20% 100%);
   }
 
   ${(p) => {
   if (p.selected) {
     return css5`
         background-color: ${(props) => props.theme.contextMenuBgColorHover};
-        color: hsl(204 20% 100%);
       `;
   }
 }}