From b9afb7bcecf1a12beef29aad6e4add816438a0e5 Mon Sep 17 00:00:00 2001
From: kurokobo <kuro664@gmail.com>
Date: Wed, 23 Oct 2024 16:47:50 +0900
Subject: [PATCH] fix: revert ref usage in handleFormChange to fix IME input
 issues (#9672)

Co-authored-by: StyleZhang <jasonapring2015@outlook.com>
---
 .../base/chat/chat-with-history/config-panel/form.tsx        | 5 +++--
 .../base/chat/embedded-chatbot/config-panel/form.tsx         | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/web/app/components/base/chat/chat-with-history/config-panel/form.tsx b/web/app/components/base/chat/chat-with-history/config-panel/form.tsx
index 2429de36fa..298d8ccd7f 100644
--- a/web/app/components/base/chat/chat-with-history/config-panel/form.tsx
+++ b/web/app/components/base/chat/chat-with-history/config-panel/form.tsx
@@ -1,3 +1,4 @@
+import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useChatWithHistoryContext } from '../context'
 import Input from './form-input'
@@ -15,12 +16,12 @@ const Form = () => {
     isMobile,
   } = useChatWithHistoryContext()
 
-  const handleFormChange = (variable: string, value: any) => {
+  const handleFormChange = useCallback((variable: string, value: any) => {
     handleNewConversationInputsChange({
       ...newConversationInputsRef.current,
       [variable]: value,
     })
-  }
+  }, [newConversationInputsRef, handleNewConversationInputsChange])
 
   const renderField = (form: any) => {
     const {
diff --git a/web/app/components/base/chat/embedded-chatbot/config-panel/form.tsx b/web/app/components/base/chat/embedded-chatbot/config-panel/form.tsx
index da26fdfa24..211907d48b 100644
--- a/web/app/components/base/chat/embedded-chatbot/config-panel/form.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/config-panel/form.tsx
@@ -1,3 +1,4 @@
+import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useEmbeddedChatbotContext } from '../context'
 import Input from './form-input'
@@ -15,12 +16,12 @@ const Form = () => {
     isMobile,
   } = useEmbeddedChatbotContext()
 
-  const handleFormChange = (variable: string, value: any) => {
+  const handleFormChange = useCallback((variable: string, value: any) => {
     handleNewConversationInputsChange({
       ...newConversationInputsRef.current,
       [variable]: value,
     })
-  }
+  }, [newConversationInputsRef, handleNewConversationInputsChange])
 
   const renderField = (form: any) => {
     const {