feat: custom app icon (#7196)

Co-authored-by: crazywoola <427733928@qq.com>

web/app/components/base/app-icon-picker/Uploader.tsx

@@ -0,0 +1,97 @@
+'use client'
+
+import type { ChangeEvent, FC } from 'react'
+import { createRef, useEffect, useState } from 'react'
+import type { Area } from 'react-easy-crop'
+import Cropper from 'react-easy-crop'
+import classNames from 'classnames'
+
+import { ImagePlus } from '../icons/src/vender/line/images'
+import { useDraggableUploader } from './hooks'
+import { ALLOW_FILE_EXTENSIONS } from '@/types/app'
+
+type UploaderProps = {
+  className?: string
+  onImageCropped?: (tempUrl: string, croppedAreaPixels: Area, fileName: string) => void
+}
+
+const Uploader: FC<UploaderProps> = ({
+  className,
+  onImageCropped,
+}) => {
+  const [inputImage, setInputImage] = useState<{ file: File; url: string }>()
+  useEffect(() => {
+    return () => {
+      if (inputImage)
+        URL.revokeObjectURL(inputImage.url)
+    }
+  }, [inputImage])
+
+  const [crop, setCrop] = useState({ x: 0, y: 0 })
+  const [zoom, setZoom] = useState(1)
+
+  const onCropComplete = async (_: Area, croppedAreaPixels: Area) => {
+    if (!inputImage)
+      return
+    onImageCropped?.(inputImage.url, croppedAreaPixels, inputImage.file.name)
+  }
+
+  const handleLocalFileInput = (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (file)
+      setInputImage({ file, url: URL.createObjectURL(file) })
+  }
+
+  const {
+    isDragActive,
+    handleDragEnter,
+    handleDragOver,
+    handleDragLeave,
+    handleDrop,
+  } = useDraggableUploader((file: File) => setInputImage({ file, url: URL.createObjectURL(file) }))
+
+  const inputRef = createRef<HTMLInputElement>()
+
+  return (
+    <div className={classNames(className, 'w-full px-3 py-1.5')}>
+      <div
+        className={classNames(
+          isDragActive && 'border-primary-600',
+          'relative aspect-square bg-gray-50 border-[1.5px] border-gray-200 border-dashed rounded-lg flex flex-col justify-center items-center text-gray-500')}
+        onDragEnter={handleDragEnter}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+      >
+        {
+          !inputImage
+            ? <>
+              <ImagePlus className="w-[30px] h-[30px] mb-3 pointer-events-none" />
+              <div className="text-sm font-medium mb-[2px]">
+                <span className="pointer-events-none">Drop your image here, or&nbsp;</span>
+                <button className="text-components-button-primary-bg" onClick={() => inputRef.current?.click()}>browse</button>
+                <input
+                  ref={inputRef} type="file" className="hidden"
+                  onClick={e => ((e.target as HTMLInputElement).value = '')}
+                  accept={ALLOW_FILE_EXTENSIONS.map(ext => `.${ext}`).join(',')}
+                  onChange={handleLocalFileInput}
+                />
+              </div>
+              <div className="text-xs pointer-events-none">Supports PNG, JPG, JPEG, WEBP and GIF</div>
+            </>
+            : <Cropper
+              image={inputImage.url}
+              crop={crop}
+              zoom={zoom}
+              aspect={1}
+              onCropChange={setCrop}
+              onCropComplete={onCropComplete}
+              onZoomChange={setZoom}
+            />
+        }
+      </div>
+    </div>
+  )
+}
+
+export default Uploader

web/app/components/base/app-icon-picker/hooks.tsx

@@ -0,0 +1,43 @@
+import { useCallback, useState } from 'react'
+
+export const useDraggableUploader = <T extends HTMLElement>(setImageFn: (file: File) => void) => {
+  const [isDragActive, setIsDragActive] = useState(false)
+
+  const handleDragEnter = useCallback((e: React.DragEvent<T>) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsDragActive(true)
+  }, [])
+
+  const handleDragOver = useCallback((e: React.DragEvent<T>) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }, [])
+
+  const handleDragLeave = useCallback((e: React.DragEvent<T>) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsDragActive(false)
+  }, [])
+
+  const handleDrop = useCallback((e: React.DragEvent<T>) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsDragActive(false)
+
+    const file = e.dataTransfer.files[0]
+
+    if (!file)
+      return
+
+    setImageFn(file)
+  }, [setImageFn])
+
+  return {
+    handleDragEnter,
+    handleDragOver,
+    handleDragLeave,
+    handleDrop,
+    isDragActive,
+  }
+}

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

