dify/web/app/components/base/app-icon-picker/index.tsx

import type { Area } from 'react-easy-crop'
import type { OnImageInput } from './ImageInput'
import type { AppIconType, ImageFile } from '@/types/app'
import { Button } from '@langgenius/dify-ui/button'
import { cn } from '@langgenius/dify-ui/cn'
import { Dialog, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
import { RiImageCircleAiLine } from '@remixicon/react'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { DISABLE_UPLOAD_IMAGE_AS_ICON } from '@/config'
import Divider from '../divider'
import { defaultEmojiBackground } from '../emoji-picker/constants'
import EmojiPickerInner from '../emoji-picker/Inner'
import { useLocalFileUploader } from '../image-uploader/hooks'
import ImageInput from './ImageInput'
import s from './style.module.css'
import getCroppedImg from './utils'

export type AppIconEmojiSelection = {
  type: 'emoji'
  icon: string
  background: string
}

export type AppIconImageSelection = {
  type: 'image'
  fileId: string
  url: string
}

export type AppIconSelection = AppIconEmojiSelection | AppIconImageSelection

type AppIconPickerProps = {
  open: boolean
  onOpenChange: (open: boolean) => void
  onSelect?: (payload: AppIconSelection) => void
  enableImageUpload?: boolean
  initialEmoji?: {
    icon: string
    background?: string | null
  }
  className?: string
}

function AppIconPicker({
  open,
  onOpenChange,
  onSelect,
  enableImageUpload = true,
  initialEmoji,
  className,
}: AppIconPickerProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      {open ? (
        <AppIconPickerContent
          key={`${initialEmoji?.icon ?? ''}:${initialEmoji?.background ?? ''}`}
          initialEmoji={initialEmoji}
          enableImageUpload={enableImageUpload}
          className={className}
          onOpenChange={onOpenChange}
          onSelect={onSelect}
        />
      ) : null}
    </Dialog>
  )
}

type AppIconPickerContentProps = {
  className?: string
  initialEmoji?: {
    icon: string
    background?: string | null
  }
  enableImageUpload: boolean
  onOpenChange: (open: boolean) => void
  onSelect?: (payload: AppIconSelection) => void
}

function AppIconPickerContent({
  className,
  initialEmoji,
  enableImageUpload,
  onOpenChange,
  onSelect,
}: AppIconPickerContentProps) {
  const { t } = useTranslation()

  const tabs = [
    {
      key: 'emoji',
      label: t(($) => $['iconPicker.emoji'], { ns: 'app' }),
      icon: <span className="text-lg">🤖</span>,
    },
    {
      key: 'image',
      label: t(($) => $['iconPicker.image'], { ns: 'app' }),
      icon: <RiImageCircleAiLine className="size-4" />,
    },
  ]
  const [activeTab, setActiveTab] = useState<AppIconType>('emoji')
  const showImageUpload = enableImageUpload && !DISABLE_UPLOAD_IMAGE_AS_ICON

  const [emoji, setEmoji] = useState<{ emoji: string; background: string } | undefined>(() => {
    if (!initialEmoji?.icon) return undefined

    return {
      emoji: initialEmoji.icon,
      background: initialEmoji.background ?? defaultEmojiBackground,
    }
  })

  const [uploading, setUploading] = useState<boolean>()

  const { handleLocalFileUpload } = useLocalFileUploader({
    limit: 3,
    disabled: false,
    onUpload: (imageFile: ImageFile) => {
      if (imageFile.fileId) {
        setUploading(false)
        onSelect?.({
          type: 'image',
          fileId: imageFile.fileId,
          url: imageFile.url,
        })
        onOpenChange(false)
      }
    },
  })

  type InputImageInfo =
    | { file: File }
    | { tempUrl: string; croppedAreaPixels: Area; fileName: string }
  const [inputImageInfo, setInputImageInfo] = useState<InputImageInfo>()

  const handleImageInput: OnImageInput = async (
    isCropped: boolean,
    fileOrTempUrl: string | File,
    croppedAreaPixels?: Area,
    fileName?: string,
  ) => {
    setInputImageInfo(
      isCropped
        ? {
            tempUrl: fileOrTempUrl as string,
            croppedAreaPixels: croppedAreaPixels!,
            fileName: fileName!,
          }
        : { file: fileOrTempUrl as File },
    )
  }

  const handleSelect = async () => {
    if (activeTab === 'emoji') {
      if (emoji) {
        onSelect?.({
          type: 'emoji',
          icon: emoji.emoji,
          background: emoji.background,
        })
        onOpenChange(false)
      }
    } else {
      if (!inputImageInfo) return
      setUploading(true)
      if ('file' in inputImageInfo) {
        handleLocalFileUpload(inputImageInfo.file)
        return
      }
      const blob = await getCroppedImg(
        inputImageInfo.tempUrl,
        inputImageInfo.croppedAreaPixels,
        inputImageInfo.fileName,
      )
      const file = new File([blob], inputImageInfo.fileName, { type: blob.type })
      handleLocalFileUpload(file)
    }
  }

  return (
    <DialogContent
      className={cn(
        'w-full overflow-hidden! border-none text-left align-middle',
        s.container,
        'h-[min(462px,calc(100dvh-2rem))]! max-h-none! w-[362px]! p-0!',
        className,
      )}
    >
      <DialogTitle className="sr-only">
        {t(($) => $['iconPicker.emoji'], { ns: 'app' })}
      </DialogTitle>

      {showImageUpload && (
        <div className="w-full p-2 pb-0">
          <div className="flex items-center justify-center gap-2 rounded-xl bg-background-body p-1 text-text-primary">
            {tabs.map((tab) => (
              <button
                type="button"
                key={tab.key}
                className={cn(
                  'flex h-8 flex-1 shrink-0 items-center justify-center rounded-lg p-2 system-sm-medium text-text-tertiary',
                  activeTab === tab.key &&
                    'bg-components-main-nav-nav-button-bg-active text-text-accent shadow-md',
                )}
                onClick={() => setActiveTab(tab.key as AppIconType)}
              >
                {tab.icon} &nbsp;
                {tab.label}
              </button>
            ))}
          </div>
        </div>
      )}

      {activeTab === 'emoji' && (
        <EmojiPickerInner
          className={cn('flex-1 overflow-hidden pt-2')}
          emoji={initialEmoji?.icon}
          background={initialEmoji?.background ?? undefined}
          onSelect={(emoji, background) => setEmoji({ emoji, background })}
        />
      )}
      {activeTab === 'image' && (
        <ImageInput className={cn('flex-1 overflow-hidden')} onImageInput={handleImageInput} />
      )}

      <Divider className="m-0" />
      <div className="flex w-full items-center justify-center gap-2 p-3">
        <Button className="w-full" onClick={() => onOpenChange(false)}>
          {t(($) => $['iconPicker.cancel'], { ns: 'app' })}
        </Button>

        <Button
          variant="primary"
          className="w-full"
          disabled={uploading}
          loading={uploading}
          onClick={handleSelect}
        >
          {t(($) => $['iconPicker.ok'], { ns: 'app' })}
        </Button>
      </div>
    </DialogContent>
  )
}

export default AppIconPicker