dify/web/app/components/datasets/formatted-text/flavours/edit-slice.tsx

import type { OffsetOptions } from '@floating-ui/react'
import type { FC, ReactNode } from 'react'
import type { SliceProps } from './type'
import {
  autoUpdate,
  flip,
  FloatingFocusManager,
  offset,
  shift,
  useDismiss,
  useFloating,
  useHover,
  useInteractions,
  useRole,
} from '@floating-ui/react'
import { cn } from '@langgenius/dify-ui/cn'
import { IconButton } from '@langgenius/dify-ui/icon-button'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { SliceContainer, SliceContent, SliceDivider, SliceLabel } from './shared'

type EditSliceProps = SliceProps<{
  label: ReactNode
  onDelete: () => void
  labelClassName?: string
  labelInnerClassName?: string
  contentClassName?: string
  showDivider?: boolean
  offsetOptions?: OffsetOptions
}>

export const EditSlice: FC<EditSliceProps> = (props) => {
  const { t } = useTranslation()
  const {
    label,
    className,
    text,
    onDelete,
    labelClassName,
    labelInnerClassName,
    contentClassName,
    showDivider = true,
    offsetOptions,
    ...rest
  } = props
  const [delBtnShow, setDelBtnShow] = useState(false)
  const [isDelBtnHover, setDelBtnHover] = useState(false)

  const { refs, floatingStyles, context } = useFloating({
    open: delBtnShow,
    onOpenChange: setDelBtnShow,
    placement: 'right-start',
    whileElementsMounted: autoUpdate,
    middleware: [flip(), shift(), offset(offsetOptions)],
  })
  const hover = useHover(context, {})
  const dismiss = useDismiss(context)
  const role = useRole(context)
  const { getReferenceProps, getFloatingProps } = useInteractions([hover, dismiss, role])

  const isDestructive = delBtnShow && isDelBtnHover

  return (
    <>
      <SliceContainer
        {...rest}
        className={cn('mr-0 line-clamp-4 block', className)}
        ref={refs.setReference}
        {...getReferenceProps()}
      >
        <SliceLabel
          className={cn(
            isDestructive && 'bg-state-destructive-solid! text-text-primary-on-surface!',
            labelClassName,
          )}
          labelInnerClassName={labelInnerClassName}
        >
          {label}
        </SliceLabel>
        <SliceContent
          className={cn(isDestructive && 'bg-state-destructive-hover-alt!', contentClassName)}
        >
          {text}
        </SliceContent>
        {showDivider && (
          <SliceDivider className={cn(isDestructive && 'bg-state-destructive-hover-alt!')} />
        )}
        {delBtnShow && (
          <FloatingFocusManager context={context}>
            <span
              ref={refs.setFloating}
              style={floatingStyles}
              {...getFloatingProps()}
              className="inline-flex items-center justify-center rounded-lg bg-components-actionbar-bg p-1 shadow"
              onMouseEnter={() => setDelBtnHover(true)}
              onMouseLeave={() => setDelBtnHover(false)}
            >
              <IconButton
                aria-label={t(($) => $['operation.remove'], { ns: 'common' })}
                variant="ghost"
                tone="destructive"
                className="rounded-lg bg-state-destructive-hover hover:bg-state-destructive-hover"
                onClick={(e) => {
                  e.stopPropagation()
                  onDelete()
                  setDelBtnShow(false)
                }}
              >
                <span aria-hidden className="i-ri-delete-bin-line size-4" />
              </IconButton>
            </span>
          </FloatingFocusManager>
        )}
      </SliceContainer>
    </>
  )
}