@@ -0,0 +1,139 @@
+import type { FC } from 'react'
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { Area } from 'react-easy-crop'
+import Modal from '../modal'
+import Divider from '../divider'
+import Button from '../button'
+import { ImagePlus } from '../icons/src/vender/line/images'
+import { useLocalFileUploader } from '../image-uploader/hooks'
+import EmojiPickerInner from '../emoji-picker/Inner'
+import Uploader from './Uploader'
+import s from './style.module.css'
+import getCroppedImg from './utils'
+import type { AppIconType, ImageFile } from '@/types/app'
+import cn from '@/utils/classnames'
+import { DISABLE_UPLOAD_IMAGE_AS_ICON } from '@/config'
+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 = {
+  onSelect?: (payload: AppIconSelection) => void
+  onClose?: () => void
+  className?: string
+}
+
+const AppIconPicker: FC<AppIconPickerProps> = ({
+  onSelect,
+  onClose,
+  className,
+}) => {
+  const { t } = useTranslation()
+
+  const tabs = [
+    { key: 'emoji', label: t('app.iconPicker.emoji'), icon: <span className="text-lg">🤖</span> },
+    { key: 'image', label: t('app.iconPicker.image'), icon: <ImagePlus /> },
+  ]
+  const [activeTab, setActiveTab] = useState<AppIconType>('emoji')
+
+  const [emoji, setEmoji] = useState<{ emoji: string; background: string }>()
+  const handleSelectEmoji = useCallback((emoji: string, background: string) => {
+    setEmoji({ emoji, background })
+  }, [setEmoji])
+
+  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,
+        })
+      }
+    },
+  })
+
+  const [imageCropInfo, setImageCropInfo] = useState<{ tempUrl: string; croppedAreaPixels: Area; fileName: string }>()
+  const handleImageCropped = async (tempUrl: string, croppedAreaPixels: Area, fileName: string) => {
+    setImageCropInfo({ tempUrl, croppedAreaPixels, fileName })
+  }
+
+  const handleSelect = async () => {
+    if (activeTab === 'emoji') {
+      if (emoji) {
+        onSelect?.({
+          type: 'emoji',
+          icon: emoji.emoji,
+          background: emoji.background,
+        })
+      }
+    }
+    else {
+      if (!imageCropInfo)
+        return
+      setUploading(true)
+      const blob = await getCroppedImg(imageCropInfo.tempUrl, imageCropInfo.croppedAreaPixels)
+      const file = new File([blob], imageCropInfo.fileName, { type: blob.type })
+      handleLocalFileUpload(file)
+    }
+  }
+
+  return <Modal
+    onClose={() => { }}
+    isShow
+    closable={false}
+    wrapperClassName={className}
+    className={cn(s.container, '!w-[362px] !p-0')}
+  >
+    {!DISABLE_UPLOAD_IMAGE_AS_ICON && <div className="p-2 pb-0 w-full">
+      <div className='p-1 flex items-center justify-center gap-2 bg-background-body rounded-xl'>
+        {tabs.map(tab => (
+          <button
+            key={tab.key}
+            className={`
+                        p-2 flex-1 flex justify-center items-center h-8 rounded-xl text-sm shrink-0 font-medium
+                        ${activeTab === tab.key && 'bg-components-main-nav-nav-button-bg-active shadow-md'}
+                      `}
+            onClick={() => setActiveTab(tab.key as AppIconType)}
+          >
+            {tab.icon} &nbsp; {tab.label}
+          </button>
+        ))}
+      </div>
+    </div>}
+
+    <Divider className='m-0' />
+
+    <EmojiPickerInner className={activeTab === 'emoji' ? 'block' : 'hidden'} onSelect={handleSelectEmoji} />
+    <Uploader className={activeTab === 'image' ? 'block' : 'hidden'} onImageCropped={handleImageCropped} />
+
+    <Divider className='m-0' />
+    <div className='w-full flex items-center justify-center p-3 gap-2'>
+      <Button className='w-full' onClick={() => onClose?.()}>
+        {t('app.iconPicker.cancel')}
+      </Button>
+
+      <Button variant="primary" className='w-full' disabled={uploading} loading={uploading} onClick={handleSelect}>
+        {t('app.iconPicker.ok')}
+      </Button>
+    </div>
+  </Modal>
+}
+
+export default AppIconPicker

