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)
2025-12-08 12:32:30 +08:00 · 2025-08-19 09:40:01 +08:00
parent 2b9ed935f3
commit 32349481ef
12 changed files with 57 additions and 35 deletions
--- a/web/src/components/large-model-form-field.tsx
+++ b/web/src/components/large-model-form-field.tsx
@ -38,9 +38,12 @@ export const LargeModelFilterFormSchema = {
  llm_filter: z.string().optional(),
 };

-type LargeModelFormFieldProps = Pick<NextInnerLLMSelectProps, 'showTTSModel'>;
+type LargeModelFormFieldProps = Pick<
+  NextInnerLLMSelectProps,
+  'showSpeech2TextModel'
+>;
 export function LargeModelFormField({
-  showTTSModel,
+  showSpeech2TextModel: showTTSModel,
 }: LargeModelFormFieldProps) {
  const form = useFormContext();
  const { t } = useTranslation();
@ -91,7 +94,7 @@ export function LargeModelFormField({
                <NextLLMSelect
                  {...field}
                  filter={filter}
-                  showTTSModel={showTTSModel}
+                  showSpeech2TextModel={showTTSModel}
                />
              </FormControl>
            </section>
--- a/web/src/components/llm-select/next.tsx
+++ b/web/src/components/llm-select/next.tsx
@ -13,18 +13,18 @@ export interface NextInnerLLMSelectProps {
  onChange?: (value: string) => void;
  disabled?: boolean;
  filter?: string;
-  showTTSModel?: boolean;
+  showSpeech2TextModel?: boolean;
 }

 const NextInnerLLMSelect = forwardRef<
  React.ElementRef<typeof SelectPrimitive.Trigger>,
  NextInnerLLMSelectProps
->(({ value, disabled, filter, showTTSModel = false }, ref) => {
+>(({ value, disabled, filter, showSpeech2TextModel = false }, ref) => {
  const [isPopoverOpen, setIsPopoverOpen] = useState(false);

  const ttsModel = useMemo(() => {
-    return showTTSModel ? [LlmModelType.TTS] : [];
-  }, [showTTSModel]);
+    return showSpeech2TextModel ? [LlmModelType.Speech2text] : [];
+  }, [showSpeech2TextModel]);

  const modelTypes = useMemo(() => {
    if (filter === LlmModelType.Chat) {
--- a/web/src/components/message-item/index.less
+++ b/web/src/components/message-item/index.less
@ -24,7 +24,7 @@
  .messageText {
    .chunkText();
    .messageTextBase();
-    background-color: #e6f4ff;
+    // background-color: #e6f4ff;
    word-break: break-word;
  }
  .messageTextDark {
--- a/web/src/components/message-item/index.tsx
+++ b/web/src/components/message-item/index.tsx
@ -9,6 +9,7 @@ import {
  useFetchDocumentThumbnailsByIds,
 } from '@/hooks/document-hooks';
 import { IRegenerateMessage, IRemoveMessageById } from '@/hooks/logic-hooks';
+import { cn } from '@/lib/utils';
 import { IMessage } from '@/pages/chat/interface';
 import MarkdownContent from '@/pages/chat/markdown-content';
 import { Avatar, Flex, Space } from 'antd';
@ -129,13 +130,14 @@ const MessageItem = ({
              {/* <b>{isAssistant ? '' : nickname}</b> */}
            </Space>
            <div
-              className={
+              className={cn(
                isAssistant
                  ? theme === 'dark'
                    ? styles.messageTextDark
                    : styles.messageText
-                  : styles.messageUserText
-              }
+                  : styles.messageUserText,
+                { '!bg-bg-card': !isAssistant },
+              )}
            >
              <MarkdownContent
                loading={loading}
--- a/web/src/hooks/logic-hooks.ts
+++ b/web/src/hooks/logic-hooks.ts
@ -369,22 +369,28 @@ export const useScrollToBottom = (
    return () => container.removeEventListener('scroll', handleScroll);
  }, [containerRef, checkIfUserAtBottom]);

+  // Imperative scroll function
+  const scrollToBottom = useCallback(() => {
+    if (containerRef?.current) {
+      const container = containerRef.current;
+      container.scrollTo({
+        top: container.scrollHeight - container.clientHeight,
+        behavior: 'smooth',
+      });
+    }
+  }, [containerRef]);
+
  useEffect(() => {
    if (!messages) return;
    if (!containerRef?.current) return;
    requestAnimationFrame(() => {
      setTimeout(() => {
        if (isAtBottomRef.current) {
-          ref.current?.scrollIntoView({ behavior: 'smooth' });
+          scrollToBottom();
        }
-      }, 30);
+      }, 100);
    });
-  }, [messages, containerRef]);
-
-  // Imperative scroll function
-  const scrollToBottom = useCallback(() => {
-    ref.current?.scrollIntoView({ behavior: 'smooth' });
-  }, []);
+  }, [messages, containerRef, scrollToBottom]);

  return { scrollRef: ref, isAtBottom, scrollToBottom };
 };
--- a/web/src/locales/en.ts
+++ b/web/src/locales/en.ts
@ -5,6 +5,7 @@ export default {
      deleteModalTitle: 'Are you sure to delete this item?',
      ok: 'Yes',
      cancel: 'No',
+      no: 'No',
      total: 'Total',
      rename: 'Rename',
      name: 'Name',
@ -575,6 +576,8 @@ This auto-tagging feature enhances retrieval by adding another layer of domain-s
        automatic: 'Automatic',
        manual: 'Manual',
      },
+      cancel: 'Cancel',
+      chatSetting: 'Chat setting',
    },
    setting: {
      profile: 'Profile',
--- a/web/src/locales/zh.ts
+++ b/web/src/locales/zh.ts
@ -569,6 +569,8 @@ General：实体和关系提取提示来自 GitHub - microsoft/graphrag：基于
        automatic: '自动',
        manual: '手动',
      },
+      cancel: '取消',
+      chatSetting: '聊天设置',
    },
    setting: {
      profile: '概要',
--- a/web/src/pages/agent/form/agent-form/index.tsx
+++ b/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"
--- 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,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>
--- a/web/src/pages/next-chats/chat/chat-box/single-chat-box.tsx
+++ b/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}
--- a/web/src/pages/next-chats/chat/index.tsx
+++ b/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}
--- a/web/src/pages/next-chats/chat/sessions.tsx
+++ b/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>