Feat: Fixed the issue where some fields in the chat configuration could not be displayed #3221 (#9430)

### What problem does this PR solve? Feat: Fixed the issue where some fields in the chat configuration could not be displayed #3221 ### Type of change - [x] New Feature (non-breaking change which adds functionality)
2025-12-08 20:42:30 +08:00 · 2025-08-13 10:26:26 +08:00
parent 421657f64b
commit 9098efb8aa
16 changed files with 227 additions and 110 deletions
--- a/web/src/pages/next-chats/chat/app-settings/chat-model-settings.tsx
+++ b/web/src/pages/next-chats/chat/app-settings/chat-model-settings.tsx
@ -1,38 +1,8 @@
 import { LlmSettingFieldItems } from '@/components/llm-setting-items/next';
-import {
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
-import { Textarea } from '@/components/ui/textarea';
-import { useTranslate } from '@/hooks/common-hooks';
-import { useFormContext } from 'react-hook-form';

 export function ChatModelSettings() {
-  const { t } = useTranslate('chat');
-  const form = useFormContext();
-
  return (
    <div className="space-y-8">
-      <FormField
-        control={form.control}
-        name="prompt_config.system"
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel>{t('system')}</FormLabel>
-            <FormControl>
-              <Textarea
-                placeholder="Tell us a little bit about yourself"
-                className="resize-none"
-                {...field}
-              />
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
      <LlmSettingFieldItems prefix="llm_setting"></LlmSettingFieldItems>
    </div>
  );
--- a/web/src/pages/next-chats/chat/app-settings/chat-prompt-engine.tsx
+++ b/web/src/pages/next-chats/chat/app-settings/chat-prompt-engine.tsx
@ -15,6 +15,7 @@ import { Textarea } from '@/components/ui/textarea';
 import { UseKnowledgeGraphFormField } from '@/components/use-knowledge-graph-item';
 import { useTranslate } from '@/hooks/common-hooks';
 import { useFormContext } from 'react-hook-form';
+import { DynamicVariableForm } from './dynamic-variable';

 export function ChatPromptEngine() {
  const { t } = useTranslate('chat');
@ -29,11 +30,7 @@ export function ChatPromptEngine() {
          <FormItem>
            <FormLabel>{t('system')}</FormLabel>
            <FormControl>
-              <Textarea
-                placeholder="Tell us a little bit about yourself"
-                className="resize-none"
-                {...field}
-              />
+              <Textarea {...field} />
            </FormControl>
            <FormMessage />
          </FormItem>
@ -47,6 +44,7 @@ export function ChatPromptEngine() {
      ></SwitchFormField>
      <UseKnowledgeGraphFormField name="prompt_config.use_kg"></UseKnowledgeGraphFormField>
      <RerankFormFields></RerankFormFields>
+      <DynamicVariableForm></DynamicVariableForm>
    </div>
  );
 }
--- a/web/src/pages/next-chats/chat/app-settings/chat-settings.tsx
+++ b/web/src/pages/next-chats/chat/app-settings/chat-settings.tsx
@ -1,11 +1,13 @@
-import { Button } from '@/components/ui/button';
+import { ButtonLoading } from '@/components/ui/button';
+import { Form } from '@/components/ui/form';
 import { Separator } from '@/components/ui/separator';
-import { useFetchDialog } from '@/hooks/use-chat-request';
-import { transformBase64ToFile } from '@/utils/file-util';
+import { useFetchDialog, useSetDialog } from '@/hooks/use-chat-request';
+import { transformBase64ToFile, transformFile2Base64 } from '@/utils/file-util';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { PanelRightClose } from 'lucide-react';
+import { X } from 'lucide-react';
 import { useEffect } from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
+import { useParams } from 'umi';
 import { z } from 'zod';
 import ChatBasicSetting from './chat-basic-settings';
 import { ChatModelSettings } from './chat-model-settings';
@ -16,8 +18,12 @@ type ChatSettingsProps = { switchSettingVisible(): void };
 export function ChatSettings({ switchSettingVisible }: ChatSettingsProps) {
  const formSchema = useChatSettingSchema();
  const { data } = useFetchDialog();
+  const { setDialog, loading } = useSetDialog();
+  const { id } = useParams();

-  const form = useForm<z.infer<typeof formSchema>>({
+  type FormSchemaType = z.infer<typeof formSchema>;
+
+  const form = useForm<FormSchemaType>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      name: '',
@ -35,8 +41,22 @@ export function ChatSettings({ switchSettingVisible }: ChatSettingsProps) {
    },
  });

-  function onSubmit(values: z.infer<typeof formSchema>) {
-    console.log(values);
+  async function onSubmit(values: FormSchemaType) {
+    const icon = values.icon;
+    const avatar =
+      Array.isArray(icon) && icon.length > 0
+        ? await transformFile2Base64(icon[0])
+        : '';
+    setDialog({
+      ...data,
+      ...values,
+      icon: avatar,
+      dialog_id: id,
+    });
+  }
+
+  function onInvalid(errors: any) {
+    console.log('Form validation failed:', errors);
  }

  useEffect(() => {
@ -44,32 +64,33 @@ export function ChatSettings({ switchSettingVisible }: ChatSettingsProps) {
      ...data,
      icon: data.icon ? [transformBase64ToFile(data.icon)] : [],
    };
-    form.reset(nextData as z.infer<typeof formSchema>);
+    form.reset(nextData as FormSchemaType);
  }, [data, form]);

  return (
-    <section className="p-5  w-[400px] max-w-[20%]">
+    <section className="p-5  w-[440px] ">
      <div className="flex justify-between items-center text-base">
        Chat Settings
-        <PanelRightClose
-          className="size-4 cursor-pointer"
-          onClick={switchSettingVisible}
-        />
+        <X className="size-4 cursor-pointer" onClick={switchSettingVisible} />
      </div>
-      <FormProvider {...form}>
-        <form
-          onSubmit={form.handleSubmit(onSubmit)}
-          className="space-y-6 overflow-auto max-h-[87vh] pr-4"
-        >
-          <ChatBasicSetting></ChatBasicSetting>
-          <Separator />
-          <ChatPromptEngine></ChatPromptEngine>
-          <Separator />
-          <ChatModelSettings></ChatModelSettings>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit, onInvalid)}>
+          <section className="space-y-6 overflow-auto max-h-[87vh] pr-4">
+            <ChatBasicSetting></ChatBasicSetting>
+            <Separator />
+            <ChatPromptEngine></ChatPromptEngine>
+            <Separator />
+            <ChatModelSettings></ChatModelSettings>
+          </section>
+          <ButtonLoading
+            className="w-full my-4"
+            type="submit"
+            loading={loading}
+          >
+            Update
+          </ButtonLoading>
        </form>
-      </FormProvider>
-
-      <Button className="w-full my-4">Update</Button>
+      </Form>
    </section>
  );
 }
--- a/web/src/pages/next-chats/chat/app-settings/dynamic-variable.tsx
+++ b/web/src/pages/next-chats/chat/app-settings/dynamic-variable.tsx
@ -0,0 +1,89 @@
+import { Button } from '@/components/ui/button';
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { BlurInput } from '@/components/ui/input';
+import { Separator } from '@/components/ui/separator';
+import { Switch } from '@/components/ui/switch';
+import { Plus, X } from 'lucide-react';
+import { useCallback } from 'react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+export function DynamicVariableForm() {
+  const { t } = useTranslation();
+  const form = useFormContext();
+  const name = 'prompt_config.parameters';
+
+  const { fields, remove, append } = useFieldArray({
+    name,
+    control: form.control,
+  });
+
+  const add = useCallback(() => {
+    append({
+      key: undefined,
+      optional: false,
+    });
+  }, [append]);
+
+  return (
+    <section className="flex flex-col gap-2">
+      <div className="flex items-center justify-between">
+        <FormLabel tooltip={t('chat.variableTip')}>
+          {t('chat.variable')}
+        </FormLabel>
+        <Button variant={'ghost'} type="button" onClick={add}>
+          <Plus />
+        </Button>
+      </div>
+      <div className="space-y-5">
+        {fields.map((field, index) => {
+          const typeField = `${name}.${index}.key`;
+          return (
+            <div key={field.id} className="flex w-full items-center gap-2">
+              <FormField
+                control={form.control}
+                name={typeField}
+                render={({ field }) => (
+                  <FormItem className="flex-1 overflow-hidden">
+                    <FormControl>
+                      <BlurInput
+                        {...field}
+                        placeholder={t('common.pleaseInput')}
+                      ></BlurInput>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <Separator className="w-3 text-text-secondary" />
+              <FormField
+                control={form.control}
+                name={`${name}.${index}.optional`}
+                render={({ field }) => (
+                  <FormItem className="flex-1 overflow-hidden">
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                      ></Switch>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <Button variant={'ghost'} onClick={() => remove(index)}>
+                <X className="text-text-sub-title-invert " />
+              </Button>
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
--- a/web/src/pages/next-chats/chat/app-settings/use-chat-setting-schema.tsx
+++ b/web/src/pages/next-chats/chat/app-settings/use-chat-setting-schema.tsx
@ -1,5 +1,9 @@
 import { LlmSettingSchema } from '@/components/llm-setting-items/next';
+import { rerankFormSchema } from '@/components/rerank';
+import { vectorSimilarityWeightSchema } from '@/components/similarity-slider';
+import { topnSchema } from '@/components/top-n-item';
 import { useTranslate } from '@/hooks/common-hooks';
+import { omit } from 'lodash';
 import { z } from 'zod';

 export function useChatSettingSchema() {
@ -9,13 +13,17 @@ export function useChatSettingSchema() {
    quote: z.boolean(),
    keyword: z.boolean(),
    tts: z.boolean(),
-    empty_response: z.string().min(1, {
-      message: t('emptyResponse'),
-    }),
-    prologue: z.string().min(1, {}),
+    empty_response: z.string().optional(),
+    prologue: z.string().optional(),
    system: z.string().min(1, { message: t('systemMessage') }),
    refine_multiturn: z.boolean(),
    use_kg: z.boolean(),
+    parameters: z.array(
+      z.object({
+        key: z.string(),
+        optional: z.boolean(),
+      }),
+    ),
  });

  const formSchema = z.object({
@ -29,10 +37,11 @@ export function useChatSettingSchema() {
      message: 'Username must be at least 1 characters.',
    }),
    prompt_config: promptConfigSchema,
-    top_n: z.number(),
-    vector_similarity_weight: z.number(),
-    top_k: z.number(),
-    llm_setting: z.object(LlmSettingSchema),
+    ...rerankFormSchema,
+    llm_setting: z.object(omit(LlmSettingSchema, 'llm_id')),
+    llm_id: z.string().optional(),
+    ...vectorSimilarityWeightSchema,
+    ...topnSchema,
  });

  return formSchema;