dify

dify/web/app/components/base/pagination/hook.ts

@@ -0,0 +1,93 @@
+import React, { useCallback } from 'react'
+import type { IPaginationProps, IUsePagination } from './type'
+
+const usePagination = ({
+  currentPage,
+  setCurrentPage,
+  truncableText = '...',
+  truncableClassName = '',
+  totalPages,
+  edgePageCount,
+  middlePagesSiblingCount,
+}: IPaginationProps): IUsePagination => {
+  const pages = React.useMemo(() => Array.from({ length: totalPages }, (_, i) => i + 1), [totalPages])
+
+  const hasPreviousPage = currentPage > 1
+  const hasNextPage = currentPage < totalPages
+
+  const isReachedToFirst = currentPage <= middlePagesSiblingCount
+  const isReachedToLast = currentPage + middlePagesSiblingCount >= totalPages
+
+  const middlePages = React.useMemo(() => {
+    const middlePageCount = middlePagesSiblingCount * 2 + 1
+    if (isReachedToFirst)
+      return pages.slice(0, middlePageCount)
+
+    if (isReachedToLast)
+      return pages.slice(-middlePageCount)
+
+    return pages.slice(
+      currentPage - middlePagesSiblingCount,
+      currentPage + middlePagesSiblingCount + 1,
+    )
+  }, [currentPage, isReachedToFirst, isReachedToLast, middlePagesSiblingCount, pages])
+
+  const getAllPreviousPages = useCallback(() => {
+    return pages.slice(0, middlePages[0] - 1)
+  }, [middlePages, pages])
+
+  const previousPages = React.useMemo(() => {
+    if (isReachedToFirst || getAllPreviousPages().length < 1)
+      return []
+
+    return pages
+      .slice(0, edgePageCount)
+      .filter(p => !middlePages.includes(p))
+  }, [edgePageCount, getAllPreviousPages, isReachedToFirst, middlePages, pages])
+
+  const getAllNextPages = React.useMemo(() => {
+    return pages.slice(
+      middlePages[middlePages.length - 1],
+      pages[pages.length],
+    )
+  }, [pages, middlePages])
+
+  const nextPages = React.useMemo(() => {
+    if (isReachedToLast)
+      return []
+
+    if (getAllNextPages.length < 1)
+      return []
+
+    return pages
+      .slice(pages.length - edgePageCount, pages.length)
+      .filter(p => !middlePages.includes(p))
+  }, [edgePageCount, getAllNextPages.length, isReachedToLast, middlePages, pages])
+
+  const isPreviousTruncable = React.useMemo(() => {
+    // Is truncable if first value of middlePage is larger than last value of previousPages
+    return middlePages[0] > previousPages[previousPages.length - 1] + 1
+  }, [previousPages, middlePages])
+
+  const isNextTruncable = React.useMemo(() => {
+    // Is truncable if last value of middlePage is larger than first value of previousPages
+    return middlePages[middlePages.length - 1] + 1 < nextPages[0]
+  }, [nextPages, middlePages])
+
+  return {
+    currentPage,
+    setCurrentPage,
+    truncableText,
+    truncableClassName,
+    pages,
+    hasPreviousPage,
+    hasNextPage,
+    previousPages,
+    isPreviousTruncable,
+    middlePages,
+    isNextTruncable,
+    nextPages,
+  }
+}
+
+export default usePagination

