chore: reuse the app detail and right meta

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>

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>
   )
 }

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}
         />
       )}

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>
   )
 }

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]' />
 }

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