🐛 fix: fix assistant meta change race issue (#3184)

lobehub · Jul 10, 2024 · 6335be4 · 6335be4
1 parent 6e6ad3e
commit 6335be4
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 5 deletions.
diff --git a/src/features/AgentSetting/AgentMeta/AutoGenerateInput.tsx b/src/features/AgentSetting/AgentMeta/AutoGenerateInput.tsx
@@ -2,20 +2,35 @@ import { ActionIcon } from '@lobehub/ui';
 import { Input, InputProps } from 'antd';
 import { useTheme } from 'antd-style';
 import { Wand2 } from 'lucide-react';
-import { memo } from 'react';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-export interface AutoGenerateInputProps extends InputProps {
+export interface AutoGenerateInputProps extends Omit<InputProps, 'onChange'> {
   canAutoGenerate?: boolean;
   loading?: boolean;
+  onChange?: (value: string) => void;
   onGenerate?: () => void;
+  value?: string | any;
 }
 
 const AutoGenerateInput = memo<AutoGenerateInputProps>(
-  ({ loading, onGenerate, canAutoGenerate, ...props }) => {
+  ({ loading, value, onChange, onGenerate, canAutoGenerate, ...props }) => {
     const { t } = useTranslation('common');
     const theme = useTheme();
 
+    const [input, setInput] = useState<string>(value || '');
+
+    const isChineseInput = useRef(false);
+    const isFocusing = useRef(false);
+
+    const updateValue = useCallback(() => {
+      onChange?.(input);
+    }, [input]);
+
+    useEffect(() => {
+      if (value !== undefined) setInput(value);
+    }, [value]);
+
     return (
       <Input
         suffix={
@@ -37,6 +52,29 @@ const AutoGenerateInput = memo<AutoGenerateInputProps>(
         }
         type="block"
         {...props}
+        onBlur={() => {
+          isFocusing.current = false;
+        }}
+        onChange={(e) => {
+          setInput(e.target.value);
+        }}
+        onCompositionEnd={() => {
+          isChineseInput.current = false;
+        }}
+        onCompositionStart={() => {
+          isChineseInput.current = true;
+        }}
+        onFocus={() => {
+          isFocusing.current = true;
+        }}
+        onPressEnter={(e) => {
+          if (!e.shiftKey && !isChineseInput.current) {
+            e.preventDefault();
+            updateValue();
+            isFocusing.current = false;
+          }
+        }}
+        value={input}
       />
     );
   },

diff --git a/src/features/AgentSetting/AgentMeta/index.tsx b/src/features/AgentSetting/AgentMeta/index.tsx
@@ -34,14 +34,14 @@ const AgentMeta = memo(() => {
       Render: AutoGenerateInput,
       key: 'title',
       label: t('settingAgent.name.title'),
-      onChange: (e: any) => updateMeta({ title: e.target.value }),
+      onChange: (value: string) => updateMeta({ title: value }),
       placeholder: t('settingAgent.name.placeholder'),
     },
     {
       Render: AutoGenerateInput,
       key: 'description',
       label: t('settingAgent.description.title'),
-      onChange: (e: any) => updateMeta({ description: e.target.value }),
+      onChange: (value: string) => updateMeta({ description: value }),
       placeholder: t('settingAgent.description.placeholder'),
     },
     {