dify/web/app/components/base/pagination/index.stories.tsx

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import { useMemo, useState } from 'react'
+import Pagination from '.'
+
+const TOTAL_ITEMS = 120
+
+const PaginationDemo = ({
+  initialPage = 0,
+  initialLimit = 10,
+}: {
+  initialPage?: number
+  initialLimit?: number
+}) => {
+  const [current, setCurrent] = useState(initialPage)
+  const [limit, setLimit] = useState(initialLimit)
+
+  const pageSummary = useMemo(() => {
+    const start = current * limit + 1
+    const end = Math.min((current + 1) * limit, TOTAL_ITEMS)
+    return `${start}-${end} of ${TOTAL_ITEMS}`
+  }, [current, limit])
+
+  return (
+    <div className="flex w-full max-w-3xl 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>Log pagination</span>
+        <span className="rounded-md border border-divider-subtle bg-background-default px-2 py-1 font-medium text-text-secondary">
+          {pageSummary}
+        </span>
+      </div>
+      <Pagination
+        current={current}
+        total={TOTAL_ITEMS}
+        limit={limit}
+        onChange={setCurrent}
+        onLimitChange={(nextLimit) => {
+          setCurrent(0)
+          setLimit(nextLimit)
+        }}
+      />
+    </div>
+  )
+}
+
+const meta = {
+  title: 'Base/Navigation/Pagination',
+  component: PaginationDemo,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Paginate long lists with optional per-page selector. Demonstrates the inline page jump input and quick limit toggles.',
+      },
+    },
+  },
+  args: {
+    initialPage: 0,
+    initialLimit: 10,
+  },
+  argTypes: {
+    initialPage: {
+      control: { type: 'number', min: 0, max: 9, step: 1 },
+    },
+    initialLimit: {
+      control: { type: 'radio' },
+      options: [10, 25, 50],
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof PaginationDemo>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+
+export const StartAtMiddle: Story = {
+  args: {
+    initialPage: 4,
+  },
+}

dify/web/app/components/base/pagination/index.tsx

@@ -0,0 +1,195 @@
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiArrowLeftLine, RiArrowRightLine } from '@remixicon/react'
+import { useDebounceFn } from 'ahooks'
+import { Pagination } from './pagination'
+import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
+import cn from '@/utils/classnames'
+
+export type Props = {
+  className?: string
+  current: number
+  onChange: (cur: number) => void
+  total: number
+  limit?: number
+  onLimitChange?: (limit: number) => void
+}
+
+const CustomizedPagination: FC<Props> = ({
+  className,
+  current,
+  onChange,
+  total,
+  limit = 10,
+  onLimitChange,
+}) => {
+  const { t } = useTranslation()
+  const totalPages = Math.ceil(total / limit)
+  const inputRef = React.useRef<HTMLDivElement>(null)
+  const [showInput, setShowInput] = React.useState(false)
+  const [inputValue, setInputValue] = React.useState<string | number>(current + 1)
+  const [showPerPageTip, setShowPerPageTip] = React.useState(false)
+
+  const { run: handlePaging } = useDebounceFn((value: string) => {
+    if (Number.parseInt(value) > totalPages) {
+      setInputValue(totalPages)
+      onChange(totalPages - 1)
+      setShowInput(false)
+      return
+    }
+    if (Number.parseInt(value) < 1) {
+      setInputValue(1)
+      onChange(0)
+      setShowInput(false)
+      return
+    }
+    onChange(Number.parseInt(value) - 1)
+    setInputValue(Number.parseInt(value))
+    setShowInput(false)
+  }, { wait: 500 })
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value
+    if (!value)
+      return setInputValue('')
+    if (isNaN(Number.parseInt(value)))
+      return setInputValue('')
+    setInputValue(Number.parseInt(value))
+  }
+
+  const handleInputConfirm = () => {
+    if (inputValue !== '' && String(inputValue) !== String(current + 1)) {
+      handlePaging(String(inputValue))
+      return
+    }
+
+    if (inputValue === '')
+      setInputValue(current + 1)
+
+    setShowInput(false)
+  }
+
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      handleInputConfirm()
+    }
+    else if (e.key === 'Escape') {
+      e.preventDefault()
+      setInputValue(current + 1)
+      setShowInput(false)
+    }
+  }
+
+  const handleInputBlur = () => {
+    handleInputConfirm()
+  }
+
+  return (
+    <Pagination
+      className={cn('flex w-full select-none items-center px-6 py-3', className)}
+      currentPage={current}
+      edgePageCount={2}
+      middlePagesSiblingCount={1}
+      setCurrentPage={onChange}
+      totalPages={totalPages}
+      truncableClassName='flex items-center justify-center w-8 px-1 py-2 system-sm-medium text-text-tertiary'
+      truncableText='...'
+    >
+      <div className='flex items-center gap-0.5 rounded-[10px] bg-background-section-burn p-0.5'>
+        <Pagination.PrevButton
+          as={<div></div>}
+          disabled={current === 0}
+        >
+          <Button
+            variant='secondary'
+            className='h-7 w-7 px-1.5'
+            disabled={current === 0}
+          >
+            <RiArrowLeftLine className='h-4 w-4' />
+          </Button>
+        </Pagination.PrevButton>
+        {!showInput && (
+          <div
+            ref={inputRef}
+            className='flex items-center gap-0.5 rounded-lg px-2 py-1.5 hover:cursor-text hover:bg-state-base-hover-alt'
+            onClick={() => setShowInput(true)}
+          >
+            <div className='system-xs-medium text-text-secondary'>{current + 1}</div>
+            <div className='system-xs-medium text-text-quaternary'>/</div>
+            <div className='system-xs-medium text-text-secondary'>{totalPages}</div>
+          </div>
+        )}
+        {showInput && (
+          <Input
+            styleCss={{
+              height: '28px',
+              width: `${inputRef.current?.clientWidth}px`,
+            }}
+            placeholder=''
+            autoFocus
+            value={inputValue}
+            onChange={handleInputChange}
+            onKeyDown={handleInputKeyDown}
+            onBlur={handleInputBlur}
+          />
+        )}
+        <Pagination.NextButton
+          as={<div></div>}
+          disabled={current === totalPages - 1}
+        >
+          <Button
+            variant='secondary'
+            className='h-7 w-7 px-1.5'
+            disabled={current === totalPages - 1}
+          >
+            <RiArrowRightLine className='h-4 w-4' />
+          </Button>
+        </Pagination.NextButton>
+      </div>
+      <div className={cn('flex grow list-none items-center justify-center gap-1')}>
+        <Pagination.PageButton
+          className='system-sm-medium flex min-w-8 cursor-pointer items-center justify-center rounded-lg px-1 py-2 hover:bg-components-button-ghost-bg-hover'
+          activeClassName='bg-components-button-tertiary-bg text-components-button-tertiary-text hover:bg-components-button-ghost-bg-hover'
+          inactiveClassName='text-text-tertiary'
+        />
+      </div>
+      {onLimitChange && (
+        <div className='flex shrink-0 items-center gap-2'>
+          <div className='system-2xs-regular-uppercase w-[51px] shrink-0 text-end text-text-tertiary'>{showPerPageTip ? t('common.pagination.perPage') : ''}</div>
+          <div
+            className='flex items-center gap-[1px] rounded-[10px] bg-components-segmented-control-bg-normal p-0.5'
+            onMouseEnter={() => setShowPerPageTip(true)}
+            onMouseLeave={() => setShowPerPageTip(false)}
+          >
+            <div
+              className={cn(
+                'system-sm-medium cursor-pointer rounded-lg border-[0.5px] border-transparent px-2.5 py-1.5 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
+                limit === 10 && 'border-components-segmented-control-item-active-border bg-components-segmented-control-item-active-bg text-text-secondary shadow-xs hover:bg-components-segmented-control-item-active-bg',
+              )}
+              onClick={() => onLimitChange?.(10)}
+            >10</div>
+            <div
+              className={cn(
+                'system-sm-medium cursor-pointer rounded-lg border-[0.5px] border-transparent px-2.5 py-1.5 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
+                limit === 25 && 'border-components-segmented-control-item-active-border bg-components-segmented-control-item-active-bg text-text-secondary shadow-xs hover:bg-components-segmented-control-item-active-bg',
+              )}
+              onClick={() => onLimitChange?.(25)}
+            >25</div>
+            <div
+              className={cn(
+                'system-sm-medium cursor-pointer rounded-lg border-[0.5px] border-transparent px-2.5 py-1.5 text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary',
+                limit === 50 && 'border-components-segmented-control-item-active-border bg-components-segmented-control-item-active-bg text-text-secondary shadow-xs hover:bg-components-segmented-control-item-active-bg',
+              )}
+              onClick={() => onLimitChange?.(50)}
+            >50</div>
+          </div>
+        </div>
+      )}
+    </Pagination>
+  )
+}
+
+export default CustomizedPagination

