feat: add plugin instruction config (#2579)

* feat: add plugin instruction config

* fix build

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;
 };