perf: variabel replace;Feat: prompt optimizer code (#5453)

* feat: add prompt optimizer (#5444) * feat: add prompt optimizer * fix * perf: variabel replace * perf: prompt optimizer code * feat: init charts shell * perf: user error remove --------- Co-authored-by: heheer <heheer@sealos.io>
2025-10-20 02:34:52 +00:00 · 2025-08-14 15:48:22 +08:00
parent 6a02d2a2e5
commit 9fbfabac61
35 changed files with 1968 additions and 202 deletions
--- a/packages/web/components/common/Icon/constants.ts
+++ b/packages/web/components/common/Icon/constants.ts
@@ -450,6 +450,7 @@ export const iconPaths = {
  'model/yi': () => import('./icons/model/yi.svg'),
  more: () => import('./icons/more.svg'),
  moreLine: () => import('./icons/moreLine.svg'),
+  optimizer: () => import('./icons/optimizer.svg'),
  out: () => import('./icons/out.svg'),
  paragraph: () => import('./icons/paragraph.svg'),
  'phoneTabbar/me': () => import('./icons/phoneTabbar/me.svg'),
--- a/packages/web/components/common/Icon/icons/optimizer.svg
+++ b/packages/web/components/common/Icon/icons/optimizer.svg
@@ -0,0 +1,46 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.02489 5.13636C6.02489 4.7096 6.37085 4.36364 6.79762 4.36364H11.434C11.8607 4.36364 12.2067 4.7096 12.2067 5.13636C12.2067 5.56313 11.8607 5.90909 11.434 5.90909H9.88853V12.0909H11.434C11.8607 12.0909 12.2067 12.4369 12.2067 12.8636C12.2067 13.2904 11.8607 13.6364 11.434 13.6364H6.79762C6.37085 13.6364 6.02489 13.2904 6.02489 12.8636C6.02489 12.4369 6.37085 12.0909 6.79762 12.0909H8.34307V5.90909H6.79762C6.37085 5.90909 6.02489 5.56313 6.02489 5.13636Z" fill="url(#paint0_linear_25014_10095)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M2.33398 12.669C2.01342 12.8153 1.63496 12.674 1.48865 12.3535C0.540947 10.2771 0.497952 7.89092 1.35999 5.78813C1.49365 5.4621 1.86631 5.30615 2.19234 5.43981C2.51837 5.57346 2.67433 5.94612 2.54067 6.27215C1.81207 8.04942 1.84846 10.0686 2.64949 11.8237C2.7958 12.1442 2.65454 12.5227 2.33398 12.669Z" fill="url(#paint1_linear_25014_10095)"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M15.6702 12.6774C15.3495 12.5313 15.208 12.153 15.354 11.8323C16.1583 10.0664 16.1874 8.03144 15.4407 6.24392C15.3049 5.91878 15.4584 5.5451 15.7835 5.40929C16.1087 5.27347 16.4824 5.42695 16.6182 5.75209C17.5012 7.86613 17.4673 10.271 16.5153 12.3612C16.3692 12.6819 15.9909 12.8235 15.6702 12.6774Z" fill="url(#paint2_linear_25014_10095)"/>
+  <path d="M3.77789 0.747892C3.85803 0.41737 4.32811 0.417369 4.40826 0.747892L4.62879 1.65735C4.6574 1.77535 4.74954 1.86749 4.86754 1.8961L5.777 2.11663C6.10752 2.19678 6.10752 2.66686 5.777 2.747L4.86754 2.96753C4.85279 2.97111 4.83845 2.97568 4.82458 2.98117C4.7275 3.01959 4.65382 3.10304 4.62879 3.20629L4.40826 4.11574C4.40325 4.1364 4.39672 4.15577 4.38885 4.17384C4.27087 4.44498 3.85302 4.42561 3.77789 4.11575L3.55736 3.20629C3.55557 3.19892 3.55353 3.19164 3.55126 3.18448C3.51712 3.07702 3.42923 2.99436 3.3186 2.96753L2.40914 2.747C2.38849 2.74199 2.36912 2.73546 2.35105 2.7276C2.07991 2.60962 2.09928 2.19177 2.40914 2.11663L3.3186 1.8961C3.4366 1.86749 3.52874 1.77535 3.55736 1.65735L3.77789 0.747892Z" fill="url(#paint3_linear_25014_10095)"/>
+  <path d="M13.8233 13.8843C13.9035 13.5537 14.3736 13.5537 14.4537 13.8843L14.6742 14.7937C14.7029 14.9117 14.795 15.0039 14.913 15.0325L15.8225 15.253C16.153 15.3331 16.153 15.8032 15.8225 15.8834L14.913 16.1039C14.8982 16.1075 14.8839 16.112 14.87 16.1175C14.773 16.1559 14.6993 16.2394 14.6742 16.3427L14.4537 17.2521C14.4487 17.2728 14.4422 17.2921 14.4343 17.3102C14.3163 17.5813 13.8985 17.562 13.8233 17.2521L13.6028 16.3427C13.601 16.3353 13.599 16.328 13.5967 16.3208C13.5626 16.2134 13.4747 16.1307 13.3641 16.1039L12.4546 15.8834C12.4339 15.8784 12.4146 15.8718 12.3965 15.864C12.1254 15.746 12.1447 15.3281 12.4546 15.253L13.3641 15.0325C13.4821 15.0039 13.5742 14.9117 13.6028 14.7937L13.8233 13.8843Z" fill="url(#paint4_linear_25014_10095)"/>
+  <path d="M14.5249 2.04545C14.5249 2.47222 14.1789 2.81818 13.7522 2.81818C13.3254 2.81818 12.9794 2.47222 12.9794 2.04545C12.9794 1.61869 13.3254 1.27273 13.7522 1.27273C14.1789 1.27273 14.5249 1.61869 14.5249 2.04545Z" fill="url(#paint5_linear_25014_10095)"/>
+  <path d="M5.25216 15.9545C5.25216 16.3813 4.9062 16.7273 4.47943 16.7273C4.05267 16.7273 3.70671 16.3813 3.70671 15.9545C3.70671 15.5278 4.05267 15.1818 4.47943 15.1818C4.9062 15.1818 5.25216 15.5278 5.25216 15.9545Z" fill="url(#paint6_linear_25014_10095)"/>
+  <defs>
+    <linearGradient id="paint0_linear_25014_10095" x1="8.99999" y1="1.05195" x2="8.99999" y2="16.9481" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#499DFF"/>
+      <stop offset="0.432292" stop-color="#2770FF"/>
+      <stop offset="1" stop-color="#6E80FF"/>
+    </linearGradient>
+    <linearGradient id="paint1_linear_25014_10095" x1="8.99999" y1="1.05195" x2="8.99999" y2="16.9481" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#499DFF"/>
+      <stop offset="0.432292" stop-color="#2770FF"/>
+      <stop offset="1" stop-color="#6E80FF"/>
+    </linearGradient>
+    <linearGradient id="paint2_linear_25014_10095" x1="8.99999" y1="1.05195" x2="8.99999" y2="16.9481" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#499DFF"/>
+      <stop offset="0.432292" stop-color="#2770FF"/>
+      <stop offset="1" stop-color="#6E80FF"/>
+    </linearGradient>
+    <linearGradient id="paint3_linear_25014_10095" x1="8.99999" y1="1.05195" x2="8.99999" y2="16.9481" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#499DFF"/>
+      <stop offset="0.432292" stop-color="#2770FF"/>
+      <stop offset="1" stop-color="#6E80FF"/>
+    </linearGradient>
+    <linearGradient id="paint4_linear_25014_10095" x1="8.99999" y1="1.05195" x2="8.99999" y2="16.9481" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#499DFF"/>
+      <stop offset="0.432292" stop-color="#2770FF"/>
+      <stop offset="1" stop-color="#6E80FF"/>
+    </linearGradient>
+    <linearGradient id="paint5_linear_25014_10095" x1="8.99999" y1="1.05195" x2="8.99999" y2="16.9481" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#499DFF"/>
+      <stop offset="0.432292" stop-color="#2770FF"/>
+      <stop offset="1" stop-color="#6E80FF"/>
+    </linearGradient>
+    <linearGradient id="paint6_linear_25014_10095" x1="8.99999" y1="1.05195" x2="8.99999" y2="16.9481" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#499DFF"/>
+      <stop offset="0.432292" stop-color="#2770FF"/>
+      <stop offset="1" stop-color="#6E80FF"/>
+    </linearGradient>
+  </defs>
+</svg>
--- a/packages/web/components/common/MyModal/index.tsx
+++ b/packages/web/components/common/MyModal/index.tsx
@@ -57,7 +57,7 @@ const MyModal = ({
      closeOnOverlayClick={closeOnOverlayClick}
      returnFocusOnClose={false}
    >
-      <ModalOverlay />
+      <ModalOverlay zIndex={props.zIndex} />
      <ModalContent
        w={w}
        minW={['90vw', '400px']}
@@ -65,6 +65,9 @@ const MyModal = ({
        position={'relative'}
        maxH={'85vh'}
        boxShadow={'7'}
+        containerProps={{
+          zIndex: props.zIndex
+        }}
        {...props}
      >
        {!title && onClose && showCloseButton && <ModalCloseButton zIndex={1} />}
--- a/packages/web/components/common/MyPopover/index.tsx
+++ b/packages/web/components/common/MyPopover/index.tsx
@@ -6,7 +6,9 @@ import {
  useDisclosure,
  type PlacementWithLogical,
  PopoverArrow,
-  type PopoverContentProps
+  type PopoverContentProps,
+  Box,
+  Portal
 } from '@chakra-ui/react';

 interface Props extends PopoverContentProps {
@@ -15,6 +17,7 @@ interface Props extends PopoverContentProps {
  offset?: [number, number];
  trigger?: 'hover' | 'click';
  hasArrow?: boolean;
+  onBackdropClick?: () => void;
  children: (e: { onClose: () => void }) => React.ReactNode;
  onCloseFunc?: () => void;
  onOpenFunc?: () => void;
@@ -31,6 +34,7 @@ const MyPopover = ({
  onOpenFunc,
  onCloseFunc,
  closeOnBlur = false,
+  onBackdropClick,
  ...props
 }: Props) => {
  const firstFieldRef = React.useRef(null);
@@ -60,10 +64,17 @@ const MyPopover = ({
      autoFocus={false}
    >
      <PopoverTrigger>{Trigger}</PopoverTrigger>
-      <PopoverContent {...props}>
-        {hasArrow && <PopoverArrow />}
-        {children({ onClose })}
-      </PopoverContent>
+      {isOpen && onBackdropClick && (
+        <Portal>
+          <Box position="fixed" zIndex={1000} inset={0} onClick={() => onBackdropClick()} />
+        </Portal>
+      )}
+      <Portal>
+        <PopoverContent zIndex={1001} {...props}>
+          {hasArrow && <PopoverArrow />}
+          {children({ onClose })}
+        </PopoverContent>
+      </Portal>
    </Popover>
  );
 };
--- a/packages/web/components/common/Textarea/PromptEditor/Editor.tsx
+++ b/packages/web/components/common/Textarea/PromptEditor/Editor.tsx
@@ -6,7 +6,7 @@
 *
 */

-import { useState, useTransition } from 'react';
+import { useMemo, useState, useTransition } from 'react';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
 import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';
 import { ContentEditable } from '@lexical/react/LexicalContentEditable';
@@ -14,7 +14,7 @@ import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
 import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
 import VariableLabelPickerPlugin from './plugins/VariableLabelPickerPlugin';
-import { Box } from '@chakra-ui/react';
+import { Box, Flex } from '@chakra-ui/react';
 import styles from './index.module.scss';
 import VariablePlugin from './plugins/VariablePlugin';
 import { VariableNode } from './plugins/VariablePlugin/node';
@@ -32,36 +32,47 @@ import VariableLabelPlugin from './plugins/VariableLabelPlugin';
 import { useDeepCompareEffect } from 'ahooks';
 import VariablePickerPlugin from './plugins/VariablePickerPlugin';

+export type EditorProps = {
+  variables?: EditorVariablePickerType[];
+  variableLabels?: EditorVariableLabelPickerType[];
+  value?: string;
+  showOpenModal?: boolean;
+  minH?: number;
+  maxH?: number;
+  maxLength?: number;
+  placeholder?: string;
+  isInvalid?: boolean;
+
+  ExtensionPopover?: ((e: {
+    onChangeText: (text: string) => void;
+    iconButtonStyle: Record<string, any>;
+  }) => React.ReactNode)[];
+};
+
 export default function Editor({
  minH = 200,
  maxH = 400,
  maxLength,
  showOpenModal = true,
  onOpenModal,
-  variables,
-  variableLabels,
+  variables = [],
+  variableLabels = [],
  onChange,
+  onChangeText,
  onBlur,
  value,
  placeholder = '',
  bg = 'white',
+  isInvalid,

-  isInvalid
-}: {
-  minH?: number;
-  maxH?: number;
-  maxLength?: number;
-  showOpenModal?: boolean;
-  onOpenModal?: () => void;
-  variables: EditorVariablePickerType[];
-  variableLabels: EditorVariableLabelPickerType[];
-  onChange?: (editorState: EditorState, editor: LexicalEditor) => void;
-  onBlur?: (editor: LexicalEditor) => void;
-  value?: string;
-  placeholder?: string;
-
-  isInvalid?: boolean;
-} & FormPropsType) {
+  ExtensionPopover
+}: EditorProps &
+  FormPropsType & {
+    onOpenModal?: () => void;
+    onChange: (editorState: EditorState, editor: LexicalEditor) => void;
+    onChangeText?: ((text: string) => void) | undefined;
+    onBlur: (editor: LexicalEditor) => void;
+  }) {
  const [key, setKey] = useState(getNanoid(6));
  const [_, startSts] = useTransition();
  const [focus, setFocus] = useState(false);
@@ -81,6 +92,28 @@ export default function Editor({
    setKey(getNanoid(6));
  }, [value, variables, variableLabels]);

+  const showFullScreenIcon = useMemo(() => {
+    return showOpenModal && scrollHeight > maxH;
+  }, [showOpenModal, scrollHeight, maxH]);
+
+  const iconButtonStyle = useMemo(
+    () => ({
+      position: 'absolute' as const,
+      bottom: 1,
+      right: showFullScreenIcon ? '34px' : 2,
+      zIndex: 10,
+      cursor: 'pointer',
+      borderRadius: '6px',
+      background: 'rgba(255, 255, 255, 0.01)',
+      backdropFilter: 'blur(6.6666669845581055px)',
+      alignItems: 'center',
+      justifyContent: 'center',
+      w: 6,
+      h: 6
+    }),
+    [showFullScreenIcon]
+  );
+
  return (
    <Box
      className="nowheel"
@@ -146,17 +179,15 @@ export default function Editor({
        <VariablePickerPlugin variables={variableLabels.length > 0 ? [] : variables} />
        <OnBlurPlugin onBlur={onBlur} />
      </LexicalComposer>
-      {showOpenModal && scrollHeight > maxH && (
-        <Box
-          zIndex={10}
-          position={'absolute'}
-          bottom={-1}
-          right={2}
-          cursor={'pointer'}
-          onClick={onOpenModal}
-        >
-          <MyIcon name={'common/fullScreenLight'} w={'14px'} color={'myGray.500'} />
-        </Box>
+
+      {onChangeText &&
+        ExtensionPopover?.map((Item, index) => (
+          <Item key={index} iconButtonStyle={iconButtonStyle} onChangeText={onChangeText} />
+        ))}
+      {showFullScreenIcon && (
+        <Flex onClick={onOpenModal} {...iconButtonStyle} right={2}>
+          <MyIcon name={'common/fullScreenLight'} w={'1rem'} color={'myGray.500'} />
+        </Flex>
      )}
    </Box>
  );
--- a/packages/web/components/common/Textarea/PromptEditor/index.tsx
+++ b/packages/web/components/common/Textarea/PromptEditor/index.tsx
@@ -1,46 +1,29 @@
-import type { BoxProps } from '@chakra-ui/react';
 import { Box, Button, ModalBody, ModalFooter, useDisclosure } from '@chakra-ui/react';
 import React, { useMemo } from 'react';
 import { editorStateToText } from './utils';
+import type { EditorProps } from './Editor';
 import Editor from './Editor';
 import MyModal from '../../MyModal';
 import { useTranslation } from 'next-i18next';
 import type { EditorState, LexicalEditor } from 'lexical';
 import type { FormPropsType } from './type.d';
-import { type EditorVariableLabelPickerType, type EditorVariablePickerType } from './type.d';
 import { useCallback } from 'react';

 const PromptEditor = ({
  showOpenModal = true,
-  variables = [],
-  variableLabels = [],
  value,
  onChange,
  onBlur,
-  minH,
-  maxH,
-  maxLength,
-  placeholder,
  title,
-  isInvalid,
  isDisabled,
  ...props
-}: {
-  showOpenModal?: boolean;
-  variables?: EditorVariablePickerType[];
-  variableLabels?: EditorVariableLabelPickerType[];
-  value?: string;
-  onChange?: (text: string) => void;
-  onBlur?: (text: string) => void;
-  minH?: number;
-  maxH?: number;
-  maxLength?: number;
-  placeholder?: string;
-  title?: string;
-
-  isInvalid?: boolean;
-  isDisabled?: boolean;
-} & FormPropsType) => {
+}: FormPropsType &
+  EditorProps & {
+    title?: string;
+    isDisabled?: boolean;
+    onChange?: (text: string) => void;
+    onBlur?: (text: string) => void;
+  }) => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const { t } = useTranslation();

@@ -69,19 +52,13 @@ const PromptEditor = ({
    <>
      <Box position="relative">
        <Editor
+          {...props}
          showOpenModal={showOpenModal}
          onOpenModal={onOpen}
-          variables={variables}
-          variableLabels={variableLabels}
-          minH={minH}
-          maxH={maxH}
-          maxLength={maxLength}
          value={formattedValue}
          onChange={onChangeInput}
+          onChangeText={onChange}
          onBlur={onBlurInput}
-          placeholder={placeholder}
-          isInvalid={isInvalid}
-          {...props}
        />
        {isDisabled && (
          <Box
@@ -106,16 +83,14 @@ const PromptEditor = ({
      >
        <ModalBody>
          <Editor
+            {...props}
            minH={400}
            maxH={400}
-            maxLength={maxLength}
            showOpenModal={false}
-            variables={variables}
-            variableLabels={variableLabels}
            value={value}
            onChange={onChangeInput}
+            onChangeText={onChange}
            onBlur={onBlurInput}
-            placeholder={placeholder}
          />
        </ModalBody>
        <ModalFooter>