chore: refine

api/controllers/console/app/app.py

@@ -95,6 +95,7 @@ def post(self):
         parser.add_argument('data', type=str, required=True, nullable=False, location='json')
         parser.add_argument('name', type=str, location='json')
         parser.add_argument('description', type=str, location='json')
+        parser.add_argument('icon_type', type=str, location='json')
         parser.add_argument('icon', type=str, location='json')
         parser.add_argument('icon_background', type=str, location='json')
         args = parser.parse_args()
@@ -168,6 +169,7 @@ def put(self, app_model):
         parser = reqparse.RequestParser()
         parser.add_argument('name', type=str, required=True, nullable=False, location='json')
         parser.add_argument('description', type=str, location='json')
+        parser.add_argument('icon_type', type=str, location='json')
         parser.add_argument('icon', type=str, location='json')
         parser.add_argument('icon_background', type=str, location='json')
         parser.add_argument('max_active_requests', type=int, location='json')

api/controllers/console/app/site.py

@@ -16,6 +16,7 @@
 def parse_app_site_args():
     parser = reqparse.RequestParser()
     parser.add_argument('title', type=str, required=False, location='json')
+    parser.add_argument('icon_type', type=str, required=False, location='json')
     parser.add_argument('icon', type=str, required=False, location='json')
     parser.add_argument('icon_background', type=str, required=False, location='json')
     parser.add_argument('description', type=str, required=False, location='json')
