feat (#1858), Implement settings change listener.

backend/chainlit/__init__.py

@@ -82,6 +82,7 @@
     on_mcp_connect,
     on_mcp_disconnect,
     on_message,
+    on_settings_edit,
     on_settings_update,
     on_shared_thread_view,
     on_slack_reaction_added,
@@ -202,6 +203,7 @@ def acall(self):
     "on_mcp_connect",
     "on_mcp_disconnect",
     "on_message",
+    "on_settings_edit",
     "on_settings_update",
     "on_shared_thread_view",
     "on_slack_reaction_added",

backend/chainlit/callbacks.py

@@ -449,6 +449,23 @@ def on_settings_update(
     return func
 
 
+def on_settings_edit(
+    func: Callable[[Dict[str, Any]], Any],
+) -> Callable[[Dict[str, Any]], Any]:
+    """
+    Hook to react to the user editing any settings (on the fly).
+
+    Args:
+        func (Callable[], Any]): The hook to execute while settings are being edited.
+
+    Returns:
+        Callable[], Any]: The decorated hook.
+    """
+
+    config.code.on_settings_edit = wrap_user_function(func, with_task=True)
+    return func
+
+
 def data_layer(
     func: Callable[[], BaseDataLayer],
 ) -> Callable[[], BaseDataLayer]:

backend/chainlit/config.py

@@ -397,6 +397,7 @@ class CodeSettings(BaseModel):
     on_audio_end: Optional[Callable[[], Any]] = None
     on_mcp_connect: Optional[Callable] = None
     on_mcp_disconnect: Optional[Callable] = None
+    on_settings_edit: Optional[Callable[[Dict[str, Any]], Any]] = None
     on_settings_update: Optional[Callable[[Dict[str, Any]], Any]] = None
     set_chat_profiles: Optional[
         Callable[[Optional["User"], Optional["str"]], Awaitable[List["ChatProfile"]]]

backend/chainlit/socket.py

@@ -444,3 +444,12 @@ async def change_settings(sid, settings: Dict[str, Any]):
 
     if config.code.on_settings_update:
         await config.code.on_settings_update(settings)
+
+
+@sio.on("chat_settings_edit")
+async def edit_settings(sid, settings: Dict[str, Any]):
+    """Handle change settings edit from the UI (on the fly)."""
+    init_ws_context(sid)
+
+    if config.code.on_settings_edit:
+        await config.code.on_settings_edit(settings)

frontend/src/components/ChatSettings/index.tsx

@@ -1,5 +1,6 @@
+import isEqual from 'lodash/isEqual';
 import mapValues from 'lodash/mapValues';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { useForm } from 'react-hook-form';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 
@@ -29,7 +30,7 @@ export default function ChatSettingsModal() {
   const { chatSettingsValue, chatSettingsInputs, chatSettingsDefaultValue } =
     useChatData();
 
-  const { updateChatSettings } = useChatInteract();
+  const { updateChatSettings, editChatSettings } = useChatInteract();
   const [chatSettingsOpen, setChatSettingsOpen] = useRecoilState(
     chatSettingsOpenState
   );
@@ -72,6 +73,15 @@ export default function ChatSettingsModal() {
   };
 
   const values = watch();
+  const prevValues = useRef(values);
+
+  useEffect(() => {
+    if (!isEqual(values, prevValues.current)) {
+      editChatSettings(values);
+      prevValues.current = values;
+    }
+  }, [values, editChatSettings]);
+
   const tabInputs = chatSettingsInputs.filter(
     (input: any) => Array.isArray(input?.inputs) && input.inputs.length > 0
   );

libs/react-client/src/useChatInteract.ts

@@ -145,6 +145,13 @@ const useChatInteract = () => {
     [session?.socket]
   );
 
+  const editChatSettings = useCallback(
+    (values: object) => {
+      session?.socket.emit('chat_settings_edit', values);
+    },
+    [session?.socket]
+  );
+
   const stopTask = useCallback(() => {
     setMessages((oldMessages) =>
       oldMessages.map((m) => {
@@ -178,6 +185,7 @@ const useChatInteract = () => {
     stopTask,
     setIdToResume,
     updateChatSettings,
+    editChatSettings,
     toggleMessageFavorite
   };
 };