Skip to content

Commit

Permalink
ui(frontend): refine chat engine forms
Browse files Browse the repository at this point in the history
  • Loading branch information
@634750802
634750802 committed Dec 2, 2024
1 parent edd1740 commit 98d2472
Show file tree
Hide file tree
Showing 4 changed files with 57 additions and 36 deletions.
30 changes: 15 additions & 15 deletions frontend/app/src/components/chat-engine/create-chat-engine-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
import { type ChatEngineOptions, createChatEngine } from '@/api/chat-engines';
import { FormSection, FormSectionsProvider, useFormSectionFields } from '@/components/form-sections';
import { KBSelect, LLMSelect, RerankerSelect } from '@/components/form/biz';
import { FormInput, FormSwitch } from '@/components/form/control-widget';
import { FormFieldBasicLayout, FormFieldContainedLayout } from '@/components/form/field-layout';
import { FormCheckbox, FormInput, FormSwitch } from '@/components/form/control-widget';
import { FormFieldBasicLayout, FormFieldContainedLayout, FormFieldInlineLayout } from '@/components/form/field-layout';
import { FormRootError } from '@/components/form/root-error';
import { handleSubmitHelper } from '@/components/form/utils';
import { PromptInput } from '@/components/form/widgets/PromptInput';
Expand Down Expand Up @@ -115,15 +115,15 @@ export function CreateChatEngineForm ({ defaultChatEngineOptions }: { defaultCha
<FormFieldBasicLayout name="engine_options.knowledge_graph.depth" label="Depth" fallbackValue={defaultChatEngineOptions.knowledge_graph?.depth}>
<FormInput type="number" min={1} step={1} />
</FormFieldBasicLayout>
<FormFieldContainedLayout unimportant name="engine_options.knowledge_graph.include_meta" label="Include Meta" fallbackValue={defaultChatEngineOptions.knowledge_graph?.include_meta} description="/// Description TBD">
<FormSwitch />
</FormFieldContainedLayout>
<FormFieldContainedLayout unimportant name="engine_options.knowledge_graph.with_degree" label="With Degree" fallbackValue={defaultChatEngineOptions.knowledge_graph?.with_degree} description="/// Description TBD">
<FormSwitch />
</FormFieldContainedLayout>
<FormFieldContainedLayout unimportant name="engine_options.knowledge_graph.using_intent_search" label="Using intent search" fallbackValue={defaultChatEngineOptions.knowledge_graph?.using_intent_search} description="/// Description TBD">
<FormSwitch />
</FormFieldContainedLayout>
<FormFieldInlineLayout name="engine_options.knowledge_graph.include_meta" label="Include Meta" fallbackValue={defaultChatEngineOptions.knowledge_graph?.include_meta} description="/// Description TBD">
<FormCheckbox />
</FormFieldInlineLayout>
<FormFieldInlineLayout name="engine_options.knowledge_graph.with_degree" label="With Degree" fallbackValue={defaultChatEngineOptions.knowledge_graph?.with_degree} description="/// Description TBD">
<FormCheckbox />
</FormFieldInlineLayout>
<FormFieldInlineLayout name="engine_options.knowledge_graph.using_intent_search" label="Using intent search" fallbackValue={defaultChatEngineOptions.knowledge_graph?.using_intent_search} description="/// Description TBD">
<FormCheckbox />
</FormFieldInlineLayout>
{(['intent_graph_knowledge', 'normal_graph_knowledge'] as const).map(field => (
<FormFieldBasicLayout key={field} name={`engine_options.llm.${field}`} label={capitalCase(field)} fallbackValue={defaultChatEngineOptions.llm?.[field]} description={llmPromptDescriptions[field]}>
<PromptInput />
Expand All @@ -139,9 +139,9 @@ export function CreateChatEngineForm ({ defaultChatEngineOptions }: { defaultCha
))}
</Section>
<Section title="Features">
<FormFieldContainedLayout unimportant name="engine_options.hide_sources" label="Hide Reference Sources" description="/// Description TBD">
<FormSwitch />
</FormFieldContainedLayout>
<FormFieldInlineLayout name="engine_options.hide_sources" label="Hide Reference Sources" description="/// Description TBD">
<FormCheckbox />
</FormFieldInlineLayout>
<SubSection title="Clarify Question">
<FormFieldContainedLayout unimportant name="engine_options.clarify_question" label="Clarify Question" description="/// Description TBD">
<FormSwitch />
Expand Down Expand Up @@ -201,7 +201,7 @@ function SectionTabTrigger ({ value, required }: { value: string, required?: boo
function Section ({ title, children }: { title: string, children: ReactNode }) {
return (
<FormSection value={title}>
<SecondaryNavigatorMain className="space-y-6 max-w-screen-sm px-2" value={title} strategy="hidden">
<SecondaryNavigatorMain className="space-y-8 max-w-screen-sm px-2" value={title} strategy="hidden">
{children}
</SecondaryNavigatorMain>
</FormSection>
Expand Down
30 changes: 15 additions & 15 deletions frontend/app/src/components/chat-engine/update-chat-engine-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@

import { type ChatEngine, type ChatEngineKnowledgeGraphOptions, type ChatEngineLLMOptions, type ChatEngineOptions, updateChatEngine } from '@/api/chat-engines';
import { KBSelect, LLMSelect, RerankerSelect } from '@/components/form/biz';
import { FormInput, FormSwitch } from '@/components/form/control-widget';
import { FormFieldBasicLayout, FormFieldContainedLayout } from '@/components/form/field-layout';
import { FormCheckbox, FormInput, FormSwitch } from '@/components/form/control-widget';
import { FormFieldBasicLayout, FormFieldContainedLayout, FormFieldInlineLayout } from '@/components/form/field-layout';
import { PromptInput } from '@/components/form/widgets/PromptInput';
import { SecondaryNavigatorItem, SecondaryNavigatorLayout, SecondaryNavigatorList, SecondaryNavigatorMain } from '@/components/secondary-navigator-list';
import { fieldAccessor, GeneralSettingsField, type GeneralSettingsFieldAccessor, GeneralSettingsForm, shallowPick } from '@/components/settings-form';
Expand Down Expand Up @@ -126,19 +126,19 @@ export function UpdateChatEngineForm ({ chatEngine, defaultChatEngineOptions }:
</FormFieldBasicLayout>
</GeneralSettingsField>
<GeneralSettingsField accessor={kgIncludeMetaAccessor} schema={kgIncludeMetaSchema}>
<FormFieldContainedLayout unimportant name="value" label="Include Meta" fallbackValue={defaultChatEngineOptions.knowledge_graph?.include_meta} description="/// Description TBD">
<FormSwitch />
</FormFieldContainedLayout>
<FormFieldInlineLayout name="value" label="Include Meta" fallbackValue={defaultChatEngineOptions.knowledge_graph?.include_meta} description="/// Description TBD">
<FormCheckbox />
</FormFieldInlineLayout>
</GeneralSettingsField>
<GeneralSettingsField accessor={kgWithDegreeAccessor} schema={kgWithDegreeSchema}>
<FormFieldContainedLayout unimportant name="value" label="With Degree" fallbackValue={defaultChatEngineOptions.knowledge_graph?.with_degree} description="/// Description TBD">
<FormSwitch />
</FormFieldContainedLayout>
<FormFieldInlineLayout name="value" label="With Degree" fallbackValue={defaultChatEngineOptions.knowledge_graph?.with_degree} description="/// Description TBD">
<FormCheckbox />
</FormFieldInlineLayout>
</GeneralSettingsField>
<GeneralSettingsField accessor={kgUsingIntentSearchAccessor} schema={kgUsingIntentSearchSchema}>
<FormFieldContainedLayout unimportant name="value" label="Using intent search" fallbackValue={defaultChatEngineOptions.knowledge_graph?.using_intent_search} description="/// Description TBD">
<FormSwitch />
</FormFieldContainedLayout>
<FormFieldInlineLayout name="value" label="Using intent search" fallbackValue={defaultChatEngineOptions.knowledge_graph?.using_intent_search} description="/// Description TBD">
<FormCheckbox />
</FormFieldInlineLayout>
</GeneralSettingsField>
{(['intent_graph_knowledge', 'normal_graph_knowledge'] as const).map(type => (
<GeneralSettingsField key={type} accessor={llmAccessor[type]} schema={llmSchema}>
Expand All @@ -162,9 +162,9 @@ export function UpdateChatEngineForm ({ chatEngine, defaultChatEngineOptions }:

<Section title="Features">
<GeneralSettingsField accessor={hideSourcesAccessor} schema={hideSourcesSchema}>
<FormFieldContainedLayout unimportant name="value" label="Hide Sources" fallbackValue={defaultChatEngineOptions.hide_sources} description="/// Description TBD">
<FormSwitch />
</FormFieldContainedLayout>
<FormFieldInlineLayout name="value" label="Hide Sources" fallbackValue={defaultChatEngineOptions.hide_sources} description="/// Description TBD">
<FormCheckbox />
</FormFieldInlineLayout>
</GeneralSettingsField>
<SubSection title="Clarify Question">
<GeneralSettingsField accessor={clarifyAccessor} schema={clarifyAccessorSchema}>
Expand Down Expand Up @@ -379,7 +379,7 @@ const externalEngineSchema = z.string().nullable();
function Section ({ title, children }: { title: string, children: ReactNode }) {
return (
<>
<SecondaryNavigatorMain className="max-w-screen-sm space-y-6 px-2" value={title} strategy="mount">
<SecondaryNavigatorMain className="max-w-screen-sm space-y-8 px-2" value={title} strategy="mount">
{children}
</SecondaryNavigatorMain>
</>
Expand Down
21 changes: 19 additions & 2 deletions frontend/app/src/components/form/control-widget.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { Checkbox } from '@/components/ui/checkbox';
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command';
import { Popover, PopoverContent } from '@/components/ui/popover';
import { Select, SelectContent, SelectItem } from '@/components/ui/select';
Expand All @@ -10,7 +11,7 @@ import * as SelectPrimitive from '@radix-ui/react-select';
import type { SwitchProps } from '@radix-ui/react-switch';
import { CheckIcon, ChevronDown, Loader2Icon, TriangleAlertIcon, XCircleIcon } from 'lucide-react';
import * as React from 'react';
import { type FC, forwardRef, type ReactElement, type ReactNode, useState } from 'react';
import { type ComponentProps, type FC, forwardRef, type ReactElement, type ReactNode, useState } from 'react';
import { ControllerRenderProps, FieldPath, FieldValues } from 'react-hook-form';

export interface FormControlWidgetProps<
Expand Down Expand Up @@ -42,6 +43,22 @@ export const FormSwitch = forwardRef<any, FormSwitchProps>(({ value, onChange, .

FormSwitch.displayName = 'FormSwitch';

export interface FormCheckoutProps extends FormControlWidgetProps, Omit<ComponentProps<typeof Checkbox>, 'checked' | 'onCheckedChange' | keyof FormControlWidgetProps> {
}

export const FormCheckbox = forwardRef<any, FormCheckoutProps>(({ value, onChange, ...props }, forwardedRef) => {
return (
<Checkbox
{...props}
ref={forwardedRef}
checked={value}
onCheckedChange={onChange}
/>
);
});

FormCheckbox.displayName = 'FormCheckbox';

export interface FormSelectConfig<T extends object> {
loading?: boolean;
error?: unknown;
Expand Down Expand Up @@ -143,7 +160,7 @@ export interface FormComboboxProps extends FormControlWidgetProps {
contentWidth?: 'anchor';
}

export const FormCombobox = forwardRef<any, FormComboboxProps>(({ config, placeholder, value, onChange, name, disabled, children, contentWidth, ...props }, ref) => {
export const FormCombobox = forwardRef<any, FormComboboxProps>(({ config, placeholder, value, onChange, name, disabled, children, contentWidth = 'anchor', ...props }, ref) => {
const [open, setOpen] = useState(false);
const isConfigReady = !config.loading && !config.error;
const current = config.options.find(option => option[config.key] === value);
Expand Down
12 changes: 8 additions & 4 deletions frontend/app/src/components/form/field-layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,17 +67,21 @@ export function FormFieldInlineLayout<
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
> ({
name,
label,
description,
children,
}: Omit<FormFieldLayoutProps<TFieldValues, TName>, 'label'>) {
}: FormFieldLayoutProps<TFieldValues, TName>) {
return (
<FormField<TFieldValues, TName>
name={name}
render={({ field }) => (
<FormItem>
<FormControl>
{renderWidget(children, field)}
</FormControl>
<div className="flex items-center gap-2">
<FormControl>
{renderWidget(children, field)}
</FormControl>
<FormLabel>{label}</FormLabel>
</div>
{description && <FormDescription>{description}</FormDescription>}
<FormMessage />
</FormItem>
Expand Down

0 comments on commit 98d2472

Please sign in to comment.