dify

dify/web/app/components/base/list-empty/horizontal-line.tsx

@@ -0,0 +1,21 @@
+type HorizontalLineProps = {
+  className?: string
+}
+const HorizontalLine = ({
+  className,
+}: HorizontalLineProps) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="240" height="2" viewBox="0 0 240 2" fill="none" className={className}>
+      <path d="M0 1H240" stroke="url(#paint0_linear_8619_59125)"/>
+      <defs>
+        <linearGradient id="paint0_linear_8619_59125" x1="240" y1="9.99584" x2="3.95539e-05" y2="9.88094" gradientUnits="userSpaceOnUse">
+          <stop stopColor="white" stopOpacity="0.01"/>
+          <stop offset="0.9031" stopColor="#101828" stopOpacity="0.04"/>
+          <stop offset="1" stopColor="white" stopOpacity="0.01"/>
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+
+export default HorizontalLine

dify/web/app/components/base/list-empty/index.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import ListEmpty from '.'
+
+const meta = {
+  title: 'Base/Data Display/ListEmpty',
+  component: ListEmpty,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Large empty state card used in panels and drawers to hint at the next action for the user.',
+      },
+    },
+  },
+  args: {
+    title: 'No items yet',
+    description: (
+      <p className="text-xs leading-5 text-text-tertiary">
+        Add your first entry to see it appear here. Empty states help users discover what happens next.
+      </p>
+    ),
+  },
+  argTypes: {
+    description: { control: false },
+    icon: { control: false },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ListEmpty>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const WithCustomIcon: Story = {
+  args: {
+    title: 'Connect a data source',
+    description: (
+      <p className="text-xs leading-5 text-text-secondary">
+        Choose a database, knowledge base, or upload documents to get started with retrieval.
+      </p>
+    ),
+    icon: (
+      <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-primary-100 via-primary-200 to-primary-300 text-primary-700 shadow-sm">
+        {'\u{26A1}\u{FE0F}'}
+      </div>
+    ),
+  },
+}

dify/web/app/components/base/list-empty/index.tsx

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react'
+import React from 'react'
+import { Variable02 } from '../icons/src/vender/solid/development'
+import VerticalLine from './vertical-line'
+import HorizontalLine from './horizontal-line'
+
+type ListEmptyProps = {
+  title?: string
+  description?: ReactNode
+  icon?: ReactNode
+}
+
+const ListEmpty = ({
+  title,
+  description,
+  icon,
+}: ListEmptyProps) => {
+  return (
+    <div className='flex w-[320px] flex-col items-start gap-2 rounded-[10px] bg-workflow-process-bg p-4'>
+      <div className='flex h-10 w-10 items-center justify-center gap-2 rounded-[10px]'>
+        <div className='relative flex grow items-center justify-center gap-2 self-stretch rounded-[10px] border-[0.5px]
+          border-components-card-border bg-components-card-bg p-1 shadow-lg'>
+          {icon || <Variable02 className='h-5 w-5 shrink-0 text-text-accent' />}
+          <VerticalLine className='absolute -right-[1px] top-1/2 -translate-y-1/4'/>
+          <VerticalLine className='absolute -left-[1px] top-1/2 -translate-y-1/4'/>
+          <HorizontalLine className='absolute left-3/4 top-0 -translate-x-1/4 -translate-y-1/2'/>
+          <HorizontalLine className='absolute left-3/4 top-full -translate-x-1/4 -translate-y-1/2' />
+        </div>
+      </div>
+      <div className='flex flex-col items-start gap-1 self-stretch'>
+        <div className='system-sm-medium text-text-secondary'>{title}</div>
+        {description}
+      </div>
+    </div>
+  )
+}
+
+export default ListEmpty

dify/web/app/components/base/list-empty/vertical-line.tsx

@@ -0,0 +1,21 @@
+type VerticalLineProps = {
+  className?: string
+}
+const VerticalLine = ({
+  className,
+}: VerticalLineProps) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="2" height="132" viewBox="0 0 2 132" fill="none" className={className}>
+      <path d="M1 0L1 132" stroke="url(#paint0_linear_8619_59128)"/>
+      <defs>
+        <linearGradient id="paint0_linear_8619_59128" x1="-7.99584" y1="132" x2="-7.96108" y2="6.4974e-07" gradientUnits="userSpaceOnUse">
+          <stop stopColor="white" stopOpacity="0.01"/>
+          <stop offset="0.877606" stopColor="#101828" stopOpacity="0.04"/>
+          <stop offset="1" stopColor="white" stopOpacity="0.01"/>
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+
+export default VerticalLine