From 1845daf41ff10ac510bb8815cdf8dd7cd77f958a Mon Sep 17 00:00:00 2001 From: chanx <1243304602@qq.com> Date: Fri, 21 Nov 2025 14:32:50 +0800 Subject: [PATCH] Fix: UI adjustments, replacing private components with public components (#11438) ### What problem does this PR solve? Fix: UI adjustments, replacing private components with public components - UI adjustments for public components (input, multiselect, SliderInputFormField) - Replacing the private LlmSettingFieldItems component in search with the public LlmSettingFieldItems component ### Type of change - [x] Bug Fix (non-breaking change which fixes an issue) --- web/src/components/llm-setting-items/next.tsx | 170 +++++++++---- .../components/llm-setting-items/slider.tsx | 7 +- web/src/components/originui/input.tsx | 6 +- .../raptor-form-fields.tsx | 10 +- .../components/similarity-slider/index.tsx | 6 +- .../components/slider-input-form-field.tsx | 5 +- web/src/components/ui/command.tsx | 2 +- web/src/components/ui/divider.tsx | 2 +- web/src/components/ui/input.tsx | 82 ++++-- web/src/components/ui/multi-select.tsx | 42 ++-- .../search-setting-aisummery-config.tsx | 236 ------------------ web/src/pages/next-search/search-setting.tsx | 25 +- 12 files changed, 252 insertions(+), 341 deletions(-) delete mode 100644 web/src/pages/next-search/search-setting-aisummery-config.tsx diff --git a/web/src/components/llm-setting-items/next.tsx b/web/src/components/llm-setting-items/next.tsx index 8d21bf9a8..3ab762201 100644 --- a/web/src/components/llm-setting-items/next.tsx +++ b/web/src/components/llm-setting-items/next.tsx @@ -1,6 +1,9 @@ -import { ModelVariableType } from '@/constants/knowledge'; +import { + ModelVariableType, + settledModelVariableMap, +} from '@/constants/knowledge'; import { useTranslate } from '@/hooks/common-hooks'; -import { camelCase } from 'lodash'; +import { camelCase, isEqual } from 'lodash'; import { useCallback } from 'react'; import { useFormContext } from 'react-hook-form'; import { z } from 'zod'; @@ -25,6 +28,13 @@ import { useHandleFreedomChange } from './use-watch-change'; interface LlmSettingFieldItemsProps { prefix?: string; options?: any[]; + showFields?: Array< + | 'temperature' + | 'top_p' + | 'presence_penalty' + | 'frequency_penalty' + | 'max_tokens' + >; } export const LLMIdFormField = { @@ -56,6 +66,13 @@ export const LlmSettingSchema = { export function LlmSettingFieldItems({ prefix, options, + showFields = [ + 'temperature', + 'top_p', + 'presence_penalty', + 'frequency_penalty', + 'max_tokens', + ], }: LlmSettingFieldItemsProps) { const form = useFormContext(); const { t } = useTranslate('chat'); @@ -72,14 +89,53 @@ export function LlmSettingFieldItems({ const parameterOptions = Object.values(ModelVariableType).map((x) => ({ label: t(camelCase(x)), value: x, - })); + })) as { label: string; value: ModelVariableType | 'Custom' }[]; + + parameterOptions.push({ + label: t(camelCase('Custom')), + value: 'Custom', + }); + const checkParameterIsEqual = () => { + const [ + parameter, + topPValue, + frequencyPenaltyValue, + temperatureValue, + presencePenaltyValue, + maxTokensValue, + ] = form.getValues([ + getFieldWithPrefix('parameter'), + getFieldWithPrefix('temperature'), + getFieldWithPrefix('top_p'), + getFieldWithPrefix('frequency_penalty'), + getFieldWithPrefix('presence_penalty'), + getFieldWithPrefix('max_tokens'), + ]); + if (parameter && parameter !== 'Custom') { + const parameterValue = + settledModelVariableMap[parameter as keyof typeof ModelVariableType]; + const parameterRealValue = { + top_p: topPValue, + temperature: temperatureValue, + frequency_penalty: frequencyPenaltyValue, + presence_penalty: presencePenaltyValue, + max_tokens: maxTokensValue, + }; + if (!isEqual(parameterValue, parameterRealValue)) { + form.setValue(getFieldWithPrefix('parameter'), 'Custom'); + } + } + }; return (
- + ( {t('freedom')} @@ -107,45 +163,71 @@ export function LlmSettingFieldItems({ )} /> - - - - - + {showFields.some((item) => item === 'temperature') && ( + { + checkParameterIsEqual(); + }} + > + )} + {showFields.some((item) => item === 'top_p') && ( + { + checkParameterIsEqual(); + }} + > + )} + {showFields.some((item) => item === 'presence_penalty') && ( + { + checkParameterIsEqual(); + }} + > + )} + {showFields.some((item) => item === 'frequency_penalty') && ( + { + checkParameterIsEqual(); + }} + > + )} + {showFields.some((item) => item === 'max_tokens') && ( + { + checkParameterIsEqual(); + }} + > + )}
); } diff --git a/web/src/components/llm-setting-items/slider.tsx b/web/src/components/llm-setting-items/slider.tsx index 482b80578..5c52d29e8 100644 --- a/web/src/components/llm-setting-items/slider.tsx +++ b/web/src/components/llm-setting-items/slider.tsx @@ -22,6 +22,7 @@ type SliderInputSwitchFormFieldProps = { onChange?: (value: number) => void; className?: string; checkName: string; + numberInputClassName?: string; }; export function SliderInputSwitchFormField({ @@ -34,6 +35,7 @@ export function SliderInputSwitchFormField({ onChange, className, checkName, + numberInputClassName, }: SliderInputSwitchFormFieldProps) { const form = useFormContext(); const disabled = !form.watch(checkName); @@ -81,7 +83,10 @@ export function SliderInputSwitchFormField({ +
+ +
} /> diff --git a/web/src/components/similarity-slider/index.tsx b/web/src/components/similarity-slider/index.tsx index 05a7f29ce..73666b504 100644 --- a/web/src/components/similarity-slider/index.tsx +++ b/web/src/components/similarity-slider/index.tsx @@ -59,6 +59,7 @@ interface SimilaritySliderFormFieldProps { similarityName?: string; vectorSimilarityWeightName?: string; isTooltipShown?: boolean; + numberInputClassName?: string; } export const initialSimilarityThresholdValue = { @@ -86,6 +87,7 @@ export function SimilaritySliderFormField({ similarityName = 'similarity_threshold', vectorSimilarityWeightName = 'vector_similarity_weight', isTooltipShown, + numberInputClassName, }: SimilaritySliderFormFieldProps) { const { t } = useTranslate('knowledgeDetails'); const form = useFormContext(); @@ -101,6 +103,7 @@ export function SimilaritySliderFormField({ step={0.01} layout={FormLayout.Vertical} tooltip={isTooltipShown && t('similarityThresholdTip')} + numberInputClassName={numberInputClassName} > -
+
@@ -158,6 +161,7 @@ export function SimilaritySliderFormField({ className={cn( 'h-6 w-10 p-0 text-center bg-bg-input border-border-default border text-text-secondary', '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none', + numberInputClassName, )} max={1} min={0} diff --git a/web/src/components/slider-input-form-field.tsx b/web/src/components/slider-input-form-field.tsx index 40b2c6804..0344c4eeb 100644 --- a/web/src/components/slider-input-form-field.tsx +++ b/web/src/components/slider-input-form-field.tsx @@ -25,6 +25,7 @@ type SliderInputFormFieldProps = { tooltip?: ReactNode; defaultValue?: number; className?: string; + numberInputClassName?: string; } & FormLayoutType; export function SliderInputFormField({ @@ -36,6 +37,7 @@ export function SliderInputFormField({ tooltip, defaultValue, className, + numberInputClassName, layout = FormLayout.Horizontal, }: SliderInputFormFieldProps) { const form = useFormContext(); @@ -61,7 +63,7 @@ export function SliderInputFormField({
= ({ direction = 'horizontal', type = 'horizontal', text, - color = 'border-muted-foreground/50', + color = 'border-border-button', margin = 'my-4', className = '', }) => { diff --git a/web/src/components/ui/input.tsx b/web/src/components/ui/input.tsx index 7eb1c0fe4..c8f0044bf 100644 --- a/web/src/components/ui/input.tsx +++ b/web/src/components/ui/input.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { cn } from '@/lib/utils'; import { Eye, EyeOff, Search } from 'lucide-react'; -import { useState } from 'react'; +import { useEffect, useMemo, useRef, useState } from 'react'; export interface InputProps extends Omit, 'prefix'> { @@ -17,6 +17,20 @@ const Input = React.forwardRef( const { defaultValue, ...restProps } = props; const inputValue = isControlled ? value : defaultValue; const [showPassword, setShowPassword] = useState(false); + const [prefixWidth, setPrefixWidth] = useState(0); + const [suffixWidth, setSuffixWidth] = useState(0); + + const prefixRef = useRef(null); + const suffixRef = useRef(null); + + useEffect(() => { + if (prefixRef.current) { + setPrefixWidth(prefixRef.current.offsetWidth); + } + if (suffixRef.current) { + setSuffixWidth(suffixRef.current.offsetWidth); + } + }, [prefix, suffix, prefixRef, suffixRef]); const handleChange: React.ChangeEventHandler = (e) => { if (type === 'number') { const numValue = e.target.value === '' ? '' : Number(e.target.value); @@ -34,42 +48,60 @@ const Input = React.forwardRef( const isPasswordInput = type === 'password'; - const inputEl = ( - + const inputEl = useMemo( + () => ( + + ), + [ + prefixWidth, + suffixWidth, + isPasswordInput, + inputValue, + className, + handleChange, + restProps, + ], ); if (prefix || suffix || isPasswordInput) { return (
{prefix && ( - + {prefix} )} {inputEl} {suffix && ( {selectedValues.length > 0 ? ( -
+
{selectedValues?.slice(0, maxCount)?.map((value) => { const option = flatOptions.find((o) => o.value === value); @@ -348,9 +348,9 @@ export const MultiSelect = React.forwardRef< )}
-
+
{ event.stopPropagation(); handleClear(); @@ -358,17 +358,17 @@ export const MultiSelect = React.forwardRef< /> - +
) : (
- + {placeholder} - +
)} @@ -379,14 +379,16 @@ export const MultiSelect = React.forwardRef< onEscapeKeyDown={() => setIsPopoverOpen(false)} > - + {options && options.length > 0 && ( + + )} No results found. - {showSelectAll && ( + {showSelectAll && options && options.length > 0 && ( )} - setIsPopoverOpen(false)} - className="flex-1 justify-center cursor-pointer max-w-full" - > - {t('common.close')} - + {options && options.length > 0 && ( + setIsPopoverOpen(false)} + className="flex-1 justify-center cursor-pointer max-w-full" + > + {t('common.close')} + + )}
diff --git a/web/src/pages/next-search/search-setting-aisummery-config.tsx b/web/src/pages/next-search/search-setting-aisummery-config.tsx deleted file mode 100644 index 8764c3014..000000000 --- a/web/src/pages/next-search/search-setting-aisummery-config.tsx +++ /dev/null @@ -1,236 +0,0 @@ -import { SliderInputSwitchFormField } from '@/components/llm-setting-items/slider'; -import { SelectWithSearch } from '@/components/originui/select-with-search'; -import { - FormControl, - FormField, - FormItem, - FormLabel, - FormMessage, -} from '@/components/ui/form'; -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from '@/components/ui/select'; -import { - LlmModelType, - ModelVariableType, - settledModelVariableMap, -} from '@/constants/knowledge'; -import { useTranslate } from '@/hooks/common-hooks'; -import { useComposeLlmOptionsByModelTypes } from '@/hooks/llm-hooks'; -import { camelCase, isEqual } from 'lodash'; -import { useCallback } from 'react'; -import { useFormContext } from 'react-hook-form'; -import { z } from 'zod'; - -interface LlmSettingFieldItemsProps { - prefix?: string; - options?: any[]; -} -const LlmSettingEnableSchema = { - temperatureEnabled: z.boolean(), - topPEnabled: z.boolean(), - presencePenaltyEnabled: z.boolean(), - frequencyPenaltyEnabled: z.boolean(), -}; -export const LlmSettingSchema = { - llm_id: z.string(), - parameter: z.string().optional(), - temperature: z.coerce.number().optional(), - top_p: z.coerce.number().optional(), - presence_penalty: z.coerce.number().optional(), - frequency_penalty: z.coerce.number().optional(), - ...LlmSettingEnableSchema, - // maxTokensEnabled: z.boolean(), -}; - -export function LlmSettingFieldItems({ - prefix, - options, -}: LlmSettingFieldItemsProps) { - const form = useFormContext(); - const { t } = useTranslate('chat'); - - const modelOptions = useComposeLlmOptionsByModelTypes([ - LlmModelType.Chat, - LlmModelType.Image2text, - ]); - - const handleChange = useCallback( - (parameter: string) => { - const values = - settledModelVariableMap[ - parameter as keyof typeof settledModelVariableMap - ]; - const enabledKeys = Object.keys(LlmSettingEnableSchema); - - for (const key in values) { - if (Object.prototype.hasOwnProperty.call(values, key)) { - const element = values[key as keyof typeof values]; - form.setValue(`${prefix}.${key}`, element); - } - } - if (enabledKeys && enabledKeys.length) { - for (const key of enabledKeys) { - form.setValue(`${prefix}.${key}`, true); - } - } - }, - [form, prefix], - ); - - const parameterOptions = Object.values(ModelVariableType).map((x) => ({ - label: t(camelCase(x)), - value: x, - })) as unknown as { label: string; value: ModelVariableType | 'Custom' }[]; - parameterOptions.push({ - label: t(camelCase('Custom')), - value: 'Custom', - }); - - const getFieldWithPrefix = useCallback( - (name: string) => { - return prefix ? `${prefix}.${name}` : name; - }, - [prefix], - ); - - const checkParameterIsEquel = () => { - const [ - parameter, - topPValue, - frequencyPenaltyValue, - temperatureValue, - presencePenaltyValue, - ] = form.getValues([ - getFieldWithPrefix('parameter'), - getFieldWithPrefix('temperature'), - getFieldWithPrefix('top_p'), - getFieldWithPrefix('frequency_penalty'), - getFieldWithPrefix('presence_penalty'), - ]); - if (parameter && parameter !== 'Custom') { - const parameterValue = - settledModelVariableMap[parameter as keyof typeof ModelVariableType]; - const parameterRealValue = { - top_p: topPValue, - temperature: temperatureValue, - frequency_penalty: frequencyPenaltyValue, - presence_penalty: presencePenaltyValue, - }; - if (!isEqual(parameterValue, parameterRealValue)) { - form.setValue(getFieldWithPrefix('parameter'), 'Custom'); - } - } - }; - - return ( -
- ( - - - * - {t('model')} - - - - - - - )} - /> - ( - - {t('freedom')} - -
- -
- - - - )} - /> - { - checkParameterIsEquel(); - }} - > - { - checkParameterIsEquel(); - }} - > - { - checkParameterIsEquel(); - }} - > - { - checkParameterIsEquel(); - }} - > - {/* */} -
- ); -} diff --git a/web/src/pages/next-search/search-setting.tsx b/web/src/pages/next-search/search-setting.tsx index 665d7e49b..365c366cb 100644 --- a/web/src/pages/next-search/search-setting.tsx +++ b/web/src/pages/next-search/search-setting.tsx @@ -1,6 +1,10 @@ // src/pages/next-search/search-setting.tsx import { AvatarUpload } from '@/components/avatar-upload'; +import { + LlmSettingFieldItems, + LlmSettingSchema, +} from '@/components/llm-setting-items/next'; import { MetadataFilter, MetadataFilterSchema, @@ -46,10 +50,10 @@ import { IllmSettingProps, useUpdateSearch, } from '../next-searches/hooks'; -import { - LlmSettingFieldItems, - LlmSettingSchema, -} from './search-setting-aisummery-config'; +// import { +// LlmSettingFieldItems, +// LlmSettingSchema, +// } from './search-setting-aisummery-config'; interface SearchSettingProps { open: boolean; @@ -397,6 +401,7 @@ const SearchSetting: React.FC = ({ isTooltipShown similarityName="search_config.similarity_threshold" vectorSimilarityWeightName="search_config.vector_similarity_weight" + numberInputClassName="rounded-sm" > {/* Rerank Model */} = ({ = ({ )} /> {aiSummaryDisabled && ( + // )} {/* Feature Controls */}