Fix: Added styles for empty states on the page. #10703 (#11588)

### What problem does this PR solve? Fix: Added styles for empty states on the page. ### Type of change - [x] Bug Fix (non-breaking change which fixes an issue)
2025-12-20 21:06:54 +08:00 · 2025-11-28 14:03:20 +08:00
parent dbdda0fbab
commit 7d05d4ced7
29 changed files with 866 additions and 419 deletions
--- a/web/src/components/empty/constant.tsx
+++ b/web/src/components/empty/constant.tsx
@ -0,0 +1,33 @@
+import { t } from 'i18next';
+import { HomeIcon } from '../svg-icon';
+
+export enum EmptyType {
+  Data = 'data',
+  SearchData = 'search-data',
+}
+
+export enum EmptyCardType {
+  Agent = 'agent',
+  Dataset = 'dataset',
+  Chat = 'chat',
+  Search = 'search',
+}
+
+export const EmptyCardData = {
+  [EmptyCardType.Agent]: {
+    icon: <HomeIcon name="agents" width={'24'} />,
+    title: t('empty.agentTitle'),
+  },
+  [EmptyCardType.Dataset]: {
+    icon: <HomeIcon name="datasets" width={'24'} />,
+    title: t('empty.datasetTitle'),
+  },
+  [EmptyCardType.Chat]: {
+    icon: <HomeIcon name="chats" width={'24'} />,
+    title: t('empty.chatTitle'),
+  },
+  [EmptyCardType.Search]: {
+    icon: <HomeIcon name="searches" width={'24'} />,
+    title: t('empty.searchTitle'),
+  },
+};
--- a/web/src/components/empty/empty.tsx
+++ b/web/src/components/empty/empty.tsx
@ -2,79 +2,33 @@ import { cn } from '@/lib/utils';
 import { t } from 'i18next';
 import { useIsDarkTheme } from '../theme-provider';

