diff --git a/web/app/components/try/app/index.tsx b/web/app/components/try/app/index.tsx
index 90c9f57677..24c0a9a4e8 100644
--- a/web/app/components/try/app/index.tsx
+++ b/web/app/components/try/app/index.tsx
@@ -3,6 +3,9 @@ import type { FC } from 'react'
 import React from 'react'
 import Chat from './chat'
 import TextGeneration from './text-generation'
+import Loading from '../../base/loading'
+import { useGetTryAppInfo } from '@/service/use-try-app'
+import type { AppData } from '@/models/share'
 
 type Props = {
   appId: string
@@ -11,16 +14,34 @@ type Props = {
 const TryApp: FC<Props> = ({
   appId,
 }) => {
-  // get app type by /trial-apps/<uuid:app_id>
-  const isChat = appId === 'fsVnyqGJbriqnPxK'
+  const { isFetching: isFetchingAppInfo, data: appInfo } = useGetTryAppInfo(appId)
+  const mode = appInfo?.mode
+  const isChat = mode === 'chat'
   const isCompletion = !isChat
+  if (isFetchingAppInfo) {
+    return (
+      <div className='flex h-full items-center justify-center'>
+        <Loading type='app' />
+      </div>
+    )
+  }
+  console.log(appInfo)
   return (
     <div className='flex h-full'>
       {isChat && (
         <Chat appId={appId} className='h-full grow' />
       )}
       {isCompletion && (
-        <TextGeneration appId={appId} className='h-full grow' />
+        <TextGeneration
+          appId={appId}
+          className='h-full grow'
+          isWorkflow={mode === 'workflow'}
+          appData={{
+            app_id: appId,
+            custom_config: {},
+            ...appInfo,
+          } as AppData}
+        />
       )}
       <div className='w-[360px]'>
         Right panel
diff --git a/web/app/components/try/app/text-generation.tsx b/web/app/components/try/app/text-generation.tsx
index 1485cfac6f..f05523223f 100644
--- a/web/app/components/try/app/text-generation.tsx
+++ b/web/app/components/try/app/text-generation.tsx
@@ -5,34 +5,25 @@ import cn from '@/utils/classnames'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import AppIcon from '@/app/components/base/app-icon'
 import MenuDropdown from '@/app/components/share/text-generation/menu-dropdown'
-import type { SiteInfo } from '@/models/share'
-import type { VisionFile, VisionSettings } from '@/types/app'
-import { Resolution, TransferMethod } from '@/types/app'
-import type { MoreLikeThisConfig, PromptConfig, TextToSpeechConfig } from '@/models/debug'
-import { userInputsFormToPromptVariables } from '@/utils/model-config'
-import { useWebAppStore } from '@/context/web-app-context'
-import { useGetTryAppInfo, useGetTryAppParams } from '@/service/use-try-app'
 import Loading from '@/app/components/base/loading'
 import { appDefaultIconBackground } from '@/config'
 import RunOnce from '../../share/text-generation/run-once'
-import { useBoolean } from 'ahooks'
-import Res from '@/app/components/share/text-generation/result'
-import type { Task } from '../../share/text-generation/types'
-import { TaskStatus } from '../../share/text-generation/types'
-import { noop } from 'lodash'
-import { AppSourceType } from '@/service/share'
+import { useWebAppStore } from '@/context/web-app-context'
+import type { AppData } from '@/models/share'
 
 type Props = {
   appId: string
   className?: string
+  isWorkflow?: boolean
+  appData: AppData | null
 }
 
 const TextGeneration: FC<Props> = ({
   appId,
   className,
+  isWorkflow,
+  appData,
 }) => {
-  // const { t } = useTranslation()
-  const isWorkflow = true // wait for detail app info to decide // app.mode === 'completion' ｜ 'workflow'
   const media = useBreakpoints()
   const isPC = media === MediaType.pc
 
@@ -42,125 +33,126 @@ const TextGeneration: FC<Props> = ({
     doSetInputs(newInputs)
     inputsRef.current = newInputs
   }, [])
+  console.log(isPC, setInputs)
 
-  const { isFetching: isFetchingAppInfo, data: appInfo } = useGetTryAppInfo()
   const updateAppInfo = useWebAppStore(s => s.updateAppInfo)
-  const appData = useWebAppStore(s => s.appInfo)
-  const { data: tryAppParams } = useGetTryAppParams()
-  const updateAppParams = useWebAppStore(s => s.updateAppParams)
-  const appParams = useWebAppStore(s => s.appParams)
-  const [siteInfo, setSiteInfo] = useState<SiteInfo | null>(null)
-  const [promptConfig, setPromptConfig] = useState<PromptConfig | null>(null)
-  const [customConfig, setCustomConfig] = useState<Record<string, any> | null>(null)
-  const [moreLikeThisConfig, setMoreLikeThisConfig] = useState<MoreLikeThisConfig | null>(null)
-  const [textToSpeechConfig, setTextToSpeechConfig] = useState<TextToSpeechConfig | null>(null)
-  const [controlSend, setControlSend] = useState(0)
-  const [visionConfig, setVisionConfig] = useState<VisionSettings>({
-    enabled: false,
-    number_limits: 2,
-    detail: Resolution.low,
-    transfer_methods: [TransferMethod.local_file],
-  })
-  const [completionFiles, setCompletionFiles] = useState<VisionFile[]>([])
-  const [isShowResultPanel, { setTrue: doShowResultPanel, setFalse: hideResultPanel }] = useBoolean(false)
-  const showResultPanel = () => {
-    // fix: useClickAway hideResSidebar will close sidebar
-    setTimeout(() => {
-      doShowResultPanel()
-    }, 0)
-  }
+  // const { data: tryAppParams } = useGetTryAppParams()
+  // const updateAppParams = useWebAppStore(s => s.updateAppParams)
+  // const appParams = useWebAppStore(s => s.appParams)
+  // const [siteInfo, setSiteInfo] = useState<SiteInfo | null>(null)
+  // const [promptConfig, setPromptConfig] = useState<PromptConfig | null>(null)
+  // const [customConfig, setCustomConfig] = useState<Record<string, any> | null>(null)
+  // const [moreLikeThisConfig, setMoreLikeThisConfig] = useState<MoreLikeThisConfig | null>(null)
+  // const [textToSpeechConfig, setTextToSpeechConfig] = useState<TextToSpeechConfig | null>(null)
+  // const [controlSend, setControlSend] = useState(0)
+  // const [visionConfig, setVisionConfig] = useState<VisionSettings>({
+  //   enabled: false,
+  //   number_limits: 2,
+  //   detail: Resolution.low,
+  //   transfer_methods: [TransferMethod.local_file],
+  // })
+  // const [completionFiles, setCompletionFiles] = useState<VisionFile[]>([])
+  // const [isShowResultPanel, { setTrue: doShowResultPanel, setFalse: hideResultPanel }] = useBoolean(false)
+  // const showResultPanel = () => {
+  //   // fix: useClickAway hideResSidebar will close sidebar
+  //   setTimeout(() => {
+  //     doShowResultPanel()
+  //   }, 0)
+  // }
 
-  const handleSend = () => {
-    setControlSend(Date.now())
-    showResultPanel()
-  }
+  // const handleSend = () => {
+  //   setControlSend(Date.now())
+  //   showResultPanel()
+  // }
 
-  const [resultExisted, setResultExisted] = useState(false)
+  // const [resultExisted, setResultExisted] = useState(false)
 
   useEffect(() => {
-    if (!appInfo) return
-    updateAppInfo(appInfo)
-  }, [appInfo, updateAppInfo])
+    if (!appData) return
+    updateAppInfo(appData)
+  }, [appData, updateAppInfo])
 
-  useEffect(() => {
-    if (!tryAppParams) return
-    updateAppParams(tryAppParams)
-  }, [tryAppParams, updateAppParams])
+  // useEffect(() => {
+  //   if (!tryAppParams) return
+  //   updateAppParams(tryAppParams)
+  // }, [tryAppParams, updateAppParams])
 
-  useEffect(() => {
-    (async () => {
-      if (!appData || !appParams)
-        return
-      const { site: siteInfo, custom_config } = appData
-      setSiteInfo(siteInfo as SiteInfo)
-      setCustomConfig(custom_config)
+  // useEffect(() => {
+  //   (async () => {
+  //     if (!appData || !appParams)
+  //       return
+  //     const { site: siteInfo, custom_config } = appData
+  //     setSiteInfo(siteInfo as SiteInfo)
+  //     setCustomConfig(custom_config)
 
-      const { user_input_form, more_like_this, file_upload, text_to_speech }: any = appParams
-      setVisionConfig({
-          // legacy of image upload compatible
-        ...file_upload,
-        transfer_methods: file_upload?.allowed_file_upload_methods || file_upload?.allowed_upload_methods,
-          // legacy of image upload compatible
-        image_file_size_limit: appParams?.system_parameters.image_file_size_limit,
-        fileUploadConfig: appParams?.system_parameters,
-      } as any)
-      const prompt_variables = userInputsFormToPromptVariables(user_input_form)
-      setPromptConfig({
-        prompt_template: '', // placeholder for future
-        prompt_variables,
-      } as PromptConfig)
-      setMoreLikeThisConfig(more_like_this)
-      setTextToSpeechConfig(text_to_speech)
-    })()
-  }, [appData, appParams])
+  //     const { user_input_form, more_like_this, file_upload, text_to_speech }: any = appParams
+  //     setVisionConfig({
+  //         // legacy of image upload compatible
+  //       ...file_upload,
+  //       transfer_methods: file_upload?.allowed_file_upload_methods || file_upload?.allowed_upload_methods,
+  //         // legacy of image upload compatible
+  //       image_file_size_limit: appParams?.system_parameters.image_file_size_limit,
+  //       fileUploadConfig: appParams?.system_parameters,
+  //     } as any)
+  //     const prompt_variables = userInputsFormToPromptVariables(user_input_form)
+  //     setPromptConfig({
+  //       prompt_template: '', // placeholder for future
+  //       prompt_variables,
+  //     } as PromptConfig)
+  //     setMoreLikeThisConfig(more_like_this)
+  //     setTextToSpeechConfig(text_to_speech)
+  //   })()
+  // }, [appData, appParams])
 
-  const handleCompleted = noop
+  // const handleCompleted = noop
 
-  const renderRes = (task?: Task) => (<Res
-    key={task?.id}
-    isWorkflow={isWorkflow}
-    isCallBatchAPI={false}
-    isPC={isPC}
-    isMobile={!isPC}
-    appSourceType={AppSourceType.webApp} // todo for call the api
-    appId={appId}
-    isError={task?.status === TaskStatus.failed}
-    promptConfig={promptConfig}
-    moreLikeThisEnabled={!!moreLikeThisConfig?.enabled}
-    inputs={inputs}
-    controlSend={controlSend}
-    onShowRes={showResultPanel}
-    handleSaveMessage={noop}
-    taskId={task?.id}
-    onCompleted={handleCompleted}
-    visionConfig={visionConfig}
-    completionFiles={completionFiles}
-    isShowTextToSpeech={!!textToSpeechConfig?.enabled}
-    siteInfo={siteInfo}
-    onRunStart={() => setResultExisted(true)}
-  />)
+  // const renderRes = (task?: Task) => (<Res
+  //   key={task?.id}
+  //   isWorkflow={isWorkflow}
+  //   isCallBatchAPI={false}
+  //   isPC={isPC}
+  //   isMobile={!isPC}
+  //   appSourceType={AppSourceType.installedApp}
+  //   appId={appId}
+  //   isError={task?.status === TaskStatus.failed}
+  //   promptConfig={promptConfig}
+  //   moreLikeThisEnabled={!!moreLikeThisConfig?.enabled}
+  //   inputs={inputs}
+  //   controlSend={controlSend}
+  //   onShowRes={showResultPanel}
+  //   handleSaveMessage={noop}
+  //   taskId={task?.id}
+  //   onCompleted={handleCompleted}
+  //   visionConfig={visionConfig}
+  //   completionFiles={completionFiles}
+  //   isShowTextToSpeech={!!textToSpeechConfig?.enabled}
+  //   siteInfo={siteInfo}
+  //   onRunStart={() => setResultExisted(true)}
+  // />)
 
-  const renderResWrap = (
-    <div
-      className={cn(
-        'relative flex h-full flex-col',
-        !isPC && 'h-[calc(100vh_-_36px)] rounded-t-2xl shadow-lg backdrop-blur-sm',
-        !isPC
-          ? isShowResultPanel
-            ? 'bg-background-default-burn'
-            : 'border-t-[0.5px] border-divider-regular bg-components-panel-bg'
-          : 'bg-chatbot-bg',
-      )}
-    >
-      <div className={cn(
-        'flex h-0 grow flex-col overflow-y-auto',
-        isPC && 'px-14 py-8',
-        !isPC && 'p-0 pb-2',
-      )}>
-        {renderRes()}
-      </div>
-    </div>
-  )
+  // const renderResWrap = (
+  //   <div
+  //     className={cn(
+  //       'relative flex h-full flex-col',
+  //       !isPC && 'h-[calc(100vh_-_36px)] rounded-t-2xl shadow-lg backdrop-blur-sm',
+  //       !isPC
+  //         ? isShowResultPanel
+  //           ? 'bg-background-default-burn'
+  //           : 'border-t-[0.5px] border-divider-regular bg-components-panel-bg'
+  //         : 'bg-chatbot-bg',
+  //     )}
+  //   >
+  //     <div className={cn(
+  //       'flex h-0 grow flex-col overflow-y-auto',
+  //       isPC && 'px-14 py-8',
+  //       !isPC && 'p-0 pb-2',
+  //     )}>
+  //       {renderRes()}
+  //     </div>
+  //   </div>
+  // )
+
+  return (<div>xxxx</div>)
 
   // console.log(siteInfo, promptConfig)
 
diff --git a/web/service/try-app.ts b/web/service/try-app.ts
index 05a55e0c51..9425e1a71f 100644
--- a/web/service/try-app.ts
+++ b/web/service/try-app.ts
@@ -1,11 +1,16 @@
 import {
-  getPublic as get,
+  get,
 } from './base'
 import type {
-  AppData,
+  SiteInfo,
 } from '@/models/share'
 
-// would use trial-apps after api is ok
-export const fetchTryAppInfo = async () => {
-  return get('/site') as Promise<AppData>
+type TryAppInfo = {
+  name: string
+  mode: 'chat' | 'text-generation' | 'workflow'
+  site: SiteInfo
+}
+
+export const fetchTryAppInfo = async (appId: string) => {
+  return get(`/trial-apps/${appId}`) as Promise<TryAppInfo>
 }
diff --git a/web/service/use-try-app.ts b/web/service/use-try-app.ts
index c3a686dbcb..1350997990 100644
--- a/web/service/use-try-app.ts
+++ b/web/service/use-try-app.ts
@@ -4,11 +4,11 @@ import { AppSourceType, fetchAppParams } from './share'
 
 const NAME_SPACE = 'try-app'
 
-export const useGetTryAppInfo = () => {
+export const useGetTryAppInfo = (appId: string) => {
   return useQuery({
     queryKey: [NAME_SPACE, 'appInfo'],
     queryFn: () => {
-      return fetchTryAppInfo()
+      return fetchTryAppInfo(appId)
     },
   })
 }