Feature/add emoji to webapp (#345)

web/app/(commonLayout)/apps/NewAppDialog.tsx

@@ -52,7 +52,7 @@ const NewAppDialog = ({ show, onSuccess, onClose }: NewAppDialogProps) => {
       mutateTemplates()
       setIsWithTemplate(false)
     }
-  }, [show])
+  }, [mutateTemplates, show])
 
   const isCreatingRef = useRef(false)
   const onCreate: MouseEventHandler = useCallback(async () => {
@@ -97,7 +97,6 @@ const NewAppDialog = ({ show, onSuccess, onClose }: NewAppDialogProps) => {
   return <>
     {showEmojiPicker && <EmojiPicker
       onSelect={(icon, icon_background) => {
-        console.log(icon, icon_background)
         setEmoji({ icon, icon_background })
         setShowEmojiPicker(false)
       }}

web/app/components/app/overview/customize/index.tsx

@@ -1,10 +1,10 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import { AppMode } from '@/types/app'
 import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
+import type { AppMode } from '@/types/app'
 import I18n from '@/context/i18n'
 import Button from '@/app/components/base/button'
 import Modal from '@/app/components/base/modal'
@@ -23,8 +23,6 @@ const StepNum: FC<{ children: React.ReactNode }> = ({ children }) =>
     {children}
   </div>
 
-
-
 const GithubIcon = ({ className }: { className: string }) => {
   return (
     <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
@@ -73,7 +71,7 @@ const CustomizeModal: FC<IShareLinkProps> = ({
           <div className='text-gray-500 text-xs mt-1 mb-2'>{t(`${prefixCustomize}.way1.step2Tip`)}</div>
           <pre className='box-border py-3 px-4 bg-gray-100 text-xs font-medium rounded-lg select-text'>
             export const APP_ID = '{appId}'<br />
-            export const API_KEY = {`'<Web API Key From Dify>'`}
+            export const API_KEY = {'\'<Web API Key From Dify>\''}
           </pre>
         </div>
       </div>

web/app/components/app/overview/settings/index.tsx

@@ -7,11 +7,11 @@ import { Trans, useTranslation } from 'react-i18next'
 import s from './style.module.css'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
-import Switch from '@/app/components/base/switch'
 import AppIcon from '@/app/components/base/app-icon'
 import { SimpleSelect } from '@/app/components/base/select'
 import type { AppDetailResponse } from '@/models/app'
 import type { Language } from '@/types/app'
+import EmojiPicker from '@/app/components/base/emoji-picker'
 
 export type ISettingsModalProps = {
   appInfo: AppDetailResponse
@@ -42,11 +42,14 @@ const SettingsModal: FC<ISettingsModalProps> = ({
   onSave,
 }) => {
   const [isShowMore, setIsShowMore] = useState(false)
-  const { title, description, copyright, privacy_policy, default_language } = appInfo.site
+  const { title, description, copyright, privacy_policy, default_language, icon, icon_background } = appInfo.site
   const [inputInfo, setInputInfo] = useState({ title, desc: description, copyright, privacyPolicy: privacy_policy })
   const [language, setLanguage] = useState(default_language)
   const [saveLoading, setSaveLoading] = useState(false)
   const { t } = useTranslation()
+  // Emoji Picker
+  const [showEmojiPicker, setShowEmojiPicker] = useState(false)
+  const [emoji, setEmoji] = useState({ icon, icon_background })
 
   const onHide = () => {
     onClose()
@@ -64,6 +67,8 @@ const SettingsModal: FC<ISettingsModalProps> = ({
       prompt_public: false,
       copyright: inputInfo.copyright,
       privacy_policy: inputInfo.privacyPolicy,
+      icon: emoji.icon,
+      icon_background: emoji.icon_background,
     }
     await onSave(params)
     setSaveLoading(false)
@@ -77,6 +82,18 @@ const SettingsModal: FC<ISettingsModalProps> = ({
   }
 
   return (
+    <>
+      {showEmojiPicker && <EmojiPicker
+        onSelect={(icon, icon_background) => {
+          console.log(icon, icon_background)
+          setEmoji({ icon, icon_background })
+          setShowEmojiPicker(false)
+        }}
+        onClose={() => {
+          setEmoji({ icon: '🤖', icon_background: '#FFEAD5' })
+          setShowEmojiPicker(false)
+        }}
+      />}
       <Modal
         title={t(`${prefixSettings}.title`)}
         isShow={isShow}
@@ -85,7 +102,12 @@ const SettingsModal: FC<ISettingsModalProps> = ({
       >
         <div className={`mt-6 font-medium ${s.settingTitle} text-gray-900`}>{t(`${prefixSettings}.webName`)}</div>
         <div className='flex mt-2'>
-        <AppIcon className='!mr-3 self-center' />
+          <AppIcon size='large'
+            onClick={() => { setShowEmojiPicker(true) }}
+            className='cursor-pointer !mr-3 self-center'
+            icon={emoji.icon}
+            background={emoji.icon_background}
+          />
           <input className={`flex-grow rounded-lg h-10 box-border px-3 ${s.projectName} bg-gray-100`}
             value={inputInfo.title}
             onChange={onChange('title')} />
@@ -140,6 +162,8 @@ const SettingsModal: FC<ISettingsModalProps> = ({
           <Button type='primary' className='flex-shrink-0' onClick={onClickSave} loading={saveLoading}>{t('common.operation.save')}</Button>
         </div>
       </Modal >
+    </>
+
   )
 }
 export default React.memo(SettingsModal)

web/app/components/base/loading/index.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 
 import './style.css'
-interface ILoadingProps {
+type ILoadingProps = {
   type?: 'area' | 'app'
 }
 const Loading = (
-  { type = 'area' }: ILoadingProps = { type: 'area' }
+  { type = 'area' }: ILoadingProps = { type: 'area' },
 ) => {
   return (
     <div className={`flex w-full justify-center items-center ${type === 'app' ? 'h-full' : ''}`}>

web/app/components/base/loading/style.css

@@ -1,5 +1,5 @@
 .spin-animation path {
-    animation: custom 2s linear infinite;
+    animation: custom 1s linear infinite;
 }
 
 @keyframes custom {
@@ -29,13 +29,13 @@
 }
 
 .spin-animation path:nth-child(2) {
-    animation-delay: 0.5s;
+    animation-delay: 0.25s;
 }
 
 .spin-animation path:nth-child(3) {
-    animation-delay: 1s;
+    animation-delay: 0.5s;
 }
 
 .spin-animation path:nth-child(4) {
-    animation-delay: 1.5s;
+    animation-delay: 1s;
 }

web/types/app.ts

@@ -179,6 +179,9 @@ export type SiteConfig = {
   copyright: string
   /** Privacy Policy */
   privacy_policy: string
+
+  icon: string
+  icon_background: string
 }
 
 /**