From 6a4eada85b9455d3725f465332d15d671d0177f3 Mon Sep 17 00:00:00 2001
From: heheer <heheer@sealos.io>
Date: Wed, 19 Mar 2025 21:42:29 +0800
Subject: [PATCH] fix variable sync & popover button height (#4227)

* fix variable sync & popover button height

* required
---
 .../ChatBox/components/VariableInput.tsx      | 105 +++++++++---------
 .../ChatBox/components/VariablePopover.tsx    |   2 +-
 2 files changed, 56 insertions(+), 51 deletions(-)

diff --git a/projects/app/src/components/core/chat/ChatContainer/ChatBox/components/VariableInput.tsx b/projects/app/src/components/core/chat/ChatContainer/ChatBox/components/VariableInput.tsx
index 7d52fc992..b8effaacc 100644
--- a/projects/app/src/components/core/chat/ChatContainer/ChatBox/components/VariableInput.tsx
+++ b/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
-          autoHeight
-          minH={40}
-          maxH={160}
-          bg={'myGray.50'}
-          {...register(`variables.${item.key}`, {
-            required: item.required
-          })}
-        />
-      )}
-      {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
-          key={`variables.${item.key}`}
-          control={control}
-          name={`variables.${item.key}`}
-          rules={{ required: item.required }}
-          render={({ field: { ref, value } }) => {
+
+      <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
+                autoHeight
+                minH={40}
+                maxH={160}
+                bg={'myGray.50'}
+                value={value}
+                isInvalid={errors?.variables && Object.keys(errors.variables).includes(item.key)}
+                onChange={onChange}
+              />
+            );
+          }
+          if (item.type === VariableInputEnum.select) {
             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)}
               />
             );
-          }}
-        />
-      )}
-      {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
-              step={1}
-              min={item.min}
-              max={item.max}
-              bg={'white'}
+          }
+          if (item.type === VariableInputEnum.numberInput) {
+            return (
+              <MyNumberInput
+                step={1}
+                min={item.min}
+                max={item.max}
+                bg={'white'}
+                value={value}
+                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>
   );
 };
@@ -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);
                   })}
                 >
diff --git a/projects/app/src/components/core/chat/ChatContainer/ChatBox/components/VariablePopover.tsx b/projects/app/src/components/core/chat/ChatContainer/ChatBox/components/VariablePopover.tsx
index 2e54c5815..3c73a7890 100644
--- a/projects/app/src/components/core/chat/ChatContainer/ChatBox/components/VariablePopover.tsx
+++ b/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>
       }