feat: knowledge pipeline (#25360)

Signed-off-by: -LAN- <laipz8200@outlook.com>
Co-authored-by: twwu <twwu@dify.ai>
Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>
Co-authored-by: jyong <718720800@qq.com>
Co-authored-by: Wu Tianwei <30284043+WTW0313@users.noreply.github.com>
Co-authored-by: QuantumGhost <obelisk.reg+git@gmail.com>
Co-authored-by: lyzno1 <yuanyouhuilyz@gmail.com>
Co-authored-by: quicksand <quicksandzn@gmail.com>
Co-authored-by: Jyong <76649700+JohnJyong@users.noreply.github.com>
Co-authored-by: lyzno1 <92089059+lyzno1@users.noreply.github.com>
Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
Co-authored-by: Yongtao Huang <yongtaoh2022@gmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: nite-knite <nkCoding@gmail.com>
Co-authored-by: Hanqing Zhao <sherry9277@gmail.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: Harry <xh001x@hotmail.com>

web/app/components/base/segmented-control/index.css

@@ -0,0 +1,81 @@
+@tailwind components;
+
+@layer components {
+  .segmented-control {
+    @apply flex items-center bg-components-segmented-control-bg-normal gap-x-px
+  }
+
+  .segmented-control-regular,
+  .segmented-control-large {
+    @apply rounded-lg
+  }
+
+  .segmented-control-large.padding,
+  .segmented-control-regular.padding {
+    @apply p-0.5
+  }
+
+  .segmented-control-small {
+    @apply rounded-md
+  }
+
+  .segmented-control-small.padding {
+    @apply p-px
+  }
+
+  .no-padding {
+    @apply border-[0.5px] border-divider-subtle
+  }
+
+  .segmented-control-item {
+    @apply flex items-center justify-center relative border-[0.5px] border-transparent
+  }
+
+  .segmented-control-item-regular {
+    @apply px-2 h-7 gap-x-0.5 rounded-lg
+  }
+
+  .segmented-control-item-small {
+    @apply p-px h-[22px] rounded-md
+  }
+
+  .segmented-control-item-large {
+    @apply px-2.5 h-8 gap-x-0.5 rounded-lg
+  }
+
+  .segmented-control-item-disabled {
+    @apply cursor-not-allowed text-text-disabled
+  }
+
+  .default {
+    @apply hover:bg-state-base-hover text-text-tertiary hover:text-text-secondary
+  }
+
+  .active {
+    @apply border-components-segmented-control-item-active-border bg-components-segmented-control-item-active-bg shadow-xs shadow-shadow-shadow-3 text-text-secondary
+  }
+
+  .disabled {
+    @apply cursor-not-allowed text-text-disabled hover:text-text-disabled bg-transparent hover:bg-transparent
+  }
+
+  .active.accent {
+    @apply text-text-accent
+  }
+
+  .active.accent-light {
+    @apply text-text-accent-light-mode-only
+  }
+
+  .item-text-regular {
+    @apply p-0.5
+  }
+
+  .item-text-small {
+    @apply p-0.5 pr-1
+  }
+
+  .item-text-large {
+    @apply px-0.5
+  }
+}

web/app/components/base/segmented-control/index.spec.tsx

@@ -0,0 +1,98 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import SegmentedControl from './index'
+
+describe('SegmentedControl', () => {
+  const options = [
+    { value: 'option1', text: 'Option 1' },
+    { value: 'option2', text: 'Option 2' },
+    { value: 'option3', text: 'Option 3' },
+  ]
+
+  const optionsWithDisabled = [
+    { value: 'option1', text: 'Option 1' },
+    { value: 'option2', text: 'Option 2', disabled: true },
+    { value: 'option3', text: 'Option 3' },
+  ]
+
+  const onSelectMock = jest.fn((value: string | number | symbol) => value)
+
+  beforeEach(() => {
+    onSelectMock.mockClear()
+  })
+
+  it('renders all options correctly', () => {
+    render(<SegmentedControl options={options} value='option1' onChange={onSelectMock} />)
+
+    options.forEach((option) => {
+      expect(screen.getByText(option.text)).toBeInTheDocument()
+    })
+
+    const divider = screen.getByTestId('segmented-control-divider-1')
+    expect(divider).toBeInTheDocument()
+  })
+
+  it('renders with custom activeClassName when provided', () => {
+    render(
+      <SegmentedControl
+        options={options}
+        value='option1'
+        onChange={onSelectMock}
+        activeClassName='custom-active-class'
+      />,
+    )
+
+    const selectedOption = screen.getByText('Option 1').closest('button')
+    expect(selectedOption).toHaveClass('custom-active-class')
+  })
+
+  it('highlights the selected option', () => {
+    render(<SegmentedControl options={options} value='option2' onChange={onSelectMock} />)
+
+    const selectedOption = screen.getByText('Option 2').closest('button')
+    expect(selectedOption).toHaveClass('active')
+  })
+
+  it('calls onChange when an option is clicked', () => {
+    render(<SegmentedControl options={options} value='option1' onChange={onSelectMock} />)
+
+    fireEvent.click(screen.getByText('Option 3'))
+    expect(onSelectMock).toHaveBeenCalledWith('option3')
+  })
+
+  it('does not call onChange when clicking the already selected option', () => {
+    render(<SegmentedControl options={options} value='option1' onChange={onSelectMock} />)
+
+    fireEvent.click(screen.getByText('Option 1'))
+    expect(onSelectMock).not.toHaveBeenCalled()
+  })
+
+  it('handles disabled state correctly', () => {
+    render(<SegmentedControl options={optionsWithDisabled} value='option1' onChange={onSelectMock} />)
+
+    fireEvent.click(screen.getByText('Option 2'))
+    expect(onSelectMock).not.toHaveBeenCalled()
+
+    const optionElement = screen.getByText('Option 2').closest('button')
+    expect(optionElement).toHaveAttribute('disabled')
+    expect(optionElement).toHaveClass('disabled')
+
+    fireEvent.click(screen.getByText('Option 3'))
+    expect(onSelectMock).toHaveBeenCalledWith('option3')
+  })
+
+  it('renders with custom className when provided', () => {
+    const customClass = 'my-custom-class'
+    render(
+      <SegmentedControl
+        options={options}
+        value='option1'
+        onChange={onSelectMock}
+        className={customClass}
+      />,
+    )
+
+    const selectedOption = screen.getByText('Option 1').closest('button')?.closest('div')
+    expect(selectedOption).toHaveClass(customClass)
+  })
+})

web/app/components/base/segmented-control/index.tsx

@@ -1,31 +1,110 @@
 import React from 'react'
-import classNames from '@/utils/classnames'
+import cn from '@/utils/classnames'
 import type { RemixiconComponentType } from '@remixicon/react'
 import Divider from '../divider'
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+import './index.css'
+
+type SegmentedControlOption<T> = {
+  value: T
+  text?: string
+  Icon?: RemixiconComponentType
+  count?: number
+  disabled?: boolean
+}
 
-// Updated generic type to allow enum values
 type SegmentedControlProps<T extends string | number | symbol> = {
-  options: { Icon: RemixiconComponentType, text: string, value: T }[]
+  options: SegmentedControlOption<T>[]
   value: T
   onChange: (value: T) => void
   className?: string
+  activeClassName?: string
+  btnClassName?: string
 }
 
+const SegmentedControlVariants = cva(
+  'segmented-control',
+  {
+    variants: {
+      size: {
+        regular: 'segmented-control-regular',
+        small: 'segmented-control-small',
+        large: 'segmented-control-large',
+      },
+      padding: {
+        none: 'no-padding',
+        with: 'padding',
+      },
+    },
+    defaultVariants: {
+      size: 'regular',
+      padding: 'with',
+    },
+  },
+)
+
+const SegmentedControlItemVariants = cva(
+  'segmented-control-item disabled:segmented-control-item-disabled',
+  {
+    variants: {
+      size: {
+        regular: ['segmented-control-item-regular', 'system-sm-medium'],
+        small: ['segmented-control-item-small', 'system-xs-medium'],
+        large: ['segmented-control-item-large', 'system-md-semibold'],
+      },
+      activeState: {
+        default: '',
+        accent: 'accent',
+        accentLight: 'accent-light',
+      },
+    },
+    defaultVariants: {
+      size: 'regular',
+      activeState: 'default',
+    },
+  },
+)
+
+const ItemTextWrapperVariants = cva(
+  'item-text',
+  {
+    variants: {
+      size: {
+        regular: 'item-text-regular',
+        small: 'item-text-small',
+        large: 'item-text-large',
+      },
+    },
+    defaultVariants: {
+      size: 'regular',
+    },
+  },
+)
+
 export const SegmentedControl = <T extends string | number | symbol>({
   options,
   value,
   onChange,
   className,
-}: SegmentedControlProps<T>): JSX.Element => {
+  size,
+  padding,
+  activeState,
+  activeClassName,
+  btnClassName,
+}: SegmentedControlProps<T>
+  & VariantProps<typeof SegmentedControlVariants>
+  & VariantProps<typeof SegmentedControlItemVariants>
+  & VariantProps<typeof ItemTextWrapperVariants>) => {
   const selectedOptionIndex = options.findIndex(option => option.value === value)
 
   return (
-    <div className={classNames(
-      'flex items-center gap-x-[1px] rounded-lg bg-components-segmented-control-bg-normal p-0.5',
+    <div className={cn(
+      SegmentedControlVariants({ size, padding }),
       className,
     )}>
       {options.map((option, index) => {
-        const { Icon } = option
+        const { Icon, text, count, disabled } = option
         const isSelected = index === selectedOptionIndex
         const isNextSelected = index === selectedOptionIndex - 1
         const isLast = index === options.length - 1
@@ -33,28 +112,32 @@ export const SegmentedControl = <T extends string | number | symbol>({
           <button
             type='button'
             key={String(option.value)}
-            className={classNames(
-              'border-0.5 group relative flex items-center justify-center gap-x-0.5 rounded-lg border-transparent px-2 py-1',
-              isSelected
-                ? 'border-components-segmented-control-item-active-border bg-components-segmented-control-item-active-bg shadow-xs shadow-shadow-shadow-3'
-                : 'hover:bg-state-base-hover',
+            className={cn(
+              isSelected ? 'active' : 'default',
+              SegmentedControlItemVariants({ size, activeState: isSelected ? activeState : 'default' }),
+              isSelected && activeClassName,
+              disabled && 'disabled',
+              btnClassName,
             )}
-            onClick={() => onChange(option.value)}
+            onClick={() => {
+              if (!isSelected)
+                onChange(option.value)
+            }}
+            disabled={disabled}
           >
-            <span className='flex h-5 w-5 items-center justify-center'>
-              <Icon className={classNames(
-                'h-4 w-4 text-text-tertiary',
-                isSelected ? 'text-text-accent-light-mode-only' : 'group-hover:text-text-secondary',
-              )} />
-            </span>
-            <span className={classNames(
-              'system-sm-medium p-0.5 text-text-tertiary',
-              isSelected ? 'text-text-accent-light-mode-only' : 'group-hover:text-text-secondary',
-            )}>
-              {option.text}
-            </span>
+            {Icon && <Icon className='size-4 shrink-0' />}
+            {text && (
+              <div className={cn('inline-flex items-center gap-x-1', ItemTextWrapperVariants({ size }))}>
+                <span>{text}</span>
+                {count && size === 'large' && (
+                  <div className='system-2xs-medium-uppercase inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-[5px] text-text-tertiary'>
+                    {count}
+                  </div>
+                )}
+              </div>
+            )}
             {!isLast && !isSelected && !isNextSelected && (
-              <div className='absolute right-[-1px] top-0 flex h-full items-center'>
+              <div data-testid={`segmented-control-divider-${index}`} className='absolute right-[-1px] top-0 flex h-full items-center'>
                 <Divider type='vertical' className='mx-0 h-3.5' />
               </div>
             )}
@@ -65,4 +148,4 @@ export const SegmentedControl = <T extends string | number | symbol>({
   )
 }
 
-export default React.memo(SegmentedControl) as typeof SegmentedControl
+export default React.memo(SegmentedControl)