fix: Support passing the default app mode when creating an app (#25142)

Co-authored-by: 王博 <wangbo@localhost.com>

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { useRouter } from 'next/navigation'
@@ -35,14 +35,15 @@ type CreateAppProps = {
   onSuccess: () => void
   onClose: () => void
   onCreateFromTemplate?: () => void
+  defaultAppMode?: AppMode
 }
 
-function CreateApp({ onClose, onSuccess, onCreateFromTemplate }: CreateAppProps) {
+function CreateApp({ onClose, onSuccess, onCreateFromTemplate, defaultAppMode }: CreateAppProps) {
   const { t } = useTranslation()
   const { push } = useRouter()
   const { notify } = useContext(ToastContext)
 
-  const [appMode, setAppMode] = useState<AppMode>('advanced-chat')
+  const [appMode, setAppMode] = useState<AppMode>(defaultAppMode || 'advanced-chat')
   const [appIcon, setAppIcon] = useState<AppIconSelection>({ type: 'emoji', icon: '🤖', background: '#FFEAD5' })
   const [showAppIconPicker, setShowAppIconPicker] = useState(false)
   const [name, setName] = useState('')
@@ -55,6 +56,11 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate }: CreateAppProps)
 
   const isCreatingRef = useRef(false)
 
+  useEffect(() => {
+    if (appMode === 'chat' || appMode === 'agent-chat' || appMode === 'completion')
+      setIsAppTypeExpanded(true)
+  }, [appMode])
+
   const onCreate = useCallback(async () => {
     if (!appMode) {
       notify({ type: 'error', message: t('app.newApp.appTypeRequired') })
@@ -264,7 +270,7 @@ function CreateApp({ onClose, onSuccess, onCreateFromTemplate }: CreateAppProps)
 type CreateAppDialogProps = CreateAppProps & {
   show: boolean
 }
-const CreateAppModal = ({ show, onClose, onSuccess, onCreateFromTemplate }: CreateAppDialogProps) => {
+const CreateAppModal = ({ show, onClose, onSuccess, onCreateFromTemplate, defaultAppMode }: CreateAppDialogProps) => {
   return (
     <FullScreenModal
       overflowVisible
@@ -272,7 +278,7 @@ const CreateAppModal = ({ show, onClose, onSuccess, onCreateFromTemplate }: Crea
       open={show}
       onClose={onClose}
     >
-      <CreateApp onClose={onClose} onSuccess={onSuccess} onCreateFromTemplate={onCreateFromTemplate} />
+      <CreateApp onClose={onClose} onSuccess={onSuccess} onCreateFromTemplate={onCreateFromTemplate} defaultAppMode={defaultAppMode} />
     </FullScreenModal>
   )
 }

web/app/components/apps/list.tsx

@@ -211,14 +211,14 @@ const List = () => {
         {(data && data[0].total > 0)
           ? <div className='relative grid grow grid-cols-1 content-start gap-4 px-12 pt-2 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 2k:grid-cols-6'>
             {isCurrentWorkspaceEditor
-              && <NewAppCard ref={newAppCardRef} onSuccess={mutate} />}
+              && <NewAppCard ref={newAppCardRef} onSuccess={mutate} selectedAppType={activeTab} />}
             {data.map(({ data: apps }) => apps.map(app => (
               <AppCard key={app.id} app={app} onRefresh={mutate} />
             )))}
           </div>
           : <div className='relative grid grow grid-cols-1 content-start gap-4 overflow-hidden px-12 pt-2 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 2k:grid-cols-6'>
             {isCurrentWorkspaceEditor
-              && <NewAppCard ref={newAppCardRef} className='z-10' onSuccess={mutate} />}
+              && <NewAppCard ref={newAppCardRef} className='z-10' onSuccess={mutate} selectedAppType={activeTab} />}
             <Empty />
           </div>}
 

web/app/components/apps/new-app-card.tsx

@@ -26,12 +26,14 @@ export type CreateAppCardProps = {
   className?: string
   onSuccess?: () => void
   ref: React.RefObject<HTMLDivElement | null>
+  selectedAppType?: string
 }
 
 const CreateAppCard = ({
   ref,
   className,
   onSuccess,
+  selectedAppType,
 }: CreateAppCardProps) => {
   const { t } = useTranslation()
   const { onPlanInfoChanged } = useProviderContext()
@@ -86,6 +88,7 @@ const CreateAppCard = ({
             setShowNewAppTemplateDialog(true)
             setShowNewAppModal(false)
           }}
+          defaultAppMode={selectedAppType !== 'all' ? selectedAppType as any : undefined}
         />
       )}
       {showNewAppTemplateDialog && (