web/app/components/base/app-icon-picker/style.module.css

@@ -0,0 +1,12 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 362px;
+    max-height: 552px;
+
+    border: 0.5px solid #EAECF0;
+    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+    border-radius: 12px;
+    background: #fff;
+}

web/app/components/base/app-icon-picker/utils.ts

@@ -0,0 +1,98 @@
+export const createImage = (url: string) =>
+  new Promise<HTMLImageElement>((resolve, reject) => {
+    const image = new Image()
+    image.addEventListener('load', () => resolve(image))
+    image.addEventListener('error', error => reject(error))
+    image.setAttribute('crossOrigin', 'anonymous') // needed to avoid cross-origin issues on CodeSandbox
+    image.src = url
+  })
+
+export function getRadianAngle(degreeValue: number) {
+  return (degreeValue * Math.PI) / 180
+}
+
+/**
+ * Returns the new bounding area of a rotated rectangle.
+ */
+export function rotateSize(width: number, height: number, rotation: number) {
+  const rotRad = getRadianAngle(rotation)
+
+  return {
+    width:
+            Math.abs(Math.cos(rotRad) * width) + Math.abs(Math.sin(rotRad) * height),
+    height:
+            Math.abs(Math.sin(rotRad) * width) + Math.abs(Math.cos(rotRad) * height),
+  }
+}
+
+/**
+ * This function was adapted from the one in the ReadMe of https://github.com/DominicTobias/react-image-crop
+ */
+export default async function getCroppedImg(
+  imageSrc: string,
+  pixelCrop: { x: number; y: number; width: number; height: number },
+  rotation = 0,
+  flip = { horizontal: false, vertical: false },
+): Promise<Blob> {
+  const image = await createImage(imageSrc)
+  const canvas = document.createElement('canvas')
+  const ctx = canvas.getContext('2d')
+
+  if (!ctx)
+    throw new Error('Could not create a canvas context')
+
+  const rotRad = getRadianAngle(rotation)
+
+  // calculate bounding box of the rotated image
+  const { width: bBoxWidth, height: bBoxHeight } = rotateSize(
+    image.width,
+    image.height,
+    rotation,
+  )
+
+  // set canvas size to match the bounding box
+  canvas.width = bBoxWidth
+  canvas.height = bBoxHeight
+
+  // translate canvas context to a central location to allow rotating and flipping around the center
+  ctx.translate(bBoxWidth / 2, bBoxHeight / 2)
+  ctx.rotate(rotRad)
+  ctx.scale(flip.horizontal ? -1 : 1, flip.vertical ? -1 : 1)
+  ctx.translate(-image.width / 2, -image.height / 2)
+
+  // draw rotated image
+  ctx.drawImage(image, 0, 0)
+
+  const croppedCanvas = document.createElement('canvas')
+
+  const croppedCtx = croppedCanvas.getContext('2d')
+
+  if (!croppedCtx)
+    throw new Error('Could not create a canvas context')
+
+  // Set the size of the cropped canvas
+  croppedCanvas.width = pixelCrop.width
+  croppedCanvas.height = pixelCrop.height
+
+  // Draw the cropped image onto the new canvas
+  croppedCtx.drawImage(
+    canvas,
+    pixelCrop.x,
+    pixelCrop.y,
+    pixelCrop.width,
+    pixelCrop.height,
+    0,
+    0,
+    pixelCrop.width,
+    pixelCrop.height,
+  )
+
+  return new Promise((resolve, reject) => {
+    croppedCanvas.toBlob((file) => {
+      if (file)
+        resolve(file)
+      else
+        reject(new Error('Could not create a blob'))
+    }, 'image/jpeg')
+  })
+}

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

@@ -1,17 +1,21 @@
-import type { FC } from 'react'
+'use client'
 
-import data from '@emoji-mart/data'
+import type { FC } from 'react'
 import { init } from 'emoji-mart'
+import data from '@emoji-mart/data'
 import style from './style.module.css'
 import classNames from '@/utils/classnames'
