feat: add plugin instruction config (#2579)

* feat: add plugin instruction config

* fix build

packages/global/core/app/type.d.ts

@@ -96,6 +96,9 @@ export type AppChatConfigType = {
   scheduledTriggerConfig?: AppScheduledTriggerConfigType;
   chatInputGuide?: ChatInputGuideConfigType;
   fileSelectConfig?: AppFileSelectConfigType;
+
+  // plugin
+  instruction?: string;
 };
 export type SettingAIDataType = {
   model: string;

packages/global/core/workflow/constants.ts

@@ -52,6 +52,9 @@ export enum NodeInputKeyEnum {
   scheduleTrigger = 'scheduleTrigger',
   chatInputGuide = 'chatInputGuide',
 
+  // plugin config
+  instruction = 'instruction',
+
   // entry
   userChatInput = 'userChatInput',
   inputFiles = 'inputFiles',

packages/global/core/workflow/node/constant.ts

@@ -94,6 +94,7 @@ export enum FlowNodeOutputTypeEnum {
 export enum FlowNodeTypeEnum {
   emptyNode = 'emptyNode',
   systemConfig = 'userGuide',
+  pluginConfig = 'pluginConfig',
   globalVariable = 'globalVariable',
   workflowStart = 'workflowStart',
   chatNode = 'chatNode',

packages/global/core/workflow/template/constants.ts

@@ -1,4 +1,5 @@
 import { SystemConfigNode } from './system/systemConfig';
+import { PluginConfigNode } from './system/pluginConfig';
 import { EmptyNode } from './system/emptyNode';
 import { WorkflowStart } from './system/workflowStart';
 import { AiChatModule } from './system/aiChat';
@@ -57,6 +58,7 @@ export const appSystemModuleTemplates: FlowNodeTemplateType[] = [
 ];
 /* plugin flow module templates */
 export const pluginSystemModuleTemplates: FlowNodeTemplateType[] = [
+  PluginConfigNode,
   PluginInputModule,
   PluginOutputModule,
   ...systemNodes

packages/global/core/workflow/template/system/pluginConfig.ts

@@ -0,0 +1,21 @@
+import { FlowNodeTypeEnum } from '../../node/constant';
+import { FlowNodeTemplateType } from '../../type/node.d';
+import { FlowNodeTemplateTypeEnum } from '../../constants';
+import { getHandleConfig } from '../utils';
+import { i18nT } from '../../../../../web/i18n/utils';
+
+export const PluginConfigNode: FlowNodeTemplateType = {
+  id: FlowNodeTypeEnum.pluginConfig,
+  templateType: FlowNodeTemplateTypeEnum.systemInput,
+  flowNodeType: FlowNodeTypeEnum.pluginConfig,
+  sourceHandle: getHandleConfig(false, false, false, false),
+  targetHandle: getHandleConfig(false, false, false, false),
+  avatar: 'core/workflow/template/systemConfig',
+  name: i18nT('workflow:template.system_config'),
+  intro: '',
+  unique: true,
+  forbidDelete: true,
+  version: '4811',
+  inputs: [],
+  outputs: []
+};

packages/global/core/workflow/utils.ts

@@ -79,14 +79,19 @@ export const splitGuideModule = (guideModules?: StoreNodeItemType) => {
     guideModules?.inputs?.find((item) => item.key === NodeInputKeyEnum.chatInputGuide)?.value ||
     defaultChatInputGuideConfig;
 
+  // plugin
+  const instruction: string =
+    guideModules?.inputs?.find((item) => item.key === NodeInputKeyEnum.instruction)?.value || '';
+
   return {
     welcomeText,
     variables,
     questionGuide,
     ttsConfig,
     whisperConfig,
     scheduledTriggerConfig,
-    chatInputGuide
+    chatInputGuide,
+    instruction
   };
 };
 
@@ -111,7 +116,8 @@ export const getAppChatConfig = ({
     ttsConfig,
     whisperConfig,
     scheduledTriggerConfig,
-    chatInputGuide
+    chatInputGuide,
+    instruction
   } = splitGuideModule(systemConfigNode);
 
   const config: AppChatConfigType = {
@@ -120,6 +126,7 @@ export const getAppChatConfig = ({
     whisperConfig,
     scheduledTriggerConfig,
     chatInputGuide,
+    instruction,
     ...chatConfig,
     variables: storeVariables ?? chatConfig?.variables ?? variables,
     welcomeText: storeWelcomeText ?? chatConfig?.welcomeText ?? welcomeText

packages/service/core/app/schema.ts

@@ -18,7 +18,8 @@ export const chatConfigType = {
   whisperConfig: Object,
   scheduledTriggerConfig: Object,
   chatInputGuide: Object,
-  fileSelectConfig: Object
+  fileSelectConfig: Object,
+  instruction: String
 };
 
 // schema

packages/service/core/workflow/dispatch/index.ts

@@ -93,6 +93,7 @@ const callbackMap: Record<FlowNodeTypeEnum, Function> = {
 
   // none
   [FlowNodeTypeEnum.systemConfig]: dispatchSystemConfig,
+  [FlowNodeTypeEnum.pluginConfig]: () => Promise.resolve(),
   [FlowNodeTypeEnum.emptyNode]: () => Promise.resolve(),
   [FlowNodeTypeEnum.globalVariable]: () => Promise.resolve()
 };

packages/web/i18n/en/workflow.json

@@ -97,6 +97,10 @@
   "optional_value_type_tip": "One or more data types can be specified, and users can only select the configured type when adding fields in winter",
   "other_questions": "Other questions",
   "pass_returned_object_as_output_to_next_nodes": "Use the object returned in the code as output and pass it to subsequent nodes. \nThe variable name needs to correspond to the key of return",
+  "plugin": {
+    "Instruction_Tip": "You can configure a description to explain the purpose of this plugin. This description will be displayed each time before using the plugin. Standard Markdown syntax is supported.",
+    "Instructions": "Instructions"
+  },
   "plugin_input": "Plug-in input",
   "question_classification": "Problem classification",
   "question_optimization": "Problem optimization",

packages/web/i18n/zh/workflow.json

@@ -97,6 +97,10 @@
   "optional_value_type_tip": "可以指定 1 个或多个数据类型，用户在动态添加字段时，仅可选择配置的类型",
   "other_questions": "其他问题",
   "pass_returned_object_as_output_to_next_nodes": "将代码中 return 的对象作为输出，传递给后续的节点。变量名需要对应 return 的 key",
+  "plugin": {
+    "Instruction_Tip": "可以配置一段说明，以解释该插件的用途。每次使用插件前，会显示该段说明。支持标准 Markdown 语法。",
+    "Instructions": "使用说明"
+  },
   "plugin_input": "插件输入",
   "question_classification": "问题分类",
   "question_optimization": "问题优化",

projects/app/src/components/core/app/Tip.tsx

@@ -11,18 +11,18 @@ enum FnTypeEnum {
   variable = 'variable',
   welcome = 'welcome',
   file = 'file',
-  visionModel = 'visionModel'
+  visionModel = 'visionModel',
+  instruction = 'instruction'
 }
 
 const ChatFunctionTip = ({ type }: { type: `${FnTypeEnum}` }) => {
   const { t } = useTranslation();
-  const { chatT } = useI18n();
 
   const map = useRef({
     [FnTypeEnum.inputGuide]: {
       icon: '/imgs/app/inputGuide-icon.svg',
-      title: chatT('input_guide'),
-      desc: chatT('input_guide_tip'),
+      title: t('chat:input_guide'),
+      desc: t('chat:input_guide_tip'),
       imgUrl: '/imgs/app/inputGuide.svg'
     },
     [FnTypeEnum.nextQuestion]: {
@@ -60,6 +60,12 @@ const ChatFunctionTip = ({ type }: { type: `${FnTypeEnum}` }) => {
       title: t('app:vision_model_title'),
       desc: t('app:llm_use_vision_tip'),
       imgUrl: '/imgs/app/visionModel.png'
+    },
+    [FnTypeEnum.instruction]: {
+      icon: '/imgs/app/help.svg',
+      title: t('workflow:plugin.Instructions'),
+      desc: t('workflow:plugin.Instruction_Tip'),
+      imgUrl: '/imgs/app/instruction.svg'
     }
   });
   const data = map.current[type];

projects/app/src/components/core/chat/ChatContainer/PluginRunBox/components/RenderInput.tsx

@@ -1,16 +1,26 @@
 import React, { useEffect, useMemo } from 'react';
 import { Controller } from 'react-hook-form';
 import RenderPluginInput from './renderPluginInput';
-import { Button, Flex } from '@chakra-ui/react';
+import { Box, Button, Flex } from '@chakra-ui/react';
 import { useTranslation } from 'next-i18next';
 import { useContextSelector } from 'use-context-selector';
 import { PluginRunContext } from '../context';
 import { WorkflowIOValueTypeEnum } from '@fastgpt/global/core/workflow/constants';
 import { isEqual } from 'lodash';
+import { AppChatConfigType } from '@fastgpt/global/core/app/type';
+import Markdown from '@/components/Markdown';
 
 const RenderInput = () => {
-  const { pluginInputs, variablesForm, histories, onStartChat, onNewChat, onSubmit, isChatting } =
-    useContextSelector(PluginRunContext, (v) => v);
+  const {
+    pluginInputs,
+    variablesForm,
+    histories,
+    onStartChat,
+    onNewChat,
+    onSubmit,
+    isChatting,
+    chatConfig
+  } = useContextSelector(PluginRunContext, (v) => v);
 
   const { t } = useTranslation();
   const {
@@ -64,6 +74,20 @@ const RenderInput = () => {
 
   return (
     <>
+      {/* instruction */}
+      {chatConfig?.instruction && (
+        <Box
+          border={'1px solid'}
+          borderColor={'myGray.250'}
+          p={4}
+          rounded={'md'}
+          fontSize={'sm'}
+          color={'myGray.600'}
+        >
+          <Markdown source={chatConfig.instruction} />
+        </Box>
+      )}
+
       {pluginInputs.map((input) => {
         return (
           <Controller

projects/app/src/components/core/chat/ChatContainer/PluginRunBox/type.d.ts

@@ -19,4 +19,5 @@ export type PluginRunBoxProps = OutLinkChatAuthProps & {
   chatId?: string;
   tab: PluginRunBoxTabEnum;
   setTab: React.Dispatch<React.SetStateAction<PluginRunBoxTabEnum>>;
+  chatConfig?: AppChatConfigType;
 };

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/index.tsx

@@ -28,6 +28,7 @@ const nodeTypes: Record<FlowNodeTypeEnum, any> = {
   [FlowNodeTypeEnum.textEditor]: NodeSimple,
   [FlowNodeTypeEnum.customFeedback]: NodeSimple,
   [FlowNodeTypeEnum.systemConfig]: dynamic(() => import('./nodes/NodeSystemConfig')),
+  [FlowNodeTypeEnum.pluginConfig]: dynamic(() => import('./nodes/NodePluginIO/NodePluginConfig')),
   [FlowNodeTypeEnum.workflowStart]: dynamic(() => import('./nodes/NodeWorkflowStart')),
   [FlowNodeTypeEnum.chatNode]: NodeSimple,
   [FlowNodeTypeEnum.readFiles]: NodeSimple,