dify/web/app/components/base/pagination/pagination.tsx

@@ -0,0 +1,190 @@
+import React from 'react'
+import cn from 'classnames'
+import usePagination from './hook'
+import type {
+  ButtonProps,
+  IPagination,
+  IPaginationProps,
+  PageButtonProps,
+} from './type'
+import { noop } from 'lodash-es'
+
+const defaultState: IPagination = {
+  currentPage: 0,
+  setCurrentPage: noop,
+  truncableText: '...',
+  truncableClassName: '',
+  pages: [],
+  hasPreviousPage: false,
+  hasNextPage: false,
+  previousPages: [],
+  isPreviousTruncable: false,
+  middlePages: [],
+  isNextTruncable: false,
+  nextPages: [],
+}
+
+const PaginationContext: React.Context<IPagination> = React.createContext<IPagination>(defaultState)
+
+export const PrevButton = ({
+  className,
+  children,
+  dataTestId,
+  as = <button type="button" />,
+  ...buttonProps
+}: ButtonProps) => {
+  const pagination = React.useContext(PaginationContext)
+  const previous = () => {
+    if (pagination.currentPage + 1 > 1)
+      pagination.setCurrentPage(pagination.currentPage - 1)
+  }
+
+  const disabled = pagination.currentPage === 0
+
+  return (
+    <as.type
+      {...buttonProps}
+      {...as.props}
+      className={cn(className, as.props.className)}
+      onClick={() => previous()}
+      tabIndex={disabled ? '-1' : 0}
+      disabled={disabled}
+      data-testid={dataTestId}
+      onKeyPress={(event: React.KeyboardEvent) => {
+        event.preventDefault()
+        if (event.key === 'Enter' && !disabled)
+          previous()
+      }}
+    >
+      {as.props.children ?? children}
+    </as.type>
+  )
+}
+
+export const NextButton = ({
+  className,
+  children,
+  dataTestId,
+  as = <button type="button" />,
+  ...buttonProps
+}: ButtonProps) => {
+  const pagination = React.useContext(PaginationContext)
+  const next = () => {
+    if (pagination.currentPage + 1 < pagination.pages.length)
+      pagination.setCurrentPage(pagination.currentPage + 1)
+  }
+
+  const disabled = pagination.currentPage === pagination.pages.length - 1
+
+  return (
+    <as.type
+      {...buttonProps}
+      {...as.props}
+      className={cn(className, as.props.className)}
+      onClick={() => next()}
+      tabIndex={disabled ? '-1' : 0}
+      disabled={disabled}
+      data-testid={dataTestId}
+      onKeyPress={(event: React.KeyboardEvent) => {
+        event.preventDefault()
+        if (event.key === 'Enter' && !disabled)
+          next()
+      }}
+    >
+      {as.props.children ?? children}
+    </as.type>
+  )
+}
+
+type ITruncableElementProps = {
+  prev?: boolean
+}
+
+const TruncableElement = ({ prev }: ITruncableElementProps) => {
+  const pagination: IPagination = React.useContext(PaginationContext)
+
+  const {
+    isPreviousTruncable,
+    isNextTruncable,
+    truncableText,
+    truncableClassName,
+  } = pagination
+
+  return ((isPreviousTruncable && prev === true) || (isNextTruncable && !prev))
+    ? (
+      <li className={truncableClassName || undefined}>{truncableText}</li>
+    )
+    : null
+}
+
+export const PageButton = ({
+  as = <a />,
+  className,
+  dataTestIdActive,
+  dataTestIdInactive,
+  activeClassName,
+  inactiveClassName,
+  renderExtraProps,
+}: PageButtonProps) => {
+  const pagination: IPagination = React.useContext(PaginationContext)
+
+  const renderPageButton = (page: number) => (
+    <li key={page}>
+      <as.type
+        data-testid={
+          cn({
+            [`${dataTestIdActive}`]:
+              dataTestIdActive && pagination.currentPage + 1 === page,
+            [`${dataTestIdInactive}-${page}`]:
+              dataTestIdActive && pagination.currentPage + 1 !== page,
+          }) || undefined
+        }
+        tabIndex={0}
+        onKeyPress={(event: React.KeyboardEvent) => {
+          if (event.key === 'Enter')
+            pagination.setCurrentPage(page - 1)
+        }}
+        onClick={() => pagination.setCurrentPage(page - 1)}
+        className={cn(
+          className,
+          pagination.currentPage + 1 === page
+            ? activeClassName
+            : inactiveClassName,
+        )}
+        {...as.props}
+        {...(renderExtraProps ? renderExtraProps(page) : {})}
+      >
+        {page}
+      </as.type>
+    </li>
+  )
+
+  return (
+    <>
+      {pagination.previousPages.map(renderPageButton)}
+      <TruncableElement prev />
+      {pagination.middlePages.map(renderPageButton)}
+      <TruncableElement />
+      {pagination.nextPages.map(renderPageButton)}
+    </>
+  )
+}
+
+export const Pagination = ({
+  dataTestId,
+  ...paginationProps
+}: IPaginationProps & { dataTestId?: string }) => {
+  const pagination = usePagination(paginationProps)
+
+  return (
+    <PaginationContext.Provider value={pagination}>
+      <div className={paginationProps.className} data-testid={dataTestId}>
+        {paginationProps.children}
+      </div>
+    </PaginationContext.Provider>
+  )
+}
+
+Pagination.PrevButton = PrevButton
+Pagination.NextButton = NextButton
+Pagination.PageButton = PageButton

