dify

dify/web/app/components/base/date-and-time-picker/time-picker/footer.tsx

@@ -0,0 +1,36 @@
+import React, { type FC } from 'react'
+import type { TimePickerFooterProps } from '../types'
+import Button from '../../button'
+import { useTranslation } from 'react-i18next'
+
+const Footer: FC<TimePickerFooterProps> = ({
+  handleSelectCurrentTime,
+  handleConfirm,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='flex items-center justify-between border-t-[0.5px] border-divider-regular p-2'>
+      {/* Now Button */}
+      <Button
+        variant='secondary-accent'
+        size='small'
+        className='mr-1 flex-1'
+        onClick={handleSelectCurrentTime}
+      >
+        {t('time.operation.now')}
+      </Button>
+      {/* Confirm Button */}
+      <Button
+        variant='primary'
+        size='small'
+        className='ml-1 flex-1'
+        onClick={handleConfirm.bind(null)}
+      >
+        {t('time.operation.ok')}
+      </Button>
+    </div>
+  )
+}
+
+export default React.memo(Footer)

dify/web/app/components/base/date-and-time-picker/time-picker/header.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+type Props = {
+  title?: string
+}
+const Header = ({
+  title,
+}: Props) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='flex flex-col border-b-[0.5px] border-divider-regular'>
+      <div className='system-md-semibold flex items-center px-2 py-1.5 text-text-primary'>
+        {title || t('time.title.pickTime')}
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(Header)

dify/web/app/components/base/date-and-time-picker/time-picker/index.spec.tsx

