feat: support assistant frontend (#2139)

Co-authored-by: StyleZhang <jasonapring2015@outlook.com>

web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx

@@ -8,7 +8,7 @@ import produce from 'immer'
 import { useContext } from 'use-context-selector'
 import ConfirmAddVar from './confirm-add-var'
 import s from './style.module.css'
-import type { PromptVariable } from '@/models/debug'
+import { PromptMode, type PromptVariable } from '@/models/debug'
 import Tooltip from '@/app/components/base/tooltip'
 import { AppType } from '@/types/app'
 import { getNewVar, getVars } from '@/utils/var'
@@ -21,6 +21,10 @@ import ConfigContext from '@/context/debug-configuration'
 import { useModalContext } from '@/context/modal-context'
 import type { ExternalDataTool } from '@/models/common'
 import { useToastContext } from '@/app/components/base/toast'
+import { ArrowNarrowRight } from '@/app/components/base/icons/src/vender/line/arrows'
+import { useEventEmitterContextContext } from '@/context/event-emitter'
+import { ADD_EXTERNAL_DATA_TOOL } from '@/app/components/app/configuration/config-var'
+import { INSERT_VARIABLE_VALUE_BLOCK_COMMAND } from '@/app/components/base/prompt-editor/plugins/variable-block'
 
 export type ISimplePromptInput = {
   mode: AppType
@@ -38,6 +42,7 @@ const Prompt: FC<ISimplePromptInput> = ({
   onChange,
 }) => {
   const { t } = useTranslation()
+  const { eventEmitter } = useEventEmitterContextContext()
   const {
     modelConfig,
     dataSets,
@@ -47,7 +52,9 @@ const Prompt: FC<ISimplePromptInput> = ({
     hasSetBlockStatus,
     showSelectDataSet,
     externalDataToolsConfig,
-    setExternalDataToolsConfig,
+    isAdvancedMode,
+    isAgent,
+    setPromptMode,
   } = useContext(ConfigContext)
   const { notify } = useToastContext()
   const { setShowExternalDataToolModal } = useModalContext()
@@ -55,7 +62,14 @@ const Prompt: FC<ISimplePromptInput> = ({
     setShowExternalDataToolModal({
       payload: {},
       onSaveCallback: (newExternalDataTool: ExternalDataTool) => {
-        setExternalDataToolsConfig([...externalDataToolsConfig, newExternalDataTool])
+        eventEmitter?.emit({
+          type: ADD_EXTERNAL_DATA_TOOL,
+          payload: newExternalDataTool,
+        } as any)
+        eventEmitter?.emit({
+          type: INSERT_VARIABLE_VALUE_BLOCK_COMMAND,
+          payload: newExternalDataTool.variable,
+        } as any)
       },
       onValidateBeforeSaveCallback: (newExternalDataTool: ExternalDataTool) => {
         for (let i = 0; i < promptVariables.length; i++) {
@@ -65,13 +79,6 @@ const Prompt: FC<ISimplePromptInput> = ({
           }
         }
 
-        for (let i = 0; i < externalDataToolsConfig.length; i++) {
-          if (externalDataToolsConfig[i].variable === newExternalDataTool.variable) {
-            notify({ type: 'error', message: t('appDebug.varKeyError.keyAlreadyExists', { key: externalDataToolsConfig[i].variable }) })
-            return false
-          }
-        }
-
         return true
       },
     })
@@ -89,7 +96,7 @@ const Prompt: FC<ISimplePromptInput> = ({
   const [isShowConfirmAddVar, { setTrue: showConfirmAddVar, setFalse: hideConfirmAddVar }] = useBoolean(false)
 
   const handleChange = (newTemplates: string, keys: string[]) => {
-    const newPromptVariables = keys.filter(key => !(key in promptVariablesObj) && !externalDataToolsConfig.find(item => item.variable === key)).map(key => getNewVar(key))
+    const newPromptVariables = keys.filter(key => !(key in promptVariablesObj) && !externalDataToolsConfig.find(item => item.variable === key)).map(key => getNewVar(key, ''))
     if (newPromptVariables.length > 0) {
       setNewPromptVariables(newPromptVariables)
       setNewTemplates(newTemplates)
@@ -138,7 +145,21 @@ const Prompt: FC<ISimplePromptInput> = ({
               </Tooltip>
             )}
           </div>
-          <AutomaticBtn onClick={showAutomaticTrue}/>
+          <div className='flex items-center'>
+            <AutomaticBtn onClick={showAutomaticTrue} />
+            {!isAgent && !isAdvancedMode && (
+              <>
+                <div className='mx-1 w-px h-3.5 bg-black/5'></div>
+                <div
+                  className='flex items-center px-2 space-x-1 leading-[18px] text-xs font-semibold text-[#444CE7] cursor-pointer'
+                  onClick={() => setPromptMode(PromptMode.advanced)}
+                >
+                  <div>{t('appDebug.promptMode.advanced')}</div>
+                  <ArrowNarrowRight className='w-3 h-3'></ArrowNarrowRight>
+                </div>
+              </>
+            )}
+          </div>
         </div>
         <div className='px-4 py-2 min-h-[228px] max-h-[156px] overflow-y-auto bg-white rounded-xl text-sm text-gray-700'>
           <PromptEditor
@@ -155,13 +176,13 @@ const Prompt: FC<ISimplePromptInput> = ({
               onAddContext: showSelectDataSet,
             }}
             variableBlock={{
-              variables: modelConfig.configs.prompt_variables.map(item => ({
+              variables: modelConfig.configs.prompt_variables.filter(item => item.type !== 'api').map(item => ({
                 name: item.name,
                 value: item.key,
               })),
-              externalTools: externalDataToolsConfig.map(item => ({
-                name: item.label!,
-                variableName: item.variable!,
+              externalTools: modelConfig.configs.prompt_variables.filter(item => item.type === 'api').map(item => ({
+                name: item.name,
+                variableName: item.key,
                 icon: item.icon,
                 icon_background: item.icon_background,
               })),
@@ -174,7 +195,7 @@ const Prompt: FC<ISimplePromptInput> = ({
                 user: '',
                 assistant: '',
               },
-              onEditRole: () => {},
+              onEditRole: () => { },
             }}
             queryBlock={{
               show: false,