Plugin runtime (#2050)

* feat: plugin run (#1950)

* feat: plugin run

* fix

* ui

* fix

* change user input type

* fix

* fix

* temp

* split out plugin chat

* perf: chatbox

* perf: chatbox

* fix: plugin runtime (#2032)

* fix: plugin runtime

* fix

* fix build

* fix build

* perf: chat send prompt

* perf: chat log ux

* perf: chatbox context and share page plugin runtime

* perf: plugin run time config

* fix: ts

* feat: doc

* perf: isPc check

* perf: variable input render

* feat: app search

* fix: response box height

* fix: phone ui

* perf: lock

* perf: plugin route

* fix: chat (#2049)

---------

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

packages/web/components/common/DndDrag/index.tsx

@@ -8,6 +8,7 @@ import {
   DragStart,
   DropResult
 } from 'react-beautiful-dnd';
+export * from 'react-beautiful-dnd';
 
 type Props<T = any> = {
   onDragEndCb: (result: T[]) => void;
@@ -57,5 +58,3 @@ function DndDrag<T>({ children, renderClone, onDragEndCb, dataList }: Props<T>)
 }
 
 export default DndDrag;
-
-export * from 'react-beautiful-dnd';

packages/web/components/common/Icon/close.tsx

@@ -6,15 +6,15 @@ const CloseIcon = (props: FlexProps) => {
   return (
     <Flex
       cursor={'pointer'}
-      w={'22px'}
-      h={'22px'}
+      w={'1.5rem'}
+      h={'1.5rem'}
       alignItems={'center'}
       justifyContent={'center'}
       borderRadius={'50%'}
       _hover={{ bg: 'myGray.200' }}
       {...props}
     >
-      <MyIcon name={'common/closeLight'} w={'12px'} color={'myGray.500'} />
+      <MyIcon name={'common/closeLight'} w={'80%'} h={'80%'} color={'myGray.500'} />
     </Flex>
   );
 };

packages/web/components/common/MyModal/index.tsx

@@ -7,11 +7,11 @@ import {
   ModalCloseButton,
   ModalContentProps,
   Box,
-  Image,
-  useMediaQuery
+  Image
 } from '@chakra-ui/react';
 import MyIcon from '../Icon';
 import MyBox from '../MyBox';
+import { useSystem } from '../../../hooks/useSystem';
 
 export interface MyModalProps extends ModalContentProps {
   iconSrc?: string;
@@ -34,7 +34,7 @@ const MyModal = ({
   maxW = ['90vw', '600px'],
   ...props
 }: MyModalProps) => {
-  const [isPc] = useMediaQuery('(min-width: 900px)');
+  const isPc = useSystem();
 
   return (
     <Modal

packages/web/components/common/MySelect/MultipleSelect.tsx

@@ -81,7 +81,6 @@ const MultipleSelect = <T = any,>({
           borderRadius={'md'}
           border={'base'}
           userSelect={'none'}
-          minH={'40px'}
           cursor={'pointer'}
           _active={{
             transform: 'none'

packages/web/components/common/MySelect/index.tsx

@@ -1,4 +1,11 @@
-import React, { useRef, forwardRef, useMemo } from 'react';
+import React, {
+  useRef,
+  forwardRef,
+  useMemo,
+  useEffect,
+  useImperativeHandle,
+  ForwardedRef
+} from 'react';
 import {
   Menu,
   MenuList,
@@ -28,17 +35,21 @@ export type SelectProps<T = any> = ButtonProps & {
   onchange?: (val: T) => void;
 };
 
-const MySelect = <T = any,>({
-  placeholder,
-  value,
-  width = '100%',
-  list = [],
-  onchange,
-  isLoading = false,
-  ...props
-}: SelectProps<T>) => {
-  const ref = useRef<HTMLButtonElement>(null);
-  const { Loading } = useLoading();
+const MySelect = <T = any,>(
+  {
+    placeholder,
+    value,
+    width = '100%',
+    list = [],
+    onchange,
+    isLoading = false,
+    ...props
+  }: SelectProps<T>,
+  ref: ForwardedRef<{
+    focus: () => void;
+  }>
+) => {
+  const ButtonRef = useRef<HTMLButtonElement>(null);
   const menuItemStyles: MenuItemProps = {
     borderRadius: 'sm',
     py: 2,
@@ -54,6 +65,12 @@ const MySelect = <T = any,>({
   const { isOpen, onOpen, onClose } = useDisclosure();
   const selectItem = useMemo(() => list.find((item) => item.value === value), [list, value]);
 
+  useImperativeHandle(ref, () => ({
+    focus() {
+      onOpen();
+    }
+  }));
+
   return (
     <Box
       css={css({
@@ -72,7 +89,7 @@ const MySelect = <T = any,>({
       >
         <MenuButton
           as={Button}
-          ref={ref}
+          ref={ButtonRef}
           width={width}
           px={3}
           rightIcon={<ChevronDownIcon />}
@@ -98,7 +115,7 @@ const MySelect = <T = any,>({
         <MenuList
           className={props.className}
           minW={(() => {
-            const w = ref.current?.clientWidth;
+            const w = ButtonRef.current?.clientWidth;
             if (w) {
               return `${w}px !important`;
             }
@@ -152,4 +169,6 @@ const MySelect = <T = any,>({
   );
 };
 
-export default MySelect;
+export default forwardRef(MySelect) as <T>(
+  props: SelectProps<T> & { ref?: React.Ref<HTMLSelectElement> }
+) => JSX.Element;

packages/web/components/common/MyTooltip/index.tsx

@@ -1,14 +1,13 @@
 import React from 'react';
-import { Box, Tooltip, TooltipProps, css, useMediaQuery } from '@chakra-ui/react';
+import { Box, Tooltip, TooltipProps } from '@chakra-ui/react';
+import { useSystem } from '../../../hooks/useSystem';
 
-interface Props extends TooltipProps {
-  forceShow?: boolean;
-}
+interface Props extends TooltipProps {}
 
-const MyTooltip = ({ children, forceShow = false, shouldWrapChildren = true, ...props }: Props) => {
-  const [isPc] = useMediaQuery('(min-width: 900px)');
+const MyTooltip = ({ children, shouldWrapChildren = true, ...props }: Props) => {
+  const { isPc } = useSystem();
 
-  return isPc || forceShow ? (
+  return (
     <Tooltip
       className="chakra-tooltip"
       bg={'white'}
@@ -27,8 +26,6 @@ const MyTooltip = ({ children, forceShow = false, shouldWrapChildren = true, ...
     >
       {children}
     </Tooltip>
-  ) : (
-    <>{children}</>
   );
 };
 

packages/web/components/common/Tabs/LightRowTabs.tsx

@@ -51,6 +51,7 @@ const LightRowTabs = <ValueType = string,>({
       borderRadius={'sm'}
       fontSize={sizeMap.fontSize}
       overflowX={'auto'}
+      userSelect={'none'}
       {...props}
     >
       {list.map((item) => (

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

@@ -23,6 +23,8 @@ type Props = Omit<BoxProps, 'resize' | 'onChange'> & {
   variables?: EditorVariablePickerType[];
   defaultHeight?: number;
   placeholder?: string;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
 };
 
 const options = {
@@ -55,6 +57,8 @@ const JSONEditor = ({
   variables = [],
   placeholder,
   defaultHeight = 100,
+  isDisabled = false,
+  isInvalid = false,
   ...props
 }: Props) => {
   const { toast } = useToast();
@@ -209,9 +213,9 @@ const JSONEditor = ({
 
   return (
     <Box
-      borderWidth={'1px'}
+      borderWidth={isInvalid ? '2px' : '1px'}
       borderRadius={'md'}
-      borderColor={'myGray.200'}
+      borderColor={isInvalid ? 'red.500' : 'myGray.200'}
       py={2}
       height={height}
       position={'relative'}

packages/web/i18n/en/app.json

@@ -26,6 +26,7 @@
   "Export Configs": "Export Configs",
   "Feedback Count": "User Feedback",
   "Go to chat": "To chat",
+  "Go to run": "Run",
   "Import Configs": "Import Configs",
   "Import Configs Failed": "Failed to import configs, please ensure configs are valid!",
   "Input Field Settings": "Input Field Settings",
@@ -39,8 +40,12 @@
   "My Apps": "My Apps",
   "Output Field Settings": "Output Field Settings",
   "Paste Config": "Paste Config",
+  "Plugin dispatch": "Plugins",
+  "Plugin dispatch tip": "It is up to the model to decide which plug-ins to add additional capabilities to. If the plug-in is selected, the knowledge base call is also treated as a special plug-in.",
   "Publish channel": "Publish channel",
   "Publish success": "Publish success",
+  "Run": "Run",
+  "Search app": "Search app",
   "Setting app": "Settings",
   "Setting plugin": "Setting plugin",
   "To Chat": "Go to Chat",

packages/web/i18n/en/common.json

@@ -107,8 +107,10 @@
     "Rename Success": "Rename Success",
     "Request Error": "Request Error",
     "Require Input": "Required Input",
+    "Restart": "Restart",
     "Role": "Role",
     "Root folder": "Root folder",
+    "Run": "Run",
     "Save": "Save",
     "Save Failed": "Save Failed",
     "Save Success": "Save Success",

packages/web/i18n/zh/app.json

@@ -25,6 +25,7 @@
   "Export Configs": "导出配置",
   "Feedback Count": "用户反馈",
   "Go to chat": "去对话",
+  "Go to run": "去运行",
   "Import Configs": "导入配置",
   "Import Configs Failed": "导入配置失败，请确保配置正常！",
   "Input Field Settings": "输入字段编辑",
@@ -38,8 +39,12 @@
   "My Apps": "我的应用",
   "Output Field Settings": "输出字段编辑",
   "Paste Config": "粘贴配置",
+  "Plugin dispatch": "插件调用",
+  "Plugin dispatch tip": "给模型附加额外的能力，具体调用哪些插件，将由模型自主决定。\n若选择了插件，知识库调用将自动作为一个特殊的插件。",
   "Publish channel": "发布渠道",
   "Publish success": "发布成功",
+  "Run": "运行",
+  "Search app": "搜索应用",
   "Setting app": "应用配置",
   "Setting plugin": "插件配置",
   "To Chat": "前去对话",

packages/web/i18n/zh/common.json

@@ -108,8 +108,10 @@
     "Rename Success": "重命名成功",
     "Request Error": "请求异常",
     "Require Input": "必填",
+    "Restart": "重新开始",
     "Role": "权限",
     "Root folder": "根目录",
+    "Run": "运行",
     "Save": "保存",
     "Save Failed": "保存失败",
     "Save Success": "保存成功",

packages/web/package.json

@@ -38,8 +38,8 @@
   "devDependencies": {
     "@types/lodash": "^4.14.191",
     "@types/papaparse": "^5.3.7",
-    "@types/react": "18.3.0",
-    "@types/react-beautiful-dnd": "^13.1.8",
+    "@types/react": "18.3.1",
+    "@types/react-beautiful-dnd": "^13.1.1",
     "@types/react-dom": "18.3.0"
   }
 }

packages/web/styles/theme.ts

@@ -314,7 +314,7 @@ const Input: ComponentStyleConfig = {
     }),
     md: defineStyle({
       field: {
-        h: '40px',
+        h: '34px',
         borderRadius: 'md'
       }
     })