Fix:Optimize metadata and optimize the empty state style of the agent page. (#12960)

### What problem does this PR solve?
Fix:Optimize metadata and optimize the empty state style of the agent
page.

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/components/bulk-operate-bar.tsx

@@ -60,8 +60,12 @@ export function BulkOperateBar({
                 }}
               >
                 <Button
-                  variant={'ghost'}
+                  variant={!isDeleteItem(x.id) ? 'ghost' : 'delete'}
                   onClick={isDeleteItem(x.id) ? () => {} : x.onClick}
+                  className={cn({
+                    ['text-state-error border border-state-error bg-state-error/5']:
+                      isDeleteItem(x.id),
+                  })}
                 >
                   {x.icon} {x.label}
                 </Button>

web/src/components/empty/empty.tsx

@@ -78,8 +78,9 @@ export const EmptyAppCard = (props: {
   className?: string;
   isSearch?: boolean;
   size?: 'small' | 'large';
+  children?: React.ReactNode;
 }) => {
-  const { type, showIcon, className, isSearch } = props;
+  const { type, showIcon, className, isSearch, children } = props;
   let defaultClass = '';
   let style = {};
   switch (props.size) {
@@ -96,20 +97,17 @@ export const EmptyAppCard = (props: {
       break;
   }
   return (
-    <div
-      className=" cursor-pointer "
-      onClick={isSearch ? undefined : props.onClick}
-    >
+    <div onClick={isSearch ? undefined : props.onClick}>
       <EmptyCard
         icon={showIcon ? EmptyCardData[type].icon : undefined}
         title={
           isSearch ? EmptyCardData[type].notFound : EmptyCardData[type].title
         }
-        className={className}
+        className={cn('cursor-pointer ', className)}
         style={style}
         // description={EmptyCardData[type].description}
       >
-        {!isSearch && (
+        {!isSearch && !children && (
           <div
             className={cn(
               defaultClass,
@@ -119,6 +117,7 @@ export const EmptyAppCard = (props: {
             <Plus size={24} />
           </div>
         )}
+        {children}
       </EmptyCard>
     </div>
   );

web/src/pages/agents/index.tsx

@@ -86,11 +86,35 @@ export default function Agents() {
           <EmptyAppCard
             showIcon
             size="large"
-            className="w-[480px] p-14"
+            className="w-[480px] p-14 !cursor-default"
             isSearch={!!searchString}
             type={EmptyCardType.Agent}
-            onClick={() => showCreatingModal()}
-          />
+            // onClick={() => showCreatingModal()}
+          >
+            <div className="flex flex-col gap-y-5 text-text-secondary text-sm pt-5">
+              <div
+                className="flex items-center gap-x-2 hover:text-text-primary cursor-pointer"
+                onClick={showCreatingModal}
+              >
+                <Clipboard size={14} />
+                {t('flow.createFromBlank')}
+              </div>
+              <div
+                className="flex items-center gap-x-2 hover:text-text-primary cursor-pointer"
+                onClick={navigateToAgentTemplates}
+              >
+                <ClipboardPlus size={14} />
+                {t('flow.createFromTemplate')}
+              </div>
+              <div
+                className="flex items-center gap-x-2 hover:text-text-primary cursor-pointer"
+                onClick={handleImportJson}
+              >
+                <FileInput size={14} />
+                {t('flow.importJsonFile')}
+              </div>
+            </div>
+          </EmptyAppCard>
         </div>
       )}
       <section className="flex flex-col w-full flex-1">

web/src/pages/dataset/components/metedata/hooks/use-manage-modal.ts

@@ -11,7 +11,11 @@ import { RowSelectionState } from '@tanstack/react-table';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router';
-import { DEFAULT_VALUE_TYPE, MetadataType } from '../constant';
+import {
+  DEFAULT_VALUE_TYPE,
+  MetadataType,
+  metadataValueTypeEnum,
+} from '../constant';
 import {
   IBuiltInMetadataItem,
   IMetaDataReturnJSONSettings,
@@ -163,16 +167,16 @@ export const useMetadataOperations = () => {
       newValue: string | string[],
       type?: MetadataValueType,
     ) => {
-      // let newValuesRes: string | string[];
-      // if (type !== metadataValueTypeEnum['list']) {
-      //   if (Array.isArray(newValue) && newValue.length > 0) {
-      //     newValuesRes = newValue[0];
-      //   } else {
-      //     newValuesRes = newValue;
-      //   }
-      // } else {
-      //   newValuesRes = newValue;
-      // }
+      let newValuesRes: string | string[];
+      if (type !== metadataValueTypeEnum['list']) {
+        if (Array.isArray(newValue) && newValue.length > 0) {
+          newValuesRes = newValue[0];
+        } else {
+          newValuesRes = newValue;
+        }
+      } else {
+        newValuesRes = newValue;
+      }
       setOperations((prev) => {
         let updatedUpdates = [...prev.updates];
         const existsIndex = prev.updates.findIndex(
@@ -185,7 +189,7 @@ export const useMetadataOperations = () => {
           updatedUpdates[existsIndex] = {
             key,
             match: originalValue,
-            value: newValue,
+            value: newValuesRes,
             valueType: type || DEFAULT_VALUE_TYPE,
           };
 
@@ -194,7 +198,7 @@ export const useMetadataOperations = () => {
           updatedUpdates.push({
             key,
             match: originalValue,
-            value: newValue,
+            value: newValuesRes,
             valueType: type,
           });
         }

web/src/pages/dataset/components/metedata/manage-modal.tsx

@@ -19,7 +19,6 @@ import {
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { useSetModalState } from '@/hooks/common-hooks';
 import { useRowSelection } from '@/hooks/logic-hooks/use-row-selection';
-import { Routes } from '@/routes';
 import {
   flexRender,
   getCoreRowModel,
@@ -321,7 +320,7 @@ export const ManageMetadataModal = (props: IManageModalProps) => {
                 {secondTitle || t('knowledgeDetails.metadata.metadata')}
               </div>
               <div>
-                {metadataType === MetadataType.Manage && (
+                {/* {metadataType === MetadataType.Manage && (
                   <Button
                     variant={'ghost'}
                     className="border border-border-button"
@@ -332,7 +331,7 @@ export const ManageMetadataModal = (props: IManageModalProps) => {
                   >
                     {t('knowledgeDetails.metadata.toMetadataSetting')}
                   </Button>
-                )}
+                )} */}
                 {isCanAdd && activeTab !== 'built-in' && (
                   <Button
                     variant={'ghost'}
@@ -341,6 +340,7 @@ export const ManageMetadataModal = (props: IManageModalProps) => {
                     onClick={handAddValueRow}
                   >
                     <Plus />
+                    {t('common.add')}
                   </Button>
                 )}
               </div>

web/src/pages/dataset/dataset/index.tsx

@@ -100,7 +100,7 @@ export default function Dataset() {
   const handleAddMetadataWithDocuments = () => {
     showManageMetadataModal({
       type: MetadataType.Manage,
-      isCanAdd: false,
+      isCanAdd: true,
       isEditField: false,
       isDeleteSingleValue: true,
       isAddValue: true,
@@ -254,7 +254,10 @@ export default function Dataset() {
               )
             }
             visible={manageMetadataVisible}
-            hideModal={hideManageMetadataModal}
+            hideModal={() => {
+              setRowSelection({});
+              hideManageMetadataModal();
+            }}
             // selectedRowKeys={selectedRowKeys}
             tableData={tableData}
             isCanAdd={metadataConfig.isCanAdd}

web/src/pages/dataset/dataset/use-bulk-operate-dataset.tsx

@@ -136,6 +136,11 @@ export function useBulkOperateDataset({
       icon: <CircleX />,
       onClick: handleCancelClick,
     },
+    {
+      id: 'batch-metadata',
+      label: t('knowledgeDetails.metadata.metadata'),
+      icon: <Cylinder />,
+    },
     {
       id: 'delete',
       label: t('common.delete'),
@@ -147,11 +152,6 @@ export function useBulkOperateDataset({
         }
       },
     },
-    {
-      id: 'batch-metadata',
-      label: t('knowledgeDetails.metadata.metadata'),
-      icon: <Cylinder />,
-    },
   ];
 
   return { chunkNum, list, visible, hideModal, showModal, handleRunClick };