4.6.8-production (#822)

* Json completion (#16)

* json-completion

* fix duplicate

* fix

* fix: config json

* feat: query extension

* perf: i18n

* 468 doc

* json editor

* perf: doc

* perf: default extension model

* docker file

* doc

* perf: token count

* perf: search extension

* format

* perf: some constants data

---------

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

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

@@ -1,11 +1,14 @@
-import React from 'react';
-import Editor, { loader } from '@monaco-editor/react';
+import React, { useEffect } from 'react';
+import Editor, { loader, useMonaco } from '@monaco-editor/react';
 import { useCallback, useRef, useState } from 'react';
-import { Box, BoxProps, useToast } from '@chakra-ui/react';
+import { Box, BoxProps } from '@chakra-ui/react';
 import MyIcon from '../../Icon';
+import { EditorVariablePickerType } from '../PromptEditor/type';
+import { useToast } from '../../../../hooks/useToast';
+import { useTranslation } from 'next-i18next';
 
 loader.config({
-  paths: { vs: '/js/monaco-editor.0.43.0' }
+  paths: { vs: 'https://cdn.staticfile.net/monaco-editor/0.43.0/min/vs' }
 });
 
 type Props = Omit<BoxProps, 'onChange' | 'resize' | 'height'> & {
@@ -14,6 +17,7 @@ type Props = Omit<BoxProps, 'onChange' | 'resize' | 'height'> & {
   defaultValue?: string;
   value?: string;
   onChange?: (e: string) => void;
+  variables?: EditorVariablePickerType[];
 };
 
 const options = {
@@ -38,10 +42,43 @@ const options = {
   tabSize: 2
 };
 
-const JSONEditor = ({ defaultValue, value, onChange, resize, ...props }: Props) => {
-  const toast = useToast();
+const JSONEditor = ({ defaultValue, value, onChange, resize, variables, ...props }: Props) => {
+  const { toast } = useToast();
+  const { t } = useTranslation();
   const [height, setHeight] = useState(props.height || 100);
   const initialY = useRef(0);
+  const completionRegisterRef = useRef<any>();
+  const monaco = useMonaco();
+
+  useEffect(() => {
+    completionRegisterRef.current = monaco?.languages.registerCompletionItemProvider('json', {
+      triggerCharacters: ['"'],
+      provideCompletionItems: function (model, position) {
+        var word = model.getWordUntilPosition(position);
+        var range = {
+          startLineNumber: position.lineNumber,
+          endLineNumber: position.lineNumber,
+          startColumn: word.startColumn,
+          endColumn: word.endColumn
+        };
+        return {
+          suggestions:
+            variables?.map((item) => ({
+              label: `${item.label}`,
+              kind: monaco.languages.CompletionItemKind.Function,
+              documentation: item.label,
+              insertText: `{{${item.label}}}`,
+              range: range
+            })) || [],
+          dispose: () => {}
+        };
+      }
+    });
+
+    return () => {
+      completionRegisterRef.current?.dispose();
+    };
+  }, [monaco, completionRegisterRef.current]);
 
   const handleMouseDown = useCallback((e: React.MouseEvent) => {
     initialY.current = e.clientY;
@@ -111,15 +148,14 @@ const JSONEditor = ({ defaultValue, value, onChange, resize, ...props }: Props)
           onChange={(e) => onChange?.(e || '')}
           wrapperProps={{
             onBlur: () => {
+              if (!value) return;
               try {
                 JSON.parse(value as string);
               } catch (error: any) {
                 toast({
-                  title: 'Invalid JSON',
+                  title: t('common.Invalid Json'),
                   description: error.message,
-                  position: 'top',
-                  status: 'error',
-                  duration: 3000,
+                  status: 'warning',
                   isClosable: true
                 });
               }