fix variable sync & popover button height (#4227)

* fix variable sync & popover button height

* required

projects/app/src/components/core/chat/ChatContainer/ChatBox/components/VariableInput.tsx

@@ -29,7 +29,11 @@ export const VariableInputItem = ({
   item: VariableItemType;
   variablesForm: UseFormReturn<any>;
 }) => {
-  const { register, control, setValue } = variablesForm;
+  const {
+    control,
+    setValue,
+    formState: { errors }
+  } = variablesForm;
 
   return (
     <Box key={item.id} mb={4} pl={1}>
@@ -49,37 +53,31 @@ export const VariableInputItem = ({
         )}
         {item.description && <QuestionTip ml={1} label={item.description} />}
       </Box>
-      {item.type === VariableInputEnum.input && (
+
-        <MyTextarea
+      <Controller
-          autoHeight
+        key={`variables.${item.key}`}
-          minH={40}
+        control={control}
-          maxH={160}
+        name={`variables.${item.key}`}
-          bg={'myGray.50'}
+        rules={{
-          {...register(`variables.${item.key}`, {
+          required: item.required
-            required: item.required
+        }}
-          })}
+        render={({ field: { onChange, value } }) => {
-        />
+          if (item.type === VariableInputEnum.input) {
-      )}
+            return (
-      {item.type === VariableInputEnum.textarea && (
+              <MyTextarea
-        <Textarea
+                autoHeight
-          {...register(`variables.${item.key}`, {
+                minH={40}
-            required: item.required
+                maxH={160}
-          })}
+                bg={'myGray.50'}
-          rows={5}
+                value={value}
-          bg={'myGray.50'}
+                isInvalid={errors?.variables && Object.keys(errors.variables).includes(item.key)}
-          maxLength={item.maxLength || 4000}
+                onChange={onChange}
-        />
+              />
-      )}
+            );
-      {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 (
               <MySelect
-                ref={ref}
                 width={'100%'}
                 list={(item.enums || []).map((item: { value: any }) => ({
                   label: item.value,
@@ -89,27 +87,31 @@ export const VariableInputItem = ({
                 onChange={(e) => setValue(`variables.${item.key}`, e)}
               />
             );
-          }}
+          }
-        />
+          if (item.type === VariableInputEnum.numberInput) {
-      )}
+            return (
-      {item.type === VariableInputEnum.numberInput && (
+              <MyNumberInput
-        <Controller
+                step={1}
-          key={`variables.${item.key}`}
+                min={item.min}
-          control={control}
+                max={item.max}
-          name={`variables.${item.key}`}
+                bg={'white'}
-          rules={{ required: item.required, min: item.min, max: item.max }}
+                value={value}
-          render={({ field: { value, onChange } }) => (
+                onChange={onChange}
-            <MyNumberInput
+                isInvalid={errors?.variables && Object.keys(errors.variables).includes(item.key)}
-              step={1}
+              />
-              min={item.min}
+            );
-              max={item.max}
+          }
-              bg={'white'}
+          return (
+            <Textarea
               value={value}
               onChange={onChange}
+              rows={5}
+              bg={'myGray.50'}
+              maxLength={item.maxLength || 4000}
             />
-          )}
+          );
-        />
+        }}
-      )}
+      />
     </Box>
   );
 };
@@ -124,7 +126,7 @@ export const ExternalVariableInputItem = ({
   showTag?: boolean;
 }) => {
   const { t } = useTranslation();
-  const { register, control } = variablesForm;
+  const { control } = variablesForm;
 
   const Label = useMemo(() => {
     return (
@@ -154,6 +156,7 @@ export const ExternalVariableInputItem = ({
     <Box key={item.id} mb={4} pl={1}>
       {Label}
       <Controller
+        key={`variables.${item.key}`}
         control={control}
         name={`variables.${item.key}`}
         render={({ field: { onChange, value } }) => {
@@ -164,7 +167,8 @@ export const ExternalVariableInputItem = ({
                 minH={40}
                 maxH={160}
                 bg={'myGray.50'}
-                {...register(`variables.${item.key}`)}
+                value={value}
+                onChange={onChange}
               />
             );
           }
@@ -283,6 +287,7 @@ const VariableInput = ({
                   size={'sm'}
                   maxW={'100px'}
                   onClick={handleSubmitChat(() => {
+                    console.log('start chat');
                     chatForm.setValue('chatStarted', true);
                   })}
                 >

projects/app/src/components/core/chat/ChatContainer/ChatBox/components/VariablePopover.tsx

@@ -45,7 +45,7 @@ const VariablePopover = ({
       trigger={'click'}
       closeOnBlur={true}
       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')}
         </Button>
       }