Feat: Displays the embedded page of the chat module #3221 (#9532)

### What problem does this PR solve?

Feat: Displays the embedded page of the chat module #3221
Feat: Let the agen operator support the selection of tts model #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/large-model-form-field.tsx

@@ -16,7 +16,7 @@ import { Funnel } from 'lucide-react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
-import { NextLLMSelect } from './llm-select/next';
+import { NextInnerLLMSelectProps, NextLLMSelect } from './llm-select/next';
 import { Button } from './ui/button';
 
 const ModelTypes = [
@@ -38,7 +38,10 @@ export const LargeModelFilterFormSchema = {
   llm_filter: z.string().optional(),
 };
 
-export function LargeModelFormField() {
+type LargeModelFormFieldProps = Pick<NextInnerLLMSelectProps, 'showTTSModel'>;
+export function LargeModelFormField({
+  showTTSModel,
+}: LargeModelFormFieldProps) {
   const form = useFormContext();
   const { t } = useTranslation();
   const filter = useWatch({ control: form.control, name: 'llm_filter' });
@@ -85,7 +88,11 @@ export function LargeModelFormField() {
               />
 
               <FormControl>
-                <NextLLMSelect {...field} filter={filter} />
+                <NextLLMSelect
+                  {...field}
+                  filter={filter}
+                  showTTSModel={showTTSModel}
+                />
               </FormControl>
             </section>