feat: persistent user settings v2 (#799)

Author: dazy-ds

package-lock.json

@@ -1,6 +1,7 @@
 # CHANGELOG
 
 ## Unreleased
+- Improve user settings storage when history is disabled (#799)
 - Remove redundant test for `/api/config` endpoint (#795)
 - Fix bug causing infinite initialization screen (#793)
 - Fix bug that caused messages to be sent when changing chat settings; simplify and harden history logic (#791)

packages/ragbits-chat/CHANGELOG.md

@@ -184,6 +184,10 @@ describe("Integration tests", () => {
         const submitButton = await screen.findByText("Save");
         await user.click(submitButton);
 
+        await waitFor(async () => {
+          expect(await screen.queryByRole("dialog")).not.toBeInTheDocument();
+        });
+
         const input = await screen.findByRole("textbox");
         fireEvent.change(input, { target: { value: "Test message 3" } });
 

typescript/ui/__tests__/integration/intergation.test.tsx

@@ -38,6 +38,7 @@
     "react-markdown": "^9.0.3",
     "react-router": "^7.7.1",
     "remark-gfm": "^4.0.0",
+    "usehooks-ts": "^3.1.1",
     "uuid": "^11.1.0",
     "zod": "^3.24.2",
     "zustand": "^5.0.6"

typescript/ui/package.json

@@ -5,4 +5,4 @@ export { default as SelectWidget } from "./components/SelectWidget";
 export { default as FieldTemplate } from "./components/FieldTemplate";
 
 // Shared form utilities
-export { useTransformErrors } from "./utils";
+export { transformErrors } from "./utils";

typescript/ui/src/core/forms/index.ts

@@ -1,16 +1,13 @@
-import { useCallback } from "react";
 import { RJSFValidationError } from "@rjsf/utils";
 
 /**
  * Shared error transformation function for form validation
  */
-export const useTransformErrors = () => {
-  return useCallback((errors: RJSFValidationError[]) => {
-    return errors.map((error) => {
-      if (error.name === "minLength" || error.name === "required") {
-        return { ...error, message: "Field must not be empty" };
-      }
-      return error;
-    });
-  }, []);
+export const transformErrors = (errors: RJSFValidationError[]) => {
+  return errors.map((error) => {
+    if (error.name === "minLength" || error.name === "required") {
+      return { ...error, message: "Field must not be empty" };
+    }
+    return error;
+  });
 };

typescript/ui/src/core/forms/utils.ts

@@ -9,34 +9,56 @@ import {
 import { Icon } from "@iconify/react";
 import DelayedTooltip from "../../../core/components/DelayedTooltip";
 import { useConfigContext } from "../../../core/contexts/ConfigContext/useConfigContext";
-import { FormTheme, useTransformErrors } from "../../../core/forms";
+import { FormTheme, transformErrors } from "../../../core/forms";
 import validator from "@rjsf/validator-ajv8";
 import { IChangeEvent } from "@rjsf/core";
-import { useEffect } from "react";
+import { FormEvent, useEffect, useRef } from "react";
 import { getDefaultBasedOnSchemaType } from "@rjsf/utils/lib/schema/getDefaultFormState";
 import {
   useConversationProperty,
   useHistoryActions,
 } from "../../../core/stores/HistoryStore/selectors";
 import { useHistoryStore } from "../../../core/stores/HistoryStore/useHistoryStore";
+import { useLocalStorage } from "usehooks-ts";
+import { pluginManager } from "../../../core/utils/plugins/PluginManager";
+import { ChatHistoryPlugin } from "../../ChatHistoryPlugin";
+import { AnimationDefinition } from "framer-motion";
+
+const CHAT_OPTIONS_KEY = "ragbits-no-history-chat-options";
 
 export default function ChatOptionsForm() {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const chatOptions = useConversationProperty((s) => s.chatOptions);
+  // Needed to solve flicker to default settings when the modal is closing
+  const pendingSettingsRef = useRef<Record<string, unknown> | null>(null);
   const { setChatOptions, initializeChatOptions } = useHistoryActions();
   const currentConversation = useHistoryStore((s) => s.currentConversation);
   const {
     config: { user_settings: userSettings },
   } = useConfigContext();
+  const [savedSettings, setSettings] = useLocalStorage<Record<
+    string,
+    unknown
+  > | null>(CHAT_OPTIONS_KEY, null);
 
   const schema = userSettings?.form;
 
-  const onOpenChange = () => {
-    onClose();
+  const ensureSyncWithStorage = (data: Record<string, unknown>) => {
+    // Sync to localStorage only when history is disabled
+    if (pluginManager.isPluginActivated(ChatHistoryPlugin.name)) {
+      return;
+    }
+
+    setSettings(data);
+  };
+
+  const onModalOpen = () => {
+    onOpen();
   };
 
-  const handleFormSubmit = (data: IChangeEvent) => {
-    setChatOptions(data.formData);
+  const handleFormSubmit = (data: IChangeEvent, event: FormEvent) => {
+    event.preventDefault();
+    pendingSettingsRef.current = data.formData;
     onClose();
   };
 
@@ -46,20 +68,49 @@ export default function ChatOptionsForm() {
     }
 
     const defaultState = getDefaultBasedOnSchemaType(validator, schema);
-    setChatOptions(defaultState);
+    pendingSettingsRef.current = defaultState;
     onClose();
   };
 
-  const transformErrors = useTransformErrors();
+  const onOpenChange = () => {
+    onClose();
+  };
+
+  const onAnimationComplete = (definition: AnimationDefinition) => {
+    if (definition !== "exit" || !pendingSettingsRef.current) {
+      return;
+    }
+
+    const settings = pendingSettingsRef.current;
+    setChatOptions(settings);
+    ensureSyncWithStorage(settings);
+    pendingSettingsRef.current = null;
+  };
 
   useEffect(() => {
     if (!schema) {
       return;
     }
 
     const defaultState = getDefaultBasedOnSchemaType(validator, schema);
-    initializeChatOptions(defaultState);
-  }, [initializeChatOptions, schema, currentConversation]);
+    // When history is active, use default state for new conversations
+    if (pluginManager.isPluginActivated(ChatHistoryPlugin.name)) {
+      initializeChatOptions(defaultState);
+      // Otherwise if we have saved settings, use them
+    } else if (savedSettings !== null) {
+      initializeChatOptions(savedSettings);
+      // Otherwise just use defaults
+    } else {
+      initializeChatOptions(defaultState);
+      setSettings(defaultState);
+    }
+  }, [
+    initializeChatOptions,
+    schema,
+    currentConversation,
+    savedSettings,
+    setSettings,
+  ]);
 
   if (!schema) {
     return null;
@@ -73,62 +124,64 @@ export default function ChatOptionsForm() {
           variant="ghost"
           className="p-0"
           aria-label="Open chat options"
-          onPress={onOpen}
+          onPress={onModalOpen}
           data-testid="open-chat-options"
         >
           <Icon icon="heroicons:cog-6-tooth" />
         </Button>
       </DelayedTooltip>
 
-      <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <Modal
+        isOpen={isOpen}
+        onOpenChange={onOpenChange}
+        motionProps={{
+          onAnimationComplete,
+        }}
+      >
         <ModalContent>
-          {(onClose) => (
-            <>
-              <ModalHeader className="text-default-900 flex flex-col gap-1">
-                {schema.title || "Chat Options"}
-              </ModalHeader>
-              <ModalBody>
-                <div className="flex flex-col gap-4">
-                  <FormTheme
-                    schema={schema}
-                    validator={validator}
-                    formData={chatOptions}
-                    onSubmit={handleFormSubmit}
-                    transformErrors={transformErrors}
-                    liveValidate
+          <ModalHeader className="text-default-900 flex flex-col gap-1">
+            {schema.title || "Chat Options"}
+          </ModalHeader>
+          <ModalBody>
+            <div className="flex flex-col gap-4">
+              <FormTheme
+                schema={schema}
+                validator={validator}
+                formData={chatOptions}
+                onSubmit={handleFormSubmit}
+                transformErrors={transformErrors}
+                liveValidate
+              >
+                <div className="flex justify-end gap-4 py-4">
+                  <Button
+                    className="mr-auto"
+                    color="primary"
+                    variant="light"
+                    onPress={onRestoreDefaults}
+                    aria-label="Restore default user settings"
+                  >
+                    Restore defaults
+                  </Button>
+                  <Button
+                    color="danger"
+                    variant="light"
+                    onPress={onClose}
+                    aria-label="Close chat options form"
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    color="primary"
+                    type="submit"
+                    aria-label="Save chat options"
+                    data-testid="chat-options-submit"
                   >
-                    <div className="flex justify-end gap-4 py-4">
-                      <Button
-                        className="mr-auto"
-                        color="primary"
-                        variant="light"
-                        onPress={onRestoreDefaults}
-                        aria-label="Restore default user settings"
-                      >
-                        Restore defaults
-                      </Button>
-                      <Button
-                        color="danger"
-                        variant="light"
-                        onPress={onClose}
-                        aria-label="Close chat options form"
-                      >
-                        Cancel
-                      </Button>
-                      <Button
-                        color="primary"
-                        type="submit"
-                        aria-label="Save chat options"
-                        data-testid="chat-options-submit"
-                      >
-                        Save
-                      </Button>
-                    </div>
-                  </FormTheme>
+                    Save
+                  </Button>
                 </div>
-              </ModalBody>
-            </>
-          )}
+              </FormTheme>
+            </div>
+          </ModalBody>
         </ModalContent>
       </Modal>
     </>

typescript/ui/src/plugins/ChatOptionsPlugin/components/ChatOptionsForm.tsx

@@ -11,7 +11,7 @@ import { FeedbackType } from "@ragbits/api-client-react";
 import { Icon } from "@iconify/react";
 import DelayedTooltip from "../../../core/components/DelayedTooltip";
 import { useConfigContext } from "../../../core/contexts/ConfigContext/useConfigContext";
-import { FormTheme, useTransformErrors } from "../../../core/forms";
+import { FormTheme, transformErrors } from "../../../core/forms";
 import validator from "@rjsf/validator-ajv8";
 import { IChangeEvent } from "@rjsf/core";
 import { ChatMessage } from "../../../types/history";
@@ -82,8 +82,6 @@ export default function FeedbackForm({ message }: FeedbackFormProps) {
     onOpen();
   };
 
-  const transformErrors = useTransformErrors();
-
   if (!schema) {
     return null;
   }