@@ -53,6 +54,7 @@ def post(self, app_model):
 
         for attr_name in [
             'title',
+            'icon_type',
             'icon',
             'icon_background',
             'description',

api/controllers/console/app/workflow.py

@@ -454,6 +454,7 @@ def post(self, app_model: App):
         if request.data:
             parser = reqparse.RequestParser()
             parser.add_argument('name', type=str, required=False, nullable=True, location='json')
+            parser.add_argument('icon_type', type=str, required=False, nullable=True, location='json')
             parser.add_argument('icon', type=str, required=False, nullable=True, location='json')
             parser.add_argument('icon_background', type=str, required=False, nullable=True, location='json')
             args = parser.parse_args()

api/controllers/web/site.py

@@ -6,6 +6,7 @@
 from controllers.web import api
 from controllers.web.wraps import WebApiResource
 from extensions.ext_database import db
+from libs.helper import AppIconUrlField
 from models.account import TenantStatus
 from models.model import Site
 from services.feature_service import FeatureService
@@ -28,8 +29,10 @@ class AppSiteApi(WebApiResource):
         'title': fields.String,
         'chat_color_theme': fields.String,
         'chat_color_theme_inverted': fields.Boolean,
+        'icon_type': fields.String,
         'icon': fields.String,
         'icon_background': fields.String,
+        'icon_url': AppIconUrlField,
         'description': fields.String,
         'copyright': fields.String,
         'privacy_policy': fields.String,

api/events/event_handlers/create_site_record_when_app_created.py

@@ -11,6 +11,7 @@ def handle(sender, **kwargs):
     site = Site(
         app_id=app.id,
         title=app.name,
+        icon_type = app.icon_type,
         icon = app.icon,
         icon_background = app.icon_background,
         default_language=account.interface_language,

api/fields/app_fields.py

@@ -112,9 +112,10 @@
     'access_token': fields.String(attribute='code'),
     'code': fields.String,
     'title': fields.String,
-    'icon': fields.String,
     'icon_type': fields.String,
+    'icon': fields.String,
     'icon_background': fields.String,
+    'icon_url': AppIconUrlField,
     'description': fields.String,
     'default_language': fields.String,
     'chat_color_theme': fields.String,

api/services/app_dsl_service.py

@@ -210,6 +210,7 @@ def _import_and_create_new_workflow_based_app(cls,
                                                   account: Account,
                                                   name: str,
                                                   description: str,
+                                                  icon_type: str,
                                                   icon: str,
                                                   icon_background: str) -> App:
         """
@@ -221,6 +222,7 @@ def _import_and_create_new_workflow_based_app(cls,
         :param account: Account instance
         :param name: app name
         :param description: app description
+        :param icon_type: app icon type, "emoji" or "image"
         :param icon: app icon
         :param icon_background: app icon background
         """
@@ -234,6 +236,7 @@ def _import_and_create_new_workflow_based_app(cls,
             account=account,
             name=name,
             description=description,
+            icon_type=icon_type,
             icon=icon,
             icon_background=icon_background
         )
@@ -368,6 +371,7 @@ def _create_app(cls,
         :param account: Account instance
         :param name: app name
         :param description: app description
+        :param icon_type: app icon type, "emoji" or "image"
         :param icon: app icon
         :param icon_background: app icon background
         """

api/services/app_service.py

@@ -211,6 +211,7 @@ def update_app(self, app: App, args: dict) -> App:
         app.name = args.get('name')
         app.description = args.get('description', '')
         app.max_active_requests = args.get('max_active_requests')
+        app.icon_type = args.get('icon_type', 'emoji')
         app.icon = args.get('icon')
         app.icon_background = args.get('icon_background')
         app.updated_at = datetime.now(timezone.utc).replace(tzinfo=None)

api/services/workflow/workflow_converter.py

@@ -35,6 +35,7 @@ class WorkflowConverter:
     def convert_to_workflow(self, app_model: App,
                             account: Account,
                             name: str,
+                            icon_type: str,
                             icon: str,
                             icon_background: str) -> App:
         """
@@ -50,6 +51,7 @@ def convert_to_workflow(self, app_model: App,
         :param account: Account
         :param name: new app name
         :param icon: new app icon
+        :param icon_type: new app icon type
         :param icon_background: new app icon background
         :return: new App instance
         """
@@ -66,6 +68,7 @@ def convert_to_workflow(self, app_model: App,
         new_app.name = name if name else app_model.name + '(workflow)'
         new_app.mode = AppMode.ADVANCED_CHAT.value \
             if app_model.mode == AppMode.CHAT.value else AppMode.WORKFLOW.value
+        new_app.icon_type = icon_type if icon_type else app_model.icon_type
         new_app.icon = icon if icon else app_model.icon
         new_app.icon_background = icon_background if icon_background else app_model.icon_background
         new_app.enable_site = app_model.enable_site

api/services/workflow_service.py

@@ -298,6 +298,7 @@ def convert_to_workflow(self, app_model: App, account: Account, args: dict) -> A
             app_model=app_model,
             account=account,
             name=args.get('name'),
+            icon_type=args.get('icon_type'),
             icon=args.get('icon'),
             icon_background=args.get('icon_background'),
         )

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

@@ -75,6 +75,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
 
   const onEdit: CreateAppModalProps['onConfirm'] = useCallback(async ({
     name,
+    icon_type,
     icon,
     icon_background,
     description,
@@ -83,6 +84,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
       await updateAppInfo({
         appID: app.id,
         name,
+        icon_type,
         icon,
         icon_background,
         description,
@@ -363,9 +365,11 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
       {showEditModal && (
         <EditAppModal
           isEditModal
+          appName={app.name}
+          appIconType={app.icon_type}
           appIcon={app.icon}
           appIconBackground={app.icon_background}
-          appName={app.name}
+          appIconUrl={app.icon_url}
           appDescription={app.description}
           show={showEditModal}
           onConfirm={onEdit}

web/app/components/app-sidebar/app-info.tsx

@@ -59,6 +59,7 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
 
   const onEdit: CreateAppModalProps['onConfirm'] = useCallback(async ({
     name,
+    icon_type,
     icon,
     icon_background,
     description,
@@ -69,6 +70,7 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
       const app = await updateAppInfo({
         appID: appDetail.id,
         name,
+        icon_type,
         icon,
         icon_background,
         description,
@@ -415,9 +417,11 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
         {showEditModal && (
           <CreateAppModal
             isEditModal
+            appName={appDetail.name}
+            appIconType={appDetail.icon_type}
             appIcon={appDetail.icon}
             appIconBackground={appDetail.icon_background}
-            appName={appDetail.name}
+            appIconUrl={appDetail.icon_url}
             appDescription={appDetail.description}
             show={showEditModal}
             onConfirm={onEdit}

web/app/components/app/configuration/tools/external-data-tool-modal.tsx

@@ -220,7 +220,6 @@ const ExternalDataToolModal: FC<ExternalDataToolModalProps> = ({
           <AppIcon size='large'
             onClick={() => { setShowEmojiPicker(true) }}
             className='!w-9 !h-9 rounded-lg border-[0.5px] border-black/5 cursor-pointer '
-            iconType="emoji"
             icon={localeData.icon}
             background={localeData.icon_background}
           />

web/app/components/app/configuration/tools/index.tsx

@@ -139,7 +139,6 @@ const Tools = () => {
                   <div className='grow flex items-center'>
                     <AppIcon size='large'
                       className='mr-2 !w-6 !h-6 rounded-md border-[0.5px] border-black/5'
-                      iconType="emoji"
                       icon={item.icon}
                       background={item.icon_background}
                     />

web/app/components/app/duplicate-modal/index.tsx

@@ -1,7 +1,6 @@
 'use client'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import type { AppIconSelection } from '../../base/app-icon-picker'
 import AppIconPicker from '../../base/app-icon-picker'
 import s from './style.module.css'
 import cn from '@/utils/classnames'
@@ -17,14 +16,14 @@ export type DuplicateAppModalProps = {
   appName: string
   icon_type: AppIconType | null
   icon: string
-  icon_background: string
-  icon_url: string
+  icon_background?: string | null
+  icon_url?: string | null
   show: boolean
   onConfirm: (info: {
     name: string
     icon_type: AppIconType
     icon: string
-    icon_background?: string
+    icon_background?: string | null
   }) => Promise<void>
   onHide: () => void
 }
@@ -44,10 +43,10 @@ const DuplicateAppModal = ({
   const [name, setName] = React.useState(appName)
 
   const [showAppIconPicker, setShowAppIconPicker] = useState(false)
-  const [appIcon, setAppIcon] = useState<AppIconSelection>(
+  const [appIcon, setAppIcon] = useState(
     icon_type === 'image'
-      ? { type: 'image', url: icon_url, fileId: icon }
-      : { type: 'emoji', icon, background: icon_background },
+      ? { type: 'image' as const, url: icon_url, fileId: icon }
+      : { type: 'emoji' as const, icon, background: icon_background },
   )
 
   const { plan, enableBilling } = useProviderContext()
@@ -108,8 +107,8 @@ const DuplicateAppModal = ({
         }}
         onClose={() => {
           setAppIcon(icon_type === 'image'
-            ? { type: 'image', url: icon_url, fileId: icon }
-            : { type: 'emoji', icon, background: icon_background })
+            ? { type: 'image', url: icon_url!, fileId: icon }
+            : { type: 'emoji', icon, background: icon_background! })
           setShowAppIconPicker(false)
         }}
       />}

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

@@ -10,11 +10,11 @@ import Button from '@/app/components/base/button'
 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'
+import type { AppIconType, Language } from '@/types/app'
 import { useToastContext } from '@/app/components/base/toast'
-
 import { languages } from '@/i18n/language'
+import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
+import AppIconPicker from '@/app/components/base/app-icon-picker'
 
 export type ISettingsModalProps = {
   isChat: boolean
@@ -35,8 +35,9 @@ export type ConfigParams = {
   copyright: string
   privacy_policy: string
   custom_disclaimer: string
+  icon_type: AppIconType
   icon: string
-  icon_background: string
+  icon_background?: string
   show_workflow_steps: boolean
 }
 
@@ -51,9 +52,12 @@ const SettingsModal: FC<ISettingsModalProps> = ({
 }) => {
   const { notify } = useToastContext()
   const [isShowMore, setIsShowMore] = useState(false)
-  const { icon, icon_background } = appInfo
   const {
     title,
+    icon_type,
+    icon,
+    icon_background,
+    icon_url,
     description,
     chat_color_theme,
     chat_color_theme_inverted,
@@ -76,9 +80,13 @@ const SettingsModal: FC<ISettingsModalProps> = ({
   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 [showAppIconPicker, setShowAppIconPicker] = useState(false)
+  const [appIcon, setAppIcon] = useState<AppIconSelection>(
+    icon_type === 'image'
+      ? { type: 'image', url: icon_url!, fileId: icon }
+      : { type: 'emoji', icon, background: icon_background! },
+  )
 
   useEffect(() => {
     setInputInfo({
@@ -92,7 +100,9 @@ const SettingsModal: FC<ISettingsModalProps> = ({
       show_workflow_steps,
     })
     setLanguage(default_language)
-    setEmoji({ icon, icon_background })
+    setAppIcon(icon_type === 'image'
+      ? { type: 'image', url: icon_url!, fileId: icon }
+      : { type: 'emoji', icon, background: icon_background! })
   }, [appInfo])
 
   const onHide = () => {
@@ -135,8 +145,9 @@ const SettingsModal: FC<ISettingsModalProps> = ({
       copyright: inputInfo.copyright,
       privacy_policy: inputInfo.privacyPolicy,
       custom_disclaimer: inputInfo.customDisclaimer,
-      icon: emoji.icon,
-      icon_background: emoji.icon_background,
+      icon_type: appIcon.type,
+      icon: appIcon.type === 'emoji' ? appIcon.icon : appIcon.fileId,
+      icon_background: appIcon.type === 'emoji' ? appIcon.background : undefined,
       show_workflow_steps: inputInfo.show_workflow_steps,
     }
     await onSave?.(params)
@@ -167,10 +178,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 size='large'
-            onClick={() => { setShowEmojiPicker(true) }}
+            onClick={() => { setShowAppIconPicker(true) }}
             className='cursor-pointer !mr-3 self-center'
-            icon={emoji.icon}
-            background={emoji.icon_background}
+            iconType={appIcon.type}
+            icon={appIcon.type === 'image' ? appIcon.fileId : appIcon.icon}
+            background={appIcon.type === 'image' ? undefined : appIcon.background}
+            imageUrl={appIcon.type === 'image' ? appIcon.url : undefined}
           />
           <input className={`flex-grow rounded-lg h-10 box-border px-3 ${s.projectName} bg-gray-100`}
             value={inputInfo.title}
@@ -250,14 +263,16 @@ const SettingsModal: FC<ISettingsModalProps> = ({
           <Button className='mr-2' onClick={onHide}>{t('common.operation.cancel')}</Button>
           <Button variant='primary' onClick={onClickSave} loading={saveLoading}>{t('common.operation.save')}</Button>
         </div>
-        {showEmojiPicker && <EmojiPicker
-          onSelect={(icon, icon_background) => {
-            setEmoji({ icon, icon_background })
-            setShowEmojiPicker(false)
+        {showAppIconPicker && <AppIconPicker
+          onSelect={(payload) => {
+            setAppIcon(payload)
+            setShowAppIconPicker(false)
           }}
           onClose={() => {
-            setEmoji({ icon: appInfo.site.icon, icon_background: appInfo.site.icon_background })
-            setShowEmojiPicker(false)
+            setAppIcon(icon_type === 'image'
+              ? { type: 'image', url: icon_url!, fileId: icon }
+              : { type: 'emoji', icon, background: icon_background! })
+            setShowAppIconPicker(false)
           }}
         />}
       </Modal >