= keyof { [P in keyof T as T[P] extends Value ? P : never]: any }
-
-export interface EditOptionBooleanFormProps> {
- property: P;
- chatEngine: ChatEngine;
-}
-
-const booleanSchema = z.boolean();
-
-export function EditOptionBooleanForm
> ({ property, chatEngine }: EditOptionBooleanFormProps
) {
- const [refreshing, refresh] = useRefresh();
-
- return (
- {
- const options = { ...chatEngine.engine_options, ...data };
- await updateChatEngine(chatEngine.id, { engine_options: options });
- refresh();
- toast(`ChatEngine's option ${property} successfully updated.`);
- }}
- disabled={refreshing}
- >
-
-
- );
-}
diff --git a/frontend/app/src/components/chat-engine/edit-options-llm-prompt-form.tsx b/frontend/app/src/components/chat-engine/edit-options-llm-prompt-form.tsx
deleted file mode 100644
index a96635c76..000000000
--- a/frontend/app/src/components/chat-engine/edit-options-llm-prompt-form.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-'use client';
-
-import { type ChatEngine, updateChatEngine } from '@/api/chat-engines';
-import { EditPropertyForm } from '@/components/chat-engine/edit-property-form';
-import { FormTextarea } from '@/components/form/control-widget';
-import { useRefresh } from '@/components/nextjs/app-router-hooks';
-import { toast } from 'sonner';
-import { z } from 'zod';
-
-export interface EditOptionsLlmPromptFormProps {
- chatEngine: ChatEngine;
- type: 'intent_graph_knowledge'
- | 'normal_graph_knowledge'
- | 'condense_question_prompt'
- | 'refine_prompt'
- | 'text_qa_prompt';
-}
-
-const schema = z.string().min(1);
-
-export function EditOptionsLlmPromptForm ({ chatEngine, type }: EditOptionsLlmPromptFormProps) {
- const [refreshing, refresh] = useRefresh();
-
- return (
- <>
- {
- const chatEngineOptions = {
- ...chatEngine.engine_options,
- llm: {
- ...chatEngine.engine_options.llm,
- ...data,
- },
- };
- await updateChatEngine(chatEngine.id, { engine_options: chatEngineOptions });
- refresh();
- toast(`ChatEngine successfully updated.`);
- }}
- disabled={refreshing}
- >
-
-
-
- );
-}
\ No newline at end of file
diff --git a/frontend/app/src/components/chat-engine/edit-property-form.tsx b/frontend/app/src/components/chat-engine/edit-property-form.tsx
deleted file mode 100644
index 1a6df74c0..000000000
--- a/frontend/app/src/components/chat-engine/edit-property-form.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { FormFieldInlineLayout } from '@/components/form/field-layout';
-import { useManagedDialog } from '@/components/managed-dialog';
-import { Button } from '@/components/ui/button';
-import { Form } from '@/components/ui/form';
-import { cn } from '@/lib/utils';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { type ReactElement, useMemo } from 'react';
-import { type DefaultValues, useForm } from 'react-hook-form';
-import { z, type ZodType } from 'zod';
-
-export interface EditPropertyFormProps {
- className?: string;
- object: T;
- property: P;
- schema: ZodType;
- description?: string;
- disabled?: boolean;
- children: ReactElement;
- inline?: boolean;
-
- onSubmit (value: Record): void;
-}
-
-export function EditPropertyForm ({ className, object, property, schema, onSubmit, inline, disabled, description, children }: EditPropertyFormProps) {
- const { setOpen } = useManagedDialog();
-
- const resolver = useMemo(() => {
- return zodResolver(z.object({
- [property]: schema,
- }));
- }, [schema, property]);
-
- const form = useForm>({
- resolver,
- disabled,
- defaultValues: {
- [property]: object[property] ?? '',
- } as DefaultValues>,
- });
-
- const handleSubmit = form.handleSubmit(async (data) => {
- onSubmit(data);
- setOpen(false);
- });
-
- return (
-
-
- );
-}
\ No newline at end of file
diff --git a/frontend/app/src/components/chat-engine/edit-reranker-form.tsx b/frontend/app/src/components/chat-engine/edit-reranker-form.tsx
deleted file mode 100644
index c15654d37..000000000
--- a/frontend/app/src/components/chat-engine/edit-reranker-form.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-'use client';
-
-import { type ChatEngine, updateChatEngine } from '@/api/chat-engines';
-import { EditPropertyForm } from '@/components/chat-engine/edit-property-form';
-import { RerankerSelect } from '@/components/form/biz';
-import { useRefresh } from '@/components/nextjs/app-router-hooks';
-import { toast } from 'sonner';
-import { z } from 'zod';
-
-const schema = z.number().nullable();
-
-export interface EditRerankerFormProps {
- chatEngine: ChatEngine;
-}
-
-export function EditRerankerForm ({ chatEngine }: EditRerankerFormProps) {
- const [refreshing, refresh] = useRefresh();
-
- return (
- <>
- {
- await updateChatEngine(chatEngine.id, data);
- refresh();
- toast(`ChatEngine successfully updated.`);
- }}
- inline
- disabled={refreshing}
- >
-
-
-
- );
-}
\ No newline at end of file
diff --git a/frontend/app/src/components/chat-engine/edit-token-form.tsx b/frontend/app/src/components/chat-engine/edit-token-form.tsx
deleted file mode 100644
index b040901bf..000000000
--- a/frontend/app/src/components/chat-engine/edit-token-form.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-'use client';
-
-import { type ChatEngine, type ChatEngineOptions, updateChatEngine } from '@/api/chat-engines';
-import { EditPropertyForm } from '@/components/chat-engine/edit-property-form';
-import { FormInput } from '@/components/form/control-widget';
-import { useRefresh } from '@/components/nextjs/app-router-hooks';
-import { toast } from 'sonner';
-import { z } from 'zod';
-
-type KeyOfType = keyof { [P in keyof T as T[P] extends Value ? P : never]: any }
-
-export interface EditNameFormProps> {
- property: P;
- chatEngine: ChatEngine;
-}
-
-const stringSchema = z.string();
-
-export function EditTokenForm
> ({ property, chatEngine }: EditNameFormProps
) {
- const [refreshing, refresh] = useRefresh();
-
- return (
- {
- const options = { ...chatEngine.engine_options, ...data };
- await updateChatEngine(chatEngine.id, { engine_options: options });
- refresh();
- toast(`ChatEngine's ${property} successfully updated.`);
- }}
- disabled={refreshing}
- >
-
-
- );
-}
diff --git a/frontend/app/src/components/chat-engine/edit-url-form.tsx b/frontend/app/src/components/chat-engine/edit-url-form.tsx
deleted file mode 100644
index c183695c1..000000000
--- a/frontend/app/src/components/chat-engine/edit-url-form.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-'use client';
-
-import { type ChatEngine, type ChatEngineOptions, updateChatEngine } from '@/api/chat-engines';
-import { EditPropertyForm } from '@/components/chat-engine/edit-property-form';
-import { FormInput } from '@/components/form/control-widget';
-import { useRefresh } from '@/components/nextjs/app-router-hooks';
-import { toast } from 'sonner';
-import { z } from 'zod';
-
-type KeyOfType = keyof { [P in keyof T as T[P] extends Value ? P : never]: any }
-
-export interface EditNameFormProps> {
- property: P;
- chatEngine: ChatEngine;
-}
-
-const stringSchema = z.string().url();
-
-export function EditUrlForm
> ({ property, chatEngine }: EditNameFormProps
) {
- const [refreshing, refresh] = useRefresh();
-
- return (
- {
- const options = { ...chatEngine.engine_options, ...data };
- await updateChatEngine(chatEngine.id, { engine_options: options });
- refresh();
- toast(`ChatEngine's option ${property} successfully updated.`);
- }}
- disabled={refreshing}
- >
-
-
- );
-}
diff --git a/frontend/app/src/components/chat-engine/knowledge-graph-details.tsx b/frontend/app/src/components/chat-engine/knowledge-graph-details.tsx
deleted file mode 100644
index 2107e3768..000000000
--- a/frontend/app/src/components/chat-engine/knowledge-graph-details.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { ChatEngine, ChatEngineKnowledgeGraphOptions } from '@/api/chat-engines';
-import { EditKgBooleanForm } from '@/components/chat-engine/edit-kg-boolean-form';
-import { EditKgIntegerForm } from '@/components/chat-engine/edit-kg-integer-form';
-import { OptionDetail } from '@/components/option-detail';
-
-export function ChatEngineKnowledgeGraphDetails ({ detailed, editable, options }: { detailed: boolean, editable?: ChatEngine, options: ChatEngineKnowledgeGraphOptions }) {
- return (
-
- } />
- {(detailed || options.enabled) && (
- <>
- } />
- } />
- } />
- } />
-
- )}
-
- );
-}
diff --git a/frontend/app/src/components/chat-engine/llm-details.tsx b/frontend/app/src/components/chat-engine/llm-details.tsx
deleted file mode 100644
index aa28c71ad..000000000
--- a/frontend/app/src/components/chat-engine/llm-details.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import type { ChatEngine, ChatEngineLLMOptions } from '@/api/chat-engines';
-import { EditOptionsLlmPromptForm } from '@/components/chat-engine/edit-options-llm-prompt-form';
-import { PromptViewer } from '@/components/chat-engine/prompt-viewer';
-import { OptionDetail } from '@/components/option-detail';
-import { Button } from '@/components/ui/button';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
-import { ScrollArea } from '@/components/ui/scroll-area';
-
-export function ChatEngineLLMDetails ({ editable, options }: { editable?: ChatEngine, options: ChatEngineLLMOptions }) {
- return (
-
- {options.condense_question_prompt && } editPanel={editable && } />}
- {options.refine_prompt && } editPanel={editable && } />}
- {options.text_qa_prompt && } editPanel={editable && } />}
- {options.intent_graph_knowledge && } editPanel={editable && } />}
- {options.normal_graph_knowledge && } editPanel={editable && } />}
-
- );
-}
-
-function PromptPreviewDialog ({ title, value }: { title: string, value: string }) {
- return (
-
- );
-}
diff --git a/frontend/app/src/components/chat-engine/prompt-viewer.tsx b/frontend/app/src/components/chat-engine/prompt-viewer.tsx
deleted file mode 100644
index 8577cb128..000000000
--- a/frontend/app/src/components/chat-engine/prompt-viewer.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-'use client';
-
-import Highlight from 'highlight.js/lib/core';
-import django from 'highlight.js/lib/languages/django';
-import { useEffect, useState } from 'react';
-import '../code-theme.scss';
-
-Highlight.registerLanguage('django', django);
-
-export function PromptViewer ({ value: propValue }: { value: string }) {
- const [value, setValue] = useState(propValue);
-
- useEffect(() => {
- setValue(propValue);
- try {
- const { value: result } = Highlight.highlight('django', propValue);
- setValue(result);
- } catch {
- }
- }, [propValue]);
-
- return (
-
-
-
- );
-}
\ No newline at end of file
diff --git a/frontend/app/src/components/chat-engine/update-chat-engine-form.tsx b/frontend/app/src/components/chat-engine/update-chat-engine-form.tsx
new file mode 100644
index 000000000..89512d11c
--- /dev/null
+++ b/frontend/app/src/components/chat-engine/update-chat-engine-form.tsx
@@ -0,0 +1,398 @@
+'use client';
+
+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 { PromptInput } from '@/components/form/widgets/PromptInput';
+import { Grid2, Grid3 } from '@/components/grid/Grid';
+import { fieldAccessor, GeneralSettingsField, type GeneralSettingsFieldAccessor, GeneralSettingsForm, shallowPick } from '@/components/settings-form';
+import { Separator } from '@/components/ui/separator';
+import type { KeyOfType } from '@/lib/typing-utils';
+import { capitalCase } from 'change-case-all';
+import { format } from 'date-fns';
+import { useRouter } from 'next/navigation';
+import { type ReactNode, useTransition } from 'react';
+import { z } from 'zod';
+
+export function UpdateChatEngineForm ({ chatEngine, defaultChatEngineOptions }: { chatEngine: ChatEngine, defaultChatEngineOptions: ChatEngineOptions }) {
+ const [transitioning, startTransition] = useTransition();
+ const router = useRouter();
+
+ return (
+ {
+ if (updatableFields.includes(path[0] as any)) {
+ const partial = shallowPick(data, path as [(typeof updatableFields)[number], ...any[]]);
+ await updateChatEngine(chatEngine.id, partial);
+ startTransition(() => {
+ router.refresh();
+ });
+ } else {
+ throw new Error(`${path.map(p => String(p)).join('.')} is not updatable currently.`);
+ }
+ }}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {(['intent_graph_knowledge', 'normal_graph_knowledge'] as const).map(type => (
+
+
+
+
+
+ ))}
+
+
+
+
+
+
+ {(['condense_question_prompt', 'condense_answer_prompt', 'text_qa_prompt', 'refine_prompt'] as const).map(type => (
+
+
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+