4.6.8-alpha (#804)

* perf: redirect request and err log replace

perf: dataset openapi

feat: session

fix: retry input error

feat: 468 doc

sub page

feat: standard sub

perf: rerank tip

perf: rerank tip

perf: api sdk

perf: openapi

sub plan

perf: sub ui

fix: ts

* perf: init log

* fix: variable select

* sub page

* icon

* perf: llm model config

* perf: menu ux

* perf: system store

* perf: publish app name

* fix: init data

* perf: flow edit ux

* fix: value type format and ux

* fix prompt editor default value (#13)

* fix prompt editor default value

* fix prompt editor update when not focus

* add key with variable

---------

Co-authored-by: Archer <545436317@qq.com>

* fix: value type

* doc

* i18n

* import path

* home page

* perf: mongo session running

* fix: ts

* perf: use toast

* perf: flow edit

* perf: sse response

* slider ui

* fetch error

* fix prompt editor rerender when not focus by key defaultvalue (#14)

* perf: prompt editor

* feat: dataset search concat

* perf: doc

* fix:ts

* perf: doc

* fix json editor onblur value (#15)

* faq

* vector model default config

* ipv6

---------

Co-authored-by: heheer <71265218+newfish-cmyk@users.noreply.github.com>

packages/web/components/common/Textarea/PromptEditor/Editor.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef } from 'react';
+import { useState, useRef, useTransition, useEffect } from 'react';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
 import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';
 import { ContentEditable } from '@lexical/react/LexicalContentEditable';
@@ -11,11 +11,12 @@ import styles from './index.module.scss';
 import VariablePlugin from './plugins/VariablePlugin';
 import { VariableNode } from './plugins/VariablePlugin/node';
 import { EditorState, LexicalEditor } from 'lexical';
-import { textToEditorState } from './utils';
 import OnBlurPlugin from './plugins/OnBlurPlugin';
 import MyIcon from '../../Icon';
-import { PickerMenuItemType } from './type.d';
+import { EditorVariablePickerType } from './type.d';
 import { getNanoid } from '@fastgpt/global/common/string/tools';
+import FocusPlugin from './plugins/FocusPlugin';
+import { textToEditorState } from './utils';
 
 export default function Editor({
   h = 200,
@@ -25,31 +26,34 @@ export default function Editor({
   variables,
   onChange,
   onBlur,
-  defaultValue,
+  value,
   placeholder = ''
 }: {
   h?: number;
   showResize?: boolean;
   showOpenModal?: boolean;
   onOpenModal?: () => void;
-  variables: PickerMenuItemType[];
+  variables: EditorVariablePickerType[];
   onChange?: (editorState: EditorState) => void;
   onBlur?: (editor: LexicalEditor) => void;
-  defaultValue?: string;
+  value?: string;
   placeholder?: string;
 }) {
-  const key = useRef(getNanoid(6));
+  const [key, setKey] = useState(getNanoid(6));
+  const [_, startSts] = useTransition();
   const [height, setHeight] = useState(h);
-  const [initialConfig, setInitialConfig] = useState({
+  const [focus, setFocus] = useState(false);
+
+  const initialConfig = {
     namespace: 'promptEditor',
     nodes: [VariableNode],
-    editorState: textToEditorState(defaultValue),
+    editorState: textToEditorState(value),
     onError: (error: Error) => {
       throw error;
     }
-  });
-  const initialY = useRef(0);
+  };
 
+  const initialY = useRef(0);
   const handleMouseDown = (e: React.MouseEvent) => {
     initialY.current = e.clientY;
 
@@ -68,9 +72,14 @@ export default function Editor({
     document.addEventListener('mouseup', handleMouseUp);
   };
 
+  useEffect(() => {
+    if (focus) return;
+    setKey(getNanoid(6));
+  }, [value, variables, focus]);
+
   return (
     <Box position={'relative'} width={'full'} h={`${height}px`} cursor={'text'}>
-      <LexicalComposer initialConfig={initialConfig} key={key.current}>
+      <LexicalComposer initialConfig={initialConfig} key={key}>
         <PlainTextPlugin
           contentEditable={<ContentEditable className={styles.contentEditable} />}
           placeholder={
@@ -100,7 +109,14 @@ export default function Editor({
           ErrorBoundary={LexicalErrorBoundary}
         />
         <HistoryPlugin />
-        <OnChangePlugin onChange={(e) => onChange?.(e)} />
+        <FocusPlugin focus={focus} setFocus={setFocus} />
+        <OnChangePlugin
+          onChange={(e) => {
+            startSts(() => {
+              onChange?.(e);
+            });
+          }}
+        />
         <VariablePickerPlugin variables={variables} />
         <VariablePlugin variables={variables} />
         <OnBlurPlugin onBlur={onBlur} />

packages/web/components/common/Textarea/PromptEditor/index.tsx

@@ -5,13 +5,13 @@ import Editor from './Editor';
 import MyModal from '../../MyModal';
 import { useTranslation } from 'next-i18next';
 import { $getRoot, EditorState, type LexicalEditor } from 'lexical';
-import { PickerMenuItemType } from './type.d';
+import { EditorVariablePickerType } from './type.d';
 import { useCallback, useTransition } from 'react';
 
 const PromptEditor = ({
   showOpenModal = true,
   variables = [],
-  defaultValue,
+  value,
   onChange,
   onBlur,
   h,
@@ -19,8 +19,8 @@ const PromptEditor = ({
   title
 }: {
   showOpenModal?: boolean;
-  variables?: PickerMenuItemType[];
-  defaultValue?: string;
+  variables?: EditorVariablePickerType[];
+  value?: string;
   onChange?: (text: string) => void;
   onBlur?: (text: string) => void;
   h?: number;
@@ -53,7 +53,7 @@ const PromptEditor = ({
         onOpenModal={onOpen}
         variables={variables}
         h={h}
-        defaultValue={defaultValue}
+        value={value}
         onChange={onChangeInput}
         onBlur={onBlurInput}
         placeholder={placeholder}
@@ -65,7 +65,7 @@ const PromptEditor = ({
             showResize
             showOpenModal={false}
             variables={variables}
-            defaultValue={defaultValue}
+            value={value}
             onChange={onChangeInput}
             onBlur={onBlurInput}
             placeholder={placeholder}

packages/web/components/common/Textarea/PromptEditor/plugins/FocusPlugin/index.tsx

@@ -0,0 +1,41 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useEffect } from 'react';
+import { BLUR_COMMAND, COMMAND_PRIORITY_LOW, FOCUS_COMMAND } from 'lexical';
+
+export default function FocusPlugin({ focus, setFocus }: { focus: Boolean; setFocus: any }) {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(
+    () =>
+      editor.registerCommand(
+        BLUR_COMMAND,
+        () => {
+          setFocus(false);
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+    []
+  );
+
+  useEffect(
+    () =>
+      editor.registerCommand(
+        FOCUS_COMMAND,
+        () => {
+          setFocus(true);
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+    []
+  );
+
+  // useEffect(() => {
+  //   if (focus) {
+  //     editor.focus();
+  //   }
+  // }, [focus]);
+
+  return null;
+}

packages/web/components/common/Textarea/PromptEditor/plugins/VariablePickerPlugin/index.tsx

@@ -9,9 +9,13 @@ import { useTranslation } from 'next-i18next';
 import MyIcon from '../../../../Icon';
 import { Box, Flex } from '@chakra-ui/react';
 import { useBasicTypeaheadTriggerMatch } from '../../utils';
-import { PickerMenuItemType } from '../../type.d';
+import { EditorVariablePickerType } from '../../type.d';
 
-export default function VariablePickerPlugin({ variables }: { variables: PickerMenuItemType[] }) {
+export default function VariablePickerPlugin({
+  variables
+}: {
+  variables: EditorVariablePickerType[];
+}) {
   const [editor] = useLexicalComposerContext();
   const [queryString, setQueryString] = useState<string | null>(null);
   const { t } = useTranslation();

packages/web/components/common/Textarea/PromptEditor/plugins/VariablePlugin/index.tsx

@@ -6,11 +6,11 @@ import { useCallback, useEffect, useMemo } from 'react';
 import { getHashtagRegexString } from './utils';
 import { registerLexicalTextEntity } from '../../utils';
 import { $createVariableNode, VariableNode } from './node';
-import { PickerMenuItemType } from '../../type';
+import { EditorVariablePickerType } from '../../type';
 
 const REGEX = new RegExp(getHashtagRegexString(), 'i');
 
-export default function VariablePlugin({ variables }: { variables: PickerMenuItemType[] }) {
+export default function VariablePlugin({ variables }: { variables: EditorVariablePickerType[] }) {
   const [editor] = useLexicalComposerContext();
   useEffect(() => {
     if (!editor.hasNodes([VariableNode]))
@@ -28,7 +28,6 @@ export default function VariablePlugin({ variables }: { variables: PickerMenuIte
   const getVariableMatch = useCallback((text: string) => {
     const matches = REGEX.exec(text);
     if (!matches) return null;
-
     if (variableKeys.indexOf(matches[3]) === -1) return null;
     const hashtagLength = matches[3].length + 4;
     const startOffset = matches.index;

packages/web/components/common/Textarea/PromptEditor/type.d.ts

@@ -1,4 +1,4 @@
-export type PickerMenuItemType = {
+export type EditorVariablePickerType = {
   key: string;
   label: string;
   icon?: string;