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/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>
   );
 }

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>

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