From 7f06712a30373c2be45dac3b1d0815a017b67661 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Wed, 12 Feb 2025 15:43:31 +0800
Subject: [PATCH] Feat: Add LlmSettingFieldItems component #3221 (#4906)

### What problem does this PR solve?

Feat: Add LlmSettingFieldItems component #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
---
 web/src/components/llm-setting-items/next.tsx | 219 ++++++++++++++++++
 web/src/hooks/chat-hooks.ts                   |  20 ++
 web/src/hooks/llm-hooks.tsx                   |   6 +-
 .../chat/app-settings/chat-model-settings.tsx |  34 +++
 .../next-chats/chat/app-settings/index.tsx    |   4 +-
 web/src/pages/next-chats/index.tsx            |   4 +-
 6 files changed, 282 insertions(+), 5 deletions(-)
 create mode 100644 web/src/components/llm-setting-items/next.tsx

diff --git a/web/src/components/llm-setting-items/next.tsx b/web/src/components/llm-setting-items/next.tsx
new file mode 100644
index 000000000..31e63068b
--- /dev/null
+++ b/web/src/components/llm-setting-items/next.tsx
@@ -0,0 +1,219 @@
+import { LlmModelType, ModelVariableType } from '@/constants/knowledge';
+import { useTranslate } from '@/hooks/common-hooks';
+import { useComposeLlmOptionsByModelTypes } from '@/hooks/llm-hooks';
+import { camelCase } from 'lodash';
+import { useCallback } from 'react';
+import { useFormContext } from 'react-hook-form';
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '../ui/form';
+import { Input } from '../ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select';
+import { FormSlider } from '../ui/slider';
+import { Switch } from '../ui/switch';
+
+interface SliderWithInputNumberFormFieldProps {
+  name: string;
+  label: string;
+  checkName: string;
+  max: number;
+  min?: number;
+  step?: number;
+}
+
+function SliderWithInputNumberFormField({
+  name,
+  label,
+  checkName,
+  max,
+  min = 0,
+  step = 1,
+}: SliderWithInputNumberFormFieldProps) {
+  const { control, watch } = useFormContext();
+  const { t } = useTranslate('chat');
+  const disabled = !watch(checkName);
+
+  return (
+    <FormField
+      control={control}
+      name={name}
+      render={({ field }) => (
+        <FormItem>
+          <div className="flex items-center justify-between">
+            <FormLabel>{t(label)}</FormLabel>
+            <FormField
+              control={control}
+              name={checkName}
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Switch
+                      {...field}
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    ></Switch>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+          <FormControl>
+            <div className="flex w-full  items-center space-x-2">
+              <FormSlider
+                {...field}
+                disabled={disabled}
+                max={max}
+                min={min}
+                step={step}
+              ></FormSlider>
+              <Input
+                type={'number'}
+                className="w-2/5"
+                {...field}
+                disabled={disabled}
+                max={max}
+                min={min}
+                step={step}
+              />
+            </div>
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+interface LlmSettingFieldItemsProps {
+  prefix?: string;
+}
+
+export function LlmSettingFieldItems({ prefix }: LlmSettingFieldItemsProps) {
+  const form = useFormContext();
+  const { t } = useTranslate('chat');
+  const modelOptions = useComposeLlmOptionsByModelTypes([
+    LlmModelType.Chat,
+    LlmModelType.Image2text,
+  ]);
+
+  const parameterOptions = Object.values(ModelVariableType).map((x) => ({
+    label: t(camelCase(x)),
+    value: x,
+  }));
+
+  const getFieldWithPrefix = useCallback(
+    (name: string) => {
+      return `${prefix}.${name}`;
+    },
+    [prefix],
+  );
+
+  return (
+    <div className="space-y-8">
+      <FormField
+        control={form.control}
+        name={'llm_id'}
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('model')}</FormLabel>
+            <FormControl>
+              <Select onValueChange={field.onChange} {...field}>
+                <SelectTrigger value={field.value}>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {modelOptions.map((x) => (
+                    <SelectGroup key={x.value}>
+                      <SelectLabel>{x.label}</SelectLabel>
+                      {x.options.map((y) => (
+                        <SelectItem
+                          value={y.value}
+                          key={y.value}
+                          disabled={y.disabled}
+                        >
+                          {y.label}
+                        </SelectItem>
+                      ))}
+                    </SelectGroup>
+                  ))}
+                </SelectContent>
+              </Select>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      <FormField
+        control={form.control}
+        name={'parameter'}
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('freedom')}</FormLabel>
+            <FormControl>
+              <Select {...field} onValueChange={field.onChange}>
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {parameterOptions.map((x) => (
+                    <SelectItem value={x.value} key={x.value}>
+                      {x.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      <SliderWithInputNumberFormField
+        name={getFieldWithPrefix('temperature')}
+        checkName="temperatureEnabled"
+        label="temperature"
+        max={1}
+        step={0.01}
+      ></SliderWithInputNumberFormField>
+      <SliderWithInputNumberFormField
+        name={getFieldWithPrefix('top_p')}
+        checkName="topPEnabled"
+        label="topP"
+        max={1}
+        step={0.01}
+      ></SliderWithInputNumberFormField>
+      <SliderWithInputNumberFormField
+        name={getFieldWithPrefix('presence_penalty')}
+        checkName="presencePenaltyEnabled"
+        label="presencePenalty"
+        max={1}
+        step={0.01}
+      ></SliderWithInputNumberFormField>
+      <SliderWithInputNumberFormField
+        name={getFieldWithPrefix('frequency_penalty')}
+        checkName="frequencyPenaltyEnabled"
+        label="frequencyPenalty"
+        max={1}
+        step={0.01}
+      ></SliderWithInputNumberFormField>
+      <SliderWithInputNumberFormField
+        name={getFieldWithPrefix('max_tokens')}
+        checkName="maxTokensEnabled"
+        label="maxTokens"
+        max={128000}
+      ></SliderWithInputNumberFormField>
+    </div>
+  );
+}
diff --git a/web/src/hooks/chat-hooks.ts b/web/src/hooks/chat-hooks.ts
index 843a9e70c..44ceda768 100644
--- a/web/src/hooks/chat-hooks.ts
+++ b/web/src/hooks/chat-hooks.ts
@@ -119,6 +119,26 @@ export const useFetchNextDialogList = () => {
   return { data, loading, refetch };
 };
 
+export const useFetchChatAppList = () => {
+  const {
+    data,
+    isFetching: loading,
+    refetch,
+  } = useQuery<IDialog[]>({
+    queryKey: ['fetchChatAppList'],
+    initialData: [],
+    gcTime: 0,
+    refetchOnWindowFocus: false,
+    queryFn: async () => {
+      const { data } = await chatService.listDialog();
+
+      return data?.data ?? [];
+    },
+  });
+
+  return { data, loading, refetch };
+};
+
 export const useSetNextDialog = () => {
   const queryClient = useQueryClient();
 
diff --git a/web/src/hooks/llm-hooks.tsx b/web/src/hooks/llm-hooks.tsx
index 14520fb95..2a3451dbc 100644
--- a/web/src/hooks/llm-hooks.tsx
+++ b/web/src/hooks/llm-hooks.tsx
@@ -116,7 +116,11 @@ export const useComposeLlmOptionsByModelTypes = (
 ) => {
   const allOptions = useSelectLlmOptionsByModelType();
 
-  return modelTypes.reduce<DefaultOptionType[]>((pre, cur) => {
+  return modelTypes.reduce<
+    (DefaultOptionType & {
+      options: { label: JSX.Element; value: string; disabled: boolean }[];
+    })[]
+  >((pre, cur) => {
     const options = allOptions[cur];
     options.forEach((x) => {
       const item = pre.find((y) => y.label === x.label);
diff --git 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
index 6b7d69c07..92c79c122 100644
--- 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,9 +1,43 @@
+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';
 import { Subhead } from './subhead';
 
 export function ChatModelSettings() {
+  const { t } = useTranslate('chat');
+  const form = useFormContext();
+
   return (
     <section>
       <Subhead>Model Setting</Subhead>
+      <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></LlmSettingFieldItems>
+      </div>
     </section>
   );
 }
diff --git a/web/src/pages/next-chats/chat/app-settings/index.tsx b/web/src/pages/next-chats/chat/app-settings/index.tsx
index fbeb31852..ce1c7caa0 100644
--- a/web/src/pages/next-chats/chat/app-settings/index.tsx
+++ b/web/src/pages/next-chats/chat/app-settings/index.tsx
@@ -35,9 +35,9 @@ export function AppSettings() {
       <div className="text-2xl font-bold mb-4 text-colors-text-neutral-strong px-6">
         App settings
       </div>
-      <div className="overflow-auto max-h-[88vh] px-6 space-y-6">
+      <div className="overflow-auto max-h-[88vh] px-6 ">
         <FormProvider {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
             <ChatBasicSetting></ChatBasicSetting>
             <ChatPromptEngine></ChatPromptEngine>
             <ChatModelSettings></ChatModelSettings>
diff --git a/web/src/pages/next-chats/index.tsx b/web/src/pages/next-chats/index.tsx
index eb3f91463..11a6b101d 100644
--- a/web/src/pages/next-chats/index.tsx
+++ b/web/src/pages/next-chats/index.tsx
@@ -1,10 +1,10 @@
 import ListFilterBar from '@/components/list-filter-bar';
-import { useFetchNextDialogList } from '@/hooks/chat-hooks';
+import { useFetchChatAppList } from '@/hooks/chat-hooks';
 import { Plus } from 'lucide-react';
 import { ChatCard } from './chat-card';
 
 export default function ChatList() {
-  const { data: chatList } = useFetchNextDialogList();
+  const { data: chatList } = useFetchChatAppList();
 
   return (
     <section className="p-8">