+import type { AppIconType } from '@/types/app'
 
 init({ data })
 
 export type AppIconProps = {
   size?: 'xs' | 'tiny' | 'small' | 'medium' | 'large'
   rounded?: boolean
+  iconType?: AppIconType | null
   icon?: string
-  background?: string
+  background?: string | null
+  imageUrl?: string | null
   className?: string
   innerIcon?: React.ReactNode
   onClick?: () => void
@@ -20,28 +24,34 @@ export type AppIconProps = {
 const AppIcon: FC<AppIconProps> = ({
   size = 'medium',
   rounded = false,
+  iconType,
   icon,
   background,
+  imageUrl,
   className,
   innerIcon,
   onClick,
 }) => {
-  return (
-    <span
-      className={classNames(
-        style.appIcon,
-        size !== 'medium' && style[size],
-        rounded && style.rounded,
-        className ?? '',
-      )}
-      style={{
-        background,
-      }}
-      onClick={onClick}
-    >
-      {innerIcon || ((icon && icon !== '') ? <em-emoji id={icon} /> : <em-emoji id='🤖' />)}
-    </span>
+  const wrapperClassName = classNames(
+    style.appIcon,
+    size !== 'medium' && style[size],
+    rounded && style.rounded,
+    className ?? '',
+    'overflow-hidden',
   )
+
+  const isValidImageIcon = iconType === 'image' && imageUrl
+
+  return <span
+    className={wrapperClassName}
+    style={{ background: isValidImageIcon ? undefined : (background || '#FFEAD5') }}
+    onClick={onClick}
+  >
+    {isValidImageIcon
+      ? <img src={imageUrl} className="w-full h-full" alt="app icon" />
+      : (innerIcon || ((icon && icon !== '') ? <em-emoji id={icon} /> : <em-emoji id='🤖' />))
+    }
+  </span>
 }
 
 export default AppIcon

web/app/components/base/app-icon/style.module.css

@@ -1,5 +1,5 @@
 .appIcon {
-  @apply flex items-center justify-center relative w-9 h-9 text-lg bg-teal-100 rounded-lg grow-0 shrink-0;
+  @apply flex items-center justify-center relative w-9 h-9 text-lg rounded-lg grow-0 shrink-0;
 }
 
 .appIcon.large {

web/app/components/base/chat/chat-with-history/hooks.tsx

@@ -43,7 +43,13 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
   const isInstalledApp = useMemo(() => !!installedAppInfo, [installedAppInfo])
   const { data: appInfo, isLoading: appInfoLoading, error: appInfoError } = useSWR(installedAppInfo ? null : 'appInfo', fetchAppInfo)
 
-  useAppFavicon(!installedAppInfo, appInfo?.site.icon, appInfo?.site.icon_background)
+  useAppFavicon({
+    enable: !installedAppInfo,
+    icon_type: appInfo?.site.icon_type,
+    icon: appInfo?.site.icon,
+    icon_background: appInfo?.site.icon_background,
+    icon_url: appInfo?.site.icon_url,
+  })
 
   const appData = useMemo(() => {
     if (isInstalledApp) {
@@ -52,8 +58,10 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
         app_id: id,
         site: {
           title: app.name,
+          icon_type: app.icon_type,
           icon: app.icon,
           icon_background: app.icon_background,
+          icon_url: app.icon_url,
           prompt_public: false,
           copyright: '',
           show_workflow_steps: true,

web/app/components/base/chat/chat-with-history/sidebar/index.tsx

@@ -67,8 +67,10 @@ const Sidebar = () => {
             <AppIcon
               className='mr-3'
               size='small'
+              iconType={appData?.site.icon_type}
               icon={appData?.site.icon}
               background={appData?.site.icon_background}
+              imageUrl={appData?.site.icon_url}
             />
             <div className='py-1 text-base font-semibold text-gray-800'>
               {appData?.site.title}

web/app/components/base/emoji-picker/Inner.tsx

@@ -0,0 +1,171 @@
+'use client'
+import type { ChangeEvent, FC } from 'react'
+import React, { useState } from 'react'
+import data from '@emoji-mart/data'
+import type { EmojiMartData } from '@emoji-mart/data'
+import { init } from 'emoji-mart'
+import {
+  MagnifyingGlassIcon,
+} from '@heroicons/react/24/outline'
+import cn from '@/utils/classnames'
+import Divider from '@/app/components/base/divider'
+import { searchEmoji } from '@/utils/emoji'
+
+declare global {
+  namespace JSX {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+    interface IntrinsicElements {
+      'em-emoji': React.DetailedHTMLProps< React.HTMLAttributes<HTMLElement>, HTMLElement >
+    }
+  }
+}
+
+init({ data })
+
+const backgroundColors = [
+  '#FFEAD5',
+  '#E4FBCC',
+  '#D3F8DF',
+  '#E0F2FE',
+
+  '#E0EAFF',
+  '#EFF1F5',
+  '#FBE8FF',
+  '#FCE7F6',
+
+  '#FEF7C3',
+  '#E6F4D7',
+  '#D5F5F6',
+  '#D1E9FF',
+
+  '#D1E0FF',
+  '#D5D9EB',
+  '#ECE9FE',
+  '#FFE4E8',
+]
+
+type IEmojiPickerInnerProps = {
+  emoji?: string
+  background?: string
+  onSelect?: (emoji: string, background: string) => void
+  className?: string
+}
+
+const EmojiPickerInner: FC<IEmojiPickerInnerProps> = ({
+  onSelect,
+  className,
+}) => {
+  const { categories } = data as EmojiMartData
+  const [selectedEmoji, setSelectedEmoji] = useState('')
+  const [selectedBackground, setSelectedBackground] = useState(backgroundColors[0])
+
+  const [searchedEmojis, setSearchedEmojis] = useState<string[]>([])
+  const [isSearching, setIsSearching] = useState(false)
+
+  React.useEffect(() => {
+    if (selectedEmoji && selectedBackground)
+      onSelect?.(selectedEmoji, selectedBackground)
+  }, [onSelect, selectedEmoji, selectedBackground])
+
+  return <div className={cn(className)}>
+    <div className='flex flex-col items-center w-full px-3'>
+      <div className="relative w-full">
+        <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+          <MagnifyingGlassIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
+        </div>
+        <input
+          type="search"
+          id="search"
+          className='block w-full h-10 px-3 pl-10 text-sm font-normal bg-gray-100 rounded-lg'
+          placeholder="Search emojis..."
+          onChange={async (e: ChangeEvent<HTMLInputElement>) => {
+            if (e.target.value === '') {
+              setIsSearching(false)
+            }
+            else {
+              setIsSearching(true)
+              const emojis = await searchEmoji(e.target.value)
+              setSearchedEmojis(emojis)
+            }
+          }}
+        />
+      </div>
+    </div>
+    <Divider className='m-0 mb-3' />
+
+    <div className="w-full max-h-[200px] overflow-x-hidden overflow-y-auto px-3">
+      {isSearching && <>
+        <div key={'category-search'} className='flex flex-col'>
+          <p className='font-medium uppercase text-xs text-[#101828] mb-1'>Search</p>
+          <div className='w-full h-full grid grid-cols-8 gap-1'>
+            {searchedEmojis.map((emoji: string, index: number) => {
+              return <div
+                key={`emoji-search-${index}`}
+                className='inline-flex w-10 h-10 rounded-lg items-center justify-center'
+                onClick={() => {
+                  setSelectedEmoji(emoji)
+                }}
+              >
+                <div className='cursor-pointer w-8 h-8 p-1 flex items-center justify-center rounded-lg hover:ring-1 ring-offset-1 ring-gray-300'>
+                  <em-emoji id={emoji} />
+                </div>
+              </div>
+            })}
+          </div>
+        </div>
+      </>}
+
+      {categories.map((category, index: number) => {
+        return <div key={`category-${index}`} className='flex flex-col'>
+          <p className='font-medium uppercase text-xs text-[#101828] mb-1'>{category.id}</p>
+          <div className='w-full h-full grid grid-cols-8 gap-1'>
+            {category.emojis.map((emoji, index: number) => {
+              return <div
+                key={`emoji-${index}`}
+                className='inline-flex w-10 h-10 rounded-lg items-center justify-center'
+                onClick={() => {
+                  setSelectedEmoji(emoji)
+                }}
+              >
+                <div className='cursor-pointer w-8 h-8 p-1 flex items-center justify-center rounded-lg hover:ring-1 ring-offset-1 ring-gray-300'>
+                  <em-emoji id={emoji} />
+                </div>
+              </div>
+            })}
+
+          </div>
+        </div>
+      })}
+    </div>
+
+    {/* Color Select */}
+    <div className={cn('p-3 pb-0', selectedEmoji === '' ? 'opacity-25' : '')}>
+      <p className='font-medium uppercase text-xs text-[#101828] mb-2'>Choose Style</p>
+      <div className='w-full h-full grid grid-cols-8 gap-1'>
+        {backgroundColors.map((color) => {
+          return <div
+            key={color}
+            className={
+              cn(
+                'cursor-pointer',
+                'hover:ring-1 ring-offset-1',
+                'inline-flex w-10 h-10 rounded-lg items-center justify-center',
+                color === selectedBackground ? 'ring-1 ring-gray-300' : '',
+              )}
+            onClick={() => {
+              setSelectedBackground(color)
+            }}
+          >
+            <div className={cn(
+              'w-8 h-8 p-1 flex items-center justify-center rounded-lg',
+            )
+            } style={{ background: color }}>
+              {selectedEmoji !== '' && <em-emoji id={selectedEmoji} />}
+            </div>
+          </div>
+        })}
+      </div>
+    </div>
+  </div>
+}
+export default EmojiPickerInner

web/app/components/base/emoji-picker/index.tsx

@@ -1,56 +1,13 @@
-/* eslint-disable multiline-ternary */
 'use client'
-import type { ChangeEvent, FC } from 'react'
-import React, { useState } from 'react'
-import data from '@emoji-mart/data'
-import type { EmojiMartData } from '@emoji-mart/data'
-import { init } from 'emoji-mart'
-import {
-  MagnifyingGlassIcon,
-} from '@heroicons/react/24/outline'
+import type { FC } from 'react'
+import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import s from './style.module.css'
+import EmojiPickerInner from './Inner'
 import cn from '@/utils/classnames'
 import Divider from '@/app/components/base/divider'
 import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
-import { searchEmoji } from '@/utils/emoji'
-
-declare global {
-  namespace JSX {
-    // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
-    interface IntrinsicElements {
-      'em-emoji': React.DetailedHTMLProps<
-      React.HTMLAttributes<HTMLElement>,
-      HTMLElement
-      >
-    }
-  }
-}
-
-init({ data })
-
-const backgroundColors = [
-  '#FFEAD5',
-  '#E4FBCC',
-  '#D3F8DF',
-  '#E0F2FE',
-
-  '#E0EAFF',
-  '#EFF1F5',
-  '#FBE8FF',
-  '#FCE7F6',
-
-  '#FEF7C3',
-  '#E6F4D7',
-  '#D5F5F6',
-  '#D1E9FF',
-
-  '#D1E0FF',
-  '#D5D9EB',
-  '#ECE9FE',
-  '#FFE4E8',
-]
 
 type IEmojiPickerProps = {
   isModal?: boolean
@@ -66,136 +23,43 @@ const EmojiPicker: FC<IEmojiPickerProps> = ({
   className,
 }) => {
   const { t } = useTranslation()
-  const { categories } = data as EmojiMartData
   const [selectedEmoji, setSelectedEmoji] = useState('')
-  const [selectedBackground, setSelectedBackground] = useState(backgroundColors[0])
+  const [selectedBackground, setSelectedBackground] = useState<string>()
 
-  const [searchedEmojis, setSearchedEmojis] = useState<string[]>([])
-  const [isSearching, setIsSearching] = useState(false)
+  const handleSelectEmoji = useCallback((emoji: string, background: string) => {
+    setSelectedEmoji(emoji)
+    setSelectedBackground(background)
+  }, [setSelectedEmoji, setSelectedBackground])
 
-  return isModal ? <Modal
-    onClose={() => { }}
-    isShow
-    closable={false}
-    wrapperClassName={className}
-    className={cn(s.container, '!w-[362px] !p-0')}
-  >
-    <div className='flex flex-col items-center w-full p-3'>
-      <div className="relative w-full">
-        <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-          <MagnifyingGlassIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
-        </div>
-        <input
-          type="search"
-          id="search"
-          className='block w-full h-10 px-3 pl-10 text-sm font-normal bg-gray-100 rounded-lg'
-          placeholder="Search emojis..."
-          onChange={async (e: ChangeEvent<HTMLInputElement>) => {
-            if (e.target.value === '') {
-              setIsSearching(false)
-            }
-            else {
-              setIsSearching(true)
-              const emojis = await searchEmoji(e.target.value)
-              setSearchedEmojis(emojis)
-            }
-          }}
-        />
-      </div>
-    </div>
-    <Divider className='m-0 mb-3' />
-
-    <div className="w-full max-h-[200px] overflow-x-hidden overflow-y-auto px-3">
-      {isSearching && <>
-        <div key={'category-search'} className='flex flex-col'>
-          <p className='font-medium uppercase text-xs text-[#101828] mb-1'>Search</p>
-          <div className='w-full h-full grid grid-cols-8 gap-1'>
-            {searchedEmojis.map((emoji: string, index: number) => {
-              return <div
-                key={`emoji-search-${index}`}
-                className='inline-flex w-10 h-10 rounded-lg items-center justify-center'
-                onClick={() => {
-                  setSelectedEmoji(emoji)
-                }}
-              >
-                <div className='cursor-pointer w-8 h-8 p-1 flex items-center justify-center rounded-lg hover:ring-1 ring-offset-1 ring-gray-300'>
-                  <em-emoji id={emoji} />
-                </div>
-              </div>
-            })}
-          </div>
-        </div>
-      </>}
-
-      {categories.map((category, index: number) => {
-        return <div key={`category-${index}`} className='flex flex-col'>
-          <p className='font-medium uppercase text-xs text-[#101828] mb-1'>{category.id}</p>
-          <div className='w-full h-full grid grid-cols-8 gap-1'>
-            {category.emojis.map((emoji, index: number) => {
-              return <div
-                key={`emoji-${index}`}
-                className='inline-flex w-10 h-10 rounded-lg items-center justify-center'
-                onClick={() => {
-                  setSelectedEmoji(emoji)
-                }}
-              >
-                <div className='cursor-pointer w-8 h-8 p-1 flex items-center justify-center rounded-lg hover:ring-1 ring-offset-1 ring-gray-300'>
-                  <em-emoji id={emoji} />
-                </div>
-              </div>
-            })}
-
-          </div>
-        </div>
-      })}
-    </div>
-
-    {/* Color Select */}
-    <div className={cn('p-3 ', selectedEmoji === '' ? 'opacity-25' : '')}>
-      <p className='font-medium uppercase text-xs text-[#101828] mb-2'>Choose Style</p>
-      <div className='w-full h-full grid grid-cols-8 gap-1'>
-        {backgroundColors.map((color) => {
-          return <div
-            key={color}
-            className={
-              cn(
-                'cursor-pointer',
-                'hover:ring-1 ring-offset-1',
-                'inline-flex w-10 h-10 rounded-lg items-center justify-center',
-                color === selectedBackground ? 'ring-1 ring-gray-300' : '',
-              )}
-            onClick={() => {
-              setSelectedBackground(color)
-            }}
-          >
-            <div className={cn(
-              'w-8 h-8 p-1 flex items-center justify-center rounded-lg',
-            )
-            } style={{ background: color }}>
-              {selectedEmoji !== '' && <em-emoji id={selectedEmoji} />}
-            </div>
-          </div>
-        })}
-      </div>
-    </div>
-    <Divider className='m-0' />
-    <div className='w-full flex items-center justify-center p-3 gap-2'>
-      <Button className='w-full' onClick={() => {
-        onClose && onClose()
-      }}>
-        {t('app.emoji.cancel')}
-      </Button>
-      <Button
-        disabled={selectedEmoji === ''}
-        variant="primary"
-        className='w-full'
-        onClick={() => {
-          onSelect && onSelect(selectedEmoji, selectedBackground)
+  return isModal
+    ? <Modal
+      onClose={() => { }}
+      isShow
+      closable={false}
+      wrapperClassName={className}
+      className={cn(s.container, '!w-[362px] !p-0')}
+    >
+      <EmojiPickerInner
+        className="pt-3"
+        onSelect={handleSelectEmoji} />
+      <Divider className='m-0' />
+      <div className='w-full flex items-center justify-center p-3 gap-2'>
+        <Button className='w-full' onClick={() => {
+          onClose && onClose()
         }}>
-        {t('app.emoji.ok')}
-      </Button>
-    </div>
-  </Modal> : <>
-  </>
+          {t('app.iconPicker.cancel')}
+        </Button>
+        <Button
+          disabled={selectedEmoji === '' || !selectedBackground}
+          variant="primary"
+          className='w-full'
+          onClick={() => {
+            onSelect && onSelect(selectedEmoji, selectedBackground!)
+          }}>
+          {t('app.iconPicker.ok')}
+        </Button>
+      </div>
+    </Modal>
+    : <></>
 }
 export default EmojiPicker