From 344844d3e0d2dd45b6fb8d72f0a03633f5fcce6e Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 23 Oct 2025 16:53:10 +0800
Subject: [PATCH] chore: handle data is large

---
 .../explore/try-app/app-info/index.tsx        | 34 +++++++++++++++++--
 web/app/components/explore/try-app/index.tsx  |  4 +--
 2 files changed, 34 insertions(+), 4 deletions(-)

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 1e40bfe56c..9e26e687d4 100644
--- a/web/app/components/explore/try-app/app-info/index.tsx
+++ b/web/app/components/explore/try-app/app-info/index.tsx
@@ -6,12 +6,16 @@ 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'
+import Button from '@/app/components/base/button'
+import { RiAddLine } from '@remixicon/react'
 
 type Props = {
   appDetail: TryAppInfo
   className?: string
 }
 
+const headerClassName = 'system-sm-semibold-uppercase text-text-secondary mb-3'
+
 const AppInfo: FC<Props> = ({
   className,
   appDetail,
@@ -19,9 +23,9 @@ const AppInfo: FC<Props> = ({
   const { t } = useTranslation()
   const mode = appDetail?.mode
   return (
-    <div className={cn('px-4 pt-4', className)}>
+    <div className={cn('flex h-full flex-col px-4 pt-2', className)}>
       {/* name and icon */}
-      <div className='flex h-[66px] shrink-0 grow-0 items-center gap-3 pb-3'>
+      <div className='flex shrink-0 grow-0 items-center gap-3'>
         <div className='relative shrink-0'>
           <AppIcon
             size='large'
@@ -46,6 +50,32 @@ const AppInfo: FC<Props> = ({
           </div>
         </div>
       </div>
+      <div className='system-sm-regular mt-[14px] shrink-0 text-text-secondary' >
+        A workflow designed to translate a full book up to 15000 tokens per run. Uses Code node to separate text into chunks
+      </div>
+      <Button variant='primary' className='mt-3 flex w-full max-w-full'>
+        <RiAddLine className='mr-1 size-4 shrink-0' />
+        <span className='truncate'>Create from this sample app</span>
+      </Button>
+
+      <div className='mt-6 shrink-0'>
+        <div className={headerClassName}>Category</div>
+        <div className='system-md-regular text-text-secondary'>AI Coding</div>
+      </div>
+
+      <div className='mt-5 grow overflow-y-auto'>
+        <div className={headerClassName}>Requirements</div>
+        <div className='space-y-0.5'>
+          <div className='flex items-center space-x-2 py-1'>
+            <div className='size-5 rounded-md bg-gray-200 shadow-xs'></div>
+            <div className='system-md-regular w-0 grow truncate text-text-secondary'>LLM Vision supported</div>
+          </div>
+          <div className='flex items-center space-x-2 py-1'>
+            <div className='size-5 rounded-md bg-gray-200 shadow-xs'></div>
+            <div className='system-md-regular w-0 grow truncate text-text-secondary'>xxx</div>
+          </div>
+        </div>
+      </div>
     </div>
   )
 }
diff --git a/web/app/components/explore/try-app/index.tsx b/web/app/components/explore/try-app/index.tsx
index 10da61b772..e5dfd0ca76 100644
--- a/web/app/components/explore/try-app/index.tsx
+++ b/web/app/components/explore/try-app/index.tsx
@@ -48,9 +48,9 @@ const TryApp: FC<Props> = ({
             </Button>
           </div>
           {/* Main content */}
-          <div className='mt-2 flex grow justify-between space-x-2'>
+          <div className='mt-2 flex h-0 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!} />
+            <AppInfo className='w-[360px] shrink-0' appDetail={appDetail!} />
           </div>
         </div>
       )}