diff --git a/web/app/components/app/configuration/config-prompt/index.tsx b/web/app/components/app/configuration/config-prompt/index.tsx index 7e40fdc84e..bea4a9e455 100644 --- a/web/app/components/app/configuration/config-prompt/index.tsx +++ b/web/app/components/app/configuration/config-prompt/index.tsx @@ -19,9 +19,6 @@ export type IPromptProps = { promptTemplate: string promptVariables: PromptVariable[] readonly?: boolean - noTitle?: boolean - gradientBorder?: boolean - editorHeight?: number onChange?: (prompt: string, promptVariables: PromptVariable[]) => void } @@ -29,10 +26,7 @@ const Prompt: FC = ({ mode, promptTemplate, promptVariables, - noTitle, - gradientBorder, readonly = false, - editorHeight, onChange, }) => { const { t } = useTranslation() @@ -105,9 +99,6 @@ const Prompt: FC = ({ promptVariables={promptVariables} readonly={readonly} onChange={onChange} - noTitle={noTitle} - gradientBorder={gradientBorder} - editorHeight={editorHeight} /> ) } diff --git a/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx b/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx index b0a140fc97..a15f538227 100644 --- a/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx +++ b/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx @@ -28,7 +28,6 @@ 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' import { PROMPT_EDITOR_UPDATE_VALUE_BY_EVENT_EMITTER } from '@/app/components/base/prompt-editor/plugins/update-block' -import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints' export type ISimplePromptInput = { mode: AppType @@ -36,9 +35,6 @@ export type ISimplePromptInput = { promptVariables: PromptVariable[] readonly?: boolean onChange?: (promp: string, promptVariables: PromptVariable[]) => void - noTitle?: boolean - gradientBorder?: boolean - editorHeight?: number } const Prompt: FC = ({ @@ -47,14 +43,8 @@ const Prompt: FC = ({ promptVariables, readonly = false, onChange, - noTitle, - gradientBorder, - editorHeight: initEditorHeight, }) => { const { t } = useTranslation() - const media = useBreakpoints() - const isMobile = media === MediaType.mobile - const { eventEmitter } = useEventEmitterContextContext() const { modelConfig, @@ -126,11 +116,6 @@ const Prompt: FC = ({ const [showAutomatic, { setTrue: showAutomaticTrue, setFalse: showAutomaticFalse }] = useBoolean(false) const handleAutomaticRes = (res: AutomaticRes) => { - // put eventEmitter in first place to prevent overwrite the configs.prompt_variables.But another problem is that prompt won't hight the prompt_variables. - eventEmitter?.emit({ - type: PROMPT_EDITOR_UPDATE_VALUE_BY_EVENT_EMITTER, - payload: res.prompt, - } as any) const newModelConfig = produce(modelConfig, (draft) => { draft.configs.prompt_template = res.prompt draft.configs.prompt_variables = res.variables.map(key => ({ key, name: key, type: 'string', required: true })) @@ -140,35 +125,36 @@ const Prompt: FC = ({ if (mode !== AppType.completion) setIntroduction(res.opening_statement) showAutomaticFalse() + eventEmitter?.emit({ + type: PROMPT_EDITOR_UPDATE_VALUE_BY_EVENT_EMITTER, + payload: res.prompt, + } as any) } - const minHeight = initEditorHeight || 228 + const minHeight = 228 const [editorHeight, setEditorHeight] = useState(minHeight) return ( -
+
- {!noTitle && ( -
-
-
{mode !== AppType.completion ? t('appDebug.chatSubTitle') : t('appDebug.completionSubTitle')}
- {!readonly && ( - - {t('appDebug.promptTip')} -
} - selector='config-prompt-tooltip'> - - - )} -
-
- {!isAgent && !readonly && !isMobile && ( - - )} -
+
+
+
{mode !== AppType.completion ? t('appDebug.chatSubTitle') : t('appDebug.completionSubTitle')}
+ {!readonly && ( + + {t('appDebug.promptTip')} +
} + selector='config-prompt-tooltip'> + + + )}
- )} - +
+ {!isAgent && !readonly && ( + + )} +
+
= ({ onBlur={() => { handleChange(promptTemplate, getVars(promptTemplate)) }} - editable={!readonly} />
diff --git a/web/app/components/app/configuration/config/automatic/automatic-btn.tsx b/web/app/components/app/configuration/config/automatic/automatic-btn.tsx index f70976082d..40a9b9d799 100644 --- a/web/app/components/app/configuration/config/automatic/automatic-btn.tsx +++ b/web/app/components/app/configuration/config/automatic/automatic-btn.tsx @@ -2,21 +2,29 @@ import type { FC } from 'react' import React from 'react' import { useTranslation } from 'react-i18next' -import { Generator } from '@/app/components/base/icons/src/vender/other' export type IAutomaticBtnProps = { onClick: () => void } + +const leftIcon = ( + + + + + + +) const AutomaticBtn: FC = ({ onClick, }) => { const { t } = useTranslation() return ( -
- + {leftIcon} {t('appDebug.operation.automatic')}
) diff --git a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx index 13cf857edf..fa58253cac 100644 --- a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx +++ b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx @@ -1,20 +1,8 @@ 'use client' import type { FC } from 'react' -import React, { useCallback } from 'react' +import React from 'react' import { useTranslation } from 'react-i18next' import { useBoolean } from 'ahooks' -import { - RiDatabase2Line, - RiFileExcel2Line, - RiGitCommitLine, - RiNewspaperLine, - RiPresentationLine, - RiRoadMapLine, - RiTerminalBoxLine, - RiTranslate, - RiUser2Line, -} from '@remixicon/react' -import s from './style.module.css' import Modal from '@/app/components/base/modal' import Button from '@/app/components/base/button' import Toast from '@/app/components/base/toast' @@ -26,97 +14,57 @@ import OpeningStatement from '@/app/components/app/configuration/features/chat-g import GroupName from '@/app/components/app/configuration/base/group-name' import Loading from '@/app/components/base/loading' import Confirm from '@/app/components/base/confirm' - // type import type { AutomaticRes } from '@/service/debug' -import { Generator } from '@/app/components/base/icons/src/vender/other' +import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints' + +const noDataIcon = ( + + + +) export type IGetAutomaticResProps = { mode: AppType isShow: boolean onClose: () => void onFinished: (res: AutomaticRes) => void - isInLLMNode?: boolean } -const TryLabel: FC<{ - Icon: any - text: string - onClick: () => void -}> = ({ Icon, text, onClick }) => { - return ( -
- -
{text}
-
- ) -} +const genIcon = ( + + + + + +) const GetAutomaticRes: FC = ({ mode, isShow, onClose, - isInLLMNode, + // appId, onFinished, }) => { const { t } = useTranslation() - const tryList = [ - { - icon: RiTerminalBoxLine, - key: 'pythonDebugger', - }, - { - icon: RiTranslate, - key: 'translation', - }, - { - icon: RiPresentationLine, - key: 'meetingTakeaways', - }, - { - icon: RiNewspaperLine, - key: 'writingsPolisher', - }, - { - icon: RiUser2Line, - key: 'professionalAnalyst', - }, - { - icon: RiFileExcel2Line, - key: 'excelFormulaExpert', - }, - { - icon: RiRoadMapLine, - key: 'travelPlanning', - }, - { - icon: RiDatabase2Line, - key: 'SQLSorcerer', - }, - { - icon: RiGitCommitLine, - key: 'GitGud', - }, - ] + const media = useBreakpoints() + const isMobile = media === MediaType.mobile - const [instruction, setInstruction] = React.useState('') - const handleChooseTemplate = useCallback((key: string) => { - return () => { - const template = t(`appDebug.generate.template.${key}.instruction`) - setInstruction(template) - } - }, [t]) + const [audiences, setAudiences] = React.useState('') + const [hopingToSolve, setHopingToSolve] = React.useState('') const isValid = () => { - if (instruction.trim() === '') { + if (audiences.trim() === '') { Toast.notify({ type: 'error', - message: t('common.errorMsg.fieldRequired', { - field: t('appDebug.generate.instruction'), - }), + message: t('appDebug.automatic.audiencesRequired'), + }) + return false + } + if (hopingToSolve.trim() === '') { + Toast.notify({ + type: 'error', + message: t('appDebug.automatic.problemRequired'), }) return false } @@ -128,17 +76,14 @@ const GetAutomaticRes: FC = ({ const renderLoading = (
-
{t('appDebug.generate.loading')}
+
{t('appDebug.automatic.loading')}
) const renderNoData = (
- -
-
{t('appDebug.generate.noDataLine1')}
-
{t('appDebug.generate.noDataLine2')}
-
+ {noDataIcon} +
{t('appDebug.automatic.noData')}
) @@ -150,7 +95,8 @@ const GetAutomaticRes: FC = ({ setLoadingTrue() try { const res = await generateRule({ - instruction, + audiences, + hoping_to_solve: hopingToSolve, }) setRes(res) } @@ -161,7 +107,24 @@ const GetAutomaticRes: FC = ({ const [showConfirmOverwrite, setShowConfirmOverwrite] = React.useState(false) + const isShowAutoPromptInput = () => { + if (isMobile) { + // hide prompt panel on mobile if it is loading or has had result + if (isLoading || res) + return false + return true + } + + // always display prompt panel on desktop mode + return true + } + const isShowAutoPromptResPlaceholder = () => { + if (isMobile) { + // hide placeholder panel on mobile + return false + } + return !isLoading && !res } @@ -169,96 +132,75 @@ const GetAutomaticRes: FC = ({ -
-
-
-
{t('appDebug.generate.title')}
-
{t('appDebug.generate.description')}
-
-
-
-
{t('appDebug.generate.tryIt')}
-
-
-
- {tryList.map(item => ( - - ))} -
+
+ {isShowAutoPromptInput() &&
+
+
{t('appDebug.automatic.title')}
+
{t('appDebug.automatic.description')}
{/* inputs */} -
-
-
{t('appDebug.generate.instruction')}
-