From cc02b78acac04c619e2254ec30df58d4ab56d8b9 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 16 Oct 2025 11:27:58 +0800
Subject: [PATCH] feat: different app preview

---
 .../configuration/dataset-config/index.tsx    |  2 +-
 .../basic-app-preview.tsx}                    |  6 ++---
 .../preview/flow-app-preview.tsx              | 18 +++++++++++++
 .../app/configuration/preview/index.tsx       | 26 +++++++++++++++++++
 4 files changed, 48 insertions(+), 4 deletions(-)
 rename web/app/components/app/configuration/{preview.tsx => preview/basic-app-preview.tsx} (99%)
 create mode 100644 web/app/components/app/configuration/preview/flow-app-preview.tsx
 create mode 100644 web/app/components/app/configuration/preview/index.tsx

diff --git a/web/app/components/app/configuration/dataset-config/index.tsx b/web/app/components/app/configuration/dataset-config/index.tsx
index 081d1d5b69..6fcdc1a079 100644
--- a/web/app/components/app/configuration/dataset-config/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/index.tsx
@@ -310,7 +310,7 @@ const DatasetConfig: FC<Props> = ({ readonly, hideMetadataFilter }) => {
         </div>
       )}
 
-      {mode === AppType.completion && dataSet.length > 0 && (
+      {!readonly && mode === AppType.completion && dataSet.length > 0 && (
         <ContextVar
           value={selectedContextVar?.key}
           options={promptVariablesToSelect}
diff --git a/web/app/components/app/configuration/preview.tsx b/web/app/components/app/configuration/preview/basic-app-preview.tsx
similarity index 99%
rename from web/app/components/app/configuration/preview.tsx
rename to web/app/components/app/configuration/preview/basic-app-preview.tsx
index 138cd192ae..67f4429ef1 100644
--- a/web/app/components/app/configuration/preview.tsx
+++ b/web/app/components/app/configuration/preview/basic-app-preview.tsx
@@ -26,7 +26,7 @@ import { useGetTryAppDataSets, useGetTryAppInfo } from '@/service/use-try-app'
 import { noop } from 'lodash'
 import { correctModelProvider, correctToolProvider } from '@/utils'
 import { userInputsFormToPromptVariables } from '@/utils/model-config'
-import { useTextGenerationCurrentProviderAndModelAndModelList } from '../../header/account-setting/model-provider-page/hooks'
+import { useTextGenerationCurrentProviderAndModelAndModelList } from '../../../header/account-setting/model-provider-page/hooks'
 import { useAllToolProviders } from '@/service/use-tools'
 import { basePath } from '@/utils/var'
 
@@ -55,7 +55,7 @@ const defaultModelConfig = {
   dataSets: [],
   agentConfig: DEFAULT_AGENT_SETTING,
 }
-const Configuration: FC<Props> = ({
+const BasicAppPreview: FC<Props> = ({
   appId,
 }) => {
   const media = useBreakpoints()
@@ -358,4 +358,4 @@ const Configuration: FC<Props> = ({
     </ConfigContext.Provider>
   )
 }
-export default React.memo(Configuration)
+export default React.memo(BasicAppPreview)
diff --git a/web/app/components/app/configuration/preview/flow-app-preview.tsx b/web/app/components/app/configuration/preview/flow-app-preview.tsx
new file mode 100644
index 0000000000..f374f6a1d5
--- /dev/null
+++ b/web/app/components/app/configuration/preview/flow-app-preview.tsx
@@ -0,0 +1,18 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+
+type Props = {
+  appId: string
+}
+
+const FlowAppPreview: FC<Props> = ({
+  appId,
+}) => {
+  return (
+    <div>
+      {appId}
+    </div>
+  )
+}
+export default React.memo(FlowAppPreview)
diff --git a/web/app/components/app/configuration/preview/index.tsx b/web/app/components/app/configuration/preview/index.tsx
new file mode 100644
index 0000000000..e1455f757a
--- /dev/null
+++ b/web/app/components/app/configuration/preview/index.tsx
@@ -0,0 +1,26 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useGetTryAppInfo } from '@/service/use-try-app'
+import BasicAppPreview from './basic-app-preview'
+import FlowAppPreview from './flow-app-preview'
+import Loading from '@/app/components/base/loading'
+
+type Props = {
+  appId: string
+}
+
+const Preview: FC<Props> = ({
+  appId,
+}) => {
+  const { data: appDetail, isLoading } = useGetTryAppInfo(appId)
+  const isBasicApp = appDetail ? ['agent-chat', 'chat', 'completion'].includes(appDetail.mode) : false
+  if (isLoading) {
+    return <div className='flex h-full items-center justify-center'>
+      <Loading type='area' />
+    </div>
+  }
+
+  return isBasicApp ? <BasicAppPreview appId={appId} /> : <FlowAppPreview appId={appId} />
+}
+export default React.memo(Preview)