From 6e9f82491dd749e9ca5674ad8cff7e12c9e5401e Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 23 Oct 2025 15:51:59 +0800
Subject: [PATCH] chore: reuse the app detail and right meta

---
 web/app/components/explore/app-card/index.tsx |  1 -
 .../explore/try-app/app-info/index.tsx        | 38 ++++++++++++++-
 .../components/explore/try-app/app/index.tsx  | 20 +++-----
 web/app/components/explore/try-app/index.tsx  | 48 +++++++++++--------
 .../explore/try-app/preview/index.tsx         | 13 ++---
 web/service/try-app.ts                        |  2 +-
 6 files changed, 75 insertions(+), 47 deletions(-)

diff --git a/web/app/components/explore/app-card/index.tsx b/web/app/components/explore/app-card/index.tsx
index 923c5000a2..1f09575db3 100644
--- a/web/app/components/explore/app-card/index.tsx
+++ b/web/app/components/explore/app-card/index.tsx
@@ -80,7 +80,6 @@ const AppCard = ({
             </Button>
           )}
           {isTrialApp && (
-            // /try/app/${app.app_id}
             <Button className='w-full' onClick={showTryAPPPanel(app.app_id)}>
               <RiInformation2Line className='mr-1 size-4' />
               <span>{t('explore.appCard.try')}</span>
diff --git a/web/app/components/explore/try-app/app-info/index.tsx b/web/app/components/explore/try-app/app-info/index.tsx
index 1452c786cb..1e40bfe56c 100644
--- a/web/app/components/explore/try-app/app-info/index.tsx
+++ b/web/app/components/explore/try-app/app-info/index.tsx
@@ -1,17 +1,51 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
+import AppIcon from '@/app/components/base/app-icon'
+import { AppTypeIcon } from '@/app/components/app/type-selector'
+import { useTranslation } from 'react-i18next'
+import type { TryAppInfo } from '@/service/try-app'
+import cn from '@/utils/classnames'
 
 type Props = {
+  appDetail: TryAppInfo
   className?: string
 }
 
 const AppInfo: FC<Props> = ({
   className,
+  appDetail,
 }) => {
+  const { t } = useTranslation()
+  const mode = appDetail?.mode
   return (
-    <div className={className}>
-      AppInfo Info
+    <div className={cn('px-4 pt-4', className)}>
+      {/* name and icon */}
+      <div className='flex h-[66px] shrink-0 grow-0 items-center gap-3 pb-3'>
+        <div className='relative shrink-0'>
+          <AppIcon
+            size='large'
+            iconType={appDetail.site.icon_type}
+            icon={appDetail.site.icon}
+            background={appDetail.site.icon_background}
+            imageUrl={appDetail.site.icon_url}
+          />
+          <AppTypeIcon wrapperClassName='absolute -bottom-0.5 -right-0.5 w-4 h-4 shadow-sm'
+            className='h-3 w-3' type={mode} />
+        </div>
+        <div className='w-0 grow py-[1px]'>
+          <div className='flex items-center text-sm font-semibold leading-5 text-text-secondary'>
+            <div className='truncate' title={appDetail.name}>{appDetail.name}</div>
+          </div>
+          <div className='flex items-center text-[10px] font-medium leading-[18px] text-text-tertiary'>
+            {mode === 'advanced-chat' && <div className='truncate'>{t('app.types.advanced').toUpperCase()}</div>}
+            {mode === 'chat' && <div className='truncate'>{t('app.types.chatbot').toUpperCase()}</div>}
+            {mode === 'agent-chat' && <div className='truncate'>{t('app.types.agent').toUpperCase()}</div>}
+            {mode === 'workflow' && <div className='truncate'>{t('app.types.workflow').toUpperCase()}</div>}
+            {mode === 'completion' && <div className='truncate'>{t('app.types.completion').toUpperCase()}</div>}
+          </div>
+        </div>
+      </div>
     </div>
   )
 }
diff --git a/web/app/components/explore/try-app/app/index.tsx b/web/app/components/explore/try-app/app/index.tsx
index c4be1d48f9..5569715c64 100644
--- a/web/app/components/explore/try-app/app/index.tsx
+++ b/web/app/components/explore/try-app/app/index.tsx
@@ -3,32 +3,24 @@ 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'
 import useDocumentTitle from '@/hooks/use-document-title'
+import type { TryAppInfo } from '@/service/try-app'
 
 type Props = {
   appId: string
+  appDetail: TryAppInfo
 }
 
 const TryApp: FC<Props> = ({
   appId,
+  appDetail,
 }) => {
-  const { isFetching: isFetchingAppInfo, data: appInfo } = useGetTryAppInfo(appId)
-  const mode = appInfo?.mode
+  const mode = appDetail?.mode
   const isChat = ['chat', 'advanced-chat', 'agent-chat'].includes(mode!)
   const isCompletion = !isChat
 
-  useDocumentTitle(appInfo?.site?.title || '')
-
-  if (isFetchingAppInfo) {
-    return (
-      <div className='flex h-full items-center justify-center'>
-        <Loading type='app' />
-      </div>
-    )
-  }
+  useDocumentTitle(appDetail?.site?.title || '')
   return (
     <div className='flex h-full w-full'>
       {isChat && (
@@ -42,7 +34,7 @@ const TryApp: FC<Props> = ({
           appData={{
             app_id: appId,
             custom_config: {},
-            ...appInfo,
+            ...appDetail,
           } as AppData}
         />
       )}
diff --git a/web/app/components/explore/try-app/index.tsx b/web/app/components/explore/try-app/index.tsx
index 6d19f5ce9b..10da61b772 100644
--- a/web/app/components/explore/try-app/index.tsx
+++ b/web/app/components/explore/try-app/index.tsx
@@ -8,6 +8,8 @@ import { RiCloseLine } from '@remixicon/react'
 import AppInfo from './app-info'
 import App from './app'
 import Preview from './preview'
+import { useGetTryAppInfo } from '@/service/use-try-app'
+import Loading from '@/app/components/base/loading'
 
 type Props = {
   appId: string
@@ -19,33 +21,39 @@ const TryApp: FC<Props> = ({
   onClose,
 }) => {
   const [type, setType] = useState<TypeEnum>(TypeEnum.TRY)
+  const { data: appDetail, isLoading } = useGetTryAppInfo(appId)
+
   return (
     <Modal
       isShow
       onClose={onClose}
       className='h-[calc(100vh-32px)] max-w-[calc(100vw-32px)] p-2'
     >
-      <div className='flex h-full flex-col'>
-        <div className='flex shrink-0 justify-between pl-4'>
-          <Tab
-            value={type}
-            onChange={setType}
-          />
-          <Button
-            size='large'
-            variant='tertiary'
-            className='flex size-7 items-center justify-center rounded-[10px] p-0 text-components-button-tertiary-text'
-            onClick={onClose}
-          >
-            <RiCloseLine className='size-5' onClick={onClose} />
-          </Button>
+      {isLoading ? (<div className='flex h-full items-center justify-center'>
+        <Loading type='area' />
+      </div>) : (
+        <div className='flex h-full flex-col'>
+          <div className='flex shrink-0 justify-between pl-4'>
+            <Tab
+              value={type}
+              onChange={setType}
+            />
+            <Button
+              size='large'
+              variant='tertiary'
+              className='flex size-7 items-center justify-center rounded-[10px] p-0 text-components-button-tertiary-text'
+              onClick={onClose}
+            >
+              <RiCloseLine className='size-5' onClick={onClose} />
+            </Button>
+          </div>
+          {/* Main content */}
+          <div className='mt-2 flex grow justify-between space-x-2'>
+            {type === TypeEnum.TRY ? <App appId={appId} appDetail={appDetail!} /> : <Preview appId={appId} appDetail={appDetail!} />}
+            <AppInfo className='w-[360px]' appDetail={appDetail!} />
+          </div>
         </div>
-        {/* Main content */}
-        <div className='mt-2 flex grow justify-between space-x-2'>
-          {type === TypeEnum.TRY ? <App appId={appId} /> : <Preview appId={appId} />}
-          <AppInfo className='w-[360px]' />
-        </div>
-      </div>
+      )}
     </Modal>
   )
 }
diff --git a/web/app/components/explore/try-app/preview/index.tsx b/web/app/components/explore/try-app/preview/index.tsx
index d8a9640fe0..6c146f9a63 100644
--- a/web/app/components/explore/try-app/preview/index.tsx
+++ b/web/app/components/explore/try-app/preview/index.tsx
@@ -1,25 +1,20 @@
 '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'
+import type { TryAppInfo } from '@/service/try-app'
 
 type Props = {
   appId: string
+  appDetail: TryAppInfo
 }
 
 const Preview: FC<Props> = ({
   appId,
+  appDetail,
 }) => {
-  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>
-  }
+  const isBasicApp = ['agent-chat', 'chat', 'completion'].includes(appDetail.mode)
 
   return isBasicApp ? <BasicAppPreview appId={appId} /> : <FlowAppPreview appId={appId} className='h-[80vh]' />
 }
diff --git a/web/service/try-app.ts b/web/service/try-app.ts
index 9e8b0cfe99..de00e0a6d7 100644
--- a/web/service/try-app.ts
+++ b/web/service/try-app.ts
@@ -11,7 +11,7 @@ import type { DataSetListResponse } from '@/models/datasets'
 import type { Edge, Node } from '@/app/components/workflow/types'
 import type { Viewport } from 'reactflow'
 
-type TryAppInfo = {
+export type TryAppInfo = {
   name: string
   mode: AppMode
   site: SiteInfo