@@ -0,0 +1,188 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import TimePicker from './index'
+import dayjs from '../utils/dayjs'
+import { isDayjsObject } from '../utils/dayjs'
+import type { TimePickerProps } from '../types'
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      if (key === 'time.defaultPlaceholder') return 'Pick a time...'
+      if (key === 'time.operation.now') return 'Now'
+      if (key === 'time.operation.ok') return 'OK'
+      if (key === 'common.operation.clear') return 'Clear'
+      return key
+    },
+  }),
+}))
+
+jest.mock('@/app/components/base/portal-to-follow-elem', () => ({
+  PortalToFollowElem: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  PortalToFollowElemTrigger: ({ children, onClick }: { children: React.ReactNode, onClick: (e: React.MouseEvent) => void }) => (
+    <div onClick={onClick}>{children}</div>
+  ),
+  PortalToFollowElemContent: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="timepicker-content">{children}</div>
+  ),
+}))
+
+jest.mock('./options', () => () => <div data-testid="time-options" />)
+jest.mock('./header', () => () => <div data-testid="time-header" />)
+jest.mock('@/app/components/base/timezone-label', () => {
+  return function MockTimezoneLabel({ timezone, inline, className }: { timezone: string, inline?: boolean, className?: string }) {
+    return (
+      <span data-testid="timezone-label" data-timezone={timezone} data-inline={inline} className={className}>
+        UTC+8
+      </span>
+    )
+  }
+})
+
+describe('TimePicker', () => {
+  const baseProps: Pick<TimePickerProps, 'onChange' | 'onClear' | 'value'> = {
+    onChange: jest.fn(),
+    onClear: jest.fn(),
+    value: undefined,
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  test('renders formatted value for string input (Issue #26692 regression)', () => {
+    render(
+      <TimePicker
+        {...baseProps}
+        value="18:45"
+        timezone="UTC"
+      />,
+    )
+
+    expect(screen.getByDisplayValue('06:45 PM')).toBeInTheDocument()
+  })
+
+  test('confirms cleared value when confirming without selection', () => {
+    render(
+      <TimePicker
+        {...baseProps}
+        value={dayjs('2024-01-01T03:30:00Z')}
+        timezone="UTC"
+      />,
+    )
+
+    const input = screen.getByRole('textbox')
+    fireEvent.click(input)
+
+    const clearButton = screen.getByRole('button', { name: /clear/i })
+    fireEvent.click(clearButton)
+
+    const confirmButton = screen.getByRole('button', { name: 'OK' })
+    fireEvent.click(confirmButton)
+
+    expect(baseProps.onChange).toHaveBeenCalledTimes(1)
+    expect(baseProps.onChange).toHaveBeenCalledWith(undefined)
+    expect(baseProps.onClear).not.toHaveBeenCalled()
+  })
+
+  test('selecting current time emits timezone-aware value', () => {
+    const onChange = jest.fn()
+    render(
+      <TimePicker
+        {...baseProps}
+        onChange={onChange}
+        timezone="America/New_York"
+      />,
+    )
+
+    const nowButton = screen.getByRole('button', { name: 'Now' })
+    fireEvent.click(nowButton)
+
+    expect(onChange).toHaveBeenCalledTimes(1)
+    const emitted = onChange.mock.calls[0][0]
+    expect(isDayjsObject(emitted)).toBe(true)
+    expect(emitted?.utcOffset()).toBe(dayjs().tz('America/New_York').utcOffset())
+  })
+
+  describe('Timezone Label Integration', () => {
+    test('should not display timezone label by default', () => {
+      render(
+        <TimePicker
+          {...baseProps}
+          value="12:00 AM"
+          timezone="Asia/Shanghai"
+        />,
+      )
+
+      expect(screen.queryByTestId('timezone-label')).not.toBeInTheDocument()
+    })
+
+    test('should not display timezone label when showTimezone is false', () => {
+      render(
+        <TimePicker
+          {...baseProps}
+          value="12:00 AM"
+          timezone="Asia/Shanghai"
+          showTimezone={false}
+        />,
+      )
+
+      expect(screen.queryByTestId('timezone-label')).not.toBeInTheDocument()
+    })
+
+    test('should display timezone label when showTimezone is true', () => {
+      render(
+        <TimePicker
+          {...baseProps}
+          value="12:00 AM"
+          timezone="Asia/Shanghai"
+          showTimezone={true}
+        />,
+      )
+
+      const timezoneLabel = screen.getByTestId('timezone-label')
+      expect(timezoneLabel).toBeInTheDocument()
+      expect(timezoneLabel).toHaveAttribute('data-timezone', 'Asia/Shanghai')
+    })
+
+    test('should pass inline prop to timezone label', () => {
+      render(
+        <TimePicker
+          {...baseProps}
+          value="12:00 AM"
+          timezone="America/New_York"
+          showTimezone={true}
+        />,
+      )
+
+      const timezoneLabel = screen.getByTestId('timezone-label')
+      expect(timezoneLabel).toHaveAttribute('data-inline', 'true')
+    })
+
+    test('should not display timezone label when showTimezone is true but timezone is not provided', () => {
+      render(
+        <TimePicker
+          {...baseProps}
+          value="12:00 AM"
+          showTimezone={true}
+        />,
+      )
+
+      expect(screen.queryByTestId('timezone-label')).not.toBeInTheDocument()
+    })
+
+    test('should apply shrink-0 and text-xs classes to timezone label', () => {
+      render(
+        <TimePicker
+          {...baseProps}
+          value="12:00 AM"
+          timezone="Europe/London"
+          showTimezone={true}
+        />,
+      )
+
+      const timezoneLabel = screen.getByTestId('timezone-label')
+      expect(timezoneLabel).toHaveClass('shrink-0', 'text-xs')
+    })
+  })
+})

dify/web/app/components/base/date-and-time-picker/time-picker/index.tsx

@@ -0,0 +1,270 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import type { Dayjs } from 'dayjs'
+import { Period } from '../types'
+import type { TimePickerProps } from '../types'
+import dayjs, {
+  getDateWithTimezone,
+  getHourIn12Hour,
+  isDayjsObject,
+  toDayjs,
+} from '../utils/dayjs'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import Footer from './footer'
+import Options from './options'
+import Header from './header'
+import { useTranslation } from 'react-i18next'
+import { RiCloseCircleFill, RiTimeLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
+import TimezoneLabel from '@/app/components/base/timezone-label'
+
+const to24Hour = (hour12: string, period: Period) => {
+  const normalized = Number.parseInt(hour12, 10) % 12
+  return period === Period.PM ? normalized + 12 : normalized
+}
+
+const TimePicker = ({
+  value,
+  timezone,
+  placeholder,
+  onChange,
+  onClear,
+  renderTrigger,
+  title,
+  minuteFilter,
+  popupClassName,
+  notClearable = false,
+  triggerFullWidth = false,
+  showTimezone = false,
+  placement = 'bottom-start',
+}: TimePickerProps) => {
+  const { t } = useTranslation()
+  const [isOpen, setIsOpen] = useState(false)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const isInitial = useRef(true)
+
+  // Initialize selectedTime
+  const [selectedTime, setSelectedTime] = useState(() => {
+    return toDayjs(value, { timezone })
+  })
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node))
+        setIsOpen(false)
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [])
+
+  // Track previous values to avoid unnecessary updates
+  const prevValueRef = useRef(value)
+  const prevTimezoneRef = useRef(timezone)
+
+  useEffect(() => {
+    if (isInitial.current) {
+      isInitial.current = false
+      // Save initial values on first render
+      prevValueRef.current = value
+      prevTimezoneRef.current = timezone
+      return
+    }
+
+    // Only update when timezone changes but value doesn't
+    const valueChanged = prevValueRef.current !== value
+    const timezoneChanged = prevTimezoneRef.current !== timezone
+
+    // Update reference values
+    prevValueRef.current = value
+    prevTimezoneRef.current = timezone
+
+    // Skip if neither timezone changed nor value changed
+    if (!timezoneChanged && !valueChanged) return
+
+    if (value !== undefined && value !== null) {
+      const dayjsValue = toDayjs(value, { timezone })
+      if (!dayjsValue) return
+
+      setSelectedTime(dayjsValue)
+
+      if (timezoneChanged && !valueChanged)
+        onChange(dayjsValue)
+      return
+    }
+
+    setSelectedTime((prev) => {
+      if (!isDayjsObject(prev))
+        return undefined
+      return timezone ? getDateWithTimezone({ date: prev, timezone }) : prev
+    })
+  }, [timezone, value, onChange])
+
+  const handleClickTrigger = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    if (isOpen) {
+      setIsOpen(false)
+      return
+    }
+    setIsOpen(true)
+
+    if (value) {
+      const dayjsValue = toDayjs(value, { timezone })
+      const needsUpdate = dayjsValue && (
+        !selectedTime
+        || !isDayjsObject(selectedTime)
+        || !dayjsValue.isSame(selectedTime, 'minute')
+      )
+      if (needsUpdate) setSelectedTime(dayjsValue)
+    }
+  }
+
+  const handleClear = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    setSelectedTime(undefined)
+    if (!isOpen)
+      onClear()
+  }
+
+  const handleTimeSelect = (hour: string, minute: string, period: Period) => {
+    const periodAdjustedHour = to24Hour(hour, period)
+    const nextMinute = Number.parseInt(minute, 10)
+    setSelectedTime((prev) => {
+      const reference = isDayjsObject(prev)
+        ? prev
+        : (timezone ? getDateWithTimezone({ timezone }) : dayjs()).startOf('minute')
+      return reference
+        .set('hour', periodAdjustedHour)
+        .set('minute', nextMinute)
+        .set('second', 0)
+        .set('millisecond', 0)
+    })
+  }
+
+  const getSafeTimeObject = useCallback(() => {
+    if (isDayjsObject(selectedTime))
+      return selectedTime
+    return (timezone ? getDateWithTimezone({ timezone }) : dayjs()).startOf('day')
+  }, [selectedTime, timezone])
+
+  const handleSelectHour = useCallback((hour: string) => {
+    const time = getSafeTimeObject()
+    handleTimeSelect(hour, time.minute().toString().padStart(2, '0'), time.format('A') as Period)
+  }, [getSafeTimeObject])
+
+  const handleSelectMinute = useCallback((minute: string) => {
+    const time = getSafeTimeObject()
+    handleTimeSelect(getHourIn12Hour(time).toString().padStart(2, '0'), minute, time.format('A') as Period)
+  }, [getSafeTimeObject])
+
+  const handleSelectPeriod = useCallback((period: Period) => {
+    const time = getSafeTimeObject()
+    handleTimeSelect(getHourIn12Hour(time).toString().padStart(2, '0'), time.minute().toString().padStart(2, '0'), period)
+  }, [getSafeTimeObject])
+
+  const handleSelectCurrentTime = useCallback(() => {
+    const newDate = getDateWithTimezone({ timezone })
+    setSelectedTime(newDate)
+    onChange(newDate)
+    setIsOpen(false)
+  }, [timezone, onChange])
+
+  const handleConfirm = useCallback(() => {
+    const valueToEmit = isDayjsObject(selectedTime) ? selectedTime : undefined
+    onChange(valueToEmit)
+    setIsOpen(false)
+  }, [selectedTime, onChange])
+
+  const timeFormat = 'hh:mm A'
+
+  const formatTimeValue = useCallback((timeValue: string | Dayjs | undefined): string => {
+    if (!timeValue) return ''
+
+    const dayjsValue = toDayjs(timeValue, { timezone })
+    return dayjsValue?.format(timeFormat) || ''
+  }, [timezone])
+
+  const displayValue = formatTimeValue(value)
+
+  const placeholderDate = isOpen && isDayjsObject(selectedTime)
+    ? selectedTime.format(timeFormat)
+    : (placeholder || t('time.defaultPlaceholder'))
+
+  const inputElem = (
+    <input
+      className='system-xs-regular flex-1 cursor-pointer select-none appearance-none truncate bg-transparent p-1
+            text-components-input-text-filled outline-none placeholder:text-components-input-text-placeholder'
+      readOnly
+      value={isOpen ? '' : displayValue}
+      placeholder={placeholderDate}
+    />
+  )
+  return (
+    <PortalToFollowElem
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      placement={placement}
+    >
+      <PortalToFollowElemTrigger className={triggerFullWidth ? '!block w-full' : undefined}>
+        {renderTrigger ? (renderTrigger({
+          inputElem,
+          onClick: handleClickTrigger,
+          isOpen,
+        })) : (
+          <div
+            className={cn(
+              'group flex cursor-pointer items-center gap-x-0.5 rounded-lg bg-components-input-bg-normal px-2 py-1 hover:bg-state-base-hover-alt',
+              triggerFullWidth ? 'w-full min-w-0' : 'w-[252px]',
+            )}
+            onClick={handleClickTrigger}
+          >
+            {inputElem}
+            {showTimezone && timezone && (
+              <TimezoneLabel timezone={timezone} inline className='shrink-0 select-none text-xs' />
+            )}
+            <RiTimeLine className={cn(
+              'h-4 w-4 shrink-0 text-text-quaternary',
+              isOpen ? 'text-text-secondary' : 'group-hover:text-text-secondary',
+              (displayValue || (isOpen && selectedTime)) && !notClearable && 'group-hover:hidden',
+            )} />
+            <RiCloseCircleFill
+              className={cn(
+                'hidden h-4 w-4 shrink-0 text-text-quaternary',
+                (displayValue || (isOpen && selectedTime)) && !notClearable && 'hover:text-text-secondary group-hover:inline-block',
+              )}
+              role='button'
+              aria-label={t('common.operation.clear')}
+              onClick={handleClear}
+            />
+          </div>
+        )}
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className={cn('z-50', popupClassName)}>
+        <div className='mt-1 w-[252px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg shadow-shadow-shadow-5'>
+          {/* Header */}
+          <Header title={title} />
+
+          {/* Time Options */}
+          <Options
+            selectedTime={selectedTime}
+            minuteFilter={minuteFilter}
+            handleSelectHour={handleSelectHour}
+            handleSelectMinute={handleSelectMinute}
+            handleSelectPeriod={handleSelectPeriod}
+          />
+
+          {/* Footer */}
+          <Footer
+            handleSelectCurrentTime={handleSelectCurrentTime}
+            handleConfirm={handleConfirm}
+          />
+
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default TimePicker

dify/web/app/components/base/date-and-time-picker/time-picker/options.tsx

@@ -0,0 +1,73 @@
+import React, { type FC } from 'react'
+import { useTimeOptions } from '../hooks'
+import type { TimeOptionsProps } from '../types'
+import OptionListItem from '../common/option-list-item'
+
+const Options: FC<TimeOptionsProps> = ({
+  selectedTime,
+  minuteFilter,
+  handleSelectHour,
+  handleSelectMinute,
+  handleSelectPeriod,
+}) => {
+  const { hourOptions, minuteOptions, periodOptions } = useTimeOptions()
+
+  return (
+    <div className='grid grid-cols-3 gap-x-1 p-2'>
+      {/* Hour */}
+      <ul className='no-scrollbar flex h-[208px] flex-col gap-y-0.5 overflow-y-auto pb-[184px]'>
+        {
+          hourOptions.map((hour) => {
+            const isSelected = selectedTime?.format('hh') === hour
+            return (
+              <OptionListItem
+                key={hour}
+                isSelected={isSelected}
+                onClick={handleSelectHour.bind(null, hour)}
+              >
+                {hour}
+              </OptionListItem>
+            )
+          })
+        }
+      </ul>
+      {/* Minute */}
+      <ul className='no-scrollbar flex h-[208px] flex-col gap-y-0.5 overflow-y-auto pb-[184px]'>
+        {
+          (minuteFilter ? minuteFilter(minuteOptions) : minuteOptions).map((minute) => {
+            const isSelected = selectedTime?.format('mm') === minute
+            return (
+              <OptionListItem
+                key={minute}
+                isSelected={isSelected}
+                onClick={handleSelectMinute.bind(null, minute)}
+              >
+                {minute}
+              </OptionListItem>
+            )
+          })
+        }
+      </ul>
+      {/* Period */}
+      <ul className='no-scrollbar flex h-[208px] flex-col gap-y-0.5 overflow-y-auto pb-[184px]'>
+        {
+          periodOptions.map((period) => {
+            const isSelected = selectedTime?.format('A') === period
+            return (
+              <OptionListItem
+                key={period}
+                isSelected={isSelected}
+                onClick={handleSelectPeriod.bind(null, period)}
+                noAutoScroll // if choose PM which would hide(scrolled) AM that may make user confused that there's no am.
+              >
+                {period}
+              </OptionListItem>
+            )
+          })
+        }
+      </ul>
+    </div>
+  )
+}
+
+export default React.memo(Options)