Input Formik + hidden screen (#3715)

web/src/app/admin/assistants/AssistantEditor.tsx

@@ -61,10 +61,10 @@ import { debounce } from "lodash";
 import { FullLLMProvider } from "../configuration/llm/interfaces";
 import StarterMessagesList from "./StarterMessageList";
 
-import { Switch } from "@/components/ui/switch";
+import { Switch, SwitchField } from "@/components/ui/switch";
 import { generateIdenticon } from "@/components/assistants/AssistantIcon";
 import { BackButton } from "@/components/BackButton";
-import { Checkbox } from "@/components/ui/checkbox";
+import { Checkbox, CheckboxField } from "@/components/ui/checkbox";
 import { AdvancedOptionsToggle } from "@/components/AdvancedOptionsToggle";
 import { MinimalUserSnapshot } from "@/lib/types";
 import { useUserGroups } from "@/lib/hooks";
@@ -144,8 +144,6 @@ export function AssistantEditor({
     "#6FFFFF",
   ];
 
-  const [showSearchTool, setShowSearchTool] = useState(false);
-
   const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
 
   // state to persist across formik reformatting
@@ -786,15 +784,9 @@ export function AssistantEditor({
                                           : ""
                                       }`}
                                     >
-                                      <Switch
+                                      <SwitchField
-                                        checked={
-                                          values.enabled_tools_map[
-                                            searchTool.id
-                                          ]
-                                        }
                                         size="sm"
                                         onCheckedChange={(checked) => {
-                                          setShowSearchTool(checked);
                                           setFieldValue("num_chunks", null);
                                           toggleToolInValues(searchTool.id);
                                         }}
@@ -828,7 +820,7 @@ export function AssistantEditor({
                   )}
                   {ccPairs.length > 0 &&
                     searchTool &&
-                    showSearchTool &&
+                    values.enabled_tools_map[searchTool.id] &&
                     !(user?.role != "admin" && documentSets.length === 0) && (
                       <CollapsibleSection>
                         <div className="mt-2">
@@ -916,14 +908,10 @@ export function AssistantEditor({
                           <TooltipProvider>
                             <Tooltip>
                               <TooltipTrigger>
-                                <Checkbox
+                                <CheckboxField
                                   size="sm"
                                   id={`enabled_tools_map.${imageGenerationTool.id}`}
-                                  checked={
+                                  name={`enabled_tools_map.${imageGenerationTool.id}`}
-                                    values.enabled_tools_map[
-                                      imageGenerationTool.id
-                                    ]
-                                  }
                                   onCheckedChange={() => {
                                     if (
                                       currentLLMSupportsImageOutput &&
@@ -979,6 +967,7 @@ export function AssistantEditor({
                             onCheckedChange={() => {
                               toggleToolInValues(internetSearchTool.id);
                             }}
+                            name={`enabled_tools_map.${internetSearchTool.id}`}
                           />
                           <div className="flex flex-col ml-2">
                             <span className="text-sm">
@@ -1071,9 +1060,9 @@ export function AssistantEditor({
 
                     <div className="min-h-[100px]">
                       <div className="flex items-center mb-2">
-                        <Switch
+                        <SwitchField
+                          name="is_public"
                           size="md"
-                          checked={values.is_public}
                           onCheckedChange={(checked) => {
                             setFieldValue("is_public", checked);
                             if (checked) {

web/src/app/chat/ChatPage.tsx

@@ -2063,6 +2063,7 @@ export function ChatPage({
       {retrievalEnabled && documentSidebarToggled && settings?.isMobile && (
         <div className="md:hidden">
           <Modal
+            hideDividerForTitle
             onOutsideClick={() => setDocumentSidebarToggled(false)}
             title="Sources"
           >
@@ -2346,9 +2347,10 @@ export function ChatPage({
                               (settings?.enterpriseSettings
                                 ?.two_lines_for_chat_header
                                 ? "pt-20 "
-                                : "pt-8") +
+                                : "pt-8 ")
-                              (hasPerformedInitialScroll ? "" : "invisible")
                             }
+                            // NOTE: temporarily removing this to fix the scroll bug
+                            // (hasPerformedInitialScroll ? "" : "invisible")
                           >
                             {(messageHistory.length < BUFFER_COUNT
                               ? messageHistory

web/src/components/Modal.tsx

@@ -22,6 +22,7 @@ interface ModalProps {
   noScroll?: boolean;
   heightOverride?: string;
   removeBottomPadding?: boolean;
+  removePadding?: boolean;
 }
 
 export function Modal({
@@ -39,6 +40,7 @@ export function Modal({
   noScroll,
   heightOverride,
   removeBottomPadding,
+  removePadding,
 }: ModalProps) {
   const modalRef = useRef<HTMLDivElement>(null);
   const [isMounted, setIsMounted] = useState(false);
@@ -114,7 +116,7 @@ export function Modal({
                   {icon && icon({ size: 30 })}
                 </h2>
               </div>
-              {!hideDividerForTitle && <Separator className="mb-0" />}
+              {!hideDividerForTitle && <Separator />}
             </>
           )}
         </div>

web/src/components/ui/checkbox.tsx

@@ -3,15 +3,19 @@
 import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Check } from "lucide-react";
+import { useField } from "formik";
 
 import { cn } from "@/lib/utils";
 
-const Checkbox = React.forwardRef<
+interface BaseCheckboxProps
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {
   size?: "sm" | "md" | "lg";
 }
->(({ className, size = "md", type = "button", ...props }, ref) => {
+
+export const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  BaseCheckboxProps
+>(({ className, size = "md", ...props }, ref) => {
   const sizeClasses = {
     sm: "h-3 w-3",
     md: "h-4 w-4",
@@ -21,22 +25,44 @@ const Checkbox = React.forwardRef<
   return (
     <CheckboxPrimitive.Root
       ref={ref}
-      type={type}
       className={cn(
-        "peer shrink-0 rounded-sm border border-neutral-200 border-neutral-900 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-neutral-900 data-[state=checked]:text-neutral-50 dark:border-neutral-800 dark:border-neutral-50 dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300 dark:data-[state=checked]:bg-neutral-50 dark:data-[state=checked]:text-neutral-900",
+        "peer shrink-0 rounded-sm border border-neutral-200 bg-white ring-offset-white " +
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 " +
+          "focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 " +
+          "data-[state=checked]:bg-neutral-900 data-[state=checked]:text-neutral-50 " +
+          "dark:border-neutral-800 dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300 " +
+          "dark:data-[state=checked]:bg-neutral-50 dark:data-[state=checked]:text-neutral-900",
         sizeClasses[size],
         className
       )}
       {...props}
     >
-      <CheckboxPrimitive.Indicator
+      <CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
-        className={cn("flex items-center justify-center text-current")}
-      >
         <Check className={sizeClasses[size]} />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
   );
 });
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-export { Checkbox };
+Checkbox.displayName = "Checkbox";
+
+interface CheckboxFieldProps extends Omit<BaseCheckboxProps, "checked"> {
+  name: string;
+}
+
+export const CheckboxField: React.FC<CheckboxFieldProps> = ({
+  name,
+  ...props
+}) => {
+  const [field, , helpers] = useField<boolean>({ name, type: "checkbox" });
+
+  return (
+    <Checkbox
+      checked={field.value}
+      onCheckedChange={(checked) => {
+        helpers.setValue(Boolean(checked));
+      }}
+      {...props}
+    />
+  );
+};

web/src/components/ui/switch.tsx

@@ -2,15 +2,19 @@
 
 import * as React from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
+import { useField } from "formik";
 
 import { cn } from "@/lib/utils";
 
-const Switch = React.forwardRef<
+interface BaseSwitchProps
-  React.ElementRef<typeof SwitchPrimitives.Root>,
+  extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> & {
   circleClassName?: string;
   size?: "sm" | "md" | "lg";
 }
+
+export const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  BaseSwitchProps
 >(({ circleClassName, className, size = "md", ...props }, ref) => {
   const sizeClasses = {
     sm: "h-4 w-8",
@@ -32,17 +36,24 @@ const Switch = React.forwardRef<
 
   return (
     <SwitchPrimitives.Root
+      ref={ref}
       className={cn(
-        "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-neutral-900 data-[state=unchecked]:bg-neutral-200 dark:focus-visible:ring-neutral-300 dark:focus-visible:ring-offset-neutral-950 dark:data-[state=checked]:bg-neutral-50 dark:data-[state=unchecked]:bg-neutral-800",
+        "peer inline-flex shrink-0 cursor-pointer items-center rounded-full " +
+          "border-2 border-transparent transition-colors focus-visible:outline-none " +
+          "focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 " +
+          "focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 " +
+          "data-[state=checked]:bg-neutral-900 data-[state=unchecked]:bg-neutral-200 " +
+          "dark:focus-visible:ring-neutral-300 dark:focus-visible:ring-offset-neutral-950 " +
+          "dark:data-[state=checked]:bg-neutral-50 dark:data-[state=unchecked]:bg-neutral-800",
         sizeClasses[size],
         className
       )}
       {...props}
-      ref={ref}
     >
       <SwitchPrimitives.Thumb
         className={cn(
-          "pointer-events-none block rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=unchecked]:translate-x-0 dark:bg-neutral-950",
+          "pointer-events-none block rounded-full bg-white shadow-lg ring-0 transition-transform " +
+            "data-[state=unchecked]:translate-x-0 dark:bg-neutral-950",
           thumbSizeClasses[size],
           translateClasses[size],
           circleClassName
@@ -51,6 +62,28 @@ const Switch = React.forwardRef<
     </SwitchPrimitives.Root>
   );
 });
-Switch.displayName = SwitchPrimitives.Root.displayName;
 
-export { Switch };
+Switch.displayName = "Switch";
+
+interface SwitchFieldProps extends Omit<BaseSwitchProps, "checked"> {
+  name: string;
+}
+
+export const SwitchField: React.FC<SwitchFieldProps> = ({
+  name,
+  onCheckedChange,
+  ...props
+}) => {
+  const [field, , helpers] = useField<boolean>({ name, type: "checkbox" });
+
+  return (
+    <Switch
+      checked={field.value}
+      onCheckedChange={(checked) => {
+        helpers.setValue(Boolean(checked));
+        onCheckedChange?.(checked);
+      }}
+      {...props}
+    />
+  );
+};