Feat: Allow agent operators to select speech-to-text models #3221 (#9534)

### What problem does this PR solve?

Feat: Allow agent operators to select speech-to-text models #3221
### Type of change


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

web/src/pages/agent/form/agent-form/index.tsx

@@ -128,7 +128,7 @@ function AgentForm({ node }: INextOperatorForm) {
       <FormWrapper>
         <FormContainer>
           {isSubAgent && <DescriptionField></DescriptionField>}
-          <LargeModelFormField showTTSModel></LargeModelFormField>
+          <LargeModelFormField showSpeech2TextModel></LargeModelFormField>
           {findLlmByUuid(llmId)?.model_type === LlmModelType.Image2text && (
             <QueryVariable
               name="visual_files_var"

web/src/pages/next-chats/chat/app-settings/chat-settings.tsx

@@ -1,4 +1,4 @@
-import { ButtonLoading } from '@/components/ui/button';
+import { Button, ButtonLoading } from '@/components/ui/button';
 import { Form } from '@/components/ui/form';
 import { Separator } from '@/components/ui/separator';
 import { useFetchDialog, useSetDialog } from '@/hooks/use-chat-request';
@@ -11,6 +11,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { X } from 'lucide-react';
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
 import { useParams } from 'umi';
 import { z } from 'zod';
 import { DatasetMetadata } from '../../constants';
@@ -25,6 +26,7 @@ export function ChatSettings({ switchSettingVisible }: ChatSettingsProps) {
   const { data } = useFetchDialog();
   const { setDialog, loading } = useSetDialog();
   const { id } = useParams();
+  const { t } = useTranslation();
 
   type FormSchemaType = z.infer<typeof formSchema>;
 
@@ -89,25 +91,26 @@ export function ChatSettings({ switchSettingVisible }: ChatSettingsProps) {
   return (
     <section className="p-5  w-[440px] border-l">
       <div className="flex justify-between items-center text-base pb-2">
-        Chat Settings
+        {t('chat.chatSetting')}
         <X className="size-4 cursor-pointer" onClick={switchSettingVisible} />
       </div>
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit, onInvalid)}>
-          <section className="space-y-6 overflow-auto max-h-[85vh] pr-4">
+          <section className="space-y-6 overflow-auto max-h-[82vh] pr-4">
             <ChatBasicSetting></ChatBasicSetting>
             <Separator />
             <ChatPromptEngine></ChatPromptEngine>
             <Separator />
             <ChatModelSettings></ChatModelSettings>
           </section>
-          <ButtonLoading
-            className="w-full my-4"
-            type="submit"
-            loading={loading}
-          >
-            Update
-          </ButtonLoading>
+          <div className="space-x-5 text-right">
+            <Button variant={'outline'} onClick={switchSettingVisible}>
+              {t('chat.cancel')}
+            </Button>
+            <ButtonLoading className=" my-4" type="submit" loading={loading}>
+              {t('common.save')}
+            </ButtonLoading>
+          </div>
         </form>
       </Form>
     </section>

web/src/pages/next-chats/chat/chat-box/single-chat-box.tsx

@@ -23,7 +23,7 @@ interface IProps {
 export function SingleChatBox({ controller }: IProps) {
   const {
     value,
-    // scrollRef,
+    scrollRef,
     messageContainerRef,
     sendLoading,
     derivedMessages,
@@ -47,7 +47,7 @@ export function SingleChatBox({ controller }: IProps) {
   return (
     <section className="flex flex-col p-5 h-full">
       <div ref={messageContainerRef} className="flex-1 overflow-auto min-h-0">
-        <div className="w-full">
+        <div className="w-full pr-5">
           {derivedMessages?.map((message, i) => {
             return (
               <MessageItem
@@ -77,7 +77,7 @@ export function SingleChatBox({ controller }: IProps) {
             );
           })}
         </div>
-        {/* <div ref={scrollRef} /> */}
+        <div ref={scrollRef} />
       </div>
       <NextMessageInput
         disabled={disabled}

web/src/pages/next-chats/chat/index.tsx

@@ -100,7 +100,7 @@ export default function Chat() {
           {t('common.embedIntoSite')}
         </Button>
       </PageHeader>
-      <div className="flex flex-1 min-h-0">
+      <div className="flex flex-1 min-h-0 pb-9">
         <Sessions
           hasSingleChatBox={hasSingleChatBox}
           handleConversationCardClick={handleConversationCardClick}

web/src/pages/next-chats/chat/sessions.tsx

@@ -11,6 +11,7 @@ import {
 import { cn } from '@/lib/utils';
 import { PanelLeftClose, PanelRightClose, Plus } from 'lucide-react';
 import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useHandleClickConversationCard } from '../hooks/use-click-card';
 import { useSelectDerivedConversationList } from '../hooks/use-select-conversation-list';
 import { ConversationDropdown } from './conversation-dropdown';
@@ -24,6 +25,7 @@ export function Sessions({
   handleConversationCardClick,
   switchSettingVisible,
 }: SessionProps) {
+  const { t } = useTranslation();
   const {
     list: conversationList,
     addTemporaryConversation,
@@ -102,8 +104,9 @@ export function Sessions({
           className="w-full"
           onClick={switchSettingVisible}
           disabled={!hasSingleChatBox}
+          variant={'outline'}
         >
-          Chat Settings
+          {t('chat.chatSetting')}
         </Button>
       </div>
     </section>