From 131f272e69bf8421dca000fd34782e3b5fa6fc43 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Mon, 3 Mar 2025 15:44:37 +0800
Subject: [PATCH] Feat: Combine Select and LlmSettingFieldItems into LLMSelect.
 #3221 (#5548)

### What problem does this PR solve?

Feat: Combine Select and LlmSettingFieldItems into LLMSelect. #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
---
 web/src/components/llm-select/index.tsx | 35 +++++++++++++++++--------
 web/src/pages/agent/form-sheet/next.tsx |  8 +++++-
 web/src/pages/agent/index.tsx           |  6 ++---
 web/src/pages/agent/operator-icon.tsx   |  7 +++--
 4 files changed, 39 insertions(+), 17 deletions(-)

diff --git a/web/src/components/llm-select/index.tsx b/web/src/components/llm-select/index.tsx
index 04e805f79..03f5ad755 100644
--- a/web/src/components/llm-select/index.tsx
+++ b/web/src/components/llm-select/index.tsx
@@ -1,8 +1,10 @@
 import { LlmModelType } from '@/constants/knowledge';
 import { useComposeLlmOptionsByModelTypes } from '@/hooks/llm-hooks';
+import * as SelectPrimitive from '@radix-ui/react-select';
 import { Popover as AntPopover, Select as AntSelect } from 'antd';
-import { useState } from 'react';
+import { forwardRef, useState } from 'react';
 import LlmSettingItems from '../llm-setting-items';
+import { LlmSettingFieldItems } from '../llm-setting-items/next';
 import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
 import { Select, SelectTrigger, SelectValue } from '../ui/select';
 
@@ -50,11 +52,18 @@ const LLMSelect = ({ id, value, onChange, disabled }: IProps) => {
 
 export default LLMSelect;
 
-export function NextLLMSelect({ value, onChange, disabled }: IProps) {
+export const NextLLMSelect = forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  IProps
+>(({ value, disabled }, ref) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const modelOptions = useComposeLlmOptionsByModelTypes([
+    LlmModelType.Chat,
+    LlmModelType.Image2text,
+  ]);
 
   return (
-    <Select value={value} onValueChange={onChange} disabled={disabled}>
+    <Select disabled={disabled} value={value}>
       <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
         <PopoverTrigger asChild>
           <SelectTrigger
@@ -62,19 +71,23 @@ export function NextLLMSelect({ value, onChange, disabled }: IProps) {
               e.preventDefault();
               setIsPopoverOpen(true);
             }}
+            ref={ref}
           >
-            <SelectValue placeholder="xxx" />
+            <SelectValue>
+              {
+                modelOptions
+                  .flatMap((x) => x.options)
+                  .find((x) => x.value === value)?.label
+              }
+            </SelectValue>
           </SelectTrigger>
         </PopoverTrigger>
         <PopoverContent side={'left'}>
-          <LlmSettingItems
-            formItemLayout={{
-              labelCol: { span: 10 },
-              wrapperCol: { span: 14 },
-            }}
-          ></LlmSettingItems>
+          <LlmSettingFieldItems></LlmSettingFieldItems>
         </PopoverContent>
       </Popover>
     </Select>
   );
-}
+});
+
+NextLLMSelect.displayName = 'LLMSelect';
diff --git a/web/src/pages/agent/form-sheet/next.tsx b/web/src/pages/agent/form-sheet/next.tsx
index 8fb756e77..d7dd03a5f 100644
--- a/web/src/pages/agent/form-sheet/next.tsx
+++ b/web/src/pages/agent/form-sheet/next.tsx
@@ -1,5 +1,10 @@
 import { Input } from '@/components/ui/input';
-import { Sheet, SheetContent, SheetHeader } from '@/components/ui/sheet';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
 import { useTranslate } from '@/hooks/common-hooks';
 import { IModalProps } from '@/interfaces/common';
 import { RAGFlowNodeType } from '@/interfaces/database/flow';
@@ -88,6 +93,7 @@ const FormSheet = ({
 
   return (
     <Sheet open={visible} modal={false}>
+      <SheetTitle className="hidden"></SheetTitle>
       <SheetContent className="bg-white top-20" closeIcon={false}>
         <SheetHeader>
           <section className="flex-col border-b pb-2">
diff --git a/web/src/pages/agent/index.tsx b/web/src/pages/agent/index.tsx
index 2654418d3..a50b0f3f6 100644
--- a/web/src/pages/agent/index.tsx
+++ b/web/src/pages/agent/index.tsx
@@ -49,14 +49,14 @@ export default function Agent() {
     hideFileUploadModal,
   } = useHandleExportOrImportJsonFile();
 
-  useFetchDataOnMount();
+  const { flowDetail } = useFetchDataOnMount();
 
   return (
     <section>
-      <PageHeader back={navigateToAgentList} title="Agent 01">
+      <PageHeader back={navigateToAgentList} title={flowDetail.title}>
         <div className="flex items-center gap-2">
           <DropdownMenu>
-            <DropdownMenuTrigger>
+            <DropdownMenuTrigger asChild>
               <Button variant={'icon'} size={'icon'}>
                 <EllipsisVertical />
               </Button>
diff --git a/web/src/pages/agent/operator-icon.tsx b/web/src/pages/agent/operator-icon.tsx
index ac78f212b..593d617c4 100644
--- a/web/src/pages/agent/operator-icon.tsx
+++ b/web/src/pages/agent/operator-icon.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Operator, operatorIconMap } from './constant';
 
 interface IProps {
@@ -8,8 +7,12 @@ interface IProps {
   color?: string;
 }
 
+const Empty = () => {
+  return <div className="hidden"></div>;
+};
+
 const OperatorIcon = ({ name, fontSize, width, color }: IProps) => {
-  const Icon = operatorIconMap[name] || React.Fragment;
+  const Icon = operatorIconMap[name] || Empty;
   return (
     <Icon
       className={'text-2xl max-h-6 max-w-6 text-[rgb(59, 118, 244)]'}