diff --git a/web/src/components/llm-setting-items/next.tsx b/web/src/components/llm-setting-items/next.tsx index 351916d86..c47cc2969 100644 --- a/web/src/components/llm-setting-items/next.tsx +++ b/web/src/components/llm-setting-items/next.tsx @@ -22,6 +22,7 @@ import { SelectValue, } from '../ui/select'; import { SliderInputSwitchFormField } from './slider'; +import { useHandleFreedomChange } from './use-watch-change'; interface LlmSettingFieldItemsProps { prefix?: string; @@ -33,6 +34,11 @@ export const LlmSettingSchema = { top_p: z.string(), presence_penalty: z.coerce.number(), frequency_penalty: z.coerce.number(), + temperatureEnabled: z.boolean(), + topPEnabled: z.boolean(), + presencePenaltyEnabled: z.boolean(), + frequencyPenaltyEnabled: z.boolean(), + maxTokensEnabled: z.boolean(), }; export function LlmSettingFieldItems({ prefix }: LlmSettingFieldItemsProps) { @@ -43,6 +49,10 @@ export function LlmSettingFieldItems({ prefix }: LlmSettingFieldItemsProps) { LlmModelType.Image2text, ]); + // useWatchFreedomChange(); + + const handleChange = useHandleFreedomChange(); + const parameterOptions = Object.values(ModelVariableType).map((x) => ({ label: t(camelCase(x)), value: x, @@ -50,7 +60,7 @@ export function LlmSettingFieldItems({ prefix }: LlmSettingFieldItemsProps) { const getFieldWithPrefix = useCallback( (name: string) => { - return `${prefix}.${name}`; + return prefix ? `${prefix}.${name}` : name; }, [prefix], ); @@ -97,7 +107,13 @@ export function LlmSettingFieldItems({ prefix }: LlmSettingFieldItemsProps) { {t('freedom')} - { + handleChange(val); + field.onChange(val); + }} + > diff --git a/web/src/components/llm-setting-items/use-watch-change.ts b/web/src/components/llm-setting-items/use-watch-change.ts new file mode 100644 index 000000000..67a37c073 --- /dev/null +++ b/web/src/components/llm-setting-items/use-watch-change.ts @@ -0,0 +1,42 @@ +import { settledModelVariableMap } from '@/constants/knowledge'; +import { FlowFormContext } from '@/pages/agent/context'; +import useGraphStore from '@/pages/agent/store'; +import { useCallback, useContext } from 'react'; +import { useFormContext } from 'react-hook-form'; + +export function useHandleFreedomChange() { + const form = useFormContext(); + const node = useContext(FlowFormContext); + const updateNodeForm = useGraphStore((state) => state.updateNodeForm); + + const handleChange = useCallback( + (parameter: string) => { + const currentValues = { ...form.getValues() }; + const values = + settledModelVariableMap[ + parameter as keyof typeof settledModelVariableMap + ]; + + const nextValues = { ...currentValues, ...values }; + + if (node?.id) { + updateNodeForm(node?.id, nextValues); + } + + console.info('xx:', node); + + // form.reset({ ...currentValues, ...values }); + + // for (const key in values) { + // if (Object.prototype.hasOwnProperty.call(values, key)) { + // const element = values[key]; + + // form.setValue(key, element); + // } + // } + }, + [form, node, updateNodeForm], + ); + + return handleChange; +} diff --git a/web/src/pages/agent/canvas/node/begin-node.tsx b/web/src/pages/agent/canvas/node/begin-node.tsx index 83e36652b..3f461a69f 100644 --- a/web/src/pages/agent/canvas/node/begin-node.tsx +++ b/web/src/pages/agent/canvas/node/begin-node.tsx @@ -4,6 +4,7 @@ import { Handle, NodeProps, Position } from '@xyflow/react'; import { Flex } from 'antd'; import classNames from 'classnames'; import get from 'lodash/get'; +import { memo } from 'react'; import { useTranslation } from 'react-i18next'; import { BeginQueryType, @@ -17,7 +18,7 @@ import { RightHandleStyle } from './handle-icon'; import styles from './index.less'; // TODO: do not allow other nodes to connect to this node -export function BeginNode({ selected, data }: NodeProps) { +function Node({ selected, data }: NodeProps) { const { t } = useTranslation(); const query: BeginQuery[] = get(data, 'form.query', []); const { theme } = useTheme(); @@ -70,3 +71,5 @@ export function BeginNode({ selected, data }: NodeProps) { ); } + +export const BeginNode = memo(Node); diff --git a/web/src/pages/agent/constant.tsx b/web/src/pages/agent/constant.tsx index e99d118fb..8c1f30a27 100644 --- a/web/src/pages/agent/constant.tsx +++ b/web/src/pages/agent/constant.tsx @@ -38,6 +38,7 @@ import { ChatVariableEnabledField, variableEnabledFieldMap, } from '@/constants/chat'; +import { ModelVariableType } from '@/constants/knowledge'; import i18n from '@/locales/config'; import { setInitialChatVariableEnabledFieldValue } from '@/utils/chat'; @@ -477,6 +478,7 @@ export const initialRelevantValues = { export const initialCategorizeValues = { ...initialLlmBaseValues, + parameter: ModelVariableType.Precise, message_history_window_size: 1, category_description: {}, ...initialQueryBaseValues, diff --git a/web/src/pages/agent/form-sheet/next.tsx b/web/src/pages/agent/form-sheet/next.tsx index 2bd9ca122..df390fdf3 100644 --- a/web/src/pages/agent/form-sheet/next.tsx +++ b/web/src/pages/agent/form-sheet/next.tsx @@ -74,7 +74,7 @@ const FormSheet = ({ ); useEffect(() => { - if (visible && !form.formState.isDirty) { + if (visible) { if (node?.id !== previousId.current) { form.reset(); form.clearErrors(); diff --git a/web/src/pages/agent/form-sheet/use-form-config-map.tsx b/web/src/pages/agent/form-sheet/use-form-config-map.tsx index 5d075e393..134361e76 100644 --- a/web/src/pages/agent/form-sheet/use-form-config-map.tsx +++ b/web/src/pages/agent/form-sheet/use-form-config-map.tsx @@ -1,5 +1,6 @@ import { LlmSettingSchema } from '@/components/llm-setting-items/next'; import { CodeTemplateStrMap, ProgrammingLanguage } from '@/constants/agent'; +import { ModelVariableType } from '@/constants/knowledge'; import { useTranslation } from 'react-i18next'; import { z } from 'zod'; import { AgentDialogueMode, Operator } from '../constant'; @@ -115,8 +116,17 @@ export function useFormConfigMap() { }, [Operator.Categorize]: { component: CategorizeForm, - defaultValues: { message_history_window_size: 1 }, + defaultValues: { + parameter: ModelVariableType.Precise, + message_history_window_size: 1, + temperatureEnabled: true, + topPEnabled: true, + presencePenaltyEnabled: true, + frequencyPenaltyEnabled: true, + maxTokensEnabled: true, + }, schema: z.object({ + parameter: z.string().optional(), ...LlmSettingSchema, message_history_window_size: z.number(), items: z.array( diff --git a/web/src/pages/agent/hooks/use-watch-form-change.ts b/web/src/pages/agent/hooks/use-watch-form-change.ts index 3d83ccf46..058e57064 100644 --- a/web/src/pages/agent/hooks/use-watch-form-change.ts +++ b/web/src/pages/agent/hooks/use-watch-form-change.ts @@ -2,7 +2,7 @@ import { CodeTemplateStrMap, ProgrammingLanguage } from '@/constants/agent'; import { settledModelVariableMap } from '@/constants/knowledge'; import { omit } from 'lodash'; import { useCallback, useEffect } from 'react'; -import { UseFormReturn } from 'react-hook-form'; +import { UseFormReturn, useWatch } from 'react-hook-form'; import { Operator } from '../constant'; import useGraphStore from '../store'; import { buildCategorizeObjectFromList, convertToStringArray } from '../utils'; @@ -37,16 +37,24 @@ export const useHandleFormValuesChange = ( [updateNodeForm, id], ); + const value = useWatch({ control: form?.control }); + + console.log('🚀 ~ x:', value); + + useEffect(() => { + // Manually triggered form updates are synchronized to the canvas + if (id && form?.formState.isDirty) { + console.log('🚀 ~ useEffect ~ value:', value, operatorName); + // run(id, nextValues); + updateNodeForm(id, value); + } + }, [form?.formState.isDirty, id, operatorName, updateNodeForm, value]); + + return { handleValuesChange }; + useEffect(() => { const subscription = form?.watch((value, { name, type, values }) => { if (id && name) { - console.log( - '🚀 ~ useEffect ~ value:', - name, - type, - values, - operatorName, - ); let nextValues: any = value; // Fixed the issue that the related form value does not change after selecting the freedom field of the model @@ -93,6 +101,13 @@ export const useHandleFormValuesChange = ( // Manually triggered form updates are synchronized to the canvas if (form.formState.isDirty) { + console.log( + '🚀 ~ useEffect ~ value:', + name, + type, + values, + operatorName, + ); // run(id, nextValues); updateNodeForm(id, nextValues); }