Skip to content

赵月辉 / fastgpt-migrated

Go to a project
Commit 6a4eada8 by heheer Committed by archer
Options

fix variable sync & popover button height (#4227) 

* fix variable sync & popover button height

* required
parent 652ec45b
Showing with 44 additions and 39 deletions
projects/app/src/components/core/chat/ChatContainer/ChatBox/components/VariableInput.tsx
...@@ -29,7 +29,11 @@ export const VariableInputItem = ({ ...@@ -29,7 +29,11 @@ export const VariableInputItem = ({
item: VariableItemType; item: VariableItemType;
variablesForm: UseFormReturn<any>; variablesForm: UseFormReturn<any>;
}) => { }) => {
const { register, control, setValue } = variablesForm; const {
control,
setValue,
formState: { errors }
} = variablesForm;
return ( return (
<Box key={item.id} mb={4} pl={1}> <Box key={item.id} mb={4} pl={1}>
...@@ -49,37 +53,31 @@ export const VariableInputItem = ({ ...@@ -49,37 +53,31 @@ export const VariableInputItem = ({
)} )}
{item.description && <QuestionTip ml={1} label={item.description} />} {item.description && <QuestionTip ml={1} label={item.description} />}
</Box> </Box>
{item.type === VariableInputEnum.input && (
<Controller
key={`variables.${item.key}`}
control={control}
name={`variables.${item.key}`}
rules={{
required: item.required
}}
render={({ field: { onChange, value } }) => {
if (item.type === VariableInputEnum.input) {
return (
<MyTextarea <MyTextarea
autoHeight autoHeight
minH={40} minH={40}
maxH={160} maxH={160}
bg={'myGray.50'} bg={'myGray.50'}
{...register(`variables.${item.key}`, { value={value}
required: item.required isInvalid={errors?.variables && Object.keys(errors.variables).includes(item.key)}
})} onChange={onChange}
/>
)}
{item.type === VariableInputEnum.textarea && (
<Textarea
{...register(`variables.${item.key}`, {
required: item.required
})}
rows={5}
bg={'myGray.50'}
maxLength={item.maxLength || 4000}
/> />
)} );
{item.type === VariableInputEnum.select && ( }
<Controller if (item.type === VariableInputEnum.select) {
key={`variables.${item.key}`}
control={control}
name={`variables.${item.key}`}
rules={{ required: item.required }}
render={({ field: { ref, value } }) => {
return ( return (
<MySelect <MySelect
ref={ref}
width={'100%'} width={'100%'}
list={(item.enums || []).map((item: { value: any }) => ({ list={(item.enums || []).map((item: { value: any }) => ({
label: item.value, label: item.value,
...@@ -89,16 +87,9 @@ export const VariableInputItem = ({ ...@@ -89,16 +87,9 @@ export const VariableInputItem = ({
onChange={(e) => setValue(`variables.${item.key}`, e)} onChange={(e) => setValue(`variables.${item.key}`, e)}
/> />
); );
}} }
/> if (item.type === VariableInputEnum.numberInput) {
)} return (
{item.type === VariableInputEnum.numberInput && (
<Controller
key={`variables.${item.key}`}
control={control}
name={`variables.${item.key}`}
rules={{ required: item.required, min: item.min, max: item.max }}
render={({ field: { value, onChange } }) => (
<MyNumberInput <MyNumberInput
step={1} step={1}
min={item.min} min={item.min}
...@@ -106,10 +97,21 @@ export const VariableInputItem = ({ ...@@ -106,10 +97,21 @@ export const VariableInputItem = ({
bg={'white'} bg={'white'}
value={value} value={value}
onChange={onChange} onChange={onChange}
isInvalid={errors?.variables && Object.keys(errors.variables).includes(item.key)}
/> />
)} );
}
return (
<Textarea
value={value}
onChange={onChange}
rows={5}
bg={'myGray.50'}
maxLength={item.maxLength || 4000}
/>
);
}}
/> />
)}
</Box> </Box>
); );
}; };
...@@ -124,7 +126,7 @@ export const ExternalVariableInputItem = ({ ...@@ -124,7 +126,7 @@ export const ExternalVariableInputItem = ({
showTag?: boolean; showTag?: boolean;
}) => { }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const { register, control } = variablesForm; const { control } = variablesForm;
const Label = useMemo(() => { const Label = useMemo(() => {
return ( return (
...@@ -154,6 +156,7 @@ export const ExternalVariableInputItem = ({ ...@@ -154,6 +156,7 @@ export const ExternalVariableInputItem = ({
<Box key={item.id} mb={4} pl={1}> <Box key={item.id} mb={4} pl={1}>
{Label} {Label}
<Controller <Controller
key={`variables.${item.key}`}
control={control} control={control}
name={`variables.${item.key}`} name={`variables.${item.key}`}
render={({ field: { onChange, value } }) => { render={({ field: { onChange, value } }) => {
...@@ -164,7 +167,8 @@ export const ExternalVariableInputItem = ({ ...@@ -164,7 +167,8 @@ export const ExternalVariableInputItem = ({
minH={40} minH={40}
maxH={160} maxH={160}
bg={'myGray.50'} bg={'myGray.50'}
{...register(`variables.${item.key}`)} value={value}
onChange={onChange}
/> />
); );
} }
...@@ -283,6 +287,7 @@ const VariableInput = ({ ...@@ -283,6 +287,7 @@ const VariableInput = ({
size={'sm'} size={'sm'}
maxW={'100px'} maxW={'100px'}
onClick={handleSubmitChat(() => { onClick={handleSubmitChat(() => {
console.log('start chat');
chatForm.setValue('chatStarted', true); chatForm.setValue('chatStarted', true);
})} })}
> >
......
projects/app/src/components/core/chat/ChatContainer/ChatBox/components/VariablePopover.tsx
...@@ -45,7 +45,7 @@ const VariablePopover = ({ ...@@ -45,7 +45,7 @@ const VariablePopover = ({
trigger={'click'} trigger={'click'}
closeOnBlur={true} closeOnBlur={true}
Trigger={ Trigger={
<Button variant={'whiteBase'} leftIcon={<MyIcon name={'edit'} w={4} />}> <Button variant={'whiteBase'} size={'sm'} leftIcon={<MyIcon name={'edit'} w={4} />}>
{t('common:core.module.Variable')} {t('common:core.module.Variable')}
</Button> </Button>
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment