feat: different app preview

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}

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)

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)

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)