dify/web/app/components/base/pagination/type.ts

@@ -0,0 +1,64 @@
+import type { ButtonHTMLAttributes } from 'react'
+
+type ElementProps = {
+  className?: string
+  children?: React.ReactNode
+  [key: string]: unknown
+}
+
+type IBasePaginationProps = {
+  currentPage: number
+  setCurrentPage: (page: number) => void
+  truncableText?: string
+  truncableClassName?: string
+}
+
+type IPaginationProps = IBasePaginationProps & {
+  totalPages: number
+  edgePageCount: number
+  middlePagesSiblingCount: number
+  className?: string
+  children?: React.ReactNode
+}
+
+type IUsePagination = IBasePaginationProps & {
+  pages: number[]
+  hasPreviousPage: boolean
+  hasNextPage: boolean
+  previousPages: number[]
+  isPreviousTruncable: boolean
+  middlePages: number[]
+  isNextTruncable: boolean
+  nextPages: number[]
+}
+
+type IPagination = IUsePagination & {
+  setCurrentPage: (page: number) => void
+}
+
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  as?: React.ReactElement<ElementProps>
+  children?: string | React.ReactNode
+  className?: string
+  dataTestId?: string
+}
+
+type PageButtonProps = ButtonProps & {
+  /**
+   * Provide a custom ReactElement (e.g. Next/Link)
+   */
+  as?: React.ReactElement<ElementProps>
+  activeClassName?: string
+  inactiveClassName?: string
+  dataTestIdActive?: string
+  dataTestIdInactive?: string
+  renderExtraProps?: (pageNum: number) => {}
+}
+
+export type {
+  IPaginationProps,
+  IUsePagination,
+  IPagination,
+  ButtonProps,
+  PageButtonProps,
+}