-import noDataIcon from './no data bri.svg';
-import noDataIconDark from './no data.svg';
-
-type EmptyProps = {
-  className?: string;
-  children?: React.ReactNode;
-};
-
-const EmptyIcon = () => {
-  const isDarkTheme = useIsDarkTheme();
+import { Plus } from 'lucide-react';
+import { useMemo } from 'react';
+import SvgIcon from '../svg-icon';
+import { EmptyCardData, EmptyCardType, EmptyType } from './constant';
+import { EmptyCardProps, EmptyProps } from './interface';

+const EmptyIcon = ({ name, width }: { name: string; width?: number }) => {
  return (
-    <img
-      className="h-20"
-      src={isDarkTheme ? noDataIconDark : noDataIcon}
-      alt={t('common.noData')}
-    />
-  );
-
-  return (
-    <svg
-      width="184"
-      height="152"
-      viewBox="0 0 184 152"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <title>{t('common.noData')}</title>
-      <g fill="none" fillRule="evenodd">
-        <g transform="translate(24 31.67)">
-          <ellipse
-            fillOpacity=".8"
-            fill={isDarkTheme ? '#28282A' : '#F5F5F7'}
-            cx="67.797"
-            cy="106.89"
-            rx="67.797"
-            ry="12.668"
-          ></ellipse>
-          <path
-            d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z"
-            fill={isDarkTheme ? '#736960' : '#AEB8C2'}
-          ></path>
-          <path
-            d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z"
-            fill="url(#linearGradient-1)"
-            transform="translate(13.56)"
-          ></path>
-          <path
-            d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z"
-            fill={isDarkTheme ? '#28282A' : '#F5F5F7'}
-          ></path>
-          <path
-            d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z"
-            fill={isDarkTheme ? '#45413A' : '#DCE0E6'}
-          ></path>
-        </g>
-        <path
-          d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z"
-          fill={isDarkTheme ? '#45413A' : '#DCE0E6'}
-        ></path>
-        <g
-          transform="translate(149.65 15.383)"
-          fill={isDarkTheme ? '#222' : '#FFF'}
-        >
-          <ellipse cx="20.654" cy="3.167" rx="2.849" ry="2.815"></ellipse>
-          <path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z"></path>
-        </g>
-      </g>
-    </svg>
+    // <img
+    //   className="h-20"
+    //   src={isDarkTheme ? noDataIconDark : noDataIcon}
+    //   alt={t('common.noData')}
+    // />
+    <SvgIcon name={name || 'empty/no-data-dark'} width={width || 42} />
  );
 };

 const Empty = (props: EmptyProps) => {
-  const { className, children } = props;
+  const { className, children, type, text, iconWidth } = props;
+  const isDarkTheme = useIsDarkTheme();
+
+  const name = useMemo(() => {
+    return isDarkTheme
+      ? `empty/no-${type || EmptyType.Data}-dark`
+      : `empty/no-${type || EmptyType.Data}-bri`;
+  }, [isDarkTheme, type]);
+
  return (
    <div
      className={cn(
@ -82,11 +36,12 @@ const Empty = (props: EmptyProps) => {
        className,
      )}
    >
-      <EmptyIcon />
+      <EmptyIcon name={name} width={iconWidth} />

      {!children && (
-        <div className="empty-text text-text-secondary">
-          {t('common.noData')}
+        <div className="empty-text text-text-secondary text-sm">
+          {text ||
+            (type === 'data' ? t('common.noData') : t('common.noResults'))}
        </div>
      )}
      {children}
@ -95,3 +50,65 @@ const Empty = (props: EmptyProps) => {
 };

 export default Empty;
+
+export const EmptyCard = (props: EmptyCardProps) => {
+  const { icon, className, children, title, description, style } = props;
+  return (
+    <div
+      className={cn(
+        'flex flex-col gap-3 items-start justify-start border border-dashed border-border-button rounded-md p-5 w-fit',
+        className,
+      )}
+      style={style}
+    >
+      {icon}
+      {title && <div className="text-text-primary text-base">{title}</div>}
+      {description && (
+        <div className="text-text-secondary text-sm">{description}</div>
+      )}
+      {children}
+    </div>
+  );
+};
+
+export const EmptyAppCard = (props: {
+  type: EmptyCardType;
+  onClick?: () => void;
+  showIcon?: boolean;
+  className?: string;
+  size?: 'small' | 'large';
+}) => {
+  const { type, showIcon, className } = props;
+  let defaultClass = '';
+  let style = {};
+  switch (props.size) {
+    case 'small':
+      style = { width: '256px' };
+      defaultClass = 'mt-1';
+      break;
+    case 'large':
+      style = { width: '480px' };
+      defaultClass = 'mt-5';
+      break;
+    default:
+      defaultClass = '';
+      break;
+  }
+  return (
+    <div className=" cursor-pointer " onClick={props.onClick}>
+      <EmptyCard
+        icon={showIcon ? EmptyCardData[type].icon : undefined}
+        title={EmptyCardData[type].title}
+        className={className}
+        style={style}
+        // description={EmptyCardData[type].description}
+      >
+        <div
+          className={cn(defaultClass, 'flex items-center justify-start w-full')}
+        >
+          <Plus size={24} />
+        </div>
+      </EmptyCard>
+    </div>
+  );
+};
--- a/web/src/components/empty/interface.ts
+++ b/web/src/components/empty/interface.ts
@ -0,0 +1,18 @@
+import { EmptyType } from './constant';
+
+export type EmptyProps = {
+  className?: string;
+  children?: React.ReactNode;
+  type?: EmptyType;
+  text?: string;
+  iconWidth?: number;
+};
+
+export type EmptyCardProps = {
+  icon?: React.ReactNode;
+  className?: string;
+  children?: React.ReactNode;
+  title?: string;
+  description?: string;
+  style?: React.CSSProperties;
+};
--- a/web/src/components/empty/no
+++ b/web/src/components/empty/no
@ -1,24 +0,0 @@
-<svg width="42" height="52" viewBox="0 0 42 52" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.175 16.22L6 30V42C6 43.0609 6.31607 44.0783 6.87868 44.8284C7.44129 45.5786 8.20435 46 9 46H33C33.7956 46 34.5587 45.5786 35.1213 44.8284C35.6839 44.0783 36 43.0609 36 42V30L30.825 16.22C30.5766 15.5536 30.1938 14.9927 29.7194 14.6006C29.2451 14.2084 28.6981 14.0004 28.14 14H13.86C13.3019 14.0004 12.7549 14.2084 12.2806 14.6006C11.8062 14.9927 11.4234 15.5536 11.175 16.22Z" stroke="url(#paint0_linear_493_44259)" stroke-opacity="0.2" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M11.175 8.22L6 22V34C6 35.0609 6.31607 36.0783 6.87868 36.8284C7.44129 37.5786 8.20435 38 9 38H33C33.7957 38 34.5587 37.5786 35.1213 36.8284C35.6839 36.0783 36 35.0609 36 34V22L30.825 8.22C30.5766 7.55357 30.1938 6.99274 29.7194 6.60056C29.2451 6.20838 28.6981 6.00039 28.14 6H13.86C13.3019 6.00039 12.7549 6.20838 12.2806 6.60056C11.8062 6.99274 11.4234 7.55357 11.175 8.22Z" fill="white" stroke="url(#paint1_linear_493_44259)" stroke-opacity="0.8" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M11.175 12.22L6 26V38C6 39.0609 6.31607 40.0783 6.87868 40.8284C7.44129 41.5786 8.20435 42 9 42H33C33.7957 42 34.5587 41.5786 35.1213 40.8284C35.6839 40.0783 36 39.0609 36 38V26L30.825 12.22C30.5766 11.5536 30.1938 10.9927 29.7194 10.6006C29.2451 10.2084 28.6981 10.0004 28.14 10H13.86C13.3019 10.0004 12.7549 10.2084 12.2806 10.6006C11.8062 10.9927 11.4234 11.5536 11.175 12.22Z" fill="white" stroke="url(#paint2_linear_493_44259)" stroke-opacity="0.5" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M36 22.1641H27L24 28.1641H18L15 22.1641H6M36 22.1641V34.1641C36 35.2249 35.6839 36.2423 35.1213 36.9925C34.5587 37.7426 33.7956 38.1641 33 38.1641H9C8.20435 38.1641 7.44129 37.7426 6.87868 36.9925C6.31607 36.2423 6 35.2249 6 34.1641V22.1641M36 22.1641L30.825 8.38406C30.5766 7.71764 30.1938 7.1568 29.7194 6.76462C29.2451 6.37244 28.6981 6.16446 28.14 6.16406H13.86C13.3019 6.16446 12.7549 6.37244 12.2806 6.76462C11.8062 7.1568 11.4234 7.71764 11.175 8.38406L6 22.1641" stroke="url(#paint3_linear_493_44259)" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
-<defs>
-<linearGradient id="paint0_linear_493_44259" x1="21" y1="14" x2="9.71922" y2="50.3541" gradientUnits="userSpaceOnUse">
-<stop offset="0.195167" stop-color="#161618" stop-opacity="0"/>
-<stop offset="1" stop-color="#C2C2C2"/>
-</linearGradient>
-<linearGradient id="paint1_linear_493_44259" x1="21" y1="6" x2="9.71922" y2="42.3541" gradientUnits="userSpaceOnUse">
-<stop offset="0.195167" stop-color="white" stop-opacity="0"/>
-<stop offset="1" stop-color="#C2C2C2"/>
-</linearGradient>
-<linearGradient id="paint2_linear_493_44259" x1="21" y1="10" x2="9.71922" y2="46.3541" gradientUnits="userSpaceOnUse">
-<stop offset="0.195167" stop-color="#161618" stop-opacity="0"/>
-<stop offset="1" stop-color="#C2C2C2"/>
-</linearGradient>
-<linearGradient id="paint3_linear_493_44259" x1="21" y1="6.16406" x2="21" y2="38.1641" gradientUnits="userSpaceOnUse">
-<stop stop-color="#161618"/>
-<stop offset="1" stop-color="#7B7B7C"/>
-</linearGradient>
-</defs>
-</svg>
--- a/web/src/components/empty/no
+++ b/web/src/components/empty/no
@ -1,24 +0,0 @@
-<svg width="42" height="52" viewBox="0 0 42 52" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.175 16.22L6 30V42C6 43.0609 6.31607 44.0783 6.87868 44.8284C7.44129 45.5786 8.20435 46 9 46H33C33.7956 46 34.5587 45.5786 35.1213 44.8284C35.6839 44.0783 36 43.0609 36 42V30L30.825 16.22C30.5766 15.5536 30.1938 14.9927 29.7194 14.6006C29.2451 14.2084 28.6981 14.0004 28.14 14H13.86C13.3019 14.0004 12.7549 14.2084 12.2806 14.6006C11.8062 14.9927 11.4234 15.5536 11.175 16.22Z" stroke="url(#paint0_linear_486_6708)" stroke-opacity="0.2" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M11.175 8.22L6 22V34C6 35.0609 6.31607 36.0783 6.87868 36.8284C7.44129 37.5786 8.20435 38 9 38H33C33.7957 38 34.5587 37.5786 35.1213 36.8284C35.6839 36.0783 36 35.0609 36 34V22L30.825 8.22C30.5766 7.55357 30.1938 6.99274 29.7194 6.60056C29.2451 6.20838 28.6981 6.00039 28.14 6H13.86C13.3019 6.00039 12.7549 6.20838 12.2806 6.60056C11.8062 6.99274 11.4234 7.55357 11.175 8.22Z" fill="#222224" stroke="url(#paint1_linear_486_6708)" stroke-opacity="0.8" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M11.175 12.22L6 26V38C6 39.0609 6.31607 40.0783 6.87868 40.8284C7.44129 41.5786 8.20435 42 9 42H33C33.7957 42 34.5587 41.5786 35.1213 40.8284C35.6839 40.0783 36 39.0609 36 38V26L30.825 12.22C30.5766 11.5536 30.1938 10.9927 29.7194 10.6006C29.2451 10.2084 28.6981 10.0004 28.14 10H13.86C13.3019 10.0004 12.7549 10.2084 12.2806 10.6006C11.8062 10.9927 11.4234 11.5536 11.175 12.22Z" fill="#222224" stroke="url(#paint2_linear_486_6708)" stroke-opacity="0.5" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M36 22.1641H27L24 28.1641H18L15 22.1641H6M36 22.1641V34.1641C36 35.2249 35.6839 36.2423 35.1213 36.9925C34.5587 37.7426 33.7956 38.1641 33 38.1641H9C8.20435 38.1641 7.44129 37.7426 6.87868 36.9925C6.31607 36.2423 6 35.2249 6 34.1641V22.1641M36 22.1641L30.825 8.38406C30.5766 7.71764 30.1938 7.1568 29.7194 6.76462C29.2451 6.37244 28.6981 6.16446 28.14 6.16406H13.86C13.3019 6.16446 12.7549 6.37244 12.2806 6.76462C11.8062 7.1568 11.4234 7.71764 11.175 8.38406L6 22.1641" stroke="url(#paint3_linear_486_6708)" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
-<defs>
-<linearGradient id="paint0_linear_486_6708" x1="21" y1="14" x2="9.71922" y2="50.3541" gradientUnits="userSpaceOnUse">
-<stop offset="0.195167" stop-color="white" stop-opacity="0"/>
-<stop offset="1" stop-color="#C2C2C2"/>
-</linearGradient>
-<linearGradient id="paint1_linear_486_6708" x1="21" y1="6" x2="9.71922" y2="42.3541" gradientUnits="userSpaceOnUse">
-<stop offset="0.195167" stop-color="white" stop-opacity="0"/>
-<stop offset="1" stop-color="#C2C2C2"/>
-</linearGradient>
-<linearGradient id="paint2_linear_486_6708" x1="21" y1="10" x2="9.71922" y2="46.3541" gradientUnits="userSpaceOnUse">
-<stop offset="0.195167" stop-color="white" stop-opacity="0"/>
-<stop offset="1" stop-color="#C2C2C2"/>
-</linearGradient>
-<linearGradient id="paint3_linear_486_6708" x1="21" y1="6.16406" x2="21" y2="38.1641" gradientUnits="userSpaceOnUse">
-<stop stop-color="white"/>
-<stop offset="1" stop-color="#7B7B7C"/>
-</linearGradient>
-</defs>
-</svg>