dify

dify/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
+  }
+}

dify/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)
+  })
+})

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

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import { RiLineChartLine, RiListCheck2, RiRobot2Line } from '@remixicon/react'
+import { useState } from 'react'
+import { SegmentedControl } from '.'
+
+const SEGMENTS = [
+  { value: 'overview', text: 'Overview', Icon: RiLineChartLine },
+  { value: 'tasks', text: 'Tasks', Icon: RiListCheck2, count: 8 },
+  { value: 'agents', text: 'Agents', Icon: RiRobot2Line },
+]
+
+const SegmentedControlDemo = ({
+  initialValue = 'overview',
+  size = 'regular',
+  padding = 'with',
+  activeState = 'default',
+}: {
+  initialValue?: string
+  size?: 'regular' | 'small' | 'large'
+  padding?: 'none' | 'with'
+  activeState?: 'default' | 'accent' | 'accentLight'
+}) => {
+  const [value, setValue] = useState(initialValue)
+
+  return (
+    <div className="flex w-full max-w-lg flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
+      <div className="flex items-center justify-between text-xs uppercase tracking-[0.18em] text-text-tertiary">
+        <span>Segmented control</span>
+        <code className="rounded-md bg-background-default px-2 py-1 text-[11px] text-text-tertiary">
+          value="{value}"
+        </code>
+      </div>
+      <SegmentedControl
+        options={SEGMENTS}
+        value={value}
+        onChange={setValue}
+        size={size}
+        padding={padding}
+        activeState={activeState}
+      />
+    </div>
+  )
+}
+
+const meta = {
+  title: 'Base/Data Entry/SegmentedControl',
+  component: SegmentedControlDemo,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Multi-tab segmented control with optional icons and badge counts. Adjust sizing and accent states via controls.',
+      },
+    },
+  },
+  argTypes: {
+    initialValue: {
+      control: 'radio',
+      options: SEGMENTS.map(segment => segment.value),
+    },
+    size: {
+      control: 'inline-radio',
+      options: ['small', 'regular', 'large'],
+    },
+    padding: {
+      control: 'inline-radio',
+      options: ['none', 'with'],
+    },
+    activeState: {
+      control: 'inline-radio',
+      options: ['default', 'accent', 'accentLight'],
+    },
+  },
+  args: {
+    initialValue: 'overview',
+    size: 'regular',
+    padding: 'with',
+    activeState: 'default',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof SegmentedControlDemo>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+
+export const AccentState: Story = {
+  args: {
+    activeState: 'accent',
+  },
+}

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

@@ -0,0 +1,151 @@
+import React from 'react'
+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
+}
+
+type SegmentedControlProps<T extends string | number | symbol> = {
+  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,
+  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={cn(
+      SegmentedControlVariants({ size, padding }),
+      className,
+    )}>
+      {options.map((option, index) => {
+        const { Icon, text, count, disabled } = option
+        const isSelected = index === selectedOptionIndex
+        const isNextSelected = index === selectedOptionIndex - 1
+        const isLast = index === options.length - 1
+        return (
+          <button
+            type='button'
+            key={String(option.value)}
+            className={cn(
+              isSelected ? 'active' : 'default',
+              SegmentedControlItemVariants({ size, activeState: isSelected ? activeState : 'default' }),
+              isSelected && activeClassName,
+              disabled && 'disabled',
+              btnClassName,
+            )}
+            onClick={() => {
+              if (!isSelected)
+                onChange(option.value)
+            }}
+            disabled={disabled}
+          >
+            {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 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>
+            )}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+export default React.memo(SegmentedControl)