fix: robot emoji (#217)

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

@@ -37,7 +37,7 @@ const NewAppDialog = ({ show, onSuccess, onClose }: NewAppDialogProps) => {
 
   // Emoji Picker
   const [showEmojiPicker, setShowEmojiPicker] = useState(false)
-  const [emoji, setEmoji] = useState({ icon: '🤖️', icon_background: '#FFEAD5' })
+  const [emoji, setEmoji] = useState({ icon: '🤖', icon_background: '#FFEAD5' })
 
   const mutateApps = useContextSelector(AppsContext, state => state.mutateApps)
 
@@ -102,7 +102,7 @@ const NewAppDialog = ({ show, onSuccess, onClose }: NewAppDialogProps) => {
         setShowEmojiPicker(false)
       }}
       onClose={() => {
-        setEmoji({ icon: '🤖️', icon_background: '#FFEAD5' })
+        setEmoji({ icon: '🤖', icon_background: '#FFEAD5' })
         setShowEmojiPicker(false)
       }}
     />}

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

@@ -39,7 +39,7 @@ const AppIcon: FC<AppIconProps> = ({
       }}
       onClick={onClick}
     >
-      {innerIcon ? innerIcon : icon && icon !== '' ? <em-emoji id={icon} /> : <em-emoji id={'robot'} />}
+      {innerIcon ? innerIcon : icon && icon !== '' ? <em-emoji id={icon} /> : <em-emoji id='🤖' />}
     </span>
   )
 }

web/app/components/explore/create-app-modal/index.tsx

@@ -28,7 +28,7 @@ const CreateAppModal = ({
   const [name, setName] = React.useState('')
 
   const [showEmojiPicker, setShowEmojiPicker] = useState(false)
-  const [emoji, setEmoji] = useState({ icon: '🤖️', icon_background: '#FFEAD5' })
+  const [emoji, setEmoji] = useState({ icon: '🤖', icon_background: '#FFEAD5' })
 
   const submit = () => {
     if(!name.trim()) {
@@ -74,7 +74,7 @@ const CreateAppModal = ({
         setShowEmojiPicker(false)
       }}
       onClose={() => {
-        setEmoji({ icon: '🤖️', icon_background: '#FFEAD5' })
+        setEmoji({ icon: '🤖', icon_background: '#FFEAD5' })
         setShowEmojiPicker(false)
       }}
     />}

web/app/components/share/text-generation/index.tsx

@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import cn from 'classnames'
 import { useBoolean, useClickAway } from 'ahooks'
-import { useContext } from 'use-context-selector'
 import ConfigScence from '@/app/components/share/text-generation/config-scence'
 import NoData from '@/app/components/share/text-generation/no-data'
 // import History from '@/app/components/share/text-generation/history'
@@ -12,6 +11,7 @@ import { fetchAppInfo, fetchAppParams, sendCompletionMessage, updateFeedback, sa
 import type { SiteInfo } from '@/models/share'
 import type { PromptConfig, MoreLikeThisConfig, SavedMessage } from '@/models/debug'
 import Toast from '@/app/components/base/toast'
+import AppIcon from '@/app/components/base/app-icon'
 import { Feedbacktype } from '@/app/components/app/chat'
 import { changeLanguage } from '@/i18n/i18next-config'
 import Loading from '@/app/components/base/loading'
@@ -24,6 +24,7 @@ import s from './style.module.css'
 import Button from '../../base/button'
 import { App } from '@/types/app'
 import { InstalledApp } from '@/models/explore'
+import { appDefaultIconBackground } from '@/config'
 
 export type IMainProps = {
   isInstalledApp?: boolean,
@@ -283,7 +284,7 @@ const TextGeneration: FC<IMainProps> = ({
           <div className='mb-6'>
             <div className='flex justify-between items-center'>
               <div className='flex items-center space-x-3'>
-                <div className={cn(s.appIcon, 'shrink-0')}></div>
+                <AppIcon size="small" icon={siteInfo.icon} background={siteInfo.icon_background || appDefaultIconBackground} />
                 <div className='text-lg text-gray-800 font-semibold'>{siteInfo.title}</div>
               </div>
               {!isPC && (

web/app/components/share/text-generation/style.module.css

@@ -4,13 +4,6 @@
   box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
 }
 
-.appIcon {
-  width: 32px;
-  height: 32px;
-  background: url(./icons/app-icon.svg) center center no-repeat;
-  background-size: contain;
-}
-
 .starIcon {
   width: 16px;
   height: 16px;