highperfocused/danswer
1
0
Fork 0
mirror of https://github.com/danswer-ai/danswer.git synced 2025-09-19 20:24:32 +02:00
Code Issues Packages Projects Releases Wiki Activity

Input Formik + hidden screen (#3715)

Browse Source
This commit is contained in:
pablonyx
2025-01-20 10:16:10 -08:00
committed by GitHub
parent d4563b8693
commit f163b798ea
5 changed files with 97 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
web/src/app/admin/assistants/AssistantEditor.tsx
View File

@@ -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
checked={
values.enabled_tools_map[
searchTool.id
]
}
<SwitchField
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={
values.enabled_tools_map[
imageGenerationTool.id
]
}
name={`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) {

6
web/src/app/chat/ChatPage.tsx
View File

@@ -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") +
(hasPerformedInitialScroll ? "" : "invisible")
: "pt-8 ")
}
// NOTE: temporarily removing this to fix the scroll bug
// (hasPerformedInitialScroll ? "" : "invisible")
>
{(messageHistory.length < BUFFER_COUNT
? messageHistory

4
web/src/components/Modal.tsx
View File

@@ -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>

50
web/src/components/ui/checkbox.tsx
View File

@@ -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
extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
size?: "sm" | "md" | "lg";
}
export const Checkbox = React.forwardRef<
React.ElementRef<typeof CheckboxPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {
size?: "sm" | "md" | "lg";
}
>(({ className, size = "md", type = "button", ...props }, ref) => {
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
className={cn("flex items-center justify-center text-current")}
>
<CheckboxPrimitive.Indicator className="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}
/>
);
};

53
web/src/components/ui/switch.tsx
View File

@@ -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
extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {
circleClassName?: string;
size?: "sm" | "md" | "lg";
}
export const Switch = React.forwardRef<
React.ElementRef<typeof SwitchPrimitives.Root>,
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> & {
circleClassName?: string;
size?: "sm" | "md" | "lg";
}
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}
/>
);
};